/* BeandBus — palette du redesign (accessible) · surcouche de jetons UNIQUEMENT.

   -------------------------------------------------------------------------
   OU LA CHARGER
   -------------------------------------------------------------------------
   APRES blocks.css, dans chacune des pages :

       <link rel="stylesheet" href="css/blocks.css" />
       <link rel="stylesheet" href="css/palette-redesign.css" />   <-- ici
       <link rel="stylesheet" href="css/mobile.css" />

   L'ordre reel au chargement est : _ds/nocturne-.../styles.css (injectee par
   ds-base.js) -> <feuille de page>.css -> header.css -> blocks.css -> CETTE
   FEUILLE -> mobile.css. Toutes les :root en amont sont donc ecrasees, et
   aucune ne l'est en aval (mobile.css ne declare aucun jeton de couleur).

   -------------------------------------------------------------------------
   CE QU'ELLE FAIT / NE FAIT PAS
   -------------------------------------------------------------------------
   Elle ne contient QUE des jetons de couleur et de typographie. Aucun
   selecteur de composant, aucune geometrie, aucune ombre, aucun espacement.
   Aucun fichier existant n'est modifie : retirer la balise <link> retablit
   exactement l'etat d'avant.

   Deux familles de jetons se recalculent seules et n'ont pas a etre
   redeclarees ici :
   -- `--ink` (152 usages) vaut `var(--color-neutral-900)` dans les dix
      feuilles de page : il suit le marine automatiquement ;
   -- `--shadow-sm|md|lg` sont des `color-mix()` sur `--color-neutral-900`
      (blocks.css, section A) : les ombres virent au bleu-noir toutes seules.

   -------------------------------------------------------------------------
   LA REGLE QUI STRUCTURE TOUT LE FICHIER : deux roles pour l'orange
   -------------------------------------------------------------------------
   #F97316 sous du blanc donne 2,80:1. C'est sous les 4,5 exiges par WCAG AA
   pour du texte courant, et meme sous les 3,0 exiges pour du gros texte ou
   un composant. Il n'est donc PAS utilisable comme fond de bouton.

   On separe les deux emplois que la maquette confondait :

     --flash        #F97316  APLAT / REMPLISSAGE. Ne porte jamais de blanc.
                             L'encre posee dessus est --flash-ink (marine),
                             6,68:1. Badges, jauges, pastilles, surlignages.
     --flash-deep   #B85000  BOUTON ET TEXTE. Meme teinte OKLCH (H 47,6),
                             luminosite descendue jusqu'a ce que le blanc
                             passe : 5,02:1. C'est le jeton que consomment
                             deja `.offers .btn-primary { background }` et la
                             quarantaine de `color: var(--flash-deep)`.

   #B85000 est la valeur calculee : hue OKLCH identique a #F97316 (47,6),
   chroma conserve au maximum que le gamut autorise (0,160 contre 0,187),
   L descendu de 0,705 a 0,573. #B94800 (5,26:1) passe aussi mais derive de
   4 degres vers le rouge ; on garde la teinte exacte.

   Le vert #16A34A pose exactement le meme probleme (3,30:1 sous du blanc) et
   recoit exactement le meme traitement -- voir la section 5.
   ------------------------------------------------------------------------- */

:root {

  /* === 1 - NEUTRES =======================================================
     La rampe Nocturne etait bleu-lavande froide (#f3f5fe -> #292b31) et
     servait a la fois de surface, de filet et d'encre. On la rebranche sur
     les huit neutres du redesign, echelon par echelon, en gardant le meme
     ordre de valeur : rien ne s'inverse, tout se recale.

     Attention au couple 100/200 : la carte passe de #f3f5fe a du blanc pur
     et la page de #e4e7f5 a #f5f7fb. L'ecart carte/page tombe de 1,11 a
     1,07 -- c'est l'ombre (--shadow-sm/md) qui detache desormais les cartes,
     plus la couleur. Voulu, mais c'est le changement le plus sensible du
     fichier sur les trois consoles. */
  --color-neutral-100: #ffffff;   /* surfaces : cartes, panneaux, champs      */
  --color-neutral-200: #f5f7fb;   /* fond de page (blocks.css, section B)     */
  --color-neutral-300: #e3e8f0;   /* filets, separateurs, fonds de rail       */
  --color-neutral-400: #c9d1e3;   /* bordures de controle, etats inactifs     */
  --color-neutral-500: #8a93a8;   /* icones, placeholders - 3,08:1, non-texte */
  --color-neutral-600: #5b6478;   /* texte secondaire - 5,93:1                */
  --color-neutral-700: #3b4457;   /* texte courant fort - 9,77:1              */
  --color-neutral-800: #232b3c;   /* DERIVE : palier absent de la liste du    */
                                  /* redesign, interpole en OKLCH (L 0,290).  */
                                  /* 1 seul usage dans tout le site.          */
  --color-neutral-900: #0b1220;   /* MARINE : l'encre du site - 18,72:1.      */
                                  /* Source de --ink et des trois ombres.     */

  /* === 2 - BLEU D'ACTION =================================================
     La famille `--v` remplace le violet de "design 3". Les alias que
     blocks.css pose (--blue, --sky-tint, --deep...) sont des `var(--v...)` :
     ils suivent d'eux-memes. On les redeclare quand meme, explicitement,
     pour que ce fichier se lise seul. */
  --v:       #1d4ed8;   /* action principale - 6,70:1 sous blanc             */
  --v-hi:    #143eb7;   /* survol, etat presse, petit texte sur teinte.      */
                        /* DERIVE : meme hue 264,4, L 0,488 -> 0,425. 8,74:1 */
  --v-tint:  #ecf4ff;   /* DERIVE : lavis de fond (hue 264,4, L 0,966)       */
  --v-soft:  #d6e0ff;   /* aplat doux, puces, bordures actives               */
  --v-deep:  #0b1220;   /* marine : fond des bandeaux sombres                */

  --blue:     var(--v);
  --blue-hi:  var(--v-hi);
  --sky:      #759cef;  /* DERIVE. Usage reel : DEUX lavis radiaux a 7-14 %  */
                        /* d'opacite + --color-accent-400. Jamais du texte.  */
  --sky-tint: var(--v-tint);
  --sky-deep: var(--v-deep);
  --deep:     var(--v-deep);

  /* === 3 - RAMPE D'ACCENT ET SECTIONS ====================================
     blocks.css (section A1) rebranche deja les echelons 200->800 sur la
     famille `--v` ; ils suivent. Les DEUX qu'il fige en oklch() litteral --
     400 et 800 -- ne suivraient pas : on les reprend ici. Les echelons 100
     et 900 viennent du design system et sont a zero usage ; on les aligne
     par coherence. */
  --color-accent:     var(--v);
  --color-accent-100: #f4f9ff;      /* DERIVE */
  --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);     /* `a:hover` des consoles               */
  --color-accent-700: var(--v-hi);  /* `a` des consoles - 8,74:1            */
  --color-accent-800: #1b2f6e;      /* ecrase l'oklch(0.300 .090 252) fige  */
  --color-accent-900: #0b1220;

  /* `--color-section` garde ses deux roles. En petit aplat il vaut le bleu
     d'action et porte du blanc (6,70:1). Dans les neuf surfaces listees par
     blocks.css (.stats, .band, .loyal, .plan, .plus-card, .health, .strip,
     .cmpbar, body > .topbar) une regle deja en place le bascule sur
     `--v-deep` : ces bandeaux passent au marine, et le blanc a 62 %
     d'opacite qu'ils portent y tient 7,58:1. */
  --color-section:       var(--v);
  --color-section-ghost: var(--v-tint);
  --color-section-glow:  #24408f;   /* halo / degrade de bandeau - 9,52:1   */

  /* ADDITIFS -- le degrade de bandeau du redesign. Aucune regle ne les
     consomme aujourd'hui ; ils sont poses ici pour que la valeur vive a un
     seul endroit le jour ou les bandes passeront en degrade. */
  --band-from: #1b2f6e;             /* blanc dessus : 12,51:1 */
  --band-to:   #24408f;             /* blanc dessus :  9,52:1 */

  /* === 4 - ORANGE : LES DEUX ROLES =======================================
     Voir l'en-tete du fichier. En une ligne : --flash se remplit, ne
     s'ecrit pas ; --flash-deep s'ecrit et porte du blanc. */
  --flash:         #f97316;  /* APLAT SEUL. Blanc dessus = 2,80:1 = interdit */
  --flash-ink:     #0b1220;  /* l'encre de --flash - 6,68:1                  */
  --flash-deep:    #b85000;  /* BOUTON + TEXTE - 5,02:1 sous blanc           */
  --flash-tint:    #fff3e6;  /* DERIVE : lavis cale pour que --flash-deep y  */
                             /* tienne 4,59:1 (badges `.bdg-hot`)            */
  --flash-on-dark: #f97316;  /* sur le marine des bandeaux - 6,68:1          */

  /* ADDITIF : survol du bouton orange. Aucune regle ne le consomme -- les
     survols actuels passent par `color-mix(... 88%, black)`, qui reste
     correct. Pose pour reference. */
  --flash-deep-hi: #964000;  /* 6,93:1 sous blanc */

  /* `--warn` et `--flash-deep` valaient deux ambres a 1 degre l'un de
     l'autre (#a86c00 et #935b00) : une distinction que personne ne voit. Le
     redesign n'a qu'un orange ; on branche l'avertissement dessus.
     11 usages pour --warn, 6 pour --warn-tint. */
  --warn:      var(--flash-deep);
  --warn-tint: var(--flash-tint);

  /* === 5 - VERT D'ETAT ===================================================
     Meme piege que l'orange, et il est ACTIF dans le code deploye :
     `.c-pill.creux { background: var(--ok); color: var(--color-neutral-100) }`
     pose du quasi-blanc sur --ok, pendant que 48 regles font
     `color: var(--ok)` sur fond clair. Le jeton doit donc passer AA DANS LES
     DEUX SENS -- ce que #16A34A ne fait pas (3,30:1 sous blanc).

     Donc, symetriquement a l'orange :
       --ok       #007E33  texte ET fond de pastille - 5,21:1
       --ok-fill  #16A34A  gros aplats, points d'etat, jauges - encre marine */
  --ok:      #007e33;   /* DERIVE : hue 149,2 conservee, L 0,627 -> 0,545    */
  --ok-tint: #e6f9ea;   /* DERIVE : lavis cale pour que --ok y tienne 4,74:1 */

  /* ADDITIF, non consomme pour l'instant : le vert plein du redesign. A
     n'utiliser que sous --flash-ink (5,68:1) ou sans texte du tout. */
  --ok-fill: #16a34a;

  /* === 6 - JETONS NOCTURNE RESTES EN THEME SOMBRE ========================
     `_ds/nocturne-.../styles.css` est un paquet de theme SOMBRE : sa regle
     `body { background: var(--color-bg); color: var(--color-text) }` est
     toujours active, avec #161826 et #e9e9ed. Les dix feuilles de page la
     neutralisent en redeclarant `body { color: var(--ink) }` et blocks.css
     reprend le fond -- mais les jetons eux-memes restent faux. On les
     recale, pour qu'une page nouvelle ou un composant du DS ne reparte pas
     en sombre. Zero usage direct dans les feuilles deployees : sans risque. */
  --color-bg:       #f5f7fb;
  --color-surface:  #ffffff;
  --color-text:     #0b1220;
  --color-divider:  color-mix(in srgb, #0b1220 12%, transparent);
  --color-accent-2: var(--sky);

  /* === 7 - TYPOGRAPHIE ===================================================
     Le design system importe Inter depuis fonts.googleapis.com -- un appel
     tiers, contraire a la note RGPD de `fonts/manrope.css` ("aucun appel a
     Google Fonts"). Manrope est deja dans le depot, en variable woff2
     sous-ensemble latin, et n'est referencee par aucune page.

     La pile ci-dessous bascule sur Manrope DES QUE sa @font-face est
     chargee, et retombe sur Inter puis sur la police systeme tant qu'elle ne
     l'est pas : la poser ici ne casse donc rien aujourd'hui.

     A SAVOIR : `fonts/manrope.css` pointe sur
     `../fonts/manrope-variable-latin.woff2` -- un chemin ecrit pour une
     feuille placee dans `css/`. Depuis `fonts/` il resout a cote. Le
     brancher demande de deplacer le fichier ou de corriger ce chemin : hors
     perimetre de cette feuille, qui ne modifie rien d'existant. */
  --font-body:    "Manrope", "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-heading: "Manrope", "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  /* Volontairement NON redeclare : `--font-heading-weight` (500). Il pilote
     tous les titres des neuf pages et une trentaine de regles de blocks.css.
     Le monter a 600/700 est une decision de maquette, pas de palette.
     Si le redesign le veut, decommenter -- et rien d'autre :
     --font-heading-weight: 700; */
}

/* =========================================================================
   RELEVE DE CONTRASTE -- chaque paire texte/fond que la palette produit.
   Calcule en WCAG 2.x (luminance relative sRGB). Seuils : 4,5 texte courant
   . 3,0 texte >= 24 px, texte gras >= 19 px et composants d'interface.

   TEXTE SUR SURFACE CLAIRE
     --ink #0B1220        / carte #FFF ............. 18,72  OK
     --ink #0B1220        / page #F5F7FB ........... 17,46  OK
     --ink-78 (78 %)      / carte ....................9,46  OK
     --ink-64 (74 %)      / carte ....................8,12  OK
     --ink-55 (70 %)      / carte ....................7,03  OK
     --ink-64 (74 %)      / page .....................7,80  OK
     --ink-55 (70 %)      / page .....................6,78  OK
     neutral-700 #3B4457  / carte ....................9,77  OK
     neutral-600 #5B6478  / carte ....................5,93  OK
     neutral-600 #5B6478  / page .....................5,53  OK
     neutral-500 #8A93A8  / carte ....................3,08  OK (seuil 3,0)

   BLEU D'ACTION
     --v #1D4ED8          / carte ....................6,70  OK
     --v #1D4ED8          / page .....................6,25  OK
     --v #1D4ED8          / --v-tint .................6,05  OK
     --v #1D4ED8          / --v-soft #D6E0FF .........5,09  OK
     blanc                / --v (bouton primaire) ....6,70  OK
     blanc                / --v-hi (survol) ..........8,74  OK
     --v-hi #143EB7       / --v-tint .................7,89  OK
     blanc                / accent-800 #1B2F6E ..... 12,51  OK

   ORANGE -- le point de la decision
     --flash-ink #0B1220  / --flash #F97316 .........6,68  OK  (remplissage)
     BLANC                / --flash #F97316 .........2,80  ECHEC -- INTERDIT
     blanc                / --flash-deep #B85000 ....5,02  OK  (bouton)
     blanc                / --flash-deep-hi #964000 .6,93  OK
     --flash-deep #B85000 / carte ...................5,02  OK
     --flash-deep #B85000 / --flash-tint #FFF3E6 ....4,59  OK
     --flash-on-dark      / bandeau #0B1220 .........6,68  OK
     --flash-on-dark      / #24408F .................3,40  OK (seuil 3,0 seul)

   VERT -- meme arbitrage
     blanc                / --ok #007E33 ............5,21  OK
     --ok #007E33         / carte ...................5,21  OK
     --ok #007E33         / --ok-tint #E6F9EA .......4,74  OK
     --flash-ink #0B1220  / --ok-fill #16A34A .......5,68  OK  (remplissage)
     BLANC                / --ok-fill #16A34A .......3,30  ECHEC -- a eviter

   SURFACES SOMBRES
     blanc                / bandeau #0B1220 ....... 18,72  OK
     blanc 62 %           / bandeau #0B1220 ........ 7,58  OK
     blanc                / --band-from #1B2F6E .... 12,51 OK
     blanc                / --band-to   #24408F .....9,52  OK
     blanc 62 %           / --band-to   #24408F .....4,71  OK
     --v-soft #D6E0FF     / bandeau #0B1220 ........14,23  OK

   NON-TEXTE (informatif, ce ne sont pas des seuils de texte)
     carte #FFF / page #F5F7FB ....................  1,07
     filet #E3E8F0 / carte ........................  1,23
     bordure #C9D1E3 / carte ......................  1,53
     --sky #759CEF / carte ........................  2,71

   RESERVE CONNUE, NON REGRESSIVE : #C9D1E3 en bordure de champ donne 1,53,
   sous les 3,0 que WCAG 1.4.11 demande a une bordure qui est le SEUL indice
   d'un controle. L'ancien #B2B6CA donnait 2,13 : la palette ne cree pas le
   defaut, elle l'herite. Le correctif est un selecteur de composant
   (`.input { border-color: var(--color-neutral-500) }`, 3,08) -- donc hors
   de cette feuille, qui ne contient que des jetons.
   ========================================================================= */

/* =========================================================================
   CE QUI SE VOIT / CE QUI SE REGLE

   CHANGEMENT VISIBLE -- on le remarque sans comparer
     --color-section      violet #0062BF -> bleu #1D4ED8. 287 usages, 139
                          dans les consoles. Onglets actifs, pastilles,
                          puces, bandeaux : c'est LE basculement de teinte.
     --v / --blue         meme bascule, 178 usages via --blue.
     --color-neutral-100  #F3F5FE -> blanc pur. 496 usages. Toutes les
                          cartes, tous les champs, tous les panneaux
                          s'eclaircissent.
     --color-neutral-900  #292B31 -> #0B1220. 373 usages. Le gris chaud du
                          texte devient bleu-noir ; les trois ombres virent
                          avec lui, et --ink aussi.
     --flash              jaune-ambre #FCC82C -> orange #F97316. 140 usages.
     --flash-deep         brun-ambre #935B00 -> #B85000. 180 usages : c'est
                          le jeton des boutons d'offre et des prix.
     --v-deep             #04182D -> #0B1220 : les bandeaux sombres perdent
                          leur dominante cyan.
     --ok                 #167645 -> #007E33 : vert plus franc, moins olive.

   AJUSTEMENT FIN -- visible seulement en comparant deux captures
     --color-neutral-200  #E4E7F5 -> #F5F7FB : le fond de page monte de deux
                          crans ; l'ecart carte/page se resserre.
     --color-neutral-300/400/500/600/700 : la rampe grise se desature d'un
                          souffle et se recale sur le bleu. Contrastes tous
                          en hausse ou egaux.
     --v-tint / --v-soft  #E4F2FF -> #ECF4FF, #C5E2FE -> #D6E0FF : les lavis
                          perdent le cyan.
     --flash-tint         #FEF2CF -> #FFF3E6 : creme jaune -> creme orangee.
     --ok-tint            #D9F5E1 -> #E6F9EA : un cran plus clair, pour que
                          --ok y repasse AA.
     --warn / --warn-tint aliases sur l'orange : l'ecart etait de 1 degre de
                          teinte, personne ne le verra.
     --color-accent-800   #002E59 -> #1B2F6E (5 usages).
     --color-section-glow #003E78 -> #24408F (6 usages).
     --sky                #69A9E5 -> #759CEF : deux lavis radiaux a 7-14 %
                          d'opacite. Invisible ou presque.
     --color-neutral-800  #3F424D -> #232B3C : 1 usage.
     typographie          identique tant que `fonts/manrope.css` n'est pas
                          branchee -- la pile retombe sur Inter.

   SANS EFFET AUJOURD'HUI (poses pour la suite)
     --band-from, --band-to, --flash-deep-hi, --ok-fill,
     --color-bg, --color-surface, --color-text, --color-divider,
     --color-accent-2, --color-accent-100, --color-accent-900.
   ========================================================================= */

/* ——— Cohérence de l'en-tête avec l'accueil redessiné ———————————————
   Le bandeau de service de l'accueil est en #1B2F6E (bleu), les autres pages
   l'avaient en --v-deep (#0B1220, presque noir) et 3 px plus bas. Passer d'une
   page à l'autre se voyait. On aligne la couleur et le rembourrage ; la hauteur
   du menu, elle, vient de --hdr-h dans header.css. */
/* blocks.css peint ce bandeau avec `background: var(--v-deep) !important`.
   Plutôt que d'empiler un second !important, on redéfinit le jeton SUR
   l'élément : le var() du !important le résout ici et prend le bleu, sans
   toucher --v-deep ailleurs (59 autres usages qui doivent rester sombres). */
body > .topbar { --v-deep: #1B2F6E; --color-section: #1B2F6E;
  padding-block: 8px; font-size: 12px;
  /* Mesure avant correction, accueil contre support : meme police et meme
     rembourrage, mais interligne 18,6 px contre 18 et ecart 16 px contre 11,2.
     D'ou 35 px de haut d'un cote et 34 de l'autre. On fige les deux : 1.55 x
     12 px = 18,6 px, l'interligne de l'accueil refait. */
  line-height: 1.55;
  gap: 16px;
  align-items: center;
}
/* les deux moities du bandeau : meme police, meme graisse, partout */
body > .topbar > * { font-size: 12px; line-height: 1.55; }

/* ——— Le pied de page sur le MEME rail que l'en-tete ————————————————
   Dix feuilles differentes declarent des regles de pied (jusqu'a huit chacune),
   chacune avec sa largeur : mesure avant correction, le contenu demarrait a
   x=47 sur l'annuaire et a x=0 sur la page d'etat. On reprend ici, apres toutes
   les feuilles, la formule exacte de `header.css` — meme rail, meme gouttiere,
   donc le logo du pied tombe a la verticale du logo du menu, sur toutes les
   pages. Les enfants directs renoncent a leur propre centrage : c'est le pied
   qui porte la gouttiere, une seule fois. */
footer {
  --hdr-max: 1280px;
  --hdr-pad: 24px;
  --hdr-gutter: max(var(--hdr-pad), calc((100% - var(--hdr-max)) / 2 + var(--hdr-pad)));
  padding-inline: var(--hdr-gutter);
}
footer > .f-cols,
footer > .f-base,
footer > .wrap { max-width: none; margin-inline: 0; padding-inline: 0; }

/* Selon les pages, le <footer> est SOIT enfant direct de <body> (page d'etat),
   SOIT enfant de .wrap qui porte deja sa gouttiere (annuaire, support). Dans le
   second cas les deux s'additionnaient : le logo du pied tombait a x=71 quand
   celui du menu etait a x=24. Le pied dans un .wrap ne pose donc pas de
   gouttiere — c'est le .wrap qui la porte, une seule fois. */
.wrap > footer { padding-inline: 0; }

/* ——— Le mot « bus » du logo, identique partout ————————————————————
   L'accueil refait le pose en 20px/700 encre pleine (.nv-bus) ; les 14 autres
   pages l'avaient en 22px/800 avec un degrade (.brand-bus : couleur
   transparente + background-clip:text). Deux logos differents selon la page.
   On aligne sur celui de l'accueil. `-webkit-text-fill-color` doit etre remis
   a currentColor, sinon le texte reste transparent malgre `color`. */
.nav .brand-logo .brand-bus,
.nav .brand-bus,
footer .brand-logo .brand-bus,
footer .brand-bus,
.brand-bus {
  font-size: 20px;
  font-weight: 700;
  color: #0B1220;
  background: none;
  -webkit-background-clip: border-box;
  background-clip: border-box;
  -webkit-text-fill-color: currentColor;
  /* le soulignement et le trait sous « bus » ne sont pas dans le logo de
     l'accueil : ni text-decoration, ni bordure, ni pseudo-element. */
  text-decoration: none;
  border-bottom: 0;
  box-shadow: none;
  /* une des trois feuilles reservait 3px sous le mot pour ce soulignement :
     sans lui, le mot ne tombe plus a la meme hauteur que sur l'accueil. */
  padding-bottom: 0;
}
.nav .brand-bus::after,
.nav .brand-bus::before,
footer .brand-bus::after,
footer .brand-bus::before { content: none; }
/* l'ancre elle-meme ne souligne pas non plus */
.nav .brand, .nav .nav-brand, footer .f-b { text-decoration: none; }

/* ==================================================================
   CORRECTIONS MOBILES (audit 375 px, 15 pages) · ajout du 2026-09-12

   Chargee en DERNIER (apres mobile.css) sur les 13 pages qui la lient :
   annuaire, fiche-autocariste, demande, statut, support, rescue,
   confidentialite, connexion x3, crm x3. Aucune regle n'a besoin de
   `!important` : a specificite egale c'est l'ordre qui tranche, et on
   est en aval de tout le monde.

   ATTENTION — index.html et urgence.html ne lient PAS cette feuille
   (index.html : header.css + landing-redesign.css ; urgence.html :
   _ds/nocturne/styles.css seul). Les regles de la section 7 ne
   prendront effet qu'une fois la balise <link> ajoutee a index.html.

   Deux blocs sortent des points de rupture 480/720 : ils doivent
   reprendre EXACTEMENT celui de la regle fautive (940 px pour
   demande.css:407, 900 px pour connexion*.css:138), sinon le
   debordement subsiste entre 720 px et leur propre seuil.
   ================================================================== */

/* ————— 1 · BLOQUANT · la colonne de grille qui explose ——————————————
   `1fr` vaut `minmax(auto, 1fr)` : son minimum automatique est le
   min-content de la colonne. Un enfant qui ne sait pas se replier
   elargit donc toute la page. mobile.css a deja applique ce correctif
   aux consoles (`.shell`, bloc A) ; il manquait aux deux autres grilles. */

/* demande.html, etape 3 : <main> se rendait a 392 px dans une colonne
   de 335 (gridTemplateColumns calcule : 391,5 px). Chrome compensait en
   dezoomant la page — innerWidth passait a 411 px — donc TOUTE l'etape
   s'affichait ~9 % plus petite. Mesure : scrollWidth 411 / clientWidth
   375, 639 elements au-dela de 375 px. Regle fautive : demande.css:407. */
@media (max-width: 940px) {
  .layout { grid-template-columns: minmax(0, 1fr); }
  .layout > main,
  .layout > .aside { min-width: 0; }
}

/* connexion.html · connexion-admin.html · connexion-autocariste.html
   (et donc les trois consoles crm-*, qui y redirigent sans session) :
   a l'ouverture de l'etape 2 le document passait de 375 a 1215 px, la
   carte a 1195 px, et le bouton d'envoi sortait de l'ecran — on ne
   pouvait plus terminer la connexion depuis un telephone.
   Regle fautive : connexion*.css:138. */
@media (max-width: 900px) {
  .page { grid-template-columns: minmax(0, 1fr); }
  .page > .card { min-width: 0; }
}

/* La cause profonde du meme bloquant : les six cases du code.
   `.cbox` a bien `flex: 1; min-width: 0` (connexion*.css:99), mais un
   <input> sans attribut `size` garde une largeur intrinseque de 20
   caracteres (186,9 px mesures), et `min-width: 0` ne baisse PAS la
   contribution min-content — seule une `width` explicite le fait. D'ou
   .codes a 1161 px (6 x 186,9 + 5 x 8 de gouttiere) et la carte a 1195.
   Hors @media a dessein : au-dessus du point de rupture le rendu est
   identique au pixel pres (`flex: 1` valait deja `flex: 1 1 0`).
   Apres : .cbox 43,6 x 47,2 px, les six dans l'ecran. */
.codes { min-width: 0; }
.cbox {
  flex: 1 1 0;
  width: 0;              /* c'est CETTE ligne qui desamorce le min-content */
  min-width: 0;
  box-sizing: border-box;
  padding-inline: 0;     /* sinon la marge interieure mange les 43 px restants */
}

/* ————— 2 · HAUT · atteindre l'action ——————————————————————————————— */

/* demande.html, etape 3 : les 278 autocaristes sont peints d'un coup,
   sans plafond ni pagination. Mesure : .cc-list = 30 094 px de haut,
   le bouton « Continuer → » (#next) a y = 32 046 sur un document de
   33 489, soit ~41 ecrans de defilement avant de pouvoir avancer, et
   aucun appel a l'action colle (le seul position:sticky de la page est
   nav.nav). Un conteneur a defilement ramene le bouton a y ~2 500.
   `overscroll-behavior` evite que la page parte quand la liste bute. */
@media (max-width: 720px) {
  .cc-list {
    max-height: 60vh;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;   /* la barre reste visible : elle dit que ca defile */
    padding-right: 2px;
  }
}

/* rescue.html : sur telephone l'en-tete perd toute navigation. Seul le
   logo reste (a.nav-brand 123,3 x 34) ; `.side-tag`, les deux
   `.side-swap` (« Proposer un car » / « Trouver un car ») et
   `.org-name` sont en display:none (crm-autocariste.css:49), et la page
   n'a NI bouton hamburger (.mnav absent du DOM) NI nav.nav. Les deux
   actions principales de l'espace autocariste sont donc inatteignables.
   Le `:not(:has(#logout))` limite la reparation aux pages sans barre de
   compte : crm-autocariste.html, qui partage la feuille, a un #logout
   et quatre `.side-swap` — les remontrer la ferait deborder l'en-tete.

   Trois regles masquent ces liens, et la plus forte est header.css:155
   `.top .side-swap:not(#logout):not([href="annuaire.html"])`, soit
   (1,3,0) : `a` et `[href]` sont la pour passer devant, on arrive a
   (1,3,2). Sans eux la regle est a (1,2,1) et perd en silence — teste.
   Le commentaire de header.css parle de « bascules de demonstration
   entre espaces, superflues au doigt » : c'est vrai des consoles, ou la
   barre porte deja cloche, compte et deconnexion. Sur rescue.html ce
   sont les deux seules portes de sortie de la page. */
@media (max-width: 720px) {
  header.top:not(:has(#logout)) {
    flex-wrap: wrap;
    height: auto;
    min-height: 58px;
    row-gap: 8px;
    padding-bottom: 8px;
  }
  header.top:not(:has(#logout)) a.side-swap[href] {
    display: inline-flex;
    align-items: center;
    min-height: 36px;
    padding: 0 12px;
    border-radius: 10px;
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    background: color-mix(in srgb, var(--color-accent-200, #dbeafe) 55%, transparent);
    color: var(--color-accent-700, #1d4ed8);
  }
  /* Le logo prend toute la premiere rangee : sinon la premiere bascule se
     glissait a cote de lui (mesure : « Proposer un car » a x=239..361) et la
     seconde tombait seule a la ligne, a gauche — deux boutons jumeaux sur
     deux rangees et deux alignements. La, ils restent cote a cote. */
  header.top:not(:has(#logout)) .nav-brand { flex: 0 0 100%; }
}

/* ————— 3 · HAUT/MOYEN · cibles tactiles sous 32 px ————————————————— */

/* fiche-autocariste.html : la reglette « Zone desservie » aligne 13
   vrais <button> de 16 x 16 px (aria-label « Leuven, 26 km du depot »…)
   espaces de ~23 px entre centres : impossible a viser au pouce.
   On passe par ::before — ::after est DEJA le point visible de 9 px
   (fiche-autocariste.css:248) et l'ecraser effacerait la pastille.
   24 px, c'est le maximum sans mordre sur le voisin (pas de 23 px). */
@media (max-width: 720px) {
  #rl-cities .rl-dot::before {
    content: "";
    position: absolute;
    left: 50%; top: 50%;
    width: 24px; height: 24px;
    transform: translate(-50%, -50%);
  }
}

/* crm-autocariste.html : l'interrupteur « J'accepte les demandes » est
   le controle le plus utilise de l'espace, et le seul visible dans la
   barre laterale a 375 px. Mesure : label.sw = 321 x 24 px. mobile.css
   lui donne deja `position: relative` (bloc A) mais aucune hauteur de
   frappe ; la pastille .sw-b (42 x 24) reste centree. */
@media (max-width: 720px) {
  .sw { min-height: 44px; }
}

/* annuaire.html : dans la meme grille de recherche, les deux premiers
   champs font 30 px quand les champs de date et le tri en font 44.
   C'est mobile.css (bloc C, `.sc input { min-height: 30px }`) qui les
   plafonne ; on ne remonte QUE ceux du formulaire d'annuaire — la barre
   de recherche de l'accueil garde sa hauteur propre.
   Mesure : #s-dep et #s-pax 130,7 x 30 · #s-d1/#s-d2 136,1 x 44 ·
   #f-sort 205,1 x 44. */
@media (max-width: 720px) {
  #s-form .sc > input { min-height: 44px; box-sizing: border-box; }
}

/* connexion-autocariste.html : le bouton qui revele le mot de passe
   (61 x 31) et le lien « Mot de passe oublie ? » (129 x 20). */
@media (max-width: 720px) {
  .pw-see { min-height: 34px; padding-inline: 10px; }
  .opts .lost { display: inline-flex; align-items: center; min-height: 32px; }
}

/* confidentialite.html : le fil d'Ariane « Accueil » (50,6 x 20,6) et
   les 11 pastilles du sommaire (30 px de haut). Le sommaire est style
   dans un <style> EN LIGNE place apres ce <link> : a specificite egale
   c'est lui qui gagnerait, d'ou le `li` intercale (0,2,2 contre 0,2,1). */
@media (max-width: 720px) {
  .crumb a { display: inline-block; padding: 6px 2px; }
  .legal .toc li a { min-height: 36px; display: inline-flex; align-items: center; }
}

/* Pied de page commun (13 pages) : les liens de colonne font 30 px et
   la ligne legale 29. mobile.css les gonfle deja de 5 px en haut et en
   bas (`footer a { padding-block: 5px }`), ce qui ne suffit pas :
   20 px d'interligne + 10 = 30. On passe a une hauteur minimale reelle,
   le texte reste centre. Mesures : « Comment ca marche » 129 x 30,
   « Annuaire des autocaristes » 163 x 30, « Confidentialite » 86,3 x 29,
   « Etat du systeme » 108,4 x 29, « v1.19.0 » 43,7 x 29.
   Deux structures de pied coexistent : colonnes + ligne legale (annuaire,
   demande, statut, support…) et pied a plat ou les <a> sont enfants
   directs de <footer> (les trois pages de connexion). Les deux listees. */
@media (max-width: 720px) {
  footer .f-col li a,
  footer .f-base a,
  footer > a,
  footer .ft-statut,
  footer .ft-version {
    display: inline-flex;
    align-items: center;
    min-height: 36px;
    padding-block: 0;
  }
}

/* ————— 4 · MOYEN · mise en page cassee —————————————————————————————— */

/* connexion.html · -admin · -autocariste, onglet « Mot de passe » :
   la ligne d'aide du mode demo touche l'intitule MOT DE PASSE — ecart
   mesure 0,0 px exactement (bas du p.meter-t = haut du <label>) sur les
   trois pages. `.f + .f { margin-top: var(--space-3) }`
   (connexion*.css:57) ne s'applique pas parce que le second champ est
   enveloppe dans #pane-pwd : il n'est plus le frere direct `.f`.
   On restaure la regle d'origine avec le MEME jeton — pas un 16 px
   arbitraire qui creuserait un ecart qu'aucun autre champ n'a. */
#form .f + [id^="pane-"] { margin-top: var(--space-3, 8.4px); }

/* rescue.html : la gouttiere laterale de <main class="rp"> vaut 8,4 px
   (`padding: 0 var(--space-4) var(--space-8)`, crm-autocariste.css:932)
   et ni .rp-thread ni .rp-pair n'ont de marge propre : les paragraphes
   demarrent a 8,4 px du bord de l'ecran, la moitie du confort usuel. */
/* Depuis le RAIL UNIQUE (fin de feuille) `.rp` porte deja la gouttiere du
   site. On la reprend ici telle quelle, sinon ce bloc la rabaisse a 16 px
   quand le menu est a 14 : le texte demarrait 2 px a droite du logo. */
@media (max-width: 480px) {
  main.rp { padding-inline: var(--rail-pad); }
}

/* rescue.html : `.sect-lab` est un flex en ligne (align-items: baseline,
   crm-autocariste.css:170) qui tient encore a 375 px. Resultat : le h2
   ecrase a 175,8 px (20 px de corps, 2 lignes, 52 px de haut), le
   `.flow-hint` a cote sur 162,8 px, et le filet decoratif `.rule`
   (flex: 1) ecrase a 0 px de large — il ne decore plus rien. */
@media (max-width: 560px) {
  .sect-lab { flex-direction: column; align-items: flex-start; gap: 4px; }
  .sect-lab h2 { width: 100%; }
  .sect-lab .rule { display: none; }
  .sect-lab .flow-hint { width: 100%; }
}

/* confidentialite.html : les 3 tableaux ont 3 colonnes dans 335,4 px,
   soit 104,8 / 106,7 / 124,0 px par colonne — 1 a 3 mots par ligne et
   des rangees jusqu'a 225,6 px de haut. Le `.tbl` a DEJA overflow-x:auto
   mais il ne se declenche jamais : le tableau se comprime jusqu'a tenir
   (scrollWidth 335 === clientWidth 335). Une largeur minimale reveille
   le defilement horizontal deja prevu par la maquette.
   `.legal div.tbl` (0,2,1) passe devant le <style> en ligne (0,2,0). */
@media (max-width: 560px) {
  .legal div.tbl {
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    scrollbar-width: thin;
  }
  .legal .tbl table { min-width: 520px; }
}

/* Le pied et l'en-tete sur le MEME rail, y compris sous 430 px.
   header.css:209 ramene `.nav, .top` a `--hdr-pad: 14px` sur les petits
   ecrans, mais le bloc « pied de page sur le meme rail » plus haut dans
   cette feuille fige le pied a 24 px : a 375 px le logo du pied tombait
   10 px plus a droite que celui du menu — exactement l'ecart que ce
   bloc existe pour supprimer. Meme point de rupture que header.css. */
@media (max-width: 430px) {
  footer { --hdr-pad: 14px; }
}

/* ————— 5 · MOYEN/BAS · texte sous 12 px ————————————————————————————
   Seuls les textes A LIRE sont remontes. Les glyphes decoratifs restent
   ou ils sont : `.signals b` (fiche) et les <b> de `.pitch` (connexion)
   sont des pastilles rondes de 19 px qui contiennent un « ✓ » — les
   passer a 12 px decentrerait la coche sans rien rendre plus lisible. */
@media (max-width: 480px) {

  /* annuaire.html — intitules du formulaire (11 px), marque « Sans
     photo » des fiches sans image (10,5) et liste d'equipements
     Wi-Fi / Prises USB / Frigo / Acces PMR (11,5). */
  #s-form .sc label { font-size: 12px; }
  .c-no { font-size: 12px; }
  .c-eq span { font-size: 12px; }

  /* fiche-autocariste.html — compteurs des onglets (« 100 km », « 5 »,
     « 6 » : 11,5), sur-titres de section (11,5), etiquette « Video »
     (11,5) et graduations de la reglette (10,5 ; on s'arrete a 11 px :
     elles sont en position absolue et se chevaucheraient au-dela). */
  .sb-in a i { font-size: 12px; }
  .sec-k { font-size: 12px; }
  .vid-tag { font-size: 12px; }
  .rl-tick { font-size: 11px; }

  /* demande.html — les marqueurs « requis » (10,5), c'est-a-dire la
     seule marque qui dit quel champ ne peut pas etre saute. Selecteur
     aligne sur `.f label .rq` (demande.css:238), sinon specificite
     insuffisante. */
  .f label .rq { font-size: 12px; line-height: 16px; }

  /* statut.html — les pastilles d'etat (« Operationnel », 10,5 px) sont
     la donnee pour laquelle la page existe, et le plus petit texte de
     l'ecran. 8 occurrences visibles. */
  .st-tag { font-size: 12px; line-height: 16px; letter-spacing: 0.02em; }

  /* connexion x3 — sur-titre du bloc securite (11) et lignes d'aide
     sous les champs (11,5). */
  .sec-l { font-size: 12px; }
  .meter-t { font-size: 12.5px; line-height: 18px; }

  /* confidentialite.html — en-tetes de tableau (11,5, en capitales avec
     interlettrage : la pire combinaison sur petit ecran). */
  .legal .tbl th { font-size: 12.5px; }

  /* pied de page commun — titres de colonne (11,5). */
  footer .f-col h4 { font-size: 12.5px; }

  /* rescue.html — etiquettes de bloc (10,5), sur-titre de flux (11) et
     legende du graphique (11,5). */
  .rp-before > span { font-size: 12px; }
  .flow-kicker { font-size: 12px; }
  .rp-legend span { font-size: 12px; }
}

/* rescue.html, etiquettes des anneaux (25 / 50 / 100 / 250) :
   `font-size: 8px` est trompeur — ce sont des unites du systeme de
   coordonnees du SVG (viewBox "0 0 200 200" rendu sur 280 px), donc un
   facteur 1,4 : a l'ecran elles font deja 11,2 px, pas 8. 9 unites
   donnent 12,6 px rendus, ce qui suffit ; 11 en aurait donne 15,4 et
   aurait deborde des anneaux. */
@media (max-width: 480px) {
  #rp-rings text { font-size: 9px; }
}

/* ————— 6 · BAS · reperes manquants ————————————————————————————————— */

/* fiche-autocariste.html : la barre de sections est un carrousel
   horizontal muet. Mesure : .sb-in clientWidth 367 / scrollWidth 549,
   scrollLeft 0 — « Infos pratiques » demarre a x=345,9 et « Contact » a
   x=471,9, toutes deux hors d'un ecran de 375, et la barre de
   defilement est explicitement masquee (fiche-autocariste.css:540).
   Le masque degrade fait ce que mobile.css fait deja pour `.cats` :
   il montre que la rangee continue. Il reste visible une fois arrive au
   bout — c'est le compromis assume d'un fondu sans JavaScript. */
@media (max-width: 720px) {
  .sb-in {
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
    -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 24px), transparent);
    mask-image: linear-gradient(to right, #000 calc(100% - 24px), transparent);
  }
  .sb-in > a { scroll-snap-align: start; }
}

/* crm-admin.html : le distinctif « SUPER ADMIN » disparait sous 760 px
   (crm-admin.css:43) et avec lui la seule marque qui distingue la
   console d'administration des deux autres espaces — au telephone
   l'en-tete devient logo + cloche + deconnexion + avatar, identique a
   crm-client et crm-autocariste. Il reste de la place : trou entre
   x=137 et x=145, et entre x=303 et x=329. On le remet en plus petit. */
@media (max-width: 720px) {
  header.top .tag {
    display: inline-flex;
    align-items: center;
    height: 20px;
    padding: 0 7px;
    margin-left: 2px;
    font-size: 10px;       /* pastille de role, pas du texte courant */
    letter-spacing: 0.06em;
    white-space: nowrap;
  }
}

/* ————— 7 · index.html — INACTIF TANT QUE LE <link> MANQUE ——————————
   index.html ne charge que header.css + landing-redesign.css. Pour que
   ce qui suit s'applique, ajouter dans son <head>, APRES
   landing-redesign.css :
       <link rel="stylesheet" href="css/palette-redesign.css" />
   Sur les 13 autres pages ces regles ne changent rien : header.css:210
   masque deja ce bouton sous 430 px et mobile.css place deja le menu. */

/* BLOQUANT · debordement de 115 px, et le bouton hamburger sort de
   l'ecran : le menu mobile devient inatteignable.
   Mesure : scrollWidth 490 / clientWidth 375. button.mnav a left 448,5
   — 100 % hors champ. a.btn.btn-primary « Demander mes devis » de 244,4
   a 418,5 (174,1 px de large, 43,5 dehors).
   Cause : landing-redesign.css declare `.nav > a.btn-primary
   { display: inline-flex }` HORS media query (specificite 0,2,1) et
   ecrase la regle mobile de header.css `.nav > .btn-primary
   { display: none }` (0,2,0). La media query correspond bien
   (matchMedia('(max-width:430px)') est vrai) mais perd en specificite ;
   le `--hdr-pad: 14px` du meme bloc tombe pour la meme raison (calcule
   a 24). On repond avec la MEME specificite depuis une feuille en aval
   — pas de `!important`. mobile-nav.js clone deja l'appel a l'action
   dans le tiroir : rien n'est perdu. */
@media (max-width: 430px) {
  .nav > a.btn-primary,
  .nav > a.cta { display: none; }
  .nav, .top { --hdr-pad: 14px; gap: 8px; }
}

/* HAUT · selecteur de langue du bandeau : FR / NL / EN font 14 a 15 px
   de large sur 18,6 de haut, separes par un « / » sans marge. Les
   marges negatives verticales absorbent les 44 px pour que le bandeau
   ne grandisse pas. */
@media (max-width: 480px) {

}

/* MOYEN · les intitules de la barre de recherche du heros — l'element
   central de conversion — sont a 11 px : Depart, Destination, Aller,
   Retour, Passagers. */
@media (max-width: 480px) {
  .sb-cell label { font-size: 12px; letter-spacing: 0.02em; }
}

/* ═══════════════════════════════════════════════════════════════════════
   RAIL UNIQUE — le contenu tient EXACTEMENT la largeur du menu
   ═══════════════════════════════════════════════════════════════════════
   Mesure avant correction, a 1440 px de fenetre, bord interieur gauche
   du contenu contre celui du bandeau/menu (qui, lui, tombe a 97 px) :

     accueil ............ 73   (24 px TROP LARGE de chaque cote)
     annuaire, fiche,
     demande, connexion,
     confidentialite .... 164  (67 px trop etroit)
     support ............ 224  (127 px trop etroit)
     etat du systeme .... 354  (257 px trop etroit)

   Cinq rails differents pour une seule maquette. La cause : chaque
   feuille de page redeclare son propre `--hdr-max` (1240, 1120, 1080,
   860...) et sa propre gouttiere `--edge` (clamp 20→72 px), alors que
   l'en-tete a ete ramene en phase 6 sur 1280 / 24. Le contenu, lui, est
   reste sur les anciennes valeurs.

   On pose ici UN rail, apres toutes les feuilles, dans les memes termes
   que `header.css` : rail de 1280 px, gouttiere de 24 px, donc une
   largeur utile de 1232 px. Le texte du contenu commence a la verticale
   du logo et finit a la verticale du dernier bouton du menu.

   Deux formes, selon que le parent porte deja la gouttiere ou non. */
:root {
  --rail-max: 1280px;                                   /* = --hdr-max */
  --rail-pad: 24px;                                     /* = --hdr-pad */
  --rail-w: calc(var(--rail-max) - 2 * var(--rail-pad));       /* 1232 */
  --rail-gutter: max(var(--rail-pad), calc((100% - var(--rail-max)) / 2 + var(--rail-pad)));
}

/* A · BOITE CENTREE — le parent est <body>, sans gouttiere : c'est la
   boite qui porte le rail ET la gouttiere. `padding-inline` et non
   `padding` : les feuilles de page mettent souvent un retrait bas dans
   le raccourci (support), il doit survivre. */
.wrap,
.page {
  max-width: var(--rail-max);
  margin-inline: auto;
  padding-inline: var(--rail-pad);
  box-sizing: border-box;
}

/* B · ACCUEIL — la maquette exportee met deja 24 px sur chaque <section>
   et centre dedans un bloc de 1280 px : 24 + (1377 - 1280) / 2 = 73. Le
   bloc doit valoir la largeur UTILE, pas le rail entier. Un seul chiffre
   change, la gouttiere du parent fait le reste. `.s98` et `.s239` sont
   les deux cartes en degrade : meme regle, leur bord peint tombe donc
   lui aussi sur 97, et leur retrait interieur de 40 px est preserve. */
.s21, .s74, .s98, .s111, .s146, .s223, .s239, .s246, .s253 {
  max-width: var(--rail-w);
}

/* C · BANDEAUX PLEINE LARGEUR — fond peint d'un bord a l'autre, contenu
   sur le rail : meme formule que l'en-tete et le pied. */
.stepbar { padding-inline: var(--rail-gutter); }

/* D · fiche autocariste, barre d'action flottante (position: fixed,
   left: 50%) : sa largeur EST le rail, gouttiere comprise. */
.fixhead { width: min(var(--rail-w), calc(100% - 2 * var(--rail-pad))); }

/* EXCEPTIONS DU PIED, re-affirmees : les regles d'origine sont plus haut
   dans cette feuille, donc le bloc A ci-dessus les ecrasait (meme
   specificite, declaration plus tardive). Le pied ne pose jamais deux
   gouttieres l'une dans l'autre. */
footer > .wrap { max-width: none; margin-inline: 0; padding-inline: 0; }
.wrap > footer { padding-inline: 0; }

/* MOBILE · sous 430 px l'en-tete et le pied resserrent leur gouttiere a
   14 px (bloc plus haut). Le contenu suit, sinon le logo se decale du
   texte au moment ou la place manque le plus. */
@media (max-width: 430px) {
  :root { --rail-pad: 14px; }
}

/* RAIL UNIQUE · suite — LES CONSOLES ET LE DEPANNAGE
   `header.css:27` gardait les espaces connectes sur un rail de 1320 px
   (heritage : tableaux denses). Mesure sur rescue.html : en-tete a x=77,
   contenu a x=134 — ni l'un ni l'autre sur la verticale du site. Un seul
   rail pour tout le monde. Le contenu des consoles y GAGNE en largeur
   (1148 → 1232 px utiles), il n'y perd rien. */
.top { --hdr-max: 1280px; }

.rp {
  max-width: var(--rail-max);
  margin-inline: auto;
  padding-inline: var(--rail-pad);
  box-sizing: border-box;
}

/* RAIL UNIQUE · suite — la grille des trois consoles.
   `.shell` (crm-client 49, crm-admin 63, crm-autocariste 88) : rail de
   1320 px et gouttiere `clamp(16px, 3vw, 32px)`, donc contenu a x=85
   quand l'en-tete de la meme page tombe a x=97. Douze pixels d'ecart,
   visibles parce que le logo est juste au-dessus de la barre laterale.
   Le retrait vertical du raccourci est conserve : `padding-inline`. */
.shell {
  max-width: var(--rail-max);
  padding-inline: var(--rail-pad);
  box-sizing: border-box;
}

/* RAIL UNIQUE · le mobile — deux derniers ecarts mesures a 375 px.

   1. Le bandeau haut. `header.css:209` et le bloc 430 px plus haut ramenent
      `.nav` et `.top` a 14 px de gouttiere, mais jamais `.topbar`. Sur les
      autres pages le bandeau est masque au telephone, sur l'accueil il reste
      visible : son texte demarrait a 24 px quand le logo, juste dessous,
      tombait a 14.
   2. L'accueil. Le bloc mobile de la maquette (landing-redesign 715-725) pose
      16 px sur chaque <section>. Deux pixels de plus que le menu — assez pour
      se voir, le logo et le premier titre etant l'un sous l'autre. */
@media (max-width: 430px) {
  body > .topbar, .topbar { --hdr-pad: 14px; }
  .s20, .s28, .s59, .s73, .s97,
  .s110, .s145, .s187, .s238, .s245 { padding-inline: var(--rail-pad); }
}

/* RAIL UNIQUE · le formulaire de l'accueil.
   `section#demande` a deux enfants : le bandeau de titre (.s21, deja sur le
   rail) et le formulaire lui-meme, qui n'a AUCUN `max-width`. Il prenait donc
   toute la section moins ses 24 px : 24 → 1401, soit 1377 px de large quand le
   menu juste au-dessus en fait 1232. C'est la carte blanche la plus visible de
   la page, et elle depassait le logo des deux cotes.

   Il est passe inapercu au premier balayage parce que je cherchais les
   elements AYANT un `max-width` ou une grosse gouttiere — or celui-ci n'a ni
   l'un ni l'autre. Le bon critere pour « contenu plus large que le rail »,
   c'est un bord PEINT (fond, ombre, bordure, rayon) qui sort des bornes.

   `margin-inline: auto` est indispensable : le parent est une grille, donc
   sans marge auto l'element se colle a gauche au lieu de se centrer. */
#qp-form {
  max-width: var(--rail-w);
  margin-inline: auto;
}

/* ═══════════════════════════════════════════════════════════════════════
   EN-TETE CANONIQUE — le meme sur tout le site, a la declaration pres
   ═══════════════════════════════════════════════════════════════════════
   Jusqu'ici l'accueil et les autres pages n'avaient pas le meme BALISAGE :
   l'accueil a un vrai selecteur de langue (`.tb-lang`, trois liens FR/NL/EN)
   quand les autres portaient « FR | NL » en texte mort dans la phrase, et son
   logo est `<img> + .nv-bus` quand les autres empilaient
   `.brand-logo > .brand-bus`. On avait donc rattrape l'aspect a coups de
   regles, sans jamais rendre les deux identiques.

   Le balisage des huit pages publiques est desormais celui de l'accueil, mot
   pour mot. Restait a rendre les regles disponibles : `.tb-l`, `.tb-lang`,
   `.tb-sep`, `.tb-r` et `.nv-bus` n'existaient QUE dans
   `landing-redesign.css`, feuille que seul l'accueil charge. Elles sont
   reprises ici telles quelles — cette feuille est chargee en dernier par les
   quinze pages, donc elle gagne aussi sur le `.tb-l` concurrent de
   `fiche-autocariste.css:509`. */

body > .topbar a { color: #fff; font-weight: 600; text-decoration: none; }
body > .topbar a:hover { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
/* 1.84.1 : l'encre du bandeau de l'accueil partout (blocks.css:595 posait un blanc à 82 % en graisse 400) */
body > .topbar { color: #C9D1E3 !important; font-weight: 500; }
.topbar .tb-l { display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  min-width: 0; flex: 0 1 auto; overflow: visible; }

.topbar .tb-sep { opacity: .5; }
.topbar .tb-r { display: flex; gap: 6px; flex-wrap: wrap; margin-left: auto; align-items: center; }

.nav { height: 64px; min-height: 64px; gap: 24px;
  background: rgba(255, 255, 255, .92);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  border-bottom: 1px solid #E3E8F0; }
/* Les deux ressorts centrent le menu. `header.css` pose `margin-left:auto`
   sur `.cta`, qui absorbe tout l'espace libre et colle le menu a la marque. */
.nav > .cta, .nav > .btn:last-child { margin-left: 0; }
.nav .sp, .nav .nav-sp { flex: 1 1 auto; min-width: 0; }
.nav .nav-brand { display: flex; align-items: center; gap: 8px; color: #0B1220;
  font-weight: 800; font-size: 20px; letter-spacing: -.02em; }
.nav .nav-brand img { height: 26px; width: auto; display: block; }
.nav .nav-brand .nv-bus { font-weight: 700; font-size: 20px; letter-spacing: -.02em;
  color: #0B1220; line-height: 1; padding-top: 3px; }
.nav > a { font-size: 14px; font-weight: 500; color: #3B4457; text-decoration: none; height: 34px; }
.nav > a:hover { color: #1D4ED8; }
.nav > a.cta { font-size: 14px; font-weight: 600; color: #0B1220; padding: 0 14px;
  height: 36px; border-radius: 8px; border: 0; background: none; }
.nav > a.cta:hover { background: #F5F7FB; color: #0B1220; }
/* 14-09 : Julian tranche — le bouton reste dans l'orange de la marque, #F97316
   (le #B85000 accessible lisait brun). Note : sous du blanc c'est 2,80:1,
   sous la barre des 4,5 de WCAG AA — le jeton accessible existait pourtant
   (--flash-deep #B85000, 5,02:1, meme teinte OKLCH). Corrige a la source. */
.nav > a.btn-primary {
  font-size: 14px; font-weight: 600; color: #fff;
  background: #F97316;
  padding: 0 16px; height: 36px; border-radius: 8px; border: 0;
  display: inline-flex; align-items: center;
}
.nav > a.btn-primary:hover { background: #EA580C; color: #fff; }
/* 1.84.0 : le bouton du tiroir prenait `var(--ink, #1a1a1a)` — non défini sur statut/support → une autre encre */
.nav > .mnav { color: #0B1220; }
/* le tiroir : même encre partout (mobile.css donnait #0B1220 à 78 %, les autres #3B4457) et page courante marquée */
.mnav-i { color: #3B4457; }
.mnav-i.is-here { color: #1D4ED8; font-weight: 600; }
.mnav-i.is-here svg { opacity: 1; color: #1D4ED8; }
.nav .role { font-size: 11px; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: #1D4ED8; }

/* EN-TETE CANONIQUE · le bouton principal — le dernier ecart mesure.
   `blocks.css:598` impose a `.nav .btn-primary` un fond `var(--v)` et un
   `border-radius: 999px`, les deux en `!important` : une pastille violette.
   L'accueil ne charge PAS blocks.css, d'ou deux boutons differents pour la
   meme classe — mesure : orange #B85000 / rayon 8px sur l'accueil contre
   bleu #1D4ED8 / rayon 999px sur les huit autres.

   Le fond se corrige SANS `!important` : on redefinit `--v` SUR l'element,
   et le `background: var(--v) !important` d'en face peint la bonne couleur.
   Le rayon, lui, est une valeur litterale : il faut le meme poids et une
   specificite superieure (0,2,2 contre 0,2,0). */
.nav > a.btn-primary {
  --v: #F97316;
  --v-hi: #EA580C;
}
body .nav > a.btn-primary {
  border-radius: 8px !important;
  box-shadow: none !important;
  color: #fff !important;
}
body .nav > a.btn-primary:hover { color: #fff !important; }
/* Même écart dans le tiroir mobile (audit du 25-09) : `blocks.css:1458` peint `.mnav-cta` en
   `var(--v) !important` — bleu sur les sept pages qui chargent blocks.css (connexion ×3,
   support, statut, confidentialité, conditions), orange sur les quatre autres. Même remède
   que le bouton de la barre : `--v` redéfini SUR l'élément, sans `!important`. */
.mnav-cta { --v: #F97316; --v-hi: #EA580C; }
.mnav-cta:hover { --v: #EA580C; }

/* EN-TETE CANONIQUE · LE TELEPHONE — deux regressions mesurees a 375 px,
   toutes deux causees par ce bloc lui-meme, et la preuve qu'une feuille
   chargee en dernier doit REPRENDRE les regles mobiles qu'elle recouvre.

   1. Le bouton principal reapparaissait. Le bloc mobile plus haut (ligne
      ~826) pose `.nav > a.btn-primary, .nav > a.cta { display: none }` sous
      430 px ; ma regle canonique, ecrite APRES dans la meme feuille et a
      specificite egale, la recouvrait avec `display: inline-flex`. Mesure :
      debordement de 101 px sur l'accueil, 179 sur la fiche, 222 sur
      connexion. On repose donc la regle mobile ici, en dernier.

   2. Le bandeau haut n'existait que sur l'accueil. `blocks.css:1480` le
      masque sous 560 px — et l'accueil est la seule page qui ne charge PAS
      blocks.css. D'ou un bandeau au telephone sur l'accueil et nulle part
      ailleurs. L'accueil fait reference : on le remet partout.

   3. Restait sa hauteur : 100 px sur un telephone, soit trois lignes qui
      repoussent le contenu. Sous 560 px la phrase descriptive s'efface ; le
      selecteur de langue et l'acces autocariste, eux, restent. Deux lignes. */
@media (max-width: 560px) {
  body > .topbar { display: flex; }

}
@media (max-width: 430px) {
  .nav > a.btn-primary,
  .nav > a.cta { display: none; }
  /* Meme piege que le bouton : ma regle canonique reposait `gap: 24px` APRES
     le `gap: 8px` mobile de header.css:209. Avec quatre elements visibles
     cela faisait 48 px de trop. */
  .nav, .top { gap: 8px; }
  /* Et les liens restants partent dans le tiroir — ils y sont deja tous.
     Les pages publiques n'en gardaient qu'un (« Support », 55 px) quand
     connexion en gardait un plus long (« Besoin d'aide ? », 95 px) : d'ou
     un debordement sur les trois pages de connexion et pas ailleurs. Au
     telephone la barre ne porte plus que la marque et le hamburgeur, sur
     TOUTES les pages. */
  .nav > a:not(.brand):not(.nav-brand) { display: none; }
}
/* Audit R4 du 25-09 : sous 700 px, la barre débordait encore et le hamburgeur sortait de l'écran
   (FR 561-630 et 431-485, ES 561-650 et 431-505). « Espace client » passe au tiroir sous 710 px
   (marque + bouton + « Espace client » + hamburgeur = 680 px en espagnol, gouttière de 15 px en
   plus), et sous 560 px la barre ne garde que la marque et le hamburgeur (529 px sinon) — les
   mêmes règles qu'au-dessous de 430 px, relevées, écrites ici après la règle canonique qui les
   écraserait. Barre `.nav` seule : les en-têtes `.top` ne sont pas concernés. */
@media (max-width: 710px) {
  .nav > a.cta:not(:last-of-type) { display: none; }
}
@media (max-width: 560px) {
  .nav { --hdr-pad: 14px; gap: 8px; }
  body > .topbar { --hdr-pad: 14px; }   /* 1.85.0 : la barre bleue sur le même rail que le menu (24 px entre 431 et 560) */
  .nav > a:not(.brand):not(.nav-brand) { display: none; }
}

/* 4. La pastille de role (CLIENT / AUTOCARISTE / ADMIN) des trois pages de
   connexion ajoutait 28 px : mesure, debordement a 403 au lieu de 375. Elle
   ne porte aucune information que le titre de la page ne donne deja. */
@media (max-width: 560px) {
  .nav .role { display: none; }
}

/* ICONES — le sprite local remplace le CDN Phosphor. La regle de taille ne
   vivait que dans `landing-redesign.css`, feuille que seul l'accueil charge :
   les trois refontes (annuaire, fiche, demande) en ont besoin aussi. */
.ic { width: 1em; height: 1em; fill: currentColor; flex-shrink: 0; vertical-align: -.125em; }

/* PIED · le cas `<footer class="…">` — mesure sur demande.html : logo du pied a
   x=0, colonnes ecrasees a gauche, alors que le menu est a 97. La regle
   `footer { padding-inline: var(--hdr-gutter) }` plus haut vaut (0,0,1) ;
   `demande.css:672` ecrit `footer.footer { padding: … 0 … }` a (0,1,1) et
   l'emporte, pendant que `footer > .wrap` a deja perdu sa gouttiere. Plus
   personne ne posait le rail. On revendique le pied de page — celui qui est
   enfant direct de <body> — a (0,1,2), sans toucher aux <footer> de cartes
   imbriques (index : `footer.s230`). */
body > footer[class] { padding-inline: var(--hdr-gutter); }

/* AUTOCOMPLÉTION D'ADRESSES — places.js (accueil, annuaire, demande).
   La liste est un enfant de <body> posé en absolu sous le champ : elle
   échappe ainsi aux `overflow:hidden` des cartes (sur l'accueil, `.s37` et
   `.s27` rognaient l'ancienne liste, invisible sur un écran large). z 95 :
   au-dessus du bandeau RGPD (.rg, 90), du tiroir mobile (60) et des barres
   collantes (40). Palette du site : bleu #1D4ED8, filet #E3E8F0, encre
   #0B1220, rayon 12. */
.bb-places {
  position: absolute; z-index: 95; box-sizing: border-box;
  margin: 0; padding: 5px; list-style: none;
  max-height: 264px; overflow-y: auto; overscroll-behavior: contain;
  background: #fff; border: 1px solid #E3E8F0; border-radius: 12px;
  box-shadow: 0 18px 44px -16px rgba(11, 18, 32, .34);
}
.bb-places[hidden] { display: none; }
.bb-places li {
  position: relative; margin: 0; padding: 8px 10px 8px 33px; border-radius: 8px;
  font-size: 13.5px; line-height: 20px; font-weight: 500; color: #0B1220; cursor: pointer;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* repère : épingle Phosphor en data-URI (aucune ressource externe) */
.bb-places li::before {
  content: ""; position: absolute; left: 10px; top: 50%; width: 15px; height: 15px; margin-top: -7.5px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256' fill='%231D4ED8'%3E%3Cpath d='M128 16a88.1 88.1 0 0 0-88 88c0 75.3 80 132.17 83.41 134.55a8 8 0 0 0 9.18 0C136 236.17 216 179.3 216 104a88.1 88.1 0 0 0-88-88Zm0 56a32 32 0 1 1-32 32 32 32 0 0 1 32-32Z'/%3E%3C/svg%3E") center / contain no-repeat;
}
.bb-places li:hover, .bb-places li.is-on { background: #E8EEFF; }
@media (max-width: 480px) {
  /* cible tactile de 44 px, texte à 15 px */
  .bb-places li { padding-top: 12px; padding-bottom: 12px; font-size: 15px; }
}

/* BANDEAU · NL / EN ne sont plus des liens : ces versions n'existent pas encore
   et un lien vers « # » est un controle mort (audit 14-09). Meme aspect. */

/* ——— SELECTEUR DE LANGUE DANS LES CONSOLES (fase 72) ———————————————————————————
   Les consoles et les pages d'urgence n'ont pas le bandeau sombre : i18n.js y greffe le
   meme `.tb-lang` dans `header.top`, qui est clair. Le blanc du bandeau y serait invisible. */

header.top .tb-sep { opacity: .45; color: #9CA3AF; }

/* 1.85.2 — en móvil/tablette étroite, la barre bleue centrée (Julián, 14-10). Elle passe sur deux lignes entre 595 et
   745 px selon la langue : sous 760 px on fixe deux lignes, chacune centrée — sélecteur + phrase, puis le lien autocariste. */
@media (max-width: 760px) {
  body > .topbar { justify-content: center; text-align: center; row-gap: 8px; }
  body > .topbar .tb-l,
  body > .topbar .tb-r { flex: 1 1 100%; justify-content: center; margin-left: 0; }
}

/* 1.86.0 — la barre, d'après 21st.dev (mécaniques dans mobile-nav.js, fin du fichier).
   1. le surlignage qui glisse sous les liens (« Slide Tabs ») : derrière le texte (z-index négatif dans le contexte
      d'empilement de la barre, au-dessus de son fond), 10 px de marge de chaque côté, ressort doux ;
   2. la barre « se pose » au défilement (« Header 1 ») : en haut de page, sans filet ni ombre — elle se fond dans le
      blanc ; passé 10 px, filet et ombre douce. */
.nav > .nav-hl {
  position: absolute; z-index: -1; top: 50%; left: 0; height: 36px; margin-top: -18px;
  width: var(--hl-w, 0); transform: translateX(var(--hl-x, 0)); opacity: var(--hl-o, 0);
  border-radius: 9px; background: #EEF3FF; box-shadow: inset 0 0 0 1px rgba(29, 78, 216, .08);
  pointer-events: none;
  transition: transform .32s cubic-bezier(.22, 1, .36, 1), width .32s cubic-bezier(.22, 1, .36, 1), opacity .18s ease;
}
.nav { transition: box-shadow .22s ease, border-color .22s ease; }
html:not(.bb-defile) .nav { border-bottom-color: transparent; box-shadow: none; }
html.bb-defile .nav { border-bottom-color: #E3E8F0; box-shadow: 0 10px 28px -18px rgba(11, 18, 32, .28); }
@media (prefers-reduced-motion: reduce) {
  .nav > .nav-hl, .nav { transition: none; }
}