@charset "UTF-8";
/* ==========================================================================
   beeMob TAD — layout-client.css
   Mise en page de l'espace voyageur (body.shell-client).
   Contrat : docs/ARCHITECTURE.md §6 (layout-client.css) + markup §9.2 / §9.3.

   Dépend de : tokens.css (tokens sémantiques + mouvement), base.css (.container,
   reset), motion.css (keyframes tad-*), components.css (.btn, .icon, .notice-*).

   Règles internes (non partagées, documentées ici) :
   - Variables privées préfixées « --_ » (portée locale à un composant).
   - Keyframes privés préfixés « lc- » : lc-header-elevate (ombre d'en-tête
     pilotée par le défilement, amélioration progressive) ; lc-unhide (filet
     de sécurité de la liaison des .how-steps si core.js n'a pas tourné).
   - Couleurs : uniquement des tokens sémantiques. Seule exception assumée :
     var(--slate-0) pour la « plaque » blanche du logo (doit rester blanche
     quel que soit le thème pour que le logo reste lisible).

   Points de rupture : 640px (téléphone) · 860px (menu mobile) · 960px
   (colonnes empilées) · 1080px (en-tête compact).
   ========================================================================== */


/* --------------------------------------------------------------------------
   1. Coquille
   -------------------------------------------------------------------------- */

body.shell-client {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100dvh;
  background-color: var(--bg);
  /* Halo de marque très discret en haut de page (teal à gauche, vert à droite). */
  background-image:
    radial-gradient(1100px 520px at 8% -140px, color-mix(in srgb, var(--primary) 11%, transparent), transparent 70%),
    radial-gradient(900px 460px at 92% -180px, color-mix(in srgb, var(--accent) 10%, transparent), transparent 70%);
  background-repeat: no-repeat;
  color: var(--text);
}

body.shell-client > .site-main {
  flex: 1 0 auto;
}


/* --------------------------------------------------------------------------
   2. En-tête vitré collant (.site-header)
   -------------------------------------------------------------------------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: var(--z-header);
  height: var(--header-h);
  background-color: color-mix(in srgb, var(--surface) 76%, transparent);
  -webkit-backdrop-filter: saturate(180%) blur(16px);
  backdrop-filter: saturate(180%) blur(16px);
  border-bottom: 1px solid color-mix(in srgb, var(--border) 75%, transparent);
  view-transition-name: site-header;
}

/* Sans backdrop-filter : fond opaque pour garder le contraste. */
@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .site-header {
    background-color: var(--surface);
  }
}

/* Amélioration progressive : l'ombre apparaît dès que la page défile
   (orienter : « le contenu passe sous l'en-tête »). */
@supports (animation-timeline: scroll()) {
  .site-header {
    animation: lc-header-elevate auto linear both;
    animation-timeline: scroll(root block);
    animation-range: 0 96px;
  }
}

@keyframes lc-header-elevate {
  to {
    background-color: color-mix(in srgb, var(--surface) 90%, transparent);
    border-bottom-color: var(--border);
    box-shadow: var(--shadow-sm);
  }
}

.site-header .site-header-inner {
  position: static;
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  height: 100%;
}

/* Marque ------------------------------------------------------------------ */

.brand {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-3);
  flex-shrink: 0;
  min-width: 0;
  border-radius: var(--radius-sm);
  color: var(--text);
  text-decoration: none;
}

.brand-logo {
  display: block;
  width: auto;
  height: 34px;
  max-width: none;
  transition: transform var(--dur-fast) var(--ease-standard), opacity var(--dur-fast) var(--ease-standard);
}

.brand:hover .brand-logo {
  opacity: .88;
}

.brand:active .brand-logo {
  transform: scale(var(--scale-press));
}

.brand-name {
  font-size: var(--fs-md);
  font-weight: var(--fw-bold);
  letter-spacing: var(--tracking-tight);
  color: var(--text);
  white-space: nowrap;
}

.brand-tag {
  padding-left: var(--sp-3);
  border-left: 1px solid var(--border);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-snug);
  color: var(--text-muted);
  white-space: nowrap;
}

/* Thème sombre : le logo est posé sur une petite plaque blanche arrondie. */
:root[data-theme="dark"] .site-header .brand-logo {
  height: 36px;
  padding: 4px 9px;
  border-radius: var(--radius-sm);
  background-color: var(--slate-0);
  box-shadow: var(--shadow-xs);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .site-header .brand-logo {
    height: 36px;
    padding: 4px 9px;
    border-radius: var(--radius-sm);
    background-color: var(--slate-0);
    box-shadow: var(--shadow-xs);
  }
}

/* Navigation principale (pilules) ---------------------------------------- */

.site-nav {
  display: flex;
  align-items: center;
  gap: var(--sp-1);
  margin-left: auto;
  padding: 4px;
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  background-color: color-mix(in srgb, var(--surface-2) 70%, transparent);
}

.site-nav-link {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  height: 38px;
  padding: 0 var(--sp-4);
  border-radius: var(--radius-pill);
  color: var(--text-muted);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  transition:
    background-color var(--dur-fast) var(--ease-standard),
    color var(--dur-fast) var(--ease-standard),
    box-shadow var(--dur-fast) var(--ease-standard),
    transform var(--dur-instant) var(--ease-standard);
}

.site-nav-link .icon {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  opacity: .8;
  transition: opacity var(--dur-fast) var(--ease-standard);
}

.site-nav-link:hover {
  color: var(--text);
  background-color: var(--surface);
}

.site-nav-link:hover .icon {
  opacity: 1;
}

.site-nav-link:active {
  transform: scale(var(--scale-press));
}

.site-nav-link.is-active,
.site-nav-link[aria-current="page"] {
  background-color: var(--primary-soft);
  color: var(--primary-soft-text);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--primary) 16%, transparent);
}

.site-nav-link.is-active .icon,
.site-nav-link[aria-current="page"] .icon {
  opacity: 1;
}

/* Actions (thème, menu) --------------------------------------------------- */

.site-header-actions {
  display: flex;
  align-items: center;
  gap: var(--sp-1);
  flex-shrink: 0;
  margin-left: var(--sp-2);
}

.site-header .nav-toggle {
  display: none;
}

.nav-toggle .icon {
  transition: transform var(--dur-base) var(--ease-out);
}

.nav-toggle[aria-expanded="true"] {
  background-color: var(--primary-soft);
  color: var(--primary-soft-text);
}

.nav-toggle[aria-expanded="true"] .icon {
  transform: rotate(90deg);
}

/* Bascule de thème (.theme-toggle, soleil / lune) : définie une seule fois
   dans components.css §03. */

/* En-tête compact : la navigation desktop a besoin de place entre 860 et 1080px. */
@media (min-width: 860px) and (max-width: 1079.98px) {
  .brand-tag {
    display: none;
  }

  .site-nav-link {
    padding: 0 var(--sp-3);
  }
}

/* Menu mobile (< 860px) : panneau déroulant sous l'en-tête ---------------- */
@media (max-width: 859.98px) {
  .site-header .nav-toggle {
    display: inline-grid;
    place-items: center;
  }

  .site-header-actions {
    margin-left: auto;
  }

  /* Repli sans JavaScript : la navigation reste accessible sur une ligne
     défilante (le bouton menu, inutile, est masqué). */
  html:not(.js) .site-header .nav-toggle {
    display: none;
  }

  html:not(.js) .site-nav {
    flex: 1 1 auto;
    min-width: 0;
    overflow-x: auto;
    scrollbar-width: none;
    border: 0;
    background: none;
  }

  html:not(.js) .site-nav-link .icon {
    display: none;
  }

  /* Avec JavaScript : panneau déroulant. */
  html.js .site-nav {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: var(--sp-1);
    max-height: calc(100vh - var(--header-h));
    max-height: calc(100dvh - var(--header-h));
    margin: 0;
    padding: var(--sp-3) var(--sp-4) var(--sp-5);
    overflow-y: auto;
    border: 0;
    border-bottom: 1px solid var(--border);
    border-radius: 0 0 var(--radius-xl) var(--radius-xl);
    background-color: var(--surface);
    box-shadow: var(--shadow-lg);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(calc(var(--move-3) * -1));
    transition:
      opacity var(--dur-fast) var(--ease-in),
      transform var(--dur-fast) var(--ease-in),
      visibility 0s linear var(--dur-fast);
  }

  html.js .site-nav.is-open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: none;
    transition:
      opacity var(--dur-base) var(--ease-out),
      transform var(--dur-slow) var(--ease-out),
      visibility 0s linear 0s;
  }

  html.js .site-nav .site-nav-link {
    height: 52px;
    padding: 0 var(--sp-4);
    border-radius: var(--radius-md);
    font-size: var(--fs-base);
    opacity: 0;
    transform: translateY(calc(var(--move-2) * -1));
    transition:
      opacity var(--dur-base) var(--ease-out),
      transform var(--dur-base) var(--ease-out),
      background-color var(--dur-fast) var(--ease-standard),
      color var(--dur-fast) var(--ease-standard);
  }

  html.js .site-nav .site-nav-link .icon {
    width: 20px;
    height: 20px;
  }

  html.js .site-nav .site-nav-link:hover {
    background-color: var(--surface-2);
  }

  html.js .site-nav .site-nav-link.is-active,
  html.js .site-nav .site-nav-link[aria-current="page"] {
    background-color: var(--primary-soft);
  }

  /* Entrée en cascade des liens (orienter le regard de haut en bas). */
  html.js .site-nav.is-open .site-nav-link {
    opacity: 1;
    transform: none;
  }

  html.js .site-nav.is-open .site-nav-link:nth-child(2) {
    transition-delay: var(--stagger-step), var(--stagger-step), 0s, 0s;
  }

  html.js .site-nav.is-open .site-nav-link:nth-child(3) {
    transition-delay: calc(var(--stagger-step) * 2), calc(var(--stagger-step) * 2), 0s, 0s;
  }

  html.js .site-nav.is-open .site-nav-link:nth-child(4) {
    transition-delay: calc(var(--stagger-step) * 3), calc(var(--stagger-step) * 3), 0s, 0s;
  }

  html.js .site-nav.is-open .site-nav-link:nth-child(n + 5) {
    transition-delay: calc(var(--stagger-step) * 4), calc(var(--stagger-step) * 4), 0s, 0s;
  }
}

@media (max-width: 639.98px) {
  .brand-tag {
    display: none;
  }
}


/* --------------------------------------------------------------------------
   3. Bandeau d'information
   Apparence, teintes .notice-* et entrée animée : components.css §09.
   Ici : seulement sa place sous l'en-tête collant.
   -------------------------------------------------------------------------- */

.notice-banner {
  z-index: calc(var(--z-header) - 1);
  width: 100%;
}

.notice-banner > .container {
  min-height: 44px;
}


/* --------------------------------------------------------------------------
   4. Zone principale
   -------------------------------------------------------------------------- */

.site-main {
  position: relative;
  display: block;
  min-width: 0;
  padding-bottom: var(--sp-16);
}

/* Filet de sécurité : une page qui commence directement par un conteneur ne
   se colle pas sous l'en-tête. */
.site-main > .container:first-child,
.site-main > .container-narrow:first-child {
  padding-top: var(--sp-8);
}


/* --------------------------------------------------------------------------
   5. Hero
   -------------------------------------------------------------------------- */

.hero {
  --_hero-pad-top: clamp(var(--sp-10), 6vw, var(--sp-20));
  --_hero-pad-bottom: clamp(var(--sp-12), 6vw, var(--sp-16));
  --_hero-overlap: var(--sp-16);
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding-top: var(--_hero-pad-top);
  padding-bottom: var(--_hero-pad-bottom);
}

/* Le hero réserve la place de la carte qui le chevauche (amélioration progressive). */
.hero:has(+ .booking-card, + * > .booking-card:first-child) {
  padding-bottom: calc(var(--_hero-pad-bottom) + var(--_hero-overlap));
}

.hero-inner {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1.12fr);
  grid-auto-columns: minmax(0, .88fr);
  grid-auto-flow: column;
  align-items: center;
  gap: clamp(var(--sp-8), 5vw, var(--sp-16));
}

/* Si la page n'ajoute pas .container sur .hero-inner. */
.hero-inner:not(.container) {
  width: min(var(--container), 100% - 2 * var(--sp-5));
  margin-inline: auto;
}

.hero-copy {
  min-width: 0;
  max-width: 660px;
}

.hero-copy > .eyebrow,
.hero-copy > .badge {
  margin-bottom: var(--sp-4);
}

.hero-title {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--fs-display);
  font-weight: var(--fw-black);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--text);
  text-wrap: balance;
}

/* Mot mis en valeur dans le titre : dégradé de marque (contraste AA conservé). */
.hero-title em,
.hero-title mark {
  font-style: normal;
  color: var(--primary);
  background: linear-gradient(100deg, var(--primary) 10%, var(--accent-soft-text) 90%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.hero-lead {
  max-width: 54ch;
  margin: var(--sp-5) 0 0;
  font-size: clamp(var(--fs-base), .5vw + .95rem, var(--fs-lg));
  line-height: var(--lh-normal);
  color: var(--text-muted);
  text-wrap: pretty;
}

.hero-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  margin: var(--sp-6) 0 0;
  padding: 0;
  list-style: none;
}

/* :where() = spécificité nulle : un .badge ou une .chip placé ici garde son style. */
:where(.hero-meta) > * {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  min-height: 34px;
  padding: 0 var(--sp-3);
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  background-color: color-mix(in srgb, var(--surface) 72%, transparent);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  color: var(--text-muted);
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  line-height: 1.2;
}

:where(.hero-meta) > * > .icon {
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  color: var(--accent);
}

:where(.hero-meta) strong {
  color: var(--text);
  font-weight: var(--fw-semibold);
}

.hero-visual {
  position: relative;
  justify-self: end;
  width: 100%;
  max-width: 560px;
  aspect-ratio: 4 / 3;
  min-width: 0;
}

.hero-visual > svg,
.hero-visual > img,
.hero-visual > picture {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* Décor : halos radiaux flous teal / vert + grille de points masquée. */
.hero-bg {
  position: absolute;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
}

.hero-bg::before {
  content: "";
  position: absolute;
  inset: -25% -10% -10%;
  background:
    radial-gradient(38% 46% at 16% 32%, color-mix(in srgb, var(--primary) 20%, transparent), transparent 70%),
    radial-gradient(34% 42% at 84% 22%, color-mix(in srgb, var(--accent) 18%, transparent), transparent 70%),
    radial-gradient(30% 36% at 62% 88%, color-mix(in srgb, var(--primary) 10%, transparent), transparent 72%);
  filter: blur(36px);
}

.hero-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle, color-mix(in srgb, var(--text) 16%, transparent) 1px, transparent 1.6px);
  background-size: 22px 22px;
  background-position: center top;
  /* Masque (alpha seulement) : la grille s'efface vers les bords. */
  -webkit-mask-image: radial-gradient(ellipse 72% 62% at 50% 28%, #000 25%, transparent 78%);
  mask-image: radial-gradient(ellipse 72% 62% at 50% 28%, #000 25%, transparent 78%);
  opacity: .55;
}

@media (max-width: 959.98px) {
  .hero {
    --_hero-overlap: var(--sp-12);
  }

  .hero-inner {
    grid-auto-flow: row;
    grid-template-columns: minmax(0, 1fr);
    grid-auto-columns: auto;
    gap: var(--sp-8);
  }

  .hero-copy {
    max-width: 720px;
  }

  .hero-visual {
    justify-self: center;
    max-width: 420px;
    aspect-ratio: 16 / 10;
  }
}

@media (max-width: 639.98px) {
  .hero {
    --_hero-pad-top: var(--sp-8);
    --_hero-pad-bottom: var(--sp-10);
    --_hero-overlap: var(--sp-8);
  }

  .hero-visual {
    display: none;
  }

  .hero-lead {
    margin-top: var(--sp-4);
  }

  .hero-meta {
    margin-top: var(--sp-5);
  }
}


/* --------------------------------------------------------------------------
   6. Carte de l'assistant de réservation
   -------------------------------------------------------------------------- */

.booking-card {
  position: relative;
  z-index: 2;
  padding: clamp(var(--sp-5), 3vw, var(--sp-8));
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  background-color: var(--surface);
  box-shadow: var(--shadow-lg);
}

/* Filet de marque centré en haut de la carte (ne touche pas les coins arrondis). */
.booking-card::before {
  content: "";
  position: absolute;
  top: -1px;
  left: var(--radius-xl);
  right: var(--radius-xl);
  height: 3px;
  border-radius: 0 0 3px 3px;
  background: linear-gradient(90deg, var(--primary), var(--accent));
  pointer-events: none;
}

/* Chevauchement du bas du hero (mêmes valeurs que --_hero-overlap du hero). */
.hero + .booking-card,
.hero + * > .booking-card:first-child {
  --_hero-overlap: var(--sp-16);
  margin-top: calc(var(--_hero-overlap) * -1);
}

@media (max-width: 959.98px) {
  .hero + .booking-card,
  .hero + * > .booking-card:first-child {
    --_hero-overlap: var(--sp-12);
  }
}

@media (max-width: 639.98px) {
  .hero + .booking-card,
  .hero + * > .booking-card:first-child {
    --_hero-overlap: var(--sp-8);
  }

  .booking-card {
    border-radius: var(--radius-lg);
  }

  .booking-card::before {
    left: var(--radius-lg);
    right: var(--radius-lg);
  }
}

.booking-card-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3) var(--sp-6);
  margin-bottom: var(--sp-6);
  padding-bottom: var(--sp-5);
  border-bottom: 1px solid var(--border);
}

.booking-card-head :is(h1, h2, h3) {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--fs-xl);
  font-weight: var(--fw-black);
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-tight);
}

.booking-card-head p {
  margin: var(--sp-1) 0 0;
  color: var(--text-muted);
  font-size: var(--fs-sm);
}

.booking-card-head .stepper {
  flex: 1 1 360px;
  max-width: 560px;
}

.booking-step {
  display: grid;
  gap: var(--sp-5);
  min-width: 0;
}

.booking-step[hidden] {
  display: none;
}

.booking-step + .booking-step {
  margin-top: var(--sp-8);
  padding-top: var(--sp-8);
  border-top: 1px dashed var(--border);
}

.booking-step > :is(h2, h3) {
  margin: 0;
  font-size: var(--fs-lg);
  font-weight: var(--fw-bold);
  letter-spacing: var(--tracking-tight);
}

/* Récapitulatif des choix (pilules avec lien « Modifier ») ---------------- */

.booking-summary {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-2);
  margin: 0 0 var(--sp-6);
  padding: 0;
  list-style: none;
}

.summary-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  min-height: 36px;
  max-width: 100%;
  padding: 4px var(--sp-3);
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  background-color: var(--surface-2);
  color: var(--text);
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  line-height: 1.2;
  /* Confirmer : la pastille « pop » à son apparition. */
  animation: tad-pop var(--dur-base) var(--ease-spring) both;
  animation-delay: calc(var(--i, 0) * var(--stagger-step));
}

.summary-chip > .icon {
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  color: var(--primary);
}

.summary-chip strong {
  font-weight: var(--fw-semibold);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.summary-chip a {
  flex-shrink: 0;
  margin-right: calc(var(--sp-2) * -1);
  padding: 4px 10px;
  border-radius: var(--radius-pill);
  color: var(--primary);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  text-decoration: none;
  transition: background-color var(--dur-fast) var(--ease-standard), color var(--dur-fast) var(--ease-standard);
}

.summary-chip a:hover {
  background-color: var(--primary-soft);
  color: var(--primary-soft-text);
}


/* --------------------------------------------------------------------------
   7. Sections
   -------------------------------------------------------------------------- */

.section {
  position: relative;
  padding-block: clamp(var(--sp-12), 7vw, var(--sp-20));
}

.section-alt {
  background-color: var(--surface-2);
  background-image: linear-gradient(
    180deg,
    color-mix(in srgb, var(--primary) 5%, var(--bg)),
    color-mix(in srgb, var(--accent) 4%, var(--bg))
  );
  border-block: 1px solid var(--border);
}

/* Deux sections claires consécutives : on évite le double espacement. */
.section:not(.section-alt) + .section:not(.section-alt) {
  padding-top: 0;
}


/* --------------------------------------------------------------------------
   8. « Comment ça marche » : cartes numérotées reliées
   -------------------------------------------------------------------------- */

.how-steps {
  --_how-gap: var(--sp-5);
  --_how-num: 44px;
  --_how-pad: var(--sp-6);
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--_how-gap);
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Pas de « transition » sur .how-step lui-même : ses propriétés d'apparition
   appartiennent à [data-reveal-stagger] (motion.css). Le survol passe par
   ::before (anneau teal + ombre qui se fondent). */
.how-step {
  position: relative;
  min-width: 0;
  padding: var(--_how-pad);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background-color: var(--surface);
  box-shadow: var(--shadow-sm);
}

.how-step::before {
  content: "";
  position: absolute;
  inset: -1px;
  border: 1px solid color-mix(in srgb, var(--primary) 32%, transparent);
  border-radius: inherit;
  box-shadow: var(--shadow-md);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--dur-base) var(--ease-out);
}

.how-step:hover::before {
  opacity: 1;
}

.how-step-num {
  position: relative;
  z-index: 1;
  display: inline-grid;
  place-items: center;
  width: var(--_how-num);
  height: var(--_how-num);
  margin-bottom: var(--sp-4);
  border-radius: var(--radius-md);
  background-color: var(--primary);
  color: var(--on-primary);
  font-size: var(--fs-md);
  font-weight: var(--fw-black);
  font-variant-numeric: tabular-nums;
  line-height: 1;
  box-shadow: 0 0 0 6px var(--primary-soft);
}

.how-step :is(h3, h4) {
  margin: 0 0 var(--sp-2);
  font-size: var(--fs-md);
  font-weight: var(--fw-bold);
  letter-spacing: var(--tracking-tight);
}

.how-step p {
  margin: 0;
  color: var(--text-muted);
  font-size: var(--fs-sm);
  line-height: var(--lh-normal);
}

/* Desktop : une seule rangée, ligne pointillée reliant les étapes. */
@media (min-width: 960px) {
  .how-steps {
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: minmax(0, 1fr);
  }

  .how-step:not(:last-child)::after {
    content: "";
    position: absolute;
    top: calc(var(--_how-pad) + var(--_how-num) / 2 - 2px);
    left: calc(var(--_how-pad) + var(--_how-num) + var(--sp-3));
    right: calc(var(--_how-gap) * -1 - 1px);
    height: 4px;
    background-image: radial-gradient(circle, color-mix(in srgb, var(--primary) 50%, transparent) 1.4px, transparent 1.9px);
    background-size: 9px 4px;
    background-repeat: repeat-x;
    background-position: left center;
    transform-origin: left center;
    pointer-events: none;
  }

  /* Orienter : la liaison se « trace » quand la liste entre dans la vue.
     Animation (et non transition) + filet de sécurité de 2,5 s, comme
     motion.css §4 : la ligne n'attend jamais indéfiniment core.js. */
  html.js :is([data-reveal], [data-reveal-stagger]).how-steps:not(.is-visible) .how-step:not(:last-child)::after {
    transform: scaleX(0);
    animation: lc-unhide 0s 2.5s forwards;
  }

  html.js :is([data-reveal], [data-reveal-stagger]).how-steps.is-visible .how-step:not(:last-child)::after {
    animation: tad-grow-x var(--dur-slower) var(--ease-out) backwards;
    animation-delay: calc(var(--i, 0) * var(--stagger-step) + var(--dur-base));
  }
}

@keyframes lc-unhide {
  to { transform: none; }
}

@media print {
  .how-step::after {
    transform: none !important;
  }
}

/* Téléphone : liste verticale, numéro à gauche et liaison verticale. */
@media (max-width: 639.98px) {
  .how-steps {
    --_how-pad: var(--sp-5);
    --_how-gap: var(--sp-4);
    grid-template-columns: minmax(0, 1fr);
  }

  .how-step {
    padding-left: calc(var(--_how-pad) + var(--_how-num) + var(--sp-4));
  }

  .how-step-num {
    position: absolute;
    top: var(--_how-pad);
    left: var(--_how-pad);
    margin: 0;
  }

  .how-step:not(:last-child)::after {
    content: "";
    position: absolute;
    top: calc(var(--_how-pad) + var(--_how-num) + var(--sp-3));
    bottom: calc(var(--_how-gap) * -1 - 1px);
    left: calc(var(--_how-pad) + var(--_how-num) / 2 - 2px);
    width: 4px;
    background-image: radial-gradient(circle, color-mix(in srgb, var(--primary) 50%, transparent) 1.4px, transparent 1.9px);
    background-size: 4px 9px;
    background-repeat: repeat-y;
    background-position: center top;
    pointer-events: none;
  }
}


/* --------------------------------------------------------------------------
   9. Mise en page deux colonnes (contenu + panneau collant)
   -------------------------------------------------------------------------- */

.layout-split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(300px, 380px);
  align-items: start;
  gap: clamp(var(--sp-6), 3vw, var(--sp-10));
}

.layout-main {
  min-width: 0;
}

.layout-aside {
  position: sticky;
  top: calc(var(--header-h) + var(--sp-6));
  display: grid;
  align-content: start;
  gap: var(--sp-5);
  min-width: 0;
}

/* Écran peu haut : on renonce au collant pour ne jamais masquer le bas du panneau. */
@media (max-height: 699.98px) {
  .layout-aside {
    position: static;
  }
}

@media (max-width: 959.98px) {
  .layout-split {
    grid-template-columns: minmax(0, 1fr);
  }

  .layout-aside {
    position: static;
  }
}


/* --------------------------------------------------------------------------
   10. Pied de page
   -------------------------------------------------------------------------- */

.site-footer {
  /* Bande sombre en thème clair (surface inverse) ; surface élevée en sombre. */
  --_ft-bg: var(--surface-inverse);
  --_ft-text: var(--text-inverse);
  --_ft-muted: color-mix(in srgb, var(--text-inverse) 70%, transparent);
  --_ft-border: color-mix(in srgb, var(--text-inverse) 14%, transparent);
  position: relative;
  margin-top: auto;
  background-color: var(--_ft-bg);
  color: var(--_ft-text);
  font-size: var(--fs-sm);
}

/* Filet de marque en haut du pied de page. */
.site-footer::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 3px;
  background: linear-gradient(90deg, var(--primary), var(--accent));
}

:root[data-theme="dark"] .site-footer {
  --_ft-bg: var(--surface);
  --_ft-text: var(--text);
  --_ft-muted: var(--text-muted);
  --_ft-border: var(--border);
  border-top: 1px solid var(--border);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .site-footer {
    --_ft-bg: var(--surface);
    --_ft-text: var(--text);
    --_ft-muted: var(--text-muted);
    --_ft-border: var(--border);
    border-top: 1px solid var(--border);
  }
}

.site-footer-inner {
  padding-top: clamp(var(--sp-12), 6vw, var(--sp-16));
  padding-bottom: var(--sp-8);
}

.footer-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr));
  gap: var(--sp-10) var(--sp-8);
}

.footer-col {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--sp-3);
  min-width: 0;
}

.footer-brand .brand-logo,
.site-footer .brand-logo {
  height: 46px;
  padding: 6px 10px;
  border-radius: var(--radius-md);
  background-color: var(--slate-0);
  box-shadow: var(--shadow-sm);
}

.footer-brand p {
  max-width: 34ch;
  margin: var(--sp-2) 0 0;
  color: var(--_ft-muted);
  line-height: var(--lh-normal);
}

.footer-title {
  margin: 0 0 var(--sp-1);
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--_ft-muted);
}

.footer-list {
  display: grid;
  gap: var(--sp-3);
  margin: 0;
  padding: 0;
  list-style: none;
}

.footer-list li {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-3);
  min-width: 0;
  line-height: var(--lh-snug);
}

.footer-list a {
  display: inline-flex;
  align-items: flex-start;
  gap: var(--sp-3);
  border-radius: var(--radius-xs);
  color: var(--_ft-text);
  text-decoration: underline;
  text-decoration-color: transparent;
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
  transition: text-decoration-color var(--dur-fast) var(--ease-standard), color var(--dur-fast) var(--ease-standard);
}

.footer-list a:hover {
  text-decoration-color: var(--accent);
}

.footer-list .icon {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  margin-top: -1px;
  color: var(--accent);
}

/* Boutons de préférences sur fond sombre : variante translucide.
   On règle les paramètres internes de .btn (components.css §02) : survol,
   pression et focus restent ainsi cohérents avec le fond du pied de page. */
.site-footer .btn-secondary,
.site-footer .btn-ghost {
  --btn-bg: color-mix(in srgb, var(--_ft-text) 7%, transparent);
  --btn-fg: var(--_ft-text);
  --btn-border: var(--_ft-border);
  --btn-bg-hover: color-mix(in srgb, var(--_ft-text) 13%, transparent);
  --btn-bg-active: color-mix(in srgb, var(--_ft-text) 18%, transparent);
  --btn-fg-hover: var(--_ft-text);
  --btn-border-hover: color-mix(in srgb, var(--_ft-text) 28%, transparent);
  --btn-shadow: none;
  --btn-shadow-hover: none;
}

.footer-bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--sp-3) var(--sp-8);
  margin-top: clamp(var(--sp-10), 5vw, var(--sp-12));
  padding-top: var(--sp-6);
  border-top: 1px solid var(--_ft-border);
  color: var(--_ft-muted);
  font-size: var(--fs-xs);
  line-height: var(--lh-normal);
}

.footer-bottom p {
  max-width: 72ch;
  margin: 0;
}

.footer-bottom p:last-child {
  white-space: nowrap;
}

@media (max-width: 959.98px) {
  .footer-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 639.98px) {
  .footer-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--sp-8);
  }

  .footer-bottom p:last-child {
    white-space: normal;
  }
}


/* --------------------------------------------------------------------------
   11. Accessibilité : transparence réduite, couleurs forcées, mouvement réduit
   -------------------------------------------------------------------------- */

@media (prefers-reduced-transparency: reduce) {
  .site-header,
  :where(.hero-meta) > * {
    background-color: var(--surface);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }

  .site-header {
    animation: none;
  }
}

@media (forced-colors: active) {
  .site-nav-link.is-active,
  .site-nav-link[aria-current="page"] {
    outline: 2px solid CanvasText;
    outline-offset: -2px;
  }

  .hero-title em,
  .hero-title mark {
    -webkit-text-fill-color: currentColor;
    background: none;
  }

  .hero-bg {
    display: none;
  }
}

/* Mouvement réduit (prefers-reduced-motion ou data-motion="reduced") : rien à
   ajouter ici. Toutes les animations et transitions de ce fichier passent par
   --dur-* (1 ms), --move-* (0px), --stagger-step (0ms) et --scale-press (1),
   neutralisés par tokens.css ; aucune animation infinie n'est définie. */