/* Hallmark · genre: editorial (technique, broadcast) · macrostructure: Split Studio (accueil)
 * theme: custom · vibe: « régie broadcast, calme avant le direct » · paper oklch(17% 0.03 255) · accent oklch(72% 0.13 225) cyan EACHOZA
 * display: Space Grotesk · body: Inter · axes: dark / grotesk-sans / cool · nav: N9 Edge-aligned · footer: Ft4 Dense colophon
 * design-system: design.md (EACHOZA) · fichier partagé par toutes les pages
 */
:root {
  --c-paper:   oklch(17% 0.03 255);
  --c-paper-2: oklch(21% 0.032 255);
  --c-paper-3: oklch(25% 0.034 255);
  --c-rule:    oklch(31% 0.032 255);
  --c-ink:     oklch(96% 0.006 240);
  --c-ink-2:   oklch(84% 0.015 245);
  --c-muted:   oklch(70% 0.025 250);
  --c-accent:  oklch(72% 0.13 225);
  --c-accent-ink: oklch(17% 0.03 255);
  --c-focus:   oklch(80% 0.12 225);
  --c-live:    oklch(65% 0.2 25);
  --c-bloom:   oklch(45% 0.1 225 / 0.18);

  --f-display: 'Space Grotesk', 'Helvetica Neue', Arial, sans-serif;
  --f-body:    'Inter', 'Helvetica Neue', Arial, sans-serif;

  --s-2xs: 0.5rem; --s-xs: 0.75rem; --s-sm: 1rem; --s-md: 1.5rem; --s-lg: 2rem;
  --s-xl: 3rem; --s-2xl: 4.5rem; --s-3xl: 7rem;
  --gutter: clamp(1.25rem, 5vw, 4.5rem);
  --max: 74rem;

  --t-xs: 0.8125rem; --t-sm: 0.9375rem; --t-md: 1.0625rem; --t-lg: 1.25rem; --t-xl: 1.625rem;
  --t-2xl: clamp(1.9rem, 3.2vw, 2.75rem);
  --t-display: clamp(2.6rem, 5vw + 0.6rem, 4.9rem);

  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --dur: 180ms;
  --r: 14px; --r-pill: 999px; --r-in: 10px;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html, body { overflow-x: clip; }
html { scroll-behavior: smooth; }
body {
  background: var(--c-paper);
  background-image: radial-gradient(64rem 40rem at 88% -12%, var(--c-bloom), transparent 70%);
  background-repeat: no-repeat;
  color: var(--c-ink); font-family: var(--f-body); font-size: var(--t-md); line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4 { font-family: var(--f-display); font-weight: 700; letter-spacing: -0.025em; line-height: 1.08; font-style: normal; overflow-wrap: anywhere; min-width: 0; }
h2 { font-size: var(--t-2xl); }
h3 { font-size: var(--t-lg); letter-spacing: -0.01em; }
a { color: var(--c-accent); text-decoration-thickness: 1px; text-underline-offset: 3px; }
strong { color: var(--c-ink); font-weight: 600; }
:focus-visible { outline: 2px solid var(--c-focus) !important; outline-offset: 3px; border-radius: 4px; }
.skip-link { position: absolute; left: -9999px; top: 0; background: var(--c-accent); color: var(--c-accent-ink); padding: 10px 16px; font-weight: 700; z-index: 1000; }
.skip-link:focus { left: 0; }

.wrap { max-width: var(--max); margin-inline: auto; padding-inline: var(--gutter); }
.split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--s-2xl); align-items: start; }
.split.l { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); }
.split.r { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); }
.lead { font-size: var(--t-lg); color: var(--c-ink-2); line-height: 1.6; max-width: 36rem; }
.prose p { color: var(--c-ink-2); max-width: 38rem; }
.prose p + p { margin-top: var(--s-sm); }
.accent { color: var(--c-accent); }
.muted { color: var(--c-muted); }

/* Boutons */
.btn { display: inline-flex; align-items: center; gap: var(--s-2xs); font-family: var(--f-display); font-weight: 700; font-size: var(--t-sm);
  padding: 0.9rem 1.5rem; border-radius: var(--r-pill); text-decoration: none; white-space: nowrap; cursor: pointer; border: 0;
  transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease), border-color var(--dur) var(--ease); }
.btn-primary { background: var(--c-accent); color: var(--c-accent-ink); }
.btn-primary:hover { background: var(--c-focus); }
.btn-primary:active { transform: translateY(1px); }
.btn-primary:disabled { opacity: .6; cursor: not-allowed; }
.btn-line { color: var(--c-ink); border: 1px solid var(--c-rule); background: transparent; }
.btn-line:hover { border-color: var(--c-accent); color: var(--c-accent); }

/* Nav · N9 */
.nav { display: flex; align-items: center; justify-content: space-between; gap: var(--s-md); padding-block: var(--s-md); }
.nav-logo svg { height: 22px; width: auto; display: block; }
.nav-right { display: flex; align-items: center; gap: var(--s-md); }
.nav-right a.nav-l { color: var(--c-ink-2); text-decoration: none; font-size: var(--t-sm); white-space: nowrap; }
.nav-right a.nav-l:hover { color: var(--c-ink); }
@media (max-width: 760px) { .nav-right a.nav-l { display: none; } }
@media (max-width: 400px) { .nav-right .btn { display: none; } }

/* Hero · split, preuve vidéo à droite */
.hero { padding-block: var(--s-2xl) var(--s-3xl); }
.hero .split { align-items: center; }
.chip { display: inline-flex; align-items: center; gap: 8px; font-size: var(--t-xs); font-weight: 600; color: var(--c-ink-2);
  border: 1px solid var(--c-rule); border-radius: var(--r-pill); padding: 0.3rem 0.85rem; margin-bottom: var(--s-md); }
.chip .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--c-live); }
.hero h1 { font-size: clamp(2.3rem, 3.6vw + 0.6rem, 4.1rem); line-height: 1; letter-spacing: -0.035em; margin-bottom: var(--s-md); overflow-wrap: normal; hyphens: manual; }
.hero .lead { margin-bottom: var(--s-lg); }
.hero-actions { display: flex; flex-wrap: wrap; gap: var(--s-xs); align-items: center; }
.hero-note { margin-top: var(--s-md); font-size: var(--t-sm); color: var(--c-muted); }
.reel { position: relative; border-radius: var(--r); overflow: hidden; background: var(--c-paper-2); aspect-ratio: 16 / 10; }
.reel video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.reel figcaption { position: absolute; left: var(--s-sm); bottom: var(--s-sm); font-size: var(--t-xs); font-weight: 600; color: var(--c-ink);
  background: oklch(17% 0.03 255 / 0.8); border-radius: var(--r-pill); padding: 0.3rem 0.8rem; }

/* Faits */
.facts { border-block: 1px solid var(--c-rule); }
.facts-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.fact { padding: var(--s-lg) var(--s-md) var(--s-lg) 0; }
.fact + .fact { padding-left: var(--s-md); border-left: 1px solid var(--c-rule); }
.fact b { display: block; font-family: var(--f-display); font-size: var(--t-xl); font-weight: 700; color: var(--c-ink); font-variant-numeric: tabular-nums; letter-spacing: -0.02em; }
.fact span { font-size: var(--t-sm); color: var(--c-muted); }

/* Logos clients */
.clients { padding-block: var(--s-xl); }
.clients p { font-size: var(--t-sm); color: var(--c-muted); margin-bottom: var(--s-md); }
.logos { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-lg) var(--s-xl); }
.logos img.raster { filter: grayscale(1) brightness(1.4); opacity: 0.8; border-radius: 6px; }
.logos img { height: 26px; width: auto; max-width: 120px; object-fit: contain; filter: brightness(0) invert(1); opacity: 0.72; }

/* Offre · la captation multicam en grand */
.offer { padding-block: var(--s-3xl) var(--s-2xl); }
.offer h2 { max-width: 20ch; margin-bottom: var(--s-sm); }
.offer > .wrap > .lead { margin-bottom: var(--s-xl); }
.offer-grid { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: var(--s-md); }
.offer-main { background: var(--c-paper-2); border-radius: var(--r); padding: var(--s-xl) var(--s-lg); grid-row: span 2; }
.offer-side { background: var(--c-paper-2); border-radius: var(--r); padding: var(--s-lg); }
.offer-main h3 { font-size: var(--t-xl); margin-bottom: var(--s-sm); }
.offer-main .price { font-family: var(--f-display); font-weight: 700; color: var(--c-accent); margin-bottom: var(--s-sm); }
.offer-side h3 { margin-bottom: var(--s-2xs); }
.offer p { color: var(--c-ink-2); }
.ticks { list-style: none; margin-top: var(--s-md); display: grid; gap: var(--s-2xs); }
.ticks li { padding-left: 1.4rem; position: relative; color: var(--c-ink-2); font-size: var(--t-sm); }
.ticks li::before { content: ''; position: absolute; left: 0; top: 0.62em; width: 0.6rem; height: 2px; background: var(--c-accent); }
.more { display: inline-block; margin-top: var(--s-md); font-weight: 600; font-size: var(--t-sm); }

/* Aftermovie · livrables */
.after { padding-block: var(--s-2xl); }
.after h2 { margin-bottom: var(--s-sm); }
.deliv { display: grid; gap: 0; border-top: 1px solid var(--c-rule); }
.deliv div { padding-block: var(--s-sm); border-bottom: 1px solid var(--c-rule); }
.deliv b { display: block; font-family: var(--f-display); font-weight: 700; }
.deliv span { font-size: var(--t-sm); color: var(--c-muted); }
.formats { margin-top: var(--s-lg); font-size: var(--t-sm); color: var(--c-muted); }
.formats strong { color: var(--c-ink-2); font-weight: 600; }

/* Processus · vraiment ordonné */
.how { background: var(--c-paper-2); padding-block: var(--s-2xl) var(--s-3xl); }
.how h2 { margin-bottom: var(--s-xl); }
.steps { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-lg); counter-reset: s; }
.steps li { counter-increment: s; border-top: 2px solid var(--c-rule); padding-top: var(--s-sm); }
.steps li:last-child { border-top-color: var(--c-accent); }
.steps li::before { content: counter(s); display: block; font-family: var(--f-display); font-weight: 700; font-size: var(--t-xl); color: var(--c-accent); font-variant-numeric: tabular-nums; }
.steps .when { display: block; font-size: var(--t-xs); font-weight: 600; color: var(--c-muted); margin: var(--s-2xs) 0 var(--s-2xs); }
.steps p { color: var(--c-ink-2); font-size: var(--t-sm); }

/* Différences · registre sans numéros décoratifs */
.why { padding-block: var(--s-3xl) var(--s-2xl); }
.why-list { display: grid; gap: 0; }
.why-list div { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: var(--s-lg); padding-block: var(--s-md); border-bottom: 1px solid var(--c-rule); }
.why-list div:first-child { border-top: 1px solid var(--c-rule); }
.why-list p { color: var(--c-ink-2); }

/* Témoignages · lisibles en entier */
.quotes { padding-block: var(--s-2xl) var(--s-3xl); }
.quotes h2 { margin-bottom: var(--s-xl); }
.q-grid { columns: 3 18rem; column-gap: var(--s-md); }
.q { break-inside: avoid; background: var(--c-paper-2); border-radius: var(--r); padding: var(--s-lg); margin-bottom: var(--s-md); }
.q blockquote { color: var(--c-ink); font-size: var(--t-sm); line-height: 1.7; quotes: "«\00A0" "\00A0»"; }
.q blockquote::before { content: open-quote; } .q blockquote::after { content: close-quote; }
.q figcaption { margin-top: var(--s-sm); font-size: var(--t-xs); color: var(--c-muted); }
.q figcaption b { display: block; color: var(--c-ink); font-size: var(--t-sm); font-weight: 600; }
.q-src { margin-top: var(--s-sm); font-size: var(--t-xs); color: var(--c-muted); }

/* Matériel · typographique, pas de faux logos */
.gear { padding-block: var(--s-xl); border-top: 1px solid var(--c-rule); }
.gear-list { display: flex; flex-wrap: wrap; gap: var(--s-2xs) var(--s-lg); margin-top: var(--s-sm); font-family: var(--f-display); font-weight: 500; font-size: var(--t-lg); color: var(--c-ink-2); }

/* Contact */
.contact { background: var(--c-paper-2); padding-block: var(--s-3xl); }
.contact h2 { font-size: clamp(2.2rem, 4vw, 3.4rem); margin-bottom: var(--s-sm); }
.contact-form { display: grid; gap: var(--s-xs); }
.form-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--s-xs); }
.contact-form input, .contact-form select, .contact-form textarea {
  width: 100%; background: var(--c-paper); color: var(--c-ink); border: 1px solid var(--c-rule); border-radius: var(--r-in);
  padding: 0.95rem 1rem; font: inherit; font-size: var(--t-sm); transition: border-color var(--dur) var(--ease); }
.contact-form select { color: var(--c-ink-2); appearance: none; }
.contact-form textarea { min-height: 7.5rem; resize: vertical; }
.contact-form input::placeholder, .contact-form textarea::placeholder { color: var(--c-muted); }
.contact-form input:focus, .contact-form select:focus, .contact-form textarea:focus { border-color: var(--c-accent); }
.contact-form .btn { justify-content: center; }
.form-privacy { font-size: var(--t-xs); color: var(--c-muted); line-height: 1.6; }
.form-success { display: none; }
.direct { margin-top: var(--s-lg); color: var(--c-ink-2); }

/* Zone + ressources : colonnes discrètes, tous les liens conservés */
.links { padding-block: var(--s-2xl); }
.links h2 { font-size: var(--t-xl); margin-bottom: var(--s-sm); }
.links .prose p { font-size: var(--t-sm); }
.links-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: var(--s-lg); margin-top: var(--s-lg); font-size: var(--t-sm); color: var(--c-muted); line-height: 1.8; }
.links-grid h3 { font-size: var(--t-sm); color: var(--c-ink); margin-bottom: var(--s-2xs); letter-spacing: 0; }
.zones { margin-top: var(--s-md); font-size: var(--t-sm); color: var(--c-muted); line-height: 1.9; }

/* Footer · Ft4 Dense colophon */
.foot { border-top: 1px solid var(--c-rule); padding-block: var(--s-xl) var(--s-lg); font-size: var(--t-sm); }
.foot-grid { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 2fr); gap: var(--s-xl); }
.foot-line { font-family: var(--f-display); font-size: var(--t-xl); font-weight: 700; letter-spacing: -0.02em; line-height: 1.15; margin-bottom: var(--s-sm); }
.foot-links { columns: 2 12rem; column-gap: var(--s-lg); }
.foot-links a { display: block; color: var(--c-ink-2); text-decoration: none; padding-block: 0.2rem; }
.foot-links a:hover, .foot-meta a:hover { color: var(--c-accent); }
.foot-meta { margin-top: var(--s-xl); padding-top: var(--s-sm); border-top: 1px solid var(--c-rule); display: flex; flex-wrap: wrap; gap: var(--s-2xs) var(--s-md); color: var(--c-muted); font-size: var(--t-xs); }
.foot-meta a { color: var(--c-muted); text-decoration: none; }

/* CTA mobile */
.floating-cta { display: none; position: fixed; left: 0; right: 0; bottom: 0; z-index: 50; padding: 10px var(--gutter); background: var(--c-paper); border-top: 1px solid var(--c-rule); }
.floating-cta a { display: block; text-align: center; }

@media (max-width: 900px) {
  .split, .split.l, .split.r, .offer-grid, .foot-grid { grid-template-columns: minmax(0, 1fr); gap: var(--s-xl); }
  .offer-main { grid-row: auto; }
  .facts-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fact:nth-child(3) { padding-left: 0; border-left: 0; }
  .fact:nth-child(n+3) { border-top: 1px solid var(--c-rule); }
  .steps { grid-template-columns: minmax(0, 1fr); }
  .why-list div { grid-template-columns: minmax(0, 1fr); gap: var(--s-2xs); }
}
@media (max-width: 760px) {
  .floating-cta { display: block; }
  body { padding-bottom: 72px; }
  .form-row { grid-template-columns: minmax(0, 1fr); }
  .hero { padding-block: var(--s-lg) var(--s-2xl); }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { transition-duration: 1ms !important; } }

/* Hero plein écran, vidéo en fond (choix de Nadal, 05/10/2026) */
.nav-over { position: absolute; top: 0; left: 0; right: 0; z-index: 5; }
.hero-full { position: relative; min-height: 100svh; display: flex; align-items: center; padding-block: 7rem var(--s-2xl); overflow: hidden; }
.hero-bg { position: absolute; inset: 0; z-index: 0; }
.hero-bg video { width: 100%; height: 100%; object-fit: cover; display: block; }
.hero-scrim { position: absolute; inset: 0; background:
  radial-gradient(70rem 50rem at 0% 70%, oklch(14% 0.03 255 / 0.94), oklch(14% 0.03 255 / 0.72) 55%, oklch(14% 0.03 255 / 0.4));
}
.hero-content { position: relative; z-index: 1; width: 100%; }
.hero-full h1 { max-width: 15ch; }
.hero-full .lead { color: var(--c-ink); }
.hero-full .chip { background: oklch(14% 0.03 255 / 0.5); }
@media (prefers-reduced-motion: reduce) { .hero-bg video { display: none; } .hero-bg { background: url('/hero-poster.jpg') center / cover; } }

/* Photo de régie dans la carte captation (remplit l'espace libre) */
.offer-main { display: flex; flex-direction: column; }
.offer-photo { margin-top: var(--s-lg); flex: 1; min-height: 14rem; position: relative; border-radius: calc(var(--r) - 4px); overflow: hidden; }
.offer-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.offer-photo figcaption { position: absolute; left: var(--s-sm); bottom: var(--s-sm); font-size: var(--t-xs); font-weight: 600; background: oklch(14% 0.03 255 / 0.8); border-radius: var(--r-pill); padding: 0.3rem 0.8rem; }

/* Logos : vrais logos, tuiles de même taille */
.logo-tiles { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: var(--s-xs); }
.gear-tiles { grid-template-columns: repeat(6, minmax(0, 1fr)); }
@media (max-width: 900px) { .logo-tiles { grid-template-columns: repeat(4, minmax(0, 1fr)); } .gear-tiles { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 480px) { .logo-tiles, .gear-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.tile { display: flex; align-items: center; justify-content: center; height: 4.5rem; padding: 0.8rem 1rem; overflow: hidden; background: oklch(97% 0.005 240); border-radius: var(--r-in); }
.tile img { display: block; height: 1.9rem; width: 100%; max-width: 7.5rem; object-fit: contain; }
.tile img.sq { height: 2.3rem; }
.tile img.tall { height: 2.6rem; }
.tile img.inv { filter: invert(1) hue-rotate(180deg); }
.gear-tiles { margin-top: var(--s-md); }
.gear-also { margin-top: var(--s-sm); font-size: var(--t-sm); color: var(--c-muted); }

/* Styles sortis du HTML */
.after-cta { margin-top: var(--s-md); }
.how-sub { margin: -1.5rem 0 var(--s-xl); }
.why-sub { margin-top: var(--s-sm); }
.h-sm { font-size: var(--t-xl); }
.gear-sub { margin-top: var(--s-2xs); }
.links-next { padding-top: 0; }

/* Mobile : un seul bouton de devis (la barre du bas) */
@media (max-width: 760px) { .nav-right .btn { display: none; } }

/* Tuiles sombres pour les logos dont la version officielle est sur fond noir */
.tile-dark { background: oklch(13% 0.005 240); box-shadow: inset 0 0 0 1px var(--c-rule); }
.tile-dark img[src*="blackmagic"] { height: 2.4rem; }

/* Défilement des logos clients : pause au survol et au focus, statique si mouvements réduits */
.marquee { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); }
.marquee-track { display: flex; gap: var(--s-xs); width: max-content; animation: hm-marquee 38s linear infinite; }
.marquee-dup { display: contents; }
.marquee .tile { width: 9.5rem; flex: none; }
.marquee:hover .marquee-track, .marquee:focus-within .marquee-track { animation-play-state: paused; }
@keyframes hm-marquee { from { transform: translateX(0); } to { transform: translateX(calc(-50% - var(--s-xs) / 2)); } }
@media (prefers-reduced-motion: reduce) {
  .marquee { -webkit-mask-image: none; mask-image: none; }
  .marquee-track { animation: none; flex-wrap: wrap; width: auto; }
  .marquee-dup { display: none; }
}

/* Offre : la captation multicam en bandeau pleine largeur, les deux autres à égalité dessous */
.offer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.offer-main { grid-column: 1 / -1; grid-row: auto; display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: var(--s-xl); align-items: center; padding: var(--s-xl); box-shadow: inset 3px 0 0 transparent; outline: 1px solid color-mix(in oklch, var(--c-accent) 45%, transparent); outline-offset: -1px; }
.offer-main .ticks { margin-top: 0; }
.offer-side { display: flex; flex-direction: column; }
.offer-side .more { margin-top: auto; padding-top: var(--s-md); }
@media (max-width: 900px) { .offer-main { grid-template-columns: minmax(0, 1fr); gap: var(--s-md); padding: var(--s-lg); } .offer-grid { grid-template-columns: minmax(0, 1fr); } }

/* Logos tous monochromes, homogènes (blanc cassé, même hauteur optique) */
.tile { background: transparent !important; box-shadow: none !important; height: 3.5rem; padding: 0.4rem 0.6rem; }
.tile img { height: 1.75rem !important; max-width: 7.5rem; filter: brightness(0) invert(1); opacity: 0.78; transition: opacity var(--dur) var(--ease); }
.tile img[src*="/mono/"] { filter: none; }
.tile:hover img { opacity: 1; }
.marquee .tile { width: 9rem; }
.gear-tiles { gap: var(--s-md) var(--s-xs); }

.tile img[src*="nrj"], .tile img[src*="parcasterix"] { height: 2.6rem !important; }
.tile img[src*="blackmagic"], .tile img[src*="analogway"] { max-width: 9rem; height: 1.6rem !important; }
.tile img[src*="vizrt"] { height: 2.1rem !important; }

/* Logos clients : en couleur, sur tuiles claires de même taille (le monochrome est réservé au matériel) */
.clients-color .tile { background: oklch(97% 0.005 240) !important; height: 4.5rem; padding: 0.8rem 1rem; }
.clients-color .tile img { filter: none !important; opacity: 1; height: 1.9rem !important; max-width: 7rem; }
.clients-color .tile img[src*="nrj"], .clients-color .tile img[src*="parcasterix"] { height: 2.6rem !important; }
.clients-color .tile { width: 9.5rem; }

/* Différences : 2 points forts en avant, 2 secondaires dessous, hauteurs égales par rangée */
.why-head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--s-2xl); align-items: end; margin-bottom: var(--s-xl); }
.why-head .lead { margin: 0; }
.why-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-md); }
.why-card { padding: var(--s-lg) 0 0; border-top: 1px solid var(--c-rule); }
.why-card h3 { margin-bottom: var(--s-2xs); }
.why-card p { color: var(--c-ink-2); max-width: 34rem; }
.why-main { background: var(--c-paper-2); border-top: 0; border-radius: var(--r); padding: var(--s-xl) var(--s-lg); outline: 1px solid color-mix(in oklch, var(--c-accent) 45%, transparent); outline-offset: -1px; }
.why-main h3 { font-size: var(--t-xl); margin-bottom: var(--s-xs); }
.why-main p { color: var(--c-ink); font-size: var(--t-md); }
@media (max-width: 900px) { .why-head, .why-grid { grid-template-columns: minmax(0, 1fr); gap: var(--s-md); } }

/* Zone + pages dédiées : plan du site compact (tout reste dans le HTML pour le SEO) */
.sitemap { padding-block: var(--s-2xl); border-top: 1px solid var(--c-rule); font-size: var(--t-sm); }
.zone-line { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: var(--s-xs) var(--s-xl); align-items: baseline; margin-bottom: var(--s-xl); }
.zone-line h2 { font-size: var(--t-lg); grid-row: span 2; }
.zone-line > p { color: var(--c-ink-2); }
.zone-more summary { cursor: pointer; color: var(--c-accent); font-weight: 600; list-style: none; }
.zone-more summary::-webkit-details-marker { display: none; }
.zone-more summary::after { content: ' +'; }
.zone-more[open] summary::after { content: ' −'; }
.zone-more p { margin-top: var(--s-xs); color: var(--c-muted); line-height: 1.7; }
.sitemap-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--s-lg); }
.sitemap-grid h3 { font-size: var(--t-xs); font-family: var(--f-body); font-weight: 600; color: var(--c-ink); letter-spacing: 0; margin-bottom: var(--s-2xs); }
.sitemap-grid ul { list-style: none; display: grid; gap: 0.35rem; }
.sitemap-grid a { color: var(--c-muted); text-decoration: none; font-size: var(--t-xs); line-height: 1.4; }
.sitemap-grid a:hover { color: var(--c-accent); }
@media (max-width: 900px) { .zone-line { grid-template-columns: minmax(0, 1fr); } .sitemap-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.offer-side .price { font-family: var(--f-display); font-weight: 700; color: var(--c-accent); margin: var(--s-2xs) 0 var(--s-sm); }
.gear-slim { padding-block: var(--s-md); }