/* =======================================================================
   COPIE · bandeau.css · la barre elle-même · deux peaux, trois largeurs, le tiroir
   =======================================================================
   VENUE DE · le miroir de la charte, fidele au site · 0700_BRANDING_IDENTITE/07.01_Charte/tokens/bandeau.css
   RECOPIEE LE · 2026-10-07

   LE SITE PUBLIE FAIT FOI. Cette copie se corrige, jamais le site, et
   jamais le miroir depuis ici. On la remet a jour par ·

       python3 _charte/synchroniser_bandeau.py
       python3 _charte/synchroniser_bandeau.py --verifier

   Le banc `_charte/bancs/banc_bandeau.mjs` rougit des que la partie
   recopiee ci-dessous cesse d etre identique au miroir de la charte.
   ======================================================================= */

/* ==== COPIE DE LA CHARTE · debut · NE RIEN ECRIRE ICI ==== */
/* ═══════════════════════════════════════════════════════════════════════
   LE BANDEAU PALAMBUR · une seule source, pour le site ET les produits IA
   ═══════════════════════════════════════════════════════════════════════
   Victor, 23.08.2026 · « nous commençons à avoir beaucoup de contenu sur le
   site, j'aimerais que l'on améliore le bandeau supérieur et le menu, la
   navigation … comme inspiration j'aime bien le bandeau et le menu de
   Metricool », puis « il faut que le nouveau bandeau soit pour tout le site,
   Chaptal et futurs outils IA inclus ».

   CE QU'IL FAIT · une barre où chaque entrée porte SON ICÔNE et son mot,
   l'entrée de la page ouverte dans une pilule, un menu déroulant par rubrique,
   le drapeau de langue à droite, et un tiroir qui glisse depuis la droite sur
   téléphone. Trois largeurs · large (icône + mot), repliée (icônes seules,
   760 à 1100 px), tiroir (moins de 760 px).

   DEUX PEAUX, ET C'EST LA PAGE QUI CHOISIT · `jour` par défaut (le site
   d'aujourd'hui est clair) · `nuit` quand la page le déclare
   (`[data-bandeau='nuit']`, ou l'espace client qui vit en sombre depuis le
   17.08). On ne suit PAS `prefers-color-scheme` tout seul · une barre sombre
   posée au-dessus de pages claires serait un désaccord, pas un thème. Le jour
   où la charte aura sa palette de nuit, la barre est déjà prête.

   LE TRAIT SOUS LA BARRE · un pixel, toujours, et JAMAIS ROUGE. Victor l'a
   d'abord voulu rouge la nuit (23.08.2026, matin), puis l'a vu en ligne et
   tranché l'inverse le soir · « sur la version sombre, il faut enlever les
   bordures en trait rouge fin, je n'aime pas · fais les traits avec les mêmes
   couleurs que le fond clair, c'est-à-dire la couleur du fond de la grille ».
   Le site a déjà ce filet-là pour ses fonds sombres · `--rule-dark`
   (#1E293B) · on le lit chez lui plutôt que d'en inventer un. Même rôle, même
   discrétion que le gris du jour · un filet se devine, il ne se remarque pas.

   LE LOGO · le fichier officiel, jamais redessiné · le COMPLET quand la barre
   est large, la FEUILLE seule quand elle se replie · l'encre suit le fond
   (marine le jour, blanche la nuit), et c'est un FICHIER par encre, pas un
   filtre (voir Logo.astro · un filtre ne survit ni à un e-mail ni à un PDF).

   QUI LIT CE FICHIER · le site, par global.css · les produits IA (Chaptal,
   Méneval, Jacquard) par le miroir `07.01_Charte/tokens/bandeau.css`, comme
   pour colors.css et boutons.css · le site publié fait foi, le miroir se
   corrige, jamais l'inverse. Chaptal vit sous une politique de contenu par
   empreinte · il en reçoit une COPIE SCELLÉE, et son banc rougit dès qu'elle
   diverge de la source.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Les jetons de la barre · redéfinis par la peau, jamais en dur plus bas ─ */
.pal-bandeau {
  --bd-fond:        var(--pal-canvas);
  --bd-encre:       var(--pal-navy);
  --bd-encre-douce: var(--pal-muted);
  --bd-filet:       var(--pal-hairline);
  --bd-actif-fond:  color-mix(in srgb, var(--pal-ink) 6%, transparent);
  --bd-survol:      color-mix(in srgb, var(--pal-ink) 4%, transparent);
  --bd-panneau:     var(--pal-canvas-pure);
  --bd-panneau-encre: var(--pal-ink);
  --bd-panneau-douce: var(--fg2);
  --bd-h: 68px;

  position: sticky; top: 0; z-index: 50;
  background: color-mix(in srgb, var(--bd-fond) 92%, transparent);
  backdrop-filter: saturate(1.4) blur(10px);
}
.pal-bandeau::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0;
  height: 1px; background: var(--bd-filet);
}

/* LA PEAU DE NUIT · déclarée par la page, jamais devinée. */
[data-bandeau='nuit'] .pal-bandeau,
.pal-bandeau[data-bandeau='nuit'],
html[data-ec-theme]:not([data-ec-theme='clair']) .pal-bandeau {
  --bd-fond:        var(--pal-ink);
  --bd-encre:       var(--pal-canvas);
  --bd-encre-douce: var(--pal-muted-dark);
  --bd-filet:       var(--rule-dark);
  --bd-actif-fond:  color-mix(in srgb, var(--pal-canvas) 12%, transparent);
  --bd-survol:      color-mix(in srgb, var(--pal-canvas) 7%, transparent);
  --bd-panneau:     var(--pal-slate);
  --bd-panneau-encre: var(--pal-canvas);
  --bd-panneau-douce: var(--pal-text-on-dark);
}

.pal-bandeau__inner {
  display: flex; align-items: center; gap: var(--space-4);
  min-height: var(--bd-h);
}

/* ── Le logo ────────────────────────────────────────────────────────────────
   LA GARDE DU 17.08.2026 EST TENUE AUTREMENT, ET MIEUX · ce jour-là, une
   pilule posée dans la barre avait ÉCRASÉ le logo de 168 à 138 px de large,
   hauteur inchangée · une `<img>` trop à l'étroit ne rétrécit pas, elle se
   déforme, et rien ne rougit. Ici le logo est une boîte de taille FIXE avec
   `flex: none` et un fond en `contain` · il ne peut plus être ni comprimé ni
   déformé, quoi qu'on ajoute à côté. À une marque déformée on préfère une
   barre serrée.
   LE LOGO EST PEINT, PAS INSÉRÉ · une image de fond n'est demandée que si sa
   règle s'applique · la barre ne télécharge donc que le format et l'encre
   qu'elle montre. Un `<img>` caché, lui, se télécharge quand même (mesuré le
   23.08.2026). Les quatre chemins arrivent par variables, depuis
   `src/data/logos.ts` · une seule table pour le site entier.
   LA BOÎTE PORTE LE RAPPORT RÉEL DU FICHIER · 600/157 pour le complet,
   1260/1056 pour la feuille · c'est un carré imposé à la feuille qui l'avait
   rognée jusqu'au 23.08. `contain` ne déforme jamais, il laisse du vide. */
.pal-bandeau__logo {
  flex: none; display: block; width: 145px; height: 38px;
  background: var(--bd-logo-complet) left center / contain no-repeat;
}
[data-bandeau='nuit'] .pal-bandeau__logo,
html[data-ec-theme]:not([data-ec-theme='clair']) .pal-bandeau__logo {
  background-image: var(--bd-logo-complet-nuit);
}

/* ── Les entrées ────────────────────────────────────────────────────────── */
.pal-bandeau__items { display: flex; align-items: center; gap: 2px; flex: 1; list-style: none; margin: 0; padding: 0; }
/* LA DROITE EST TOUJOURS À DROITE · sur téléphone les entrées sont cachées,
   donc leur `flex: 1` ne pousse plus rien · sans cette marge, le bouton du
   menu se collait au logo (relevé par Victor sur la version en ligne · « sur
   la version mobile, le menu avec les trois traits horizontaux doit être à
   droite »). */
.pal-bandeau__droite { display: flex; align-items: center; gap: 8px; flex: none; margin-left: auto; }
.pal-bandeau__item { position: relative; }

.bd-lien {
  display: inline-flex; align-items: center; gap: 8px; white-space: nowrap;
  font-family: var(--font-head); font-weight: var(--w-med);
  font-size: var(--type-body-web); color: var(--bd-encre);
  padding: 9px 14px; border: 0; background: none; border-radius: var(--radius-pill);
  cursor: pointer; text-decoration: none;
  transition: background var(--dur-base) var(--ease-out);
}
.bd-lien:hover { background: var(--bd-survol); color: var(--bd-encre); }
.bd-lien[aria-current='page'],
.bd-lien.est-actif { background: var(--bd-actif-fond); font-weight: var(--w-semi); }
.bd-lien:focus-visible { outline: none; box-shadow: 0 0 0 0.18em color-mix(in srgb, var(--bd-encre) 28%, transparent); }
.bd-lien .ico { flex: 0 0 auto; }
.bd-chevron { width: 12px; height: 12px; opacity: .65; flex: 0 0 auto; }

/* ── L'entrée à deux lignes · la rangée des outils IA ─────────────────────
   Victor, 21.09.2026 · « il y a un écart entre les bandeau menu, il faut
   uniformiser en incluant Volney partout et j'aimerais pour plus de
   lisibilité que tu mets de façon compacte logo, nom de l'outil et
   description ultra courte, afin que le client sache où il va » · choix
   retenu, entre trois, quand on lui a montré le calcul de largeur (« deux
   lignes dans la barre »). Reprend le motif du panneau « Outils IA »
   (`.bd-item-titre` / `.bd-item-desc`, ligne 154 ci-dessus) plutôt que d'en
   inventer un second · seul l'ANCRAGE change, un `<li>` de la barre au lieu
   d'un lien de panneau. `.bd-lien__tache` est tronquée à la largeur du nom
   (elle ne l'élargit jamais) · sans ce plafond, « Cartographier l'IA
   utilisée » aurait rendu Corvisart plus large que les cinq autres réunis.
   Le site lui-même ne s'en sert pas aujourd'hui · sa barre ne montre que des
   rubriques (§ ligne 316 de Header.astro), jamais un outil à plat · seules
   les pages produit, dont la barre liste directement les six outils,
   consomment cette règle. La description vient de `OUTILS[].tache` dans
   `src/data/outils.ts`, LA source des intitulés tâche-d'abord · le bandeau
   des produits la reprend telle quelle depuis `_charte/bandeau.py`, sans la
   réécrire (même geste que `pourquoi_licone`, § du même fichier). */
.bd-lien__corps { display: flex; flex-direction: column; gap: 1px; min-width: 0; line-height: 1.15; }
.bd-lien__tache {
  font-family: var(--font-body); font-weight: var(--w-reg);
  font-size: 11px; color: var(--bd-encre-douce);
  max-width: 92px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.bd-lien[aria-current='page'] .bd-lien__tache,
.bd-lien.est-actif .bd-lien__tache { color: var(--bd-encre); }

/* ── Les menus déroulants ───────────────────────────────────────────────────
   LE PONT INVISIBLE reste · il vient de l'ancien en-tête et il gagne toujours
   sa place · un `::after` transparent couvre l'écart entre l'entrée et son
   panneau, si bien que `:hover` survit à la traversée du curseur. Sans lui, le
   panneau se referme au milieu du geste. */
.pal-bandeau__item::after {
  content: ''; position: absolute; top: 100%; left: 0; width: 100%; height: 8px;
}
.bd-panneau {
  position: absolute; top: calc(100% + 8px); left: 0; min-width: 262px;
  background: var(--bd-panneau); color: var(--bd-panneau-encre);
  border: 1px solid var(--bd-filet); padding: 6px;
  display: none; flex-direction: column; z-index: 2;
}
.pal-bandeau__item:hover > .bd-panneau,
.pal-bandeau__item:focus-within > .bd-panneau { display: flex; }

/* ── Le panneau à deux lignes · Outils IA ────────────────────────────────────
   Victor, 08.09.2026 · « il faudrai revenir a la ligne apres le nom de
   l'outils et que la description rentre en une ligne, on peut elargir aussi
   le menu déroulant ». Élargi (262 → 320px) parce que le libellé au complet
   ne rentrait plus sur une ligne dès que Méneval l'a rejoint · le nom occupe
   sa propre ligne (`.bd-item-titre`), la description la sienne, tronquée
   plutôt que de retomber sur deux lignes (même règle que le solde d'écus du
   panneau compte, lignes 458 et suivantes). */
.bd-panneau--descriptions { min-width: 320px; }
.bd-panneau--descriptions a { align-items: center; }
.bd-item-corps { display: flex; flex-direction: column; gap: 1px; min-width: 0; flex: 1; }
.bd-item-titre { color: var(--bd-panneau-encre); font-weight: var(--w-semi); }
.bd-item-desc {
  font-size: 11.5px; color: var(--bd-panneau-douce);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* ── Le panneau à groupes · Secteurs ────────────────────────────────────────
   Victor, 01.09.2026 · « reprends l'arborescence de chaptal, et du coup un
   menu déroulant à 2-3 étapes ». Les familles du catalogue Chaptal deviennent
   des COLONNES titrées, pas des sous-menus en cascade · une cascade se rate
   au survol comme au doigt, un panneau groupé se lit d'un regard. Deux
   colonnes suffisent aujourd'hui (7 pages) · la grille en absorbera
   davantage sans changer de règle le jour où les pages secteur naissent. */
.bd-panneau--groupes {
  /* Ancré à DROITE de sa rubrique · « Secteurs » vit au bout de la barre, un
     panneau large ancré à gauche filait sous le bord de la fenêtre (mesuré à
     800 px le 01.09.2026) · vers la gauche, il n'y a que la barre. */
  left: auto; right: 0;
  display: none; min-width: 0; width: max-content; max-width: min(92vw, 700px);
  grid-template-columns: repeat(2, minmax(220px, 1fr));
  gap: 2px 18px; padding: 10px 12px 12px;
}
.pal-bandeau__item:hover > .bd-panneau--groupes,
.pal-bandeau__item:focus-within > .bd-panneau--groupes { display: grid; }
.bd-groupe { min-width: 0; }
.bd-groupe__titre {
  font-family: var(--font-mono); font-size: 10.5px; letter-spacing: var(--tracking-label);
  text-transform: uppercase; color: var(--bd-panneau-douce);
  padding: 12px 12px 4px; white-space: nowrap;
}
/* LES LISTES SE LISENT EN BARLOW · Victor, 23.08.2026 au soir, quatre versions
   comparées à l'écran · « B ». Le menu du site était déjà ainsi avant que je le
   réécrive · je l'avais aligné sur la barre sans mesurer ce que faisait
   l'ancien, et le résultat pesait trois fois · police de titre, gras 500, encre
   pleine. Ici · police de TEXTE, graisse normale, gris ardoise · la barre garde
   seule la police de titre, et le contraste entre les deux devient un signal
   au lieu d'un bruit. L'entrée de la page ouverte, elle, reprend l'encre pleine
   et le demi-gras · c'est le seul endroit où le poids dit quelque chose. */
/* `button.bd-panneau__action` REJOINT LE SÉLECTEUR LE 06.09.2026 · posé pour
   « Se déconnecter » (RAP-0039 [R5]), la première entrée du panneau qui AGIT
   au lieu de MENER quelque part · un `<a href>` mentirait (aucune adresse ne
   correspond à « quitter la session »), donc un `<button>`, qui n'hérite
   d'aucun style natif de `.bd-panneau a` et doit les redemander (`width:100%`,
   `text-align:left`, `background:none`, `border:0`, `font:inherit`,
   `cursor:pointer`) pour rendre le même bloc que ses voisins. */
.bd-panneau a,
.bd-panneau button.bd-panneau__action {
  display: flex; align-items: center; gap: 10px; width: 100%;
  font-family: var(--font-body); font-weight: var(--w-reg);
  font-size: var(--type-body-web); color: var(--bd-panneau-douce); text-decoration: none;
  padding: 9px 12px; border-radius: var(--radius-pill);
  background: none; border: 0; text-align: left; cursor: pointer; font: inherit;
}
.bd-panneau a:hover,
.bd-panneau button.bd-panneau__action:hover { background: var(--bd-survol); color: var(--bd-panneau-encre); }
.bd-panneau a[aria-current='page'] { background: var(--bd-actif-fond); font-weight: var(--w-semi); color: var(--bd-panneau-encre); }
/* `[HIDDEN]` PERD FACE À `display: flex` CI-DESSUS · même défaut, même
   raison que `.bd-ecus[hidden]` plus haut · trouvé le 01.09.2026 sur
   `.bd-panneau__ecus`, resté visible et vide dans le volet compte malgré
   `hidden` posé dans le balisage tant qu'aucun solde n'est confirmé.
   Posée sur `.bd-panneau a` en général, pas juste sur `__ecus` · un futur
   lien masqué du même panneau hériterait du même piège sans cette ligne. */
.bd-panneau a[hidden] { display: none; }
.bd-panneau .ico { color: var(--pal-navy); flex: 0 0 auto; }
[data-bandeau='nuit'] .bd-panneau .ico,
html[data-ec-theme]:not([data-ec-theme='clair']) .bd-panneau .ico { color: var(--pal-canvas); }
/* « SE DÉCONNECTER », SÉPARÉE PAR UN FILET · une action qui quitte la
   session ne doit pas se lire comme une entrée de navigation de plus, un
   trait au-dessus suffit à le dire sans hiérarchiser par la couleur (le
   panneau n'a qu'une seule encre, § 6 CLAUDE.md). */
.bd-panneau__deconnexion { margin-top: 4px; border-top: 1px solid var(--bd-filet); }

/* ── Le drapeau de langue ───────────────────────────────────────────────────
   Victor, 23.08.2026 · « dans le bandeau supérieur ajoute drapeau sélection
   pays pour langue, avec drapeau de la Suisse par défaut ». Le sélecteur EST
   là · les langues qui n'existent pas se disent « bientôt » et ne se cliquent
   pas · un drapeau ne promet que ce qu'on sert, sinon il ment deux fois (au
   visiteur, et aux moteurs si on posait des `hreflang` sans pages). */
.bd-drapeau {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 6px 11px 6px 7px; border-radius: var(--radius-pill);
  border: 1px solid color-mix(in srgb, var(--bd-encre) 26%, transparent);
  background: none; color: var(--bd-encre); cursor: pointer;
  font-family: var(--font-head); font-weight: var(--w-med); font-size: var(--type-meta-web);
}
.bd-drapeau:hover { background: var(--bd-survol); }
.bd-drapeau:focus-visible { outline: none; box-shadow: 0 0 0 0.18em color-mix(in srgb, var(--bd-encre) 28%, transparent); }
.bd-drapeau svg { width: 18px; height: 18px; display: block; flex: 0 0 auto; }
.bd-langues {
  position: absolute; right: 0; top: calc(100% + 8px); min-width: 236px;
  background: var(--bd-panneau); color: var(--bd-panneau-encre);
  border: 1px solid var(--bd-filet); padding: 6px; z-index: 3;
  flex-direction: column; display: none;
}
.bd-langues[data-ouvert='oui'] { display: flex; }
.bd-langues a, .bd-langues span {
  display: flex; align-items: center; gap: 10px;
  font-family: var(--font-body); font-weight: var(--w-reg);
  font-size: var(--type-body-web);
  padding: 8px 11px; border-radius: var(--radius-pill); color: var(--bd-panneau-douce); text-decoration: none;
}
.bd-langues a:hover { color: var(--bd-panneau-encre); }
.bd-langues svg { width: 18px; height: 18px; flex: 0 0 auto; }
.bd-langues .est-choisie { background: var(--bd-actif-fond); font-weight: var(--w-semi); color: var(--bd-panneau-encre); }
.bd-langues .bientot { color: var(--bd-encre-douce); cursor: default; }
.bd-langues .bientot small {
  margin-left: auto; font-family: var(--font-mono); font-size: 10px;
  letter-spacing: var(--tracking-label); text-transform: uppercase;
}

/* ── L'ESPACE CLIENT · une icône, pas un mot ────────────────────────────────
   Victor, 23.08.2026 au soir, après contrôle en ligne · « le bouton espace
   client doit être que le petit logo à côté du bouton de langage ». Il quitte
   donc la liste des rubriques et rejoint la droite, entre le drapeau et
   « Contact » · même forme ronde que le drapeau, pour qu'ils se lisent comme
   une paire d'outils et non comme deux rubriques.
   IL GARDE SON NOM POUR QUI NE VOIT PAS L'ICÔNE · `aria-label` et `title` ·
   une icône seule sans nom est un bouton muet. */
.bd-compte {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; flex: none;
  border-radius: var(--radius-pill); color: var(--bd-encre);
  border: 1px solid color-mix(in srgb, var(--bd-encre) 26%, transparent);
  text-decoration: none;
  /* C'ÉTAIT UN LIEN, C'EST UN BOUTON DEPUIS LE 01.09.2026 · le clic ouvre
     désormais un panneau au lieu de partir tout de suite (demande de
     Victor · « un petit menu déroulant avec les onglets de l'espace
     client ») · repli des styles natifs de <button>. */
  background: none; cursor: pointer; font: inherit;
}
/* LA PASTILLE D'ÉCUS · posée le 02.09.2026, Victor · « un compteur des
   écus […] compact et visuel ». `--pal-amber` plutôt que le marine de la
   barre · un compteur de solde est un signal, pas une entrée de menu de
   plus, il mérite une couleur qui se voit du premier coup d'œil. Masquée
   par défaut (`hidden`, posée dans le balisage) · le script en bas de
   fichier ne la révèle qu'après avoir confirmé une session ET un solde. */
/* L'ALU BROSSÉ · posé le 02.09.2026 · Victor · « améliore la texture du
   surlignage orange simple […] quelque chose de métalisé, différent de ce
   qu'on a fait, comme alu brossé ». Le fond plat `var(--pal-amber)` d'avant
   était la seule surface VRAIMENT unie de tout le bandeau · les autres
   emplois de l'ambre sont déjà des teintes translucides (`color-mix … 10%`),
   pas des aplats.
   TROIS COUCHES, JAMAIS UNE IMAGE · un badge de 17 px chargé d'un PNG serait
   plus lourd que tout le reste du bandeau, et flou sur un écran Retina à
   moins de le doubler en résolution. Tout se dessine en dégradés CSS ·
     1. le GRAIN · `repeating-linear-gradient` à filets de 1 px, presque
        horizontal (98deg, pas 90 · un brossage parfaitement droit a l'air
        dessiné, un léger angle a l'air usiné) · c'est la strie qui fait
        « métal », pas juste « orange plus foncé ».
     2. le REFLET · une bande diagonale plus claire, à 120deg, qui traverse
        la pastille une seule fois · c'est ce qui fait « brossé » plutôt que
        « rayé » · un vrai alu brossé n'a qu'UN reflet qui glisse sur les
        stries, pas un dégradé uniforme.
     3. le GALBE · un dégradé vertical clair-en-haut/sombre-en-bas, pour que
        la pastille ait un volume au lieu d'être un disque plat posé sur la
        page.
   LA TEINTE RESTE L'AMBRE DE LA MARQUE · « différent de ce qu'on a fait »
   visait la TEXTURE, pas la couleur · un badge d'écus qui devient gris
   perdrait le seul signal qui le distingue des autres pastilles du site. */
/* DEUX FOIS REPOSITIONNÉE LE 02.09.2026, MÊME JOURNÉE · Victor. D’abord
   `bottom: -3px` (elle pendait sous le rond, touchant à peine son bord),
   ramenée à `bottom: 1px` (entièrement dans le cercle, ne mordant que son
   tiers inférieur) sur la première plainte (« qui morde juste la zone
   inférieure »). Mais vu en vraie situation de compte abonné et capture à
   l’appui (zone rouge) · « le compteur d’écus sur le bouton doit être plus
   bas, sur le cercle » · `1px` la rentrait trop, elle ne débordait plus du
   tout. `-6px` fait chevaucher le bord bas du cercle aux deux tiers (≈12 px
   des 17 px de la pastille restent sur le rond, ≈5 px débordent) · assez bas
   pour se lire comme posée SUR le bouton, jamais assez pour sortir du fond
   sombre du bandeau (68 px de haut ici, la pastille descend à 58 px). */
.bd-ecus {
  position: absolute; bottom: -6px; right: -1px;
  min-width: 17px; height: 17px; padding: 0 4px;
  display: flex; align-items: center; justify-content: center;
  border-radius: var(--radius-pill);
  background:
    repeating-linear-gradient(98deg,
      rgba(255,255,255,.22) 0px, rgba(255,255,255,.22) 1px,
      rgba(0,0,0,.10) 1px, rgba(0,0,0,.10) 2px),
    linear-gradient(120deg,
      transparent 32%,
      rgba(255,255,255,.55) 46%,
      rgba(255,255,255,.08) 54%,
      transparent 68%),
    linear-gradient(180deg,
      color-mix(in srgb, var(--pal-amber) 72%, white) 0%,
      var(--pal-amber) 45%,
      color-mix(in srgb, var(--pal-amber) 78%, black) 100%);
  color: #fff;
  text-shadow: 0 1px 1px rgba(0,0,0,.35);
  font-family: var(--font-mono); font-size: 10px; font-weight: var(--w-semi);
  line-height: 1;
  border: 2px solid var(--bd-fond);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.4), inset 0 -1px 1px rgba(0,0,0,.25);
}
/* `[HIDDEN]` PERD FACE À `display: flex` · trouvé le 01.09.2026, Victor sur
   capture · une pastille et une ligne VIDES mais VISIBLES dans le volet
   compte, alors que le script en bas de fichier les laisse `hidden` tant
   qu'aucun solde n'est confirmé. La règle UA `[hidden]{display:none}` a la
   plus faible spécificité qui soit · N'IMPORTE QUELLE règle d'auteur qui
   pose `display` sur cet élément la bat, y compris une règle qui existe
   pour de bonnes raisons (mettre l'icône et le texte en ligne). Les deux
   endroits qui posent `display: flex` sur un élément marqué `hidden` dans
   le balisage (`.bd-ecus` ci-dessus, `.bd-panneau__ecus` plus bas)
   regagnent donc leur droit de disparaître ici, explicitement. */
.bd-ecus[hidden] { display: none; }
/* « SE CONNECTER » · posé le 01.09.2026, Victor. Le rond de 38px devient
   une pilule le temps du mot — la classe est posée par le script (jamais
   par ce fichier seul) UNE FOIS `[data-bd-connexion]` révélé, jamais avant
   · aucun risque de retrouver ici le piège de `[hidden]` déjà documenté
   plus bas (`.bd-ecus[hidden]`) puisque rien ici ne pose `display` sur le
   `<span>` du texte lui-même — il hérite de la ligne flex du bouton, la
   règle ne touche que la largeur et l'espacement du bouton qui le porte. */
.bd-compte--connexion { width: auto; padding: 0 var(--space-3, 12px) 0 10px; gap: 6px; }
.bd-compte__texte { font-size: var(--type-meta-web, .8125rem); font-weight: var(--w-med); white-space: nowrap; }
.bd-compte:hover { background: var(--bd-survol); color: var(--bd-encre); }
.bd-compte[aria-current='page'] { background: var(--bd-actif-fond); }
.bd-compte:focus-visible { outline: none; box-shadow: 0 0 0 0.18em color-mix(in srgb, var(--bd-encre) 28%, transparent); }

/* ── Le panneau du compte · au clic, pas au survol ──────────────────────────
   `.bd-panneau--compte` reste la boîte de `.bd-panneau` (fond, filet,
   padding) mais REFUSE la règle de survol posée pour les rubriques du menu ·
   sans ce refus, un survol accidentel de l'icône l'ouvrirait aussi, en plus
   du clic. `data-ouvert` fait tout le travail, comme `.bd-langues`.

   CORRIGÉ LE 02.09.2026 · Victor, « la zone de survol ou clic n'est pas
   bonne » · avait raison. `[data-ouvert='oui'] { display:flex }` seul
   pesait (0,2,0) contre (0,3,0) pour la règle de refus ci-dessus · au
   moment RÉEL d'un clic, la souris est PAR DÉFINITION sur l'élément
   survolé, donc la règle de refus gagnait et masquait le panneau que le
   clic venait d'ouvrir. Un `.click()` synthétique (sans souris) ne
   déclenche jamais `:hover`, ce qui a caché le défaut à l'écran pendant
   les vérifications. La règle ci-dessous porte la même spécificité
   (0,3,0) que le refus et le suit dans le fichier · elle gagne toujours,
   survolé ou non. */
.pal-bandeau__item:hover > .bd-panneau--compte,
.pal-bandeau__item:focus-within > .bd-panneau--compte { display: none; }
.bd-panneau--compte { right: 0; left: auto; min-width: 240px; }
.pal-bandeau__item > .bd-panneau--compte[data-ouvert='oui'] { display: flex; }
.bd-panneau--compte .bd-panneau__vedette {
  font-weight: var(--w-semi); color: var(--bd-panneau-encre);
  border-bottom: 1px solid var(--bd-filet); margin-bottom: 4px; padding-bottom: 10px;
}
/* LE SOLDE EN CLAIR, DANS LE PANNEAU OUVERT · même donnée que la pastille,
   posée le 02.09.2026 · la couleur ambre revient ici pour que les deux
   affichages se reconnaissent comme UN seul compteur, pas deux.
   MÊME TEXTURE QUE LA PASTILLE DU BOUTON · Victor, même jour, sur le site en
   ligne · « dans le menu déroulant utilise aussi cette texture pour la ligne
   avec solde et % ». Reprend les trois couches de `.bd-ecus` (grain, reflet,
   galbe) telles quelles · le grain se répète, le reflet ne traverse qu'une
   fois quelle que soit la largeur de la pilule. Le fond n'est plus un
   aplat translucide mais un plein · le texte passe au blanc avec une ombre
   portée, comme la pastille, sinon l'ambre plein n'offre plus le contraste
   qu'avait le fond translucide d'avant. */
.bd-panneau--compte .bd-panneau__ecus {
  /* LE GRAIN RECULE, LE TEXTE AVANCE · Victor, 02.09.2026, sur le site en
     ligne · « retravailler ta texture pour qu’on voie bien le texte ». Le
     grain et le reflet du premier jet visaient l’effet alu, pas la lecture ·
     assourdis ici (.20/.09 → .14/.14, .42 → .30) pour que la pilule reste
     un fond quasi uni derrière le chiffre, l’ombre portée du texte
     renforcée (.3 → .45, rayon 1px → 2px) fait le reste du travail. */
  --bd-ecus-texture:
    repeating-linear-gradient(98deg,
      rgba(255,255,255,.14) 0px, rgba(255,255,255,.14) 1px,
      rgba(0,0,0,.14) 1px, rgba(0,0,0,.14) 2px),
    linear-gradient(120deg,
      transparent 38%,
      rgba(255,255,255,.30) 48%,
      rgba(255,255,255,.06) 58%,
      transparent 72%),
    linear-gradient(180deg,
      color-mix(in srgb, var(--pal-amber) 72%, white) 0%,
      var(--pal-amber) 45%,
      color-mix(in srgb, var(--pal-amber) 78%, black) 100%);
  background: var(--bd-ecus-texture);
  color: var(--pal-canvas-pure);
  text-shadow: 0 1px 2px rgba(0,0,0,.45);
  font-weight: var(--w-semi);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.35), inset 0 -1px 1px rgba(0,0,0,.2);
}
/* LE SURVOL PERDAIT LE FOND, PAS SEULEMENT LE RENDAIT PLUS CLAIR · trouvé le
   02.09.2026, Victor · « en mode clair, le survol est blanc, écrit en blanc,
   donc on voit rien ». `.bd-panneau a:hover` (plus haut) pose SA PROPRE
   règle `background: var(--bd-survol)`, à (0,2,1) · plus spécifique que le
   fond métallique de `.bd-panneau--compte .bd-panneau__ecus` seul (0,2,0),
   qui n’a donc jamais tenu au survol. La règle ci-dessous, elle, cible le
   survol (0,3,0) et gagne · mais elle ne reposait `color` et `filter` que
   dans le premier jet, jamais `background`, laissant `.bd-panneau a:hover`
   reprendre la main sur CETTE seule propriété. En clair, `--bd-survol` vaut
   un gris quasi transparent (4 % d’encre) sur un panneau blanc · presque
   blanc sur blanc, sous un texte resté blanc de force. Le fond se répète
   ici via `--bd-ecus-texture` (posée juste au-dessus, sur le même élément ·
   une variable CSS traverse l’état `:hover`, ce n’est pas un second calcul). */
.bd-panneau--compte .bd-panneau__ecus:hover {
  background: var(--bd-ecus-texture);
  filter: brightness(1.08);
  color: var(--pal-canvas-pure);
}
/* `:GLOBAL()` N’EXISTE QUE DANS UN BLOC `<style>` ASTRO SCOPÉ · ce fichier
   est une feuille CSS ordinaire, jamais scopée, donc `:global(.ico)` n’y
   veut rien dire · un sélecteur invalide, et le compilateur CSS écarte TOUTE
   la règle en silence au lieu de la servir dégradée. Trouvé le 02.09.2026,
   Victor · « il faut que le logo d’écus soit blanc même en mode clair » ·
   la règle qui devait le forcer en blanc n’avait jamais atteint le site
   publié, l’icône retombait donc sur `.bd-panneau .ico { color: var(
   --pal-navy) }` dès que le mode sombre (seul à écraser cette base) ne
   s’appliquait pas. Un simple `.ico`, sans l’habillage Astro copié d’un
   composant par erreur, suffit ici. */
.bd-panneau--compte .bd-panneau__ecus .ico { color: var(--pal-canvas-pure); }
/* LE CORPS À DEUX LIGNES, DANS LA MÊME PILULE · posé le 02.09.2026 · Victor ·
   « une seule ligne pour les écus […] en petit en dessous du solde ».
   `align-items: center` hérité de `.bd-panneau a` centre l'icône sur les
   DEUX lignes, pas juste la première · c'est voulu, une icône collée en
   haut aurait l'air désaxée dès que le détail paraît. */
.bd-panneau__ecus-corps { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
/* LE SOLDE, UN CRAN AU-DESSUS DU CORPS DU MENU · Victor, 02.09.2026 · « le
   texte peut être un peu plus gros ». Hérite sinon `--type-body-web` (18px)
   comme n’importe quelle entrée de `.bd-panneau a` · un solde est le seul
   chiffre du panneau, il mérite de se voir avant les mots autour. */
.bd-panneau__ecus-corps > [data-bd-ecus-texte] { font-size: 1.15em; }
/* MASQUÉE PAR DÉFAUT (`hidden` posé dans le balisage), RÉVÉLÉE PAR LE
   SCRIPT · même piège que `.bd-ecus[hidden]` plus haut si on omettait cette
   ligne (`[hidden]` perd face à un `display` d'auteur). Taille et graisse en
   retrait · c'est un DÉTAIL, le solde au-dessus reste le seul gros chiffre.
   COULEUR REVUE LE 02.09.2026 · le mélange ambre d'avant supposait un fond
   translucide · sur le plein métallique posé le même jour, un blanc atténué
   reste le seul choix qui tienne le contraste aux deux tailles. */
.bd-panneau__ecus-detail {
  display: block; font-size: 11px; font-weight: var(--w-reg);
  color: rgba(255,255,255,.82); text-shadow: 0 1px 1px rgba(0,0,0,.25);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.bd-panneau__ecus-detail[hidden] { display: none; }

/* ── Le bouton du tiroir ────────────────────────────────────────────────────
   ZONE TACTILE HÉRITÉE DU 16.08.2026 · on agrandit la BOÎTE, pas le dessin ·
   44 × 44 réels (WCAG 2.5.8 demande 24, le confort commence à 44), obtenus par
   le rembourrage, et rendus au voisinage par la marge négative. Surtout PAS un
   `::after` transparent · il laisserait `getBoundingClientRect()` répondre
   40 × 32, et un correctif qu'aucun instrument ne voit ne se prouve pas. */
/* 48 × 48 RÉELS · au doigt, c'est la commande la plus utilisée du site. WCAG
   2.5.8 demande 24, Apple recommande 44, Victor demande « assez gros ou en
   tout cas que la zone tactile et de clic soit assez grande » · on prend 48.
   On agrandit la BOÎTE, pas le dessin · l'icône garde ses 22 px. Surtout pas
   un `::after` transparent · il laisserait `getBoundingClientRect()` répondre
   la petite taille, et un agrandissement qu'aucun instrument ne voit ne se
   prouve pas (leçon du 16.08.2026). */
.bd-tiroir-bouton {
  display: inline-flex; align-items: center; justify-content: center;
  background: none; border: 0; cursor: pointer; color: var(--bd-encre);
  width: 48px; height: 48px; padding: 0; margin-right: -6px;
  border-radius: var(--radius-pill); flex: none;
}
.bd-tiroir-bouton:hover { background: var(--bd-survol); }
.bd-tiroir-bouton:focus-visible { outline: none; box-shadow: 0 0 0 0.18em color-mix(in srgb, var(--bd-encre) 28%, transparent); }
.bd-tiroir-bouton svg { width: 24px; height: 24px; display: block; }

/* ── Le tiroir ──────────────────────────────────────────────────────────────
   Il glisse DEPUIS LA DROITE, comme chez Metricool. Il est toujours dans le
   HTML · `inert` et `visibility` le retirent du parcours au clavier quand il
   est fermé, ce qu'un simple `translate` ne ferait pas (on peut tabuler dans
   un panneau hors écran, et c'est une des pannes d'accessibilité les plus
   difficiles à voir · elle ne se voit pas, justement). */
.bd-voile {
  position: fixed; inset: 0; background: color-mix(in srgb, var(--pal-ink) 45%, transparent);
  opacity: 0; visibility: hidden; transition: opacity var(--dur-base) var(--ease-out), visibility var(--dur-base);
  z-index: 60;
}
.bd-tiroir {
  position: fixed; top: 0; right: 0; bottom: 0; width: min(320px, 88vw);
  background: var(--pal-canvas-pure); color: var(--pal-ink);
  transform: translateX(100%); visibility: hidden;
  transition: transform var(--dur-base) var(--ease-out), visibility var(--dur-base);
  z-index: 61; overflow-y: auto; overscroll-behavior: contain;
  padding: 10px 10px 28px; font-family: var(--font-body);
}
.bd-tiroir[data-ouvert='oui'] { transform: translateX(0); visibility: visible; }
.bd-voile[data-ouvert='oui'] { opacity: 1; visibility: visible; }
.bd-tiroir__tete { display: flex; justify-content: flex-end; padding: 4px 4px 8px; }
.bd-tiroir__groupe {
  font-family: var(--font-mono); font-size: 10.5px; letter-spacing: var(--tracking-label);
  text-transform: uppercase; color: var(--pal-muted); padding: 14px 12px 4px;
}
/* LES ONGLETS DU COMPTE, DANS LE TIROIR · en retrait sous « Espace client »,
   posé le 02.09.2026 · icône plus petite, texte plus discret, comme un
   sous-niveau plutôt qu'une rubrique de plus. */
.bd-tiroir__sous {
  padding-left: 34px !important;
  color: var(--pal-muted) !important;
}
/* AC33 · 14.09.2026 · comme les icônes du compte, celles du tiroir sont
   dans une feuille globale : aucun habillage Astro à compiler ici. */
.bd-tiroir__sous .ico { width: 17px; height: 17px; }

/* La FAMILLE du panneau Secteurs, dans le tiroir · même voix que la rubrique,
   un cran plus discrète · en retrait, sans capitales pleines, pour que les
   deux niveaux se distinguent d'un regard dans une colonne étroite. */
.bd-tiroir__famille {
  font-family: var(--font-mono); font-size: 10px; letter-spacing: var(--tracking-label);
  text-transform: uppercase; color: var(--pal-muted); opacity: .75;
  padding: 10px 12px 2px 22px;
}
.bd-tiroir a, .bd-tiroir button.bd-tiroir__action {
  display: flex; align-items: center; gap: 10px;
  font-size: var(--type-body-web); font-weight: var(--w-reg);
  color: var(--fg2); text-decoration: none;
  padding: 10px 12px; border-radius: var(--radius-pill);
  background: none; border: 0; text-align: left; cursor: pointer; font-family: inherit; width: 100%;
}
.bd-tiroir a:hover, .bd-tiroir button.bd-tiroir__action:hover { background: color-mix(in srgb, var(--pal-ink) 5%, transparent); color: var(--pal-ink); }
.bd-tiroir a[aria-current='page'] { background: var(--bd-actif-fond); font-weight: var(--w-semi); color: var(--pal-ink); }
.bd-tiroir .ico { color: var(--pal-navy); flex: 0 0 auto; }
/* LA DÉCONNEXION, AU TIROIR · même filet séparateur que la version panneau
   (`.bd-panneau__deconnexion`), pour ne pas la confondre avec un onglet de
   plus du compte. */
.bd-tiroir__deconnexion { margin-top: 4px; border-top: 1px solid var(--pal-hairline); }
.bd-tiroir__filet { height: 1px; background: var(--pal-hairline); margin: 10px 12px; }
.bd-tiroir__langue {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px; font-size: var(--type-body-web); color: var(--pal-slate-soft);
}
.bd-tiroir__langue svg { width: 18px; height: 18px; flex: 0 0 auto; }
.bd-tiroir__langue b {
  margin-left: auto; font-family: var(--font-mono); font-size: 11px;
  background: color-mix(in srgb, var(--pal-ink) 6%, transparent); padding: 2px 8px;
}
.bd-tiroir .btn-primary { width: 100%; margin: 12px 0 4px; }

/* ── Les trois largeurs ─────────────────────────────────────────────────── */
/* Téléphone · tout est dans le tiroir · seuls le logo (à gauche) et le bouton
   du menu (à droite) restent. */
.pal-bandeau__items, .pal-bandeau .bd-drapeau,
.pal-bandeau .bd-compte { display: none; }

@media (min-width: 760px) {
  /* Replié · les icônes restent, les mots partent · c'est le geste de
     Metricool, et c'est ce qui rend les icônes obligatoires · une barre
     d'icônes sans mots ne tient que si chaque icône se reconnaît. Le mot
     revient en infobulle et dans le menu déroulant. */
  .pal-bandeau__items { display: flex; }
  .pal-bandeau .bd-drapeau { display: inline-flex; }
  .pal-bandeau .bd-compte { display: inline-flex; }
  .bd-lien__mot { display: none; }
  .bd-lien__tache { display: none; }
  .bd-lien { padding: 10px 12px; }
  .bd-lien .bd-chevron { display: none; }
  .pal-bandeau__logo { width: 38px; height: 32px; background-image: var(--bd-logo-feuille); }
  [data-bandeau='nuit'] .pal-bandeau__logo,
  html[data-ec-theme]:not([data-ec-theme='clair']) .pal-bandeau__logo {
    background-image: var(--bd-logo-feuille-nuit);
  }
}

@media (min-width: 1100px) {
  /* Large · le mot revient, et le logo complet avec lui. */
  .bd-lien__mot { display: inline; }
  .bd-lien__tache { display: block; }
  .bd-lien { padding: 9px 14px; }
  .bd-lien .bd-chevron { display: block; }
  .pal-bandeau__logo { width: 145px; height: 38px; background-image: var(--bd-logo-complet); }
  [data-bandeau='nuit'] .pal-bandeau__logo,
  html[data-ec-theme]:not([data-ec-theme='clair']) .pal-bandeau__logo {
    background-image: var(--bd-logo-complet-nuit);
  }
  .pal-bandeau .bd-tiroir-bouton { display: inline-flex; }
}

@media (prefers-reduced-motion: reduce) {
  .bd-tiroir, .bd-voile { transition: none; }
}
/* ==== COPIE DE LA CHARTE · fin ==== */
/* ═══════════════════════════════════════════════════════════════════════════
   COMPLÉMENT PRODUITS · ce que le site n'a pas besoin d'écrire, et les
   produits si
   ═══════════════════════════════════════════════════════════════════════════
   ÉCRIT À LA MAIN. `synchroniser_bandeau.py` ne remplace que ce qui est
   AU-DESSUS du marqueur de fin · ce bloc-ci lui survit, passage après passage.

   IL N'ANNULE RIEN DE LA COPIE · il ajoute ce que la copie suppose et qu'une
   page produit ne fournit pas. Toute règle d'ici qui contredirait la copie
   serait une divergence déguisée en réglage · si une valeur de la barre doit
   changer, elle change CHEZ LE SITE.

   CINQ ÉCARTS, ET RIEN D'AUTRE ·

   1 · PAS DE GRILLE `.container`. Le site pose `.container` SUR
       `.pal-bandeau__inner` · les pages produits n'ont pas cette classe (elles
       ont `.wrap`, qui ne porte pas le rembourrage latéral). La barre reçoit
       donc son propre couloir, `.pal-bandeau__couloir`.
       LA PHRASE NE S'ÉCRIT PLUS EN BALISAGE, ET C'EST UNE PANNE DATÉE · le
       23.08.2026 au soir elle nommait la classe sous la forme d'un attribut
       ouvert, coupé par un retour à la ligne. Cette feuille est INCORPORÉE
       dans trois livrables ; `_charte/feuilles.py` y moissonnait les classes
       EMPLOYÉES par une expression où la classe d'exclusion traverse les
       retours de ligne, sur un texte dont les blocs `<style>` n'étaient pas
       retirés. Elle a donc récolté « container » comme classe utilisée et
       jamais définie, et `jomini_hors_ligne.html` est sorti NON PUBLIABLE à
       cause d'un commentaire. La moisson a été corrigée le même jour · elle
       retire désormais les blocs `<style>`. On garde LES DEUX gardes · un
       commentaire de feuille n'a aucune raison de porter un attribut ouvert.

   2 · PAS DE SCRIPT, ET C'EST UNE DÉCISION. Le site ouvre son tiroir et son
       sélecteur de langue en JavaScript. Les pages produits ne le peuvent pas ·
       trois d'entre elles vivent sous une politique de contenu par empreinte
       (`outil_chaptal.html`, `jomini_hors_ligne.html`, `apercu_jomini.html`),
       où tout script ajouté périme la politique ; toutes s'ouvrent en `file:`,
       où le harnais de prévisualisation ne vérifie que le synchrone au
       chargement. Le tiroir et le menu de langue sont donc des `<details>`.
       CE N'EST PAS UN REPLI, C'EST PLUS SÛR QUE `inert` · le contenu d'un
       `<details>` fermé n'est pas rendu du tout · ni au clavier, ni au lecteur
       d'écran, ni à `document.activeElement`. La leçon du site (« un panneau
       hors écran mais tabulable est une panne qu'on ne voit pas ») est donc
       tenue par le navigateur, sans une ligne de script.
       CE QU'ON PERD, ET QU'ON DIT · la fermeture au clic sur le voile et à la
       touche Échap demandent du script · elles n'existent pas ici. Le tiroir se
       ferme par SON bouton, qui devient la croix.

   3 · CERTAINES PAGES VIVENT EN SOMBRE. La peau se déclare par
       `data-bandeau="nuit"` sur `<html>` · la copie sait déjà la peindre. Ce
       qui manque, c'est que la page sombre ne repeigne pas la barre par-dessus ·
       d'où les quelques `.pal-bandeau` qui reprennent leurs jetons ci-dessous.

   4 · LE MOT `.ico` NE NOUS APPARTIENT PAS, ET UNE PAGE PRODUIT L'AVAIT DÉJÀ.
       Le site n'a qu'un seul `.ico` · le sien. Les pages produits sont des
       applications écrites avant le bandeau, et `05_CHAPTAL/outil_chaptal.html`
       posait `.ico { height: 36px; width: 36px; border: 1px solid …;
       border-radius: 9999px … }` pour la pilule de ses modes d'affichage.
       Cette règle-là s'appliquait AUSSI aux cinq icônes de la barre.
       MESURE DU 2026-08-23, Chrome sans tête, à 900 px · les entrées de la
       barre faisaient 123 px chacune au lieu de 44, le couloir réclamait
       908 px pour 900, et la page glissait de côté. Sur les quatre autres
       pages, au même moment, 44 px et rien qui déborde.
         UNE CLASSE COURTE N'APPARTIENT À PERSONNE · UNE FEUILLE COMMUNE POSÉE
         DANS UNE PAGE QUI EXISTAIT AVANT ELLE HÉRITE DE SES MOTS.
       La barre reprend donc la géométrie que ses attributs déclarent (20 px,
       écrits dans le `<svg>` par `_charte/bandeau.py`) et annule ce qu'une
       page a pu poser autour. LA CLASSE EST DOUBLÉE À DESSEIN (`.ico.ico`) ·
       elle porte alors trois classes de spécificité et gagne quel que soit
       l'ORDRE de chargement des feuilles · une victoire qui dépend de l'ordre
       est une victoire qu'on reperd le jour où quelqu'un déplace un `<link>`.

   5 · L'ÉCHELLE DU TEXTE NE RESPIRE PAS COMME CHEZ LE SITE. IMPORTANT DU
       24.08.2026 (TOUR 2). Le site écrase `--type-body-web` et
       `--type-meta-web` dans `global.css` par deux `clamp()` qui les font
       RÉTRÉCIR sous 1200 px · `_charte/palambur.css`, la copie de ces jetons
       pour les produits, garde encore les valeurs FIXES d'avant cet écran
       (18px / 14px). Mesure du 24.08.2026, Chrome sans tête, à 375 px sur
       `apercu_corvisart.html` ET `outil_chaptal.html` · le tiroir des
       produits se lisait 18px, celui du site 15px · trois pixels de plus
       (20 %) dans le MÊME composant.
       ON NE TOUCHE PAS À `palambur.css` · ces deux jetons y servent toute la
       maquette produits, bien au-delà du bandeau (`apercu.css`, la maquette
       de Méneval…) · les faire respirer PARTOUT demanderait de rejouer
       chaque page, pas seulement la barre. La barre reprend donc les deux
       `clamp()` du site EN LOCAL, sur les deux éléments qui la portent ·
       `.pal-bandeau` (dont `.bd-langues` et `.bd-panneau` héritent, étant
       ses descendants) et `.bd-tiroir`, qui vit HORS de `.pal-bandeau` (voir
       § 2 du fichier plus bas) et n'hériterait de rien sans sa propre ligne.
       CHAPTAL EN HÉRITE SANS RIEN DE PLUS · son monobloc INCORPORE cette
       feuille entière (voir `bandeau.py`, `rendre(incorpore=True)`), donc
       cette règle y arrive aussi. La région « RÉGLAGES DE CHAPTAL », posée à
       part par `poses/poser_bandeau_chaptal.py`, continue de lire
       `--type-body-web`/`--type-meta-web` FIXES depuis `palambur.css` sur
       `:root` · ce n'est pas un problème ici, parce qu'une règle qui cible
       directement un élément (`.pal-bandeau`, `.bd-tiroir`) gagne TOUJOURS
       sur l'héritage venu d'un ancêtre (`:root`), quel que soit l'ORDRE des
       deux blocs dans la page.

   LE COULOIR N'A PAS DE LARGEUR MAXIMALE, ET C'EST DÉLIBÉRÉ · le site cale sa
   barre sur `.container` (1200 px), parce que tout son contenu vit dans cette
   colonne. Les pages produits, non · la barre de `apercu.css` (`.nav`) et celle
   de la maquette de Méneval (`.barre`) courent d'un bord à l'autre. Une barre
   de 1200 px centrée au-dessus d'une application pleine largeur aurait annoncé
   une colonne qui n'existe pas. La barre reprend donc le seul chiffre du site
   qui la concerne · son rembourrage latéral, `clamp(22px, 6vw, 64px)`.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Le socle · la barre ne dépend d'aucune remise à zéro de la page ────────
   Les cinq produits n'ont pas la même feuille · `apercu.css` pose
   `box-sizing: border-box` partout, la maquette de Méneval le pose chez elle,
   la page hors ligne de Jomini ne le pose nulle part. Une barre dont la
   hauteur change selon la page où on la pose n'est pas la même barre. */
.pal-bandeau, .pal-bandeau *, .pal-bandeau *::before, .pal-bandeau *::after,
.bd-tiroir, .bd-tiroir *, .bd-voile { box-sizing: border-box; }

.pal-bandeau__couloir {
  width: 100%; margin-inline: auto;
  padding-inline: clamp(22px, 6vw, 64px);
}

/* ── Écart 4 · les icônes de la barre ne prennent pas le `.ico` de la page ──
   Voir l'en-tête · panne mesurée le 23.08.2026 sur `outil_chaptal.html`. */
.pal-bandeau .ico.ico,
.bd-panneau .ico.ico,
.bd-langues .ico.ico,
.bd-tiroir .ico.ico {
  width: 20px; height: 20px; min-width: 0; min-height: 0;
  border: 0; border-radius: 0; background: none; box-shadow: none;
  margin: 0; padding: 0; place-items: normal;
}

/* ── Écart 5 · l'échelle du texte suit le site, pas la valeur fixe de
   `palambur.css` · voir l'en-tête. `.bd-tiroir` a SA propre ligne parce qu'il
   vit hors de `.pal-bandeau` (§ 2 plus bas) et n'hériterait de rien sans
   elle. */
.pal-bandeau, .bd-tiroir {
  --type-body-web: clamp(15px, 1.5vw, 18px);
  --type-meta-web: clamp(13px, 1.1vw, 14px);
}

/* ── LE MOT REVIENT PLUS TARD QUE SUR LE SITE, ET C EST MESURE ──────────────
   La copie fait revenir le mot a 1100 px. Chez les produits, cinq PRENOMS
   (Jomini, Corvisart, Jacquard, Méneval, Chaptal) tiennent la place de trois
   rubriques courtes du site (« IA », « Web », « Secteurs »), et le logo complet
   reprend 107 px a la meme ligne.

   MESURE DU 2026-08-23 · page temoin fabriquee, Chrome sans tete, seuil des
   mots deplace a la main et `scrollWidth` releve a chaque largeur ·

       largeur   place disponible   place demandee par les mots   verdict
       1100 px          873                    959               deborde
       1280 px          946                    959               deborde de 83
       1366 px        1'032                    959               tient (73 de reste)
       1440 px        1'106                    959               tient

   Le seuil est donc a 1366 px · la plus etroite des largeurs ou les mots
   tiennent, et par ailleurs la largeur du portable le plus repandu. Entre 760
   et 1366, la barre des produits reste en icones seules · c est le geste
   « replie » que la copie decrit, simplement tenu plus longtemps.

   ON NE TOUCHE PAS AUX TAILLES DE LA COPIE · ce serait une divergence deguisee
   en reglage, et le prochain passage de `synchroniser_bandeau.py` la rendrait
   invisible. On decale le SEUIL, ici, sous le marqueur de fin, et on le dit.
       UNE BARRE QUI DEBORDE NE SE VOIT PAS SUR LA CAPTURE · elle se voit au
       `scrollWidth`. C est le banc qui la trouve, pas l oeil. */
@media (min-width: 1100px) and (max-width: 1365.98px) {
  .pal-bandeau .bd-lien__mot { display: none; }
  .pal-bandeau .bd-lien { padding: 10px 12px; }
  .pal-bandeau__logo { width: 38px; height: 32px; background-image: var(--bd-logo-feuille); }
  [data-bandeau='nuit'] .pal-bandeau__logo { background-image: var(--bd-logo-feuille-nuit); }
}

/* Le sprite d'icônes que le générateur pose en tête de la barre · il ne se voit
   pas, il se cite. `display:none` sur le porteur n'empêche pas les `<use>` qui
   le citent de peindre · c'est la propriété qui rend le sprite en ligne
   possible. */
.bd-symboles { display: none; }

/* ── Les boîtes `<details>` ─────────────────────────────────────────────────
   `display:flex` et non `display:contents` · avec `contents`, la boîte n'a plus
   de bloc à elle, et le panneau de langue en `position:absolute` n'aurait plus
   de repère pour se placer (il remonterait au couloir). */
.bd-boite { display: flex; align-items: center; position: relative; }
.bd-boite > summary { list-style: none; cursor: pointer; }
.bd-boite > summary::-webkit-details-marker { display: none; }
.bd-boite > summary::marker { content: ''; }

/* Le menu de langue · ouvert par sa boîte, plus par un attribut posé au clic. */
.bd-langues-boite[open] > .bd-langues { display: flex; }

/* LE PANNEAU DU COMPTE · même mécanique, posé le 31.08.2026. Le site l'ouvre
   au clic via un script (`data-ouvert`, Header.astro) · les produits n'ont
   pas ce script (CSP par empreinte, `bandeau.py` ne pose que du HTML/CSS),
   donc la même boîte `<details>` sans script que les langues et le tiroir.
   `bandeau.py` avait laissé `bd-compte` en simple lien jusqu'ici · Victor,
   sur Chaptal · « le bouton compte ne déploie pas le menu ». */
.bd-compte-boite[open] > .bd-panneau--compte { display: flex; }

/* Sur téléphone la copie cache `.bd-drapeau` · si la BOÎTE restait, elle
   laisserait une gouttière de 8 px entre le logo et le bouton du menu, et le
   bouton ne serait plus tout à fait à droite (le défaut que Victor a relevé sur
   la version en ligne le 23.08.2026). On cache la boîte, pas seulement son
   bouton. */
.pal-bandeau .bd-langues-boite { display: none; }
@media (min-width: 760px) {
  .pal-bandeau .bd-langues-boite { display: flex; }
}

/* ── Le tiroir, sans script ─────────────────────────────────────────────────
   FERMÉ · les jetons que la COPIE pose déjà plus haut sur `.bd-tiroir` et
   `.bd-voile` (`transform: translateX(100%); visibility: hidden`, `opacity:
   0; visibility: hidden`) · pas de `display:none` ici. `visibility:hidden`
   sort l'élément du parcours au clavier tout autant que `display:none` ·
   ni peint de façon utile, ni tabulable, ni lu par un lecteur d'écran.
   OUVERT · l'état se lit sur le `<details>` de la barre, par `:has()`, en
   pilotant CES MÊMES jetons.

   IMPORTANT DU 24.08.2026 (TOUR 2) · LE TIROIR NE GLISSAIT PAS, IL
   APPARAISSAIT D'UN COUP. La version précédente fermait par `display:none`
   PUIS ouvrait par `display:block` + `transform:translateX(0)` en un seul
   passage · une transition ne peut pas démarrer sur un élément qui n'a pas
   de boîte (`display:none`), et le tiroir arrivait donc déjà en place, la
   `transition: transform 0.15s` de la copie ne trouvant jamais de point de
   départ à animer. Mesuré le 24.08.2026 sur `02_CORVISART/apercu_corvisart.
   html` à 375 px · au moment même où `[open]` est posé, `transform` valait
   déjà `matrix(1,0,0,1,0,0)` (= translateX(0)), et 400 ms plus tard,
   rigoureusement identique. En ne touchant plus qu'à `transform` et
   `visibility` (déjà les jetons de repos de la copie), la glissade revient
   ET la garde d'accessibilité qui avait motivé `display:none` reste tenue.

   POURQUOI LE TIROIR N EST PAS DANS LE `<details>` · `.pal-bandeau` porte
   `backdrop-filter`, et un `backdrop-filter` non nul fait de l element un BLOC
   CONTENANT pour ses descendants en `position: fixed`. Mesure du 2026-08-23,
   tiroir pose dans la barre · 320 x 68 au lieu de 320 x 812, voile de 375 x 68
   au lieu de la fenetre entiere.
       UN `position: fixed` NE SE FIE PAS A LA FENETRE · IL SE FIE AU PREMIER
       ANCETRE QUI A DECIDE D EN DEVENIR UN, ET `backdrop-filter` LE DECIDE
       SANS LE DIRE.
   Le site les pose deja hors de son `<header>` · on fait pareil. */
.pal-bandeau:has(.bd-tiroir-boite[open]) ~ .bd-tiroir {
  transform: translateX(0); visibility: visible;
}
.pal-bandeau:has(.bd-tiroir-boite[open]) ~ .bd-voile { opacity: 1; visibility: visible; }

/* LA BARRE PASSE AU-DESSUS DU TIROIR QUAND IL EST OUVERT · sans quoi le bouton
   qui l a ouvert (et qui seul peut le refermer) disparaitrait sous le panneau ·
   la barre a `z-index: 50`, le tiroir `61`. Un tiroir qu on ne peut plus fermer
   n est pas un tiroir, c est une page de plus. */
.pal-bandeau:has(.bd-tiroir-boite[open]) { z-index: 62; }

/* LE BOUTON DEVIENT LA CROIX · un seul element, deux visages. Un `<details>`
   n accepte qu un `<summary>` · la fermeture ne peut donc pas etre un second
   bouton. Il ne bouge pas de place · la barre reste au-dessus, et la croix
   tombe exactement ou etaient les trois traits. Il garde ses 48 x 48 reels. */
.bd-tiroir-boite > summary .bd-ico-fermer { display: none; }
.bd-tiroir-boite[open] > summary .bd-ico-menu { display: none; }
.bd-tiroir-boite[open] > summary .bd-ico-fermer { display: block; }

/* La tete du tiroir est VIDE ici · elle garde la place que la barre occupe
   par-dessus, sans quoi la premiere entree serait cachee.
   MINEUR DU 24.08.2026 (TOUR 2), REPRIS AVEC UNE RÉSERVE · le remède proposé
   était `min-height: var(--bd-h);`, tel quel · ESSAYÉ, ET REFUSÉ AVEC PREUVE.
   `--bd-h` est déclaré sur `.pal-bandeau` (la copie, plus haut) · un jeton
   personnalisé n'hérite que vers les DESCENDANTS DU DOM de l'élément où il
   est posé. `.bd-tiroir` est un FRÈRE de `<header class="pal-bandeau">`
   (posé APRÈS `</header>`, voir la note juste au-dessus · c'est justement ce
   qui règle le `backdrop-filter`) · `.bd-tiroir__tete` ne descend donc pas de
   `.pal-bandeau`, et `var(--bd-h)` seul y résout à RIEN, pas à 68px · la
   première rubrique du tiroir serait retombée sous la barre, exactement la
   panne que le remède voulait fermer, causée cette fois par le remède
   lui-même. On garde donc le repli explicite `var(--bd-h, 68px)` · si un
   jour `--bd-h` se déclare plus haut (`:root`, `<body>`), il gagne ·
   aujourd'hui il ne se déclare nulle part sur ce côté de l'arbre, et c'est le
   repli qui tient la place. Le nombre reste écrit deux fois · c'est le prix
   de deux sous-arbres qui ne se touchent pas sans script. */
.bd-tiroir__tete { min-height: var(--bd-h, 68px); }

/* ── Une entrée qui ne mène nulle part ──────────────────────────────────────
   Même règle que les langues qui n'existent pas · un lien mort coûte deux fois
   (au visiteur qui clique, et à celui qui croit le produit disparu). Une entrée
   dont la page voisine n'est pas sur le disque se dit « bientôt » et ne se
   clique pas · elle n'est ni un lien, ni un bouton, donc pas dans le parcours
   au clavier. */
.bd-lien.est-bientot { color: var(--bd-encre-douce); cursor: default; }
.bd-lien.est-bientot small {
  font-family: var(--font-mono); font-size: 10px;
  letter-spacing: var(--tracking-label); text-transform: uppercase;
}

/* ── Le produit qu'on est en train de lire, sur un fichier unique ───────────
   BLOQUANT DU 24.08.2026 (TOUR 2) · `_etat_produit` (dans `bandeau.py`) rend
   cette entrée en `<span>`, jamais en « bientôt » · elle porte déjà
   `.est-actif` (la pilule, `.bd-lien[aria-current='page'], .bd-lien.est-actif`
   dans la copie), `.est-ici` n'ajoute que le curseur · une pilule qui ne mène
   nulle part ne doit pas se prétendre cliquable. */
.bd-lien.est-ici { cursor: default; }

/* Le tiroir tient la même règle · sa version de l'entrée « ici » n'a pas de
   classe dans la copie (le tiroir n'a pas de pilule active), donc elle reprend
   à la main les jetons de `.bd-tiroir a[aria-current='page']` juste au-dessus,
   sur un `<span>` plutôt qu'un `<a>` — pas de lien, pas de curseur pointeur. */
.bd-tiroir__ici {
  display: flex; align-items: center; gap: 10px; cursor: default;
  font-size: var(--type-body-web); font-weight: var(--w-semi);
  color: var(--pal-ink); background: var(--bd-actif-fond);
  padding: 10px 12px; border-radius: var(--radius-pill);
}
.bd-tiroir__ici .ico { color: var(--pal-navy); flex: 0 0 auto; }

/* LE MOT « BIENTÔT » SUIT LE MOT QU IL QUALIFIE · mesuré le 23.08.2026 à
   760 px, le premier pixel où la barre est repliée. Le mot du produit y est
   caché (`.bd-lien__mot { display: none }`), et « bientôt » restait, seul, à
   côté d'une icône · 55 px par entrée, 107 px l'entrée entière au lieu de 44,
   541 px pour cinq, et la barre réclamait 820 px pour 760. Un fichier unique
   (`jomini_hors_ligne.html`, `outil_chaptal.html`) a ses CINQ entrées en
   « bientôt » · il glissait de côté à toutes les largeurs de l'état replié.
     UNE MENTION QUI QUALIFIE UN MOT CACHÉ NE QUALIFIE PLUS RIEN · ELLE PREND
     LA PLACE DE CE QU ELLE DEVAIT EXPLIQUER.
   Rien n'est perdu · l'entrée porte son `title`, et le tiroir garde son
   « bientôt » en toutes lettres (il n'est pas sous `.pal-bandeau`). La bande
   va de 760 à 1365.98 px · c'est exactement celle où la copie, puis l'écart
   de seuil du complément, cachent le mot. */
@media (min-width: 760px) and (max-width: 1365.98px) {
  .pal-bandeau .bd-lien.est-bientot small { display: none; }
}

/* ── La barre ne se laisse pas repeindre par la page ────────────────────────
   Les maquettes portent leur style d'application en propre, et plusieurs
   posent une couleur sur `header` ou sur `nav`. La barre reprend donc ses
   jetons sur ses deux éléments porteurs · c'est la seule endroit du complément
   qui REDIT quelque chose de la copie, et il le redit à l'identique. */
.pal-bandeau > .pal-bandeau__couloir { background: none; border: 0; }
.pal-bandeau__nav { background: none; border: 0; margin: 0; padding: 0; }


/* ── LES CINQ LANGUES DU BANDEAU · fr, en, de, it, es ───────────────────────
   Victor, 03.10.2026 · « traduis le bandeau dans les quatre langues ».
   Le bandeau ne porte AUCUN script (trois pages sont sous une politique de
   contenu par empreinte, et il tient avec des `<details>`) · la langue se
   choisit donc ici, en CSS, depuis `<html lang>` que chaque page règle déjà
   (Jomini `interface.js`, Chaptal, Volney, Méneval). Chaque mot est écrit cinq
   fois par `bandeau.py` (`<span class="bd-t" lang="…">`), UNE seule est
   montrée · le français quand la page ne dit rien ou dit une langue qu'on
   ne connaît pas. `display: contents` · la variante n'ajoute aucune boîte, la
   mise en page du mot (point de suspension, flex) reste celle d'avant.
   Les noms lus par le lecteur d'écran (`.bd-sr`) suivent la même règle ·
   un `aria-label` ne se traduit pas en CSS, un texte caché oui.
   Le drapeau et le code (`.bd-c`) se choisissent par BALISE (huit variantes) ·
   « de » seul est suisse, l'Allemagne exige `de-DE` ; même règle pour l'italien. */
/* `:root` devant · la liste des langues règle `.bd-langues span` (spécificité
   0,1,1) et rouvrirait en flex les variantes cachées de « bientôt ». */
:root .bd-t, :root .bd-c { display: none; }
:root .bd-sr {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%);
  white-space: nowrap; border: 0;
}

:root:not(:lang(en)):not(:lang(de)):not(:lang(it)):not(:lang(es)) .bd-t[lang='fr'] { display: contents; }
:root:lang(en) .bd-t[lang='en'] { display: contents; }
:root:lang(de) .bd-t[lang='de'] { display: contents; }
:root:lang(it) .bd-t[lang='it'] { display: contents; }
:root:lang(es) .bd-t[lang='es'] { display: contents; }

:root:not(:lang(en)):not(:lang(es)):not(:lang(de)):not(:lang(it)):not(:lang(fr-FR)):not([data-marche='fr-FR']) .bd-c[lang='fr-CH'] { display: contents; }
:root:lang(fr-FR) .bd-c[lang='fr-FR'], :root[data-marche='fr-FR'] .bd-c[lang='fr-FR'] { display: contents; }
:root:lang(de):not(:lang(de-DE)) .bd-c[lang='de-CH'] { display: contents; }
:root:lang(de-DE) .bd-c[lang='de-DE'] { display: contents; }
:root:lang(it):not(:lang(it-IT)) .bd-c[lang='it-CH'] { display: contents; }
:root:lang(it-IT) .bd-c[lang='it-IT'] { display: contents; }
:root:lang(en) .bd-c[lang='en-US'] { display: contents; }
:root:lang(es) .bd-c[lang='es'] { display: contents; }

/* La langue de la page, dans la liste · elle se voit choisie et ne se clique
   pas. La copie du site pose `.est-choisie` à la main sur UNE entrée ; ici la
   page pose la sienne, donc on éteint d'abord la marque fixe (français seul
   des produits non traduits), puis on rallume l'entrée qui correspond à la
   balise de la page. Rien n'est clicable sur l'entrée choisie · elle ne mène
   nulle part. Aucun sélecteur ne commence par `.v-` (réservé à l'application
   de Volney). */
:root .bd-langues .est-choisie { background: none; font-weight: var(--w-reg); color: var(--bd-panneau-douce); }
:root:not(:lang(en)):not(:lang(es)):not(:lang(de)):not(:lang(it)):not(:lang(fr-FR)):not([data-marche='fr-FR']) .bd-langues [lang='fr-CH'],
:root:lang(fr-FR) .bd-langues [lang='fr-FR'],
:root[data-marche='fr-FR'] .bd-langues [lang='fr-FR'],
:root:lang(de):not(:lang(de-DE)) .bd-langues [lang='de-CH'],
:root:lang(de-DE) .bd-langues [lang='de-DE'],
:root:lang(it):not(:lang(it-IT)) .bd-langues [lang='it-CH'],
:root:lang(it-IT) .bd-langues [lang='it-IT'],
:root:lang(en) .bd-langues [lang='en-US'],
:root:lang(es) .bd-langues [lang='es'] {
  background: var(--bd-actif-fond); font-weight: var(--w-semi); color: var(--bd-panneau-encre);
  pointer-events: none; cursor: default;
}