/* ==========================================================================
   BioBoost - pages interieures, style clair.
   Les pages gardent leur structure et leurs textes d'origine : cette feuille
   redonne un habillage clair a leurs briques historiques (hero-v2, sec-head,
   service-brutal, why-card, process, faq...). Elle s'appuie sur meta.css
   (couleurs, formes, boutons, menu) et sur les themes par service :
   --c (teinte vive), --c-ink (texte), --c-soft (fond pale).
   ========================================================================== */

/* ----------------------------------------------------------- sections */
main > section,
main > div > section,
main > .legal-wrap, main > .legal-cta, main > .legal-note, main > article, main > header {
  --inset: max(var(--gutter), calc((100% - var(--page)) / 2 + var(--gutter)));
  padding: var(--section) var(--inset);
}
main > section:nth-of-type(even):not(.cta-final-wrap):not(.telemetry-wrap):not(.hero-v2) { background: var(--bg-alt); }

.sec-head { max-width: 46rem; margin-bottom: clamp(2rem, 4vw, 3rem); }
.sec-title {
  font-size: clamp(1.85rem, 3.4vw, 2.75rem); font-weight: 800;
  letter-spacing: -0.03em; line-height: 1.1; margin-bottom: 0.9rem; text-wrap: balance;
}
.sec-title .accent, .accent { color: var(--c-ink, var(--red)); }
.sec-desc { color: var(--ink-2); font-size: 1.08rem; max-width: 60ch; text-wrap: pretty; }
.sec-desc b, .sec-desc strong { color: var(--ink); font-weight: 600; }

/* texte courant */
main b, main strong { font-weight: 600; }
main p a:not(.btn):not(.btn-red):not(.btn-ghost), .inline-link { color: var(--c-ink, var(--red)); text-decoration: underline; text-underline-offset: 3px; }

/* --------------------------------------------------------------- hero */
.hero-v2 { position: relative; overflow: hidden; overflow: clip; padding-top: clamp(2.5rem, 6vw, 4.5rem) !important; }
.hero-v2::before {
  content: ''; position: absolute; z-index: 0; pointer-events: none;
  width: 720px; height: 720px; top: -260px; right: -180px; border-radius: 50%;
  background: radial-gradient(circle, var(--c-soft, var(--red-soft)) 0%, transparent 62%);
  animation: drift-1 18s ease-in-out infinite;
}
.hero-v2-grid { position: relative; z-index: 1; display: grid; gap: clamp(2.25rem, 5vw, 4rem); align-items: center; grid-template-columns: 1fr; }
.hero-v2-grid > * { min-width: 0; }
@media (min-width: 980px) { .hero-v2-grid:not(.is-single) { grid-template-columns: 1.15fr 0.85fr; } }
.hero-v2-grid.is-single > * { max-width: 52rem; }
.hero-v2-grid.is-single > .text-center, .hero-v2 .text-center { margin-inline: auto; text-align: center; }

.hero-v2-eyebrow {
  display: inline-flex; align-items: center; gap: 0.6rem;
  padding: 0.45rem 1rem 0.45rem 0.75rem; margin-bottom: 1.4rem;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-pill);
  box-shadow: var(--shadow-1); font-weight: 600; font-size: 0.92rem; color: var(--c-ink, var(--ink));
}
.hero-v2-eyebrow::before {
  content: ''; flex: 0 0 auto; width: 9px; height: 9px; border-radius: 50%;
  background: var(--c, var(--red)); box-shadow: 0 0 0 4px var(--c-soft, var(--red-soft));
  animation: pulse-dot 2.4s ease-in-out infinite;
}
@keyframes pulse-dot { 50% { box-shadow: 0 0 0 7px var(--c-soft, var(--red-soft)); } }

.hero-v2-title {
  font-size: clamp(2.3rem, 4.6vw, 3.4rem); font-weight: 800;
  line-height: 1.04; letter-spacing: -0.035em; margin-bottom: 1.25rem; text-wrap: balance;
}
.hero-v2-title br { display: none; }
.hero-v2-title .outline { color: var(--ink); }
.hero-v2-title .theme { display: block; color: var(--c-ink, var(--red)); margin-top: 0.15em; }
.hero-v2-desc { font-size: clamp(1.05rem, 1.4vw, 1.18rem); color: var(--ink-2); max-width: 56ch; text-wrap: pretty; }
.text-center .hero-v2-desc, .hero-v2-desc.mx-auto { margin-inline: auto; }
.hero-v2-desc b { color: var(--ink); font-weight: 600; }

.hero-v2-chips { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 1.6rem; }
.hero-v2-chips.justify-center, .text-center .hero-v2-chips { justify-content: center; }
.hero-v2-chip {
  display: inline-flex; align-items: center; gap: 0.5rem;
  padding: 0.45rem 0.9rem; border-radius: var(--r-pill);
  background: var(--surface); border: 1px solid var(--line); font-weight: 600; font-size: 0.9rem;
}
.hero-v2-chip i { color: var(--c-ink, var(--red)); font-size: 0.85em; }
.hero-v2-actions { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 2rem; }
.text-center .hero-v2-actions, .hero-v2-actions.justify-center { justify-content: center; }

/* anciens boutons : meme dessin que les boutons du site */
.btn-red, .btn-ghost, .btn-hero-primary, .btn-hero-secondary, .btn-v2, .legal-btn-primary, .legal-btn-secondary {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.55rem;
  min-height: 48px; padding: 0.8rem 1.5rem; border-radius: var(--r-pill); border: 1px solid transparent;
  font-weight: 700; font-size: 1rem; line-height: 1; white-space: nowrap; cursor: pointer;
  transition: background 0.2s var(--ease), transform 0.15s var(--ease), border-color 0.2s var(--ease);
}
.btn-red, .btn-hero-primary, .btn-v2, .legal-btn-primary { background: var(--red); color: #fff; }
.btn-red:hover, .btn-hero-primary:hover, .btn-v2:hover, .legal-btn-primary:hover { background: var(--red-hover); }
.btn-ghost, .btn-hero-secondary, .btn-v2.ghost, .btn-v2.outline, .legal-btn-secondary { background: var(--bg-alt); color: var(--ink); }
.btn-ghost:hover, .btn-hero-secondary:hover, .btn-v2.ghost:hover, .btn-v2.outline:hover, .legal-btn-secondary:hover { background: var(--hover-2); }
.btn-red:active, .btn-ghost:active, .btn-hero-primary:active, .btn-hero-secondary:active, .btn-v2:active { transform: scale(0.98); }

/* fiche produit (remplace l'ancienne scene 3D) */
.fiche {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-card);
  box-shadow: var(--shadow-2); padding: clamp(1.4rem, 3vw, 2rem);
}
.fiche-top { display: flex; align-items: center; gap: 1rem; margin-bottom: 1.25rem; }
.fiche-ic {
  flex: 0 0 auto; width: 52px; height: 52px; border-radius: 16px; display: grid; place-items: center;
  background: var(--c-soft, var(--red-soft)); color: var(--c-ink, var(--red)); font-size: 1.25rem;
}
.fiche-k { font-weight: 700; font-size: 1.1rem; line-height: 1.2; }
.fiche-price { color: var(--ink-2); margin-top: 0.2rem; }
.fiche-price b { font-size: 1.6rem; font-weight: 800; color: var(--c-ink, var(--ink)); letter-spacing: -0.02em; }
.fiche-rows { margin: 0 0 1.4rem; padding: 0.35rem 1.1rem; background: var(--surface-2); border-radius: 16px; }
.fiche-rows > div { display: grid; grid-template-columns: 7.5rem 1fr; gap: 0.75rem; padding: 0.75rem 0; }
.fiche-rows > div + div { border-top: 1px solid var(--line); }
.fiche-rows dt { color: var(--ink-3); font-size: 0.9rem; font-weight: 600; }
.fiche-rows dd { margin: 0; font-weight: 600; font-size: 0.95rem; }
.fiche-note { margin-top: 0.9rem; font-size: 0.82rem; color: var(--ink-3); }
@media (max-width: 420px) { .fiche-rows > div { grid-template-columns: 1fr; gap: 0.15rem; } }

/* ------------------------------------------------ bande de chiffres (telemetry) */
.telemetry-wrap { border-block: 1px solid var(--line); padding-block: 0 !important; }
.telemetry-wrap .sec-head { display: none; }
.telemetry-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }
.telemetry-cell { padding: 1.9rem 1.25rem; text-align: center; }
.telemetry-cell + .telemetry-cell { border-left: 1px solid var(--line); }
@media (max-width: 689px) {
  .telemetry-grid { grid-template-columns: 1fr; }
  .telemetry-cell + .telemetry-cell { border-left: 0; border-top: 1px solid var(--line); }
}
.telemetry-value {
  font-size: clamp(2rem, 3.6vw, 2.6rem); font-weight: 800; letter-spacing: -0.035em; line-height: 1.05;
  color: var(--c-ink, var(--ink)); font-variant-numeric: tabular-nums;
}
.telemetry-value .unit { font-size: 0.5em; font-weight: 700; margin-left: 0.2em; letter-spacing: -0.01em; }
.telemetry-label { margin-top: 0.35rem; color: var(--ink-2); font-size: 0.95rem; }

/* ------------------------------------------------------- cartes de service */
.service-brutal-grid, .ex-grid, .options-grid, .loc-svc-grid, .option-grid, .svc-grid, .blog-grid, .testi-grid, .opt-mini-grid, .real-grid {
  display: grid; gap: 1.25rem; grid-template-columns: 1fr;
}
@media (min-width: 720px) {
  .service-brutal-grid, .ex-grid, .options-grid, .loc-svc-grid, .option-grid, .svc-grid, .blog-grid, .testi-grid, .opt-mini-grid, .real-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1040px) {
  .service-brutal-grid.cols-3, .ex-grid, .loc-svc-grid, .testi-grid, .real-grid { grid-template-columns: repeat(3, 1fr); }
  .option-grid, .opt-mini-grid, .svc-grid { grid-template-columns: repeat(4, 1fr); }
}
.service-brutal {
  position: relative; display: flex; flex-direction: column;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-card);
  padding: clamp(1.5rem, 3vw, 2rem);
  transition: box-shadow 0.25s var(--ease), transform 0.25s var(--ease), border-color 0.25s var(--ease);
}
.service-brutal:hover { box-shadow: var(--shadow-2); transform: translateY(-2px); border-color: var(--line-2); }
.service-brutal::before, .why-card::before, .loc-svc::before, .option-card::before, .blog-card::before {
  content: ''; position: absolute; top: 0; left: 24px; right: 24px; height: 3px;
  border-radius: 0 0 3px 3px; background: var(--c, var(--red));
  transform: scaleX(0); transition: transform 0.45s var(--ease);
}
.service-brutal:hover::before, .why-card:hover::before, .loc-svc:hover::before, .option-card:hover::before, .blog-card:hover::before { transform: scaleX(1); }
.service-brutal-num { display: flex; align-items: center; gap: 0.75rem; margin-bottom: 1.1rem; font-weight: 600; font-size: 0.92rem; color: var(--c-ink, var(--red)); }
.service-brutal-num i {
  flex: 0 0 auto; width: 44px; height: 44px; border-radius: 13px; display: grid; place-items: center;
  background: var(--c-soft, var(--red-soft)); color: var(--c-ink, var(--red)); font-size: 1.05rem;
  transition: background 0.25s var(--ease), color 0.25s var(--ease);
}
.service-brutal:hover .service-brutal-num i { background: var(--c, var(--red)); color: #fff; }
.service-brutal-title { font-size: clamp(1.3rem, 2vw, 1.55rem); font-weight: 800; letter-spacing: -0.02em; line-height: 1.15; margin-bottom: 0.65rem; }
.service-brutal-title span { display: block; font-size: 0.72em; font-weight: 600; color: var(--c-ink, var(--ink-2)); letter-spacing: -0.01em; margin-top: 0.2rem; }
.service-brutal-desc { color: var(--ink-2); margin-bottom: 1.25rem; }
.service-brutal-desc b { color: var(--ink); }
.service-brutal-metrics { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-top: auto; }
.service-brutal-metric { flex: 1 1 8rem; padding: 0.8rem 1rem; border-radius: 14px; background: var(--surface-2); }
main > section:nth-of-type(even) .service-brutal-metric { background: var(--c-soft, var(--bg-alt)); }
.service-brutal-metric .v { font-size: 1.3rem; font-weight: 800; letter-spacing: -0.02em; color: var(--c-ink, var(--ink)); line-height: 1.2; }
.service-brutal-metric .l { font-size: 0.85rem; color: var(--ink-2); margin-top: 0.15rem; }
.ex-grid .service-brutal-metric:first-child:not(:last-child) .v { color: var(--ink-3); }
.ex-grid .service-brutal-metric .v { font-size: 1.12rem; }
.service-brutal-cta { display: inline-flex; align-items: center; gap: 0.45rem; margin-top: 1.25rem; font-weight: 700; }
.service-brutal-cta i { font-size: 0.8em; color: var(--c-ink, var(--red)); transition: transform 0.2s var(--ease); }
.service-brutal:hover .service-brutal-cta i { transform: translateX(3px); }
a.service-brutal { color: inherit; }

/* listes a coches (tarifs, inclus) */
.price-feature, .service-brutal ul li { display: flex; gap: 0.6rem; align-items: flex-start; color: var(--ink-2); padding: 0.3rem 0; }
.price-feature i, .service-brutal ul li i { color: var(--c-ink, var(--red)); margin-top: 0.3rem; font-size: 0.85rem; flex: 0 0 auto; }
.service-brutal ul { margin: 0 0 1.25rem; }

/* themes des cartes et cellules (anciens noms) */
.perf, .w-red, .p-red, .tel-red, .t-red { --c: #e30613; --c-ink: #d10512; --c-soft: #fdecee; }
.e85, .w-green, .p-green, .tel-green, .green { --c: #10b981; --c-ink: #047857; --c-soft: #e6f8f1; }
.coding, .w-blue, .p-blue, .tel-blue, .blue { --c: #007aff; --c-ink: #0062cc; --c-soft: #e8f2ff; }
.gold, .w-gold, .p-gold, .tel-gold { --c: #f5a623; --c-ink: #b45309; --c-soft: #fef5e2; }
.diag, .w-cyan, .p-cyan, .tel-cyan, .cyan { --c: #06b6d4; --c-ink: #0e7490; --c-soft: #e5f7fa; }
.echap, .w-orange, .p-orange, .tel-orange, .orange { --c: #f97316; --c-ink: #c2410c; --c-soft: #fff0e6; }
.decal, .w-violet, .p-violet, .tel-violet, .violet { --c: #8b5cf6; --c-ink: #6d28d9; --c-soft: #f1ebfe; }
.fap, .w-teal, .p-teal, .tel-teal, .teal { --c: #14b8a6; --c-ink: #0f766e; --c-soft: #e5f6f4; }
.tc-red { color: #d10512; } .tc-green { color: #047857; } .tc-blue { color: #0062cc; } .tc-gold { color: #b45309; }
.tc-cyan { color: #0e7490; } .tc-orange { color: #c2410c; } .tc-violet { color: #6d28d9; } .tc-teal { color: #0f766e; }

/* ----------------------------------------------------------- processus */
.process-grid { position: relative; display: grid; gap: 1.5rem; grid-template-columns: 1fr; }
@media (min-width: 720px) { .process-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1040px) {
  .process-grid.cols-4 { grid-template-columns: repeat(4, 1fr); }
  .process-grid.cols-5 { grid-template-columns: repeat(5, 1fr); }
  .process-grid.cols-3 { grid-template-columns: repeat(3, 1fr); }
  .process-grid::before, .process-grid::after { content: ''; position: absolute; top: 15px; left: 16px; right: 16px; height: 2px; z-index: 0; }
  .process-grid::before { background: var(--line-2); }
  .process-grid::after { background: var(--c, var(--red)); transform-origin: 0 50%; transform: scaleX(0.02); }
  @supports (animation-timeline: view()) {
    .process-grid::after { animation: bar-grow linear both; animation-timeline: view(); animation-range: entry 40% cover 55%; }
  }
}
@media (prefers-reduced-motion: reduce) { .process-grid::after { transform: scaleX(1); animation: none; } }
.process-step { position: relative; z-index: 1; }
.process-num { margin-bottom: 1rem; }
.process-num span {
  display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: var(--r-pill);
  background: var(--c, var(--ink)); color: #fff; font-weight: 800; font-size: 0.85rem;
  box-shadow: 0 0 0 5px var(--bg); transition: transform 0.3s var(--ease);
}
main > section:nth-of-type(even) .process-num span { box-shadow: 0 0 0 5px var(--bg-alt); }
.process-step:hover .process-num span { transform: scale(1.12); }
.process-title { font-size: 1.1rem; font-weight: 700; margin-bottom: 0.45rem; }
.process-desc { font-size: 0.95rem; color: var(--ink-2); }

/* -------------------------------------------------------- points forts */
.why-grid { display: grid; gap: 1rem; grid-template-columns: 1fr; }
@media (min-width: 640px) { .why-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .why-grid.cols-3 { grid-template-columns: repeat(3, 1fr); } .why-grid.cols-4 { grid-template-columns: repeat(4, 1fr); } }
.why-card {
  position: relative; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-card);
  padding: 1.5rem; transition: border-color 0.25s var(--ease), box-shadow 0.25s var(--ease);
}
.why-card:hover { border-color: var(--line-2); box-shadow: var(--shadow-2); }
.why-card > i:first-child {
  width: 44px; height: 44px; border-radius: 13px; display: grid; place-items: center; margin-bottom: 1rem;
  background: var(--c-soft, var(--red-soft)); color: var(--c-ink, var(--red)); font-size: 1.05rem;
  transition: background 0.25s var(--ease), color 0.25s var(--ease);
}
.why-card:hover > i:first-child { background: var(--c, var(--red)); color: #fff; }
.why-card h3 { font-size: 1.1rem; font-weight: 700; margin-bottom: 0.45rem; line-height: 1.25; }
.why-card p { color: var(--ink-2); font-size: 0.96rem; }
.why-card p + p { margin-top: 0.6rem; }

/* FAQ sous forme de cartes depliables */
details.why-card { padding: 0; }
details.why-card::before { display: none; }
details.why-card summary {
  list-style: none; cursor: pointer; display: flex; align-items: center; gap: 0.85rem;
  padding: 1.15rem 1.25rem; font-weight: 700; font-size: 1.04rem; line-height: 1.35;
}
details.why-card summary::-webkit-details-marker { display: none; }
details.why-card summary > i { flex: 0 0 auto; width: 36px; height: 36px; border-radius: 11px; display: grid; place-items: center; background: var(--c-soft, var(--red-soft)); color: var(--c-ink, var(--red)); font-size: 0.9rem; }
details.why-card summary::after {
  content: '+'; margin-left: auto; flex: 0 0 auto; width: 30px; height: 30px; border-radius: var(--r-pill);
  display: grid; place-items: center; background: var(--bg-alt); font-weight: 500; font-size: 1.15rem;
  transition: transform 0.25s var(--ease);
}
details.why-card[open] summary::after { transform: rotate(45deg); }
details.why-card > p, details.why-card > div { padding: 0 1.25rem 1.25rem; color: var(--ink-2); }
details.why-card + details.why-card { margin-top: 0.75rem; }
.faq-wrap .reveal > details.why-card, .faq-wrap > details.why-card { max-width: 56rem; }

/* ------------------------------------------------------------ zone */
.brands-grid, .zone-grid { display: flex; flex-wrap: wrap; gap: 0.6rem; }
.brand-chip, .zone-chip {
  display: inline-flex; align-items: center; gap: 0.5rem;
  padding: 0.6rem 1.05rem; border-radius: var(--r-pill);
  background: var(--surface); border: 1px solid var(--line-2); font-weight: 600; font-size: 0.95rem;
  transition: border-color 0.2s var(--ease), background 0.2s var(--ease), color 0.2s var(--ease);
}
a.brand-chip:hover, a.zone-chip:hover { border-color: var(--c, var(--ink-3)); color: var(--c-ink, var(--ink)); }
.brand-chip.active, .zone-chip.active { border-color: var(--c, var(--red)); background: var(--c-soft, var(--red-soft)); color: var(--c-ink, var(--red)); }
.zone-chip i { color: var(--c-ink, var(--red)); font-size: 0.85em; }
.zone-chip .cp { color: var(--ink-3); font-weight: 500; font-size: 0.85rem; }

/* ------------------------------------------------------------- FAQ */
.faq-item { max-width: 56rem; border-bottom: 1px solid var(--line); }
.faq-item summary {
  list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 1.5rem;
  padding: 1.25rem 0; font-weight: 700; font-size: 1.08rem; line-height: 1.35;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: '+'; flex: 0 0 auto; width: 32px; height: 32px; border-radius: var(--r-pill);
  display: grid; place-items: center; background: var(--bg-alt); font-size: 1.2rem; font-weight: 500;
  transition: transform 0.25s var(--ease), background 0.25s var(--ease), color 0.25s var(--ease);
}
main > section:nth-of-type(even) .faq-item summary::after { background: var(--surface); }
.faq-item[open] summary::after { transform: rotate(45deg); background: var(--c, var(--red)); color: #fff; }
.faq-item summary:hover { color: var(--c-ink, var(--ink)); }
.faq-body, .faq-item > p, .faq-item > div { padding: 0 3rem 1.4rem 0; color: var(--ink-2); text-wrap: pretty; }
.faq-body b { color: var(--ink); }

/* ----------------------------------------------------------- guide */
.guide-block { max-width: 60rem; }
.guide-block h3 { display: flex; align-items: center; gap: 0.75rem; font-size: 1.35rem; font-weight: 800; margin: 2.25rem 0 0.9rem; }
.guide-block h3:first-child { margin-top: 0; }
.guide-block h3 i { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: var(--c-soft, var(--red-soft)); color: var(--c-ink, var(--red)); font-size: 0.95rem; }
.guide-block p { color: var(--ink-2); margin-bottom: 0.9rem; }
.guide-block p b { color: var(--ink); }
.guide-split { display: grid; gap: 1rem; grid-template-columns: 1fr; margin: 1rem 0 0.5rem; }
@media (min-width: 720px) { .guide-split { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .guide-split:has(> :nth-child(3)) { grid-template-columns: repeat(3, 1fr); } }
.guide-mini { background: var(--surface); border: 1px solid var(--line); border-radius: 18px; padding: 1.25rem 1.35rem; }
.guide-mini.hl { background: var(--c-soft, var(--red-soft)); border-color: transparent; }
.guide-mini h4 { font-size: 1.02rem; font-weight: 700; margin-bottom: 0.6rem; }
.guide-mini li { padding: 0.45rem 0; color: var(--ink-2); font-size: 0.95rem; }
.guide-mini li + li { border-top: 1px solid var(--line); }
.guide-mini.hl li + li { border-top-color: var(--line); }
.guide-mini li b { color: var(--ink); }

/* ------------------------------------------------------- appel final */
.cta-final-wrap { padding-top: clamp(1rem, 3vw, 2rem) !important; }
.cta-final-block {
  background: var(--invert); border: 1px solid var(--line); color: #fff; border-radius: 28px; padding: clamp(2.25rem, 6vw, 4rem);
  display: grid; gap: 2.25rem; align-items: center; grid-template-columns: 1fr;
  position: relative; overflow: hidden; overflow: clip;
}
.cta-final-block::before {
  content: ''; position: absolute; width: 520px; height: 520px; right: -160px; top: -220px; border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--c, var(--red)) 38%, transparent), transparent 65%);
  pointer-events: none;
}
.cta-final-block > * { position: relative; }
@media (min-width: 900px) { .cta-final-block { grid-template-columns: 1.3fr 1fr; } }
.cta-final-title { font-size: clamp(1.85rem, 3.4vw, 2.75rem); font-weight: 800; letter-spacing: -0.03em; line-height: 1.1; margin-bottom: 0.9rem; text-wrap: balance; }
.cta-final-title .theme { color: var(--c, var(--red)); }
.cta-final-desc { color: rgba(255, 255, 255, 0.72); max-width: 46ch; }
.cta-final-desc b { color: #fff; }
.cta-final-actions { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 1.75rem; }
.cta-final-block .btn-ghost, .cta-final-block .btn-hero-secondary, .cta-final-block .btn-v2.ghost, .cta-final-block .btn-v2.outline {
  background: transparent; color: #fff; border-color: rgba(255, 255, 255, 0.28);
}
.cta-final-block .btn-ghost:hover, .cta-final-block .btn-hero-secondary:hover { background: rgba(255, 255, 255, 0.08); }
.cta-final-visual { background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 20px; padding: 1.5rem; }
.cta-final-visual-header { font-weight: 700; font-size: 0.95rem; color: rgba(255, 255, 255, 0.6); margin-bottom: 0.75rem; }
.cta-final-list li { display: flex; gap: 0.7rem; align-items: flex-start; padding: 0.55rem 0; }
.cta-final-list li + li { border-top: 1px solid rgba(255, 255, 255, 0.08); }
.cta-final-list i { color: var(--c, var(--red)); margin-top: 0.3rem; font-size: 0.85rem; flex: 0 0 auto; }
.cta-final-list a { color: #fff; text-decoration: underline; text-underline-offset: 3px; }

/* ------------------------------------------------ lectures liees, liens */
.related-grid, .bb-links-grid, .article-links { display: grid; gap: 0.75rem; grid-template-columns: 1fr; }
@media (min-width: 720px) { .related-grid, .bb-links-grid, .article-links { grid-template-columns: repeat(3, 1fr); } }

/* ------------------------------------------------ utilitaires conserves */
.muted { color: var(--ink-2); }
.fw-800 { font-weight: 800; }
.font-bold { font-weight: 700; }
.text-center { text-align: center; }
.text-left { text-align: left; }
.mx-auto { margin-inline: auto; }
.w-full { width: 100%; }
.hidden { display: none; }
.relative { position: relative; }
.block { display: block; }
.flex { display: flex; }
.grid { display: grid; }
.flex-col { flex-direction: column; }
.items-center { align-items: center; }
.justify-between { justify-content: space-between; }
.justify-center { justify-content: center; }
.gap-3 { gap: 0.75rem; }
.space-y-3 > * + * { margin-top: 0.75rem; }
.space-y-5 > * + * { margin-top: 1.25rem; }
.grid-cols-1 { grid-template-columns: 1fr; }
@media (min-width: 768px) {
  .md\:grid-cols-2 { grid-template-columns: repeat(2, 1fr); }
  .md\:flex-row { flex-direction: row; }
  .md\:items-center { align-items: center; }
  .md\:justify-between { justify-content: space-between; }
}
.overflow-x-auto { overflow-x: auto; }
.max-w-md { max-width: 28rem; }
.max-w-4xl { max-width: 56rem; }
.mt-1 { margin-top: 0.25rem; } .mt-4 { margin-top: 1rem; } .mt-8 { margin-top: 2rem; }
.mb-3 { margin-bottom: 0.75rem; } .mb-6 { margin-bottom: 1.5rem; } .mb-8 { margin-bottom: 2rem; }
.mr-1 { margin-right: 0.25rem; } .mr-2 { margin-right: 0.5rem; }
.p-3 { padding: 0.75rem; }
.text-sm { font-size: 0.9rem; }
.text-xl { font-size: 1.25rem; }
.underline { text-decoration: underline; text-underline-offset: 3px; }

@media (prefers-reduced-motion: reduce) {
  .hero-v2::before, .hero-v2-eyebrow::before { animation: none; }
  .service-brutal, .why-card, .service-brutal::before, .why-card::before { transition: none; }
}

/* reflet qui suit le curseur (souris uniquement), comme sur l'accueil */
@media (hover: hover) and (pointer: fine) {
  .service-brutal, .why-card:not(details), .loc-svc, .option-card, .blog-card {
    background-image: radial-gradient(420px circle at var(--mx, -500px) var(--my, -500px), var(--c-soft, var(--red-soft)), transparent 45%);
  }
}

/* ---------------------------------------------- simulateur de gains */
.sim-block {
  max-width: 60rem; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-card);
  box-shadow: var(--shadow-2); padding: clamp(1.4rem, 3vw, 2.25rem);
}
.sim-top { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; margin-bottom: 0.75rem; }
.sim-top label { font-weight: 700; }
.sim-top output { font-size: clamp(1.6rem, 3vw, 2rem); font-weight: 800; letter-spacing: -0.03em; color: var(--c-ink, var(--red)); font-variant-numeric: tabular-nums; }
.sim-range { width: 100%; height: 28px; margin: 0; background: transparent; -webkit-appearance: none; appearance: none; cursor: pointer; }
.sim-range::-webkit-slider-runnable-track { height: 6px; border-radius: 99px; background: linear-gradient(90deg, var(--c, var(--red)), var(--c-soft, var(--red-soft))); }
.sim-range::-moz-range-track { height: 6px; border-radius: 99px; background: linear-gradient(90deg, var(--c, var(--red)), var(--c-soft, var(--red-soft))); }
.sim-range::-webkit-slider-thumb {
  -webkit-appearance: none; width: 26px; height: 26px; margin-top: -10px; border-radius: 50%;
  background: var(--surface); border: 2px solid var(--c, var(--red)); box-shadow: 0 2px 8px rgba(21, 23, 26, 0.18);
  transition: transform 0.15s var(--ease);
}
.sim-range::-moz-range-thumb { width: 22px; height: 22px; border-radius: 50%; background: var(--surface); border: 2px solid var(--c, var(--red)); box-shadow: 0 2px 8px rgba(21, 23, 26, 0.18); }
.sim-range:active::-webkit-slider-thumb { transform: scale(1.12); }
.sim-scale { display: flex; justify-content: space-between; font-size: 0.85rem; color: var(--ink-3); margin-top: 0.35rem; }
.sim-chart-wrap { position: relative; height: 300px; margin: 1.5rem 0; }
@media (max-width: 600px) { .sim-chart-wrap { height: 240px; } }
.sim-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem; }
.sim-stat { padding: 1rem 1.2rem; border-radius: 16px; background: var(--c-soft, var(--red-soft)); }
.sim-stat .l { font-size: 0.88rem; color: var(--ink-2); font-weight: 600; }
.sim-stat .v { font-size: clamp(1.5rem, 3vw, 1.9rem); font-weight: 800; letter-spacing: -0.03em; color: var(--c-ink, var(--red)); font-variant-numeric: tabular-nums; }
.sim-cta { margin-top: 1.5rem; text-align: center; }

/* ------------------------------------------------ a lire aussi */
.related-wrap { padding-block: clamp(2.5rem, 5vw, 4rem) !important; }
.related-title { font-size: 1.35rem; font-weight: 800; letter-spacing: -0.02em; margin-bottom: 1rem; }
.related-links { display: flex; flex-wrap: wrap; gap: 0.6rem; }
.related-link {
  display: inline-flex; align-items: center; gap: 0.6rem;
  padding: 0.7rem 1.15rem; border-radius: var(--r-pill); background: var(--surface); border: 1px solid var(--line-2);
  font-weight: 600; transition: border-color 0.2s var(--ease), color 0.2s var(--ease);
}
.related-link i { font-size: 0.75em; color: var(--c-ink, var(--red)); transition: transform 0.2s var(--ease); }
.related-link:hover { border-color: var(--c, var(--ink-3)); color: var(--c-ink, var(--ink)); }
.related-link:hover i { transform: translateX(3px); }

/* icone en debut de paragraphe (guide) */
.guide-block p > i:first-child, .guide-wrap p > i:first-child { margin-right: 0.5rem; color: var(--c-ink, var(--red)); }

/* ---------------------------------------------- calculateur E85 */
.roi-block {
  max-width: 52rem; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-card);
  box-shadow: var(--shadow-2); padding: clamp(1.4rem, 3vw, 2.25rem);
}
.roi-grid { display: grid; gap: 0.9rem; grid-template-columns: 1fr; }
@media (min-width: 560px) { .roi-grid { grid-template-columns: 1fr 1fr; } }
.roi-field label { display: block; font-size: 0.88rem; font-weight: 600; color: var(--ink-2); margin-bottom: 0.4rem; }
.roi-field input {
  width: 100%; min-height: 50px; padding: 0.7rem 0.95rem; font-size: 1.1rem; font-weight: 700;
  border: 1px solid var(--line-2); border-radius: var(--r-field); background: var(--surface);
  font-variant-numeric: tabular-nums; transition: border-color 0.2s var(--ease), box-shadow 0.2s var(--ease);
}
.roi-field input:focus { outline: none; border-color: var(--c, var(--red)); box-shadow: 0 0 0 4px var(--c-soft, var(--red-soft)); }
.roi-compare { display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem; margin: 1.25rem 0; }
.roi-fuel { padding: 1rem 1.2rem; border-radius: 16px; background: var(--surface-2); }
.roi-fuel .k { font-size: 0.88rem; font-weight: 600; color: var(--ink-2); }
.roi-fuel .v { font-size: 1.35rem; font-weight: 800; letter-spacing: -0.02em; color: var(--ink-3); text-decoration: line-through; text-decoration-thickness: 2px; }
.roi-fuel.e85 { background: var(--c-soft, #e6f8f1); }
.roi-fuel.e85 .v { color: var(--c-ink, #047857); text-decoration: none; }
.roi-result { text-align: center; padding: 1.5rem 1rem; border-radius: 18px; background: var(--c-soft, #e6f8f1); }
.roi-result .k { font-weight: 600; color: var(--ink-2); }
.roi-result .v { font-size: clamp(2.4rem, 6vw, 3.4rem); font-weight: 800; letter-spacing: -0.04em; line-height: 1.1; color: var(--c-ink, #047857); font-variant-numeric: tabular-nums; }
.roi-result .sub { color: var(--ink-2); }
.roi-result .sub b { color: var(--ink); }
.roi-note { margin-top: 0.9rem; font-size: 0.82rem; color: var(--ink-3); text-align: center; }
.roi-cta { margin-top: 1.25rem; text-align: center; }

/* ---------------------------------------------- coding : options par marque */
.spec-list { margin: 0 0 1.25rem; }
.spec-list li { position: relative; padding: 0.5rem 0 0.5rem 1.4rem; color: var(--ink-2); }
.spec-list li + li { border-top: 1px solid var(--line); }
.spec-list li::before { content: ''; position: absolute; left: 0; top: 1.02rem; width: 8px; height: 8px; border-radius: 50%; background: var(--c, var(--red)); }
.option-card, .opt-mini, .loc-svc, .svc-card {
  position: relative; display: flex; flex-direction: column; gap: 0.35rem;
  background: var(--surface); border: 1px solid var(--line); border-radius: 18px; padding: 1.25rem;
  transition: border-color 0.25s var(--ease), box-shadow 0.25s var(--ease), transform 0.25s var(--ease);
}
.option-card:hover, .opt-mini:hover, .loc-svc:hover, .svc-card:hover { border-color: var(--line-2); box-shadow: var(--shadow-2); }
a.loc-svc:hover, a.svc-card:hover { transform: translateY(-2px); border-color: var(--c, var(--line-2)); }
.opt-icon, .o-ico, .loc-svc > i, .svc-card > i {
  width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; flex: 0 0 auto;
  background: var(--c-soft, var(--red-soft)); color: var(--c-ink, var(--red)); margin-bottom: 0.5rem;
  transition: background 0.25s var(--ease), color 0.25s var(--ease);
}
.option-card:hover .opt-icon, .opt-mini:hover .o-ico, .loc-svc:hover > i, .svc-card:hover > i { background: var(--c, var(--red)); color: #fff; }
.opt-title, .opt-mini h3, .loc-svc h3, .svc-card h3 { font-size: 1.05rem; font-weight: 700; line-height: 1.3; }
.opt-desc, .opt-mini p, .loc-svc p, .svc-card p { font-size: 0.93rem; color: var(--ink-2); }
.loc-svc .go { margin-top: auto; padding-top: 0.6rem; font-weight: 700; font-size: 0.92rem; color: var(--c-ink, var(--red)); }

/* options : catalogue */
.opt-mini > .flex { margin-bottom: 0.1rem; }
.opt-mini .o-ico { margin-bottom: 0; }
.o-num { font-size: 0.8rem; font-weight: 700; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.o-tag { margin-top: auto; align-self: flex-start; padding: 0.3rem 0.75rem; border-radius: var(--r-pill); background: var(--surface-2); font-size: 0.8rem; font-weight: 600; color: var(--ink-2); }
.opt-mini p + .o-tag { margin-top: auto; }
.o-tag.warn { background: var(--warn-bg); color: var(--warn-ink); }
.o-tag.ok { background: var(--ok-bg); color: var(--ok-ink); }

/* cadre legal (options, echappement, FAP) */
.legal-inner, .legal-note {
  max-width: 58rem; background: #fff8eb; border: 1px solid #f3d7a7; border-radius: 20px; padding: 1.5rem 1.75rem;
}
.legal-head { display: flex; align-items: center; gap: 0.6rem; font-weight: 700; font-size: 0.92rem; color: var(--warn-ink); margin-bottom: 0.75rem; }
.legal-inner h3 { margin-bottom: 0.75rem; }
.legal-inner p + p, .legal-note p + p { margin-top: 0.6rem; }
.legal-note h3 { display: flex; align-items: center; gap: 0.6rem; font-size: 1.1rem; font-weight: 700; color: var(--warn-ink); margin-bottom: 0.6rem; }
.legal-note h3 i { color: var(--warn-ink); }
.legal-note p, .legal-note-inner p { color: var(--ink-2); }
.legal-note b { color: var(--ink); }
.legal-note-inner { display: flex; gap: 1rem; align-items: flex-start; }
.legal-note-inner > i { flex: 0 0 auto; width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: var(--warn-ic); color: var(--warn-ink); }
section > .legal-note { margin-top: clamp(1.5rem, 3vw, 2.25rem); }
section > .legal-note.is-lead { margin: 0 0 clamp(2rem, 4vw, 3rem); }

/* communes : contexte local */
.local-block { max-width: 62rem; }
.local-block p { color: var(--ink-2); font-size: 1.06rem; }
.local-block p + p { margin-top: 1rem; }
.local-block b { color: var(--ink); }

/* FAQ ouverte (question en titre, reponse dessous) */
div.faq-item { padding: 1.3rem 0; }
div.faq-item:first-child { padding-top: 0; }
div.faq-item h3 { display: flex; gap: 0.75rem; align-items: flex-start; font-size: 1.1rem; font-weight: 700; line-height: 1.35; margin-bottom: 0.5rem; }
div.faq-item h3 i { flex: 0 0 auto; width: 32px; height: 32px; border-radius: 10px; display: grid; place-items: center; background: var(--c-soft, var(--red-soft)); color: var(--c-ink, var(--red)); font-size: 0.82rem; margin-top: -0.15rem; }
div.faq-item p { color: var(--ink-2); padding-left: calc(32px + 0.75rem); }
div.faq-item p b { color: var(--ink); }

/* bloc rattache a la section precedente (grille d'options, note legale) */
section > .option-grid { margin-top: clamp(1.5rem, 3vw, 2.25rem); }

/* grilles de cartes : 3 colonnes des qu'il y a 3, 5 ou 6 cartes (jamais une carte seule sur sa ligne) */
@media (min-width: 1040px) {
  .service-brutal-grid:has(> :nth-child(3):last-child),
  .service-brutal-grid:has(> :nth-child(5)) { grid-template-columns: repeat(3, 1fr); }
  .why-grid:has(> :nth-child(3):last-child) { grid-template-columns: repeat(3, 1fr); }
}

/* ==========================================================================
   ARTICLES (blog, a propos) : colonne de lecture confortable
   ========================================================================== */
main > .article-hero, main > .article-wrap, main > article > .article-head, main > article > .article-body {
  max-width: 46rem; margin-inline: auto; box-sizing: content-box;
}
main > article:not(.article-wrap) > .article-head, main > article:not(.article-wrap) > .article-body { box-sizing: border-box; }
main > .article-hero { padding-bottom: 0; }
main > .article-wrap { padding-top: clamp(2rem, 4vw, 3rem); }
.article-head { padding-bottom: clamp(1.5rem, 3vw, 2rem); margin-bottom: clamp(2rem, 4vw, 2.75rem); border-bottom: 1px solid var(--line); }
.article-hero::after { content: ''; display: block; height: 1px; background: var(--line); margin-top: clamp(1.5rem, 3vw, 2rem); }
.article-breadcrumb, .crumb { display: flex; flex-wrap: wrap; align-items: center; gap: 0.45rem; font-size: 0.9rem; color: var(--ink-3); margin-bottom: 1.25rem; }
.article-breadcrumb a:hover, .crumb a:hover { color: var(--ink); text-decoration: underline; }
.sep { color: var(--line-2); }
.article-kicker, .blog-cat {
  display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.4rem 0.9rem; margin-bottom: 1.1rem;
  border-radius: var(--r-pill); background: var(--c-soft, var(--red-soft)); color: var(--c-ink, var(--red));
  font-weight: 600; font-size: 0.88rem;
}
.article-h1, .article-hero h1 {
  font-size: clamp(2.1rem, 4.4vw, 3rem); font-weight: 800; letter-spacing: -0.035em; line-height: 1.08;
  text-wrap: balance; margin-bottom: 1rem;
}
.lede, .article-body .lead { font-size: clamp(1.1rem, 1.6vw, 1.24rem); color: var(--ink-2); line-height: 1.6; text-wrap: pretty; }
.article-meta, .article-hero .meta { display: flex; flex-wrap: wrap; gap: 0.5rem 1.4rem; margin-top: 1.25rem; font-size: 0.92rem; color: var(--ink-3); }
.article-meta i, .article-hero .meta i { margin-right: 0.4rem; color: var(--c-ink, var(--red)); }
.article-meta a { text-decoration: underline; text-underline-offset: 3px; }

.article-body, .article-wrap { font-size: 1.08rem; line-height: 1.75; color: var(--prose); }
.article-body p, .article-wrap p { margin: 0 0 1.1rem; }
.article-body h2, .article-wrap h2 {
  font-size: clamp(1.5rem, 2.6vw, 1.9rem); font-weight: 800; letter-spacing: -0.025em; line-height: 1.2;
  margin: 2.75rem 0 1rem; text-wrap: balance; color: var(--ink);
}
.article-body h3, .article-wrap h3 { font-size: 1.25rem; font-weight: 700; line-height: 1.3; margin: 2rem 0 0.75rem; color: var(--ink); }
.article-body > h2:first-child, .article-wrap > h2:first-child { margin-top: 0; }
.article-body ul, .article-body ol, .article-wrap ul, .article-wrap ol { margin: 0 0 1.25rem; padding-left: 1.35rem; list-style: disc; }
.article-body ol, .article-wrap ol { list-style: decimal; }
.article-body li, .article-wrap li { margin: 0.45rem 0; padding-left: 0.2rem; }
.article-body li::marker, .article-wrap li::marker { color: var(--c, var(--red)); font-weight: 700; }
.article-body b, .article-body strong, .article-wrap b, .article-wrap strong { color: var(--ink); font-weight: 650; }
.article-body a:not([class]), .article-wrap a:not([class]), .article-note a, .bb-note a { color: var(--c-ink, var(--red)); text-decoration: underline; text-underline-offset: 3px; }

/* tableaux */
.article-table-wrap, .bb-table-scroll { overflow-x: auto; margin: 1.5rem 0 1.75rem; border: 1px solid var(--line); border-radius: 16px; background: var(--surface); }
.article-table, .bb-table, .cookie-table { width: 100%; border-collapse: collapse; font-size: 0.95rem; line-height: 1.45; }
.article-table th, .bb-table th, .cookie-table th { text-align: left; background: var(--surface-2); font-weight: 700; padding: 0.8rem 1rem; white-space: nowrap; color: var(--ink); }
.article-table td, .bb-table td, .cookie-table td { padding: 0.75rem 1rem; border-top: 1px solid var(--line); vertical-align: top; }
.article-table tr:hover td, .bb-table tr:hover td { background: var(--surface-2); }
.article-table .gain, .bb-table .gain { color: var(--c-ink, var(--red)); font-weight: 700; white-space: nowrap; }
td.ok, .article-table .ok { color: var(--ok-ink); font-weight: 600; }
td.warn, .article-table .warn { color: var(--warn-ink); font-weight: 600; }

/* encadres */
.article-note, .bb-note {
  margin: 1.5rem 0; padding: 1.1rem 1.3rem; border-radius: 16px;
  background: var(--c-soft, var(--red-soft)); font-size: 1rem; line-height: 1.65;
}
.article-note i:first-child { color: var(--c-ink, var(--red)); margin-right: 0.45rem; }
.bb-callout { margin: 2rem 0; padding: 1.35rem 1.5rem; border-radius: 18px; background: var(--surface); border: 1px solid var(--line); border-left: 4px solid var(--c, var(--red)); }
.bb-callout h3 { margin-top: 0; }
.bb-callout p:last-child { margin-bottom: 0; }
.article-quote { margin: 1.75rem 0; padding: 0.4rem 0 0.4rem 1.25rem; border-left: 4px solid var(--c, var(--red)); font-size: 1.2rem; font-weight: 600; line-height: 1.5; color: var(--ink); }
.bb-duo { display: grid; gap: 1rem; grid-template-columns: 1fr; margin: 1.5rem 0; }
@media (min-width: 640px) { .bb-duo { grid-template-columns: 1fr 1fr; } }
.bb-duo-card { padding: 1.3rem 1.4rem; border: 1px solid var(--line); border-radius: 18px; background: var(--surface); font-size: 1rem; }
.bb-duo-card.hl { background: var(--c-soft, var(--red-soft)); border-color: transparent; }
.bb-duo-card h3 { margin-top: 0.25rem !important; }
.bb-duo-card ul { margin-bottom: 0; }
.tag { display: inline-block; font-size: 0.82rem; font-weight: 700; color: var(--c-ink, var(--red)); }
.bb-steps { counter-reset: st; list-style: none !important; padding-left: 0 !important; }
.bb-steps li { counter-increment: st; position: relative; padding: 0.2rem 0 0.2rem 2.75rem !important; margin: 0.9rem 0 !important; }
.bb-steps li::before {
  content: counter(st); position: absolute; left: 0; top: 0.15rem; width: 30px; height: 30px; border-radius: 50%;
  display: grid; place-items: center; background: var(--c, var(--red)); color: #fff; font-weight: 800; font-size: 0.85rem;
}

/* liens de fin d'article */
.bb-links { margin-top: 2.75rem; }
.bb-links-head { font-weight: 800; font-size: 1.15rem; color: var(--ink); margin-bottom: 0.9rem; }
.bb-links-grid, .article-links { display: grid; gap: 0.75rem; grid-template-columns: 1fr; margin-top: 1rem; }
@media (min-width: 640px) { .bb-links-grid, .article-links { grid-template-columns: repeat(2, 1fr); } }
.bb-links-grid a, .article-link-card {
  display: flex; flex-direction: column; gap: 0.15rem; padding: 1rem 1.2rem; border-radius: 16px;
  background: var(--surface); border: 1px solid var(--line); font-size: 0.98rem; font-weight: 600; line-height: 1.4; color: var(--ink);
  text-decoration: none !important; transition: border-color 0.2s var(--ease), box-shadow 0.2s var(--ease), transform 0.2s var(--ease);
}
.bb-links-grid a:hover, .article-link-card:hover { border-color: var(--c, var(--line-2)); box-shadow: var(--shadow-1); transform: translateY(-2px); }
.alc-tt { font-weight: 700; color: var(--ink); }
.alc-ds { font-size: 0.9rem; font-weight: 500; color: var(--ink-2); }
.bb-cta-final { margin-top: 3rem; padding: clamp(1.75rem, 4vw, 2.5rem); border-radius: 24px; background: var(--invert); color: rgba(255, 255, 255, 0.75); }
.bb-cta-final h2 { color: #fff !important; margin-top: 0 !important; }
.bb-cta-final b, .bb-cta-final strong { color: #fff; }
.bb-cta-actions { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 1.25rem; }
.bb-cta-final .btn-ghost { background: transparent; color: #fff; border-color: rgba(255, 255, 255, 0.28); }
.bb-cta-final .btn-ghost:hover { background: rgba(255, 255, 255, 0.08); }
.article-body .faq-item, .article-wrap .faq-item { font-size: 1rem; }
.article-body .faq-item summary, .article-wrap .faq-item summary { font-size: 1.05rem; }

/* ==========================================================================
   BLOG : liste des articles
   ========================================================================== */
.blog-card {
  position: relative; display: flex; flex-direction: column; gap: 0.6rem;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-card); padding: clamp(1.4rem, 3vw, 1.9rem);
  transition: border-color 0.25s var(--ease), box-shadow 0.25s var(--ease), transform 0.25s var(--ease);
}
.blog-card:hover { box-shadow: var(--shadow-2); transform: translateY(-2px); border-color: var(--line-2); }
.blog-card .blog-cat { align-self: flex-start; margin-bottom: 0.4rem; }
.blog-card h2 { font-size: clamp(1.25rem, 2vw, 1.45rem); font-weight: 800; letter-spacing: -0.02em; line-height: 1.2; }
.blog-card p { color: var(--ink-2); }
.blog-more { margin-top: auto; padding-top: 0.5rem; display: inline-flex; align-items: center; gap: 0.45rem; font-weight: 700; }
.blog-more i { font-size: 0.8em; color: var(--c-ink, var(--red)); transition: transform 0.2s var(--ease); }
.blog-card:hover .blog-more i { transform: translateX(3px); }
.blog-link { position: absolute; inset: 0; border-radius: inherit; z-index: 1; }

/* ==========================================================================
   PAGES LEGALES
   ========================================================================== */
.legal-hero { padding-bottom: clamp(1.5rem, 3vw, 2rem) !important; }
.legal-eyebrow { display: inline-flex; align-items: center; gap: 0.55rem; padding: 0.4rem 0.9rem; margin-bottom: 1.1rem; border-radius: var(--r-pill); background: var(--bg-alt); font-weight: 600; font-size: 0.88rem; color: var(--ink-2); }
.legal-title { font-size: clamp(2.1rem, 4.4vw, 3rem); font-weight: 800; letter-spacing: -0.035em; line-height: 1.08; margin-bottom: 0.9rem; }
.legal-desc { color: var(--ink-2); font-size: 1.1rem; max-width: 56ch; }
main > .legal-wrap { padding-top: 0; }
.legal-meta { display: flex; flex-wrap: wrap; gap: 0.5rem; max-width: 52rem; margin-bottom: 1.5rem; }
.legal-meta > * { padding: 0.35rem 0.8rem; border-radius: var(--r-pill); background: var(--bg-alt); font-size: 0.85rem; color: var(--ink-2); }
.legal-card { max-width: 52rem; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-card); padding: clamp(1.5rem, 4vw, 2.5rem); line-height: 1.7; color: var(--prose); }
.legal-card h2 { display: flex; align-items: baseline; gap: 0.6rem; font-size: 1.35rem; font-weight: 800; letter-spacing: -0.02em; margin: 0 0 0.9rem; color: var(--ink); }
.legal-card h2 .num { font-size: 0.85rem; font-weight: 700; color: var(--c-ink, var(--red)); font-variant-numeric: tabular-nums; }
.legal-card h3 { font-size: 1.08rem; font-weight: 700; margin: 1.4rem 0 0.6rem; color: var(--ink); }
.legal-card p { margin: 0 0 0.9rem; }
.legal-card ul { list-style: disc; padding-left: 1.3rem; margin: 0 0 1rem; }
.legal-card li { margin: 0.35rem 0; }
.legal-card li::marker { color: var(--c, var(--red)); }
.legal-card a { color: var(--c-ink, var(--red)); text-decoration: underline; text-underline-offset: 3px; }
.legal-hr { border: 0; height: 1px; background: var(--line); margin: 1.75rem 0; }
.cookie-tag { display: inline-block; padding: 0.15rem 0.6rem; border-radius: var(--r-pill); background: var(--surface-2); font-size: 0.8rem; font-weight: 700; }
.cookie-tag.tech { background: var(--ok-bg); color: var(--ok-ink); }
.legal-cta-box { max-width: 52rem; background: var(--invert); color: rgba(255, 255, 255, 0.72); border-radius: 24px; padding: clamp(1.75rem, 4vw, 2.5rem); }
.legal-cta-kicker { font-weight: 700; font-size: 0.9rem; color: rgba(255, 255, 255, 0.55); margin-bottom: 0.5rem; }
.legal-cta-title { font-size: clamp(1.6rem, 3vw, 2.1rem); font-weight: 800; letter-spacing: -0.03em; color: #fff; margin-bottom: 0.6rem; }
.legal-cta-actions { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 1.4rem; }
.legal-cta-box .legal-btn-secondary { background: transparent; color: #fff; border-color: rgba(255, 255, 255, 0.28); }
.legal-cta-box .legal-btn-secondary:hover { background: rgba(255, 255, 255, 0.08); }

/* citation : attribution sous le texte */
.article-quote span { display: block; margin-top: 0.5rem; font-size: 0.95rem; font-weight: 500; color: var(--ink-3); }
a.inl { color: var(--c-ink, var(--red)); text-decoration: underline; text-underline-offset: 3px; }

/* cartes de liens en fin d'article : icone + titre + description */
.article-link-card { flex-direction: row !important; align-items: center; gap: 0.9rem !important; }
.article-link-card > i { flex: 0 0 auto; width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: var(--c-soft, var(--red-soft)); color: var(--c-ink, var(--red)); }
.alc-tt, .alc-ds { display: block; }

/* ==========================================================================
   TARIFS
   ========================================================================== */
.hero-v2-title .theme:has(+ .outline) { display: inline; }
.hero-v2-title .theme + .outline { display: block; }
.service-brutal-num:empty { display: none; }
.service-brutal-metric .v > span { margin-right: 0.35rem; font-size: 0.72em; font-weight: 600; color: var(--ink-3); text-decoration: line-through; text-decoration-thickness: 2px; }
.beam-wrap { margin-top: 1.25rem; }
.tarif-disclaimer { margin-top: 1.5rem; font-size: 0.92rem; color: var(--ink-3); text-align: center; text-wrap: balance; }
@media (min-width: 1040px) { .options-grid { grid-template-columns: repeat(4, 1fr); } }
.option-tile { background: var(--surface); border: 1px solid var(--line); border-radius: 16px; padding: 1.1rem 1.2rem; transition: border-color 0.2s var(--ease), box-shadow 0.2s var(--ease); }
.option-tile:hover { border-color: var(--line-2); box-shadow: var(--shadow-1); }
.opt-head { display: flex; align-items: center; gap: 0.65rem; font-weight: 700; line-height: 1.3; }
.opt-head i { flex: 0 0 auto; width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; background: var(--surface-2); font-size: 0.9rem; }
.opt-price { margin: 0.7rem 0 0.2rem; font-weight: 800; font-size: 1.1rem; letter-spacing: -0.01em; }
.option-tile .opt-desc { font-size: 0.9rem; color: var(--ink-2); }

/* FAQ en <details> (tarifs, page FAQ) */
.faq-details { max-width: 56rem; border-bottom: 1px solid var(--line); }
.faq-details summary {
  list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 1.5rem;
  padding: 1.2rem 0; font-weight: 700; font-size: 1.06rem; line-height: 1.35;
}
.faq-details summary::-webkit-details-marker { display: none; }
.faq-details summary::after {
  content: '+'; flex: 0 0 auto; width: 32px; height: 32px; border-radius: var(--r-pill);
  display: grid; place-items: center; background: var(--bg-alt); font-size: 1.2rem; font-weight: 500;
  transition: transform 0.25s var(--ease), background 0.25s var(--ease), color 0.25s var(--ease);
}
main > section:nth-of-type(even) .faq-details summary::after { background: var(--surface); }
.faq-details[open] summary::after { transform: rotate(45deg); background: var(--c, var(--red)); color: #fff; }
.faq-details summary:hover { color: var(--c-ink, var(--ink)); }
.faq-details > p, .faq-details > div, .faq-details .answer { padding: 0 3rem 1.3rem 0; color: var(--ink-2); }

/* tableaux generiques (comparatifs) */
.overflow-x-auto:has(> table) { border: 1px solid var(--line); border-radius: 16px; background: var(--surface); }
main table:not(.article-table):not(.bb-table):not(.cookie-table) { width: 100%; border-collapse: collapse; font-size: 0.95rem; line-height: 1.45; }
main table:not(.article-table):not(.bb-table):not(.cookie-table) th { text-align: left; background: var(--surface-2); font-weight: 700; padding: 0.85rem 1rem; white-space: nowrap; }
main table:not(.article-table):not(.bb-table):not(.cookie-table) td { padding: 0.8rem 1rem; border-top: 1px solid var(--line); vertical-align: top; }
main table td i { margin-right: 0.35rem; }

/* ==========================================================================
   PAGE FAQ
   ========================================================================== */
main > section:has(> .faq-search-wrap) { background: transparent !important; padding-top: 0; padding-bottom: clamp(1rem, 3vw, 2rem); }
.faq-search-wrap { position: relative; max-width: 40rem; margin-inline: auto; }
.faq-search-wrap i { position: absolute; left: 1.2rem; top: 50%; transform: translateY(-50%); color: var(--ink-3); pointer-events: none; }
.faq-search {
  width: 100%; min-height: 58px; padding: 0.9rem 1.2rem 0.9rem 3rem; font-size: 1.05rem;
  border: 1px solid var(--line-2); border-radius: var(--r-pill); background: var(--surface); box-shadow: var(--shadow-2);
  transition: border-color 0.2s var(--ease), box-shadow 0.2s var(--ease);
}
.faq-search:focus { outline: none; border-color: var(--c, var(--red)); box-shadow: 0 0 0 4px var(--c-soft, var(--red-soft)), var(--shadow-2); }
.faq-empty { max-width: 40rem; margin: 1rem auto 0; text-align: center; color: var(--ink-2); }
.faq-empty a { color: var(--c-ink, var(--red)); text-decoration: underline; text-underline-offset: 3px; }
.cat-count { margin-top: auto; font-size: 0.9rem; font-weight: 700; color: var(--c-ink, var(--red)); }
.cat-card .service-brutal-cta { margin-top: 0.6rem; }
.faq-section { scroll-margin-top: 90px; }
.faq-section + .faq-section { margin-top: clamp(2.5rem, 5vw, 3.5rem); }
.faq-section-title { font-size: clamp(1.35rem, 2.4vw, 1.6rem); font-weight: 800; letter-spacing: -0.02em; margin-bottom: 0.4rem; }

/* ==========================================================================
   REALISATIONS
   ========================================================================== */
.real-filter { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 1.75rem; }
.real-filter-btn {
  padding: 0.55rem 1.1rem; border-radius: var(--r-pill); border: 1px solid var(--line-2); background: var(--surface);
  font-weight: 600; font-size: 0.92rem; cursor: pointer; transition: background 0.2s var(--ease), color 0.2s var(--ease), border-color 0.2s var(--ease);
}
.real-filter-btn:hover { border-color: var(--ink-3); }
.real-filter-btn.active { background: var(--ink); border-color: var(--ink); color: var(--surface); }
.real-card {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-card); overflow: hidden;
  transition: box-shadow 0.25s var(--ease), transform 0.25s var(--ease);
}
.real-card:hover { box-shadow: var(--shadow-2); transform: translateY(-2px); }
.real-card[hidden] { display: none; }
.real-media { position: relative; aspect-ratio: 4 / 3; background: var(--bg-alt); overflow: hidden; }
.real-media img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s var(--ease); }
.real-card:hover .real-media img { transform: scale(1.04); }
.real-tags { position: absolute; left: 0.75rem; top: 0.75rem; display: flex; flex-wrap: wrap; gap: 0.4rem; }
.real-tag { padding: 0.3rem 0.7rem; border-radius: var(--r-pill); background: rgba(255, 255, 255, 0.92); color: #15171a; font-size: 0.8rem; font-weight: 700; }
.real-body { padding: 1.25rem 1.4rem 1.4rem; }
.real-num { display: flex; gap: 0.6rem; font-size: 0.82rem; font-weight: 700; color: var(--ink-3); margin-bottom: 0.4rem; }
.real-name { font-size: 1.25rem; font-weight: 800; letter-spacing: -0.02em; }
.real-sub { color: var(--ink-2); margin-top: 0.15rem; }
.real-gain { display: flex; align-items: center; gap: 0.6rem; margin-top: 1rem; }
.g-block { flex: 1; padding: 0.75rem 0.9rem; border-radius: 14px; background: var(--surface-2); }
.g-block.hl { background: var(--c-soft, var(--red-soft)); }
.g-block .lab { font-size: 0.8rem; font-weight: 600; color: var(--ink-2); }
.g-block .val { font-size: 1.25rem; font-weight: 800; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.g-block.hl .val { color: var(--c-ink, var(--red)); }
.real-gain .arrow { color: var(--ink-3); font-size: 0.85rem; }

/* avis clients */
.testi-card { display: flex; flex-direction: column; gap: 1rem; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-card); padding: 1.5rem; }
.testi-head { font-size: 0.85rem; font-weight: 700; color: var(--c-ink, var(--red)); }
.testi-quote { font-size: 1.05rem; line-height: 1.6; color: var(--ink); }
.testi-meta { display: flex; align-items: center; gap: 0.75rem; margin-top: auto; }
.testi-avatar { flex: 0 0 auto; width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; background: var(--c-soft, var(--red-soft)); color: var(--c-ink, var(--red)); font-weight: 800; font-size: 0.85rem; }
.testi-name { font-weight: 700; }
.testi-sub { font-size: 0.88rem; color: var(--ink-2); }
.review-cta {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem;
  margin-top: 1.5rem; padding: 1.25rem 1.5rem; border-radius: 20px; background: var(--surface); border: 1px solid var(--line);
}
.review-cta p { color: var(--ink-2); max-width: 52ch; }

/* grille des realisations */
#real-grid { display: grid; gap: 1.25rem; grid-template-columns: 1fr; }
@media (min-width: 720px) { #real-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1040px) { #real-grid { grid-template-columns: repeat(3, 1fr); } }

/* ==========================================================================
   DEVIS : formulaire en 3 etapes
   ========================================================================== */
.hidden { display: none !important; }
main > section:has(> #lead-form) { padding-top: 0; }
#lead-form { max-width: 56rem; margin-inline: auto; }
.devis-card {
  position: relative; background: var(--surface); border: 1px solid var(--line); border-radius: 24px;
  box-shadow: var(--shadow-2); padding: clamp(1.25rem, 4vw, 2.5rem);
}
.summary-block { background: var(--bg-alt); border: 1px solid var(--line); border-radius: 16px; padding: 1rem 1.25rem; margin-bottom: 1.5rem; }
.summary-block .kicker { font-size: 0.82rem; font-weight: 700; color: var(--ink-3); margin-bottom: 0.2rem; }
.services-line { font-weight: 700; line-height: 1.4; }
.vehicle-line { font-size: 0.92rem; color: var(--ink-2); }
.summary-block .btn-v2 { min-height: 42px; padding: 0.6rem 1.1rem; font-size: 0.95rem; }
.summary-block.is-secure { background: var(--ok-bg); border-color: var(--ok-line); }
.summary-block.is-secure .kicker { color: var(--ok-ink); }
.feedback-block { margin-bottom: 1.25rem; padding: 0.9rem 1.1rem; border-radius: 14px; background: var(--warn-bg); border: 1px solid var(--warn-line); color: var(--warn-ink); font-weight: 600; }
.feedback-block a { text-decoration: underline; text-underline-offset: 3px; }
.step-head { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; margin-bottom: 1.25rem; font-weight: 700; font-size: 1.12rem; }
.step-num { color: var(--red); }
.step-count { font-size: 0.85rem; font-weight: 600; color: var(--ink-3); white-space: nowrap; }
.service-tile {
  display: block; width: 100%; text-align: left; cursor: pointer;
  background: var(--surface); border: 1px solid var(--line-2); border-radius: 16px; padding: 1rem 1.1rem;
  transition: border-color 0.2s var(--ease), background 0.2s var(--ease), box-shadow 0.2s var(--ease);
}
.service-tile:hover { border-color: var(--c, var(--ink-3)); }
.service-tile.selected, .service-tile[aria-pressed="true"] { border-color: var(--c, var(--red)); background: var(--c-soft, var(--red-soft)); box-shadow: inset 0 0 0 1px var(--c, var(--red)); }
.tile-head { display: flex; align-items: center; gap: 0.65rem; }
.tile-head i {
  flex: 0 0 auto; width: 36px; height: 36px; border-radius: 11px; display: grid; place-items: center;
  background: var(--c-soft, var(--red-soft)); color: var(--c-ink, var(--red)); transition: background 0.2s var(--ease), color 0.2s var(--ease);
}
.service-tile.selected .tile-head i, .service-tile[aria-pressed="true"] .tile-head i { background: var(--c, var(--red)); color: #fff; }
.tile-title { font-weight: 700; line-height: 1.3; }
.tile-desc { font-size: 0.88rem; color: var(--ink-2); margin-top: 0.35rem; padding-left: calc(36px + 0.65rem); }
.form-label { display: block; font-weight: 600; font-size: 0.92rem; margin-bottom: 0.4rem; }
.req { color: var(--red); }
.form-opt { color: var(--ink-3); font-weight: 400; }
.input-v2 {
  width: 100%; min-height: 50px; padding: 0.75rem 1rem; font-size: 1rem;
  border: 1px solid var(--line-2); border-radius: 12px; background: var(--surface);
  transition: border-color 0.2s var(--ease), box-shadow 0.2s var(--ease);
}
.input-v2:focus { outline: none; border-color: var(--red); box-shadow: 0 0 0 4px var(--red-soft); }
textarea.input-v2 { min-height: 110px; resize: vertical; line-height: 1.5; }
.plate-eu {
  position: absolute; left: 1px; top: 1px; bottom: 1px; width: 42px; border-radius: 11px 0 0 11px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.1rem;
  background: #1f4ea3; color: #fff; font-weight: 800; font-size: 0.8rem; line-height: 1;
}
.plate-eu .eu { font-size: 0.55rem; opacity: 0.8; }
.input-v2.plate { padding-left: 3.5rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }
.step-actions { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 0.75rem; margin-top: 0.5rem; }
.step-actions > :only-child { margin-left: auto; }
.loader { width: 18px; height: 18px; border: 2px solid rgba(255, 255, 255, 0.45); border-top-color: #fff; border-radius: 50%; animation: spin 0.8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.form-legal { font-size: 0.8rem; line-height: 1.5; color: var(--ink-3); margin-top: 1rem; }
.form-legal a { color: var(--ink-2); text-decoration: underline; text-underline-offset: 3px; }
.success-wrap { text-align: center; padding: 1.5rem 0; }
.check-ring {
  width: 76px; height: 76px; border-radius: 50%; display: grid; place-items: center; margin: 0 auto 1.25rem;
  background: var(--ok-bg); color: var(--ok-ink); font-size: 1.7rem; box-shadow: 0 0 0 10px rgba(16, 185, 129, 0.08);
}
.success-wrap .sec-title { font-size: clamp(1.8rem, 3vw, 2.2rem); }
.success-wrap p { color: var(--ink-2); }
.success-wrap p a { text-decoration: underline; text-underline-offset: 3px; }

/* tableau des cookies : defile horizontalement sur petit ecran au lieu de deborder */
.cookie-table { display: block; max-width: 100%; overflow-x: auto; border: 1px solid var(--line); border-radius: 14px; }

/* ==========================================================================
   VISUELS DES PAGES
   ========================================================================== */
/* photo a cote du titre d'une section */
.sec-head.has-media { max-width: none; display: grid; gap: 1.25rem 2.5rem; grid-template-columns: 1fr; align-items: center; }
.sec-head.has-media > .media { aspect-ratio: 16 / 10; margin-top: 0.5rem; }
@media (min-width: 900px) {
  .sec-head.has-media { grid-template-columns: minmax(0, 1fr) minmax(0, 440px); }
  .sec-head.has-media > :not(.media) { grid-column: 1; }
  .sec-head.has-media > .media { grid-column: 2; grid-row: 1 / span 3; margin-top: 0; aspect-ratio: 4 / 3; }
}

/* vignettes des articles du blog */
.blog-cover {
  position: relative; overflow: hidden; overflow: clip; aspect-ratio: 16 / 9;
  margin: calc(-1 * clamp(1.4rem, 3vw, 1.9rem)) calc(-1 * clamp(1.4rem, 3vw, 1.9rem)) 0.75rem;
  border-radius: var(--r-card) var(--r-card) 0 0; background: var(--surface-2);
}
.blog-cover img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.8s var(--ease); }
.blog-card:hover .blog-cover img { transform: scale(1.04); }
.blog-cover.is-e85, .blog-cover.is-fap { display: grid; align-content: end; gap: 0.2rem; padding: 1.1rem 1.3rem; color: #fff; }
.blog-cover.is-e85 { background: radial-gradient(360px 200px at 90% 0%, rgba(255, 255, 255, 0.2), transparent 60%), linear-gradient(135deg, #0f9f6e, #047857); }
.blog-cover.is-fap { background: radial-gradient(360px 200px at 90% 0%, rgba(255, 255, 255, 0.2), transparent 60%), linear-gradient(135deg, #14b8a6, #0f766e); }
.bc-big { font-family: 'Space Grotesk', var(--font); font-weight: 700; font-size: 3.2rem; line-height: 0.95; letter-spacing: -0.03em; }
.bc-sub { font-weight: 700; font-size: 0.95rem; opacity: 0.9; }
.blog-cover > i { position: absolute; right: -0.5rem; bottom: -1.3rem; font-size: 7.5rem; color: rgba(255, 255, 255, 0.12); transform: rotate(-15deg); }

/* hero avec calculateur (page E85) */
.hero-v2-grid:has(.calc) { align-items: start; }
.hero-v2-grid:has(.calc) > :first-child { padding-top: clamp(0.5rem, 4vw, 3.5rem); }

.blog-cover img { position: absolute; inset: 0; }

/* vignette photo : etiquette posee sur l'image */
.bc-tag { position: absolute; left: 0.9rem; bottom: 0.9rem; padding: 0.4rem 0.8rem; border-radius: var(--r-pill); background: rgba(4, 120, 87, 0.92); color: #fff; font-size: 0.85rem; font-weight: 700; }

/* ------------------------------------------------ page E85 : stations du Rhone */
.stations {
  display: flex; gap: 1rem; align-items: flex-start; margin-top: 1.5rem;
  padding: 1.25rem 1.4rem; background: var(--surface); border: 1px solid var(--line); border-radius: 18px;
}
.stations-ic {
  flex: none; width: 2.75rem; height: 2.75rem; border-radius: 12px; display: grid; place-items: center;
  background: var(--c-soft, var(--surface-2)); color: var(--c-ink, var(--red)); font-size: 1.1rem;
}
.stations h3 { font-size: 1.1rem; font-weight: 700; margin-bottom: 0.35rem; }
.stations p { color: var(--ink-2); font-size: 0.98rem; text-wrap: pretty; }
.stations p b { color: var(--ink); }
#economies-e85 .article-table td:first-child { font-weight: 600; color: var(--ink); }
@media (max-width: 640px) {
  #economies-e85 .article-table-wrap { border: 0; background: none; overflow: visible; }
  #economies-e85 .article-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  #economies-e85 .article-table, #economies-e85 .article-table tbody { display: block; }
  #economies-e85 .article-table tr {
    display: grid; grid-template-columns: 1fr 1fr; column-gap: 1rem; margin-bottom: 0.75rem;
    padding: 0.35rem 1rem 0.6rem; background: var(--surface); border: 1px solid var(--line); border-radius: 16px;
  }
  #economies-e85 .article-table td { display: block; border: 0; padding: 0.35rem 0; }
  #economies-e85 .article-table td::before { content: attr(data-label); display: block; font-size: 0.75rem; font-weight: 600; color: var(--ink-2); }
  #economies-e85 .article-table td:first-child { grid-column: 1 / -1; padding-top: 0.6rem; font-size: 1.05rem; }
  #economies-e85 .article-table td:first-child::before { display: none; }
  #economies-e85 .article-table tr:hover td { background: none; }
}

/* ------------------------------------------------ cartes entierement cliquables
   Le lien principal (.card-link) couvre toute la carte ; un second lien de la meme
   carte (bouton devis) reste cliquable par-dessus. */
.option-tile, .real-card { position: relative; }
.card-link { color: inherit; text-decoration: none; }
.card-link::after { content: ""; position: absolute; inset: 0; z-index: 1; border-radius: inherit; }
.card-link:focus-visible { outline: none; }
.card-link:focus-visible::after { outline: 2px solid var(--c, var(--red)); outline-offset: 3px; border-radius: var(--r-card); }
.service-brutal .service-brutal-cta:not(.card-link) { position: relative; z-index: 2; }
a.service-brutal-cta { color: var(--ink); text-decoration: none; }
.service-brutal:has(.card-link):hover, .real-card:has(.card-link):hover { border-color: color-mix(in srgb, var(--c, var(--red)) 45%, var(--line)); }
.service-brutal:has(.card-link):hover .service-brutal-cta { color: var(--c-ink, var(--red)); }
.real-name .card-link:hover { color: var(--c-ink, var(--red)); }
a.option-tile { display: block; color: inherit; text-decoration: none; transition: border-color 0.2s var(--ease), box-shadow 0.2s var(--ease), transform 0.2s var(--ease); }
a.option-tile:hover { border-color: color-mix(in srgb, var(--c, var(--red)) 45%, var(--line)); box-shadow: var(--shadow-2); transform: translateY(-2px); }
.opt-go { margin-left: auto; font-size: 0.75em; color: var(--c-ink, var(--red)); transition: transform 0.2s var(--ease); }
a.option-tile:hover .opt-go { transform: translateX(3px); }
.why-wrap .article-table td a { color: var(--ink); font-weight: 600; text-decoration: underline; text-decoration-color: var(--line-2); text-underline-offset: 3px; }
.why-wrap .article-table td a:hover { color: var(--c-ink, var(--red)); text-decoration-color: currentColor; }

/* ==========================================================================
   Prise de rendez-vous (formulaire de devis et page rdv.html)
   ========================================================================== */
.slots-intro { color: var(--ink-2); margin: -0.25rem 0 1.1rem; line-height: 1.55; }
.slots-fieldset { border: 0; padding: 0; margin: 0 0 1.25rem; min-width: 0; }
.slots { display: grid; gap: 1rem; }
.slots-note { padding: 0.9rem 1.1rem; border-radius: 14px; background: var(--bg-alt); color: var(--ink-2); }
.slot-day-label { font-weight: 700; margin-bottom: 0.5rem; }
.slot-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0.6rem; }
.slot {
  position: relative; display: flex; align-items: center; gap: 0.75rem; cursor: pointer;
  background: var(--surface); border: 1px solid var(--line-2); border-radius: 16px; padding: 0.85rem 1rem;
  transition: border-color 0.2s var(--ease), background 0.2s var(--ease), box-shadow 0.2s var(--ease);
}
.slot:hover { border-color: var(--ink-3); }
.slot input { flex: 0 0 auto; width: 1.15rem; height: 1.15rem; accent-color: var(--red); margin: 0; }
.slot-body { display: flex; flex-direction: column; min-width: 0; }
.slot-body b { line-height: 1.25; }
.slot-body small { color: var(--ink-2); font-size: 0.88rem; }
.slot-tag { font-style: normal; font-size: 0.75rem; font-weight: 700; color: var(--red); margin-top: 0.15rem; }
.slot.is-selected { border-color: var(--red); background: var(--red-soft); box-shadow: inset 0 0 0 1px var(--red); }
.slot:focus-within { outline: 2px solid var(--red); outline-offset: 2px; }
.slot.is-full { cursor: not-allowed; opacity: 0.55; background: var(--bg-alt); }
.slot.is-full .slot-tag { color: var(--ink-3); }
.slot-callback { margin-top: 1rem; }
.slots-more {
  display: inline-flex; align-items: center; gap: 0.5rem; margin-top: 0.85rem; padding: 0.55rem 1rem;
  border: 1px solid var(--line-2); border-radius: 999px; background: var(--surface); font-weight: 600; cursor: pointer;
}
.slots-more:hover { border-color: var(--ink-3); }
.success-rdv { max-width: 30rem; margin: 0 auto 1.5rem; }
.success-rdv p { margin: 0.9rem 0; }
.success-rdv-slot {
  display: inline-flex; align-items: center; gap: 0.6rem; padding: 0.8rem 1.2rem; border-radius: 16px;
  background: var(--ok-bg); border: 1px solid var(--ok-line); color: var(--ok-ink); font-weight: 700; font-size: 1.05rem;
}
.rdv-card { max-width: 40rem; margin: 0 auto; }
.rdv-current {
  display: grid; gap: 0.35rem; padding: 1.1rem 1.25rem; border-radius: 18px; margin-bottom: 1.25rem;
  background: var(--ok-bg); border: 1px solid var(--ok-line);
}
.rdv-current.is-none { background: var(--bg-alt); border-color: var(--line); }
.rdv-current .k { font-size: 0.82rem; font-weight: 700; color: var(--ink-3); text-transform: uppercase; letter-spacing: 0.04em; }
.rdv-current .v { font-size: 1.15rem; font-weight: 700; }
.rdv-current .d { color: var(--ink-2); font-size: 0.95rem; }
.rdv-actions { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 1.25rem; }
.rdv-cancel { background: none; border: 0; color: var(--ink-2); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; font: inherit; padding: 0.5rem 0; }
@media (max-width: 420px) { .slot { padding: 0.75rem 0.8rem; gap: 0.55rem; } }