/* Antiq Photo — portail interne : feuille de style unique.

   Sortie des blocs <style> des six gabarits le 07/09/2026. La meme regle y
   etait recopiee, parfois definie deux ou trois fois dans le meme fichier,
   parfois presente dans un gabarit et absente d un autre — d ou deux bugs
   dans la journee (journal A.45).

   Les selecteurs repetes sont fusionnes PROPRIETE PAR PROPRIETE, pas en
   gardant le dernier bloc : une regle tardive qui ne portait que
   `background:none` aurait sinon efface la couleur et le soulignement.

   REGLE : aucune regle de style ne retourne dans un gabarit. Ce fichier fait
   foi pour l apparence du portail. */

:root{--vert:#002D2D;--vert-clair:#17423E;--dore:#C9964A;--dore-pale:#E2D5C2;--creme:#FAF7F2;--texte:#111111;--gris:#4C5655;--trait:#E4DED4;--gris-doux:#667371;--gris-trait:#C2CBC9;--ok-fond:#DFEFE6;--ok-texte:#1C6B4C;--ok-vif:#1C7A55;--alerte-fond:#FDF4E7;--alerte-texte:#8A6220;--alerte-sombre:#6B4B15;--danger-fond:#F7E2DC;--danger-texte:#8E3520;--danger-trait:#E0A796;--danger-vif:#B4472F;--neutre-fond:#EFEBE3;--or-contraste:#231A08;--ico-bleu-fond:#E2EBF2;--ico-bleu:#2C5A7A;--ico-violet-fond:#E9E4F2;--ico-violet:#4C3A7A;--carte:#FFFFFF;--sur-accent:#FFFFFF;--carte-bordure:rgba(18,33,31,.08);--info-fond:#E2EBF2;--info-texte:#2C5A7A}
/* p202 — LA CHARTE UNIQUE (charte-esthetique.md, 24/09), en jetons. Espacements :
   4 · 8 · 12 · 16 · 20 · 24 · 32 (2, 3, 6 admis dans un composant, jamais entre
   deux blocs). Titres par rang, hauteurs de controle, rayons par role. Les
   ombres par role sont plus bas, avec les autres teintes translucides. */
:root{--esp-2:2px;--esp-4:4px;--esp-8:8px;--esp-12:12px;--esp-16:16px;--esp-20:20px;
--esp-24:24px;--esp-32:32px;
--t-titre-page:18px;--t-h1:22px;--t-section:18px;--t-carte:15px;--t-corps:14px;
--t-dense:13px;--t-petit:12px;--t-etiq:11px;--t-chiffre:26px;
--h-cta:56px;--h-controle:44px;--h-mini:36px;--h-icone:34px;
--r-carte:14px;--r-fenetre:16px;--r-feuille:20px;--r-mini:12px;--r-vignette:10px;--r-pilule:999px}
*{box-sizing:border-box}
body{margin:0;background:var(--creme);color:var(--texte);font:400 14px/1.45 'Poppins',-apple-system,BlinkMacSystemFont,'Segoe UI',Helvetica,Arial,sans-serif;-webkit-font-smoothing:antialiased}
/* L EN-TETE. Creme opaque, encre sombre, et RIEN au defilement : ni ombre,
   ni flou, ni bordure qui apparait — sticky_header.dart l. 46-50.
   ⚠️ IL RESTE EN HAUT — p164, demande de Jason du 23/09. Il defilait avec la
   page : sur le stock, on perdait la navigation des la deuxieme rangee de
   fiches. `sticky` et non `fixed` : le contenu garde sa place dans le flux,
   rien n a besoin d etre decale pour compenser. */
/* ⚠️ LE MEME AXE QUE LE CONTENU — p169, demande de Jason du 23/09. Le fond
   de l en-tete doit courir sur TOUTE la largeur (sinon la page apparait sur
   ses cotes au defilement), mais son contenu appartient a la meme colonne que
   `main` et `footer` : 1 180 px centres, plus 28 de marge. D ou un
   rembourrage CALCULE et non fixe. Mesure du 23/09 sur un ecran de 1 900 px :
   le logo demarrait a 28 px quand les fiches demarraient a 360.
   `max(...)` : sous 1 180 px le calcul devient negatif, et c est la marge
   ordinaire de 28 px qui reprend la main. */
header{background:var(--creme);color:var(--texte);
padding:20px max(var(--esp-24), calc((100% - 1180px) / 2 + var(--esp-24))) 12px; /* p202 : 28 -> 24 */
display:flex;align-items:center;gap:var(--esp-12);flex-wrap:wrap;position:sticky;top:0;
z-index:30}
/* LA BANDE DE FONDU sous l en-tete — le meme degrade que l application.
   ⚠️ ELLE PORTE TOUT LE TRAVAIL : sans elle, un en-tete colle coupe la page
   d un trait net, et le texte qui passe dessous parait sectionne. 32 px de
   creme qui s efface progressivement : le contenu s eteint en approchant au
   lieu de disparaitre d un coup. Trois etapes, pas deux — un degre lineaire
   se voit comme une bande grise a mi-course. */
header:after{content:"";position:absolute;left:0;right:0;top:100%;height:32px;
background:linear-gradient(to bottom,var(--creme),var(--voile-creme) 45%,
var(--creme-transparente));pointer-events:none}
/* CHAQUE ENFANT DE LA RANGEE FAIT 34 PX. C est la hauteur de la rangee de
   l application, et c est ce qui met tout sur la meme ligne : sans hauteur
   commune, `align-items:center` centre des boites de tailles differentes et
   les textes ne s alignent plus entre eux. */
/* ⚠️ LA RANGEE PASSE A 48 px — 22/09, p70. Les 34 px venaient de la
   rangee d en-tete de l APPLICATION ; en changeant ici, on s en
   ecarte. Voir l en-tete de p70.py et PARITE § 12. */
header>.logo,header>.actions-entete,header>nav.principal{height:48px}
.filet-entete{width:1px;height:22px;background:var(--trait);flex:none;align-self:center}
.titre-entete{display:flex;align-items:center;height:48px;font-size:var(--t-titre-page);font-weight:600;
letter-spacing:-.3px;line-height:1.2;color:var(--texte);margin:0}
.actions-entete{margin-left:auto;display:flex;align-items:center;gap:12px}

/* LA PORTE DU COMPTE, en tete du menu.
   ⚠️ SELECTEUR DESCENDANT OBLIGATOIRE : `.panneau a` vaut (0,1,1) et
   repose `display:block` sur tout lien du panneau. Une classe seule (0,1,0)
   perd, et la rangee se deplie. */
.past,.panneau .past{display:inline-flex;align-items:center;gap:6px;padding:3px 8px;
border-radius:999px;font-size:11px;font-weight:600;letter-spacing:.2px;line-height:1.2}
.past:before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor;flex:none}
.past.ok{background:var(--ok-fond);color:var(--ok-texte)}
.past.admin{background:var(--alerte-fond);color:var(--alerte-texte)}
.past.info{background:var(--info-fond);color:var(--info-texte)}
.past.dore{background:var(--dore-pale);color:var(--or-contraste)}

/* ⚠️ SELECTEUR DESCENDANT OBLIGATOIRE. `.panneau a` vaut (0,1,1) et repose
   `display:block` sur tout lien du panneau. Une classe seule (0,1,0) perd,
   et la rangee se deplie en colonne. */
.panneau .porte-compte{display:flex;align-items:center;gap:var(--esp-12);padding:var(--esp-16); /* p202 */

background:var(--creme);border-bottom:1px solid var(--trait);text-decoration:none;color:inherit}
.panneau .porte-compte:hover{background:var(--creme);color:inherit}
/* Le rond au-dessus, le nom et le badge CENTRES sous lui. */
.porte-corps{min-width:0;flex:1;display:flex;flex-direction:column;align-items:center;gap:8px}
.rond-compte{display:grid;place-items:center;width:44px;height:44px;
border-radius:50%;background:var(--vert);color:var(--sur-accent);
font-size:18px;font-weight:700;line-height:1}
.porte-nom{font-size:14px;font-weight:600;line-height:1.3;color:var(--texte);
text-align:center;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* Centre verticalement sur TOUTE la rangee, pas sur une ligne. */
.panneau .porte-compte .chev{flex:none;display:flex;align-self:center;color:var(--gris-doux)}

/* Les entrees du menu portent elles aussi leur chevron, en fin de ligne. */
.panneau a.entree{display:flex;align-items:center;justify-content:space-between;gap:12px}
.panneau a.entree .chev{flex:none;display:flex;color:var(--gris-doux)}
.marque{display:flex;align-items:center;gap:12px;font-weight:600;letter-spacing:.13em;font-size:14px;color:var(--texte)}
header>.logo{display:flex;line-height:0;flex:none}
header>.logo img{height:48px;width:48px;display:block}
.marque img{height:34px;width:34px;display:block}
.marque span{color:var(--dore)}
footer{display:flex;align-items:center;gap:var(--esp-12);max-width:1180px;margin:0 auto;padding:8px var(--esp-24) 32px; /* p202 */
color:var(--gris);font-size:12px}
.pied-reseaux{margin-left:auto;display:flex;align-items:center;gap:4px}
.pied-reseaux a{display:grid;place-items:center;width:36px;height:36px;
border-radius:50%;color:var(--gris);text-decoration:none}
.pied-reseaux a:hover{color:var(--vert);background:var(--survol-discret)}
/* ⚠️ `opacity:.75` GARDE — le pied n est pas une commande, il ne doit
   pas tirer l oeil autant que l en-tete malgre sa nouvelle taille. */
footer img{height:48px;width:auto;opacity:.75;flex:none}
main{max-width:1180px;margin:0 auto;padding:var(--esp-20) var(--esp-24)} /* p202 : marge de page bureau 24 */
h1{font-size:var(--t-h1);font-weight:700;line-height:1.2;letter-spacing:-.3px;margin:0 0 var(--esp-2)} /* p202 */
.sous{color:var(--gris);margin:0 0 var(--esp-20);font-size:14px} /* p202 */
nav.onglets{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:22px}
nav.onglets a,nav.onglets span{padding:8px 16px;border-radius:999px;font-size:13px;letter-spacing:.06em;text-decoration:none;border:1px solid var(--trait);background:var(--carte)}
nav.onglets .actif{background:var(--vert);color:var(--sur-accent);border-color:var(--vert)}
nav.onglets .inactif{color:var(--gris-doux);background:var(--neutre-fond);cursor:not-allowed}
nav.onglets a{color:var(--texte)}
nav.onglets a:hover{border-color:var(--dore)}
.cartes{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:var(--esp-12);margin-bottom:var(--esp-20)} /* p202 */
.carte{background:var(--carte);border:1px solid var(--carte-bordure);border-radius:14px;padding:12px}
.carte .val{font-size:26px;font-weight:700;line-height:1.15;letter-spacing:-.3px;margin:0}
.carte .lib{font-size:12px;line-height:1.4;letter-spacing:0;color:var(--gris);text-transform:none;margin:0 0 4px;font-weight:400}
.ev{display:inline-flex;align-items:center;gap:3px;font-size:11px;font-weight:600;letter-spacing:.2px;line-height:1.2;margin-top:3px;color:var(--vert)}
.ev svg{width:12px;height:12px;flex:none;display:block}
.hausse,.baisse,.plat{color:var(--vert)}
.duo{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--esp-12);align-items:stretch} /* p202 */
.site-web-details{margin-top:var(--esp-20)}
.bloc{background:var(--carte);border:1px solid var(--carte-bordure);border-radius:14px;padding:16px}
.bloc h2{font-size:15px;font-weight:600;line-height:1.3;letter-spacing:-.1px;text-transform:none;color:var(--texte);margin:0 0 12px}
.bloc h2.serre{margin:0}
.bloc .sous-bloc{font-size:12px;line-height:1.4;color:var(--gris);margin:2px 0 12px}
table{width:100%;border-collapse:collapse;font-size:14px}
td{padding:var(--esp-8) 0;border-bottom:1px solid var(--trait)} /* p202 */
td:first-child{white-space:nowrap}
tr:last-child td{border-bottom:0}
td.n{text-align:right;font-variant-numeric:tabular-nums;font-weight:600}
.vide{color:var(--gris);font-size:14px;padding:20px 0;text-align:center}
.burger{position:relative}
.bouton-burger{background:none;border:0;color:var(--texte);width:34px;height:34px;border-radius:10px;cursor:pointer;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:4px;-webkit-user-select:none;user-select:none}
.bouton-burger span{display:block;width:17px;height:2px;background:currentColor;border-radius:2px}
.burger>input:checked~.bouton-burger{background:var(--survol-leger)}
.burger>input{display:none}
.burger>input:checked~.panneau{display:block}
.panneau{display:none;position:absolute;right:0;top:46px;min-width:265px;background:var(--carte);border:1px solid var(--trait);border-radius:var(--r-fenetre);box-shadow:var(--ombre-flottant);overflow:hidden;z-index:50;text-align:left} /* p202 */
.panneau .qui{padding:var(--esp-12) var(--esp-16);background:var(--creme);border-bottom:1px solid var(--trait);font-size:12px;color:var(--gris);line-height:1.45}
.panneau .qui b{display:block;color:var(--texte);font-size:13px;font-weight:600;word-break:break-all;margin-top:2px}
.panneau a,.panneau .bientot{display:block;padding:var(--esp-12) var(--esp-16);font-size:14px;text-decoration:none;color:var(--texte);border-bottom:1px solid var(--trait)}
.panneau a:hover{background:var(--creme);color:var(--vert)}
.panneau .bientot{color:var(--gris-doux);cursor:not-allowed}
.panneau .bientot:after{content:" · à venir";font-size:11px;letter-spacing:.05em}
.panneau :last-child{border-bottom:0}
.periodes{display:flex;gap:6px}
.periodes a{font-size:12px;padding:5px 11px;border-radius:6px;text-decoration:none;color:var(--texte);border:1px solid var(--filet-clair);background:var(--carte)}
.periodes a.on{background:var(--dore);border-color:var(--dore);color:var(--or-contraste);font-weight:600}
.marque .logo{display:flex;line-height:0}
.separateur{width:1px;height:26px;background:var(--separateur-clair);flex:none}
.marque .nom{font-weight:600;letter-spacing:.15em;font-size:12px;text-transform:uppercase}
/* ⚠️ `align-items:center` — p163, demande de Jason du 23/09. La barre fait
   48 px de haut et ses liens 34 : sans alignement, une hauteur fixe se pose
   EN HAUT de la barre. Mesure au banc : les onglets centres a 37 px quand le
   logo et la cloche l etaient a 44. Sept pixels, mais ils se voient — c est
   la seule ligne de la page ou tout doit tomber sur un meme axe. */
nav.principal{display:flex;align-items:center;gap:4px;padding-left:0}

/* LE LOGO DU PIED EST UN LIEN — p165/p166, demande de Jason du 23/09 : il
   ramene a l accueil, comme celui de l en-tete. `line-height:0` : sans lui,
   le lien ajoute sous l image l espace d une ligne de texte et le pied se
   decale de quelques pixels. L image reste a sa taille, seule son opacite
   repond au survol — un logo qui grossit au passage de la souris se remarque
   plus que la page. */
.logo-pied{display:inline-flex;line-height:0;border-radius:8px;
  transition:opacity var(--t-appui) var(--c-canonique)}
.logo-pied:hover{opacity:.72}
.logo-pied:focus-visible{outline:2px solid var(--vert);outline-offset:3px}
nav.principal a{position:relative;display:inline-flex;align-items:center;height:34px;
color:var(--gris);text-decoration:none;font-size:14px;
padding:0 12px;gap:6px;letter-spacing:0;white-space:nowrap;background:none;font-weight:400}
/* Le premier pictogramme commence au plus près du séparateur du portail. */
header>nav.principal a:first-child{padding-left:0}
nav.principal a img{width:16px;height:16px;display:block;flex:none;opacity:.72}
nav.principal a.actif img{opacity:1}
nav.principal a:hover{color:var(--texte);background:none}
nav.principal a.actif{color:var(--vert);background:none;font-weight:700;letter-spacing:.2px}
nav.principal a.actif:hover{background:none}
nav.principal a.actif:after{content:"";position:absolute;left:50%;bottom:1px;
transform:translateX(-50%);width:16px;height:3px;border-radius:2px;background:var(--vert)}
.cloche{position:relative;margin-right:9px}
.cloche>input{display:none}
.cloche>input:checked~.panneau{display:block}
.bouton-cloche{position:relative;display:flex;align-items:center;justify-content:center;width:34px;height:34px;border:0;border-radius:10px;color:var(--texte);cursor:pointer;background:none;-webkit-user-select:none;user-select:none}
.pastille{position:absolute;top:-6px;right:-6px;min-width:17px;height:17px;padding:0 4px;border-radius:9px;background:var(--dore);color:var(--or-contraste);font-size:11px;font-weight:700;line-height:17px;text-align:center}
.panneau.alertes{min-width:360px;max-width:min(430px,88vw);max-height:70vh;overflow:auto}
.alertes-titre{padding:13px 17px;background:var(--creme);border-bottom:1px solid var(--trait);font-size:11px;letter-spacing:.13em;text-transform:uppercase;color:var(--gris);font-weight:600}
.alertes-corps{padding:3px 15px 13px}
.alertes-corps .alerte{background:var(--alerte-fond);border:1px solid var(--dore);border-radius:10px;padding:13px 15px;margin:12px 0;font-size:13px;line-height:1.55;color:var(--texte)}
.alertes-corps .alerte b{color:var(--alerte-texte)}
.alertes-corps .alerte code{background:var(--creme);padding:1px 4px;border-radius:4px;font-size:12px}
.rien{padding:var(--esp-32) var(--esp-20);text-align:center;color:var(--gris)} /* p202 */
.rien svg{color:var(--gris-doux);margin-bottom:var(--esp-12)}
.rien b{display:block;color:var(--texte);font-size:14px;margin-bottom:4px}
.rien span{font-size:12px}
.ariane{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--gris);margin:0 0 16px;flex-wrap:wrap}
.ariane a{color:var(--gris);text-decoration:none;display:flex;align-items:center;gap:6px}
.ariane a:hover{color:var(--vert)}
.ariane .sep{color:var(--gris-trait)}
.ariane .ici{color:var(--texte);font-weight:600}
.carte .ico{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:50%;background:var(--creme);color:var(--vert);margin-bottom:12px}
.bloc + .bloc, .bloc + .duo, .duo + .bloc{margin-top:var(--esp-12)} /* p202 : le gap de la grille */
/* …mais deux blocs COTE A COTE dans une grille sont aussi des voisins au sens
   du HTML : la marge decalait le second de 14 px et desalignait les colonnes.
   L espacement d une grille est son gap, pas une marge. */
.duo > .bloc, .duo-sources > .bloc, .cartes > .bloc{margin-top:0}
.legende{display:flex;justify-content:space-between;color:var(--gris);font-size:12px;margin-top:4px;gap:var(--esp-12)}
.sous-titre{font-size:12px;font-weight:400;line-height:1.4;letter-spacing:0;text-transform:none;color:var(--gris);margin:0 0 8px}
.duo-sources{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--esp-12)} /* p202 */
.beignet{display:flex;align-items:center;gap:var(--esp-20);flex-wrap:wrap}
.beignet svg{transform:rotate(-90deg);flex:none}
.legende-liste{list-style:none;margin:0;padding:0;flex:1;min-width:190px}
.legende-liste li{display:flex;align-items:center;gap:var(--esp-8);font-size:13px;padding:var(--esp-4) 0}
.legende-liste .l{flex:1}
.legende-liste b{font-variant-numeric:tabular-nums}
.legende-liste .n{color:var(--gris);font-size:12px;min-width:34px;text-align:right}
.pastille-c{width:9px;height:9px;border-radius:3px;flex:none}
.barres{list-style:none;margin:0;padding:0}
.barres li{margin-bottom:var(--esp-12)}
.barres .t{display:flex;justify-content:space-between;font-size:13px;margin-bottom:var(--esp-4);gap:var(--esp-12)}
.barres .t span:first-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.barres .t b{font-variant-numeric:tabular-nums}
.rail{height:5px;border-radius:3px;background:var(--trait);overflow:hidden}
.rail i{display:block;height:100%;background:var(--vert);border-radius:3px}
.rail i.or{background:var(--dore)}
table.rangs th{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--gris);font-weight:600;padding-bottom:var(--esp-8);border-bottom:1px solid var(--trait);text-align:left}
table.rangs th.n,table.rangs td.n{text-align:right;font-variant-numeric:tabular-nums}
table.rangs td{padding:var(--esp-12) var(--esp-12) var(--esp-12) 0;vertical-align:middle;border-bottom:1px solid var(--trait);font-size:13px}
table.rangs td.rang{color:var(--gris);font-size:12px;width:26px}
table.rangs .t{font-size:13px;margin-bottom:var(--esp-4)}
.badge{display:inline-block;padding:2px 8px;border-radius:999px;font-size:11px;font-weight:600;letter-spacing:.2px;line-height:1.4;white-space:nowrap}
.badge.haut{background:var(--danger-fond);color:var(--danger-texte)}
.badge.moyen{background:var(--trait);color:var(--gris)}
.badge.bas{background:var(--ok-fond);color:var(--ok-texte)}
.barre-cmd{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;margin:0 0 20px}
.pastilles{display:flex;gap:4px;background:var(--neutre-fond);border-radius:999px;padding:4px}
.pastilles a{display:inline-flex;align-items:center;height:var(--h-mini);padding:0 18px;border-radius:999px; /* p202 : segment 36 + piste 4 = 44 */
text-decoration:none;font-size:14px;color:var(--gris);white-space:nowrap}
.pastilles a:hover{color:var(--texte)}
.pastilles a.on{background:var(--carte);color:var(--texte);font-weight:600;box-shadow:var(--ombre-choix)}
@media(max-width:700px){.barre-cmd .pastilles a,.rapports-onglets a{padding-inline:9px;font-size:12px}}
.cmd-droite{display:flex;align-items:center;gap:var(--esp-8)}
.menu{position:relative}
.menu>input{display:none}
.menu>input:checked~.volet{display:block}
.bt{display:flex;align-items:center;gap:var(--esp-8);min-height:var(--h-controle);padding:0 var(--esp-16);border-radius:999px;border:1px solid var(--trait);background:var(--carte);font:inherit;font-size:14px;font-weight:400; /* p202 : menu deroulant */
color:var(--texte);cursor:pointer;white-space:nowrap;-webkit-user-select:none;user-select:none}
.bt:hover{border-color:var(--dore)}
.bt.rond{width:var(--h-controle);height:var(--h-controle);padding:0;justify-content:center;border-radius:50%}
.raf{margin:0}
.volet{display:none;position:absolute;right:0;top:52px;width:320px;background:var(--carte);border:1px solid var(--trait);border-radius:var(--r-fenetre);padding:16px;z-index:60;box-shadow:var(--ombre-flottant)} /* p202 */
.volet-liste{width:230px;padding:0;overflow:hidden}
.volet-liste a,.volet-liste button{display:flex;justify-content:space-between;align-items:center;gap:var(--esp-8);min-height:var(--h-controle);padding:var(--esp-12) var(--esp-16);text-decoration:none;color:var(--texte);font-size:14px;border-bottom:1px solid var(--trait)}
/* ⚠️ UN BOUTON N HERITE NI DE LA POLICE NI DE LA LARGEUR — p129. Le volet
   servait jusqu ici des LIENS (on changeait de page) ; un choix qui ne quitte
   pas la page est un bouton, et il lui faut ces quatre lignes pour ressembler
   a son voisin. */
.volet-liste button{width:100%;background:none;border:0;
  border-bottom:1px solid var(--trait);font:inherit;font-size:14px;
  text-align:left;cursor:pointer}
.volet-liste a:last-child,.volet-liste button:last-child{border-bottom:0}
.volet-liste a:hover,.volet-liste button:hover{background:var(--creme)}
.volet-liste a.coche,.volet-liste button.coche{font-weight:600}
.volet-liste em{color:var(--gris);font-style:normal;font-size:12px}
.volet-liste .v{color:var(--dore)}
.v-titre{font-size:11px;letter-spacing:.08em;line-height:1.2;text-transform:uppercase;color:var(--gris);font-weight:600;margin:0 0 var(--esp-12)} /* p202 : capitales */
.v-rapide{display:flex;gap:8px;flex-wrap:wrap;margin:0}
.v-rapide button{min-height:var(--h-mini);padding:var(--esp-8) var(--esp-16);border-radius:999px;border:1px solid transparent;background:var(--pastille-vert);font:inherit;font-size:13px;line-height:1.3;cursor:pointer;color:var(--texte);display:inline-flex;align-items:center;font-weight:500;white-space:nowrap}
.v-rapide button:hover{border-color:var(--dore);background:var(--survol-vert)}
/* ⚠️ VERT PLEIN, PAS UN GRIS — 22/09, p76. C est exactement
   `.pagination .ici` : la page courante est en vert plein depuis toujours,
   et deux « choisi » de la meme interface ne se peignent pas autrement.
   Contraste blanc sur #002D2D : 15,6:1. */
.v-rapide button.on{background:var(--vert);color:var(--sur-accent);
  border-color:var(--vert);font-weight:600} /* p202 : graisse de toute selection */
.v-rapide button.on:hover{background:var(--vert-clair);border-color:var(--vert-clair)}
.v-plage{display:grid;grid-template-columns:1fr 1fr;gap:var(--esp-8);margin:0}
.v-plage label{display:flex;flex-direction:column;gap:var(--esp-4);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--gris);font-weight:600}
.v-plage input{border:1px solid var(--carte-bordure);border-radius:var(--r-carte);min-height:var(--h-controle);padding:0 var(--esp-12);font:inherit;font-size:14px; /* p202 : champ */
color:var(--texte);background:var(--carte);min-width:0}
.v-cmp{display:flex;align-items:center;justify-content:space-between;gap:var(--esp-8);margin-bottom:var(--esp-8)}
.v-cmp input{display:none}
.bascule{width:36px;height:20px;border-radius:999px;background:var(--gris-trait);position:relative;cursor:pointer;flex:none;transition:background .15s}
.bascule:after{content:"";position:absolute;top:2px;left:2px;width:16px;height:16px;border-radius:50%;background:var(--carte);transition:transform .15s}
.v-cmp input:checked + .bascule{background:var(--vert)}
.v-cmp input:checked + .bascule:after{transform:translateX(16px)}
.v-note{font-size:11px;color:var(--gris);margin:8px 0 0;line-height:1.45}
.v-appliquer{width:calc(100% - 32px);min-height:var(--h-controle);padding:0 var(--esp-20);border:0;border-radius:var(--r-carte);background:var(--vert);color:var(--sur-accent);font:inherit;font-size:15px;font-weight:600;letter-spacing:-.1px;cursor:pointer;display:block;margin:var(--esp-8) var(--esp-16) var(--esp-16)} /* p202 : bouton principal */
.v-appliquer:hover{background:var(--vert-clair)}
.bouton-cloche,.bouton-burger{border:0;background:none}
.bouton-cloche:hover,.bouton-burger:hover{background:none;border:0}
.cloche>input:checked~.bouton-cloche,.burger>input:checked~.bouton-burger{background:none;border:0}
/* Reprise de TabPeriodBar.tsx (Zite) : panneau 280px, filets, pastille VS. */
  /* Plus grand : sur un ecran de bureau, sept periodes, deux dates et une
   bascule tiennent a l aise. */
  .volet{width:380px;padding:0;border-radius:16px;box-shadow:var(--ombre-flottant)}
.v-bloc{padding:var(--esp-16)}
.filet{height:1px;background:var(--trait);margin:0 16px}
.v-cmp .v-titre{margin:0}
.bt-lib{max-width:150px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.vs{font-size:9px;font-weight:700;letter-spacing:.06em;padding:2px 6px;border-radius:999px;background:var(--pastille-vert-fort);color:var(--vert)}
.raf.tourne svg{animation:tourner .9s linear infinite}
/* En-tete : icones nues, comme Zite. */
  .bouton-cloche,.bouton-burger{border:0;background:none;width:34px;height:34px;border-radius:10px}
.accueil{margin:0 0 var(--esp-20)} /* p202 */
.accueil h1{font-size:var(--t-h1);font-weight:700;line-height:1.2;letter-spacing:-.3px;margin:0 0 var(--esp-2)}
.accueil .sous{margin:0;color:var(--gris);font-size:14px}
.pied{margin:var(--esp-32) 0 0;color:var(--gris);font-size:12px;line-height:1.5}
.carte .lib .nat{font-weight:400;color:var(--gris-doux);text-transform:none;letter-spacing:0}
/* Champ de recherche : une seule definition pour tout le portail. Elle ne
     vivait que dans le gabarit de la newsletter, donc /stock affichait un
     champ systeme minuscule au lieu de la meme barre. */
  .recherche{display:flex;align-items:center;gap:var(--esp-8);min-height:var(--h-controle);background:var(--carte);border:1px solid var(--trait);border-radius:999px;padding:0 var(--esp-12);color:var(--gris)} /* p202 : pilule de la barre de commandes */
.recherche:focus-within{border-color:var(--vert)}
.recherche svg{flex:none}
.recherche input{border:0;outline:0;background:none;padding:0;min-height:42px;font:inherit;font-size:14px;width:100%;min-width:0;color:var(--texte)}
.recherche input::-webkit-search-cancel-button{cursor:pointer}
/* DE L AIR ENTRE LA PREMIERE COMMANDE ET LA RECHERCHE. Elles etaient
   collees, et la page commencait par un bloc compact sans respiration. */
.pastilles+.ligne-recherche{margin-top:20px}
.ligne-recherche{display:flex;gap:var(--esp-8);margin-top:var(--esp-20);margin-bottom:var(--esp-20);align-items:stretch;flex-wrap:wrap} /* p202 */
.ligne-recherche .recherche{flex:1;min-width:220px}
/* Meme hauteur que la recherche : deux commandes cote a cote qui ne font pas
   la meme hauteur se lisent comme un defaut d alignement. Et une largeur
   minimale, pour que « Toutes les catégories » ne se ratatine pas a cote
   d un champ qui, lui, prend toute la place restante. */
.filtre{border:1px solid var(--trait);border-radius:999px;background:var(--carte);padding:0 var(--esp-16); /* p202 */
font:inherit;font-size:14px;color:var(--texte);min-height:44px;min-width:200px}
.filtre:hover{border-color:var(--dore)}
.tete{display:flex;justify-content:space-between;align-items:flex-start;gap:20px;flex-wrap:wrap}
.carte .ico.bleu{background:var(--ico-bleu-fond);color:var(--ico-bleu)}
.carte .ico.rouge{background:var(--danger-fond);color:var(--danger-texte)}
.carte .ico.vert{background:var(--ok-fond);color:var(--ok-texte)}
.carte .ico.violet{background:var(--ico-violet-fond);color:var(--ico-violet)}
.filtres{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-bottom:16px}
.date{display:flex;align-items:center;gap:7px;font-size:13px;color:var(--gris);background:var(--carte);border:1px solid var(--trait);border-radius:10px;padding:8px 12px}
.date input{border:0;outline:0;background:none;font:inherit;font-size:13px;color:var(--texte)}
.raz{border:1px solid var(--trait);background:var(--carte);border-radius:10px;padding:10px 15px;font:inherit;font-size:13px;cursor:pointer;color:var(--texte)}
.raz:hover{border-color:var(--dore)}
.compte{font-size:12px;color:var(--gris);margin-left:auto}
table.rangs{width:100%;border-collapse:collapse}
tr.camp[tabindex]{cursor:pointer}
tr.camp[tabindex]:hover{background:transparent}
.chev-col{width:34px;text-align:right;padding-right:0}
.chev{display:inline-flex;color:var(--gris-trait);transition:color .12s}
tr.camp[tabindex]:hover .chev{color:var(--gris-trait);transform:none}
tr.camp[tabindex]:focus-visible{outline:2px solid var(--vert);outline-offset:-2px}
.badge.nul{background:var(--neutre-fond);color:var(--gris-doux)}
.modale[hidden]{display:none}
.modale{position:fixed;inset:0;z-index:80;display:flex;align-items:center;justify-content:center;padding:var(--esp-24)}
/* ⚠️ LA RECETTE DE L APPLICATION : flou de 7 px ET voile de creme a 72 %.
   Le flou seul ne suffit pas — sur un fond clair il reste lisible, et le
   texte pose dessus se bat avec lui. Le voile etait vert sombre a 55 % et
   ne floutait rien. */
.voile{position:absolute;inset:0;background:var(--voile-creme);
backdrop-filter:blur(7px);-webkit-backdrop-filter:blur(7px)}
.fenetre{position:relative;background:var(--carte);border:1px solid var(--carte-bordure);border-radius:var(--r-fenetre);overflow:hidden; /* p202 */
width:min(860px,100%);height:min(88vh,900px);display:flex;flex-direction:column;box-shadow:var(--ombre-fenetre)}
.m-tete{display:flex;justify-content:space-between;align-items:center;gap:var(--esp-16);padding:var(--esp-12) var(--esp-16);background:var(--vert);color:var(--sur-accent)}
.m-t{font-size:15px;font-weight:600;line-height:1.3;letter-spacing:-.1px}
.m-s{font-size:12px;line-height:1.4;color:var(--dore-pale);margin-top:var(--esp-2)}
.m-x{background:var(--voile-clair);border:0;color:var(--sur-accent);width:var(--h-icone);height:var(--h-icone);border-radius:var(--r-vignette);cursor:pointer;font-size:14px;line-height:1;flex:none}
.m-x:hover{background:var(--survol-clair)}
.fenetre iframe{flex:1;width:100%;border:0;background:var(--carte)}

/* p152 — LA MODALE DES PUBLICATIONS. Elle reprend la fenetre des campagnes ;
   son corps n est pas un cadre etranger mais du contenu a nous, donc il
   defile lui-meme et respire. */
.m-corps{flex:1;overflow:auto;padding:var(--esp-16);display:flex;flex-direction:column;
  align-items:flex-start;gap:16px;background:var(--carte)}
/* La photo garde ses proportions et ne pousse jamais la fenetre : c est la
   HAUTEUR qu on plafonne, une publication verticale d Instagram remplirait
   sinon l ecran a elle seule. */
.mp-photo{max-width:100%;max-height:44vh;object-fit:contain;border-radius:var(--r-carte);
  background:var(--neutre-fond);align-self:center}
/* `pre-wrap` : les retours a la ligne de la publication sont DANS le texte,
   les ecraser changerait ce que l auteur a ecrit. */
.mp-texte{margin:0;font-size:15px;line-height:1.55;color:var(--texte);
  white-space:pre-wrap;overflow-wrap:anywhere}
.mp-chiffres{display:flex;flex-wrap:wrap;gap:var(--esp-12);width:100%}
.mp-chiffres > div{flex:1 1 90px;background:var(--creme);border-radius:var(--r-carte);
  padding:var(--esp-12);border:1px solid var(--trait)}
.mp-v{font-size:18px;font-weight:600;color:var(--texte);
  font-variant-numeric:tabular-nums}
.mp-l{font-size:11px;font-weight:600;line-height:1.2;letter-spacing:.08em;text-transform:uppercase;
  color:var(--gris);margin-top:var(--esp-4)}
/* ⚠️ LE PIED DE LA FENETRE — p161 puis p162. La commande de sortie ne suit
   pas le texte : elle est posee en bas a droite, hors du corps qui defile,
   sur un filet qui la separe du contenu. Sur une legende longue, un bouton
   place a la suite du texte se retrouvait hors de vue. */
.m-pied{display:flex;justify-content:flex-end;flex:none;
  padding:var(--esp-12) var(--esp-16);background:var(--carte);border-top:1px solid var(--trait)}
.m-pied[hidden]{display:none}

/* La zone cliquable d une ligne : le curseur doit le dire avant le clic. */
.ouvrir-pub{cursor:pointer;border-radius:10px}
.ouvrir-pub:focus-visible{outline:2px solid var(--vert);outline-offset:3px}
.grille{display:grid;grid-template-columns:repeat(auto-fill,minmax(215px,1fr));gap:15px}
.carte-objet{background:var(--carte);border:1px solid var(--carte-bordure);border-radius:14px;overflow:hidden;text-decoration:none;color:inherit;display:flex;flex-direction:column}
.carte-objet:hover{box-shadow:var(--ombre-repos)}
.carte-objet .vign{aspect-ratio:1;background:var(--creme) center/cover no-repeat;border-bottom:1px solid var(--trait)}
.carte-objet .bas{padding:11px 13px;flex:1;display:flex;flex-direction:column;gap:5px}
.carte-objet .t{font-size:13px;font-weight:600;line-height:1.35}
.carte-objet .m{font-size:11px;color:var(--gris)}
.carte-objet .p{font-size:13px;font-weight:700;margin-top:auto}
.etiq{display:inline-block;font-size:11px;letter-spacing:.2px;line-height:1.2;text-transform:uppercase;padding:3px 8px; /* p202 : .07em -> .2px */
border-radius:999px;font-weight:600;background:var(--creme);color:var(--gris)}
/* ⚠️ `--ok-texte` ET NON `--ok-vif` — 22/09, p68. Le vif donnait
   4,45:1 sur ce fond, sous le seuil de 4,5 pour du texte de 10 px.
   `--ok-texte` donne 5,41:1, et c est deja l encre de la meme
   etiquette dans l application. */
/* ⚠️ « EBAY SEUL » — p88. Le ton NEUTRE est voulu : une annonce sans fiche
   n est pas une anomalie. 1 802 des 1 954 annonces francaises sont dans ce
   cas, et ce sont des pieces que la boutique ne vend pas. Une couleur
   d alerte ferait crier l ecran 1 802 fois pour rien. */
.etiq.stock{background:var(--ok-fond);color:var(--ok-texte)}
/* Idem : 4,34:1 -> 6,29:1. */
.etiq.vendu{background:var(--danger-fond);color:var(--danger-texte)}
/* p59 — l etat de la fiche sur le site. `--alerte-*` et non `--danger-*` :
   un brouillon n est pas une panne, c est un travail en cours. Le rouge
   est deja pris par « vendu », et deux rouges cote a cote sur la meme
   vignette ne se distinguent plus. */
.etiq.fiche-draft,.etiq.fiche-pending{background:var(--alerte-fond);
color:var(--alerte-sombre)}
.etiq.fiche-private{background:var(--neutre-fond);color:var(--gris)}
.etiq.ref{background:var(--dore-pale);color:var(--alerte-sombre)}
.barre{display:flex;gap:9px;flex-wrap:wrap;margin-bottom:18px;align-items:center}
.barre input[type=search],.barre select{padding:9px 13px;border:1px solid var(--trait);border-radius:9px;font:inherit;font-size:14px;background:var(--carte)}
.barre input[type=search]{min-width:255px}
.pagination{display:flex;align-items:center;gap:var(--esp-8);justify-content:center;margin:var(--esp-20) 0 var(--esp-8);flex-wrap:wrap} /* p202 */
.numeros{display:flex;align-items:center;gap:var(--esp-8);flex-wrap:wrap}
.pagination a{display:grid;place-items:center;min-width:36px;height:36px;padding:0 var(--esp-12);
border:1px solid var(--trait);border-radius:10px;text-decoration:none;color:var(--texte);
font-size:13px;font-weight:600;background:var(--carte);font-variant-numeric:tabular-nums}
.pagination a:hover{border-color:var(--dore)}
.pagination .ici{background:var(--vert);color:var(--sur-accent);border-color:var(--vert)}
.pagination .ici:hover{border-color:var(--vert)}
.pagination .saut{display:grid;place-items:center;min-width:20px;height:36px;
color:var(--gris-doux);font-size:13px}
.pagination .page-chev{padding:0}
/* Eteint, pas retire. */
.pagination .inerte{opacity:.35;pointer-events:none}
.champ{margin-bottom:var(--esp-12)} /* p202 */
.champ label{display:block;font-size:13px;font-weight:600;line-height:1.3;letter-spacing:0;text-transform:none;color:var(--gris);margin-bottom:var(--esp-4)}
/* champs : la carte blanche de `ChampTexte` — fond #FFFFFF, rayon 14,
   bordure `carteBordure`, marges 14/12. Un champ de la couleur du fond
   ne se detache pas : il se devine a sa bordure. */
.champ input,.champ select,.champ textarea{width:100%;font:inherit;min-height:44px;padding:var(--esp-12) var(--esp-16);border:1px solid var(--carte-bordure);border-radius:14px;background:var(--carte);color:var(--texte)} /* p202 : 14 -> 16 */
.champ textarea{min-height:78px;resize:vertical}
.aide{font-size:12px;color:var(--gris);margin-top:4px}
/* ⚠️ LE MEME APPARIEMENT, LE MEME DEFAUT. Le bandeau de confirmation
   portait exactement les deux memes couleurs que l etiquette : 4,45:1.
   Trouve en corrigeant l etiquette, pas signale par personne. */
.ok{background:var(--ok-fond);color:var(--ok-texte);padding:var(--esp-12) var(--esp-16);border-radius:var(--r-carte);font-size:14px;margin-bottom:16px}
.past.ok{padding:3px 8px;border-radius:999px;font-size:11px;margin-bottom:0}
/* ⚠️ LA HAUTEUR EST DECLAREE, elle n est plus un effet du remplissage.
   `AppControles.controle` vaut 44 — le plancher tactile d Apple, tenu
   partout dans l application. `.bouton` tombait a ~34 px faute de
   hauteur : dix pixels sous le plancher, sur un portail qu on consulte
   aussi a l iPad. Le CTA principal, lui, vaut 56 (`AppControles.cta`). */
/* ===========================================================================
   LA SELECTION DE TEXTE — 21/09, signale par Jason le jour de la diffusion
   ---------------------------------------------------------------------------
   Aucune regle `::selection` n existait. Le navigateur imposait donc SA
   couleur, qui remplace celle du texte : sur le bouton rouge de publication,
   le libelle blanc disparaissait entierement.

   ⚠️ `color: inherit` — JAMAIS une couleur fixe. Forcer le blanc reglerait le
   bouton rouge et rendrait invisible chaque paragraphe sur fond clair. Herite,
   un texte blanc reste blanc, un texte sombre reste sombre.

   ⚠️ LE FOND EST TRANSLUCIDE, pour la meme raison : il fonce ce qu il couvre
   sans jamais decider de ce qui est dessus. Mesures sur les deux extremes du
   portail, au banc, apres la pose de la regle — blanc sur `--danger-vif` :
   5,41 -> 7,21 (le voile FONCE le rouge, donc le blanc gagne) ; texte sombre
   sur fond clair : 15,56 -> 10,05. Les deux tres au-dessus du seuil de 4,5.
   =========================================================================== */
::selection{background:var(--selection-fond);color:inherit}
::-moz-selection{background:var(--selection-fond);color:inherit}

.bouton{display:inline-flex;align-items:center;justify-content:center;min-height:var(--h-controle);background:var(--vert);color:var(--sur-accent);text-decoration:none;padding:0 var(--esp-20); /* p202 : 0 x 20 */
border:0;border-radius:14px;font-family:inherit;font-size:15px;font-weight:600;line-height:1.3;letter-spacing:-.1px;cursor:pointer;white-space:nowrap;-webkit-user-select:none;user-select:none}
.barre-actions .bouton{min-height:var(--h-cta)}
.bouton:hover{background:var(--vert-clair)}

/* LE BOUTON QUI SORT DU PORTAIL — 22/09, p62.
   La fleche AVANCE au survol, de trois pixels. C est le seul mouvement de la
   page, et il dit la meme chose que la fleche : on part ailleurs.
   ⚠️ `prefers-reduced-motion` l eteint. Un mouvement decoratif qu on ne peut
   pas arreter est un defaut d accessibilite, pas une finesse. */
.bouton-sortie .fleche{margin-left:var(--esp-8);font-size:16px;line-height:1;transition:transform .16s ease}
.bouton-sortie:hover .fleche{transform:translateX(3px)}
@media(prefers-reduced-motion:reduce){.bouton-sortie .fleche{transition:none}
  .bouton-sortie:hover .fleche{transform:none}}
.actions-fiche{margin:0 0 20px}

/* L EN-TETE DE FICHE : le titre, et la sortie a sa droite.
   `align-items:center` et non `baseline` : le titre fait une ou deux lignes
   selon l objet, une base commune ferait sauter le bouton d une fiche a
   l autre. `gap` de 18 px pour qu ils ne se touchent jamais. */
/* ⚠️ LES DEUX SORTIES RESTENT SOLIDAIRES — p89. Sans ce conteneur, le
   `justify-content:space-between` de l en-tete les eparpillerait : le titre a
   gauche, un bouton au milieu, l autre a droite. */
.sorties-fiche{display:flex;align-items:center;gap:var(--esp-8);flex-wrap:wrap} /* p202 */
.entete-fiche{display:flex;flex-wrap:wrap;align-items:center;
  justify-content:space-between;gap:var(--esp-8) var(--esp-16)}
.entete-fiche .titre-fiche{order:1;margin:0;flex:1 1 320px;min-width:0}
/* ⚠️ L ORDRE SE POSE SUR `.sorties-fiche`, PAS SUR LES BOUTONS — p101.
   Depuis p89 les boutons sont DANS cette enveloppe : `order` sur un
   petit-enfant du conteneur flex n a aucun effet, et l enveloppe sans ordre
   (0) passait avant le titre (1). Le bouton s est retrouve a gauche sans
   qu une regle ait ete touchee.
   `margin-left:auto` colle le groupe au bord droit quoi qu il arrive :
   `space-between` seul depend de ce que pesent les autres elements de la
   ligne, et le sous-titre pleine largeur fausse le calcul. */
.entete-fiche .sorties-fiche{order:2;margin-left:auto}
.entete-fiche .bouton-sortie{order:2}
.entete-fiche .sous{order:3;flex:1 0 100%;margin:0 0 var(--esp-20)}

/* ⚠️ SUR TELEPHONE, LE BOUTON PASSE SOUS LE SOUS-TITRE.
   Au-dela de 700 px les deux tiennent sur la ligne du titre, et le
   sous-titre s ecrit dessous. En dessous, tout s empile — et un bouton
   coince ENTRE le titre et sa propre legende coupe la phrase en deux.
   Mesure au banc, 430 px : le sous-titre fait deux lignes, le bouton les
   suit au lieu de les separer. */
@media(max-width:700px){
  /* Sous 700 px tout s empile : le groupe passe SOUS le sous-titre, et la
     marge automatique n a plus lieu d etre — elle pousserait le groupe au
     bord droit d une ligne qu il occupe seul. */
  .entete-fiche .sorties-fiche{order:4;margin-left:0}
  .entete-fiche .bouton-sortie{order:4}
  .entete-fiche .sous{order:3;margin:0 0 var(--esp-12)}
}

/* LE BOUTON FANTOME — 22/09, p63.
   Transparent, bordure sombre. Le bouton plein etait le seul aplat de
   couleur de la page pour un geste qui n est PAS le geste principal : on
   vient lire une fiche, pas quitter le portail.
   ⚠️ LE CONTRASTE NE BAISSE PAS. Le texte passe de blanc sur vert (#002D2D,
   15,6:1) a #12211F sur creme (#FAF7F2), soit 16,0:1 — mesure, pas suppose.
   La bordure a 1,5 px et non 1 : a 1 px sur un fond creme, elle disparaissait
   au rendu sur ecran non Retina. */
.bouton-fantome{background:transparent;color:var(--texte);
  border:1.5px solid var(--texte);padding:0 var(--esp-20)} /* p202 */
.bouton-fantome:hover{background:var(--survol-leger);border-color:var(--texte)}

/* LE MEME BOUTON, EN PLUS PETIT. Il vit DANS un bloc d information, pas sur
   la page : lui laisser les 44 px du bouton principal ferait deux gestes de
   meme poids pour deux importances differentes.
   ⚠️ 36 px ET NON 30. En dessous de 36 px une cible tactile devient
   difficile a viser, et cette page se consulte aussi sur iPad. */
.bouton-mini{min-height:var(--h-mini);padding:0 var(--esp-16);font-size:13px;letter-spacing:0;border-radius:var(--r-mini);margin-top:8px} /* p202 : rayon 11 -> 12 */
/* ⚠️ LA BORDURE MANGE DEUX PIXELS. Sans ce rattrapage, le petit bouton
   fantome est plus haut que le plein de 3 px, et deux boutons de la meme
   famille ne se posent plus sur la meme ligne de base. */
.bouton-mini.bouton-fantome{padding:0 var(--esp-16)}
/* LE BOUTON TEINTE — 22/09, p63. Il prend la couleur du cadre qui le porte
   plutot que le noir du bouton principal : dans un bloc deja colore, un
   bouton noir se lit comme une alerte.
   ⚠️ `--info-texte` N EST PAS CHOISI AU HASARD : c est deja la couleur du
   titre « Annonce eBay » juste au-dessus, dont le contraste sur `--info-fond`
   est valide depuis l audit du 16/09. On ne pose pas une teinte de plus. */
/* ⚠️ PAS LA TEINTE BLEUE DES ICONES — p119. `--info-texte` (#2C5A7A) est
   l encre d une pastille d information, elle ne figure pas dans la charte
   des commandes. La seule couleur d accent du portail est le dore. */
/* ⚠️ PLUS PERSONNE NE PORTE CETTE CLASSE — p173, arbitrage de Jason du
   23/09. Le bouton « Voir sur eBay » l a portee une demi-journee : le matin
   il etait bleu, on l a passe au dore (p119) parce que le bleu est l encre
   d une pastille d information ; le soir, a l usage, ce cadre dore attirait
   l oeil vers eBay alors que la fiche du site est la commande principale.
   Les deux sorties prennent donc le meme trait sombre.
   ON GARDE LA REGLE : elle est juste, documentee, et le jour ou une commande
   devra porter l accent dore, elle est ecrite. Une classe inutilisee ne coute
   rien ; une classe reinventee coute une divergence. */
.bouton-teinte{color:var(--or-contraste);border-color:var(--dore)}
.bouton-teinte:hover{background:var(--survol-dore);border-color:var(--dore)}
.bouton-mini .fleche{font-size:15px;margin-left:var(--esp-8)}
.commandes{display:flex;gap:var(--esp-8);align-items:center;flex-wrap:wrap}
.choix{position:relative}
.choix>input{display:none}
.choix>input:checked~.liste-choix{display:block}
.bouton-choix{display:flex;align-items:center;gap:8px;padding:8px 14px;border-radius:999px;border:1px solid var(--trait);background:var(--carte);font-size:13px;cursor:pointer;-webkit-user-select:none;user-select:none}
.bouton-choix:hover{border-color:var(--dore)}
.liste-choix{display:none;position:absolute;right:0;top:52px;min-width:210px;background:var(--carte);border:1px solid var(--trait);border-radius:var(--r-fenetre);overflow:hidden;z-index:40;box-shadow:var(--ombre-flottant)} /* p202 */
.liste-choix a{display:flex;justify-content:space-between;gap:var(--esp-8);padding:var(--esp-12) var(--esp-16);font-size:14px;text-decoration:none;color:var(--texte);border-bottom:1px solid var(--trait)}
.liste-choix a:last-child{border-bottom:0}
.liste-choix a:hover{background:var(--creme)}
.liste-choix a.coche{font-weight:600}
.liste-choix em{color:var(--gris);font-style:normal;font-size:12px}
.liste-choix .v{color:var(--dore)}
.panne{display:block;background:var(--danger-fond);border:1px solid var(--danger-trait);border-radius:var(--r-carte);padding:var(--esp-12) var(--esp-16);margin:0 0 20px;font-size:13px;line-height:1.55}
.panne b{display:block;color:var(--danger-texte);margin-bottom:var(--esp-4)}
.panne.douce{background:var(--alerte-fond);border-color:var(--dore)}
.panne.douce b{color:var(--alerte-texte)}
.carte .val.nm{font-size:15px;font-weight:600;color:var(--gris);letter-spacing:0;padding:8px 0}
.doc h2{font-size:var(--t-section);font-weight:600;line-height:1.25;letter-spacing:-.2px;margin:var(--esp-20) 0 var(--esp-12);color:var(--vert)} /* p202 : titre de section */
.doc h3{font-size:var(--t-carte);font-weight:600;line-height:1.3;letter-spacing:-.1px;margin:var(--esp-20) 0 var(--esp-8);color:var(--vert-clair)} /* p202 : titre de carte */
.doc p{margin:8px 0}
.doc table{margin:12px 0;font-size:13px}
.doc td,.doc th{padding:var(--esp-8) var(--esp-12);border-bottom:1px solid var(--trait);text-align:left}
.doc th{font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--gris)}
.doc code{background:var(--creme);padding:2px 5px;border-radius:4px;font-size:13px}
.doc pre{background:var(--vert);color:var(--ok-fond);padding:var(--esp-12) var(--esp-16);border-radius:var(--r-vignette);overflow-x:auto;font-size:13px;line-height:1.5}
.doc pre code{background:none;color:inherit;padding:0}
.doc ol,.doc ul{margin:8px 0;padding-left:var(--esp-20)}
.doc li{margin:4px 0}
.doc hr{border:0;border-top:1px solid var(--trait);margin:var(--esp-20) 0}
.fichier{display:flex;align-items:center;gap:var(--esp-12);padding:var(--esp-12) 0;border-bottom:1px solid var(--trait)}
.fichier:last-child{border-bottom:0}
.fichier .txt{flex:1;min-width:0}
.fichier .nom{font-weight:600;font-size:14px}
.fichier .quoi{color:var(--gris);font-size:13px;margin-top:2px}
/* p202 — DESACTIVE, TOUS LES BOUTONS : opacite .45, curseur ordinaire, aucun
   survol (charte § 3). Seul l irreversible garde son dessin lisible, plus bas. */
.bouton.off,.bouton:disabled{opacity:.45;cursor:default}
.bouton.off:hover,.bouton:disabled:hover{background:var(--vert)}
.bouton-fantome.off:hover,.bouton-fantome:disabled:hover{background:transparent}
.alerte{background:var(--alerte-fond);border:1px solid var(--dore);border-radius:var(--r-carte);padding:var(--esp-12) var(--esp-16);margin:var(--esp-20) 0;font-size:14px;line-height:1.55}
.alerte b{color:var(--alerte-texte)}
.doc details.pli{border-top:1px solid var(--trait);margin:0}
.doc details.pli:last-of-type{border-bottom:0}
.doc details.pli>summary{list-style:none;cursor:pointer;padding:var(--esp-16) var(--esp-32) var(--esp-16) 2px;position:relative;font-size:11px;line-height:1.2;letter-spacing:.08em; /* p202 : capitales 11/600 */
text-transform:uppercase;font-weight:600;color:var(--vert)}
.doc details.pli>summary::-webkit-details-marker{display:none}
.doc details.pli>summary:hover{color:var(--dore)}
.doc details.pli>summary:after{content:"";position:absolute;right:8px;top:50%;width:8px;height:8px;margin-top:-6px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg);transition:transform .15s}
.doc details.pli[open]>summary:after{transform:rotate(-135deg);margin-top:-2px}
.doc .pli-corps{padding:0 2px 20px}
.doc .pli-corps>:first-child{margin-top:0}
.pagination a[style*="hidden"]{pointer-events:none}

@font-face{font-family:'Poppins';font-style:normal;font-weight:400;font-display:swap;src:url('/statique/polices/poppins-400-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Poppins';font-style:normal;font-weight:400;font-display:swap;src:url('/statique/polices/poppins-400-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Poppins';font-style:normal;font-weight:500;font-display:swap;src:url('/statique/polices/poppins-500-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Poppins';font-style:normal;font-weight:500;font-display:swap;src:url('/statique/polices/poppins-500-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Poppins';font-style:normal;font-weight:600;font-display:swap;src:url('/statique/polices/poppins-600-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Poppins';font-style:normal;font-weight:600;font-display:swap;src:url('/statique/polices/poppins-600-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Poppins';font-style:normal;font-weight:700;font-display:swap;src:url('/statique/polices/poppins-700-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Poppins';font-style:normal;font-weight:700;font-display:swap;src:url('/statique/polices/poppins-700-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@media(max-width:860px){.duo{grid-template-columns:1fr}}
@media(max-width:760px){
    nav.principal{order:3;width:100%;padding-left:0;margin:8px 0 0;overflow-x:auto}
  }
@media(max-width:860px){.duo-sources{grid-template-columns:1fr}}
@keyframes tourner{to{transform:rotate(360deg)}}

/* ------------------------------------------------------------------ TELEPHONE
   Le portail n avait que trois points de rupture, tous sur des grilles. Rien
   ne traitait l en-tete, la barre de commandes, les tableaux larges ni la
   fenetre d apercu : sur un telephone la page debordait lateralement.
   L equipe est sur iPhone (decision du 04/09), c est la largeur qui compte. */
.bloc{overflow-x:auto}
table.large{min-width:520px}
table.rangs{min-width:560px}

@media (max-width:900px){
  main{padding:var(--esp-20)} /* p202 : tablette 20 */
  footer{padding:8px var(--esp-20) 32px}
  /* ⚠️ L EN-TETE SUIT `main` — p170. Entre 700 et 900 px, le contenu passe a
     16 px de marge et l en-tete restait a 28 : 12 px d ecart, mesures au
     banc. Les deux marges doivent changer ENSEMBLE, sinon l alignement se
     defait sur une seule plage de largeurs, celle qu on regarde le moins. */
  header{padding:20px var(--esp-20) 12px}
  .duo,.duo-sources{grid-template-columns:1fr}
  .grille{grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}
}

@media (max-width:700px){
  header{padding:var(--esp-12) var(--esp-16)} /* p202 : telephone 16 */
  main{padding:var(--esp-16)}
  footer{padding:8px var(--esp-16) 32px}
  .marque .nom{font-size:11px;letter-spacing:.1em}
  nav.principal{order:3;width:100%;padding-left:0;margin:var(--esp-8) 0 0;
    overflow-x:auto;-webkit-overflow-scrolling:touch}
  nav.principal a{padding:0 var(--esp-12)}
  .barre-cmd{align-items:stretch}
  .pastilles{width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}
  .pastilles a{white-space:nowrap}
  .cmd-droite{width:100%;justify-content:flex-end}
  .volet{width:min(300px,calc(100vw - 32px))}
  .panneau.alertes{min-width:0;width:min(360px,calc(100vw - 32px))}
  .v-rapide{grid-template-columns:1fr 1fr}
  .cartes{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--esp-12)} /* p202 */
  .carte{padding:var(--esp-12)}
  .carte .val{font-size:22px}
  .ligne-recherche{flex-direction:column}
  .filtre{max-width:none}
  .modale{padding:0}
  .fenetre{width:100%;height:100%;border-radius:0;border:0}
  .beignet{justify-content:center}
}

@media (max-width:420px){
  .cartes{grid-template-columns:1fr}
  .grille{grid-template-columns:repeat(2,minmax(0,1fr))}
}

/* Classes reprises des attributs style= qui trainaient dans les gabarits.
   Un style ecrit dans le gabarit echappe a la feuille : il ne se corrige pas
   en un endroit, et il ne suit aucun point de rupture. */
.courbe{width:100%;height:230px;display:block}
.courbe-basse{height:200px}
.titre-fiche{font-size:var(--t-section);font-weight:600;line-height:1.25;letter-spacing:-.2px} /* p202 : titre de section */
.aide.espace{margin-top:var(--esp-12)}
/* LA FICHE A DEUX COLONNES — 22/09, p62.
   380 px et non « la moitie » : une photo d objet n a pas besoin de plus pour
   se lire, et le reste de la largeur sert a ce qu on vient chercher. En
   dessous de 900 px les deux colonnes se remettent l une sous l autre —
   a cette largeur, deux colonnes de 300 px ne montrent bien ni l une ni
   l autre. */
.fiche-duo{display:grid;grid-template-columns:minmax(280px,380px) 1fr;gap:var(--esp-20);align-items:start} /* p202 */
.fiche-visuel{min-width:0}
.fiche-infos{min-width:0}
.fiche-infos > :first-child{margin-top:0}
/* ⚠️ DEUX CARTES DANS LA COLONNE DE DROITE — p83, jumeau d a54/a55.
   L espacement n est pas decoratif : Jason l a demande explicitement, « en
   preservant un espacement vide pour bien separer les deux entites ». Sans
   lui, deux blancs colles se lisent comme un seul bloc coupe en deux. */
.fiche-infos > .bloc + .bloc{margin-top:16px}
/* ⚠️ LE CADRE eBAY COMPTE COMME UN BLOC — p101. Il porte `ebay-bloc` et non
   `bloc` : la regle ci-dessus ne l a jamais vu, et il se collait a la carte
   « Description » alors que les deux cartes suivantes gardaient 16 px. La
   specificite (0,2,0) l emporte sur le `margin-top:14px` de `.ebay-bloc`.
   *Une regle qui nomme une classe ne protege que cette classe.* */
.fiche-infos > .ebay-bloc + .bloc,
.fiche-infos > .bloc + .ebay-bloc,
.fiche-infos > .ebay-bloc + .ebay-bloc{margin-top:16px}
/* Le tableau ouvre sa carte : sa marge haute de 14 px, prevue quand un titre
   le precedait, ferait un creux en tete de carte. */
.fiche-infos > .bloc > .faits{margin-top:0}
@media(max-width:900px){.fiche-duo{grid-template-columns:1fr;gap:16px}}

/* ⚠️ `max-height` ET `object-fit:contain`, PAS `cover`. Une plaque de verre
   en 13x18 et un objectif en hauteur n ont pas le meme format ; `cover`
   recadrerait, et sur une fiche d antiquaire le recadrage enleve justement
   ce qu on regarde. Le fond neutre remplit ce que `contain` laisse vide. */
.photo-fiche{width:100%;max-height:440px;object-fit:contain;background:var(--neutre-fond);border-radius:var(--r-carte);border:1px solid var(--carte-bordure);margin-bottom:var(--esp-12)} /* p202 */
.bloc.espace-haut{margin-top:var(--esp-20)}
.note-alerte{margin:var(--esp-8) 0 0;font-size:12px;color:var(--gris)}
@media (max-width:700px){.courbe{height:180px}.courbe-basse{height:160px}}
.etiq.ebay{background:var(--ico-bleu-fond);color:var(--ico-bleu)}
.etiq.boutique{background:var(--ico-bleu-fond);color:var(--ico-bleu)}
#rep-lignes .etiq.retiree{background:var(--dore-pale);color:var(--or-contraste)}

/* Fiche objet : galerie de toutes les photos, et non la seule principale. */
/* ⚠️ TROIS COLONNES FIXES — p84, jumeau d a55. `auto-fill` en donnait
   quatre dans une colonne de 380 px et trois dans une plus etroite : le
   nombre changeait avec la fenetre. L application en montre trois ; le
   portail aussi. */
.galerie{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:12px 0 0}
.galerie a{display:block;aspect-ratio:1;border-radius:var(--r-vignette);overflow:hidden;border:1px solid var(--carte-bordure)}
.galerie img{width:100%;height:100%;object-fit:cover;display:block}
.desc-site{font-size:14px;line-height:1.6;margin:var(--esp-12) 0 0}
.desc-site img{max-width:100%;height:auto;border-radius:var(--r-vignette)}
.faits{list-style:none;margin:var(--esp-12) 0 0;padding:0}
.faits li{display:flex;justify-content:space-between;gap:16px;padding:var(--esp-8) 0;
  border-bottom:1px solid var(--trait);font-size:14px}
.faits li:last-child{border-bottom:0}
.faits .v{font-weight:600;text-align:right;font-variant-numeric:tabular-nums}
.ebay-bloc{margin-top:var(--esp-16);padding:var(--esp-16);border-radius:var(--r-carte);background:var(--ico-bleu-fond)} /* p202 */
.ebay-bloc b{color:var(--ico-bleu)}
.ebay-bloc.absent{background:var(--neutre-fond)}
.ebay-bloc.absent b{color:var(--gris)}
.ebay-bloc.erreur{background:var(--danger-fond)}
.ebay-bloc.erreur b{color:var(--danger-texte)}
h2.espace-haut{margin-top:var(--esp-20)}

/* Sources validees — ouvrages numerises au scanner. */
/* Lien secondaire a cote d un bouton : ce n est pas un bouton desactive
   (.bouton.off, qui porte cursor:not-allowed), c est une sortie de secours. */
.lien-sec{display:inline-block;margin-left:var(--esp-12);font-size:13px;color:var(--gris);text-decoration:none;border-bottom:1px solid var(--gris-trait)}
.lien-sec:hover{color:var(--vert);border-bottom-color:var(--dore)}
/* Le geste destructeur reste replie. Deux gestes valent mieux qu une fenetre
   de confirmation qui se clique sans lire. */
.sup{margin-top:var(--esp-20);padding-top:16px;border-top:1px solid var(--trait)}
.sup>summary{font-size:13px;color:var(--gris);cursor:pointer;list-style:none;-webkit-user-select:none;user-select:none}
.sup>summary::-webkit-details-marker{display:none}
.sup>summary:before{content:"▸ ";color:var(--gris-doux)}
.sup[open]>summary:before{content:"▾ "}
.sup>summary:hover{color:var(--danger-texte)}
.sup form{margin-top:12px}
/* ⚠️ MESURE DU 18/09 : contraste 1,10 pour un seuil de 4,5. `.bouton.off`
   ne remplacait que la couleur du texte ; `.danger`, declaree apres, gardait
   son fond rouge vif. Gris #667371 sur rouge #B4472F : le libelle
   disparaissait. Un bouton desactive doit rester LISIBLE — c est justement au
   moment ou il ne repond pas qu on a besoin de lire ce qu il fait. */
.bouton.danger{background:var(--danger-vif)}
.bouton.danger.off{background:var(--danger-fond);color:var(--danger-texte);
border-color:var(--danger-trait);opacity:1} /* p202 : lisible, pas d opacite */
.bouton.danger:hover{background:var(--danger-texte)}
.bouton.danger.off:hover{background:var(--danger-fond)}

/* Le bouton rond de compte — meme gabarit que la cloche (34 px dans
   l application, 44 ici : c est le plancher tactile, et un portail se
   consulte aussi a l iPad). */
.bouton-compte{display:grid;place-items:center;width:34px;height:34px;
border-radius:50%;border:0;background:var(--vert);color:var(--sur-accent);
text-decoration:none;flex:0 0 auto}
.bouton-compte:hover{background:var(--vert-clair)}

/* ===========================================================================
   LE CENTRE DE NOTIFICATIONS — 17/09
   ---------------------------------------------------------------------------
   Copie de `lib/ecrans/notifications.dart`, mesure par mesure : le panneau
   descend depuis le haut SOUS l en-tete qui reste net, le voile floute a 7 px
   et voile de creme a 72 %, le cadre fait 640 px au plus et 72 % de la hauteur
   d ecran, en blanc, rayon 16, bordure `carteBordure`, SANS OMBRE.
=========================================================================== */

/* --- la pastille de compte -------------------------------------------------
   15 px de haut, ronde a un chiffre, elle s allonge a deux. Lisere de 1,5 px
   de la couleur du FOND qu elle surplombe — creme dans l en-tete, blanc dans
   le panneau. Elle deborde volontairement de la cloche. */
.pastille-compte{position:absolute;top:1px;right:0;min-width:15px;height:15px;
padding:0 3px;border-radius:999px;background:var(--vert);color:var(--sur-accent);
border:1.5px solid var(--creme);font-size:9px;font-weight:700;line-height:12px;
text-align:center;font-variant-numeric:tabular-nums}
.pastille-compte.sur-blanc{position:static;border-color:var(--carte)}

.bouton-cloche{position:relative;display:grid;place-items:center;width:34px;
height:34px;border-radius:10px;background:none;
border:0;color:var(--texte);cursor:pointer;flex:0 0 auto}
.bouton-cloche:hover{background:var(--survol-leger)}

/* --- le voile ---------------------------------------------------------------
   ⚠️ IL COMMENCE SOUS L EN-TETE. Couvrir l en-tete masquerait la cloche —
   celle par laquelle on vient d ouvrir, et par laquelle on referme. */
/* ⚠️ AU CENTRE DE L ECRAN — demande de Jason, 17/09. Le panneau
   descendait du haut, sous l en-tete. Il s ouvre desormais au milieu,
   des deux cotes : c est la que l oeil est quand on clique. */
.voile-notifs{position:fixed;inset:0;z-index:60;
padding:16px;display:grid;justify-items:center;align-items:center;
background:var(--voile-creme);backdrop-filter:blur(7px);
-webkit-backdrop-filter:blur(7px)}
.voile-notifs[hidden]{display:none}

.cadre-notifs{width:100%;max-width:640px;max-height:72vh;display:flex;
flex-direction:column;background:var(--carte);border:1px solid var(--carte-bordure);
border-radius:16px;overflow:hidden;
/* Elle DESCEND depuis le haut : 350 ms, easeOutCubic — comme la modale de
   l application. */
animation:descendre .35s cubic-bezier(.22,1,.36,1)}
@keyframes descendre{from{opacity:0;transform:translateY(-14px)}
to{opacity:1;transform:none}}

/* --- la barre de titre ------------------------------------------------------
   cloche 19 · 12 · filet vertical 1×22 · 12 · titre 18/600 · 10 · pastille
   du TOTAL · pousse · croix 19. Le meme filet que celui de l en-tete. */
.tete-notifs{display:flex;align-items:center;gap:0;padding:var(--esp-12) var(--esp-8) var(--esp-12) var(--esp-16);
color:var(--texte);flex:0 0 auto}
.tete-notifs .filet-v{width:1px;height:22px;background:var(--trait);
margin:0 12px;flex:0 0 auto}
.tete-notifs > svg{flex:0 0 auto}
.tete-notifs .titre{font-size:18px;font-weight:600;line-height:1.25;
letter-spacing:-.2px}
.tete-notifs .pastille-compte{margin-left:var(--esp-8)}
.tete-notifs .pousse{margin-left:auto}
.croix-notifs{display:grid;place-items:center;width:var(--h-icone);height:var(--h-icone);border:0;
background:none;color:var(--texte);cursor:pointer;border-radius:var(--r-vignette)} /* p202 : rond d en-tete */
.croix-notifs:hover{background:var(--survol-leger)}

.corps-notifs{flex:1;overflow-y:auto;padding:var(--esp-16) var(--esp-16) var(--esp-20);
border-top:1px solid var(--trait)}

/* --- les titres de section -------------------------------------------------
   `etiquette` : 11/600/+0.2, en `--gris`. ⚠️ Une section vide ne s affiche
   pas — ni son titre. C est le JavaScript qui s en charge. */
.titre-section-notifs{font-size:11px;font-weight:600;letter-spacing:.2px;
line-height:1.2;color:var(--gris);padding:0 0 var(--esp-8)}

/* --- une ligne ---------------------------------------------------------------
   ⚠️ LUE OU NON LUE : LE FOND ET L ENCRE, ET RIEN D AUTRE. Pas de point, pas
   de gras, pas de barre laterale — une carte creme sur fond blanc se distingue
   assez d une carte blanche. */
.ligne-notif{display:flex;align-items:flex-start;gap:12px;width:100%;
text-align:left;font:inherit;padding:var(--esp-12);margin:0 0 8px;border-radius:14px;
background:var(--carte);border:1px solid var(--carte-bordure);cursor:pointer}
.ligne-notif.lue{background:var(--creme);border-color:var(--trait)}
.ligne-notif .ico{flex:0 0 auto;margin-top:1px}
.ligne-notif .corps{flex:1;min-width:0;display:block}
.ligne-notif .haut{display:flex;align-items:flex-start;gap:8px}
.ligne-notif .titre{flex:1;min-width:0;font-size:15px;font-weight:600;
line-height:1.3;letter-spacing:-.1px;color:var(--texte)}
.ligne-notif.lue .titre{color:var(--gris)}
/* L horodatage est aligne EN HAUT, sur la ligne du titre — pas en bas de bloc. */
.ligne-notif .quand{flex:0 0 auto;font-size:12px;font-weight:500;
line-height:1.3;color:var(--gris-doux);font-variant-numeric:tabular-nums}
.ligne-notif .detail{display:block;margin:2px 0 0;font-size:12px;
line-height:1.4;color:var(--gris)}

/* --- l etat vide ------------------------------------------------------------ */
.vide-notifs{padding:54px 16px;text-align:center;color:var(--gris-doux)}
.vide-notifs b{display:block;margin:12px 0 0;font-size:14px;font-weight:400;
line-height:1.45;color:var(--gris)}
.vide-notifs span{display:block;margin:4px 0 0;font-size:12px;line-height:1.4;
color:var(--gris-doux)}

/* --- le pied ---------------------------------------------------------------
   Deux actions de 44 px, sans bordure, separees d un filet. « Marquer comme
   lu » ne parait que s il y a du non-lu. */
.pied-notifs{display:flex;flex:0 0 auto;border-top:1px solid var(--trait)}
.pied-notifs button{flex:1;height:44px;border:0;background:var(--carte);
font:inherit;font-size:12px;color:var(--gris);cursor:pointer;padding:0 8px;
white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pied-notifs button:hover{background:var(--creme)}
.pied-notifs .filet-v-pied{width:1px;height:44px;background:var(--trait);
flex:0 0 auto}
.pied-notifs [hidden]{display:none}

@media(max-width:700px){
  .voile-notifs{inset:0;padding:var(--esp-16)}
  .cadre-notifs{max-height:80vh}
}

/* ⚠️ `width:fit-content` — une barre d onglets seule sur sa ligne prenait
   toute la largeur, et son fond beige courait d un bord a l autre derriere
   trois onglets serres a gauche. Dans la barre de commandes d Audience, elle
   est bornee par ses voisins ; ici elle ne l est par personne. */
#onglets-origine{width:-moz-fit-content;width:fit-content}

.carte .val.chiffre-alerte{color:var(--alerte-texte)}
/* LA MINI-COURBE DE CARTE — 44 px, ecart de 12 au-dessus. La place est
   RESERVEE meme sans serie : sinon deux cartes voisines ne s alignent plus. */
.carte .mini{position:relative;height:44px;margin-top:12px}
.carte .mini svg{width:100%;height:44px;display:block}
.carte .nuance{font-size:12px;line-height:1.4;color:var(--gris-doux);margin-top:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* LE STOCK EN LISTE — `_LigneObjet` (stock.dart l. 499-578). */
/* DEUX COLONNES AU-DELA DE 1 000 px — N9, demande de Jason du 18/09 :
   « comme il y a un grand ecran, tu peux peut-etre m afficher les fiches
   sur deux colonnes ». En dessous, une fiche par ligne : a 500 px la
   vignette, l intitule et les pastilles ne tiennent plus cote a cote. */
.liste-objets{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--esp-8) var(--esp-12)} /* p202 */
/* ⚠️ `minmax(0,1fr)` ET NON `1fr` — p171, demande de Jason du 23/09. `1fr`
   vaut `minmax(AUTO,1fr)` : une colonne ne descend jamais sous la largeur
   minimale de son contenu. Une fiche au titre long — « Adams & Co. Stereo
   Reflex camera vendu par Sands, Hunter & Co » — elargissait donc SA colonne
   et ecrasait l autre : mesure du 23/09, 578 px a gauche contre 762 a droite
   sur le meme ecran. Avec un plancher a 0, les deux moities sont egales quoi
   que contienne la grille, et c est le texte qui se coupe. */
@media(min-width:1000px){.liste-objets{
  grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--esp-8) var(--esp-12)}}
.ligne-objet{display:flex;gap:12px;align-items:flex-start;background:var(--carte);
border:1px solid var(--carte-bordure);border-radius:14px;padding:var(--esp-12); /* p202 : carte dense */
text-decoration:none;color:inherit}
.ligne-objet .vign{width:52px;height:52px;border-radius:10px;flex:none;
background:var(--creme) center/cover no-repeat}
.ligne-objet .corps{min-width:0;flex:1}
/* COUPE A DEUX LIGNES. La grille egalise deja les fiches d une meme
   rangee ; c est d une rangee a l autre que la hauteur variait, au gre
   d un intitule long. Deux lignes, comme dans l application et comme
   dans le composeur du courriel. Le titre entier reste dans `title`. */
.ligne-objet .t{font-size:15px;font-weight:600;line-height:1.3;letter-spacing:-.1px;color:var(--texte);
display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.ligne-objet .m{font-size:12px;line-height:1.4;color:var(--gris);margin-top:var(--esp-2);
overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ligne-objet{align-items:center}
.ligne-objet>.chev{flex:none;display:flex;align-self:center;color:var(--gris-doux)}
.ligne-objet .etiqs{display:flex;flex-wrap:wrap;gap:var(--esp-8);margin-top:8px} /* p202 : 6 -> 8 */
/* La puce de 6 px de `PastilleStatut` : elle porte la couleur de l encre. */
.ligne-objet .etiq{display:inline-flex;align-items:center;gap:6px}
.ligne-objet .etiq:before{content:"";width:6px;height:6px;border-radius:50%;
background:currentColor;flex:none}
.etiq.prix{background:var(--creme);color:var(--texte)}
.pastilles.centrees{width:-moz-fit-content;width:fit-content;margin:0 auto var(--esp-20)}
.tete-liste{display:flex;align-items:center;gap:var(--esp-8);margin:0 0 12px}
.titre-liste{font-size:var(--t-section);font-weight:600;line-height:1.25;letter-spacing:-.2px; /* p202 : titre de section 18 */
color:var(--texte);margin:0}
.tete-liste .compteur{font-size:13px;font-weight:600;line-height:1.3;
color:var(--texte);background:var(--pastille-fond);border-radius:999px;padding:2px 8px;
font-variant-numeric:tabular-nums}
.compte-fiches{font-size:12px;line-height:1.4;color:var(--gris);margin:0 0 12px}

/* ⚠️ `.liste-camp`, `.ligne-camp` ET `.col-chev` ONT ETE RETIREES EN
   p134 — les campagnes sont un TABLEAU depuis p124, et ces trois-la
   portaient `display:flex` : sur un `<tr>` et sur un `<td>`, elles
   annulaient le modele de mise en page du tableau. Les en-tetes se
   rangeaient alors sur une largeur, les chiffres sur une autre.
   La colonne du chevron est desormais decrite par `.tableau-camp
   td.col-chev` seule, plus bas. */

.rep-carte{background:var(--carte);border:1px solid var(--carte-bordure);border-radius:14px;padding:12px}
.rep-carte + .rep-carte{margin-top:var(--esp-8)} /* p202 : ligne de liste */

.rep{list-style:none;margin:0;padding:0}
.rep li{display:flex;align-items:baseline;gap:8px;padding:0 0 4px}
.rep .l{flex:1;min-width:0;font-size:13px;line-height:1.3;color:var(--texte);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rep .n{font-size:12px;font-weight:500;line-height:1.3;color:var(--texte);font-variant-numeric:tabular-nums}
.rep .rien{font-size:12px;line-height:1.4;color:var(--gris-doux)}

.pages-liste{list-style:none;margin:0;padding:0}
.pages-liste li{display:flex;align-items:center;gap:12px;padding:8px 0}
.pages-liste .l{flex:1;min-width:0;font-size:14px;line-height:1.45;color:var(--texte);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pages-liste .n{font-size:12px;font-weight:500;color:var(--texte);font-variant-numeric:tabular-nums}

.sources-liste{list-style:none;margin:0;padding:0}
.sources-liste li{display:flex;align-items:center;gap:8px;padding:var(--esp-8) 0}
.sources-liste .ecart{flex:1}
.sources-liste .n{font-size:12px;font-weight:500;color:var(--texte);font-variant-numeric:tabular-nums}
.sources-liste .quand{font-size:12px;color:var(--gris-doux);font-variant-numeric:tabular-nums}

.titre-section{font-size:18px;font-weight:600;line-height:1.25;letter-spacing:-.2px;color:var(--texte);margin:0 0 12px}
.titre-section .sous{font-size:12px;font-weight:400;line-height:1.4;color:var(--gris);margin:2px 0 0;display:block}
.tete-bloc{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:0 0 12px}
.source-bloc{font-size:12px;line-height:1.4;color:var(--gris-doux);white-space:nowrap}

/* LE POINT DE FIN DE COURBE. L application marque le dernier releve d un
   disque de 9 px en creme surmonte d un disque de 6 px en accent
   (courbe.dart l. 108-113). Le SVG du portail etant etire
   (preserveAspectRatio="none"), un <circle> y deviendrait un ovale : le point
   est donc pose en CSS, en pourcentages, ce qui le garde rond a toute
   largeur. */
.courbe-cadre{position:relative}
/* L INFOBULLE DE COURBE. Elle flotte au-dessus du point survole, decalee de
   10 px pour ne pas le couvrir, et elle ne capte jamais le pointeur : sinon
   elle se placerait sous le curseur et provoquerait un mouseleave. */
/* LA PALETTE DES GRAPHIQUES — huit teintes, toutes tirees de la charte.
   Aucune couleur inventee : les quatre du 17/09 (#2F5B55, #4C7A72, #7AA09A,
   #B5CBC7) n existaient dans aucune variable et ont disparu. */
:root{
  /* ORDRE VOULU : les deux premieres teintes sont les plus eloignees l une
     de l autre, parce que ce sont elles qui portent les deux plus grosses
     parts. Vert tres sombre, puis dore. Les suivantes alternent froid/chaud
     pour la meme raison. */
  --g1:var(--vert);        /* #002D2D vert profond   */
  --g2:var(--dore);        /* #C9964A dore           */
  --g3:var(--ico-bleu);    /* bleu                   */
  --g4:var(--vert-clair);  /* #17423E vert clair     */
  --g5:var(--alerte-texte);/* ambre sombre           */
  --g6:var(--ok-texte);    /* vert de validation     */
  --g7:var(--gris-doux);   /* gris                   */
  --g8:var(--dore-pale);   /* #E2D5C2 dore pale      */
}

/* La pastille est posee sur le BODY et suit le curseur : dans un bloc a
   `overflow` elle serait rognee par le bord de la carte. */
.bulle-graphe{position:fixed;z-index:70;pointer-events:none;
transform:translate(-50%,-100%);
background:var(--carte);border:1px solid var(--carte-bordure);border-radius:10px;
padding:var(--esp-8) var(--esp-12);box-shadow:var(--ombre-choisie);white-space:nowrap;
font-size:12px;line-height:1.35;color:var(--texte);font-variant-numeric:tabular-nums;
opacity:0;transition:opacity var(--t-appui) var(--c-canonique)}
.bulle-graphe.on{opacity:1}

/* --- le camembert ---------------------------------------------------------
   Un ANNEAU, pas un disque : le trou central allege, et les parts minces
   restent lisibles sur le pourtour. */
/* La carte Appareils est etiree par sa voisine Pays, plus haute : sans
   cela le beignet reste colle en haut avec un grand vide en dessous. */
.bloc:has(> .camembert),.rep-carte:has(> .camembert),.carte:has(> .camembert){display:flex;flex-direction:column}
.bloc:has(> .camembert)>.camembert,.carte:has(> .camembert)>.camembert,
.rep-carte:has(> .camembert)>.camembert{flex:1}
.camembert{display:flex;align-items:center;gap:var(--esp-20);flex-wrap:wrap}
.camembert .roue{flex:none;transform:rotate(-90deg)}
.camembert .part{transition:opacity var(--t-appui) var(--c-canonique);cursor:default}
.camembert:hover .part{opacity:.45}
.camembert .part.vise{opacity:1}
.camembert .legende-liste{list-style:none;margin:0;padding:0;flex:1;min-width:190px}
.camembert .legende-liste li{display:flex;align-items:center;gap:var(--esp-8);padding:3px 0;
font-size:13px;line-height:1.3;color:var(--texte);cursor:default}
.camembert .legende-liste .pastille-c{width:9px;height:9px;border-radius:3px;flex:none}
.camembert .legende-liste .l{flex:1;min-width:0;overflow:hidden;
text-overflow:ellipsis;white-space:nowrap}
.camembert .legende-liste .n{font-size:12px;font-weight:500;color:var(--texte);
font-variant-numeric:tabular-nums}
.camembert .legende-liste li.vise{color:var(--vert);font-weight:600}

/* --- le diagramme en barres ----------------------------------------------- */
.barres{list-style:none;margin:0;padding:0}
.barres li{padding:var(--esp-4) 0;cursor:default}
.barres .t{display:flex;align-items:baseline;justify-content:space-between;gap:var(--esp-8);
font-size:13px;line-height:1.3;color:var(--texte);margin:0 0 4px}
.barres .t .n{font-size:12px;font-weight:500;font-variant-numeric:tabular-nums}
/* RAIL NEUTRE. En --trait (beige chaud), le fond se lisait comme une
   seconde barre et on croyait voir deux valeurs par ligne. */
.barres .rail{height:8px;border-radius:4px;background:var(--pastille-fond);overflow:hidden}
.barres .rail i{display:block;height:100%;border-radius:4px;background:var(--vert);
transition:background var(--t-appui) var(--c-canonique)}
.barres li.vise .rail i{background:var(--vert-clair)}
.barres .rail i.or{background:var(--dore)}

.bulle-courbe{position:absolute;z-index:6;pointer-events:none;
transform:translate(-50%,calc(-100% - 10px));
background:var(--carte);border:1px solid var(--carte-bordure);border-radius:10px;
padding:var(--esp-8) var(--esp-12);box-shadow:var(--ombre-choisie);white-space:nowrap;
opacity:0;transition:opacity var(--t-appui) var(--c-canonique)}
.bulle-courbe.on{opacity:1}
.bulle-courbe .q{display:block;font-size:11px;line-height:1.3;color:var(--gris-doux);
font-variant-numeric:tabular-nums}
.bulle-courbe .v{display:block;font-size:14px;font-weight:700;line-height:1.35;
color:var(--texte);font-variant-numeric:tabular-nums}
.repere-courbe{position:absolute;top:0;bottom:0;width:1px;background:var(--gris-trait);
pointer-events:none;opacity:0;transition:opacity var(--t-appui) var(--c-canonique);z-index:4}
.repere-courbe.on{opacity:1}
.point-survol{position:absolute;z-index:5;width:9px;height:9px;margin:-4.5px 0 0 -4.5px;
border-radius:50%;background:var(--creme);pointer-events:none;opacity:0;
transition:opacity var(--t-appui) var(--c-canonique)}
.point-survol:after{content:"";position:absolute;left:1.5px;top:1.5px;width:6px;height:6px;
border-radius:50%;background:var(--vert)}
.point-survol.on{opacity:1}

.pt-courbe{position:absolute;width:9px;height:9px;margin:-4.5px 0 0 -4.5px;border-radius:50%;background:var(--creme);display:block;pointer-events:none}
.pt-courbe:after{content:"";position:absolute;left:1.5px;top:1.5px;width:6px;height:6px;border-radius:50%;background:var(--vert)}

/* ===========================================================================
   LE MOUVEMENT — 17/09
   ---------------------------------------------------------------------------
   Toutes les durees et toutes les courbes viennent de l application, relevees
   dans `lib/theme/app_durations.dart` :

       appui    110 ms      canonique  easeOutCubic  cubic-bezier(.215,.61,.355,1)
       bascule  220 ms      sortante   easeInCubic   cubic-bezier(.55,.055,.675,.19)
       retour   280 ms      appui      easeOut       cubic-bezier(0,0,.58,1)
       aller    320 ms
       modale   350 ms

   ⚠️ CE QUI EST AJOUTE ICI N EXISTE PAS DANS L APPLICATION — pas encore. Le
   releve est formel : aucune animation d apparition, aucun compteur anime,
   aucun etat de survol (l application est tactile et n en a pas besoin). Ce
   sont des demandes de Jason du 17/09, pour les DEUX facades. On les pose ici
   d abord, dans la charte, et l application suivra.

   La regle qu il a donnee : « vraiment tout en sobriete ». Rien qui attire
   l oeil, rien qui retarde un geste.
=========================================================================== */

:root{
  /* LES OMBRES. Celle du repos est volontairement a la limite du visible :
     sur un fond creme, tout ce qui est plus marque devient une aureole grise.
     Celle du survol est le vrai geste, repris du focus de tvOS. */
  --ombre-repos:0 1px 2px rgba(18,33,31,.04), 0 10px 24px -18px rgba(18,33,31,.10);
  /* p202 : `--ombre-survol` retiree, remplacee par `--ombre-choisie` (charte § 4). */
  --t-appui:110ms; --t-bascule:220ms; --t-retour:280ms;
  --t-aller:320ms; --t-modale:350ms;
  --c-canonique:cubic-bezier(.215,.61,.355,1);
  --c-sortante:cubic-bezier(.55,.055,.675,.19);
  --c-appui:cubic-bezier(0,0,.58,1);
}

/* --- l arrivee de la page --------------------------------------------------
   `AppTransitions.montee` cote application : opacite LINEAIRE — c est ecrit
   ainsi, la courbe ne porte que le deplacement — et une montee de 6 % de la
   hauteur, en easeOutCubic, sur 320 ms.

   ⚠️ 6 % DE LA HAUTEUR D ECRAN SERAIT ENORME SUR UN MONITEUR. Sur un telephone
   cela fait une quarantaine de pixels ; sur un ecran de bureau, plus de
   cinquante, et la page semblerait sauter. On garde le geste, pas la
   proportion : 10 px. */
/* ⚠️ CE FONDU N ANIME PLUS AUCUNE TRANSFORMATION, ET CE N EST PAS UN DETAIL
   DE GOUT. Avec `fill-mode: both`, la transformation finale de `main` valait
   `matrix(1,0,0,1,0,0)` — l identite, mais pas `none`. Un ancetre transforme
   devient le bloc conteneur de ses descendants en `position: fixed` : la
   fenetre d apercu, la feuille de choix d image et la fenetre de confirmation
   s ancraient sur `main` au lieu de l ecran, et sortaient du champ des qu on
   avait defile. On ne voyait plus que le voile.
   Le glissement de 10 px vit maintenant dans `arrivee-bloc` seul, qui ne
   porte aucune couche flottante. */
@keyframes arrivee-page{
  from{opacity:0}
  to{opacity:1}
}
main{animation:arrivee-page var(--t-aller) var(--c-canonique) both}

/* --- l apparition des blocs ------------------------------------------------
   Un leger echelonnement : chaque bloc part 40 ms apres le precedent, et cela
   s arrete au sixieme. Au-dela, l attente cumulee se remarquerait — et ce qui
   se remarque n est plus sobre. */
@keyframes arrivee-bloc{
  from{opacity:0;transform:translateY(6px)}
  to{opacity:1;transform:none}
}
main .carte,main .bloc,main .carte-objet,main .rubrique,main .obj{
  animation:arrivee-bloc var(--t-retour) var(--c-canonique) both}
main .carte:nth-child(1),main .bloc:nth-child(1){animation-delay:0ms}
main .carte:nth-child(2),main .bloc:nth-child(2){animation-delay:40ms}
main .carte:nth-child(3),main .bloc:nth-child(3){animation-delay:80ms}
main .carte:nth-child(4),main .bloc:nth-child(4){animation-delay:120ms}
main .carte:nth-child(5),main .bloc:nth-child(5){animation-delay:160ms}
main .carte:nth-child(n+6),main .bloc:nth-child(n+6){animation-delay:200ms}

/* --- le survol -------------------------------------------------------------
   ⚠️ L APPLICATION N A AUCUN ETAT DE SURVOL : elle est tactile, elle ne connait
   que le repos et l appui. Ce qui suit est donc une ADDITION pour le portail,
   demandee par Jason — « un petit effet d ombre un peu comme l OS de
   l Apple TV, un cote flottant, aerien, minimaliste, tres sobre ».

   La retenue est dans les chiffres : 2 px de montee, une ombre a 10 % au lieu
   des 12 % de l unique ombre de l application, et RIEN sur une carte qui ne
   mene nulle part. Un relief sur un element inerte promet un geste qui
   n existe pas. */
/* AU REPOS — les surfaces qui portent du contenu. Les pilules, elles, n en
   prennent pas : seule celle qui est CHOISIE en porte une, sinon l ombre ne
   dirait plus laquelle est choisie. */
.carte,.bloc,.carte-objet,.ligne-objet,.rubrique,.panneau,.cadre-notifs,
.rep-carte,.ligne-notif{box-shadow:var(--ombre-repos)}
.pastilles a.on,.bascule-vue button[aria-selected="true"],
.segmente button[aria-selected="true"]{box-shadow:var(--ombre-choix)}
/* Le panneau et le centre de notifications gardent leur ombre propre : ils
   flottent au-dessus de la page, ce n est pas le meme relief. */
.panneau{box-shadow:var(--ombre-flottant)} /* p202 : flottant */
.cadre-notifs{box-shadow:var(--ombre-fenetre)} /* p202 : fenetre modale */

@media (hover:hover){
  main a.carte-objet,main a.rubrique,main button.rubrique,
  main .bouton,main .bouton-raf,main .ligne-notif{
    transition:transform var(--t-bascule) var(--c-canonique),
               box-shadow var(--t-bascule) var(--c-canonique)}
  main a.carte-objet:hover,main a.rubrique:hover,main button.rubrique:hover{
    transform:none;
    box-shadow:var(--ombre-repos)}
  main .bouton:hover{transform:translateY(-1px);
    box-shadow:var(--ombre-bouton-survol)}
  /* p202 : un bouton desactive ne bouge pas */
  main .bouton.off:hover,main .bouton:disabled:hover{transform:none;box-shadow:none}
}

/* --- l appui ---------------------------------------------------------------
   `PressableScale` a l identique : echelle 0,97, opacite 0,85, 110 ms,
   easeOut. C est le SEUL retour au toucher de l application, et il vaut ici
   aussi — sur un ecran tactile, le portail est touche comme elle. */
main a.carte-objet:active,main a.rubrique:active,main button.rubrique:active,
main .bouton:active,main .bouton-raf:active,main .pastilles a:active,
main .ligne-notif:active,.bouton-cloche:active,.bouton-compte:active{
  transform:scale(.97);opacity:.85;
  transition:transform var(--t-appui) var(--c-appui),
             opacity var(--t-appui) var(--c-appui)}

/* --- les bascules ---------------------------------------------------------- */
.pastilles a,.bascule-vue button,.segmente button,.pastille-res,
nav.principal a{
  transition:background-color var(--t-bascule) var(--c-canonique),
             color var(--t-bascule) var(--c-canonique),
             border-color var(--t-bascule) var(--c-canonique)}

/* --- les chiffres qui montent ----------------------------------------------
   Le compte lui-meme est fait en JavaScript ; ici on empeche seulement le
   saut de largeur pendant qu il defile. */
.carte .val{font-variant-numeric:tabular-nums}

/* --- ⚠️ QUI NE VEUT PAS DE MOUVEMENT N EN A PAS ----------------------------
   `prefers-reduced-motion` n est pas une option de confort : c est un reglage
   d accessibilite que posent les personnes sujettes au mal des transports ou
   aux troubles vestibulaires. Tout ce qui precede se tait. */
@media (prefers-reduced-motion:reduce){
  main,main .carte,main .bloc,main .carte-objet,main .rubrique,main .obj{
    animation:none !important}
  *,*:before,*:after{
    transition-duration:.01ms !important;animation-duration:.01ms !important;
    animation-iteration-count:1 !important;scroll-behavior:auto !important}
  main a.carte-objet:hover,main a.rubrique:hover,main .bouton:hover{
    transform:none;box-shadow:none}
}

/* Le badge « FONDATEUR » — le dore, qui ne sert nulle part ailleurs qu en
   liseré et en pastille. ⚠️ L ENCRE EST `--or-contraste` #231A08 ET NON LE
   DORE LUI-MEME : a 2,47:1 sur creme, le dore ne peut porter aucun texte. */
.past.dore{background:var(--dore-pale);color:var(--or-contraste)}

/* L attente de l apercu : le rouet de la maison, centre dans le cadre. */
.m-attente{position:absolute;inset:0;display:grid;place-items:center;
align-content:center;gap:var(--esp-12);background:var(--carte);z-index:2;
font-size:13px;color:var(--gris);text-align:center;padding:24px}
.m-attente[hidden]{display:none}
.m-attente .rouet{display:inline-block;width:26px;height:26px;border-radius:50%;
border:2.5px solid var(--trait);border-top-color:var(--vert);
animation:tourner .9s linear infinite}
.fenetre{position:relative}

/* ===========================================================================
   LA VISIONNEUSE — 22/09, p64
   ===========================================================================
   Reprise de la disposition que Jason a montree (vintage-cameras.fr), peinte
   avec les jetons du portail : le vert #002D2D a la place du brun, le creme
   #FAF7F2 a la place du blanc, le filet dore sous le titre.

   ⚠️ LE FOND EST CREME, PAS NOIR. Un voile noir est la convention des
   visionneuses de photographie d art ; ici on regarde des objets photographies
   SUR FOND BLANC pour la boutique. Sur un voile noir, le fond de la photo
   devient un rectangle blanc eclatant au milieu de l ecran — c est le fond
   qu on voit, plus l objet. */
.visionneuse{position:fixed;inset:0;z-index:120;display:flex;flex-direction:column;
  background:var(--creme);padding:var(--esp-16) var(--esp-16) var(--esp-20)}
.visionneuse[hidden]{display:none}
/* ⚠️ LE FOND EST OPAQUE, PAS A 98 %. Mesure au banc : a 1,5 % de
   transparence, le titre de la fiche et le tableau de chiffres restaient
   parfaitement lisibles DERRIERE la photo. On ne regarde plus l objet, on
   lit ce qu il y a dessous. */
/* ⚠️ LES DEUX ICONES DU BOUTON CENTRAL S AFFICHAIENT ENSEMBLE.
   L attribut `hidden` sur un `<svg>` ne suffit pas dans un parent en
   `display:flex` — vu au banc, une fleche de lecture ET une pause cote a
   cote. On le dit en CSS, explicitement. */
.vis-rond svg[hidden]{display:none}
body.visionneuse-ouverte{overflow:hidden}

.vis-entete{text-align:center;flex:0 0 auto}
.vis-titre{display:flex;align-items:center;justify-content:center;gap:var(--esp-8);
  margin:0;font-size:18px;font-weight:600;letter-spacing:-.2px;color:var(--vert)}
.vis-nom{max-width:min(720px,80vw);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* LE BOUTON DE FERMETURE — allege le 22/09 (p67).
   Transparent, bordure et croix sombres. Dans une fenetre dont tout l objet
   est de montrer une photo, un disque vert plein etait le seul aplat de
   couleur : l oeil allait a la commande avant d aller a l image. Meme
   arbitrage que « Voir sur le site » en p63.
   ⚠️ 1,5 px ET NON 1 : sur un fond creme, une bordure d un pixel disparait
   au rendu sur un ecran non Retina. */
.vis-fermer{position:absolute;top:16px;right:16px;width:48px;height:48px;
  border:1.5px solid var(--texte);border-radius:50%;background:transparent;
  color:var(--texte);display:flex;align-items:center;justify-content:center;
  cursor:pointer}
.vis-fermer:hover{background:var(--survol-leger)}
/* ⚠️ L ANNEAU BLEU N ETAIT PAS UNE COULEUR POSEE PAR NOUS : c est celui de
   Chrome. La visionneuse donne le clavier a ce bouton a l ouverture — sans
   quoi Echap et la tabulation partiraient de nulle part — et le navigateur
   dessine alors SON anneau de focus. On pose le notre, dore, comme partout
   ailleurs dans le portail.
   ⚠️ ON NE MET PAS `outline:none`. Un bouton qui ne montre plus ou est le
   clavier est inutilisable sans souris. On le REMPLACE, on ne l efface pas. */
.vis-fermer:focus-visible{outline:2px solid var(--dore);outline-offset:3px}

.vis-corps{flex:1 1 auto;display:flex;gap:16px;min-height:0;margin-top:var(--esp-12)}
/* ⚠️ TROIS VIGNETTES DE FRONT — p81, jumeau d a50. Une colonne d une seule
   vignette obligeait a defiler des la quatrieme photo, sur des fiches qui en
   portent quatorze. La colonne s adapte : 26 % de la largeur, bornee a
   [186, 300] px — fixee a 300 elle etoufferait la photo sur une fenetre
   etroite, fixee a 186 elle gacherait un grand ecran.
   ⚠️ `align-content:start` EST NECESSAIRE : sans lui, une grille qui ne
   remplit pas sa hauteur etire ses rangees et les vignettes deviennent des
   rectangles. */
.vis-vignettes{flex:0 0 clamp(186px,26vw,300px);display:grid;
  grid-template-columns:repeat(3,1fr);gap:var(--esp-8);align-content:start;
  overflow-y:auto;padding:var(--esp-24) 8px 8px}
.vis-vignette{width:auto;height:auto;aspect-ratio:1;padding:0;cursor:pointer;
  background:var(--carte);border:1px solid var(--trait);border-radius:10px;
  overflow:hidden}
.vis-vignette img{width:100%;height:100%;object-fit:cover;display:block}
/* ⚠️ LA SELECTION SE VOIT PAR UNE BORDURE DOREE DE 2 px, PAS PAR UNE OPACITE.
   Griser les autres rendait illisibles des vignettes deja petites. */
.vis-vignette.active{border:2px solid var(--dore)}
.vis-vignette:focus-visible{outline:2px solid var(--dore);outline-offset:2px}

.vis-scene{flex:1 1 auto;display:flex;align-items:center;justify-content:center;
  min-width:0;min-height:0}
.vis-image{max-width:100%;max-height:100%;object-fit:contain;border-radius:var(--r-vignette)}

.vis-legende{flex:0 0 auto;text-align:center;margin:12px 0 0;
  font-size:13px;color:var(--gris)}

.vis-commandes{flex:0 0 auto;display:flex;align-items:center;justify-content:center;
  gap:12px;margin-top:12px}
/* ⚠️ UN CERCLE, UNE BORDURE FINE, RIEN D AUTRE — 22/09, p77, demande de
   Jason. p76 leur avait donne la forme des paginations ; celle-ci la
   remplace.
   ⚠️ LES TROIS SONT IDENTIQUES, Y COMPRIS CELUI DU MILIEU. Il etait rempli
   de vert pour se distinguer ; « c est tout » dit le contraire, il ne
   ressort donc plus. UNE LIGNE A REMETTRE si l on change d avis : rendre a
   `.vis-rond.vis-plein` son fond `var(--vert)` et son encre `--sur-accent`.
   ⚠️ 1 px ET NON 1,5 : « fine » est le mot de la demande. Sur le fond creme
   et a 42 px de diametre, un pixel se voit — c est a 1 px sur un fond clair
   ET un petit element que la bordure disparaissait (voir p63). */
.vis-rond{width:42px;height:42px;border-radius:50%;cursor:pointer;
  display:grid;place-items:center;
  background:transparent;color:var(--texte);border:1px solid var(--texte)}
.vis-rond:hover{background:var(--survol-leger)}
.vis-rond.vis-plein{width:42px;height:42px;background:transparent;
  color:var(--texte);border-color:var(--texte)}
.vis-rond.vis-plein:hover{background:var(--survol-leger)}
.vis-rond:focus-visible{outline:2px solid var(--dore);outline-offset:2px}

.photo-fiche.cliquable{cursor:zoom-in}

/* ⚠️ SUR TELEPHONE, LES VIGNETTES PASSENT SOUS L IMAGE. Une colonne de 96 px
   a gauche d un ecran de 390 laisse 270 px a la photo — on ne voit plus
   l objet, on voit ses miniatures. */
@media(max-width:760px){
  .vis-corps{flex-direction:column;gap:12px}
  /* ⚠️ ON REMET `display:flex` EXPLICITEMENT — p81. Depuis que la colonne
     est une grille, `flex-direction:row` n a plus aucun effet ici : la regle
     serait restee dans la feuille sans rien faire, et le telephone aurait
     herite d une grille de trois vignettes sous la photo. */
  .vis-vignettes{flex:0 0 74px;display:flex;flex-direction:row;
    overflow-x:auto;overflow-y:hidden;order:2;padding:2px}
  .vis-vignette{width:70px;height:70px;aspect-ratio:auto}
  .vis-scene{order:1}
  .vis-fermer{width:42px;height:42px;top:12px;right:12px}
  .vis-nom{max-width:min(420px,60vw)}
}

/* LE LOGO DE LA VISIONNEUSE — 22/09, p65.
   ⚠️ IL EST POSE EN ABSOLU, PAS DANS LE FLUX. L en-tete est centre sur toute
   la largeur ; un logo place dedans deplacerait le titre vers la droite de sa
   propre largeur, et le titre ne serait plus au milieu de l ecran.
   34 px : la meme taille que dans l en-tete du portail, pour qu on le
   reconnaisse sans le regarder. */
.vis-logo{position:absolute;top:16px;left:16px;width:48px;height:48px;
  display:block}
@media(max-width:760px){.vis-logo{top:12px;left:12px;width:42px;height:42px}}

/* LE SOUS-FILTRE eBay — 22/09, p69.
   ⚠️ IL EST PLUS DISCRET QUE LA LIGNE DU DESSUS, ET C EST LE POINT. Deux
   rangees de pastilles de meme poids se liraient comme six filtres de meme
   rang ; il y en a trois, et trois sous-questions de l un d eux. */
/* ⚠️ `width:fit-content`, COMME `#onglets-origine` (l. 746). Sans lui, la
   pilule de fond s etire sur toute la largeur de la page : au banc, 1 122 px
   de fond beige pour trois onglets de 250. La regle existait deja pour la
   premiere rangee ; elle n avait pas ete reconduite. */
.pastilles-second{margin:8px 0 0;width:-moz-fit-content;width:fit-content}
.pastilles-second a{font-size:12px;padding:5px 12px}
.pastilles-second[hidden]{display:none}

/* ===========================================================================
   L ECHELLE — remise en ordre le 22/09 (p71)
   ===========================================================================
   NEUF VALEURS, les memes que `app_text_styles.dart` cote application :

       9 · 11 · 12 · 13 · 14 · 15 · 18 · 22 · 26

   ⚠️ AVANT CE JOUR IL Y EN AVAIT SEIZE, dont 13,5 et 12,5 — ecrites « a
   l oeil » le matin meme, en p63 et p69. Une echelle ne se perd jamais d un
   coup : toujours d un demi-point a la fois, et toujours pour une bonne
   raison locale.

   ⚠️ LA REGLE : on ne pose pas une taille, on en CHOISIT une. Si aucune ne
   convient, c est l echelle qu il faut discuter — des deux cotes a la fois.

   ⚠️ CE QUI N EST PAS DANS L ECHELLE : les glyphes. La fleche de
   `.bouton-sortie` fait 17 px pour s equilibrer avec un libelle de 15. Un
   picto n est pas un niveau de lecture.

   Les GRAISSES n ont pas derive : 400, 500, 600, 700 des deux cotes, et
   l application n embarque que ces quatre fichiers Poppins. */

/* LA LIGNE DES FILTRES DU STOCK — 22/09, p72.
   Le menu d origine et le sous-filtre eBay partagent une ligne : le second
   precise le premier, les mettre l un sous l autre les ferait lire comme
   deux questions de meme rang.
   ⚠️ `flex-wrap` : sur telephone, le sous-filtre passe a la ligne plutot que
   de comprimer le menu a trois lettres. */
/* ⚠️ `space-between` — 22/09, p74. Les trois onglets a gauche, le menu tout
   a droite, exactement comme la barre d Audience (`_commandes.html`) : les
   onglets de source a gauche, le selecteur de periode a droite. Une page du
   portail qui poserait sa commande ailleurs qu une autre est une divergence
   de plus a expliquer. */
/* ⚠️ LA MARGE EST SUR LE BLOC, PAS SUR UN VOISIN — 22/09, p76.
   La feuille portait `.pastilles + .ligne-recherche { margin-top: 20px }`.
   En p72, les pastilles sont entrees dans `.ligne-filtres` : elles n etaient
   plus VOISINES de la recherche, la regle est morte sans un mot, et les deux
   lignes se touchaient — ZERO pixel, mesure au banc.
   ⚠️ ET UN `.ligne-filtres + .ligne-recherche` N AURAIT PAS SUFFI : la
   phrase sur eBay (`.note-ebay`) est entre les deux, et un element `hidden`
   reste un voisin. Essaye, mesure a zero, corrige.
   LA LECON : une marge qui doit tenir appartient au bloc qui la porte, pas a
   la relation entre deux blocs. 22 px = la marge basse de `.ligne-recherche`,
   donc le meme blanc au-dessus et au-dessous du bloc de commandes. */
.ligne-filtres{display:flex;flex-wrap:wrap;align-items:center;
  justify-content:space-between;gap:var(--esp-8) var(--esp-12);margin-bottom:var(--esp-20)}
/* ⚠️ SUR TELEPHONE, LE MENU REPASSE A GAUCHE. `space-between` sur une ligne
   qui a deborde colle le second element au bord droit de l ecran, seul sur
   sa ligne — on le cherche. */
@media(max-width:560px){.ligne-filtres{justify-content:flex-start}}
.ligne-filtres .pastilles-second{margin:0}

/* ⚠️ LE VOLET S OUVRE A GAUCHE ICI. Celui d Audience porte `right:0` parce
   qu il vit dans le coin droit de la page ; celui-ci est a gauche, et cale a
   droite il sortirait de l ecran sur telephone. */
.volet.a-gauche{left:0;right:auto}

/* Le chevron du menu, comme sur un selecteur : il dit que ca s ouvre. */
.bt-chev{opacity:.55;flex:none}
.menu>input:checked~.bt .bt-chev{transform:rotate(180deg)}

/* ⚠️ `.menu` NE POSE PAS DE `display`, DONC `[hidden]` DEVRAIT SUFFIRE —
   mais on l ecrit, parce que la moindre regle future qui lui donnerait un
   `display` ferait reapparaitre un menu qu on croit cache. p73, 22/09. */
.menu[hidden]{display:none}

/* LES DEUX COMMANDES DE DROITE — 22/09, p75. La pilule et le bouton rond,
   exactement comme la barre d Audience. */
.commandes-droite{display:flex;align-items:center;gap:var(--esp-8)}
/* ⚠️ LE BOUTON ROND TOURNE PENDANT L ASPIRATION, et se grise. Une commande
   qui met 71 secondes sans rien montrer se reclique. */
#raf-stock.tourne svg{animation:tourner .9s linear infinite}
#raf-stock:disabled{opacity:.45;cursor:progress}

/* p92 — LE DETAIL D UNE NOTIFICATION RESPECTE SES SAUTS DE LIGNE.
   Il arrive par `innerHTML`, ou un `\n` ne produit rien : le texte
   « Par exemple : … » se collait a la phrase precedente, alors que
   l application l affiche en paragraphe separe. `pre-line` garde les sauts
   ET replie les espaces — ce qui evite d avoir a fabriquer du `<br>` apres
   echappement, donc d avoir a reinjecter du HTML dans du texte. */
.ligne-notif .detail { white-space: pre-line; }

/* p95 — LE NOMBRE D EXEMPLAIRES, A COTE DE LA PASTILLE DU COMPTEUR.
   Plus discret que la pastille : c est une precision, pas le chiffre
   principal. Le point qui les separe est pose en CSS pour qu il disparaisse
   avec la mention quand elle est cachee. */
.compteur-exemplaires {
  color: var(--gris);
  font-size: 13px;
  align-self: center;
}
.compteur-exemplaires::before { content: "·"; margin: 0 8px; }

/* p96 — LA VARIANTE AMPLE DE L INFOBULLE.
   ⚠️ `pre-line` GARDE LES SAUTS DE LIGNE du texte et replie les espaces : un
   `<br>` obligerait a fabriquer du HTML dans un attribut. La largeur est
   bornee pour que la pastille ne traverse pas l ecran. */
.bulle-graphe.ample{white-space:pre-line;max-width:min(380px,80vw);
  text-align:left;line-height:1.45}
/* Bascule sous le curseur quand le haut manque — voir `placer()`. */
.bulle-graphe.dessous{transform:translate(-50%,0)}

/* LE « i » — une pastille sobre, de la taille d un caractere. Elle ne doit
   pas concurrencer le compteur : c est une porte, pas une information. */
.info-exemplaires,.info-repere{display:inline-flex;align-items:center;justify-content:center;
  width:16px;height:16px;margin-left:8px;border-radius:50%;
  border:1px solid var(--carte-bordure);color:var(--gris);
  font-size:11px;font-weight:700;font-style:italic;line-height:1;
  cursor:help;align-self:center;user-select:none;
  transition:color var(--t-appui) var(--c-canonique),
             border-color var(--t-appui) var(--c-canonique)}
.info-exemplaires:hover,.info-exemplaires:focus-visible,
.info-repere:hover,.info-repere:focus-visible{
  color:var(--texte);border-color:var(--gris)}
.info-exemplaires[hidden]{display:none}
/* ⚠️ `.carte .nuance` COUPE CE QUI DEPASSE (ellipsis) : une pastille posee
   dedans se faisait rogner. La nuance qui porte un « i » devient une rangee,
   et c est le TEXTE qui se coupe, pas le repere. */
.carte .nuance.avec-i{display:flex;align-items:center;overflow:visible;
  white-space:normal}
.carte .nuance.avec-i > span{overflow:hidden;text-overflow:ellipsis;
  white-space:nowrap;min-width:0}
.info-repere{margin-left:6px;flex:none}

/* p142 — LE TABLEAU DES PUBLICATIONS. Il herite de `.tableau-camp` ; seules
   les differences sont ici. La vignette donne a reconnaitre la publication
   d un coup d oeil, ce qu un extrait de legende ne fait pas. */
.tableau-pub .vignette{width:44px;height:44px;border-radius:10px;
  object-fit:cover;flex:none;background:var(--neutre-fond)}
.tableau-pub .sujet{display:flex;gap:var(--esp-12);align-items:flex-start}
/* ⚠️ LA COLONNE EST PLAFONNEE, ET LE TEXTE SE COUPE N IMPORTE OU — p146,
   demande de Jason du 23/09. Une legende Instagram finit par vingt mots-diese
   colles : sans point de coupure, le navigateur donne a cette cellule sa
   largeur INTRINSEQUE — des milliers de pixels — et pousse les quatre
   colonnes de mesures hors du cadre. Il fallait alors defiler vers la droite
   pour lire les chiffres, c est-a-dire pour lire la seule chose qu on vient
   chercher. Un titre tronque coute moins cher qu un chiffre invisible.
   `.tableau-pub` n a que quatre colonnes de mesures la ou les campagnes en
   ont six : son plancher est plus bas que les 720 px herites. */
/* ⚠️ `table-layout:fixed`, ET C EST LA TOUTE LA CORRECTION — p147. En
   disposition AUTOMATIQUE (le defaut), `width` et `max-width` poses sur une
   cellule ne sont que des suggestions : le navigateur garde la main et donne
   a la colonne la largeur que reclame son contenu. Une legende de 300
   caracteres passait donc par-dessus les colonnes de chiffres malgre le
   plafond. En disposition FIXE, la premiere rangee decide, les largeurs sont
   respectees a la lettre, et le texte n a plus le choix : il se coupe. */
.tableau-pub{min-width:520px;table-layout:fixed}
/* 60 % ET NON 40 % — p151. Il ne reste que trois colonnes de chiffres cote
   Facebook (p150) : trois nombres a un ou deux chiffres n ont aucun besoin
   de la moitie de la largeur. Mesure au banc a 1280 px : 748 px pour le
   texte, 157 par colonne de chiffres, aucun debordement. */
.tableau-pub td.col-camp,.tableau-pub th.col-camp{width:60%}
.tableau-pub td.col-chev,.tableau-pub th.col-chev{width:28px}
/* ⚠️ LA VRAIE CAUSE ETAIT AILLEURS — p148, mesuree au banc (Chromium 141,
   largeurs 1280 / 834 / 390). Une regle GLOBALE de tout en haut de cette
   feuille, `td:first-child{white-space:nowrap}`, interdit le repli dans la
   premiere cellule de N IMPORTE QUEL tableau. Une legende de 278 caracteres
   restait donc sur une seule ligne de 1 916 px : elle sortait de sa cellule
   et passait PAR-DESSUS les colonnes de chiffres. Ni le plafond de largeur
   (p146) ni la disposition fixe (p147) ne pouvaient quoi que ce soit contre
   elle — une largeur de colonne ne coupe pas un texte a qui l on a interdit
   d aller a la ligne. On ne touche pas a la regle globale : on la neutralise
   sur cette colonne-la.
   ⚠️ ET LE REPLI NE SUFFIT PAS : dans un conteneur flex, un enfant refuse
   par defaut de descendre sous la largeur de son contenu (`min-width:auto`).
   Sans `min-width:0`, la colonne du texte poussait encore le tableau. */
.tableau-camp td.col-camp{white-space:normal}
.tableau-pub .sujet{min-width:0}
.tableau-pub .sujet > div{min-width:0;flex:1}
.tableau-pub .t{font-weight:500;line-height:1.35;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
  overflow:hidden;overflow-wrap:anywhere}
/* La date ne se coupe jamais en deux lignes : une ligne, point final. */
.tableau-pub .m{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* ⚠️ « NON MESURABLE » N EST PAS UN CHIFFRE : ni gras, ni tabulaire. Le
   lire comme une valeur serait le confondre avec un zero. */
.tableau-pub td.n .rien{font-weight:400;color:var(--gris-doux);font-size:12px}

/* p124 — LE TABLEAU DES CAMPAGNES.
   ⚠️ IL DEBORDE, ET C EST PREVU. Sept colonnes ne tiennent pas sur un
   telephone : le cadre defile SEUL, horizontalement, plutot que d ecraser les
   libelles en colonnes d un caractere. */
.cadre-tableau{overflow-x:auto;margin:0 -4px;padding:0 4px}
.tableau-camp{width:100%;border-collapse:collapse;font-size:14px;min-width:720px}
.tableau-camp th{font-size:11px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--gris);font-weight:600;text-align:right;vertical-align:bottom;
  padding:0 0 var(--esp-8) var(--esp-12);border-bottom:1px solid var(--trait);white-space:nowrap}
.tableau-camp th.col-camp{text-align:left;padding-left:0}
.tableau-camp td{padding:var(--esp-12) 0 var(--esp-12) var(--esp-12);border-bottom:1px solid var(--trait);
  vertical-align:top}
.tableau-camp tr:last-child td{border-bottom:0}
.tableau-camp td.col-camp{padding-left:0;width:40%;min-width:260px}
.tableau-camp td.n{text-align:right;font-variant-numeric:tabular-nums;
  font-weight:600;white-space:nowrap}
/* Le taux SOUS le nombre : deux mesures de la meme chose, pas deux colonnes. */
.tableau-camp td.n .tx{display:block;font-size:12px;font-weight:400;
  color:var(--gris-doux);margin-top:2px}
.tableau-camp .t{font-weight:600;line-height:1.35}
.tableau-camp .m{font-size:12px;color:var(--gris-doux);margin-top:var(--esp-2)}
.tableau-camp td.col-chev{width:28px;padding-left:8px;color:var(--gris-doux)}
.tableau-camp th.col-chev{padding-left:8px}
.tableau-camp tr.camp[role="button"]{cursor:pointer}
.tableau-camp tr.camp[role="button"]:hover{background:transparent}
.tableau-camp td.rien{color:var(--gris);text-align:center;padding:20px 0}
/* Les en-tetes portent un « i » : il ne doit pas se retrouver en capitales
   italiques minuscules au bout du libelle. */
.tableau-camp th .info-repere{text-transform:none;letter-spacing:0;
  vertical-align:middle}

/* ⚠️ LE MEME ECART QU ENTRE LES CARTES ET LE DIAGRAMME — p123, demande de
   Jason du 23/09. `.cartes` pose 22 px sous lui ; le bloc du diagramme n en
   posait aucun, et le champ de recherche venait se coller dessous. */

/* p98 — LE CADRE QUI REMPLACE L IMAGE ABSENTE.
   ⚠️ IL DIT POURQUOI. Un carre vide se lit comme une panne d affichage et on
   recharge la page ; une phrase se lit comme un etat connu et on passe a la
   suite. Meme encombrement qu une photo, pour que la colonne ne se decale pas
   d une fiche a l autre. */
.sans-image{display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:var(--esp-12);text-align:center;
  min-height:240px;padding:var(--esp-24) var(--esp-20);border-radius:14px;
  border:1px dashed var(--carte-bordure);background:var(--neutre-fond);
  color:var(--gris)}
.sans-image p{margin:0;font-size:13px;line-height:1.5;max-width:34ch}
.sans-image .menu-fin{font-size:12px;color:var(--gris-doux)}

/* ——— p174, 24/09 : LE BOUTON ET LE VOLET « Filtres » du Stock — parite a98 ——— */
.ligne-recherche .menu{display:flex}
.bt-filtres{min-height:44px;padding:0 16px;font-size:14px}
.bt-filtres.actif{background:var(--vert);border-color:var(--vert);color:var(--sur-accent)}
.volet-filtres{width:440px;padding:0;max-height:min(70vh,640px);overflow:auto;top:52px}
.vf-tete{display:flex;justify-content:space-between;align-items:center;padding:16px 16px 0;font-weight:600;font-size:var(--t-section);line-height:1.25;letter-spacing:-.2px} /* p202 : 16 -> 18 */
.vf-reinit{background:none;border:0;font:inherit;font-size:14px;color:var(--vert);cursor:pointer;text-decoration:none}
.vf-pied{position:sticky;bottom:0;background:var(--carte);padding:12px 16px 16px;border-top:1px solid var(--trait)}
.vf-pied .bouton{width:100%;justify-content:center;min-height:var(--h-cta)} /* p202 : CTA 56 */
.v-rapide a{display:inline-flex;align-items:center;min-height:var(--h-mini);padding:var(--esp-8) var(--esp-16);border-radius:999px;border:1px solid transparent;background:var(--pastille-vert);font-size:13px;line-height:1.3;color:var(--texte);text-decoration:none;font-weight:500;white-space:nowrap}
.v-rapide a:hover{border-color:var(--dore);background:var(--survol-vert)}
.v-rapide a.on{background:var(--vert);border-color:var(--vert);color:var(--sur-accent);font-weight:600}
.v-rapide a.on:hover{background:var(--vert-clair);border-color:var(--vert-clair)}
@media (max-width:700px){
  .ligne-recherche{flex-direction:row;flex-wrap:nowrap}
  .ligne-recherche .recherche{min-width:0}
  .volet-filtres{position:fixed;left:0;right:0;bottom:0;top:auto;width:auto;max-height:85vh;border-radius:20px 20px 0 0}
}
/* p175 : le bouton rond a la hauteur de la recherche et de Filtres (44 px) */
.ligne-recherche .bt.rond{width:44px;height:44px;flex:none;align-self:center}

/* ——— p177, 24/09 : interrupteur Stock | Republication et maquette — parite a96 ——— */
.bascule-stock{display:flex;gap:0;padding:3px;border:1px solid var(--carte-bordure);background:var(--carte);border-radius:999px;margin:0 0 14px}
.bascule-stock button{flex:1;border:0;background:none;border-radius:999px;padding:9px 0;font:inherit;font-size:14px;color:var(--gris);cursor:pointer}
.bascule-stock button.on{background:var(--vert);color:var(--sur-accent);font-weight:600}
.rep-etapes{display:flex;gap:6px;margin:6px 0 14px}
.rep-etapes button{padding:8px 16px;border-radius:999px;border:1px solid var(--carte-bordure);background:var(--carte);font:inherit;font-size:13px;color:var(--gris);cursor:pointer}
.rep-etapes button.on{background:var(--vert);border-color:var(--vert);color:var(--sur-accent)}
.rep-corps{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,3fr);gap:var(--esp-12);align-items:start}
.rep-barre{display:flex;justify-content:space-between;align-items:center;margin:0 0 var(--esp-12);gap:8px}
.rep-tout{display:flex;align-items:center;gap:8px;font-size:13px;cursor:pointer}
.rep-barre .bouton:disabled{opacity:.45;cursor:default}
.rep-ligne{display:flex;gap:10px;align-items:center;background:var(--carte);border:1px solid var(--carte-bordure);border-radius:14px;padding:8px;margin:0 0 8px;cursor:pointer}
.rep-ligne.on{border-color:var(--vert)}
.rep-ligne .vign,.rep-conf-ligne .vign{width:52px;height:52px;border-radius:10px;flex:none;background:var(--neutre-fond) center/cover no-repeat}
.rep-texte{min-width:0;flex:1}
.rep-texte .t{font-size:13px;font-weight:500;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.rep-texte .m{font-size:12px;color:var(--gris)}
.feu{font-size:12px;margin-top:3px}
.feu:before{content:"●";margin-right:var(--esp-4)}
.feu.ok{color:var(--ok-texte)} .feu.danger{color:var(--danger-texte)} .feu.info{color:var(--info-texte)}
.rep-apercu{background:var(--carte);border:1px solid var(--carte-bordure);border-radius:14px;padding:16px;position:sticky;top:90px}
.rep-image{width:100%;max-width:420px;aspect-ratio:1;margin:0 auto var(--esp-12);border-radius:10px;background:var(--neutre-fond) center/cover no-repeat}
.rep-apercu h3{font-size:var(--t-section);font-weight:600;line-height:1.25;letter-spacing:-.2px;margin:0 0 4px}
.rep-prix{margin:0 0 12px}
.rep-lien{display:block;background:none;border:0;padding:var(--esp-8) 0;font:inherit;color:var(--vert);text-decoration:none;cursor:pointer}
.rep-modale{position:fixed;inset:0;background:var(--voile-creme);backdrop-filter:blur(7px);-webkit-backdrop-filter:blur(7px); /* p202 : voile creme */
display:flex;align-items:center;justify-content:center;z-index:200;padding:16px}
.rep-modale[hidden]{display:none}
.rep-fenetre{background:var(--carte);border:1px solid var(--carte-bordure);border-radius:var(--r-fenetre);padding:var(--esp-24);box-shadow:var(--ombre-fenetre); /* p202 */
width:560px;max-width:100%;max-height:80vh;display:flex;flex-direction:column}
.rep-fenetre h3{margin:0 0 12px}
#rep-conf{overflow:auto;flex:1}
.rep-conf-ligne{display:flex;gap:12px;align-items:center;margin:0 0 8px}
.rep-ouvrir{color:var(--vert);text-decoration:none;font-size:18px;padding:var(--esp-8)}
.rep-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:var(--esp-20)}
.rep-annuler{background:none;border:0;font:inherit;color:var(--gris);cursor:pointer}
@media (max-width:900px){.rep-corps{grid-template-columns:1fr}.rep-apercu{position:static}}

/* p178 : la carte du Stock dans la Republication */
.rep-carte{cursor:pointer;margin:0 0 8px}
.rep-carte.choisie{border-color:var(--carte-bordure);box-shadow:var(--ombre-choisie)} /* p202 */
.rep-case{width:18px;height:18px;flex:none;accent-color:var(--vert);cursor:pointer}

/* p181 : la Republication prend la mise en page de la newsletter (publier.html) */
.rep-corps{grid-template-columns:minmax(0,1fr) 1px minmax(0,3fr);gap:0 20px}
.rep-filet{background:var(--trait);align-self:stretch;min-height:240px}
.rep-tete{display:flex;align-items:center;gap:var(--esp-8);margin:0 0 var(--esp-12);min-height:32px}
.rep-tete-centre{justify-content:center}
.rep-etiq{font-size:var(--t-section);font-weight:600;line-height:1.25;letter-spacing:-.2px;color:var(--texte)} /* p202 : 15 -> 18 */
.rep-compteur{font-variant-numeric:tabular-nums;font-size:13px;font-weight:600;color:var(--vert);background:var(--survol-vert);border-radius:999px;padding:2px 8px}
.rep-actions-bas{display:flex;justify-content:flex-end;margin-top:var(--esp-20)}
.rep-apercu{position:static}
@media (max-width:900px){.rep-corps{grid-template-columns:1fr}.rep-filet{display:none}}

/* p182, 24/09 : parite a104/a105.
   - « Publier » de la Republication : toute la largeur, comme celui de la newsletter.
   - La ligne de recherche centree entre l interrupteur et le compteur. */
.rep-actions-bas{justify-content:stretch}
.rep-actions-bas .bouton{width:100%;min-height:var(--h-cta)} /* p202 : CTA 56 */
.bascule-stock{margin-bottom:0}
/* p202 : `#vue-stock>.ligne-recherche{28px}` retire — la barre garde les 20 px de la charte. */
#vue-stock .tete-liste{margin-top:0}

/* p184 — LE COMMUTATEUR STOCK | REPUBLICATION PREND LE DESSIN DES ONGLETS
   D AUDIENCE (`.pastilles`) : gris, onglet blanc, cale a gauche. */
.bascule-stock{display:inline-flex;gap:4px;background:var(--neutre-fond);border:0;border-radius:999px;padding:4px;margin:0 0 var(--esp-20)}
.bascule-stock button{flex:none;height:var(--h-mini);padding:0 18px; /* p202 : segment 36 */
border-radius:999px;font-size:14px;color:var(--gris);white-space:nowrap}
.bascule-stock button:hover{color:var(--texte)}
.bascule-stock button.on{background:var(--carte);color:var(--texte);font-weight:600;box-shadow:var(--ombre-choix)}
.rep-droite .rep-tete{justify-content:flex-start}
.rep-carte .etiq{white-space:nowrap}
.etiq.archive{background:var(--neutre-fond);color:var(--gris)}
.rep-diffusion{margin:var(--esp-32) 0 0} /* p202 : rupture de poids */
.rep-diffusion[hidden]{display:none}
.rep-separateur{height:1px;background:var(--trait);margin:0 0 var(--esp-20)}
.rep-barre-actions{display:flex}
.rep-barre-actions .bouton{flex:1;min-height:var(--h-cta);justify-content:center}
.rep-fenetre .bouton.danger{background:var(--danger-vif);color:var(--sur-accent)}

/* p185 — MEME TYPO ET MEME RYTHME QU AUDIENCE partout (Jason, 24/09) :
   onglets sans interlettrage, titre « Aperçu » cale a gauche. */
.bascule-stock button,.bascule-vue button{letter-spacing:normal}
.vis-titre{justify-content:flex-start}

/* p186 — liste 1/3, apercu 2/3 (Jason, 24/09) : plus de place aux cartes. Parite a106. */
@media (min-width:901px){.rep-corps{grid-template-columns:minmax(0,1fr) 1px minmax(0,2fr)}}

/* p187 — barre Stock | Republication au gabarit d Audience, etape en menu a droite. */
.barre-stock .bascule-stock{margin:0}
.cmd-droite[hidden]{display:none}

/* p188 — « Modifier l annonce » a droite du titre de l apercu ; les deux
   en-tetes de colonne a la meme hauteur, pour que les cartes partent au meme niveau. */
.rep-droite .rep-tete{justify-content:space-between}
.rep-corps .rep-tete{min-height:48px}
.rep-modifier[hidden]{display:none}

/* p190 — LES CARTES DE LA REPUBLICATION SONT CELLES DU STOCK, au pixel : la
   classe  (celle d Audience) leur donnait une autre bordure. Meme
   ombre portee pour l apercu. */
.rep-objet{cursor:pointer;margin:0 0 8px;box-shadow:var(--ombre-repos)}
.rep-objet.choisie{border-color:var(--carte-bordure)} /* p202 : jamais de bordure verte */
.rep-objet .etiq{white-space:nowrap}
.rep-apercu,.rep-diffusion .carte{border:1px solid var(--carte-bordure);box-shadow:var(--ombre-repos)}

/* La sélection conserve la bordure normale et ne projette aucune ombre. */
.rep-objet.choisie{border-color:var(--carte-bordure);box-shadow:none}

/* p192 — commandes a droite du titre, sur telephone (voir _commandes.html). */
.titre-section.avec-cmd{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:var(--esp-12);align-items:center}
.titre-section.avec-cmd .sous{grid-column:1}
.titre-section.avec-cmd>.cmd-droite{grid-column:2;grid-row:1/span 2;width:auto;font-size:13px;font-weight:400;letter-spacing:0;line-height:normal}
.rep-tete>#rep-combo{margin-left:auto;width:auto}

/* p193 — intitules de colonnes de « Pages les plus vues », largeurs fixes pour l alignement. */
.pages-liste .n{min-width:64px;text-align:right}
.pages-liste li>.badge,.pages-liste .r{min-width:64px;text-align:center;box-sizing:border-box}
.pages-liste li.entete{padding:0 0 2px}
.pages-liste li.entete span{font-size:12px;font-weight:400;color:var(--gris)}

/* p195 — HARMONISATION (audit du 24/09). En fin de feuille : ces regles l emportent. */
/* 27 — les teintes translucides en variables. */
:root{--voile-sombre:rgba(18,33,31,.42);--survol-leger:rgba(18,33,31,.06);
--pastille-fond:rgba(18,33,31,.07);--ombre-choix:0 1px 3px rgba(0,45,45,.10);
--ombre-flottant:0 24px 60px rgba(0,45,45,.26);
/* p198 — les dernieres couleurs litterales, en variables (valeurs inchangees). */
--voile-creme:rgba(250,247,242,.72);
--creme-transparente:rgba(250,247,242,0);
--survol-discret:rgba(18,33,31,.05);
--voile-bouton-photo:rgba(18,33,31,.55);
--voile-etiquette-photo:rgba(18,33,31,.78);
--voile-clair:rgba(255,255,255,.14);
--survol-clair:rgba(255,255,255,.26);
--filet-clair:rgba(255,255,255,.28);
--separateur-clair:rgba(255,255,255,.30);
--pastille-vert:rgba(0,45,45,.06);
--survol-vert:rgba(0,45,45,.10);
--pastille-vert-fort:rgba(0,45,45,.18);
--selection-fond:rgba(0,45,45,.22);
--survol-dore:rgba(201,150,74,.12);
--voile-noir:rgba(0,0,0,.35);
--filet-danger:rgba(142,53,32,.30);
/* p202 : `--ombre-panneau` et `--ombre-volet` retirees -> `--ombre-flottant`. */
--ombre-fenetre:0 18px 50px -12px rgba(0,45,45,.18);
--ombre-bouton-survol:0 6px 18px -6px rgba(0,45,45,.28);
--ombre-choisie:0 2px 4px rgba(18,33,31,.06),0 12px 28px -12px rgba(18,33,31,.28)}
.bouton-fantome:hover{background:var(--survol-leger)}
.pastilles a.on,.bascule-stock button.on{box-shadow:var(--ombre-choix)}
/* 1 — sous-ligne auteur · annee des Sources, lisible. */
table.rangs .m{font-size:12px;color:var(--gris-doux);margin-top:3px}
/* 10 — le menu ☰ au dessin des volets. */
.panneau{border-radius:16px;box-shadow:var(--ombre-flottant)}
.panneau a,.panneau .bientot{padding:var(--esp-12) var(--esp-16);min-height:var(--h-controle)} /* p202 */
/* 12 — le cadre eBay de la fiche, au rayon des cartes. */
.ebay-bloc{border-radius:14px;padding:16px;border:1px solid var(--carte-bordure)}
/* 19 — titre de fiche (objet, annonce). */
.titre-fiche{font-size:18px;font-weight:600;letter-spacing:-.2px}
/* 20 — photos de fiche. */
.photo-fiche{border-radius:14px;border:1px solid var(--carte-bordure)}
.galerie a{border-radius:10px;border:1px solid var(--carte-bordure)}
/* 21 — libelles des champs (Sources). */
.champ label{font-size:13px;font-weight:600;letter-spacing:0;text-transform:none}
.champ input:focus,.champ select:focus,.champ textarea:focus{outline:none;border-color:var(--vert)}
/* 22 — intertitres de la procedure (Retouche). */
.doc h2,.doc h3{color:var(--texte);font-weight:600}
/* 23 — en-tete : survol du ☰ comme la cloche, titre en 600. */
.bouton-burger:hover{background:var(--survol-leger)}
.titre-entete{font-weight:600}
/* 25 — un seul compteur : celui du Stock. */
.rep-compteur{color:var(--texte);background:var(--pastille-fond);line-height:1.3}
/* 26 — la modale de Republication au dessin de celles de Publier. */
.rep-modale{background:var(--voile-creme)} /* p202 : voile creme flou, comme toutes les modales */
.rep-fenetre{background:var(--carte);border-radius:16px;padding:var(--esp-24)}
.rep-fenetre h3{font-size:18px;font-weight:600;line-height:1.25;letter-spacing:-.2px;color:var(--texte);margin:0 0 var(--esp-12)}
/* 29 — pastilles de la fiche objet, celles de la carte Stock. */
.entete-fiche .fiche-etiqs{order:3;flex:1 0 100%;display:flex;flex-wrap:wrap;gap:var(--esp-8);margin:var(--esp-12) 0 8px} /* p202 */
.fiche-id-groupe{display:inline-flex;align-items:center;gap:11px;white-space:nowrap}
.fiche-meta-sep{width:1px;height:17px;background:var(--trait);margin:0 3px}
.fiche-identifiant{align-self:center;color:var(--gris);font-size:13px;white-space:nowrap}
.fiche-etiqs .etiq{display:inline-flex;align-items:center;gap:6px}
.fiche-etiqs .etiq:before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor;flex:none}
/* 30 — etats vide et panne de la Republication. */
#rep-lignes .rien .bouton{margin-top:var(--esp-16)}
#rep-lignes .rien span{display:block}

/* p200 — pas de sous-titre de page sur telephone (Jason, 24/09) ; il reste sur tablette et ordinateur. Parite a122. */
@media (max-width:700px){.titre-section .sous{display:none}}

/* ===========================================================================
   p203, 24/09 — LE VOILE SOUS LES MENUS, LE TIROIR DU ☰ SUR TELEPHONE
   ---------------------------------------------------------------------------
   Demande de Jason : tout menu deroulant qui s ouvre floute l arriere-plan
   avec EXACTEMENT le voile du centre de notifications (`.voile-notifs` :
   `--voile-creme` + flou 7 px). Le menu reste net, au-dessus.
   Declenchement : CSS seul (`body:has(... >input:checked)`), l element
   `#voile-menus` est pose une fois dans `_entete.html`. Fermeture :
   `statique/menus.js` (clic sur le voile ou Echap = on decoche tout).
=========================================================================== */

/* ⚠️ `animation-fill-mode: backwards` ET NON `both`. Une animation qui reste
   « active » en fin de course (fill forwards) fait de `main` et de chaque
   `.bloc` un contexte d empilement : un volet qui y vit ne peut plus passer
   au-dessus d un voile pose a la racine (le menu « Mesure » d Audience est
   dans un `.bloc`). L etat final des deux animations vaut l etat naturel
   (opacite 1, aucune transformation) : rien ne change a l oeil. */
main{animation-fill-mode:backwards}
main .carte,main .bloc,main .carte-objet,main .rubrique,main .obj{animation-fill-mode:backwards}

.voile-menus{display:none;position:fixed;inset:0;z-index:55;cursor:pointer;
background:var(--voile-creme);backdrop-filter:blur(7px);
-webkit-backdrop-filter:blur(7px)}
body:has(.menu:not([hidden])>input:checked) .voile-menus,
body:has(.choix>input:checked) .voile-menus,
body:has(.burger>input:checked) .voile-menus{display:block}
/* Le menu ouvert passe au-dessus du voile (55) — sous les notifications (60). */
.menu:has(>input:checked),.choix:has(>input:checked){z-index:56}
/* Le ☰ vit dans l en-tete, qui est son propre contexte (z 30) : c est
   l en-tete entier qui passe au-dessus du voile, et reste net. */
header:has(.burger>input:checked){z-index:57}

/* --- le tiroir lateral du ☰, telephone seulement ------------------------- */
.voile-tiroir{display:none}
@media (max-width:700px){
  /* Pas de flou ici : un voile d OBSCURCISSEMENT, pose DANS l en-tete (sous
     le tiroir, au-dessus du reste de la barre). C est un `label` de la case :
     le toucher referme le tiroir sans script. */
  body:has(.burger>input:checked) .voile-menus{display:none}
  body:has(.burger>input:checked){overflow:hidden}
  .voile-tiroir{display:block;position:fixed;inset:0;z-index:49;cursor:pointer;
  background:var(--voile-sombre);opacity:0;visibility:hidden;
  transition:opacity var(--t-modale) var(--c-canonique),visibility 0s linear var(--t-modale)}
  .burger>input:checked~.voile-tiroir{opacity:1;visibility:visible;
  transition:opacity var(--t-modale) var(--c-canonique)}
  /* Il entre par la DROITE, pleine hauteur, 85 % de large (360 px au plus). */
  .burger>.panneau{display:block;position:fixed;top:0;right:0;bottom:0;left:auto;
  width:85%;max-width:360px;min-width:0;border:0;border-left:1px solid var(--trait);
  border-radius:0;overflow-y:auto;overscroll-behavior:contain;z-index:50;
  padding:0;
  transform:translateX(100%);visibility:hidden;
  transition:transform var(--t-modale) var(--c-canonique),visibility 0s linear var(--t-modale)}
  .burger>input:checked~.panneau{transform:none;visibility:visible;
  transition:transform var(--t-modale) var(--c-canonique)}
}
@media (max-width:700px) and (prefers-reduced-motion:reduce){
  .burger>.panneau,.burger>input:checked~.panneau,
  .voile-tiroir,.burger>input:checked~.voile-tiroir{transition:none}
}

/* p204 — un titre sur la meme ligne qu un bouton est centre verticalement sur lui (Jason, 24/09). Parite a127. */
.tete-bloc,.titre-section.avec-cmd,.entete-fiche,.tete-liste,.rep-tete,.tete-section{align-items:center}

/* ===========================================================================
   p205, 24/09 — LES TRANSITIONS D OUVERTURE ET DE FERMETURE
   ---------------------------------------------------------------------------
   Demande de Jason : l apparition brute (display none -> block, flou qui
   surgit) ressemblait a un bug. Tout ce qui s ouvre DESCEND un peu en
   apparaissant, et REMONTE en s effacant pour se fermer — comme le centre de
   notifications de l application (`lib/ecrans/notifications.dart`).
   Durees et courbes de `lib/theme/app_durations.dart` :
     · notifications : 350 ms `canonique` (easeOutCubic) a l ouverture,
       220 ms `sortante` (easeInCubic) a la fermeture — la route de l appli ;
     · menus deroulants : 220 ms (`bascule`) `canonique` a l ouverture,
       180 ms `sortante` a la fermeture (l appli n a pas de menu deroulant :
       un geste plus court que la modale, et une sortie plus vive encore) ;
     · tiroir du ☰ sur telephone : 350 / 220, comme une modale.
   ⚠️ PLUS DE `display:none`. Un element qui passe de `none` a `block` ne peut
   rien animer, et encore moins sa sortie. On joue sur visibility + opacity +
   transform + pointer-events ; `visibility` est RETARDEE de la duree de
   fermeture, pour que l element reste visible le temps de s effacer.
   Un element cache par `visibility` sort aussi de l ordre de tabulation :
   au clavier, rien ne change par rapport a `display:none`.
=========================================================================== */
:root{--t-menu-ouvre:var(--t-bascule);--t-menu-ferme:180ms;
--t-notif-ouvre:var(--t-modale);--t-notif-ferme:var(--t-bascule);
--t-reduit:100ms;--decal-menu:-8px;--decal-notif:-14px}

/* --- les volets (.menu) et les listes (.choix) --------------------------- */
.volet,.liste-choix{display:block;visibility:hidden;opacity:0;
transform:translateY(var(--decal-menu));pointer-events:none;
transition:opacity var(--t-menu-ferme) var(--c-sortante),
transform var(--t-menu-ferme) var(--c-sortante),
visibility 0s linear var(--t-menu-ferme)}
.menu>input:checked~.volet,.choix>input:checked~.liste-choix{
visibility:visible;opacity:1;transform:none;pointer-events:auto;
transition:opacity var(--t-menu-ouvre) var(--c-canonique),
transform var(--t-menu-ouvre) var(--c-canonique),visibility 0s}

/* --- le panneau du ☰ (et de l ancienne cloche), hors telephone ----------- */
@media not all and (max-width:700px){
  .burger>.panneau,.cloche>.panneau{display:block;visibility:hidden;opacity:0;
  transform:translateY(var(--decal-menu));pointer-events:none;
  transition:opacity var(--t-menu-ferme) var(--c-sortante),
  transform var(--t-menu-ferme) var(--c-sortante),
  visibility 0s linear var(--t-menu-ferme)}
  .burger>input:checked~.panneau,.cloche>input:checked~.panneau{
  visibility:visible;opacity:1;transform:none;pointer-events:auto;
  transition:opacity var(--t-menu-ouvre) var(--c-canonique),
  transform var(--t-menu-ouvre) var(--c-canonique),visibility 0s}
}

/* --- le menu reste NET pendant qu il se referme -------------------------
   ⚠️ Sans cela, le z-index de p203 (56, 57) tombe DES que la case se decoche :
   le volet s effacerait SOUS le voile, donc floute. On retient l ancienne
   valeur le temps de la fermeture (transition de 0 s, retardee). `z-index:0`
   plutot qu `auto` : seule une valeur entiere se transitionne. */
.menu,.choix{z-index:0;transition:z-index 0s linear var(--t-menu-ferme)}
.menu:has(>input:checked),.choix:has(>input:checked){transition:z-index 0s}
header{transition:z-index 0s linear var(--t-menu-ferme)}
header:has(.burger>input:checked){transition:z-index 0s}

/* --- le voile flou des menus : le flou monte avec l opacite -------------- */
.voile-menus{display:block;visibility:hidden;opacity:0;pointer-events:none;
backdrop-filter:blur(0);-webkit-backdrop-filter:blur(0);
transition:opacity var(--t-menu-ferme) var(--c-sortante),
backdrop-filter var(--t-menu-ferme) var(--c-sortante),
-webkit-backdrop-filter var(--t-menu-ferme) var(--c-sortante),
visibility 0s linear var(--t-menu-ferme)}
body:has(.menu:not([hidden])>input:checked) .voile-menus,
body:has(.choix>input:checked) .voile-menus,
body:has(.burger>input:checked) .voile-menus{visibility:visible;opacity:1;
pointer-events:auto;backdrop-filter:blur(7px);-webkit-backdrop-filter:blur(7px);
transition:opacity var(--t-menu-ouvre) var(--c-canonique),
backdrop-filter var(--t-menu-ouvre) var(--c-canonique),
-webkit-backdrop-filter var(--t-menu-ouvre) var(--c-canonique),visibility 0s}

/* --- le centre de notifications ------------------------------------------
   `statique/notifications.js` retire `hidden`, puis pose `.ouvert` a l image
   suivante ; a la fermeture il retire `.ouvert` et ne remet `hidden` qu une
   fois le fondu termine. Le cadre ne porte pas d opacite propre : il herite
   du fondu du voile, les deux restent synchrones. */
.voile-notifs{opacity:0;pointer-events:none;
backdrop-filter:blur(0);-webkit-backdrop-filter:blur(0);
transition:opacity var(--t-notif-ferme) var(--c-sortante),
backdrop-filter var(--t-notif-ferme) var(--c-sortante),
-webkit-backdrop-filter var(--t-notif-ferme) var(--c-sortante)}
.voile-notifs.ouvert{opacity:1;pointer-events:auto;
backdrop-filter:blur(7px);-webkit-backdrop-filter:blur(7px);
transition:opacity var(--t-notif-ouvre) var(--c-canonique),
backdrop-filter var(--t-notif-ouvre) var(--c-canonique),
-webkit-backdrop-filter var(--t-notif-ouvre) var(--c-canonique)}
.cadre-notifs{animation:none;transform:translateY(var(--decal-notif));
transition:transform var(--t-notif-ferme) var(--c-sortante)}
.voile-notifs.ouvert .cadre-notifs{transform:none;
transition:transform var(--t-notif-ouvre) var(--c-canonique)}

/* --- le tiroir du ☰ sur telephone : il GARDE son glissement lateral ------
   L ouverture (350 ms, canonique) est celle de p203 ; la fermeture devient
   celle d une modale de l application : 220 ms, sortante. */
@media (max-width:700px){
  .voile-tiroir{transition:opacity var(--t-notif-ferme) var(--c-sortante),
  visibility 0s linear var(--t-notif-ferme)}
  .burger>.panneau{transition:transform var(--t-notif-ferme) var(--c-sortante),
  visibility 0s linear var(--t-notif-ferme)}
}

/* --- ⚠️ MOINS DE MOUVEMENT : un fondu seul, 100 ms, sans deplacement ------
   La regle generale (plus haut) ramene toute transition a 0,01 ms : elle
   rendrait l apparition aussi brute qu avant. Ici on garde un fondu tres
   court, sans aucun glissement ni flou anime. `!important` est necessaire
   pour passer devant `*{transition-duration:.01ms !important}`. */
@media (prefers-reduced-motion:reduce){
  .volet,.liste-choix,.burger>.panneau,.cloche>.panneau,.voile-menus,.voile-tiroir{
  transition:opacity var(--t-reduit) linear,visibility 0s linear var(--t-reduit) !important}
  .menu>input:checked~.volet,.choix>input:checked~.liste-choix,
  .burger>input:checked~.panneau,.cloche>input:checked~.panneau,
  body:has(.menu:not([hidden])>input:checked) .voile-menus,
  body:has(.choix>input:checked) .voile-menus,
  body:has(.burger>input:checked) .voile-menus,
  .burger>input:checked~.voile-tiroir{
  transition:opacity var(--t-reduit) linear,visibility 0s !important}
  .voile-notifs,.voile-notifs.ouvert{transition:opacity var(--t-reduit) linear !important}
  .volet,.liste-choix,.burger>.panneau,.cloche>.panneau,.cadre-notifs{transform:none !important}
  .cadre-notifs{transition:none !important}
}
@media (max-width:700px) and (prefers-reduced-motion:reduce){
  /* Le tiroir ne glisse plus : il apparait en fondu, a sa place. */
  .burger>.panneau{opacity:0}
  .burger>input:checked~.panneau{opacity:1}
}

/* p206, 24/09 — sur telephone, le volet Filtres est une FEUILLE ancree en bas :
   elle MONTE depuis le bas a l ouverture et REDESCEND a la fermeture (Jason).
   Les durees et courbes des menus (p205) ne changent pas ; l etat ouvert
   (`transform:none`, plus specifique) reste celui de p205. Le reglage
   « moins de mouvement » la ramene deja a un fondu seul (`transform:none !important`). */
@media (max-width:700px){
  .volet-filtres{transform:translateY(100%)}
}

/* ===========================================================================
   p207, 24/09 — LES MODALES MONTENT DU BAS, SUR UN VOILE QUI SE FLOUTE
   ---------------------------------------------------------------------------
   Demande de Jason : TOUTES les modales (apercu d une publication sur
   Reseaux, apercu d une campagne sur Infolettre, confirmation de la
   Republication au Stock, feuille d image et fenetre de confirmation de
   Publier, visionneuse de la fiche objet) apparaissaient d un coup. Elles
   MONTENT maintenant depuis le bas en apparaissant et REDESCENDENT en
   s effacant, et le voile creme fond son flou de 0 a 7 px avec son opacite —
   exactement le voile des notifications (p205). Durees et courbes de p205 :
   350 ms `canonique` a l ouverture, 220 ms `sortante` a la fermeture.
   Trois classes communes, quel que soit le dessin de la modale :
     · `.modale-montante` — la racine plein ecran ; `.ouverte` = ouverte ;
     · `.voile-montant`  — le voile creme flou : la racine elle-meme (Stock,
       Publier, visionneuse) ou un enfant (`.voile` d Infolettre et Reseaux) ;
     · `.boite-montante` — ce qui monte (fenetre, boite, feuille).
   ⚠️ LE FONDU N EST JAMAIS SUR UN PARENT DU VOILE. Un ancetre a opacite < 1
   devient la « racine d arriere-plan » de `backdrop-filter` : le voile ne
   flouterait plus la page pendant le fondu, et le flou surgirait a la fin.
   Quand le voile est un enfant, la racine ne fait que `visibility`, et la
   fenetre (sa soeur) porte son propre fondu. Quand le voile EST la racine,
   la boite herite de son fondu, comme le cadre des notifications.
   `visibility` est RETARDEE de la duree de fermeture : la modale reste
   visible le temps de redescendre. Sequence de `hidden` : `modales.js`.
=========================================================================== */
:root{--t-modale-ouvre:var(--t-modale);--t-modale-ferme:var(--t-bascule);
--decal-modale:28px}

/* --- la racine ----------------------------------------------------------- */
.modale-montante{visibility:hidden;pointer-events:none;
transition:visibility 0s linear var(--t-modale-ferme)}
.modale-montante.ouverte{visibility:visible;pointer-events:auto;
transition:visibility 0s}

/* --- le voile : l opacite et le flou montent ensemble -------------------- */
.modale-montante .voile-montant{opacity:0;
backdrop-filter:blur(0);-webkit-backdrop-filter:blur(0);
transition:opacity var(--t-modale-ferme) var(--c-sortante),
backdrop-filter var(--t-modale-ferme) var(--c-sortante),
-webkit-backdrop-filter var(--t-modale-ferme) var(--c-sortante)}
.modale-montante.ouverte .voile-montant{opacity:1;
backdrop-filter:blur(7px);-webkit-backdrop-filter:blur(7px);
transition:opacity var(--t-modale-ouvre) var(--c-canonique),
backdrop-filter var(--t-modale-ouvre) var(--c-canonique),
-webkit-backdrop-filter var(--t-modale-ouvre) var(--c-canonique)}
/* Le voile qui EST la racine porte aussi le retard de `visibility`. */
.modale-montante.voile-montant{opacity:0;
backdrop-filter:blur(0);-webkit-backdrop-filter:blur(0);
transition:opacity var(--t-modale-ferme) var(--c-sortante),
backdrop-filter var(--t-modale-ferme) var(--c-sortante),
-webkit-backdrop-filter var(--t-modale-ferme) var(--c-sortante),
visibility 0s linear var(--t-modale-ferme)}
.modale-montante.voile-montant.ouverte{opacity:1;
backdrop-filter:blur(7px);-webkit-backdrop-filter:blur(7px);
transition:opacity var(--t-modale-ouvre) var(--c-canonique),
backdrop-filter var(--t-modale-ouvre) var(--c-canonique),
-webkit-backdrop-filter var(--t-modale-ouvre) var(--c-canonique),visibility 0s}

/* --- ce qui monte ---------------------------------------------------------- */
.modale-montante .boite-montante{transform:translateY(var(--decal-modale));
transition:transform var(--t-modale-ferme) var(--c-sortante)}
.modale-montante.ouverte .boite-montante{transform:none;
transition:transform var(--t-modale-ouvre) var(--c-canonique)}
/* Voile SOEUR (Infolettre, Reseaux) : la fenetre porte son propre fondu. */
.modale-montante .voile-montant~.boite-montante{opacity:0;
transition:transform var(--t-modale-ferme) var(--c-sortante),
opacity var(--t-modale-ferme) var(--c-sortante)}
.modale-montante.ouverte .voile-montant~.boite-montante{opacity:1;transform:none;
transition:transform var(--t-modale-ouvre) var(--c-canonique),
opacity var(--t-modale-ouvre) var(--c-canonique)}
/* La feuille d image de Publier est ancree en bas : elle monte de toute sa
   hauteur, comme la feuille Filtres du Stock (p206). */
.modale-montante.feuille{--decal-modale:100%}

/* --- ⚠️ MOINS DE MOUVEMENT : un fondu seul, 100 ms -------------------------
   Aucun glissement, aucun flou anime (le flou est pose d emblee, il apparait
   avec l opacite). `!important` pour passer devant la regle generale
   `*{transition-duration:.01ms !important}`. */
@media (prefers-reduced-motion:reduce){
  .modale-montante{transition:visibility 0s linear var(--t-reduit) !important}
  .modale-montante.ouverte{transition:visibility 0s !important}
  .modale-montante .voile-montant,.modale-montante.ouverte .voile-montant,
  .modale-montante.voile-montant,.modale-montante.voile-montant.ouverte{
  backdrop-filter:blur(7px) !important;-webkit-backdrop-filter:blur(7px) !important}
  .modale-montante .voile-montant,.modale-montante.ouverte .voile-montant{
  transition:opacity var(--t-reduit) linear !important}
  .modale-montante.voile-montant{
  transition:opacity var(--t-reduit) linear,visibility 0s linear var(--t-reduit) !important}
  .modale-montante.voile-montant.ouverte{
  transition:opacity var(--t-reduit) linear,visibility 0s !important}
  .modale-montante .boite-montante,.modale-montante.ouverte .boite-montante{
  transform:none !important;transition:none !important}
  .modale-montante .voile-montant~.boite-montante,
  .modale-montante.ouverte .voile-montant~.boite-montante{
  transition:opacity var(--t-reduit) linear !important}
}

/* ===========================================================================
   p208, 24/09 — MODE INTEGRE ; RETOUCHE ET SOURCES A LA CHARTE
   ---------------------------------------------------------------------------
   `body.integre` : page servie dans la vue web de l application (`?integre=1`,
   cookie `antiq_integre`). Ni en-tete, ni pied, ni fil d Ariane (gabarits) :
   la page commence a son titre de section, dans la marge de page de la charte
   (16 telephone / 20 tablette / 24 bureau — celle de `main`, inchangee).
=========================================================================== */
.integre main{padding-bottom:var(--esp-32)}
.integre .rep-apercu{top:var(--esp-16)}

/* Retouche — le h1 du document = titre de carte (15/600), sa ligne de version
   = sous-titre de bloc (12, gris). Plus de h1 de 22-28 px dans une carte. */
.bloc-procedure .doc>h1:first-child{font-size:var(--t-carte);font-weight:600;line-height:1.3;
letter-spacing:-.1px;color:var(--texte);margin:0 0 var(--esp-2)}
.bloc-procedure .doc>h1:first-child+p{font-size:var(--t-petit);line-height:1.4;color:var(--gris);margin:0 0 var(--esp-12)}
.bloc-procedure .doc>hr{display:none}
.doc h1{font-size:var(--t-carte);font-weight:600;line-height:1.3;letter-spacing:-.1px;color:var(--texte)}

/* Retouche — les intitules depliables : casse normale 15/600 couleur texte
   (plus de capitales 11 px espacees), filet --trait entre les lignes, cible
   de 44 px, chevron au trait de 2 px en --gris-doux : a droite ferme, vers le
   bas ouvert — le chevron des lignes qui menent ailleurs. Survol : le chevron
   passe a l or, jamais le texte (charte § 5 : l or ne porte pas de texte). */
.doc details.pli>summary{font-size:var(--t-carte);font-weight:600;line-height:1.3;letter-spacing:-.1px;
text-transform:none;color:var(--texte);min-height:var(--h-controle);display:flex;align-items:center;
padding:var(--esp-12) var(--esp-32) var(--esp-12) 0}
.doc details.pli>summary:hover{color:var(--texte)}
.doc details.pli>summary:after{right:var(--esp-4);width:7px;height:7px;margin-top:-4px;
border-color:var(--gris-doux);transform:rotate(-45deg)}
.doc details.pli>summary:hover:after{border-color:var(--dore)}
.doc details.pli[open]>summary:after{transform:rotate(45deg);margin-top:-6px}
.doc .pli-corps{padding:0 0 var(--esp-16)}
.doc h2{font-size:var(--t-carte);line-height:1.3;letter-spacing:-.1px;margin:var(--esp-16) 0 var(--esp-8)}
.doc h3{margin:var(--esp-16) 0 var(--esp-8)}

/* Sources — le repli « Supprimer cet ouvrage » : chevron au trait comme les
   depliables, plus de triangles typographiques. */
.sup>summary{display:flex;align-items:center;gap:var(--esp-8);min-height:var(--h-controle)}
.sup>summary:before{content:"";width:7px;height:7px;flex:none;border-right:2px solid var(--gris-doux);
border-bottom:2px solid var(--gris-doux);transform:rotate(-45deg);transition:transform .15s}
.sup[open]>summary:before{content:"";transform:rotate(45deg)}
.sup{padding-top:var(--esp-8)}

/* ===========================================================================
   p209, 24/09 — LE MENU ☰ EN ENCARTS (parite application et Mon compte)
   ---------------------------------------------------------------------------
   Plus de liste plate blanche a filets : fond de page creme, identite centree
   (lien vers /mon-compte), puis une carte blanche par entree — le dessin de
   `.rubrique` de mon_compte.html (bordure --carte-bordure, ombre repos,
   rayon 14, padding 16, pastille ronde vert pale, 15/600, chevron, 12 entre
   deux). Deroulant (> 700 px) ET tiroir (<= 700 px) : `.panneau.menu-encarts`
   (0,2,0) l emporte sur `.panneau a` et `.burger>.panneau`.
=========================================================================== */
.panneau.menu-encarts{background:var(--creme);padding:var(--esp-16)}
@media (min-width:701px){.panneau.menu-encarts{min-width:300px}}
.panneau.menu-encarts .porte-compte{background:none;border-bottom:0;justify-content:center;
padding:var(--esp-4) 0 var(--esp-16);margin:0}
.panneau.menu-encarts .porte-compte:hover{background:none}
.panneau.menu-encarts .porte-compte:hover .porte-nom{color:var(--vert)}
.panneau.menu-encarts .porte-compte .chev{display:none}
.panneau.menu-encarts a.entree,.panneau.menu-encarts .bientot{display:flex;align-items:center;
gap:var(--esp-12);background:var(--carte);border:1px solid var(--carte-bordure);border-radius:var(--r-carte);
padding:var(--esp-16);margin:0 0 var(--esp-12);min-height:0;box-shadow:var(--ombre-repos);
font-size:var(--t-carte);font-weight:600;line-height:1.3;letter-spacing:-.1px;color:var(--texte);text-decoration:none}
.panneau.menu-encarts .bientot{opacity:.45}
.panneau.menu-encarts>:last-child{margin-bottom:0}
.panneau.menu-encarts a.entree:hover{background:var(--carte);color:var(--texte);box-shadow:var(--ombre-choisie)}
.panneau.menu-encarts a.entree:hover .chev{color:var(--dore)}
.panneau.menu-encarts .ico-entree{flex:none;width:40px;height:40px;border-radius:50%;
background:var(--ok-fond);color:var(--ok-texte);display:grid;place-items:center}
.panneau.menu-encarts .lib-entree{flex:1;min-width:0}
.panneau.menu-encarts a.entree .chev{flex:none;display:flex;color:var(--gris-doux)}
@media (max-width:700px){.panneau.menu-encarts{padding:var(--esp-20) var(--esp-16)}}

/* ===========================================================================
   p210, 24/09 — L IDENTITE DU MENU ☰ EN CARTE (parite application a132)
   ---------------------------------------------------------------------------
   Demande de Jason : l en-tete du menu est ENCADRE comme les encarts
   Retouche/Sources (fond carte, 1 px --carte-bordure, rayon 14, ombre repos),
   avec le CHEVRON a droite, centre verticalement : on touche pour aller dans
   Mon compte. Rond, nom et pastille restent centres dans la place qui reste.
=========================================================================== */
.panneau.menu-encarts .porte-compte{display:flex;align-items:center;gap:var(--esp-12);
background:var(--carte);border:1px solid var(--carte-bordure);border-radius:var(--r-carte);
box-shadow:var(--ombre-repos);padding:var(--esp-16);margin:0 0 var(--esp-12);justify-content:flex-start}
.panneau.menu-encarts .porte-compte:hover{background:var(--carte);box-shadow:var(--ombre-choisie)}
.panneau.menu-encarts .porte-compte .chev{display:flex;flex:none;align-self:center;color:var(--gris-doux)}
.panneau.menu-encarts .porte-compte:hover .chev{color:var(--dore)}

/* p216 — L APERÇU COMPARE : actuelle | nouvelle, trois largeurs (Jason, 25/09).
   Parite a134. Le segmente reprend le dessin de `.vis-appareils` (newsletter). */
.rep-entete{display:flex;gap:12px;align-items:center;margin:0 0 var(--esp-16)}
.rep-entete .vign{width:52px;height:52px;border-radius:10px;flex:none;background:var(--neutre-fond) center/cover no-repeat}
.rep-entete .t{font-weight:600;line-height:1.25}
.rep-entete .m{font-size:13px;color:var(--gris)}
.rep-barre-apercu{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 var(--esp-16)}
.rep-appareils{display:inline-flex;gap:4px;background:var(--neutre-fond);border-radius:999px;padding:4px}
.rep-appareils button{border:0;background:transparent;font:inherit;font-size:14px;height:var(--h-mini);padding:0 18px;border-radius:999px;color:var(--gris);cursor:pointer;letter-spacing:normal}
.rep-appareils button:hover{color:var(--texte)}
.rep-appareils button[aria-selected="true"]{background:var(--carte);color:var(--texte);font-weight:600;box-shadow:var(--ombre-choix)}
.rep-comparer{display:grid;grid-template-columns:1fr 1fr;gap:var(--esp-16)}
.rep-colonne .rep-etiq{display:block;margin:0 0 8px}
.rep-scene{position:relative;overflow:hidden;background:#fff;border:1px solid var(--carte-bordure);border-radius:14px;height:62vh;min-height:420px}
.rep-scene iframe{position:absolute;top:0;left:0;border:0;display:block;transform-origin:0 0;background:#fff}
.rep-attente{position:absolute;inset:0;display:grid;place-items:center;padding:16px;text-align:center;font-size:13px;color:var(--gris-doux);background:var(--carte)}
.rep-cote{display:none}
@media (max-width:700px){
  .rep-comparer{grid-template-columns:1fr}
  .rep-cote{display:inline-flex}
  .rep-comparer[data-cote="ancienne"] .rep-colonne.nouvelle,
  .rep-comparer[data-cote="nouvelle"] .rep-colonne.ancienne{display:none}
}

/* p217 — LA BARRE DE L APERÇU, AU DESSIN DE `.vis-tete` (newsletter) : hors de
   la carte, calee a droite, onglets puis boutons ; 20 px avant la carte.
   Le titre « Aperçu de l annonce » reste seul sur sa ligne. Parite a135. */
.rep-commandes{display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-end;gap:var(--esp-8);margin:0 0 20px}
.rep-commandes .bouton-sortie{min-height:var(--h-controle)}
.rep-commandes[hidden]{display:none}

/* p218 — onglets sur la ligne du titre, a droite ; boutons en bas a droite de
   chaque annonce (Jason, 25/09). Parite a136. `.rep-commandes` (p217) n est
   plus cree. */
.rep-droite .rep-tete{display:flex;align-items:center;gap:var(--esp-8);flex-wrap:wrap}
.rep-onglets{margin-left:auto;display:flex;gap:var(--esp-8);flex-wrap:wrap;justify-content:flex-end}
.rep-onglets[hidden]{display:none}
.rep-pied{display:flex;justify-content:flex-end;margin-top:12px}
.rep-pied:empty{display:none}
.rep-pied .bouton-sortie{min-height:var(--h-controle)}
.rep-pied .bouton-sortie[hidden]{display:none}

/* p219 — pas de carte d apercu vide. */
.rep-apercu[hidden]{display:none}

/* p223 — « A republier » pendant les 24 h (Jason, 25/09) : pastille neutre,
   sablier a la place du chevron. Parite a141. */
.etiq.attente{background:var(--neutre-fond);color:var(--gris)}   /* p223c : creme invisible sur la carte blanche ; parite a141 (neutreFond) */
.ligne-objet>.chev.rep-sablier{color:var(--gris-doux)}
/* p223b — `.rep-barre{display:flex}` l emportait sur [hidden] : « Tout
   selectionner » restait visible sur « Retirees ce matin ». */
.rep-barre[hidden],#rep-actions-bas[hidden]{display:none}
/* p225 — titre de colonne et bouton sur une ligne, bouton a droite (Jason, 25/09). */
.rep-col-tete{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:0 0 8px;min-height:var(--h-controle)}
.rep-col-tete .rep-etiq{margin:0}
.rep-col-tete .bouton-sortie{min-height:var(--h-controle);flex:none}
.rep-col-tete .bouton-sortie[hidden]{display:none}
/* p227 — « Modifier » grise tant que le mode edition n existe pas, et son « i ». */
.rep-modifier-bloc{display:inline-flex;align-items:center;gap:8px}
.rep-modifier-bloc[hidden]{display:none}
.rep-modifier-bloc .info-repere{margin-left:0}
.bouton.inactif{opacity:.45;cursor:not-allowed}
.bouton.inactif:hover{background:transparent}
/* p229 — le rouet du bouton pendant la publication. */
.rouet-mini{display:inline-block;width:14px;height:14px;margin-right:8px;vertical-align:-2px;border-radius:50%;border:2px solid currentColor;border-top-color:transparent;animation:tourner .9s linear infinite}

/* Atelier photo — coquille du 06/10/2026, partagée avec la vue intégrée iOS.
   Segments, champs et cadres reprennent les dimensions de Newsletter. */
.retouche-onglets{display:inline-flex;gap:4px;background:var(--neutre-fond);border-radius:999px;padding:4px;margin:0 0 20px;max-width:100%}
.retouche-onglets a{display:flex;align-items:center;justify-content:center;height:var(--h-mini);padding:0 18px;border-radius:999px;font-size:14px;font-weight:400;color:var(--gris);text-decoration:none;white-space:nowrap}
.retouche-onglets a.actif{background:var(--carte);color:var(--texte);font-weight:600;box-shadow:var(--ombre-choix)}
.retouche-onglets a:focus-visible,.atelier button:focus-visible{outline:2px solid var(--vert);outline-offset:3px}
.atelier-note{font-size:12px;line-height:1.4;color:var(--gris);margin:0 0 20px}
.atelier-grille{display:grid;grid-template-columns:300px minmax(0,1fr);gap:32px;align-items:start}
.atelier-commandes,.atelier-apercu{min-width:0}
.atelier .atelier-titre{font-size:var(--t-section);font-weight:600;line-height:1.3;letter-spacing:-.2px;margin:0 0 20px;color:var(--texte)}
.atelier-formulaire{background:var(--carte);border:1px solid var(--carte-bordure);border-radius:14px;padding:16px;box-shadow:var(--ombre-repos)}
.atelier-depot{text-align:center;padding:0 0 20px}
.atelier-depot .bouton{width:100%}
.atelier-depot p{font-size:12px;color:var(--gris);margin:8px 0}
.atelier-petit{font-size:12px;line-height:1.4;color:var(--gris);margin:8px 0 12px}
.atelier-groupe{border:0;border-top:1px solid var(--trait);padding:16px 0 0;margin:0 0 20px;min-width:0}
.atelier-groupe legend{font-size:15px;font-weight:600;color:var(--texte);padding:0 8px 0 0}
.atelier-curseur{display:flex;flex-wrap:wrap;justify-content:space-between;gap:4px;font-size:13px;font-weight:600;color:var(--gris);margin:0 0 8px}
.atelier-curseur input{width:100%;min-height:24px;accent-color:var(--vert);margin:0}
.atelier-curseur output{font-weight:400;font-variant-numeric:tabular-nums}
.atelier-champ{display:flex;flex-direction:column;gap:4px;margin:0 0 12px}
.atelier-champ label{font-size:13px;font-weight:600;line-height:1.3;color:var(--gris)}
.atelier-champ input,.atelier-champ select{width:100%;min-width:0;font:inherit;min-height:44px;padding:12px 16px;border:1px solid var(--carte-bordure);border-radius:14px;background:var(--carte);color:var(--texte);opacity:1;-webkit-text-fill-color:var(--texte)}
.atelier-numerotation{flex-direction:row;align-items:center;justify-content:space-between;gap:8px}
.atelier-numerotation input{width:84px}
.atelier-creer{width:100%}
.atelier-actions{display:flex;flex-direction:column;gap:8px;padding-top:16px;border-top:1px solid var(--trait)}
.atelier button:disabled{cursor:default;transform:none}
.atelier-entete-apercu .atelier-titre{margin-bottom:20px}
.atelier-images{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.atelier-image h3{display:flex;align-items:center;gap:8px;font-size:15px;font-weight:600;line-height:1.3;margin:0 0 12px}
.atelier-image h3 span{font-size:12px;font-weight:400;color:var(--gris)}
.atelier .rep-scene{height:62vh;min-height:420px;box-shadow:var(--ombre-repos)}
.atelier .rep-attente strong{font-weight:500;color:var(--gris)}
.atelier .rep-attente p{margin:8px 0 0;font-size:12px}
.atelier-legende{margin-top:12px}
.atelier-apercu{position:sticky;top:100px}
.integre .atelier-apercu{top:20px}
.atelier-navigation,.atelier-cotes{display:none}
@media(max-width:1099px){
 .atelier-navigation{display:flex;width:100%;margin-bottom:20px}
 .atelier-navigation button{flex:1;min-width:0}
 .atelier-grille{display:block}
 .atelier[data-panneau=commandes] .atelier-apercu,.atelier[data-panneau=apercu] .atelier-commandes{display:none}
 .atelier-apercu{position:static}
 .atelier .rep-scene{height:60vh}
}
@media(max-width:700px){
 .retouche-onglets{display:flex;width:100%}
 .retouche-onglets a{flex:1;min-width:0;font-size:13px;padding:0 8px}
 .atelier-cotes{display:inline-flex}
 .atelier-entete-apercu{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:20px}
 .atelier-entete-apercu .atelier-titre{margin:0}
 .atelier-images{grid-template-columns:1fr}
 .atelier-images[data-cote=original] [data-image=proposition],.atelier-images[data-cote=proposition] [data-image=original]{display:none}
 .atelier-image h3{display:none}
 .atelier .rep-scene{min-height:300px;height:52vh}
}

/* Charte 07/10/2026 : champs déroulants, introduction et fin de bloc. */
select:not([multiple]):not([size]),select[size="1"]:not([multiple]){
  -webkit-appearance:none;appearance:none;
  padding-right:40px!important;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%234f605e' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E")!important;
  background-repeat:no-repeat!important;background-position:right 14px center!important;background-size:14px 14px!important;
}
.bloc-procedure .doc>h1:first-child+p{display:none}
hr:last-child{display:none}
.doc table tr:last-child td{border-bottom:0}

/* 09/10 — boutons uniformes, référence : liste des photos de Retouche. */
:root{--action-bordure:#cbd4d1;--action-rayon:7px;--action-texte:12px}
body .bouton,body .bt:not(.rond),body .bouton-choix,body .vf-reinit,body .rep-annuler,body .v-rapide button,body .bouton-raf{
 font-family:inherit;font-size:var(--action-texte);font-weight:400;line-height:1.4;letter-spacing:normal;
 border:1px solid var(--action-bordure);border-radius:var(--action-rayon);padding:6px 9px;
 min-height:32px;height:auto;background:transparent;color:var(--texte);box-shadow:none;text-decoration:none;
}
body .bouton:hover,body .bt:not(.rond):hover,body .bouton-choix:hover,body .vf-reinit:hover,body .rep-annuler:hover{background:#e5eeeb;border-color:#a9bcb6}
body .bouton:disabled,body .bouton.off,body .bouton.inactif{opacity:.45;background:transparent}
body .bouton.danger{color:var(--danger-texte);border-color:var(--danger-trait);background:transparent}
body .bouton.danger:hover{background:var(--danger-fond)}
body .bouton.danger.off{color:var(--danger-texte);background:var(--danger-fond)}
body .bt.actif,body .v-rapide button.on{background:#e5eeeb;border-color:#365e56;color:var(--texte)}
body .bt.rond{border:1px solid var(--action-bordure);border-radius:var(--action-rayon);box-shadow:none}
/* Audience : le sélecteur de période et son bouton de rafraîchissement ont
   la même hauteur sur Site web, Rapports et les autres sous-rubriques. */
.barre-cmd .cmd-droite .bt:not(.rond),.barre-cmd .cmd-droite .bt.rond{
  min-height:40px;height:40px;
}
.barre-cmd .cmd-droite .bt.rond{width:40px;flex:none}
@media(pointer:coarse){body .bouton,body .bt:not(.rond),body .bouton-choix,body .vf-reinit,body .rep-annuler,body .v-rapide button,body .bouton-raf{min-height:44px}}
body .pastille-res{font:400 12px/1.4 'Poppins',sans-serif;border-radius:7px;border-width:1px;padding:6px 9px;min-height:32px}
@media(pointer:coarse){body .pastille-res{min-height:44px}}
/* La ligne du titre réserve la place du logo et de la fermeture. */
.visionneuse .vis-entete{min-height:48px;margin:0 64px 12px;display:flex;align-items:center;text-align:left;min-width:0}
.visionneuse .vis-titre{min-width:0;width:100%;justify-content:flex-start}
.visionneuse .vis-nom{max-width:100%;min-width:0}
@media(max-width:760px){.visionneuse .vis-entete{min-height:42px;margin:0 50px 12px}.visionneuse .vis-titre{font-size:15px}}
/* Installation : titres, lignes et cartes suivent le même rythme. */
main:has(>.bloc-procedure)>.titre-section{margin-bottom:20px}
main>.bloc-procedure,main>.bloc-procedure+.bloc{padding:20px}
main>.bloc-procedure+.bloc{margin-top:24px}
.bloc-procedure .doc>h1:first-child,main>.bloc-procedure+.bloc>h2{margin:0 0 20px}
.bloc-procedure .doc>.pli>summary{padding-top:16px;padding-bottom:16px}
.bloc-procedure .doc>.pli:first-of-type{border-top:0}
.bloc-procedure .pli-corps{padding-bottom:16px}
main>.bloc-procedure+.bloc>.fichier{padding:16px 0;gap:16px;align-items:center}
main>.bloc-procedure+.bloc>.fichier:first-of-type{padding-top:0}
main>.bloc-procedure+.bloc>.fichier:last-child{padding-bottom:0}
@media(max-width:600px){main>.bloc-procedure,main>.bloc-procedure+.bloc{padding:16px}main>.bloc-procedure+.bloc>.fichier{flex-wrap:wrap}main>.bloc-procedure+.bloc>.fichier>.txt{flex-basis:100%}}
/* Interface compacte : les explications permanentes ne prennent plus de place. */
main:has(#b-publier) p.nuance:not(#nuance-quand):not(#nuance-linkedin-date),
main:has(#b-publier) .zone-image small,
main>.titre-section>.sous,.bloc>.sous-bloc,
.atelier-observations{display:none}
#hote-photo .zone-photo>div>span,.page-sources .champ>.aide{display:none}

.vis-note{display:none}
body.marie-affichee{overflow:hidden}
.marie-bouton{position:fixed;right:var(--esp-24);bottom:var(--esp-24);z-index:59;
  width:100px;height:44px;padding:2px 9px 2px 2px;display:flex;align-items:center;
  justify-content:flex-start;gap:9px;border:1px solid rgba(255,255,255,.32);
  border-radius:var(--r-pilule);background:var(--vert);color:var(--sur-accent);
  box-shadow:var(--ombre-flottant);font:600 13px/1 'Poppins',sans-serif;cursor:pointer;
  overflow:hidden;white-space:nowrap;
  transition:width .28s var(--c-canonique),height .28s var(--c-canonique),
    opacity .28s var(--c-canonique),transform .2s var(--c-canonique),
    box-shadow .2s var(--c-canonique)}
.marie-bouton:hover{transform:translateY(-3px)}
.marie-bouton>span{max-width:70px;opacity:1;transform:translateX(0);overflow:hidden;
  transition:max-width .28s var(--c-canonique),opacity .18s ease,
    transform .28s var(--c-canonique)}
@media(min-width:701px){
  .marie-bouton.marie-discrete{width:34px;height:34px;padding:2px;gap:0;opacity:.52}
  .marie-bouton.marie-discrete:hover,.marie-bouton.marie-discrete:focus-visible{opacity:1}
  .marie-bouton.marie-discrete>span{max-width:0;opacity:0;transform:translateX(-12px)}
  .marie-bouton.marie-discrete .marie-photo-bouton{width:28px;height:28px}
}
.marie-bouton:focus-visible,.marie-fermer:focus-visible{outline:3px solid var(--dore);outline-offset:3px}
.marie-voile{position:fixed;inset:0;z-index:90;padding:var(--esp-16);
  display:grid;place-items:center;background:var(--voile-creme);
  opacity:0;pointer-events:none;backdrop-filter:blur(0);-webkit-backdrop-filter:blur(0);
  transition:opacity var(--t-notif-ferme) var(--c-sortante),
    backdrop-filter var(--t-notif-ferme) var(--c-sortante),
    -webkit-backdrop-filter var(--t-notif-ferme) var(--c-sortante)}
.marie-voile[hidden]{display:none}
.marie-voile.ouvert{opacity:1;pointer-events:auto;backdrop-filter:blur(7px);
  -webkit-backdrop-filter:blur(7px);transition-duration:var(--t-notif-ouvre)}
.marie-cadre{width:min(100%,520px);height:min(650px,calc(100dvh - 32px));
  max-height:calc(100% - 16px);
  display:flex;flex-direction:column;overflow:hidden;background:var(--carte);
  border:1px solid var(--carte-bordure);border-radius:var(--r-fenetre);
  box-shadow:var(--ombre-fenetre);transform:translateY(14px);
  transition:transform var(--t-notif-ferme) var(--c-sortante)}
.marie-voile.ouvert .marie-cadre{transform:none;transition-duration:var(--t-notif-ouvre)}
.marie-entete{display:flex;align-items:center;gap:var(--esp-12);
  padding:var(--esp-16) var(--esp-20);border-bottom:1px solid var(--trait);flex:none}
.marie-monogramme{width:44px;height:44px;border-radius:var(--r-carte);display:grid;
  place-items:center;background:var(--vert);color:var(--dore-pale);
  font:600 20px/1 'Poppins',sans-serif}
.marie-identite{display:grid;gap:2px;min-width:0}
.marie-identite strong{font-size:16px;font-weight:600;color:var(--texte)}
.marie-identite small{font-size:12px;color:var(--gris)}
.marie-fermer{margin-left:auto;width:var(--h-controle);height:var(--h-controle);
  display:grid;place-items:center;border:0;border-radius:var(--r-vignette);
  background:transparent;color:var(--texte);cursor:pointer}
.marie-fermer:hover{background:var(--survol-leger)}
.marie-corps{flex:1;overflow:auto;min-height:0;padding:var(--esp-24) var(--esp-20)}
.marie-message{max-width:390px;padding:var(--esp-16);background:var(--creme);
  border:1px solid var(--trait);border-radius:var(--r-carte);color:var(--texte)}
.marie-message-nom{font-size:12px;font-weight:600;color:var(--vert)}
.marie-message p{margin:var(--esp-8) 0 0;line-height:1.55}
.marie-message p:first-child{margin-top:0}
.marie-evaluations{display:flex;justify-content:flex-end;gap:6px;margin-top:12px;padding-top:8px;border-top:1px solid var(--trait)}
.marie-evaluations button{width:32px;height:32px;border:1px solid var(--trait);border-radius:10px;background:var(--carte);cursor:pointer;font-size:15px}
.marie-evaluations button[aria-pressed=true]{border-color:var(--vert);background:#e5eeeb}
.marie-evaluations button:focus-visible{outline:2px solid var(--vert);outline-offset:2px}
.marie-pistes-titre{margin:var(--esp-32) 0 var(--esp-12);font-size:12px;
  color:var(--gris);font-weight:600}
.marie-pistes{display:flex;flex-wrap:wrap;gap:var(--esp-8)}
.marie-pistes span{display:inline-flex;align-items:center;min-height:36px;
  padding:var(--esp-8) var(--esp-12);border:1px solid var(--trait);
  border-radius:var(--r-pilule);font-size:12px;color:var(--vert);background:var(--carte)}
.marie-saisie{flex:none;padding:var(--esp-12) var(--esp-20) var(--esp-24);
  border-top:1px solid var(--trait)}
.marie-saisie-ligne{height:48px;padding-left:var(--esp-16);display:flex;align-items:center;
  justify-content:space-between;gap:var(--esp-8);border:1px solid var(--trait);
  border-radius:var(--r-pilule);color:var(--gris-doux);font-size:13px}
.marie-envoi{height:36px;width:36px;margin-right:5px;display:grid;place-items:center;
  border-radius:50%;background:var(--neutre-fond);color:var(--gris-doux);font-size:14px}
.marie-saisie>small{display:block;text-align:center;margin-top:var(--esp-8);
  color:var(--gris);font-size:11px}
.marie-effacer{display:flex;align-items:center;justify-content:center;min-height:32px;
  width:max-content;margin:12px auto 0;padding:6px 9px;border:1px solid var(--action-bordure);
  border-radius:var(--action-rayon);background:transparent;color:var(--texte);
  font:400 var(--action-texte)/1.4 'Poppins',sans-serif;text-decoration:none;
  box-shadow:none;cursor:pointer;transition:background .18s,border-color .18s}
.marie-effacer:not(:disabled):hover{background:#e5eeeb;border-color:#a9bcb6;color:var(--texte)}
.marie-effacer:focus-visible{outline:2px solid var(--vert);outline-offset:2px}
.marie-effacer:disabled{opacity:.45;cursor:default}
@media(pointer:coarse){.marie-effacer{min-height:44px}}
@media(max-width:700px){
  .marie-bouton{right:var(--esp-16);bottom:var(--esp-16)}
  .marie-cadre{height:min(720px,calc(100dvh - 32px))}
  .marie-corps{padding:var(--esp-20) var(--esp-16)}
  .marie-entete,.marie-saisie{padding-left:var(--esp-16);padding-right:var(--esp-16)}
}
@media(prefers-reduced-motion:reduce){
  .marie-voile,.marie-voile.ouvert{transition:opacity .1s linear!important}
  .marie-cadre,.marie-voile.ouvert .marie-cadre{transform:none!important;transition:none!important}
  .marie-bouton,.marie-bouton>span,.marie-photo-bouton{transition:none!important}
}

.marie-photo-bouton{width:38px;height:38px;flex:none;border-radius:50%;object-fit:cover;border:3px solid rgba(255,255,255,.92);transition:width .28s var(--c-canonique),height .28s var(--c-canonique)}
@media(max-width:700px){.marie-bouton{min-width:38px;width:38px;height:38px;padding:2px}.marie-bouton>span{display:none}.marie-photo-bouton{width:32px;height:32px}.marie-bouton.marie-discrete{min-width:30px;width:30px;height:30px;padding:2px;opacity:.52}.marie-bouton.marie-discrete .marie-photo-bouton{width:24px;height:24px}}
.marie-monogramme{overflow:hidden;border-radius:50%}.marie-monogramme img{display:block;width:100%;height:100%;object-fit:cover}

.marie-saisie-ligne input{flex:1;min-width:0;border:0;outline:0;background:transparent;color:var(--texte);font:400 13px/1.4 'Poppins',sans-serif}
.marie-saisie-ligne input::placeholder{color:var(--gris-doux)}
.marie-envoi{border:0;cursor:default;transition:background .18s ease,color .18s ease}
.marie-envoi.message-present{background:var(--vert);color:var(--sur-accent)}

.marie-tour{display:flex;align-items:flex-end;gap:8px;margin:0 0 14px;max-width:100%}
.marie-tour .marie-message{margin:0}
.marie-tour-assistante .marie-message-avec-fiche{padding:0;background:transparent;border:0}
.marie-reponse-avec-fiche>p{padding:var(--esp-16);background:var(--creme);border:1px solid var(--trait);border-radius:var(--r-carte)}
.marie-reponse-contenu>*+*{margin-top:12px}
.marie-reponse-contenu>p{margin:0}
.marie-tour-salarie{justify-content:flex-end;margin-left:auto}
.marie-tour-salarie .marie-message{background:var(--vert);color:var(--sur-accent)}
.marie-tour-salarie .marie-message p,.marie-tour-salarie .marie-message-nom{color:var(--sur-accent)}
.marie-avatar{width:30px;height:30px;border-radius:50%;object-fit:cover;flex:none;border:1px solid var(--trait);background:var(--carte)}
.marie-avatar-utilisateur{position:relative;overflow:hidden;display:grid;place-items:center;background:var(--vert);color:var(--sur-accent);font-size:12px;font-weight:700;line-height:1}
.marie-avatar-utilisateur img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.marie-avatar-logo{padding:2px}
.marie-exemple{margin:16px 0 12px;color:var(--gris);font-size:11px;text-align:center}

.marie-micro{width:36px;height:36px;flex:none;display:grid;place-items:center;border:0;border-radius:999px;background:transparent;color:var(--gris);cursor:pointer;transition:width .2s ease,background .2s ease,color .2s ease}
.marie-micro[hidden]{display:none}
.marie-micro:hover,.marie-micro:focus-visible{background:var(--neutre-fond);color:var(--vert)}
.marie-micro[aria-pressed=true]{width:52px;background:#2c2c2c;color:#fff}
.marie-micro[aria-pressed=true]:hover,.marie-micro[aria-pressed=true]:focus-visible{background:#2c2c2c;color:#fff}
.marie-onde{display:none;align-items:center;justify-content:center;gap:3px;height:26px}
.marie-onde i{display:block;width:3px;height:9px;border-radius:3px;background:currentColor;animation:marie-onde 820ms ease-in-out infinite alternate}
.marie-onde i:nth-child(2){height:19px;animation-delay:-600ms}
.marie-onde i:nth-child(3){height:25px;animation-delay:-320ms}
.marie-onde i:nth-child(4){height:16px;animation-delay:-700ms}
.marie-onde i:nth-child(5){height:10px;animation-delay:-210ms}
.marie-micro[aria-pressed=true] .marie-micro-icone{display:none}
.marie-micro[aria-pressed=true] .marie-onde{display:flex}
@keyframes marie-onde{from{transform:scaleY(.42)}to{transform:scaleY(1)}}
.marie-pistes button{display:inline-flex;align-items:center;min-height:36px;padding:8px 12px;border:1px solid var(--trait);border-radius:999px;font:500 12px/1.3 'Poppins',sans-serif;color:var(--vert);background:var(--carte);cursor:pointer;text-align:left}
.marie-pistes button:hover{background:var(--neutre-fond)}
.marie-pistes button:focus-visible,.marie-fiche-demo button:focus-visible{outline:2px solid var(--vert);outline-offset:2px}
.marie-apparition{animation:marie-bulle .32s cubic-bezier(.2,.75,.2,1) both}
@keyframes marie-bulle{from{opacity:0;transform:translateY(9px) scale(.98)}to{opacity:1;transform:translateY(0) scale(1)}}
.marie-points{display:flex;gap:5px;align-items:center;height:20px;margin-top:5px}
.marie-points i{display:block;width:6px;height:6px;border-radius:50%;background:var(--gris);animation:marie-point 1.05s ease-in-out infinite}
.marie-points i:nth-child(2){animation-delay:.14s}.marie-points i:nth-child(3){animation-delay:.28s}
@keyframes marie-point{0%,65%,100%{transform:translateY(0);opacity:.45}35%{transform:translateY(-5px);opacity:1}}
.marie-diagramme{width:min(100%,330px);padding-top:4px}
.marie-diagramme-entete{display:flex;align-items:center;justify-content:space-between;gap:12px}
.marie-diagramme-entete strong{color:var(--texte);font-size:12px}
.marie-diagramme-entete select{max-width:135px;min-height:30px;padding:4px 8px;border:1px solid var(--carte-bordure);border-radius:7px;background:var(--carte);color:var(--texte);font:inherit;font-size:11px;cursor:pointer}
.marie-diagramme>small{display:block;color:var(--gris);font-size:10px;margin:2px 0 9px}
.marie-courbe-cadre{height:120px;position:relative;touch-action:pan-y;cursor:crosshair}
.marie-courbe-periodes{display:flex;flex-wrap:wrap;gap:6px 14px;margin:8px 0 5px;color:var(--gris);font-size:10px}
.marie-courbe-periode{display:inline-flex;align-items:center;gap:5px}
.marie-courbe-periode:before{content:"";width:15px;height:2px;background:var(--vert)}
.marie-courbe-periode.precedente:before{background:var(--dore)}
.marie-courbe-cadre:focus-visible{outline:2px solid var(--vert);outline-offset:2px;border-radius:4px}
.marie-courbe{display:block;width:100%;height:100%;overflow:visible}
.marie-courbe-point-final,.marie-courbe-point-actif{position:absolute;width:9px;height:9px;margin:-4.5px 0 0 -4.5px;border-radius:50%;background:var(--creme);pointer-events:none}
.marie-courbe-point-final:after,.marie-courbe-point-actif:after{content:"";position:absolute;inset:1.5px;border-radius:50%;background:var(--vert)}
.marie-courbe-repere{position:absolute;top:0;bottom:0;width:1px;background:var(--gris-trait);pointer-events:none}
.marie-courbe-repere,.marie-courbe-point-actif{opacity:0;transition:opacity var(--t-appui) var(--c-canonique)}
.marie-courbe-repere.actif,.marie-courbe-point-actif.actif{opacity:1}
.marie-courbe-legende{display:flex;justify-content:space-between;gap:10px;margin-top:5px;font-size:10px;color:var(--gris)}
.marie-courbe-valeur{display:block;min-height:18px;margin-top:8px;color:var(--vert);font-size:11px;font-weight:600;font-variant-numeric:tabular-nums}
.marie-fiche-demo{width:min(100%,315px);border:1px solid var(--trait);border-radius:12px;overflow:hidden;background:var(--carte);box-shadow:var(--ombre-repos)}
.marie-carrousel-fiches{width:min(100%,315px)}
.marie-carrousel-fiches .marie-fiche-demo{width:100%}
.marie-carrousel-navigation{display:flex;align-items:center;justify-content:flex-end;gap:10px;margin-top:8px;color:var(--gris);font-size:12px}
.marie-carrousel-navigation button{width:34px;height:34px;border:1px solid var(--action-bordure);border-radius:var(--action-rayon);background:var(--carte);color:var(--texte);font:600 24px/1 'Poppins',sans-serif;cursor:pointer}
.marie-carrousel-navigation button:hover{background:var(--carte);color:var(--texte)}
.marie-carrousel-navigation button:disabled{opacity:.4;cursor:default}
.marie-carrousel-navigation button:focus-visible{outline:2px solid var(--vert);outline-offset:2px}
.marie-fiche-image{height:145px;position:relative;background:var(--neutre-fond)}
.marie-fiche-image.sans-image{display:grid;place-items:center}
.marie-fiche-image.sans-image:before{content:'Photo non disponible';font-size:12px;color:var(--gris)}
.marie-fiche-image img{width:100%;height:100%;object-fit:cover;display:block}
.marie-fiche-image img[hidden]{display:none}
.marie-fiche-meta{display:flex;align-items:center;flex-wrap:wrap;gap:6px;margin-bottom:7px}
.marie-fiche-texte .marie-fiche-source,.marie-fiche-texte .marie-fiche-etat,.marie-fiche-texte .marie-fiche-brouillon{display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;width:max-content;min-height:23px;padding:4px 8px;border:1px solid transparent;border-radius:999px;font-size:10px;font-weight:600;line-height:1.3;white-space:nowrap}
.marie-fiche-texte .marie-fiche-source{border-color:#c4d7df;background:#e7f0f4;color:#315e72}
.marie-fiche-texte .marie-fiche-etat{border-color:var(--action-bordure);background:var(--neutre-fond);color:var(--texte)}
.marie-fiche-texte .marie-fiche-etat.en-stock{border-color:#b7d3bf;background:#eaf4ed;color:#246242}
.marie-fiche-texte .marie-fiche-etat.hors-stock{border-color:#e3c1bb;background:#fbefed;color:var(--danger-texte)}
.marie-fiche-texte .marie-fiche-brouillon{border-color:#e4d1ae;background:var(--alerte-fond);color:var(--alerte-sombre)}
.marie-fiche-compteur{flex:none;color:var(--gris);font-size:11px;font-weight:600;white-space:nowrap}
.marie-photo-suivante,.marie-photo-precedente{display:none !important}
.marie-fiche-texte{padding:12px}.marie-fiche-texte small{display:block;color:var(--gris);font-size:10px}
.marie-fiche-texte strong{display:block;margin:4px 0;color:var(--texte);font-size:14px}
.marie-fiche-texte p{margin:0 0 8px;color:var(--gris);font-size:11px;line-height:1.45}
.marie-fiche-texte a.marie-lien-fiche,.marie-donnees a.marie-lien-fiche{display:inline-flex;align-items:center;justify-content:center;min-height:32px;margin-top:8px;padding:6px 9px;border:1px solid var(--action-bordure);border-radius:var(--action-rayon);background:transparent;color:var(--texte);font:400 var(--action-texte)/1.4 'Poppins',sans-serif;text-decoration:none;box-shadow:none;transition:background .18s,border-color .18s}
.marie-fiche-texte a.marie-lien-fiche:hover,.marie-donnees a.marie-lien-fiche:hover{background:#e5eeeb;border-color:#a9bcb6;text-decoration:none}
.marie-fiche-texte a.marie-lien-fiche:focus-visible,.marie-donnees a.marie-lien-fiche:focus-visible{outline:2px solid var(--vert);outline-offset:2px}
.marie-annonces-historique{width:min(100%,315px);border:1px solid var(--trait);border-radius:12px;background:var(--carte);padding:12px;box-shadow:var(--ombre-repos)}
.marie-annonces-entete,.marie-annonces-navigation{display:flex;align-items:center;justify-content:space-between;gap:12px}
.marie-annonces-entete{margin-bottom:10px}
.marie-annonces-entete span{white-space:nowrap;color:var(--gris);font-size:12px}
.marie-annonce-contenu{display:flex;flex-direction:column;gap:7px;min-width:0}
.marie-annonce-contenu>strong{line-height:1.4}
.marie-annonce-contenu p{margin:0;color:var(--gris);font-size:12px;line-height:1.45}
.marie-annonce-statut{align-self:flex-start;display:inline-flex;align-items:center;min-height:23px;padding:3px 8px;border:1px solid var(--action-bordure);border-radius:999px;background:var(--neutre-fond);color:var(--texte);font-size:10px;font-weight:600;line-height:1.25}
.marie-annonce-image{display:block;box-sizing:border-box;width:100%;height:145px;object-fit:contain;background:#fff;border:1px solid var(--trait);border-radius:8px}
.marie-annonce-liens{display:flex;flex:1;flex-wrap:wrap;gap:6px;min-width:0}
.marie-annonce-liens a.marie-lien-fiche{display:inline-flex;align-items:center;justify-content:center;min-height:32px;padding:6px 9px;border:1px solid var(--action-bordure);border-radius:var(--action-rayon);color:var(--texte);font:400 var(--action-texte)/1.4 'Poppins',sans-serif;text-decoration:none}
.marie-annonces-navigation{align-items:flex-end;gap:8px;margin-top:10px}
.marie-annonces-commandes{display:flex;flex:none;gap:8px}
.marie-annonces-navigation button{width:34px;height:34px;border:1px solid var(--trait);border-radius:50%;background:var(--carte);color:var(--texte);cursor:pointer;font:24px/1 'Poppins',sans-serif}
.marie-annonces-navigation button:disabled{opacity:.35;cursor:default}
.marie-annonces-navigation button:focus-visible,.marie-annonce-liens a:focus-visible{outline:2px solid var(--vert);outline-offset:2px}
@media(pointer:coarse){.marie-fiche-texte a.marie-lien-fiche,.marie-donnees a.marie-lien-fiche{min-height:44px}}
.marie-donnees{min-width:200px;max-width:310px}
.marie-donnees strong{display:block;margin-bottom:8px;font-size:12px}
.marie-donnees p{margin:4px 0;border-top:1px solid var(--trait);padding-top:5px;font-size:11px}
.marie-seo small{display:block;margin:10px 0 4px;color:var(--gris);font-size:10px;font-weight:600}
.marie-recommandation small{display:block;color:var(--gris);font-size:10px;margin-bottom:4px}
@media(prefers-reduced-motion:reduce){.marie-apparition,.marie-points i,.marie-onde i{animation:none!important}.marie-micro{transition:none!important}.marie-courbe-repere,.marie-courbe-point-actif{transition:none!important}}

/* Relevé vérifié dans Product Research, distinct des annonces en cours. */
.comparables-grille{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.25fr);gap:24px;align-items:start}
.comparables-grille p{margin:0 0 14px}
.comparables-grille .comparables-info{font-size:12px;line-height:1.5;color:var(--gris);margin:0 0 8px}
.comparables-grille .comparables-info:last-of-type{margin-bottom:14px}
.comparables-resultat{min-width:0;padding:15px;border:1px solid var(--trait);border-radius:12px;background:var(--creme)}
.comparables-prix{display:flex;justify-content:space-between;gap:10px;font-size:11px;line-height:1.35;color:var(--gris)}
.comparables-prix span{display:grid;gap:5px}
.comparables-prix span:nth-child(2){text-align:center}
.comparables-prix span:last-child{text-align:right}
.comparables-prix b{font-size:16px;color:var(--vert);white-space:nowrap}
.comparables-echelle{height:7px;margin:18px 4px 16px;border-radius:999px;background:linear-gradient(90deg,#d9e6e1,var(--vert));position:relative}
.comparables-marqueur{position:absolute;top:50%;height:18px;width:18px;border:3px solid var(--vert);border-radius:50%;background:#fff;transform:translate(-50%,-50%);box-shadow:0 0 0 2px #fff}
.comparables-resultat .comparables-meta{margin:0;font-size:11px;line-height:1.5;color:var(--gris)}
.comparables-repere{margin:12px 0 8px;font-size:13px;color:var(--texte)}
.comparables-repere strong{font-size:17px;color:var(--vert)}
.comparables-couverture{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin:8px 0 0;color:var(--vert)}
.comparables-couverture strong{font-size:18px;white-space:nowrap}
.comparables-couverture span{font-size:12px;color:var(--gris);text-align:right}
.comparables-vide{color:var(--gris);font-size:13px}
.comparables-prix-vide b{color:var(--gris)}
.comparables-echelle-vide{background:#d9e0dc}
.comparables-saisie{margin-top:17px;border-top:1px solid var(--trait);padding-top:13px}
.comparables-saisie summary{cursor:pointer;color:var(--vert);font-size:13px;font-weight:600}
.comparables-saisie>p{font-size:12px;color:var(--gris);margin:10px 0}
.comparables-saisie form{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;align-items:end}
.comparables-saisie label{display:grid;gap:5px;font-size:12px;font-weight:600}
.comparables-saisie input{width:100%;min-width:0;box-sizing:border-box;padding:9px;border:1px solid var(--trait);border-radius:8px;font:inherit;background:#fff}
.comparables-saisie input[type="checkbox"]{width:auto;min-width:0;padding:0;margin-right:7px;vertical-align:middle}
.comparables-saisie .comparables-vente-ligne{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;min-width:0;margin:0;padding:12px;border:1px solid var(--trait);border-radius:10px}
.comparables-vente-ligne legend{font-weight:700;font-size:13px;padding:0 5px}
.comparables-vente-ligne .comparables-conversion{grid-column:1/-1;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.comparables-vente-ligne .comparables-conversion[hidden]{display:none}
.comparables-vente-ligne label:has([name="source_url"]){grid-column:1/-1}
.comparables-vente-ligne select{width:100%;padding:9px;border:1px solid var(--trait);border-radius:8px;background:#fff;font:inherit}
.comparables-lignes{display:grid;gap:12px}
.comparables-saisie .comparables-large{grid-column:1/-1}
.comparables-saisie output{font-size:12px;color:var(--vert)}
@media(max-width:700px){.comparables-grille{grid-template-columns:1fr}.comparables-prix b{font-size:14px}}
@media(max-width:700px){.comparables-saisie .comparables-vente-ligne,.comparables-vente-ligne .comparables-conversion{grid-template-columns:1fr}}

/* Le rouage ouvre directement Réglages, avec la même empreinte que le menu. */
.bouton-reglages{width:34px;height:34px;display:grid;place-items:center;flex:none;color:var(--texte);border-radius:10px;text-decoration:none;transition:background .18s ease}
.bouton-reglages:hover,.bouton-reglages:focus-visible{background:var(--survol-leger);color:var(--texte);text-decoration:none}

/* Actions anciennement présentées comme des liens : style commun du portail. */
body main a[href]{text-decoration:none}
body main .rep-lien,body main .lien-sec{display:inline-flex;align-items:center;justify-content:center;min-height:32px;padding:6px 9px;margin:8px 0 0;border:1px solid var(--action-bordure);border-radius:var(--action-rayon);background:transparent;color:var(--texte);font:400 var(--action-texte)/1.4 'Poppins',sans-serif;text-decoration:none;box-shadow:none;cursor:pointer}
body main .lien-sec{margin-left:12px}
body main .rep-lien:hover,body main .lien-sec:hover{background:#e5eeeb;border-color:#a9bcb6;color:var(--texte);text-decoration:none}
body main .rep-lien:focus-visible,body main .lien-sec:focus-visible{outline:2px solid var(--vert);outline-offset:2px}
@media(pointer:coarse){body main .rep-lien,body main .lien-sec{min-height:44px}}

/* Liens d’action secondaires : même bordure que « Ouvrir la fiche » dans Marie. */
body a.bouton.bouton-fantome{display:inline-flex;align-items:center;justify-content:center;
  min-height:32px;padding:6px 9px;border:1px solid var(--action-bordure);
  border-radius:var(--action-rayon);background:transparent;color:var(--texte);
  font:400 var(--action-texte)/1.4 'Poppins',sans-serif;letter-spacing:normal;
  text-decoration:none;box-shadow:none}
body a.bouton.bouton-fantome:hover{background:#e5eeeb;border-color:#a9bcb6;color:var(--texte)}
body a.bouton.bouton-fantome:focus-visible{outline:2px solid var(--vert);outline-offset:2px}
@media(pointer:coarse){body a.bouton.bouton-fantome{min-height:44px}}

/* Mouvement commun : même signal sur toutes les pages, sans effet décoratif au survol. */
:root{--ui-motion-fast:140ms;--ui-motion:200ms;--ui-motion-long:260ms;
  --ui-motion-ease:cubic-bezier(.215,.61,.355,1);--ui-hover:#e5eeeb}
body main .bouton:hover,body main .bt:hover,body main .bouton-raf:hover,
body main .rep-lien:hover,body main .lien-sec:hover{transform:none;box-shadow:none}
body main .bouton,body main .bt,body main .bouton-raf,
body main .rep-lien,body main .lien-sec,body main button,
body main a.carte-objet,body main a.rubrique{
  transition:background-color var(--ui-motion-fast) ease,
    border-color var(--ui-motion-fast) ease,color var(--ui-motion-fast) ease,
    opacity var(--ui-motion-fast) ease}
body main button:active,body main .bouton:active{transform:none;opacity:.82}
/* La piste reste stable; le seul accent sélectionné voyage sous le libellé. */
.pastilles,.bascule-stock,.bascule-vue,.segmente,.vis-appareils{position:relative;isolation:isolate}
.pastilles::before,.bascule-stock::before,.bascule-vue::before,.segmente::before,.vis-appareils::before{
  content:"";position:absolute;left:var(--ui-tab-left,4px);top:var(--ui-tab-top,4px);
  width:var(--ui-tab-width,0px);height:var(--ui-tab-height,36px);
  border-radius:999px;background:var(--carte);box-shadow:var(--ombre-choix);
  opacity:var(--ui-tab-visible,0);z-index:0;pointer-events:none;
  transition:left var(--ui-motion-long) var(--ui-motion-ease),
    top var(--ui-motion-long) var(--ui-motion-ease),
    width var(--ui-motion-long) var(--ui-motion-ease),
    height var(--ui-motion-long) var(--ui-motion-ease),opacity var(--ui-motion-fast) ease}
.pastilles a.on,.bascule-stock button.on,.bascule-vue button[aria-selected="true"],
.segmente button[aria-selected="true"],.vis-appareils button[aria-selected="true"]{background:transparent;box-shadow:none}
.pastilles a,.bascule-stock button,.bascule-vue button,.segmente button,.vis-appareils button{position:relative;z-index:1}
.pastilles a:hover,.bascule-stock button:hover,.bascule-vue button:hover,.segmente button:hover,.vis-appareils button:hover{
  background:transparent;color:var(--vert)}
/* Rafraîchir : mouvement limité à l’icône, sans bloquer le réseau. */
.ui-rafraichit svg,.raf.tourne svg,#raf-stock.tourne svg{animation:ui-rafraichir 850ms var(--ui-motion-ease) both}
@keyframes ui-rafraichir{to{transform:rotate(360deg)}}
/* Retour d’appui uniquement ; l’état final doit venir de la réponse serveur. */
.ui-action-en-cours{opacity:.7!important}
/* Une même apparition pour cartes, sections et réponses de Marie. */
main .carte,main .bloc,main .carte-objet,main .rubrique,main .obj,
.marie-apparition{animation-duration:var(--ui-motion-long);animation-timing-function:var(--ui-motion-ease)}
.marie-bouton:hover{transform:none}
.marie-micro[aria-pressed=true]{background:var(--vert);color:var(--sur-accent)}
.marie-envoi.message-present:active{opacity:.75}
.marie-points i{animation-duration:900ms}
main.audience-panel-swapped{animation:none}
@media(prefers-reduced-motion:reduce){
  .pastilles::before,.bascule-stock::before,.bascule-vue::before,.segmente::before,
  .ui-rafraichit svg,.raf.tourne svg,#raf-stock.tourne svg{
    animation:none!important;transition:none!important}
}

/* Interactions communes : Audience, Appareils, Publier, Réglages et notifications. */
header>nav.principal,header>.actions-entete{align-self:center;display:flex;align-items:center}
header>nav.principal a,header>.actions-entete>.bouton-cloche,
header>.actions-entete>.bouton-reglages{align-self:center;box-sizing:border-box}
header>nav.principal a{line-height:1;justify-content:center}
header>.actions-entete svg{display:block}
header>.actions-entete>.bouton-cloche,header>.actions-entete>.bouton-reglages{
  transition:background-color var(--ui-motion-fast) ease,opacity var(--ui-motion-fast) ease}
body main :is(button,a)[class]:not(:disabled),.ligne-notif{
  transition:background-color var(--ui-motion-fast) ease,border-color var(--ui-motion-fast) ease,
    color var(--ui-motion-fast) ease,opacity var(--ui-motion-fast) ease}
@media(hover:hover){
  body main .bouton-fantome:hover{border-color:var(--action-bordure)}
}
body main :is(button,a)[class]:not(:disabled):active,
.ligne-notif:active,.bouton-cloche:active,.bouton-reglages:active{opacity:.78}
@media(prefers-reduced-motion:reduce){
  body main :is(button,a)[class],.ligne-notif,.bouton-cloche,.bouton-reglages{transition:none!important}
}
/* Le fil d’Ariane et les onglets suffisent à nommer ces vues sur le portail.
   Conserver le H1 pour les lecteurs d’écran et le titre visible dans les vues intégrées. */
body:not(.integre) .titre-onglets-redondant{position:absolute!important;width:1px!important;height:1px!important;min-width:0!important;max-width:1px!important;margin:-1px!important;padding:0!important;overflow:hidden!important;clip-path:inset(50%)!important;white-space:nowrap!important;border:0!important}
body:not(.integre) .prep-heading:has(.titre-onglets-redondant){height:0!important;min-height:0!important;margin:0!important;padding:0!important;overflow:hidden!important}
/* Le pictogramme Stock laisse deux pixels de blanc dans son SVG :
   compenser ce retrait pour équilibrer les vides visibles autour du filet. */
@media(min-width:761px){header>nav.principal{margin-left:-2px}}

/* Dialogues natifs du navigateur : mêmes courbes, décalage et voile que les campagnes. */
dialog.dialogue-montant{animation:none!important;opacity:0;transform:translateY(var(--decal-modale));transition:opacity var(--t-modale-ferme) var(--c-sortante),transform var(--t-modale-ferme) var(--c-sortante)}
dialog.dialogue-montant.ouverte{opacity:1;transform:none;transition:opacity var(--t-modale-ouvre) var(--c-canonique),transform var(--t-modale-ouvre) var(--c-canonique)}
dialog.dialogue-montant::backdrop{background:var(--voile-creme);opacity:0;backdrop-filter:blur(0);-webkit-backdrop-filter:blur(0);transition:opacity var(--t-modale-ferme) var(--c-sortante),backdrop-filter var(--t-modale-ferme) var(--c-sortante),-webkit-backdrop-filter var(--t-modale-ferme) var(--c-sortante)}
dialog.dialogue-montant.ouverte::backdrop{opacity:1;backdrop-filter:blur(7px);-webkit-backdrop-filter:blur(7px);transition:opacity var(--t-modale-ouvre) var(--c-canonique),backdrop-filter var(--t-modale-ouvre) var(--c-canonique),-webkit-backdrop-filter var(--t-modale-ouvre) var(--c-canonique)}
@media(prefers-reduced-motion:reduce){dialog.dialogue-montant,dialog.dialogue-montant.ouverte{transform:none;transition:opacity var(--t-reduit) linear!important}dialog.dialogue-montant::backdrop,dialog.dialogue-montant.ouverte::backdrop{backdrop-filter:blur(7px);-webkit-backdrop-filter:blur(7px);transition:opacity var(--t-reduit) linear!important}}

/* Complément de la fenêtre existante : portail seulement. */
#modale .rd-bilan{flex:none;border-top:1px solid var(--trait);padding:16px 20px;background:var(--carte)}
#modale .rd-entete{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}
#modale .rd-entete h3{margin:0;font-size:15px;color:var(--vert)}
#modale .rd-chiffres{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:14px 0 0}
#modale .rd-chiffres strong{display:block;font-size:23px;font-weight:600;color:var(--vert);font-variant-numeric:tabular-nums}
#modale .rd-chiffres span{font-size:12px;color:var(--gris-doux)}
#modale .rd-action{border:0;border-radius:var(--r-pilule);padding:10px 18px;background:var(--vert);color:var(--sur-accent);font:inherit;font-size:12px;font-weight:600;cursor:pointer}
#modale .rd-action:disabled{opacity:.5;cursor:wait}
#modale .rd-detail{flex:1;min-height:0;overflow:auto;padding:20px}
#modale .rd-detail[hidden],#modale iframe[hidden],#modale .rd-bilan[hidden]{display:none}
#modale .rd-outils{display:flex;gap:10px;flex-wrap:wrap;margin:18px 0}
#modale .rd-outils input,#modale .rd-outils select{font:inherit;font-size:13px;padding:10px;border:1px solid var(--trait);border-radius:var(--r-mini);background:var(--carte);color:var(--texte);min-width:0}
#modale .rd-outils input{flex:1}
#modale .rd-note{font-size:12px;color:var(--gris-doux);line-height:1.6}
#modale .rd-table{overflow-x:auto}
#modale .rd-table table{width:100%;font-size:12px}
#modale .rd-table td{padding:12px 8px;vertical-align:top;overflow-wrap:anywhere}
#modale .rd-table small{display:block;color:var(--gris-doux);margin-top:4px}
#modale .rd-retour{background:transparent;color:var(--vert);border:1px solid var(--trait)}
@media(max-width:540px){#modale .rd-bilan{padding:14px}#modale .rd-chiffres strong{font-size:20px}#modale .rd-detail{padding:14px}#modale .rd-outils select{width:100%}}

#modale .rd-titre-retour{justify-content:flex-start;gap:8px;flex-wrap:nowrap}
#modale .rd-retour-fleche{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;flex:none;padding:0;border:0;background:transparent;color:var(--vert);border-radius:var(--ui-action-rayon);cursor:pointer}
#modale .rd-retour-fleche:hover{background:transparent}
#modale .rd-retour-fleche:focus-visible{outline:2px solid var(--vert);outline-offset:2px}

/* Accès au détail, texte fléché sur la ligne du bilan des rejets. */
#modale .rd-ligne-fin{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-top:12px}
#modale .rd-ligne-fin .rd-note{margin:0}
#modale #rd-voir{display:inline-flex;align-items:center;gap:10px;min-height:44px;margin-left:auto;padding:0;border:0;background:transparent;color:var(--vert);font:inherit;font-size:12px;font-weight:500;cursor:pointer;text-align:right}
#modale #rd-voir span{font-size:20px;line-height:1}
#modale #rd-voir:not(:disabled):hover{text-decoration:none;background:transparent}
#modale #rd-voir:disabled{opacity:.5;cursor:wait}
#modale #rd-voir:focus-visible{outline:2px solid var(--vert);outline-offset:4px;border-radius:2px}

/* Recherche et sélecteur côte à côte, y compris après habillage AntiqCombobox. */
#modale .rd-outils{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,220px);align-items:center;gap:10px}
#modale .rd-outils>input,#modale .rd-outils>.aq-combo,#modale .rd-outils>select{width:100%;min-width:0;max-width:100%;box-sizing:border-box}
#modale .rd-outils .aq-combo-trigger{width:100%;min-width:0;box-sizing:border-box}
#modale #rd-voir:hover,#modale #rd-voir:hover span,#modale .rd-retour-fleche:hover{box-shadow:none;transform:none;text-decoration:none;background:transparent;color:var(--vert)}

@media(max-width:540px){#modale .rd-outils{grid-template-columns:minmax(0,1fr) minmax(0,150px)}}

/* Délimiter les colonnes du rapport, titres et données ensemble. */
#modale .rd-table table{border-collapse:collapse}
#modale .rd-table th:not(:last-child),#modale .rd-table td:not(:last-child){border-right:1px solid var(--trait)}
#modale .rd-table th{padding:12px 8px}