/* ============================================================
   Carnet d'Atelier — prototype
   Tenue claire : fond papier, filets fins, aucune ombre.
   La couleur ne sert qu'à deux choses : l'action (orange brique)
   et l'état du matériel (pastilles). Jamais à décorer.
   ============================================================ */
:root{
  --accent:#C4551A;
  --accent-press:#A6440F;
  --accent-tint:#F8EEE6;

  --bg:#FAFAF7;
  --surface:#FFFFFF;
  --surface-2:#F4F5F0;
  --line:#E7E9E2;
  --line-firm:#D5D9CE;
  --text:#1E2621;
  --muted:#6D776F;
  --muted-2:#939C95;

  --crit:#AE3A30;  --crit-soft:#F8EDEB;
  --warn:#8B6712;  --warn-soft:#F8F2E1;
  --ok:#38774F;    --ok-soft:#EBF2ED;
  --idle:#7E8880;  --idle-soft:#F1F3EE;
  --info:#356785;  --info-soft:#EAF1F5;

  --radius:12px;
  --nav-h:60px;

  --f-disp:"Barlow Condensed","Arial Narrow",Helvetica,sans-serif;
  --f-body:"Barlow","Helvetica Neue",Arial,sans-serif;
  --f-mono:"IBM Plex Mono",ui-monospace,"Cascadia Mono",Consolas,monospace;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --accent:#E9773C;
    --accent-press:#F79055;
    --accent-tint:#2A1D14;

    --bg:#141917;
    --surface:#1A211E;
    --surface-2:#212926;
    --line:#28312D;
    --line-firm:#3A443E;
    --text:#DEE5E0;
    --muted:#96A099;
    --muted-2:#79837C;

    --crit:#E8938B;  --crit-soft:#2B1B19;
    --warn:#D8B26A;  --warn-soft:#282111;
    --ok:#7CC49B;    --ok-soft:#152621;
    --idle:#8F9992;  --idle-soft:#212926;
    --info:#88BBD8;  --info-soft:#142229;
  }
}
:root[data-theme="dark"]{
  --accent:#E9773C;
  --accent-press:#F79055;
  --accent-tint:#2A1D14;

  --bg:#141917;
  --surface:#1A211E;
  --surface-2:#212926;
  --line:#28312D;
  --line-firm:#3A443E;
  --text:#DEE5E0;
  --muted:#96A099;
  --muted-2:#79837C;

  --crit:#E8938B;  --crit-soft:#2B1B19;
  --warn:#D8B26A;  --warn-soft:#282111;
  --ok:#7CC49B;    --ok-soft:#152621;
  --idle:#8F9992;  --idle-soft:#212926;
  --info:#88BBD8;  --info-soft:#142229;
}

*{box-sizing:border-box}
body{
  margin:0; background:var(--bg); color:var(--text);
  font-family:var(--f-body); font-size:16px; line-height:1.5;
  -webkit-text-size-adjust:100%; -webkit-font-smoothing:antialiased;
}
h1,h2,h3{font-family:var(--f-disp); font-weight:600; text-wrap:balance; margin:0}
p{margin:0}
button{font:inherit; color:inherit}
:focus-visible{outline:2px solid var(--accent); outline-offset:2px; border-radius:4px}
@media (prefers-reduced-motion:reduce){*{animation-duration:.01ms!important;transition-duration:.01ms!important}}

/* ---------- coquille ---------- */
.shell{min-height:100dvh; display:flex; flex-direction:column}
.topbar{
  position:sticky; top:0; z-index:30;
  background:var(--surface); color:var(--text);
  display:flex; align-items:center; gap:12px;
  padding:13px 18px; border-bottom:1px solid var(--line);
}
.brand{font-family:var(--f-disp); font-size:20px; font-weight:600; letter-spacing:.015em; line-height:1}
.brand span{color:var(--accent)}
.topbar .who{margin-left:auto; display:flex; align-items:center; gap:12px; font-size:13px; color:var(--muted-2)}
.topbar .who b{color:var(--muted); font-weight:500}
.iconbtn{
  background:transparent; border:1px solid var(--line-firm); color:var(--muted);
  border-radius:7px; padding:6px 12px; font-size:13px; cursor:pointer;
}
.iconbtn:hover{border-color:var(--accent); color:var(--accent)}
.iconbtn.scan{display:inline-flex; align-items:center; gap:7px; border-color:var(--accent); color:var(--accent)}
.iconbtn.scan:hover{background:var(--accent-tint)}
/* pictogramme de code QR, dessiné en CSS pour rester net à toute taille */
.qrglyph{
  width:13px; height:13px; flex:none; position:relative;
  border:2px solid currentColor; border-radius:2px;
  border-right-color:transparent; border-bottom-color:transparent;
}
.qrglyph::after{
  content:""; position:absolute; right:-2px; bottom:-2px; width:13px; height:13px;
  border:2px solid currentColor; border-radius:2px;
  border-left-color:transparent; border-top-color:transparent;
}
@media (max-width:560px){
  .iconbtn.scan .lbl{display:none}
  .topbar .who .me{display:none}
}
[hidden]{display:none!important}

main{flex:1; padding:22px 18px calc(var(--nav-h) + 34px); max-width:1000px; width:100%; margin:0 auto}

.nav{
  position:fixed; bottom:0; left:0; right:0; z-index:30;
  height:var(--nav-h); display:flex;
  background:var(--surface); border-top:1px solid var(--line);
  padding-bottom:env(safe-area-inset-bottom);
}
.nav button{
  flex:1; background:none; border:0; cursor:pointer;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px;
  color:var(--muted-2); font-size:11px; font-weight:500; letter-spacing:.015em;
}
.nav button .gl{font-size:18px; line-height:1; opacity:.75}
.nav button[aria-current="page"]{color:var(--accent)}
.nav button[aria-current="page"] .gl{opacity:1}

@media (min-width:920px){
  .shell{display:grid; grid-template-columns:214px 1fr; grid-template-rows:auto 1fr}
  .topbar{grid-column:1/-1}
  .nav{
    position:sticky; top:53px; height:calc(100dvh - 53px); align-self:start;
    flex-direction:column; border-top:0; border-right:1px solid var(--line);
    background:transparent; padding:22px 12px; gap:1px;
  }
  .nav button{
    flex:0 0 auto; flex-direction:row; justify-content:flex-start; gap:11px;
    padding:9px 12px; border-radius:7px; font-size:14.5px;
  }
  .nav button:hover{color:var(--text)}
  .nav button[aria-current="page"]{background:var(--accent-tint)}
  main{padding:34px 40px 70px}
}

/* ---------- typographie ---------- */
.eyebrow{
  font-family:var(--f-disp); font-size:12px; font-weight:600;
  letter-spacing:.13em; text-transform:uppercase; color:var(--muted-2);
}
.h-page{font-size:26px; line-height:1.15; margin:3px 0 2px; letter-spacing:.005em}
.h-sec{font-size:17.5px; letter-spacing:.01em}
.sub{color:var(--muted); font-size:14.5px}
.mono{font-family:var(--f-mono); font-size:12.5px; letter-spacing:-.02em; color:var(--muted)}
.num{font-variant-numeric:tabular-nums}

.stack{display:flex; flex-direction:column; gap:16px}
.stack-s{display:flex; flex-direction:column; gap:9px}
.row{display:flex; align-items:center; gap:12px; flex-wrap:wrap}
.sec-head{display:flex; align-items:baseline; gap:10px; margin:30px 0 12px}
.sec-head .link{margin-left:auto}

/* ---------- surfaces ---------- */
.card{background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:17px}
.card.flat{background:transparent; border-style:dashed}
.grid{display:grid; gap:12px}
.grid.kpis{grid-template-columns:repeat(2,1fr)}
@media (min-width:760px){.grid.kpis{grid-template-columns:repeat(4,1fr)}}
.grid.two{grid-template-columns:1fr}
@media (min-width:920px){.grid.two{grid-template-columns:1fr 1fr; gap:26px}}

.kpi{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius);
  padding:15px 16px; display:flex; flex-direction:column; gap:3px;
  text-align:left; cursor:pointer; width:100%;
}
.kpi:hover{border-color:var(--line-firm)}
.kpi .v{font-family:var(--f-disp); font-size:31px; line-height:1; font-weight:600; font-variant-numeric:tabular-nums}
.kpi .k{font-size:13px; color:var(--muted); line-height:1.3}
.kpi.crit .v{color:var(--crit)}
.kpi.warn .v{color:var(--warn)}
.kpi.ok   .v{color:var(--ok)}
.kpi.info .v{color:var(--info)}
.kpi.static{cursor:default}
.kpi.static:hover{border-color:var(--line)}

/* ---------- états : pastille + libellé, sans aplat ---------- */
.chip{
  display:inline-flex; align-items:center; gap:6px;
  font-size:13px; font-weight:500; white-space:nowrap; letter-spacing:.005em;
}
.chip .dot{width:7px; height:7px; border-radius:50%; background:currentColor; flex:none}
.s-crit{color:var(--crit)}
.s-warn{color:var(--warn)}
.s-ok{color:var(--ok)}
.s-idle{color:var(--muted-2)}
.s-info{color:var(--info)}

/* ---------- listes ---------- */
.list{display:flex; flex-direction:column; border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; background:var(--surface)}
.item{
  display:flex; gap:14px; align-items:flex-start; text-align:left; width:100%;
  padding:15px 17px; background:transparent; border:0; border-bottom:1px solid var(--line); cursor:pointer;
}
.item:last-child{border-bottom:0}
.item:hover{background:var(--surface-2)}
.item .body{flex:1; min-width:0; display:flex; flex-direction:column; gap:3px}
.item .t{font-weight:500; font-size:15.5px; line-height:1.3}
.item .m{font-size:13.5px; color:var(--muted); overflow-wrap:anywhere; line-height:1.35}
.item .side{flex:none; display:flex; flex-direction:column; align-items:flex-end; gap:6px}
.item .chev{color:var(--muted-2); font-size:17px; align-self:center; flex:none; opacity:.6}
.empty{padding:30px 18px; text-align:center; color:var(--muted-2); font-size:14.5px}

/* ---------- commandes ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:11px 18px; border-radius:8px; border:1px solid var(--line-firm);
  background:var(--surface); font-weight:500; font-size:15.5px; cursor:pointer; min-height:44px;
}
.btn:hover{border-color:var(--muted-2)}
.btn-primary{background:var(--accent); border-color:var(--accent); color:#fff; font-weight:600}
.btn-primary:hover{background:var(--accent-press); border-color:var(--accent-press)}
.btn-block{width:100%}
.btn-lg{min-height:54px; font-size:17px}
.btn:disabled{opacity:.4; cursor:not-allowed}
.link{background:none; border:0; padding:0; color:var(--accent); font-weight:500; font-size:14px; cursor:pointer; text-decoration:underline; text-underline-offset:3px}

.field{display:flex; flex-direction:column; gap:6px}
.field > label{font-size:13px; font-weight:500; color:var(--muted)}
select, input[type=text], input[type=number], input[type=date], textarea{
  font:inherit; color:var(--text); background:var(--surface);
  border:1px solid var(--line-firm); border-radius:8px; padding:11px 12px; width:100%; min-height:44px;
}
select:hover, input:hover, textarea:hover{border-color:var(--muted-2)}
select{appearance:none;
  background-image:linear-gradient(45deg,transparent 50%,var(--muted-2) 50%),linear-gradient(135deg,var(--muted-2) 50%,transparent 50%);
  background-position:calc(100% - 18px) 20px, calc(100% - 13px) 20px;
  background-size:5px 5px,5px 5px; background-repeat:no-repeat; padding-right:38px}
textarea{min-height:96px; resize:vertical}

/* choix tactiles */
.choices{display:grid; grid-template-columns:1fr 1fr; gap:9px}
@media (min-width:700px){.choices{grid-template-columns:repeat(3,1fr)}}
.choice{
  display:flex; flex-direction:column; align-items:flex-start; gap:4px; text-align:left;
  padding:14px 13px; min-height:72px; border-radius:10px; cursor:pointer;
  border:1px solid var(--line-firm); background:var(--surface);
  font-size:14.5px; font-weight:500; line-height:1.25;
}
.choice .gl{font-size:19px; line-height:1; opacity:.8}
.choice:hover{border-color:var(--muted-2)}
.choice[aria-pressed="true"]{border-color:var(--accent); background:var(--accent-tint); color:var(--accent); font-weight:600}
.choice[aria-pressed="true"] .gl{opacity:1}
.choice small{font-weight:400; color:var(--muted); font-size:12.5px}
.choice.mini{min-height:auto; padding:8px 12px; flex-direction:row; align-items:center}

.checks{display:flex; flex-direction:column; border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; background:var(--surface)}
@media (min-width:760px){.checks{display:grid; grid-template-columns:1fr 1fr}}
.check{display:flex; align-items:center; gap:13px; padding:12px 15px; border-bottom:1px solid var(--line); cursor:pointer; font-size:15px; min-height:48px}
.check:hover{background:var(--surface-2)}
.check input{width:20px; height:20px; accent-color:var(--accent); flex:none; margin:0}
.check:has(input:checked){background:var(--accent-tint)}

.steps{display:flex; gap:5px; margin-bottom:20px}
.steps div{flex:1; height:3px; border-radius:2px; background:var(--line)}
.steps div.on{background:var(--accent)}
.step-lbl{font-family:var(--f-disp); font-size:12px; letter-spacing:.13em; text-transform:uppercase; color:var(--muted-2); margin-bottom:5px}

.thumbs{display:flex; gap:8px; flex-wrap:wrap}
.thumbs img{width:78px; height:78px; object-fit:cover; border-radius:8px; border:1px solid var(--line); display:block}
.thumbs .voir{padding:0; border:0; background:none; cursor:zoom-in; border-radius:8px}
.thumbs .ph{position:relative}
.thumbs .ph button{
  position:absolute; top:-8px; right:-8px; width:28px; height:28px; border-radius:50%;
  border:1px solid var(--line-firm); background:var(--surface); color:var(--muted); font-size:17px; line-height:1; cursor:pointer;
}
.thumbs .ph button:hover{color:var(--crit); border-color:var(--crit)}
.ancre{scroll-margin-top:72px}
.mic{display:inline-flex; align-items:center; gap:7px; padding:9px 14px; border-radius:8px; border:1px solid var(--line-firm); background:var(--surface); cursor:pointer; font-size:14px; font-weight:500}
.mic:hover{border-color:var(--muted-2)}
.mic.rec{background:var(--crit-soft); color:var(--crit); border-color:currentColor}

/* pièces saisies, en jetons retirables */
.puces{display:flex; flex-wrap:wrap; gap:8px}
.puce{
  display:inline-flex; align-items:center; gap:4px; padding:5px 4px 5px 12px;
  border-radius:999px; background:var(--accent-tint); border:1px solid var(--line);
  font-size:14.5px; font-weight:500; color:var(--text);
}
.puce b{color:var(--accent); font-weight:600}
.puce button{
  border:0; background:transparent; color:var(--muted); font-size:19px; line-height:1;
  width:30px; height:30px; border-radius:50%; cursor:pointer;
}
.puce button:hover{background:var(--surface); color:var(--crit)}

.notice{
  display:flex; gap:11px; padding:13px 15px; border-radius:10px;
  background:var(--surface-2); color:var(--muted); font-size:14px; line-height:1.45; align-items:flex-start;
}
.notice b{font-weight:600; color:var(--text)}
.notice .link{color:var(--accent)}
.notice.crit{background:var(--crit-soft); color:var(--crit)}
.notice.crit b{color:var(--crit)}

.timeline{display:flex; flex-direction:column; padding-left:5px}
.tl{display:flex; gap:14px; padding-bottom:16px; position:relative}
.tl:not(:last-child)::before{content:""; position:absolute; left:5px; top:15px; bottom:0; width:1px; background:var(--line-firm)}
.tl .pt{width:11px; height:11px; border-radius:50%; border:2px solid var(--surface); background:var(--line-firm); flex:none; margin-top:5px; z-index:1}
.tl.done .pt{background:var(--ok)}
.tl.now .pt{background:var(--accent); box-shadow:0 0 0 3px var(--accent-tint)}
.tl .txt{font-size:14.5px; line-height:1.4}
.tl .txt small{display:block; color:var(--muted); font-size:12.5px; margin-top:1px}

.tablewrap{overflow-x:auto; border:1px solid var(--line); border-radius:var(--radius); background:var(--surface)}
table{border-collapse:collapse; width:100%; font-size:14px}
th{font-family:var(--f-disp); font-size:12.5px; letter-spacing:.09em; text-transform:uppercase; color:var(--muted-2); text-align:left; padding:11px 14px; border-bottom:1px solid var(--line); white-space:nowrap; font-weight:600}
td{padding:12px 14px; border-bottom:1px solid var(--line); vertical-align:top}
tr:last-child td{border-bottom:0}

.bar{height:6px; border-radius:3px; background:var(--line); overflow:hidden; display:flex}
.bar i{display:block; height:100%}
.legend{display:flex; gap:16px; flex-wrap:wrap; font-size:12.5px; color:var(--muted); margin-top:12px}
.legend span{display:inline-flex; align-items:center; gap:6px}
.legend i{width:7px; height:7px; border-radius:50%; display:inline-block}

.plate{border:1px solid var(--line); border-radius:10px; padding:15px; display:flex; gap:16px; align-items:center}
.qr{
  width:70px; height:70px; flex:none; border-radius:6px; background:var(--surface-2);
  border:1px solid var(--line-firm); position:relative; display:grid; place-items:center;
}
.qr::before,.qr::after{content:""; position:absolute; width:15px; height:15px; border:2px solid var(--muted-2)}
.qr::before{top:6px; left:6px; border-right:0; border-bottom:0}
.qr::after{bottom:6px; right:6px; border-left:0; border-top:0}
.qr b{font-family:var(--f-mono); font-size:10.5px; font-weight:600; color:var(--text)}

/* ---------- écran de connexion ---------- */
.gate{min-height:100dvh; background:var(--bg); color:var(--text); display:flex; flex-direction:column}
.gate .hero{padding:56px 24px 34px; position:relative; overflow:hidden}
.gate .hero::after{
  content:""; position:absolute; inset:0; pointer-events:none; opacity:.045;
  background:repeating-linear-gradient(-45deg, var(--text) 0 1px, transparent 1px 15px);
  mask-image:linear-gradient(to bottom, #000, transparent 80%);
  -webkit-mask-image:linear-gradient(to bottom, #000, transparent 80%);
}
.gate .hero > *{position:relative; z-index:1}
.gate h1{font-size:clamp(36px,9vw,56px); line-height:.98; font-weight:600; letter-spacing:0}
.gate h1 span{color:var(--accent); display:block}
.gate .tag{color:var(--muted); font-size:15.5px; margin-top:14px; max-width:34ch}
.gate .rule{height:1px; background:var(--line); margin:0 24px}
.gate .roles{padding:26px 20px 40px; display:flex; flex-direction:column; gap:10px; max-width:620px; width:100%; margin:0 auto}
.rolecard{
  display:flex; align-items:center; gap:15px; width:100%; text-align:left; cursor:pointer;
  background:var(--surface); border:1px solid var(--line); border-radius:11px; padding:16px 17px; color:var(--text);
}
.rolecard:hover{border-color:var(--accent)}
.rolecard .gl{font-size:24px; flex:none; opacity:.85}
.rolecard .t{font-family:var(--f-disp); font-size:20px; font-weight:600; line-height:1.1}
.rolecard .d{font-size:13.5px; color:var(--muted); line-height:1.4}
.rolecard .go{margin-left:auto; color:var(--accent); font-size:20px; flex:none}
.gate .foot{padding:0 24px 36px; color:var(--muted-2); font-size:12.5px; max-width:620px; margin:0 auto; width:100%; line-height:1.5}

.toast{
  position:fixed; left:50%; transform:translateX(-50%); bottom:calc(var(--nav-h) + 20px); z-index:60;
  background:var(--text); color:var(--bg); padding:12px 20px; border-radius:9px; font-size:14.5px;
  max-width:min(92vw,420px); text-align:center;
}
.scanner{
  position:fixed; inset:0; z-index:70; background:rgba(14,18,16,.95); color:#F0F2ED;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:20px; padding:24px;
}
.viewfinder{width:min(70vw,240px); aspect-ratio:1; border-radius:16px; position:relative}
.viewfinder i{position:absolute; width:34px; height:34px; border:3px solid var(--accent)}
.viewfinder i:nth-child(1){top:0;left:0;border-right:0;border-bottom:0;border-radius:16px 0 0 0}
.viewfinder i:nth-child(2){top:0;right:0;border-left:0;border-bottom:0;border-radius:0 16px 0 0}
.viewfinder i:nth-child(3){bottom:0;left:0;border-right:0;border-top:0;border-radius:0 0 0 16px}
.viewfinder i:nth-child(4){bottom:0;right:0;border-left:0;border-top:0;border-radius:0 0 16px 0}
.viewfinder .scanline{position:absolute; left:8px; right:8px; height:1px; background:var(--accent); animation:sweep 1.8s ease-in-out infinite}
@keyframes sweep{0%,100%{top:12%}50%{top:88%}}
.hidden{display:none!important}

/* ---------- clavier à quatre chiffres ---------- */
.code{display:flex; gap:14px; justify-content:center; margin:8px 0 2px}
.code i{width:14px; height:14px; border-radius:50%; border:2px solid var(--line-firm)}
.code i.plein{background:var(--accent); border-color:var(--accent)}
.pave{display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-top:8px}
.touche{
  min-height:62px; font-family:var(--f-disp); font-size:26px; font-weight:600;
  border-radius:12px; border:1px solid var(--line-firm); background:var(--surface);
  color:var(--text); cursor:pointer;
}
.touche:active{background:var(--accent-tint); border-color:var(--accent); color:var(--accent)}
.scanner video{width:min(78vw,300px); aspect-ratio:1; object-fit:cover; border-radius:16px; border:2px solid var(--accent); background:#000}