/* BeandBus — landing · feuille de styles de la page */
:root { --leading: 28px; --half: 14px; --edge: clamp(20px, 5vw, 72px); --measure: 58ch;
  --ink: var(--color-neutral-900);
  --ink-78: color-mix(in srgb, var(--color-neutral-900) 78%, transparent);
  --ink-64: color-mix(in srgb, var(--color-neutral-900) 74%, transparent);
  --ink-55: color-mix(in srgb, var(--color-neutral-900) 70%, transparent);
  /* couleur secondaire flash — complémentaire du blurple Nocturne, en oklch sur la
     même échelle de chroma : réservée aux marqueurs d'attention (jamais un aplat large) */
  /* couleur secondaire « peps » — corail vif, opposé chaud du blurple Nocturne :
     réservée aux actions et aux signaux d'économie, jamais en aplat large */
  --flash: oklch(0.685 0.205 24);
  --flash-deep: oklch(0.495 0.190 24);
  --flash-tint: oklch(0.945 0.050 24);
  --flash-ink: oklch(0.255 0.090 24);
  --ok: oklch(0.50 0.115 155);
  --ok-tint: oklch(0.945 0.040 155);
  --warn: oklch(0.58 0.135 75);
  --warn-tint: oklch(0.955 0.055 85);
  /* pas du corail sur le fond indigo : le --flash de base n'y passe pas AA */
  --flash-on-dark: oklch(0.78 0.19 24);
}
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0; color: var(--ink);
  background:
    radial-gradient(1200px 720px at 82% -160px,
      color-mix(in srgb, var(--color-accent-200) 60%, transparent), transparent 60%),
    radial-gradient(900px 600px at -8% 12%,
      color-mix(in srgb, var(--color-accent-300) 26%, transparent), transparent 55%),
    radial-gradient(1000px 700px at 108% 34%,
      color-mix(in srgb, var(--color-accent-200) 34%, transparent), transparent 58%),
    radial-gradient(900px 700px at -6% 72%,
      color-mix(in srgb, var(--color-accent-200) 24%, transparent), transparent 55%),
    var(--color-neutral-200);
  text-wrap: pretty;
}
/* verre à la Apple : panneaux translucides, flou d'arrière-plan, arête claire */
.glass {
  background: color-mix(in srgb, var(--color-neutral-100) 52%, transparent);
  -webkit-backdrop-filter: blur(18px) saturate(1.5);
  backdrop-filter: blur(18px) saturate(1.5);
  border: 1px solid color-mix(in srgb, var(--color-neutral-100) 80%, transparent);
  box-shadow: 0 12px 32px color-mix(in srgb, var(--color-neutral-900) 9%, transparent),
    inset 0 1px 0 color-mix(in srgb, var(--color-neutral-100) 90%, transparent);
}
a { color: var(--color-accent-700); text-decoration: none; }
a:hover { color: var(--color-accent-600); }
:focus-visible { outline: 2px solid var(--color-accent-600); outline-offset: 2px; }
.wrap { max-width: 1200px; margin: 0 auto; padding: 0 var(--edge); }

/* — topbar + nav (sticky, ré-encrés pour fond clair) — */
.topbar { display: flex; justify-content: space-between; gap: var(--space-4); flex-wrap: wrap;
  padding: 7px max(var(--edge), calc((100% - 1200px) / 2 + var(--edge)));
  font-size: 12.5px; line-height: 18px; color: var(--ink-55);
  border-bottom: 1px solid var(--color-neutral-300); font-feature-settings: "tnum" 1; }
.topbar a { color: var(--color-accent-700); }
.nav { position: sticky; top: 0; z-index: 40;
  background: color-mix(in srgb, var(--color-neutral-100) 42%, transparent);
  backdrop-filter: blur(18px) saturate(1.6); -webkit-backdrop-filter: blur(18px) saturate(1.6);
  padding-inline: max(var(--edge), calc((100% - 1200px) / 2 + var(--edge)));
  border-bottom: 1px solid color-mix(in srgb, var(--color-neutral-100) 85%, transparent);
  box-shadow: 0 1px 0 color-mix(in srgb, var(--color-neutral-900) 7%, transparent); }
.nav a { white-space: nowrap; color: var(--color-neutral-700); }
.nav a:hover { color: var(--color-accent-700); }
.nav .nav-brand, .nav a.nav-brand { color: var(--ink); }
.nav .btn { background: var(--flash-deep); border-color: var(--flash-deep); color: var(--color-neutral-100); font-weight: 500;
  box-shadow: 0 3px 12px color-mix(in srgb, var(--flash-deep) 30%, transparent); }
.nav .btn:hover { background: color-mix(in srgb, var(--flash-deep) 88%, black); border-color: color-mix(in srgb, var(--flash-deep) 88%, black); color: var(--color-neutral-100); }
@media (max-width: 560px) { .nav a:not(.btn):not(.nav-brand) { display: none; } .topbar { display: none; } }

/* — boutons / champs / tags / seg ré-encrés (toujours en contour) — */
.btn { border-color: var(--color-accent-600); color: var(--color-accent-700); }
.btn:hover { background: color-mix(in srgb, var(--color-accent-200) 55%, transparent); color: var(--color-accent-700); }
.btn:active { color: var(--color-accent-800); }
.btn-ghost { border-color: transparent; }
.btn-ghost:hover { border-color: var(--color-neutral-300); }
.input { background: var(--color-neutral-100); border-color: var(--color-neutral-400); color: var(--ink); }
.input::placeholder { color: var(--color-neutral-500); }
.input:focus, .input:focus-visible { border-color: var(--color-accent-600); }
.input:hover { border-color: var(--color-neutral-500); }
.tag { border-color: var(--color-neutral-400); color: var(--color-neutral-700); background: transparent; }
.tag-accent { border-color: var(--color-accent-600); color: var(--color-accent-700);
  background: color-mix(in srgb, var(--color-accent-200) 40%, transparent); }

.rule { height: 1px; border: 0; margin: 0;
  background: linear-gradient(to right, transparent, var(--color-neutral-300) 48px calc(100% - 48px), transparent); }
.kicker { position: relative; display: block;
  font-size: 13px; line-height: var(--half); letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--color-accent-700); font-feature-settings: "tnum" 1;
  margin: 0 0 calc(var(--leading) - var(--half)); }
.kicker::before { content: ""; position: absolute; left: -64px; top: calc(50% - 0.5px);
  width: 44px; height: 1px; background: var(--color-accent-600); }
@media (max-width: 1280px) { .kicker::before { display: none; } }

/* — hero v4 : sans photo — lueur accent + anneaux en trait, formulaire en première vue — */
.hero { position: relative; overflow: hidden; padding: calc(3 * var(--leading)) 0 calc(2.5 * var(--leading));
  background:
    radial-gradient(1000px 520px at 88% -12%, color-mix(in srgb, var(--color-accent-200) 62%, transparent), transparent 62%),
    radial-gradient(760px 460px at -8% 112%, color-mix(in srgb, var(--color-accent-200) 34%, transparent), transparent 58%);
  border-bottom: 1px solid color-mix(in srgb, var(--color-neutral-100) 80%, transparent); }
.hero-deco { position: absolute; right: -130px; top: -110px; width: 560px; height: 560px;
  pointer-events: none; z-index: 0; }
.hero > .wrap { position: relative; z-index: 1; }
.hero-head { display: grid; grid-template-columns: minmax(0, 5fr) minmax(400px, 6fr);
  gap: var(--leading) clamp(24px, 4vw, 56px); align-items: center; }
.featured { position: relative; margin: 0; padding: 8px; border-radius: calc(var(--radius-lg) + 8px);
  background: color-mix(in srgb, var(--color-neutral-100) 45%, transparent);
  -webkit-backdrop-filter: blur(16px) saturate(1.4); backdrop-filter: blur(16px) saturate(1.4);
  border: 1px solid color-mix(in srgb, var(--color-neutral-100) 82%, transparent);
  box-shadow: 0 18px 44px color-mix(in srgb, var(--color-neutral-900) 13%, transparent),
    inset 0 1px 0 color-mix(in srgb, var(--color-neutral-100) 90%, transparent); }
.featured iframe { display: block; width: 100%; aspect-ratio: 16 / 9; border: 0;
  border-radius: var(--radius-lg); background: var(--color-neutral-900); }
.fchip { position: absolute; left: 18px; top: 18px; z-index: 2;
  font-size: 12px; line-height: 18px; padding: 4px 12px; border-radius: 999px;
  color: var(--ink); white-space: nowrap;
  background: color-mix(in srgb, var(--color-neutral-100) 60%, transparent);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  border: 1px solid color-mix(in srgb, var(--color-neutral-100) 88%, transparent);
  font-feature-settings: "tnum" 1; }
.fchip strong { color: var(--flash-deep); font-weight: 500; }
.fchip::before { content: ""; display: inline-block; width: 7px; height: 7px; border-radius: 50%;
  background: var(--flash); margin-right: 7px; vertical-align: 1px; }
.fchip:hover { color: var(--color-accent-700); }
@media (max-width: 1100px) { .hero-head { grid-template-columns: 1fr; } .featured { max-width: 620px; } }
@media (max-width: 520px) { .hero-head { min-width: 0; } .featured { min-width: 0; padding: 5px; } }
.display { font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: clamp(38px, 4.6vw, 62px); line-height: clamp(42px, 5.1vw, 69px);
  letter-spacing: -0.015em; margin: 0; margin-left: -0.06em; text-box: trim-both cap alphabetic; }
.display .line { display: block; }
.hero .sub { font-size: 19px; line-height: 30px; max-width: 46ch;
  margin: calc(1.5 * var(--leading) - 1cap) 0 0; color: var(--ink-78); text-box: trim-both cap alphabetic; }
.hero .sub strong { font-weight: 500; color: var(--ink); }
/* — logos autocaristes (première vue) — */
.carriers { display: flex; align-items: center; gap: var(--space-2) var(--space-4);
  margin-top: var(--leading); }
.cr-marquee { flex: 1; min-width: 0; overflow: hidden;
  -webkit-mask-image: linear-gradient(to right, transparent, black 32px, black calc(100% - 32px), transparent);
  mask-image: linear-gradient(to right, transparent, black 32px, black calc(100% - 32px), transparent); }
.cr-track { display: flex; gap: var(--space-6); width: max-content; padding-right: var(--space-6);
  animation: cr-scroll 26s linear infinite; }
.cr-marquee:hover .cr-track { animation-play-state: paused; }
@keyframes cr-scroll { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .cr-track { animation: none; } }
.carriers .c-lab { font-size: 13px; line-height: 20px; color: var(--ink-64); font-feature-settings: "tnum" 1; }
.carriers .c-lab strong { color: var(--ink); font-weight: 500; }
.cr { display: inline-flex; align-items: center; gap: 9px; white-space: nowrap;
  padding: 6px 14px 6px 8px; border-radius: 999px;
  background: color-mix(in srgb, var(--color-neutral-100) 42%, transparent);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  border: 1px solid color-mix(in srgb, var(--color-neutral-100) 82%, transparent);
  box-shadow: 0 2px 8px color-mix(in srgb, var(--color-neutral-900) 6%, transparent); }
.cr img { flex: none; height: 24px; width: auto; max-width: 74px; object-fit: contain; display: block; }
.cr.on-light { background: color-mix(in srgb, var(--color-neutral-100) 88%, transparent); }
.cr.on-light img { border-radius: 5px; }
.cr.is-slot .cm { flex: none; width: 26px; height: 24px; border-radius: 6px; display: grid; place-items: center;
  border: 1px dashed var(--color-neutral-400); color: var(--color-neutral-600);
  background: color-mix(in srgb, var(--color-neutral-100) 55%, transparent);
  font-family: var(--font-heading); font-weight: var(--font-heading-weight); font-size: 14px; line-height: 1; }
.cr.is-slot .cn { color: var(--ink-55); }
.cr .cn { font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: 13px; line-height: 20px; color: var(--color-neutral-700); letter-spacing: 0.01em; }

/* — types de trajet (brief §5/§25) : tuiles verre mises en évidence — */
/* le bloc de demande (étapes 1+2) : panneau verre proche, l'unique foyer du hero */
.quote-panel { position: relative; margin-top: calc(1.5 * var(--leading));
  padding: var(--space-6) var(--space-6) var(--space-4); border-radius: calc(var(--radius-lg) + 6px);
  background: color-mix(in srgb, var(--color-neutral-100) 62%, transparent);
  -webkit-backdrop-filter: blur(22px) saturate(1.6); backdrop-filter: blur(22px) saturate(1.6);
  border: 1px solid color-mix(in srgb, var(--color-accent-400) 55%, transparent);
  box-shadow: 0 22px 56px color-mix(in srgb, var(--color-neutral-900) 14%, transparent),
    0 0 0 6px color-mix(in srgb, var(--color-accent-200) 28%, transparent),
    inset 0 1px 0 color-mix(in srgb, var(--color-neutral-100) 92%, transparent); }
.quote-panel .step-lab:first-child { margin-top: 0; }
/* bandeau « ajouté à la demande » — le retour visuel d'une fiche autocariste */
.added { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap;
  margin: 0 0 var(--space-4); padding: 11px 14px; border-radius: var(--radius-lg);
  background: var(--flash-tint); box-shadow: inset 0 0 0 2px var(--flash);
  animation: added-in .32s cubic-bezier(.34,1.4,.64,1) both; }
.added[hidden] { display: none; }
@keyframes added-in { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .added { animation: none; } }
.added-ck { flex: none; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center;
  font-size: 13px; font-weight: 700; background: var(--flash-deep); color: var(--color-neutral-100); }
.added-lg { flex: none; display: grid; place-items: center; padding: 5px 9px; border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--color-neutral-100) 92%, transparent); }
.added-lg img { display: block; height: 22px; width: auto; max-width: 76px; object-fit: contain; }
.added-t { flex: 1 1 260px; min-width: 0; font-size: 13px; line-height: 20px; color: var(--flash-ink); }
.added-t b { font-family: var(--font-heading); font-weight: var(--font-heading-weight); font-size: 15px; }
.added-x { flex: none; font: inherit; font-size: 16px; line-height: 1; cursor: pointer; border: 0;
  width: 26px; height: 26px; border-radius: 50%; color: var(--flash-ink);
  background: color-mix(in srgb, var(--flash) 26%, transparent); }
.added-x:hover { background: var(--flash-deep); color: var(--color-neutral-100); }
.qp-tag { position: absolute; top: -11px; left: var(--space-6);
  font-size: 11.5px; line-height: 20px; padding: 1px 12px; border-radius: 999px;
  letter-spacing: 0.06em; text-transform: uppercase; color: var(--color-neutral-100);
  background: var(--color-section); border: 1px solid var(--color-section); font-weight: 500; }
.step-lab { display: flex; align-items: center; gap: 10px; margin: calc(1.5 * var(--leading)) 0 0;
  font-size: 15.5px; line-height: var(--leading); font-weight: 500; color: var(--ink); }
.step-lab + .step-lab, .search-bar + * .step-lab { margin-top: var(--leading); }
.step-lab .n { flex: none; width: 22px; height: 22px; border-radius: 50%;
  border: 1px solid var(--color-accent-600); color: var(--color-accent-700);
  background: color-mix(in srgb, var(--color-accent-200) 40%, transparent);
  font-size: 12px; font-feature-settings: "tnum" 1; display: grid; place-items: center; }
/* étape 2 dans une teinte distincte de l'étape 1 : indigo profond (--color-section) */
.step-lab.s2 .n { border-color: var(--color-section); color: var(--color-neutral-100);
  background: var(--color-section); }
/* zones colorées : accent pour l'étape 1, indigo pour l'étape 2 */
.qstep { padding: var(--half) 0 var(--space-3) var(--space-4); border-left: 3px solid var(--color-accent-500);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  background: linear-gradient(to right, color-mix(in srgb, var(--color-accent-200) 42%, transparent), transparent 62%); }
.qstep.s2-zone { border-left-color: var(--color-section); margin-top: var(--space-3);
  background: linear-gradient(to right, color-mix(in srgb, var(--color-section-ghost) 28%, transparent), transparent 34%); }
.qstep .step-lab { margin-top: 0; }
.step-lab .hint { font-size: 13px; font-weight: 400; color: var(--ink-55); }
.trip-types { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; margin-top: var(--half); }
.tt { font: inherit; cursor: pointer; text-align: left; position: relative; overflow: hidden;
  display: flex; flex-direction: column; align-items: flex-start; gap: 6px;
  padding: 12px 13px 11px; border-radius: 16px; color: var(--ink);
  background: color-mix(in srgb, var(--color-neutral-100) 55%, transparent);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  border: 1px solid color-mix(in srgb, var(--color-neutral-100) 85%, transparent);
  box-shadow: 0 3px 10px color-mix(in srgb, var(--color-neutral-900) 7%, transparent);
  transition: transform 0.16s cubic-bezier(.34,1.56,.64,1), box-shadow 0.16s ease, background 0.16s ease; }
.tt .ic { display: block; height: 30px; }
.tt .ic svg { display: block; height: 30px; width: auto; overflow: visible; }
.tt .l { font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: 14.5px; line-height: 19px; }
.tt .h { font-size: 11.5px; line-height: 15px; color: var(--ink-55); }
.tt:hover { transform: translateY(-3px) rotate(-0.6deg);
  box-shadow: 0 10px 22px color-mix(in srgb, var(--color-neutral-900) 12%, transparent);
  background: color-mix(in srgb, var(--color-neutral-100) 72%, transparent); }
.tt[aria-selected="true"] { border-color: var(--color-accent-500);
  box-shadow: inset 0 0 0 2px var(--color-accent-500), 0 8px 20px color-mix(in srgb, var(--color-accent-500) 22%, transparent);
  background: color-mix(in srgb, var(--color-accent-200) 52%, transparent); }
.tt[aria-selected="true"]::after { content: "✓"; position: absolute; top: 8px; right: 10px;
  width: 17px; height: 17px; border-radius: 50%; background: var(--color-accent-500); color: var(--color-neutral-100);
  font-size: 10px; line-height: 17px; text-align: center; font-weight: 700; }
@media (prefers-reduced-motion: reduce) { .tt { transition: none; } .tt:hover { transform: none; } }
/* — étape 3 réduite à une ligne de défaut modifiable — */
.reach-line { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap;
  margin: var(--space-3) 0 0; padding: 9px 12px; border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--color-section) 7%, var(--color-neutral-100));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--color-section) 24%, transparent);
  font-size: 13px; line-height: 20px; color: var(--ink-78); font-feature-settings: "tnum" 1; }
.reach-line b { color: var(--ink); font-weight: 500; }
.reach-line .edit { margin-left: auto; font: inherit; font-size: 13px; cursor: pointer;
  border: 0; background: transparent; color: var(--color-accent-700); text-decoration: underline;
  text-underline-offset: 3px; white-space: nowrap; }
.reach-line .edit:hover { color: var(--color-accent-600); }
.reach-panel[hidden] { display: none; }
.reach-panel { margin-top: var(--space-3); padding: var(--space-3) var(--space-4) var(--space-4);
  border-radius: var(--radius-md); background: var(--color-neutral-100);
  box-shadow: inset 0 0 0 1px var(--color-neutral-300); }
.reach-panel .rp-lab { font-size: 12px; line-height: var(--half); letter-spacing: 0.05em;
  text-transform: uppercase; color: var(--ink-55); margin: 0 0 8px; }
.qp-submit { display: block; width: 100%; box-sizing: border-box; margin-top: var(--space-4);
  text-align: center; justify-content: center; font-size: 17px; padding: 15px 22px; font-weight: 500;
  background: var(--flash-deep); border-color: var(--flash-deep); color: var(--color-neutral-100);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--flash) 40%, transparent),
    0 8px 24px color-mix(in srgb, var(--flash-deep) 32%, transparent); }
.qp-submit:hover { background: color-mix(in srgb, var(--flash-deep) 88%, black); border-color: color-mix(in srgb, var(--flash-deep) 88%, black); color: var(--color-neutral-100); }
.qp-submit:active { background: color-mix(in srgb, var(--flash-deep) 78%, black); }
.sb-cell.is-err { box-shadow: inset 0 0 0 2px var(--flash-deep); }
.qp-err { font-size: 13.5px; line-height: 21px; margin: var(--space-3) 0 0; text-align: center;
  color: var(--flash-deep); font-weight: 500; }
.qp-micro { display: flex; align-items: center; justify-content: center; gap: 9px; flex-wrap: wrap;
  font-size: 13px; line-height: 20px; margin: 11px 0 0; text-align: center;
  color: var(--ink-64); font-feature-settings: "tnum" 1; }
.qp-micro b { color: var(--ink); font-weight: 500; }
.qp-micro::before { content: ""; flex: none; width: 7px; height: 7px; border-radius: 50%;
  background: var(--flash); animation: rq-pulse 2.4s ease-out infinite; }

/* — sélection d'autocaristes — */
.picked { display: flex; flex-wrap: wrap; gap: 8px; margin-top: var(--half); }
.pchip { display: inline-flex; align-items: center; gap: 8px; padding: 5px 8px 5px 6px;
  border-radius: 999px; font-size: 13px; line-height: 20px; white-space: nowrap;
  background: var(--color-neutral-100); box-shadow: inset 0 0 0 1px var(--color-neutral-300); }
.pchip img { flex: none; height: 20px; width: auto; max-width: 62px; object-fit: contain; display: block; }
.pchip .x { flex: none; width: 17px; height: 17px; border-radius: 50%; border: 0; cursor: pointer;
  display: grid; place-items: center; font: inherit; font-size: 11px; line-height: 1;
  color: var(--ink-64); background: color-mix(in srgb, var(--color-neutral-900) 8%, transparent); }
.pchip .x:hover { background: color-mix(in srgb, var(--color-neutral-900) 16%, transparent); color: var(--ink); }
.pchip.add { cursor: pointer; font: inherit; font-size: 13px; padding: 5px 14px 5px 11px;
  color: var(--color-accent-700); background: transparent;
  box-shadow: inset 0 0 0 1px var(--color-accent-500); }
.pchip.add:hover { background: color-mix(in srgb, var(--color-accent-200) 45%, transparent); }
.pchip.add .plus { font-family: var(--font-heading); font-size: 15px; line-height: 1; }
.reach { display: grid; grid-template-columns: repeat(auto-fit, minmax(176px, 1fr)); gap: 8px; margin-top: var(--space-3); }
.rc { font: inherit; cursor: pointer; text-align: left; display: flex; flex-direction: column; gap: 3px;
  padding: 10px 12px; border-radius: var(--radius-md); color: var(--ink);
  background: var(--color-neutral-100); border: 1px solid var(--color-neutral-300); }
.rc b { font-size: 13.5px; line-height: 19px; font-weight: 500; }
.rc span { font-size: 11.5px; line-height: 16px; color: var(--ink-55); }
.rc:hover { border-color: var(--color-accent-500); }
.rc[aria-selected="true"] { border-color: var(--flash); box-shadow: inset 0 0 0 1px var(--flash);
  background: color-mix(in srgb, var(--flash-tint) 60%, var(--color-neutral-100)); }
.radius { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: var(--space-3);
  font-size: 13px; color: var(--ink-64); }
.rad-opt { font: inherit; font-size: 13px; cursor: pointer; padding: 4px 12px; border-radius: 999px;
  color: var(--ink); background: var(--color-neutral-100);
  border: 1px solid var(--color-neutral-300); font-feature-settings: "tnum" 1; }
.rad-opt[aria-selected="true"] { border-color: var(--flash-deep); color: var(--flash-deep); background: var(--flash-tint); }
.reach-note { font-size: 12.5px; line-height: 19px; color: var(--ink-55); margin: var(--space-3) 0 0;
  font-feature-settings: "tnum" 1; }
.reach-note b { color: var(--ink); font-weight: 500; }

/* display:flex bat l'attribut [hidden] — on le rétablit explicitement */
.search-bar[hidden] { display: none; }

.search-bar { display: flex; align-items: stretch; margin-top: var(--half);
  background: color-mix(in srgb, var(--color-neutral-100) 82%, transparent);
  -webkit-backdrop-filter: blur(18px) saturate(1.5); backdrop-filter: blur(18px) saturate(1.5);
  border: 1px solid color-mix(in srgb, var(--color-section) 42%, transparent);
  border-radius: var(--radius-lg); padding: 6px;
  box-shadow: 0 12px 32px color-mix(in srgb, var(--color-neutral-900) 10%, transparent),
    inset 0 1px 0 color-mix(in srgb, var(--color-neutral-100) 90%, transparent); }
.sb-cell { flex: 1 1 0; min-width: 0; padding: 7px 12px; display: flex; flex-direction: column; gap: 2px;
  border-radius: calc(var(--radius-lg) - 4px);
  background: color-mix(in srgb, var(--color-section) 11%, var(--color-neutral-100));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--color-section) 34%, transparent); }
.sb-cell + .sb-cell { margin-left: 4px; }
.sb-cell label { font-size: 11px; line-height: 14px; letter-spacing: 0.05em; text-transform: uppercase;
  color: var(--color-section); font-weight: 500; }
.sb-cell input { border: 0; background: transparent; font: inherit; font-size: 15px;
  color: var(--ink); padding: 0; min-width: 0; }
.sb-cell input::placeholder { color: color-mix(in srgb, var(--color-section) 82%, transparent); }
.sb-cell input:focus { outline: none; }
.sb-cell input[type="date"] { font-feature-settings: "tnum" 1; cursor: pointer;
  color: var(--ink); width: 100%; }
.sb-cell input[type="date"]::-webkit-calendar-picker-indicator { cursor: pointer; opacity: .55;
  filter: none; margin-left: 4px; }
.sb-cell input[type="date"]:hover::-webkit-calendar-picker-indicator { opacity: 1; }
.sb-cell:has(input[type="date"]) { cursor: pointer; }
.sb-cell { position: relative; }
.ac-list { position: absolute; left: 0; right: 0; top: calc(100% + 6px); z-index: 60;
  list-style: none; margin: 0; padding: 5px; max-height: 264px; overflow-y: auto;
  border-radius: var(--radius-md); background: var(--color-neutral-100);
  border: 1px solid var(--color-neutral-300); box-shadow: var(--shadow-lg); min-width: 240px; }
.ac-list[hidden] { display: none; }
.ac-i { display: flex; align-items: center; gap: 9px; padding: 8px 10px; border-radius: var(--radius-sm);
  font-size: 13.5px; line-height: 20px; color: var(--ink); cursor: pointer; }
.ac-i svg { flex: none; width: 15px; height: 15px; color: var(--color-section); }
.ac-i span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ac-src { padding: 6px 10px 3px; font-size: 11px; line-height: 16px; color: var(--ink-55);
  letter-spacing: 0.04em; text-transform: uppercase; pointer-events: none; }
.ac-i:hover, .ac-i.on { background: color-mix(in srgb, var(--color-section) 10%, transparent); }
.sb-cell:focus-within { background: color-mix(in srgb, var(--color-section) 16%, var(--color-neutral-100));
  box-shadow: inset 0 0 0 2px var(--color-section); }
.search-bar .btn { display: none; }
.sb-under { display: flex; justify-content: space-between; gap: var(--space-2) var(--space-4); flex-wrap: wrap;
  margin-top: var(--half); font-size: 12.5px; line-height: 18px; color: var(--ink-55); font-feature-settings: "tnum" 1; }

/* — bande de confiance (marques en texte) — */
.trust { padding: var(--leading) 0 calc(1.5 * var(--leading)); }
.trust .t-lab { font-size: 12px; line-height: var(--half); letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--ink-55); margin: 0 0 var(--half); }
.trust .t-row { display: flex; gap: var(--space-3) var(--space-6); flex-wrap: wrap; align-items: baseline; }
.trust .t-row span { font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-neutral-500);
  white-space: nowrap; }

/* — bande de preuve : l'unique aplat saturé, travaillé comme un argumentaire — */
.stats, .band { background:
    radial-gradient(1100px 520px at 84% -40%, color-mix(in srgb, var(--color-section-glow) 80%, transparent), transparent 64%),
    radial-gradient(700px 400px at 6% 120%, color-mix(in srgb, var(--color-accent-800) 55%, transparent), transparent 60%),
    var(--color-section);
  color: var(--color-neutral-100); }
.stats { position: relative; overflow: hidden; padding: calc(2.5 * var(--leading)) 0 calc(2 * var(--leading)); }
.stats::before { content: ""; position: absolute; inset: 0 0 auto; height: 1px;
  background: linear-gradient(to right, transparent, color-mix(in srgb, var(--flash) 70%, transparent) 20%, color-mix(in srgb, var(--color-accent-400) 70%, transparent) 70%, transparent); }
.st-kicker { display: flex; align-items: center; gap: 10px; margin: 0 0 var(--leading);
  font-size: 12.5px; line-height: 20px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--flash-on-dark); }
.st-kicker .live { width: 7px; height: 7px; border-radius: 50%; background: var(--flash);
  animation: rq-pulse 2.4s ease-out infinite; }
.st-kicker .sep { flex: 1; height: 1px; background: color-mix(in srgb, var(--color-neutral-100) 18%, transparent); }
.stats .grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--leading) 0; }
.sfig { position: relative; padding: 0 clamp(16px, 2.4vw, 32px); }
.sfig + .sfig { border-left: 1px solid color-mix(in srgb, var(--color-neutral-100) 16%, transparent); }
.sfig:first-child { padding-left: 0; }
.sfig-viz { height: 22px; margin-bottom: 10px; }
.sfig-viz svg { display: block; height: 22px; width: auto; overflow: visible; }
.stat-num { font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: clamp(38px, 4vw, 56px); line-height: 1.04; margin: 0; margin-left: -0.04em;
  letter-spacing: -0.02em; font-feature-settings: "tnum" 1; }
.stat-label { font-size: 13.5px; line-height: 20px; margin: 8px 0 0; font-weight: 500;
  color: var(--color-neutral-100); letter-spacing: 0; text-transform: none; }
.stat-proof { font-size: 12.5px; line-height: 19px; margin: 5px 0 0;
  color: color-mix(in srgb, var(--color-neutral-100) 62%, transparent); font-feature-settings: "tnum" 1; }
.stats-foot { display: flex; align-items: center; gap: var(--space-4) var(--space-6); flex-wrap: wrap;
  margin-top: calc(1.5 * var(--leading)); padding-top: var(--leading);
  border-top: 1px solid color-mix(in srgb, var(--color-neutral-100) 16%, transparent); }
.stats-foot .now { display: flex; align-items: center; gap: 9px; font-size: 13.5px; line-height: 21px;
  color: color-mix(in srgb, var(--color-neutral-100) 82%, transparent); font-feature-settings: "tnum" 1; }
.stats-foot .now b { color: var(--color-neutral-100); font-weight: 500; }
.stats-foot .now .live { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--flash);
  animation: rq-pulse 2.4s ease-out infinite; }
.stats-foot .btn { margin-left: auto; background: var(--flash-deep); border-color: var(--flash-deep); color: var(--color-neutral-100); font-size: 15px; padding: 12px 20px; font-weight: 500;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--flash) 34%, transparent),
    0 6px 20px color-mix(in srgb, black 22%, transparent); }
.stats-foot .btn:hover { background: color-mix(in srgb, var(--flash-deep) 88%, black); border-color: color-mix(in srgb, var(--flash-deep) 88%, black); color: var(--color-neutral-100); }
@media (max-width: 900px) {
  .stats .grid { grid-template-columns: 1fr 1fr; }
  .sfig { padding: 0 clamp(12px, 3vw, 24px); }
  .sfig:nth-child(odd) { padding-left: 0; }
  .sfig:nth-child(3) { border-left: 0; }
  .stats-foot .btn { margin-left: 0; }
}

/* — comment ça marche : parcours pédagogique en 3 étapes — */
.features { padding: calc(3 * var(--leading)) 0 calc(2 * var(--leading)); }
.features .lead { font-size: 15.5px; line-height: var(--leading); color: var(--ink-78);
  margin: 0 0 calc(1.5 * var(--leading)); max-width: var(--measure); }
.steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-4); }
.step { position: relative; display: flex; flex-direction: column;
  padding: 0 0 var(--space-4); overflow: hidden;
  border-radius: 20px; background: var(--color-neutral-100);
  border: 1px solid var(--color-neutral-300); box-shadow: var(--shadow-sm);
  transition: transform 0.18s cubic-bezier(.34,1.56,.64,1), box-shadow 0.18s ease; }
.step:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
@media (prefers-reduced-motion: reduce) { .step { transition: none; } .step:hover { transform: none; } }
.st-visual { position: relative; margin: 0; background: color-mix(in srgb, var(--color-neutral-300) 40%, transparent); }
.st-visual image-slot { display: block; width: 100%; aspect-ratio: 16 / 9; }
.st-visual image-slot:not([data-filled]) { border: 0; color: var(--color-neutral-600); }
.st-n { position: absolute; left: 14px; top: 14px; z-index: 2;
  width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center;
  font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: 16px; font-feature-settings: "tnum" 1;
  background: var(--color-accent-700); color: var(--color-neutral-100);
  box-shadow: 0 4px 14px color-mix(in srgb, var(--color-neutral-900) 25%, transparent); }
.step:nth-child(2) .st-n { background: var(--color-section); }
.step:nth-child(3) .st-n { background: var(--flash); color: var(--flash-deep); }
.st-time { position: absolute; right: 12px; top: 14px; z-index: 2;
  font-size: 12px; line-height: 20px; padding: 2px 12px; border-radius: 999px; font-weight: 500;
  color: var(--ink); background: color-mix(in srgb, var(--color-neutral-100) 88%, transparent);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  font-feature-settings: "tnum" 1; }
.st-body { padding: var(--space-4) var(--space-4) 0; display: flex; flex-direction: column; gap: 8px; }
.st-body .st-title, .st-body .st-copy { transition: opacity .25s ease; }
.st-body.is-live .st-title, .st-body.is-live .st-copy { opacity: 1; }
.st-step { display: inline-flex; align-items: center; gap: 7px; font-size: 11px; line-height: 17px;
  letter-spacing: 0.05em; text-transform: uppercase; font-weight: 600; color: var(--flash-deep);
  margin: 0 0 6px; opacity: 0; height: 0; overflow: hidden; transition: opacity .2s ease; }
.st-body.is-live .st-step { opacity: 1; height: auto; }
.st-step i { font-style: normal; font-feature-settings: "tnum" 1; }
.st-title { font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: 22px; line-height: 27px; margin: 0; letter-spacing: -0.012em; }
.st-copy { font-size: 14.5px; line-height: 22px; margin: 0; color: var(--ink-78); }
.st-ex { margin: var(--space-3) var(--space-4) 0; padding: 7px 12px; border-radius: 999px;
  align-self: flex-start; font-size: 12.5px; line-height: 19px;
  color: var(--color-accent-700); background: color-mix(in srgb, var(--color-accent-200) 45%, transparent);
  font-feature-settings: "tnum" 1; }
.step:nth-child(3) .st-ex { color: var(--flash-deep); background: var(--flash-tint); }
@media (max-width: 900px) { .steps { grid-template-columns: 1fr; } }

/* — démonstration animée, jouée dans l'image de chaque étape — */
.st-visual { position: relative; overflow: hidden; aspect-ratio: 5 / 4;
  background: linear-gradient(180deg, color-mix(in srgb, var(--color-accent-200) 40%, var(--color-neutral-100)), var(--color-neutral-100)); }
.shot { position: absolute; inset: 0; }
.shot .fr { position: absolute; inset: 10px; display: flex; flex-direction: column; justify-content: center;
  overflow: hidden; opacity: 0; transform: translateY(8px) scale(.985);
  transition: opacity .5s ease, transform .6s cubic-bezier(.34,1.2,.64,1); }
.shot .fr.on { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .shot .fr { transition: opacity .2s linear; transform: none; } }
.shot-play { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 5;
  width: 58px; height: 58px; border-radius: 50%; border: 0; cursor: pointer; display: grid; place-items: center;
  background: color-mix(in srgb, var(--color-neutral-100) 92%, transparent);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  box-shadow: 0 8px 26px color-mix(in srgb, var(--color-neutral-900) 26%, transparent);
  transition: transform .16s cubic-bezier(.34,1.4,.64,1), box-shadow .16s ease; }
.shot-play svg { width: 22px; height: 22px; margin-left: 3px; color: var(--flash-deep); }
.shot-play:hover { transform: translate(-50%, -50%) scale(1.08);
  box-shadow: 0 12px 32px color-mix(in srgb, var(--color-neutral-900) 32%, transparent); }
.st-visual.is-live .shot-play { opacity: 0; pointer-events: none; transform: translate(-50%, -50%) scale(.8); }
@media (prefers-reduced-motion: reduce) { .shot-play { transition: none; } .shot-play:hover { transform: translate(-50%, -50%); } }
/* voile d'attente : l'aperçu est calme jusqu'au clic */
.st-visual::after { content: ""; position: absolute; inset: 0; z-index: 4; pointer-events: none;
  background: color-mix(in srgb, var(--color-neutral-100) 34%, transparent); transition: opacity .3s ease; }
.st-visual.is-live::after { opacity: 0; }
.st-visual .st-n { z-index: 6; }
.st-visual .st-time { z-index: 6; }

/* éléments d'interface simulés, à l'échelle de la vignette */
.ui { background: var(--color-neutral-100); border-radius: 12px; padding: 13px 14px;
  box-shadow: 0 6px 18px color-mix(in srgb, var(--color-neutral-900) 9%, transparent),
    inset 0 0 0 1px color-mix(in srgb, var(--color-neutral-900) 8%, transparent); }
.ui-l { font-size: 10px; line-height: 15px; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--ink-55); margin: 0 0 7px; }
.ui-row { display: flex; gap: 5px; flex-wrap: wrap; }
.ui-chip { font-size: 11px; line-height: 17px; padding: 3px 9px; border-radius: 999px; color: var(--ink-64);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--color-neutral-900) 14%, transparent); }
.ui-chip.on { color: var(--color-neutral-100); background: var(--color-section); box-shadow: none; font-weight: 500; }
.ui-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 5px; margin-top: 8px; }
.ui-f { padding: 6px 9px; border-radius: 8px; font-size: 11px; line-height: 16px;
  background: color-mix(in srgb, var(--color-section) 7%, transparent); color: var(--ink-78); }
.ui-f b { display: block; font-size: 8.5px; letter-spacing: 0.04em; text-transform: uppercase;
  color: var(--color-section); font-weight: 600; }
.ui-quote { font-size: 11.5px; line-height: 17px; color: var(--ink-78); margin: 0; }
.ui-list { display: flex; flex-direction: column; gap: 4px; margin-top: 7px; }
.ui-i { display: flex; align-items: center; gap: 8px; padding: 7px 9px; border-radius: 9px;
  font-size: 11px; line-height: 16px; background: color-mix(in srgb, var(--color-neutral-900) 3%, transparent); }
.ui-i .dot { flex: none; width: 6px; height: 6px; border-radius: 50%; background: var(--color-neutral-400); }
.ui-i.wait .dot { background: var(--warn); }
.ui-i.got .dot { background: var(--ok); }
.ui-i.no .dot { background: var(--flash-deep); }
.ui-i .v { margin-left: auto; font-weight: 600; font-feature-settings: "tnum" 1; }
.ui-i.got .v { color: var(--ok); }
.ui-i.no .v { color: var(--flash-deep); font-weight: 500; }
.ui-cmp { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 5px; margin-top: 8px; }
.ui-c { padding: 7px 5px; border-radius: 9px; text-align: center;
  background: color-mix(in srgb, var(--color-neutral-900) 3%, transparent); }
.ui-c.best { background: var(--flash-tint); box-shadow: inset 0 0 0 1.5px var(--flash); }
.ui-c b { display: block; font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: 15px; line-height: 20px; font-feature-settings: "tnum" 1; }
.ui-c span { font-size: 9.5px; line-height: 14px; color: var(--ink-55); }
.ui-c .tag { display: inline-block; margin-top: 3px; font-size: 8px; line-height: 13px; padding: 0 6px;
  border-radius: 999px; background: var(--flash); color: var(--flash-ink); font-weight: 600; }
.ui-ok { display: flex; align-items: center; gap: 9px; }
.ui-ok .ck { flex: none; width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center;
  font-size: 13px; font-weight: 700; background: var(--ok); color: var(--color-neutral-100); }
.ui-ok b { display: block; font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: 13.5px; line-height: 19px; }
.ui-ok span { font-size: 11px; line-height: 16px; color: var(--ink-55); }
.ui-msg { display: flex; flex-direction: column; gap: 5px; margin-top: 7px; }
.ui-b { max-width: 84%; padding: 7px 10px; border-radius: 11px; font-size: 11px; line-height: 16px; }
.ui-b.them { align-self: flex-start; background: color-mix(in srgb, var(--color-neutral-900) 6%, transparent); }
.ui-b.me { align-self: flex-end; background: var(--color-section); color: var(--color-neutral-100); }

/* — comparateur en liste d'offres (convention marketplace de voyage) — */
.cmp { padding: calc(1.5 * var(--leading)) 0 calc(2.5 * var(--leading)); }
.cmp .note { font-size: 15.5px; line-height: var(--leading); color: var(--ink-78);
  margin: 0 0 var(--leading); max-width: var(--measure); }
.offers { display: flex; flex-direction: column; gap: var(--space-3); }
.offer { display: grid; grid-template-columns: 192px minmax(0, 1fr) 208px;
  background: var(--color-neutral-100); border: 1px solid var(--color-neutral-300);
  border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-sm); }
.offer.is-pick { box-shadow: inset 0 0 0 2px var(--flash), var(--shadow-md); }
.of-img { position: relative; margin: 0; min-height: 152px;
  background: color-mix(in srgb, var(--color-neutral-300) 40%, transparent); }
.of-img image-slot { display: block; width: 100%; height: 100%; }
.of-img image-slot:not([data-filled]) { border: 0; color: var(--color-neutral-600); }
.of-main { padding: var(--space-4); display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.of-top { display: flex; align-items: baseline; gap: var(--space-3); flex-wrap: wrap; }
.of-name { font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: 18px; line-height: 24px; margin: 0; letter-spacing: -0.008em; }
.of-loc { font-size: 13px; line-height: 24px; color: var(--ink-55); }
.of-veh { font-size: 14px; line-height: 21px; margin: 0; color: var(--ink-78); font-feature-settings: "tnum" 1; }
.of-feats { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 2px; }
.of-feat { font-size: 12px; line-height: 18px; padding: 1px 9px; border-radius: 5px;
  color: var(--ink-64); box-shadow: inset 0 0 0 1px var(--color-neutral-300); }
.of-trust { display: flex; gap: var(--space-3); flex-wrap: wrap; margin: 4px 0 0;
  font-size: 12.5px; line-height: 19px; color: var(--flash-deep); font-feature-settings: "tnum" 1; }
.of-badges { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 4px; }
.of-side { padding: var(--space-4); display: flex; flex-direction: column; align-items: flex-end; gap: 6px;
  border-left: 1px solid var(--color-neutral-300); text-align: right; }
.of-score { display: flex; align-items: center; gap: 8px; margin-bottom: 2px; }
.of-score .s-lab { font-size: 12.5px; line-height: 16px; }
.of-score .s-lab b { display: block; font-weight: 500; color: var(--ink); }
.of-score .s-lab span { color: var(--ink-55); font-feature-settings: "tnum" 1; }
.of-score .s-num { flex: none; width: 34px; height: 34px; border-radius: 8px 8px 8px 2px;
  display: grid; place-items: center; font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: 14px; background: var(--color-section); color: var(--color-neutral-100); font-feature-settings: "tnum" 1; }
.of-price { font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: 26px; line-height: 30px; margin: auto 0 0; letter-spacing: -0.015em; font-feature-settings: "tnum" 1; }
.of-was { font-size: 12.5px; line-height: 18px; margin: 0; color: var(--ink-55);
  text-decoration: line-through; font-feature-settings: "tnum" 1; }
.of-per { font-size: 12px; line-height: 17px; margin: 0; color: var(--ink-55); font-feature-settings: "tnum" 1; }
.of-side .btn { margin-top: 8px; width: 100%; box-sizing: border-box; justify-content: center; text-align: center;
  background: var(--flash-deep); border-color: var(--flash-deep); color: var(--color-neutral-100); font-weight: 500;
  box-shadow: 0 4px 14px color-mix(in srgb, var(--flash-deep) 28%, transparent); }
.of-side .btn:hover { background: color-mix(in srgb, var(--flash-deep) 88%, black); border-color: color-mix(in srgb, var(--flash-deep) 88%, black); color: var(--color-neutral-100); }
.of-urg { font-size: 12px; line-height: 17px; margin: 6px 0 0; color: var(--flash-deep); font-feature-settings: "tnum" 1; }
@media (max-width: 860px) {
  .offer { grid-template-columns: 192px minmax(0, 1fr); }
  .of-img { min-height: 128px; }
  .of-side { grid-column: 1 / -1; border-left: 0; border-top: 1px solid var(--color-neutral-300);
    flex-direction: row; align-items: center; justify-content: space-between; text-align: left; flex-wrap: wrap; }
  .of-price { margin: 0; }
  .of-side .btn { width: auto; margin-top: 0; }
}
.cmp-cap { margin-top: var(--space-3); font-size: 13px; line-height: var(--leading); color: var(--ink-55); margin: var(--half) 0 0; }
.golink { display: inline-flex; align-items: center; gap: 8px; margin-top: var(--leading);
  font-size: 15.5px; line-height: var(--leading); }

/* — badges vendeurs (type marketplace) : économie affichée, choix guidé — */
.bdg { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap;
  font-size: 12px; line-height: 18px; font-weight: 500; padding: 3px 10px; border-radius: 6px;
  letter-spacing: 0.01em; font-feature-settings: "tnum" 1; }
.bdg-save { background: var(--flash); color: var(--flash-ink); }
.bdg-best { background: var(--color-section); color: var(--color-neutral-100); }
.bdg-fast { background: color-mix(in srgb, var(--color-accent-200) 65%, transparent);
  color: var(--color-accent-700); box-shadow: inset 0 0 0 1px var(--color-accent-500); }
.bdg-note { background: transparent; color: var(--ink-64); box-shadow: inset 0 0 0 1px var(--color-neutral-400); }
.cmp .table td .bdg + .bdg { margin-left: 6px; }
.cmp .table tbody tr.is-pick td { background-color: color-mix(in srgb, var(--flash-tint) 55%, transparent); }
.save-strip { display: flex; align-items: baseline; gap: var(--space-2) var(--space-4); flex-wrap: wrap;
  margin: 0 0 var(--leading); padding: 10px 14px; border-radius: var(--radius-md);
  background: var(--flash-tint); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--flash) 60%, transparent);
  font-size: 14px; line-height: 22px; color: var(--flash-deep); font-feature-settings: "tnum" 1; }
.save-strip strong { font-family: var(--font-heading); font-weight: var(--font-heading-weight); font-size: 17px; }
.save-strip .s-sub { color: var(--ink-64); font-size: 13px; }

/* — dernières demandes — */
.requests { padding: calc(1.5 * var(--leading)) 0 calc(2 * var(--leading)); }
.requests .count { font-size: 15.5px; line-height: var(--leading); margin: 0 0 var(--leading);
  color: var(--ink-64); font-feature-settings: "tnum" 1; max-width: var(--measure); }
.requests .count strong { color: var(--ink); font-weight: 500; }
.rq-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: var(--space-4); }
.rq-card { border-radius: var(--radius-lg); padding: var(--space-4);
  background: color-mix(in srgb, var(--color-neutral-100) 48%, transparent);
  -webkit-backdrop-filter: blur(14px) saturate(1.4); backdrop-filter: blur(14px) saturate(1.4);
  border: 1px solid color-mix(in srgb, var(--color-neutral-100) 80%, transparent);
  box-shadow: 0 8px 22px color-mix(in srgb, var(--color-neutral-900) 7%, transparent),
    inset 0 1px 0 color-mix(in srgb, var(--color-neutral-100) 88%, transparent);
  display: flex; flex-direction: column; gap: var(--half); }
.rq-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-2); }
.rq-route { font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: 15px; line-height: 20px; margin: 0; letter-spacing: -0.005em; }
.rq-ago { font-size: 12px; line-height: 20px; color: var(--ink-55); white-space: nowrap; font-feature-settings: "tnum" 1; }
.rq-meta { font-size: 13px; line-height: 20px; margin: 0; color: var(--ink-64); font-feature-settings: "tnum" 1; }
.rq-foot { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); margin-top: 2px; }
.rq-status { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; line-height: 20px;
  color: var(--color-accent-700); font-feature-settings: "tnum" 1; white-space: nowrap; }
.rq-status.is-wait { color: var(--ink-55); }
.rq-status .pulse { width: 7px; height: 7px; border-radius: 50%; background: var(--flash);
  animation: rq-pulse 2.4s ease-out infinite; }
.rq-status.is-wait .pulse { background: var(--color-neutral-400); animation: none; }
@keyframes rq-pulse { 0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--flash) 60%, transparent); }
  70% { box-shadow: 0 0 0 6px transparent; } }
@media (prefers-reduced-motion: reduce) { .rq-status .pulse { animation: none; } }

/* — split annuaire — */
.split { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: var(--leading) clamp(24px, 5vw, 96px); align-items: center;
  padding: calc(1.5 * var(--leading)) 0 calc(2.5 * var(--leading)); }
.split-title { font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: 32px; line-height: calc(1.5 * var(--leading)); letter-spacing: -0.012em;
  margin: 0; text-box: trim-both cap alphabetic; }
.split-copy .note { font-size: 15.5px; line-height: var(--leading); color: var(--ink-78);
  margin: calc(var(--leading) - 1cap) 0 0; max-width: 48ch; text-box: trim-both cap alphabetic; }
.split-figure { margin: 0; }
.split-figure image-slot { width: 100%; aspect-ratio: 3 / 2; border-radius: var(--radius-md);
  overflow: hidden; border: 1px solid var(--color-neutral-300); box-shadow: var(--shadow-sm); }
.split-figure image-slot:not([data-filled]) { border-style: dashed; border-color: var(--color-neutral-400);
  background: color-mix(in srgb, var(--color-neutral-300) 45%, transparent); color: var(--color-neutral-600); }

/* — citation — */
.quote { padding: calc(2 * var(--leading)) 0 calc(3 * var(--leading)); }
.quote blockquote { font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: clamp(24px, 2.6vw, 34px); line-height: calc(1.5 * var(--leading));
  letter-spacing: -0.01em; max-width: 34ch; margin: 0; text-indent: -0.474em; text-box: trim-both cap alphabetic; }
.quote figcaption { font-size: 15.5px; line-height: var(--leading); color: var(--ink-64);
  margin: calc(var(--leading) - 1cap) 0 0; text-indent: -1.267em; text-box: trim-both cap alphabetic; }
@media (max-width: 720px) { .quote blockquote, .quote figcaption { text-indent: 0; } }


/* — programme de fidélité : bande indigo, pilier du produit — */
.loyal { background:
    radial-gradient(900px 420px at 88% -30%, color-mix(in srgb, var(--color-section-glow) 75%, transparent), transparent 62%),
    var(--color-section);
  color: var(--color-neutral-100); padding: calc(3 * var(--leading)) 0; }
.ly-head { display: grid; grid-template-columns: minmax(0, 7fr) minmax(240px, 4fr);
  gap: var(--leading) clamp(24px, 4vw, 64px); align-items: end; margin-bottom: calc(1.5 * var(--leading)); }
.ly-kicker { display: block; font-size: 13px; line-height: var(--half); letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--flash-on-dark); margin-bottom: var(--half); }
.ly-title { font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: clamp(28px, 3.2vw, 42px); line-height: 1.14; letter-spacing: -0.014em; margin: 0; }
.ly-note { font-size: 15.5px; line-height: var(--leading); margin: var(--half) 0 0; max-width: 62ch;
  color: color-mix(in srgb, var(--color-neutral-100) 82%, transparent); }
.ly-meter { padding: var(--space-4); border-radius: var(--radius-lg);
  background: color-mix(in srgb, var(--color-neutral-100) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--color-neutral-100) 22%, transparent); }
.ly-m-lab { font-size: 12px; line-height: 18px; letter-spacing: 0.06em; text-transform: uppercase;
  margin: 0 0 10px; color: color-mix(in srgb, var(--color-neutral-100) 70%, transparent); }
.ly-bar { height: 8px; border-radius: 999px; overflow: hidden;
  background: color-mix(in srgb, var(--color-neutral-100) 20%, transparent); }
.ly-fill { display: block; width: 40%; height: 100%; border-radius: 999px;
  background: linear-gradient(to right, var(--color-accent-400), var(--flash)); }
.ly-m-sub { font-size: 13px; line-height: 20px; margin: 10px 0 0; font-feature-settings: "tnum" 1;
  color: color-mix(in srgb, var(--color-neutral-100) 78%, transparent); }
.ly-m-sub strong { color: var(--color-neutral-100); font-weight: 500; }
.lv-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--space-4); }
.lv { border-radius: var(--radius-lg); padding: var(--space-6); display: flex; flex-direction: column; gap: var(--half);
  background: color-mix(in srgb, var(--color-neutral-100) 8%, transparent);
  border: 1px solid color-mix(in srgb, var(--color-neutral-100) 20%, transparent); }
.lv.is-now { background: color-mix(in srgb, var(--color-neutral-100) 14%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--color-accent-400) 70%, transparent); }
.lv.is-top { background: color-mix(in srgb, var(--flash) 12%, transparent);
  box-shadow: inset 0 0 0 1px var(--flash); }
.lv-badge { align-self: flex-start; font-size: 12px; line-height: 18px; padding: 2px 10px; border-radius: 999px;
  letter-spacing: 0.05em; text-transform: uppercase; font-feature-settings: "tnum" 1;
  color: color-mix(in srgb, var(--color-neutral-100) 78%, transparent);
  border: 1px solid color-mix(in srgb, var(--color-neutral-100) 32%, transparent); }
.lv.is-now .lv-badge { color: var(--color-accent-200); border-color: var(--color-accent-400); }
.lv.is-top .lv-badge { color: var(--flash-ink); background: var(--flash); border-color: var(--flash); }
.lv h3 { font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: 22px; line-height: var(--leading); margin: 0; }
.lv .unlock { font-size: 13px; line-height: 18px; margin: 0;
  color: color-mix(in srgb, var(--color-neutral-100) 74%, transparent); }
.lv ul { list-style: none; margin: var(--half) 0 0; padding: 0; display: flex; flex-direction: column; gap: 9px; }
.lv li { position: relative; padding-left: 22px; font-size: 14.5px; line-height: 21px;
  color: color-mix(in srgb, var(--color-neutral-100) 86%, transparent); }
.lv li::before { content: ""; position: absolute; left: 0; top: 10px; width: 13px; height: 1px; background: var(--flash); }
.lv li strong { color: var(--color-neutral-100); font-weight: 500; }
.ly-cta { display: flex; align-items: center; gap: var(--space-4) var(--space-6); flex-wrap: wrap;
  margin-top: calc(1.5 * var(--leading)); }
.loyal .btn { background: var(--flash-deep); border-color: var(--flash-deep); color: var(--color-neutral-100); font-size: 15.5px; padding: 12px 20px; font-weight: 500;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--flash) 34%, transparent),
    0 6px 20px color-mix(in srgb, black 22%, transparent); }
.loyal .btn:hover { background: color-mix(in srgb, var(--flash-deep) 88%, black); border-color: color-mix(in srgb, var(--flash-deep) 88%, black); color: var(--color-neutral-100); }
.loyal .fine { flex: 1 1 340px; font-size: 12.5px; line-height: 18px; margin: 0;
  color: color-mix(in srgb, var(--color-neutral-100) 62%, transparent); }
@media (max-width: 900px) { .ly-head { grid-template-columns: 1fr; } }

/* — FAQ — */
.faq { padding: 0 0 calc(3 * var(--leading)); }
.faq .fq-list { max-width: 760px; }
.faq details { border-top: 1px solid var(--color-neutral-300); }
.faq details:last-child { border-bottom: 1px solid var(--color-neutral-300); }
.faq summary { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-4);
  cursor: pointer; list-style: none; padding: var(--half) 0;
  font-size: 15.5px; line-height: var(--leading); font-weight: 500; color: var(--ink); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; flex: none; color: var(--color-accent-700);
  font-family: var(--font-heading); font-size: 18px; line-height: var(--leading); }
.faq details[open] summary::after { content: "–"; }
.faq summary:hover { color: var(--color-accent-800); }
.faq .fq-a { font-size: 15.5px; line-height: var(--leading); color: var(--ink-78);
  margin: 0; padding: 0 0 var(--leading); max-width: 62ch; }

/* — bande de clôture (indigo) — */
.band { padding: calc(2.5 * var(--leading)) 0; }
.band .b-grid { display: flex; align-items: center; justify-content: space-between; gap: var(--leading); flex-wrap: wrap; }
.band h2 { font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: clamp(24px, 2.6vw, 34px); line-height: calc(1.5 * var(--leading));
  letter-spacing: -0.01em; margin: 0; text-box: trim-both cap alphabetic; }
.band .b-micro { font-size: 13px; line-height: var(--leading); margin: var(--half) 0 0;
  color: color-mix(in srgb, var(--color-neutral-100) 70%, transparent); font-feature-settings: "tnum" 1; }
.band .b-actions { display: flex; flex-direction: column; gap: var(--half); align-items: flex-start; }
.band .btn { background: var(--flash-deep); border-color: var(--flash-deep); color: var(--color-neutral-100); font-size: 16px; padding: 13px 22px; font-weight: 500;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--flash) 34%, transparent),
    0 8px 24px color-mix(in srgb, black 22%, transparent); }
.band .btn:hover { background: color-mix(in srgb, var(--flash-deep) 88%, black); border-color: color-mix(in srgb, var(--flash-deep) 88%, black); color: var(--color-neutral-100); }
.band .b-pro { font-size: 13px; line-height: var(--leading); }
.band .b-pro a { color: color-mix(in srgb, var(--color-neutral-100) 80%, transparent); text-decoration: underline; text-underline-offset: 3px; }
.band .b-pro a:hover { color: var(--color-neutral-100); }

/* — footer entreprise — */
.footer { padding: calc(2 * var(--leading)) 0 var(--leading); }
.f-cols { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: var(--leading) var(--space-6); }
.f-brand p { font-size: 13px; line-height: 20px; color: var(--ink-55); margin: var(--half) 0 0; max-width: 34ch; }
.f-col h4 { font-size: 12px; line-height: var(--half); letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--ink-55); margin: 0 0 var(--half); font-weight: 500; }
.f-col ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 7px; }
.f-col a { font-size: 13.5px; line-height: 20px; color: var(--color-neutral-700); }
.f-col a:hover { color: var(--color-accent-700); }
.f-base { display: flex; justify-content: space-between; gap: var(--space-4); flex-wrap: wrap;
  margin-top: calc(1.5 * var(--leading)); padding-top: var(--leading);
  border-top: 1px solid var(--color-neutral-300);
  font-size: 12.5px; line-height: 18px; color: var(--ink-55); }

@media (max-width: 1100px) {
}
@media (max-width: 880px) {
  .hero { padding-top: calc(2 * var(--leading)); }
  .stats .grid { grid-template-columns: repeat(2, 1fr); justify-content: start; }
  .split { grid-template-columns: 1fr; }
  .split-figure { order: -1; }
  .search-bar { flex-wrap: wrap; gap: 4px; }
  .sb-cell { flex: 1 1 46%; }
  .sb-cell + .sb-cell { border-left: 0; }
  .search-bar .btn { flex: 1 1 100%; margin: 4px 2px 2px; text-align: center; justify-content: center; }
  .hero-deco { display: none; }
  .f-cols { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) { .sb-cell { flex: 1 1 100%; } }