*{box-sizing:border-box}
body{font-family:'Segoe UI',Arial,sans-serif;margin:0;background:#f5f5f2;color:#1a1a1a}
.topbar{position:sticky;top:0;z-index:50;background:#fff;border-bottom:1px solid #e0ded6;box-shadow:0 1px 6px rgba(0,0,0,0.06)}
.tb-in{max-width:1180px;margin:0 auto;padding:10px 20px 0;display:flex;justify-content:space-between;align-items:baseline;flex-wrap:wrap;gap:8px}
.brand{font-size:17px;font-weight:600;letter-spacing:-0.2px}
.meta{font-size:11px;color:#8a8a84}
.nav1{max-width:1180px;margin:0 auto;padding:8px 20px 0;display:flex;gap:4px;flex-wrap:wrap}
.nav1 button{border:none;background:transparent;font:inherit;font-size:13px;font-weight:600;color:#6a6a64;
padding:8px 14px;border-radius:7px 7px 0 0;cursor:pointer;border-bottom:3px solid transparent}
.nav1 button:hover{background:#f2f1ec;color:#1a1a1a}
.nav1 button.on{color:#fff}
.nav2{max-width:1180px;margin:0 auto;padding:7px 20px;display:flex;gap:6px;flex-wrap:wrap;background:#faf9f6;border-top:1px solid #eeece4}
.nav2 button{border:1px solid #ddd9cd;background:#fff;font:inherit;font-size:12px;color:#55554f;
padding:5px 12px;border-radius:20px;cursor:pointer}
.nav2 button:hover{border-color:#b6b2a4}
.nav2 button.on{color:#fff;border-color:transparent;font-weight:600}
/* Une seule définition : la barre empile ses lignes, chaque ligne aligne ses
   réglages. Deux jeux de règles concurrents cohabitaient, l'un en flex avec
   gouttière, l'autre en bloc — l'écart entre les lignes ne se lisait donc
   dans aucune des deux. */
/* La disposition de la barre est posée sur les éléments eux-mêmes, dans le
   gabarit. Trois tentatives de correction par la feuille sont restées sans
   effet — règle concurrente, cache, on ne sait — alors que le même réglage
   en ligne a fonctionné du premier coup.

   Les six réglages tiennent désormais dans un seul conteneur en flex qui
   revient à la ligne de lui-même : l'espacement vertical est celui de
   `row-gap`, et non la somme de marges de deux conteneurs distincts. */
.ctrl{max-width:1180px;margin:0 auto;padding:7px 20px 9px;display:block}
.plab{font-size:11px;color:#8a8a84;text-transform:uppercase;letter-spacing:0.5px}
.pseg{display:inline-flex;border:1px solid #d8d5c9;border-radius:7px;overflow:hidden}
.pseg button{border:none;background:#fff;font:inherit;font-size:12px;padding:5px 13px;cursor:pointer;color:#6a6a64}
.pseg button+button{border-left:1px solid #e6e3d8}
.pseg button.on{background:#1F4E79;color:#fff;font-weight:600}
.ppre{display:inline-flex;gap:5px;flex-wrap:wrap}
.ppre button{border:1px solid #ddd9cd;background:#fff;font:inherit;font-size:12px;
padding:5px 11px;border-radius:20px;cursor:pointer;color:#55554f}
.ppre button:hover{border-color:#b6b2a4}
.ppre button.on{background:#1F4E79;color:#fff;border-color:#1F4E79;font-weight:600}
/* Réglure continue des 52 semaines. L'ancienne bande groupait les semaines par
   mois en blocs séparés : elle passait à la ligne et occupait quatre rangées.
   Ici les mois sont des graduations au-dessus d'une règle d'un seul tenant,
   chaque mois large de son nombre de semaines. Une rangée au lieu de quatre. */
.ptrack{margin-top:9px;-webkit-user-select:none;user-select:none;touch-action:none}
.pmos{display:flex;height:12px;margin-bottom:2px}
.pmos span{font-size:8.5px;color:#a2a29a;text-transform:uppercase;letter-spacing:0.4px;
padding-left:4px;overflow:hidden;white-space:nowrap;box-sizing:border-box;cursor:pointer}
.pmos span:hover{color:#1F4E79}
.pmos span+span{border-left:1px solid #e6e3d8}
.pwks{display:flex;height:24px;border:1px solid #ddd9cd;border-radius:6px;overflow:hidden;background:#fff}
.pwks button{flex:1 1 0;min-width:0;padding:0;border:none;background:transparent;
font:inherit;font-size:9px;color:#8a8a84;cursor:pointer;position:relative}
.pwks button.mo1{box-shadow:inset 1px 0 0 #e6e3d8}
.pwks button:hover{background:#f2f1ec;color:#1a1a1a}
/* Semaines à venir : ni réalisé ni comparaison, mais budget et N-1 connus.
   Elles restent cliquables — c'est ainsi qu'on lit le reste à faire. */
.pwks button.fut{color:#c2c0b8;background:#fbfaf7}
.pwks button.in{background:#dce9f4;color:#1F4E79;font-weight:600}
.pwks button.in.fut{background:#e9f0f6;color:#7d97b0}
.pwks button.bd{background:#1F4E79;color:#fff;font-weight:700}
/* Plage en cours de définition : dessinée en retrait tant qu'elle n'est pas
   validée par le second clic. L'ancre, elle, reste franche. */
.pwks button.pv{opacity:.5}
.pwks button.anc{opacity:1;background:#eb6834;color:#fff;font-weight:700}
/* Dernière semaine importée : la frontière entre le mesuré et le prévu. */
.pwks button.der::after{content:'';position:absolute;left:0;right:0;bottom:0;height:3px;background:#FAB219}
.pinfo{font-size:11.5px;color:#6a6a64;margin-top:8px}
/* Ligne basse de la barre : l'info de période à gauche, la portée des
   tableaux poussée à droite. Aucune rangée supplémentaire n'est ajoutée. */
.pbot{display:flex;align-items:baseline;gap:9px;flex-wrap:nowrap;margin-top:8px}
.pbot .pinfo{margin-top:0;margin-right:auto;flex:1 1 auto;min-width:0;
overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pbot .plab{flex:0 0 auto}
.crumb{font-size:11.5px;color:#8a8a84;margin-left:0;flex:0 0 auto;white-space:nowrap}
.crumb b{color:#3f3f3a;font-weight:600}
.pinfo b{color:#1a1a1a}
/* Le mode d'emploi de la réglure est passé en infobulle sur la règle : il
   tronquait la ligne d'info sur les périodes longues. Seul subsiste le message
   d'attente, affiché pendant la définition d'une plage, où il est seul. */
.pinfo .hint{margin-left:8px}
.pinfo .hint.att{color:#eb6834;font-weight:600}
.pbtn{font:inherit;font-size:12px;padding:6px 14px;border:1px solid #d8d5c9;border-radius:7px;
background:#fff;cursor:pointer;color:#55554f}
.pbtn:hover{border-color:#b6b2a4;background:#faf9f5}
/* L'impression n'est pas un réglage de période : on la sépare des préréglages. */
.pbtn.imp{margin-left:auto}
.wrap{max-width:1180px;margin:0 auto;padding:20px}
.phead{display:none}
h2.sec{font-size:16px;margin:26px 0 12px;padding:9px 15px;color:#fff;border-radius:8px}
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(178px,1fr));gap:11px;margin-bottom:20px}
.kpi{background:#fff;border-radius:10px;padding:13px 15px;border:1px solid #e4e2da}
.kpi .l{font-size:11px;color:#8a8a84;text-transform:uppercase;letter-spacing:0.4px}
.kpi .v{font-size:21px;font-weight:600;margin:3px 0 1px}
.kpi .d{font-size:11.5px;color:#6a6a64}
.kpi .d.g{color:#0a8a0a}.kpi .d.r{color:#c23434}
.card{background:#fff;border-radius:10px;padding:17px;border:1px solid #e4e2da;margin-bottom:18px;page-break-inside:avoid}
.card h3{font-size:14.5px;margin:0 0 3px;font-weight:600}
.card .note{font-size:11.5px;color:#8a8a84;margin:0 0 11px}
.chartbox{position:relative;height:330px}
.chartbox.small{height:255px}
.chartbox.mini{height:175px}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.grid3{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.grid3>:nth-child(3){grid-column:1 / -1}
@media(max-width:880px){.grid2,.grid3{grid-template-columns:1fr}
.grid3>:nth-child(3){grid-column:auto}}
.fh{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:9px}
.fh .f1{font-size:15px;font-weight:600;letter-spacing:-0.2px}
.fh .f2{font-size:11px;color:#9a9a94}
.kb{display:grid;grid-template-columns:repeat(4,1fr);gap:7px;margin-bottom:10px}
@media(max-width:760px){.kb{grid-template-columns:repeat(2,1fr)}}
.ftt{font-size:10.5px;font-weight:600;color:#6a6a64;margin:7px 0 2px}
/* Les quatre graphiques de la fiche se lisent deux par deux, à l'écran comme
   sur le papier : deux colonnes fixes, jamais trois. `auto-fit` en donnait
   trois dès 1100 px de large et cassait la correspondance avec la page
   imprimée. Sous 820 px, une seule colonne : mieux vaut un graphique large
   que quatre illisibles. */
.fgrid{display:grid;grid-template-columns:1fr 1fr;gap:8px 20px}
@media(max-width:820px){.fgrid{grid-template-columns:1fr}}
/* Hauteur commune aux deux colonnes, comme à l'impression : la variante sm
   ne se distinguait qu'à l'écran, ce qui décalait la colonne de droite.
   230 px donne un rapport de 2,4:1 sur une colonne de 560 px — assez haut
   pour que les écarts de quota se voient. */
.fbox,.fbox.sm{position:relative;height:230px}
.kbloc{background:#f7f6f2;border-radius:8px;padding:8px 11px}
.kbloc .kt{font-size:9.5px;color:#96968f;text-transform:uppercase;letter-spacing:0.4px}
.kbloc .kv{font-size:15px;font-weight:600;margin:2px 0}
.kbloc .kd{font-size:10.5px;line-height:1.45}
.kbloc .kt{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.g{color:#0a8a0a}.r{color:#c23434}.n{color:#7a7a74}
table.tb{border-collapse:collapse;font-size:11px;width:100%;table-layout:auto}
table.tb th{font-size:10px;color:#8a8a84;text-transform:uppercase;letter-spacing:0.4px;font-weight:600;
text-align:right;padding:5px 6px;border-bottom:1px solid #e4e2da;white-space:normal;
line-height:1.25;vertical-align:bottom}
table.tb th:first-child{text-align:left}
table.tb th.grp{text-align:center;color:#3f3f3a;font-size:10px;font-weight:700;
border-bottom:1px solid #d9d5c7;white-space:nowrap;background:#faf9f5;
padding-bottom:3px;letter-spacing:0.6px}
table.tb th.grp:first-child{border-bottom:none;background:transparent}
table.tb th.grp+th.grp{border-left:1px solid #d9d5c7}
table.tb th.sep,table.tb td.sep{border-left:1px solid #d9d5c7;padding-left:11px}
table.tb tr:hover td{background:#faf9f5}
table.tb tr.ref:hover td{background:#f2f1ec}
table.tb td{padding:6px 6px;text-align:right;border-bottom:1px solid #f2f1ec;white-space:nowrap}
table.tb td:first-child{text-align:left;font-weight:600}
table.tb tr.tot td{border-top:2px solid #ddd9cd;border-bottom:none;font-weight:700;background:#faf9f6}
table.tb tr.ref td{background:#f7f6f2}
table.tb tr.ref td:first-child{font-style:italic}
table.tb tr.clic{cursor:pointer}
table.tb tr.fam{cursor:pointer}
table.tb tr.fam td:first-child::before{content:'\25B8';display:inline-block;width:13px;
color:#b6b2a4;transition:transform .15s}
table.tb tr.fam.op td:first-child::before{transform:rotate(90deg)}
table.tb tr.fam.nod td:first-child::before{content:'';}
table.tb tr.det td{background:#fbfaf7;color:#55554f;font-size:10.5px}
/* Blocs de familles (boucherie trad / LS, fruits & légumes / fleurs…) :
   la ligne de bloc prend le fond secteur de la hiérarchie, ses familles
   reculent d'un cran. Une famille qui tient lieu de bloc (`blc`) reçoit la
   graisse sans le retrait. */
table.tb tr.bloc td{background:#f6f5f1;font-weight:600;border-top:1px solid #e4e1d6}
table.tb tr.fam.sousbloc td:first-child{padding-left:22px}
table.tb tr.fam.blc td{font-weight:600}
table.tb tr.det td:first-child{font-weight:400;padding-left:26px;font-style:italic}
.bar{display:inline-block;width:52px;height:6px;border-radius:3px;background:#eeece4;
position:relative;vertical-align:middle}
.bar i{position:absolute;left:0;top:0;bottom:0;border-radius:3px}
.pw{font-size:10px;color:#8a8a84}
.lnk{color:#1F4E79;text-decoration:none;border-bottom:1px dotted #9db4c8;cursor:pointer}
.lnk:hover{border-bottom-style:solid}
table.tb tr.clic:hover td{background:#f5f4ef}
table.heat{border-collapse:separate;border-spacing:2px;font-size:10px;width:100%}
table.heat td{text-align:center;padding:4px 1px;border-radius:3px;min-width:25px}
table.heat td.lbl{text-align:left;font-size:11px;font-weight:600;white-space:nowrap;padding-right:6px}
.hleg{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-top:9px;font-size:10px;color:#8a8a84}
.hleg span{display:flex;align-items:center;gap:4px}
.hleg i{width:14px;height:10px;border-radius:2px;display:inline-block}
.hleg .hlt{margin-left:auto;font-style:italic}
table.syn{border-collapse:separate;border-spacing:3px;font-size:12px;width:100%}
table.syn td{padding:4px 8px}
table.syn td.dot{text-align:center;border-radius:4px;font-weight:700;width:52px}
table.syn td.hd{color:#96968f;font-size:10.5px;text-align:center}
table.syn td.td{color:#7a7a74;font-size:11px}
.recap{display:grid;grid-template-columns:repeat(auto-fit,minmax(215px,1fr));gap:10px;margin-top:12px}
.rcol{background:#f7f6f2;border-radius:8px;padding:10px 12px}
.rcol .rt{font-size:9.5px;color:#96968f;text-transform:uppercase;letter-spacing:0.5px;margin-bottom:6px}
.rl{font-size:12px;margin:2px 0}
.pl{display:flex;align-items:center;gap:6px;margin-top:5px}
.pn{font-size:11.5px;font-weight:600;flex:0 0 40%;white-space:nowrap;overflow:hidden;
text-overflow:ellipsis}
.pb{flex:1 1 auto;height:6px;border-radius:3px;background:#eeece4;position:relative}
.pb i{position:absolute;left:0;top:0;bottom:0;border-radius:3px}
.pv{font-size:11px;font-weight:600;white-space:nowrap}
.ps{font-size:10px;color:#96968f;margin-left:0;padding-left:1px}
.leg{display:flex;gap:14px;margin-top:6px;font-size:9.5px;color:#96968f;flex-wrap:wrap}

/* Choix de la portée du détail par famille */
vertical-align:-2px;margin-right:2px}
.fbtn{background:#fff;border:none;border-right:1px solid #ddd9cd;font:inherit;font-size:10.5px;
color:#55554f;padding:3px 9px;cursor:pointer;white-space:nowrap}
.fbtn:last-child{border-right:none}
.fbtn:hover{background:#f2f1ec}
.fbtn.on{background:#1F4E79;color:#fff;font-weight:600}
.fbtn.on:hover{background:#1F4E79}
/* Rappel de la portée dans le sous-titre d'une carte : lecture seule. */
.ftag{color:#3f3f3a;font-weight:600;background:#f2f1ec;border-radius:4px;padding:1px 6px}




/* Avertissement de période incomplète au-dessus des tableaux */
.avert{background:#fdf6e3;border:1px solid #e0c060;border-left-width:3px;border-radius:6px;
padding:8px 12px;margin-bottom:9px;font-size:11.5px;line-height:1.55;color:#6b5310}
.avert b{color:#4a3808}
.avert b:first-child{display:block;margin-bottom:2px;font-size:12px}

/* Vue magasin : trois blocs pleine largeur.
   Le graphique y occupe plus de hauteur qu'ailleurs, le tableau qui le suit
   étant compact — c'est la courbe qui porte la lecture. */
.grid1{display:grid;grid-template-columns:1fr;gap:18px}
.grid1 .chartbox{height:400px}
/* Tableaux de secteurs */
table.ts th.fut,table.ts td.fut{background:#faf9f6;color:#55554f}
table.ts td .mi{display:block;font-style:normal;font-size:9.5px;margin-top:1px;opacity:.85}
table.ts td .mi.g{color:#0ca30c}table.ts td .mi.r{color:#d03b3b}table.ts td .mi.n{color:#8a8a84}
table.ts tr.ref{background:#faf9f6;font-weight:600}
/* Ligne d'univers : au-dessus des secteurs qu'elle regroupe, sans être un
   total général — un fond intermédiaire et un filet la situent. */
/* ---------- trois niveaux de lecture, dans tous les tableaux ----------

   Univers, secteur, rayon. La distinction se fait par le fond et par le
   retrait du libellé, jamais par la couleur du texte : les colonnes de
   chiffres portent déjà du vert et du rouge, une troisième couleur les
   rendrait illisibles.

   Les mêmes règles valent pour les quatre familles de tableaux de la page —
   `tb` pour le classement, `ts` pour les trois blocs thématiques, `bilan`
   pour la synthèse, `heat` pour la heatmap — afin qu'une ligne d'univers ait
   partout le même poids visuel. */
table.tb tr.univ td,
table.ts tr.univ td,
table.bilan tr.univ td,
table.heat tr.univ td.lbl{background:#eceae3;font-weight:700;
border-top:1px solid #d8d5cb}

table.tb tr.sect td,
table.ts tr.sect td,
table.bilan tr.sect td,
table.heat tr.sect td.lbl{background:#f6f5f1;font-weight:600}

/* Un secteur qui n'a pas de rayon en dessous termine sa branche : il se lit
   comme une feuille et reste sur blanc, exactement comme les rayons du
   tableau de référence. Seuls les niveaux qui en regroupent d'autres portent
   un fond. */
table.tb tr.sect.feuille:not(.univ) td,
table.ts tr.sect.feuille:not(.univ) td,
table.bilan tr.sect.feuille:not(.univ) td{background:#fff}

/* Matrices de rupture : le fond des cellules porte déjà la grille de couleur
   du taux et des euros. On ne le remplace donc que sur la première colonne,
   celle du libellé — sinon le niveau de la ligne effacerait la lecture qui
   fait tout l'intérêt du tableau. */
table.rupm tr.univ td.l{background:#eceae3;font-weight:700;
border-top:1px solid #d8d5cb}
table.rupm tr.sect td.l{background:#f6f5f1;font-weight:600}
table.rupm tr.univ td.cum{font-weight:700}
table.rupm tr.univ td:first-child{padding-left:6px}
table.rupm tr.sect td:first-child{padding-left:14px}
table.rupm tr.sous td:first-child{padding-left:22px}

/* Retrait du libellé : l'univers à ras, le secteur d'un cran, le rayon de
   deux. C'est ce décalage qui donne l'arborescence, le fond ne fait que la
   souligner. */
table.tb tr.univ td:first-child,
table.ts tr.univ td:first-child,
table.bilan tr.univ td:first-child{padding-left:9px}
table.tb tr.sect td:first-child,
table.ts tr.sect td:first-child,
table.bilan tr.sect td:first-child{padding-left:20px}
table.tb tr.clic:not(.sect):not(.univ) td:first-child,
table.ts tr.sous td:first-child{padding-left:32px;font-weight:400}
.pas{display:inline-block;width:8px;height:8px;border-radius:2px;margin-right:7px;vertical-align:0}
/* Synthèse en constats */
ul.syn{list-style:none;margin:0;padding:0}
ul.syn li{display:flex;align-items:baseline;gap:8px;padding:9px 0;font-size:13px;
border-bottom:1px solid #f2f1ec;line-height:1.5}
ul.syn li:last-child{border-bottom:none}
ul.syn li b{flex:0 0 118px;font-size:10.5px;text-transform:uppercase;letter-spacing:.5px;
color:#8a8a84;font-weight:600}
ul.syn li.r{color:#1a1a1a}ul.syn li.g{color:#1a1a1a}
.vide{font-size:13px;color:#8a8a84;margin:0}


/* Les rayons sont un détail : plus discrets et plus resserrés que les lignes
   de secteur, pour laisser la hauteur au graphique. Le retrait et la graisse
   viennent du bloc des trois niveaux, plus haut — les redéclarer ici les
   contredisait, la ligne de rayon revenant au même retrait que l'univers. */
/* Les rayons se lisent comme dans le tableau de référence : même corps, même
   couleur, seul le retrait les distingue. Les réduire créait un troisième
   niveau typographique que la référence n'a pas. */
table.ts tr.sous td{padding-top:3px;padding-bottom:3px}
table.ts tr.sous:hover td{background:#faf9f6}
/* Tableaux de la vue magasin : compacts. */
table.ts{font-size:10.5px}
table.ts td{padding:4px 6px}
table.ts th{padding-top:5px;padding-bottom:5px}


@media print{
/* --- vue magasin à l'impression ---
   Les graphiques par groupe portent six séries : à deux par ligne ils
   deviennent illisibles. On les passe pleine largeur et on leur donne de
   la hauteur, quitte à occuper une page de plus. */
/* Les trois blocs thématiques occupent la largeur ; les analyses restent
   sur deux colonnes pour tenir quatre graphiques par page. */
.vmag .grid1{grid-template-columns:1fr}
.vmag .comp .grid2{grid-template-columns:1fr 1fr;gap:2.5mm}
.vmag .card{page-break-inside:avoid;break-inside:avoid}
/* Quatre cartes par page : coupure forcée après la quatrième et la huitième. */
.vmag .comp .grid2>.card:nth-child(4){page-break-after:always;break-after:page}
/* La synthèse suit les deux derniers graphiques sur la même page. */
.vmag .comp .grid2{page-break-after:auto;break-after:auto}
.vmag .card h3{font-size:10.5px}
.vmag .card .sub{font-size:8px}
/* Le bandeau de KPI tient sur une ligne plutôt que deux */
.vmag .kpis{grid-template-columns:repeat(8,1fr);gap:1.2mm}
.vmag .kpi{padding:1.4mm 1.8mm}
.vmag .kpi .l{font-size:6.5px;letter-spacing:.1px}
.vmag .kpi .v{font-size:13px}
.vmag .kpi .d{font-size:6.5px}
/* La zone surlignée n'a pas de sens quand elle est vide de réalisé */
.vmag .p1{page-break-after:auto}

@page{size:A4 landscape;margin:7mm}

/* Les règles de vue s'accrochent à une classe, pas au body : en impression
   groupée, une page magasin (.vmag) et six fiches (.vfiche) cohabitent dans
   le même document, chacune dans son conteneur. En affichage normal, la
   classe reste posée sur le body et rien ne change — vérifié : aucune
   bascule de cascade sur les 66 déclarations concernées. */
*{-webkit-print-color-adjust:exact !important;print-color-adjust:exact !important;
color-adjust:exact !important}
body{background:#fff}
.topbar{display:none}
.wrap{max-width:none;padding:0}
.phead{display:flex;justify-content:space-between;align-items:baseline;
margin:0 0 2mm;padding-bottom:1.2mm;border-bottom:1px solid #ddd9cd;flex:0 0 auto}
.phead .ph1{font-size:12px;font-weight:600;letter-spacing:-0.2px}
.phead .ph2{font-size:8px;color:#7a7a74}
.card{border:1px solid #e0ded6;padding:1.8mm 2.2mm;margin-bottom:1.4mm;page-break-inside:avoid}
.card h3{font-size:9.5px;margin-bottom:0.5mm}
.card .note{font-size:7px;margin:0 0 1.2mm}
.fh{margin-bottom:1.5mm}
.fh .f1{font-size:11px}
.fh .f2{font-size:7.5px}
.kb{grid-template-columns:repeat(4,1fr);gap:1.5mm;margin-bottom:1.5mm}
.kbloc{padding:1.2mm 1.6mm}
.kbloc .kt{font-size:6.5px}
.kbloc .kv{font-size:10.5px;margin:0.3mm 0}
.kbloc .kd{font-size:7px;line-height:1.3}
.fgrid{display:grid;grid-template-columns:1fr 1fr;gap:0 4mm}
.ftt{font-size:7px;margin:0.8mm 0 0.3mm}
.fbox,.fbox.sm{height:22mm}
.leg{font-size:6px;margin-top:0.8mm}
.grid2{grid-template-columns:1fr 1fr;gap:2.5mm}
.grid3{grid-template-columns:1fr 1fr 1fr;gap:2.5mm}
.grid3>:nth-child(3){grid-column:auto}
canvas{max-width:100%!important;max-height:100%!important}
table.tb{font-size:6.8px}
table.tb td{padding:0.7mm 1mm}
table.tb th{padding:0.6mm 1mm;font-size:6.3px}
table.tb th.grp{font-size:6.3px}
table.tb th.sep,table.tb td.sep{padding-left:1.8mm}
table.heat{font-size:6px;border-spacing:1px}
table.heat td{padding:0.6mm 0;min-width:0}
table.heat td.lbl{font-size:6.5px;padding-right:1mm}
.hleg{font-size:6px;margin-top:1mm}
.hleg i{width:9px;height:6px}
table.syn{font-size:6.5px;border-spacing:1.5px}
table.syn td{padding:0.5mm 1mm}
table.syn td.dot{width:auto}
.kpis{grid-template-columns:repeat(6,1fr);gap:1.5mm;margin-bottom:1.5mm}
.kpi{padding:1.5mm}
.kpi .v{font-size:12px}
.kpi .l,.kpi .d{font-size:6.5px}
.recap{gap:1.5mm;margin-top:1.5mm}
.rcol{padding:1.5mm}
.rl{font-size:6.5px}
h2.sec{font-size:11px;margin:2mm 0 1.5mm;padding:1.2mm 2mm}
/* --- vues secteur et rayon : deux pages pleines --- */
.vfiche .p1{height:194mm;display:flex;flex-direction:column;overflow:hidden;
page-break-after:always;page-break-inside:avoid}
.vfiche .p1>.card{flex:0 0 auto}
/* Les quatre graphiques occupent tout l'espace que la page leur laisse : la
   carte grandit, la grille se partage en deux rangées égales, et chaque
   boîte prend la hauteur de sa rangée. C'est ce qui donne des tracés hauts
   sur une fiche légère et les resserre sur une fiche chargée, sans jamais
   laisser de blanc. Chart.js remesure au moment où la feuille d'impression
   s'applique — voir reflow() dans engine.js. */
.vfiche .p1>.fiche{flex:1 1 auto;display:flex;flex-direction:column;min-height:0}
.vfiche .fiche .fgrid{flex:1 1 auto;min-height:0;grid-template-rows:1fr 1fr;gap:0 4mm}
.vfiche .fiche .fg{display:flex;flex-direction:column;min-height:0}
.vfiche .fiche .fbox,.vfiche .fiche .fbox.sm{height:0;flex:1 1 auto;min-height:0}
.vfiche .comp{page-break-before:always}

  /* Impression groupée : chaque vue démarre sur une page neuve. La première
     ne prend pas de saut, sans quoi le document s'ouvrirait sur une page
     blanche. */
  .vmag+.vmag,.vmag+.vfiche,.vfiche+.vmag,.vfiche+.vfiche{
  page-break-before:always;break-before:page}

  /* Chaque carte de rupture ouvre sa page : la première porte les taux et la
     matrice, la seconde la liste des références. Vingt lignes au maximum,
     donc une page suffit.

     Les sélecteurs portent les deux classes — `.rupd.rupr` et non `.rupr` —
     pour passer devant les styles d'écran de `table.rupd`, qui sont écrits
     plus bas dans le fichier : à spécificité égale, c'est la déclaration la
     plus basse qui l'emporte, media query ou pas. */
  .ruptpage{page-break-before:always;break-before:page}

  /* Matrice des rayons Drive : jusqu'à vingt-six lignes et une colonne par
     semaine. Le `.tw` en tête du sélecteur sert au même but que la double
     classe ci-dessous — passer devant les styles d'écran écrits plus bas. */
  /* La hauteur rendue par le graphique va au tableau. La police de la matrice
     est plafonnée par la largeur, pas par la hauteur : à 33 semaines, les
     colonnes réclament 269 mm des 283 disponibles à 7,4 px, et débordent à 8.
     On s'arrête donc à 7,4. */
  .chartbox.rupch,.vfiche .chartbox.rupch{height:24mm}
  .tw table.rupm{font-size:6.8px}
  .tw table.rupm th{font-size:5.9px;padding:0.45mm 0.4mm}
  .tw table.rupm td{padding:0.45mm 0.4mm;line-height:1.18}
  /* `div.rupleg` et non `.rupleg` : la règle d'écran est écrite plus bas dans
     le fichier et l'emporterait à spécificité égale. La balise a changé de
     `p` en `div` avec l'arrivée de la bande de dégradé, ce qui avait rendu
     l'ancien sélecteur inopérant. Calé sous les en-têtes de la matrice, pour
     que la légende accompagne le tableau sans le concurrencer. */
  div.rupleg{font-size:5.6px;margin-top:1mm;gap:1.6mm}
  div.rupleg .bar{flex-basis:26mm;height:1.8mm}
  div.rupleg .ti{font-size:5px}
  div.rupleg .ti.eu{margin-left:2.5mm;padding-left:2.5mm}

  .tw table.rupd.rupr{font-size:6.4px}
  .tw table.rupd.rupr th{font-size:6px;padding:0.8mm 1mm}
  .tw table.rupd.rupr td{padding:0.45mm 1mm;line-height:1.25}
  /* Le code EAN passe à la suite du libellé : sur sa propre ligne il doublait
     la hauteur de chaque ligne du tableau, et vingt références ne tenaient
     plus sur la page. */
  .tw table.rupd.rupr td.ean{font-size:5.6px}
  /* `.card .rupdef` et non `.rupdef` : la règle d'écran est écrite plus bas
     dans le fichier et l'emporterait à spécificité égale. Calée un cran sous
     la note de la carte, qui est à 7 px. */
  .card .rupdef{margin-top:1.6mm;padding-top:1.2mm}
  .card .rupdef p{font-size:6px;margin-bottom:0.4mm;line-height:1.4}
  .tw table.rupd.rupr th{white-space:nowrap}
  .tw table.rupd.rupr td{text-align:center}
  .tw table.rupd.rupr td.l{text-align:left}
  .tw table.rupd.rupr tr.grp td{font-size:5.6px;padding:0.5mm 1mm}
  .tw table.rupd .sec,.tw table.rupm .sec{font-size:inherit}
.vfiche .comp table.tb{font-size:7.6px}
.vfiche .comp table.tb td{padding:1mm 1.2mm}
.vfiche .comp table.tb th{font-size:7px}
.vfiche .comp .pn{font-size:7.5px}
.vfiche .comp .pv{font-size:7.5px}
.vfiche .comp .ps{font-size:6.5px}
.vfiche .comp .pl{margin-top:1mm;gap:1.5mm}
.vfiche .comp .rcol{padding:1.5mm 2mm}
.lnk{display:none}
.vfiche .comp table.heat{font-size:6.5px;border-spacing:1.5px}
.vfiche .comp table.heat td{padding:1mm 0}
.vfiche .comp table.heat td.lbl{font-size:7.5px}
.vfiche .comp table.syn{font-size:7.5px}
.vfiche .comp .hleg{font-size:6.5px;margin-top:1.5mm}
.vfiche .card{page-break-inside:avoid}

color:#7a7a74;padding:0;font-weight:400}
.grid1{gap:2mm}ul.syn li{padding:1.1mm 0;font-size:8.5px}
ul.syn li b{flex-basis:20mm;font-size:7px}

  /* Filet : si le remesurage n'a pas eu lieu — navigateur qui n'émet pas
     l'événement, ou qui compose la page avant de l'avoir traité — le canevas
     garde sa taille d'écran et le graphique n'occupe qu'une partie de sa
     boîte. On le force à la remplir. Quand le remesurage a bien eu lieu,
     cette règle ne change rien : les deux tailles coïncident déjà. */
  .fbox canvas,.chartbox canvas{width:100% !important;height:100% !important}

  /* ---------- hauteur des graphiques ----------
     Valeurs appliquées à l'impression de la vue affichée. Elles sont
     reprises à l'identique dans engine.js (hauteurImpression) pour calculer
     le format de capture : toute modification ici doit y être répercutée. */
  .chartbox{height:34mm}
  .chartbox.small{height:28mm}
  .chartbox.mini{height:24mm}
  .vfiche .chartbox,.vfiche .chartbox.small,
  .vfiche .chartbox.mini{height:38mm}
  /* Les trois blocs thématiques tiennent chacun sur une page. Le calcul :
     194 mm utiles, moins le titre, le chapeau, la légende et le cadre, soit
     environ 173 mm pour le graphique et le tableau. Le tableau de démarque
     est le plus long — vingt lignes avec le détail des rayons frais — et
     c'est lui qui fixe la contrainte.

     Le graphique descend à 56 mm et les lignes se resserrent : l'ensemble
     retombe à 174 mm, avec vingt millimètres de réserve pour les libellés
     qui reviendraient à la ligne. */
  .vmag .grid1 .chartbox{height:56mm}
  .vmag table.ts{font-size:8.5px}
  .vmag table.ts td{padding:0.9mm 1.2mm}
  .vmag table.ts th{padding-top:1mm;padding-bottom:1mm;font-size:7px}
  .vmag table.ts tr.sous td{padding-top:0.7mm;padding-bottom:0.7mm}

  /* Deux cartes qui se lisent ensemble restent sur la même page : promotions
     et boutiques, classement et heatmap. */
  .vmag .attele{page-break-inside:avoid;break-inside:avoid}

  /* Le classement garde l'espacement commun aux tableaux imprimés : resserrer
     ses lignes gagnait cinq millimètres et coûtait la lisibilité de vingt-huit
     lignes de chiffres. La place se prend ailleurs — le sous-titre de la
     heatmap a été supprimé, il décrivait une lecture que la légende de
     couleurs donne déjà. */
  .vmag table.heat td{font-size:8px;padding:0.7mm 0.6mm}
  .vmag table.heat td.lbl{font-size:8px}
  /* La note de bas de tableau ne s'imprime pas sur la vue magasin : c'est un
     rappel de méthode, utile quand on découvre le tableau à l'écran, inutile
     sur une feuille qu'on relit en réunion. Les six millimètres gagnés font
     tenir la heatmap sous le classement.

     Elle reste affichée à l'écran, et sur les fiches de secteur à
     l'impression, où la contrainte de page ne se pose pas. */
  .vmag p.note.bas{display:none}

  /* Table des boutiques : la mention explicative passe en bout de libellé au
     lieu d'occuper une seconde ligne, ce qui divise la hauteur par deux. */
  .vmag table.tb.bout{font-size:8.5px}
  .vmag table.tb.bout td{padding:0.7mm 1.2mm}
  .vmag table.tb.bout th{padding-top:0.8mm;padding-bottom:0.8mm;font-size:7px}
  .vmag table.tb.bout td.l em{display:inline;margin:0 0 0 6px;font-size:7.5px}
  /* Quatre graphiques par page, en deux rangées de deux.

     À 74 mm, deux rangées réclamaient 192,5 mm sur les 194 disponibles : la
     moindre étiquette d'axe qui revient à la ligne faisait basculer la
     seconde rangée sur la page suivante, et la page n'en portait plus que
     deux. À 64 mm il reste vingt millimètres de réserve. */
  .vmag .comp .grid2 .chartbox{height:64mm}

  /* Le cadre suit ses proportions, l'image le remplit exactement. */
}

/* Bilan chiffré remplaçant la synthèse à pastilles */
table.bilan{font-size:11px}
table.bilan td{padding:6px}
table.bilan .mi{display:block;font-style:normal;font-size:9.5px;color:#8a8a84;margin-top:1px}
table.bilan tr:hover td{background:#faf9f6}
table.bilan tr.ref td{background:#f5f4ef;font-weight:600;border-top:1px solid #ddd9cd}

/* --- ruptures Drive --- */
.tw{overflow-x:auto}
table.rupm,table.rupd{width:100%;border-collapse:collapse;font-size:10.5px}
table.rupm th,table.rupd th{font-size:10px;font-weight:600;color:#8a8a84;
text-transform:uppercase;letter-spacing:.3px;padding:5px 4px;text-align:center;
border-bottom:1px solid #ddd9cd;white-space:nowrap}
table.rupm td,table.rupd td{padding:5px 4px;text-align:center;
border-bottom:1px solid #f0eee7}
table.rupm .l,table.rupd .l{text-align:left;white-space:nowrap}
table.rupm th.l,table.rupd th.l{text-align:left}
table.rupm .cum,table.rupm th.cum{text-align:right;padding-right:8px;
border-left:1px solid #ddd9cd}
table.rupm tr.tot td{font-weight:600;border-top:1px solid #ddd9cd;background:#f5f4ef}
/* Ligne de repère : présente mais en retrait, elle ne doit pas se lire comme
   une ligne du périmètre. */
table.rupm tr.ref td{border-top:1px solid #ddd9cd;background:#faf9f6;color:#8a8a84}
table.rupm tr.ref td.l{font-style:italic}
/* Écart au magasin : convention du reste du rapport, un taux de rupture
   au-dessus de la référence est défavorable. */
/* Saisie des objectifs d'évolution */
table.pm.evo{width:100%;border-collapse:collapse;font-size:12.5px;margin-top:14px}
table.pm.evo th{font-size:10.5px;font-weight:600;color:#8a8a84;text-transform:uppercase;
letter-spacing:.4px;padding:7px 8px;text-align:right;border-bottom:1px solid #ddd9cd;
white-space:nowrap}
table.pm.evo th.l,table.pm.evo td.l{text-align:left}
table.pm.evo td{padding:5px 8px;text-align:right;border-bottom:1px solid #f0eee7;
white-space:nowrap}
table.pm.evo tr.grp td{background:#f5f4ef;font-weight:600;border-top:1px solid #ddd9cd}
table.pm.evo td.g{color:#0a8a0a}
table.pm.evo td.r{color:#c23434}
table.pm.evo input{width:66px;text-align:right;font:inherit;font-size:12.5px;
border:1px solid #ddd9cd;border-radius:6px;padding:3px 6px}
table.pm.evo input:focus{outline:2px solid #1F4E79;outline-offset:1px}
table.pm.evo .u{color:#8a8a84;margin-left:4px}

/* Barre de raccourcis des objectifs. */
/* Réglages qui gouvernent le tableau sans y figurer. */
.opt-bloc{display:flex;align-items:flex-start;gap:22px;flex-wrap:wrap;
background:#f7f6f2;border:1px solid #e4e2da;border-radius:9px;
padding:12px 14px;margin:0 0 12px}
.opt{display:flex;align-items:flex-start;gap:9px;flex:1 1 380px;
font-size:12.5px;color:#55554f;cursor:pointer;line-height:1.5}
.opt input{margin:2px 0 0;accent-color:#1F4E79;cursor:pointer}
.opt b{display:block;color:#1a1a1a;font-size:13px;margin-bottom:2px}
.evo-barre{display:flex;align-items:center;gap:10px;flex-wrap:wrap;
background:#f7f6f2;border:1px solid #e4e2da;border-radius:9px;
padding:10px 14px;margin:0 0 12px}
.evo-barre .lb{font-size:12.5px;font-weight:600;color:#52514e}
.evo-barre input{width:82px;font:inherit;font-size:13px;text-align:right;
border:1px solid #ddd9cd;border-radius:6px;padding:5px 8px}
.evo-barre .u{font-size:12.5px;color:#8a8a84;margin-left:-4px}
table.pm.evo tr.grp input{width:74px;text-align:right}
/* Le quota cible est la conséquence du quota saisi juste à gauche : même
   traitement visuel que la saisie, pour qu'on lise les deux ensemble. */
table.pm.evo td.qv{font-weight:600;color:#1a1a1a}
/* Effort restant : ni bon ni mauvais en soi, c'est une charge de travail.
   Un fond neutre plutôt qu'un code couleur, qui suggérerait une performance. */
table.pm.evo td.eff{font-weight:600;background:#f2f1ea;color:#52514e}
/* Ligne d'univers : au-dessus des secteurs, c'est le premier niveau
   d'arbitrage — frais, sec, non-alimentaire. */
table.pm.evo tr.univ td{background:#efeee8;font-weight:700;
border-top:1px solid #ddd9cd;padding-top:9px;padding-bottom:9px}
table.pm.evo input::placeholder{color:#b5b3ac;font-style:italic}
.evo-barre .sep{flex:1 1 auto}
.note.alerte{background:#fdf0ee;border-left:3px solid #d03b3b;color:#8c1f1f;
padding:9px 12px;border-radius:8px;margin:0 0 12px}
table.pm.evo tr.grp td.ind{font-size:11px;color:#9a978f;font-style:italic}
/* La barre d'enregistrement reste accessible : la page fait vingt-deux
   lignes de saisie, revenir en bas à chaque fois est une friction inutile. */
#v-param .go{position:sticky;bottom:0;background:#f5f5f2;
padding:12px 0;border-top:1px solid #e4e2da;margin-top:18px;z-index:5}
p.note.bas{margin-top:9px}
.note.vides{margin:0 0 16px;padding:9px 12px;background:#f7f6f2;border-radius:8px;
border-left:3px solid #ddd9cd}
table.tb.bout td.l em{display:block;font-style:normal;font-size:10.5px;color:#9a978f;margin-top:1px}
table.tb.bout tr.tot td{font-weight:600;border-top:1px solid #ddd9cd;background:#f5f4ef}
table.rupm td.ec{font-weight:600}
table.rupm td.ec.mv{color:#8c1f1f}
table.rupm td.ec.bn{color:#1f5c0b}
table.rupm tr.ref td.cum{font-style:italic;font-weight:400;color:#8a8a84}
table.rupd td{text-align:right}
table.rupd .sec{text-align:left;color:#8a8a84;font-size:10.5px}
/* Dans les tableaux de récurrence, la colonne Rayon garde la taille du
   tableau : posée en dur, elle ne suivait pas le resserrement et se
   retrouvait plus grosse que la colonne Référence qu'elle accompagne. */
table.rupr .sec{font-size:inherit}
/* Le graphique de rupture est un repère de tendance : le détail se lit dans
   la matrice juste dessous, qui mérite la place. */
.chartbox.rupch{height:190px}
table.rupd tr:hover td{background:#faf9f6}
/* Bande de dégradé : la couleur des cellules, dépliée de 0 à 8 %, avec les
   deux repères qui structurent la lecture. */
.rupleg{font-size:9px;color:#8a8a84;margin:9px 0 0;display:flex;
align-items:center;gap:8px;flex-wrap:wrap}
.rupleg .bar{position:relative;flex:0 1 220px;height:9px;border-radius:3px;
border:1px solid #ddd9cd}
.rupleg .bar i{position:absolute;top:-2px;bottom:-2px;width:1px;background:#8a8a84}
.rupleg .bar i.t2{left:25%}
.rupleg .bar i.t3{left:37.5%}
.rupleg em{font-style:normal;color:#a3a29c}
/* Deux grilles, deux bandes : l'intitulé sépare les lectures. */
.rupleg .ti{font-weight:600;color:#6a6a64;text-transform:uppercase;
font-size:8.5px;letter-spacing:.4px}
.rupleg .ti.eu{margin-left:18px;padding-left:18px;border-left:1px solid #e0ded6}

/* Chaque tableau ne porte qu'une valeur par cellule : une seule ligne. */
table.rupm.rupe td{font-variant-numeric:tabular-nums}
table.rupd .mg{color:#8a8a84}
table.rupd tr.tot td{font-weight:600;border-top:1px solid #ddd9cd;background:#f5f4ef}
table.rupr td.l{max-width:280px}
/* L'EAN se recopie dans le back-office : chasse fixe, pour que les chiffres
   s'alignent et se relisent sans erreur. */
table.rupr td.ean{color:#8a8a84;font-size:10px;letter-spacing:.2px;
font-family:Consolas,"Courier New",monospace;white-space:nowrap}
/* Intitulés sur une seule ligne, et chiffres centrés sous leur intitulé :
   alignés à droite comme des montants, ils se décalaient de l'en-tête et
   la colonne devenait pénible à suivre du regard. */
table.rupr th{white-space:nowrap;vertical-align:bottom}
/* Légende sous le tableau : une entrée par colonne, l'intitulé en gras pour
   qu'on retrouve la colonne d'un coup d'œil. */
.rupdef{margin:10px 0 0;border-top:1px solid #ecebe4;padding-top:9px}
/* Un cran sous la note de la carte, qui est à 11,5 px : la légende accompagne
   le tableau, elle ne se lit pas avant lui. */
.rupdef p{margin:0 0 4px;font-size:10.5px;color:#8a8a84;line-height:1.5}
.rupdef p:last-child{margin-bottom:0}
.rupdef b{color:#6a6a64;font-weight:600}
table.rupr td{text-align:center}
table.rupr td.l{text-align:left}

/* --- listes de la barre de contrôle --- */
.psel{display:inline-flex;align-items:center;gap:7px}
.psel .plab{margin:0}
.psel select{font:inherit;font-size:12.5px;line-height:1.45;color:#1a1a1a;background:#fff;
border:1px solid #ddd9cd;border-radius:7px;padding:5px 26px 5px 10px;cursor:pointer;
appearance:none;-webkit-appearance:none;
background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath fill='%238a8a84' d='M0 0h10L5 6z'/%3E%3C/svg%3E");
background-repeat:no-repeat;background-position:right 9px center;background-size:9px 5px}
.psel select:hover{border-color:#c3c2b7}
.psel select optgroup{font-style:normal;font-weight:600;color:#8a8a84;
font-size:11px;text-transform:uppercase;letter-spacing:.4px}
.psel select option{font-weight:400;color:#1a1a1a;text-transform:none;
letter-spacing:0}
.psel select option:disabled{color:#b5b3ac}
/* Réglage non standard : le contour et l'encre changent, pour qu'un choix
   laissé en place se voie sans avoir à le relire. */
/* Millésimes de comparaison : un menu à cocher. Le bouton reprend l'aspect
   des listes voisines pour que la barre garde un seul vocabulaire visuel. */
.psel.menu{position:relative;display:inline-flex;align-items:center;gap:7px}
.pmenu{font:inherit;font-size:12.5px;line-height:1.45;color:#1a1a1a;background:#fff;
border:1px solid #ddd9cd;border-radius:7px;padding:5px 26px 5px 10px;cursor:pointer;
text-align:left;min-width:96px;
background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath fill='%238a8a84' d='M0 0h10L5 6z'/%3E%3C/svg%3E");
background-repeat:no-repeat;background-position:right 9px center;background-size:9px 5px}
.pmenu:hover{border-color:#c3c2b7}
.pmenu:focus-visible{outline:2px solid #1F4E79;outline-offset:1px}
/* Le panneau est sorti du flux par un style posé sur l'élément : aucune
   règle de feuille ne peut le remettre dans la ligne, ce qui aurait fait
   grandir la rangée et repoussé la seconde ligne de réglages. */
.pmenu-liste{background:#fff;border:1px solid #ddd9cd;border-radius:9px;padding:6px;
box-shadow:0 6px 18px rgba(0,0,0,.10);min-width:132px}
.pmenu-liste[hidden]{display:none}
.pmi{display:flex;align-items:center;gap:8px;padding:6px 9px;border-radius:6px;
font-size:12.5px;color:#1a1a1a;cursor:pointer;white-space:nowrap}
.pmi:hover{background:#f5f4ef}
.pmi input{margin:0;cursor:pointer;accent-color:#1F4E79}
@media print{.psel.menu{display:none}}
.psel select.perso{border-color:#C55A11;color:#8a3d0b;background-color:#fffaf4}
.psel select:focus{outline:2px solid #1F4E79;outline-offset:1px}
table.rupr tr.chr td{background:#fdf6ec}
table.rupr tr.chr td.l{font-weight:600}
table.rupr .fort{font-weight:600}
/* Dossier mémorisé */
.dz{display:flex;align-items:center;gap:14px;flex-wrap:wrap;background:#fff;
border:1px solid #e0ded6;border-radius:11px;padding:16px 18px}
.dz.ok{border-color:#0ca30c;background:#fbfdfb}
.dz-txt{flex:1 1 260px;min-width:0}
.dz-txt b{display:block;font-size:14px;font-weight:600;margin-bottom:3px}
.dz-txt span{display:block;font-size:12.5px;color:#8a8a84;line-height:1.5}
.dz .btn{flex:0 0 auto}

/* Rappel de l emplacement habituel du dossier */
.chemin{display:flex;align-items:center;gap:11px;flex-wrap:wrap;margin-top:10px;
padding:9px 14px;background:#faf9f6;border:1px solid #eeece5;border-radius:8px}
.chemin #ch-val{flex:1 1 260px;font:inherit;font-size:12.5px;
font-family:Consolas,"Courier New",monospace;border:1px solid #ddd9cd;
border-radius:7px;padding:5px 10px;background:#fff;color:#1a1a1a;min-width:0}
.ch-lab{font-size:10.5px;text-transform:uppercase;letter-spacing:.7px;color:#8a8a84;
font-weight:600;flex:0 0 auto}
.chemin code{flex:1 1 240px;font-family:Consolas,"Courier New",monospace;font-size:11.5px;
color:#3a3a36;overflow-x:auto;white-space:nowrap;padding:2px 0}
.chemin .btn{flex:0 0 auto;padding:5px 12px;font-size:12px}
.ind{display:block;font-size:11.5px;color:#8a8a84;line-height:1.5;margin-top:5px}

/* Recours au dépôt manuel, discret */
.secours{font-size:12px;color:#8a8a84;margin:12px 0 0}
.secours a{color:#55554f;text-decoration:underline;text-underline-offset:2px;cursor:pointer}
.secours a:hover{color:#B8001A}

/* Retour visuel pendant un glisser-déposer sur l écran d import */
#v-depot.survol{outline:2px dashed #B8001A;outline-offset:8px;border-radius:10px}

/* Écran de connexion */
#ecran-connexion{display:none;position:fixed;inset:0;z-index:200;background:#fff}
#ecran-connexion.on{display:block}
.conn{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:32px 24px}
.conn-in{width:100%;max-width:380px}
.conn-marque{display:flex;align-items:center;gap:9px;font-family:"Bricolage Grotesque","Segoe UI",system-ui,sans-serif;
font-weight:700;font-size:15px;letter-spacing:-0.4px;color:#0E0E0E;margin-bottom:30px}
.conn-in h1{font-family:"Bricolage Grotesque","Segoe UI",system-ui,sans-serif;
font-size:27px;font-weight:700;letter-spacing:-1px;margin:0 0 8px}
.conn-sous{font-size:13.5px;color:#6A6A6A;line-height:1.6;margin:0 0 22px}
.conn-in .f{width:100%}
.conn-in label.f{margin-bottom:5px}
.conn-lien{font-size:13px;color:#6A6A6A;margin:16px 0 0;text-align:center}
.conn-lien a{color:#B8001A;text-decoration:underline;text-underline-offset:2px;cursor:pointer}
.conn-note{font-size:11.5px;color:#9A9A9A;line-height:1.55;margin:26px 0 0;
padding-top:16px;border-top:1px solid #E6E4E0}
#conn-msg{margin-bottom:16px}
/* Compte dans le bandeau */
.cpt{display:flex;align-items:center;gap:10px;margin-left:14px}
.cpt-mail{font-size:11.5px;color:#6A6A6A;max-width:190px;overflow:hidden;
text-overflow:ellipsis;white-space:nowrap}
@media print{#ecran-connexion,.cpt{display:none !important}}

/* L écran de connexion suit la charte : bouton rouge, comme le reste. */
#ecran-connexion .btn{background:#CE0016;border:none;color:#fff}
#ecran-connexion .btn:hover{background:#E2001A}
#ecran-connexion .nv-mark{width:15px;height:15px;border-radius:3px;background:#E2001A;
box-shadow:5px 0 0 -1px #0E0E0E;display:inline-block}