/* ===========================================================================
   Procédures de forage — Machines Roger International
   Système de design repris du site Prévention TMS (Barlow / rouge)
   =========================================================================== */
/* Polices auto-hébergées (vendor/fonts) : disponibles hors-ligne, aucun appel
   externe. Sous-ensemble latin (couvre le français, œ inclus). */
@font-face{font-family:'Barlow';font-style:normal;font-weight:400;font-display:swap;src:url('vendor/fonts/barlow-latin-400-normal.woff2') format('woff2')}
@font-face{font-family:'Barlow';font-style:normal;font-weight:500;font-display:swap;src:url('vendor/fonts/barlow-latin-500-normal.woff2') format('woff2')}
@font-face{font-family:'Barlow';font-style:normal;font-weight:600;font-display:swap;src:url('vendor/fonts/barlow-latin-600-normal.woff2') format('woff2')}
@font-face{font-family:'Barlow';font-style:normal;font-weight:700;font-display:swap;src:url('vendor/fonts/barlow-latin-700-normal.woff2') format('woff2')}
@font-face{font-family:'Barlow';font-style:normal;font-weight:800;font-display:swap;src:url('vendor/fonts/barlow-latin-800-normal.woff2') format('woff2')}
@font-face{font-family:'Barlow Condensed';font-style:normal;font-weight:600;font-display:swap;src:url('vendor/fonts/barlow-condensed-latin-600-normal.woff2') format('woff2')}
@font-face{font-family:'Barlow Condensed';font-style:normal;font-weight:700;font-display:swap;src:url('vendor/fonts/barlow-condensed-latin-700-normal.woff2') format('woff2')}
@font-face{font-family:'Barlow Condensed';font-style:normal;font-weight:800;font-display:swap;src:url('vendor/fonts/barlow-condensed-latin-800-normal.woff2') format('woff2')}

*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}

:root{
  /* Palette industrielle sombre (fiche de procédure et base du site) */
  --app-bg:#020406;--surface:#06090d;--surface-raised:#0b1016;
  --text-main:#f4f6f8;--text-muted:#b7bec8;--border-neutral:#303943;
  --blue:#0a84ff;--blue-dark:#062a67;--blue-surface:#03162f;
  --amber:#ffb000;--amber-dark:#573800;--amber-surface:#211600;
  --red:#ff2020;--red-dark:#650000;--red-surface:#260000;
  --locked:#777c83;--locked-dark:#282c31;
  --pdf-well:#10151c;
  --bg:var(--app-bg);--bg-2:var(--surface-raised);--card:var(--surface);--card-2:var(--surface-raised);
  --brand:#d22325;--brand-d:#a81a1c;--accent:#d22325;--accent-l:#ef5a5c;
  --danger:#ef4444;--warn:#f59e0b;--success:#10b981;
  --text:var(--text-main);--muted:var(--text-muted);--dim:#8b929c;--border:var(--border-neutral);--strong:#fff;--lead:#c9ced6;
  --g-red:linear-gradient(135deg,#e23a3c,#a81a1c);
  /* Rangées de procédures : fond nettement détaché de la page (elles se
     confondaient avec le fond presque noir). Titre en blanc pur, code en retrait. */
  --row-bg:#141a22;--row-bg-h:#1c242e;--row-bd:#303943;--row-code:#b7bec8;
  --row-sh:0 1px 8px rgba(0,0,0,.45);
  --shadow-card:0 1px 2px rgba(0,0,0,.4);
  --font-display:'Barlow Condensed','Barlow',sans-serif;
  --font-body:'Barlow',sans-serif;
  --maxw:1100px;
}

html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{font-family:var(--font-body);background:var(--bg);color:var(--text);line-height:1.65;
  text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;min-height:100vh}
a{color:inherit;text-decoration:none}
button{font-family:inherit;cursor:pointer}
img{max-width:100%}
::selection{background:rgba(210,35,37,.35);color:#fff}
:focus-visible{outline:2px solid var(--blue);outline-offset:2px;border-radius:6px}

/* ===== top app bar ===== */
.appbar{position:sticky;top:0;z-index:50;display:flex;align-items:center;gap:16px;
  padding:11.2px clamp(16px,4vw,32px);background:rgba(2,4,6,.86);
  backdrop-filter:blur(16px) saturate(140%);-webkit-backdrop-filter:blur(16px) saturate(140%);
  border-bottom:1px solid rgba(255,255,255,.07)}
.appbar .brand{display:flex;align-items:center;gap:11.2px;min-width:0}
.appbar .brand img{height:34px;width:auto;background:#000;border-radius:6px;padding:3px 6px}
.appbar .brand .bt{display:flex;flex-direction:column;line-height:1.05;min-width:0}
.appbar .brand .bt b{font-family:var(--font-display);font-size:16.32px;font-weight:800;letter-spacing:.02em;
  text-transform:uppercase;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:#f1f5f9}
.appbar .brand .bt span{font-size:10.56px;letter-spacing:.16em;text-transform:uppercase;color:#8694ad}
.appbar nav{display:flex;gap:3.2px;margin-left:auto;align-items:center}
.appbar nav a{padding:7.2px 12.8px;border-radius:9px;font-weight:700;font-size:14.4px;color:var(--muted);
  transition:color .2s,background .2s;white-space:nowrap}
.appbar nav a:hover{color:#fff;background:rgba(255,255,255,.06)}
.appbar nav a.active{color:#fff;background:rgba(210,35,37,.16)}
.iconbtn{display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;border:1px solid #1e293b;
  background:#1a2332;border-radius:10px;color:#9aa7bd;transition:.2s}
.iconbtn:hover{color:#fff;border-color:var(--brand)}
#installBtn{display:none}
/* Travailleur actif dans la barre (session) — nom affiché en permanence,
   touche pour aller au suivi et changer de profil. */
.appbar .workerchip{display:inline-flex;align-items:center;gap:6.4px;padding:6.4px 11.2px;border-radius:9px;
  font-weight:700;font-size:13.6px;color:var(--text);background:rgba(255,255,255,.05);
  border:1px solid var(--border);max-width:170px;transition:color .2s,background .2s,border-color .2s}
.appbar .workerchip:hover{color:#fff;border-color:var(--brand);background:rgba(210,35,37,.14)}
.appbar .workerchip svg{flex:none;color:var(--accent-l)}
.appbar .workerchip.anon{color:var(--muted);font-weight:600}
.appbar .workerchip .wc-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
@media(max-width:520px){.appbar .workerchip{max-width:112px;padding:6.4px 8.8px;font-size:12.48px}
  .appbar .workerchip .wc-name{max-width:82px}}
.appbar .ver{font-family:var(--font-display);font-size:11.52px;font-weight:800;letter-spacing:.04em;color:var(--accent-l);
  background:rgba(210,35,37,.1);border:1px solid rgba(210,35,37,.3);border-radius:50px;padding:3.2px 8.8px;white-space:nowrap}
/* Pastille d'état du pack hors-ligne : vert = complet, orange = en cours,
   rouge = incomplet. Toujours visible — on sait AVANT de descendre. */
.packchip{display:inline-flex;align-items:center;gap:4.8px;border-radius:50px;padding:4.48px 9.92px;
  font-family:var(--font-display);font-size:11.52px;font-weight:800;letter-spacing:.03em;white-space:nowrap;
  cursor:pointer;background:rgba(255,255,255,.05);border:1px solid var(--border);color:var(--muted);transition:.2s}
.packchip.ok{color:#2fbf8f;border-color:rgba(47,191,143,.45);background:rgba(47,191,143,.09)}
.packchip.busy{color:#f5a623;border-color:rgba(245,166,35,.45);background:rgba(245,166,35,.09)}
.packchip.warn{color:#f05252;border-color:rgba(240,82,82,.5);background:rgba(240,82,82,.1)}
/* Petit écran : la barre est déjà pleine (5 liens + travailleur + 2 boutons),
   la pastille devient un simple point de couleur — l'état reste visible sans
   faire déborder la rangée ; un touché mène à la carte hors-ligne détaillée. */
@media(max-width:640px){.packchip{font-size:0;gap:0;padding:0;width:12px;height:12px;min-width:12px;
  border:none;border-radius:50%;background:currentColor}}
/* Pastille « attestations signées en attente d'envoi ». Toujours visible tant
   que la file n'est pas vide : dans l'APK et sur iOS, aucun code ne tourne
   application fermée, donc le rappel EST la garantie qui reste. Ambre = en
   attente de réseau ; rouge = refusée par le registre (action requise). */
.appbar .aqchip{display:inline-flex;align-items:center;gap:4.8px;border-radius:50px;padding:4.48px 9.92px;
  font-family:var(--font-display);font-size:11.52px;font-weight:800;letter-spacing:.03em;white-space:nowrap;
  color:#f5a623;border:1px solid rgba(245,166,35,.5);background:rgba(245,166,35,.12);transition:.2s}
.appbar .aqchip:hover{background:rgba(245,166,35,.2)}
.appbar .aqchip.bad{color:#f05252;border-color:rgba(240,82,82,.55);background:rgba(240,82,82,.13)}
.appbar .aqchip .aqc-num{display:none}
/* Téléphone : la barre porte déjà 5 liens, la progression, l'état du pack, le
   travailleur et deux boutons. La pastille se réduit donc à son NOMBRE
   (pictogramme + chiffre) : l'alerte reste visible sans pousser la rangée. */
@media(max-width:640px){.appbar .aqchip{padding:3.84px 6.72px;font-size:11.84px;gap:3.52px}
  .appbar .aqchip svg{width:12px;height:12px}
  .appbar .aqchip .aqc-txt{display:none}
  .appbar .aqchip .aqc-num{display:inline}}
/* « Ma progression » dans le bandeau : pastille « n/N · % » avec mini-barre
   (touche → Mon suivi) + filet vert au ras du bandeau qui se remplit avec
   les attestations de la section affichée. */
.prgchip{display:inline-flex;flex-direction:column;align-items:stretch;gap:3.52px;padding:4.8px 9.92px;
  border-radius:9px;background:rgba(255,255,255,.05);border:1px solid var(--border);
  font-family:var(--font-display);font-size:11.52px;font-weight:800;letter-spacing:.03em;
  color:var(--muted);white-space:nowrap;transition:color .2s,border-color .2s,background .2s}
.prgchip:hover{color:#fff;border-color:rgba(16,185,129,.6);background:rgba(16,185,129,.08)}
.prgchip .pc-bar{display:block;width:100%;min-width:56px;height:3px;border-radius:999px;
  background:rgba(255,255,255,.12);overflow:hidden}
.prgchip .pc-bar i{display:block;height:100%;width:0;background:#10b981;border-radius:999px;transition:width .4s ease}
.prgchip.done{color:#34d399;border-color:rgba(52,211,153,.45);background:rgba(16,185,129,.08)}
.appbar-prg{position:absolute;left:0;right:0;bottom:-1px;height:2px;pointer-events:none}
.appbar-prg i{display:block;height:100%;width:0;background:#10b981;border-radius:0 999px 999px 0;transition:width .4s ease}
/* Petit écran : la barre est déjà pleine — la pastille se compacte (« n/N »
   seul, le pourcentage est porté par la mini-barre et le filet) et REMPLACE
   le lien « Suivi » : elle mène au même endroit en montrant plus d'info. */
@media(max-width:640px){.prgchip{padding:3.2px 6.4px;font-size:9.92px;gap:2.56px}
  .prgchip .pc-p{display:none}
  .prgchip .pc-bar{min-width:30px}
  .appbar.has-prg nav a.lbl[data-nav="suivi"]{display:none}}

/* ===== layout ===== */
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 clamp(16px,3vw,24px)}
main{padding-bottom:5rem;animation:fade .4s ease}
@keyframes fade{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.eyebrow{display:inline-flex;align-items:center;gap:.5rem;font-family:var(--font-display);font-size:.8rem;
  font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--accent-l);
  padding:.3rem .8rem;border:1px solid rgba(210,35,37,.3);background:rgba(210,35,37,.08);border-radius:50px}
.eyebrow::before{content:'';width:6px;height:6px;border-radius:50%;background:var(--brand)}

/* ===== hero (home) ===== */
.hero{padding:clamp(1.3rem,3.5vw,2.2rem) 0 1rem}
.hero h1{font-family:var(--font-display);font-size:clamp(1.9rem,5vw,2.9rem);font-weight:800;line-height:1;
  text-transform:uppercase;letter-spacing:.01em;margin:.65rem 0 .45rem;text-wrap:balance}
.hero h1 .hl{color:var(--accent-l)}
.hero p.lead{color:var(--lead);font-size:clamp(.95rem,1.8vw,1.06rem);max-width:640px}
.stats{display:flex;flex-wrap:wrap;gap:1.1rem 1.4rem;margin-top:1rem}
.stat b{font-family:var(--font-display);font-size:1.45rem;font-weight:800;color:var(--strong);display:block;line-height:1}
.stat span{font-size:.74rem;color:var(--dim);text-transform:uppercase;letter-spacing:.08em}

/* ===== search + filters ===== */
.toolbar{padding:.7rem 0 .4rem}
.search{position:relative;display:flex;align-items:center}
.search svg{position:absolute;left:1rem;color:var(--dim);pointer-events:none}
.search input{width:100%;padding:.78rem 1rem .78rem 2.9rem;font-size:1rem;color:var(--text);
  background:var(--card);border:1px solid var(--border);border-radius:13px;transition:.2s}
.search input::placeholder{color:var(--dim)}
.search input:focus{border-color:var(--brand);background:var(--card-2);box-shadow:0 0 0 4px rgba(210,35,37,.12)}
/* Recherche proéminente des listes : sous le titre, agrandie, collante sous
   la barre d'app au défilement (fond fondu vers le bas pour la transition) */
.srchbar{position:sticky;top:60px;z-index:40;padding:.6rem 0 .55rem;
  background:linear-gradient(to bottom,var(--bg) 88%,transparent)}
.srchbar .search input{padding:1rem 1.1rem 1rem 3.3rem;font-size:1.1rem;
  background:#10161d;border:2px solid var(--brand);border-radius:10px}
.srchbar .search input::placeholder{color:#c2c9d1}
.srchbar .search svg{width:24px;height:24px;left:1.05rem;color:var(--accent-l)}
:root[data-theme="light"] .srchbar .search input{background:#fff}
:root[data-theme="light"] .srchbar .search input::placeholder{color:#5b6470}
@media(max-width:640px){
  .srchbar{top:59px;padding:.45rem 0 .4rem}
  .srchbar .search input{padding:.85rem 1rem .85rem 3rem;font-size:1rem}
  .srchbar .search svg{width:20px;height:20px;left:.95rem}
}
.chips{display:flex;flex-wrap:wrap;gap:.45rem;padding:.6rem 0 .25rem}
.chip{flex:none;display:inline-flex;align-items:center;gap:.4rem;padding:.45rem .85rem;border-radius:50px;
  font-size:.85rem;font-weight:700;color:var(--muted);background:var(--card);border:1px solid var(--border);
  transition:.18s;white-space:nowrap;cursor:pointer}
.chip:hover{color:var(--strong);border-color:rgba(210,35,37,.5)}
/* Écrans tactiles (gants) : cibles d'au moins ~42px de haut */
@media (pointer:coarse){
  .chip{padding:.72rem .95rem}
}
.chip.on{color:#fff;background:rgba(210,35,37,.16);border-color:var(--brand)}
.chip .ct{font-size:.72rem;color:var(--dim)}
.chip.on .ct{color:var(--accent-l)}
/* couleur de catégorie sur les filtres (cohérent avec les procédures) */
.chip[data-cat]:not([data-cat=""])::before{content:'';width:8px;height:8px;border-radius:50%;background:var(--dim);flex:none}
.chip[data-cat]:not([data-cat=""]).on::before{background:#fff}

/* ===== procedure cards ===== */
.count{color:var(--dim);font-size:.85rem;margin:.4rem 0 1rem;font-weight:600}
.grid{display:grid;gap:1.1rem;grid-template-columns:repeat(auto-fill,minmax(min(100%,310px),1fr))}
.pcard{position:relative;display:flex;flex-direction:column;background:var(--card);border:1px solid var(--border);
  border-radius:16px;padding:1.25rem 1.3rem;box-shadow:var(--shadow-card);
  transition:transform .25s cubic-bezier(.2,.7,.2,1),border-color .25s,box-shadow .25s;overflow:hidden}
.pcard::before{content:'';position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--brand)}
.pcard:hover{transform:translateY(-4px);border-color:rgba(210,35,37,.35);
  box-shadow:0 18px 40px rgba(0,0,0,.45),0 6px 22px rgba(210,35,37,.14)}
.pcard .tags{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap;margin-bottom:.7rem}
.cat-tag{font-family:var(--font-display);font-size:.72rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  color:var(--muted);background:var(--card-2);border:1px solid var(--border);padding:.18rem .6rem;border-radius:50px}
.code-tag{font-size:.72rem;font-weight:700;color:var(--dim);font-family:var(--font-display);letter-spacing:.06em}
.pcard h3{font-family:var(--font-display);font-size:1.3rem;font-weight:700;line-height:1.08;text-transform:uppercase;
  letter-spacing:.01em;margin-bottom:.4rem}
.pcard p{color:var(--muted);font-size:.92rem;flex:1}
.mach{display:flex;gap:.4rem;flex-wrap:wrap;margin-top:.9rem}
.mbadge{font-size:.72rem;font-weight:700;color:var(--accent-l);background:rgba(210,35,37,.1);
  border:1px solid rgba(210,35,37,.25);padding:.16rem .55rem;border-radius:6px}
.pcard .go{display:inline-flex;align-items:center;gap:.35rem;margin-top:1rem;font-weight:700;font-size:.86rem;color:var(--accent-l)}
.pcard .go svg{transition:transform .25s}
.pcard:hover .go svg{transform:translateX(4px)}
.empty{text-align:center;color:var(--dim);padding:3rem 1rem}

/* ===== procedure detail ===== */
/* Fil d'Ariane : texte bleu pâle, flèche blanche */
.back{display:inline-flex;align-items:center;gap:.45rem;color:#8fbcff;font-weight:700;font-size:.95rem;
  margin:1.3rem 0 1rem;padding:.3rem 0;transition:.2s}
.back svg{color:var(--strong)}
.back:hover{color:#c4dcff}
.phead{border-bottom:1px solid var(--border);padding-bottom:1.3rem;margin-bottom:1.4rem}
.phead h1{font-family:var(--font-display);font-size:2rem;font-weight:800;line-height:1.02;
  text-transform:uppercase;letter-spacing:.005em;margin:.55rem 0 .5rem;text-wrap:balance;color:var(--strong)}
.phead .tags{display:flex;align-items:center;gap:.65rem;flex-wrap:wrap}
.phead .meta{display:flex;gap:.4rem .6rem;flex-wrap:wrap;align-items:center;color:var(--text-muted);font-size:.92rem;font-weight:600;margin-top:.7rem}
.phead .meta .dot{width:5px;height:5px;border-radius:50%;background:var(--cat,var(--blue));flex:none}
/* Code de procédure (blanc) + pastille de tâche pleine (rouge = maintenance) */
.phead .code-tag{font-size:1rem;color:var(--strong);letter-spacing:.05em}
.phead .cat-tag{color:#fff;background:var(--cat,var(--brand));border:none;border-radius:4px;
  padding:.24rem .65rem;font-size:.78rem;letter-spacing:.09em}
.kv{display:flex;gap:.6rem;flex-wrap:wrap;margin-top:1.1rem}
.kv .k{background:var(--card-2);border:1px solid var(--border);border-radius:11px;padding:.5rem .8rem;min-width:120px}
.kv .k span{display:block;font-size:.68rem;text-transform:uppercase;letter-spacing:.07em;color:var(--dim)}
.kv .k b{font-family:var(--font-display);font-size:1.15rem;color:var(--strong);font-weight:700}

.sec{margin:1.7rem 0}
.sec > h2{font-family:var(--font-display);font-size:1.5rem;font-weight:800;
  text-transform:uppercase;letter-spacing:.02em;color:var(--strong);
  display:flex;align-items:center;gap:.6rem;margin-bottom:.9rem}
.sec > h2::before{content:'';width:5px;height:1.3rem;background:var(--brand);border-radius:2px;flex:none}
/* petite cellule d'icône dans un titre de section */
.h2ic{display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;
  border-radius:5px;flex:none}
.h2ic svg{width:17px;height:17px}
.h2ic-doc{background:var(--surface-raised);border:1px solid var(--border-neutral);color:var(--text-main)}
.h2ic-hist{background:rgba(0,0,0,.28);color:#fff}
/* ===== bloc d'information (résumé) : carte sobre à bordure neutre ===== */
.lead2{color:var(--text-main);font-size:1.08rem;line-height:1.65;background:var(--surface);
  border:1px solid var(--border-neutral);border-radius:6px;padding:1.1rem 1.2rem}
.lead2 p{margin:0}
.pill-list{display:flex;flex-wrap:wrap;gap:.5rem}
.pill{background:var(--card-2);border:1px solid var(--border);border-radius:9px;padding:.45rem .8rem;font-size:.9rem;color:var(--text)}
.pill.epi{border-color:rgba(16,185,129,.35);color:#a7f3d0;background:rgba(16,185,129,.08)}

/* steps */
.steps{display:flex;flex-direction:column;gap:.7rem;counter-reset:st}
.step{display:flex;gap:.9rem;background:var(--card);border:1px solid var(--border);border-radius:13px;padding:1rem 1.1rem}
.step .n{flex:none;width:32px;height:32px;border-radius:9px;background:rgba(210,35,37,.14);color:var(--accent-l);
  font-family:var(--font-display);font-weight:800;font-size:1rem;display:flex;align-items:center;justify-content:center}
.step .sx{flex:1;min-width:0}
.step .sx p{font-size:.98rem}
.step .danger{display:flex;gap:.5rem;align-items:flex-start;margin-top:.6rem;background:rgba(239,68,68,.09);
  border:1px solid rgba(239,68,68,.3);border-radius:9px;padding:.55rem .7rem;font-size:.88rem;color:#fecaca;font-weight:600}
.step .danger svg{flex:none;margin-top:2px}

/* warning boxes */
.warn{display:flex;gap:.8rem;background:linear-gradient(160deg,rgba(239,68,68,.13),rgba(239,68,68,.05));
  border:1px solid rgba(239,68,68,.4);border-radius:13px;padding:1rem 1.1rem;margin-bottom:.8rem}
.warn .wic{flex:none;width:30px;height:30px;border-radius:8px;background:var(--danger);color:#fff;
  display:flex;align-items:center;justify-content:center;font-weight:800}
.warn p{color:#fecaca;font-weight:600;font-size:.96rem}

/* consignes */
.rules{display:flex;flex-direction:column;gap:.55rem}
.rule{display:flex;gap:.7rem;background:var(--card);border:1px solid var(--border);border-radius:11px;padding:.7rem .9rem}
.rule .chk{flex:none;color:var(--success);margin-top:2px}
.rule .rt{flex:1}
.rule .rsrc{font-size:.74rem;color:var(--dim);font-weight:700;margin-top:.2rem}

/* history — tableau : en-têtes blancs, séparateurs rouges fins, date rouge vif */
.tscroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
.hist{width:100%;border-collapse:collapse;font-size:.95rem}
.hist th,.hist td{text-align:left;padding:.6rem .7rem;border-bottom:1px solid var(--red-dark);vertical-align:top}
.hist tbody tr:last-child td{border-bottom:none}
.hist th{color:#7e9cc7;font-family:var(--font-display);text-transform:uppercase;font-size:.85rem;
  font-weight:700;letter-spacing:.08em}
.hist td{color:#e3e7ec}
.hist td:first-child{white-space:nowrap;color:var(--red);font-weight:700}
@media(max-width:640px){.tscroll .hist{min-width:540px}}

/* PDF viewer — LA carte dominante : bandeau bleu foncé, sans encadré (sobre) */
.pdfbox{border:none;border-radius:6px;overflow:hidden;background:var(--surface)}
/* bandeau à la couleur du TYPE DE TÂCHE de la procédure (--cat, posé sur la
   fiche) : un voile noir dégradé assombrit la couleur pour garder le texte
   blanc lisible (ex. Manutention = mauve, Forage = rouge, Alésage = bleu) */
.pdfbox .bar{display:flex;align-items:center;gap:.6rem .9rem;flex-wrap:wrap;padding:.7rem 1rem;
  border-bottom:1px solid rgba(0,0,0,.4);color:#fff;
  background:linear-gradient(90deg,rgba(0,0,0,.35) 0%,rgba(0,0,0,.82) 100%),var(--cat,#0a58c7)}
.pdfbox .bar b{font-family:var(--font-body);letter-spacing:.02em;font-size:.98rem;
  font-weight:600;color:#fff}
.pdfbox .bar .sp{margin-left:auto}
.pdfbox a.dl{display:inline-flex;align-items:center;gap:.45rem;font-size:.92rem;font-weight:600;color:#fff;
  padding:.55rem .5rem;margin:-.35rem 0;border-radius:5px}
.pdfbox a.dl:hover{color:#cfe3ff}
.pdfbox a.dl:focus-visible{outline-color:#fff}
.pdfview>summary{display:flex;flex-wrap:wrap;align-items:center;gap:.4rem .6rem;padding:.75rem 1rem;cursor:pointer;list-style:none;
  color:var(--text-main);font-weight:700;font-size:.98rem;user-select:none}
.pdfview>summary::-webkit-details-marker{display:none}
.pdfview>summary .pv-chev{display:inline-flex;flex:none;transition:transform .15s}
.pdfview[open]>summary .pv-chev{transform:rotate(180deg)}
.pdfview>summary:hover{background:rgba(255,255,255,.04)}
.pdfview .pv-n{margin-left:auto;flex:none;font-size:.82rem;font-weight:700;color:var(--text-muted);
  border:1px solid var(--border-neutral);border-radius:5px;padding:.3rem .7rem;white-space:nowrap}
.pdfview[open]>summary{border-bottom:1px solid var(--border)}
/* Aperçu de la première page (haut de page, centré sur fond gris très foncé,
   légende superposée sur la page) — le toucher ouvre le document en plein écran */
.pdfbox .pv-thumb{position:relative;display:block;width:calc(100% - 2rem);margin:0 1rem 1rem;padding:.4rem .4rem 0;
  max-height:390px;overflow:hidden;border:1px solid var(--border);border-radius:5px;background:var(--pdf-well);
  cursor:pointer;font:inherit;text-align:center;transition:border-color .15s}
.pdfbox .pv-thumb:hover{border-color:#5a636d}
.pdfbox .pv-thumb img{display:block;margin:0 auto;width:100%;max-width:660px;height:auto;background:#fff}
.pdfbox .pv-thumb .pv-more{position:absolute;left:50%;transform:translateX(-50%);bottom:0;
  width:min(100%,660px);padding:2.2rem .9rem .55rem;text-align:center;font-size:.95rem;font-weight:700;
  color:#111827;background:linear-gradient(to bottom,rgba(255,255,255,0),#fff 55%)}
.pdfview[open]+.pv-thumb{display:none}

/* Visionneuse plein écran du document officiel (ouverte depuis l'aperçu) */
/* z-index au-dessus du bouton d'assistant (1100) : rien ne flotte sur le document */
.docfs{position:fixed;inset:0;z-index:1200;display:none;flex-direction:column;background:#30343b}
.docfs.on{display:flex}
.docfs-bar{flex:none;display:flex;flex-wrap:wrap;align-items:center;gap:.6rem;
  padding:calc(.55rem + env(safe-area-inset-top)) .9rem .55rem;
  background:#0a0e17;color:#fff;border-bottom:1px solid rgba(255,255,255,.14)}
.docfs-bar b.docfs-t{flex:1 1 0;font-family:var(--font-display);text-transform:uppercase;letter-spacing:.04em;font-size:.9rem;
  min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.docfs-n{flex:none;font-size:.78rem;font-weight:700;color:#9aa7bd}
.docfs-close{flex:none;margin-left:auto;display:inline-flex;align-items:center;gap:.35rem;
  border:1px solid rgba(255,255,255,.3);background:none;color:#fff;font:inherit;font-size:.85rem;
  font-weight:700;padding:.42rem .75rem;border-radius:9px;cursor:pointer}
.docfs-close svg{width:15px;height:15px}
/* Temps de lecture : 2e ligne de la barre, jamais posé sur les pages. */
.docfs-rt{flex:1 1 100%;order:3;display:flex;flex-wrap:wrap;align-items:center;gap:.25rem 1rem;
  margin:0 -.9rem -.55rem;padding:.38rem .9rem;border-top:1px solid rgba(255,255,255,.1);
  background:#111827;font-size:min(.8rem,13.5px);font-weight:600;color:#cbd5e1}
/* Plafonnée en px : en très grand texte, cette ligne resterait sur deux
   rangées et mangerait la hauteur du document sur téléphone. */
.docfs-rt-i{display:inline-flex;align-items:center;gap:.35rem;white-space:nowrap}
.docfs-rt-i svg{width:14px;height:14px;flex:none;color:var(--amber)}
.docfs-rt b{font-family:var(--font-body);font-size:min(.88rem,15px);font-weight:800;letter-spacing:0;color:#fff;
  font-variant-numeric:tabular-nums}
.docfs-rt-est b{color:var(--amber)}
/* Barre de progression de la lecture : temps mesuré / estimé, verte à 100 %. */
.rt-prog{flex:1 1 100%;order:9;height:6px;margin:.15rem 0 .1rem;border-radius:4px;overflow:hidden;
  background:rgba(255,255,255,.14)}
.rt-prog i{display:block;height:100%;width:0;border-radius:4px;background:var(--amber);transition:width .6s linear}
.rt-prog[data-done="1"] i{background:#34d399}
@media (prefers-reduced-motion:reduce){.rt-prog i{transition:none}}
.docfs-rt.flash{animation:rtFlash 1.6s ease-out}
@keyframes rtFlash{0%,35%{background:#3a2a05}100%{background:#111827}}
@media (prefers-reduced-motion:reduce){.docfs-rt.flash{animation:none}}
.docfs-pages{flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;
  padding:12px 12px calc(12px + env(safe-area-inset-bottom));
  display:flex;flex-direction:column;align-items:center;gap:12px}
.docfs-pages img{width:100%;max-width:980px;height:auto;display:block;border-radius:4px;
  box-shadow:0 2px 10px rgba(0,0,0,.45)}
.pdfbox iframe,.pdfbox object{width:100%;height:78vh;border:0;display:block;background:var(--pdf-well)}
.pdfbox .pdfpages{height:78vh;overflow-y:auto;-webkit-overflow-scrolling:touch;background:var(--pdf-well);
  padding:12px;display:flex;flex-direction:column;align-items:center;gap:12px}
.pdfbox .pdfpages img{width:100%;max-width:900px;height:auto;display:block;border-radius:4px;box-shadow:0 2px 10px rgba(0,0,0,.45)}

/* ===== code de sécurité ===== */
/* (CSS de la vue « Code de sécurité » retiré avec la vue — voir git) */
.kvbox{margin-top:.4rem}
.kvbox > summary{cursor:pointer;font-family:var(--font-display);font-weight:800;text-transform:uppercase;
  letter-spacing:.03em;font-size:.85rem;color:var(--accent-l);padding:.5rem .2rem;list-style:none}
.kvbox > summary::-webkit-details-marker{display:none}
.kvbox > summary::before{content:"▸ ";color:var(--dim)}
.kvbox[open] > summary::before{content:"▾ "}
.kvgrp{margin:.6rem 0 1rem}
.kvgrp h4{font-family:var(--font-display);text-transform:uppercase;letter-spacing:.04em;font-size:.78rem;
  color:var(--muted);margin:.2rem 0 .4rem}
.kvt{width:100%;border-collapse:collapse;font-size:.9rem}
.kvt td{border-top:1px solid var(--border);padding:.4rem .5rem;vertical-align:top}
.kvt .kvl{color:#dbe3ee}
.kvt .kvv{color:var(--strong);font-weight:700;white-space:nowrap}
.kvt .kvs a{font-size:.72rem;font-weight:700;color:var(--accent-l);white-space:nowrap}
/* impression propre du Code (déclenchée par le bouton Imprimer) */
}

/* ===== gate ===== */
.gate{position:fixed;inset:0;z-index:200;display:flex;align-items:center;justify-content:center;padding:1.5rem;
  background:radial-gradient(80% 60% at 50% 10%,rgba(210,35,37,.12),transparent),var(--bg)}
.gate.hide{display:none}
.gate .gc{width:100%;max-width:380px;background:var(--card);border:1px solid var(--border);border-radius:18px;
  padding:2rem 1.7rem;text-align:center;box-shadow:0 24px 60px rgba(0,0,0,.55)}
.gate img{height:46px;background:#000;border-radius:8px;padding:5px 9px;margin-bottom:1.1rem}
.gate h2{font-family:var(--font-display);text-transform:uppercase;font-size:1.5rem;font-weight:800;margin-bottom:.3rem}
.gate p{color:var(--muted);font-size:.9rem;margin-bottom:1.3rem}
.gate input{width:100%;padding:.85rem 1rem;font-size:1.05rem;text-align:center;color:#fff;background:var(--bg-2);
  border:1px solid var(--border);border-radius:11px;letter-spacing:.04em}
.gate input:focus{border-color:var(--brand)}
.gate button{width:100%;margin-top:.8rem;padding:.85rem;font-weight:800;font-size:1rem;color:#fff;border:none;
  border-radius:11px;background:linear-gradient(135deg,#c01e20,#8f1517);box-shadow:0 8px 24px rgba(210,35,37,.3);transition:.2s}
.gate button:hover{transform:translateY(-2px)}
.gate .err{color:var(--danger);font-size:.84rem;font-weight:700;margin-top:.7rem;min-height:1.1rem}
.gate .note{color:var(--dim);font-size:.72rem;margin-top:1.1rem}

/* ===== buttons / misc ===== */
.btn{display:inline-flex;align-items:center;gap:.5rem;background:linear-gradient(135deg,#c01e20,#8f1517);color:#fff;
  border:none;font-weight:800;padding:.75rem 1.4rem;border-radius:6px;font-size:.96rem;box-shadow:0 2px 8px rgba(0,0,0,.35);transition:.2s}
.btn:hover{transform:translateY(-2px)}
.btn.ghost{background:var(--card-2);border:1px solid var(--border);box-shadow:none;color:var(--text)}
.btn.ghost:hover{border-color:var(--brand)}

footer{border-top:1px solid var(--border);padding:2rem 0;color:var(--dim);font-size:.82rem;margin-top:2rem}
footer .wrap{display:flex;flex-wrap:wrap;gap:.6rem 1.4rem;align-items:center}
footer b{color:var(--muted)}
.toast{position:fixed;left:50%;bottom:1.4rem;transform:translateX(-50%) translateY(120%);z-index:120;
  background:var(--card-2);border:1px solid var(--border);border-radius:12px;padding:.8rem 1.1rem;display:flex;gap:.7rem;
  align-items:center;box-shadow:0 14px 40px rgba(0,0,0,.5);max-width:90vw;opacity:0;visibility:hidden;
  transition:transform .35s cubic-bezier(.2,.8,.2,1),opacity .35s,visibility 0s .35s}
.toast.show{transform:translateX(-50%) translateY(0);opacity:1;visibility:visible;
  transition:transform .35s cubic-bezier(.2,.8,.2,1),opacity .35s}
.toast b{color:var(--strong)}.toast button{background:var(--brand);color:#fff;border:none;border-radius:8px;padding:.4rem .7rem;font-weight:700;font-size:.82rem}

/* ===== liste de vérification (checklist) ===== */
.checklist{display:flex;flex-direction:column;gap:.5rem}
.ckhead{display:flex;align-items:center;gap:.9rem;margin-bottom:.4rem;flex-wrap:wrap}
.ckbar{flex:1;min-width:130px;height:8px;background:var(--card-2);border:1px solid var(--border);border-radius:50px;overflow:hidden}
.ckbar i{display:block;height:100%;width:0;background:var(--g-red);transition:width .35s cubic-bezier(.2,.7,.2,1)}
.checklist.done .ckbar i{background:var(--success)}
.ckcount{font-size:.82rem;font-weight:700;color:var(--muted);white-space:nowrap}
.checklist.done .ckcount{color:var(--success)}
.ckreset{background:var(--card-2);border:1px solid var(--border);color:var(--muted);border-radius:8px;
  padding:.35rem .7rem;font-weight:700;font-size:.78rem;cursor:pointer;transition:.15s}
.ckreset:hover{border-color:var(--brand);color:var(--strong)}
.ck{position:relative;display:flex;gap:.7rem;align-items:center;background:var(--card);border:1px solid var(--border);
  border-radius:11px;padding:.55rem .75rem;cursor:pointer;transition:border-color .15s,background .15s}
.ck:hover{border-color:rgba(210,35,37,.3)}
.ck input{position:absolute;opacity:0;width:0;height:0}
.cktype{flex:none;width:36px;height:36px;border-radius:10px;display:flex;align-items:center;justify-content:center;
  background:var(--card-2);color:var(--muted)}
.ck-interdiction .cktype{background:rgba(239,68,68,.16);color:#ef4444}
.ck-verification .cktype{background:rgba(16,185,129,.16);color:#10b981}
.ck-danger .cktype{background:rgba(245,158,11,.16);color:#f59e0b}
.ck-epi .cktype{background:var(--card-2);color:var(--muted)}
.ck-valeur .cktype{background:var(--card-2);color:var(--muted)}
.ck .rt{flex:1;font-size:1.02rem;font-weight:700;line-height:1.3;transition:color .15s}
.ck .ckval{display:inline-block;color:var(--accent-l);font-size:.85rem;font-weight:800;
  font-family:var(--font-display);letter-spacing:.01em;background:rgba(210,35,37,.1);
  border:1px solid rgba(210,35,37,.22);border-radius:6px;padding:.04rem .42rem;margin-left:.2rem;white-space:nowrap}
.ck input:checked ~ .rt{color:var(--dim);text-decoration:line-through;text-decoration-color:rgba(154,167,189,.45)}
.ck .rsrc{display:block;font-size:.74rem;color:var(--dim);font-weight:700;margin-top:.2rem;text-decoration:none}
.ckbox{flex:none;margin-left:auto;width:26px;height:26px;border-radius:7px;border:2px solid var(--dim);display:flex;
  align-items:center;justify-content:center;color:transparent;transition:.15s}
.ck input:checked ~ .ckbox{background:var(--success);border-color:var(--success);color:#fff}
.ck input:focus-visible ~ .ckbox{outline:2px solid var(--accent-l);outline-offset:2px}

/* ===== renvoi au PDF ===== */
.pdfcue{display:flex;align-items:center;gap:1.1rem;flex-wrap:wrap;
  background:linear-gradient(160deg,rgba(210,35,37,.13),rgba(17,24,39,.5));
  border:1px solid rgba(210,35,37,.35);border-radius:14px;padding:1.1rem 1.25rem}
.pdfcue > svg{flex:none;width:26px;height:26px;color:var(--accent-l)}
.pdfcue .cuetxt{flex:1;min-width:220px;display:flex;flex-direction:column;gap:.15rem}
.pdfcue .cuetxt b{font-size:1.02rem}
.pdfcue .cuetxt span{color:var(--muted);font-size:.88rem;line-height:1.45}
.pdfcue .btn{flex:none}

/* ===== disponibilité hors-ligne ===== */
.offline:empty{display:none}
.offcard{display:flex;align-items:center;gap:1rem;flex-wrap:wrap;margin-top:1.2rem;
  background:linear-gradient(160deg,rgba(210,35,37,.08),rgba(17,24,39,.5));
  border:1px solid var(--border);border-radius:14px;padding:.9rem 1.1rem}
.offcard.ok{background:linear-gradient(160deg,rgba(16,185,129,.10),rgba(17,24,39,.5));border-color:rgba(16,185,129,.35)}
.offcard.install{background:linear-gradient(160deg,rgba(210,35,37,.12),rgba(17,24,39,.5));border-color:rgba(210,35,37,.35)}
.offcard.install .offic{background:rgba(210,35,37,.16);color:var(--accent-l)}
.offic{flex:none;width:40px;height:40px;border-radius:11px;display:flex;align-items:center;justify-content:center;
  background:rgba(210,35,37,.14);color:var(--accent-l)}
.offcard.ok .offic{background:rgba(16,185,129,.15);color:var(--success)}
.offtxt{flex:1;min-width:200px;display:flex;flex-direction:column;gap:.1rem}
.offtxt b{font-size:.98rem}
.offtxt > span{color:var(--muted);font-size:.85rem}
.offcard .btn{flex:none}
.offbar{height:7px;background:var(--card-2);border:1px solid var(--border);border-radius:50px;overflow:hidden;margin:.45rem 0 .3rem}
.offbar i{display:block;height:100%;width:0;background:var(--success);transition:width .2s}
#offstat{font-size:.78rem;color:var(--dim);font-weight:700}
/* Détail du téléchargement hors-ligne : estimation, fichier en cours, liste */
.offeta{color:var(--dim);font-size:.8rem}
.offcur{color:var(--dim);font-size:.78rem;font-style:italic;min-height:1.1em}
.offlist{margin-top:.45rem;font-size:.82rem}
.offlist summary{cursor:pointer;color:var(--accent-l);font-weight:700;list-style-position:inside}
.offlist summary:hover{text-decoration:underline}
.offlist-body{max-height:260px;overflow:auto;margin-top:.35rem;
  border:1px solid var(--border);border-radius:10px;padding:.4rem .7rem;background:var(--card-2)}
.offgrp{display:flex;justify-content:space-between;align-items:baseline;gap:.8rem;margin:.55rem 0 .2rem;
  padding-bottom:.15rem;border-bottom:1px solid var(--border)}
.offgrp b{font-size:.8rem;text-transform:uppercase;letter-spacing:.4px}
.offgrp span{color:var(--dim);flex:none}
.offul{list-style:none;margin:0;padding:0}
.offul li{display:flex;justify-content:space-between;gap:.8rem;padding:.06rem 0;color:var(--muted)}
.offul li .offname{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.offul li .offsize{color:var(--dim);flex:none}
.offul li.ok{color:var(--success)}
.offul li.ok .offname::before{content:'✓ '}
.offul li.ko{color:#f87171}
.offul li.ko .offname::before{content:'✗ '}

/* ===== quiz ===== */
.quizhero{padding:clamp(2rem,5vw,3.4rem) 0 1rem}
.quizhero h1{font-family:var(--font-display);font-size:clamp(2.1rem,6vw,3.6rem);font-weight:800;text-transform:uppercase;line-height:1;margin:.8rem 0 .5rem}
.quizhero h1 .hl{color:var(--accent-l)}
.quizstart{display:flex;gap:1rem;flex-wrap:wrap;align-items:flex-end;margin-top:1.6rem;
  background:var(--card);border:1px solid var(--border);border-radius:14px;padding:1.2rem}
.qsf{display:flex;flex-direction:column;gap:.35rem}
.qsf span{font-size:.8rem;text-transform:uppercase;letter-spacing:.06em;color:var(--dim);font-weight:700}
.qsf select{min-width:210px;background:var(--bg-2);border:1px solid var(--border);border-radius:9px;color:var(--text);padding:.55rem .7rem;font-family:inherit}
.quizstart .btn{margin-left:auto}
.quizwrap{max-width:760px;padding-top:1.4rem}
.qtop{display:flex;align-items:center;justify-content:space-between;margin-bottom:.6rem}
.qtop .back{margin:0}
.qscore{font-weight:800;font-family:var(--font-display);color:var(--accent-l)}
.qbar{height:8px;background:var(--card-2);border:1px solid var(--border);border-radius:50px;overflow:hidden;margin-bottom:1.2rem}
.qbar i{display:block;height:100%;background:var(--g-red);transition:width .3s}
.qcard{background:var(--card);border:1px solid var(--border);border-radius:16px;padding:clamp(1.1rem,3vw,1.6rem);box-shadow:var(--shadow-card)}
.qtag{font-family:var(--font-display);font-size:.74rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--dim);margin-bottom:.6rem}
.qq{font-size:1.25rem;font-weight:700;line-height:1.32;margin-bottom:1.2rem;font-family:var(--font-body)}
.qopts{display:flex;flex-direction:column;gap:.6rem}
.qopt{text-align:left;background:var(--bg-2);border:1px solid var(--border);border-radius:11px;padding:.85rem 1rem;
  color:var(--text);font-size:.98rem;font-weight:600;transition:transform .15s,border-color .15s,background .15s;cursor:pointer}
.qopt:hover:not(.locked){border-color:var(--brand);transform:translateX(3px)}
.qopt.locked{cursor:default}
.qopt.ok{border-color:var(--success);background:rgba(16,185,129,.13);color:#a7f3d0}
.qopt.bad{border-color:var(--danger);background:rgba(239,68,68,.12);color:#fecaca}
.qopt.ok::after{content:' ✓';font-weight:900}
.qopt.bad::after{content:' ✗';font-weight:900}
.qfb:empty{display:none}
.qexp{margin-top:1.1rem;border-radius:12px;padding:1rem 1.1rem;border:1px solid var(--border)}
.qexp.good{border-color:rgba(16,185,129,.4);background:rgba(16,185,129,.08)}
.qexp.wrong{border-color:rgba(239,68,68,.4);background:rgba(239,68,68,.07)}
.qexp b{font-family:var(--font-display);text-transform:uppercase;letter-spacing:.03em;font-size:1.02rem}
.qexp.good b{color:var(--success)}
.qexp.wrong b{color:var(--danger)}
.qexp p{color:#dbe3ee;margin:.4rem 0 .6rem}
.qsrc{font-size:.82rem;color:var(--dim);margin-bottom:.8rem}
.qsrc a{color:var(--accent-l);font-weight:700}
.qresult{text-align:center;padding:2rem 1rem}
.qring{--p:0;width:150px;height:150px;border-radius:50%;margin:0 auto 1.2rem;display:flex;align-items:center;justify-content:center;
  background:conic-gradient(var(--brand) calc(var(--p)*1%),var(--card-2) 0)}
.qring span{width:118px;height:118px;border-radius:50%;background:var(--bg);display:flex;align-items:center;justify-content:center;
  font-family:var(--font-display);font-size:2rem;font-weight:800}
.qresult h2{font-family:var(--font-display);font-size:2.4rem;text-transform:uppercase}
.qacts{display:flex;gap:.7rem;justify-content:center;flex-wrap:wrap;margin-top:1.2rem}

/* ===== portail ===== */
.portal{padding:clamp(1.6rem,4vw,2.8rem) 0}
.phead2{display:flex;align-items:center;gap:1rem;margin-bottom:.3rem}
.phead2 img{height:50px;background:#000;border-radius:8px;padding:5px 9px}
.phead2 h1{font-family:var(--font-display);font-size:clamp(2rem,5vw,3rem);font-weight:800;text-transform:uppercase;line-height:1}
.phead2 p{color:var(--dim);font-size:.78rem;letter-spacing:.14em;text-transform:uppercase}
.plead{color:var(--muted);font-size:1.1rem;margin:.5rem 0 1.6rem}
.portal-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr));gap:1.2rem}
.portal-card{position:relative;display:flex;flex-direction:column;background:var(--card);border:1px solid var(--border);
  border-radius:18px;padding:1.8rem;overflow:hidden;transition:transform .25s,border-color .25s,box-shadow .25s}
.portal-card::before{content:'';position:absolute;left:0;top:0;right:0;height:4px;background:var(--brand)}
.portal-card:hover{transform:translateY(-6px);border-color:rgba(210,35,37,.4);box-shadow:0 22px 50px rgba(0,0,0,.45)}
.pc-ic{width:54px;height:54px;border-radius:14px;display:flex;align-items:center;justify-content:center;
  background:rgba(210,35,37,.12);color:var(--accent-l);margin-bottom:1rem}
.portal-card h2{font-family:var(--font-display);font-size:1.6rem;font-weight:800;text-transform:uppercase;margin-bottom:.5rem}
.portal-card p{color:var(--muted);font-size:.95rem;flex:1}
.pc-meta{color:var(--dim);font-size:.8rem;font-weight:600;margin-top:1rem}
.portal-card .go{margin-top:.9rem;color:var(--accent-l)}

/* ===== formation ===== */
.done-badge{font-size:.7rem;font-weight:800;color:#a7f3d0;background:rgba(16,185,129,.14);
  border:1px solid rgba(16,185,129,.35);padding:.16rem .55rem;border-radius:50px}
.fprog{display:flex;align-items:center;gap:1rem;flex-wrap:wrap;margin-top:1.4rem}
.fprog .ckbar{flex:1;min-width:160px;height:8px;background:var(--card-2);border:1px solid var(--border);border-radius:50px;overflow:hidden}
.fprog .ckbar i{display:block;height:100%;background:var(--success)}
.fprog > span{font-weight:700;color:var(--muted);font-size:.85rem;white-space:nowrap}
.notions{display:grid;gap:.8rem;grid-template-columns:repeat(auto-fit,minmax(min(100%,290px),1fr))}
.notion{background:var(--card);border:1px solid var(--border);border-left:4px solid var(--brand);border-radius:12px;padding:1rem 1.1rem}
.notion h4{font-family:var(--font-display);font-size:1.05rem;text-transform:uppercase;letter-spacing:.01em;margin-bottom:.35rem}
.notion p{color:var(--muted);font-size:.92rem}
.vidwrap{position:relative;aspect-ratio:16/9;border:1px solid var(--border);border-radius:13px;overflow:hidden;background:#000}
.vidwrap iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.evalcard{background:var(--card);border:1px solid var(--border);border-radius:13px;padding:1.2rem;display:flex;flex-direction:column;gap:.8rem;align-items:flex-start}
.evalcard p{color:var(--muted)}
.qring.pass{background:conic-gradient(var(--success) calc(var(--p)*1%),var(--card-2) 0)}
.qring.fail{background:conic-gradient(var(--danger) calc(var(--p)*1%),var(--card-2) 0)}

/* ===== attestation (certificat clair, imprimable) ===== */
.attest{background:#fff;color:#1a2332;border:1px solid #d8dee9;border-radius:14px;padding:clamp(1.3rem,4vw,2rem);
  max-width:760px;margin:1rem auto;box-shadow:0 12px 40px rgba(0,0,0,.3)}
.att-head{display:flex;align-items:center;gap:1rem;border-bottom:3px solid var(--brand);padding-bottom:1rem;margin-bottom:1.3rem}
.att-head img{height:46px;background:#000;border-radius:6px;padding:4px 7px}
.att-head b{display:block;font-family:var(--font-display);font-size:1.2rem;text-transform:uppercase;color:#0a0e17}
.att-head span{color:#5b6678;font-size:.9rem}
.att-name{margin-bottom:1rem}
.att-name label{display:block;font-size:.72rem;text-transform:uppercase;letter-spacing:.06em;color:#5b6678;font-weight:700;margin-bottom:.3rem}
.att-name input{width:100%;font-size:1.3rem;font-weight:700;color:#0a0e17;border:none;border-bottom:2px solid #cbd5e1;
  background:transparent;padding:.3rem 0;font-family:var(--font-display)}
.att-name input:focus{outline:none;border-color:var(--brand)}
.att-line{color:#3a4658;margin-bottom:1rem}
.att-table{width:100%;border-collapse:collapse;font-size:.9rem;margin-bottom:1.2rem}
.att-table th,.att-table td{text-align:left;padding:.55rem .6rem;border-bottom:1px solid #e2e8f0;color:#1a2332}
.att-table th{font-size:.72rem;text-transform:uppercase;letter-spacing:.05em;color:#5b6678}
.att-table td:last-child{font-weight:700;color:var(--brand-d)}
.att-empty{color:#5b6678}
.att-foot{display:flex;justify-content:space-between;flex-wrap:wrap;gap:.5rem;border-top:1px solid #e2e8f0;padding-top:1rem;color:#5b6678;font-size:.85rem;font-weight:600}
@media print{
  body{background:#fff;color:#111}
  .appbar,.gate,footer,.toast,.back,.qacts,.cbbtn,.cbpanel,.offcard,.dl-line,.install{display:none!important}
}

/* ===== liste dense des procédures ===== */
.plist2{display:grid;gap:.5rem;grid-template-columns:1fr}  /* une seule colonne, même sur grand écran */
/* ===== recherche : passages cités (même moteur que l'assistant) ===== */
.plist2.srmode{grid-template-columns:1fr}
.srgrp{display:flex;flex-direction:column;gap:.3rem}
.srdet{margin:0 0 .2rem;border:1px solid var(--border);border-radius:10px;background:var(--bg-2);overflow:hidden}
.srdet summary{cursor:pointer;list-style-position:inside;padding:.45rem .7rem;font-size:.78rem;font-weight:800;
  color:var(--accent-l);letter-spacing:.2px}
.srdet summary:hover{background:var(--card-2)}
.srdet[open] summary{border-bottom:1px solid var(--border)}
.srpass{padding:.15rem .55rem .45rem}
.srp{margin:.4rem 0;padding:.5rem .6rem;background:var(--card-2);border:1px solid var(--border);border-radius:10px}
.srp-t{font-size:.86rem;line-height:1.45}
.srp .cbhl{background:#fde047;color:#111827;border-radius:3px;padding:0 .12em;font-weight:700;
  box-decoration-break:clone;-webkit-box-decoration-break:clone}
.srp-src{display:block;margin-top:.3rem;font-size:.76rem;font-weight:700;color:var(--accent-l);text-decoration:none}
.srp-src:hover{text-decoration:underline}
.srmore{display:none}
.srmore.open{display:block}
.srmore-b{display:inline-block;margin:.15rem 0 .25rem;background:transparent;border:1px dashed var(--border);
  border-radius:8px;color:var(--accent-l);font-weight:700;font-size:.78rem;padding:.3rem .6rem;cursor:pointer}
.srmore-b:hover{border-color:var(--accent-l)}
.srhint{display:block;margin-top:.5rem;font-size:.85rem}
/* Rangée compacte : code · titre · tâche · état sur UNE ligne (passe à la
   ligne si étroit — rien n'est tronqué) ; liséré gauche = couleur de tâche. */
.prow{display:flex;align-items:center;gap:.55rem;background:var(--row-bg);border:1px solid var(--row-bd);
  border-left:3px solid var(--cat,var(--row-bd));border-radius:10px;padding:.42rem .6rem .42rem .7rem;
  box-shadow:var(--row-sh);
  transition:transform .15s,border-color .15s,background .15s}
.prow:hover{border-color:rgba(210,35,37,.4);border-left-color:var(--cat,rgba(210,35,37,.4));
  background:var(--row-bg-h);transform:translateX(3px)}
.prow .pcode{flex:none;font-family:var(--font-display);font-size:.7rem;font-weight:700;letter-spacing:.04em;
  color:var(--row-code);background:var(--bg-2);border:1px solid var(--border);border-radius:6px;padding:.12rem .38rem}
.prow .prow-main{flex:1;min-width:0;display:flex;align-items:center;gap:.25rem .55rem;flex-wrap:wrap}
.prow .ptitle{font-weight:700;font-size:.95rem;line-height:1.3;color:var(--strong)}
.prow .pcat{display:inline-flex;align-items:center;gap:.35rem;font-size:.68rem;font-weight:700;
  text-transform:uppercase;letter-spacing:.04em;color:var(--cat,var(--dim))}  /* le mot suit la couleur de sa pastille */
.prow .pcat i{width:7px;height:7px;border-radius:50%;flex:none}
.prow .parrow{flex:none;color:var(--accent-l);opacity:.7;display:flex}
.prow:hover .parrow{opacity:1;transform:translateX(2px)}

/* ===== responsive ===== */
@media(max-width:860px){
  /* nav compacte : les sections restent atteignables sur mobile */
  .appbar nav{gap:1.6px}
  .appbar nav a.lbl{font-size:12.8px;padding:6.4px 8px}
  .appbar .ver{display:none}
  .portal-cards{grid-template-columns:1fr}
}
@media(max-width:640px){
  .toolbar .chips{flex-wrap:nowrap;overflow-x:auto;padding-bottom:.45rem;
    -webkit-overflow-scrolling:touch;scrollbar-width:thin;scroll-snap-type:x proximity}
  .toolbar .chip{scroll-snap-align:start}
}
@media(max-width:520px){
  .appbar .brand .bt{display:none}
  /* La rangée doit tenir SANS faire défiler la page horizontalement (règle du
     projet) : liens plus serrés, nom du travailleur plus court, boutons plus
     petits. Mesuré à 412 px et 360 px de large. */
  .appbar{padding-left:7.2px;padding-right:4.8px;gap:4.8px}
  .appbar nav{gap:1.28px}
  .appbar nav a.lbl{font-size:11.52px;padding:6.4px 3.52px}
  .appbar .workerchip{max-width:74px;padding:5.6px 6.4px;gap:4px}
  .appbar .iconbtn{width:30px;height:30px}
  .prgchip{padding:2.88px 4.8px}
}
/* Très petits téléphones (360 px et moins) : dernier cran de serrage pour que
   la rangée tienne encore, pastille d'attestations comprise. */
@media(max-width:400px){
  .appbar{padding-left:5.6px;padding-right:4px;gap:3.52px}
  .appbar nav a.lbl{font-size:11.2px;padding:6.4px 2.24px}
  .appbar .workerchip{max-width:58px}
  .appbar .iconbtn{width:26px;height:26px}
  .appbar .brand img{height:30px;padding:2px 4px}
  .pdfbox iframe,.pdfbox object,.pdfbox .pdfpages{height:70vh}
  .stats{gap:1rem}
}

/* ===== galerie photos / schémas ===== */
.gallery{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:.7rem}
.gfig{position:relative;display:block;padding:0;border:1px solid var(--border);border-radius:12px;
  overflow:hidden;background:#fff;cursor:zoom-in;aspect-ratio:4/3;transition:.18s}
.gfig:hover{border-color:var(--brand);transform:translateY(-2px);box-shadow:0 6px 18px rgba(0,0,0,.35)}
.gfig img{width:100%;height:100%;object-fit:contain;display:block}
.gfig .gpage{position:absolute;left:.4rem;bottom:.4rem;font-size:.68rem;font-weight:800;letter-spacing:.02em;
  color:#fff;background:rgba(10,14,23,.82);padding:.12rem .45rem;border-radius:6px}

/* ===== visionneuse plein écran (lightbox) ===== */
/* z-index au-dessus de l'assistant (1100), comme le document plein écran :
   rien ne flotte sur la photo (un lien suivi par-dessus brouillait RETOUR). */
.lightbox{position:fixed;inset:0;z-index:1200;display:none;align-items:center;justify-content:center;
  background:rgba(5,8,14,.94);backdrop-filter:blur(3px);padding:1rem}
.lightbox.on{display:flex}
.lightbox .lb-img{max-width:94vw;max-height:88vh;object-fit:contain;border-radius:8px;background:#fff}
.lightbox .lb-close{position:absolute;top:1rem;right:1rem;width:46px;height:46px;display:inline-flex;
  align-items:center;justify-content:center;border:none;border-radius:50%;color:#fff;
  background:rgba(255,255,255,.12);cursor:pointer;transition:.18s}
.lightbox .lb-close:hover{background:var(--brand)}
.lightbox .lb-nav{position:absolute;top:50%;transform:translateY(-50%);width:52px;height:52px;
  display:inline-flex;align-items:center;justify-content:center;border:none;border-radius:50%;color:#fff;
  background:rgba(255,255,255,.12);cursor:pointer;transition:.18s}
.lightbox .lb-nav:hover{background:var(--brand)}
.lightbox .lb-prev{left:1rem}
.lightbox .lb-next{right:1rem}
.lightbox .lb-count{position:absolute;bottom:1rem;left:50%;transform:translateX(-50%);font-size:.82rem;
  font-weight:700;color:#fff;background:rgba(255,255,255,.1);padding:.3rem .8rem;border-radius:20px}
@media(max-width:520px){
  .gallery{grid-template-columns:repeat(auto-fill,minmax(110px,1fr))}
  .lightbox .lb-nav{width:42px;height:42px}
}

/* ===== cartes de section à bandeau (quiz / attestation / historique) ===== */
.seccard{padding:0;background:var(--surface);border:1.5px solid var(--border-neutral);
  border-radius:6px;overflow:hidden}
.seccard>h2{margin:0;padding:.75rem 1.1rem;color:#fff}
.seccard>h2::before{display:none}
.seccard .scbody{padding:1rem 1.1rem 1.1rem}
.sc-quiz{border-color:var(--amber)}
.sc-quiz>h2{background:linear-gradient(90deg,#a66a00 0%,#3c2800 100%)}
.sc-hist{border:none}
.sc-hist>h2{background:linear-gradient(90deg,#760000 0%,#280000 100%)}
/* Attestation = formation : carte verte (le verrou reste signalé en gris
   par le cadenas, la pastille « Verrouillé » et le bouton désactivé) */
.sc-lock{border-color:#10b981}
.sc-lock>h2{background:linear-gradient(90deg,#0b7d52 0%,#062d1e 100%);color:#fff}
/* états ré-affichés dynamiquement dans la carte (attestation envoyée / en file) */
.seccard>.attest-done{margin:1rem 1.1rem}
/* ===== quiz intégré à la fiche ===== */
.pquiz{background:transparent;border:none;border-radius:0}
.pquiz>summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:.7rem .9rem;flex-wrap:wrap;
  padding:.95rem 1.1rem;font-weight:600;font-size:1.05rem}
.pquiz>summary::-webkit-details-marker{display:none}
.pquiz>summary:focus-visible{outline:2px solid var(--blue);outline-offset:-3px}
.pquiz>summary .pq-qic{flex:none;width:42px;height:42px;border-radius:6px;display:flex;align-items:center;
  justify-content:center;background:var(--amber-surface);border:1px solid var(--amber-dark);color:var(--amber)}
.pquiz>summary .pqs-t{flex:1;min-width:150px}
.pquiz>summary .pqs-n{flex:none;font-family:var(--font-display);font-size:.85rem;font-weight:700;
  letter-spacing:.03em;color:var(--amber);border:1.5px solid var(--amber);border-radius:5px;
  padding:.32rem .75rem;white-space:nowrap}
/* « Commencer » : l'action la plus visible de la page (bouton plein rouge) */
.pquiz>summary .pqs-b{font-family:var(--font-body);font-size:1.02rem;font-weight:700;letter-spacing:.01em;
  color:#fff;background:#e01b1e;border:none;border-radius:5px;
  padding:.68rem 1.5rem;min-height:44px;display:inline-flex;align-items:center;white-space:nowrap;
  transition:background .15s}
.pquiz>summary:hover .pqs-b{background:#f03033}
.pquiz[open]>summary{border-bottom:1px solid var(--border)}
.pqbody{padding:1rem 1.1rem 1.2rem}
.pq{padding:.9rem 0;border-bottom:1px solid var(--border)}
.pq:first-child{padding-top:.2rem}
.pq-q{font-weight:600;margin-bottom:.6rem;line-height:1.5}
.pq-q b{color:var(--accent-l);margin-right:.2rem}
.pq-opts{display:flex;flex-direction:column;gap:.45rem}
.pq-opt{display:flex;align-items:center;gap:.6rem;background:var(--bg-2);border:1px solid var(--border);
  border-radius:10px;padding:.6rem .8rem;cursor:pointer;transition:.12s}
.pq-opt:hover{border-color:var(--dim)}
.pq-opt input{position:absolute;opacity:0;width:0;height:0}
.pq-mark{flex:none;width:20px;height:20px;border:2px solid var(--dim);border-radius:50%;transition:.12s}
.pq-opt input:checked~.pq-mark{border-color:var(--brand);background:radial-gradient(circle,var(--brand) 42%,transparent 46%)}
.pq-txt{flex:1}
.pq.answered .pq-opt{cursor:default}
.pq-opt.good{border-color:#16a34a;background:rgba(34,197,94,.12)}
.pq-opt.good .pq-mark{border-color:#16a34a;background:#16a34a}
.pq-opt.bad{border-color:var(--brand);background:rgba(210,35,37,.12)}
.pq-opt.bad .pq-mark{border-color:var(--brand);background:var(--brand)}
/* bandeau de réponse immédiate */
.pq-fb{display:none;align-items:center;gap:.45rem;margin-top:.6rem;font-weight:800;
  font-family:var(--font-display);font-size:.85rem;letter-spacing:.02em;text-transform:uppercase}
.pq-fb.on{display:flex}
.pq-fb.ok{color:#4ade80}
.pq-fb.no{color:var(--accent-l)}
.pq-fb .pq-fi{display:inline-flex}
/* ===== nouveaux types de questions ===== */
.pq-type{display:inline-block;font-size:.75rem;font-weight:800;letter-spacing:.5px;text-transform:uppercase;
  background:var(--card-2);color:var(--muted);border:1px solid var(--border);border-radius:6px;padding:.12rem .45rem;margin-right:.45rem;vertical-align:.1em}
/* pondération affichée AVANT de répondre (barème transparent : 1 pt / 2 pts) */
.pq-pts{display:inline-block;font-size:.72rem;font-weight:800;letter-spacing:.4px;text-transform:uppercase;
  color:var(--dim);border:1px dashed var(--border);border-radius:6px;padding:.12rem .4rem;margin-right:.45rem;vertical-align:.1em;white-space:nowrap}
.pq-hint{display:block;margin-top:.25rem;font-size:.82rem;font-weight:500;color:var(--dim)}
/* bloc « détail / photo » d'une question : bouton repliable, ou affiché
   directement quand l'image est essentielle pour répondre (imgEssentiel) */
.pq-detail-wrap{margin:.5rem 0 .2rem}
.pq-detail-btn{display:inline-flex;align-items:center;gap:.4rem;cursor:pointer;
  font-size:.85rem;font-weight:700;color:var(--muted);background:var(--card-2);
  border:1px solid var(--border);border-radius:8px;padding:.4rem .7rem}
.pq-detail-btn:hover{color:#fff;border-color:var(--accent-l)}
.pq-detail-btn .pq-detail-ico{font-size:.95rem}
.pq-detail-btn.open{color:#fff;border-color:var(--accent-l)}
.pq-detail{margin:.55rem 0 .2rem;padding:.7rem .8rem;border:1px solid var(--border);
  border-radius:10px;background:rgba(255,255,255,.03)}
.pq-detail-ess{border-color:var(--accent-l);background:rgba(214,72,72,.06)}
.pq-detail-txt{margin:0 0 .5rem;font-size:1rem;line-height:1.55;color:#dbe4f0}
.pq-detail-txt:last-child{margin-bottom:0}
.pq-img{display:block;width:100%;max-width:520px;height:auto;border-radius:8px;
  border:1px solid var(--border);margin:.4rem 0 0;cursor:zoom-in}
.pq-img+.pq-img{margin-top:.5rem}
/* vrai / faux : deux options côte à côte */
.pq-opts-vf{flex-direction:row}
.pq-opts-vf .pq-opt{flex:1;justify-content:center;max-width:180px}
/* cases à cocher (plusieurs réponses) */
.pq-mark.pq-sq{border-radius:6px;display:flex;align-items:center;justify-content:center}
.pq-opt input:checked~.pq-mark.pq-sq{background:var(--brand);border-color:var(--brand)}
.pq-opt input:checked~.pq-mark.pq-sq::after{content:'✓';color:#fff;font-size:.8rem;font-weight:900;line-height:1}
.pq-opt.missed{border-color:#16a34a;border-style:dashed;background:rgba(34,197,94,.07)}
.pq-opt.missed .pq-txt::after{content:' (vraie — non cochée)';color:#4ade80;font-size:.8rem;font-weight:700}
.pq-actions-q{display:flex;gap:.6rem;margin-top:.7rem}
.pq-actions-q .btn{padding:.45rem 1rem;font-size:.85rem}
.pq-actions-q .btn:disabled{opacity:.45;cursor:default}
/* remise en ordre : étapes à toucher dans l'ordre */
.pq-steps{display:flex;flex-direction:column;gap:.45rem}
.pq-step{display:flex;align-items:center;gap:.6rem;text-align:left;width:100%;cursor:pointer;
  background:var(--bg-2);border:1px solid var(--border);border-radius:10px;padding:.55rem .7rem;
  color:var(--text);font:inherit;font-size:.92rem;line-height:1.35;transition:border-color .12s,background .12s}
.pq-step:hover:not(:disabled){border-color:var(--dim)}
.pq-step .pq-num{flex:none;min-width:26px;height:26px;display:flex;align-items:center;justify-content:center;
  border:2px solid var(--dim);border-radius:8px;font-size:.8rem;font-weight:800;color:var(--muted);padding:0 .3rem}
.pq-step.picked{border-color:var(--accent-l)}
.pq-step.picked .pq-num{border-color:var(--accent-l);background:rgba(210,35,37,.16);color:var(--accent-l)}
.pq-step.good{border-color:#16a34a;background:rgba(34,197,94,.12)}
.pq-step.good .pq-num{border-color:#16a34a;background:#16a34a;color:#fff}
.pq-step.bad{border-color:var(--brand);background:rgba(210,35,37,.12)}
.pq-step.bad .pq-num{border-color:var(--brand);background:var(--brand);color:#fff;white-space:nowrap}
.pq-step:disabled{cursor:default}
.pq-ol{margin:.2rem 0 .6rem;padding-left:1.3rem}
.pq-ol li{margin:.2rem 0}
/* association : paires paramètre ↔ valeur */
.pq-pairs{display:flex;flex-direction:column;gap:.45rem}
.pq-pair{display:flex;align-items:center;gap:.7rem;flex-wrap:wrap;background:var(--bg-2);
  border:1px solid var(--border);border-radius:10px;padding:.5rem .7rem}
.pq-pl{flex:1;min-width:180px;font-size:.9rem;line-height:1.3}
.pq-sel{flex:none;max-width:100%;background:var(--card-2);color:var(--text);border:1px solid var(--border);
  border-radius:8px;padding:.4rem .5rem;font:inherit;font-size:.88rem}
.pq-sel:disabled{opacity:.8}
.pq-pair.good{border-color:#16a34a;background:rgba(34,197,94,.12)}
.pq-pair.bad{border-color:var(--brand);background:rgba(210,35,37,.12)}
.pq-cor{flex-basis:100%;color:#4ade80;font-size:.82rem;font-weight:700}
.pq-cor:empty{display:none}
/* mode révision : questions masquées */
.pq.pq-hidden{display:none}
/* attestation verrouillée : bouton gris désactivé, mais texte lisible */
.attest-btn.attest-locked{background:var(--locked-dark);border:1px solid var(--border-neutral);
  color:#aeb4bb;box-shadow:none;cursor:not-allowed;transform:none}
.attest-btn.attest-locked:hover{background:var(--locked-dark);transform:none}
/* quiz éclair : nouveaux types */
.qhint{color:var(--dim);font-size:.85rem;margin:-.4rem 0 .8rem}
.qvald{margin-top:.9rem}
.qopt.sel{border-color:var(--accent-l);background:rgba(210,35,37,.10)}
.qopt.sel::after{content:' ✓';color:var(--accent-l);font-weight:900}
.qopt.missed{border-color:#16a34a;border-style:dashed}
.qopt.missed::after{content:' (vraie — non cochée)';color:#4ade80;font-size:.8rem;font-weight:700}
.qsteps{margin:.2rem 0 .4rem}
/* explication = citation de la procédure (toujours affichée après réponse) */
.pq-exp{display:none;margin-top:.5rem;font-size:1.08rem;line-height:1.6;color:#dbe4f0;
  background:rgba(251,191,36,.07);border:1.5px solid #fbbf24;border-radius:10px;padding:.7rem .85rem}
.pq-exp.on{display:block}
.pq-ref{display:block;font-size:.8rem;text-transform:uppercase;letter-spacing:.07em;
  color:#fbbf24;font-weight:800;margin-bottom:.4rem}
/* bonne réponse : l'encadré « Référence à la procédure » passe en vert (+ animation verte) */
.pq.correct .pq-exp{color:#bbf7d0;border-color:#16a34a;background:rgba(34,197,94,.10);
  animation:pqGreen .5s ease}
.pq.correct .pq-ref{color:#4ade80}
@keyframes pqGreen{from{background:rgba(34,197,94,.32);border-color:#22c55e}
  to{background:rgba(34,197,94,.10);border-color:#16a34a}}
.pq-actions{display:flex;align-items:center;gap:.7rem;flex-wrap:wrap;margin-top:1rem}
.pq-score{font-weight:800;font-family:var(--font-display);letter-spacing:.02em}
.pq-score.perfect,.pq-score.pass{color:#4ade80}
.pq-score.fail{color:var(--accent-l)}
/* barre de progression du quiz de fiche (part des questions répondues) —
   verte : elle mesure l'avancement de la FORMATION (vers l'attestation) */
.pq-prog{height:6px;background:var(--card-2);border:1px solid var(--border);border-radius:50px;overflow:hidden;margin-bottom:.9rem}
.pq-prog i{display:block;height:100%;width:0;background:#10b981;border-radius:50px;transition:width .25s ease}
/* message discret de mi-parcours (une seule fois par tentative) */
.pq-mid{display:none;font-size:.85rem;color:var(--muted);margin:-.4rem 0 .8rem}
.pq-mid.on{display:block}
/* résumé de fin de quiz : niveau de maîtrise + comparaison factuelle */
.pq-summary{display:none;margin-top:1rem;padding:.75rem .9rem;background:var(--card-2);
  border:1px solid var(--border);border-left:3px solid var(--dim);border-radius:10px;
  font-size:.95rem;line-height:1.55}
.pq-summary.on{display:block}
.pq-summary b{font-family:var(--font-display);letter-spacing:.02em}
.pq-summary.s-ok{border-left-color:#16a34a}
.pq-summary.s-ok b{color:#4ade80}
.pq-summary.s-mid{border-left-color:#fbbf24}
.pq-summary.s-mid b{color:#fbbf24}
.pq-summary.s-low{border-left-color:var(--accent)}
.pq-summary.s-low b{color:var(--accent-l)}
.pq-sum-cmp{display:block;margin-top:.35rem;font-size:.85rem;color:var(--muted)}

/* ===== Évaluation des questions de quiz (pouce 👍/👎 + commentaire) =====
   Les couleurs passent par var(--…) → s'adaptent automatiquement au thème clair. */
.qrate{margin-top:.9rem;padding:.65rem .8rem;background:var(--card-2);border:1px solid var(--border);border-radius:10px}
.pq .qrate{display:none}                         /* quiz de fiche : révélé une fois la question répondue */
.pq.answered .qrate{display:block;animation:qrateIn .25s ease}
@keyframes qrateIn{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
.qrate-ask{display:flex;align-items:center;gap:.6rem;flex-wrap:wrap}
.qrate-lbl{font-size:.86rem;font-weight:700;color:var(--muted)}
.qrate-btns{display:inline-flex;gap:.4rem;margin-left:auto}
.qrate-btn{display:inline-flex;align-items:center;justify-content:center;width:40px;height:34px;padding:0;
  border-radius:9px;border:1px solid var(--border);background:var(--card);color:var(--muted);cursor:pointer;transition:.15s}
.qrate-btn:hover{transform:translateY(-1px);color:var(--text);border-color:var(--dim)}
.qrate-btn.qr-up.sel{color:var(--success);border-color:var(--success);background:rgba(34,197,94,.14)}
.qrate-btn.qr-down.sel{color:var(--accent-l);border-color:var(--accent);background:rgba(210,35,37,.12)}
.qrate-more{margin-top:.6rem}
.qrate-more[hidden]{display:none}
.qrate-txt{width:100%;min-height:2.4rem;padding:.55rem .7rem;font-family:var(--font-body);font-size:.95rem;
  color:var(--text);background:var(--bg-2);border:1px solid var(--border);border-radius:9px;resize:vertical}
.qrate-txt:focus{border-color:var(--brand);background:var(--card);outline:none;box-shadow:0 0 0 3px rgba(210,35,37,.12)}
.qrate-act{display:flex;align-items:center;gap:.7rem;margin-top:.5rem;flex-wrap:wrap}
.qrate .qrate-send{padding:.5rem .95rem;font-size:.85rem}
.qrate-msg{font-size:.82rem;color:var(--muted)}
.qrate-thanks{display:flex;align-items:center;gap:.4rem;margin:.15rem 0;font-size:.9rem;font-weight:700;color:var(--success)}
.qrate-thanks .qrate-defer{font-weight:600;color:var(--muted)}
.qrate-done{border-color:var(--success);background:rgba(34,197,94,.08)}

/* ===== Assistant procédures (chatbot hors-ligne) ===== */
.cbbtn{position:fixed;right:18px;bottom:18px;z-index:1100;width:56px;height:56px;border-radius:50%;
  border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;color:#fff;
  background:linear-gradient(160deg,var(--brand),#9e1b1d);box-shadow:0 8px 22px rgba(210,35,37,.45);transition:.18s}
@media(max-width:640px){.cbbtn{width:48px;height:48px;right:12px;bottom:12px}}
.cbbtn:hover{transform:translateY(-2px) scale(1.04)}
.cbbtn.hide{display:none}
.cbpanel{position:fixed;right:18px;bottom:18px;z-index:1101;width:min(380px,calc(100vw - 24px));
  height:min(560px,calc(100vh - 90px));display:none;flex-direction:column;overflow:hidden;
  background:var(--card);border:1px solid var(--border);border-radius:16px;box-shadow:0 18px 50px rgba(0,0,0,.55)}
.cbpanel.on{display:flex}
.cbhead{display:flex;align-items:center;gap:.5rem;padding:.7rem .9rem;border-bottom:1px solid var(--border);
  background:linear-gradient(160deg,rgba(210,35,37,.16),rgba(17,24,39,.4))}
.cbhead b{font-family:var(--font-display);text-transform:uppercase;letter-spacing:.04em;font-size:.95rem}
.cboff{font-size:.75rem;font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:var(--success);
  background:rgba(16,185,129,.15);border:1px solid rgba(16,185,129,.35);padding:.08rem .45rem;border-radius:50px}
.cbx{margin-left:auto;width:32px;height:32px;display:inline-flex;align-items:center;justify-content:center;
  border:none;background:transparent;color:var(--muted);cursor:pointer;border-radius:8px}
.cbx:hover{color:#fff;background:rgba(255,255,255,.08)}
.cbbody{flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch;padding:.9rem;display:flex;flex-direction:column;gap:.7rem}
.cbmsg{max-width:92%;font-size:.9rem;line-height:1.5}
.cbmsg p{margin:0 0 .4rem}
.cbmsg.user{align-self:flex-end;background:var(--brand);color:#fff;padding:.5rem .8rem;border-radius:14px 14px 4px 14px}
.cbmsg.bot{align-self:flex-start;background:var(--bg-2);border:1px solid var(--border);padding:.6rem .8rem;border-radius:14px 14px 14px 4px}
.cbans{display:flex;gap:.5rem;margin:.45rem 0;padding:.5rem .6rem;background:var(--card-2);border:1px solid var(--border);border-radius:10px}
.cbk{flex:none;font-size:.72rem;font-weight:800;letter-spacing:.04em;text-transform:uppercase;color:var(--accent-l);
  background:rgba(210,35,37,.12);border:1px solid rgba(210,35,37,.3);border-radius:6px;padding:.1rem .4rem;height:fit-content}
.cbtxt{flex:1;font-size:.86rem;line-height:1.45}
.cbtxt .cbhl,.cbmsg.bot .cbhl{background:#fde047;color:#111827;border-radius:3px;padding:0 .12em;font-weight:700;box-decoration-break:clone;-webkit-box-decoration-break:clone}
/* Assistant IA (bêta) */
.cbai{margin-left:auto;background:transparent;border:1px solid var(--border);color:var(--muted);
  border-radius:8px;font-weight:800;font-size:.74rem;letter-spacing:.6px;padding:.18rem .42rem;cursor:pointer}
.cbai:hover{color:var(--text)}
.cbai.on{background:#1d4ed8;border-color:#1d4ed8;color:#fff}
.cbhead .cbx{margin-left:.4rem}
.cbprog{height:6px;background:var(--border);border-radius:4px;overflow:hidden;margin:.4rem 0 .2rem}
.cbprog i{display:block;height:100%;width:0;background:#1d4ed8;transition:width .25s}
.cbprogt{font-size:.72rem;color:var(--muted)}
.cbmono{font-family:ui-monospace,monospace;font-size:.78em;color:var(--muted)}
.cbtyping::after{content:'▍';animation:cbblink 1s steps(2) infinite;margin-left:1px}
@keyframes cbblink{50%{opacity:0}}
.cbsources{margin-top:.45rem;display:flex;flex-direction:column;gap:.18rem;font-size:.76rem}
.cbsources span{color:var(--dim);font-weight:700}
.cbsources a{color:var(--accent-l);font-weight:600;text-decoration:none}
.cbopts{display:flex;flex-direction:column;gap:.35rem;margin-top:.4rem}
.cbopt{display:flex;flex-direction:column;align-items:flex-start;gap:.1rem;text-align:left;cursor:pointer;
  background:var(--card-2);border:1px solid var(--border);border-radius:10px;padding:.5rem .7rem;color:var(--text)}
.cbopt:hover{border-color:#1d4ed8}
.cbopt b{font-size:.9rem}
.cbopt span{font-size:.74rem;color:var(--muted)}
.cbmetrics{margin-top:.35rem;font-size:.72rem;color:var(--muted);line-height:1.4}
.cbx2{background:transparent;border:1px solid var(--border);border-radius:6px;color:var(--accent-l);
  cursor:pointer;font-size:.7rem;font-weight:700;padding:0 .35rem}
.cbexp{width:100%;box-sizing:border-box;font-family:ui-monospace,monospace;font-size:.7rem;
  background:#0a0e17;color:#cbd5e1;border:1px solid var(--border);border-radius:8px;padding:.5rem;resize:vertical}
.cbdl{color:var(--accent-l);font-weight:700;font-size:.8rem}
.cbsrc{display:block;margin-top:.3rem;font-size:.76rem;font-weight:700;color:var(--accent-l)}
.cbnote{margin-top:.5rem!important;font-size:.74rem;color:var(--dim)}
/* Résultats regroupés par procédure (repliables) */
.cbgrp{margin:.45rem 0;border:1px solid var(--border);border-radius:10px;overflow:hidden;background:var(--bg-2)}
.cbgrp-h{display:flex;align-items:center;gap:.5rem;width:100%;text-align:left;cursor:pointer;
  background:var(--card-2);border:0;border-bottom:1px solid transparent;padding:.5rem .6rem;color:var(--text);
  font-size:.84rem;font-weight:700;transition:background .15s}
.cbgrp-h:hover{background:var(--bg-2)}
.cbgrp.open .cbgrp-h{border-bottom-color:var(--border)}
.cbgrp-ar{flex:none;color:var(--accent-l);font-size:.8rem;transition:transform .15s}
.cbgrp.open .cbgrp-ar{transform:rotate(90deg)}
.cbgrp-t{flex:1;line-height:1.3}
.cbgrp-n{flex:none;font-size:.7rem;font-weight:800;color:var(--muted);background:var(--card-2);
  border-radius:999px;min-width:1.3rem;text-align:center;padding:.05rem .4rem}
.cbgrp-b{display:none;padding:.1rem .55rem .35rem}
.cbgrp.open .cbgrp-b{display:block}
.cbgrp-b .cbans{margin:.4rem 0}
/* Attestation de lecture (par procédure) — carte grise « verrouillée » tant
   que le quiz n'est pas complété ; le texte reste pleinement lisible. */
.attest-row{display:flex;align-items:flex-start;gap:.9rem;flex-wrap:wrap;margin-bottom:.9rem}
.attest-ic{flex:none;width:42px;height:42px;border-radius:6px;display:flex;align-items:center;
  justify-content:center;background:var(--locked-dark);color:#e3e7ec}
.attest-state{flex:none;margin-left:auto;font-family:var(--font-display);font-size:.85rem;font-weight:700;
  letter-spacing:.04em;color:#d4d8dd;border:1.5px solid var(--locked);border-radius:5px;
  padding:.32rem .75rem;white-space:nowrap}
.attest-lead{flex:1;min-width:230px;color:var(--text-main);font-size:1.05rem;line-height:1.6;margin:0}
.scbody>.attest-lead{margin:.1rem 0 .9rem}
.attest-btn{display:inline-flex;align-items:center;gap:.5rem;background:#047857;border-radius:5px}
.attest-btn:hover{background:#059669}
.attest-btn:disabled{cursor:default}
/* formulaire d'attestation : nom + autocomplétion employés */
.attest-form{position:relative;display:flex;flex-direction:column;gap:.2rem;max-width:440px}
.attest-field{display:flex;flex-direction:column;gap:.3rem}
.attest-field>span{font-size:.85rem;font-weight:700;color:var(--muted)}
.attest-name{background:var(--card-2);border:1px solid var(--border);border-radius:10px;color:var(--text);
  font:inherit;font-size:1rem;padding:.6rem .75rem}
.attest-name:focus{outline:none;border-color:#10b981}
.attest-sugg{position:absolute;left:0;right:0;top:0;z-index:20;max-height:230px;overflow:auto;
  background:var(--card);border:1px solid var(--border);border-radius:10px;box-shadow:0 10px 30px rgba(0,0,0,.4)}
.attest-sugg[hidden]{display:none}
.attest-item{display:block;width:100%;text-align:left;background:transparent;border:none;color:var(--text);
  font:inherit;font-size:.94rem;padding:.5rem .75rem;cursor:pointer;border-bottom:1px solid var(--border)}
.attest-item:last-child{border-bottom:none}
.attest-item:hover,.attest-item:focus{background:var(--card-2)}
.attest-item b{color:#34d399}
.attest-hint{font-size:.82rem;color:var(--dim);margin:.15rem 0 .5rem}
.attest-hint.ok{color:#34d399;font-weight:700}
.attest-hint.no{color:#fca5a5;font-weight:700}
/* Zone de signature (dessin au doigt). touch-action:none → on signe sans
   faire défiler la page. Fond clair : la signature encrée reste lisible. */
.attest-sigfield{margin-top:.35rem}
.sigpad-wrap{position:relative}
.sigpad{width:100%;height:150px;display:block;background:#f8fafc;border:1px dashed var(--border);
  border-radius:10px;touch-action:none;cursor:crosshair}
.sig-clear{position:absolute;top:.4rem;right:.4rem;font:inherit;font-size:.76rem;font-weight:700;
  color:var(--muted);background:rgba(255,255,255,.85);border:1px solid var(--border);border-radius:8px;
  padding:.2rem .55rem;cursor:pointer}
.sig-clear:hover{color:#0f172a;border-color:var(--brand)}
.sig-hint{margin:.3rem 0 .5rem}
/* Fenêtre de confirmation avant d'attester (attestConfirm) : temps de lecture
   du document mis en évidence + « J'ai bien lu et compris ». Posée sur <body>,
   au-dessus de l'assistant (1100), comme le lecteur plein écran. */
.attestcf{position:fixed;inset:0;z-index:1200;display:none;align-items:flex-start;justify-content:center;
  overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;
  padding:max(1rem,env(safe-area-inset-top)) 1rem max(1rem,env(safe-area-inset-bottom));
  background:rgba(5,8,14,.86);backdrop-filter:blur(3px)}
.attestcf.on{display:flex}
.attestcf-box{position:relative;width:100%;max-width:460px;margin:auto;padding:1.15rem 1.1rem 1rem;
  background:var(--card);border:1px solid var(--border);border-radius:16px;box-shadow:0 24px 60px rgba(0,0,0,.5);
  display:flex;flex-direction:column;gap:.65rem}
.attestcf-box h3{margin:0 2.4rem .05rem 0;font-family:var(--font-display);font-size:1.4rem;font-weight:800;
  letter-spacing:.02em;text-transform:uppercase;line-height:1.1;color:var(--strong)}
.attestcf-x{position:absolute;top:.6rem;right:.6rem;width:40px;height:40px;display:inline-flex;align-items:center;
  justify-content:center;border:none;border-radius:50%;color:var(--text);background:var(--card-2);cursor:pointer}
.attestcf-x:hover{background:var(--brand);color:#fff}
.attestcf-x svg{width:16px;height:16px}
.attestcf-rt{display:flex;flex-direction:column;gap:.3rem;padding:.9rem .95rem;border-radius:14px;
  border:1.5px solid var(--border);background:var(--card-2)}
.attestcf-k{display:inline-flex;align-items:center;gap:.4rem;font-size:.88rem;font-weight:700;color:var(--muted)}
.attestcf-k svg{width:15px;height:15px;flex:none;color:var(--amber)}
.attestcf-v{font-family:var(--font-display);font-size:2.7rem;font-weight:800;line-height:1;letter-spacing:.01em;
  color:var(--strong);font-variant-numeric:tabular-nums}
.attestcf-est{font-size:.9rem;font-weight:600;color:var(--muted)}
.attestcf-est b{color:var(--text);font-weight:800}
.attestcf-rt .rt-prog{flex:none;height:8px;margin:.2rem 0 .05rem;border-radius:5px;background:rgba(127,127,127,.25)}
.attestcf-rt[data-state="ok"] .rt-prog i{background:#34d399}
.attestcf-rt[data-state="none"],.attestcf-rt[data-state="short"]{border-color:var(--amber);background:rgba(255,176,0,.1)}
.attestcf-rt[data-state="none"] .attestcf-v,.attestcf-rt[data-state="short"] .attestcf-v{color:var(--amber)}
.attestcf-rt[data-state="none"] .attestcf-v{font-size:1.7rem}
.attestcf-rt[data-state="ok"]{border-color:#10b981;background:rgba(16,185,129,.08)}
.attestcf-rt[data-state="ok"] .attestcf-v{color:#34d399}
.attest-rt-note{display:none;margin:.2rem 0 0;font-size:.92rem;line-height:1.45;font-weight:700;color:#fbbf24}
.attest-rt-note.rt-ok{color:#34d399}
.attestcf-rt[data-state="none"] .rt-none,.attestcf-rt[data-state="short"] .rt-short,
.attestcf-rt[data-state="ok"] .rt-ok{display:block}
.attest-rt-open{align-self:flex-start;display:inline-flex;align-items:center;gap:.4rem;min-height:44px;margin-top:.3rem;
  padding:.45rem .9rem;font:inherit;font-size:.92rem;font-weight:700;color:var(--text);background:var(--card);
  border:1px solid var(--border);border-radius:10px;cursor:pointer}
.attest-rt-open svg{width:16px;height:16px}
.attest-rt-open:hover{border-color:var(--brand)}
.attestcf-rt[data-state="ok"] .attest-rt-open{display:none}
.attestcf-why{margin:0;font-size:.96rem;line-height:1.5;color:var(--lead)}
.attest-ack{display:flex;align-items:flex-start;gap:.7rem;margin:0;padding:.75rem .85rem;min-height:48px;
  border:1.5px solid var(--border);border-radius:12px;cursor:pointer;font-size:1rem;line-height:1.45;color:var(--text)}
.attest-ack input{flex:none;width:1.5rem;height:1.5rem;margin:.05rem 0 0;accent-color:var(--brand);cursor:pointer}
.attest-ack:has(input:checked){border-color:#10b981;background:rgba(16,185,129,.08)}
.attest-ack.no{border-color:#ef4444;background:rgba(239,68,68,.08)}
.attest-ack-hint{margin:0}
.attestcf-actions{display:flex;flex-wrap:wrap;gap:.6rem;justify-content:flex-end;margin-top:.15rem}
.attestcf-actions .btn{min-height:46px}
.attestcf-actions .attestcf-ok{flex:1 1 auto;justify-content:center}
.attestcf-ok svg{width:18px;height:18px}
:root[data-theme="light"] .attest-rt-note{color:#92400e}
:root[data-theme="light"] .attest-rt-note.rt-ok{color:#047857}
:root[data-theme="light"] .attestcf-rt[data-state="none"] .attestcf-v,
:root[data-theme="light"] .attestcf-rt[data-state="short"] .attestcf-v{color:#92400e}
:root[data-theme="light"] .attestcf-rt[data-state="ok"] .attestcf-v{color:#047857}
:root[data-theme="light"] .attest-ack-hint.no{color:#b91c1c}
/* Aperçu de l'attestation affiché automatiquement après l'envoi. */
.attest-preview{margin:.9rem 0 .3rem}
.attest-preview-load{color:var(--muted);font-size:.9rem;padding:.6rem 0}
.attest-doc{display:block;width:100%;max-width:480px;border:1px solid var(--border);border-radius:12px;
  box-shadow:0 10px 34px rgba(0,0,0,.4);background:#fff}
.attest-send{align-self:flex-start;margin-top:.2rem}
.attest-msg{font-size:.9rem;font-weight:600;margin-top:.5rem;min-height:1.2em}
.attest-msg.no{color:#fca5a5}
.attest-done{display:flex;align-items:center;gap:.8rem;background:rgba(52,211,153,.1);border:1px solid rgba(52,211,153,.45);
  border-radius:12px;padding:.85rem 1rem}
.attest-done-ic{flex:none;width:34px;height:34px;border-radius:50%;background:#10b981;color:#fff;font-weight:900;
  display:flex;align-items:center;justify-content:center;font-size:1.1rem}
.attest-done strong{display:block;font-size:1rem}
.attest-done span{color:var(--muted);font-size:.9rem;line-height:1.4}
.attest-done.attest-wait{background:rgba(251,191,36,.07);border-color:rgba(251,191,36,.4)}
.attest-done.attest-wait .attest-done-ic{background:#b45309}
.attest-done .aq-msg{display:block}
.attest-done .attest-retry{margin-top:.6rem;padding:.4rem .95rem;font-size:.85rem;background:#b45309;border-color:#b45309}
.attest-done .attest-retry:hover{background:#92400e;border-color:#92400e}
.attest-done .attest-retry:disabled{opacity:.6;cursor:default;transform:none}
.attest-next{margin:.6rem 0 0;font-size:.9rem}
.attest-next a{color:#34d399;font-weight:700;display:inline-flex;align-items:center;gap:.3rem}
.attest-pdfs{margin-top:.7rem;display:flex;flex-wrap:wrap;gap:.5rem;align-items:center}
.attest-pdf-btn{display:inline-flex;align-items:center;gap:.4rem;background:var(--card-2);
  border:1px solid var(--border);color:var(--text);border-radius:10px;padding:.5rem .8rem;
  font:inherit;font-size:.86rem;font-weight:700;cursor:pointer}
.attest-pdf-btn:hover{border-color:#34d399;color:#34d399}
.attest-pdf-hint{flex-basis:100%;font-size:.78rem;color:var(--dim);margin:.1rem 0 0}
.attest-pdf-msg{flex-basis:100%;font-size:.82rem;color:#fca5a5;min-height:1.1em}
/* Signature prise mais AUCUN support de stockage n'a accepté l'écriture : état
   d'alerte, jamais « enregistrée ». Le seul geste utile est d'emporter le PDF. */
.attest-done.attest-nosave{background:rgba(240,82,82,.1);border-color:rgba(240,82,82,.5)}
.attest-done.attest-nosave .attest-done-ic{background:#dc2626}
.aq-acts{margin-top:.7rem;display:flex;flex-wrap:wrap;gap:.75rem;align-items:center}
.aq-acts .aq-link{color:#f5a623;font-weight:700;font-size:.88rem;display:inline-flex;align-items:center;gap:.3rem}
/* « Mon suivi » : attestations signées en attente de réseau, et refusées. */
.sv-aq{margin:0 0 1rem;border-radius:14px;padding:.95rem 1.05rem;
  background:rgba(245,166,35,.09);border:1px solid rgba(245,166,35,.42)}
.sv-aq.bad{background:rgba(240,82,82,.09);border-color:rgba(240,82,82,.45)}
.sv-aq b{display:block;font-size:1rem;margin-bottom:.2rem}
.sv-aq p{color:var(--muted);font-size:.89rem;line-height:1.45;margin:0 0 .6rem}
.sv-aq ul{list-style:none;margin:0 0 .7rem;padding:0;display:flex;flex-direction:column;gap:.35rem}
.sv-aq li{display:flex;flex-wrap:wrap;align-items:baseline;gap:.4rem;font-size:.88rem}
.sv-aq li .aqi-proc{font-weight:700}
.sv-aq li .aqi-meta{color:var(--dim);font-size:.8rem}
.sv-aq .sv-aq-btns{display:flex;flex-wrap:wrap;gap:.5rem;align-items:center}
.sv-aq .sv-aq-msg{flex-basis:100%;font-size:.82rem;color:var(--muted);min-height:1.1em;margin-top:.35rem}
.cbmore{display:none}
.cbmore.open{display:block}
/* ---------- Mon suivi (progression + résultats détaillés) ---------- */
.hero.herosm{padding:clamp(1.6rem,4vw,2.6rem) 0 1.2rem}
/* Formation = vert : le héros du suivi troque l'accent rouge pour le vert */
.hero-suivi .eyebrow{color:#34d399;border-color:rgba(16,185,129,.35);background:rgba(16,185,129,.08)}
.hero-suivi .eyebrow::before{background:#10b981}
.hero-suivi h1 .hl{color:#34d399}
.portal-suivi{display:flex;align-items:center;gap:.7rem;margin-top:1.2rem;padding:.85rem 1.1rem;
  background:var(--card);border:1px solid var(--border);border-radius:14px;color:var(--text);font-size:.94rem}
.portal-suivi svg:first-child{color:var(--success)}
.portal-suivi b{white-space:nowrap}
.portal-suivi span{color:var(--muted);flex:1;font-size:.85rem}
.portal-suivi svg:last-child{color:var(--accent-l)}
.portal-suivi:hover{border-color:rgba(16,185,129,.4)}
/* Télécharger l'application : même gabarit que les liens du portail, teinte
   accent (installation) plutôt que verte, et masqué si déjà installée. */
.portal-suivi.dl{cursor:pointer}
.portal-suivi.dl svg:first-child{color:var(--accent-l);width:19px;height:19px}
.portal-suivi.dl:hover{border-color:rgba(210,35,37,.4)}
.sv-sync{background:var(--card);border:1px solid var(--border);border-radius:14px;padding:1rem 1.1rem;margin:1.2rem 0}
/* action de formation : bouton vert (récupération de la progression) */
.sv-sync .btn{background:#047857}
.sv-sync .btn:hover{background:#059669}
.sv-sync b{font-size:.95rem}
.sv-sync p{color:var(--muted);font-size:.88rem;line-height:1.5;margin:.35rem 0 .7rem;max-width:560px}
.sv-form{position:relative;display:flex;flex-wrap:wrap;gap:.5rem}
/* Champ de nom amené à l'écran (focus, clavier) : jamais sous la barre
   collante — ni, dans la fiche, sous le bouton « Retour » collant —, sinon
   la liste des noms s'ouvrirait cachée. */
.sv-name{scroll-margin-top:calc(var(--appbar-h, 60px) + 16px)}
.attest-name{scroll-margin-top:calc(var(--appbar-h, 60px) + 80px)}
.sv-msg.warn{color:#fbbf24}
/* Avis « nouvelle version » (onglet resté ouvert pendant une mise en ligne) :
   au-dessus du bouton d'assistant, sous les vues plein écran. */
.newver{position:fixed;left:50%;bottom:calc(88px + env(safe-area-inset-bottom));transform:translateX(-50%);
  z-index:1150;display:flex;align-items:center;gap:.5rem;width:max-content;max-width:calc(100vw - 24px);
  padding:.35rem .35rem .35rem .9rem;background:#0b1016;color:#fff;border:1.5px solid var(--brand);
  border-radius:12px;box-shadow:0 10px 30px rgba(0,0,0,.5);font-size:.92rem;font-weight:700}
.newver-t{flex:1 1 auto;min-width:0;display:inline-flex;align-items:center;gap:.45rem}
.newver-t svg{flex:none;width:18px;height:18px;color:#ef5a5c}
.newver-go{flex:none;min-height:44px;padding:.4rem .9rem;border:none;border-radius:9px;background:var(--brand);
  color:#fff;font:inherit;font-weight:800;cursor:pointer}
.newver-x{flex:none;min-width:44px;min-height:44px;display:inline-flex;align-items:center;justify-content:center;
  background:none;border:none;color:#9aa7bd;cursor:pointer}
.newver-x svg{width:16px;height:16px}
@media print{.newver{display:none}}
:root[data-theme="light"] .sv-msg.warn{color:#92400e}
.sv-name{flex:1;min-width:200px;max-width:320px;background:var(--card-2);border:1px solid var(--border);
  border-radius:10px;color:var(--text);font:inherit;font-size:.95rem;padding:.55rem .75rem}
.sv-name:focus{outline:none;border-color:var(--accent)}
.sv-msg{font-size:.86rem;font-weight:600;margin-top:.5rem;min-height:1.1em}
.sv-msg.no{color:#fca5a5}
.sv-h2{font-family:var(--font-display);font-size:1.6rem;font-weight:800;margin:1.6rem 0 .2rem}
.sv-group{margin:1.4rem 0}
.sv-gbar{height:7px;background:var(--card-2);border-radius:99px;overflow:hidden;margin:.5rem 0 .3rem}
.sv-gfill{height:100%;background:var(--success);border-radius:99px;transition:width .4s}
.sv-gtxt{font-size:.82rem;color:var(--dim);margin:0 0 .7rem}
.sv-rows{display:flex;flex-direction:column;gap:.45rem}
.sv-row{display:flex;align-items:center;gap:.65rem;padding:.65rem .8rem;background:var(--card);
  border:1px solid var(--border);border-radius:12px;color:var(--text)}
.sv-row:hover{border-color:rgba(16,185,129,.4)}
.sv-row>svg{flex:none;color:var(--dim)}
.sv-dot{flex:none;width:8px;height:8px;border-radius:50%;background:var(--dim)}
.sv-t{flex:1;min-width:0}
.sv-t b{display:block;font-size:.92rem;line-height:1.25}
.sv-code{font-size:.72rem;color:var(--dim);letter-spacing:.04em}
.sv-badges{display:flex;flex-wrap:wrap;gap:.3rem;justify-content:flex-end}
.sv-b{display:inline-flex;align-items:center;gap:.25rem;font-size:.72rem;font-weight:700;
  padding:.18rem .5rem;border-radius:999px;border:1px solid var(--border);color:var(--muted);white-space:nowrap}
.sv-b svg{width:11px;height:11px}
.sv-b.sv-ok{color:#34d399;border-color:rgba(52,211,153,.4);background:rgba(52,211,153,.08)}
.sv-b.sv-pass{color:#a7f3d0;border-color:rgba(52,211,153,.25)}
.sv-b.sv-warn{color:#fbbf24;border-color:rgba(251,191,36,.35);background:rgba(251,191,36,.06)}
.sv-b.sv-rev{color:#fca5a5;border-color:rgba(252,165,165,.35)}
.sv-b.sv-mute{color:var(--dim)}
/* Bouton « PDF » d'une rangée de suivi : télécharge l'attestation (hors-ligne OK). */
.sv-pdf{flex:none;display:inline-flex;align-items:center;gap:.3rem;font-size:.72rem;font-weight:700;
  padding:.2rem .55rem;border-radius:999px;border:1px solid var(--border);color:#34d399;
  background:var(--card-2);cursor:pointer;white-space:nowrap;transition:border-color .15s,background .15s}
.sv-pdf:hover{border-color:#10b981;background:rgba(16,185,129,.1)}
.sv-pdf svg{width:12px;height:12px}
.sv-note{color:var(--dim);font-size:.82rem;margin:1.4rem 0 2rem;max-width:560px}
@media (max-width:640px){
  .sv-row{flex-wrap:wrap}
  .sv-t{flex-basis:calc(100% - 3rem)}
  .sv-badges{justify-content:flex-start;padding-left:1.35rem}
}
.cbmore-b{margin:.15rem 0 .25rem;font-size:.78rem;font-weight:700;color:var(--accent-l);
  background:transparent;border:0;cursor:pointer;padding:.1rem 0;text-decoration:underline}
.cbmore-b:hover{color:var(--text)}
.cbsugg{display:flex;flex-direction:column;gap:.35rem;margin-top:.5rem}
.cbchip{text-align:left;font-size:.82rem;color:var(--text);background:var(--card-2);border:1px solid var(--border);
  border-radius:9px;padding:.4rem .6rem;cursor:pointer;transition:.15s}
.cbchip:hover{border-color:var(--brand);color:#fff}
.cbform{display:flex;gap:.5rem;padding:.7rem;border-top:1px solid var(--border);background:var(--card)}
.cbform input{flex:1;background:var(--bg-2);border:1px solid var(--border);border-radius:10px;color:var(--text);
  padding:.55rem .7rem;font-size:.9rem;font-family:inherit}
.cbform input:focus{outline:none;border-color:var(--brand)}
.cbform button{flex:none;width:42px;border:none;border-radius:10px;background:var(--brand);color:#fff;font-size:1rem;cursor:pointer}
@media print{.cbbtn,.cbpanel{display:none!important}}

/* version (pied de page) */
.verfoot{color:var(--dim);font-size:.78rem}
.verfoot .ver{all:unset;color:var(--dim);font-size:inherit}
/* QR « partage » du pied de page : petite tuile blanche + légende */
.foot-qr{display:inline-flex;align-items:center;gap:.6rem;text-decoration:none;flex-basis:100%;margin-top:.4rem}
.foot-qr img{width:88px;height:88px;background:#fff;border:1px solid var(--border);border-radius:8px;padding:5px;display:block}
.foot-qr-txt{color:var(--dim);font-size:.78rem;line-height:1.35;font-weight:600}
.foot-qr:hover .foot-qr-txt{color:var(--muted)}

/* accessibilité : animations coupées si le système le demande */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}
  html{scroll-behavior:auto}
}
/* page quiz : puces de catégories (mêmes styles que les filtres) */
.qcatchips{margin-top:1.1rem;max-width:820px}
.offopt{display:flex;align-items:flex-start;gap:.45rem;font-size:.84rem;color:var(--muted);margin:.35rem 0 .1rem;cursor:pointer}
.offopt input{margin-top:.2rem;accent-color:var(--brand)}

/* ===== thème clair (surface / plein soleil) — l'en-tête reste noir ===== */
:root[data-theme="light"]{
  --app-bg:#f2f4f8;--surface:#ffffff;--surface-raised:#e9edf3;
  --text-main:#111827;--text-muted:#4b5563;--border-neutral:#c9d1da;
  --locked:#5b6470;--locked-dark:#e2e6ea;--pdf-well:#ccd1d8;
  --bg:#f2f4f8;--bg-2:#e9edf3;--card:#ffffff;--card-2:#e8ecf1;
  --text:#111827;--muted:#4b5563;--dim:#6b7280;--border:#d4dae2;
  --accent-l:#b81b1d;--success:#0e8a63;--strong:#111827;--lead:#374151;
  /* En thème clair, les cartes blanches ressortent déjà sur le fond gris :
     on garde ce rendu, avec une ombre douce pour l'effet « surélevé ». */
  --row-bg:#ffffff;--row-bg-h:#eef1f6;--row-bd:#cdd5e0;--row-code:#6b7280;
  --row-sh:0 1px 6px rgba(15,23,42,.08);
}
/* fiche de procédure en thème clair : mêmes fonctions, teintes assombries */
:root[data-theme="light"] .back{color:#1d5fb8}
:root[data-theme="light"] .back:hover{color:#0a3f8a}
:root[data-theme="light"] .pdfview>summary:hover{background:rgba(0,0,0,.04)}
:root[data-theme="light"] .pquiz>summary .pq-qic{background:#fff3d6;border-color:#e6c26a;color:#8a5a00}
:root[data-theme="light"] .pquiz>summary .pqs-n{color:#8a5a00;border-color:#b47d00}
:root[data-theme="light"] .attest-ic{color:#5b6470}
:root[data-theme="light"] .attest-state{color:#5b6470;border-color:#8b929c}
:root[data-theme="light"] .attest-btn.attest-locked{color:#5b6470}
:root[data-theme="light"] .hist th{color:#3b5e91}
:root[data-theme="light"] .hist td{color:#2a3138}
:root[data-theme="light"] .hist th,:root[data-theme="light"] .hist td{border-bottom-color:#e0a8a8}
:root[data-theme="light"] .hist tbody tr:last-child td{border-bottom:none}
:root[data-theme="light"] .hist td:first-child{color:#c00808}
:root[data-theme="light"] .hero-suivi .eyebrow,:root[data-theme="light"] .hero-suivi h1 .hl{color:#047857}
:root[data-theme="light"] .sv-pdf{color:#047857}
:root[data-theme="light"] body{
  background-image:radial-gradient(120% 60% at 85% -5%,rgba(210,35,37,.05),transparent 55%)}
:root[data-theme="light"] .chip.on{color:#b81b1d}
:root[data-theme="light"] .chip[data-cat]:not([data-cat=""]).on::before{background:#b81b1d}
:root[data-theme="light"] .appbar nav a{color:#c8d0dc}
/* La barre reste sombre en thème clair : le nom du travailleur garde un texte
   clair, sinon il disparaîtrait sur fond sombre. */
:root[data-theme="light"] .appbar .workerchip{color:#e5e9f0;border-color:rgba(255,255,255,.14)}
:root[data-theme="light"] .appbar .workerchip.anon{color:#c8d0dc}
:root[data-theme="light"] .qopt.ok,:root[data-theme="light"] .pq.correct .pq-exp{color:#065f46}
:root[data-theme="light"] .qopt.bad{color:#991b1b}
:root[data-theme="light"] .pill.epi,:root[data-theme="light"] .done-badge{color:#047857}
:root[data-theme="light"] .warn p{color:#991b1b}
:root[data-theme="light"] .pq-fb.ok,:root[data-theme="light"] .pq-cor,:root[data-theme="light"] .pq.correct .pq-ref,
:root[data-theme="light"] .pq-score.perfect,:root[data-theme="light"] .pq-score.pass{color:#047857}
:root[data-theme="light"] .pq-opt.missed .pq-txt::after,:root[data-theme="light"] .qopt.missed::after{color:#047857}
:root[data-theme="light"] .pq-exp{color:#92400e}
:root[data-theme="light"] .pq-ref{color:#b45309}
:root[data-theme="light"] .attest-item b,:root[data-theme="light"] .attest-hint.ok,
:root[data-theme="light"] .attest-next a,:root[data-theme="light"] .sv-b.sv-ok{color:#047857}
:root[data-theme="light"] .sv-b.sv-pass{color:#065f46}
:root[data-theme="light"] .sv-b.sv-warn{color:#92400e;border-color:rgba(180,83,9,.4);background:rgba(180,83,9,.06)}
:root[data-theme="light"] .sv-b.sv-rev{color:#b91c1c;border-color:rgba(185,28,28,.35)}
:root[data-theme="light"] .attest-msg.no,:root[data-theme="light"] .sv-msg.no,
:root[data-theme="light"] .attest-pdf-msg{color:#b91c1c}
:root[data-theme="light"] .attest-pdf-btn:hover{border-color:#0e8a63;color:#0e8a63}
:root[data-theme="light"] .offcard.install{background:linear-gradient(160deg,rgba(210,35,37,.08),rgba(255,255,255,.6))}
:root[data-theme="light"] .offcard{background:linear-gradient(160deg,rgba(210,35,37,.05),rgba(255,255,255,.6))}
:root[data-theme="light"] .offcard.ok{background:linear-gradient(160deg,rgba(16,185,129,.10),rgba(255,255,255,.6))}
:root[data-theme="light"] .pq-score.fail{color:#b81b1d}
:root[data-theme="light"] .pq-summary.s-ok{border-left-color:#0e8a63}
:root[data-theme="light"] .pq-summary.s-ok b{color:#047857}
:root[data-theme="light"] .pq-summary.s-mid{border-left-color:#b45309}
:root[data-theme="light"] .pq-summary.s-mid b{color:#b45309}
:root[data-theme="light"] .pq-summary.s-low b{color:#b81b1d}
:root[data-theme="light"] .qfb.ok{color:#047857}
:root[data-theme="light"] .qfb.no{color:#b91c1c}
:root[data-theme="light"] ::selection{color:#111827}
:root[data-theme="light"] .pdfbox{background:var(--card)}
:root[data-theme="light"] .pdfview>summary:hover{background:rgba(0,0,0,.04)}
:root[data-theme="light"] .gfig{border-color:var(--border)}
/* Lien croisé de secteur en fin de texte d'intro (les stats sont sur Mon suivi) */
.lead-x{color:var(--accent-l);font-weight:700;white-space:nowrap}
/* Ma progression : vit dans le bandeau du haut (.prgchip + .appbar-prg). */
/* Disponibilité hors-ligne (pack complet) : fine ligne en marge sous les filtres */
.offline-line{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap;
  margin:.7rem 0 0;font-size:.82rem;color:var(--dim);line-height:1.5}
.offline-line b{color:var(--muted);font-weight:700}
.offline-line .ol-chk{display:inline-flex;flex:none;color:#34d399}
.offline-line .ol-chk svg{width:13px;height:13px}
.offline-line .ol-btn{background:none;border:none;padding:.3rem .1rem;font:inherit;font-size:.82rem;
  font-weight:700;color:var(--text-muted);text-decoration:underline;cursor:pointer}
.offline-line .ol-btn:hover{color:var(--strong)}
:root[data-theme="light"] .offline-line .ol-chk{color:#047857}
/* Liste des employés absente de l'appareil : à régler AVANT de descendre. */
.offline-line.roster-line.warn{color:#fbbf24}
.offline-line.roster-line.warn b{color:#fbbf24}
.offline-line.roster-line.warn .ol-chk{color:#fbbf24;font-weight:900}
:root[data-theme="light"] .offline-line.roster-line.warn,:root[data-theme="light"] .offline-line.roster-line.warn b,
:root[data-theme="light"] .offline-line.roster-line.warn .ol-chk{color:#92400e}
@media(max-width:640px){
  /* la ligne coule comme du texte : coche, phrase et lien enchaînés */
  .offline-line{display:block}
  .offline-line .ol-chk{display:inline-flex;vertical-align:-2px;margin-right:.3rem}
  .offline-line .ol-btn{display:inline;padding:0 0 0 .25rem}
}
/* Mise en cache passive (auto / arrière-plan) : LIGNE MINCE tout en haut de
   la page, sous le bandeau — discrète ; le détail complet est dans
   l'infobulle et la pastille d'état du bandeau. */
.dl-line{display:flex;align-items:center;gap:.55rem;margin:.55rem 0 0;padding:.4rem .7rem;
  border:1px solid var(--border);border-radius:10px;background:var(--card-2);
  font-size:.78rem;color:var(--dim);line-height:1.4}
.dl-line .dl-ic{display:inline-flex;flex:none;color:var(--muted)}
.dl-line .dl-ic svg{width:14px;height:14px}
.dl-line .dl-txt{flex:0 1 auto;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dl-line .dl-txt b{color:var(--muted);font-weight:700}
.dl-line .dl-bar{flex:1;min-width:60px;height:4px;border-radius:999px;background:var(--surface-raised);
  border:1px solid var(--border);overflow:hidden}
.dl-line .dl-bar i{display:block;height:100%;width:0;background:var(--success);border-radius:999px;transition:width .3s ease}
.dl-line .ol-btn{flex:none;background:none;border:none;padding:.2rem .1rem;font:inherit;font-size:.78rem;
  font-weight:700;color:var(--text-muted);text-decoration:underline;cursor:pointer}
.dl-line .ol-btn:hover{color:var(--strong)}
@media(max-width:640px){
  /* icône + texte (élidé) + bouton sur la 1re rangée, barre pleine largeur dessous */
  .dl-line{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;
    font-size:.74rem;padding:.38rem .6rem;gap:.35rem .55rem}
  .dl-line .dl-ic{grid-row:1;grid-column:1}
  .dl-line .dl-txt{grid-row:1;grid-column:2}
  .dl-line .ol-btn{grid-row:1;grid-column:3}
  .dl-line .dl-bar{grid-row:2;grid-column:1 / -1}
}
@media (prefers-reduced-motion: reduce){
  .appbar-prg i,.prgchip .pc-bar i,.dl-line .dl-bar i{transition:none}
}
/* Palier « Section maîtrisée » (Mon suivi) */
.sv-master{display:inline-flex;align-items:center;gap:.3rem;margin-left:.6rem;font-size:.72rem;
  font-weight:800;letter-spacing:.02em;color:#34d399;background:rgba(16,185,129,.13);
  border:1px solid rgba(16,185,129,.4);border-radius:999px;padding:.14rem .55rem;vertical-align:middle}
.sv-master svg{width:11px;height:11px}
:root[data-theme="light"] .sv-master{color:#047857}
/* Secteurs de la section English (ITH / Diamond drilling) : un cran
   au-dessus des familles de codes — titre plus grand, filet appuyé. */
.lsec + .lsec{margin-top:2.6rem}
.lsec-h{display:flex;align-items:baseline;gap:.6rem;font-family:var(--font-display);font-size:1.18rem;
  font-weight:800;text-transform:uppercase;letter-spacing:.06em;color:var(--strong);
  margin:.4rem 0 1rem;padding-bottom:.55rem;border-bottom:2px solid var(--brand)}
.lsec-h .ct{font-size:.8rem;color:var(--dim);font-weight:700}
/* liste des procédures : sections par tâche + pastille d'état.
   En-tête de section = TITRE typographique (gros, nu, souligné d'un filet)
   par CONTRASTE DE FORME avec les rangées-cartes : le titre ressort à la
   première lecture sans boîte ni fond. */
.lgrp{margin-bottom:0}
.lgrp + .lgrp{margin-top:1.35rem}
.lgrp-h{display:flex;align-items:baseline;gap:.5rem;flex-wrap:wrap;font-family:var(--font-display);
  font-size:1.08rem;font-weight:800;text-transform:uppercase;letter-spacing:.05em;color:var(--strong);
  margin:.3rem 0 .55rem;padding-bottom:.4rem;border-bottom:1px solid var(--border)}
.lgrp-h::before{content:'';width:4px;height:1rem;background:var(--brand);border-radius:3px;align-self:center}
.lgrp-h .ct{font-size:.76rem;color:var(--dim);font-weight:700;margin-left:auto}
/* signification de la famille de codes (« PRO-DD-ST = procédure de forage
   au diamant sous terre ») — même style que le code : gras, même taille. */
.lgrp-sub{font-family:inherit;font-size:inherit;font-weight:inherit;color:inherit;
  text-transform:inherit;letter-spacing:inherit}
.lgrp-rows{display:grid;gap:.35rem;grid-template-columns:1fr}
.pstate2{display:inline-flex;align-items:center;gap:.28rem;font-size:.72rem;font-weight:800;
  letter-spacing:.02em;padding:.14rem .5rem;border-radius:999px;white-space:nowrap}
.pstate2 svg{width:11px;height:11px}
.pstate2.ok{color:#34d399;background:rgba(16,185,129,.13);border:1px solid rgba(16,185,129,.4)}
.pstate2.todo{color:#fbbf24;background:rgba(251,191,36,.1);border:1px solid rgba(251,191,36,.45)}
.pstate2.mid{color:var(--dim);background:var(--card-2);border:1px solid var(--border)}
:root[data-theme="light"] .pstate2.ok{color:#047857}
:root[data-theme="light"] .pstate2.todo{color:#92400e;border-color:rgba(180,83,9,.45);background:rgba(180,83,9,.07)}
/* badge « Mise à jour » / « Nouvelle » : procédure révisée dans Airtable et
   pas encore ouverte sur CET appareil (voir updBadge dans app.js) */
.pupd{display:inline-flex;align-items:center;font-size:.72rem;font-weight:800;letter-spacing:.02em;
  padding:.14rem .5rem;border-radius:999px;white-space:nowrap;
  color:#f87171;background:rgba(210,35,37,.12);border:1px solid rgba(210,35,37,.5)}
.pupd.add{color:#38bdf8;background:rgba(14,165,233,.12);border-color:rgba(14,165,233,.5)}
:root[data-theme="light"] .pupd{color:#b91c1c}
:root[data-theme="light"] .pupd.add{color:#0369a1}
.lgrp .pcat{display:none}  /* la section porte déjà le nom de la tâche */
.lgrp.bycode .pcat{display:inline-flex}  /* par code : la section nomme la famille, la fiche rappelle sa tâche */
/* bandeau hors ligne compact (en haut de la liste) */
.offcard.slim{margin-top:1rem;padding:.65rem .9rem;gap:.8rem}
.offcard.slim .offic{width:34px;height:34px}
.offcard.slim .offtxt{gap:0}
.offcard.slim .offtxt b{font-size:.95rem}
.offcard.slim .offtxt>span{font-size:.82rem;color:var(--muted)}
.offmore{margin:.25rem 0 0}
.offcur{display:block;font-weight:700;color:var(--text);font-size:.92rem;margin:.2rem 0;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
/* références multiples : une citation par ligne */
.pq-refpre{display:block;font-weight:700;margin-bottom:.25rem}
.pq-refs{margin:.3rem 0 0;padding-left:1.15rem;display:flex;flex-direction:column;gap:.5rem}
.pq-refs li{line-height:1.5}
.pq-refs li::marker{color:var(--accent-l)}
.pq-refnote{display:block;color:var(--dim);font-size:.86em;margin-top:.1rem}
/* nom absent du registre : message visible */
.attest-hint.warn{color:#fbbf24;font-size:.88rem;line-height:1.5}
.attest-hint.warn b{color:#fbbf24}
:root[data-theme="light"] .attest-hint.warn,:root[data-theme="light"] .attest-hint.warn b{color:#92400e}
/* « Reprendre » : dernière fiche consultée */
.resume-l{display:flex;align-items:center;gap:.6rem;margin:.2rem 0 .8rem;padding:.55rem .8rem;
  background:var(--card);border:1px solid var(--border);border-radius:11px;color:var(--text);font-size:.9rem}
.resume-l span{flex:none;font-family:var(--font-display);font-weight:800;text-transform:uppercase;
  font-size:.75rem;letter-spacing:.05em;color:var(--accent-l)}
.resume-l b{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-weight:600}
.resume-l svg{flex:none;color:var(--accent-l)}
.resume-l:hover{border-color:rgba(210,35,37,.4)}
/* bascule de classement : Par code / Par tâche / Par machine */
.lrow{display:flex;flex-direction:column;align-items:flex-start;gap:.4rem;margin:.2rem 0 .5rem}  /* compte et bascule sur deux lignes */
.lrow .count{margin:0}
.lmodes{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap}
.lmode-t{font-size:.78rem;font-weight:700;color:var(--dim)}  /* explique la bascule */
.lmode{display:inline-flex;border:1px solid var(--border);border-radius:10px;overflow:hidden}
.lmode-b{font:inherit;font-size:.8rem;font-weight:700;padding:.4rem .75rem;background:var(--card);
  color:var(--muted);border:none;cursor:pointer;display:inline-flex;align-items:center;gap:.35rem}
.lmode-b + .lmode-b{border-left:1px solid var(--border)}
.lmode-b:hover{color:var(--strong)}
/* choix actif bien en évidence : bouton plein rouge M.R.I. */
.lmode-b.on{background:var(--g-red);color:#fff;font-weight:800}

/* ===== aperçu au survol d'une procédure : le résumé, rien d'autre ===== */
.hovercard{position:fixed;z-index:70;width:min(400px,calc(100vw - 24px));background:var(--card-2);
  border:1px solid var(--border);border-top:3px solid var(--brand);border-radius:12px;
  box-shadow:0 18px 40px rgba(0,0,0,.45);padding:.65rem .8rem;pointer-events:none;
  opacity:0;visibility:hidden;transition:opacity .12s}
.hovercard.on{opacity:1;visibility:visible}
.hovercard p{font-size:.85rem;line-height:1.55;color:var(--text);margin:0}
:root[data-theme="light"] .hovercard{box-shadow:0 18px 40px rgba(15,23,42,.18)}

/* ===== mise en page mobile (téléphones) : tout plus dense, rien de retiré ===== */
@media (max-width:640px){
  .wrap{padding:0 1rem}
  /* fiche de procédure : cellules d'icônes réduites, actions empilables,
     boutons pleine largeur — l'ordre des sections ne change pas */
  /* pas de bandeaux colorés sur téléphone : titres de section compacts avec
     un simple repère de couleur (ambre = quiz, vert = formation, rouge =
     historique) — la hiérarchie reste lisible sans blocs pleins */
  .sec>h2{font-size:1.2rem;gap:.5rem;margin-bottom:.7rem}
  .seccard>h2{font-size:1.15rem;padding:.65rem .9rem .15rem;letter-spacing:.01em;
    background:none;color:var(--strong)}
  .sc-quiz>h2,.sc-hist>h2,.sc-lock>h2{background:none;color:var(--strong)}
  .seccard>h2::before{display:block;width:4px;height:1.05rem}
  .sc-quiz>h2::before{background:var(--amber)}
  .sc-lock>h2::before{background:#10b981}
  .sc-hist>h2::before{background:var(--red)}
  .seccard .scbody{padding:.45rem .9rem 1rem}
  .h2ic{width:26px;height:26px}
  .h2ic svg{width:14px;height:14px}
  /* bandeau du document : compact mais à la couleur du type de tâche,
     comme sur ordinateur (texte et actions en blanc) */
  .pdfbox .bar{padding:.45rem .8rem;gap:.35rem .7rem}
  .pdfbox .bar b{font-size:.9rem}
  .pdfbox a.dl{font-size:.88rem;gap:.35rem}
  .pdfview>summary{font-size:.9rem;padding:.6rem .8rem}
  .pdfview .pv-n{font-size:.75rem;padding:.24rem .55rem}
  .lead2{padding:.85rem .9rem}
  .seccard .scbody{padding:.85rem .9rem 1rem}
  .pquiz>summary{padding:.85rem .9rem;gap:.6rem .8rem}
  .pquiz>summary .pqs-b{flex:1 1 100%;justify-content:center}
  /* attestation : icône + texte côte à côte, pastille « Verrouillé » dessous */
  .attest-row{display:grid;grid-template-columns:auto 1fr;gap:.75rem;align-items:start}
  .attest-row .attest-lead{min-width:0}
  .attest-row .attest-state{grid-column:2;justify-self:start;margin-left:0}
  .attest-ic{width:38px;height:38px}
  .pdfbox .pv-thumb{width:calc(100% - 1.6rem);margin:0 .8rem .8rem;padding:.35rem .35rem 0;max-height:340px}
  /* héro allégé : sur téléphone on garde le titre et les chiffres ; le badge
     décoratif et le paragraphe d'intro (redondant avec le bandeau hors-ligne)
     sont masqués — ils restent visibles sur grand écran */
  .hero{padding:.7rem 0 .45rem}
  .hero .eyebrow{display:none}
  .hero h1{font-size:1.6rem;margin:.1rem 0 .3rem}
  .hero p.lead{display:none}
  /* stats en ligne : « 25 procédures · 10 catégories… » sur 1-2 rangées */
  .stats{gap:.25rem .85rem;margin-top:.55rem}
  .stat b{display:inline;font-size:1.05rem;margin-right:.28rem}
  .stat span{font-size:.64rem}
  /* bandeau hors-ligne aminci */
  .offcard{padding:.5rem .65rem;gap:.5rem .6rem;margin-top:.6rem;font-size:.82rem}
  .offic{width:28px;height:28px;border-radius:8px}
  .offic svg{width:17px;height:17px}
  .offtxt{flex:1 1 220px;min-width:0;gap:0}
  .offtxt b{font-size:.86rem}
  .offtxt > span{font-size:.74rem}
  .offcard .btn{padding:.5rem .9rem;font-size:.86rem}
  .offmore{margin:0}
  /* moins de rouge : seuls le bouton et l'essentiel ressortent */
  .offcard summary{color:var(--muted)}
  /* recherche + filtres */
  .toolbar{padding:.5rem 0 .3rem}
  .search input{padding:.6rem .85rem .6rem 2.5rem;font-size:.93rem}
  .search svg{left:.8rem}
  .chips{gap:.4rem;padding:.45rem 0 .2rem}
  /* rangée en texte fluide : code, titre, tâche et état coulent sur
     2 lignes au lieu d'empiler 4 blocs ; la flèche décorative disparaît */
  .prow{padding:.4rem .55rem .4rem .6rem;gap:.4rem}
  .prow .prow-main{display:block;line-height:1.42}
  .prow .pcode{font-size:.62rem;padding:.08rem .3rem;margin-right:.45rem}
  .prow .ptitle{font-size:.86rem;margin-right:.45rem}
  .prow .pcat{margin-right:.45rem;text-transform:none;letter-spacing:0;font-weight:600}
  .prow .parrow{display:none}
  .lgrp-rows{gap:.28rem}
  /* sections */
  .lgrp{margin-bottom:0}
  .lgrp + .lgrp{margin-top:1rem}
  .lgrp-h{font-size:.94rem;margin:.2rem 0 .4rem;padding-bottom:.3rem}
  .lsec + .lsec{margin-top:2rem}
  .lsec-h{font-size:1.02rem;margin:.3rem 0 .75rem;padding-bottom:.45rem}
  /* bascule de classement : cibles tactiles confortables */
  .lrow{margin:.1rem 0 .35rem;gap:.3rem}
  .lmode-b{font-size:.76rem;padding:.48rem .6rem}
  .lmode-t{font-size:.72rem}
}

/* ===== écrans tactiles (gants) : cibles d'au moins 44px sur la fiche =====
   (déclaré APRÈS les règles de base pour gagner la cascade ; le débord des
   liens du bandeau est absorbé par la marge négative — hauteur visuelle idem) */
@media (pointer:coarse){
  .pdfbox a.dl{padding:.95rem .6rem;margin:-.6rem 0}
  .pdfview>summary{padding:.95rem 1rem}
  .back{padding:.85rem .6rem .85rem 0;margin:.6rem 0 .4rem}
  .btn{padding:.9rem 1.4rem}
}

/* filtre de tâche SÉLECTIONNÉ : le mot, la pastille, la bordure et le fond
   prennent la couleur de la tâche (au repos, le filtre reste neutre) */
.chip[data-cat]:not([data-cat=""]).on{color:var(--c);background:var(--ct);border-color:var(--c)}
.chip[data-cat]:not([data-cat=""]).on::before{background:var(--c)}
.chip[data-cat]:not([data-cat=""]).on .ct{color:var(--c);opacity:.8}
:root[data-theme="light"] .chip[data-cat]:not([data-cat=""]).on::before{background:var(--c)}

/* ===== Barre d'app : la marque texte ne tient pas entre 521 et 1039 px =====
   Mesuré : son sous-titre (« MACHINES ROGER INTERNATIONAL ») chevauchait les
   liens de navigation jusqu'à 105 px, et le titre était tronqué jusqu'à
   ~1040 px — dont la tablette Active4 Pro en portrait (800 px). Le logo seul
   identifie l'app ; la marque texte revient dès qu'elle a la place. */
@media(max-width:1039px){.appbar .brand .bt{display:none}}

/* ===== Tablette durcie (Samsung Galaxy Tab Active4 Pro) =====
   Écran de 10,1 po : 800 x 1280 px CSS en portrait, 1280 x 800 en paysage,
   tenu à bout de bras et utilisé avec des gants. Sans ce bloc, la tablette
   héritait des tailles de BUREAU : les titres de procédure (15 px) y étaient
   plus petits que les filtres et les intitulés de section — l'inverse de la
   hiérarchie voulue, le titre étant ce que le travailleur cherche des yeux.
   Ciblage : pointeur PRINCIPAL tactile (pointer:coarse), 700 à 1400 px de
   large ET au moins 500 px de haut. Exclus : téléphones (y compris tenus en
   paysage, moins de 500 px de haut), ordinateurs à souris et portables à
   écran tactile (leur pointeur principal reste la souris ou le pavé). */
@media (pointer:coarse) and (min-width:700px) and (max-width:1400px) and (min-height:500px){
  /* listes de procédures */
  .prow{padding:.66rem .85rem .66rem .95rem;gap:.7rem}
  .prow .ptitle{font-size:1.18rem;line-height:1.28}
  .prow .pcode{font-size:.8rem;padding:.16rem .45rem}
  .prow .pcat{font-size:.78rem}
  .lgrp-rows{gap:.45rem}
  .lgrp-h{font-size:1.28rem}
  .lgrp-h .ct{font-size:.86rem}
  /* titre de la fiche : 32 px en portrait (les plus longs tiennent sur deux
     lignes), jusqu'à 36 px en paysage où la largeur le permet */
  .phead h1{font-size:clamp(2rem, 1.6rem + .8vw, 2.25rem)}
  /* « Mon suivi » : mêmes titres de procédure, même lisibilité */
  .sv-t b{font-size:1.1rem}
  .sv-code{font-size:.8rem}
}

/* ===== Taille du texte (bouton « Affichage » de la barre) =====
   Le réglage agit sur la taille de BASE (html) : tout le contenu écrit en rem
   grandit et se remet en page normalement, sans zoom — donc sans fausser les
   calculs de coordonnées (zone de signature, bulles d'aperçu). La barre
   d'application, elle, est dimensionnée en px pour rester IDENTIQUE à toutes
   les tailles : elle est déjà pleine à 412 px et ne doit jamais déborder.
   Appliqué avant l'affichage par le script en tête d'index.html (pas de saut),
   puis par app.js (même dans l'APK, dont l'index.html embarqué est plus ancien). */
/* La pastille d'état du pack prend la classe d'état « warn » quand des fichiers
   manquent — le même nom que les ENCADRÉS d'avertissement (.warn : flex, gap,
   dégradé, rembourrage en rem), déclarés plus loin et donc gagnants. Sur
   téléphone, le point rouge de 12 px devenait une bulle de 37 x 34 px qui
   faisait déborder la barre à 360 px ; et ce rembourrage en rem grandissait avec
   la taille du texte. On reprend la main sur la géométrie de la pastille. */
.appbar .packchip.warn{display:inline-flex;gap:4.8px;padding:4.48px 9.92px;border-radius:50px;margin:0}
@media(max-width:640px){.appbar .packchip.warn{gap:0;padding:0;border-radius:50%}}
html[data-ts="90"]{font-size:90%}
html[data-ts="115"]{font-size:115%}
html[data-ts="130"]{font-size:130%}
html[data-ts="145"]{font-size:145%}
.appbar{font-size:16px}
/* Texte agrandi sur petit téléphone : les rangées « Mon suivi » et « Installer
   l'app » de l'accueil ont un libellé qui ne passe jamais à la ligne ; à 360 px
   et 145 %, elles débordaient de 49 px. Elles passent alors sur deux lignes :
   icône, libellé et flèche en haut, description dessous. Rien ne change à 100 %. */
@media(max-width:520px){
  html:is([data-ts="115"],[data-ts="130"],[data-ts="145"]) .portal-suivi{flex-wrap:wrap;row-gap:.25rem}
  html:is([data-ts="115"],[data-ts="130"],[data-ts="145"]) .portal-suivi b{white-space:normal;flex:1 1 auto;min-width:0}
  html:is([data-ts="115"],[data-ts="130"],[data-ts="145"]) .portal-suivi svg:last-child{order:1}
  html:is([data-ts="115"],[data-ts="130"],[data-ts="145"]) .portal-suivi span{order:2;flex:1 1 100%;min-width:0}
}

/* ===== Panneau « Affichage » (taille du texte + thème) =====
   En px, comme la barre : c'est un panneau de RÉGLAGE, il doit rester à la
   même place et de la même taille quel que soit le réglage choisi. Boutons
   de 48 px de haut : utilisables avec des gants. */
.disppanel{position:fixed;z-index:70;width:280px;max-width:calc(100vw - 16px);padding:14px;
  background:var(--card);border:1px solid var(--border);border-radius:14px;
  box-shadow:0 18px 48px rgba(0,0,0,.45);font-size:15px;color:var(--text)}
.disppanel .dp-h{font-family:var(--font-display);font-size:13px;font-weight:800;letter-spacing:.06em;
  text-transform:uppercase;color:var(--muted);margin:0 0 8px}
.disppanel .dp-h + *{margin-top:0}
.disppanel .dp-size{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:8px}
.disppanel button{font:inherit;cursor:pointer;border-radius:11px;border:1px solid var(--border);
  background:var(--bg-2);color:var(--strong);min-height:48px}
.disppanel button:disabled{opacity:.35;cursor:default}
.disppanel button:focus-visible{outline:2px solid var(--brand);outline-offset:2px}
.disppanel .dp-step{display:flex;align-items:center;justify-content:center;gap:2px;font-size:18px;font-weight:800}
.disppanel .dp-a{font-family:var(--font-display);font-weight:800}
.disppanel .dp-a-s{font-size:15px}
.disppanel .dp-a-l{font-size:22px}
.disppanel .dp-val{min-width:64px;text-align:center;font-family:var(--font-display);font-size:20px;font-weight:800;color:var(--strong)}
.disppanel .dp-bar{display:flex;gap:4px;margin:10px 0 4px}
.disppanel .dp-bar i{flex:1;height:5px;border-radius:3px;background:var(--border)}
.disppanel .dp-bar i.on{background:var(--brand)}
.disppanel .dp-reset{width:100%;margin-top:8px;min-height:40px;font-size:14px;font-weight:700;color:var(--accent-l);background:none}
.disppanel .dp-theme{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.disppanel .dp-h:not(:first-child){margin-top:16px}
.disppanel .dp-th{display:flex;align-items:center;justify-content:center;gap:8px;font-size:15px;font-weight:700;color:var(--muted)}
.disppanel .dp-th.on{color:var(--strong);border-color:var(--brand);background:rgba(210,35,37,.14)}

/* ===== Bouton de retour des fiches : toujours visible, mis en évidence =====
   Une fiche est une longue page (résumé, PDF, photos, quiz, attestation) :
   le lien de retour du haut disparaissait dès qu'on descendait, et il fallait
   remonter tout en haut pour revenir à la liste. C'est maintenant un bouton
   rouge, bien visible, qui reste collé juste sous la barre d'application
   pendant tout le défilement. --appbar-h est mesurée par app.js (la barre
   change de hauteur selon la largeur et les pastilles affichées). 48 px de
   haut : utilisable avec des gants. */
.back.backpill{position:sticky;top:calc(var(--appbar-h, 64px) + 8px);z-index:40;
  display:flex;align-items:center;gap:.5rem;width:max-content;max-width:100%;
  margin:1rem 0 1.1rem;padding:.7rem 1.15rem .7rem .9rem;min-height:48px;
  background:var(--brand);color:#fff;border-radius:999px;font-weight:800;font-size:.98rem;
  box-shadow:0 8px 22px rgba(0,0,0,.45),0 0 0 1px rgba(255,255,255,.1);transition:background .2s}
.back.backpill svg{color:#fff;flex:none}
.back.backpill .bk-t{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.back.backpill:hover,.back.backpill:focus-visible{color:#fff;background:#b91c1e}
.back.backpill:focus-visible{outline:2px solid #fff;outline-offset:2px}
:root[data-theme="light"] .back.backpill,:root[data-theme="light"] .back.backpill:hover{color:#fff}

/* ===== Avis de l'APK (« nouvel APK disponible », « mise à jour prête ») =====
   Créé par apk/src/apk-update.js, qui n'est JAMAIS mis à jour à chaud : l'APK
   garde sa version embarquée, avec un style en ligne position:sticky;top:0.
   Mesuré : un bandeau de 63 px (tablette) à 108 px (téléphone) qui, dès qu'on
   faisait défiler, se collait tout en haut et RECOUVRAIT la barre de
   navigation — à chaque lancement tant que des médias manquaient.
   D'où les !important : cette feuille, elle, arrive par mise à jour à chaud et
   doit l'emporter sur le style en ligne de l'ancien APK. L'avis devient une
   carte dans le flux (elle défile avec la page) que l'on peut RÉDUIRE à une
   ligne ; app.js (initApkNotice) ajoute le bouton et mémorise le choix. */
#apkBanner{position:relative!important;top:auto!important;z-index:1!important;box-sizing:border-box;
  width:calc(100% - 2 * clamp(16px,3vw,24px));max-width:calc(var(--maxw) - 2 * clamp(16px,3vw,24px));
  margin:.75rem auto 0;display:flex;align-items:flex-start;gap:.7rem;
  padding:.75rem .75rem .75rem .95rem!important;text-align:left!important;
  font-size:.92rem!important;font-weight:600!important;line-height:1.45;
  background:#13293a!important;color:#d5e8f7!important;
  border:1px solid #2c5a80!important;border-radius:12px;box-shadow:0 6px 18px rgba(0,0,0,.25)}
#apkBanner .apkn-ic{flex:none;display:flex;align-items:center;justify-content:center;width:34px;height:34px;
  border-radius:9px;background:#1d4262;color:#8fd0ff}
#apkBanner .apkn-ic svg{width:18px;height:18px}
#apkBanner .apkn-body{flex:1;min-width:0;align-self:center}
#apkBanner .apkn-body a{color:#8fd0ff!important;font-weight:800;text-decoration:underline;text-underline-offset:3px}
/* le lien de téléchargement de l'APK : un vrai bouton, facile à toucher avec des gants */
#apkBanner .apkn-body a[href$=".apk"]{display:inline-flex;align-items:center;min-height:40px;margin:.35rem .35rem .1rem 0;
  padding:.35rem .9rem;border-radius:10px;background:#1f6fb2;color:#fff!important;text-decoration:none}
#apkBanner .apkn-sum{display:none;flex:1;min-width:0;align-items:center;gap:.6rem;flex-wrap:wrap;cursor:pointer;align-self:center}
#apkBanner .apkn-sum b{font-weight:800;color:#e6f2fb}
#apkBanner button{font:inherit;cursor:pointer}
#apkBanner .apkn-tog{flex:none;display:inline-flex;align-items:center;gap:.3rem;min-height:40px;padding:.3rem .7rem;
  border-radius:10px;border:1px solid #2c5a80;background:transparent;color:#bcd9ef;font-size:.84rem;font-weight:700}
#apkBanner .apkn-tog:hover,#apkBanner .apkn-tog:focus-visible{color:#fff;border-color:#8fd0ff}
#apkBanner .apkn-tog:focus-visible,#apkBanner .apkn-apply:focus-visible{outline:2px solid #8fd0ff;outline-offset:2px}
#apkBanner .apkn-chev{display:flex;transition:transform .2s;transform:rotate(180deg)}
#apkBanner .apkn-apply{min-height:34px;padding:.2rem .8rem;border-radius:9px;border:none;background:#1f6fb2;color:#fff;font-weight:800;font-size:.84rem}
/* réduite : une seule ligne, discrète ; toucher la ligne rouvre l'avis */
#apkBanner.apkn-min{align-items:center;padding-top:.4rem!important;padding-bottom:.4rem!important;box-shadow:none}
#apkBanner.apkn-min .apkn-body{display:none}
#apkBanner.apkn-min .apkn-sum{display:flex}
#apkBanner.apkn-min .apkn-ic{width:28px;height:28px}
#apkBanner.apkn-min .apkn-chev{transform:none}

/* ===== Barre d'application sur tablette (Galaxy Tab Active4 Pro) : plus grande =====
   Mesuré avant : 70 px de haut, liens de 12,8 px en portrait (14,4 en paysage),
   cibles tactiles de 34 à 38 px — trop petit pour un écran de 10 po tenu à
   bout de bras et utilisé avec des gants (cible conseillée : 48 px).
   En px, comme le reste de la barre : elle ne suit pas le réglage « taille du
   texte », pour ne jamais déborder. Même ciblage que le bloc des titres :
   pointeur principal tactile, 700 à 1400 px de large, au moins 500 px de haut. */
.appbar-tools{display:contents}   /* regroupement fait par app.js : neutre partout ailleurs */
@media (pointer:coarse) and (min-width:700px) and (max-width:1400px) and (min-height:500px){
  .appbar{gap:12px;min-height:68px}
  /* la marque texte cède sa place à des cibles plus grandes ; le logo reste
     et ne se laisse plus écraser (il tombait à 14 px de large) */
  .appbar .brand .bt{display:none}
  .appbar .brand,.appbar .brand img{flex:none}
  .appbar .brand img{height:44px;padding:4px 7px}
  .appbar nav{gap:6px}
  /* onglets seulement : .appbar nav a touchait aussi les pastilles, qui sont des liens */
  .appbar nav a.lbl{display:inline-flex;align-items:center;min-height:48px;padding:10px 14px;font-size:16.5px}
  .appbar .workerchip{min-height:48px;padding:8px 14px;gap:8px;font-size:15.5px;max-width:230px}
  .appbar .workerchip svg{flex:none;width:18px;height:18px}
  .appbar .iconbtn{width:48px;height:48px}
  .appbar .iconbtn svg{width:22px;height:22px}
  .appbar nav a.prgchip{min-height:48px;justify-content:center;padding:7px 13px;gap:5px;font-size:14px}
  .prgchip .pc-bar{height:4px;min-width:70px}
  /* .appbar .packchip.warn (plus spécifique, voir plus haut) doit suivre aussi */
  .packchip,.appbar .packchip.warn{min-height:48px;padding:8px 13px;font-size:13.5px}
  .appbar .aqchip{min-height:48px;padding:8px 13px;gap:6px;font-size:14px}
  .appbar .aqchip svg{width:16px;height:16px}
  /* recherche collante des listes : juste sous la barre, quelle que soit sa hauteur
     (elle restait à top:60px et passait entièrement sous la barre agrandie) */
  .srchbar{top:var(--appbar-h, 60px)}
}
/* Tablette jusqu'à 1279 px (portrait, et paysage étroit) : les cinq onglets passent
   sur leur propre rangée, larges et répartis sur toute la largeur ; logo et
   outils restent sur la première. Sur une seule rangée, la barre débordait
   (bouton Aa hors écran) entre 1040 et 1180 px. La Tab Active4 Pro en paysage
   (1280 px) garde une rangée unique, qui tient même avec toutes les pastilles.
   La nav passe en display:contents pour répartir ses enfants ; ::after force le
   saut de ligne ; les outils forment une rangée qui ne se replie JAMAIS : le
   nom du travailleur se raccourcit (points de suspension) si la place manque.
   La hauteur de la barre est suivie par app.js (--appbar-h). */
@media (pointer:coarse) and (min-width:700px) and (max-width:1279px) and (min-height:500px){
  .appbar{flex-wrap:wrap;row-gap:6px;padding-top:10px;padding-bottom:8px}
  .appbar nav{display:contents}
  .appbar .brand{order:0}
  .appbar-tools{order:1;display:flex;align-items:center;justify-content:flex-end;gap:8px;
    flex:1 1 0;min-width:0;flex-wrap:nowrap}
  .appbar-tools > *{flex:none}
  .appbar-tools > .workerchip{flex:0 1 auto;min-width:48px}
  .appbar::after{content:'';order:2;flex-basis:100%;height:0}
  .appbar nav > a.lbl{order:3;flex:1 1 0;justify-content:center;text-align:center;
    font-size:17.5px;padding:10px 6px;min-height:50px;border-radius:10px}
  .appbar nav > a.lbl.active{box-shadow:inset 0 -3px 0 var(--brand)}
}

/* Avis de l'APK sur téléphone (moins de 641 px). Déplié : icône et bouton en haut,
   texte sur TOUTE la largeur dessous — en rangée unique, le texte était coincé
   dans une colonne de 96 px et la carte montait à 682 px (85 % de l'écran) à
   145 %. Réduit : une vraie ligne — le bouton ne garde que son chevron (son nom
   « Afficher » reste lu par les lecteurs d'écran) et le titre se tronque. */
@media(max-width:640px){
  #apkBanner:not(.apkn-min){flex-wrap:wrap}
  #apkBanner:not(.apkn-min) .apkn-ic{margin-right:auto}
  #apkBanner .apkn-body{order:3;flex:1 1 100%}
  #apkBanner.apkn-min .apkn-tog{font-size:0;gap:0;padding:.3rem .6rem;min-width:44px;justify-content:center}
  #apkBanner.apkn-min .apkn-sum{flex-wrap:nowrap}
  #apkBanner.apkn-min .apkn-sum b{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  #apkBanner.apkn-min .apkn-apply{flex:none}
}