/* Atelier — design system Phase 1 (thème sombre par défaut, toggle clair). */
:root{
  --bg:#0e1525; --surface:#161d2e; --surface2:#1a2233; --bordure:#243049;
  --primaire:#6c5ce7; --primaire2:#5b54e6; --succes:#22c55e; --alerte:#f59e0b;
  --info:#3b82f6; --danger:#ef4444; --teal:#2dd4bf; --texte:#e5e7eb;
  --texte2:#94a3b8; --etoile:#facc15; --ombre:0 6px 24px rgba(0,0,0,.35);
  --r:10px; --r2:14px;
}
[data-theme="light"]{
  --bg:#f4f6fb; --surface:#ffffff; --surface2:#f0f3f9; --bordure:#dfe5ee;
  --texte:#0f172a; --texte2:#5b6577; --ombre:0 6px 24px rgba(20,30,60,.10);
}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--texte);
  font-family:Inter,"Segoe UI",system-ui,-apple-system,sans-serif;font-size:14px;line-height:1.5}
a{color:var(--teal);text-decoration:none} a:hover{text-decoration:underline}
h1,h2,h3{margin:0 0 .4em} h1{font-size:24px;font-weight:650}

/* Layout */
.app{display:grid;grid-template-columns:210px 1fr;min-height:100vh}
.app.replie{grid-template-columns:64px 1fr}
.sidebar{background:var(--surface);border-right:1px solid var(--bordure);
  display:flex;flex-direction:column;padding:14px 10px;gap:2px;position:sticky;top:0;height:100vh}
.sidebar__logo{font-weight:750;font-size:18px;padding:6px 8px 14px;color:var(--texte)}
.nav-item{display:flex;align-items:center;gap:10px;padding:9px 10px;border-radius:8px;
  color:var(--texte2);cursor:pointer}
.nav-item:hover{background:var(--surface2);color:var(--texte);text-decoration:none}
.nav-item.actif{background:color-mix(in srgb,var(--primaire) 22%,transparent);color:#fff}
.nav-item--avenir{opacity:.45;cursor:not-allowed}
.nav-item .badge-compteur{margin-left:auto;background:var(--danger);color:#fff;
  border-radius:999px;font-size:11px;padding:1px 7px;font-weight:700}
.nav-section{font-size:11px;letter-spacing:.08em;color:var(--texte2);
  text-transform:uppercase;padding:14px 10px 4px}
.sidebar__bas{margin-top:auto;display:flex;flex-direction:column;gap:6px;padding-top:10px;
  border-top:1px solid var(--bordure)}
.theme-toggle{display:flex;align-items:center;gap:8px;padding:8px 10px;border-radius:8px;
  cursor:pointer;color:var(--texte2)} .theme-toggle:hover{background:var(--surface2)}
.compte{display:flex;flex-direction:column;padding:8px 10px;border-radius:8px;background:var(--surface2)}
.compte b{font-size:13px} .compte span{font-size:11px;color:var(--texte2)}

.main{display:flex;flex-direction:column;min-width:0}
.topbar{display:flex;align-items:center;gap:12px;padding:12px 22px;
  border-bottom:1px solid var(--bordure);background:var(--surface);position:sticky;top:0;z-index:5}
.topbar h1{font-size:18px;margin:0}
.topbar__droite{margin-left:auto;display:flex;align-items:center;gap:12px;color:var(--texte2)}
.contenu{padding:22px;max-width:1320px;width:100%}

/* Cartes / panneaux */
.card,.panel{background:var(--surface);border:1px solid var(--bordure);
  border-radius:var(--r2);padding:16px;box-shadow:var(--ombre)}
.grid{display:grid;gap:14px}
.grid--kpi{grid-template-columns:repeat(auto-fill,minmax(160px,1fr))}
.kpi__valeur{font-size:26px;font-weight:750} .kpi__label{color:var(--texte2);font-size:12px}
.label-section{font-size:11px;letter-spacing:.07em;text-transform:uppercase;color:var(--texte2);margin-bottom:8px}

/* Boutons */
.btn{display:inline-flex;align-items:center;gap:7px;padding:9px 14px;border-radius:9px;
  border:1px solid var(--bordure);background:var(--surface2);color:var(--texte);
  font-weight:600;cursor:pointer;font-size:14px}
.btn:hover{filter:brightness(1.08);text-decoration:none}
.btn--primaire{background:var(--primaire);border-color:var(--primaire);color:#fff}
.btn--succes{background:var(--succes);border-color:var(--succes);color:#06281a}
.btn--danger{background:transparent;border-color:var(--danger);color:var(--danger)}
.btn--ambre{background:transparent;border-color:var(--alerte);color:var(--alerte)}
.btn--fantome{background:transparent}
.btn--bloc{width:100%;justify-content:center}
.btn[disabled]{opacity:.4;cursor:not-allowed}
.btn-icone{background:transparent;border:none;color:var(--texte2);cursor:pointer;padding:4px}
.btn-icone:hover{color:var(--texte)}

/* Badges */
.badge{display:inline-flex;align-items:center;gap:5px;padding:2px 9px;border-radius:999px;
  font-size:12px;font-weight:650;border:1px solid transparent}
.badge--gris{background:#37415133;color:#cbd5e1;border-color:#3a4561}
.badge--indigo,.badge--main{background:color-mix(in srgb,var(--primaire) 22%,transparent);color:#c7c2f5;border-color:var(--primaire)}
.badge--bleu,.badge--commande{background:color-mix(in srgb,var(--info) 20%,transparent);color:#bcd4ff;border-color:var(--info)}
.badge--orange,.badge--a-commander{background:color-mix(in srgb,var(--alerte) 20%,transparent);color:#fcd9a3;border-color:var(--alerte)}
.badge--vert,.badge--succes,.badge--stock-ok{background:color-mix(in srgb,var(--succes) 20%,transparent);color:#a7f3c8;border-color:var(--succes)}
.badge--vert-fonce{background:#06402b;color:#7ee2ab;border-color:#127a4d}
.badge--ambre{background:color-mix(in srgb,var(--alerte) 18%,transparent);color:#fcd9a3;border-color:var(--alerte)}
.badge--rouge,.badge--danger,.badge--remise{background:color-mix(in srgb,var(--danger) 18%,transparent);color:#fab3b3;border-color:var(--danger)}
.badge--piece{background:#6d28d933;color:#d6bcfa;border-color:#7c3aed}

/* Pastilles d'ancienneté */
.age{display:inline-flex;align-items:center;gap:5px;font-size:12px;color:var(--texte2)}
.age-dot{width:8px;height:8px;border-radius:50%}
.age--vert .age-dot{background:var(--succes)} .age--ambre .age-dot{background:var(--alerte)}
.age--rouge .age-dot{background:var(--danger)}

/* Flash */
.flash{padding:11px 14px;border-radius:10px;margin-bottom:14px;border:1px solid var(--bordure)}
.flash--info{background:color-mix(in srgb,var(--info) 12%,transparent);border-color:var(--info)}
.flash--succes{background:color-mix(in srgb,var(--succes) 12%,transparent);border-color:var(--succes)}
.flash--danger{background:color-mix(in srgb,var(--danger) 14%,transparent);border-color:var(--danger)}

/* Tables / listes */
table.list{width:100%;border-collapse:collapse}
table.list th,table.list td{padding:10px 12px;text-align:left;border-bottom:1px solid var(--bordure)}
table.list th{color:var(--texte2);font-size:12px;text-transform:uppercase;letter-spacing:.04em}
table.list tr:hover td{background:var(--surface2)}

/* Formulaires */
.champ{display:flex;flex-direction:column;gap:5px;margin-bottom:12px}
.champ > label{font-size:12px;color:var(--texte2)} .champ .requis{color:var(--danger)}
input,select,textarea{background:var(--surface2);border:1px solid var(--bordure);
  color:var(--texte);border-radius:9px;padding:9px 11px;font:inherit;width:100%}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--primaire);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--primaire) 30%,transparent)}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{padding:7px 12px;border-radius:999px;border:1px solid var(--bordure);
  background:var(--surface2);cursor:pointer;font-size:13px}
.chip.actif{background:var(--primaire);border-color:var(--primaire);color:#fff}
.chip--defaut.actif{background:transparent;border-color:var(--danger);color:#fab3b3}
.stepper-nb{display:inline-flex;align-items:center;gap:0;border:1px solid var(--bordure);border-radius:9px;overflow:hidden;width:max-content}
.stepper-nb button{background:var(--surface2);border:none;color:var(--texte);padding:8px 12px;cursor:pointer}
.stepper-nb input{width:54px;text-align:center;border:none;border-radius:0}

/* Modale */
.overlay{position:fixed;inset:0;background:rgba(4,8,18,.66);display:flex;
  align-items:flex-start;justify-content:center;padding:48px 16px;z-index:50;overflow:auto}
.modale{background:var(--surface);border:1px solid var(--bordure);border-radius:16px;
  width:min(640px,100%);box-shadow:var(--ombre)}
.modale__tete{display:flex;align-items:center;justify-content:space-between;
  padding:16px 18px;border-bottom:1px solid var(--bordure)}
.modale__corps{padding:18px} .modale__pied{display:flex;gap:10px;justify-content:flex-end;
  padding:14px 18px;border-top:1px solid var(--bordure)}
.encart-info{background:color-mix(in srgb,var(--info) 12%,transparent);
  border:1px solid var(--info);border-radius:10px;padding:10px 12px;margin-bottom:14px;font-size:13px}

/* Stepper assistant */
.steps{display:flex;align-items:center;gap:8px;margin:8px 0 20px}
.step{display:flex;align-items:center;gap:8px;color:var(--texte2)}
.step .num{width:26px;height:26px;border-radius:50%;display:grid;place-items:center;
  background:var(--surface2);border:1px solid var(--bordure)}
.step.actif .num{background:var(--primaire);border-color:var(--primaire);color:#fff}
.step.fait .num{background:var(--succes);border-color:var(--succes);color:#06281a}
.step-bar{flex:1;height:2px;background:var(--bordure)}

/* Onglets */
.tabs{display:flex;gap:4px;border-bottom:1px solid var(--bordure);margin-bottom:14px}
.tab{padding:10px 14px;cursor:pointer;color:var(--texte2);border-bottom:2px solid transparent}
.tab.actif{color:var(--texte);border-bottom-color:var(--primaire)}
.tab .pt{width:7px;height:7px;border-radius:50%;display:inline-block;margin-left:6px}
.tab .pt--rouge{background:var(--danger)} .tab .pt--vert{background:var(--succes)}
.tab-pane{display:none} .tab-pane.actif{display:block}

/* Frise statuts */
.frise{display:flex;align-items:center;gap:6px;flex-wrap:wrap;padding:8px 0}
.frise__etape{display:flex;flex-direction:column;align-items:center;gap:6px;cursor:pointer;min-width:84px}
.frise__noeud{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;
  background:var(--surface2);border:2px solid var(--bordure);color:var(--texte2)}
.frise__etape.fait .frise__noeud{background:var(--succes);border-color:var(--succes);color:#06281a}
.frise__etape.actif .frise__noeud{border-color:var(--primaire);box-shadow:0 0 0 4px color-mix(in srgb,var(--primaire) 30%,transparent);color:#fff}
.frise__lib{font-size:12px;color:var(--texte2);text-align:center}
.frise__lien{flex:0 0 36px;height:2px;background:var(--bordure)}

/* Kanban */
.kanban{display:flex;gap:14px;overflow-x:auto;padding-bottom:8px}
.kanban__col{background:var(--surface);border:1px solid var(--bordure);border-radius:var(--r2);
  min-width:260px;width:260px;display:flex;flex-direction:column;max-height:75vh}
.kanban__tete{padding:12px 14px;border-bottom:1px solid var(--bordure);display:flex;
  align-items:center;justify-content:space-between;font-weight:650}
.kanban__tete .cpt{color:var(--texte2);font-weight:600}
.kanban__corps{padding:10px;display:flex;flex-direction:column;gap:10px;overflow-y:auto}
.kanban__col.drop-cible{outline:2px dashed var(--primaire);outline-offset:-4px}
.kanban__vide{color:var(--texte2);text-align:center;padding:24px 8px;font-size:13px}
.ticket{background:var(--surface2);border:1px solid var(--bordure);border-radius:10px;
  padding:11px;cursor:grab;display:flex;flex-direction:column;gap:6px}
.ticket:active{cursor:grabbing}
.ticket__tete{display:flex;align-items:center;justify-content:space-between}
.ticket__num{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12px;color:var(--texte2)}
.ticket__tech{width:24px;height:24px;border-radius:50%;background:var(--primaire);color:#fff;
  display:grid;place-items:center;font-size:11px;font-weight:700}
.ticket__bas{display:flex;align-items:center;justify-content:space-between}
.ticket__prix{font-weight:750}

/* Barre de totaux fixe */
.totaux-barre{position:sticky;bottom:0;background:var(--surface);border-top:1px solid var(--bordure);
  display:flex;align-items:center;gap:18px;padding:12px 22px;z-index:5}
.totaux-barre .tot{color:var(--texte2)} .totaux-barre .tot b{color:var(--texte)}
.totaux-barre .actions{margin-left:auto;display:flex;gap:10px}

/* Lignes de prestation */
.ligne-presta{display:flex;align-items:center;gap:12px;padding:10px 0;border-bottom:1px solid var(--bordure)}
.ligne-presta__prix{margin-left:auto;text-align:right}
.ligne-presta__ht{color:var(--texte2);font-size:12px}

/* Toast */
.toast-zone{position:fixed;right:18px;bottom:18px;display:flex;flex-direction:column;gap:8px;z-index:80}
.toast{padding:11px 15px;border-radius:10px;background:var(--surface);border:1px solid var(--bordure);
  box-shadow:var(--ombre);animation:toast-in .18s ease}
.toast--succes{border-color:var(--succes)} .toast--danger{border-color:var(--danger)}
@keyframes toast-in{from{transform:translateY(8px);opacity:0}to{transform:none;opacity:1}}

/* Étoiles */
.etoiles{display:inline-flex;gap:2px;font-size:18px;color:var(--bordure);cursor:pointer}
.etoiles .on{color:var(--etoile)}

/* Coquille publique (suivi) */
.public-wrap{max-width:560px;margin:48px auto;padding:0 16px}

/* Tableau de bord (Tâche 12) */
.dash__tete{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px}
a.card{text-decoration:none;color:inherit;display:flex;flex-direction:column;gap:8px;cursor:pointer}
a.card:hover{border-color:var(--primaire);text-decoration:none}
.legende{display:flex;align-items:center;flex-wrap:wrap;gap:16px;margin-top:18px;
  color:var(--texte2);font-size:12px}
.legende__titre{text-transform:uppercase;letter-spacing:.07em}

/* ===== Fiche prise-en-charge (Tâche 16) ===== */
.page-fiche { padding-bottom: 72px; } /* place pour la barre totaux fixe */

.fiche-header {
  display: flex; justify-content: space-between; align-items: flex-start;
  gap: 16px; padding: 20px 0; border-bottom: 1px solid var(--bordure);
}
.lien-retour { color: var(--texte2); text-decoration: none; font-size: .85rem; }
.fiche-header__titre { display: flex; align-items: center; gap: 12px; margin: 6px 0 2px; }
.fiche-header__sous { color: var(--texte2); margin: 0; }
.chip-appareil { color: var(--texte); }
.fiche-header__actions { display: flex; gap: 8px; align-items: center; }

.menu-plus { position: relative; }
.menu-plus__liste {
  position: absolute; right: 0; top: 110%; z-index: 30;
  background: var(--surface2); border: 1px solid var(--bordure);
  border-radius: 8px; min-width: 200px; padding: 6px; box-shadow: 0 8px 24px rgba(0,0,0,.4);
}
.menu-plus__item button {
  width: 100%; text-align: left; background: none; border: 0; color: var(--texte);
  padding: 8px 10px; border-radius: 6px; cursor: pointer;
}
.menu-plus__item button:hover:not(:disabled) { background: var(--surface); }
.menu-plus__item button:disabled { color: var(--texte2); cursor: not-allowed; }
.menu-plus__item button.danger { color: var(--danger); }

.bandeau-modif {
  padding: 6px 0; font-size: .8rem; color: var(--texte2);
  border-bottom: 1px solid var(--bordure);
}

/* Frise (fiche) */
.frise { padding: 18px 0; border-bottom: 1px solid var(--bordure); }
.frise__etapes { display: flex; list-style: none; margin: 0 0 10px; padding: 0; gap: 4px; }
.frise__etape { flex: 1; }
.frise__btn {
  width: 100%; display: flex; flex-direction: column; align-items: center; gap: 6px;
  background: none; border: 0; cursor: pointer; color: var(--texte2); padding: 4px;
}
.frise__btn:disabled { cursor: not-allowed; opacity: .5; }
.frise__age {
  width: 28px; height: 28px; border-radius: 50%;
  display: grid; place-items: center; font-size: .8rem; font-weight: 600;
  background: var(--surface2); border: 2px solid var(--bordure); color: var(--texte2);
}
.frise__label { font-size: .72rem; text-align: center; }
.frise__etape.is-fait .frise__age { background: var(--succes); border-color: var(--succes); color: #06210f; }
.frise__etape.is-courant .frise__age { background: var(--primaire); border-color: var(--primaire); color: #fff; }
.frise__etape.is-courant .frise__label { color: var(--texte); font-weight: 600; }
.frise__terminaux { display: flex; gap: 18px; }
.lien-terminal { background: none; border: 0; color: var(--danger); cursor: pointer; font-size: .82rem; padding: 0; }
.lien-terminal:disabled { color: var(--texte2); cursor: not-allowed; }

/* Corps : centre + rail */
.fiche-corps { display: grid; grid-template-columns: 1fr 320px; gap: 24px; padding: 24px 0; }
@media (max-width: 900px) { .fiche-corps { grid-template-columns: 1fr; } }

.onglets { display: flex; gap: 4px; border-bottom: 1px solid var(--bordure); margin-bottom: 16px; }
.onglet {
  background: none; border: 0; color: var(--texte2); padding: 10px 16px; cursor: pointer;
  border-bottom: 2px solid transparent;
}
.onglet.is-actif { color: var(--texte); border-bottom-color: var(--primaire); }
.onglet-panneau:not(.is-actif) { display: none; }

.panneau-entete { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; }

.table-lignes { width: 100%; border-collapse: collapse; }
.table-lignes th, .table-lignes td { padding: 10px 8px; border-bottom: 1px solid var(--bordure); text-align: left; }
.table-lignes th.num, .table-lignes td.num { text-align: right; }
.ligne__designation { display: flex; flex-direction: column; }
.ligne__garantie { font-size: .72rem; color: var(--texte2); }
.ligne-vide td { color: var(--texte2); text-align: center; padding: 24px; }

.fiche-details { display: grid; grid-template-columns: max-content 1fr; gap: 6px 16px; margin: 0; }
.fiche-details dt { color: var(--texte2); }
.fiche-details dd { margin: 0; }

.fiche-rail { display: flex; flex-direction: column; gap: 16px; }
.rail-bloc { background: var(--surface); border: 1px solid var(--bordure); border-radius: 10px; padding: 14px; }
.rail-bloc h3 { margin: 0 0 8px; font-size: .85rem; color: var(--texte2); text-transform: uppercase; letter-spacing: .04em; }
.rail-token code { font-size: .72rem; word-break: break-all; color: var(--teal); }

.form-note { display: flex; gap: 8px; margin-bottom: 14px; }
.form-note textarea { flex: 1; }
.liste-notes { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.note { display: flex; flex-direction: column; gap: 2px; padding: 8px 10px; background: var(--surface); border-radius: 8px; }
.note__date { font-size: .72rem; color: var(--texte2); }
.note--vide { color: var(--texte2); }

/* Barre totaux fixe (fiche) */
.barre-totaux {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 20;
  display: flex; justify-content: space-between; align-items: center;
  gap: 16px; padding: 12px 24px;
  background: var(--surface2); border-top: 1px solid var(--bordure);
}
.barre-totaux__chiffres { display: flex; gap: 24px; color: var(--texte2); }
.barre-totaux__chiffres strong { color: var(--texte); margin-left: 6px; }
.bt-ttc strong { color: var(--succes); font-size: 1.1rem; }
.barre-totaux__actions { display: flex; gap: 8px; }

/* Modale prestation (fiche) */
#modale-prestation.modale { position: fixed; inset: 0; z-index: 50; display: grid; place-items: center; padding: 0; }
#modale-prestation.modale[hidden] { display: none; }
.modale__fond { position: absolute; inset: 0; background: rgba(0,0,0,.55); }
.modale__boite {
  position: relative; z-index: 1; width: min(560px, 92vw);
  background: var(--surface); border: 1px solid var(--bordure); border-radius: 12px; overflow: hidden;
}
.modale__entete { display: flex; justify-content: space-between; align-items: center; padding: 14px 18px; border-bottom: 1px solid var(--bordure); }
.modale__entete h3 { margin: 0; }
.modale__x { background: none; border: 0; color: var(--texte2); font-size: 1.4rem; cursor: pointer; line-height: 1; }
.modale__corps { padding: 18px; display: flex; flex-direction: column; gap: 14px; }
.modale__corps .champ { display: flex; flex-direction: column; gap: 4px; font-size: .85rem; color: var(--texte2); }
.champ-radios { display: flex; gap: 16px; border: 0; padding: 0; margin: 0; color: var(--texte); }
.champ-grille { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.calcul-ht { margin: 0; color: var(--texte2); }
.calcul-ht strong { color: var(--texte); }
.modale__pied { display: flex; justify-content: flex-end; gap: 8px; }

/* Fix: l attribut hidden doit masquer les overlays (sinon .overlay{display:flex} gagne). */
.overlay[hidden]{display:none !important;}

/* Alias badges (info/alerte/succes/danger) utilisés par les modules. */
.badge--info{background:color-mix(in srgb,var(--info) 20%,transparent);color:#bcd4ff;border-color:var(--info)}
.badge--alerte{background:color-mix(in srgb,var(--alerte) 20%,transparent);color:#fcd9a3;border-color:var(--alerte)}
.badge--succes{background:color-mix(in srgb,var(--succes) 20%,transparent);color:#a7f3c8;border-color:var(--succes)}