/* composants.css -- LES REGLES DE L'APPLICATION PO DVOLU, VERSION B1.
 *
 * Charge APRES base.css et tokens.css. Toute couleur y vaut un var() de la
 * couche 2 ou 3 de tokens.css : aucun #hex, aucun --dv-*. Les litterales non
 * couleur (padding: 0, 1px) restent libres, comme avant.
 *
 * Mouvement : couleurs en --duree-fondu (120 ms), deplacements en
 * --duree-deplacement (180 ms max). Jamais pendant la saisie, jamais sur les
 * donnees d'une grille. Tout s'arrete sous prefers-reduced-motion (fin du fichier).
 *
 * G-61 tour 2, ecarts au retour de Claude Design, chacun pour que
 * outils/contraste.py puisse MESURER la feuille au lieu de la croire :
 *   1. le degrade de `.pastille--partiel::before` passe de `background:`
 *      a `background-image:` (comme `.lien-ligne` le faisait deja) : un
 *      degrade n'est pas un fond de texte, et `background:` doit valoir
 *      un seul token ;
 *   2. la couleur de l'icone du bouton « effacer » du selecteur est posee
 *      sur son `svg` (une marque, mesuree a 3:1), plus sur le bouton ;
 *   3. le focus clavier DANS la bande prend `--bande-anneau` (blanc) : le
 *      bleu `--focus` sur le bleu de la bande tombait a 1,9:1, invisible.
 */

/* ---- socle ------------------------------------------------------------- */
html, body { height: 100%; }
body {
  margin: 0;
  padding: 0;                      /* ECART base.css : l'ancien padding 1.5rem saute */
  background: var(--page-fond);
  color: var(--page-texte);
  font-family: var(--police-interface, "Sora", "Segoe UI", system-ui, sans-serif);   /* --police-interface vient de base.css */
  font-size: var(--texte-tableau);
}
body.page-douce { background: var(--page-fond-doux); }
*, *::before, *::after { box-sizing: border-box; }

:focus-visible {
  outline: var(--focus-epaisseur) solid var(--focus-couleur);
  outline-offset: var(--focus-decalage);
}

a { color: var(--page-texte-lien); transition: color var(--duree-fondu) ease-out; }
a:hover { color: var(--page-texte-lien-survol); }
h1, h2 { margin: 0; color: var(--page-texte); }
p { margin: 0; }
.doux { color: var(--page-texte-doux); }
.nombre { text-align: right; font-variant-numeric: tabular-nums; }
.visuellement-cache { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---- mise en page ---------------------------------------------------- */
.ecran { display: flex; flex-direction: column; min-height: 100%; }
.ecran--plein { height: 100%; overflow: hidden; }   /* Master : la grille defile, pas la page */
.contenu { flex-grow: 1; display: flex; flex-direction: column; gap: var(--pas-4); padding: var(--pas-4) var(--pas-gouttiere) var(--pas-5); min-height: 0; }
.rangee { display: flex; align-items: center; gap: var(--pas-3); flex-wrap: wrap; }
.rangee--bas { align-items: flex-end; }
.rangee--large { gap: var(--pas-4); }
.espace { flex-grow: 1; }
.pile { display: flex; flex-direction: column; gap: var(--pas-3); }
.pile--serree { gap: var(--pas-1); }
.colonnes-2 { display: grid; grid-template-columns: minmax(0, 1fr) 620px; gap: var(--pas-5); }
.colonnes-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--pas-4); }
.colonnes-4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--pas-3) 14px; }
.colonnes-7 { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: var(--pas-4); }
.etendu-2 { grid-column: span 2; }
.etendu-3 { grid-column: span 3; }
.texte-long { margin: 0; max-width: 1200px; line-height: 1.55; }
.pied { padding: 0 var(--pas-gouttiere); height: var(--hauteur-ligne); display: flex; align-items: center; color: var(--page-texte-doux); font-size: var(--texte-meta); }

/* ---- barre d'application --------------------------------------------- */
.barre-app { flex: none; height: var(--hauteur-bande); display: flex; align-items: stretch; gap: 28px; padding: 0 var(--pas-gouttiere); background: var(--bande-fond); color: var(--bande-texte); }
.barre-app :focus-visible { outline-color: var(--bande-anneau); }
/* G-61 t3 : un champ dans la bande garde son contour blanc au clavier ;
   `.champ:focus { outline: none }` (specificite moindre) ne l'efface plus. */
.barre-app .champ:focus-visible { outline: var(--focus-epaisseur) solid var(--bande-anneau); outline-offset: var(--focus-decalage); }
.barre-app__marque { display: flex; align-items: center; gap: var(--pas-4); }
.barre-app__marque img { display: block; height: 21px; width: auto; }
.barre-app__logo { display: flex; align-items: center; }   /* G-145 : le logo ramene a l'accueil */
.barre-app__titre { margin: 0; font-size: var(--texte-carte); font-weight: var(--graisse-appuyee); line-height: 20px; padding-left: var(--pas-4); border-left: 1px solid var(--bande-trait); color: var(--bande-texte); }
.barre-app__menu { display: flex; align-items: stretch; gap: var(--pas-1); flex-grow: 1; }
.onglet {
  position: relative; display: flex; align-items: center; gap: var(--pas-2-5); padding: 0 13px;
  color: var(--bande-texte-doux); text-decoration: none; font-size: var(--texte-navigation);
  border-top: var(--filet-souligne) solid transparent; border-bottom: var(--filet-souligne) solid transparent;
  transition: background-color var(--duree-fondu) ease-out, color var(--duree-fondu) ease-out;
}
.onglet:hover { color: var(--bande-texte); background: var(--bande-fond-survol); }
.onglet::after { content: ""; position: absolute; left: var(--pas-4); right: var(--pas-4); bottom: calc(var(--filet-souligne) * -1); height: var(--filet-souligne); background: var(--bande-filet); transform: scaleX(0); transition: transform var(--duree-deplacement) var(--courbe-sortie); }
.onglet:hover::after { transform: scaleX(1); }
.onglet[aria-current="page"] { color: var(--bande-texte); font-weight: var(--graisse-appuyee); background: var(--bande-fond-survol); border-bottom-color: var(--bande-filet); }
.onglet[aria-current="page"]::after { display: none; }
.onglet--fin { margin-left: auto; }
.onglet svg { flex: none; }
/* G-166 : la cloche des avis (`_cloche.html`) ouvre le groupe de droite de la bande ; « Signaler », juste apres,
   cede sa marge (une seule marge automatique pousse le groupe). Les trois pastilles A, B, C de « Demandes » ont
   leur place (`hidden` jusqu'a G-173). */
.barre-app__menu > .cloche-lien { margin-left: auto; }
.cloche-lien ~ .onglet--fin { margin-left: 0; }
.pastilles-demandes { display: none; gap: var(--pas-1); }
.pastilles-demandes[hidden] { display: none; }
/* G-202 (le responsable, 19-10) : « Demandes » est a DROITE de la bande, avant la cloche : il porte la marge qui pousse
   le groupe de droite (la cloche, « Signaler », « Mes retours » et le nom la cedent).
   G-202 t3 (le responsable, 19-10 au soir) : il se place au CENTRE entre le dernier onglet de gauche (« Admin ») et la cloche :
   deux marges automatiques se partagent la place libre, moitie de chaque cote. Au telephone, le menu defile et la
   place libre est nulle : les deux marges valent 0, rien ne change. */
.barre-app__menu > .onglet[data-role="lien-demandes"] { margin-left: auto; margin-right: auto; }
.barre-app__menu > .onglet[data-role="lien-demandes"] ~ [data-zone="cloche"],
.barre-app__menu > .onglet[data-role="lien-demandes"] ~ .onglet--fin { margin-left: 0; }
/* G-202 : la PLACE des trois pastilles est reservee des le rendu du serveur, pour qui les recevra (la cloche porte
   `data-pastilles` : la meme permission que les nombres) : la place n'est dessinee que par la feuille (`hidden`
   ne le permettrait pas : `base.css` le fait gagner partout), a la largeur de trois pastilles FIXES (18 px, sans marge : deux chiffres tiennent, un troisieme
   deborde sans rien deplacer) et a leur hauteur. Elle est invisible et muette (`visibility`, donc hors de l'arbre
   d'accessibilite) tant que `cloche.js` n'a pas pose les nombres (le `role="img"` qu'il pose avec leur nom).
   L'arrivee des chiffres ne change plus aucune boite de la bande. Les autres roles : `display: none`, aucune largeur. */
.barre-app__menu:has(> [data-zone="cloche"][data-pastilles]) .pastilles-demandes { display: inline-flex; align-items: center; min-height: 17px; min-width: calc(3 * 18px + 2 * var(--pas-1)); }
.barre-app__menu:has(> [data-zone="cloche"][data-pastilles]) .pastilles-demandes:not([role="img"]) { visibility: hidden; }
.barre-app .pastilles-demandes .cloche-pastille { box-sizing: border-box; width: 18px; min-width: 18px; padding: 0; }
/* G-166 : un onglet ne passe JAMAIS sur deux lignes. Mesure (admin, 1280 px, avec « Demandes » et la cloche) : la
   bande pleine demande 1355 px sans retour a la ligne ; sous 1440 px, le titre « Bons d'achat » se cache (le logo
   reste) : 228 px de rendus, la marge tient meme avec un nom plus long. */
.barre-app .onglet, .barre-app__titre { white-space: nowrap; }
@media (max-width: 1439px) {
  .barre-app__titre { display: none; }
}
/* G-166 (suite §16.8b) : a 390 px (un telephone), la bande garde sa hauteur et ne deborde plus. Le menu DEFILE de
   cote dans la bande (sans barre visible), chaque onglet garde sa largeur et sa ligne ; la liste sous le nom passe
   en position FIXE, pour que le defilement du menu ne la coupe pas. */
@media (max-width: 640px) {
  .barre-app { gap: var(--pas-2); padding: 0 var(--pas-2); }
  .barre-app__menu { min-width: 0; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; }
  .barre-app__menu::-webkit-scrollbar { display: none; }
  .barre-app__menu > .onglet, .barre-app__menu > .menu-utilisateur { flex: none; white-space: nowrap; }
  /* Plus specifique que la regle de base de la liste (ecrite plus bas), sans quoi elle la reprendrait. */
  .barre-app .menu-utilisateur__liste { position: fixed; top: var(--hauteur-bande); right: 0; }
}

/* ---- le menu sous le nom de l'utilisateur (G-89, point 28) ------------
 * Le nom est un bouton `.onglet` (`aria-expanded`) ; la liste, en position
 * ABSOLUE sous la bande, porte des liens `.onglet` : ouverte, elle ne deplace
 * rien. Les couleurs sont celles de `.onglet` (texte doux sur la bande, texte
 * plein sur le survol, filet de l'onglet actif), dont `outils/contraste.py`
 * prouve deja les paires : aucune couleur ni bordure coloree neuve ici. Le
 * focus clavier y reste blanc (`--bande-anneau`), lisible sur le fond de la
 * bande, que la liste reprend. */
.menu-utilisateur { position: relative; display: flex; align-items: stretch; margin-left: auto; }
.menu-utilisateur__bouton { font: inherit; font-size: var(--texte-navigation); cursor: pointer; background: transparent; border-left: 0; border-right: 0; }
.menu-utilisateur__bouton[aria-expanded="true"] { color: var(--bande-texte); background: var(--bande-fond-survol); }
.menu-utilisateur__bouton[data-actif] { color: var(--bande-texte); font-weight: var(--graisse-appuyee); background: var(--bande-fond-survol); border-bottom-color: var(--bande-filet); }
.menu-utilisateur__bouton[data-actif]::after { display: none; }
.menu-utilisateur__nom { white-space: nowrap; }
.menu-utilisateur__chevron { transition: transform var(--duree-deplacement) var(--courbe-sortie); }
.menu-utilisateur__bouton[aria-expanded="true"] .menu-utilisateur__chevron { transform: rotate(180deg); }
.menu-utilisateur__liste { position: absolute; top: 100%; right: 0; z-index: 50; min-width: 220px; margin: 0; padding: var(--pas-2) 0; list-style: none; background: var(--bande-fond); border-radius: 0 0 var(--rayon-champ) var(--rayon-champ); box-shadow: var(--liste-ombre); }
.menu-utilisateur__liste .onglet { height: 36px; padding: 0 var(--pas-5); white-space: nowrap; }
.menu-utilisateur__liste .onglet::after { display: none; }
.compteur { background: var(--compteur-fond); color: var(--compteur-texte); border-radius: var(--rayon-pastille); padding: 1px 7px; font-size: var(--texte-meta); font-weight: var(--graisse-forte); font-variant-numeric: tabular-nums; transition: transform var(--duree-ombre) var(--courbe-sortie); }
.onglet:hover .compteur { transform: scale(1.1); }

/* ---- bandeau de titre ------------------------------------------------ */
.tete-ecran { flex: none; display: flex; align-items: center; gap: 14px; padding: var(--pas-3-5) var(--pas-gouttiere); background: var(--tete-fond); border-bottom: 1px solid var(--tete-bordure); }
.tete-ecran h1 { font-size: var(--texte-ecran); line-height: 24px; font-weight: var(--graisse-appuyee); color: var(--tete-texte); }
.tete-ecran__sous-titre { color: var(--tete-texte-doux); }
.tete-ecran a { color: var(--tete-texte-lien); }
/* G-182 (suites §12.9c et §16.8b) : a 390 px la BANDE tient (G-166 : son menu defile de cote), mais la TETE d'ecran ne
 * coupait pas : sans retour a la ligne, ses enfants (le titre, le segment, les boutons) sortaient de la fenetre (mesure :
 * le document faisait 1 006 px sur le Master, 555 px sur Receptions, 488 px sur le bon). Sous 641 px elle passe sur plusieurs
 * lignes, et le titre ne garde plus sa zone fixe de 280 ou 420 px (elle sert l'alignement des sous-onglets, a l'ecran large). */
@media (max-width: 640px) {
  .tete-ecran { flex-wrap: wrap; row-gap: var(--pas-2); }
  .tete-ecran:has(> .segment) > h1 { width: auto; max-width: 100%; margin-right: 0; }
  /* La place du dernier numero du Master (`master.css`, 330 px reserves) ne depasse jamais la tete : a 320 px elle la depassait de 30 px. */
  .tete-ecran [data-zone="dernier-numero"] { max-width: 100%; }
}
/* G-98 (N-15) : les onglets de l'admin (Comptes, Categories, Taux de change, Retours, Validation
 * Zoho) gardent leur place d'une page a l'autre, a 0 px pres. Deux causes les faisaient bouger,
 * mesurees au navigateur : (1) le titre de la page (de 77 px pour « Retours » a 269 px pour
 * « Validation des projets Zoho ») poussait la navigation : la zone du titre prend une largeur
 * FIXE, un titre plus long est coupe (ellipse) ; (2) l'onglet courant etait en gras, donc plus large
 * que les autres (jusqu'a 1,5 px), ce qui decalait les onglets a sa droite : ici, l'onglet courant
 * garde le poids normal, son fond plein le marque. */
.tete-ecran--admin { position: relative; }
/* G-102 (N-41) : la meme regle pour TOUT bandeau qui porte des sous-onglets (Reception, Rapports,
 * Admin, Projets) : la zone du titre a une largeur FIXE (`--zone-titre`, 280 px comme l'admin),
 * donc les sous-onglets restent au meme endroit quel que soit le titre ; l'onglet courant garde le
 * poids normal (en gras, il decalait le 2e bouton de 0,6 a 2,2 px d'une page a l'autre). Seul
 * « Reception » prend 420 px : son titre « Receptions en attente de confirmation » mesure 376,02 px
 * (h1 sans padding ni bordure, police Sora embarquee), soit 44 px de marge ; a 380 px la marge n'etait
 * que de 4 px. Un sous-titre pose avant les onglets dans le HTML (`rapport_simple.html`) passe apres eux.
 * Mesure et preuve : `_preuves\G-102\RAPPORT-tour1.md` et `RAPPORT-tour2.md`. */
.tete-ecran { --zone-titre: 280px; }
/* G-252 : le sous-titre (« 0 pièce », « 0 retour ») ne tient plus a cote des quatre onglets a 1024 px (mesure :
 * 36 px de trop) ; il passe a la ligne, la barre ne se resserre ni ne descend. */
.tete-ecran:has(> [data-zone="reception-onglets"]) { --zone-titre: 420px; flex-wrap: wrap; row-gap: var(--pas-2); }
.tete-ecran:has(> .segment) > h1 { flex: none; width: var(--zone-titre); margin-right: 10px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tete-ecran:has(> .segment) > .tete-ecran__sous-titre { order: 1; }
.tete-ecran .segment a[aria-current="page"] { font-weight: var(--graisse-normale); }
/* G-98 t2 : l'icone d'information a cote du titre (« Validation des projets Zoho » : les regles du tri,
 * en infobulle et en nom accessible, jamais en phrase). Sa place est RESERVEE sur les cinq pages (les
 * 10 px a droite du titre et l'espace du bandeau) : les onglets ne bougent pas, icone ou non ; elle est
 * posee en absolu dans cette place. Le titre coupe (280 px) porte son titre entier dans `title`. */
.info-titre { position: absolute; top: 50%; left: calc(var(--pas-gouttiere) + 282px); transform: translateY(-50%); display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; padding: 0; border: 0; background: transparent; cursor: help; }
/* G-98 t4 : la petite bulle d'une icone d'information et d'un etat que le clavier atteint. Elle s'ouvre
 * au FOCUS (la tabulation, le clic, le toucher donnent le focus), en plus du survol, que le `title` garde.
 * Posee en absolu, cachee sinon : rien ne bouge. */
.info-bulle { display: none; position: absolute; z-index: 60; width: max-content; max-width: 360px; padding: var(--pas-2) var(--pas-3); border-radius: var(--rayon-cadre); background: var(--tuile-total-fond); color: var(--tuile-total-texte); box-shadow: var(--carte-ombre); font-size: var(--texte-formulaire); font-weight: var(--graisse-normale); line-height: 1.45; text-align: left; white-space: normal; cursor: default; }
.info-titre + .info-bulle { top: calc(100% + var(--pas-1)); left: calc(var(--pas-gouttiere) + 282px); }
[data-role="fiche-fermee"] { position: relative; }
[data-role="fiche-fermee"] > .info-bulle { top: calc(100% + var(--pas-1)); left: 0; }
/* G-182 tour 2 (mesure : a 390 px la bulle des regles du tri s'ouvrait de 302 a 662 px, soit 272 px hors de la fenetre ; celle de
 * « Projet fermé dans Zoho » ne tient plus a 320 px) : a largeur etroite, une bulle prend la largeur de sa place (la bande, entre les
 * gouttieres ; la fiche) au lieu de ses 360 px au plus a une position fixe. */
@media (max-width: 720px) {
  .info-titre + .info-bulle { left: var(--pas-gouttiere); right: var(--pas-gouttiere); width: auto; max-width: none; box-sizing: border-box; }
  [data-role="fiche-fermee"] > .info-bulle { left: 0; right: 0; width: auto; max-width: none; box-sizing: border-box; }
}
.info-titre:focus + .info-bulle, .info-carte:focus + .info-bulle, [data-role="fiche-fermee"]:focus > .info-bulle { display: block; }
/* G-182 (suite §15.5) : sous Safari (iOS surtout), un toucher ne donne PAS le focus a un bouton : la regle ci-dessus ne
 * s'y ouvrait jamais. Sur un ecran tactile (`hover: none` ou pointeur grossier), le toucher pose l'etat de SURVOL (WebKit
 * l'applique au premier toucher quand le survol fait paraitre un contenu) : la bulle s'ouvre ainsi aussi, et se ferme au
 * toucher suivant, ailleurs. Hors tactile, rien ne change : le survol garde l'infobulle native (`title`). */
@media (hover: none), (pointer: coarse) {
  .info-titre:hover + .info-bulle, .info-carte:hover + .info-bulle, [data-role="fiche-fermee"]:hover > .info-bulle { display: block; }
}
/* G-182 tour 2 : la MEME icone « i » et la MEME bulle, au coin d'une CARTE (l'urgence et la lettre GL de la nouvelle demande : leurs
 * exemples et leur critere ne vivent plus dans un `title`, qu'un telephone ne montre jamais). Le bouton est a cote de la carte, pas
 * dedans (un bouton dans un `<label>` n'est pas permis) ; la bulle le SUIT dans le HTML (`+`), elle s'ouvre comme les autres (focus,
 * clic, toucher) et se pose SUR la carte (son haut a celui de la carte, le bouton reste a droite) : on l'a ouverte au toucher depuis la
 * carte, donc le haut de la bulle est a l'ecran meme au bas de la fenetre, et elle ne depasse jamais la largeur de la carte. */
.carte-avec-info { position: relative; display: flex; }
.carte-avec-info > label { flex: 1 1 auto; min-width: 0; }
/* tour 3 : la place du « i » (36 px a droite) n'est reservee qu'a une carte qui A son bouton ; une carte sans bulle garde toute sa largeur */
.carte-avec-info--bulle > label { padding-right: 36px; }
.info-carte { position: absolute; top: 4px; right: 4px; z-index: 2; display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; padding: 0; border: 0; border-radius: var(--rayon-champ); background: transparent; opacity: 0.7; cursor: help; }
.info-carte:hover { opacity: 1; }
.info-carte:focus-visible { outline: var(--focus-epaisseur) solid var(--focus-couleur); outline-offset: 1px; }
.info-carte svg { display: block; }
.info-carte + .info-bulle { top: 4px; left: 4px; right: 36px; width: auto; max-width: none; box-sizing: border-box; }
/* G-198 : le toucher BASCULE la bulle (`communs.js`, section 6) : `data-bulle` sur le declencheur dit « ouverte » (quoi que le focus et
 * le survol disent) ou « fermee » (meme si le navigateur garde le focus ou le survol apres un second toucher). Sans `data-bulle` (le
 * clavier, la souris), les regles du focus et du survol ci-dessus gardent la main. Le `data-dessus` de la bulle (la place manque en bas) la
 * pose AU-DESSUS de son declencheur (G-198 tour 2 : sur une carte, au-dessus du « i », au haut de la carte, jamais ancree au bas d'une carte
 * qui depasse la fenetre) ; `communs.js` ne garde `data-dessus` que si le depassement vertical de la bulle DIMINUE. */
.info-titre[data-bulle="ouverte"] + .info-bulle, .info-carte[data-bulle="ouverte"] + .info-bulle, [data-role="fiche-fermee"][data-bulle="ouverte"] > .info-bulle { display: block; }
.info-titre[data-bulle="fermee"] + .info-bulle, .info-carte[data-bulle="fermee"] + .info-bulle, [data-role="fiche-fermee"][data-bulle="fermee"] > .info-bulle { display: none; }
.info-titre + .info-bulle[data-dessus], [data-role="fiche-fermee"] > .info-bulle[data-dessus] { top: auto; bottom: calc(100% + var(--pas-1)); }
.info-carte + .info-bulle[data-dessus] { top: auto; bottom: calc(100% - 4px + var(--pas-1)); }
.fil { display: flex; align-items: center; gap: var(--pas-3); color: var(--tete-texte-doux); }

/* ---- boutons ---------------------------------------------------------- */
.bouton {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--pas-2-5);
  height: var(--hauteur-bouton); padding: 0 var(--pas-5); font: inherit; font-size: var(--texte-formulaire); font-weight: var(--graisse-appuyee);
  background: var(--bouton-fond); color: var(--bouton-texte); border: 1px solid var(--bouton-fond); border-radius: var(--rayon-champ);
  cursor: pointer; text-decoration: none; white-space: nowrap;
  transition: background-color var(--duree-fondu) ease-out, border-color var(--duree-fondu) ease-out, color var(--duree-fondu) ease-out, box-shadow var(--duree-ombre) ease-out, transform var(--duree-fondu) ease-out;
}
.bouton:hover { background: var(--bouton-fond-survol); border-color: var(--bouton-fond-survol); color: var(--bouton-texte); box-shadow: var(--bouton-ombre); transform: translateY(-1px); }
.bouton:active { transform: scale(0.98); box-shadow: none; transition-duration: var(--duree-appui); }
.bouton--secondaire { background: var(--bouton2-fond); color: var(--bouton2-texte); border-color: var(--bouton2-bordure); }
.bouton--secondaire:hover { background: var(--bouton2-fond-survol); color: var(--bouton2-texte); border-color: var(--bouton2-bordure-survol); box-shadow: var(--bouton2-ombre); }
.bouton--danger { background: var(--bouton-danger-fond); color: var(--bouton-danger-texte); border-color: var(--bouton-danger-texte); }
.bouton--danger:hover { background: var(--bouton-danger-fond-survol); color: var(--bouton-danger-texte); border-color: var(--bouton-danger-texte); box-shadow: none; }
.bouton--compact { height: var(--hauteur-champ-compact); padding: 0 var(--pas-4); font-size: var(--texte-tableau); }
.bouton--large { width: 100%; }
/* G-182 : un bouton qui ne porte qu'un symbole universel (copier, fermer, telecharger) ; son nom est `aria-label`, son
 * infobulle `title`. */
.bouton--icone { flex: none; width: var(--hauteur-bouton); padding: 0; }
.bouton--icone.bouton--compact { width: var(--hauteur-champ-compact); }
.bouton--icone svg { display: block; }
.bouton:disabled, .bouton[aria-disabled="true"] { background: var(--bouton-desactive-fond); color: var(--bouton-desactive-texte); border-color: var(--bouton-desactive-bordure); cursor: default; box-shadow: none; transform: none; }

/* ---- champs ----------------------------------------------------------- */
.etiquette { display: block; margin-bottom: var(--pas-2); font-size: var(--texte-etiquette); line-height: 14px; font-weight: var(--graisse-appuyee); letter-spacing: 0.03em; text-transform: uppercase; color: var(--page-texte-doux); }
.etiquette em { font-style: normal; font-weight: var(--graisse-normale); text-transform: none; letter-spacing: 0; }
.champ {
  width: 100%; height: var(--hauteur-champ); padding: 0 var(--pas-3-5); font: inherit; font-size: var(--texte-formulaire);
  background: var(--champ-fond); color: var(--champ-texte); border: 1px solid var(--champ-bordure); border-radius: var(--rayon-champ);
  transition: border-color var(--duree-fondu) ease-out, box-shadow var(--duree-ombre) ease-out, background-color var(--duree-fondu) ease-out;
}
.champ::placeholder { color: var(--champ-texte-indication); }
.champ:hover { border-color: var(--champ-bordure-survol); }
/* G-84 t5 (N-39) : l'anneau colle au champ -- la bordure prend la couleur de l'anneau, plus le jeton `--pas-0-5` dehors
 * (1 px aujourd'hui ; G-182, suite §17.11 : c'est le JETON qui fait foi, pas ce nombre). Plus de bande de la couleur du fond. */
.champ:focus { outline: none; border-color: var(--champ-anneau); box-shadow: 0 0 0 var(--pas-0-5) var(--champ-anneau); }
.champ--compact { height: var(--hauteur-champ-compact); padding: 0 9px; }
.champ--nombre { text-align: right; font-variant-numeric: tabular-nums; }
.champ--court { width: 120px; }
.champ--moyen { width: 180px; }
.champ--recherche { width: 300px; }
.champ--modifie { background: var(--champ-fond-modifie); border-color: var(--champ-bordure-survol); }
.champ[aria-invalid="true"] { border: 2px solid var(--champ-bordure-erreur); }
.champ:disabled { background: var(--champ-fond-inactif); color: var(--champ-texte-indication); border-color: var(--lecture-bordure); }
.lecture { min-height: var(--hauteur-champ-compact); display: flex; align-items: center; gap: var(--pas-3); padding: 0 9px; background: var(--lecture-fond); color: var(--lecture-texte); border: 1px solid var(--lecture-bordure); border-radius: var(--rayon-champ); font-size: var(--texte-formulaire); }
.lecture--etale { justify-content: space-between; }
.aide { color: var(--page-texte-doux); font-size: var(--texte-meta); }
.refus-champ { display: flex; align-items: flex-start; gap: var(--pas-3); margin-top: var(--pas-2-5); color: var(--page-texte-erreur); animation: dv-apparait var(--duree-deplacement) ease-out; }
/* G-182 tour 2 : la case n'a plus de mot a cote (« Oui » retire) : sa CIBLE est le libelle, de 24 x 24 px au moins (la case native
 * est de 13 a 16 px) ; un toucher dans le coin du libelle la coche. */
.case { display: inline-flex; align-items: center; justify-content: center; gap: var(--pas-2-5); min-width: 24px; min-height: 24px; }
.case input[type="checkbox"] { width: 18px; height: 18px; margin: 0; }

/* ---- selecteur avec recherche --------------------------------------- */
.selecteur { position: relative; display: flex; align-items: center; gap: var(--pas-2-5); height: var(--hauteur-champ); padding: 0 var(--pas-2-5) 0 var(--pas-3-5); background: var(--selecteur-fond); color: var(--selecteur-texte); border: 1px solid var(--champ-bordure); border-radius: var(--rayon-champ); font-size: var(--texte-formulaire); transition: border-color var(--duree-fondu) ease-out, background-color var(--duree-fondu) ease-out; }
.selecteur:hover { border-color: var(--champ-bordure-survol); }
.selecteur__valeur { flex-grow: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.selecteur__valeur--vide { color: var(--selecteur-texte-vide); }
.selecteur--rempli { background: var(--selecteur-fond-rempli); border-color: var(--champ-bordure-survol); }
.selecteur--ouvert { outline: var(--focus-epaisseur) solid var(--focus-couleur); outline-offset: 1px; }
.selecteur__effacer { width: 20px; height: 20px; padding: 0; display: flex; align-items: center; justify-content: center; border: none; border-radius: 3px; background: transparent; cursor: pointer; transition: background-color var(--duree-fondu) ease-out; }
.selecteur__effacer svg { color: var(--selecteur-icone); }
.selecteur__effacer:hover { background: var(--selecteur-icone-fond-survol); }
.selecteur__liste { position: absolute; left: -1px; right: -1px; top: 34px; z-index: 5; display: flex; flex-direction: column; gap: var(--pas-1); padding: var(--pas-2-5); background: var(--liste-fond); color: var(--liste-texte); border: 1px solid var(--liste-bordure); border-radius: var(--rayon-champ); box-shadow: var(--liste-ombre); animation: dv-deroule var(--duree-liste) var(--courbe-sortie); }
.selecteur__option { height: var(--hauteur-champ-compact); display: flex; align-items: center; padding: 0 var(--pas-3); border-radius: 3px; }
.selecteur__option[aria-selected="true"] { background: var(--liste-fond-actif); box-shadow: inset 3px 0 0 var(--liste-marque); }
.selecteur__pied { margin-top: var(--pas-2); padding: var(--pas-2) var(--pas-3) var(--pas-1); border-top: 1px solid var(--td-filet); color: var(--liste-texte-doux); font-size: var(--texte-meta); }

/* ---- puces de filtre et segment ------------------------------------- */
.filtres { display: flex; align-items: center; gap: var(--pas-3-5); flex-wrap: wrap; flex: none; }
.puce { display: inline-flex; align-items: center; gap: var(--pas-2-5); height: 26px; padding: 0 var(--pas-3-5); font: inherit; font-size: var(--texte-entete); background: var(--puce-fond); color: var(--puce-texte); border: 1px solid var(--puce-bordure); border-radius: var(--rayon-pastille); cursor: pointer; transition: background-color var(--duree-fondu) ease-out, border-color var(--duree-fondu) ease-out, color var(--duree-fondu) ease-out; }
.puce b { font-weight: var(--graisse-forte); font-variant-numeric: tabular-nums; }
.puce:hover { background: var(--puce-fond-survol); border-color: var(--puce-bordure-survol); }
.puce[aria-pressed="true"] { background: var(--puce-actif-fond); color: var(--puce-actif-texte); border-color: var(--puce-actif-fond); }
.segment { display: inline-flex; overflow: hidden; background: var(--segment-fond); border: 1px solid var(--segment-bordure); border-radius: var(--rayon-champ); }
.segment a { height: var(--hauteur-champ-compact); display: flex; align-items: center; padding: 0 var(--pas-4); color: var(--segment-texte); text-decoration: none; font-size: var(--texte-tableau); border-right: 1px solid var(--segment-separateur); transition: background-color var(--duree-fondu) ease-out; }
.segment a:last-child { border-right: none; }
.segment a:hover { background: var(--segment-fond-survol); color: var(--segment-texte); }
.segment a[aria-current="page"] { background: var(--segment-actif-fond); color: var(--segment-actif-texte); font-weight: var(--graisse-appuyee); }

/* ---- tableau (grille) ------------------------------------------------- */
.tableau-conteneur { flex-grow: 1; min-height: 0; overflow: auto; border: 1px solid var(--tableau-bordure); border-radius: var(--rayon-cadre); background: var(--td-fond); }
.tableau-conteneur--fixe { flex-grow: 0; }
.tableau { width: 100%; border-collapse: collapse; table-layout: fixed; font-size: var(--texte-tableau); }
.tableau th { position: sticky; top: 0; z-index: 1; height: var(--hauteur-entete); padding: var(--td-remplissage); text-align: left; font-size: var(--texte-entete); font-weight: var(--graisse-appuyee); background: var(--th-fond); color: var(--th-texte); border-bottom: 2px solid var(--th-filet); white-space: nowrap; }
.tableau td { height: var(--td-hauteur); padding: var(--td-remplissage); background: var(--td-fond); color: var(--td-texte); border-bottom: 1px solid var(--td-filet); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: background-color var(--duree-fondu) ease-out; }
.tableau tbody tr:nth-child(even) td { background: var(--td-fond-zebre); }
.tableau tbody tr:hover td { background: var(--td-fond-survol); }
.tableau tbody tr:hover td:first-child, .tableau tbody tr[aria-selected="true"] td:first-child { box-shadow: inset 3px 0 0 var(--td-filet-actif); }
.tableau tbody tr[aria-selected="true"] td { background: var(--td-fond-survol); }
.tableau .nombre { text-align: right; }
.tableau td.reste { background: var(--td-fond-reste); font-weight: var(--graisse-forte); }
.tableau td.cellule-haute { white-space: normal; vertical-align: top; padding-top: var(--pas-3-5); padding-bottom: var(--pas-3-5); height: auto; }
.tableau td.doux, .tableau .doux { color: var(--td-texte-doux); }
.tableau a { color: var(--td-texte-lien); }
.tableau--confort td { height: 40px; }
.suffixe { margin-left: 5px; color: var(--td-texte-doux); font-size: var(--texte-etiquette); }
.lien-ligne { color: var(--td-texte-lien); font-weight: var(--graisse-appuyee); font-size: var(--texte-entete); text-decoration: none; background-image: linear-gradient(currentColor, currentColor); background-size: 0 1px; background-repeat: no-repeat; background-position: 0 100%; transition: background-size var(--duree-deplacement) ease-out; }
.lien-ligne:hover { background-size: 100% 1px; }
/* G-89 (point 26) : « Ajouter une exception » / « Corriger », un volet dans la
   cellule (le texte est un `.lien-ligne`, sa couleur est deja prouvee). */
.tableau summary { cursor: pointer; }
.tableau details[open] > summary { margin-bottom: var(--pas-2-5); }

/* largeurs de colonnes (colgroup) */
.col-num { width: 44px; }
.col-po { width: 128px; }
.col-action { width: 120px; }
.col-etat { width: 140px; }
.col-reception { width: 128px; }
.col-auto { width: 64px; }
.col-personne { width: 104px; }
.col-fournisseur { width: 200px; }
.col-client { width: 184px; }
.col-projet { width: 92px; }
.col-facture { width: 96px; }
.col-total { width: 110px; }
.col-devise { width: 56px; }
.col-date { width: 110px; }
.col-ref { width: 110px; }
.col-qte { width: 70px; }
.col-reste { width: 80px; }
.col-prix { width: 120px; }
.col-soustotal { width: 130px; }
.col-quand { width: 150px; }
.col-courriel { width: 240px; }
.col-alerte { width: 420px; }
.col-confirmer { width: 110px; }

/* ---- pastilles et etiquettes ----------------------------------------- */
.pastille { display: inline-flex; align-items: center; gap: var(--pas-2-5); height: 19px; padding: 0 9px 0 7px; border-radius: var(--rayon-pastille); font-size: var(--texte-meta); font-weight: var(--graisse-moyenne); white-space: nowrap; }
.pastille::before { content: ""; flex: none; width: 7px; height: 7px; border-radius: 50%; }
.pastille--ok { background: var(--pastille-ok-fond); color: var(--pastille-ok-texte); }
.pastille--ok::before { background: var(--pastille-ok-voyant); }
.pastille--partiel { background: var(--pastille-partiel-fond); color: var(--pastille-partiel-texte); }
.pastille--partiel::before { background-image: linear-gradient(90deg, var(--pastille-partiel-voyant) 50%, transparent 50%); box-shadow: inset 0 0 0 1.5px var(--pastille-partiel-voyant); }
.pastille--non { background: var(--pastille-non-fond); color: var(--pastille-non-texte); }
.pastille--non::before { box-shadow: inset 0 0 0 1.5px var(--pastille-non-voyant); }
.pastille--neutre { background: var(--pastille-neutre-fond); color: var(--pastille-neutre-texte); }
.pastille--neutre::before { height: 2px; border-radius: 0; background: var(--pastille-neutre-voyant); }
.pastille--brouillon { background: var(--pastille-brouillon-fond); color: var(--pastille-brouillon-texte); border: 1px dashed var(--pastille-brouillon-bordure); }
.pastille--brouillon::before { display: none; }
.pastille--ia { background: var(--pastille-ia-fond); color: var(--pastille-ia-texte); }
.pastille--ia::before { border-radius: 2px; background: var(--pastille-ia-voyant); }
.etiquette-courte { display: inline-block; margin-left: var(--pas-2-5); padding: 0 7px; line-height: 17px; border-radius: var(--rayon-pastille); font-size: var(--texte-etiquette); font-weight: var(--graisse-appuyee); background: var(--etiquette-agent-fond); color: var(--etiquette-agent-texte); }
.etiquette-courte--rush { background: var(--etiquette-rush-fond); color: var(--etiquette-rush-texte); }

/* ---- avis ------------------------------------------------------------- */
.avis { display: flex; align-items: flex-start; gap: var(--pas-3); padding: var(--pas-2-5) var(--pas-4); border: 1px solid transparent; border-radius: var(--rayon-cadre); line-height: 1.45; animation: dv-apparait var(--duree-deplacement) ease-out; }
.avis svg { flex: none; margin-top: 1px; }
.avis--succes { background: var(--avis-succes-fond); color: var(--avis-succes-texte); }
.avis--succes svg { color: var(--avis-succes-icone); }
.avis--refus { background: var(--avis-refus-fond); color: var(--avis-refus-texte); border-color: var(--avis-refus-bordure); }
.avis--refus svg, .avis--refus .avis__titre { color: var(--avis-refus-texte-titre); }
.avis--alerte { flex-direction: column; background: var(--avis-alerte-fond); color: var(--avis-alerte-texte); border-color: var(--avis-alerte-bordure); }
.avis--alerte .avis__titre { color: var(--avis-alerte-texte-titre); }
.avis--alerte .avis__doux { color: var(--avis-alerte-texte-doux); }
.avis__titre { font-weight: var(--graisse-forte); }
.rush { display: inline-flex; align-items: center; gap: var(--pas-3); height: var(--hauteur-champ-compact); padding: 0 var(--pas-4); border: 1px solid var(--rush-bordure); border-radius: var(--rayon-pastille); background: var(--rush-fond); color: var(--rush-texte); text-decoration: none; transition: background-color var(--duree-fondu) ease-out; }
.rush:hover { background: var(--rush-fond-survol); color: var(--rush-texte); }
.rush b { color: var(--rush-texte-titre); }

/* ---- etat vide ------------------------------------------------------- */
.etat-vide { flex-grow: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--pas-2-5); padding: 28px var(--pas-5); text-align: center; color: var(--carte-texte); }
.etat-vide span { color: var(--carte-texte-doux); }
.etat-vide svg { color: var(--carte-texte-doux); }

/* ---- carte ------------------------------------------------------------ */
.carte { display: flex; flex-direction: column; background: var(--carte-fond); color: var(--carte-texte); border: 1px solid var(--carte-bordure); border-radius: var(--rayon-cadre); transition: border-color var(--duree-ombre) ease-out, box-shadow var(--duree-ombre) ease-out; }
.carte:hover { border-color: var(--carte-bordure-survol); box-shadow: var(--carte-ombre); }
.carte h2 { padding: var(--pas-3-5) var(--pas-5); font-size: var(--texte-carte); font-weight: var(--graisse-appuyee); border-bottom: 1px solid var(--carte-filet); color: var(--carte-texte); }
.carte h2 .doux { color: var(--carte-texte-doux); font-weight: var(--graisse-normale); }
.carte__corps { display: flex; flex-direction: column; gap: var(--pas-3-5); padding: 14px var(--pas-5); }
.carte .tableau th { position: static; }

/* ---- resume multidevise --------------------------------------------- */
.resume { display: flex; align-items: stretch; gap: var(--pas-4); flex-wrap: wrap; }
.tuile { display: flex; flex-direction: column; gap: var(--pas-1); min-width: 150px; padding: var(--pas-3-5) var(--pas-5); background: var(--tuile-fond); color: var(--tuile-texte); border: 1px solid var(--carte-bordure); border-radius: var(--rayon-cadre); transition: transform var(--duree-ombre) ease-out, box-shadow var(--duree-ombre) ease-out; }
.tuile:hover { transform: translateY(-1px); box-shadow: var(--carte-ombre); }
.tuile .etiquette { color: var(--tuile-texte-etiquette); margin: 0; }
.tuile b { font-size: 20px; font-weight: var(--graisse-appuyee); font-variant-numeric: tabular-nums; }
.tuile--nue { background: transparent; border-color: transparent; padding-left: 0; min-width: 130px; }
.tuile--nue:hover { transform: none; box-shadow: none; }
.tuile--total { background: var(--tuile-total-fond); color: var(--tuile-total-texte); border-color: var(--tuile-total-fond); }
.tuile--total .etiquette { color: var(--tuile-total-texte-etiquette); }
.resume__taux { display: flex; flex-direction: column; justify-content: center; gap: var(--pas-1); font-size: var(--texte-meta); color: var(--page-texte-doux); }

/* ---- bon d'achat : deux zones ---------------------------------------- */
.bon-libelles { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }
.bon-libelle { display: flex; align-items: center; gap: var(--pas-3); font-size: var(--texte-meta); font-weight: var(--graisse-appuyee); letter-spacing: 0.04em; text-transform: uppercase; color: var(--bon-imprime-texte-libelle); }
.bon-libelle--interne { padding-left: var(--pas-5); color: var(--page-texte-doux); }
.bon { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); border: 1px solid var(--bon-bordure); border-radius: var(--rayon-cadre); overflow: hidden; }
.bon__imprime { background: var(--bon-imprime-fond); color: var(--bon-imprime-texte); }
.bon__interne { background: var(--bon-interne-fond); color: var(--bon-interne-texte); border-left: 1px solid var(--bon-bordure); }
.bon__interne .etiquette, .bon__interne .doux { color: var(--bon-interne-texte-doux); }
.bon__imprime .etiquette, .bon__imprime .doux { color: var(--bon-imprime-texte-doux); }
.bon__entete { display: flex; flex-direction: column; gap: var(--pas-4); padding: var(--pas-5) 18px 14px; }
.bon__entete--interne { gap: var(--pas-3-5); padding: var(--pas-5); }
.bon__titre { font-size: 18px; font-weight: var(--graisse-forte); letter-spacing: 0.03em; color: var(--bon-imprime-texte); }
.bon__adresse { font-size: var(--texte-etiquette); line-height: 1.45; text-align: right; color: var(--bon-imprime-texte-doux); }
.bon__logo { display: block; height: 40px; width: auto; }
.bon__ligne { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }
.bon__ligne > .bon__imprime, .bon__ligne > .bon__interne { display: grid; align-items: center; min-height: 38px; border-bottom: 1px solid var(--td-filet); }
.bon__ligne > .bon__imprime { grid-template-columns: 40px 130px minmax(0, 1fr) 110px 110px 70px 130px; }
.bon__ligne > .bon__interne { grid-template-columns: 140px 130px 90px minmax(0, 1fr); }
.bon__ligne > div > * { min-width: 0; padding: 0 5px; white-space: nowrap; }
.bon__ligne--entete > .bon__imprime, .bon__ligne--entete > .bon__interne { min-height: var(--hauteur-entete); font-size: var(--texte-entete); font-weight: var(--graisse-appuyee); border-top: 1px solid var(--bon-bordure); border-bottom: 2px solid var(--th-filet); }
.bon__ligne--entete > .bon__interne { border-bottom-color: var(--bon-filet-interne); }
.bon__ligne--entete > div > * { padding: 0 var(--pas-3); }
.bon__pied { display: flex; align-items: center; gap: var(--pas-gouttiere); padding: var(--pas-4) 18px; border-top: 1px solid var(--bon-bordure); }
.bon__pied--interne { border-top: 1px solid var(--bon-bordure); }
.bon__taxes { font-size: var(--texte-meta); color: var(--bon-imprime-texte-doux); }
.montant { font-size: var(--texte-montant); font-weight: var(--graisse-appuyee); font-variant-numeric: tabular-nums; }

/* ---- connexion -------------------------------------------------------- */
.bandeau-mince { flex: none; height: var(--pas-3); background: var(--tete-fond); border-bottom: 1px solid var(--tete-bordure); }
.connexion { flex-grow: 1; display: flex; align-items: center; justify-content: center; }
.connexion__carte { width: 440px; overflow: hidden; background: var(--carte-fond); color: var(--carte-texte); border: 1px solid var(--carte-bordure); border-top: var(--pas-2) solid var(--connexion-filet); border-radius: var(--rayon-cadre); }
.connexion__corps { display: flex; flex-direction: column; gap: 18px; padding: 28px 32px 30px; }
.connexion h1 { font-size: 22px; font-weight: var(--graisse-appuyee); color: var(--carte-texte); }
.connexion .champ { height: 36px; font-size: var(--texte-carte); }
.connexion .bouton { height: 38px; font-size: var(--texte-carte); }

/* ---- Admin, Comptes : UNE ligne par compte (G-98 t3, N-23) ------------------
 * Le tableau « Actifs » est a colonnes FIXES (`.tableau`), des largeurs en pour cent posees par
 * attribut (`col[data-col]`) : le texte (courriel, nom, « approuve par ») prend ce qui reste et se
 * coupe par une ellipse (sa valeur entiere est dans `title`) ; ce qui se clique ne se coupe jamais.
 * Aucune cellule ne passe a la ligne : la rangee garde la hauteur de `.tableau--confort`. Le menu du
 * role et l'icone de validation sont sur une meme ligne (`.rangee`, sans retour a la ligne). */
[data-zone="actifs"] col[data-col="courriel"] { width: 15%; }
[data-zone="actifs"] col[data-col="nom"] { width: 12%; }
[data-zone="actifs"] col[data-col="initiales"] { width: 5%; }
[data-zone="actifs"] col[data-col="role"] { width: 20%; }
[data-zone="actifs"] col[data-col="etat"] { width: 16%; }
[data-zone="actifs"] col[data-col="approuve-par"] { width: 8%; }
[data-zone="actifs"] col[data-col="mot-de-passe"] { width: 15%; }
[data-zone="actifs"] col[data-col="desactiver"] { width: 9%; }
[data-zone="actifs"] th, [data-zone="actifs"] td { padding-left: var(--pas-2-5); padding-right: var(--pas-2-5); }
[data-zone="actifs"] td { vertical-align: middle; }
[data-zone="actifs"] [data-role="role"] .rangee { flex-wrap: nowrap; gap: var(--pas-2); }
[data-zone="actifs"] [data-role="changer-role"] { flex: none; width: var(--hauteur-champ-compact); padding: 0; }
[data-zone="actifs"] [data-role="changer-role"] svg { display: block; }
/* G-198 (mesure : a 390 px le tableau « Actifs » depassait sa carte de 41 px, la colonne a 5 % ne tenant pas ses marges, et la PAGE
 * defilait de cote de 20 px) : a largeur etroite, les tableaux des comptes gardent une largeur lisible et DEFILENT DANS LEUR CARTE. */
@media (max-width: 720px) {
  .carte:has(> table[data-zone="actifs"]), .carte:has(> table[data-zone="en-attente"]), .carte:has(> table[data-zone="autres"]) { overflow-x: auto; }
  [data-zone="actifs"] { min-width: 1100px; }
  [data-zone="actifs"] col[data-col="initiales"] { width: 7%; }
  [data-zone="actifs"] col[data-col="role"] { width: 18%; }
  [data-zone="en-attente"], [data-zone="autres"] { min-width: 560px; }
}

/* ---- mouvement --------------------------------------------------------- */
@keyframes dv-deroule { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
@keyframes dv-apparait { from { opacity: 0; transform: translateY(-3px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
}