/* ============================================================
   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:#BE5219;
  --accent-press:#A6440F;
  --accent-tint:#F8EEE6;

  --bg:#FAFAF7;
  --surface:#FFFFFF;
  --surface-2:#F4F5F0;
  --line:#E7E9E2;
  --line-firm:#8F918A;
  --text:#1E2621;
  --muted:#525B55;
  --muted-2:#6B726D;

  --crit:#AE3A30;  --crit-soft:#F8EDEB;
  --warn:#8B6712;  --warn-soft:#F8F2E1;
  --ok:#38774F;    --ok-soft:#EBF2ED;
  --idle:#6A726C;  --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:#5E6E64;
    --text:#DEE5E0;
    --muted:#AEB8B1;
    --muted-2:#86918A;

    --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:#5E6E64;
  --text:#DEE5E0;
  --muted:#AEB8B1;
  --muted-2:#86918A;

  --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)}
/* le pictogramme du code QR, dessiné : reconnaissable d'un coup d'œil */
.qri{flex:none; display:block}
@media (max-width:560px){
  .topbar .who .me{display:none}
  /* sur un téléphone, le scan prend toute sa place : il est le geste du terrain */
  .topbar{padding:10px 14px; gap:10px}
  .brand{font-size:17px}
}
[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;
}
.ic{flex:none; display:block}
.nav button .ic{opacity:.8}
.nav button[aria-current="page"] .ic{opacity:1}
.nav button[aria-current="page"]{color:var(--accent)}

@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}
}

/* ---------- base de test ---------- */
/* La copie d’essai de l’application porte un bandeau qui ne quitte jamais
   l’écran (le serveur le pose, voir src/base-test.js). Tout ce qui se cale
   sur le haut de l’écran descend d’autant. */
body.test{--bandeau-h:28px}
.bandeau-test{
  position:sticky; top:0; z-index:31; height:var(--bandeau-h); padding:0 12px;
  background:#5B3FC4; color:#fff; font-size:12.5px; line-height:var(--bandeau-h); text-align:center;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.bandeau-test b{font-weight:600; letter-spacing:.07em; text-transform:uppercase}
body.test .shell, body.test .gate{min-height:calc(100dvh - var(--bandeau-h))}
body.test .topbar{top:var(--bandeau-h)}
/* sur l’écran du code, le logo rend au pavé la hauteur prise par le bandeau */
body.test .gate-corps.saisie-code .logo{width:clamp(60px,17vw,84px)}
@media (min-width:920px){
  body.test .nav{top:calc(53px + var(--bandeau-h)); height:calc(100dvh - 53px - var(--bandeau-h))}
}

/* ---------- 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}
/* En dessous de 1100px, deux colonnes serrent trop : les titres passaient
   a la ligne et chaque entree occupait quatre lignes. */
@media (min-width:1100px){.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}
a.item{color:inherit; text-decoration:none}
.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}
.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}
/* Bouton qui reste visible en bas de l’écran pendant qu’on parcourt une
   longue liste de choix : il flotte au-dessus des tuiles, donc il ne peut
   pas être translucide une fois désactivé. */
.btn.colle{position:sticky; bottom:calc(var(--nav-h) + 12px + env(safe-area-inset-bottom)); z-index:5}
.btn.colle:disabled{opacity:1; background:color-mix(in srgb, var(--accent) 38%, var(--bg)); border-color:transparent}
@media (min-width:920px){.btn.colle{bottom:16px}}
.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 .ic{opacity:.75; margin-bottom:1px}
.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"] .ic{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}
/* Une gravite garde sa couleur, y compris une fois choisie : l'orange de la
   selection effacait la difference entre « bloquant » et « mineur ». */
.choice.t-crit .ic{color:var(--crit)}
.choice.t-warn .ic{color:var(--warn)}
.choice.t-idle .ic{color:var(--muted-2)}
.choice.t-info .ic{color:var(--info)}
.choice.t-crit[aria-pressed="true"]{border-color:var(--crit); background:var(--crit-soft); color:var(--crit)}
.choice.t-warn[aria-pressed="true"]{border-color:var(--warn); background:var(--warn-soft); color:var(--warn)}
.choice.t-idle[aria-pressed="true"]{border-color:var(--muted); background:var(--idle-soft); color:var(--text)}
.choice.t-info[aria-pressed="true"]{border-color:var(--info); background:var(--info-soft); color:var(--info)}
.choice[aria-pressed="true"] small{color:inherit; opacity:.78}
.mention{font-size:12.5px; color:var(--muted); white-space:nowrap}

/* ---------- compte rendu d'intervention ---------- */
/* Le résumé de la demande : un intitulé à gauche, son contenu à droite. */
.resume-ligne{display:grid; grid-template-columns:96px 1fr; gap:10px; align-items:start}
.resume-titre{font-size:13px; font-weight:600; color:var(--muted); padding-top:5px}
.motifs{display:flex; flex-wrap:wrap; gap:6px}
.motif{display:inline-flex; align-items:center; gap:7px; padding:5px 11px; border-radius:999px;
  background:var(--surface-2); border:1px solid var(--line); font-weight:600; font-size:14.5px}
/* Les opérations, rangées par famille, en pastilles à cocher. */
.famille + .famille{margin-top:16px; padding-top:14px; border-top:1px solid var(--line)}
.famille-titre{display:flex; align-items:center; gap:8px; font-size:13.5px; font-weight:600; color:var(--muted); margin-bottom:9px}
.famille-compte{display:inline-flex; align-items:center; justify-content:center; min-width:20px; height:20px; padding:0 6px;
  border-radius:999px; background:var(--accent); color:#fff; font-size:12px; font-weight:600}
.pastilles{display:flex; flex-wrap:wrap; gap:8px; align-items:center}
.choice.mini.pastille{min-height:44px; padding:7px 13px; flex-direction:column; align-items:flex-start; justify-content:center; gap:0}
.pastille small{font-size:11.5px; font-weight:500}
.pastille-plus{min-height:44px; padding:0 6px}
/* L'issue : un bouton par issue, son titre et ce qu'il entraîne. */
.issue{display:flex; flex-direction:column; align-items:flex-start; gap:4px; width:100%; text-align:left;
  padding:14px 16px; min-height:62px; border-radius:10px; cursor:pointer;
  border:1px solid var(--line-firm); background:var(--surface)}
.issue:hover{border-color:var(--muted-2)}
.issue b{display:flex; align-items:center; gap:9px; font-size:16px; font-weight:600}
.issue small{font-size:13px; line-height:1.35; color:var(--muted)}
.issue.principale{background:var(--accent); border-color:var(--accent); color:#fff}
.issue.principale:hover{background:var(--accent-press); border-color:var(--accent-press)}
.issue.principale small{color:#fff; opacity:.92}
.issue:disabled{opacity:.5; cursor:progress}
/* un petit sélecteur, dans une ligne de réglage */
select.select-mini{width:auto; min-height:36px; padding:5px 30px 5px 10px; font-size:13px; flex:none;
  background-position:calc(100% - 15px) 15px, calc(100% - 10px) 15px}

.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}
/* seulement quand le libellé commence par un pictogramme : ailleurs, il porte
   une seconde ligne qui doit rester sous la première */
.check > span:has(> .ic){display:inline-flex; align-items:center; gap:9px}
.check > span .ic{color:var(--muted)}
.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)}
.btn .ic, .mic .ic{margin-right:-2px}
.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 > .ic{margin-top:1px}
.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 ---------- */
/* Le strict nécessaire : le logo de l’entreprise, puis le nom ou le code.
   Le bloc se tient dans le tiers haut de l’écran, pour laisser la place au
   clavier du téléphone quand il s’ouvre sous le champ. */
.gate{min-height:100dvh; background:var(--bg); color:var(--text); display:flex; justify-content:center}
.gate-corps{width:100%; max-width:420px; padding:clamp(40px,9vh,88px) 20px 40px; display:flex; flex-direction:column; gap:10px}
.gate .logo{display:block; width:clamp(150px,46vw,200px); height:auto; margin:0 auto 14px}
.gate-titre{font-size:clamp(28px,7.5vw,34px); line-height:1.1; text-align:center; margin:0 0 clamp(22px,4vh,36px)}
.gate-titre span{color:var(--accent)}
.gate-label{font-size:15px; font-weight:600; color:var(--text); margin-bottom:-2px}
/* Sur l’écran du code, le logo se fait discret : le pavé doit tenir entier
   à l’écran, sans défilement, même avec la barre du navigateur. */
.gate-corps.saisie-code{padding-top:clamp(18px,3.5vh,40px)}
.gate-corps.saisie-code .logo{width:clamp(84px,24vw,112px); margin-bottom:6px}
/* le titre cède sa place au pavé, qui doit tenir même sur un petit iPhone */
.gate-corps.saisie-code .gate-titre{display:none}
.gate-corps.saisie-code > .link{margin-bottom:4px !important}
/* La feuille du logo est transparente : sur fond sombre elle disparaîtrait,
   et le cercle vert se fondrait dans le décor. Il repose donc sur une
   pastille claire, aux couleurs du papier de l’application. */
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .gate .logo{background:#FAFAF7; border-radius:18px; padding:14px 16px; box-sizing:content-box}
}
:root[data-theme="dark"] .gate .logo{background:#FAFAF7; border-radius:18px; padding:14px 16px; box-sizing:content-box}

.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; display:block}
.visee{position:relative}
.visee .cadre{position:absolute; left:14px; right:14px; height:2px; background:var(--accent); opacity:.85; animation:sweep 1.8s ease-in-out infinite; pointer-events:none}