/* BeandBus — blocs et boutons · chargée après header.css, avant mobile.css.
   Aucune feuille de maquette n'est modifiée : tout vit ici.

   Le paquet du design system (`_ds/nocturne-…/styles.css`) a été généré pour un
   thème SOMBRE, mais les neuf pages ont été construites en clair par-dessus.
   Ses trois jetons d'ombre sont des couleurs de bordure de thème sombre, et
   28 règles réparties sur quatre feuilles les consomment. C'est l'origine de
   presque tout ce qui suit. */

/* ================================================================= A · ombres

   `--shadow-sm` valait `0 0 0 1px #3f424d` : une bague gris ardoise OPAQUE
   posée sur une carte quasi blanche. `--shadow-md` et `--shadow-lg` ajoutaient
   en plus des flous à `rgba(0,0,0,.55)` et `.65`.

   On les redéfinit pour une surface claire : même rôle, mêmes trois échelons,
   des valeurs qui correspondent au fond réel. Cela répare d'un seul coup les
   13 règles qui déclarent `box-shadow` deux fois dans la même déclaration —
   la seconde écrasait la bague douce correcte que la première posait. */
:root {
  --shadow-sm: 0 0 0 1px color-mix(in srgb, var(--color-neutral-900) 10%, transparent);
  --shadow-md: 0 0 0 1px color-mix(in srgb, var(--color-neutral-900) 9%, transparent),
               0 6px 18px color-mix(in srgb, var(--color-neutral-900) 10%, transparent);
  --shadow-lg: 0 0 0 1px color-mix(in srgb, var(--color-neutral-900) 8%, transparent),
               0 16px 40px color-mix(in srgb, var(--color-neutral-900) 18%, transparent);
}

/* ================================================ A1 · palette « design 3 »

   Reprise de `Beandbus design 3/export-final` — fond blanc, violet et lime.
   L'export ne couvre que deux pages (accueil et formulaire) ; on porte sa
   palette aux neuf, ici, en un seul endroit.

   Ce qui rend l'opération sûre :
   — le paquet du design system est **identique au bit près** entre l'export et
     le déployé (même md5). Neutres, rampe d'accent et `--color-section` ne
     bougent pas : tout le changement tient dans les jetons de page.
   — dans les huit feuilles déployées, `background: var(--flash)` est **toujours**
     accompagné de `color: var(--flash-ink)`, jamais de blanc. Le corail devient
     un lime beaucoup plus clair (L 0,685 → 0,880) ; s'il avait porté du texte
     blanc quelque part, il serait devenu illisible. Vérifié : nulle part.

   Les jetons `--sky`, `--blue`, `--teal`, `--rose-tint` et `--deep` de l'export
   ne sont PAS portés : ce sont des restes des itérations 1 et 2 empilées dans
   le même fichier, aucune règle de « design 3 » ne les consomme. */
:root {
  /* PREMIUM : lime → ambre de signal. Réservé aux économies, aux prix et aux
     badges — jamais en aplat large. */
  --flash: oklch(0.855 0.165 88);
  --flash-deep: oklch(0.520 0.130 75);
  --flash-tint: oklch(0.962 0.048 92);
  /* l'encre posée SUR l'ambre : un brun profond, pas du blanc */
  --flash-ink: oklch(0.285 0.070 70);
  /* l'ambre est clair (L 0,855) : il passe sur le marine sans variante */
  --flash-on-dark: oklch(0.855 0.165 88);

  /* la famille violette, nouvelle : elle n'existait dans aucune des huit
     feuilles. Elle vient en plus de la rampe d'accent du design system, qui
     reste en place — c'est ce que fait l'export lui-même. */
  --v: oklch(0.500 0.170 252);
  --v-hi: oklch(0.430 0.155 252);
  --v-tint: oklch(0.955 0.024 248);
  --v-soft: oklch(0.900 0.050 248);
  --v-deep: oklch(0.205 0.050 252);

  /* Les feuilles premium consomment ces noms-là sans les déclarer partout.
     On les branche ici, une fois, sur la même famille : une seule source. */
  --blue: var(--v);
  --blue-hi: var(--v-hi);
  --sky: oklch(0.715 0.110 248);
  --sky-tint: var(--v-tint);
  --sky-deep: var(--v-deep);
  --deep: var(--v-deep);

  /* — et c'est ici que « design 3 » devient violet, pas seulement lime —

     `Beandbus annuaire/export-final/css/fiche.css` ne se contente pas
     d'ajouter la famille `--v` : il REBRANCHE la rampe d'accent et la couleur
     de section du design system dessus. Sans cela le site resterait lavande et
     indigo avec des touches de lime ; c'est ce rebranchement qui fait la
     bascule. On le reprend tel quel, échelon par échelon.

     Conséquence à connaître : `--color-section` servait de fond sombre
     (#262A60, L≈0,20) sur `.plan`, `.plus-card`, `.health`, `.strip` et
     `.cmpbar`. Il devient le violet vif (#8643D7, L 0,545) — ces panneaux
     s'éclaircissent nettement. Le texte blanc qu'ils portent y garde 5,08:1,
     au-dessus des 4,5 exigés. Vérifié, pas supposé. */
  /* L'export rebranche les échelons 200 à 800. Le jeton de base, sans chiffre,
     n'y figure pas — mais il reste consommé par le déployé (lien de la page
     courante dans l'annuaire, par exemple) et gardait donc l'ancien lavande
     #9184D9, qui jurait avec la rampe violette ET plafonnait à 2,62:1. Il suit
     ses propres échelons. */
  --color-accent: var(--v);
  --color-accent-200: var(--v-tint);
  --color-accent-300: var(--v-soft);
  --color-accent-400: var(--sky);
  --color-accent-500: var(--v);
  --color-accent-600: var(--v);
  --color-accent-700: var(--v-hi);
  --color-accent-800: oklch(0.300 0.090 252);
  /* PREMIUM : `--color-section` reste sur la couleur d'action, comme dans
     `annuaire.css`, `demande.css` et `fiche.css` de l'export. Le marine est
     réservé aux bandeaux sombres, et c'est la règle
     `.stats,.band,…,body > .topbar { --color-section: var(--v-deep) }` plus bas
     qui s'en charge — elle existait déjà.
     Mis en marine ici, il repeignait des éléments qui n'en sont pas : le numéro
     d'étape du formulaire (`.q-kicker .n`) sortait marine là où la maquette le
     donne bleu. Mesuré des deux côtés. */
  --color-section: var(--v);
  --color-section-ghost: var(--v-tint);
  --color-section-glow: oklch(0.360 0.120 250);
}

/* — les surfaces qui doivent rester sombres —

   `--color-section` joue deux rôles dans les feuilles déployées : il remplit de
   petits aplats (onglet actif, pastille, puce) avec du blanc plein par-dessus,
   et il peint les grandes bandes de l'accueil, dont le texte secondaire est du
   blanc à 62 % d'opacité.

   Le violet vif convient au premier rôle — 5,08:1 — mais pas au second : sur
   l'indigo d'origine (L 0,20) le blanc à 62 % passait, sur le violet (L 0,545)
   il tombe à 2,24. Mesuré après le rebranchement : douze textes sous le seuil
   AA d'un coup.

   L'export règle cela de son côté en peignant ces bandes en `--v-deep`. On fait
   pareil, mais sans toucher aux blocs : on redéfinit le jeton À L'INTÉRIEUR des
   surfaces concernées. Chaque bande garde donc son écriture d'origine et
   récupère la bonne valeur par héritage. */
.stats,
.band,
.loyal,
.plan,
.plus-card,
.health,
.strip,
.cmpbar,
/* seulement celui de l accueil : sur la fiche, .topbar est la barre
   d action blanche de #fixhead, pas un bandeau de service */
body > .topbar { --color-section: var(--v-deep); }

/* Les intitulés du champ de recherche : 11 px en violet sur un fond déjà
   teinté de violet, soit 4,36:1 — le seul texte du site qui reste sous le
   seuil après le rebranchement, et de peu. L'échelon foncé de la même famille
   le passe sans changer la couleur perçue. */
.sb-cell label,
.chip-on { color: var(--v-hi); }

/* Les liens de l'en-tête sont en `neutral-700` sur un fond translucide :
   4,49:1, au ras du seuil sur toutes les pages et juste en dessous sur
   l'annuaire. Ce n'est pas la palette qui les y a mis — ils y étaient déjà —
   mais un échelon plus foncé règle la question pour de bon. */
.nav > a { color: var(--color-neutral-800); }

/* ========================================================= A2 · l'encre

   Les couleurs de marque sont déjà identiques sur les huit feuilles — `--flash`,
   `--flash-deep`, `--flash-tint`, `--flash-ink`, `--ok`, `--ok-tint` ont partout
   la même valeur au centième près. Ce qui diverge, c'est l'échelle de gris du
   texte : le MÊME nom de jeton vaut trois choses selon la page.

     --ink-64 : 74 % (accueil, demande, client, autocariste)
                72 % (admin)
                70 % (annuaire, fiche, connexion)
     --ink-55 : 70 % (accueil, demande, client, autocariste)
                62 % (annuaire, fiche, connexion, admin)

   Le même texte secondaire n'a donc pas le même gris d'une page à l'autre. Et
   ce n'est pas qu'une affaire de cohérence : mesuré au contraste réel, la
   variante à 62 % tombe entre 3,87 et 4,07 sur les surfaces de l'annuaire —
   sous les 4,5 exigés par WCAG AA pour du texte courant. La variante à 70 %
   passe partout.

   On aligne les neuf pages sur l'échelle foncée, celle que quatre feuilles
   utilisaient déjà : rien ne bouge sur celles-là, et les autres remontent.
   (Les noms mentent — `--ink-64` vaut 74 % — mais les renommer voudrait dire
   toucher les huit maquettes ; on garde les noms et on corrige les valeurs.) */
:root {
  --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);

  /* jetons d'état absents de cinq feuilles sur huit : sans eux, une page qui
     a besoin d'un avertissement doit inventer sa propre couleur. */
  --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);
  /* `--flash-on-dark` était redéclaré ici en corail, après la valeur lime de la
     section A1 — et gagnait. Exactement la faute que ce fichier documente plus
     haut : deux déclarations du même jeton, la seconde écrase la première sans
     rien dire. Elle est retirée ; A1 fait foi. */
}

/* — les deux seuls textes du site qui échouaient au contraste — */

/* gris `neutral-500` en corps de texte : 2,35:1 sur fond clair */
.trust .t-row span { color: var(--ink-55); }

/* corail de marque sur la carte de plan, qui est foncée : 4,27:1.
   C'est exactement le cas pour lequel `--flash-on-dark` a été créé. */
.plan .lvl,
.plus-card .lvl { color: var(--flash-on-dark); }

/* ============================================================== B · surface

   L'accueil et le formulaire posaient déjà la page un cran sous les cartes
   (`neutral-200` contre `neutral-100`). L'annuaire, la fiche, la connexion et
   les trois consoles posaient les deux sur la même couleur : les cartes ne se
   détachaient que par cette bague sombre, qui faisait tout le travail.

   On complète le motif que la maquette utilisait déjà ailleurs.
   `background-color` et non `background` : le dégradé radial propre à chaque
   page reste intact. */
body { background-color: var(--color-neutral-200); }

/* ============================================================== C · boutons

   Douze hauteurs de bouton sur le site : 28, 35, 36, 37, 38, 39, 40, 44, 46,
   48, 51, 52. On les ramène à trois échelons — compact, standard, saillant.
   Seule la hauteur bouge : la couleur, la graisse et la fonte de chaque bouton
   restent celles de la maquette. */

/* — 36 px : compact (onglets, puces, actions secondaires en ligne) — */
.tab,
.seg,
.chip,
.add,
.qq,
.ph-set,
.mos-all,
.all-photos,
.icon-btn,
.fc-acts button,
.rad-opt,
.pill,
.add-stop,
.subnav a,
.subnav .rt .b {
  display: inline-flex; align-items: center; justify-content: center;
  padding-block: 4px; min-height: 36px;
}
/* `.all-photos` (33,4 px) et `.mos-all` (37,4) sont le même bouton « voir
   toutes les photos », posé au même endroit, écrit deux fois à 4 px d'écart.
   Idem dans la barre de sections : l'onglet fait 37, le bouton d'à côté 35. */

/* — 44 px : action standard — */
.c-add,
.c-see,
.tb-go,
.eq2-more,
.new-btn,
.d-side .go,
.o-acts .go,
.o-acts .alt,
.o-acts .no,
.q-acts .accept,
.q-acts .chat,
.q-acts .detail,
.fav-cta,
.ch-send,
.send,
.fp-go,
.pc .pick,
.act {
  display: inline-flex; align-items: center; justify-content: center;
  padding-block: 6px; min-height: 44px;
}

/* — 52 px : saillant (le bouton qui porte la conversion) — */
.qp-submit,
.ask-go {
  display: inline-flex; align-items: center; justify-content: center;
  padding-block: 8px; min-height: 52px;
}

/* la cloche : 34 d'un côté, 36 de l'autre */
.bell { width: 36px; height: 36px; }

/* ------------------------------------------------- C.2 · survol qui existe

   Dix règles `:hover` changent `border-color` sur des éléments qui n'ont pas
   de `border` : elles ne font rien. Les onglets des deux consoles ne donnaient
   aucun retour au survol, et `.veh` / `.gr` sont des cartes cliquables sans le
   moindre signe. On leur donne la bague `inset` que ces éléments utilisent
   déjà — c'est le retour qui marche dans crm-admin, transposé. */
.tab:not(.on):not([aria-selected="true"]):hover,
.q-acts .chat:hover,
.q-acts .detail:hover,
.o-acts .alt:hover,
.o-acts .no:hover,
.fc-acts button:hover,
.veh:hover,
.gr:hover {
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--color-accent-500) 60%, transparent);
}

/* `.chip` et `.pc .pick` n'avaient aucun `:hover` du tout */
.chip:not([aria-pressed="true"]):hover,
.pc .pick:hover {
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--color-accent-500) 55%, transparent);
}

/* trois boutons n'avaient aucun `:hover` : le rouge de la fiche publique, le
   socle collant de la fiche (le seul appel à l'action visible en défilant sur
   téléphone) et les options de rayon du formulaire. */
.fp-go:hover { background: color-mix(in srgb, var(--flash) 92%, black); }
.dock .go:hover { background: color-mix(in srgb, var(--flash-deep) 88%, black); }
.rad-opt:hover { border-color: var(--color-accent-500); }

/* ------------------------------------------------- C.3 · état enfoncé

   Aucun bouton du site n'avait de `:active` — zéro occurrence dans les cinq
   feuilles. Au doigt, cela veut dire aucun signal entre le moment où l'on
   touche et le moment où la vue change. */
button:active,
.btn:active,
.cta:active,
.c-add:active, .c-see:active,
.tb-go:active, .eq2-more:active, .ask-go:active,
.new-btn:active, .fav-cta:active, .fp-go:active,
.d-side .go:active, .o-acts .go:active,
.q-acts .accept:active, .act:active {
  transform: translateY(1px);
}
@media (prefers-reduced-motion: reduce) {
  button:active, .btn:active, .cta:active, .c-add:active, .c-see:active,
  .tb-go:active, .eq2-more:active, .ask-go:active, .new-btn:active,
  .fav-cta:active, .fp-go:active, .d-side .go:active, .o-acts .go:active,
  .q-acts .accept:active, .act:active { transform: none; }
}

/* Le seul `:active` qui existait dans tout le site est `.btn:active { color:
   var(--color-accent-800) }` (landing.css:75), écrit pour les boutons au trait.
   Il s'applique aussi aux cinq appels à l'action pleins : en appuyant, le texte
   passait de blanc à l'indigo #423a6a sur un fond corail. On rend leur couleur
   aux boutons pleins sans toucher à celle des boutons au trait. */
.nav .btn:active,
.stats-foot .btn:active,
.of-side .btn:active,
.loyal .btn:active,
.band .btn:active,
.qp-submit:active { color: var(--color-neutral-100); }

/* ------------------------------------------------- C.4 · focus au clavier

   Les trois consoles font `outline: none` sur `.input:focus` et ne le
   remplacent que par la couleur de la bordure : au clavier on ne voit plus où
   l'on est. La règle globale `:focus-visible` du design system ne les couvre
   pas, une classe l'emportant sur un pseudo-élément seul. On rend la bague
   sans retirer le changement de bordure qu'elles faisaient déjà. */
.input:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 2px solid var(--color-accent-600);
  outline-offset: 2px;
}

/* ================================================== D · échelle des rayons

   Quatorze valeurs de rayon différentes (4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14,
   16, 18, 20) pour trois jetons disponibles (4 / 8 / 14). On ne choisit pas un
   gagnant global — on rabat chaque valeur isolée sur la famille voisine, de
   sorte qu'aucun bloc ne bouge de plus de 2 px mais que l'ensemble retombe sur
   une échelle : 4 · 8 · 12 · 14 · 18. */

/* consoles : le même rôle avait trois rayons (8 / 14 / 16) */
.kpi { border-radius: 14px; }
/* crm-admin n'utilise aucun jeton : ses panneaux à 18, ses boîtes à 11 */
/* design 3 pose 18 px, et c est aussi la valeur d origine de crm-admin */
.panel { border-radius: 18px; }
.act { border-radius: 12px; }
.dlg-pool { border-radius: 12px; }
.dlg-row { border-radius: 8px; }
.health { border-radius: 14px; }
.zone-box { border-radius: 14px; }
/* fiche : 16, 20 et 22 pour des blocs du même rang que ceux à 18 */
.topbar { border-radius: 18px; }
.ask { border-radius: 18px; }
.zx-map { border-radius: 18px; }
.fp-logo-box { border-radius: 12px; }
.fp-bar { border-radius: 14px; }
/* accueil : le seul bloc à 20 */
.step { border-radius: 18px; }
/* boîtes de dialogue : un seul rayon pour les trois */
.dlg { border-radius: 18px; }

/* ================================================ E · bordures fantômes

   Deux règles posent `border-style` ou `border-color` sur un élément qui n'a
   pas de `border-width`. */

/* `border-style: dashed` sans largeur → le navigateur prend `medium` (≈3 px)
   dans `currentColor`, soit une bordure sombre de 3 px qui décale la ligne. */
.mem.is-pending {
  border-width: 1px;
  border-color: color-mix(in srgb, var(--color-neutral-900) 22%, transparent);
}

/* `.avail.is-off` ne changeait que `border-color` sur un bloc sans bordure :
   l'indisponibilité ne se voyait pas sur le bloc lui-même. */
.avail.is-off {
  box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--flash-deep) 45%, transparent);
}

/* ======================================== F · la carte de l'annuaire

   Les cinq cartes de résultat plaçaient leur bouton principal à 90, 97, 102 et
   125 px du haut : le CTA flottait, verticalement centré, à une hauteur
   différente selon le nombre de badges de chaque autocariste. Rien ne
   s'alignait d'une carte à l'autre. */

/* la colonne d'action s'ancre en bas : prix en haut, boutons au pied */
.c-side { justify-content: flex-start; gap: 9px; }
.c-from { margin-bottom: auto; }

.c-add,
.c-see { border-radius: 12px; white-space: nowrap; line-height: 1.2; font-size: 13.5px; }

/* La grille à trois colonnes et l'image pleine hauteur n'existent qu'au-dessus
   du point de rupture : sous 720 px annuaire.css empile la carte en une seule
   colonne, et cette feuille étant chargée après, une règle non gardée
   écraserait cet empilement. */
@media (min-width: 721px) {
  /* les deux boutons partagent la hauteur et ne diffèrent que par le poids.
     « Ajouter à ma demande » passait à la ligne dans 178 px et faisait 65 px de
     haut contre 38 au bouton d'à côté : la colonne gagne 18 px et le texte
     tient sur une ligne. */
  .card { grid-template-columns: 208px minmax(0, 1fr) 196px; align-items: stretch; }

  /* l'image occupait 156 px dans une colonne haute de 190 à 261 : jusqu'à
     105 px de vide sous la photo. Elle prend toute la hauteur, recadrée au
     centre. */
  .c-media { aspect-ratio: auto; height: 100%; min-height: 160px; }
  .c-media img { object-position: center; }
}

/* deux systèmes de pastilles superposés sur la même carte : les équipements à
   19 px et rayon 4, les badges à 22 px et rayon 5. Même géométrie, la
   différence reste la couleur. */
.c-eq span { line-height: 18px; padding: 2px 9px; border-radius: 5px; }

/* `.card:hover` est déclarée avant `.card.is-top`, à spécificité égale : la
   carte à la une gardait donc toujours son ombre d'origine et ne répondait
   pas au survol. */
.card.is-top:hover {
  box-shadow: 0 14px 34px color-mix(in srgb, var(--color-neutral-900) 13%, transparent),
    inset 0 0 0 2px var(--flash);
}

/* ======================================== G · le bouton rouge, une géométrie

   Sept géométries pour le même bouton d'action rouge : rayons 8, 11, 12, 14 et
   999, graisses 500 et 600, ombres à `0 6px 16px`, `0 8px 20px`, `0 0 0 3px` ou
   rien. On garde la couleur et la taille de chacun — on aligne la forme. */
.new-btn,
.fav-cta,
.fp-go,
.q-acts .accept,
.o-acts .go,
.send,
.c-add,
tfoot .accept,
.act.pri,
.tb-go,
.ask-go {
  border-radius: 12px;
  box-shadow: 0 6px 16px color-mix(in srgb, var(--flash) 30%, transparent);
}
/* les deux appels à l'action de la fiche gardaient un halo à 38 % et 40 % —
   même géométrie, deux points d'écart. Leur `:hover` reste plus fort. */
/* la barre de comparaison reste une pilule : c'est sa forme, pas un écart */
.cmpbar .act { border-radius: 999px; }

/* ============================ G2 · le rail des consoles : la mise au point

   Repris du composant Animated Sidebar d'unlumen (21st.dev), transposé en CSS.
   Deux mécaniques que le rail n'avait pas :

   1. survoler une entrée éteint ses voisines. Le composant fait passer l'item
      survolé à 1 et TOUS les autres à 0,3 ; au repos ils sont à 0,55. C'est ce
      qui donne l'impression que la liste répond au regard plutôt que juste
      l'item sous le curseur. Ici l'échelle est plus douce (1 / 0,5) parce que
      nos entrées portent un pictogramme et un compteur, pas seulement un mot.
   2. l'entrée avance de quelques pixels — 6 px au survol, 8 px pour la section
      courante dans l'original ; on garde le rapport.

   Seulement là où il y a un vrai survol et où le rail est vertical : sous
   1060 px `mobile.css` en fait une barre horizontale à défilement, et sur
   écran tactile `:hover` se déclenche au toucher et resterait collé. */
@media (min-width: 1061px) and (hover: hover) {
  .menu a { transition: opacity .16s ease, transform .16s cubic-bezier(.34, 1.4, .64, 1),
                        background-color .14s ease, color .14s ease; }
  .menu:hover a { opacity: .5; }
  .menu:hover a:hover,
  .menu a.on { opacity: 1; }
  .menu a:hover { transform: translateX(4px); }
  .menu a.on { transform: translateX(6px); }
}
@media (prefers-reduced-motion: reduce) {
  .menu a:hover,
  .menu a.on { transform: none; }
}

/* ==================================================== H · pastilles

   `.bdg` est le même composant partout, mais l'accueil l'écrit `3px 10px` /
   rayon 6 (24 px de haut) et l'annuaire comme les trois consoles `2px 9px` /
   rayon 5 (22 px). On aligne l'accueil sur les huit autres pages.
   `.of-feat`, posée juste au-dessus dans la même carte d'offre, faisait 20. */
.bdg { padding-block: 2px; border-radius: 5px; }
.of-feat { padding: 2px 9px; border-radius: 5px; line-height: 18px; }

/* ============================== J · fiche : le bloc flottant sur le bon rail

   Toute la page tient sur un rail de 1140 px dont `--edge` fait la gouttière
   INTÉRIEURE : `.wrap` et `.band-in` sont larges de 1140 avec `padding: 0
   var(--edge)`, donc leur contenu mesure 1140 − 2 × 72 = 996. L'en-tête
   flottant, lui, était déclaré `width: min(1140px, calc(100% - 2 * var(--edge)))`
   — 1140 tout rond, sans la gouttière. Il dépassait donc de 72 px de chaque
   côté : 215→1211 pour le contenu, 143→1283 pour la barre au-dessus.

   La bonne largeur est celle du contenu : le rail, moins ses deux gouttières.
   Sous 1001 px le bloc n'est plus fixe (mobile.css le remet dans le flux, à
   l'intérieur d'un parent déjà rembourré) et la soustraction se ferait deux
   fois — d'où la garde. */
@media (min-width: 1001px) {
  .fixhead { width: calc(min(1140px, 100%) - 2 * var(--edge)); }
}

/* ==================================================== K · fiche : les avis

   Les barres par critère et la répartition par étoile ne sont renseignées que
   pour un seul autocariste ; sur les huit autres fiches le script les masque.
   Mais `.rv-head` est une grille à colonnes déclarées (`auto minmax(0,1fr)
   208px`) : les pistes survivaient à leurs occupants et laissaient 689 px de
   vide à côté de la note. En flex il n'y a pas de piste à survivre — et à
   pleine charge le calcul retombe exactement sur les mêmes 195 / 481 / 208. */
.rv-head { display: flex; flex-wrap: wrap; }
.rv-big { flex: 0 0 auto; }
.rv-bars { flex: 1 1 340px; }
.rv-spread { flex: 0 1 208px; }
@media (max-width: 900px) {
  .rv-bars,
  .rv-spread { flex: 1 1 100%; }
}

/* quatre avis dans une grille de trois colonnes : trois en haut, un tout seul
   en bas à côté de 670 px de vide. Deux colonnes de 494 les rangent 2 × 2.
   `min(400px, 100%)` et non `400px` : sinon la piste reste plus large que le
   rail sur téléphone et pousse la page. */
.rv-grid { grid-template-columns: repeat(auto-fit, minmax(min(400px, 100%), 1fr)); }

/* état vide : la note reste, mais sans la barre de séparation de 42 px qui
   annonçait des blocs absents, et le message cesse d'être une ligne de petit
   gris orpheline sous un grand blanc. */
#avis:not(:has(.rv-card)) .rv-head { padding-bottom: var(--space-6); border-bottom: 0; }
#avis:not(:has(.rv-card)) .rv-grid { margin-top: var(--space-4); }
#avis:not(:has(.rv-card)) .rv-foot { margin-top: var(--space-3); }
.rv-grid > .rv-fine {
  grid-column: 1 / -1; margin: 0;
  padding: 16px 18px; border-radius: 14px;
  border: 1px dashed color-mix(in srgb, var(--color-neutral-900) 16%, transparent);
  background: color-mix(in srgb, var(--color-neutral-100) 55%, transparent);
  font-size: 14px; line-height: 22px; color: var(--ink-64);
}

/* ==================================================== I · deux bords

   `.step` et `.offer` déclarent `border: 1px solid neutral-300` ET
   `box-shadow: var(--shadow-sm)`, qui était une bague opaque de 1 px :
   deux traits de bord dans deux couleurs séparées par huit crans de rampe.
   Le bord reste, la bague redevient une ombre portée. */
.step,
.offer {
  box-shadow: 0 6px 18px color-mix(in srgb, var(--color-neutral-900) 8%, transparent);
}

/* ═══════════════════════════════════════════════════════════════════════════
   N · DESIGN 3 · les détails de l'accueil
   Portés depuis `Beandbus annuaire/export-final/css/accueil.css`.
   Aspect seul : pas une ligne de balisage n'a bougé. Tout ce qui dépendait
   d'un bloc absent du déployé est resté dehors.
   Ici et pas dans `landing.css` : cette feuille se charge après, et les
   sections D et G plus haut posent déjà `.step` et `.offer`.
   ═══════════════════════════════════════════════════════════════════════════ */

/* — le bandeau de service devient sombre — */
body > .topbar { background: var(--v-deep) !important; border-bottom: 0; }
body > .topbar a { color: var(--color-neutral-100); text-decoration: underline; text-underline-offset: 3px; }
/* La maquette déclare `color` deux fois sur `.topbar` et c'est l'encre presque
   noire qui gagne : sur le violet profond, 1,5:1. Ses liens sont blancs, mais
   pas le texte courant à côté. On ne porte pas une faute. */
body > .topbar { color: color-mix(in srgb, var(--color-neutral-100) 82%, transparent) !important; }

/* — l'appel à l'action de la barre : lime → violet, en pastille — */
.nav .btn-primary { background: var(--v) !important; color: var(--color-neutral-100) !important;
  border: 0; border-radius: 999px !important; font-weight: 600;
  box-shadow: 0 10px 26px color-mix(in srgb, var(--v) 40%, transparent); }
.nav .btn-primary:hover { background: var(--v-hi) !important; color: var(--color-neutral-100) !important; }

/* — le hero perd sa bande teintée : blanc, et un seul dégradé violet
     découpé en bas. Le pseudo-élément n'existait pas ; ses quatre propriétés
     de boîte servent à le faire exister, elles ne déplacent rien. — */
.hero { background: var(--color-neutral-100) !important; }
.hero::before { content: ""; position: absolute; left: 0; right: 0; top: 0; bottom: 0; z-index: 0;
  background: linear-gradient(180deg, var(--v-tint) 0%, var(--color-neutral-100) 74%) !important;
  border-radius: 0 0 34px 34px !important; }

/* — le panneau cesse d'être du verre — */
.quote-panel { background: var(--color-neutral-100) !important;
  -webkit-backdrop-filter: none !important; backdrop-filter: none !important;
  border-radius: 24px !important;
  box-shadow: 0 26px 64px color-mix(in srgb, var(--v-deep) 16%, transparent),
    inset 0 0 0 1px color-mix(in srgb, var(--v-deep) 10%, transparent) !important; }
.qp-tag { background: var(--v) !important; color: var(--color-neutral-100) !important; border: 0; }
.quote-panel .step-lab { color: var(--ink) !important; }
.quote-panel .step-lab .n { background: var(--v-soft) !important; color: var(--v-deep) !important;
  border-color: transparent !important; font-weight: 700;
  box-shadow: 0 2px 8px color-mix(in srgb, var(--v) 40%, transparent); }
.quote-panel .step-lab .hint { color: var(--ink-55) !important; }
.quote-panel .qstep { background: none !important; border-left-color: var(--v-soft) !important; }

/* — les onglets de type de voyage —
   Le rayon reste à 16 px : la maquette finit à 999 px, mais chez elle ce sont
   des pastilles horizontales ; ici ce sont des fiches verticales, que 999 px
   transformerait en ovales. */
.tt { background: transparent !important; color: var(--ink-64) !important;
  -webkit-backdrop-filter: none !important; backdrop-filter: none !important;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--v-deep) 18%, transparent) !important; }
.tt:hover { background: var(--v-tint) !important; color: var(--v-deep) !important; transform: none !important; }
.tt[aria-selected="true"] { background: var(--v) !important; color: var(--color-neutral-100) !important;
  font-weight: 600; border-color: transparent !important;
  box-shadow: 0 6px 18px color-mix(in srgb, var(--v) 36%, transparent) !important; }
/* le violet plein marque déjà la sélection : la coche redevient superflue */
.tt[aria-selected="true"]::after { display: none; }
.tt .ic svg path[stroke], .tt .ic svg rect[stroke] { stroke: var(--v) !important; }
.tt[aria-selected="true"] .ic svg path[stroke],
.tt[aria-selected="true"] .ic svg rect[stroke] { stroke: var(--color-neutral-100) !important; }

/* — la barre de recherche : blanche, une seule bague, cellules séparées
     par un filet — */
.hero .search-bar { background: var(--color-neutral-100) !important; border: 0 !important;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--v-deep) 18%, transparent) !important; }
.hero .search-bar .sb-cell { background: transparent !important; box-shadow: none !important;
  border-right: 1px solid color-mix(in srgb, var(--v-deep) 12%, transparent) !important; }
.hero .search-bar .sb-cell:last-of-type { border-right: 0 !important; }
.hero .search-bar .sb-cell:focus-within { background: var(--v-tint) !important;
  box-shadow: inset 0 0 0 2px var(--v) !important; }
.hero .search-bar .sb-cell label { color: var(--ink-55) !important; }
.hero .search-bar .sb-cell input { color: var(--ink) !important; }
.hero .search-bar .sb-cell input::placeholder { color: var(--ink-55) !important; }

/* — le bouton qui convertit — */
.qp-submit { background: var(--v) !important; color: var(--color-neutral-100) !important;
  border: 0; border-radius: 999px !important; font-weight: 600;
  box-shadow: 0 10px 26px color-mix(in srgb, var(--v) 40%, transparent) !important; }
.qp-submit:hover { background: var(--v-hi) !important; color: var(--color-neutral-100) !important;
  border-color: transparent; }
.qp-submit:active { background: var(--v-hi) !important; }
.qp-micro b { color: var(--v-deep); font-weight: 600; }
.qp-micro::before { background: var(--v); }

/* — les logos d'autocaristes — */
.cr { background: var(--color-neutral-100) !important;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--v-deep) 10%, transparent) !important; }
.fchip { background: var(--v-tint) !important; color: var(--v-deep) !important;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--v) 26%, transparent) !important; }
.fchip strong { color: var(--v) !important; }

/* — les bandes sombres : un seul halo au lieu de trois — */
.stats, .band, .loyal { background: radial-gradient(900px 420px at 86% -30%,
  color-mix(in srgb, var(--v) 34%, transparent), transparent 62%), var(--v-deep) !important; }
.band .btn { background: var(--color-neutral-100) !important; color: var(--v-deep) !important;
  border: 0; border-radius: 999px !important; font-weight: 600; box-shadow: none; }
.band .btn:hover { background: color-mix(in srgb, var(--color-neutral-100) 88%, black) !important;
  color: var(--v-deep) !important; }

/* — la fidélité : le lime cède au lavande sur fond profond — */
.loyal .ly-kicker { color: var(--v-soft) !important; font-weight: 600; letter-spacing: 0.08em; }
.loyal .lv li::before { background: var(--v-soft) !important; }
.loyal .lv.is-top { box-shadow: inset 0 0 0 2px var(--v-soft) !important; }
.loyal .lv.is-top .lv-badge { background: var(--v-soft) !important; color: var(--v-deep) !important;
  border-color: var(--v-soft) !important; }
.lv { cursor: default;
  transition: transform .22s cubic-bezier(.34,1.3,.64,1), box-shadow .22s ease, background .22s ease; }
.lv:hover { transform: translateY(-6px);
  background: color-mix(in srgb, var(--color-neutral-100) 16%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--color-neutral-100) 38%, transparent),
    0 20px 46px color-mix(in srgb, black 30%, transparent); }
.lv.is-now:hover { background: color-mix(in srgb, var(--color-neutral-100) 22%, transparent);
  box-shadow: inset 0 0 0 2px var(--color-neutral-100),
    0 22px 52px color-mix(in srgb, black 34%, transparent); }
.lv li { transition: transform .22s ease; }
.lv:hover li:nth-child(1) { transform: translateX(3px); transition-delay: .02s; }
.lv:hover li:nth-child(2) { transform: translateX(3px); transition-delay: .06s; }
.lv:hover li:nth-child(3) { transform: translateX(3px); transition-delay: .10s; }
.lv li::before { transition: transform .22s ease, background .22s ease; }
.lv:hover li::before { transform: scale(1.12); }

/* — comment ça marche : les fiches d'étape — */
.step { border: 0; border-radius: 20px !important;
  box-shadow: 0 6px 22px color-mix(in srgb, var(--color-neutral-900) 8%, transparent),
    inset 0 0 0 1px color-mix(in srgb, var(--v) 14%, transparent); }
.step:hover { transform: translateY(-4px);
  box-shadow: 0 16px 38px color-mix(in srgb, var(--v) 16%, transparent),
    inset 0 0 0 1px color-mix(in srgb, var(--v) 34%, transparent); }
.st-n { background: var(--v); box-shadow: 0 3px 10px color-mix(in srgb, var(--v) 42%, transparent); }
.st-time { color: var(--v-deep); padding: 2px 11px;
  background: color-mix(in srgb, var(--color-neutral-100) 92%, transparent); }
.st-step { color: var(--v); letter-spacing: 0.07em; }
.st-title { letter-spacing: -0.014em; }
.st-ex { border-radius: 10px; padding: 6px 12px; color: var(--v-deep);
  background: color-mix(in srgb, var(--v) 8%, transparent); }
.step:nth-child(3) .st-ex { color: var(--flash-ink); background: var(--flash-tint); }
.ui { border-radius: 11px; }

/* — le comparateur — */
.offer { border-radius: 20px !important; }
.offers .btn-primary { background: var(--v) !important; color: var(--color-neutral-100) !important;
  border: 0; border-radius: 999px !important; font-weight: 600;
  box-shadow: 0 10px 26px color-mix(in srgb, var(--v) 40%, transparent); }
.offers .btn-primary:hover { background: var(--v-hi) !important;
  color: var(--color-neutral-100) !important; border-color: transparent; }

/* — les sur-titres de section — */
.features .kicker, .cmp .kicker, .faq .kicker { color: var(--v) !important;
  font-weight: 600; letter-spacing: 0.08em; }
.features .kicker::before, .cmp .kicker::before, .faq .kicker::before { display: none; }

/* — la graisse et le crénage du titrage (design 3 hérite du 2) —
   Les tailles restent celles du déployé : elles changent la boîte. */
.display { font-weight: 600 !important; letter-spacing: -0.032em !important; }
.hero .display, .hero-head .display { letter-spacing: -0.024em !important; }
h2, .split-title, .ly-title { letter-spacing: -0.026em; font-weight: 600; }

@media (prefers-reduced-motion: reduce) {
  .lv, .lv li, .lv li::before, .step { transition: none; }
  .lv:hover, .lv:hover li, .lv:hover li::before,
  .step:hover, .tt:hover { transform: none !important; }
}

/* — deux réglages après mesure du portage —

   `.tt .h` : le sous-titre de l'onglet de voyage. Design 3 le masque ; ici on
   le garde, mais l'onglet est devenu transparent sur un dégradé clair et ce
   texte y tombait à 2,01:1. Il reprend l'encre secondaire, et l'encre claire
   quand l'onglet est plein.
   `.kicker` : le sur-titre passé en violet vif s'arrête à 4,49:1 — un
   centième sous le seuil. L'échelon foncé le passe. */
/* sur le degrade violet du hero, l encre a 70 % donne 3,95:1 ; celle a 74 % passe */
.tt .h { color: var(--ink-78); }
.tt[aria-selected="true"] .h { color: color-mix(in srgb, var(--color-neutral-100) 82%, transparent); }
.features .kicker, .cmp .kicker, .faq .kicker,
.routes .kicker, .season .kicker { color: var(--v-hi) !important; }

/* ══════════════════════════════════════════════════════════════════════════
   FASE 19 — les blocs de design 3 qui manquaient (portage du balisage)
   La maquette empile trois itérations : base, design 2, design 3. Ici les
   règles sont FUSIONNÉES à leur valeur finale — une seule définition par
   sélecteur, pas d'!important en cascade sur soi-même.
   Les variables --blue / --teal / --deep / --rose-tint n'existent pas ici :
   elles sont traduites en --v / --v-soft / --v-deep / --v-tint, ce que la
   maquette elle-même fait dix lignes plus bas dans sa propre feuille.
   ══════════════════════════════════════════════════════════════════════════ */

/* header.css:62-70 estila .nav-brand como texto y no declara display :
   sin esta ligne le logo ne peut pas s'aligner sur la ligne de base. */
.nav-brand, .brand, .f-b { display: inline-flex; align-items: baseline; }
.brand-link { display: inline-flex; }

/* — la marque : « beand » en image, « bus » en dégradé violet souligné — */
.brand-logo { display: inline-flex; align-items: flex-end; gap: 2px; line-height: 1; }
.brand-logo img { display: block; height: 30px; width: auto; }
.brand-bus { position: relative; font-family: var(--font-heading); font-weight: 800;
  font-size: 25px; line-height: 1; letter-spacing: -0.03em; padding-bottom: 3px;
  background: linear-gradient(92deg, oklch(0.545 0.165 250), oklch(0.500 0.170 252));
  -webkit-background-clip: text; background-clip: text; color: transparent; }
.brand-bus::after { content: ""; position: absolute; left: 1px; right: 1px; bottom: 0; height: 2.5px;
  border-radius: 2px; background: linear-gradient(92deg, oklch(0.500 0.170 252), oklch(0.715 0.110 248)); }
@media (max-width: 560px) { .brand-logo img { height: 25px; } .brand-bus { font-size: 21px; } }

/* la nav se replie par degrés : marque et CTA ne cèdent jamais */
.nav { flex-wrap: nowrap; }
.nav .nav-brand, .nav .brand-logo, .nav .btn, .nav a.cta { flex: none; }
/* $= (finit par) et pas = (exact) : sur la fiche les liens sont « index.html#comparateur »
   et non « #comparateur » — avec l'égalité stricte ils ne se repliaient pas et le CTA
   « Demander mes devis » débordait entre ~820 et ~1024 px. */
@media (max-width: 1080px) { .nav a[href$="#saison"], .nav a[href$="#trajets"] { display: none; } }
@media (max-width: 960px) { .nav a[href$="#comparateur"], .nav a[href$="#fidelite"] { display: none; } }
@media (max-width: 820px) { .nav a[href$="annuaire.html"], .nav a[href$="#fonctionnement"] { display: none; } }

/* — accroche du panneau de devis — */
.qp-pitch { position: relative; overflow: hidden;
  padding: calc(var(--space-8) + var(--space-3)) calc(var(--space-8) + var(--space-3))
    calc(var(--space-8) + var(--space-4)); margin: 0 0 var(--space-8); border-radius: 18px;
  background: linear-gradient(135deg, color-mix(in srgb, var(--v) 13%, var(--color-neutral-100)),
    color-mix(in srgb, var(--v-tint) 70%, var(--color-neutral-100)) 62%, var(--color-neutral-100));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--v) 18%, transparent); }
.qp-pitch::after { content: ""; position: absolute; right: -20px; top: -20px; width: 150px; height: 150px;
  border-radius: 50%; background: radial-gradient(circle, color-mix(in srgb, var(--v) 20%, transparent), transparent 68%); }
.qp-who { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin: 0 0 var(--space-6); }
.qp-who b { margin-right: 3px; font-size: 13px; line-height: 20px; font-weight: 600; color: var(--v-deep); }
.qp-who span { font-size: 10.5px; line-height: 18px; letter-spacing: 0.08em; text-transform: uppercase;
  font-weight: 700; padding: 3px 12px; border-radius: 999px; color: var(--color-neutral-100);
  background: var(--v); }
.qp-who span:nth-child(2) { background: var(--v-hi); }
.qp-who span:nth-child(3) { background: color-mix(in srgb, var(--v) 84%, black); }
.qp-who span:nth-child(4) { background: color-mix(in srgb, var(--v-hi) 82%, black); }
.qp-say { position: relative; font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: clamp(22px, 2.6vw, 29px); line-height: 1.34; letter-spacing: -0.02em;
  margin: 0; color: var(--ink); text-wrap: balance; }
.qp-say2 { display: inline-block; margin-top: 6px; color: var(--v-deep); }
.qp-say2 b { font-weight: inherit; color: var(--v);
  background: linear-gradient(to top, color-mix(in srgb, var(--v) 20%, transparent) 36%, transparent 36%);
  padding: 0 3px; border-radius: 4px; }
.qp-say em { font-style: normal; white-space: nowrap; color: var(--v-deep);
  padding: 0 3px; border-radius: 4px;
  background: linear-gradient(to top, color-mix(in srgb, var(--v) 22%, transparent) 34%, transparent 34%); }
.qp-free { position: relative; display: inline-flex; align-items: center; gap: 7px;
  margin: var(--space-6) 0 0; font-size: 12px; line-height: 20px; font-weight: 700;
  letter-spacing: 0.03em; text-transform: uppercase; padding: 4px 14px 4px 5px; border-radius: 999px;
  color: var(--ok); background: color-mix(in srgb, var(--ok-tint) 80%, var(--color-neutral-100)); }
.qp-free::before { content: "\2713"; flex: none; width: 18px; height: 18px; border-radius: 50%;
  display: grid; place-items: center; font-size: 10px; background: var(--ok); color: var(--color-neutral-100); }
@media (max-width: 640px) {
  .qp-pitch { padding: var(--space-8) var(--space-8) calc(var(--space-8) + var(--space-3)); }
  .qp-say { font-size: 20px; line-height: 1.3; }
  .qp-say br { display: none; } }

/* — logos partenaires : défilement un par un dans l'espace libre de l'accroche — */
.qp-part { position: absolute; right: 0; top: 0; bottom: 0; z-index: 2;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px;
  width: 340px; padding: 0 calc(var(--space-8) + var(--space-3)) 0 var(--space-8);
  border-left: 1px solid color-mix(in srgb, var(--v) 14%, transparent);
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--v) 7%, transparent)); }
.qp-pitch .qp-who, .qp-pitch .qp-say, .qp-pitch .qp-free { max-width: calc(100% - 348px); }
.qp-part-l { font-size: 11.5px; line-height: 17px; letter-spacing: 0.09em; text-transform: uppercase;
  font-weight: 700; color: color-mix(in srgb, var(--v) 62%, transparent); }
.qp-part-stage { position: relative; width: 100%; height: 128px; border-radius: 18px;
  background: var(--color-neutral-100);
  box-shadow: 0 4px 16px color-mix(in srgb, var(--color-neutral-900) 7%, transparent),
    inset 0 0 0 1px color-mix(in srgb, var(--v) 14%, transparent); overflow: hidden; }
.qp-p { position: absolute; inset: 0; display: grid; place-items: center; padding: 16px 22px;
  opacity: 0; transform: translateY(9px);
  transition: opacity .45s ease, transform .55s cubic-bezier(.34,1.3,.64,1); }
.qp-p.on { opacity: 1; transform: none; }
.qp-p img { max-width: 100%; max-height: 92px; width: auto; object-fit: contain;
  mix-blend-mode: multiply; border-radius: 8px; }
.qp-p .ini { font-family: var(--font-heading); font-weight: 700; font-size: 22px;
  letter-spacing: 0.03em; color: var(--v-deep); text-align: center; }
@media (prefers-reduced-motion: reduce) { .qp-p { transition: opacity .2s linear; transform: none; } }
@media (max-width: 1100px) {
  .qp-part { display: none; }
  .qp-pitch .qp-who, .qp-pitch .qp-say, .qp-pitch .qp-free { max-width: none; } }

/* — options du hero et garantie — */
.hero-opts { display: flex; gap: var(--space-4); flex-wrap: wrap; margin-top: var(--space-3); }
.ho { display: inline-flex; align-items: center; gap: 8px; cursor: pointer;
  font-size: 12.5px; line-height: 19px; color: var(--ink-64); }
.ho input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.hb { flex: none; width: 16px; height: 16px; border-radius: 4px; display: grid; place-items: center;
  font-size: 9px; font-weight: 700; color: transparent;
  box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--v-deep) 24%, transparent); }
.ho input:checked + .hb { background: var(--v); color: var(--color-neutral-100); box-shadow: none; }
.ho input:focus-visible + .hb { outline: 2px solid var(--v); outline-offset: 2px; }
.warranty { display: flex; align-items: center; justify-content: center;
  gap: var(--space-3) var(--space-4); flex-wrap: wrap;
  margin-top: var(--space-4); padding: 12px 16px; border-radius: 999px;
  background: var(--v-tint); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--v) 24%, transparent); }
.warranty .wi { flex: none; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center;
  background: var(--v); color: var(--color-neutral-100); font-size: 14px; font-weight: 700; }
.warranty p { flex: 1 1 300px; font-size: 13px; line-height: 20px; margin: 0; color: var(--v-deep); }
.warranty p b { font-weight: 600; }
.warranty .wsep { width: 1px; align-self: stretch; background: color-mix(in srgb, var(--v) 26%, transparent); }
@media (max-width: 700px) { .warranty .wsep { display: none; } }
.hero-head .display .line-alt { color: var(--v); }

/* — confiance : les organisations clientes — */
.tr-head { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  gap: var(--space-4) clamp(28px, 5vw, 72px); align-items: end; margin-bottom: calc(1.5 * var(--leading)); }
.tr-kicker { display: inline-flex; align-items: center; gap: 8px; margin: 0 0 10px;
  font-size: 11.5px; line-height: 18px; letter-spacing: 0.08em; text-transform: uppercase;
  font-weight: 700; color: var(--v-hi); }
.tr-live { flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--v);
  animation: rq-pulse 2.4s ease-out infinite; }
.tr-h { font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: clamp(26px, 3.2vw, 38px); line-height: 1.14; letter-spacing: -0.022em; margin: 0; }
.tr-h b { color: var(--v); font-weight: inherit; font-feature-settings: "tnum" 1; }
.tr-note { font-size: 14.5px; line-height: 23px; margin: 0; max-width: 44ch; color: var(--ink-64); }
.tr-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: var(--space-3); }
.oc { display: grid; grid-template-columns: 42px minmax(0, 1fr); gap: 12px; align-items: center;
  padding: 13px 15px; border-radius: 16px; background: var(--color-neutral-100);
  box-shadow: 0 4px 18px color-mix(in srgb, var(--color-neutral-900) 7%, transparent),
    inset 0 0 0 1px color-mix(in srgb, var(--color-neutral-900) 8%, transparent);
  transition: transform .14s ease, box-shadow .14s ease; }
.oc:hover { transform: translateY(-2px);
  box-shadow: 0 12px 28px color-mix(in srgb, var(--color-neutral-900) 11%, transparent),
    inset 0 0 0 1px color-mix(in srgb, var(--v) 40%, transparent); }
@media (prefers-reduced-motion: reduce) { .oc { transition: none; } .oc:hover { transform: none; } }
.oc-i { width: 42px; height: 42px; border-radius: 13px; display: grid; place-items: center;
  font-family: var(--font-heading); font-weight: 700; font-size: 12.5px; letter-spacing: 0.02em;
  color: var(--color-neutral-100); background: var(--v); }
.oc:nth-child(2n) .oc-i { background: var(--v-hi); }
.oc:nth-child(3n) .oc-i { background: color-mix(in srgb, var(--v) 82%, black); }
.oc-t { min-width: 0; }
.oc-t b { display: block; font-size: 14px; line-height: 21px; font-weight: 600; text-wrap: pretty; }
.oc-t span { font-size: 12px; line-height: 18px; color: var(--ink-64); }
.oc-n { grid-column: 2; justify-self: start; margin-top: 6px; flex: none;
  font-size: 11.5px; line-height: 18px; font-weight: 600; padding: 2px 10px;
  border-radius: 999px; white-space: nowrap; color: var(--v-deep); background: var(--v-tint);
  font-feature-settings: "tnum" 1; }
.tr-foot { margin: calc(1.5 * var(--leading)) 0 0; font-size: 13px; line-height: 20px;
  color: var(--ink-64); font-feature-settings: "tnum" 1; }
.tr-foot b { color: var(--v-deep); font-weight: 600; }
@media (max-width: 900px) { .tr-head { grid-template-columns: 1fr; } }

/* — saisonnalité : l'histogramme des prix par mois — */
.season { padding: calc(2 * var(--leading)) 0; }
.season-in { padding: var(--space-6) clamp(20px, 4vw, 44px) var(--space-4); border-radius: 26px;
  background: var(--v-tint); }
.season h2 { font-size: clamp(22px, 2.4vw, 28px); line-height: 1.18; margin: 0 0 6px; }
.season .sub { font-size: 14.5px; line-height: 22px; color: var(--ink-64);
  margin: 0 0 var(--leading); max-width: 56ch; }
.bars { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 6px; align-items: end;
  height: 168px; }
.bar { position: relative; display: flex; flex-direction: column; justify-content: flex-end;
  height: 100%; text-align: center; }
.bar i { display: block; border-radius: 8px 8px 3px 3px;
  background: color-mix(in srgb, var(--v) 24%, transparent); transition: background .16s ease; }
.bar.low i { background: var(--v-soft); }
.bar.high i { background: var(--v); }
.bar:hover i { background: var(--v-hi); }
.bar b { display: block; font-size: 10.5px; line-height: 16px; margin-bottom: 5px;
  font-feature-settings: "tnum" 1; color: var(--ink-64); }
.bar span { display: block; font-size: 10.5px; line-height: 16px; margin-top: 6px; color: var(--ink-55);
  text-transform: uppercase; letter-spacing: 0.04em; }
.bar.low b { color: var(--ink); font-weight: 600; }
.season .legend { display: flex; align-items: center; gap: var(--space-4); flex-wrap: wrap;
  margin-top: var(--leading); font-size: 12.5px; line-height: 19px; color: var(--ink-64); }
.season .legend span { display: inline-flex; align-items: center; gap: 7px; }
.season .legend i { width: 11px; height: 11px; border-radius: 3px; }
/* les valeurs « 3,0 k » ne se plient jamais : à 375 px chaque barre fait ~26 px et le libellé
   se cassait en « 3,0 / k » sur deux lignes, en s'empilant sur le voisin. */
.bar b { white-space: nowrap; }
@media (max-width: 420px) { .bar span { font-size: 8px; letter-spacing: 0; } }
@media (max-width: 760px) { .bars { height: 130px; gap: 3px; } .bar span { font-size: 9px; }
  .bar b { font-size: 9px; letter-spacing: -0.02em; } }

/* — trajets courants, avec prix indicatif — */
.routes { padding: calc(2.5 * var(--leading)) 0 var(--leading); text-align: center; }
.routes .kicker::before { display: none; }
.routes h2 { font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: clamp(24px, 2.8vw, 32px); line-height: 1.16; letter-spacing: -0.018em;
  margin: 0 0 var(--space-3); }
.routes .lead { font-size: 15.5px; line-height: 24px; color: var(--ink-64);
  margin: 0 auto calc(1.5 * var(--leading)); max-width: 54ch; }
.rt-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(212px, 1fr));
  gap: var(--space-3); text-align: left; }
.rt { position: relative; border-radius: 20px; overflow: hidden; background: var(--color-neutral-100);
  box-shadow: 0 6px 22px color-mix(in srgb, var(--color-neutral-900) 8%, transparent),
    inset 0 0 0 1px color-mix(in srgb, var(--color-neutral-900) 8%, transparent);
  transition: transform .16s ease, box-shadow .16s ease; }
.rt:hover { transform: translateY(-3px);
  box-shadow: 0 16px 36px color-mix(in srgb, var(--color-neutral-900) 13%, transparent),
    inset 0 0 0 1px color-mix(in srgb, var(--v) 42%, transparent); }
@media (prefers-reduced-motion: reduce) { .rt { transition: none; } .rt:hover { transform: none; } }
.rt-img { position: relative; margin: 0; aspect-ratio: 16 / 10; overflow: hidden;
  background: color-mix(in srgb, var(--color-neutral-900) 5%, transparent); }
.rt-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.rt-tag { position: absolute; left: 8px; top: 8px; font-size: 10.5px; line-height: 17px; padding: 1px 8px;
  border-radius: 999px; font-weight: 600; background: var(--flash); color: var(--flash-ink); }
.rt-b { padding: 12px 14px 14px; }
.rt-n { font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: 15.5px; line-height: 21px; margin: 0; letter-spacing: -0.008em; }
.rt-m { font-size: 12px; line-height: 18px; margin: 3px 0 0; color: var(--ink-55);
  font-feature-settings: "tnum" 1; }
.rt-p { display: flex; align-items: baseline; gap: 6px; margin: 10px 0 0; }
.rt-p b { font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: 19px; line-height: 25px; letter-spacing: -0.016em; font-feature-settings: "tnum" 1;
  color: var(--v-deep);
  /* un prix ne se coupe jamais : « dès 2 950 € » se pliait en « dès 2 / 950 € » dès que la
     carte se resserrait (cinq par rangée sur desktop). Le « soit … / passager » à côté
     peut passer à la ligne, pas le montant. */
  white-space: nowrap; }
.rt-p span { font-size: 11.5px; line-height: 17px; color: var(--ink-55); }
.rt-go { display: block; margin-top: 10px; font-size: 12.5px; line-height: 19px; font-weight: 500;
  color: var(--v-hi); }
.routes .fine { font-size: 12px; line-height: 18px; color: var(--ink-55); margin: var(--leading) 0 0; }

/* — en-tête de section du comparateur — */
.cmp-h { font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: clamp(28px, 3.4vw, 40px); line-height: 1.14; letter-spacing: -0.024em;
  margin: 0 auto; max-width: 22ch; text-align: center; text-wrap: balance; color: var(--ink); }
.cmp-h em { font-style: normal; color: var(--v-hi);
  background: linear-gradient(to top, color-mix(in srgb, var(--v) 18%, transparent) 30%, transparent 30%);
  padding: 0 4px; border-radius: 5px; }

/* — cartes de niveau : le rail, le chiffre et l'état —
   Le survol, les transitions et le décalage des `li` sont déjà plus haut
   dans cette feuille : on ne redéfinit ici que ce qui manque. */
.lv { position: relative; border-radius: 20px; overflow: hidden; box-sizing: border-box;
  height: 100%; justify-content: flex-start; align-items: stretch; gap: 0;
  padding: calc(var(--space-8) + var(--space-3)) calc(var(--space-8) + var(--space-3))
    calc(var(--space-8) + var(--space-4)); }
.lv > * { flex: none; }
.lv::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px;
  background: color-mix(in srgb, var(--color-neutral-100) 22%, transparent);
  transition: filter .22s ease; }
.lv.is-done::before { background: color-mix(in srgb, var(--color-neutral-100) 55%, transparent); }
.lv.is-now::before { background: var(--color-neutral-100); }
.lv.is-top::before { background: linear-gradient(90deg,
  color-mix(in srgb, var(--color-neutral-100) 40%, transparent), transparent); }
.lv:hover::before { filter: brightness(1.6); }
.lv-top { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap;
  margin: 0 0 var(--space-8); }
.lv-badge { align-self: auto; }
.lv-state { margin-left: auto; white-space: nowrap; font-size: 11.5px; line-height: 18px;
  font-weight: 600; font-feature-settings: "tnum" 1;
  color: color-mix(in srgb, var(--color-neutral-100) 62%, transparent); }
.lv.is-done .lv-state { display: inline-flex; align-items: center; gap: 5px; }
.lv.is-done .lv-state::before { content: "\2713"; width: 15px; height: 15px; border-radius: 50%;
  display: grid; place-items: center; font-size: 9px;
  background: color-mix(in srgb, var(--color-neutral-100) 26%, transparent);
  color: var(--color-neutral-100); }
.lv.is-now .lv-state { color: var(--color-neutral-100); }
.lv-fig { display: flex; align-items: baseline; gap: 8px; margin: 0 0 4px; }
.lv-fig b { font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: 34px; line-height: 1; letter-spacing: -0.026em; font-feature-settings: "tnum" 1;
  color: color-mix(in srgb, var(--color-neutral-100) 82%, transparent);
  transition: transform .22s cubic-bezier(.34,1.4,.64,1); transform-origin: left bottom; }
.lv.is-now .lv-fig b, .lv.is-top .lv-fig b { color: var(--color-neutral-100); }
.lv:hover .lv-fig b { transform: scale(1.07); }
.lv-fig i { font-style: normal; font-size: 12px; line-height: 17px;
  color: color-mix(in srgb, var(--color-neutral-100) 60%, transparent); }
.lv h3 { margin: 10px 0 0; }
.lv ul { margin-top: var(--space-8); padding-top: var(--space-6);
  border-top: 1px solid color-mix(in srgb, var(--color-neutral-100) 16%, transparent); }
.lv li { line-height: 22px; }
.lv .li-t { min-width: 0; text-wrap: pretty; }
.lv li strong { white-space: nowrap; }
@media (max-width: 1080px) { .lv-fig b { font-size: 30px; } }
@media (max-width: 640px) {
  .lv { padding: var(--space-8) var(--space-8) calc(var(--space-8) + var(--space-3)); } }
@media (prefers-reduced-motion: reduce) {
  .lv::before, .lv-fig b { transition: none; }
  .lv:hover .lv-fig b { transform: none; } }

/* ══════════════════════════════════════════════════════════════════════════
   FASE 20 — le header aligné sur la maquette
   Ces trois règles vivaient dans annuaire.css et fiche-autocariste.css, que
   ni l'accueil ni le formulaire ne chargent : le CTA y sortait en texte nu.
   ══════════════════════════════════════════════════════════════════════════ */

/* le CTA de la nav est une pastille bordée, pas un lien */
.nav .cta { font-weight: 500; border-radius: 11px; color: var(--v);
  border: 1px solid color-mix(in srgb, var(--v) 42%, transparent); }
.nav .cta:hover { background: var(--v-tint); }

/* Le padding latéral et la hauteur, ensemble : `header.css:99` remet
   padding-inline à 0 sur `.nav > .cta` (0-2-0), et `header.css:73` fixe
   height:34px sur `.nav > a`. On garde une hauteur fixe — la lâcher en `auto`
   fait retomber les deux boutons à 30px, plus bas qu'avant. */
.nav > a.cta { padding-inline: 15px; height: 36px; }
.nav > .btn, .nav > .btn-primary { padding-inline: 16px; height: 36px; font-size: 14px; }

/* garde contre blocks.css:362 : le bandeau de service ne s'arrondit pas.
   Acotée à `body >` — sur la fiche, .topbar est la barre blanche de #fixhead. */
body > .topbar { border-radius: 0; }

/* ══════════════════════════════════════════════════════════════════════════
   FASE 21 — le hero de design 3 : le titre
   La fase 17 avait porté le crénage du titre (blocks.css:718) mais PAS sa
   taille : le déployé gardait le clamp(38px, 4.6vw, 62px) du design
   précédent là où la maquette donne clamp(27px, 3vw, 38px).
   Et `.hero-head` restait la grille à deux colonnes du layout d'avant —
   texte à gauche, iframe YouTube à droite. L'iframe est parti en fase 19 :
   le titre se retrouvait enfermé dans 454px, la seconde colonne vide.
   ══════════════════════════════════════════════════════════════════════════ */

.hero { padding-top: calc(var(--leading) + 8px); padding-bottom: calc(1.5 * var(--leading)); }
.hero-head { display: block; text-align: left; position: relative; z-index: 2;
  max-width: 100%; margin-bottom: calc(var(--space-6) + 12px); }
.hero-head .display { margin-left: -0.03em; color: var(--ink); }
.hero .display, .hero-head .display { font-size: clamp(27px, 3vw, 38px);
  line-height: 1.16; margin-bottom: 0;
  /* le design system rogne le blanc vertical du titre (text-box: trim-both) ;
     la maquette le remet à normal — sans ça la boîte tombe de 44px à 28px et
     le titre colle à ce qui suit. */
  text-box: normal; }

/* — le panneau de devis : respiration latérale de design 3 — */
.quote-panel { padding: var(--space-6) clamp(20px, 3vw, 36px) var(--space-6);
  margin-top: calc(var(--leading) + 6px); }

/* — les onglets de voyage passent en ligne : 45px de haut au lieu de 100 —
   Design 3 masque le sous-titre : en `row` il ne tient pas à côté du libellé.
   (La règle de contraste `.tt .h` plus haut devient sans objet, elle reste
   inoffensive si un jour on remet le sous-titre.) */
.tt { padding: 7px 14px; flex-direction: row; gap: 7px; }
.tt .h { display: none; }

/* — le bouton entre dans la barre de recherche, comme une cellule de plus — */
.search-bar .qp-submit { display: flex; align-items: center; justify-content: center;
  border-radius: 0; box-shadow: none; margin: 0; width: auto; flex: none;
  align-self: stretch; padding: 0 30px; }
@media (max-width: 720px) {
  .search-bar .qp-submit { width: 100%; padding: 15px; align-self: auto; } }

/* ═════════════════════════════════════════════════════════════════════════
   PREMIUM · la nappe de lumière de fenêtre
   Deux trames obliques croisées, fondues par un masque radial. C'est la
   signature visuelle de la direction premium et la seule chose vraiment
   nouvelle du portage — elle n'existait dans aucune des quatorze feuilles.
   Elle vit ici plutôt que dans chaque feuille de page : une seule définition
   pour les dix pages, et un seul endroit à corriger.
   ═════════════════════════════════════════════════════════════════════════ */
/* 1.85.1 : la nappe rayée (body::before, 720 px) retirée — Julián, 14-10 : « un gris medio raro arriba »,
   présent sur ces sept pages seulement. Fond blanc uni partout, comme l'accueil. */

/* ═════════════════════════════════════════════════════════════════════════
   PREMIUM · les blocs neufs de l'accueil
   Extrait de `Beandbus premium/export-premium/css/accueil.css` : les 48 règles
   qui portent `.hero-grid`, `.floats`, `.logo-wall` et `.tr-rows`, leurs quatre
   `@keyframes` et leurs six `@media` — dont les deux `prefers-reduced-motion`,
   qui arrêtent les défilements.
   ═════════════════════════════════════════════════════════════════════════ */
.hero-grid { display: block; }
.hero-l { min-width: 0; }
.qp-main { min-width: 0; display: flex; flex-direction: column; }
.logo-wall { align-self: stretch; overflow: hidden; }
.qp-main > .qp-micro { margin-top: auto; }
.logo-wall { position: relative; display: flex; flex-direction: column; min-height: 0;
  padding-left: var(--space-6);
  border-left: 1px solid color-mix(in srgb, var(--color-accent-400) 42%, transparent); }
.lw-lab { display: flex; align-items: center; gap: 8px; margin: 0 0 12px; flex: none;
  font-size: 12px; line-height: 18px; letter-spacing: 0.05em; text-transform: uppercase;
  color: var(--ink-55); }
.lw-lab b { color: var(--ink); font-weight: 600; letter-spacing: 0.03em; }
.lw-lab::before { content: ""; width: 7px; height: 7px; border-radius: 50%; flex: none;
  background: var(--ok); animation: lw-beat 2.6s ease-in-out infinite; }
.lw-rail { position: relative; flex: 1 1 auto; min-height: 0; height: 0; overflow: hidden;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px;
  -webkit-mask-image: linear-gradient(to bottom, transparent, black 46px, black calc(100% - 46px), transparent);
  mask-image: linear-gradient(to bottom, transparent, black 46px, black calc(100% - 46px), transparent); }
.lw-col { position: relative; overflow: hidden; }
.lw-track { display: flex; flex-direction: column; gap: 8px;
  animation: lw-down 46s linear infinite; will-change: transform; }
.lw-col.up .lw-track { animation-name: lw-up; animation-duration: 54s; }
.lw-rail:hover .lw-track { animation-play-state: paused; }
.lt { position: relative; margin: 0; flex: none; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 2px; aspect-ratio: 3 / 2; padding: 10px 8px;
  border-radius: 12px; overflow: hidden; background: var(--color-neutral-100);
  box-shadow: 0 2px 7px color-mix(in srgb, var(--color-neutral-900) 9%, transparent),
    inset 0 0 0 1px color-mix(in srgb, var(--color-neutral-900) 6%, transparent); }
.lt img { max-width: 100%; max-height: 100%; width: auto; object-fit: contain; display: block;
  transition: transform 0.32s cubic-bezier(0.22, 1, 0.36, 1); }
.lt.on-light img { mix-blend-mode: multiply; }
.lt:hover img { transform: scale(1.06); }
.lt.is-slot { background: color-mix(in srgb, var(--blue) 6%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--blue) 26%, transparent); }
/* Les tuiles sont des liens depuis que le mur s'hydrate du catalogue :
   chaque logo mène à sa fiche. */
a.lt { text-decoration: none; color: inherit; }
a.lt:hover { box-shadow: 0 4px 12px color-mix(in srgb, var(--color-neutral-900) 13%, transparent),
  inset 0 0 0 1px color-mix(in srgb, var(--blue) 34%, transparent); }
.lt.is-name b { font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: 17px; line-height: 22px; color: var(--blue-hi); letter-spacing: 0.02em; }
.lt.is-name span { font-size: 10.5px; line-height: 14px; color: var(--ink-55);
  text-align: center; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
.lw-foot { flex: none; margin: 12px 0 0; font-size: 11.5px; line-height: 17px; color: var(--ink-55); }
.lw-foot b { color: var(--ink); font-weight: 600; font-feature-settings: "tnum" 1; }
.lw-foot a { color: var(--blue); text-decoration: underline; text-underline-offset: 3px; }
.fl-a { right: 14px; top: -18px; }
.fl-b { right: 14px; top: 96px; flex-direction: column; align-items: flex-start; gap: 4px; animation-delay: 1.4s; }
.fl-c { right: 14px; bottom: -22px; max-width: 244px; align-items: flex-start; animation-delay: 2.6s; }
.fl-ic { flex: none; width: 32px; height: 32px; border-radius: 11px; display: grid; place-items: center;
  font-size: 14px; background: var(--sky-tint); color: var(--blue); }
.fl-k { font-size: 10.5px; line-height: 16px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-55); }
.fl b.fl-v { font-size: 21px; line-height: 27px; color: var(--ok); letter-spacing: -0.018em; }
.fl-spark { width: 100px; height: 28px; }
.fl-av { flex: none; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center;
  font-family: var(--font-heading); font-weight: var(--font-heading-weight); font-size: 11px;
  background: var(--color-section); color: var(--color-neutral-100); }
.fl-q { font-size: 11.5px; line-height: 17px; margin: 0; color: var(--ink-78); }
.fl-w { font-size: 10.5px; line-height: 16px; color: var(--ink-55); }
.fl-w b { display: inline; font-size: 9px; color: var(--flash-deep); letter-spacing: 1px; }
.fl-ic { background: var(--rose-tint) !important; color: var(--blue) !important; }
/* 6. les cartes flottantes n'ont plus de gouttière sur ce design : elles sont retirées */
.floats { display: none !important; }
body .hero .sb-go { flex: none; display: inline-flex; align-items: center; justify-content: center;
  padding: 0 clamp(20px, 2.4vw, 34px); background: var(--blue); color: var(--color-neutral-100);
  font-family: var(--font-heading); font-weight: 600; font-size: 16.5px; letter-spacing: -0.01em;
  white-space: nowrap; text-decoration: none; transition: background 0.2s ease; }
body .hero .sb-go span { margin-left: 9px; }
body .hero .sb-go:hover { background: var(--blue-hi); color: var(--color-neutral-100); }
body .hero .sb-go:focus-visible { outline: 2px solid var(--color-neutral-100); outline-offset: -5px; }
body .hero .logo-wall { border-left-color: color-mix(in srgb, var(--blue) 22%, transparent) !important; }
body .hero .lw-lab b { color: var(--blue-hi) !important; }
body .tr-rows { display: flex; flex-direction: column; gap: var(--space-3);
  -webkit-mask-image: linear-gradient(to right, transparent, black 48px, black calc(100% - 48px), transparent);
  mask-image: linear-gradient(to right, transparent, black 48px, black calc(100% - 48px), transparent); }
body .tr-row { overflow: hidden; }
body .tr-track { display: flex; gap: var(--space-3); width: max-content;
  animation: tr-slide 72s linear infinite; will-change: transform; }
body .tr-track { animation-duration: 88s; }
body .tr-rows:hover .tr-track { animation-play-state: paused; }
body .tr-track .oc { flex: none; width: 320px; }
body .tr-track .oc:has(.is-logo) { width: 340px; }

@keyframes lw-beat { 0%, 100% { box-shadow: 0 0 0 3px color-mix(in srgb, var(--ok) 24%, transparent); }
  50% { box-shadow: 0 0 0 7px color-mix(in srgb, var(--ok) 8%, transparent); } }
@keyframes lw-down { from { transform: translateY(-50%); } to { transform: translateY(0); } }
@keyframes lw-up { from { transform: translateY(0); } to { transform: translateY(-50%); } }
@keyframes tr-slide { from { transform: translateX(0); } to { transform: translateX(-50%); } }

@media (prefers-reduced-motion: reduce) {
  .lw-track, .lw-lab::before { animation: none; }
}
@media (max-width: 1200px) {
  .hero-grid { grid-template-columns: minmax(0, 1fr); }
  .logo-wall { padding-left: 0; padding-top: var(--space-4); border-left: 0;
    border-top: 1px solid color-mix(in srgb, var(--color-accent-400) 42%, transparent); }
  .lw-rail { min-height: 0; height: 216px; grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .lt, .lt.is-name, .lt.is-slot { aspect-ratio: auto !important; height: 62px; padding: 8px 10px; }
}
@media (max-width: 620px) {
  .lw-rail { grid-template-columns: repeat(2, minmax(0, 1fr)); height: 210px; }
}
@media (max-width: 1100px) {
  .floats { display: none; }
}
@media (max-width: 900px) {
  body .hero .sb-go { width: 100%; padding: 15px 0; }
}
@media (prefers-reduced-motion: reduce) {
  body .tr-track { animation: none; }
}

/* Le panneau devient la grille à deux colonnes de la maquette : le formulaire
   à gauche, le mur de logos à droite, tous deux étirés à la même hauteur.
   Sans cette règle le rail du mur retombe à zéro : il est en `flex: 1 1 auto;
   height: 0` et n'a de hauteur que celle que la colonne lui donne. */
.quote-panel { display: grid; grid-template-columns: minmax(0, 1fr) clamp(230px, 21vw, 310px);
  gap: var(--space-6); align-items: stretch; }
@media (max-width: 1200px) { .quote-panel { grid-template-columns: minmax(0, 1fr); } }

/* ═════════════════════════════════════════════════════════════════════════
   PREMIUM · finition des trois consoles
   Le bloc est IDENTIQUE au md5 près dans les trois feuilles de l'export
   (a92d4226…) : il vit ici une seule fois pour les trois.

   Trois retraits délibérés par rapport à l'export :
   · son `body::before` (560px) — le nôtre est plus haut dans ce fichier, en
     z-index négatif, et couvre les dix pages.
   · `body .top, .shell, .side, footer { position: relative }` — cette ligne
     casse le `sticky` de `.top` dans les trois consoles. Notre voile est en
     z-index négatif : il n'a besoin de remonter personne.
   · rien d'autre. Le fond à halos, lui, s'applique aux dix pages : c'est la
     même grammaire que l'accueil premium.
   ═════════════════════════════════════════════════════════════════════════ */
/* — finition premium : même grammaire que l'accueil, l'annuaire et la fiche — */
/* 1.85.1 : les deux halos retirés (même raison) — le blanc uni de l'accueil */
body { background: var(--color-neutral-100) !important; }

/* champs

   La liste enumere les types AUXQUELS le standard s'applique, plutot que ceux
   qu'il exclut : un selecteur par exclusion (`:not`) tomberait a une specificite
   plus basse et reveillerait les regles de classe qui perdent aujourd'hui
   (`.sb-cell input`, `.sc input`). On garde donc 0,1,2 exact — et on complete
   la liste, qui oubliait `time`, `search`, `password` et `url`. */
body .input, body input[type="text"], body input[type="email"], body input[type="tel"],
body input[type="date"], body input[type="number"], body input[type="time"],
body input[type="search"], body input[type="password"], body input[type="url"],
body input[type="datetime-local"], body input[type="month"], body input[type="week"],
body textarea, body select {
  border: 0; background: color-mix(in srgb, var(--blue) 4%, var(--color-neutral-100));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--blue) 15%, transparent); }
body .input:focus, body input:focus, body textarea:focus, body select:focus { outline: none;
  background: var(--color-neutral-100);
  box-shadow: inset 0 0 0 2px var(--blue), 0 4px 14px color-mix(in srgb, var(--blue) 18%, transparent); }
body input::placeholder, body textarea::placeholder { color: color-mix(in srgb, var(--blue-hi) 46%, transparent); }

/* surfaces */
body .card, body .opp, body .kpi, body .fact-c, body .panel, body .day, body .veh, body .ph-card {
  box-shadow: 0 2px 10px color-mix(in srgb, var(--sky-deep) 5%, transparent),
    inset 0 0 0 1px color-mix(in srgb, var(--blue) 12%, transparent) !important; }
body .opp { transition: transform .16s cubic-bezier(.22,1,.36,1), box-shadow .16s ease; }
body .opp:hover { transform: translateY(-2px);
  box-shadow: 0 14px 30px color-mix(in srgb, var(--sky-deep) 12%, transparent),
    inset 0 0 0 1px color-mix(in srgb, var(--blue) 28%, transparent) !important; }

/* menu latéral */
body .menu a, body .menu button { color: var(--ink-64); }
body .menu a:hover, body .menu button:hover { background: color-mix(in srgb, var(--blue) 7%, transparent);
  color: var(--blue-hi); }
body .menu a.on, body .menu a[aria-current="page"], body .menu button.on {
  background: color-mix(in srgb, var(--blue) 10%, transparent); color: var(--blue);
  font-weight: 600; box-shadow: inset 2px 0 0 var(--blue); }

/* actions */
.shell .go, .shell .btn-primary, .shell button.primary, .shell .ph-set {
  background: var(--blue); border: 0; color: var(--color-neutral-100); font-weight: 600;
  box-shadow: 0 8px 20px color-mix(in srgb, var(--blue) 28%, transparent); }
.shell .go:hover, .shell .btn-primary:hover, .shell button.primary:hover, .shell .ph-set:hover {
  background: var(--blue-hi); color: var(--color-neutral-100); }
.shell .alt, .shell .tab { color: var(--blue-hi);
  background: color-mix(in srgb, var(--blue) 5%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--blue) 16%, transparent); }
.shell .alt:hover, .shell .tab:hover { background: color-mix(in srgb, var(--blue) 11%, transparent); }
.shell .tab.on, .shell .tab[aria-selected="true"] { background: var(--blue); color: var(--color-neutral-100);
  font-weight: 600; box-shadow: 0 5px 14px color-mix(in srgb, var(--blue) 26%, transparent); }

/* pastilles et tableaux */
body .bdg-live, body .bdg-acc { background: color-mix(in srgb, var(--blue) 10%, transparent);
  color: var(--blue-hi); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--blue) 24%, transparent); }
body table thead th, body .tbl thead th { background: color-mix(in srgb, var(--blue) 6%, transparent);
  color: var(--blue-hi); }
body table tbody tr:hover, body .tbl tbody tr:hover { background: color-mix(in srgb, var(--blue) 4%, transparent); }

/* ═════════════════════════════════════════════════════════════════════════
   PREMIUM · finition de l'annuaire et du formulaire
   Champs bleu pâle, pastilles bleu plein, surfaces à anneau bleu. Les deux
   blocs viennent verbatim de `annuaire.css` et `demande.css` de l'export ;
   ils visent des classes qui existent déjà dans le déployé.
   ═════════════════════════════════════════════════════════════════════════ */
/* — finition premium, alignée sur l'accueil : champs bleu pâle, pastilles bleu plein — */
body .sc { background: color-mix(in srgb, var(--blue) 4%, var(--color-neutral-100));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--blue) 14%, transparent); }
body .sc:focus-within { background: var(--color-neutral-100);
  box-shadow: inset 0 0 0 2px var(--blue), 0 4px 14px color-mix(in srgb, var(--blue) 20%, transparent); }
body .sc label { color: var(--blue-hi); }
body .sc input, body .sc select { color: var(--ink); }
body .sc input::placeholder { color: color-mix(in srgb, var(--blue-hi) 52%, transparent); }

body .segs { background: color-mix(in srgb, var(--blue) 7%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--blue) 14%, transparent); }
body .seg { color: var(--blue-hi); }
body .seg:hover { background: color-mix(in srgb, var(--blue) 10%, transparent); }
body .seg { flex: 1 1 0 !important; min-width: 0 !important; padding: 7px 6px !important;
  display: inline-flex; justify-content: center !important; align-items: center !important;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 12.5px; }
body .seg[aria-selected="true"] { background: var(--blue); color: var(--color-neutral-100);
  font-weight: 600; box-shadow: 0 4px 12px color-mix(in srgb, var(--blue) 30%, transparent); }
@media (max-width: 1180px) { body .seg { font-size: 12px; padding: 7px 4px !important; } }

body .fbox { box-shadow: 0 2px 6px color-mix(in srgb, var(--sky-deep) 5%, transparent),
  inset 0 0 0 1px color-mix(in srgb, var(--blue) 14%, transparent); }
body .fbox h3, body .fbox h4 { color: var(--ink); }

body .card { transition: transform .16s cubic-bezier(.22,1,.36,1), box-shadow .16s ease;
  box-shadow: 0 4px 18px color-mix(in srgb, var(--sky-deep) 7%, transparent),
    inset 0 0 0 1px color-mix(in srgb, var(--blue) 12%, transparent); }
body .card:hover { transform: translateY(-3px);
  box-shadow: 0 16px 38px color-mix(in srgb, var(--sky-deep) 14%, transparent),
    inset 0 0 0 1px color-mix(in srgb, var(--blue) 34%, transparent); }

body .chip-on { background: color-mix(in srgb, var(--blue) 9%, transparent); color: var(--blue-hi);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--blue) 22%, transparent); }
body .btn-primary { border-radius: 999px; box-shadow: 0 8px 20px color-mix(in srgb, var(--blue) 32%, transparent); }
body .btn-primary:hover { background: var(--blue-hi); color: var(--color-neutral-100); }
body .rng input[type="range"] { accent-color: var(--blue); }
body .go { background: var(--blue) !important; color: var(--color-neutral-100) !important;
  border: 0 !important; box-shadow: 0 8px 20px color-mix(in srgb, var(--blue) 32%, transparent) !important; }
body .go:hover { background: var(--blue-hi) !important; color: var(--color-neutral-100) !important; }
body .go svg { color: currentColor; }

/* — finition premium, même grammaire que l'accueil et l'annuaire — */
body .input, body textarea, body select {
  background: color-mix(in srgb, var(--blue) 4%, var(--color-neutral-100));
  border: 0; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--blue) 15%, transparent); }
body .input:focus, body textarea:focus, body select:focus { outline: none;
  background: var(--color-neutral-100);
  box-shadow: inset 0 0 0 2px var(--blue), 0 4px 14px color-mix(in srgb, var(--blue) 18%, transparent); }
body .input::placeholder, body textarea::placeholder {
  color: color-mix(in srgb, var(--blue-hi) 48%, transparent); }
body label, body .lab { color: var(--ink); }

body .rcard, body .eq, body .day, body .card, body .panel {
  box-shadow: 0 2px 10px color-mix(in srgb, var(--sky-deep) 5%, transparent),
    inset 0 0 0 1px color-mix(in srgb, var(--blue) 13%, transparent); }
body .rcard, body .eq { transition: transform .16s cubic-bezier(.22,1,.36,1), box-shadow .16s ease; }
body .rcard:hover, body .eq:hover { transform: translateY(-2px);
  box-shadow: 0 12px 28px color-mix(in srgb, var(--sky-deep) 12%, transparent),
    inset 0 0 0 1px color-mix(in srgb, var(--blue) 32%, transparent); }
body .rcard[aria-pressed="true"], body .rcard.sel, body .eq[aria-pressed="true"], body .eq.sel {
  box-shadow: 0 10px 24px color-mix(in srgb, var(--blue) 22%, transparent),
    inset 0 0 0 2px var(--blue); }

body .stepbar { background: color-mix(in srgb, var(--blue) 6%, transparent);
  border-bottom: 1px solid color-mix(in srgb, var(--blue) 14%, transparent); }

body .btn.btn-primary, body .go, body .submit, body button.primary {
  border-radius: 13px; background: var(--blue); border: 0; color: var(--color-neutral-100);
  font-weight: 600; box-shadow: 0 9px 22px color-mix(in srgb, var(--blue) 30%, transparent); }
body .btn.btn-primary:hover, body .go:hover, body .submit:hover, body button.primary:hover {
  background: var(--blue-hi); color: var(--color-neutral-100); }

body .acct-tab, body .pill {
  background: color-mix(in srgb, var(--blue) 5%, transparent); color: var(--blue-hi);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--blue) 16%, transparent); }
body .acct-tab:hover, body .pill:hover { background: color-mix(in srgb, var(--blue) 11%, transparent); }
body .acct-tab[aria-selected="true"], body .acct-tab.on,
body .pill[aria-pressed="true"], body .pill.on {
  background: var(--blue); color: var(--color-neutral-100); font-weight: 600;
  box-shadow: 0 5px 14px color-mix(in srgb, var(--blue) 28%, transparent); }

body .cbox { background: color-mix(in srgb, var(--blue) 4%, var(--color-neutral-100));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--blue) 18%, transparent); }
body .cbox:focus { outline: none; box-shadow: inset 0 0 0 2px var(--blue); }

/* L'export met `padding: 7px 6px !important` sur `.seg` à tout format, ce qui
   annule la cible tactile de 42px que `mobile.css:124` pose sous 760px. On la
   remet, plus spécifique et sous la même condition. */
@media (max-width: 760px) {
  body .segs .seg { min-height: 42px; padding-block: 10px !important; } }

/* Le hero premium respire sur un rail plus large que le reste de la page :
   1440 contre les 1200 de `.wrap` (accueil.css:129 de l'export). */
.hero > .wrap { max-width: 1440px; }

/* — trois écarts relevés en comparant chaque bouton à la maquette —
   Le jaune de signal est réservé aux économies : c'est écrit dans le LISEZ-MOI
   et c'est ce que la maquette fait. Ces trois-là n'étaient pas alignés. */

/* le prix des trajets : ocre dans la maquette, marine chez nous */
.rt-p b { color: var(--flash-deep); }

/* le CTA de « comment ça marche » : blanc à encre bleue dans la maquette */
.row .qp-submit, .features .row .qp-submit {
  background: var(--color-neutral-100) !important; color: var(--v-deep) !important;
  box-shadow: 0 8px 20px color-mix(in srgb, var(--sky-deep) 12%, transparent),
    inset 0 0 0 1px color-mix(in srgb, var(--v) 22%, transparent) !important; }
.row .qp-submit:hover { background: var(--v-tint) !important; color: var(--v-deep) !important; }

/* le CTA du tiroir mobile prenait l'ambre : c'est une action primaire, donc
   bleu. La maquette n'a pas de tiroir — la règle est à nous, la doctrine aussi. */
.mnav-cta { background: var(--v) !important; color: var(--color-neutral-100) !important; }

/* Le bouton du comparateur : la maquette le laisse en ocre, comme les deux
   autres CTA de section (`.stats .btn`, `.loyal .btn`). `blocks.css:717` —
   héritage de design 3 — le repeignait en bleu avec `!important`. Mesuré dans
   la maquette : oklch(0.52 0.13 75), encre claire. */
.offers .btn-primary { background: var(--flash-deep) !important; }
.offers .btn-primary:hover {
  background: color-mix(in srgb, var(--flash-deep) 88%, black) !important; }

/* — trois alignements de plus, relevés page par page contre la maquette — */

/* Le bandeau de service mesurait 23px sur l'annuaire, 32 sur le formulaire et
   45 sur la fiche : trois hauteurs pour un même élément. La maquette en donne
   une seule, 32. La règle vivait dans `demande.css`, d'où la seule page juste. */
body > .topbar { padding-block: 7px; font-size: 12.5px; line-height: 18px;
  /* et une seule disposition : chaque page portait son propre flex, les pages
     de connexion n'en avaient aucun (fase 31b) */
  display: flex; justify-content: space-between; gap: var(--space-4); flex-wrap: wrap; }
/* sur mobile elle prenait trois lignes (79 px) au-dessus du logo, avec « votre espace » orphelin :
   landing.css la masquait déjà à 560 px, mais la règle `body > .topbar` ci-dessus, plus
   spécifique, la rallumait sur toutes les autres pages. */
@media (max-width: 560px) { body > .topbar { display: none; } }

/* Les prix de l'annuaire. La maquette distingue les deux (annuaire.css:310-311) :
   le prix de base en marine, et SEUL le prix remis—celui de la période creuse—
   en ocre. C'est la doctrine du LISEZ-MOI : l'ambre est réservé aux économies.
   Le vert (`--ok`) qui sortait ici était un héritage, pas une intention. */
.c-from b { color: var(--v-deep) !important; }
.c-from s + b { color: var(--flash-deep) !important; }

/* Le CTA de la nav reste sur `--v` : c'est ce que donnent `annuaire.css:349` et
   `demande.css` de l'export. (`fiche.css` le met un cran plus foncé ; on suit
   la majorité plutôt que l'exception, pour que les dix pages soient d'accord.) */

/* ============================== L · les champs de date et d'heure, partout

   Le traitement correct existait deja, mais deux fois et chacune enfermee dans
   sa feuille : `demande.css:66` pour `time`, `landing.css:330` pour `date` mais
   seulement sous `.sb-cell`. Les huit champs de date de la console autocariste
   n'heritaient donc ni des chiffres tabulaires ni de l'icone attenuee. Ici,
   une seule regle pour les dix pages.

   Specificite 0,1,2 : elle passe devant `input[type="time"]` de `demande.css`
   (0,1,1) et reste derriere `.sb-cell input[type="date"]` (0,2,1), qui garde
   sa variante transparente dans le hero. */
body input[type="date"], body input[type="time"], body input[type="datetime-local"],
body input[type="month"], body input[type="week"] {
  font-feature-settings: "tnum" 1; cursor: pointer;
  max-width: 100%; box-sizing: border-box; }

/* Les chiffres ne dansent plus quand on change de jour, et le calendrier se
   voit sans crier. `opacity` plutot que `filter` : l'icone reste lisible sur
   le fond bleu clair des champs. */
body input[type="date"]::-webkit-calendar-picker-indicator,
body input[type="time"]::-webkit-calendar-picker-indicator,
body input[type="datetime-local"]::-webkit-calendar-picker-indicator,
body input[type="month"]::-webkit-calendar-picker-indicator,
body input[type="week"]::-webkit-calendar-picker-indicator {
  cursor: pointer; opacity: .55; }
body input[type="date"]:hover::-webkit-calendar-picker-indicator,
body input[type="time"]:hover::-webkit-calendar-picker-indicator,
body input[type="datetime-local"]:hover::-webkit-calendar-picker-indicator,
body input[type="month"]:hover::-webkit-calendar-picker-indicator,
body input[type="week"]:hover::-webkit-calendar-picker-indicator { opacity: 1; }

/* Un champ vide n'annonce pas une fausse donnee : Chrome affiche `jj/mm/aaaa`
   en encre pleine, aussi noir qu'une date saisie. On l'attenue au niveau des
   autres textes d'invite. */
body input[type="date"]:not(:focus):invalid::-webkit-datetime-edit,
body input[type="time"]:not(:focus):invalid::-webkit-datetime-edit {
  color: color-mix(in srgb, var(--blue-hi) 48%, transparent); }

/* ============================== M · l'échelle des titres, une seule

   Chaque page apportait la sienne : le h1 mesurait 44 px sur l'annuaire, 42 sur
   les connexions, 40 sur le formulaire, 38 sur la fiche, 33-34 dans les consoles.
   Les sous-titres allaient de 13,5 à 16 px, les h2 de section de 17 à 31.
   Une échelle unique — h1 34 · h2 20 · h3 16 · sous-titre 15 — et le logo un
   cran plus discret.

   Hors échelle, à dessein : le hero de l'accueil (`.display`) et les blocs
   marketing de la landing (`.band h2`, `.tr-h`, `.ly-title`, `.cmp-h`,
   `.split-title`) — des titres d'affiche, pas des titres de page. Leurs règles
   portent une classe et gagnent d'elles-mêmes ; rien à exclure à la main. */

/* — le logo : 30 px écrasait une barre de 58 px — */
body .brand-logo img { height: 26px; }
body .brand-bus { font-size: 22px; padding-bottom: 3px; }
@media (max-width: 560px) {
  body .brand-logo img { height: 22px; }
  body .brand-bus { font-size: 19px; }
}

/* — h1 de page et de vue — */
body h1, body .pitch h1, body h1.id-n {
  font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: clamp(26px, 3vw, 34px); line-height: 1.14;
  letter-spacing: -0.018em; margin: 0;
}

/* — le sous-titre sous le h1 : quatre tailles devenaient une — */
body .head .sub, body .pitch .sub, body .q-sub, body .id-a {
  font-size: 15px; line-height: 23px; color: var(--ink-64);
}

/* — h2 de section : consoles (.sect-lab), fiche (.sec-h) et cartes de
     connexion (.card) — */
body .sect-lab h2, body .sec-h h2, body .card > h2 {
  font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: 20px; line-height: 26px; letter-spacing: -0.014em;
}

/* La fiche encore en production titre ses sections avec des h2 nus (« À
   propos », « La flotte », `.zx-h`). `#fixhead` n'existe que sur la fiche —
   ancienne comme nouvelle — ce qui borne la règle à cette page sans toucher
   les h2 d'affiche de l'accueil. (`:has` a déjà un précédent : demande.css.) */
body:has(#fixhead) h2 {
  font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: 20px; line-height: 26px; letter-spacing: -0.014em;
}

/* ============================== N · les boutons des listes de véhicules

   « Ma flotte » : les actions par véhicule (« Modifier », « Signaler une
   panne ») heritaient de l'echelle compacte (36 px, padding-block 4 px) —
   trop serrees pour un bouton qu'on lit. On leur donne l'aise d'une action
   secondaire confortable, sans monter au gabarit 44 px des actions primaires. */
.fc-acts button {
  padding: 9px 16px; min-height: 40px; font-size: 13px;
  border-radius: 11px;
}

/* Les deux boutons de la carte de l'annuaire (« Ajouter à ma demande » / « Voir
   la fiche ») respirent un cran de plus en vertical. Le padding lateral reste
   modere : la carte est etroite et « Ajouter a ma demande » est long — a 18 px
   il debordait. 9 px vertical suffit a decoller le texte du bord. */
.c-add, .c-see { padding-block: 9px; }

/* ============================== O · la géométrie des champs, partout

   Le standard des champs (section « champs », plus haut) a unifié la COULEUR
   — fond bleu pâle, anneau, focus — mais pas la géométrie : chaque feuille
   gardait la sienne. 9×11 px et 14 px dans les trois consoles, 9×12 sur le
   formulaire, 6×8 et 12,5 px sur les dates de disponibilité — et 0 dans les
   cellules de recherche, où l'anneau du standard collait au texte. Une seule
   géométrie, calée sur les connexions (11×13, 15 px, rayon 12), qui étaient
   la meilleure des dix pages.

   Même liste énumérée que le standard couleur, même spécificité 0,1,2 : les
   règles de classe des feuilles de page (0,1,0 / 0,1,1) restent derrière,
   les styles inline des tableaux admin gagnent (compacts à dessein), et
   mobile.css, chargée après, garde ses planchers tactiles (16 px, 44 px). */
body .input, body input[type="text"], body input[type="email"], body input[type="tel"],
body input[type="date"], body input[type="number"], body input[type="time"],
body input[type="search"], body input[type="password"], body input[type="url"],
body input[type="datetime-local"], body input[type="month"], body input[type="week"],
body textarea, body select {
  padding: 11px 14px; font-size: 15px; line-height: 1.45; border-radius: 12px; }

/* L'étiquette respire : le lien label→champ passe de 5-6 px à 7. */
body .f { gap: 7px; }

/* Les cellules de recherche (hero de l'accueil, annuaire) : la CELLULE est le
   champ. L'input redevient transparent et sans padding — l'espace vient de la
   cellule, plus de boîte dans la boîte — et le focus reste sur la cellule
   (:focus-within, déjà dans les deux feuilles). Déclaré APRÈS le gabarit
   ci-dessus : à spécificité égale, le dernier gagne. */
body .sb-cell input, body .sc input, body .sc select,
body .sb-cell input:focus, body .sc input:focus, body .sc select:focus {
  padding: 0; background: transparent; box-shadow: none;
  border-radius: 0; line-height: 1.35; }
body .sb-cell, body .sc { padding: 10px 14px; gap: 3px; }
/* La date entière tient dans sa cellule : « 28/09/2026 » + l'icône. */
body .sb-cell input[type="date"], body .sc input[type="date"] { font-size: 14px; }

/* Compacts dignes : mieux lotis qu'avant, sans casser leur rangée. */
body .ch-form textarea { font-size: 14px; padding: 10px 12px; }
body .avail-dates input { padding: 8px 10px; font-size: 13px; border-radius: 8px; }
body .sort select, body .mem-role select { padding: 8px 12px; font-size: 13.5px; border-radius: 10px; }

/* Les cases OTP restent des cases : un chiffre centré, pas de padding latéral.
   `input.cbox`, pas `.cbox` : il faut 0,1,2 pour rejoindre le gabarit et le
   battre à l'ordre — `body .cbox` (0,1,1) perdrait. */
body input.cbox { padding: 12px 0; font-size: 20px; border-radius: 12px; }

/* ============================== P · le lien « État du système » du pied

   Dans le pied des sept pages publiques : un lien discret vers statut.html,
   avec un point coloré hydraté par statut-dot.js (une mesure au chargement).
   Gris tant qu'on ne sait pas — jamais vert par défaut. */
.ft-statut { display: inline-flex; align-items: center; gap: 7px;
  color: inherit; text-decoration: none; white-space: nowrap; }
.ft-statut:hover { text-decoration: underline; }
.ft-dot { width: 8px; height: 8px; border-radius: 50%; flex: none;
  background: color-mix(in srgb, currentColor 40%, transparent); }
.ft-dot.ft-operational { background: oklch(0.58 0.13 152);
  box-shadow: 0 0 0 3px oklch(0.95 0.035 152); animation: ft-beat 2.6s ease-in-out infinite; }
.ft-dot.ft-degraded { background: oklch(0.52 0.13 75); box-shadow: 0 0 0 3px oklch(0.96 0.045 88); }
.ft-dot.ft-down { background: oklch(0.55 0.19 27);
  box-shadow: 0 0 0 3px oklch(0.95 0.035 27); animation: ft-beat 1.1s ease-in-out infinite; }
@keyframes ft-beat { 0%, 100% { opacity: 1; } 50% { opacity: 0.45; } }
@media (prefers-reduced-motion: reduce) { .ft-dot { animation: none !important; } }
/* La version courante, injectée par statut-dot.js à côté du lien d'état :
   mène à l'onglet Nouveautés de la page statut. */
.ft-version { margin-left: 10px; color: inherit; text-decoration: none;
  font-feature-settings: "tnum" 1; opacity: 0.85; white-space: nowrap; }
.ft-version:hover { text-decoration: underline; opacity: 1; }

/* ============================== O.2 · les boutons, partout

   L'échelle C posait les hauteurs (36/44/52) au `min-height` en laissant
   `padding-block: 4/6/8` : la hauteur y était, mais le texte flottait dans
   des boutons creux — et deux boutons du comparateur de l'accueil n'étaient
   dans aucune échelle (« Choisir cette offre » : 25 px de haut, padding en
   em du design system ; « Voir un exemple » : 2,8 px de latéral). On donne
   un rembourrage réel à chaque échelon ; couleur, graisse et latéraux
   restent ceux de chaque feuille. Mêmes sélecteurs que C, déclarés après :
   l'ordre tranche. `.fc-acts button` est déjà réglé par la section N (9×16)
   — on ne le rétrograde pas. */

/* — compact 36 : le texte ne flotte plus — */
.tab, .seg, .chip, .add, .qq, .ph-set, .mos-all, .all-photos, .icon-btn,
.rad-opt, .pill, .add-stop { padding-block: 7px; }

/* — standard 44 — */
.tb-go, .eq2-more, .new-btn, .d-side .go, .o-acts .go, .o-acts .alt, .o-acts .no,
.fav-cta, .ch-send, .send, .fp-go, .pc .pick, .shell .go { padding-block: 10px; }

/* — saillant 52 — */
.qp-submit, .ask-go { padding-block: 12px; }

/* — la colonne d'actions des devis (la photo de l'autocar à gauche) — */
.q-acts { gap: 9px; }
.q-acts .accept, .q-acts .chat, .q-acts .detail, tfoot .accept, .act {
  padding: 11px 16px; min-height: 44px; font-size: 14px; border-radius: 12px; }

/* — le comparateur de l'accueil : hors échelle jusqu'ici — */
.of-side .btn { padding: 11px 18px; min-height: 44px; font-size: 14px; }
.btn-ghost { padding: 10px 18px; }

/* — la fiche : chips de zone et sujets de contact, cliquables donc charnus — */
.rl-chip { padding: 7px 12px; font-size: 13px; }
.sj { padding: 8px 14px; font-size: 13px; }

/* — RGPD : bandeau de consentement et garde des contenus tiers (rgpd.js) — */
.rg { position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 90; display: flex; justify-content: center;
  transform: translateY(24px); opacity: 0; transition: transform .28s cubic-bezier(.22,1,.36,1), opacity .2s ease;
  pointer-events: none; }
.rg.on { transform: none; opacity: 1; pointer-events: auto; }
.rg[hidden] { display: none; }
.rg-in { width: min(720px, 100%); padding: 18px 20px 16px; border-radius: 18px; color: var(--ink);
  background: var(--color-neutral-100);
  box-shadow: 0 18px 50px color-mix(in srgb, var(--color-neutral-900) 22%, transparent),
    inset 0 0 0 1px color-mix(in srgb, var(--color-neutral-900) 10%, transparent); }
.rg-t { margin: 0 0 6px; font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: 16px; line-height: 22px; letter-spacing: -0.01em; }
.rg-d { margin: 0; font-size: 13.5px; line-height: 20px; color: var(--ink-64); }
.rg-d a { color: var(--color-accent-700); text-decoration: underline; text-underline-offset: 2px; white-space: nowrap; }
.rg-acts { display: flex; gap: 10px; flex-wrap: wrap; justify-content: flex-end; margin-top: 14px; }
.rg-acts button { font: inherit; font-size: 14px; font-weight: 600; padding: 11px 18px; border-radius: 12px;
  cursor: pointer; border: 0; min-height: 44px; }
.rg-no { color: var(--ink); background: color-mix(in srgb, var(--color-neutral-900) 6%, transparent); }
.rg-no:hover { background: color-mix(in srgb, var(--color-neutral-900) 10%, transparent); }
.rg-ok { color: var(--color-neutral-100); background: var(--v-deep); }
.rg-ok:hover { background: var(--v-hi); }
@media (max-width: 560px) {
  .rg { left: 8px; right: 8px; bottom: 8px; }
  .rg-in { padding: 16px 16px 14px; border-radius: 16px; }
  .rg-acts button { flex: 1 1 100%; }
}
@media (prefers-reduced-motion: reduce) { .rg { transition: none; } }
/* le cache : posé sur l'élément qui accueille le contenu tiers, jusqu'à l'accord */
.is-gated { position: relative; }
.rg-gate { position: absolute; inset: 0; z-index: 4; display: flex; flex-direction: column; align-items: center;
  justify-content: center; gap: 12px; padding: 20px; text-align: center;
  background: color-mix(in srgb, var(--color-neutral-100) 93%, transparent); }
.rg-gate p { margin: 0; font-size: 13px; line-height: 19px; color: var(--ink-64); max-width: 34ch; }
.rg-gate p b { display: block; margin-bottom: 4px; font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: 15px; line-height: 21px; color: var(--ink); }
.rg-gate-btn { font: inherit; font-size: 13.5px; font-weight: 600; padding: 10px 16px; border-radius: 11px; border: 0;
  cursor: pointer; min-height: 44px; color: var(--color-neutral-100); background: var(--v-deep); }
/* dans une vignette de galerie (164×123 sur mobile) le cache complet ne tient pas : titre + bouton */
figure.vid .rg-gate { padding: 10px; gap: 8px; }
figure.vid .rg-gate p span { display: none; }
figure.vid .rg-gate p b { margin: 0; font-size: 13.5px; line-height: 18px; }
figure.vid .rg-gate-btn { min-height: 40px; padding: 8px 14px; font-size: 13px; }
.rg-gate-btn:hover { background: var(--v-hi); }