/* ==========================================================================
   Cortex Luxury, feuille principale — direction « Roadbook »
   HTML5 + CSS3 natif. Aucune dependance, aucun framework.
   Le defilement est un itineraire : une ligne de route se dessine dans la
   marge, chaque section est une etape. Les entrees se font par masques,
   les images par rideau. Tout le mouvement tient en transform et opacity.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Reinitialisation
   -------------------------------------------------------------------------- */

*,
*::before,
*::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  color-scheme: light;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }}

/* Entete collante, sans quoi une ancre place son titre sous la barre. */
[id] { scroll-margin-top: calc(var(--header-h) + var(--space-xs)); }

body {
  margin: 0;
  background-color: var(--surface-0);
  color: var(--body);
  font-family: var(--font-display);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, p, figure, blockquote, ul, ol, dl, dd {
  margin: 0;
}

ul[class], ol[class] {
  list-style: none;
  padding: 0;
}

img, picture, video, svg {
  display: block;
  max-width: 100%;
  height: auto;
}

a { color: inherit; }

button, input, textarea, select {
  font: inherit;
  color: inherit;
}

a, button, [role="button"], summary, label {
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

button, .btn { user-select: none; -webkit-user-select: none; }

/* --------------------------------------------------------------------------
   2. Transitions de page
   View Transitions API entre deux pages du meme domaine. Amelioration
   progressive, un navigateur non concerne navigue normalement. Le fondu
   glisse est court, la page suivante monte de 12px pendant que l'ancienne
   s'efface, comme une page de carnet qu'on tourne.
   -------------------------------------------------------------------------- */

@view-transition { navigation: auto; }

@media (prefers-reduced-motion: no-preference) {
  ::view-transition-old(root) {
    animation: page-out 240ms var(--ease-inout) both;
  }

  ::view-transition-new(root) {
    animation: page-in 360ms var(--ease-out) both;
  }}

@keyframes page-out {
  to { opacity: 0; transform: translateY(-8px); }
}

@keyframes page-in {
  from { opacity: 0; transform: translateY(12px); }
}

/* L'entete reste en place pendant la transition, comme la reliure. */
.header { view-transition-name: entete; }

/* --------------------------------------------------------------------------
   3. Accessibilite transversale
   -------------------------------------------------------------------------- */

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

:focus:not(:focus-visible) { outline: none; }

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  top: 0;
  left: var(--gutter);
  z-index: 999;
  transform: translateY(-120%);
  padding: var(--space-2xs) var(--space-xs);
  background-color: var(--accent);
  color: var(--on-accent);
  font-size: var(--fs-small);
  font-weight: 700;
  letter-spacing: var(--tracking-button);
  text-transform: uppercase;
  text-decoration: none;
  transition: transform var(--dur-fast) var(--ease);
}

.skip-link:focus { transform: translateY(0); }

/* --------------------------------------------------------------------------
   4. Primitives de mise en page et ligne de route
   -------------------------------------------------------------------------- */

.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-left: max(var(--gutter), env(safe-area-inset-left));
  padding-right: max(var(--gutter), env(safe-area-inset-right));
}

.container--narrow { max-width: 920px; }

.section { padding-block: clamp(var(--space-xl), 9vw, var(--space-2xl)); }
.section--tight { padding-block: clamp(var(--space-lg), 6vw, var(--space-xl)); }
.section--flush { padding-bottom: 0; }
.section--pearl { background-color: var(--surface-2); }
.section--soft { background-color: var(--surface-1); }

/* Bande sombre de contrepoint editorial. */
.section--ink {
  background-color: var(--surface-ink);
  color: var(--body-on-dark);
}

.section--ink .t-mega,
.section--ink .t-xl,
.section--ink .t-lg,
.section--ink .t-title { color: var(--ink-on-dark); }

.section--ink .t-label { color: var(--accent-soft); }
.section--ink .t-quote { color: var(--ink-on-dark); }
.section--ink .quote__mark { color: var(--accent-soft); }
.section--ink .t-accent,
.section--ink .link-arrow { color: var(--accent-soft); }

.section--ink .link-arrow:hover,
.section--ink .link-arrow:focus-visible { color: var(--accent-soft-strong); }

.section--ink .ticks li::before { background-color: var(--accent-soft); }

.section--ink :focus-visible { outline-color: var(--accent-soft); }

/* ---- La ligne de route --------------------------------------------------
   Un filet vertical tendu sur toute la hauteur du document, pose dans la
   marge gauche du conteneur. La ou le navigateur sait lier une animation
   au defilement, la ligne se dessine a mesure que la page avance, comme
   un trajet trace au fur et a mesure. Ailleurs, elle est simplement la.
   Cachee sous 1100px, la marge n'existe plus. */

main {
  position: relative;
  display: block;
}

@media (min-width: 1100px) {
  main::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: calc(max((100% - var(--container)) / 2, 0px) + var(--gutter) * 0.4);
    width: var(--route-w);
    background-color: var(--route-color);
    z-index: 1;
    pointer-events: none;
  }

  @supports (animation-timeline: scroll()) {
    @media (prefers-reduced-motion: no-preference) {
      main::before {
        transform-origin: top center;
        animation: route-draw linear both;
        animation-timeline: scroll(root);
      }}}}

@keyframes route-draw {
  from { transform: scaleY(0.04); }
  to { transform: scaleY(1); }
}

/* Tete de section jalonnee. L'etape porte un point sur la ligne. */
.section__head {
  position: relative;
  max-width: var(--container-text);
  margin-left: 0;
  margin-right: auto;
  margin-bottom: var(--space-lg);
}

@media (min-width: 1100px) {
  .section__head::before {
    content: "";
    position: absolute;
    top: 0.5em;
    left: calc(var(--gutter) * -0.6);
    width: var(--route-dot);
    height: var(--route-dot);
    transform: translateX(-50%);
    border-radius: var(--radius-full);
    background-color: var(--accent);
    box-shadow: 0 0 0 4px var(--surface-0);
    z-index: 2;
  }

  .section--pearl .section__head::before { box-shadow: 0 0 0 4px var(--surface-2); }
  .section--soft .section__head::before { box-shadow: 0 0 0 4px var(--surface-1); }
  .section--ink .section__head::before {
    background-color: var(--accent-soft);
    box-shadow: 0 0 0 4px var(--surface-ink);
  }}

.mt-3xs { margin-top: var(--space-3xs); }
.mt-xs { margin-top: var(--space-xs); }
.mt-sm { margin-top: var(--space-sm); }
.mt-md { margin-top: var(--space-md); }
.mt-lg { margin-top: var(--space-lg); }

/* --------------------------------------------------------------------------
   5. Typographie
   Deux voix. Jost 500 tient le discours, Playfair italique glisse un mot.
   Un em dans un titre bascule en italique serif, c'est la signature.
   -------------------------------------------------------------------------- */

.t-mega,
.t-xl,
.t-lg {
  color: var(--ink);
  font-weight: 500;
  letter-spacing: var(--tracking-display);
  line-height: var(--lh-display);
  text-wrap: balance;
}

.t-mega { font-size: var(--fs-mega); line-height: var(--lh-tight); }
.t-xl   { font-size: var(--fs-xl); }
.t-lg   { font-size: var(--fs-lg); }

/* Le mot qui roule. em reste de l'emphase, le sens est porte aussi
   par la semantique. Le corps monte d'un cran, l'italique de Playfair
   dessine plus petit que Jost a corps egal. */
.t-mega em,
.t-xl em,
.t-lg em,
.hero-cinema__title em {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  font-size: 1.06em;
  letter-spacing: 0;
  padding-right: 0.04em;
}

.t-title {
  color: var(--ink);
  font-size: var(--fs-title);
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: 0;
}

.t-label {
  display: block;
  color: var(--accent);
  font-size: var(--fs-label);
  font-weight: 600;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
}

/* Jalon d'etape, le numero se place avant le libelle dans le meme
   souffle typographique, chiffres tabulaires de carnet de route. */
.t-label--pk::before {
  content: attr(data-pk) "  ·  ";
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

.t-lead {
  max-width: var(--container-text);
  color: var(--body);
  font-size: clamp(1rem, 1.4vw, 1.125rem);
  line-height: var(--lh-body);
  text-wrap: pretty;
}

.t-body { max-width: var(--container-text); text-wrap: pretty; }
.t-muted { color: var(--muted); font-size: var(--fs-small); }
.t-accent { color: var(--accent); }

.t-quote {
  max-width: 30ch;
  color: var(--ink);
  font-family: var(--font-serif);
  font-size: var(--fs-lg);
  font-style: italic;
  font-weight: 400;
  line-height: 1.4;
  letter-spacing: 0;
}

/* Chiffres alignes en colonne, indispensable pour les tarifs et specs. */
.t-num { font-variant-numeric: tabular-nums; }

/* --------------------------------------------------------------------------
   6. Boutons et liens
   Le bouton primaire se remplit par balayage, de gauche a droite, comme
   un trait de stylo. Le fond sombre est deja la, le voile balaye. Tout
   est transform, rien ne repeint.
   -------------------------------------------------------------------------- */

.btn {
  position: relative;
  z-index: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 14px var(--space-md);
  border: 1px solid transparent;
  border-radius: var(--radius-none);
  font-size: var(--fs-small);
  font-weight: 700;
  letter-spacing: var(--tracking-button);
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  overflow: hidden;
  transition: color var(--dur-fast) var(--ease),
              border-color var(--dur-fast) var(--ease),
              box-shadow var(--dur-fast) var(--ease);
}

.btn--primary {
  background-color: var(--accent);
  color: var(--on-accent);
  box-shadow: var(--shadow-sm);
}

/* Le voile de balayage se glisse entre le fond du bouton et son texte,
   z-index negatif dans le contexte d'empilement du bouton. Aucun
   enrobage du libelle n'est necessaire. */
.btn--primary::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-color: var(--accent-deep);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform var(--dur-base) var(--ease-out);
}

.btn--primary:hover::before,
.btn--primary:focus-visible::before { transform: scaleX(1); }
.btn--primary:hover { box-shadow: var(--shadow-md); }
.btn--primary:active { box-shadow: none; }

.btn--outline {
  background-color: transparent;
  border-color: var(--border-interactive);
  color: var(--ink);
}

.btn--outline::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-color: var(--ink);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform var(--dur-base) var(--ease-out);
}

.btn--outline:hover,
.btn--outline:focus-visible {
  border-color: var(--ink);
  color: var(--surface-0);
}

.btn--outline:hover::before,
.btn--outline:focus-visible::before { transform: scaleX(1); }

.section--ink .btn--outline { border-color: var(--border-interactive-dark); color: var(--ink-on-dark); }
.section--ink .btn--outline::before { background-color: var(--accent-soft); }
.section--ink .btn--outline:hover,
.section--ink .btn--outline:focus-visible { border-color: var(--accent-soft); color: var(--surface-ink); }

.btn-row { display: flex; flex-wrap: wrap; gap: var(--space-xs); }

/* Bouton compact, calibre pour l'entete. */
.btn--compact {
  min-height: 40px;
  padding: 9px 18px;
  font-size: var(--fs-label);
  white-space: nowrap;
}

.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2xs);
  color: var(--accent);
  font-size: var(--fs-small);
  font-weight: 700;
  letter-spacing: var(--tracking-button);
  text-transform: uppercase;
  text-decoration: none;
  border-bottom: 1px solid transparent;
  padding-bottom: 2px;
  transition: border-color var(--dur-fast) var(--ease),
              color var(--dur-fast) var(--ease);
}

.link-arrow:hover,
.link-arrow:focus-visible {
  color: var(--accent-deep);
  border-bottom-color: currentColor;
}

.link-arrow__glyph { transition: transform var(--dur-fast) var(--ease); }
.link-arrow:hover .link-arrow__glyph { transform: translateX(4px); }

/* --------------------------------------------------------------------------
   7. Entete et navigation
   -------------------------------------------------------------------------- */

.header {
  position: sticky;
  top: 0;
  z-index: 100;
  background-color: var(--surface-0-veil);
  backdrop-filter: saturate(1.4) blur(12px);
  border-bottom: 1px solid var(--hairline);
  transition: box-shadow var(--dur-base) var(--ease);
}

@supports not (backdrop-filter: blur(1px)) {
  .header { background-color: var(--surface-0); }}

/* Une fois la page entamee, l'entete prend une ombre discrete. */
.header--scrolled { box-shadow: var(--shadow-md); }

.header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
  min-height: var(--header-h);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2xs);
  color: var(--ink);
  text-decoration: none;
  line-height: 1.1;
}

/* Le logo est un disque sombre, il se detache seul sur le fond clair. */
.brand__mark {
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  border-radius: var(--radius-full);
}

.brand__text { display: inline-flex; flex-direction: column; }

.footer .brand__mark { width: 48px; height: 48px; }

.brand__name {
  font-size: var(--fs-body);
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.brand__meta {
  color: var(--muted);
  font-size: var(--fs-label);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
}

.nav__toggle { display: none; }

.nav__list {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Le soulignement croit depuis la gauche, dans le sens de la lecture. */
.nav__link {
  position: relative;
  display: inline-block;
  padding: var(--space-2xs) 0;
  color: var(--body);
  font-size: var(--fs-small);
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  text-decoration: none;
  transition: color var(--dur-fast) var(--ease);
}

.nav__link::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 2px;
  height: 1px;
  background-color: var(--accent);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform var(--dur-base) var(--ease-out);
}

.nav__link:hover,
.nav__link:focus-visible { color: var(--ink); }

.nav__link:hover::after,
.nav__link:focus-visible::after,
.nav__link[aria-current="page"]::after { transform: scaleX(1); }

.nav__link[aria-current="page"] { color: var(--ink); }

/* ---- Sous-menu deroulant ------------------------------------------------
   Pur CSS, il s'ouvre au survol et au focus clavier via focus-within,
   donc sans JavaScript. visibility plutot que display, sans quoi les
   liens du sous-menu sortiraient de l'ordre de tabulation. */

.nav__item--sub { position: relative; }

/* Indicateur de menu, un chevron discret apres le libelle. */
.nav__item--sub > .nav__link::before {
  content: "";
  display: inline-block;
  position: absolute;
  right: -14px;
  top: calc(50% - 5px);
  width: 6px;
  height: 6px;
  border-right: 1.5px solid var(--muted);
  border-bottom: 1.5px solid var(--muted);
  transform: rotate(45deg);
  transition: transform var(--dur-fast) var(--ease),
              border-color var(--dur-fast) var(--ease);
}

.nav__item--sub { padding-right: 14px; }

.nav__item--sub:hover > .nav__link::before,
.nav__item--sub:focus-within > .nav__link::before {
  border-color: var(--accent);
  transform: rotate(45deg) translate(1px, 1px);
}

/* Le panneau s'aligne sur le texte de son declencheur. */
.nav__sub {
  position: absolute;
  top: calc(100% + 10px);
  left: calc(var(--space-sm) * -1);
  transform: translateY(6px);
  z-index: 120;
  min-width: 264px;
  margin: 0;
  padding: var(--space-2xs) 0 var(--space-2xs);
  list-style: none;
  background-color: var(--surface-0);
  border: 1px solid var(--hairline);
  border-top: 2px solid var(--accent);
  box-shadow: var(--shadow-xl);
  visibility: hidden;
  opacity: 0;
  transition: opacity var(--dur-fast) var(--ease),
              transform var(--dur-fast) var(--ease),
              visibility 0s linear var(--dur-fast);
}

.nav__item--sub:hover .nav__sub,
.nav__item--sub:focus-within .nav__sub {
  visibility: visible;
  opacity: 1;
  transform: translateY(0);
  transition-delay: 0s;
}

/* Pont invisible entre l'element et son panneau. */
.nav__item--sub::after {
  content: "";
  position: absolute;
  top: 100%;
  left: calc(var(--space-sm) * -1);
  right: calc(var(--space-sm) * -1);
  height: 14px;
}

/* Les entrees du panneau entrent en leger escalier. */
.nav__sub li {
  transform: translateY(-4px);
  opacity: 0;
  transition: transform var(--dur-base) var(--ease-out),
              opacity var(--dur-base) var(--ease-out);
  transition-delay: calc(var(--i, 0) * 24ms);
}

.nav__item--sub:hover .nav__sub li,
.nav__item--sub:focus-within .nav__sub li {
  transform: none;
  opacity: 1;
}

.nav__sub li:nth-child(1) { --i: 0; }
.nav__sub li:nth-child(2) { --i: 1; }
.nav__sub li:nth-child(3) { --i: 2; }
.nav__sub li:nth-child(4) { --i: 3; }
.nav__sub li:nth-child(5) { --i: 4; }
.nav__sub li:nth-child(6) { --i: 5; }

.nav__sub-link {
  display: block;
  padding: 11px var(--space-sm);
  color: var(--body);
  font-size: var(--fs-small);
  line-height: 1.4;
  text-decoration: none;
  white-space: nowrap;
  transition: color var(--dur-fast) var(--ease),
              background-color var(--dur-fast) var(--ease),
              box-shadow var(--dur-fast) var(--ease);
}

.nav__sub-link:hover,
.nav__sub-link:focus-visible {
  color: var(--ink);
  background-color: var(--surface-1);
  box-shadow: inset 2px 0 0 var(--accent);
}

/* La premiere entree renvoie a la page pilier, elle sert d'en-tete. */
.nav__sub-link--root {
  color: var(--accent);
  font-size: var(--fs-label);
  font-weight: 700;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  padding-top: var(--space-xs);
  padding-bottom: var(--space-xs);
  border-bottom: 1px solid var(--hairline);
  margin-bottom: var(--space-2xs);
}

.nav__sub-link--root:hover,
.nav__sub-link--root:focus-visible {
  color: var(--accent-deep);
  background-color: transparent;
  box-shadow: none;
}

@media (max-width: 900px) {
  .header__inner { flex-wrap: wrap; padding-block: var(--space-xs); }

  .header__cta { order: 2; }
  .nav__toggle { order: 3; }
  .nav { order: 4; flex-basis: 100%; }
  .nav__list { flex-direction: column; align-items: flex-start; gap: 0; }
  .nav__item { width: 100%; border-top: 1px solid var(--hairline); }
  .nav__item--sub { padding-right: 0; }
  .nav__link { width: 100%; padding: var(--space-xs) 0; }

  .nav__sub {
    position: static;
    transform: none;
    visibility: visible;
    opacity: 1;
    min-width: 0;
    border: 0;
    box-shadow: none;
    padding: 0 0 var(--space-2xs) var(--space-xs);
  }

  .nav__sub li { transform: none; opacity: 1; }
  .nav__item--sub::after { display: none; }
  .nav__item--sub > .nav__link::before { display: none; }
  .nav__sub-link { white-space: normal; }
  .nav__sub-link:hover,
  .nav__sub-link:focus-visible { box-shadow: none; }
  .nav__sub-link--root { display: none; }

  .js .nav__toggle {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2xs);
    min-height: 48px;
    padding: 0 var(--space-xs);
    background-color: transparent;
    border: 1px solid var(--border-interactive);
    color: var(--ink);
    font-size: var(--fs-small);
    font-weight: 700;
    letter-spacing: var(--tracking-button);
    text-transform: uppercase;
    cursor: pointer;
  }

  .js .nav[data-open="false"] { display: none; }}

/* --------------------------------------------------------------------------
   8. Fil d'Ariane
   -------------------------------------------------------------------------- */

.crumbs { padding-block: var(--space-sm); }

.crumbs__list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2xs);
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: var(--fs-caption);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.crumbs__link { color: var(--muted); text-decoration: none; }
.crumbs__link:hover { color: var(--accent); }
.crumbs__sep { color: var(--hairline-strong); }
.crumbs__current { color: var(--ink); font-weight: 600; }

/* --------------------------------------------------------------------------
   9. Emplacements photo, rideau et traitement d'image
   Les images arrivent derriere un rideau ivoire qui se retire vers la
   droite, dans le sens de la route. Le rideau n'existe que si JS a pris
   la main et que le mouvement est accepte. Legere desaturation au repos,
   couleurs pleines au survol.
   -------------------------------------------------------------------------- */

.media {
  position: relative;
  overflow: hidden;
  background-color: var(--surface-2);
  border-radius: var(--radius-media);
}

.media > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(0.68) contrast(1.02);
  transition: filter var(--dur-slow) var(--ease),
              transform var(--dur-slow) var(--ease);
}

.media:hover > img,
.media:focus-within > img,
a:hover .media > img,
a:focus-visible .media > img { filter: saturate(1) contrast(1); }

.media--frame { box-shadow: var(--shadow-lg); }
.media--float { box-shadow: var(--shadow-xl); }

/* Les images apparaissent sans deplacement, par simple fondu. Le fondu
   passe par une animation et non une transition, le survol de
   saturation garde ainsi sa reactivite immediate. */
@media (prefers-reduced-motion: no-preference) {
  .js .reveal .media > img,
  .js .media.reveal > img { opacity: 0; }

  .js .reveal.is-in .media > img,
  .js .media.reveal.is-in > img {
    animation: media-fade var(--dur-slow) var(--ease) both;
    animation-delay: calc(var(--i, 0) * 90ms);
  }}

@keyframes media-fade {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* --------------------------------------------------------------------------
   10. Hero roadbook, page d'accueil
   La video occupe tout l'ecran, seule l'entete reste au-dessus. Le titre
   en escalier se pose en bas a gauche, chaque ligne monte sous son
   masque au chargement. Le label vertical tient la marge, aligne sur la
   ligne de route. Le bandeau de faits ferme la sequence sous le hero.
   -------------------------------------------------------------------------- */

/* Chaque ligne du titre vit sous son masque. */
.hero-rb__line {
  display: block;
  overflow: hidden;
  padding-bottom: 0.08em;
  margin-bottom: -0.08em;
}

.hero-rb__line > span { display: inline-block; }

/* Label vertical dans la marge, sur la verticale de la ligne de route. */
.hero-cinema--roadbook .hero-cinema__vertical { margin-bottom: var(--space-2xs); }

@media (min-width: 1100px) {
  .hero-cinema--roadbook .hero-cinema__vertical {
    position: absolute;
    left: calc(var(--gutter) * 0.4);
    bottom: clamp(var(--space-lg), 7vh, var(--space-2xl));
    margin: 0;
    writing-mode: vertical-rl;
    transform: rotate(180deg) translateX(50%);
    white-space: nowrap;
  }}

/* Bandeau de faits, la fiche du carnet. */
.hero-rb__strip {
  margin-top: clamp(var(--space-lg), 8vh, var(--space-2xl));
  border-top: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline);
}

.hero-rb__facts {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-xs) var(--space-md);
  margin: 0;
  padding: 0;
}

.hero-rb__fact {
  display: grid;
  gap: 2px;
  padding-block: var(--space-sm);
}

.hero-rb__fact + .hero-rb__fact { border-left: 1px solid var(--hairline); padding-left: var(--space-md); }

.hero-rb__fact dt {
  color: var(--muted);
  font-size: var(--fs-label);
  font-weight: 600;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
}

.hero-rb__fact dd {
  margin: 0;
  color: var(--ink);
  font-size: var(--fs-title);
  font-weight: 500;
}

/* ---- Sequence de chargement.
   Les lignes montent l'une apres l'autre, le reste suit en fondu.
   Seulement si JS est la et le mouvement accepte, sinon tout est
   visible d'emblee. Le fondu global du corps, prevu pour les pages
   interieures, est neutralise ici au profit des entrees par element. */

@media (prefers-reduced-motion: no-preference) {
  .js .hero-rb__line > span {
    transform: translateY(110%);
    animation: hero-line var(--dur-epic) var(--ease-out) forwards;
  }

  .js .hero-rb__line:nth-child(1) > span { animation-delay: 80ms; }
  .js .hero-rb__line:nth-child(2) > span { animation-delay: 200ms; }
  .js .hero-rb__line:nth-child(3) > span { animation-delay: 320ms; }

  .js .hero-cinema--roadbook .hero-cinema__body {
    opacity: 1;
    transform: none;
    animation: none;
  }

  .js .hero-cinema--roadbook .hero-cinema__vertical,
  .js .hero-cinema--roadbook .hero-cinema__lead,
  .js .hero-cinema--roadbook .btn-row,
  .js .hero-rb__strip {
    opacity: 0;
    transform: translateY(14px);
    animation: hero-soft var(--dur-slow) var(--ease-out) forwards;
  }

  .js .hero-cinema--roadbook .hero-cinema__lead { animation-delay: 480ms; }
  .js .hero-cinema--roadbook .btn-row { animation-delay: 600ms; }
  .js .hero-cinema--roadbook .hero-cinema__vertical { animation-delay: 720ms; }
  .js .hero-rb__strip { animation-delay: 820ms; }}

@keyframes hero-line {
  to { transform: translateY(0); }
}

@keyframes hero-soft {
  to { opacity: 1; transform: none; }
}

@media (max-width: 900px) {

  .hero-rb__facts { grid-template-columns: 1fr; }
  .hero-rb__fact + .hero-rb__fact {
    border-left: 0;
    border-top: 1px solid var(--hairline);
    padding-left: 0;
  }
  .hero-rb__fact { padding-block: var(--space-xs); }}

/* --------------------------------------------------------------------------
   11. Hero cinema, pages interieures
   Bande photo plus basse que l'ecran, titre pose en bas a gauche.
   Conservee pour toutes les pages interieures.
   -------------------------------------------------------------------------- */

.hero { background-color: var(--surface-0); }

.hero-cinema {
  position: relative;
  display: flex;
  align-items: flex-end;
  min-height: calc(100vh - var(--header-h));
  min-height: calc(100svh - var(--header-h));
  background-color: var(--surface-ink);
  overflow: hidden;
}

.hero-cinema__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hero-cinema__veil {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(
    180deg,
    rgba(25, 21, 18, 0.20) 0%,
    rgba(25, 21, 18, 0.30) 45%,
    rgba(25, 21, 18, 0.88) 100%
  );
}

.hero-cinema__body {
  position: relative;
  padding-block: clamp(var(--space-lg), 7vh, var(--space-2xl));
}

.hero-cinema__body .t-label { color: var(--accent-soft); }

.hero-cinema__title {
  color: var(--ink-on-dark);
  margin-block: var(--space-xs) var(--space-sm);
}

/* Sur le voile le plus clair du degrade, ce gris tient 6:1 au pire. */
.hero-cinema__lead {
  color: var(--body-on-dark-strong);
  margin-bottom: var(--space-lg);
}

.hero-cinema .btn--outline {
  border-color: var(--hairline-on-dark);
  color: var(--ink-on-dark);
}

.hero-cinema .btn--outline::before { background-color: var(--accent-soft); }

.hero-cinema .btn--outline:hover,
.hero-cinema .btn--outline:focus-visible {
  border-color: var(--accent-soft);
  color: var(--surface-ink);
}

.hero-cinema :focus-visible { outline-color: var(--accent-soft); }

/* Variante pour page interieure, bande cinema plus basse que l'ecran. */
.hero-cinema--page { min-height: clamp(420px, 58vh, 560px); }

/* Le titre des pages interieures entre lui aussi sous masque. */
@media (prefers-reduced-motion: no-preference) {
  .js .hero-cinema__body {
    opacity: 0;
    transform: translateY(18px);
    animation: hero-soft var(--dur-slow) var(--ease-out) 120ms forwards;
  }}

.hero-cinema__toggle {
  display: none;
  position: absolute;
  right: var(--gutter);
  bottom: var(--space-sm);
  z-index: 2;
  min-height: 44px;
  padding: 10px var(--space-xs);
  background-color: var(--scrim);
  border: 1px solid var(--hairline-on-dark);
  color: var(--ink-on-dark);
  font-size: var(--fs-label);
  font-weight: 700;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  cursor: pointer;
}

.js .hero-cinema__toggle { display: inline-flex; align-items: center; }

.hero-cinema__toggle:hover { border-color: var(--accent-soft); color: var(--accent-soft); }

.hero__body { padding-block: clamp(var(--space-lg), 6vw, var(--space-xl)); }
.hero__title { margin-block: var(--space-xs) var(--space-sm); }
.hero__lead { margin-bottom: var(--space-lg); }

/* Hero du vehicule, texte a gauche et image debordante a droite. */
.hero-vehicle {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(var(--space-md), 5vw, var(--space-2xl));
  align-items: center;
  padding-block: clamp(var(--space-lg), 6vw, var(--space-2xl));
}

@media (max-width: 960px) {
  .hero-vehicle { grid-template-columns: 1fr; }}

.hero-vehicle__price {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-3xs) var(--space-2xs);
  margin-bottom: var(--space-lg);
}

.price__amount {
  color: var(--accent);
  font-size: var(--fs-number);
  font-weight: 700;
  letter-spacing: var(--tracking-display);
  line-height: 1;
}

.price__unit { color: var(--muted); font-size: var(--fs-small); }

/* --------------------------------------------------------------------------
   12. Bandeau de caracteristiques
   -------------------------------------------------------------------------- */

.specs {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 1px;
  background-color: var(--hairline);
  border: 1px solid var(--hairline);
}

@media (max-width: 900px) { .specs { grid-template-columns: repeat(2, 1fr); }}
@media (max-width: 480px) { .specs { grid-template-columns: 1fr; }}

.spec {
  padding: var(--space-sm) var(--space-xs);
  background-color: var(--surface-0);
  text-align: center;
}

.spec__value {
  display: block;
  color: var(--ink);
  font-size: var(--fs-md);
  font-weight: 500;
  letter-spacing: var(--tracking-display);
  line-height: 1.2;
  font-variant-numeric: tabular-nums;
}

.spec__label {
  display: block;
  margin-top: var(--space-3xs);
  color: var(--muted);
  font-size: var(--fs-label);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
}

/* --------------------------------------------------------------------------
   12 bis. Carrousel en pile
   L'image courante au premier plan, les deux suivantes qui depassent
   derriere. Les filtres de flou ont ete retires, ils repeignaient de
   grandes surfaces a chaque rotation. La profondeur passe par l'echelle,
   la luminosite et l'opacite, composables par le GPU.
   -------------------------------------------------------------------------- */

.carrousel {
  position: relative;
  aspect-ratio: 3 / 2;
}

.carrousel__piste {
  position: absolute;
  inset: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}

.carrousel__carte {
  position: absolute;
  inset: 0 6%;
  overflow: hidden;
  background-color: var(--surface-2);
  border-radius: var(--radius-media);
  box-shadow: var(--shadow-xl);
  transition: transform var(--dur-slow) var(--ease-inout),
              opacity var(--dur-slow) var(--ease-inout);
}

.carrousel__carte img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: filter var(--dur-slow) var(--ease);
}

.carrousel__carte[data-pos="0"] {
  transform: translateX(0) scale(1);
  z-index: 3;
  opacity: 1;
}

.carrousel__carte[data-pos="0"] img { filter: none; }

.carrousel__carte[data-pos="1"] {
  transform: translateX(11%) scale(0.88);
  z-index: 2;
  opacity: 0.85;
}

.carrousel__carte[data-pos="1"] img { filter: brightness(0.88) saturate(0.8); }

.carrousel__carte[data-pos="2"] {
  transform: translateX(-11%) scale(0.88);
  z-index: 1;
  opacity: 0.7;
}

.carrousel__carte[data-pos="2"] img { filter: brightness(0.82) saturate(0.75); }

.carrousel__nav {
  display: none;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 4;
  width: 44px;
  height: 44px;
  align-items: center;
  justify-content: center;
  background-color: var(--surface-0-veil);
  border: 1px solid var(--hairline-strong);
  color: var(--ink);
  font-size: var(--fs-md);
  line-height: 1;
  cursor: pointer;
  transition: background-color var(--dur-fast) var(--ease),
              border-color var(--dur-fast) var(--ease),
              color var(--dur-fast) var(--ease);
}

.js .carrousel__nav { display: inline-flex; }

.carrousel__nav:hover {
  background-color: var(--surface-0);
  border-color: var(--accent);
  color: var(--accent);
}

.carrousel__nav--prev { left: 0; }
.carrousel__nav--next { right: 0; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-md); }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-md); }

@media (max-width: 1024px) {
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
  .grid-3 { grid-template-columns: repeat(2, 1fr); }}

@media (max-width: 600px) {
  .grid-3,
.grid-4 { grid-template-columns: 1fr; }}

.card {
  display: flex;
  flex-direction: column;
  gap: var(--space-2xs);
  padding: var(--space-md);
  background-color: var(--surface-0);
  border: 1px solid var(--hairline);
  box-shadow: var(--shadow-sm);
  transition: box-shadow var(--dur-base) var(--ease),
              border-color var(--dur-base) var(--ease);
}

.card:hover,
.card:focus-within { box-shadow: var(--shadow-lg); border-color: var(--hairline-strong); }

.card__text { flex-grow: 1; font-size: var(--fs-small); }

/* Panneau non interactif. */
.panel {
  padding: var(--space-md);
  background-color: var(--surface-0);
  border: 1px solid var(--hairline);
  box-shadow: var(--shadow-sm);
}

/* Carte coiffee d'une image, bord a bord en tete de carte. */
.card--media { padding: 0; overflow: hidden; border-radius: var(--radius-media); }

.card--media .card__body {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  gap: var(--space-2xs);
  padding: var(--space-sm);
}

.card--media .media img {
  aspect-ratio: 16 / 9;
  height: auto;
  object-fit: cover;
}

/* --------------------------------------------------------------------------
   14 bis. Frise routiere
   Trois arrets figures par des roues, reliees par une route a ligne
   mediane discontinue.
   -------------------------------------------------------------------------- */

.roadmap {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-lg);
  margin: 0;
  padding: 0;
  list-style: none;
}

.roadmap__stop {
  position: relative;
  text-align: center;
}

.roadmap__wheel {
  display: inline-flex;
  position: relative;
  z-index: 1;
  width: 56px;
  height: 56px;
  margin-bottom: var(--space-sm);
}

.roadmap__wheel svg { width: 100%; height: 100%; }

.roadmap__stop:not(:last-child)::before {
  content: "";
  position: absolute;
  top: 24px;
  left: calc(50% + 36px);
  width: calc(100% + var(--space-lg) - 72px);
  height: 8px;
  border-radius: 4px;
  background-color: var(--surface-ink);
  background-image: repeating-linear-gradient(
    90deg,
    rgba(247, 243, 234, 0.85) 0 10px,
    transparent 10px 22px
  );
  background-size: calc(100% - 12px) 2px;
  background-position: center;
  background-repeat: no-repeat;
}

.roadmap__title { margin-bottom: var(--space-2xs); }

.roadmap__text {
  font-size: var(--fs-small);
  max-width: 34ch;
  margin-inline: auto;
}

@media (max-width: 760px) {
  .roadmap { grid-template-columns: 1fr; gap: var(--space-lg); }

  .roadmap__stop:not(:last-child)::before {
    top: 64px;
    bottom: calc(var(--space-lg) * -1 + 8px);
    left: calc(50% - 4px);
    width: 8px;
    height: auto;
    background-image: repeating-linear-gradient(
      180deg,
      rgba(247, 243, 234, 0.85) 0 10px,
      transparent 10px 22px
    );
    background-size: 2px calc(100% - 12px);
    background-position: center;
  }}

/* ---- Frise alternee, les affiches du roadbook -------------------------
   Une ligne mediane verticale jalonnee de points, chaque entree alterne
   grande image et bloc de texte, le texte s'aligne vers la ligne. Sur
   petit ecran la frise s'empile et la ligne disparait. */

.frise {
  position: relative;
  display: grid;
  gap: clamp(var(--space-xl), 8vw, var(--space-2xl));
}

.frise::before {
  content: "";
  position: absolute;
  top: var(--space-md);
  bottom: var(--space-md);
  left: 50%;
  width: var(--route-w);
  transform: translateX(-50%);
  background-color: var(--route-color);
}

.frise__etape {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(var(--space-lg), 9vw, var(--space-3xl));
  align-items: center;
}

/* Le jalon, pose sur la ligne au centre de l'entree. */
.frise__etape::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: var(--route-dot);
  height: var(--route-dot);
  transform: translate(-50%, -50%);
  border-radius: var(--radius-full);
  background-color: var(--accent);
  box-shadow: 0 0 0 4px var(--surface-2);
  z-index: 1;
}

.section--soft .frise__etape::before { box-shadow: 0 0 0 4px var(--surface-1); }

.frise__media { box-shadow: var(--shadow-lg); }

.frise__media img { aspect-ratio: 4 / 3; object-fit: cover; }

.frise__body { max-width: 44ch; }

/* Alternance. Les entrees paires basculent, le texte passe a gauche et
   s'aligne vers la ligne mediane. */
.frise__etape:nth-child(even) .frise__media { order: 2; }

.frise__etape:nth-child(even) .frise__body {
  order: 1;
  justify-self: end;
  text-align: right;
}

@media (max-width: 860px) {
  .frise { gap: var(--space-xl); }
  .frise::before { display: none; }
  .frise__etape { grid-template-columns: 1fr; gap: var(--space-sm); }
  .frise__etape::before { display: none; }
  .frise__etape:nth-child(even) .frise__media { order: 0; }
  .frise__etape:nth-child(even) .frise__body {
    order: 0;
    justify-self: start;
    text-align: left;
  }}

/* Carte d'usage, entierement cliquable via le lien couvrant. */
.usage {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-2xs);
  padding: var(--space-md);
  background-color: var(--surface-0);
  border: 1px solid var(--hairline);
  box-shadow: var(--shadow-sm);
  transition: box-shadow var(--dur-base) var(--ease),
              transform var(--dur-base) var(--ease);
}

.usage:hover, .usage:focus-within { box-shadow: var(--shadow-lg); }

@media (prefers-reduced-motion: no-preference) {
  .usage:hover, .usage:focus-within { transform: translateY(-2px); }}

.usage__link { text-decoration: none; }

.usage__link::after {
  content: "";
  position: absolute;
  inset: 0;
}

/* Variante coiffee d'une image bord a bord. */
.usage--media { padding: 0; overflow: hidden; border-radius: var(--radius-media); }

.usage--media .usage__body {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  gap: var(--space-2xs);
  padding: var(--space-sm);
}

.usage--media .media img {
  aspect-ratio: 16 / 9;
  height: auto;
  object-fit: cover;
}

/* Liste a puce bronze. */
.ticks { display: grid; gap: var(--space-xs); margin: 0; padding: 0; list-style: none; }

.ticks li {
  display: grid;
  grid-template-columns: 20px 1fr;
  gap: var(--space-2xs);
  align-items: start;
}

.ticks li::before {
  content: "";
  width: 8px;
  height: 8px;
  margin-top: 0.55em;
  background-color: var(--accent);
}

.badge {
  display: inline-block;
  padding: 5px 12px;
  background-color: var(--surface-2);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-full);
  color: var(--body);
  font-size: var(--fs-label);
  font-weight: 600;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
}

.badge-row { display: flex; flex-wrap: wrap; gap: var(--space-2xs); margin: 0; padding: 0; list-style: none; }

/* --------------------------------------------------------------------------
   14 ter. Etapes numerotees
   -------------------------------------------------------------------------- */

.steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-md);
  margin: 0;
  padding: 0;
  counter-reset: etape;
  list-style: none;
}

@media (max-width: 1024px) { .steps { grid-template-columns: repeat(2, 1fr); }}
@media (max-width: 600px) { .steps { grid-template-columns: 1fr; }}

.step { counter-increment: etape; padding-top: var(--space-sm); border-top: 1px solid var(--hairline-strong); }

.step::before {
  content: counter(etape, decimal-leading-zero);
  display: block;
  margin-bottom: var(--space-2xs);
  color: var(--accent);
  font-size: var(--fs-caption);
  font-weight: 700;
  letter-spacing: var(--tracking-label);
  font-variant-numeric: tabular-nums;
}

.step__title { margin-bottom: var(--space-2xs); }
.step__text { font-size: var(--fs-small); }

/* Liste de deductions, ligne a ligne. */
.deductions { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--hairline); }

.deductions li {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-sm);
  padding-block: var(--space-xs);
  border-bottom: 1px solid var(--hairline);
}

.deductions .deduction__name { color: var(--ink); }

.deductions .deduction__who {
  color: var(--muted);
  font-size: var(--fs-caption);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  text-align: right;
  white-space: nowrap;
}

/* Liste de refus, marqueur en croix plutot qu'en carre plein. */
.nos { display: grid; gap: var(--space-xs); margin: 0; padding: 0; list-style: none; }

.nos li {
  display: grid;
  grid-template-columns: 20px 1fr;
  gap: var(--space-2xs);
  align-items: start;
}

.nos li::before {
  content: "";
  width: 10px;
  height: 2px;
  margin-top: 0.75em;
  background-color: var(--accent-soft);
}

/* --------------------------------------------------------------------------
   14 quinquies. Formulaires
   -------------------------------------------------------------------------- */

.form { display: grid; gap: var(--space-sm); }

.field { display: grid; gap: var(--space-3xs); }

.field__label { color: var(--ink); font-size: var(--fs-small); font-weight: 600; }

.field__hint { color: var(--muted); font-size: var(--fs-caption); }

.field__control {
  width: 100%;
  min-height: 48px;
  padding: 12px var(--space-xs);
  background-color: var(--surface-0);
  border: 1px solid var(--border-interactive);
  border-radius: var(--radius-input);
  color: var(--ink);
  transition: border-color var(--dur-fast) var(--ease),
              box-shadow var(--dur-fast) var(--ease);
}

.field__control::placeholder { color: var(--muted); }

.field__control:hover { border-color: var(--ink); }

.field__control:focus-visible {
  border-color: var(--accent);
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}

textarea.field__control { min-height: 140px; resize: vertical; }

select.field__control { background-color: var(--surface-0); color: var(--ink); }

.field--invalid .field__control { border-color: var(--accent-deep); border-width: 2px; }

.field__error { color: var(--accent-deep); font-size: var(--fs-caption); font-weight: 600; }

.form__row { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-sm); }

@media (max-width: 640px) { .form__row { grid-template-columns: 1fr; }}

.form__note { color: var(--muted); font-size: var(--fs-caption); }

/* Message d'etat du formulaire, annonce aux lecteurs d'ecran. */
.form__status {
  padding: var(--space-xs);
  background-color: var(--accent-wash);
  border: 1px solid var(--hairline-strong);
  color: var(--ink);
  font-size: var(--fs-small);
}

/* Piege a robots, invisible et hors du parcours clavier. */
.form__trap {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* Voies de contact directes, toujours fonctionnelles sans JS. */
.contacts { display: grid; gap: var(--space-sm); }

.contact-line {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-3xs);
  padding-block: var(--space-sm);
  border-bottom: 1px solid var(--hairline);
}

.contact-line__label {
  color: var(--muted);
  font-size: var(--fs-label);
  font-weight: 600;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
}

.contact-line__value { color: var(--ink); font-size: var(--fs-md); font-weight: 500; }

.contact-line__value a { color: var(--accent); text-decoration: none; border-bottom: 1px solid transparent; }
.contact-line__value a:hover,
.contact-line__value a:focus-visible { border-bottom-color: currentColor; }

.contact-line__note { color: var(--muted); font-size: var(--fs-caption); }

/* --------------------------------------------------------------------------
   14 sexies. Questions frequentes
   details et summary natifs, pliables au clavier, fonctionnels sans JS.
   -------------------------------------------------------------------------- */

.faq { border-top: 1px solid var(--hairline); }

.faq__item { border-bottom: 1px solid var(--hairline); }

.faq__q {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-sm);
  padding-block: var(--space-sm);
  color: var(--ink);
  font-size: var(--fs-title);
  font-weight: 600;
  line-height: 1.35;
  cursor: pointer;
  list-style: none;
}

.faq__q::-webkit-details-marker { display: none; }

.faq__q:hover { color: var(--accent); }

.faq__q::after {
  content: "+";
  flex: 0 0 auto;
  color: var(--accent);
  font-size: var(--fs-md);
  font-weight: 400;
  line-height: 1;
  transition: transform var(--dur-base) var(--ease-out);
}

.faq__item[open] .faq__q::after {
  content: "+";
  transform: rotate(45deg);
}

.faq__a { padding-bottom: var(--space-sm); }
.faq__a > * + * { margin-top: var(--space-xs); }
.faq__a p { max-width: 68ch; }

/* Etapes empilees sur une colonne. */
.steps--stack { grid-template-columns: 1fr; }

/* --------------------------------------------------------------------------
   15. Tarifs
   -------------------------------------------------------------------------- */

.rates { display: grid; gap: 0; border-top: 1px solid var(--hairline); }

.rate {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--space-sm);
  align-items: baseline;
  padding-block: var(--space-sm);
  border-bottom: 1px solid var(--hairline);
}

.rate__name { color: var(--ink); font-weight: 500; }
.rate__note { display: block; margin-top: var(--space-3xs); color: var(--muted); font-size: var(--fs-caption); }
.rate__price { color: var(--accent); font-size: var(--fs-md); font-weight: 700; white-space: nowrap; font-variant-numeric: tabular-nums; }

/* --------------------------------------------------------------------------
   16. Aiguillage, les deux espaces
   Deux portes, deux logiques, deux surfaces. La porte locataire reste
   sur papier, la porte proprietaire passe a l'encre. Le « ou » italique
   pivote au centre, c'est la bifurcation du trajet.
   -------------------------------------------------------------------------- */

.split {
  position: relative;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-md);
}

@media (max-width: 900px) { .split { grid-template-columns: 1fr; }}

/* La bifurcation. */
.split__ou {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 5;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  background-color: var(--surface-0);
  border: 1px solid var(--hairline-strong);
  border-radius: var(--radius-full);
  box-shadow: var(--shadow-md);
  color: var(--accent);
  font-family: var(--font-serif);
  font-size: var(--fs-md);
  font-style: italic;
  pointer-events: none;
}

.gate {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background-color: var(--surface-0);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-media);
  box-shadow: var(--shadow-sm);
  transition: box-shadow var(--dur-base) var(--ease);
}

.gate:hover, .gate:focus-within { box-shadow: var(--shadow-xl); }

/* La porte proprietaire, a l'encre. */
.gate--ink {
  background-color: var(--surface-ink);
  border-color: var(--surface-ink);
  color: var(--body-on-dark);
}

.gate--ink .gate__title { color: var(--ink-on-dark); }
.gate--ink .t-label { color: var(--accent-soft); }
.gate--ink .gate__text { color: var(--body-on-dark); }
.gate--ink .badge {
  background-color: var(--surface-ink-soft);
  border-color: var(--hairline-ink);
  color: var(--body-on-dark);
}
.gate--ink .link-arrow { color: var(--accent-soft); }
.gate--ink .link-arrow:hover,
.gate--ink .link-arrow:focus-visible { color: var(--accent-soft-strong); }
.gate--ink :focus-visible { outline-color: var(--accent-soft); }

.gate__media { position: relative; }

.gate__media img {
  aspect-ratio: 16 / 9;
  height: auto;
  object-fit: cover;
}

/* Variante entierement cliquable. */
.gate--link { position: relative; }

.gate--link .link-arrow::after {
  content: "";
  position: absolute;
  inset: 0;
}

.gate__content {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  gap: var(--space-xs);
  padding: clamp(var(--space-sm), 3vw, var(--space-lg));
}

.gate__title { margin-top: var(--space-3xs); }
.gate__text { flex-grow: 1; }
.gate__cta { margin-top: var(--space-2xs); }

/* --------------------------------------------------------------------------
   17. Engagements, le registre
   Fini la grille de cartes numerotees. Les engagements s'inscrivent
   comme les lignes d'un registre, un mot-cle italique a gauche, le
   detail a droite, un filet entre chaque. Le mot glisse d'un cran au
   survol, comme une ligne qu'on suit du doigt.
   -------------------------------------------------------------------------- */

.ledger { border-top: 1px solid var(--hairline-strong); }

.ledger__row {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: var(--space-xs) var(--space-xl);
  align-items: start;
  padding-block: clamp(var(--space-sm), 3vw, var(--space-lg));
  border-bottom: 1px solid var(--hairline-strong);
  transition: background-color var(--dur-base) var(--ease);
}

@media (max-width: 760px) {
  .ledger__row { grid-template-columns: 1fr; }}

.ledger__key {
  color: var(--ink);
  font-size: var(--fs-lg);
  font-weight: 500;
  letter-spacing: var(--tracking-display);
  line-height: 1.2;
  text-wrap: balance;
  transition: transform var(--dur-base) var(--ease-out);
}

.ledger__key em {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  font-size: 1.06em;
  letter-spacing: 0;
}

@media (prefers-reduced-motion: no-preference) {
  .ledger__row:hover .ledger__key { transform: translateX(var(--space-2xs)); }}

.ledger__text { max-width: 52ch; }

/* Le pledge en carte reste servi pour les pages interieures. */
.pledge { padding-top: var(--space-sm); border-top: 2px solid var(--accent); }

.pledge__rank {
  display: block;
  margin-bottom: var(--space-2xs);
  color: var(--accent);
  font-size: var(--fs-caption);
  font-weight: 700;
  letter-spacing: var(--tracking-label);
  font-variant-numeric: tabular-nums;
}

.pledge__title { margin-bottom: var(--space-2xs); }
.pledge__text { font-size: var(--fs-small); }

/* --------------------------------------------------------------------------
   18. Citation
   -------------------------------------------------------------------------- */

.quote {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(var(--space-md), 6vw, var(--space-2xl));
  align-items: center;
}

@media (max-width: 900px) { .quote { grid-template-columns: 1fr; }}

.quote__mark {
  display: block;
  margin-bottom: var(--space-xs);
  color: var(--accent);
  font-family: var(--font-serif);
  font-size: var(--fs-number);
  font-style: italic;
  line-height: 1;
}

.quote__cite {
  display: block;
  margin-top: var(--space-sm);
  color: var(--muted);
  font-size: var(--fs-caption);
  font-style: normal;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
}

/* --------------------------------------------------------------------------
   19. Zone couverte, le roadbook
   La geographie en lignes de carnet de route, la distance en chiffres
   tabulaires, l'etat a droite. C'est la page la plus « metier » du site,
   elle assume le vocabulaire du trajet.
   -------------------------------------------------------------------------- */

.zone {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(var(--space-md), 6vw, var(--space-xl));
  align-items: start;
}

@media (max-width: 900px) { .zone { grid-template-columns: 1fr; }}

@media (min-width: 901px) {
  .zone--flip > :first-child { order: 2; }}

.zone__list { display: grid; gap: 0; border-top: 1px solid var(--hairline-strong); }

.zone__row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: baseline;
  gap: var(--space-sm);
  padding-block: var(--space-xs);
  border-bottom: 1px solid var(--hairline);
}

/* Distance kilometrique, colonne de carnet. */
.zone__km {
  color: var(--muted);
  font-size: var(--fs-caption);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.04em;
  min-width: 4.5ch;
}

.zone__city { color: var(--ink); font-weight: 500; }

.zone__state {
  color: var(--muted);
  font-size: var(--fs-caption);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  text-align: right;
}

/* --------------------------------------------------------------------------
   20. Bande d'appel
   -------------------------------------------------------------------------- */

.cta-band { background-color: var(--surface-2); text-align: center; }

.cta-band__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-sm);
}

.cta-band .t-lead { margin-inline: auto; }

/* --------------------------------------------------------------------------
   21. Pied de page
   -------------------------------------------------------------------------- */

.footer {
  background-color: var(--surface-1);
  border-top: 1px solid var(--hairline);
  padding-block: var(--space-xl) var(--space-md);
}

.footer__grid {
  display: grid;
  grid-template-columns: 1.6fr repeat(4, 1fr);
  gap: var(--space-lg) var(--space-md);
}

@media (max-width: 1024px) { .footer__grid { grid-template-columns: repeat(2, 1fr); }}
@media (max-width: 560px) { .footer__grid { grid-template-columns: 1fr; }}

.footer__brand .brand { margin-bottom: var(--space-xs); }
.footer__about { max-width: 34ch; color: var(--muted); font-size: var(--fs-small); }

/* Coordonnees directes sous le paragraphe de marque. */
.footer__coords {
  display: grid;
  gap: var(--space-3xs);
  justify-items: start;
  margin-top: var(--space-xs);
}

.footer__heading {
  margin-bottom: var(--space-xs);
  color: var(--ink);
  font-size: var(--fs-label);
  font-weight: 700;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
}

.footer__list { display: grid; gap: var(--space-2xs); }

.footer__link {
  color: var(--body);
  font-size: var(--fs-small);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color var(--dur-fast) var(--ease),
              border-color var(--dur-fast) var(--ease);
}

.footer__link:hover,
.footer__link:focus-visible { color: var(--ink); border-bottom-color: var(--accent); }

.footer__bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-xs);
  margin-top: var(--space-xl);
  padding-top: var(--space-sm);
  border-top: 1px solid var(--hairline);
  color: var(--muted);
  font-size: var(--fs-caption);
}

/* --------------------------------------------------------------------------
   22. Apparition au defilement
   Le contenu est visible par defaut. Le masquage n'existe que si JS a
   pris la main, et jamais si l'utilisateur refuse le mouvement. Les
   groupes s'echelonnent via --i, pose par site.js sur les fratries.
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: no-preference) {
  .js .reveal {
    opacity: 0;
    transform: translateY(14px);
    transition: opacity var(--dur-slow) var(--ease-out),
                transform var(--dur-slow) var(--ease-out);
    transition-delay: calc(var(--i, 0) * 90ms);
  }

  .js .reveal.is-in { opacity: 1; transform: none; }}

/* --------------------------------------------------------------------------
   23. Impression
   -------------------------------------------------------------------------- */

@media print {
  .header, .footer, .skip-link { display: none; }
  body { background: #fff; color: #000; }

  /* Les bandes sombres ne s'impriment pas, leur texte clair doit donc
     repasser en encre noire, sans quoi il disparait sur le papier. */
  .hero-cinema, .section--ink, .gate--ink {
    background: #fff;
    color: #000;
  }

  .hero-cinema__veil, .hero-cinema__video, .hero-cinema__toggle { display: none; }

  .hero-cinema__title, .hero-cinema__lead, .hero-cinema__vertical,
  .section--ink .t-mega, .section--ink .t-xl, .section--ink .t-lg,
  .section--ink .t-title, .section--ink .t-label, .section--ink .t-quote,
  .gate--ink .gate__title, .gate--ink .gate__text, .gate--ink .t-label {
    color: #000;
  }
  .card, .gate, .usage { box-shadow: none; border: 1px solid #ccc; }
  main::before { display: none; }}