/* commun.css — identité partagée du site.
   Extrait de l'ancienne page unique : mêmes valeurs, mêmes polices.
   Ce qui est propre à une page reste dans le <style> de cette page. */

:root{
  --papier:#f7f4ec; --encre:#181510; --gris:#5d554a;
  --filet:#d8cfbe; --filet-actif:#8c8271; --pale:#c3b8a3; --rouge:#8f2c17;
  --serif:"Spectral",Georgia,"Palatino Linotype",serif;
  --mono:"IBM Plex Mono",ui-monospace,Consolas,monospace;
}
@media (prefers-color-scheme:dark){
  :root{--papier:#14130f; --encre:#f0ebe0; --gris:#a9a094;
        --filet:#332f27; --filet-actif:#6b6455; --pale:#4a4438; --rouge:#e8825c;}
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}

/* Transitions entre pages — une seule regle, aucun JavaScript, aucune
   dependance. Les navigateurs qui ne connaissent pas l'ignorent et naviguent
   normalement : rien a perdre. Le bandeau et les onglets sont nommes pour
   rester en place pendant la transition, au lieu de disparaitre et revenir. */
@view-transition{ navigation:auto }

/* Ce qui se poursuit d'une page a l'autre porte un nom : le navigateur le
   DEPLACE au lieu de le faire disparaitre puis reapparaitre. Le reste fond.

   La barre est nommee sur son HOTE, pas sur le <nav> qu'elle contient. Nommer
   les deux sortirait le nav du calque de son cadre : on verrait le cadre se
   dissoudre pendant que les intitules, eux, glissent. Un seul nom, un seul
   objet qui se deplace.

   Le bandeau porte le meme nom que la bande de tete parce que les deux jouent
   le meme role a deux endroits : sur l'accueil la barre est DANS le hero,
   ailleurs elle est au-dessus. Le nom fait le trajet a notre place. */
.bandeau{view-transition-name:bandeau}
.onglets-hote{view-transition-name:barre}
.tete-anim,.hero{view-transition-name:bande}

::view-transition-old(root),
::view-transition-new(root){animation-duration:.24s}
::view-transition-group(bandeau),
::view-transition-group(barre),
::view-transition-group(bande){
  animation-duration:.34s;
  animation-timing-function:cubic-bezier(.22,.61,.36,1);
}
/* La bande change d'algorithme d'une page a l'autre : on croise les deux
   images au lieu d'en ecraser une. */
::view-transition-old(bande),
::view-transition-new(bande){animation-duration:.34s}

@media (prefers-reduced-motion:reduce){
  ::view-transition-group(*),::view-transition-old(*),::view-transition-new(*){
    animation:none !important;
  }
}
body{
  margin:0; color:var(--encre); background:var(--papier);
  font:400 19px/1.72 var(--serif); -webkit-font-smoothing:antialiased;
}
/* grain de papier */
body::before{
  content:""; position:fixed; inset:0; pointer-events:none; z-index:0; opacity:.04;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/></filter><rect width='180' height='180' filter='url(%23n)'/></svg>");
}
/* UNE seule largeur de conteneur pour tout le site : deux valeurs differentes
   faisaient sauter la mise en page a chaque changement d'onglet.
   .large est conservee sans effet, pour ne pas avoir a toucher au HTML.

   La largeur du CONTENEUR et la mesure de LECTURE sont deux choses distinctes.
   Le conteneur porte l'affiche, les cartes, les tableaux et le jeu : il a
   besoin de place. Le texte suivi, lui, reste borne a 34em par la regle sur p,
   parce qu'au-dela de ~70 signes par ligne l'oeil perd le debut de la suivante.
   Confondre les deux, c'est soit etouffer les tableaux, soit rendre les
   paragraphes illisibles. */
.feuille{
  position:relative; z-index:1;
  max-width:1030px;
  /* Le décalage vers la gauche est PROPORTIONNEL, pas fixe. Réglé à l'écran le
     28 août 2026 : 272 px sur une fenêtre de 1 900, soit 19 % de l'espace libre
     de part et d'autre du conteneur. En pixels fixes, la même valeur collait le
     bloc au bord gauche dès 1 594 px de fenêtre — mesuré — et n'aurait donc
     été juste que sur un seul écran. En pourcentage, le rapport gauche/droite
     est le même partout.
     Le plancher de 32 px empêche le conteneur de toucher le bord ; le
     margin-right du même montant sert de plancher symétrique quand la fenêtre
     devient plus étroite que le conteneur. */
  margin-left:max(32px, calc((100% - 1030px) * .19));
  margin-right:32px;
  padding:0 32px 100px;
}
.feuille.large{max-width:1030px}
a{color:var(--encre)}

/* Etat de focus visible sur TOUT ce qui se pilote au clavier, pas seulement
   les liens : sans ca, une personne qui navigue au clavier avance a l'aveugle.
   :focus-visible ne s'affiche qu'au clavier, jamais au clic souris. */
a:focus-visible, button:focus-visible, video:focus-visible,
iframe:focus-visible, [tabindex]:focus-visible{
  outline:3px solid var(--rouge); outline-offset:3px; border-radius:2px;
}

/* Lien d'evitement : premier element focalisable de la page. Invisible tant
   qu'on ne l'atteint pas au clavier, il permet de sauter les huit onglets
   pour aller droit au contenu. On ne le cache PAS avec display:none, sinon
   il ne serait jamais atteignable. */
.evitement{
  position:absolute; left:16px; top:-60px; z-index:99;
  background:var(--rouge); color:var(--papier);
  font:600 14px/1 var(--serif); text-decoration:none;
  padding:14px 20px; border-radius:8px;
  transition:top .16s ease;
}
.evitement:focus{top:16px}
@media (prefers-reduced-motion:reduce){ .evitement{transition:none} }

/* ---------- bandeau ---------- */
.bandeau{
  display:flex; justify-content:space-between; align-items:baseline;
  flex-wrap:wrap; gap:4px 24px; padding:44px 0 12px;
  border-bottom:2px solid var(--encre);
}
.enseigne{font-family:var(--mono); font-size:16px; letter-spacing:.18em;
          text-transform:uppercase; margin:0}
.enseigne a{text-decoration:none}
.dateline{font-size:16px; color:var(--gris); margin:0}

/* ---------- onglets ---------- */
.onglets{
  display:flex; flex-wrap:wrap; gap:0 26px;
  padding:11px 0 0; border-bottom:1px solid var(--filet);
  font-family:var(--mono); font-size:13px; letter-spacing:.09em; text-transform:uppercase;
}
.onglets a{
  color:var(--gris); text-decoration:none; padding:0 0 10px;
  border-bottom:2px solid transparent; margin-bottom:-1px;
}
.onglets a:hover{color:var(--encre)}
.onglets a[aria-current="page"]{color:var(--rouge); border-bottom-color:var(--rouge)}

/* ---------- titres et texte ---------- */
h1{
  font-size:clamp(34px,5.4vw,50px); line-height:1.1; margin:42px 0 0;
  font-weight:400; letter-spacing:-.02em; max-width:17ch;
}
h1 em{font-style:italic; color:var(--rouge)}
.sous-titre{font-size:21px; line-height:1.6; margin:22px 0 0; max-width:30em}
h2{
  font-size:27px; font-weight:400; letter-spacing:-.015em;
  margin:64px 0 0; padding-bottom:10px; border-bottom:2px solid var(--encre);
}
h3{font-size:22px; font-weight:400; margin:0 0 8px; letter-spacing:-.01em}
p{margin:18px 0 0; max-width:27em}
.gris{color:var(--gris)}
strong,b{font-weight:600}
abbr{text-decoration:underline dotted; cursor:help}
.note{font-size:15px; color:var(--gris); margin-top:14px; line-height:1.75; max-width:29em}

/* ---------- tableaux ---------- */
.cadre{margin:26px 0 0; overflow-x:auto}
table.releve{border-collapse:collapse; width:100%; min-width:540px}
table.releve caption{
  text-align:left; font-size:16px; color:var(--gris);
  padding:0 0 14px; line-height:1.6; max-width:29em;
}
table.releve caption b{color:var(--encre)}
table.releve th{
  text-align:left; font-size:14px; font-weight:600; color:var(--gris);
  padding:0 14px 8px 0; border-bottom:1px solid var(--filet); white-space:nowrap;
}
table.releve th:last-child{text-align:right; padding-right:0}
table.releve td{
  padding:14px 14px 14px 0; border-bottom:1px solid var(--filet);
  vertical-align:top; font-size:17px; line-height:1.5;
}
table.releve td:last-child{
  text-align:right; padding-right:0; white-space:nowrap;
  font-variant-numeric:tabular-nums; color:var(--gris);
}
.pt{font-variant-numeric:tabular-nums; color:var(--rouge); white-space:nowrap}
.acheteur{display:block; color:var(--gris); font-size:15px; margin-top:4px}
.urgent{color:var(--rouge)}

/* ---------- sommaire des travaux (accueil) ---------- */
.sommaire{margin:14px 0 0}
.piece{
  display:grid; grid-template-columns:44px 1fr; gap:0 20px;
  padding:30px 0 32px; border-bottom:1px solid var(--filet); align-items:start;
}
.piece:first-child{border-top:1px solid var(--filet)}
.num{
  font-family:var(--mono); font-size:14px; color:var(--rouge);
  padding-top:9px; font-variant-numeric:tabular-nums; letter-spacing:.04em;
}
.piece h3{margin:0 0 6px; font-size:25px}
.piece h3 a{text-decoration:none; border-bottom:2px solid var(--filet); padding-bottom:2px}
.piece h3 a:hover{border-bottom-color:var(--rouge); color:var(--rouge)}
.piece p{margin:0; font-size:18px; max-width:30em}
.etiquettes{
  margin:12px 0 0; font-family:var(--mono); font-size:12.5px;
  letter-spacing:.07em; text-transform:uppercase; color:var(--gris);
  display:flex; flex-wrap:wrap; gap:5px 16px;
}
.etiquettes .etat{color:var(--rouge)}

/* ---------- page d'un travail ---------- */
.chapeau{
  font-family:var(--mono); font-size:13px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--gris); margin:40px 0 0;
}
.fiche{
  margin:30px 0 0; padding:22px 0 0; border-top:1px solid var(--filet);
  display:grid; grid-template-columns:repeat(auto-fit,minmax(155px,1fr)); gap:20px 30px;
}
.fiche div{min-width:0}
.fiche dt{
  font-family:var(--mono); font-size:12px; letter-spacing:.1em; text-transform:uppercase;
  color:var(--gris); margin:0 0 5px;
}
.fiche dd{margin:0; font-size:17px; line-height:1.5}

/* ---------- video verticale (format telephone) ----------
   Pas de lecture automatique : c'est une video avec du son, et rien n'est plus
   agressif qu'un piano qui demarre tout seul. Le visiteur decide. */
.video-verticale{
  margin:30px 0 0; display:grid; grid-template-columns:minmax(0,340px) 1fr;
  gap:28px 34px; align-items:start;
}
.video-verticale video{
  display:block; width:100%; height:auto; background:#000;
  border:1px solid var(--filet);
}
.video-verticale figcaption{margin:0; font-size:17px; line-height:1.6; max-width:32em}
.video-verticale figcaption b{color:var(--encre)}
@media (max-width:720px){
  .video-verticale{grid-template-columns:1fr; gap:18px}
  .video-verticale video{max-width:340px}
}

/* ---------- visuel unique, pleine largeur ---------- */
.visuel{margin:30px 0 0}
.visuel img{display:block; width:100%; height:auto; border:1px solid var(--filet);
            background:var(--pale)}
/* Les capitales monospace convenaient a trois mots. Sur une phrase entiere,
   elles deviennent illisibles — ces legendes en font plusieurs. */
.visuel figcaption{
  font-size:14.5px; color:var(--gris); margin-top:12px; line-height:1.65;
  max-width:34em;
}
.visuel figcaption b{color:var(--encre)}

/* ---------- encadré rouge ---------- */
.pas{
  margin:28px 0 0; padding:24px 28px; border-left:4px solid var(--rouge);
  background:color-mix(in srgb, var(--rouge) 6%, transparent);
}
.pas p{margin:0; max-width:29em; font-size:20px; line-height:1.6}
.pas p + p{margin-top:14px; font-size:18px; color:var(--gris)}

/* ---------- la colonne de marge ----------
   Le texte suivi occupe 473 px d'un rail qui en fait 896 : plus de trois cents
   pixels restaient vides sur toute la hauteur de chaque page, et rien
   n'accrochait l'œil sur des sections de deux cents mots. Cette colonne y
   remonte ce que la prose contient déjà de plus saillant — des chiffres
   mesurés, une phrase qui tranche.

   Un FLOTTANT et non une grille, et c'est le choix qui rend le procédé sûr :
   il ne demande aucun conteneur de section, donc aucune restructuration des
   dix pages. Le bloc conteneur d'un flottant étant son premier parent de type
   bloc, il se cale tout seul sur le bord droit de .feuille.

   La conséquence, et c'est la seule règle à retenir :

     un .marge ne se pose QU'EN ENFANT DIRECT de .feuille, entre deux
     paragraphes du fil.

   Placé dans un .pas, un .eng ou une <figure>, il se calerait sur ce parent-là
   et raccourcirait le texte — mesuré : cinq lignes devenaient six. Vérifié à
   l'inverse au bon endroit : largeurs et comptes de lignes strictement
   identiques avant et après. */
.marge{
  float:right; clear:right; width:300px;
  /* La marge gauche ne doit jamais ramener la zone d'exclusion à gauche des
     473 px du texte. Ici il reste 150 px de mou. */
  margin:8px 0 28px 40px;
  padding-left:18px; border-left:2px solid var(--rouge);
  font-size:14px; line-height:1.6; color:var(--gris);
}
.marge b{
  display:block; font-weight:600; color:var(--rouge);
  font-size:31px; line-height:1.05; letter-spacing:-.03em;
  font-variant-numeric:tabular-nums; margin-bottom:7px;
}
.marge i{
  display:block; font-style:normal; font-family:var(--mono);
  font-size:11px; letter-spacing:.11em; text-transform:uppercase;
  color:var(--gris); margin-bottom:9px;
}
.marge em{font-style:normal; color:var(--encre); font-weight:600}
.marge a{color:var(--encre)}

/* Sous 900 px il n'y a plus de colonne à remplir : la marge revient dans le
   fil, à la mesure de lecture, et cesse d'être une marge. */
@media (max-width:900px){
  .marge{
    float:none; width:auto; max-width:34em;
    margin:26px 0; padding-left:16px;
  }
  .marge b{font-size:27px}
}

/* ---------- listes de faits ---------- */
dl.eng-liste{margin:0}
.eng{padding:20px 0; border-bottom:1px solid var(--filet)}
.eng dt{font-size:18px; font-weight:600; margin-bottom:5px}
.eng dd{margin:0; max-width:28em; font-size:18px; color:var(--gris)}
.eng dd b{color:var(--encre)}

/* ---------- offres et contact (etaient dans veille-claire.html) ----------
   Rapatries ici pour qu'une seule feuille gouverne tout le site : un bloc
   <style> dans une page echappe a la peau et cree une rupture visuelle. */
.offre{padding:26px 0 28px; border-bottom:1px solid var(--filet)}
.offre p{margin:0; max-width:28em; font-size:18px}
.prix{margin:14px 0 0; font-size:18px; padding:10px 0 0;
      border-top:1px dotted var(--filet); max-width:34em}
.prix b{color:var(--rouge); font-weight:600}
.prix span{color:var(--gris); font-size:16px}

table.livrable{border-collapse:collapse; width:100%; min-width:560px; font-size:15px}
table.livrable th{text-align:left; font-size:14px; font-weight:600; color:var(--gris);
  padding:0 16px 8px 0; border-bottom:1px solid var(--filet); white-space:nowrap}
table.livrable td{padding:11px 16px 11px 0; border-bottom:1px solid var(--filet);
                  vertical-align:top; line-height:1.5}
table.livrable td:first-child{font-variant-numeric:tabular-nums; color:var(--rouge)}
.leg{font-size:15px; color:var(--gris); margin-top:12px}

.identite{display:grid; grid-template-columns:1fr; gap:0 32px; align-items:start}

.contact{margin:24px 0 0; font-size:22px; line-height:2}
.contact a{border-bottom:2px solid var(--rouge); text-decoration:none; padding-bottom:2px}
.contact a:hover{color:var(--rouge)}

/* ---------- pied ---------- */
footer{
  margin:70px 0 0; padding-top:20px; border-top:1px solid var(--filet);
  font-size:15px; line-height:1.85; color:var(--gris);
  display:grid; grid-template-columns:1fr 1fr; gap:10px 32px;
}
footer a{color:var(--gris)}

@media (max-width:720px){
  body{font-size:18px}
  /* Sous 720 px, le decalage proportionnel n'a plus d'objet : la fenetre est
     plus etroite que le conteneur, donc le calc() est negatif et max() tombe
     sur son plancher de 32 px. Ces 32 px s'ajoutaient alors aux 20 px de
     padding : 104 px de chrome sur un ecran de 375, soit 28 % de la largeur
     partie en marges. Mesure du 28 aout 2026. */
  .feuille{padding:0 20px 70px; margin-left:0; margin-right:0}
  .onglets{gap:0 18px; font-size:12px}
  .piece{grid-template-columns:1fr; gap:0}
  .num{padding-top:0; margin-bottom:8px}
  .pas{padding:20px 22px}
  footer{grid-template-columns:1fr}
}

/* ---------- apparitions au defilement ----------
   CSS natif, aucun JavaScript, aucune dependance.

   Le @supports n'est pas une precaution decorative : sans lui, un navigateur
   qui ignore animation-timeline appliquerait l'opacite 0 sans jamais jouer
   l'animation, et la page serait vide. La regle n'existe donc que la ou elle
   peut aboutir. Firefox (encore derriere un drapeau) affiche tout normalement,
   sans animation : c'est le comportement voulu, pas une degradation. */
@supports (animation-timeline: view()){
  @media (prefers-reduced-motion: no-preference){
    .piece, .tel, .eng, .cadre, .pas, .fiche{
      animation: apparition linear both;
      animation-timeline: view();
      animation-range: entry 0% entry 50%;
    }
    @keyframes apparition{
      from{opacity:0; transform:translateY(16px)}
      to  {opacity:1; transform:none}
    }
  }
}

/* ---------- d'un travail au suivant ----------
   Ajoute le 26 aout 2026. Six pages sur huit se terminaient sur une fiche
   technique puis le pied de page : aucun geste propose a quelqu'un qui venait
   de lire 850 mots, et aucun chemin lateral autre que la barre d'onglets,
   qu'il faut remonter chercher. Le sommaire de l'accueil et la page Veille
   Claire ne recoivent PAS ce bloc : la premiere est deja un sommaire, la
   seconde vend quelque chose et son bas de page doit rester sa conclusion. */
.suite{
  margin:64px 0 0; padding-top:26px; border-top:1px solid var(--filet);
  display:grid; grid-template-columns:1fr 1fr; gap:16px 24px;
}
.suite a{
  display:flex; flex-direction:column; gap:6px;
  padding:18px 20px; border-radius:12px; text-decoration:none;
  border:1px solid var(--filet-actif);
}
.suite a:hover{
  border-color:var(--rouge);
  background:color-mix(in srgb, var(--rouge) 6%, transparent);
}
.suite span{
  font-family:var(--mono); font-size:11px; letter-spacing:.1em;
  text-transform:uppercase; color:var(--gris);
}
.suite b{font-weight:600; font-size:17px; line-height:1.35}
.suite a:hover b{color:var(--rouge)}
.suite .vers-suivant{text-align:right}

/* max-width:none : sans lui, la regle p{max-width:27em} couperait cette
   ligne au tiers de la largeur et elle ne ressemblerait plus a une invitation
   mais a un paragraphe oublie. */
.ecrire{
  margin:26px 0 0; max-width:none;
  font-size:17px; line-height:1.7; color:var(--gris);
}
.ecrire a{
  color:var(--encre); text-decoration:none;
  border-bottom:2px solid var(--rouge); padding-bottom:1px;
}
.ecrire a:hover{color:var(--rouge)}

@media (max-width:560px){
  .suite{grid-template-columns:1fr; gap:12px}
  .suite .vers-suivant{text-align:left}
}

/* ---------- tête d'une page de travail ----------
   Réécrit le 27 août 2026, après deux tentatives ratées qu'il vaut la peine
   de garder en mémoire.

   Le problème de départ : dans une fenêtre de 1 900 px, une colonne de 960
   laissait la moitié de l'écran vide et la démonstration commençait sous la
   ligne de flottaison.

   Tentative 1 — élargir titre et animation vers la droite, comme le fait le
   bandeau d'accueil. Raté : cette règle ne tient que parce que sur l'accueil
   UN SEUL élément déborde. Ici deux débordaient du même côté et toute la page
   basculait — 505 px de vide à gauche contre 85 à droite.

   Tentative 2 — le même débordement, mais symétrique. Mieux équilibré, mais
   il restait DEUX BORDS GAUCHES : les éléments larges sur un rail, le bandeau
   et le texte sur un autre, 212 px d'écart. C'est ce que l'œil voit en
   premier, avant même de savoir le nommer.

   Ce qui est en place maintenant ne tranche pas ce conflit, il le supprime :
   l'animation va d'un bord à l'autre de l'écran et porte le titre. Un élément
   pleine largeur n'a aucun bord gauche à respecter. Le texte à l'intérieur
   reprend le rail du reste du site, et il n'y en a plus qu'un.

   La forme est celle du bandeau d'accueil, déjà éprouvée, voile compris. Elle
   impose sa structure : le bandeau est SORTI de .feuille, comme .hero l'est
   dans index.html. C'est le seul moyen d'aller d'un bord à l'autre sans
   `width:100vw`, qui compte la barre de défilement et ajoute quinze pixels de
   débordement horizontal. */

.tete-actions{margin:22px 0 0}
.bouton-essai{
  display:inline-flex; align-items:center; gap:9px;
  font:600 14.5px/1 var(--serif); letter-spacing:-.01em; text-decoration:none;
  padding:13px 22px; border-radius:999px;
  border:1px solid var(--filet-actif); color:var(--encre);
}
.bouton-essai::after{content:"↓"; font-size:13px; opacity:.7}
.bouton-essai:hover{
  border-color:var(--rouge); color:var(--rouge);
  background:color-mix(in srgb, var(--rouge) 8%, transparent);
}
/* La cible du bouton s'arrête sous le bandeau plutôt que collée en haut. */
[id="demo"]{scroll-margin-top:24px}

/* ---------- la barre d'onglets, en objet plein ----------
   Posée le 28 août 2026, planche 13. Elle cesse d'être une rangée de pastilles
   serrées à gauche pour devenir un objet : un cadre, des coins, une masse.

   Le motif n'était pas qu'elle soit trop courte — mesuré, elle occupait déjà
   90 % de la largeur. C'est qu'elle s'arrêtait à quatre-vingt-dix pixels du
   bord sans raison, et qu'en petites capitales grises elle ne pesait rien
   sous un titre de 76 px. `justify-content:space-between` règle le premier
   point, le fond plein règle le second.

   L'hôte porte la boîte, la barre porte les entrées. Cette séparation existe
   pour une raison : quand l'hôte porte un data-anim, anim.js y insère un
   canvas et le fond de la barre devient l'algorithme du projet qu'on lit. */
.onglets-hote{
  position:relative; margin-top:11px;
  border:1px solid var(--filet-actif); border-radius:10px; overflow:hidden;
  background:color-mix(in srgb, var(--encre) 6%, transparent);
}
.onglets-hote[data-anim]{background:#0a0813}
.onglets-hote > canvas{position:absolute; inset:0; width:100%; height:100%}

/* Le voile n'existe que sur les barres animées. Il est à 76 %, plus fort que
   celui d'un bandeau, et c'est nécessaire : dans un bandeau le texte est
   POSÉ sur l'animation, ici il est DEDANS — chaque mot traverse toute la
   hauteur de la bande. Mesuré voile compris : 5,5 de contraste pour les
   intitulés gris, 16,3 pour l'entrée courante. Le seuil est à 4,5. */
.onglets-voile{
  position:absolute; inset:0; z-index:1; pointer-events:none;
  background:color-mix(in srgb, var(--papier) 80%, transparent);
}

/* Dans une barre animée, les intitulés s'éclaircissent — et ce n'est pas une
   coquetterie, c'est la seule issue. Mesuré avec --gris sur l'animation Veille,
   dont les points violets sont les plus vifs des six : le contraste tombait à
   4,50, soit le minimum AA au centième près. Renforcer le voile ne suffisait
   pas, parce que --gris plafonne de toute façon à 5,88 même sur du noir pur.
   Il fallait donc changer l'encre, pas le fond. Cette teinte tient la même
   famille et remonte le contraste à 7,7. Les barres SANS animation gardent
   --gris : sur un fond plat, 5,88 est confortable. */
.onglets-hote[data-anim] .onglets a{color:#b8b3cc}

.onglets-hote .onglets{
  position:relative; z-index:2;
  justify-content:space-between; gap:0;
  padding:0; margin:0; border-bottom:0;
}
.onglets-hote .onglets a{
  padding:11px 14px; border-radius:9px; margin-bottom:0; border-bottom:0;
}
.onglets-hote .onglets a:hover{
  background:color-mix(in srgb, var(--papier) 60%, transparent); color:var(--encre);
}
.onglets-hote .onglets a[aria-current="page"]{
  background:var(--rouge); color:var(--papier); font-weight:600; border-bottom:0;
}

/* Le cadre disparaît dès que les entrées ne tiennent plus sur une ligne, et
   ce point est mesuré, pas estimé : les neuf entrées réclament environ 890 px,
   et le conteneur n'en offre que `largeur de fenêtre moins 64`. Elles passent
   donc à la ligne sous 954 px de fenêtre.

   Le seuil était d'abord à 760 : entre 760 et 954 la barre affichait deux
   rangées ENFERMÉES dans leur cadre, ce qui est exactement ce qu'un cadre ne
   doit jamais faire. À 1 000 px on garde de la marge, et le repli vaut aussi
   pour le conteneur de 1 030 px, dont le seuil de passage à la ligne est le
   même. */
@media (max-width:1000px){
  .onglets-hote{border:0; border-radius:0; background:none; margin-top:0}
  .onglets-hote[data-anim]{background:none}
  .onglets-hote > canvas,.onglets-voile{display:none}
  .onglets-hote .onglets{
    flex-wrap:wrap; justify-content:flex-start; gap:0 6px;
    padding:11px 0 0; border-bottom:1px solid var(--filet);
  }
  .onglets-hote .onglets a{padding:7px 9px; margin-bottom:7px}
}