/* ------------------------------------------------------------------
   Jetons de conception
   Palette : cahier d'école (papier, quadrillage Seyès, marge rouge)
   + armoire de brassage (couleurs de jarretières pour les catégories)
   ------------------------------------------------------------------ */
:root{
  --encre:#1B2A4A;
  --encre-clair:#3E5478;
  --papier:#FBFAF7;
  --papier-creux:#F1EFE9;
  --seyes:#B9C7DE;
  --marge:#C8102E;
  --brassage:#1E7A5F;
  --azur:#6BB6E8;
  --trait:#DCD8CE;
  --ombre:0 1px 0 rgba(27,42,74,.06), 0 6px 18px -10px rgba(27,42,74,.35);
  --mono:ui-monospace,"SF Mono","Cascadia Mono","Roboto Mono",Menlo,Consolas,"DejaVu Sans Mono",monospace;
  --texte:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",sans-serif;
  --r:10px;
  --safe-b:env(safe-area-inset-bottom,0px);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:var(--texte);
  color:var(--encre);
  background:var(--papier);
  -webkit-text-size-adjust:100%;
  -webkit-tap-highlight-color:transparent;
  overscroll-behavior-y:none;
}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer;border:none;background:none}
:focus-visible{outline:2px solid var(--marge);outline-offset:2px;border-radius:4px}

/* Quadrillage Seyès, très discret, seulement derrière l'app */
/* Fond papier brouillon : un grain fin, sans aucune ligne, pour ne pas
   rivaliser avec les séparateurs de la liste. Le bruit est produit par un
   filtre SVG en donnée intégrée — pas de fichier image à héberger. */
#app{
  min-height:100dvh;
  padding-bottom:calc(74px + var(--safe-b));
  background-color:var(--papier);
  background-image:
    radial-gradient(120% 80% at 50% 0%, rgba(180,170,150,.055), transparent 60%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='170' height='170'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='170' height='170' filter='url(%23g)' opacity='0.055'/%3E%3C/svg%3E");
  background-size:auto, 170px 170px;
  background-repeat:no-repeat, repeat;
}

/* ---------- En-tête ---------- */
.entete{
  position:sticky;top:0;z-index:30;
  background:var(--encre);
  color:var(--papier);
  padding:calc(env(safe-area-inset-top,0px) + 10px) 16px 10px;
  display:flex;align-items:center;gap:12px;
}
.entete h1{
  font:600 15px/1 var(--texte);
  margin:0;letter-spacing:.02em;flex:1;
}
.entete .sur{
  display:block;font:500 10px/1.4 var(--mono);
  letter-spacing:.16em;text-transform:uppercase;
  color:#8FA6C8;margin-bottom:4px;
}
.icone-btn{
  color:var(--papier);opacity:.75;padding:8px;margin:-8px;
  display:grid;place-items:center;
}
.icone-btn:hover{opacity:1}

/* ---------- Bandeau chrono ---------- */
.chrono-actif{
  position:sticky;top:0;z-index:29;
  background:var(--brassage);color:#fff;
  display:flex;align-items:center;gap:12px;
  padding:10px 16px;
}
.chrono-actif .pastille{
  width:9px;height:9px;border-radius:50%;background:#fff;
  animation:pulse 1.6s ease-in-out infinite;flex:none;
}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.25}}
.chrono-actif .lib{flex:1;font-size:14px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.chrono-actif .duree{font:600 17px/1 var(--mono);font-variant-numeric:tabular-nums}
.chrono-actif button{
  background:rgba(255,255,255,.16);color:#fff;border-radius:999px;
  padding:8px 14px;font-size:13px;font-weight:600;
}

/* ---------- Onglets bas ---------- */
.barre{
  position:fixed;left:0;right:0;bottom:0;z-index:40;
  display:grid;grid-template-columns:repeat(5,1fr);
  background:rgba(251,250,247,.94);
  backdrop-filter:saturate(1.4) blur(12px);
  border-top:1px solid var(--trait);
  padding-bottom:var(--safe-b);
}
.barre button{
  padding:9px 4px 8px;display:grid;justify-items:center;gap:4px;
  color:var(--encre-clair);
}
.barre button .lib{font:600 9px/1 var(--mono);letter-spacing:.04em;text-transform:uppercase}
.barre button[aria-current="page"]{color:var(--encre)}
.barre button[aria-current="page"] .lib{color:var(--marge)}
.barre svg{width:21px;height:21px;stroke-width:1.7}
.code{
  font:600 12px/1 var(--mono);letter-spacing:.04em;font-variant-numeric:tabular-nums;
  background:var(--papier-creux);border-radius:4px;padding:4px 6px;display:inline-block;
}
.lieu-titre{
  display:flex;align-items:baseline;gap:10px;margin:22px 0 4px;
  border-bottom:1px solid var(--trait);padding-bottom:6px;
}
.lieu-titre h3{margin:0;font-size:14px;font-weight:600}
.lieu-titre span{font:500 11px/1 var(--mono);color:var(--encre-clair);margin-left:auto}

/* ---------- Structure de page ---------- */
.page{padding:18px 16px 32px;max-width:720px;margin:0 auto}
.oeil{
  font:500 10px/1 var(--mono);letter-spacing:.18em;text-transform:uppercase;
  color:var(--encre-clair);margin:0 0 10px;
}
.bloc{margin-bottom:30px}
.carte{
  background:var(--papier);border:1px solid var(--trait);border-radius:var(--r);
  box-shadow:var(--ombre);
}

/* ---------- Signature : le compteur ---------- */
.compteur-zone{
  background:var(--encre);border-radius:14px;color:var(--papier);
  padding:20px 18px 18px;margin-bottom:24px;
  position:relative;overflow:hidden;
}
.compteur-zone::before{
  /* filet de marge, emprunté au cahier */
  content:"";position:absolute;inset:0 auto 0 12px;width:2px;background:var(--marge);opacity:.7;
}
.compteur-zone .oeil{color:#8FA6C8;margin-left:14px}
.compteur{display:flex;gap:4px;margin-left:14px;align-items:flex-end}
.roue{
  background:#0F1A2E;border-radius:6px;
  padding:6px 4px;min-width:38px;text-align:center;
  font:700 38px/1 var(--mono);font-variant-numeric:tabular-nums;
  box-shadow:inset 0 -6px 12px -8px #000, inset 0 1px 0 rgba(255,255,255,.08);
  overflow:hidden;
}
.roue.roule{animation:roule .34s cubic-bezier(.2,.9,.2,1)}
@keyframes roule{from{transform:translateY(-58%);opacity:.15}to{transform:translateY(0);opacity:1}}
.compteur-pied{
  margin:12px 0 0 14px;display:flex;gap:18px;flex-wrap:wrap;
  font:500 12px/1.4 var(--mono);color:#8FA6C8;
}
.compteur-pied b{color:var(--papier);font-weight:600}

/* ---------- Grille des catégories ---------- */
.grille{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}
.cat-btn{
  display:flex;align-items:center;gap:10px;text-align:left;
  background:var(--papier);border:1px solid var(--trait);border-radius:var(--r);
  padding:13px 12px;min-height:62px;box-shadow:var(--ombre);min-width:0;
  transition:transform .12s ease, box-shadow .12s ease;
}
.cat-btn:active{transform:scale(.975)}
.jarretiere{width:5px;align-self:stretch;border-radius:3px;flex:none}
.cat-btn .nom{font-size:13.5px;font-weight:600;line-height:1.25;min-width:0;overflow-wrap:anywhere}
.cat-btn .cpt{
  margin-left:auto;font:500 11px/1 var(--mono);color:var(--encre-clair);
  font-variant-numeric:tabular-nums;flex:none;
}

/* ---------- Boutons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  border-radius:999px;padding:12px 18px;font-size:14.5px;font-weight:600;
  background:var(--encre);color:var(--papier);
}
.btn.plein-large{width:100%}
.btn.fant{background:transparent;color:var(--encre);border:1px solid var(--trait)}
.btn.danger{background:transparent;color:var(--marge);border:1px solid rgba(200,16,46,.35)}
.btn:disabled{opacity:.4}

/* ---------- Journal ---------- */
.mois-titre{
  display:flex;align-items:baseline;gap:10px;margin:22px 0 8px;
  border-bottom:1px solid var(--trait);padding-bottom:6px;
}
.mois-titre h3{margin:0;font-size:15px;font-weight:600;text-transform:capitalize}
.mois-titre span{font:500 11px/1 var(--mono);color:var(--encre-clair);margin-left:auto}
.ligne{
  display:flex;gap:11px;align-items:flex-start;width:100%;text-align:left;
  padding:11px 4px;border-bottom:1px solid rgba(200,194,180,.55);
}
.ligne:active{background:var(--papier-creux)}
.ligne .jour{
  font:600 11px/1.2 var(--mono);color:var(--encre-clair);
  width:40px;flex:none;padding-top:2px;font-variant-numeric:tabular-nums;
}
.ligne .corps{flex:1;min-width:0}
.ligne .titre{font-size:14px;font-weight:600;display:flex;align-items:center;gap:7px;flex-wrap:wrap}
.ligne .titre .pt{width:8px;height:8px;border-radius:50%;flex:none}
.ligne .meta{font-size:12.5px;color:var(--encre-clair);margin-top:3px;line-height:1.45}
.ligne .meta .ref{
  font:600 11.5px/1 var(--mono);color:var(--encre);letter-spacing:.02em;
  font-variant-numeric:tabular-nums;
}
.ligne .meta .objet{display:block;margin-top:2px}
.ligne .min{font:600 12px/1.2 var(--mono);color:var(--encre);flex:none;padding-top:3px;font-variant-numeric:tabular-nums}
/* Une ligne peut porter son propre bouton : on ne peut donc pas imbriquer
   de bouton dans un bouton, la ligne devient un conteneur neutre. */
.ligne button.corps{
  background:none;border:none;padding:0;margin:0;font:inherit;color:inherit;text-align:left;
}
.mini-chrono{
  flex:none;align-self:center;width:34px;height:34px;border-radius:50%;
  border:1px solid var(--trait);background:var(--papier);
  display:grid;place-items:center;color:var(--brassage);
}
.mini-chrono:active{background:var(--papier-creux)}
.mini-chrono svg{width:15px;height:15px}
.etiq{
  display:inline-flex;align-items:center;gap:4px;vertical-align:1px;
  font:600 9.5px/1 var(--mono);letter-spacing:.06em;text-transform:uppercase;
  padding:4px 7px;border-radius:4px;white-space:nowrap;
}
.etiq svg{width:9px;height:9px;flex:none}

/* Mon travail : pastille pleine, marquée d'un crayon. */
.etiq.tache{border:1px solid transparent}

/* Demande transmise à un tiers : contour découpé, à la façon d'un ticket. */
.etiq.ticket{
  position:relative;background:transparent;border:1px solid currentColor;
  border-radius:3px;padding-left:11px;padding-right:11px;
}
/* encoches latérales : c'est ce qui fait lire « ticket » plutôt que « pastille » */
.etiq.ticket::before,.etiq.ticket::after{
  content:"";position:absolute;top:50%;width:9px;height:9px;border-radius:50%;
  background:var(--papier);transform:translateY(-50%);
}
.etiq.ticket::before{left:-5px}
.etiq.ticket::after{right:-5px}

.etiq.c-rouge{color:var(--marge);background:rgba(200,16,46,.10)}
.etiq.c-bleu{color:#2F6FB0;background:rgba(47,111,176,.13)}
.etiq.c-ambre{color:#8A5A12;background:rgba(180,118,30,.14)}
.etiq.c-vert{color:var(--brassage);background:rgba(30,122,95,.12)}
.etiq.c-gris{color:#4A535F;background:rgba(90,100,114,.14)}
.etiq.ticket.c-rouge,.etiq.ticket.c-bleu,.etiq.ticket.c-ambre,
.etiq.ticket.c-vert,.etiq.ticket.c-gris{background:transparent}
.kpi-rang.q4{grid-template-columns:repeat(4,1fr)}
.kpi-rang.q4 .v{font-size:19px}
.kpi-rang.q4 .l{font-size:8.5px;letter-spacing:.06em}
.suivi{margin:2px 0 0;padding:0;list-style:none}
.suivi li{
  display:flex;gap:9px;padding:8px 0;border-bottom:1px solid rgba(220,216,206,.7);font-size:13.5px;
}
.suivi li .d{font:600 11px/1.5 var(--mono);color:var(--encre-clair);flex:none;width:52px}
.suivi li .t{flex:1;line-height:1.4}
.suivi li button{color:var(--marge);opacity:.7;flex:none;font-size:15px;padding:0 4px}

/* ---------- Vide ---------- */
.vide{
  text-align:center;padding:44px 20px;color:var(--encre-clair);
  border:1px dashed var(--trait);border-radius:var(--r);
}
.vide p{margin:0 0 4px;font-size:14px}
.vide .aide{font-size:12.5px;opacity:.8}

/* ---------- Feuille de saisie ---------- */
.voile{
  position:fixed;inset:0;z-index:50;background:rgba(27,42,74,.42);
  display:flex;align-items:flex-end;justify-content:center;
  animation:fondu .18s ease;
}
@keyframes fondu{from{opacity:0}to{opacity:1}}
.feuille{
  background:var(--papier);width:100%;max-width:560px;
  border-radius:16px 16px 0 0;padding:16px 16px calc(18px + var(--safe-b));
  max-height:92dvh;overflow:auto;animation:monte .24s cubic-bezier(.2,.9,.2,1);
}
@keyframes monte{from{transform:translateY(18px)}to{transform:translateY(0)}}
.feuille h2{margin:2px 0 14px;font-size:17px;display:flex;align-items:center;gap:9px}
.feuille h2 .pt{width:10px;height:10px;border-radius:50%;flex:none}
label.champ{display:block;margin:14px 0 0}
label.champ > span{
  display:block;font:500 10px/1 var(--mono);letter-spacing:.14em;
  text-transform:uppercase;color:var(--encre-clair);margin-bottom:6px;
}
input[type=text],input[type=date],input[type=number],select,textarea{
  width:100%;padding:11px 12px;border:1px solid var(--trait);border-radius:8px;
  background:var(--papier);font-size:16px; /* 16px = pas de zoom auto iOS */
}
textarea{resize:vertical;min-height:62px}
.chips{display:flex;flex-wrap:wrap;gap:7px}
.chip{
  border:1px solid var(--trait);border-radius:999px;padding:9px 13px;
  font:600 13px/1 var(--mono);font-variant-numeric:tabular-nums;background:var(--papier);
}
.chip[aria-pressed="true"]{background:var(--encre);color:var(--papier);border-color:var(--encre)}
.interrupteur{
  display:flex;align-items:center;gap:11px;margin:18px 0 0;
  padding:12px;border:1px solid var(--trait);border-radius:var(--r);
}
.interrupteur input{width:20px;height:20px;accent-color:var(--marge);flex:none}
.interrupteur .lib{font-size:14px;font-weight:600}
.interrupteur .sous{font-size:12px;color:var(--encre-clair);margin-top:2px}
.actions{display:flex;gap:9px;margin-top:20px}
.actions .btn{flex:1}

/* ---------- Bilan ---------- */
.kpi-1{
  border-left:3px solid var(--marge);padding-left:14px;margin-bottom:26px;
}
.kpi-1 .nb{font:700 54px/1 var(--mono);font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.kpi-1 .lg{font-size:14px;color:var(--encre-clair);margin-top:5px}
.kpi-rang{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--trait);border:1px solid var(--trait);border-radius:var(--r);overflow:hidden;margin-bottom:26px}
.kpi-rang div{background:var(--papier);padding:12px 10px}
.kpi-rang .v{font:700 21px/1 var(--mono);font-variant-numeric:tabular-nums}
.kpi-rang .l{font:500 9.5px/1.3 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--encre-clair);margin-top:6px}
.barre-cat{margin-bottom:11px}
.barre-cat .haut{display:flex;align-items:baseline;gap:8px;font-size:13px;margin-bottom:5px}
.barre-cat .haut .n{font-weight:600;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.barre-cat .haut .v{font:600 12px/1 var(--mono);font-variant-numeric:tabular-nums;flex:none}
.barre-cat .haut .c{font:500 11px/1 var(--mono);color:var(--encre-clair);flex:none}
.rail{height:9px;background:var(--papier-creux);border-radius:5px;overflow:hidden}
.rail i{display:block;height:100%;border-radius:5px}
.camembert{display:block;width:100%;max-width:230px;margin:4px auto 0}
.camembert path,.camembert circle{-webkit-print-color-adjust:exact;print-color-adjust:exact}
.legende{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(148px,1fr));
  gap:7px 16px;margin-top:16px;
}
.legende div{display:flex;align-items:center;gap:7px;font-size:12px;min-width:0}
.legende .pastille{width:9px;height:9px;border-radius:2px;flex:none}
.legende .n{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.legende .v{font:600 11px/1 var(--mono);font-variant-numeric:tabular-nums;flex:none}
.bascule{display:flex;gap:6px;margin:0 0 12px}
.bascule button{
  border:1px solid var(--trait);background:var(--papier);border-radius:999px;
  padding:6px 12px;font:600 11px/1 var(--mono);letter-spacing:.06em;text-transform:uppercase;
  color:var(--encre-clair);
}
.bascule button[aria-pressed="true"]{background:var(--encre);color:var(--papier);border-color:var(--encre)}

.hist{display:flex;align-items:flex-end;gap:4px;height:120px;margin-top:6px}
.hist .col{flex:1;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;gap:5px;height:100%}
.hist .bt{width:100%;background:var(--encre);border-radius:3px 3px 0 0;min-height:2px}
.hist .lb{font:500 8.5px/1 var(--mono);color:var(--encre-clair);text-transform:uppercase;letter-spacing:-.02em}
.hist .vl{font:600 10px/1 var(--mono);font-variant-numeric:tabular-nums}
.selecteur{display:flex;align-items:center;gap:10px;margin-bottom:18px;flex-wrap:wrap}
.selecteur select{width:auto;flex:1 1 44%;min-width:0}
.selecteur input[type=text]{flex:1 1 60%;min-width:0}

/* ---------- Réglages ---------- */
.rangee{
  display:flex;align-items:center;gap:11px;padding:11px 2px;
  border-bottom:1px solid rgba(220,216,206,.7);
}
.rangee .nom{flex:1;font-size:14px}
.rangee input[type=text]{flex:1;padding:7px 9px;font-size:15px}
.rangee input[type=color]{width:32px;height:32px;padding:0;border:1px solid var(--trait);border-radius:6px;background:none;flex:none}
.mini{font-size:12.5px;color:var(--encre-clair);line-height:1.55}

/* ---------- Scanner plein écran ---------- */
.scan-voile{
  position:fixed;inset:0;z-index:70;background:var(--encre);color:var(--papier);
  display:flex;flex-direction:column;
}
.scan-tete{
  display:flex;align-items:center;gap:12px;flex:none;
  padding:calc(env(safe-area-inset-top,0px) + 12px) 16px 12px;
}
.scan-tete .lib{flex:1;font-size:15px;font-weight:600}
.scan-tete button{
  background:rgba(255,255,255,.16);color:var(--papier);border-radius:999px;
  padding:8px 16px;font-size:13px;font-weight:600;
}
#zone-scan{position:relative;flex:1;min-height:0;overflow:hidden;display:flex;align-items:center;justify-content:center}
#zone-scan video{max-width:100%;max-height:100%;display:block}
/* On masque le cadre gris de la bibliothèque pour dessiner le nôtre. */
#zone-scan #qr-shaded-region{display:none !important}

.scan-cadre{
  position:absolute;pointer-events:none;overflow:hidden;border-radius:8px;
  border:1px solid rgba(107,182,232,.45);
  box-shadow:0 0 0 9999px rgba(15,26,46,.42);   /* voile discret à l'extérieur */
}
/* coins fins : ils suffisent à dire où viser */
.scan-cadre i.coin{
  position:absolute;width:16px;height:16px;border:2px solid var(--azur);border-radius:2px;
  opacity:.9;
}
.scan-cadre i.hg{top:-1px;left:-1px;border-right:none;border-bottom:none}
.scan-cadre i.hd{top:-1px;right:-1px;border-left:none;border-bottom:none}
.scan-cadre i.bg{bottom:-1px;left:-1px;border-right:none;border-top:none}
.scan-cadre i.bd{bottom:-1px;right:-1px;border-left:none;border-top:none}

.scan-trait{
  position:absolute;left:6%;right:6%;height:1px;
  background:linear-gradient(90deg,transparent,var(--azur),transparent);
  opacity:.55;
  animation:balayage 3s ease-in-out infinite alternate;
}
@keyframes balayage{
  from {top:8%;  opacity:.2}
  50%  {opacity:.6}
  to   {top:92%; opacity:.2}
}
.scan-pied{
  flex:none;padding:14px 22px calc(18px + var(--safe-b));text-align:center;
  font-size:12.5px;line-height:1.5;color:#8FA6C8;
}
.scan-pied b{color:var(--papier)}

/* ---------- Message furtif ---------- */
#toast{
  position:fixed;left:50%;bottom:calc(90px + var(--safe-b));transform:translateX(-50%);
  background:var(--encre);color:var(--papier);padding:11px 17px;border-radius:999px;
  font-size:13.5px;font-weight:600;z-index:60;box-shadow:var(--ombre);
  opacity:0;pointer-events:none;transition:opacity .2s ease, transform .2s ease;
  max-width:88vw;text-align:center;
}
#toast.vu{opacity:1;transform:translateX(-50%) translateY(-6px)}

/* ---------- Étiquettes du parc ---------- */
.coche-etq{
  width:22px;height:22px;flex:none;align-self:center;margin:0 2px 0 0;
  accent-color:var(--encre);
}
.barre-action{
  position:sticky;top:56px;z-index:20;display:flex;align-items:center;gap:9px;
  background:var(--encre);color:var(--papier);border-radius:10px;
  padding:9px 10px 9px 14px;margin-bottom:8px;box-shadow:var(--ombre);
}
.barre-action .cpt{flex:1;font:600 13px/1 var(--mono);font-variant-numeric:tabular-nums}
.barre-action .btn{padding:8px 14px;font-size:13px}
.barre-action .btn.fant{color:var(--papier);border-color:rgba(255,255,255,.35)}
.barre-action .btn:not(.fant){background:var(--papier);color:var(--encre)}

/* La planche n'existe qu'à l'impression : construite à la demande, masquée
   à l'écran. Dimensions en millimètres, ajustables selon les planches
   autocollantes utilisées. */
#planche-etiquettes{
  --etq-largeur:63.5mm;
  --etq-hauteur:33.9mm;
  /* Décalage manuel : compense l'écart entre la zone imprimable réelle de
     l'imprimante et ce que le navigateur croit pouvoir utiliser. Réglable
     depuis Réglages, à l'œil, en mesurant le tirage. */
  --etq-decal-haut:0mm;
  --etq-decal-gauche:0mm;
  display:none;
  /* Page nommée : reçoit ses propres marges via @page etiquettes ci-dessous,
     indépendamment de la marge du Bilan. */
  page:etiquettes;
}
.etq-parc{
  width:var(--etq-largeur);height:var(--etq-hauteur);
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:1mm;padding:2mm;box-sizing:border-box;overflow:hidden;
  border:1px dashed #bbb;                 /* repère de découpe */
}
.etq-mention{
  margin:0;font:600 7pt/1.15 var(--texte);text-align:center;color:#000;
  max-width:100%;overflow:hidden;
}
.etq-code{max-width:100%;height:auto}

/* ---------- Impression ---------- */
#tete-impression{display:none}
body.impression-etiquettes #app{display:none}

@media print{
  body.impression-etiquettes #app,
  body.impression-etiquettes #toast{display:none !important}
  body.impression-etiquettes #planche-etiquettes{
    display:grid;
    /* auto-fit plutôt qu'un nombre de colonnes figé : si la marge réellement
       appliquée laisse moins de place que prévu (la page nommée ci-dessous
       n'est pas honorée par tous les moteurs d'impression, notamment
       certains pipelines PDF de Safari), la planche passe à deux colonnes
       au lieu de faire déborder — et donc tronquer — la troisième. Aucune
       étiquette n'est jamais coupée par le bord du papier. */
    grid-template-columns:repeat(auto-fit, var(--etq-largeur));
    justify-content:center;
    gap:0;
    padding-top:var(--etq-decal-haut);
    padding-left:var(--etq-decal-gauche);
  }
  .etq-parc{-webkit-print-color-adjust:exact;print-color-adjust:exact;break-inside:avoid}

  @page{margin:16mm 14mm}                 /* le compte rendu du Bilan, uniquement */
  @page etiquettes{ margin:5mm; size:auto; }  /* la planche d'étiquettes, isolément */
  #app{padding:0;background:none}
  .entete,.barre,.chrono-actif,.no-print,#toast{display:none !important}
  .page{max-width:none;padding:0}
  body{background:#fff;font-size:11pt}
  #tete-impression{
    display:block;border-bottom:2px solid #1B2A4A;padding-bottom:8px;margin-bottom:18px;
  }
  #tete-impression .t{font-size:17pt;font-weight:700;margin:0}
  #tete-impression .s{font-size:10pt;color:#3E5478;margin:5px 0 0;font-family:var(--mono)}
  .kpi-1{page-break-inside:avoid}
  .bloc{page-break-inside:avoid;margin-bottom:20px}
  .rail i{-webkit-print-color-adjust:exact;print-color-adjust:exact}
  .hist .bt{-webkit-print-color-adjust:exact;print-color-adjust:exact}
}

@media (prefers-reduced-motion:reduce){
  *{animation:none !important;transition:none !important}
}
@media (min-width:560px){
  .grille{grid-template-columns:repeat(3,minmax(0,1fr))}
}