/* Feuille du prototype (lignes 27-174, au milieu de ce fichier) aux couleurs de BOUCLR : jetons du thème étage 2
   (globals.css et theme.css d'origin/preprod), polices Plus Jakarta Sans (titres), Inter (texte), JetBrains Mono,
   servies par ce serveur (aucun appel à Google Fonts). */
@font-face{font-family:"Inter";src:url(/static/fonts/inter.woff2) format("woff2");font-weight:400 700;font-display:swap}
@font-face{font-family:"Plus Jakarta Sans";src:url(/static/fonts/plus-jakarta-sans.woff2) format("woff2");font-weight:400 700;font-display:swap}
@font-face{font-family:"JetBrains Mono";src:url(/static/fonts/jetbrains-mono.woff2) format("woff2");font-weight:400 500;font-display:swap}
:root{
  --bg:#F5F1EA; --surface:#FFFFFF; --sunk:#EDF1F6; --ink:#1A2B4A; --muted:#5B677E; --line:#C5CCDA; --sep:#DDE6F1;
  --accent:#D1472A; --accent-ink:#FFFFFF; --accent-hover:#BC3F22; --accent-soft:#FCEAE5;
  --choisi:#1A2B4A; --choisi-ink:#FFFFFF;
  --manuel:#BE1E1E; --semi:#A04C0A; --auto:#137638; --nonfait:#1E4EC8; --na:#E1D7C2; --na-ink:#1A2B4A; --on-state:#FFFFFF;
  --warn-bg:#FEF3C7;
  --f-display:"Plus Jakarta Sans", "Segoe UI", system-ui, sans-serif;
  --f-body:"Inter", "Segoe UI", system-ui, -apple-system, sans-serif;
  --f-mono:"JetBrains Mono", ui-monospace, "SFMono-Regular", Consolas, monospace;
  --r:8px; --r-btn:10px; --r-bloc:14px;
  color-scheme:light;
}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){
  --bg:#0F1B30; --surface:#16233A; --sunk:#222D3F; --ink:#F5F1EA; --muted:#94A1B6; --line:#3A4A6B; --sep:#2A3850;
  --accent:#FF7A5C; --accent-ink:#FFFFFF; --accent-hover:#BC3F22; --accent-soft:#3A2420;
  --choisi:#F5F1EA; --choisi-ink:#0F1B30;
  --manuel:#F97E7E; --semi:#FBBF24; --auto:#4ADE80; --nonfait:#7DAFFF; --na:#94A1B6; --na-ink:#0F1B30; --on-state:#0F1B30;
  --warn-bg:#372A10; color-scheme:dark}}
:root[data-theme="dark"]{
  --bg:#0F1B30; --surface:#16233A; --sunk:#222D3F; --ink:#F5F1EA; --muted:#94A1B6; --line:#3A4A6B; --sep:#2A3850;
  --accent:#FF7A5C; --accent-ink:#FFFFFF; --accent-hover:#BC3F22; --accent-soft:#3A2420;
  --choisi:#F5F1EA; --choisi-ink:#0F1B30;
  --manuel:#F97E7E; --semi:#FBBF24; --auto:#4ADE80; --nonfait:#7DAFFF; --na:#94A1B6; --na-ink:#0F1B30; --on-state:#0F1B30;
  --warn-bg:#372A10; color-scheme:dark}
*{box-sizing:border-box}
body{background:var(--bg);color:var(--ink);font:15px/1.5 var(--f-body)}
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:10;background:var(--surface)}
h1,h2,h3{font-family:var(--f-display);text-wrap:balance;margin:0;line-height:1.15}
button,input,select,textarea{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.gut{padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}

/* top bar */
.top{position:sticky;top:env(safe-area-inset-top,0px);z-index:5;background:var(--surface);border-bottom:1px solid var(--line)}
.top-in{max-width:1240px;margin:0 auto;padding-block:10px;display:flex;flex-wrap:wrap;gap:10px 16px;align-items:center}
.brand{display:flex;align-items:baseline;gap:10px;margin-right:auto;min-width:0}
.brand h1{font-size:20px;font-weight:700;letter-spacing:-.01em}
.brand span{font-size:12px;color:var(--muted);text-transform:uppercase;letter-spacing:.08em}
.dossier{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.dossier select{min-width:0;max-width:260px;padding:7px 10px;border:1px solid var(--line);border-radius:var(--r);background:var(--surface)}
.btn{border:1px solid var(--line);background:var(--surface);padding:7px 12px;border-radius:var(--r);cursor:pointer;white-space:nowrap}
.btn:hover{border-color:var(--accent)}
.btn.primary{background:var(--accent);color:var(--accent-ink);border-color:var(--accent)}
.btn.ghost{border-color:transparent;background:transparent;color:var(--muted)}
.btn.small{padding:4px 9px;font-size:13px}
.btn.danger{color:var(--manuel)}
.tabs{display:flex;gap:2px;background:var(--sunk);padding:3px;border-radius:calc(var(--r) + 2px)}
.tabs button{border:0;background:transparent;padding:6px 12px;border-radius:var(--r);cursor:pointer;color:var(--muted);font-weight:500}
.tabs button[aria-selected="true"]{background:var(--surface);color:var(--ink);box-shadow:0 1px 2px rgba(0,0,0,.08)}
.status{font:12px var(--f-mono);color:var(--muted);min-width:9ch}

/* shell */
.shell{max-width:1240px;margin:0 auto;padding-block:24px 80px;display:grid;grid-template-columns:230px minmax(0,1fr);gap:32px}
nav.toc{position:sticky;top:calc(env(safe-area-inset-top,0px) + 80px);align-self:start;display:flex;flex-direction:column;gap:2px;max-height:calc(100vh - 110px);overflow:auto}
nav.toc a{display:flex;justify-content:space-between;gap:8px;padding:6px 10px;border-radius:var(--r);color:var(--ink);text-decoration:none;font-size:14px}
nav.toc a:hover{background:var(--sunk)}
nav.toc a small{font:11px var(--f-mono);color:var(--muted)}
nav.toc a.done small{color:var(--auto)}
main{min-width:0}
.banner{background:var(--warn-bg);border:1px solid var(--line);border-radius:var(--r);padding:10px 14px;margin-bottom:18px;font-size:14px}

/* sections */
section.sec{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:24px 24px 20px;margin-bottom:20px;scroll-margin-top:90px}
.sec-head{display:flex;gap:14px;align-items:baseline;margin-bottom:6px}
.sec-head .no{font:600 12px var(--f-mono);color:var(--accent);letter-spacing:.04em}
.sec-head h2{font-size:22px;font-weight:700}
.sec-intro{color:var(--muted);max-width:68ch;margin:0 0 18px}
.q{display:grid;gap:6px;padding:12px 0;border-top:1px solid var(--line)}
.q:first-of-type{border-top:0}
.q label.ql,.q .ql{font-weight:600;font-size:14.5px}
.q .hint{font-size:13px;color:var(--muted);margin-top:-2px}
.grid2{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:0 24px}
input[type=text],input[type=number],input[type=date],textarea,select.inp{width:100%;padding:8px 10px;border:1px solid var(--line);border-radius:var(--r);background:var(--bg)}
textarea{min-height:64px;resize:vertical}
input:focus,textarea:focus,select:focus{border-color:var(--accent);outline:none;background:var(--surface)}
.chips{display:flex;flex-wrap:wrap;gap:6px}
.chip{position:relative}
.chip input{position:absolute;opacity:0;pointer-events:none}
.chip span{display:inline-block;padding:5px 11px;border:1px solid var(--line);border-radius:999px;font-size:13.5px;cursor:pointer;background:var(--surface);user-select:none}
.chip input:checked+span{background:var(--accent-soft);border-color:var(--accent);color:var(--ink);font-weight:600}
.chip input:focus-visible+span{outline:2px solid var(--accent);outline-offset:2px}

/* tasks */
.tasks{display:flex;flex-direction:column}
.task{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px 16px;padding:14px 0;border-top:1px solid var(--line)}
.task:first-child{border-top:0}
.task .tl{font-weight:600;font-size:14.5px}
.task .th{font-size:12.5px;color:var(--muted)}
.task .tl input{font-weight:600;padding:5px 8px}
.lvls{display:flex;gap:0;border:1px solid var(--line);border-radius:var(--r);overflow:hidden;align-self:start}
.lvl{position:relative}
.lvl input{position:absolute;opacity:0;pointer-events:none}
.lvl span{display:block;padding:5px 9px;font-size:12.5px;cursor:pointer;border-left:1px solid var(--line);white-space:nowrap;color:var(--muted)}
.lvl:first-child span{border-left:0}
.lvl input:checked+span{color:#fff;font-weight:600}
.lvl input:focus-visible+span{outline:2px solid var(--accent);outline-offset:-2px}
.lvl.manuel input:checked+span{background:var(--manuel)}
.lvl.semi input:checked+span{background:var(--semi)}
.lvl.auto input:checked+span{background:var(--auto)}
.lvl.nonfait input:checked+span{background:var(--nonfait)}
.lvl.na input:checked+span{background:var(--na)}
:root[data-theme="dark"] .lvl input:checked+span{color:#0b1216}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .lvl input:checked+span{color:#0b1216}}
.tdet{grid-column:1/-1;display:grid;grid-template-columns:repeat(4,minmax(0,1fr)) 2fr;gap:8px}
.tdet select,.tdet input{width:100%;padding:6px 8px;border:1px solid var(--line);border-radius:var(--r);background:var(--bg);font-size:13px}
.tdet .h{font-family:var(--f-mono)}
.task.custom{background:linear-gradient(var(--accent-soft),var(--accent-soft)) left/3px 100% no-repeat;padding-left:12px}

/* tables */
.tw{overflow-x:auto;border:1px solid var(--line);border-radius:var(--r);margin-top:4px}
table.dt{border-collapse:collapse;width:100%;font-size:13.5px;min-width:760px}
table.dt th{text-align:left;font-weight:600;font-size:12px;text-transform:uppercase;letter-spacing:.04em;color:var(--muted);background:var(--sunk);padding:8px;white-space:nowrap}
table.dt td{padding:4px;border-top:1px solid var(--line);vertical-align:top}
table.dt td input,table.dt td select{width:100%;min-width:90px;padding:6px 7px;border:1px solid transparent;border-radius:6px;background:transparent;font-size:13.5px}
table.dt td input:hover,table.dt td select:hover{border-color:var(--line)}
table.dt td input:focus,table.dt td select:focus{border-color:var(--accent);background:var(--surface)}
table.dt td.x{width:34px;text-align:center}
.empty-row td{color:var(--muted);padding:12px;font-style:italic}
.add{margin-top:10px}
.secnote{margin-top:14px}
.secnote summary{cursor:pointer;color:var(--muted);font-size:13px}
.secnote textarea{margin-top:6px}

/* synthesis */
.syn-head{display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px;align-items:end;margin-bottom:18px}
.syn-head h2{font-size:28px}
.syn-head p{margin:4px 0 0;color:var(--muted)}
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;margin-bottom:20px}
.kpi{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:14px 16px}
.kpi b{display:block;font:700 28px var(--f-display);font-variant-numeric:tabular-nums}
.kpi span{font-size:12.5px;color:var(--muted)}
.panel{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:20px;margin-bottom:16px}
.panel h3{font-size:17px;margin-bottom:12px}
.bars{display:grid;grid-template-columns:minmax(120px,210px) minmax(0,1fr) 56px;gap:8px 12px;align-items:center;font-size:13.5px}
.bar{display:flex;height:14px;border-radius:4px;overflow:hidden;background:var(--sunk)}
.bar i{display:block;height:100%}
.bars .pct{font:600 13px var(--f-mono);text-align:right;font-variant-numeric:tabular-nums}
.legend{display:flex;flex-wrap:wrap;gap:14px;font-size:12.5px;color:var(--muted);margin-top:12px}
.legend i{display:inline-block;width:10px;height:10px;border-radius:2px;margin-right:5px;vertical-align:-1px}
.recos{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:8px}
.recos li{display:grid;grid-template-columns:auto minmax(0,1fr);gap:10px;padding:10px 12px;border:1px solid var(--line);border-radius:var(--r)}
.pill{font:600 11px var(--f-mono);padding:2px 7px;border-radius:999px;text-transform:uppercase;letter-spacing:.04em;align-self:start;white-space:nowrap}
.pill.hi{background:var(--manuel);color:#fff}
.pill.md{background:var(--semi);color:#fff}
.pill.lo{background:var(--accent-soft);color:var(--ink)}
.soft-list{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:10px}
.soft{border:1px solid var(--line);border-radius:var(--r);padding:10px 12px;font-size:13.5px}
.soft b{display:block}
.soft small{color:var(--muted)}
.soft .lk{font:600 11px var(--f-mono);margin-top:4px}
.lk.auto{color:var(--auto)} .lk.semi{color:var(--semi)} .lk.manuel{color:var(--manuel)} .lk.na{color:var(--muted)}
.cmp td,.cmp th{white-space:nowrap}
.cmp td{padding:8px;font-variant-numeric:tabular-nums}
.muted{color:var(--muted)}
.emptystate{background:var(--surface);border:1px dashed var(--line);border-radius:12px;padding:32px;text-align:left;max-width:640px}
.emptystate h2{font-size:22px;margin-bottom:8px}
.confirm{display:inline-flex;gap:6px;align-items:center;font-size:13px}
.toast{position:fixed;right:max(16px,env(safe-area-inset-right,0px));bottom:calc(16px + env(safe-area-inset-bottom,0px));background:var(--ink);color:var(--bg);padding:9px 14px;border-radius:var(--r);font-size:13.5px;z-index:20}

@media (max-width: 860px){
  .shell{grid-template-columns:minmax(0,1fr);gap:12px;padding-top:12px}
  nav.toc{position:static;flex-direction:row;overflow-x:auto;max-height:none;padding-bottom:6px}
  nav.toc a{white-space:nowrap;background:var(--surface);border:1px solid var(--line)}
  section.sec{padding:18px 16px}
  .task{grid-template-columns:minmax(0,1fr)}
  .lvls{overflow-x:auto;max-width:100%}
  .tdet{grid-template-columns:repeat(2,minmax(0,1fr))}
  .tdet .note{grid-column:1/-1}
  .bars{grid-template-columns:minmax(0,1fr) 52px}
  .bars .bar{grid-column:1/-1;order:3}
}
@media (prefers-reduced-motion: reduce){*{scroll-behavior:auto!important;transition:none!important}}

/* ===== BOUCLR : ajustements au thème ===== */
html,body{margin:0}
body{-webkit-text-size-adjust:100%}
.brand h1{letter-spacing:-.02em}
/* Fonds à la place des cadres (règle d'écran BOUCLR) : blocs sans trait, coins de bloc 14 px */
section.sec,.kpi,.panel{border-color:transparent;border-radius:var(--r-bloc)}
.q,.task,table.dt td{border-top-color:var(--sep)}
.btn{border-radius:var(--r-btn);min-height:40px}
.btn.small{min-height:32px}
/* Bouton principal corail : texte blanc dans les deux thèmes (4,52:1) */
.btn.primary{background:#D1472A;border-color:#D1472A;color:#FFFFFF}
.btn.primary:hover{background:var(--accent-hover);border-color:var(--accent-hover)}
/* Pièce choisie BOUCLR : fond bleu de Prusse et texte blanc ; en sombre, ivoire et texte nuit */
.chip input:checked+span{background:var(--choisi);border-color:var(--choisi);color:var(--choisi-ink);font-weight:600}
.tabs button[aria-selected="true"]{background:var(--choisi);color:var(--choisi-ink);box-shadow:none}
/* Niveaux d'automatisation : couleurs d'état du thème, texte lisible dessus */
.lvl input:checked+span,
:root[data-theme="dark"] .lvl input:checked+span{color:var(--on-state)}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .lvl input:checked+span{color:var(--on-state)}}
.lvl.na input:checked+span{color:var(--na-ink)}
.pill.hi,.pill.md{color:var(--on-state)}
.toast{border-radius:var(--r-btn)}
/* Fiche client et page des réponses */
.societe{font-weight:600;min-width:0;overflow-wrap:anywhere}
.lien{background:var(--surface);border-radius:var(--r-bloc);padding:16px 18px;margin-bottom:18px;display:grid;gap:10px}
.lien h3{font-size:16px}
.lien .ligne{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.lien input{flex:1 1 260px;min-width:0;padding:8px 10px;border:1px solid var(--line);border-radius:var(--r);background:var(--bg);font:13px var(--f-mono)}
.banner .btn{margin-left:8px}
/* Logos officiels : BOUCLR Pulse en haut (kit BOUCLR_Agents_Logos), BOUCLR en bas (comme bouclr.com) */
.brand .logo{margin:0;line-height:0}
.brand .logo img{height:42px;width:auto;display:block}
.logo-sombre{display:none!important}
:root[data-theme="dark"] .logo-clair{display:none!important}
:root[data-theme="dark"] .logo-sombre{display:block!important}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .logo-clair{display:none!important}:root:not([data-theme="light"]) .logo-sombre{display:block!important}}
.pied{max-width:1240px;margin:0 auto;padding-block:20px 32px;display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:8px 16px;color:var(--muted);font-size:13px;border-top:1px solid var(--sep)}
.pied-marque{display:inline-flex;align-items:center;gap:8px;color:var(--ink)}
.pied-marque b{font-weight:800;letter-spacing:.12em;font-size:14px}
.pied .b1{stroke:var(--ink)} .pied .b2{stroke:var(--logo-doux,#3A4A6B)} .pied .b3{stroke:#C9926E}
:root[data-theme="dark"] .pied .b2{stroke:#9EB0CC}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .pied .b2{stroke:#9EB0CC}}
/* « Autre » → « Précisez » */
.precision{display:grid;gap:4px;margin-top:8px;max-width:520px}
.precision[hidden]{display:none}
.precision label{font-weight:600;font-size:13.5px}
.precision input{width:100%;padding:9px 10px;border:1px solid var(--accent);border-radius:var(--r);background:var(--surface);font-size:15px}
/* Connexion de l'équipe */
.connexion{max-width:380px;margin:48px auto;background:var(--surface);border-radius:var(--r-bloc);padding:28px;display:grid;gap:10px}
.connexion h2{font-size:22px;margin-bottom:6px}
.connexion label{font-weight:600;font-size:14px}
.connexion input{width:100%;padding:11px 12px;border:1px solid var(--line);border-radius:var(--r);background:var(--bg);font-size:16px}
.connexion .btn{min-height:44px;justify-content:center}
/* Lignes ajoutables en cartes : chaque champ lisible en entier (remplace le tableau du prototype) */
.carte-ligne{background:var(--sunk);border-radius:var(--r-btn);padding:12px 14px 14px;margin-top:10px}
.carte-tete{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-bottom:8px}
.carte-tete b{font-family:var(--f-display);font-size:15px}
.carte-champs{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:12px 18px}
.champ{display:grid;gap:4px;align-content:start;min-width:0}
.champ label{font-weight:600;font-size:14px}
.champ .hint{font-size:12.5px;color:var(--muted);margin:0}
.champ input,.champ select{width:100%;min-width:0;padding:9px 10px;border:1px solid var(--line);border-radius:var(--r);background:var(--surface);font-size:15px}
.champ input:focus,.champ select:focus{border-color:var(--accent);outline:none}
.vide{margin:4px 0 0;font-style:italic}
/* Détail des tâches (qui, fréquence, outil, heures, commentaire) : champs plus grands, plus rien de coupé */
.tdet{grid-template-columns:repeat(auto-fit,minmax(190px,1fr))}
.tdet .note{grid-column:1/-1}
.tdet select,.tdet input{font-size:14.5px;padding:8px 10px}
/* Fiche client : l'état de l'enregistrement se voit toujours (haut et bas de la fiche).
   Couleurs d'état BOUCLR : vert #137638 sur #DCFCE7 (5,0:1), rouge #BE1E1E sur #FEE2E2 (5,4:1) ; en sombre, éclaircies. */
:root{--ok-bg:#DCFCE7;--ok-ink:#137638;--err-bg:#FEE2E2;--err-ink:#BE1E1E;--info-bg:#DBEAFE}
:root[data-theme="dark"]{--ok-bg:#162D21;--ok-ink:#4ADE80;--err-bg:#371A1A;--err-ink:#F97E7E;--info-bg:#182642}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){--ok-bg:#162D21;--ok-ink:#4ADE80;--err-bg:#371A1A;--err-ink:#F97E7E;--info-bg:#182642}}
.status.ok,.status.encours,.status.erreur{font:600 13px var(--f-body);padding:5px 11px;border-radius:999px;white-space:nowrap}
.status.ok{background:var(--ok-bg);color:var(--ok-ink)}
.status.encours{background:var(--sunk);color:var(--muted)}
.status.erreur{background:var(--err-bg);color:var(--err-ink)}
.info-sauvegarde{background:var(--info-bg);border-radius:var(--r-bloc);padding:12px 16px;margin-bottom:16px;font-size:14px}
.fin-fiche{border-radius:var(--r-bloc);padding:14px 18px;margin:4px 0 20px;font-weight:600;font-size:14.5px}
.fin-fiche.ok{background:var(--ok-bg);color:var(--ok-ink)}
.fin-fiche.encours{background:var(--sunk);color:var(--muted)}
.fin-fiche.erreur{background:var(--err-bg);color:var(--err-ink)}
/* Sommaire masqué hors questionnaire (dans le prototype, nav.toc{display:flex} annulait l'attribut hidden) :
   au PC la colonne reste réservée comme dans le prototype ; au téléphone, plus rien. */
nav.toc[hidden]{visibility:hidden}
@media (max-width: 860px){nav.toc[hidden]{display:none}}
/* « + Ajouter une tâche dans « … » » : le libellé passe à la ligne au téléphone (dépassait de 5 à 98 px à 375 px) */
.add .btn,.lien .btn,.banner .btn{white-space:normal;text-align:left;max-width:100%}