:root{
  --vert:#11A63C; --vert-d:#0C7C2C; --vert-wash:#E6F5EA;
  --lime:#DDDF4B; --bleu:#1A7FA8; --ocre:#9A7B0F;
  --chaud:#C4451F; --froid:#3B7EA1; --ambre:#B5741A;
  --ens-np:#11A63C; --ens-bp:#1A7FA8; --ens-op:#9A7B0F;
  --chevron:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.6 6 6.4 11 1.6' fill='none' stroke='%237C837D' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --bg:#F3F6F3; --surface:#FFFFFF; --surface-2:#EDF0EE; --surface-3:#E3E8E4;
  --line:#DCE1DD; --line-strong:#C2C9C4;
  --ink:#1E211F; --ink-2:#4E554F; --ink-3:#7C837D;
  --rail:#2F353B; --rail-2:#242A2F; --rail-ink:#CBD1CC; --rail-ink-2:#868D88; --rail-line:#3D444A;
  --shadow:0 1px 2px rgba(30,33,31,.06), 0 6px 18px -10px rgba(30,33,31,.22);
  --r:10px;
  --display:"Varela Round", ui-rounded, "Segoe UI", system-ui, sans-serif;
  --body:"IBM Plex Sans", "Segoe UI", system-ui, -apple-system, sans-serif;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --vert:#22B94C; --vert-d:#37D064; --vert-wash:#12331D;
    --bleu:#3FA0C6; --ocre:#C09A2A; --chaud:#DE6540; --froid:#5E9CBC; --ambre:#D69A38;
    --ens-np:#22B94C; --ens-bp:#3FA0C6; --ens-op:#C09A2A;
    --chevron:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.6 6 6.4 11 1.6' fill='none' stroke='%23828983' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    --bg:#141715; --surface:#1C201E; --surface-2:#242926; --surface-3:#2C322E;
    --line:#333A35; --line-strong:#464E48;
    --ink:#E8ECE8; --ink-2:#AFB6B0; --ink-3:#828983;
    --rail:#0E1110; --rail-2:#080A09; --rail-ink:#CBD1CC; --rail-ink-2:#7D847E; --rail-line:#262C28;
    --shadow:0 1px 2px rgba(0,0,0,.5), 0 8px 22px -12px rgba(0,0,0,.7);
  }
}
:root[data-theme="dark"]{
  --vert:#22B94C; --vert-d:#37D064; --vert-wash:#12331D;
  --bleu:#3FA0C6; --ocre:#C09A2A; --chaud:#DE6540; --froid:#5E9CBC; --ambre:#D69A38;
  --ens-np:#22B94C; --ens-bp:#3FA0C6; --ens-op:#C09A2A;
  --chevron:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.6 6 6.4 11 1.6' fill='none' stroke='%23828983' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --bg:#141715; --surface:#1C201E; --surface-2:#242926; --surface-3:#2C322E;
  --line:#333A35; --line-strong:#464E48;
  --ink:#E8ECE8; --ink-2:#AFB6B0; --ink-3:#828983;
  --rail:#0E1110; --rail-2:#080A09; --rail-ink:#CBD1CC; --rail-ink-2:#7D847E; --rail-line:#262C28;
  --shadow:0 1px 2px rgba(0,0,0,.5), 0 8px 22px -12px rgba(0,0,0,.7);
}
/* `hidden` doit l'emporter sur les display:flex/grid des conteneurs qui le portent
   (écran de connexion, application, cartes du back-office). */
[hidden]{display:none!important}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--body);font-size:14px;line-height:1.5;-webkit-font-smoothing:antialiased}
h1,h2,h3,h4{font-family:var(--display);font-weight:400;margin:0;text-wrap:balance;letter-spacing:.1px}
button{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--vert);outline-offset:2px;border-radius:4px}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

/* ---------- shell ---------- */
.app{display:flex;min-height:100vh}
.rail{width:206px;flex:0 0 206px;background:var(--rail);color:var(--rail-ink);display:flex;flex-direction:column;gap:2px;padding:16px 10px 12px;position:sticky;top:0;height:100vh;overflow-y:auto}
.rail-lab{font-size:10px;letter-spacing:.11em;text-transform:uppercase;color:var(--rail-ink-2);padding:14px 10px 6px}
.nav{display:flex;align-items:center;gap:9px;width:100%;padding:8px 10px;background:none;border:0;border-radius:8px;cursor:pointer;color:var(--rail-ink);text-align:left;position:relative;font-size:13.5px}
.nav:hover{background:var(--rail-2)}
.nav[aria-current="true"]{background:var(--rail-2);color:#fff;font-weight:600}
.nav[aria-current="true"] .arche{opacity:1}
.nav .arche{position:absolute;left:2px;top:50%;transform:translateY(-50%);width:5px;height:20px;border-radius:3px;background:var(--vert);opacity:0}
.nav svg{flex:0 0 16px;opacity:.85}
.nav .cnt{margin-left:auto;font-size:11px;font-variant-numeric:tabular-nums;color:var(--rail-ink-2);background:var(--rail-line);padding:1px 6px;border-radius:20px}
.rail-foot{margin-top:auto;border-top:1px solid var(--rail-line);padding:11px 10px 2px;font-size:12px;color:var(--rail-ink-2)}
.rail-foot b{display:block;color:var(--rail-ink);font-weight:600;font-size:12.5px}

.main{flex:1;min-width:0;display:flex;flex-direction:column}
.topbar{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding:14px 24px;border-bottom:1px solid var(--line);background:var(--surface);position:sticky;top:0;z-index:20}
.topbar h1{font-size:19px}
.topbar .sub{font-size:12px;color:var(--ink-3);margin-top:1px}
.spacer{flex:1}
.content{padding:22px 24px 56px;max-width:1420px;width:100%}
.demo-note{display:flex;gap:8px;align-items:flex-start;font-size:12px;color:var(--ink-2);background:var(--surface-2);border:1px solid var(--line);border-left:3px solid var(--lime);border-radius:6px;padding:9px 12px;margin-bottom:18px}

/* ---------- primitives ---------- */
.btn{display:inline-flex;align-items:center;gap:6px;padding:7px 13px;border-radius:8px;border:1px solid var(--line-strong);background:var(--surface);cursor:pointer;font-size:13px;font-weight:500;transition:background .12s}
.btn:hover{background:var(--surface-2)}
.btn-p{background:var(--vert);border-color:var(--vert);color:#fff}
.btn-p:hover{background:var(--vert-d);border-color:var(--vert-d)}
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r)}
.card-h{display:flex;align-items:baseline;gap:10px;padding:14px 16px 0}
.card-h h3{font-size:15px}
.card-h .hint{font-size:11.5px;color:var(--ink-3);margin-left:auto}
.grid{display:grid;gap:14px;align-items:start}
.lab{font-size:10.5px;letter-spacing:.09em;text-transform:uppercase;color:var(--ink-3);font-weight:600}
.num{font-variant-numeric:tabular-nums}

/* stade chips */
.chip{display:inline-flex;align-items:center;gap:5px;font-size:11.5px;font-weight:600;padding:2.5px 8px;border-radius:20px;white-space:nowrap;border:1px solid transparent}
.chip::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor;flex:0 0 6px}
.s-demande{color:var(--bleu);background:color-mix(in srgb,var(--bleu) 11%,transparent);border-color:color-mix(in srgb,var(--bleu) 26%,transparent)}
.s-pris{color:var(--bleu);background:color-mix(in srgb,var(--bleu) 17%,transparent);border-color:color-mix(in srgb,var(--bleu) 38%,transparent)}
.s-rdv{color:var(--ambre);background:color-mix(in srgb,var(--ambre) 13%,transparent);border-color:color-mix(in srgb,var(--ambre) 32%,transparent)}
.s-reflexion{color:var(--ocre);background:color-mix(in srgb,var(--ocre) 13%,transparent);border-color:color-mix(in srgb,var(--ocre) 32%,transparent)}
.s-signe{color:var(--vert);background:var(--vert-wash);border-color:color-mix(in srgb,var(--vert) 40%,transparent)}
.s-abandon{color:var(--ink-3);background:var(--surface-2);border-color:var(--line-strong)}
/* enseigne badges */
.ens{display:inline-flex;align-items:center;justify-content:center;font-size:10px;font-weight:700;letter-spacing:.04em;padding:2px 6px;border-radius:4px;border:1px solid;min-width:38px}
.e-NP{color:var(--vert);border-color:color-mix(in srgb,var(--vert) 45%,transparent);background:var(--vert-wash)}
.e-BP{color:var(--bleu);border-color:color-mix(in srgb,var(--bleu) 45%,transparent);background:color-mix(in srgb,var(--bleu) 11%,transparent)}
.e-OP{color:var(--ocre);border-color:color-mix(in srgb,var(--ocre) 45%,transparent);background:color-mix(in srgb,var(--ocre) 11%,transparent)}

/* ---------- tiles ---------- */
.tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.tile{background:var(--surface);padding:14px 16px 15px;display:flex;flex-direction:column;gap:3px}
.tile .v{font-family:var(--display);font-size:30px;line-height:1.05;font-variant-numeric:tabular-nums}
.tile .d{font-size:11.5px;color:var(--ink-3)}
.tile.hero{background:linear-gradient(180deg,var(--vert-wash),var(--surface) 78%)}
.tile.hero .v{color:var(--vert)}

/* ---------- funnel ---------- */
.funnel{display:flex;flex-direction:column;gap:9px;padding:14px 16px 18px}
.frow{display:grid;grid-template-columns:118px 1fr 96px;align-items:center;gap:11px}
.frow .fl{font-size:12.5px;color:var(--ink-2);text-align:right}
.ftrack{height:26px;background:var(--surface-2);border-radius:5px;overflow:hidden}
.fbar{height:100%;border-radius:4px;display:flex;align-items:center;padding-left:9px;color:#fff;font-size:12.5px;font-weight:600;font-variant-numeric:tabular-nums}
.frow .fr{font-size:11.5px;color:var(--ink-3);font-variant-numeric:tabular-nums}
.frow .fr b{color:var(--ink-2);font-weight:600}

/* ---------- table ---------- */
.tw{overflow-x:auto;border:1px solid var(--line);border-radius:var(--r);background:var(--surface)}
table{border-collapse:collapse;width:100%;min-width:1080px}
#tableListe{min-width:1480px}
#tableListe td{white-space:nowrap}
#tableListe td:first-child{white-space:normal}
thead th{position:sticky;top:0;background:var(--surface-2);font-size:10.5px;letter-spacing:.07em;text-transform:uppercase;color:var(--ink-3);font-weight:700;text-align:left;padding:9px 11px;border-bottom:1px solid var(--line);white-space:nowrap;z-index:2}
tbody td{padding:9px 11px;border-bottom:1px solid var(--line);vertical-align:middle;font-size:13px}
tbody tr:last-child td{border-bottom:0}
tbody tr{cursor:pointer}
tbody tr:hover td{background:var(--surface-2)}
td.n{font-variant-numeric:tabular-nums;white-space:nowrap}
.pname{font-weight:600;display:block;white-space:nowrap}
.ploc{font-size:11.5px;color:var(--ink-3)}
/* thermometer column */
.therm{display:flex;align-items:center;gap:7px;min-width:96px}
.ttrack{position:relative;flex:1;height:5px;border-radius:3px;background:linear-gradient(90deg,var(--froid),var(--surface-3) 50%,var(--chaud))}
.tdot{position:absolute;top:50%;width:11px;height:11px;border-radius:50%;transform:translate(-50%,-50%);border:2px solid var(--surface)}
.tval{font-size:11.5px;font-variant-numeric:tabular-nums;color:var(--ink-2);width:22px;text-align:right}

/* filters */
.filters{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-bottom:13px}
/* Contrôles de saisie — une seule boîte pour tous les types.
   Viser les types un par un laissait date, number, tel et password à la
   hauteur que leur donne le navigateur, et la barre de filtres partait en
   escalier. La hauteur est fixée explicitement, et le chevron des listes est
   dessiné par nos soins : l'apparence native d'un select ignore la hauteur
   sur certains navigateurs. */
select,
textarea,
input:not([type=range]):not([type=checkbox]):not([type=radio]):not([type=file]){
  font:inherit;font-size:13px;color:var(--ink);
  background-color:var(--surface);
  border:1px solid var(--line-strong);border-radius:8px;
}
select,
input:not([type=range]):not([type=checkbox]):not([type=radio]):not([type=file]){
  height:34px;padding:0 10px;line-height:normal;
}
textarea{padding:8px 10px;line-height:1.45}
select{
  -webkit-appearance:none;appearance:none;
  padding-right:28px;
  background-image:var(--chevron);
  background-repeat:no-repeat;
  background-position:right 10px center;
  background-size:11px 8px;
}
select::-ms-expand{display:none}
/* Chrome ajoute ses propres flèches et son icône de calendrier : on les neutralise
   pour que la hauteur soit la nôtre. */
input[type=number]{-moz-appearance:textfield}
input[type=number]::-webkit-outer-spin-button,
input[type=number]::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
input[type=date]::-webkit-calendar-picker-indicator{opacity:.55;cursor:pointer}
input[type=search]{min-width:200px}
input::placeholder,textarea::placeholder{color:var(--ink-3)}
.pill{display:inline-flex;align-items:center;gap:6px;font-size:12px;padding:5px 10px;border-radius:20px;border:1px solid var(--line-strong);background:var(--surface);cursor:pointer}
.pill[aria-pressed="true"]{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.count-line{font-size:12.5px;color:var(--ink-3);margin:0 0 11px}

/* ---------- fiche ---------- */
.fiche{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:16px;align-items:start}
.kv{display:grid;grid-template-columns:132px 1fr;gap:6px 12px;padding:14px 16px 16px;font-size:13px}
.kv dt{color:var(--ink-3);font-size:12px}
.kv dd{margin:0;font-weight:500}
.slider-box{padding:14px 16px 18px}
.srow{display:flex;align-items:baseline;gap:9px;margin-bottom:12px}
.srow .v{font-family:var(--display);font-size:26px;font-variant-numeric:tabular-nums}
.srow .t{font-size:12.5px;font-weight:600}
input[type=range]{width:100%;-webkit-appearance:none;appearance:none;background:transparent;height:22px}
input[type=range]::-webkit-slider-runnable-track{height:7px;border-radius:4px;background:linear-gradient(90deg,var(--froid),var(--surface-3) 50%,var(--chaud))}
input[type=range]::-moz-range-track{height:7px;border-radius:4px;background:linear-gradient(90deg,var(--froid),var(--surface-3) 50%,var(--chaud))}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:19px;height:19px;border-radius:50%;background:var(--surface);border:3px solid var(--ink);margin-top:-6px;cursor:grab;box-shadow:var(--shadow)}
input[type=range]::-moz-range-thumb{width:16px;height:16px;border-radius:50%;background:var(--surface);border:3px solid var(--ink);cursor:grab}
.scale{display:flex;justify-content:space-between;font-size:11px;color:var(--ink-3);margin-top:1px}
/* stepper */
.stepper{display:flex;gap:3px;padding:0 16px 16px;flex-wrap:wrap}
.step{flex:1;min-width:74px;border:0;background:var(--surface-2);color:var(--ink-3);font-size:11.5px;font-weight:600;padding:7px 5px;cursor:pointer;border-radius:5px;text-align:center}
.step.done{background:var(--vert-wash);color:var(--vert)}
.step.now{background:var(--vert);color:#fff}
/* thread */
.thread{display:flex;flex-direction:column;gap:0;padding:4px 16px 14px;max-height:560px;overflow-y:auto}
.msg{display:grid;grid-template-columns:26px 1fr;gap:11px;padding:12px 0;border-bottom:1px solid var(--line)}
.msg:last-child{border-bottom:0}
.mico{width:26px;height:26px;border-radius:7px;display:flex;align-items:center;justify-content:center;background:var(--surface-2);color:var(--ink-2)}
.mhead{display:flex;gap:8px;align-items:baseline;flex-wrap:wrap;margin-bottom:2px}
.mtype{font-size:11px;font-weight:700;letter-spacing:.05em;text-transform:uppercase}
.mwho{font-size:11.5px;color:var(--ink-3)}
.mdate{font-size:11.5px;color:var(--ink-3);margin-left:auto;font-variant-numeric:tabular-nums}
.mbody{font-size:13px;color:var(--ink-2)}
.next{display:inline-flex;align-items:center;gap:5px;margin-top:6px;font-size:11.5px;font-weight:600;color:var(--ambre);background:color-mix(in srgb,var(--ambre) 12%,transparent);border-radius:5px;padding:3px 7px}
.composer{border-top:1px solid var(--line);padding:12px 16px 14px;display:flex;flex-direction:column;gap:9px;background:var(--surface-2);border-radius:0 0 var(--r) var(--r)}
.ctypes{display:flex;gap:5px;flex-wrap:wrap}
textarea{width:100%;resize:vertical;min-height:62px;background:var(--surface)}

/* ---------- kanban ---------- */
.kb{display:grid;grid-template-columns:repeat(6,minmax(184px,1fr));gap:10px;overflow-x:auto;padding-bottom:6px}
.kcol{background:var(--surface-2);border:1px solid var(--line);border-radius:var(--r);display:flex;flex-direction:column;min-width:184px}
.kh{display:flex;align-items:center;gap:7px;padding:10px 11px;border-bottom:1px solid var(--line);font-size:12px;font-weight:700}
.kh .kn{margin-left:auto;font-size:11px;color:var(--ink-3);font-variant-numeric:tabular-nums}
.kbody{display:flex;flex-direction:column;gap:7px;padding:8px}
.kcard{background:var(--surface);border:1px solid var(--line);border-radius:7px;padding:9px 10px;cursor:pointer;display:flex;flex-direction:column;gap:5px}
.kcard:hover{border-color:var(--line-strong)}
.kcard .kt{font-size:12.5px;font-weight:600;line-height:1.3}
.kcard .km{display:flex;align-items:center;gap:6px;font-size:11px;color:var(--ink-3);font-variant-numeric:tabular-nums}

/* ---------- analyse ---------- */
.legend{display:flex;gap:14px;flex-wrap:wrap;padding:0 16px 4px;font-size:12px;color:var(--ink-2)}
.legend span{display:inline-flex;align-items:center;gap:6px}
.swatch{width:11px;height:11px;border-radius:3px;flex:0 0 11px}
.gbars{padding:12px 16px 18px;display:flex;flex-direction:column;gap:14px}
.gg{display:grid;grid-template-columns:104px 1fr;gap:11px;align-items:center}
.gg .gl{font-size:12.5px;color:var(--ink-2);text-align:right;font-variant-numeric:tabular-nums}
.gset{display:flex;flex-direction:column;gap:2px}
.gline{display:flex;align-items:center;gap:8px}
.gtrack{flex:1;height:13px;background:var(--surface-2);border-radius:3px;overflow:hidden}
.gbar{height:100%;border-radius:3px}
.gv{font-size:11.5px;font-variant-numeric:tabular-nums;color:var(--ink-2);width:118px;flex:0 0 118px}
.axis{display:flex;justify-content:space-between;font-size:11px;color:var(--ink-3);border-top:1px solid var(--line);margin-top:2px;padding-top:5px}
.matrix{width:100%;border-collapse:collapse;min-width:520px}
.matrix th,.matrix td{padding:9px 11px;font-size:12.5px;border-bottom:1px solid var(--line);text-align:right;font-variant-numeric:tabular-nums}
.matrix th:first-child,.matrix td:first-child{text-align:left;font-variant-numeric:normal}
.matrix thead th{font-size:10.5px;letter-spacing:.07em;text-transform:uppercase;color:var(--ink-3);background:var(--surface-2)}
.cell{display:inline-block;padding:2px 7px;border-radius:5px;font-weight:600}

/* ---------- back office ---------- */
/* Une colonne, pas deux.
   Le tableau des comptes porte sept colonnes et ses actions en bout de ligne ;
   serré dans une demi-largeur il débordait de cinq cents pixels, et les boutons
   « Modifier » et « Code PIN » se retrouvaient hors de l'écran sans que rien ne
   le signale. La création passe dessous, où elle n'écrase plus rien. */
.bo{display:grid;grid-template-columns:minmax(0,1fr);gap:16px;align-items:start}
.bo #carteCreation{max-width:560px}
.form{padding:14px 16px 16px;display:flex;flex-direction:column;gap:11px}
.field{display:flex;flex-direction:column;gap:4px}
.field label{font-size:12px;color:var(--ink-2);font-weight:500}
.help{font-size:11.5px;color:var(--ink-3)}
.role{display:inline-flex;align-items:center;font-size:11px;font-weight:600;padding:2px 7px;border-radius:5px;border:1px solid var(--line-strong);background:var(--surface-2);color:var(--ink-2)}
.role.admin{color:var(--vert);border-color:color-mix(in srgb,var(--vert) 40%,transparent);background:var(--vert-wash)}
.dot-ok{width:7px;height:7px;border-radius:50%;background:var(--vert);display:inline-block;margin-right:6px}
.dot-off{width:7px;height:7px;border-radius:50%;background:var(--ink-3);display:inline-block;margin-right:6px}

.hidden{display:none!important}
@media (max-width:1000px){
  .fiche,.bo{grid-template-columns:1fr}
}
@media (max-width:760px){
  .app{flex-direction:column}
  .rail{width:100%;flex:none;height:auto;position:static;flex-direction:row;flex-wrap:wrap;gap:4px;padding:12px}
  .brand{width:100%;padding-bottom:10px}
  .rail-lab,.rail-foot,.nav .cnt{display:none}
  .nav{width:auto}
  .content,.topbar{padding-left:16px;padding-right:16px}
  .kb{grid-template-columns:repeat(6,minmax(168px,1fr))}
}

/* ===========================================================================
   Compléments propres à l'application (au-delà de la maquette)
   =========================================================================== */

/* --------------------------------------------------------------- connexion */
.ecran-connexion{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:24px 16px;background:var(--bg)}
.boite-connexion{width:100%;max-width:400px;background:var(--surface);border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow);padding:28px 26px 26px}
.boite-connexion h2{font-size:17px;margin-bottom:4px}
.boite-connexion .intro{font-size:12.5px;color:var(--ink-3);margin:0 0 18px}
.boite-connexion .field input{width:100%}
.boite-connexion .btn-p{width:100%;justify-content:center;margin-top:4px;padding:9px}

/* ------------------------------------------------------------------ alertes */
.alerte{display:flex;gap:8px;align-items:flex-start;font-size:12.5px;border-radius:7px;padding:9px 12px;border:1px solid;margin-bottom:12px}
.alerte-erreur{color:var(--chaud);background:color-mix(in srgb,var(--chaud) 10%,transparent);border-color:color-mix(in srgb,var(--chaud) 32%,transparent)}
.alerte-succes{color:var(--vert);background:var(--vert-wash);border-color:color-mix(in srgb,var(--vert) 38%,transparent)}
.alerte-info{color:var(--bleu);background:color-mix(in srgb,var(--bleu) 10%,transparent);border-color:color-mix(in srgb,var(--bleu) 30%,transparent)}
.alerte code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:13px;background:var(--surface);padding:1px 6px;border-radius:4px;border:1px solid var(--line)}

/* ------------------------------------------------------------------- toast */
#toasts{position:fixed;right:16px;bottom:16px;display:flex;flex-direction:column;gap:8px;z-index:200;max-width:min(380px,calc(100vw - 32px))}
.toast{background:var(--ink);color:var(--bg);font-size:13px;padding:10px 14px;border-radius:8px;box-shadow:var(--shadow);animation:monte .18s ease-out}
.toast.err{background:var(--chaud);color:#fff}
@keyframes monte{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

/* ------------------------------------------------------------------ modale */
dialog{border:1px solid var(--line);border-radius:12px;padding:0;background:var(--surface);color:var(--ink);box-shadow:var(--shadow);max-width:min(720px,calc(100vw - 32px));width:100%}
dialog::backdrop{background:rgba(20,23,21,.5)}
.modale-h{display:flex;align-items:center;gap:10px;padding:15px 18px;border-bottom:1px solid var(--line)}
.modale-h h3{font-size:16px}
.modale-corps{padding:16px 18px;max-height:min(66vh,620px);overflow-y:auto}
.modale-pied{display:flex;gap:8px;justify-content:flex-end;padding:12px 18px;border-top:1px solid var(--line);background:var(--surface-2);border-radius:0 0 12px 12px;flex-wrap:wrap}
.fermer{margin-left:auto;background:none;border:0;cursor:pointer;color:var(--ink-3);font-size:20px;line-height:1;padding:2px 6px;border-radius:6px}
.fermer:hover{background:var(--surface-2);color:var(--ink)}

/* ---------------------------------------------------------------- formulaire */
.grille-form{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:12px}
.grille-form .large{grid-column:1/-1}
.field input,.field select,.field textarea{width:100%}
.field .obligatoire{color:var(--chaud)}
.section-form{font-size:11px;letter-spacing:.09em;text-transform:uppercase;color:var(--ink-3);font-weight:700;margin:18px 0 2px;grid-column:1/-1;border-top:1px solid var(--line);padding-top:14px}
.section-form:first-child{margin-top:0;border-top:0;padding-top:0}

/* --------------------------------------------------------------- squelette */
.chargement{padding:34px;text-align:center;color:var(--ink-3);font-size:13px}
.vide{padding:30px 20px;text-align:center;color:var(--ink-3);font-size:13px}
.vide strong{display:block;color:var(--ink-2);font-size:14px;margin-bottom:4px;font-family:var(--display)}

/* ------------------------------------------------------------- kanban dépôt */
.kcol.survol{outline:2px dashed var(--vert);outline-offset:-3px;background:var(--vert-wash)}
.kcard{user-select:none}
.kcard.deplace{opacity:.45}

/* ------------------------------------------------------------------- divers */
.rail-foot .btn{margin-top:9px;width:100%;justify-content:center;background:var(--rail-2);border-color:var(--rail-line);color:var(--rail-ink);font-size:12px;padding:5px}
.rail-foot .btn:hover{background:var(--rail-line)}
.badge-lecture{display:inline-block;font-size:10px;letter-spacing:.05em;text-transform:uppercase;font-weight:700;color:var(--ambre);border:1px solid color-mix(in srgb,var(--ambre) 40%,transparent);background:color-mix(in srgb,var(--ambre) 12%,transparent);padding:1px 6px;border-radius:4px;margin-left:6px}
.aq{display:inline-block;font-size:10px;font-weight:700;color:var(--ocre);background:color-mix(in srgb,var(--ocre) 14%,transparent);border:1px solid color-mix(in srgb,var(--ocre) 34%,transparent);padding:1px 5px;border-radius:4px;margin-left:6px;white-space:nowrap}
.motif{font-size:11px;color:var(--ink-3)}
.lien{background:none;border:0;color:var(--bleu);cursor:pointer;font:inherit;font-size:12.5px;text-decoration:underline;padding:0}

/* ===========================================================================
   Boîte à idées
   =========================================================================== */
.idee{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);margin-bottom:10px;overflow:hidden}
.idee-h{display:flex;gap:12px;align-items:flex-start;padding:14px 16px}
.idee-txt{flex:1;min-width:0;font-size:14px;line-height:1.5;white-space:pre-wrap;word-break:break-word}
.idee-meta{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:8px;font-size:11.5px;color:var(--ink-3)}
.idee-meta .num{font-variant-numeric:tabular-nums}

/* Colonne de vote : la voix compte plus que le bouton, d'où le chiffre au-dessus. */
.vote{display:flex;flex-direction:column;align-items:center;gap:2px;flex:0 0 52px;border:1px solid var(--line-strong);
  border-radius:9px;padding:6px 4px 5px;background:var(--surface);cursor:pointer;transition:border-color .12s,background .12s}
.vote:hover{background:var(--surface-2)}
.vote[aria-pressed="true"]{border-color:var(--vert);background:var(--vert-wash);color:var(--vert)}
.vote .n{font-family:var(--display);font-size:17px;line-height:1;font-variant-numeric:tabular-nums}
.vote .l{font-size:9.5px;letter-spacing:.04em;text-transform:uppercase;font-weight:700;color:inherit;opacity:.75}
.vote:disabled{cursor:default;opacity:.6}

/* statuts */
.i-nouveau{color:var(--ink-3);background:var(--surface-2);border-color:var(--line-strong)}
.i-valide{color:var(--bleu);background:color-mix(in srgb,var(--bleu) 13%,transparent);border-color:color-mix(in srgb,var(--bleu) 34%,transparent)}
.i-en_cours{color:var(--ambre);background:color-mix(in srgb,var(--ambre) 13%,transparent);border-color:color-mix(in srgb,var(--ambre) 32%,transparent)}
.i-fait{color:var(--vert);background:var(--vert-wash);border-color:color-mix(in srgb,var(--vert) 40%,transparent)}

.neuf{display:inline-block;font-size:9.5px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;
  color:var(--ink);background:var(--lime);padding:1px 6px;border-radius:4px}

.idee-pied{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:9px 16px;border-top:1px solid var(--line);background:var(--surface-2)}
.idee-pied select{height:30px;font-size:12px}
.idee-fil{border-top:1px solid var(--line);padding:4px 16px 0}
.precision{display:grid;grid-template-columns:auto 1fr;gap:9px;padding:10px 0;border-bottom:1px solid var(--line)}
.precision:last-of-type{border-bottom:0}
.pastille{width:24px;height:24px;border-radius:50%;background:var(--surface-2);color:var(--ink-2);display:flex;
  align-items:center;justify-content:center;font-size:10px;font-weight:700;flex:0 0 24px}
.precision .h{display:flex;gap:8px;align-items:baseline;flex-wrap:wrap;margin-bottom:2px}
.precision .qui{font-size:12px;font-weight:600}
.precision .quand{font-size:11.5px;color:var(--ink-3);margin-left:auto;font-variant-numeric:tabular-nums}
.precision .corps{font-size:13px;color:var(--ink-2);white-space:pre-wrap;word-break:break-word}
.repondre{display:flex;gap:8px;align-items:flex-end;padding:11px 16px 14px;border-top:1px solid var(--line)}
.repondre textarea{flex:1;min-height:38px}
@media (max-width:620px){
  .idee-h{flex-direction:column-reverse;align-items:stretch}
  .vote{flex-direction:row;justify-content:center;gap:7px;flex:none;align-self:flex-start;padding:5px 11px}
  .repondre{flex-direction:column;align-items:stretch}
}
.idee-edition{width:100%}
.motif-rejet{margin:8px 0 0;font-size:12.5px;color:var(--ink-2);border-left:2px solid var(--chaud);padding-left:9px}
.i-rejete{color:var(--chaud);background:color-mix(in srgb,var(--chaud) 11%,transparent);border-color:color-mix(in srgb,var(--chaud) 30%,transparent)}
.saisie-motif{display:flex;flex-direction:column;gap:8px;padding:12px 16px 14px;border-top:1px solid var(--line);background:color-mix(in srgb,var(--chaud) 5%,var(--surface))}
.saisie-motif label{font-size:12.5px;font-weight:600;color:var(--ink-2)}
.saisie-motif textarea{width:100%}
/* Un rejet se confirme, il ne se célèbre pas : le vert de validation n'a rien à faire ici. */
.btn-rejet{background:var(--chaud);border-color:var(--chaud);color:#fff}
.btn-rejet:hover{background:color-mix(in srgb,var(--chaud) 85%,black);border-color:color-mix(in srgb,var(--chaud) 85%,black)}

/* ===========================================================================
   Logo — fichier fourni, détouré
   =========================================================================== */
.brand{display:block;padding:0;margin:0 0 10px;background:none;border-radius:0}
.logo{display:block;width:100%;max-width:186px;height:auto}

/* Le logo est blanc : sur le rail anthracite il se pose seul, sur la carte de
   connexion, claire, il lui faut son fond — le pavé noir de la charte. */
.boite-connexion .brand{background:#0F1110;border-radius:12px;padding:17px 24px;margin-bottom:22px}
.boite-connexion .logo{max-width:252px;margin:0 auto}

/* ===========================================================================
   Signalement des champs obligatoires
   Un formulaire refusé doit dire lesquels, nommément et sur place.
   =========================================================================== */
.en-erreur input,
.en-erreur select,
.en-erreur textarea{
  border-color:var(--chaud);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--chaud) 15%,transparent);
}
.en-erreur label{color:var(--chaud);font-weight:600}
.erreur-champ{display:block;margin-top:5px;font-size:12px;font-weight:600;color:var(--chaud)}
.erreur-champ::before{content:"▲";font-size:9px;margin-right:5px;vertical-align:1px}

.bandeau-manquants{align-items:flex-start;gap:10px;padding:11px 14px}
.bandeau-manquants strong{display:block;margin-bottom:6px;font-size:13px;line-height:1.35}
.liste-manquants{margin:0 0 7px;padding-left:19px}
.liste-manquants li{margin:3px 0;font-size:12.5px}
.liste-manquants .lien{color:inherit;font-weight:600;text-decoration-thickness:1px;text-underline-offset:2px}
.bandeau-manquants .help{color:inherit;opacity:.8}
/* Un champ fautif garde sa couleur même au focus : un liseré vert sur un champ
   en erreur dit le contraire de ce que dit le message juste en dessous. */
.en-erreur input:focus-visible,
.en-erreur select:focus-visible,
.en-erreur textarea:focus-visible{outline-color:var(--chaud)}

/* =============================================================================
   MODULE ADHÉRENTS
   Conçu pour le téléphone d'abord : la saisie d'un avis se fait debout sur un
   parking, la lecture se fait au bureau. Un écran pensé pour le grand format
   puis rétréci donne toujours un mobile médiocre ; l'inverse donne un bureau
   confortable.
   ========================================================================== */

/* ---------------------------------------------------------------- pastilles */
.note{display:inline-block;min-width:34px;padding:2px 7px;border-radius:6px;
  font-variant-numeric:tabular-nums;font-weight:600;font-size:12.5px;text-align:center}
.note.n-vide{color:var(--ink-3);background:var(--surface-2);font-weight:400}
.note.n-bas{color:#fff;background:var(--chaud)}
.note.n-moyen{color:var(--ink);background:color-mix(in srgb,var(--ambre) 26%,var(--surface-2))}
.note.n-haut{color:#fff;background:var(--ens-np)}
.note.n-faible{color:var(--ink-2);background:var(--surface-2)}
.note.n-fort{color:var(--ink);background:color-mix(in srgb,var(--froid) 32%,var(--surface-2))}
.vig-haut{color:var(--chaud)}

.etiq{display:inline-block;margin-left:6px;padding:1px 6px;border-radius:5px;
  background:var(--surface-2);color:var(--ink-2);font-size:11px;font-weight:600;vertical-align:1px}
.etiq-vide{background:transparent;border:1px dashed var(--line);color:var(--ink-3);font-weight:400}
.etiq-vieux{background:color-mix(in srgb,var(--ambre) 20%,transparent);color:var(--ambre)}
.sig{display:inline-block;margin-left:5px;padding:1px 6px;border-radius:5px;font-size:11px;font-weight:600}
.sig-visage{background:color-mix(in srgb,var(--chaud) 16%,transparent);color:var(--chaud)}
.sig-desac{background:color-mix(in srgb,var(--ambre) 18%,transparent);color:var(--ambre)}
.sig-alerte{background:var(--chaud);color:#fff}
.sous{font-size:11.5px;color:var(--ink-3);margin-top:2px}
.tile-att .t-n{color:var(--ambre)}
.tile-chaud .t-n{color:var(--chaud)}
.tile.cliquable{cursor:pointer;text-align:left;border:0;font:inherit;color:inherit;width:100%}
.tile.cliquable:hover{background:var(--surface-2)}
.tile.cliquable[aria-pressed="true"]{box-shadow:inset 3px 0 0 var(--vert)}

/* ------------------------------------------------------ l'appel à qualifier
   La file de travail du module adhérents : les officines sur lesquelles
   personne n'a d'avis vivant. Tant qu'il en reste, c'est la première chose
   que l'on voit, avant les tuiles et avant les tableaux. */
.appel{display:flex;align-items:center;gap:14px;width:100%;margin-bottom:14px;
  padding:15px 18px;border-radius:var(--r);cursor:pointer;text-align:left;font:inherit;
  color:var(--ink);background:linear-gradient(180deg,var(--vert-wash),var(--surface) 85%);
  border:1px solid color-mix(in srgb,var(--vert) 38%,var(--line));transition:box-shadow .12s}
.appel:hover{box-shadow:0 2px 10px color-mix(in srgb,var(--vert) 22%,transparent)}
.appel .a-n{font-family:var(--display);font-size:34px;line-height:1;color:var(--vert-d);
  font-variant-numeric:tabular-nums;flex:0 0 auto}
.appel .a-t{flex:1 1 auto;min-width:0}
.appel .a-t b{display:block;font-size:15px;font-weight:600}
.appel .a-t span{display:block;font-size:12px;color:var(--ink-2);margin-top:2px}
.appel .a-go{flex:0 0 auto;padding:8px 15px;border-radius:8px;background:var(--vert);
  color:#fff;font-size:13px;font-weight:600;white-space:nowrap}
.appel:hover .a-go{background:var(--vert-d)}
/* La recherche prend la place que les filtres lui laissent : tronquée à
   « Officine, titulaire, ville, co », elle n'annonce plus ce qu'elle accepte. */
#vue-adherents #aRecherche{flex:1 1 260px}

/* --------------------------------------------------------------- mentions
   Une mention reconnue se voit sans crier : le nom reste lisible dans la
   phrase, souligné en pointillé comme une note de bas de page, et se clique. */
.mention{display:inline;padding:0;margin:0;border:0;background:none;font:inherit;
  color:var(--bleu);border-bottom:1px dotted currentColor;cursor:pointer}
.mention:hover{border-bottom-style:solid}
/* Un collègue n'a pas de fiche à ouvrir, et l'officine qu'on lit déjà non plus :
   même signe, sans le geste. */
.mention-inerte{color:var(--ocre);cursor:default}

.mentions-liste{margin-top:4px;max-height:212px;overflow-y:auto;background:var(--surface);
  border:1px solid var(--line-strong);border-radius:8px}
.mention-choix{display:flex;align-items:baseline;gap:8px;width:100%;text-align:left;
  padding:8px 11px;border:0;background:none;font:inherit;color:inherit;cursor:pointer}
.mention-choix b{font-weight:600;font-size:13px}
.mention-choix span{font-size:11.5px;color:var(--ink-3);margin-left:auto;white-space:nowrap}
.mention-choix:hover,.mention-choix.vise{background:var(--surface-2)}

/* --------------------------------------------- déploiement de l'identité
   Deux lignes, deux listes. La pastille de gauche dit l'état d'un coup d'œil :
   c'est le chiffre qu'on vient chercher, pas le mot. */
.deploiement{padding:10px 16px 14px;display:grid;gap:8px}
.dep{display:flex;align-items:center;gap:10px;font-size:13.5px}
.dep-l{flex:1 1 auto;display:flex;align-items:center;gap:8px}
.dep-l::before{content:"";flex:0 0 auto;width:9px;height:9px;border-radius:50%;
  background:var(--line-strong)}
.dep select{flex:0 0 auto;min-width:118px}
.dep[data-etat="prevu"] .dep-l::before{background:var(--froid)}
.dep[data-etat="en_cours"] .dep-l::before{background:var(--ambre)}
.dep[data-etat="pose"] .dep-l::before{background:var(--vert)}

/* ---------------------------------------------------------- signalement
   Le seul bouton de la fiche qui demande une hésitation : il alerte toute
   l'équipe. Ambré, pas rouge — le rouge dit « incident en cours », l'ambre
   dit « regardez ça ». */
.btn-signal{color:var(--ambre);border-color:color-mix(in srgb,var(--ambre) 45%,var(--line-strong))}
.btn-signal:hover{background:color-mix(in srgb,var(--ambre) 10%,transparent)}
.btn-signal-p{background:var(--ambre);border-color:var(--ambre);color:#fff}
.btn-signal-p:hover{background:color-mix(in srgb,var(--ambre) 85%,black)}
/* ------------------------------------------------------ édition du listing */
.bloc-export{border:1px solid var(--line);border-radius:var(--r);padding:11px 14px 13px;margin:0 0 12px}
.bloc-export legend{padding:0 6px;font-size:11px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--ink-3);font-weight:600}
.bloc-export .choix{display:grid;gap:7px}
.bloc-export .choix-ligne{grid-auto-flow:column;justify-content:start;gap:18px}
.bloc-export label{display:flex;align-items:flex-start;gap:8px;font-size:13.5px;cursor:pointer}
.bloc-export label input{margin-top:2px;flex:0 0 auto}
.bloc-export label b{font-weight:600}
.bloc-export label i{display:block;font-style:normal;font-size:12px;color:var(--ink-3);margin-top:1px}
.ligne-case{margin-top:10px;padding-top:9px;border-top:1px solid var(--line)}
/* Ce que le fichier ne contiendra pas se lit avant de cliquer, pas après. */
.note-export{font-size:12px;color:var(--ink-2);background:var(--surface-2);
  border-left:3px solid var(--lime);border-radius:6px;padding:9px 12px;margin:0}

.lien-officine-mini{background:none;border:0;padding:0;font:inherit;color:var(--ink);
  font-weight:600;font-size:13px;cursor:pointer;text-align:left}
.lien-officine-mini:hover{text-decoration:underline}
.lien-officine-mini .etiq{margin-left:5px;font-weight:500}
tr.cliquable{cursor:pointer}
tr.cliquable:hover{background:var(--surface-2)}

/* ------------------------------------------------------------------ règles */
/* Les avis des autres en filigrane : on voit où sont ses collègues pendant
   qu'on se décide, et la moyenne se déplace sous les doigts.                */
.axe-bloc{margin-bottom:18px}
.axe-h{display:flex;align-items:center;justify-content:space-between;gap:10px;
  font-size:12.5px;color:var(--ink-2);margin-bottom:9px}
.regle{position:relative;height:26px;border-radius:13px;background:var(--surface-2);
  border:1px solid var(--line)}
.regle .repere{position:absolute;top:3px;width:18px;height:18px;margin-left:-9px;border-radius:50%;
  background:color-mix(in srgb,var(--ink-3) 34%,transparent);display:grid;place-items:center}
.regle .repere i{font-size:8.5px;font-style:normal;font-weight:700;color:var(--ink-2)}
.regle .repere.perime{opacity:.32}
.regle .repere.moi{background:var(--bleu);outline:2px solid var(--surface)}
.regle .repere.moi i{color:#fff}
.regle .moy{position:absolute;top:-4px;bottom:-4px;width:2px;margin-left:-1px;background:var(--ink);border-radius:1px}
.colleges{margin-top:7px;font-size:11.5px;color:var(--ink-3)}
.colleges b{color:var(--ink-2)}

.vigilance{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;margin-top:6px;padding-top:12px;
  border-top:1px solid var(--line);font-size:13px}
.vigilance b{font-size:19px;font-variant-numeric:tabular-nums}
.vigilance.haute b{color:var(--chaud)}
.vigilance .quad{font-size:12px;color:var(--ink-3)}

/* ------------------------------------------------------- écran de notation */
.curseur-axe{padding:16px 0;border-bottom:1px solid var(--line)}
.curseur-axe:last-child{border-bottom:0}
.curseur-axe label{display:block;margin-bottom:12px}
.curseur-axe label b{display:block;font-size:14px}
.curseur-axe .question{display:block;font-size:12.5px;color:var(--ink-3);margin-top:2px}
.piste{position:relative;padding:2px 0}
.piste .reperes{position:absolute;inset:0;pointer-events:none;z-index:1}
.piste .reperes .repere{position:absolute;top:-13px;width:17px;height:17px;margin-left:-8.5px;
  border-radius:50%;background:color-mix(in srgb,var(--ink-3) 30%,transparent);display:grid;place-items:center}
.piste .reperes .repere i{font-size:8px;font-style:normal;font-weight:700;color:var(--ink-2)}
.piste .reperes .repere.perime{opacity:.3}
.curseur-axe input[type=range]{width:100%;height:34px;margin:0;-webkit-appearance:none;background:transparent}
.curseur-axe input[type=range]::-webkit-slider-runnable-track{height:8px;border-radius:4px;background:var(--surface-3)}
.curseur-axe input[type=range]::-moz-range-track{height:8px;border-radius:4px;background:var(--surface-3)}
/* 30 px : la cible reste attrapable au pouce, en marchant. */
.curseur-axe input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:30px;height:30px;
  margin-top:-11px;border-radius:50%;background:var(--bleu);border:3px solid var(--surface);
  box-shadow:0 1px 4px rgba(0,0,0,.28);cursor:grab}
.curseur-axe input[type=range]::-moz-range-thumb{width:24px;height:24px;border-radius:50%;
  background:var(--bleu);border:3px solid var(--surface);box-shadow:0 1px 4px rgba(0,0,0,.28);cursor:grab}
.graduations{display:flex;justify-content:space-between;margin-top:2px;padding:0 2px;
  font-size:10.5px;color:var(--ink-3);font-variant-numeric:tabular-nums}
.palier{margin-top:10px;padding:10px 12px;border-radius:8px;background:var(--surface-2);
  border-left:3px solid var(--bleu);min-height:44px}
.palier b{display:block;font-size:13px;margin-bottom:2px}
.palier span{font-size:12px;color:var(--ink-2);line-height:1.45}
.ancres{margin-top:10px}
.ancres summary{font-size:12px;color:var(--ink-3);cursor:pointer;padding:4px 0}
.ancre{padding:7px 0;border-top:1px solid var(--line);font-size:12px}
.ancre b{display:block;color:var(--ink-2)}
.ancre span{color:var(--ink-3);line-height:1.45}

/* ---------------------------------------------------------------- bandeaux */
.bandeau{margin-top:12px;padding:12px 15px;border-radius:var(--r);font-size:13px;line-height:1.5}
.bandeau-info{background:var(--surface-2);color:var(--ink-2)}
.bandeau-att{background:color-mix(in srgb,var(--ambre) 14%,transparent);
  border-left:3px solid var(--ambre);color:var(--ink-2)}
.bandeau-visage{background:color-mix(in srgb,var(--chaud) 12%,transparent);
  border-left:3px solid var(--chaud);color:var(--ink-2)}

.alerte{padding:11px 13px;border-radius:8px;background:var(--surface-2);margin-bottom:9px;
  border-left:3px solid var(--ink-3)}
.alerte.a-risque,.alerte.a-decrochage_consolide{border-left-color:var(--chaud)}
.alerte.a-decrochage_individuel{border-left-color:var(--ambre)}
.alerte.a-double_visage{border-left-color:var(--chaud)}
/* Ambre et non rouge : le rouge dit « incident en cours », l'ambre « regardez ça ». */
.alerte.a-signalement{border-left-color:var(--ambre)}
.alerte p{margin:6px 0 0;font-size:12.5px;color:var(--ink-2);font-style:italic}
.alerte-ligne{padding:10px 0;border-bottom:1px solid var(--line)}
.alerte-ligne:last-child{border-bottom:0}
.btn-mini{margin-top:8px;padding:3px 10px;font-size:11.5px}
.lien-officine{display:block;width:100%;text-align:left;background:none;border:0;padding:7px 0;
  cursor:pointer;color:var(--ink);font:inherit}
.lien-officine:hover b{text-decoration:underline}

.ligne-cov{padding:8px 0;border-bottom:1px solid var(--line);font-size:13px}
.ligne-cov:last-child{border-bottom:0}
.cov-n{display:inline-block;margin-left:9px;font-size:11.5px;color:var(--ink-3)}
.fil{max-height:460px;overflow-y:auto}
.entree{display:block;padding:10px 0;border-bottom:1px solid var(--line)}
.entree:last-child{border-bottom:0}
.entree-h{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
.entree p{margin:5px 0 0;font-size:12.5px;color:var(--ink-2);line-height:1.5}
.entree-perime{opacity:.55}
.trio{margin-top:4px;font-size:12px;color:var(--ink-3);font-variant-numeric:tabular-nums}
.fiche-h{display:flex;align-items:flex-start;gap:14px;flex-wrap:wrap}
.fiche-h h2{margin:0;font-size:20px}
.actions-fiche{display:flex;gap:8px;flex-wrap:wrap}
.vide{text-align:center;color:var(--ink-3);padding:26px}

/* ------------------------------------------------------------------- nuage */
/* Le choix des deux axes, au-dessus du nuage : deux listes et un échange. */
.axes-nuage{display:flex;align-items:center;gap:8px;flex-wrap:wrap;
  padding:12px 16px 0;font-size:12.5px;color:var(--ink-2)}
.axes-nuage select{flex:0 0 auto;min-width:132px}
.axes-nuage label{font-weight:500}
.axes-nuage #mEchanger{padding:0;width:34px;justify-content:center;font-size:15px}
.axes-nuage .hint{margin-left:auto;font-size:11.5px;color:var(--ink-3)}
.nuage{width:100%;height:auto;max-height:70vh}
.nuage .q{opacity:.5}
.nuage .q-risque{fill:color-mix(in srgb,var(--chaud) 12%,transparent)}
.nuage .q-ambass{fill:color-mix(in srgb,var(--ens-np) 12%,transparent)}
.nuage .q-attr{fill:var(--surface-2)}
.nuage .q-fidele{fill:color-mix(in srgb,var(--froid) 10%,transparent)}
.nuage .q-lab{font-size:10px;fill:var(--ink-3);font-weight:600}
.nuage .axe-l{stroke:var(--line);stroke-width:1}
.nuage .grad,.nuage .axe-t{font-size:10px;fill:var(--ink-3)}
.nuage .axe-t{text-anchor:middle;font-weight:600}
.nuage .mediane{stroke:var(--line-strong);stroke-width:1;stroke-dasharray:3 4}
.nuage .pt{fill:var(--froid);stroke:var(--surface);stroke-width:1.5;cursor:pointer}
.nuage .pt:hover,.nuage .pt:focus-visible{stroke:var(--ink);stroke-width:2.5;outline:none}
/* Le troisième axe donne la teinte. Du pâle au soutenu, sans chaleur : une
   forte influence, une forte fidélité ne sont en soi ni bonnes ni mauvaises,
   et le rouge doit rester lisible comme une alerte. */
.nuage .ton-1,.nuage .ton-2{fill:color-mix(in srgb,var(--froid) 28%,var(--surface-2))}
.nuage .ton-3,.nuage .ton-4{fill:color-mix(in srgb,var(--froid) 50%,var(--surface-2))}
.nuage .ton-5,.nuage .ton-6{fill:color-mix(in srgb,var(--froid) 72%,var(--surface-2))}
.nuage .ton-7,.nuage .ton-8{fill:var(--froid)}
.nuage .ton-9,.nuage .ton-10{fill:color-mix(in srgb,var(--froid) 72%,var(--ink))}
.nuage .pt-risque{fill:var(--chaud)}
.nuage .agr-7,.nuage .agr-8{fill:color-mix(in srgb,var(--ambre) 70%,var(--froid))}
.nuage .agr-9,.nuage .agr-10{fill:var(--ambre)}
.nuage .pt-risque.agr-9,.nuage .pt-risque.agr-10{fill:var(--chaud)}

/* --------------------------------------------------------------- téléphone */
.cartes-mobile{display:none}

@media (max-width:760px){
  /* Le tableau devient des cartes empilées : aucun défilement horizontal. */
  #vue-adherents .tw{display:none}
  .cartes-mobile{display:grid;gap:9px}
  .carte-adh{display:block;width:100%;text-align:left;padding:13px 14px;border-radius:var(--r);
    background:var(--surface);border:1px solid var(--line);cursor:pointer;font:inherit;color:inherit}
  .carte-adh:active{background:var(--surface-2)}
  .carte-h{display:flex;align-items:center;justify-content:space-between;gap:8px;font-size:15px}
  .carte-s{font-size:12px;color:var(--ink-3);margin-top:3px}
  .carte-n{display:flex;gap:12px;margin-top:9px;font-size:11.5px;color:var(--ink-3);flex-wrap:wrap}
  .carte-n span{display:flex;align-items:center;gap:4px}
  /* Une officine à qualifier se voit à un mètre : le bord gauche la signale,
     et la carte dit quel geste on attend plutôt que ce qui manque. */
  .carte-adh.a-qualifier{border-left:4px solid var(--vert);padding-left:11px}
  .carte-geste{display:flex;align-items:center;gap:6px;margin-top:10px;padding-top:9px;
    border-top:1px solid var(--line);font-size:12.5px;font-weight:600;color:var(--vert-d)}

  .fiche-h{flex-direction:column;gap:10px}
  .actions-fiche{width:100%}
  /* Les deux gestes du terrain passent devant, en pleine largeur. */
  .actions-fiche .btn{flex:1 1 46%;min-height:44px}
  .actions-fiche #fCouverture{flex-basis:100%}

  /* Au pouce, les trois files passent devant : elles sont ce qu'on vient
     chercher, la recherche et les tris ne servent qu'ensuite. */
  #vue-adherents .filters{gap:7px;flex-wrap:wrap}
  #vue-adherents .filters input,#vue-adherents .filters select{flex:1 1 46%;min-width:0;order:3}
  #vue-adherents .filters #aRecherche{flex-basis:100%;order:2}
  #vue-adherents .filters .spacer{display:none}
  #vue-adherents .filters #aExport{order:4}
  #aFiltreQualifier,#aFiltreRisque,#aFiltreReevaluer{order:1;flex:1 1 0;height:38px;
    justify-content:center;font-size:12.5px;padding:0 4px;white-space:nowrap}
  #aFiltreQualifier{flex-grow:1.4}

  /* Au pouce, la liste des noms ne prend qu'un tiers d'écran : le reste doit
     rester visible, sans quoi on ne sait plus dans quelle phrase on écrit. */
  .mentions-liste{max-height:158px}
  .mention-choix{min-height:42px;padding:8px 12px}
  .mention-choix span{max-width:44%;overflow:hidden;text-overflow:ellipsis}

  /* Au pouce, la bande se plie : le nombre et la phrase sur une ligne, le geste
     en pleine largeur dessous. À plat, le bouton écrasait la phrase à un mot
     par ligne et la bande mangeait la moitié de l'écran. */
  .appel{display:grid;grid-template-columns:auto minmax(0,1fr);grid-template-areas:"n t" "go go";
    gap:4px 12px;padding:13px 14px;margin-bottom:10px;align-items:center}
  .appel .a-n{grid-area:n;font-size:34px}
  .appel .a-t{grid-area:t}
  .appel .a-t b{font-size:14.5px}
  .appel .a-t span{font-size:11.5px}
  .appel .a-go{grid-area:go;margin-top:9px;padding:0 12px;height:42px;font-size:13px;
    display:flex;align-items:center;justify-content:center;white-space:normal}
  /* Les tuiles mangeaient un écran entier avant la première officine. */
  #tuilesAdherents{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
  #tuilesAdherents .tile{padding:9px 10px;border-radius:8px}
  #tuilesAdherents .t-n{font-size:19px}
  #tuilesAdherents .t-l{font-size:10.5px;line-height:1.25}
  #tuilesAdherents .t-a{display:none}
  /* Une tuile seule sur sa ligne s'étale plutôt que de laisser une case vide,
     qui donne l'impression que l'écran n'a pas fini de charger. */
  #tuilesAdherents .tile:last-child:nth-child(3n+1){grid-column:span 3}
  #tuilesAdherents .tile:last-child:nth-child(3n+2){grid-column:span 2}

  .modale-notation{width:100%;max-width:100%;height:100dvh;max-height:100dvh;margin:0;border-radius:0}
  .modale-notation .modale-corps{max-height:calc(100dvh - 132px)}
  .modale-notation .modale-pied{position:sticky;bottom:0;background:var(--surface)}
  /* En dessous de 16 px, Safari zoome tout seul sur les champs de saisie. */
  .curseur-axe input[type=range],#nCommentaire,#cSuite{font-size:16px}
  .nuage{max-height:none}
  /* Au pouce, les deux listes tiennent la largeur : « En abscisse » au-dessus
     de sa liste plutôt qu'à côté, et l'échange au bout de la ligne. */
  .axes-nuage{gap:6px 8px;padding:10px 12px 0}
  .axes-nuage select{flex:1 1 40%;min-width:0}
  .axes-nuage .hint{flex-basis:100%;margin-left:0}
}

/* ----------------------------------------------------------- rapport d'import */
.rapport-chiffres{display:grid;grid-template-columns:repeat(4,1fr);gap:9px;margin-bottom:15px}
.rapport-n{background:var(--surface-2);border-radius:8px;padding:10px 11px}
.rapport-n b{display:block;font-size:21px;font-variant-numeric:tabular-nums;line-height:1.1}
.rapport-n span{display:block;font-size:10.5px;color:var(--ink-3);margin-top:3px;line-height:1.3}
.rapport-bloc{margin-top:13px;padding-left:11px;border-left:3px solid var(--line)}
.rapport-bloc.ton-erreur{border-left-color:var(--chaud)}
.rapport-bloc.ton-attention{border-left-color:var(--ambre)}
.rapport-bloc b{font-size:12.5px}
.rapport-bloc ul{margin:5px 0 0;padding-left:17px}
.rapport-bloc li{font-size:12px;color:var(--ink-2);line-height:1.55}
#impFichier{padding:9px 10px;height:auto}

@media (max-width:760px){
  .rapport-chiffres{grid-template-columns:repeat(2,1fr)}
}
.facultatif{font-size:10.5px;font-weight:500;color:var(--ink-3);text-transform:lowercase;
  background:var(--surface-2);border-radius:4px;padding:1px 6px;margin-left:5px;vertical-align:1px}

/* ------------------------------------------------------- connexion par PIN */
.onglets-connexion{display:flex;gap:6px;margin:0 0 15px;padding:4px;border-radius:9px;background:var(--surface-2)}
.onglet{flex:1;padding:8px 10px;border:0;border-radius:6px;background:transparent;cursor:pointer;
  font:inherit;font-size:13px;font-weight:600;color:var(--ink-3)}
.onglet[aria-selected="true"]{background:var(--surface);color:var(--ink);box-shadow:0 1px 3px rgba(0,0,0,.12)}

.saisie-pin{text-align:center;font-size:24px;letter-spacing:.42em;font-variant-numeric:tabular-nums;
  padding-left:.42em}

/* Pavé au pouce : 56 px de haut, bien au-delà des 44 exigés, parce qu'on
   l'utilise en marchant et parfois en plein soleil. */
.pave{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:12px}
.pave button{height:56px;border:1px solid var(--line);border-radius:10px;background:var(--surface);
  font:inherit;font-size:21px;font-variant-numeric:tabular-nums;color:var(--ink);cursor:pointer}
.pave button:active{background:var(--surface-3)}
.pave button.vide{border:0;background:none;cursor:default}
.pave button[data-touche="effacer"]{font-size:17px;color:var(--ink-3)}

.btn-wa{display:block;text-align:center;text-decoration:none;margin-top:6px;
  background:#1FA855;border-color:#1FA855;color:#fff;font-weight:600}
.btn-wa:hover{background:#178a45;border-color:#178a45;color:#fff}

@media (max-width:760px){
  .pave button{height:62px;font-size:23px}
  .saisie-pin{font-size:26px}
}

/* Actions d'une ligne d'opérateur : elles passent à la ligne plutôt que de
   pousser le tableau hors du cadre. */
.actions-ligne{display:flex;flex-wrap:wrap;gap:4px 9px;align-items:center}
.actions-ligne .lien{white-space:nowrap}

/* ------------------------------------------------------------ choix du profil */
.profils{display:grid;grid-template-columns:repeat(2,1fr);gap:9px;margin-bottom:6px}
.profil{display:flex;align-items:center;gap:10px;padding:11px 12px;border:1px solid var(--line);
  border-radius:10px;background:var(--surface);cursor:pointer;font:inherit;text-align:left}
.profil:hover{border-color:var(--bleu);background:var(--surface-2)}
.profil-init{flex:none;width:34px;height:34px;border-radius:50%;background:var(--surface-3);
  display:grid;place-items:center;font-size:12.5px;font-weight:700;color:var(--ink-2)}
.profil-nom{font-size:13.5px;font-weight:600;color:var(--ink);line-height:1.2}
.profil-choisi{margin:0 0 12px;font-size:15px;font-weight:600}

@media (max-width:420px){ .profils{grid-template-columns:1fr} }

/* =============================================================================
   NAVIGATION DU TÉLÉPHONE
   Le rail vertical, replié en grille de onze boutons, mangeait un écran entier
   avant la première ligne de contenu — et la déconnexion, logée dans son pied,
   disparaissait purement et simplement. Une barre au pouce la remplace.
   ========================================================================== */

.barre-mobile{display:none}
.feuille,.feuille-fond{display:none}

@media (max-width:760px){
  /* Le rail disparaît : il est remplacé, pas rétréci. */
  .app > .rail{display:none}

  .barre-mobile{
    display:grid;grid-template-columns:repeat(5,1fr);
    position:fixed;left:0;right:0;bottom:0;z-index:40;
    background:var(--rail);border-top:1px solid var(--rail-line);
    /* Encoche et barre d'accueil des iPhone. */
    padding-bottom:env(safe-area-inset-bottom,0)}
  .tab{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;
    gap:3px;min-height:56px;padding:7px 2px 6px;border:0;background:none;cursor:pointer;
    font:inherit;font-size:10.5px;color:var(--rail-ink-2)}
  .tab svg{width:20px;height:20px}
  .tab[aria-current="true"]{color:var(--rail-ink)}
  .tab[aria-current="true"]::before{content:"";position:absolute;top:0;left:22%;right:22%;height:2px;
    background:var(--vert);border-radius:0 0 2px 2px}
  .tab-cnt{position:absolute;top:5px;right:calc(50% - 20px);min-width:16px;height:16px;padding:0 4px;
    border-radius:8px;background:var(--chaud);color:#fff;font-size:9.5px;font-weight:700;
    display:grid;place-items:center}
  /* La barre flotte : le contenu doit pouvoir passer dessous. */
  .content{padding-bottom:calc(72px + env(safe-area-inset-bottom,0))}

  .feuille-fond{display:block;position:fixed;inset:0;z-index:50;background:rgba(0,0,0,.42)}
  .feuille{display:flex;flex-direction:column;gap:3px;position:fixed;left:0;right:0;bottom:0;z-index:51;
    background:var(--surface);border-radius:16px 16px 0 0;padding:8px 14px calc(18px + env(safe-area-inset-bottom,0));
    max-height:82vh;overflow-y:auto;box-shadow:0 -6px 26px rgba(0,0,0,.22)}
  .feuille[hidden],.feuille-fond[hidden]{display:none}
  .feuille-poignee{width:38px;height:4px;border-radius:2px;background:var(--surface-3);margin:2px auto 10px}
  .feuille-qui{padding:0 4px 10px;border-bottom:1px solid var(--line);margin-bottom:6px}
  .feuille-qui b{display:block;font-size:15px}
  .feuille-qui span{font-size:12px;color:var(--ink-3)}
  .feuille-groupe{padding-top:8px}
  .feuille-groupe::before{content:attr(data-groupe);display:block;font-size:10px;letter-spacing:.1em;
    text-transform:uppercase;color:var(--ink-3);padding:0 4px 4px}
  .feuille-item{display:block;width:100%;text-align:left;min-height:46px;padding:12px 10px;
    border:0;border-radius:9px;background:none;font:inherit;font-size:15px;color:var(--ink);cursor:pointer}
  .feuille-item:active{background:var(--surface-2)}
  .feuille-item[aria-current="true"]{background:var(--surface-2);font-weight:600}
  #feuilleDeconnexion{margin-top:12px;width:100%;justify-content:center;min-height:44px}

  /* La barre du haut n'a plus à porter la navigation : elle se resserre. Le
     sous-titre disparaît — sur un écran de six centimètres, trois lignes
     d'explication repoussent le contenu sous le pli. */
  .topbar{padding-top:10px;padding-bottom:10px;gap:8px}
  .topbar h1{font-size:18px}
  .topbar .sub{display:none}
  .content{padding-top:14px}

  /* Les grilles à deux colonnes du pilotage s'empilent : côte à côte, chaque
     carte tombait à un mot par ligne. */
  .content .grid{grid-template-columns:minmax(0,1fr)!important}
}

/* Un écran qui n'a pas pu se charger, et le bouton pour recommencer. -------- */
.panne{border:1px solid color-mix(in srgb,var(--chaud) 32%,transparent);
  background:color-mix(in srgb,var(--chaud) 8%,transparent);
  border-radius:10px;padding:16px 18px;margin-bottom:16px}
.panne-t{font-weight:600;font-size:14px;margin:0 0 4px;color:var(--chaud)}
.panne-m{font-size:13px;color:var(--ink-2);margin:0 0 12px}

/* Une action qui retire quelque chose se signale sans crier. ---------------- */
.lien-danger{color:var(--chaud)}
.btn-danger{background:var(--chaud);border-color:var(--chaud);color:#fff}
.btn-danger:hover{filter:brightness(.92)}

/* Un message court posé DANS une fenêtre modale : la couche du dessus du
   navigateur ignore les z-index de la page, il faut y être pour être vu. ---- */
.toasts-modale{position:fixed;left:50%;transform:translateX(-50%);bottom:26px;
  display:flex;flex-direction:column;gap:8px;align-items:center;pointer-events:none}

/* Les titulaires d'un prospect : une liste, sans rang affiché. -------------- */
.titus{display:flex;flex-direction:column;gap:7px}
.titu{display:flex;align-items:flex-start;justify-content:space-between;gap:10px}
.titu-a{display:flex;gap:8px;flex-shrink:0}
.titu .sous{font-size:12px;color:var(--ink-3)}

/* Les propositions d'officines, dans le choix du parrain. ------------------- */
.props{display:flex;flex-direction:column;gap:4px;max-height:260px;overflow:auto}
.props .prop{display:flex;flex-direction:column;align-items:flex-start;gap:1px;width:100%;
  text-align:left;padding:8px 10px;border:1px solid var(--line);border-radius:8px;
  background:var(--surface);cursor:pointer;font:inherit;color:inherit}
.props .prop:hover{background:var(--surface-2);border-color:var(--vert)}
.props .prop .sous{font-size:12px;color:var(--ink-3)}

/* Le prospect passé au portefeuille porte le lien vers sa fiche d'adhérent. - */
.etiq-adherent{border-color:var(--vert);color:var(--vert);cursor:pointer;
  background:var(--vert-wash);font:inherit;font-size:11.5px;padding:2px 8px;border-radius:99px;border-width:1px;border-style:solid}
.etiq-adherent:hover{background:color-mix(in srgb,var(--vert) 18%,transparent)}
.titu .sous{overflow-wrap:anywhere}