/* ===================================================================
   REFONTE 2026 — couche « refonte »
   -------------------------------------------------------------------
   Posée APRÈS toutes les autres couches : elle ne redéfinit que l'aspect
   (couleurs, rayons, ombres, typographie, états). Aucun sélecteur de
   comportement n'est touché : pas de display sur ce que le script
   bascule (.dock.on, .toast.show, #cConstat, .editbar, .alert…).
   Règle de la couche : quand elle pose un fond ou une bordure sur un
   composant, elle redéclare aussi ses états (pressé, actif, statut),
   car une couche postérieure l'emporte quelle que soit la spécificité.

   Direction : le même « poste de contrôle », en plus net. Graphite pour
   la structure, orange pour l'action seule, trois teintes d'état.
   Surfaces blanches sur fond minéral, filets fins, rayons réguliers
   (8 / 12 / 16), ombres courtes à deux couches, une seule famille de
   caractères — la chasse fixe ne sert plus qu'aux identifiants.
   =================================================================== */

/* Jetons HORS couche, volontairement : un hôte qui pose ses propres
   couleurs en styles non couchés battrait des jetons couchés et l'on
   verrait deux thèmes mélangés (fond clair, cartes sombres). */
:root{
  --bg:#F5F4F1;
  --surf:#FFFFFF;
  --surf2:#F1EFEB;
  --surf3:#E7E4DE;
  --line:#E6E3DD;
  --line2:#D3CEC5;
  --text:#171613;
  --dim:#5D5950;

  --nav:#141311;
  --nav2:#1F1D1A;
  --nav3:#2C2925;
  --nav-ink:#EFECE6;
  --nav-dim:#948E83;

  --accent:#D4460E;
  --accent-hover:#BD3D0B;
  --accent-press:#A33408;
  --accent-ink:#FFFFFF;
  --accent-soft:#FDF0E8;
  --accent-line:#F5CDB7;
  --accent-ring:rgba(212,70,14,.22);

  --ok:#3F6230;   --ok-soft:#EEF3E9;   --ok-ink:#FFFFFF; --ok-line:#C8D7BC;
  --warn:#855A05; --warn-soft:#FBF4E4; --warn-ink:#FFFFFF; --warn-line:#EBD6A6;
  --bad:#B0202E;  --bad-soft:#FCECED;  --bad-ink:#FFFFFF;  --bad-line:#F0C3C8;
  --info:#1E5A7A; --info-soft:#E8F1F6;

  --fs-xs:11.5px; --fs-sm:13px; --fs-md:14.5px; --fs-base:16px;
  --fs-lg:18px; --fs-xl:22px; --fs-2xl:28px; --fs-3xl:36px;

  --r:12px; --r-s:8px; --r-flottant:16px; --r-douce:8px;

  --sans:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI Variable Text","Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --disp:var(--sans);

  --sh-1:0 1px 2px rgba(23,22,19,.05);
  --sh-2:0 4px 12px -2px rgba(23,22,19,.08),0 2px 4px -2px rgba(23,22,19,.06);
  --ombre-flottant:0 24px 48px -12px rgba(23,22,19,.28),0 8px 16px -8px rgba(23,22,19,.14);
  --hl:inset 0 1px 0 rgba(255,255,255,.16);
}
html[data-theme="dark"]{
  --bg:#0F0E0C;
  --surf:#171613;
  --surf2:#1F1D1A;
  --surf3:#2A2723;
  --line:#2A2723;
  --line2:#3B3732;
  --text:#EFECE6;
  --dim:#A7A196;

  --nav:#0B0A09; --nav2:#181715; --nav3:#26241F; --nav-ink:#EFECE6; --nav-dim:#8C867B;

  --accent:#FF7A45; --accent-hover:#FF8F62; --accent-press:#FFA47F;
  --accent-ink:#1A0C05; --accent-soft:#2B1A10; --accent-line:#5A2E17;
  --accent-ring:rgba(255,122,69,.28);

  --ok:#A3B87E;   --ok-soft:#1A2014;   --ok-ink:#12160C; --ok-line:#33402A;
  --warn:#E3B34E; --warn-soft:#2A2110; --warn-ink:#1C1506; --warn-line:#4A3A18;
  --bad:#FF7B84;  --bad-soft:#2E1519;  --bad-ink:#1F0508;  --bad-line:#532128;
  --info:#86BEDA; --info-soft:#14232B;

  --sh-1:0 1px 2px rgba(0,0,0,.5);
  --sh-2:0 4px 12px -2px rgba(0,0,0,.55),0 2px 4px -2px rgba(0,0,0,.4);
  --ombre-flottant:0 24px 48px -12px rgba(0,0,0,.7),0 8px 16px -8px rgba(0,0,0,.5);
  --hl:inset 0 1px 0 rgba(255,255,255,.08);
}
html,body{background:var(--bg); color:var(--text)}

@keyframes tourne{to{transform:rotate(360deg)}}
@keyframes monte{from{opacity:0; transform:translateY(4px)} to{opacity:1; transform:none}}

@layer refonte {

/* ---------------- base ---------------- */
body{
  font-family:var(--sans);
  letter-spacing:-.006em;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
}
::selection{background:var(--accent-soft); color:var(--text)}
:focus-visible{outline:2px solid var(--accent); outline-offset:2px}
button:disabled,.act:disabled,.b:disabled{opacity:.45; cursor:not-allowed; transform:none}

/* Une seule famille : la chasse fixe ne reste que sur les identifiants. */
.eb,.sub,.sh2,.lb,.ccs span,.ccf em,.pv span,.vk span,.ck span,.jgc span,
.jl span,.prt span,.ccb,.fr span,.lgd,.rec .fam,.grpt{font-family:var(--sans)}
.idt b,.ccn b,.jgc b,.ck b,.pv b,.vk b,.stat b,.jl b,.fbv,.kpi b,.line b,
.prog .l b,.card>h2 .cnt,.fam b,.seg.sm button em,.chips button i,#pvZoomL,
.chips button{font-family:var(--sans); font-variant-numeric:tabular-nums}
.ic{fill:none; stroke:currentColor; stroke-width:1.75; stroke-linecap:round; stroke-linejoin:round}
.ic.s{stroke-width:2}

/* ---------------- champs ---------------- */
label>span{font-size:var(--fs-sm); font-weight:550; color:var(--dim)}
input:not([type=checkbox]):not([type=radio]):not([type=range]),select,textarea{
  border:1px solid var(--line2); background-color:var(--surf);
  border-radius:var(--r-s); box-shadow:var(--sh-1);
  transition:border-color .15s ease,box-shadow .15s ease,background-color .15s ease;
}
@media (hover:hover){
  input:not([type=checkbox]):not([type=radio]):not([type=range]):hover,select:hover,textarea:hover{border-color:var(--dim)}
}
input:focus,select:focus,textarea:focus{border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-ring)}
input::placeholder,textarea::placeholder{color:var(--dim); opacity:.7}
input[aria-invalid="true"],textarea[aria-invalid="true"],input:user-invalid{
  border-color:var(--bad); box-shadow:0 0 0 3px var(--bad-soft)}
input[type=checkbox]{border-radius:5px}
.rech input,.rech input:hover,.rech input:focus{border:0; background-color:transparent; box-shadow:none; min-height:0; height:34px; padding:0}
.grp input,.grp select,.grp textarea,
.grp input:hover,.grp select:hover,.grp textarea:hover,
.grp input:focus,.grp select:focus,.grp textarea:focus{border:0; background-color:transparent; box-shadow:none}

/* ---------------- charpente ---------------- */
.rail{background:var(--nav); border-right:1px solid var(--nav3)}
.mark{border-bottom-color:var(--nav3)}
.mark i{border-radius:9px; box-shadow:var(--hl),0 4px 12px -4px var(--accent)}
.mark b{font-weight:650}
.rgrp>.eb{font-size:10.5px; letter-spacing:.08em; font-weight:600; color:var(--nav-dim)}
.rail nav button{border-radius:8px; color:var(--nav-dim); font-weight:550}
@media (hover:hover){.rail nav button:hover{background:var(--nav2); color:var(--nav-ink)}}
.rail nav button[aria-selected="true"]{background:var(--nav2); color:var(--nav-ink); box-shadow:inset 0 0 0 1px var(--nav3)}
.rail nav button[aria-selected="true"]::before{top:10px; bottom:10px; width:3px; border-radius:0 3px 3px 0; background:var(--accent)}
.rail nav button:focus-visible{outline-offset:-2px}
.rfoot{border-top-color:var(--nav3)}

.bar{
  background:color-mix(in srgb,var(--surf) 84%,transparent);
  -webkit-backdrop-filter:saturate(1.6) blur(14px); backdrop-filter:saturate(1.6) blur(14px);
  border-bottom:1px solid var(--line);
}
.btit b{font-weight:650}
.ariane b{font-weight:600}
.ariane button{border-radius:6px; padding:2px 4px; margin:0 -4px}
@media (hover:hover){.ariane button:hover{color:var(--text); background:var(--surf2)}}
.rech{
  background:var(--surf2); border:1px solid var(--line); border-radius:9px;
  transition:border-color .15s ease,box-shadow .15s ease,background-color .15s ease;
}
.rech:focus-within{background:var(--surf); border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-ring)}
.bar .ret,.bicon{border-radius:9px; color:var(--dim); transition:background-color .15s ease,color .15s ease}
@media (hover:hover){.bar .ret:hover,.bicon:hover{background:var(--surf2); color:var(--text)}}
.bar .ret:active,.bicon:active{background:var(--surf3); color:var(--text)}
/* Les glyphes posés par le script (◐ ☾ ☀ ⤢ ⤡) cèdent la place à une icône
   au même trait que le reste : le libellé accessible reste celui du script. */
.bicon{font-size:0}
.bicon::before{
  content:""; width:18px; height:18px; background:currentColor;
  -webkit-mask:var(--ico) center/contain no-repeat; mask:var(--ico) center/contain no-repeat;
}
#bTheme{--ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 3a9 9 0 0 1 0 18z' fill='black'/%3E%3C/svg%3E")}
#bDens{--ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 3h6v6M9 21H3v-6M21 3l-7 7M3 21l7-7'/%3E%3C/svg%3E")}
html[data-density="gants"] #bDens{color:var(--accent); background:var(--accent-soft)}

.prog{background:var(--surf); border-bottom:1px solid var(--line)}
.prog .l b{font-weight:650}
.track{height:6px; border-radius:99px; background:var(--surf3)}
.track i{border-radius:99px}

.tabs{
  background:color-mix(in srgb,var(--surf) 90%,transparent);
  -webkit-backdrop-filter:saturate(1.6) blur(14px); backdrop-filter:saturate(1.6) blur(14px);
  border-top:1px solid var(--line);
}
.tabs button{font-size:10.5px; font-weight:600; color:var(--dim)}
.tabs button[aria-selected="true"]{color:var(--accent)}
.tabs button[aria-selected="true"]::before{left:50%; right:auto; width:28px; transform:translateX(-50%); height:3px; border-radius:0 0 3px 3px}
.tabs button:active .ic{transform:scale(.9)}
.tabs button .ic{transition:transform .12s ease,opacity .16s ease}

.dock{
  background:color-mix(in srgb,var(--surf) 90%,transparent);
  -webkit-backdrop-filter:saturate(1.6) blur(14px); backdrop-filter:saturate(1.6) blur(14px);
  border-top:1px solid var(--line);
  box-shadow:0 -10px 24px -16px rgba(0,0,0,.25);
}
.dock button{border-radius:var(--r-s)}
.dock .go{
  font-family:var(--sans); text-transform:none; letter-spacing:-.005em; font-weight:650;
  background:var(--accent); color:var(--accent-ink);
  box-shadow:var(--hl),0 1px 2px rgba(0,0,0,.14),0 6px 16px -8px var(--accent);
}
@media (hover:hover){.dock .go:hover{background:var(--accent-hover)}}
.dock .go:active{background:var(--accent-press); color:var(--accent-ink); transform:scale(.99)}
.dock .sec{background:var(--surf); color:var(--text); border:1px solid var(--line2); font-weight:600; box-shadow:var(--sh-1)}
@media (hover:hover){.dock .sec:hover{background:var(--surf2)}}
.dock .sec:active{background:var(--surf3)}

/* ---------------- titres, cartes ---------------- */
.scr{margin-bottom:calc(var(--gap) + 4px)}
.scr h1{font-size:var(--fs-2xl); font-weight:700; letter-spacing:-.03em; line-height:1.15}
.scr p{font-size:var(--fs-md); color:var(--dim); margin-top:6px}

.card{
  background:var(--surf); border:1px solid var(--line); border-radius:var(--r);
  box-shadow:var(--sh-1); padding:calc(var(--pad) + 2px);
}
.card>h2,h2{font-size:var(--fs-md); font-weight:650; letter-spacing:-.012em; margin-bottom:var(--sp-4)}
.card>h2 .cnt{font-weight:600; background:var(--surf2); border:1px solid var(--line); color:var(--dim); padding:1px 8px}

details.card>summary{font-weight:650; border-radius:var(--r); transition:background-color .15s ease}
details[open].card>summary{border-radius:var(--r) var(--r) 0 0}
@media (hover:hover){details.card>summary:hover{background:var(--surf2)}}
details.card>summary::after,details[open].card>summary::after{
  content:""; width:16px; height:16px; flex:0 0 16px; background:var(--dim);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") center/contain no-repeat;
  transition:transform .2s ease;
}
details[open].card>summary::after{transform:rotate(180deg)}
details[open].card>.in{animation:monte .2s ease both}

/* ---------------- boutons ---------------- */
.act,.b{letter-spacing:-.005em; transition:background-color .15s ease,border-color .15s ease,color .15s ease,box-shadow .15s ease,transform .08s ease}
.act{
  border-radius:var(--r-s); font-weight:650; gap:8px;
  background:var(--accent); color:var(--accent-ink);
  box-shadow:var(--hl),0 1px 2px rgba(0,0,0,.12);
}
@media (hover:hover){.act:hover{background:var(--accent-hover)}}
.act:active{background:var(--accent-press); transform:scale(.99)}
.act.sec{background:var(--surf); color:var(--text); border:1px solid var(--line2); box-shadow:var(--sh-1); font-weight:600}
@media (hover:hover){.act.sec:hover{background:var(--surf2); border-color:var(--dim)}}
.act.sec:active{background:var(--surf3)}
.act.rm{background:var(--surf); color:var(--bad); border:1px solid var(--bad-line); box-shadow:none; font-weight:600}
@media (hover:hover){.act.rm:hover{background:var(--bad-soft); border-color:var(--bad)}}
.act.rm:active{background:var(--bad-soft)}

.b{border-radius:var(--r-s); font-weight:600}
.b.pri{background:var(--accent); color:var(--accent-ink); box-shadow:var(--hl),0 1px 2px rgba(0,0,0,.12)}
@media (hover:hover){.b.pri:hover{background:var(--accent-hover)}}
.b.pri:active{background:var(--accent-press)}
.b.sec{background:var(--surf); color:var(--text); border-color:var(--line2); box-shadow:var(--sh-1)}
@media (hover:hover){.b.sec:hover{background:var(--surf2); border-color:var(--dim)}}
.b.sec:active{background:var(--surf3)}
.b.on,.b.on:hover{background:var(--text); color:var(--bg); border-color:var(--text)}

/* Chargement : le script peut poser aria-busy="true" sur un bouton
   pendant une génération ; rien ne change s'il ne le fait pas. */
.act[aria-busy="true"],.b[aria-busy="true"]{pointer-events:none; opacity:.85}
.act[aria-busy="true"]::before,.b[aria-busy="true"]::before{
  content:""; width:14px; height:14px; flex:0 0 14px; border-radius:50%;
  border:2px solid currentColor; border-right-color:transparent; animation:tourne .7s linear infinite;
}

.avec button,.mic{
  border-radius:var(--r-s); border:1px solid var(--line2); background:var(--surf); color:var(--dim);
  box-shadow:var(--sh-1); transition:background-color .15s ease,color .15s ease,border-color .15s ease,transform .1s ease;
}
@media (hover:hover){.avec button:hover,.mic:hover{background:var(--surf2); color:var(--text)}}
.avec button:active{transform:scale(.95); border-color:var(--accent); color:var(--accent)}
.mic[aria-pressed="true"]{background:var(--bad); border-color:var(--bad); color:var(--bad-ink); animation:battement 1.1s ease-in-out infinite}

/* contrôle segmenté : un rail, une pastille qui monte */
.seg{gap:3px; padding:3px; background:var(--surf2); border:1px solid var(--line); border-radius:calc(var(--r-s) + 3px)}
.seg button{border:0; background:transparent; color:var(--dim); border-radius:var(--r-s); font-weight:600; min-height:calc(var(--tap) - 6px)}
@media (hover:hover){.seg button:hover{color:var(--text)}}
.seg button[aria-pressed="true"]{background:var(--surf); color:var(--text); box-shadow:var(--sh-2),0 0 0 1px var(--line)}
.seg.sm button{min-height:32px; border-radius:6px}

.chips{gap:6px}
.chips button{
  border-radius:99px; letter-spacing:0; font-size:var(--fs-sm); font-weight:600;
  background:var(--surf); border:1px solid var(--line2); color:var(--dim); padding:0 14px;
}
@media (hover:hover){.chips button:hover{color:var(--text); border-color:var(--dim)}}
.chips button[aria-pressed="true"]{background:var(--text); border-color:var(--text); color:var(--bg)}

.line{border-bottom-color:var(--line)}
.line b{font-weight:650}

/* encadrés : un aplat et un filet complet, plus de liseré gauche */
.info{border:1px solid var(--accent-line); background:var(--accent-soft); border-radius:var(--r-s); color:var(--text); padding:12px 14px}
.info.good{background:var(--ok-soft); border-color:var(--ok-line)}
.info.warn{background:var(--warn-soft); border-color:var(--warn-line)}
.alert{border:1px solid var(--warn-line); background:var(--warn-soft); border-radius:var(--r-s)}
.new{border:1px solid var(--warn-line); background:var(--warn-soft); border-radius:var(--r-s)}
.hint{color:var(--dim)}
.void{gap:10px; padding:32px 16px}
.void .ic{width:22px; height:22px; flex-basis:22px; padding:12px; box-sizing:content-box; background:var(--surf2); border:1px solid var(--line); border-radius:12px; opacity:1; color:var(--dim)}
.void b{font-weight:650}

.grp{border-radius:var(--r-s); border-color:var(--line2); overflow:hidden; box-shadow:var(--sh-1)}
.grp label{border-bottom-color:var(--line)}
.choix button{border-radius:var(--r-s); border:1px solid var(--line2); background:var(--surf); font-weight:550}
@media (hover:hover){.choix button:hover{background:var(--surf2)}}
.choix button.on,.choix button.on:hover{border-color:var(--accent); color:var(--text); background:var(--accent-soft); box-shadow:0 0 0 1px var(--accent)}

/* ---------------- flottants ---------------- */
.ov{background:rgba(15,14,12,.42); -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px)}
.sh{background:var(--surf); border:1px solid var(--line); border-bottom:0; box-shadow:var(--ombre-flottant); border-radius:var(--r-flottant) var(--r-flottant) 0 0}
@media (min-width:720px){.sh{border-radius:var(--r-flottant); border-bottom:1px solid var(--line)}}
.sh .hd{padding:18px 20px 12px}
.sh .hd b{font-size:var(--fs-lg); font-weight:650}
.sh .hd button{border-radius:8px; background:transparent; color:var(--dim)}
@media (hover:hover){.sh .hd button:hover{background:var(--surf2); color:var(--text)}}
.sh .bd{padding:0 20px 10px}
.sh .ft{background:var(--surf2); border-top:1px solid var(--line); padding-left:20px; padding-right:20px}
@media (min-width:720px){.sh .ft{border-radius:0 0 var(--r-flottant) var(--r-flottant)}}

.tst,.toast{border-radius:12px; background:var(--nav); color:var(--nav-ink); border:1px solid var(--nav3); box-shadow:var(--ombre-flottant)}
.tst .ic{color:var(--nav-ink)}
.toast button{border:1px solid var(--nav3); border-radius:8px; color:#FFB08C; background:var(--nav2)}

/* ---------------- pilotage ---------------- */
.kpi{border-radius:var(--r); border-color:var(--line); box-shadow:var(--sh-1); padding:18px; gap:4px}
.kpi::before{left:auto; right:18px; top:20px; bottom:auto; width:8px; height:8px; border-radius:99px}
.kpi b{font-weight:650; letter-spacing:-.035em; font-size:30px}
.kpi span{font-weight:550}
@media (min-width:1180px){.kpi b{font-size:34px}}

.bg{border-radius:99px; font-weight:600; letter-spacing:0; padding:2px 9px; font-size:11.5px}

.li{border-radius:var(--r-s); padding:10px 12px}
@media (hover:hover){.li:not(.pal):not(.pwa):hover{background:var(--surf2)}}
.li .av{border-radius:9px; font-family:var(--sans); font-weight:650}
.li .tx b{font-weight:600}

table.t th{font-family:var(--sans); letter-spacing:.04em; font-weight:600; font-size:11px; border-bottom:1px solid var(--line)}
table.t td{border-bottom-color:var(--line)}
@media (hover:hover){table.t tbody tr:hover{background:var(--surf2)}}

/* statut par filet intérieur : il suit le rayon au lieu de le casser */
.oc{border:1px solid var(--line); border-radius:var(--r-s); box-shadow:inset 3px 0 0 var(--st,var(--line2)),var(--sh-1); background:var(--surf)}
.oc.al{--st:var(--bad)} .oc.wa{--st:var(--warn)} .oc.ok{--st:var(--ok)}
.oc:active{background:var(--surf2)}

.hd{border-radius:var(--r); border-color:var(--line); box-shadow:var(--sh-1); padding:20px}
.hdr .av{border-radius:12px; font-family:var(--sans); font-weight:650; box-shadow:var(--hl)}
.hdr .tx h1{font-weight:700; letter-spacing:-.03em}
.meta{border-top-color:var(--line)}
.meta .eb{letter-spacing:.06em; font-weight:600}

.fam{border-radius:99px; border-color:var(--line2); background:var(--surf); font-weight:550}
@media (hover:hover){.fam:hover{border-color:var(--dim)}}
.fam i{border-radius:99px}

.ano{
  border:1px solid var(--line); border-radius:var(--r); background:var(--surf);
  box-shadow:inset 3px 0 0 var(--bad),var(--sh-1); padding:14px 16px 14px 19px;
  transition:border-color .15s ease,box-shadow .15s ease;
}
@media (hover:hover){.ano:hover{border-color:var(--line2); box-shadow:inset 3px 0 0 var(--bad),var(--sh-2)}}
.ano:active{background:var(--surf2)}
.actp{border-radius:var(--r-s); background:var(--accent-soft); border:1px solid var(--accent-line)}
.actp .eb{letter-spacing:.06em; font-weight:600}
.actp.vide{background:var(--surf2); border:1px dashed var(--line2)}

.doc{border-radius:var(--r); border-color:var(--line); box-shadow:var(--sh-1); padding:20px; gap:10px; transition:border-color .15s ease,box-shadow .15s ease}
@media (hover:hover){.doc:hover{border-color:var(--line2); box-shadow:var(--sh-2)}}
.doc .dh i{border-radius:10px}
.doc .dh b{font-weight:650}

/* ---------------- écrans ---------------- */
.pv,.stat,.vk,.ck{border-radius:var(--r-s); border:1px solid var(--line); background:var(--surf)}
.stat{box-shadow:var(--sh-1); padding:16px}
.stat b,.pv b,.vk b,.ck b{font-weight:650}
.ck.al{border-color:var(--bad-line)} .ck.ok{border-color:var(--ok-line)}
.pv.al b{color:var(--bad)}
.jgc span,.pv span,.vk span,.ck span,.ccs span{font-size:10.5px; letter-spacing:.05em}

.cc{border-radius:var(--r); border:1px solid var(--line); background:var(--surf); box-shadow:var(--sh-1); transition:border-color .15s ease,box-shadow .15s ease}
@media (hover:hover){.cc:hover{border-color:var(--line2); box-shadow:var(--sh-2)}}
.cc.on,.cc.on:hover{border-color:var(--accent); box-shadow:0 0 0 1px var(--accent),var(--sh-2)}
.ccb{border-radius:99px; letter-spacing:.04em; font-weight:650}
.cr circle{stroke:var(--surf3)}
.cr circle.f{stroke:var(--accent); stroke-linecap:round}
.ring .rb{stroke:var(--surf3)}
.ring .rf{stroke-linecap:round}
.jgc b{font-weight:700}

.fbj{border-radius:99px; background:var(--surf3); height:8px}
.fbj i{height:8px}
.sh2{letter-spacing:.06em; font-weight:600; border-bottom-color:var(--line)}

.tile{border-radius:var(--r); border:1px solid var(--line); background:var(--surf); box-shadow:var(--sh-1); transition:border-color .15s ease,box-shadow .15s ease,transform .12s ease,background-color .15s ease}
@media (hover:hover){.tile:hover{border-color:var(--line2); box-shadow:var(--sh-2); transform:translateY(-1px)}}
.tile:active{transform:scale(.985)}
.tile b{font-weight:650}
.tile.p{background:var(--accent); border-color:var(--accent); color:var(--accent-ink); box-shadow:var(--hl),0 8px 20px -10px var(--accent)}
@media (hover:hover){.tile.p:hover{background:var(--accent-hover); border-color:var(--accent-hover)}}
.tiles.mini .tile{border-radius:var(--r-s)}
.apr{border-radius:var(--r-s); border-color:var(--line)}

.editbar{border-radius:var(--r-s); background:var(--nav); color:var(--nav-ink)}

.ctx{border-radius:var(--r); background:var(--nav); border:1px solid var(--nav3); box-shadow:var(--sh-2)}
.ctx.vide{border-style:dashed; border-color:var(--nav-dim)}
.ctxt span{letter-spacing:.04em}
.ctxt b{font-weight:650}
.ctx button{
  font-family:var(--sans); text-transform:none; letter-spacing:0; font-weight:600; font-size:var(--fs-sm);
  border-radius:8px; background:var(--nav3); border:1px solid transparent; color:var(--nav-ink);
}
@media (hover:hover){.ctx button:hover{border-color:var(--nav-dim)}}
.ctx button:active{background:var(--nav2)}

/* la décision : trois boutons nets, l'état choisi porte un halo */
.states{gap:8px}
.states button{
  border-radius:var(--r-s); border:1.5px solid var(--line2); background:var(--surf); color:var(--dim);
  font-weight:650; letter-spacing:.01em; box-shadow:var(--sh-1);
}
@media (hover:hover){.states button[aria-pressed="false"]:hover{border-color:var(--dim); color:var(--text)}}
.states button:active{transform:scale(.98)}
.states button[aria-pressed="true"][data-k="ok"]{background:var(--ok); border-color:var(--ok); color:var(--ok-ink); box-shadow:0 0 0 3px var(--ok-soft)}
.states button[aria-pressed="true"][data-k="ano"]{background:var(--bad); border-color:var(--bad); color:var(--bad-ink); box-shadow:0 0 0 3px var(--bad-soft)}
.states button[aria-pressed="true"][data-k="nv"]{background:var(--warn); border-color:var(--warn); color:var(--warn-ink); box-shadow:0 0 0 3px var(--warn-soft)}
body[data-etat="ano"] #cConstat,body[data-etat="nv"] #cConstat{animation:monte .2s ease both}

.priv{border:1px solid var(--warn-line); background:var(--warn-soft); border-radius:var(--r-s); padding:12px 14px}
.priv .lb{letter-spacing:.05em}
.priv textarea{background-color:var(--surf)}

.tour button{border-radius:99px; border:1px solid var(--line2); background:var(--surf); font-weight:600}
@media (hover:hover){.tour button:hover{border-color:var(--dim)}}
.tour button.cur,.tour button.cur:hover{background:var(--accent); border-color:var(--accent); color:var(--accent-ink)}
.ptg button{border-radius:var(--r-s); border:1px solid var(--line2); background:var(--surf)}
.pl .po{border-radius:var(--r-s); border:1px solid var(--line2); background:var(--surf); box-shadow:var(--sh-1)}
.pl .pk{border-radius:var(--r-s)}
.pl .fond{border-radius:var(--r-s)}

.phi{border-radius:10px; border-color:var(--line)}
.phi button{border-radius:0 0 0 8px}
.phadd{border-radius:10px; border:1.5px dashed var(--line2); background:var(--surf2); transition:border-color .15s ease,color .15s ease}
@media (hover:hover){.phadd:hover{border-color:var(--accent); color:var(--accent)}}

.grpt{letter-spacing:.06em; font-weight:600; border-bottom-color:var(--line)}
.grpt span{border-radius:99px}

.rec{
  border:1px solid var(--line); border-radius:var(--r-s); background:var(--surf);
  box-shadow:inset 3px 0 0 var(--st,var(--line2));
}
.rec.ok{--st:var(--ok)}
.rec.ano{--st:var(--bad); background:var(--bad-soft)}
.rec.nv{--st:var(--warn); background:var(--warn-soft)}
.rec.att{--st:var(--dim)}
.rec .tag{border-radius:99px; font-weight:650; letter-spacing:0}
.rec .rm{border-left-color:var(--line)}
@media (hover:hover){.rec .rm:hover{background:var(--bad-soft); color:var(--bad)}}
@media (hover:hover){.rec .ed:hover{background:color-mix(in srgb,var(--text) 3%,transparent)}}
@media (min-width:1180px){
  body[data-vue="table"] .rec{border:0; border-bottom:1px solid var(--line); border-radius:0; background:transparent}
  body[data-vue="table"] .rec.ano{background:var(--bad-soft)}
  body[data-vue="table"] .rec.nv{background:var(--warn-soft)}
}

.sigw .lb button{border-radius:8px; border-color:var(--line2)}
.sig{border:1.5px dashed var(--line2); border-radius:var(--r-s); background:#fff}
.soclogo{border-radius:var(--r-s)}
.prx{border-radius:8px}
ol.pas li::before{border-radius:99px; font-family:var(--sans); font-weight:650}
ol.pas li{border-left-color:var(--line2)}

.cal{border-radius:var(--r); border-color:var(--line); box-shadow:var(--sh-1)}
.calh{border-bottom-color:var(--line)}
.calh b{font-weight:650}
.calh button{border-radius:8px; border:1px solid var(--line2); background:var(--surf)}
@media (hover:hover){.calh button:hover{background:var(--surf2)}}
.calg button{border-top-color:var(--line); transition:background-color .12s ease}
@media (hover:hover){.calg button:not([aria-pressed="true"]):hover{background:var(--surf2)}}
.calg button[aria-pressed="true"]{border-radius:0}

.ev{border:1px solid var(--line); border-radius:var(--r-s); background:var(--surf); box-shadow:inset 3px 0 0 var(--st,var(--accent)),var(--sh-1)}
.ev.done{--st:var(--ok)} .ev.late{--st:var(--bad)}
.ev .a button{border-radius:8px; background:var(--surf)}
@media (hover:hover){.ev .a button:hover{background:var(--surf2)}}

.pvtop,.pvbot{background:var(--surf); border-color:var(--line)}
#pvClose,.pvzoom button{border-radius:8px}

/* mouvement réduit : la couche d'origine neutralise déjà durées et
   itérations ; rien de plus à faire ici. */
}