*{box-sizing:border-box}body{margin:0;font-family:Inter,Segoe UI,Arial,sans-serif;background:#f6f9fc;color:#17324d}
:root{
  /* ==================================================================
     CHARTE NOVACOM SOLUTIONS
     Couleurs relevées au pixel sur le logo fourni.
     ================================================================== */

  /* --- Couleurs de marque ---------------------------------------- */
  --bleu:        #12559B;   /* bleu du mot « novacom »  */
  --vert:        #92B92C;   /* vert du cadre « SOLUTIONS » */

  /* --- Le vert du logo N'EST PAS LISIBLE EN TEXTE -----------------
     Mesuré : contraste 2,28 sur blanc, pour un minimum exigé de 4,5.
     Le texte blanc sur ce vert est tout aussi illisible.
     Il reste donc réservé aux APLATS : barres, pastilles, bordures,
     jamais aux caractères.
     Pour écrire en vert, on utilise sa déclinaison foncée (4,63). */
  --vert-texte:  #4E6A16;   /* assombri pour rester lisible aussi sur fond vert clair */
  --vert-clair:  #F1F7E4;
  --vert-bord:   #CFE39A;

  /* --- Troisième couleur, ajoutée pour la lisibilité --------------
     Une ardoise bleutée, dérivée du bleu de marque. Contraste 15,06
     sur blanc : c'est elle qui porte le texte et la barre latérale,
     là où le bleu pur fatiguerait sur de longues lectures. */
  --ardoise:     #12283C;
  --ardoise-2:   #1B3A56;
  --texte:       #12283C;
  --texte-doux:  #5B6B78;

  /* --- Déclinaisons du bleu --------------------------------------- */
  --bleu-fonce:  #0D4278;
  --bleu-clair:  #EAF2FA;
  --bleu-bord:   #B9D4EE;

  /* --- Couleurs d'état -------------------------------------------
     Choisies pour s'accorder au logo tout en restant lisibles. */
  --orange:      #9A5B0C;   /* assombri : #C77A16 ne passait pas en petit texte */
  --orange-fond: #FDF3E3;
  --rouge:       #B3261E;
  --rouge-fond:  #FCEFEE;
  --violet:      #6B4FA8;

  /* --- Neutres ---------------------------------------------------- */
  --fond:        #F2F5F8;
  --card:        #FFFFFF;
  --border:      #DCE4EC;
  --border-fort: #C3CFDA;

  /* --- Compatibilité avec l'ancien nommage ------------------------ */
  --navy:        #12283C;
  --blue:        #12559B;
  --blue-light:  #EAF2FA;
  --green:       #92B92C;
  --green-dark:  #5F7F1C;
  --green-light: #F1F7E4;
  --red:         #B3261E;
  --purple:      #6B4FA8;
  --accent:      #12559B;
  --muted:       #5B6B78;
  --line:        #DCE4EC;
}
button,input,select{font:inherit}button{cursor:pointer}
.hidden{display:none!important}
.login-screen{position:fixed;inset:0;background:linear-gradient(135deg,var(--ardoise-2),var(--bleu-fonce));display:grid;place-items:center;z-index:20}
.login-card{background:#fff;width:min(430px,92vw);padding:32px;border-radius:20px;box-shadow:0 25px 70px #04172f88}.brand-large{display:flex;gap:12px;align-items:center;margin-bottom:26px}.brand-large b{display:block;font-size:22px}.brand-large small{color:var(--texte-doux)}.brand-dot{width:44px;height:44px;border-radius:12px;display:grid;place-items:center;background:var(--orange);color:#fff;font-size:26px}
.login-card h1{margin:0}.login-card p{color:var(--texte-doux)}.login-card label{display:block;margin:14px 0;font-weight:600;font-size:13px}.login-card input{width:100%;margin-top:6px;padding:12px;border:1px solid var(--border);border-radius:10px}.full{width:100%;margin-top:8px}.primary{background:var(--blue);border:0;color:#fff;padding:12px 16px;border-radius:10px;font-weight:700}.ghost{background:#fff;border:1px solid var(--border);color:var(--texte);padding:9px 14px;border-radius:9px}.form-message{font-size:13px;color:var(--rouge);min-height:20px;margin:8px 0}
.app-shell{display:flex;min-height:100vh}.sidebar{width:230px;background:linear-gradient(180deg,var(--ardoise),var(--ardoise));color:var(--bleu-bord);position:sticky;top:0;height:100vh;overflow:auto}.brand{display:flex;align-items:center;gap:10px;padding:16px 16px 18px;border-bottom:1px solid #ffffff16}.brand-mark{width:38px;height:38px;border-radius:10px;background:var(--orange);display:grid;place-items:center;color:#fff;font-size:23px}.brand strong{display:block;color:#fff;font-size:14px}.brand span{font-size:11px;color:var(--texte-doux)}
nav{padding:10px 10px 20px}
/* ================================================================
 * PILOTAGE ORANGE — extension isolée du tableau de bord existant
 * ================================================================ */
.s-orange{color:#ff7900}
.orange-dashboard{display:flex;flex-direction:column;gap:14px}
.orange-filters{display:flex;gap:10px;align-items:end;flex-wrap:wrap;background:#fff;border:1px solid var(--border);border-radius:12px;padding:12px}
.orange-filters label{display:flex;flex-direction:column;gap:5px;font-size:10px;font-weight:800;color:var(--texte-doux)}
.orange-filters input,.orange-filters select{height:34px;border:1px solid var(--border);border-radius:8px;padding:0 9px;background:#fff;color:var(--texte);font:inherit;min-width:150px}
.orange-refresh{height:34px}
.orange-kpis{display:grid;grid-template-columns:repeat(6,1fr);gap:12px}
.orange-kpi{background:#fff;border:1px solid var(--border);border-radius:12px;padding:12px 14px;min-height:96px;position:relative;overflow:hidden}
.orange-kpi .ok-label{font-size:10px;color:var(--texte-doux);font-weight:800;text-transform:uppercase}
.orange-kpi .ok-value{font-size:27px;font-weight:900;color:var(--bleu);margin-top:8px}
.orange-kpi .ok-sub{font-size:10px;color:var(--texte-doux);margin-top:3px}
.orange-kpi.orange{border-top:4px solid #ff7900}.orange-kpi.blue{border-top:4px solid #0b5cab}
.orange-kpi.green{border-top:4px solid #4f8f2f}.orange-kpi.purple{border-top:4px solid #7c4ab5}
.orange-kpi.red{border-top:4px solid #d33}.orange-kpi.gold{border-top:4px solid #d6a400}
.orange-grid-3{display:grid;grid-template-columns:1.25fr .85fr 1fr;gap:14px}
.orange-grid-2{display:grid;grid-template-columns:1.15fr .85fr;gap:14px}
.orange-card{background:#fff;border:1px solid var(--border);border-radius:12px;padding:14px;min-width:0}
.orange-card h3{margin:0 0 4px;font-size:13px}.orange-card .sub{font-size:10px;color:var(--texte-doux)}
.orange-chart{height:235px;position:relative;margin-top:10px}.orange-chart.small{height:210px}
.orange-table .data-table td,.orange-table .data-table th{padding:8px}
.orange-progress{height:8px;background:#edf1f5;border-radius:20px;overflow:hidden;min-width:70px}
.orange-progress i{display:block;height:100%;background:#4aa96c;border-radius:20px}
.orange-status{display:inline-flex;align-items:center;gap:5px;font-size:10px;font-weight:800}
.orange-dot{width:8px;height:8px;border-radius:50%;display:inline-block}
.orange-empty{padding:28px;text-align:center;color:var(--texte-doux)}
@media(max-width:1200px){.orange-kpis{grid-template-columns:repeat(3,1fr)}.orange-grid-3,.orange-grid-2{grid-template-columns:1fr}}
@media(max-width:700px){.orange-kpis{grid-template-columns:repeat(2,1fr)}.orange-filters input,.orange-filters select{min-width:130px}}
.nav-title{font-size:10px;color:var(--texte-doux);margin:16px 8px 7px;font-weight:800;letter-spacing:.08em}.nav-item{width:100%;background:transparent;border:0;color:var(--bleu-bord);text-align:left;padding:9px 10px;border-radius:7px;margin:2px 0;display:flex;gap:9px;align-items:center;font-size:12px}.nav-item:hover{background:#ffffff10}.nav-item.active{background:var(--bleu);color:#fff;box-shadow:0 5px 12px #0002}.sidebar-footer{position:sticky;bottom:0;padding:12px;border-top:1px solid #ffffff18;background:#063A7C;font-size:11px;color:var(--texte-doux)}.status-dot{width:8px;height:8px;border-radius:50%;display:inline-block;margin-right:6px}.status-dot.online{background:var(--vert)}.status-dot.offline{background:var(--orange)}
.main{min-width:0;flex:1}.topbar{height:76px;background:#fff;border-bottom:1px solid var(--border);display:flex;justify-content:space-between;align-items:center;padding:10px 22px;gap:20px;position:sticky;top:0;z-index:10}.top-left{display:flex;align-items:center;gap:12px}.top-left h1{font-size:20px;margin:0}.top-left p{margin:2px 0 0;color:var(--texte-doux);font-size:12px}.top-actions{display:flex;gap:10px;align-items:center}.select-wrap{display:flex;align-items:center;gap:7px;border:1px solid var(--border);padding:7px 10px;border-radius:9px;background:#fff}.select-wrap input,.select-wrap select{border:0;outline:0;background:transparent}.muted{color:var(--texte-doux);font-size:11px}.icon-btn{width:36px;height:36px;background:#fff;border:1px solid var(--border);border-radius:9px;position:relative}.badge{position:absolute;top:-5px;right:-5px;background:var(--rouge);color:#fff;border-radius:20px;padding:2px 5px;font-size:9px}.user-chip{display:flex;gap:8px;align-items:center}.user-chip strong{display:block;font-size:11px}.user-chip small{display:block;color:var(--texte-doux);font-size:10px}.avatar{width:32px;height:32px;border-radius:50%;background:var(--bleu-clair);display:grid;place-items:center;font-weight:800;color:var(--texte-doux)}
.content{padding:18px;max-width:1700px;margin:auto}
.kpi-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:14px}.kpi{background:#fff;border:1px solid var(--border);border-radius:12px;padding:13px 16px;min-height:120px;position:relative;overflow:hidden}.kpi.blue{background:linear-gradient(135deg,#fff,var(--blue-light));border-color:var(--bleu-bord)}.kpi.green{background:linear-gradient(135deg,#fff,var(--green-light));border-color:var(--vert-bord)}.kpi.orange{background:linear-gradient(135deg,#fff,var(--orange-fond));border-color:var(--orange)}.kpi.red{background:linear-gradient(135deg,#fff,var(--rouge-fond));border-color:var(--rouge)}.kpi.purple{background:linear-gradient(135deg,#fff,#F3EEFB);border-color:var(--violet)}.kpi.gray{background:linear-gradient(135deg,#fff,var(--fond));border-color:var(--border-fort)}.kpi .label{font-size:12px;font-weight:700}.kpi .value{font-size:28px;font-weight:800;margin:9px 0 6px}.kpi .pct{font-size:11px;color:var(--texte-doux)}.kpi .bar{height:4px;border-radius:8px;background:var(--border);margin-top:8px}.kpi.blue .bar>i{background:var(--blue)}.kpi.green .bar>i{background:var(--green)}.kpi.orange .bar>i{background:var(--orange)}.kpi.red .bar>i{background:var(--rouge)}.kpi.purple .bar>i{background:var(--violet)}.kpi.gray .bar>i{background:var(--texte-doux)}.kpi .bar>i{display:block;height:100%;border-radius:8px}.kpi .ico{position:absolute;right:15px;top:18px;font-size:24px;opacity:.85}
.grid{display:grid;gap:14px;margin-top:14px}.grid.two{grid-template-columns:2fr 1.05fr}.grid.three{grid-template-columns:2fr 1.35fr .95fr}.grid.bottom{grid-template-columns:1.85fr 1.2fr 1.1fr}.card{background:#fff;border:1px solid var(--border);border-radius:12px;padding:14px;min-width:0}.card-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}.card h3{font-size:13px;margin:0}.card .sub{font-size:10px;color:var(--texte-doux)}.tabs{display:flex;gap:4px}.tabs button{border:1px solid var(--border);background:#fff;padding:5px 9px;border-radius:7px;font-size:10px}.tabs button.active{background:var(--blue);color:#fff;border-color:var(--blue)}
.chart-wrap{height:250px}.chart-wrap.small{height:215px}.attention-item{padding:11px 6px;border-bottom:1px solid var(--fond);display:flex;gap:9px;align-items:flex-start}.attention-item:last-child{border-bottom:0}.attention-item .aicon{width:24px;height:24px;border-radius:6px;display:grid;place-items:center;background:var(--orange-fond);color:var(--orange)}.attention-item strong{font-size:12px;display:block}.attention-item span{font-size:10px;color:var(--texte-doux)}.attention-total{margin-top:10px;width:100%;border:1px solid var(--orange);background:var(--orange-fond);padding:9px;border-radius:7px;color:var(--orange);font-size:11px;font-weight:700}
.status-list{display:flex;flex-direction:column;gap:12px}.status-row{display:grid;grid-template-columns:90px 1fr 90px;gap:10px;align-items:center;font-size:11px}.status-row .track{height:10px;background:var(--fond);border-radius:10px;overflow:hidden}.status-row .track i{display:block;height:100%;border-radius:10px}
.funnel{display:flex;flex-direction:column;align-items:center;gap:2px;padding:8px}.funnel-row{height:32px;color:#fff;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:12px;clip-path:polygon(5% 0,95% 0,100% 100%,0 100%)}.funnel-label{position:absolute;left:8px;color:var(--texte);font-weight:700;font-size:11px}.funnel-wrap{position:relative}
.city-table{width:100%;border-collapse:collapse;font-size:10px}.city-table th,.city-table td{padding:8px 5px;border-bottom:1px solid var(--fond);text-align:right}.city-table th:first-child,.city-table td:first-child{text-align:left}.city-dot{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:6px}
.tech-row{display:grid;grid-template-columns:1fr 35px 1fr 40px;gap:8px;align-items:center;font-size:10px;padding:8px 0;border-bottom:1px solid var(--fond)}.progress{height:7px;background:var(--fond);border-radius:10px}.progress i{display:block;height:100%;background:var(--vert);border-radius:10px}
.view-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px}.view-head h2{margin:0;font-size:18px}.view-tools{display:flex;gap:8px}.search{padding:9px 11px;border:1px solid var(--border);border-radius:8px;min-width:240px}.table-wrap{overflow:auto}.data-table{width:100%;border-collapse:separate;border-spacing:0;font-size:11px}.data-table th{position:sticky;top:0;background:var(--fond);color:var(--texte-doux);text-align:left;font-size:10px;padding:10px;border-bottom:1px solid var(--border)}.data-table td{padding:10px;border-bottom:1px solid var(--fond);white-space:nowrap}.data-table tr:hover td{background:var(--bleu-clair)}.pill{display:inline-flex;align-items:center;padding:4px 7px;border-radius:20px;font-size:9px;font-weight:800}.pill.green{background:var(--vert-clair);color:var(--vert-texte)}.pill.orange{background:var(--orange-fond);color:var(--orange)}.pill.red{background:var(--rouge-fond);color:var(--rouge)}.pill.blue{background:var(--bleu-clair);color:var(--bleu)}.pill.purple{background:#F3EEFB;color:var(--violet)}.pill.gray{background:var(--fond);color:var(--texte-doux)}
.import-box{border:1px dashed var(--bleu-bord);background:var(--bleu-clair);padding:26px;border-radius:12px;text-align:center}.import-box input{display:block;margin:16px auto}
.empty{padding:45px;text-align:center;color:var(--texte-doux)}.metric-mini{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}.metric-mini .mini{border:1px solid var(--border);background:var(--bleu-clair);border-radius:9px;padding:10px}.mini b{font-size:20px}.mini span{display:block;font-size:10px;color:var(--texte-doux);margin-top:3px}
#toast{position:fixed;right:18px;bottom:18px;background:var(--ardoise);color:#fff;padding:11px 15px;border-radius:9px;opacity:0;transform:translateY(10px);pointer-events:none;transition:.2s;font-size:12px;z-index:30}.toast-show{opacity:1!important;transform:translateY(0)!important}
@media(max-width:1200px){.kpi-grid{grid-template-columns:repeat(3,1fr)}.grid.three,.grid.bottom,.grid.two{grid-template-columns:1fr}.top-actions .select-wrap{display:none}}
@media(max-width:800px){.sidebar{position:fixed;left:-240px;z-index:15;transition:.2s}.sidebar.open{left:0}.topbar{padding:9px 12px}.content{padding:12px}.kpi-grid{grid-template-columns:repeat(2,1fr)}.user-chip{display:none}.metric-mini{grid-template-columns:repeat(2,1fr)}.search{min-width:160px}}
@media(max-width:500px){.kpi-grid{grid-template-columns:1fr}.kpi .value{font-size:24px}.top-left h1{font-size:16px}.view-head{align-items:flex-start;gap:8px;flex-direction:column}.view-tools{width:100%}.search{flex:1;width:100%}}

/* ---------------------------------------------------------------------
   Impression des rapports : seul le contenu part sur le papier ou le
   PDF. Sans cela, la barre latérale et les boutons occupaient la moitié
   de la première page.
   ------------------------------------------------------------------ */
@media print{
  nav.sidebar,.topbar,.view-tools,.tabs,.nav-item,#toast{display:none !important}
  .app-main,#content{margin:0 !important;padding:0 !important}
  .card{border:0 !important;box-shadow:none !important;padding:0 !important;margin:0 0 14px !important}
  body{background:#fff}
  @page{size:A4 portrait;margin:12mm}
}

/* ---------------------------------------------------------------------
   IDENTITÉ NOVACOM SOLUTIONS
   ------------------------------------------------------------------ */

/* Le logo est bleu et vert : posé tel quel sur la barre latérale
   ardoise, il devient illisible. Il est donc présenté sur une pastille
   blanche, exactement comme sur les supports imprimés. */
.brand{display:flex;align-items:center;gap:11px;padding:14px 14px 16px}
/* Pastille pleine largeur, logo centré et cadré : le logo du client
   n'a pas les mêmes proportions que celui de KORA, on le contient
   dans une hauteur fixe pour que le bandeau ne bouge pas d'un client
   à l'autre. */
.brand-logo{
  width:100%;max-width:196px;height:58px;background:#fff;
  padding:8px 12px;border-radius:12px;display:block;
  object-fit:contain;
  box-shadow:0 2px 6px rgba(0,0,0,.20);
}
.brand-txt{display:none}

/* Sous 1100 px la barre se réduit : on garde la marque seule. */
@media(max-width:1100px){
  .brand-logo{max-width:150px;height:48px;padding:6px 9px}
}

.brand-large{text-align:center;margin-bottom:22px}

/* Le vert du logo n'atteint pas le contraste requis pour du texte
   (2,28 sur blanc). Il sert d'aplat et de liseré ; le vert foncé
   prend le relais dès qu'il s'agit de lire. */
.pill.green,.badge-green{background:var(--vert);color:var(--ardoise);font-weight:700}
.txt-green{color:var(--vert-texte)}
.rule-green{border-left:4px solid var(--vert)}

/* Filet vert sous les titres de page : rappel discret du cadre
   « SOLUTIONS » du logo. */
.view-head h2{position:relative;padding-bottom:7px}
.view-head h2::after{
  content:"";position:absolute;left:0;bottom:0;
  width:44px;height:3px;background:var(--vert);border-radius:2px;
}

/* En-tête de rapport imprimé */
.rapport-entete{display:flex;align-items:center;gap:16px;
  border-bottom:3px solid var(--vert);padding-bottom:12px;margin-bottom:18px}
.rapport-entete img{width:150px}
@media print{ .brand,.brand-logo{display:none !important} }

/* =====================================================================
   MENU — item actif et séparation des sections
   ================================================================== */

/* --- Item actif ------------------------------------------------------
   Demandé : fond vert du logo, écriture blanche.
   Mesuré : blanc sur #92B92C ne donne que 2,28 de contraste, pour un
   minimum de 4,5. Illisible, surtout sur un écran de portable en
   plein jour.

   Compromis retenu : le fond prend un vert de la même famille, assez
   foncé pour que le blanc passe (6,18), et le VERT EXACT DU LOGO reste
   présent en barre d'accent à gauche, bien visible sur le fond sombre.
   La signature de marque est conservée, la lisibilité aussi.          */
/* Menu aux couleurs KORA : fond au bleu du logo légèrement assombri
   (#063A7C plutôt que #084898), qui fatigue moins sur une journée et
   fait mieux ressortir l'orange. L'élément actif prend l'orange plein
   du logo, avec un texte bleu foncé pour le contraste. */
.sidebar{ background:#063A7C !important }
nav .nav-item.active, .sidebar .nav-item.active{
  background:#F5B41E !important;
  color:#0A2E5E !important;
  border-left:4px solid #FFFFFF !important;
  font-weight:800;
  box-shadow:none;
}
nav .nav-item.active span{color:#0A2E5E !important}
nav .nav-item:not(.active){border-left:4px solid transparent;transition:background .12s}
nav .nav-item:not(.active){ color:#BCCFE6 }
.nav-title{ color:#7FB2E0 !important }
nav .nav-item:hover:not(.active){
  background:rgba(255,255,255,.09);
  border-left-color:rgba(245,180,30,.6);
}

/* --- Titres de section ----------------------------------------------
   Chaque bloc métier reçoit sa couleur et un filet de séparation :
   sur douze entrées, l'œil ne distinguait plus les groupes.          */
nav .nav-title{
  margin-top:18px !important;
  padding:9px 14px 5px !important;
  font-size:10.5px !important;
  font-weight:800 !important;
  letter-spacing:1.4px !important;
  text-transform:uppercase;
  border-top:1px solid rgba(255,255,255,.10);
  display:flex; align-items:center; gap:7px;
}
nav .nav-title::before{
  content:""; width:9px; height:9px; border-radius:3px;
  background:currentColor; flex:0 0 9px;
}
/* Teintes claires : elles doivent ressortir sur le fond ardoise. */
nav .nav-title.s-gen { color:#7FB2E5 }
nav .nav-title.s-prod{ color:#A9CE4A }   /* vert du logo, éclairci pour le fond sombre */
nav .nav-title.s-sav { color:#E8A54B }
nav .nav-title.s-trf { color:#B49BE8 }
nav .nav-title.s-ter { color:#5FC7D4 }
nav .nav-title.s-res { color:#E88FA8 }
nav .nav-title.s-rap { color:#E3C25A }
nav .nav-title.s-adm { color:#9FB0BE }
nav .nav-title:first-of-type{border-top:0;margin-top:6px !important}

/* =====================================================================
   TABLEAU DE BORD — cartes d'état et grille de graphiques
   ================================================================== */

/* --- Trame de fond du bloc « Où en sont les dossiers » --------------
   Un quadrillage très léger : il donne de la matière sans gêner la
   lecture des chiffres, qui restent l'information principale.       */
/* Aplat très léger, sans motif : les traits en arrière-plan
   fatiguaient la lecture et alourdissaient l'ensemble. */
.bloc-etat{ background:#FBFCFE; }

/* Cartes resserrées : sans icône, elles tiennent en moins de place
   et les neuf états se classent sur deux rangées régulières. */
.etat-grille{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(142px,1fr));
  gap:9px; margin-top:11px;
}

/* Chaque carte porte sa couleur par la variable --c, sa trame par --t.
   Un seul bloc CSS suffit pour les neuf états.                      */
.etat-carte{
  position:relative; overflow:hidden;
  background:var(--t); border:1px solid rgba(18,40,60,.07);
  border-top:3px solid var(--c);
  border-radius:10px; padding:10px 12px 10px;
  transition:box-shadow .13s;
}
.etat-carte:hover{ box-shadow:0 4px 14px rgba(18,40,60,.07) }

.etat-carte > *{ position:relative; z-index:1 }

.etat-haut{ display:flex; align-items:center; gap:6px; margin-bottom:3px }

.etat-lib{
  flex:1; font-size:9.5px; font-weight:800; letter-spacing:.5px;
  text-transform:uppercase; color:var(--texte-doux); line-height:1.3;
}
.etat-pct{
  font-size:9.5px; font-weight:800; color:var(--c);
  background:#fff; border:1px solid var(--border);
  padding:2px 7px; border-radius:20px; white-space:nowrap;
}
.etat-val{
  font-size:22px; font-weight:800; color:var(--c);
  line-height:1.2; font-variant-numeric:tabular-nums;
}
.etat-sous{ font-size:10.5px; color:var(--texte-doux); margin-top:1px }
.etat-bar{
  height:4px; border-radius:99px; background:rgba(18,40,60,.10);
  margin-top:7px; overflow:hidden;
}
.etat-bar > i{
  display:block; height:100%; background:var(--c); border-radius:99px;
  transition:width .5s ease;
}

/* --- Graphiques : trois par rangée ---------------------------------
   Demandé pour comparer d'un coup d'œil. Sous 1250 px on repasse à
   deux, puis à un : trois graphiques côte à côte sur un portable
   deviendraient illisibles.                                          */
.graph-grille{
  display:grid; grid-template-columns:repeat(3,1fr); gap:14px;
}
@media(max-width:1250px){ .graph-grille{ grid-template-columns:repeat(2,1fr) } }
@media(max-width:820px){  .graph-grille{ grid-template-columns:1fr } }

.graph-c{ background:#fff; display:flex; flex-direction:column; }
.graph-c .chart-wrap{ height:210px; flex:1 }
.graph-c .card-head h3{ font-size:12.5px }
.graph-note{
  font-size:10.5px; color:var(--texte-doux); margin-top:8px;
  padding-top:7px; border-top:1px solid var(--border); line-height:1.4;
}

/* =====================================================================
   BLOC COMPTE — bas de la barre latérale
   La barre du haut se replie sous 800 px : sans ce bloc, la
   déconnexion devenait inatteignable sur téléphone.
   ================================================================== */
.sidebar-compte{
  margin:14px 10px 0;padding:11px 12px;border-radius:10px;
  background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.10);
}
.sidebar-compte .sc-ident{margin-bottom:9px;line-height:1.35}
.sidebar-compte b{display:block;color:#fff;font-size:12.5px}
.sidebar-compte span{display:block;color:#A9CE4A;font-size:10.5px;
  text-transform:uppercase;letter-spacing:.7px;font-weight:700}
.sidebar-compte button{
  width:100%;background:transparent;border:1px solid rgba(255,255,255,.28);
  color:#fff;padding:7px;border-radius:8px;font-size:12px;cursor:pointer;font-weight:600;
}
.sidebar-compte button:hover{background:var(--rouge);border-color:var(--rouge)}

/* =====================================================================
   Segments de période — un seul groupe, l'actif est visible
   ================================================================== */
.segm{display:inline-flex;border:1px solid var(--border);border-radius:9px;
  overflow:hidden;background:#fff}
.segm button{
  background:#fff;border:0;border-right:1px solid var(--border);
  padding:8px 13px;font-size:12.5px;font-weight:600;color:var(--texte-doux);
  cursor:pointer;transition:background .12s,color .12s;
}
.segm button:last-child{border-right:0}
.segm button:hover{background:var(--fond);color:var(--texte)}
.segm button.on{background:var(--bleu);color:#fff}

/* =====================================================================
   Répartition par ville — anneau et légende chiffrée
   Le pourcentage seul oblige à recalculer le volume : les deux
   figurent côte à côte.
   ================================================================== */
.repart{display:flex;gap:14px;align-items:center;flex:1;min-height:180px}
.repart-anneau{position:relative;width:150px;height:150px;flex:0 0 150px}
.repart-centre{
  position:absolute;inset:0;display:flex;flex-direction:column;
  align-items:center;justify-content:center;pointer-events:none;
}
.repart-centre b{font-size:19px;font-weight:800;color:var(--texte);
  font-variant-numeric:tabular-nums;line-height:1.1}
.repart-centre span{font-size:10px;color:var(--texte-doux);
  text-transform:uppercase;letter-spacing:.7px}
.repart-leg{flex:1;min-width:0}
.rl{display:grid;grid-template-columns:11px 1fr auto auto;gap:8px;
  align-items:center;padding:5px 0;font-size:12px;
  border-bottom:1px solid var(--border)}
.rl:last-child{border-bottom:0}
.rl-p{width:10px;height:10px;border-radius:3px}
.rl-n{color:var(--texte);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rl-v{font-weight:800;font-variant-numeric:tabular-nums}
.rl-x{color:var(--texte-doux);font-size:11px;min-width:44px;text-align:right}
@media(max-width:1250px){ .repart{flex-direction:column} .repart-leg{width:100%} }

/* Barre de période — teinte douce, sans motif */
.td-barre{
  display:flex;gap:11px;flex-wrap:wrap;align-items:flex-end;
  background:#FBFCFE;border:1px solid var(--border);
  border-radius:12px;padding:13px 15px;margin-bottom:14px;
}
.td-barre label{font-size:11.5px;color:var(--texte-doux);font-weight:700}
.td-barre label input[type=date]{display:block;margin-top:3px}

/* =====================================================================
   BANDES PAR VILLE
   Une ville par ligne, comme dans les rapports NOVACOM. Quatre courbes
   superposées obligeaient à démêler la légende avant de comprendre
   quoi que ce soit.
   ================================================================== */
.bandes{display:flex;flex-direction:column;gap:0}
.bande{display:flex;align-items:center;gap:10px;padding:6px 0;
  border-bottom:1px solid var(--border)}
.bande:last-child{border-bottom:0}
.bande-nom{
  flex:0 0 74px;font-size:11px;font-weight:800;line-height:1.25;
  text-align:right;
}
.bande-graph{flex:1;min-width:0;height:66px}

/* Sélecteur du nombre de villes affichées, dans les en-têtes */
.sel-ville{
  max-width:130px; font-size:11.5px; padding:4px 7px;
  border:1px solid var(--border); border-radius:7px;
  background:#fff; color:var(--texte); height:28px;
}
.sel-ville:focus{ outline:2px solid var(--bleu); outline-offset:-1px }

/* =====================================================================
   PAGINATION
   ================================================================== */
.pagination{display:flex;gap:5px;align-items:center;flex-wrap:wrap;
  justify-content:flex-end;margin-top:12px}
.pagination .pg{
  min-width:32px;height:30px;padding:0 8px;border:1px solid var(--border);
  background:#fff;color:var(--texte);border-radius:7px;cursor:pointer;
  font-size:12.5px;font-weight:600;
}
.pagination .pg:hover:not(:disabled):not(.on){background:var(--fond)}
.pagination .pg.on{background:var(--bleu);color:#fff;border-color:var(--bleu)}
.pagination .pg:disabled{opacity:.35;cursor:not-allowed}

/* =====================================================================
   ESPACE TECHNICIEN — cases à cocher
   Zones tactiles larges : l'écran est utilisé debout, en extérieur,
   souvent à une main.
   ================================================================== */
.ter-choix{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:9px}
.ter-case{
  display:flex;align-items:center;gap:10px;padding:14px 13px;
  border:2px solid var(--border);border-radius:10px;cursor:pointer;
  background:#fff;font-size:14.5px;font-weight:600;min-height:54px;
  transition:border-color .12s, background .12s;
}
.ter-case input{width:20px;height:20px;accent-color:var(--c);flex:0 0 20px}
.ter-case:has(input:checked){border-color:var(--c);background:color-mix(in srgb,var(--c) 9%,#fff)}
.ter-case span{color:var(--texte)}

/* =====================================================================
 *  V1.6.0 — FORMULAIRE TECHNICIEN, BLOCS TERRAIN, MOBILE
 * ===================================================================== */

/* --- Champs du formulaire technicien -------------------------------
   Les labels n'avaient aucun style : les champs se collaient les uns
   aux autres et l'intitulé se confondait avec la valeur saisie. */
.tf-l{ display:flex; flex-direction:column; gap:5px;
  font-size:11.5px; font-weight:700; color:var(--texte-doux);
  text-transform:uppercase; letter-spacing:.02em; }
.tf-l input, .tf-l select, .tf-l textarea{
  font:inherit; font-size:14px; font-weight:400; text-transform:none;
  letter-spacing:0; color:var(--texte);
  padding:10px 11px; border:1px solid var(--border); border-radius:9px;
  background:#fff; width:100%; min-height:42px; }
.tf-l input:focus, .tf-l select:focus, .tf-l textarea:focus{
  outline:none; border-color:var(--bleu); box-shadow:0 0 0 3px #1B5AA820; }
.tf-l input[readonly]{ background:#F4F6F9; color:var(--texte-doux); }
/* Grille des champs : trois colonnes au large, une seule au mobile. */
.tf-grille{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; align-content:start; }
.tf-grille .large{ grid-column:span 2; }
.tf-section{ border:1px solid var(--border); border-radius:12px; padding:15px 16px; }
.tf-section h3{ margin:0 0 2px; font-size:13px; text-transform:uppercase;
  letter-spacing:.03em; color:var(--bleu); }

/* --- Trois blocs de l'espace technicien ---------------------------
   Fond coloré + icône : « À faire », « Bloqués » et « Traités » se
   distinguent d'un regard, même en plein soleil sur un téléphone. */
.ter-blocs{ display:grid; grid-template-columns:repeat(2,1fr); gap:12px; margin-bottom:14px; }
.ter-bloc{ border-radius:14px; padding:15px 16px; display:flex; gap:13px;
  align-items:center; border:1px solid transparent; }
/* APLATS FONCÉS, texte blanc. Les fonds pastel précédents étaient
   peu lisibles en plein soleil, là où le technicien consulte son
   écran. Les chiffres doivent se lire d'un coup d'œil, entre deux
   interventions. */
.ter-bloc .ic{ width:44px; height:44px; flex:0 0 44px; border-radius:12px;
  display:grid; place-items:center; background:rgba(255,255,255,.20); }
/* Icônes VECTORIELLES : elles suivent la couleur du texte, alors
   qu'un émoji garde la sienne et change d'aspect selon le téléphone. */
.ter-bloc .ic svg{ width:22px; height:22px; display:block }
.ter-bloc .tx{ min-width:0 }
.ter-bloc .tx span{ display:block; font-size:11px; font-weight:800;
  text-transform:uppercase; letter-spacing:.05em; opacity:.88 }
.ter-bloc .tx b{ display:block; font-size:27px; line-height:1.15; font-weight:800;
  margin:2px 0 }
.ter-bloc .tx i{ font-style:normal; font-size:11.5px; opacity:.82 }
.ter-bloc.b-faire{ background:#0E4C8A; color:#FFFFFF }
.ter-bloc.b-bloq{  background:#A32820; color:#FFFFFF }
.ter-bloc.b-fait{  background:#2A6B21; color:#FFFFFF }
/* Sélection : un liseré clair, le fond étant déjà plein. */
.ter-bloc.on{ box-shadow:0 0 0 3px rgba(255,255,255,.55), 0 0 0 5px currentColor }
.ter-bloc.b-faire.on, .ter-bloc.b-bloq.on, .ter-bloc.b-fait.on{ border-color:transparent }

/* --- Informations client dans la fiche mission --------------------- */
.ter-infos{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr));
  gap:8px 14px; margin-top:12px; padding-top:12px; border-top:1px solid var(--border); }
.ter-info span{ display:block; font-size:10.5px; font-weight:700;
  text-transform:uppercase; color:var(--texte-doux); letter-spacing:.03em }
.ter-info b{ display:block; font-size:14px; word-break:break-word }

/* --- Menu latéral rétractable ------------------------------------- */
.voile-menu{ position:fixed; inset:0; background:rgba(10,20,32,.5); z-index:14; }
@media(min-width:801px){ .voile-menu{ display:none } }

@media(max-width:900px){
  .tf-grille{ grid-template-columns:repeat(2,minmax(0,1fr)) }
}
@media(max-width:640px){
  .tf-grille{ grid-template-columns:1fr }
  .tf-grille .large{ grid-column:auto }
  .ter-blocs{ grid-template-columns:1fr; gap:9px }
  .ter-bloc{ padding:12px 14px }
  .ter-bloc .tx b{ font-size:23px }
  .ter-infos{ grid-template-columns:1fr }

  /* Tableaux en CARTES : sur un téléphone, un tableau à 8 colonnes
     oblige à faire défiler latéralement pour lire une seule ligne.
     Chaque ligne devient un bloc, chaque cellule porte son intitulé. */
  .table-cartes thead{ display:none }
  .table-cartes, .table-cartes tbody, .table-cartes tr, .table-cartes td{ display:block; width:100% }
  .table-cartes tr{ border:1px solid var(--border); border-radius:12px;
    padding:12px 13px; margin-bottom:10px; background:#fff }
  .table-cartes td{ border:0; padding:5px 0; display:flex; gap:10px;
    align-items:flex-start; justify-content:space-between; text-align:right }
  .table-cartes td::before{ content:attr(data-l); flex:0 0 40%; text-align:left;
    font-size:10.5px; font-weight:700; text-transform:uppercase;
    color:var(--texte-doux); letter-spacing:.03em; padding-top:2px }
  .table-cartes td:first-child{ text-align:left; border-bottom:1px solid var(--border);
    padding-bottom:9px; margin-bottom:4px }
  .table-cartes td:first-child::before{ display:none }
  .table-cartes td:last-child{ justify-content:flex-end }
  .table-cartes td:last-child button{ width:100% }
}

/* --- Choix des villes par cases à cocher (graphiques) -------------
   Remplace les listes « 1 ville / 2 villes » : on voit quelles villes
   existent, lesquelles sont affichées, et la pastille reprend la
   couleur de la courbe correspondante. */
.choix-villes{ display:flex; gap:6px; flex-wrap:wrap; align-items:center }
.ville-case{ display:inline-flex; align-items:center; gap:5px;
  border:1.5px solid var(--border); border-radius:20px; padding:3px 10px 3px 7px;
  font-size:11.5px; font-weight:700; cursor:pointer; background:#fff;
  color:var(--texte-doux); transition:border-color .12s, background .12s, color .12s }
.ville-case input{ width:13px; height:13px; accent-color:var(--cv); cursor:pointer; margin:0 }
.ville-case:has(input:checked){ border-color:var(--cv); color:var(--cv);
  background:color-mix(in srgb, var(--cv) 10%, #fff) }
.ville-tout{ border:1px dashed var(--border); background:transparent; cursor:pointer;
  border-radius:20px; padding:3px 10px; font-size:11px; font-weight:700;
  color:var(--texte-doux) }
.ville-tout:hover{ border-color:var(--bleu); color:var(--bleu) }
@media(max-width:640px){
  .choix-villes{ width:100%; margin-top:6px }
  .ville-case{ font-size:11px; padding:3px 8px 3px 6px }
}

/* --- Bouton WhatsApp ---------------------------------------------
   Vert de la marque : l'action se repère instantanément parmi les
   boutons neutres de la barre d'affectation. */
.bouton-wa{ background:#25D366; color:#fff; border:1px solid #1EBE5A;
  border-radius:9px; padding:9px 15px; font-weight:700; font-size:13px;
  cursor:pointer; display:inline-flex; align-items:center; gap:7px }
.bouton-wa:hover{ background:#1EBE5A }
.bouton-wa:disabled{ background:#A8DCBB; border-color:#A8DCBB; cursor:default }

/* --- Liste des missions du technicien -----------------------------
   La grille était en style « inline », donc impossible à surcharger
   par une règle mobile : sur un téléphone de 360 px, six colonnes
   d'au moins 772 px débordaient et la moitié du tableau sortait de
   l'écran. Elle est ici en classe, donc réellement adaptable. */
.ter-grille, .ter-entetes, .ter-item{
  display:grid;
  grid-template-columns:minmax(170px,1.4fr) 108px 108px minmax(140px,1fr) 120px 92px;
  gap:10px;
}
.ter-entetes{ padding:6px 12px; font-size:11px; text-transform:uppercase;
  color:var(--texte-doux); font-weight:700 }
.ter-item{ align-items:center; border:1px solid var(--border); border-radius:10px;
  padding:11px 12px; margin-bottom:8px; background:#fff; cursor:pointer }
.ter-item:hover{ border-color:var(--bleu) }

@media(max-width:860px){
  /* EN CARTES. Chaque mission devient un bloc lisible d'un coup
     d'œil, sans le moindre défilement horizontal. */
  .ter-entetes{ display:none }
  .ter-item{ display:block; padding:13px 14px }
  .ter-item > div{ display:flex; justify-content:space-between; align-items:center;
    gap:12px; padding:5px 0; text-align:right }
  .ter-item > div:first-child{ display:block; text-align:left; padding:0 0 8px;
    border-bottom:1px solid var(--border); margin-bottom:5px }
  .ter-item > div[data-l]::before{ content:attr(data-l); flex:0 0 42%;
    text-align:left; font-size:10.5px; font-weight:700; text-transform:uppercase;
    color:var(--texte-doux); letter-spacing:.03em }
  .ter-item .progress{ width:100% }
  .ter-item > div[data-l="Progression"]{ display:block; text-align:left }
  .ter-item > div[data-l="Progression"]::before{ display:block; margin-bottom:4px }
  .ter-item .ter-act{ display:block; margin-top:9px }
  .ter-item .ter-act button{ width:100%; padding:11px !important; font-size:14px !important }
}

/* --- Anti-débordement général -------------------------------------
   Une seule ligne trop large (tableau, mot long, grille figée) fait
   déborder toute la page et décale l'en-tête, comme sur les captures
   où « Déconnexion » et la colonne Statut sortaient de l'écran. */
/* `overflow-x:hidden` sur la page ferait de <body> un conteneur de
   défilement, ce qui CASSE le maintien en place de la barre latérale
   (elle s'arrêtait en cours de défilement, laissant du blanc à
   gauche). `clip` coupe le débordement sans créer ce conteneur. */
html, body{ max-width:100% }
body{ overflow-x:clip }
@supports not (overflow:clip){ body{ overflow-x:hidden } }
.content{ min-width:0 }
.card{ min-width:0 }
@media(max-width:860px){
  .table-wrap{ overflow-x:auto; -webkit-overflow-scrolling:touch }
  .view-head{ flex-direction:column; align-items:stretch; gap:9px }
  .view-tools{ width:100%; flex-wrap:wrap }
  .card-head{ flex-wrap:wrap; gap:8px }
  .topbar{ gap:7px }
  .top-actions{ gap:6px }
  .top-actions button, .top-actions .search{ font-size:12px; padding:7px 9px }
  #global-date{ max-width:130px }
}
@media(max-width:520px){
  /* Sur un écran étroit, l'en-tête garde l'essentiel : menu, titre,
     actualiser. Le reste passe dans le menu latéral. */
  .topbar .select-wrap, .topbar #global-date{ display:none }
  .top-left h1{ font-size:15px; line-height:1.15 }
  .top-left .sub{ font-size:10.5px }
  #refresh-btn span, #logout-btn{ display:none }
  .kpi-grid{ grid-template-columns:1fr }
}

/* --- Menu déroulant de choix des villes ---------------------------
   Les pastilles occupaient toute la largeur de l'en-tête du
   graphique et le faisaient déborder sur téléphone. Elles sont
   maintenant dans un panneau qui ne s'ouvre qu'à la demande. */
.villes-menu{ position:relative }
.villes-btn{ background:#fff; border:1.5px solid var(--border); border-radius:8px;
  padding:5px 11px; font-size:12px; font-weight:700; color:var(--texte-doux);
  cursor:pointer; white-space:nowrap; display:inline-flex; align-items:center; gap:6px }
.villes-btn:hover{ border-color:var(--bleu); color:var(--bleu) }
.villes-btn i{ font-style:normal; font-size:10px }
.choix-villes{ display:none; position:absolute; right:0; top:calc(100% + 6px);
  z-index:30; background:#fff; border:1px solid var(--border); border-radius:11px;
  box-shadow:0 12px 28px rgba(10,20,32,.16); padding:10px;
  flex-direction:column; gap:6px; min-width:190px; max-height:260px; overflow:auto }
.choix-villes.ouvert{ display:flex }
.choix-villes .ville-case{ width:100%; justify-content:flex-start; border-radius:8px }
.choix-villes .ville-tout{ width:100%; margin-top:2px }
@media(max-width:520px){
  .choix-villes{ right:auto; left:0; min-width:170px }
}

/* --- Barre latérale sur toute la hauteur --------------------------
   En « sticky », la colonne sombre s'interrompait au milieu du
   défilement et laissait une bande blanche à gauche. En « fixed »,
   elle occupe toujours la hauteur de l'écran, quel que soit le
   contenu de la page — et elle a son propre défilement quand le menu
   est plus long que l'écran. */
@media(min-width:801px){
  .sidebar{
    position:fixed; top:0; left:0;
    width:230px; height:100vh; height:100dvh;
    display:flex; flex-direction:column;
    overflow-y:auto; overflow-x:hidden;
    scrollbar-width:thin; scrollbar-color:#ffffff33 transparent;
  }
  .sidebar::-webkit-scrollbar{ width:6px }
  .sidebar::-webkit-scrollbar-thumb{ background:#ffffff2e; border-radius:3px }
  .sidebar::-webkit-scrollbar-track{ background:transparent }
  /* La navigation prend la place disponible : le bloc compte et le
     pied restent collés en bas même quand le menu est court. */
  .sidebar nav{ flex:1 0 auto }
  .sidebar .sidebar-compte{ margin-top:auto }
  .main{ margin-left:230px; min-width:0; width:calc(100% - 230px) }
}
@media(max-width:800px){
  /* Menu coulissant : même principe, hauteur pleine et défilement
     propre si la liste dépasse. */
  .sidebar{ top:0; height:100vh; height:100dvh;
    display:flex; flex-direction:column; overflow-y:auto }
  .sidebar nav{ flex:1 0 auto }
  .sidebar .sidebar-compte{ margin-top:auto }
}

/* --- Bande d'alerte « 48 h » --------------------------------------
   Rouge plein, en haut du tableau de bord : c'est une échéance
   contractuelle, elle doit se voir avant les indicateurs. */
.bande-delai{
  background:linear-gradient(135deg,#C0392B,#A93226); color:#fff;
  border-radius:12px; padding:13px 16px; margin-bottom:14px;
  box-shadow:0 6px 18px rgba(192,57,43,.28);
}
.bd-tete{ display:flex; align-items:center; gap:13px; flex-wrap:wrap }
.bd-ico{ font-size:22px; flex:0 0 auto }
.bd-btn{
  background:#fff; color:#A93226; border:0; border-radius:8px;
  padding:9px 16px; font-weight:800; font-size:13px; cursor:pointer;
}
.bd-btn:hover{ background:#FFF1EF }
.bd-liste{ display:flex; gap:7px; flex-wrap:wrap; margin-top:11px;
  padding-top:10px; border-top:1px solid #ffffff33 }
.bd-puce{ background:#ffffff26; border-radius:20px; padding:3px 11px;
  font-size:12px; white-space:nowrap }
.bd-puce b{ font-weight:800 }
@media(max-width:640px){
  .bd-tete{ gap:10px }
  .bd-btn{ width:100%; padding:11px }
  .bd-ico{ font-size:19px }
}

/* --- Commandes communes des cartes d'état -------------------------
   Une seule barre au-dessus de la grille : une date qui pilote les
   quatre jalons, une ville qui pilote les trois backlogs. Un
   sélecteur DANS chaque carte allongeait les cartes de façon inégale
   et décalait la grille. La carte se teinte quand un filtre est
   actif, pour qu'on ne prenne jamais un chiffre filtré pour un total. */
.etat-outils{
  display:flex; gap:14px; flex-wrap:wrap; align-items:flex-end;
  justify-content:center; margin:2px 0 14px; padding:10px 12px;
  background:var(--fond); border:1px solid var(--border); border-radius:10px;
}
.etat-outil{ display:flex; flex-direction:column; gap:4px }
.etat-outil > span{
  font-size:10.5px; font-weight:700; text-transform:uppercase;
  letter-spacing:.04em; color:var(--texte-doux);
}
.etat-outil input, .etat-outil select{
  padding:6px 10px; font-size:13px; font-weight:600;
  border:1.5px solid var(--border); border-radius:8px; background:#fff;
  color:var(--texte); cursor:pointer; min-width:170px;
}
.etat-outil input:hover, .etat-outil select:hover{ border-color:var(--bleu) }
.etat-carte.filtre-actif{ box-shadow:inset 0 0 0 2px var(--c) }
.etat-carte.filtre-actif .etat-sous{ color:var(--c); font-weight:700 }
@media(max-width:640px){
  .etat-outils{ gap:10px; padding:9px 10px }
  .etat-outil{ flex:1 1 100%; }
  .etat-outil input, .etat-outil select{ width:100%; min-width:0; font-size:14px }
}

/* --- Présentation du comité de performance ------------------------
   Des diapositives au format 16:9 dessinées à l'écran : on vérifie
   les chiffres avant la réunion, et l'impression du navigateur donne
   le PDF à raison d'une diapositive par page. */
.pres-outils{ display:flex; gap:12px; align-items:center; flex-wrap:wrap;
  padding:11px 13px; background:var(--fond); border:1px solid var(--border);
  border-radius:10px; margin-bottom:16px }
.pres-outils select{ padding:5px 9px; border:1.5px solid var(--border);
  border-radius:7px; font-weight:600; margin-left:6px }

.diapo{ background:#fff; border:1px solid var(--border); border-radius:12px;
  aspect-ratio:16/9; margin-bottom:18px; overflow:hidden;
  display:flex; flex-direction:column; box-shadow:0 3px 12px rgba(10,20,32,.07) }
.diapo-titre{ background:var(--bleu); color:#fff; font-size:20px; font-weight:800;
  padding:14px 22px; border-bottom:4px solid var(--vert); letter-spacing:.01em }
.diapo-corps{ flex:1; padding:16px 22px; min-height:0; display:flex;
  flex-direction:column; gap:10px }
.diapo-pied{ display:flex; justify-content:space-between; padding:7px 22px;
  font-size:11px; color:var(--texte-doux); border-top:1px solid var(--border) }

.diapo-couverture{ background:var(--bleu); color:#fff; align-items:center;
  justify-content:center; text-align:center; border:none }
.diapo-couverture h1{ font-size:40px; margin:0 0 10px; letter-spacing:.02em }
.diapo-couverture h2{ font-size:24px; margin:0 0 18px; font-weight:600; color:#C8D4E0 }
.diapo-couverture p{ font-size:16px; color:#8FA3B8; margin:0 }

.diapo-flex{ display:flex; gap:20px; flex:1; min-height:0 }
.diapo-graphe{ flex:1; min-height:0; position:relative }
.diapo-graphe.grand{ flex:1 1 100% }
.diapo-graphe canvas{ position:absolute; inset:0 }
.diapo-cote{ width:280px; display:flex; flex-direction:column; gap:5px; overflow:auto }
.diapo-trois{ display:flex; gap:16px; flex:1; min-height:0 }
.diapo-trois > div{ flex:1; display:flex; flex-direction:column; min-height:0 }
.diapo-trois h4{ margin:0 0 6px; font-size:13px; text-align:center; color:var(--vert-texte) }
.diapo-trois canvas{ flex:1; min-height:0 }

.pres-kpi{ background:var(--vert-clair); border-radius:9px; padding:10px 12px; margin-bottom:6px }
.pres-kpi b{ display:block; font-size:26px; color:var(--vert-texte); line-height:1 }
.pres-kpi span{ font-size:12px; color:var(--texte-doux) }
.pres-lg{ display:flex; justify-content:space-between; gap:10px; font-size:13px;
  padding:4px 2px; border-bottom:1px solid var(--border) }
.pres-bandeau{ background:var(--vert-clair); color:var(--vert-texte);
  border-radius:8px; padding:8px 14px; font-size:15px; font-weight:600 }
.pres-bandeau b{ font-size:19px }
.pres-table{ width:100%; border-collapse:collapse; font-size:15px }
.pres-table th{ background:var(--bleu); color:#fff; padding:9px 12px; text-align:left }
.pres-table td{ padding:9px 12px; border-bottom:1px solid var(--border) }

@media(max-width:860px){
  .diapo{ aspect-ratio:auto; min-height:420px }
  .diapo-flex, .diapo-trois{ flex-direction:column }
  .diapo-cote{ width:100% }
  .diapo-titre{ font-size:16px; padding:11px 14px }
  .diapo-couverture h1{ font-size:26px }
}

/* Impression : une diapositive par page, en paysage — c'est ainsi
   qu'on obtient le PDF de présentation depuis le navigateur. */
@media print{
  @page{ size:A4 landscape; margin:8mm }
  .sidebar, .topbar, .pres-outils, .view-head, .tabs{ display:none !important }
  .main{ margin-left:0 !important; width:100% !important }
  .diapo{ break-inside:avoid; page-break-after:always; box-shadow:none;
    border:1px solid #ccc; aspect-ratio:16/9; margin:0 }
  .diapo:last-child{ page-break-after:auto }
}

/* --- Écran SAV : cartes de tête, tuiles, avatars ------------------ */
/* Six colonnes d'un bloc sur écran large : en « auto-fit », la
   sixième carte retombait seule sur une deuxième ligne. */
.sav-kpis{ display:grid; gap:11px; margin-bottom:16px;
  grid-template-columns:repeat(6,minmax(0,1fr)) }
@media(max-width:1180px){ .sav-kpis{ grid-template-columns:repeat(3,minmax(0,1fr)) } }
.sav-kpi{ background:#fff; border:1px solid var(--border); border-radius:14px;
  padding:12px 12px 0; position:relative; overflow:hidden;
  box-shadow:0 1px 3px rgba(10,20,32,.05) }
.sav-kpi-haut{ display:flex; align-items:center; gap:9px; margin-bottom:7px }
.sav-kpi-ic{ width:30px; height:30px; flex:0 0 30px; border-radius:9px; display:grid;
  place-items:center; color:var(--c);
  background:color-mix(in srgb, var(--c) 13%, #fff) }
.sav-kpi-ic svg{ width:16px; height:16px; display:block }
/* Hauteur réservée à deux lignes : les nombres des six cartes
   restent alignés même quand un titre passe à la ligne. */
.sav-kpi-t{ font-size:11.5px; font-weight:800; letter-spacing:.02em; text-transform:uppercase;
  color:var(--texte-doux); line-height:1.25; min-height:2.5em; display:flex; align-items:center }
.sav-kpi b{ display:block; font-size:25px; line-height:1.1; color:var(--texte); margin-bottom:9px }
.sav-kpi-courbe{ display:block; width:calc(100% + 24px); height:34px; margin:0 -12px }

.sav-barre{ display:flex; gap:10px; flex-wrap:wrap; align-items:center; margin-bottom:12px }
.sav-filtre{ display:inline-flex; align-items:center; gap:6px; padding:5px 11px;
  border:1.5px solid var(--border); border-radius:22px; background:#fff; font-size:13px }
.sav-filtre select{ border:none; background:none; font-weight:600; font-size:13px;
  color:var(--texte); cursor:pointer; outline:none; max-width:170px }

.sav-ava{ width:32px; height:32px; flex:0 0 32px; border-radius:50%; display:grid;
  place-items:center; font-size:11.5px; font-weight:800; color:#fff;
  background:var(--a); letter-spacing:.02em }

.sav-grille{ display:grid; gap:12px; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)) }
.sav-tuile{ border:1px solid var(--border); border-radius:12px; padding:13px;
  background:#fff; transition:border-color .12s, box-shadow .12s }
.sav-tuile:hover{ border-color:var(--bleu); box-shadow:0 3px 12px rgba(10,20,32,.08) }
.sav-tuile-haut{ display:flex; gap:10px; align-items:center; margin-bottom:10px }
.sav-tuile-l{ display:flex; justify-content:space-between; gap:10px; padding:4px 0;
  border-top:1px solid var(--border); font-size:12.5px }
.sav-tuile-l span{ color:var(--texte-doux) }
.sav-tuile-l b{ text-align:right; max-width:62%; overflow:hidden; text-overflow:ellipsis;
  white-space:nowrap }
.sav-tuile-pied{ display:flex; justify-content:space-between; align-items:center;
  margin-top:10px; padding-top:9px; border-top:1px solid var(--border) }
.sav-delai{ font-weight:800; font-size:14px }

@media(max-width:640px){
  .sav-kpis{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:9px }
  .sav-kpi b{ font-size:21px }
  .sav-kpi-t{ font-size:10.5px; min-height:2.4em }
  .sav-grille{ grid-template-columns:1fr }
  .sav-barre .segm{ width:100% }
}

/* --- Fenêtres modales ---------------------------------------------
   Centrées à l'écran plutôt que collées en haut, avec une ouverture
   en fondu. Toutes les fenêtres de l'application passent par là, pour
   qu'elles se comportent de la même façon. */
.modale-fond{
  /* Au-dessus de TOUT, y compris du panneau plein écran de l'espace
     technicien (z-index 200). Sous ce niveau, la fenêtre de
     confirmation était masquée par le panneau : le technicien
     cliquait « Enregistrer mon retour » et il ne se passait rien,
     sans le moindre message. */
  position:fixed; inset:0; z-index:400;
  background:rgba(10,20,32,.5); backdrop-filter:blur(2px);
  display:flex; align-items:center; justify-content:center;
  padding:24px 14px; overflow:auto;
  opacity:0; transition:opacity .16s ease;
}
.modale-fond.ouverte{ opacity:1 }
.modale{
  background:#fff; border-radius:16px; width:100%; overflow:hidden;
  box-shadow:0 18px 48px rgba(10,20,32,.28);
  display:flex; flex-direction:column; max-height:calc(100vh - 48px);
  transform:translateY(14px) scale(.985);
  transition:transform .2s cubic-bezier(.2,.8,.3,1);
}
.modale-fond.ouverte .modale{ transform:none }
.modale.petite{ max-width:460px }
.modale.moyenne{ max-width:700px }
.modale.grande{ max-width:940px }
.modale.large{ max-width:1180px }

.modale-tete{
  display:flex; align-items:center; gap:12px; flex:0 0 auto;
  padding:15px 18px; background:var(--bleu); color:#fff;
}
.modale-tete.danger{ background:var(--rouge) }
.modale-tete.attention{ background:var(--orange) }
.modale-tete b{ font-size:16px; display:block; line-height:1.3 }
.modale-sous{ font-size:12.5px; opacity:.82; margin-top:2px }
.modale-ic{
  width:36px; height:36px; flex:0 0 36px; border-radius:11px;
  display:grid; place-items:center; font-size:17px;
  background:rgba(255,255,255,.16);
}
.modale-x{
  background:none; border:1px solid rgba(255,255,255,.35); color:#fff;
  width:30px; height:30px; border-radius:9px; cursor:pointer;
  font-size:14px; line-height:1; flex:0 0 auto;
}
.modale-x:hover{ background:rgba(255,255,255,.16) }
.modale-corps{ padding:18px; overflow:auto; flex:1 1 auto }
.modale-corps > .tf-l:not(:last-child){ margin-bottom:11px }
.modale-pied{
  display:flex; gap:10px; justify-content:flex-end; flex-wrap:wrap;
  padding:13px 18px; border-top:1px solid var(--border);
  background:var(--fond); flex:0 0 auto;
}

.lien-discret{
  background:none; border:none; padding:4px 0; cursor:pointer;
  color:var(--bleu); font-size:12.5px; text-decoration:underline;
  align-self:flex-start;
}
.lien-discret:hover{ color:var(--texte) }

@media(max-width:640px){
  .modale-fond{ padding:12px 10px; align-items:flex-end }
  .modale{ max-height:calc(100vh - 24px); border-radius:16px }
  .modale-pied{ flex-direction:column-reverse }
  .modale-pied button{ width:100% }
}

/* --- Tuiles de choix et encadrés des fenêtres --------------------- */
.choix{ display:grid; gap:8px }
.opt{
  display:flex; align-items:center; gap:11px; padding:11px 13px;
  border:1.5px solid var(--border); border-radius:11px; cursor:pointer;
  background:#fff; text-align:left; width:100%; font-family:inherit;
  transition:border-color .12s, background .12s;
}
.opt:hover{ border-color:var(--bleu); background:#F7FAFD }
.opt.on{ border-color:var(--bleu); background:#EEF5FB; box-shadow:inset 0 0 0 1px var(--bleu) }
.opt-p{ width:11px; height:11px; flex:0 0 11px; border-radius:50%; background:var(--c) }
.opt-t{ flex:1; min-width:0 }
.opt-t b{ display:block; font-size:13.5px; line-height:1.3; color:var(--texte) }
.opt-t span{ font-size:11.5px; color:var(--texte-doux) }
.opt-k{
  font-size:10.5px; font-weight:800; color:var(--texte-doux);
  background:var(--fond); border:1px solid var(--border);
  border-radius:6px; padding:2px 6px; flex:0 0 auto;
}

.enc{ padding:11px 13px; border-radius:9px; font-size:13px; margin-bottom:13px; line-height:1.5 }
.enc.info{ background:#EEF5FB; color:var(--bleu) }
.enc.danger{ background:var(--rouge-fond); color:var(--rouge); border-left:4px solid var(--rouge) }
.enc.attention{ background:var(--orange-fond); color:var(--orange); border-left:4px solid var(--orange) }

.modale button.primary.rouge{ background:var(--rouge); border-color:var(--rouge) }
.modale button.primary.rouge:hover{ filter:brightness(1.08) }
.modale .tf-l{ display:block; margin-bottom:11px }
.modale .tf-l:last-of-type{ margin-bottom:0 }

/* --- Marque du client ---------------------------------------------
   Le logiciel est neutre par défaut : sans logo installé, le nom seul
   s'affiche. Il ne doit donc pas ressembler à un espace vide. */
.marque-nom{
  font-size:30px; font-weight:800; letter-spacing:.14em;
  color:var(--bleu); line-height:1.1;
}
.brand-large img:not([hidden]) + .marque-nom{
  font-size:15px; letter-spacing:.1em; margin-top:10px; color:var(--texte-doux);
}
.marque-nom-cote{
  font-size:19px; font-weight:800; letter-spacing:.12em; color:#fff;
  padding:4px 2px; line-height:1.2;
}
.brand-logo:not([hidden]) + .marque-nom-cote{
  font-size:11.5px; letter-spacing:.08em; opacity:.75; margin-top:5px;
}
/* Le logo KORA est bleu foncé : sur le menu sombre il disparaîtrait.
   On le pose sur une pastille claire, comme sur l'écran de connexion. */
.brand-logo{
  max-width:100%; max-height:54px; object-fit:contain;
  background:#fff; border-radius:11px; padding:9px 12px;
  box-sizing:border-box; width:100%;
}

/* --- Panneau des retours terrain (cloche) -------------------------
   Les retours arrivent en temps réel puis disparaissent de l'écran.
   Ce panneau permet de revoir ce que chaque technicien a déclaré. */
.retours-liste{ display:grid; gap:9px }
.retour-item{
  border:1.5px solid var(--border); border-radius:11px; padding:11px 12px;
  cursor:pointer; background:#fff; transition:border-color .12s, background .12s;
}
.retour-item:hover{ border-color:var(--bleu); background:#F7FAFD }
.retour-tete{ display:flex; align-items:center; gap:10px; margin-bottom:8px }
.retour-tete b{ font-size:13.5px }
.retour-quand{ font-size:11px; color:var(--texte-doux); white-space:nowrap; flex:0 0 auto }
.retour-corps{ display:flex; gap:6px; flex-wrap:wrap; align-items:center }
.retour-jalon{
  font-size:11px; font-weight:700; padding:2px 8px; border-radius:20px;
  background:var(--vert-clair); color:var(--vert-texte);
}
.retour-com{
  margin-top:7px; padding:7px 9px; background:var(--fond); border-radius:8px;
  font-size:12.5px; color:var(--texte-doux); line-height:1.45;
}
.icon-btn .badge{
  position:absolute; top:-5px; right:-5px; background:var(--rouge); color:#fff;
  font-size:10px; font-weight:800; min-width:17px; height:17px; border-radius:9px;
  display:grid; place-items:center; padding:0 4px; border:2px solid #fff;
}
.icon-btn{ position:relative }

/* =====================================================================
 *  THÈMES
 *
 *  Chaque thème ne redéfinit que les variables d'AMBIANCE : fond,
 *  cartes, bordures, texte, et les couleurs du menu. Les couleurs de
 *  STATUT — orange En cours, vert Terminé, rouge Bloqué — restent
 *  identiques partout : ce sont des repères métier, et les changer
 *  créerait de la confusion entre collègues qui n'ont pas le même
 *  thème.
 *
 *  Le thème est posé sur <html data-theme="…"> : il s'applique avant
 *  le premier affichage, sans clignotement.
 * ===================================================================== */

/* Variables du MENU, communes à tous les thèmes. */
:root{
  --menu-fond:    #063A7C;
  --menu-texte:   #BCCFE6;
  --menu-actif:   #F5B41E;
  --menu-actif-t: #0A2E5E;
  --menu-titre:   #F5B41E;
  --menu-filet:   rgba(255,255,255,.14);
  --menu-survol:  rgba(255,255,255,.09);
  --menu-bordure: #FFFFFF;
}

/* --- 2 · Ardoise : gris-bleu neutre, moins saturé ------------------ */
[data-theme="ardoise"]{
  --menu-fond:#1E2A38; --menu-texte:#AEBECD; --menu-actif:#3E9BD6;
  --menu-actif-t:#FFFFFF; --menu-titre:#6E88A6; --menu-bordure:#FFFFFF;
  --fond:#F5F7F9; --card:#FFFFFF; --border:#E2E8ED; --border-fort:#CBD5DE;
  --texte:#1E2A38; --texte-doux:#5F7285;
  --bleu:#2E7FB8; --accent:#2E7FB8; --bleu-clair:#EDF4F9; --bleu-bord:#C3DAEB;
  --ardoise:#1E2A38; --ardoise-2:#2B3A4C;
}

/* =====================================================================
 *  MODE SOMBRE — LISIBILITÉ (technicien et logiciel)
 *
 *  Cause : plusieurs couleurs étaient écrites en dur (fonds blancs,
 *  textes bleu marine, anciennes variables --red / --green-light /
 *  --blue-light / --ardoise…) et ne suivaient pas le thème : texte
 *  sombre sur fond sombre, ou texte clair sur fond clair.
 *
 *  Ce bloc :
 *   1. redéfinit en sombre les anciennes variables restées figées ;
 *   2. corrige les styles écrits directement dans le HTML généré ;
 *   3. reprend, règle par règle, les fonds clairs et les textes foncés
 *      de la feuille de style (partie générée, plus bas).
 *  Les autres thèmes (KORA, Ardoise, Clair, Terre, Forêt) ne sont pas
 *  touchés, sauf les deux corrections signalées « thème Clair ».
 * ===================================================================== */
[data-theme="sombre"]{
  color-scheme:dark;                       /* listes, dates, barres de défilement natives */
  --blue-light:#1E2B3A; --green-light:#1D2B1E; --green-dark:#8FC44A;
  --red:#E8635A; --purple:#A896D8; --muted:#94A3B4; --line:#333D4A;
  --blue:#2F6FB5;                          /* fond de bouton : texte blanc à 5,3 de contraste */
  --navy:#1E4A7A;                          /* bandeaux de l'espace technicien, texte blanc */
  --fond-doux:#1F2731; --orange-clair:#2E2415; --sub:#94A3B4;
}
/* Notification : elle prenait --ardoise, devenu clair en sombre, avec un texte blanc. */
[data-theme="sombre"] #toast{ background:#2F3B4A; color:var(--texte); border:1px solid var(--border-fort) }
/* Pastille verte pleine : son texte prenait --ardoise (clair en sombre). */
[data-theme="sombre"] .pill.green,[data-theme="sombre"] .badge-green{ color:#12161C }
[data-theme="sombre"] .login-screen{ background:linear-gradient(135deg,#12161C,#1E2B3A) }
[data-theme="sombre"] .login-card{ background:var(--card); color:var(--texte) }
[data-theme="sombre"] .login-card h1,[data-theme="sombre"] .login-card label,
[data-theme="sombre"] .brand-large b{ color:var(--texte) }

/* --- Styles écrits dans le HTML généré (fenêtres, bandeaux, tableaux) --- */
/* Fenêtres et blocs à fond blanc : le texte hérité est clair en sombre. */
[data-theme="sombre"] [style*="background:#fff;"],
[data-theme="sombre"] [style$="background:#fff"],
[data-theme="sombre"] [style*="background: #fff;"],
[data-theme="sombre"] [style*="background:#ffffff" i]{ background:var(--card) !important; color:var(--texte) }
[data-theme="sombre"] [style*="#F4F6F9" i],[data-theme="sombre"] [style*="#F5F7FA" i],
[data-theme="sombre"] [style*="#EEF1F4" i],[data-theme="sombre"] [style*="#E8EDF2" i]{
  background:#1F2731 !important; color:var(--texte) }
[data-theme="sombre"] [style*="background:#F2C9A0" i]{ background:#4A3320 !important; color:var(--texte) }
[data-theme="sombre"] [style*="background:#FDF3E3" i],[data-theme="sombre"] [style*="background:#FFF4E5" i],
[data-theme="sombre"] [style*="background:#FFF1D6" i]{ background:var(--orange-fond) !important; color:var(--orange) }
[data-theme="sombre"] [style*="color:#B26A00" i],[data-theme="sombre"] [style*="color:#8A5A00" i]{ color:var(--orange) !important }
/* Filets rose / beige pâle autour des blocs d'alerte : trop vifs sur fond sombre. */
[data-theme="sombre"] [style*="#E8C4C1" i]{ border-color:#5A2E2A !important }
[data-theme="sombre"] [style*="#E8D5B0" i],[data-theme="sombre"] [style*="#E8CBA1" i],
[data-theme="sombre"] [style*="#E9CE9A" i],[data-theme="sombre"] [style*="#F0C98A" i],
[data-theme="sombre"] [style*="#F0D9A8" i]{ border-color:#5A4520 !important }
/* Bandeaux qui prenaient --ardoise (clair en sombre) avec un texte blanc. */
[data-theme="sombre"] [style*="background:var(--ardoise)"]{ background:var(--navy) !important }
/* Texte « bleu » écrit avec l'ancienne variable : trop sombre sur fond sombre. */
[data-theme="sombre"] [style*="color:var(--blue)"]{ color:var(--bleu-fonce) !important }
[data-theme="sombre"] .stk-barre button.stk-b2,[data-theme="sombre"] .stk-barre button.stk-b3:hover{ color:var(--bleu-fonce); border-color:var(--bleu-fonce) }
/* Têtes de tableau bleues : bleu un peu plus profond pour garder un texte blanc lisible. */
[data-theme="sombre"] [style*="background:var(--bleu)"]{ background:#2F6FB5 !important }

/* --- Reprise des fonds clairs et des textes foncés de la feuille de style ---
   Partie générée règle par règle à partir du CSS de base. Placée AVANT les
   règles sombres écrites à la main ci-dessous, qui gardent la priorité. */
[data-theme="sombre"] body{background:#172737;color:#89B2DC}
[data-theme="sombre"] .login-card{background:var(--card)}
[data-theme="sombre"] .ghost{background:var(--card)}
[data-theme="sombre"] .s-orange{color:#EBBA8E}
[data-theme="sombre"] .orange-filters{background:var(--card)}
[data-theme="sombre"] .orange-filters input,[data-theme="sombre"] .orange-filters select{background:var(--card)}
[data-theme="sombre"] .orange-kpi{background:var(--card)}
[data-theme="sombre"] .orange-card{background:var(--card)}
[data-theme="sombre"] .orange-progress{background:#1F2B38}
[data-theme="sombre"] .topbar{background:var(--card)}
[data-theme="sombre"] .select-wrap{background:var(--card)}
[data-theme="sombre"] .icon-btn{background:var(--card)}
[data-theme="sombre"] .kpi{background:var(--card)}
[data-theme="sombre"] .kpi.blue{background:linear-gradient(135deg,var(--card),var(--blue-light))}
[data-theme="sombre"] .kpi.green{background:linear-gradient(135deg,var(--card),var(--green-light))}
[data-theme="sombre"] .kpi.orange{background:linear-gradient(135deg,var(--card),var(--orange-fond))}
[data-theme="sombre"] .kpi.red{background:linear-gradient(135deg,var(--card),var(--rouge-fond))}
[data-theme="sombre"] .kpi.purple{background:linear-gradient(135deg,var(--card),#26193A)}
[data-theme="sombre"] .kpi.gray{background:linear-gradient(135deg,var(--card),var(--fond))}
[data-theme="sombre"] .card{background:var(--card)}
[data-theme="sombre"] .tabs button{background:var(--card)}
[data-theme="sombre"] .pill.purple{background:#26193A}
[data-theme="sombre"] .bloc-etat{background:var(--card)}
[data-theme="sombre"] .etat-pct{background:var(--card)}
[data-theme="sombre"] .graph-c{background:var(--card)}
[data-theme="sombre"] .segm{background:var(--card)}
[data-theme="sombre"] .segm button{background:var(--card)}
[data-theme="sombre"] .td-barre{background:var(--card)}
[data-theme="sombre"] .sel-ville{background:var(--card)}
[data-theme="sombre"] .pagination .pg{background:var(--card)}
[data-theme="sombre"] .ter-case{background:var(--card)}
[data-theme="sombre"] .ter-case:has(input:checked){background:color-mix(in srgb,var(--c) 9%,var(--card))}
[data-theme="sombre"] .tf-l input,[data-theme="sombre"] .tf-l select,[data-theme="sombre"] .tf-l textarea{background:var(--card)}
[data-theme="sombre"] .tf-l input[readonly]{background:#1D2634}
@media (max-width:640px){
[data-theme="sombre"] .table-cartes tr{background:var(--card)}
}
[data-theme="sombre"] .ville-case{background:var(--card)}
[data-theme="sombre"] .ville-case:has(input:checked){background:color-mix(in srgb, var(--cv) 10%, var(--card))}
[data-theme="sombre"] .bouton-wa:disabled{background:#2A613E;border-color:var(--border)}
[data-theme="sombre"] .ter-item{background:var(--card)}
[data-theme="sombre"] .villes-btn{background:var(--card)}
[data-theme="sombre"] .choix-villes{background:var(--card)}
[data-theme="sombre"] .bd-btn{background:var(--card);color:#E38B82}
[data-theme="sombre"] .bd-btn:hover{background:#381C18}
[data-theme="sombre"] .etat-outil input,[data-theme="sombre"] .etat-outil select{background:var(--card)}
[data-theme="sombre"] .diapo{background:var(--card)}
[data-theme="sombre"] .sav-kpi{background:var(--card)}
[data-theme="sombre"] .sav-kpi-ic{background:color-mix(in srgb, var(--c) 13%, var(--card))}
[data-theme="sombre"] .sav-filtre{background:var(--card)}
[data-theme="sombre"] .sav-tuile{background:var(--card)}
[data-theme="sombre"] .modale{background:var(--card)}
[data-theme="sombre"] .opt{background:var(--card)}
[data-theme="sombre"] .opt:hover{background:#172636}
[data-theme="sombre"] .opt.on{background:#192B3A}
[data-theme="sombre"] .enc.info{background:#192B3A}
[data-theme="sombre"] .retour-item{background:var(--card)}
[data-theme="sombre"] .retour-item:hover{background:#172636}
[data-theme="sombre"] .icon-btn .badge{border:2px solid var(--border)}
[data-theme="sombre"] .tech-case:has(input:checked){background:color-mix(in srgb,var(--bleu,#1F4E79) 9%,var(--card))}
[data-theme="sombre"] .reseau button{border:1px solid var(--border)}
[data-theme="sombre"] .reseau.attente button{color:#3A2A0A}   /* bandeau ambre : texte brun foncé (le texte ambre clair était illisible) */
[data-theme="sombre"] .ter-rappel button{background:var(--card) !important;color:#E8BA7D !important}
[data-theme="sombre"] .pm-puce.on{border-color:var(--border)}
[data-theme="sombre"] .pres-motifs td{color:var(--texte)}
[data-theme="sombre"] .pres-motifs tbody tr:nth-child(odd) td{background:#432C1D}
[data-theme="sombre"] .pres-motifs tbody tr:nth-child(even) td{background:#543724}
[data-theme="sombre"] .pres-motifs .pres-reste td{color:var(--texte-doux)}
[data-theme="sombre"] .fiche-groupe-titre{border-bottom:2px solid var(--border,var(--border))}
[data-theme="sombre"] .fiche-champ{border-bottom:1px solid var(--border,var(--border))}
[data-theme="sombre"] .fiche-champ dt{color:var(--texte-doux)}
[data-theme="sombre"] .fiche-champ dd{color:#89B4DC}
[data-theme="sombre"] .diapo.coperf{background:var(--card)}
[data-theme="sombre"] .cp-titre .o{color:#EBB38E}
[data-theme="sombre"] .cp-titre .g{color:var(--texte-doux)}
[data-theme="sombre"] .cp-titre .g2{color:var(--texte-doux)}
[data-theme="sombre"] .cp-sem{color:var(--texte)}
[data-theme="sombre"] .cp-g h4{color:var(--texte)}
[data-theme="sombre"] .cp-g .pres-bandeau{background:#3A2619;color:#E8AA7D}
[data-theme="sombre"] .cp-tab td{background:#442C1D;color:var(--texte);border:1px solid var(--border)}
[data-theme="sombre"] .cp-tab tbody tr:nth-child(even) td{background:#543724}
[data-theme="sombre"] .cp-tab.noir tbody tr:nth-child(even) td{background:#442C1D}
[data-theme="sombre"] .diapo.coperf .cp-pied{color:#EBB48E}
[data-theme="sombre"] .diapo-couverture.coperf{background:var(--card);color:var(--texte)}
[data-theme="sombre"] .diapo-couverture.coperf h1{color:#EBB38E}
[data-theme="sombre"] .diapo-couverture.coperf h2{color:var(--texte-doux)}
[data-theme="sombre"] .diapo-couverture.coperf .cv-sem{color:var(--texte)}
[data-theme="sombre"] .pq-techs ul{background:var(--fond-doux,#182837)}
[data-theme="sombre"] .dossiers-large thead th{background:#1E2B38}
[data-theme="sombre"] .dossiers-large .gel-c0,[data-theme="sombre"] .dossiers-large .gel-c1,[data-theme="sombre"] .dossiers-large .gel-c2,[data-theme="sombre"] .dossiers-large .gel-fin{background:var(--card)}
[data-theme="sombre"] .dossiers-large thead .gel-c0,[data-theme="sombre"] .dossiers-large thead .gel-c1,[data-theme="sombre"] .dossiers-large thead .gel-c2,[data-theme="sombre"] .dossiers-large thead .gel-fin{background:#1E2B38}
[data-theme="sombre"] .dossiers-large tbody tr:hover .gel-c0,[data-theme="sombre"] .dossiers-large tbody tr:hover .gel-c1,[data-theme="sombre"] .dossiers-large tbody tr:hover .gel-c2,[data-theme="sombre"] .dossiers-large tbody tr:hover .gel-fin{background:#182837}
[data-theme="sombre"] .cp-def{color:var(--texte-doux)}
[data-theme="sombre"] .orange-dashboard{color:#89B2DC}
[data-theme="sombre"] .orange-dashboard .view-head h2{color:#89B2DC}
[data-theme="sombre"] .orange-filters{background:var(--card);border:1px solid var(--border)}
[data-theme="sombre"] .orange-filters label{color:var(--texte-doux)}
[data-theme="sombre"] .orange-filters input,[data-theme="sombre"] .orange-filters select{border-color:var(--border)}
[data-theme="sombre"] .orange-multi-btn{background:var(--card);border:1px solid var(--border);color:#89B2DC}
[data-theme="sombre"] .orange-multi-menu{background:var(--card);border:1px solid var(--border)}
[data-theme="sombre"] .orange-multi-menu label{color:#89B2DC}
[data-theme="sombre"] .orange-multi-menu label:hover{background:#3B2919}
[data-theme="sombre"] .orange-kpi .ok-value{color:#89B2DC}
[data-theme="sombre"] .orange-card{border-color:var(--border)}
[data-theme="sombre"] .orange-map{background:linear-gradient(180deg,#172A36,#1B2C3A);border:1px solid var(--border)}
[data-theme="sombre"] .orange-map-title{background:var(--card);color:#89B2DC}
[data-theme="sombre"] .orange-map-city{border:3px solid var(--border)}
[data-theme="sombre"] .orange-map-legend{background:var(--card);color:var(--texte-doux)}
[data-theme="sombre"] .orange-selected-info{background:#182A36;color:var(--texte-doux)}
[data-theme="sombre"] .orange-problem-card .card-head select{background:var(--card);border:1px solid var(--border);color:#89B2DC}
[data-theme="sombre"] .orange-status-card{background:#351717;border:1px solid var(--border);color:#DF8686}
[data-theme="sombre"] .orange-detail-title{color:#89B2DC}
[data-theme="sombre"] .orange-motif-row{background:#1A2734}
[data-theme="sombre"] .orange-motif-row b{color:#E99191}
[data-theme="sombre"] .orange-status{color:var(--texte-doux)}
[data-theme="sombre"] .orange-detail-count{background:#371818;color:#E99191}
[data-theme="sombre"] .orange-motif-row{color:#89B2DC}
[data-theme="sombre"] .orange-motif-row:hover{background:#3B2919}
[data-theme="sombre"] .orange-motif-row strong{color:#E99191}
[data-theme="sombre"] .orange-motif-city{color:var(--texte-doux)}
[data-theme="sombre"] .orange-table .card-head select{background:var(--card);border:1px solid var(--border);color:#89B2DC}
[data-theme="sombre"] .orange-dashboard{background:#1A2734}
[data-theme="sombre"] .orange-dashboard .orange-card{background:var(--card)}
[data-theme="sombre"] .orange-dashboard .orange-kpi .ok-label{color:var(--texte-doux)}
[data-theme="sombre"] .orange-dashboard .orange-map{background:linear-gradient(180deg,#172935,#192E3B)}
[data-theme="sombre"] .orange-dashboard .orange-map-title{background:var(--card);color:var(--texte-doux);border:1px solid var(--border)}
[data-theme="sombre"] .orange-dashboard .orange-map-legend{border:1px solid var(--border)}
[data-theme="sombre"] .orange-dashboard .orange-status-card{background:#372518;border-color:var(--border);color:#E8A67D}
[data-theme="sombre"] .orange-dashboard .orange-motif-row{background:#172636;border:1px solid var(--border)}
[data-theme="sombre"] .orange-dashboard .orange-motif-row:hover{background:#372618;border-color:var(--border)}
[data-theme="sombre"] .orange-dashboard .data-table th{background:#172636;color:var(--texte-doux)}
[data-theme="sombre"] .orange-dashboard .data-table td{border-bottom:1px solid var(--border)}
[data-theme="sombre"] .orange-dashboard .orange-inline-filters select,[data-theme="sombre"] .orange-dashboard .orange-inline-filters input{background:var(--card);border:1px solid var(--border);color:#89B2DC}
[data-theme="sombre"] .orange-dashboard .orange-tech-chip,[data-theme="sombre"] .orange-dashboard .orange-more-chip{background:#182739;color:#8EB6EB}
[data-theme="sombre"] .orange-dashboard .orange-more-chip{background:#19293A;color:var(--texte-doux)}
[data-theme="sombre"] .orange-dashboard .orange-selected-info{background:#172636;border:1px solid var(--border)}
[data-theme="sombre"] .orange-dashboard .orange-status-row{color:#89B2DC}
[data-theme="sombre"] .orange-dashboard .orange-status-row:hover{background:#172636}
[data-theme="sombre"] .orange-dashboard .orange-status-row.active{background:#372417}
[data-theme="sombre"] .orange-dashboard .orange-status-track{background:#1E2B38}
[data-theme="sombre"] .orange-dashboard .orange-status-value{color:#89B2DC}
[data-theme="sombre"] .orange-dashboard .orange-status-row.active .orange-status-arrow{color:#E99191}
[data-theme="sombre"] .orange-dashboard .orange-detail-title{color:var(--texte-doux)}
[data-theme="sombre"] .orange-dashboard .orange-detail-title b{color:#89B2DC}
[data-theme="sombre"] .orange-dashboard .orange-detail-count{background:#3B2619;color:#EBB08E}
[data-theme="sombre"] .orange-dashboard .orange-reset,[data-theme="sombre"] .orange-dashboard .orange-map-reset{background:var(--card);border:1px solid var(--border);color:var(--texte-doux)}
[data-theme="sombre"] .orange-dashboard .orange-reset:hover,[data-theme="sombre"] .orange-dashboard .orange-map-reset:hover{background:#372518;border-color:var(--border);color:#E8AC7D}
[data-theme="sombre"] .orange-dashboard .orange-map{background:radial-gradient(circle at 50% 45%,var(--card),#192E3B 72%),
  linear-gradient(135deg,#172D35,#1A2E3B)}
[data-theme="sombre"] .orange-dashboard .orange-map-legend{background:var(--card);border:1px solid var(--border)}
[data-theme="sombre"] .orange-dashboard .orange-ville-all{background:#182739 !important;color:#8EB6EB !important;border:1px solid var(--border) !important}
[data-theme="sombre"] .orange-dashboard .orange-ville-all:hover{background:#1A2A3D !important}
[data-theme="sombre"] .orange-dashboard .orange-map-v8{background:radial-gradient(circle at 46% 42%,var(--card),#1A2F38 68%),
    linear-gradient(135deg,var(--card),#1A313B)}
[data-theme="sombre"] .orange-dashboard .orange-map-v8 .orange-map-city-v8{border-color:var(--border)}
[data-theme="sombre"] .orange-dashboard .orange-map-v8 .orange-map-city-v8 span{background:var(--card);color:#89B2DC;border:1px solid var(--border)}
[data-theme="sombre"] .orange-chart-controls label{color:var(--texte-doux)}
[data-theme="sombre"] .orange-chart-controls select{background:var(--card);border:1px solid var(--border);color:#89B2DC}
[data-theme="sombre"] .orange-periods{background:#372518;border:1px solid var(--border)}
[data-theme="sombre"] .orange-period{color:#E8A67D}
[data-theme="sombre"] .orange-period:hover{background:#422E1C}
[data-theme="sombre"] .orange-dashboard .orange-dmr-legend-item b{color:#89B2DC}
[data-theme="sombre"] .orange-dashboard .orange-dmr-legend-item strong{color:#89B2DC}
[data-theme="sombre"] .orange-dashboard .orange-detail-title{color:#89B2DC}
[data-theme="sombre"] .orange-dashboard .orange-detail-title b{color:#89B2DC}
[data-theme="sombre"] .orange-dashboard .orange-problem-statuses .orange-status-row{color:#89B2DC}
[data-theme="sombre"] .orange-dashboard .orange-problem-statuses .orange-status-row:hover{background:#172636}
[data-theme="sombre"] .orange-dashboard .orange-problem-statuses .orange-status-row.active{background:#372417;color:#89B2DC}
[data-theme="sombre"] .orange-dashboard .orange-status-detail-card .card-head h3{color:#89B2DC}
[data-theme="sombre"] .orange-dashboard .orange-problem-statuses .orange-status-row{color:#89B2DC}
[data-theme="sombre"] .orange-dashboard .orange-problem-statuses .orange-status-row:hover{background:#172636}
[data-theme="sombre"] .orange-dashboard .orange-problem-statuses .orange-status-row.active{background:#372417}
[data-theme="sombre"] .orange-dashboard .orange-problem-statuses .orange-status-track{background:#1E2B38}
[data-theme="sombre"] .orange-dashboard .orange-problem-statuses .orange-status-value{color:#89B2DC}
[data-theme="sombre"] .orange-dashboard .orange-problem-statuses .orange-status-row.active .orange-status-arrow{color:#E99191}
[data-theme="sombre"] .orange-dashboard .orange-period{background:var(--card)}
[data-theme="sombre"] .orange-dashboard .orange-pop{background:var(--card)}
[data-theme="sombre"] .orange-dashboard .orange-switch-piste i{background:var(--card)}
[data-theme="sombre"] .orange-dashboard .orange-carte-legende i{border:1.5px solid var(--border)}
[data-theme="sombre"] .orange-dashboard.charte-orange{color:var(--texte)}
[data-theme="sombre"] .orange-dashboard.charte-orange input,[data-theme="sombre"] .orange-dashboard.charte-orange select,[data-theme="sombre"] .orange-dashboard.charte-orange button.ghost{background:var(--card);color:var(--texte)}
[data-theme="sombre"] .orange-dashboard.charte-orange .orange-filters{background:var(--card);border:1px solid var(--border)}
[data-theme="sombre"] .orange-dashboard.charte-orange .orange-filters label{color:var(--texte-doux)}
[data-theme="sombre"] .orange-dashboard.charte-orange .orange-multi-btn{background:var(--card);color:var(--texte)}
[data-theme="sombre"] .orange-dashboard.charte-orange .orange-multi-menu{background:var(--card);color:var(--texte)}
[data-theme="sombre"] .orange-dashboard.charte-orange .orange-multi-menu label{color:var(--texte)}
[data-theme="sombre"] .orange-dashboard.charte-orange .orange-multi-menu label:hover{background:#412D1C}
[data-theme="sombre"] .orange-dashboard.charte-orange .orange-periods{background:var(--card)}
[data-theme="sombre"] .orange-dashboard.charte-orange .orange-period{background:var(--card);color:var(--texte)}
[data-theme="sombre"] .orange-dashboard.charte-orange .orange-reset,[data-theme="sombre"] .orange-dashboard.charte-orange .orange-map-reset,[data-theme="sombre"] .orange-dashboard.charte-orange .orange-ent-raz{background:var(--card);color:var(--texte)}
[data-theme="sombre"] .orange-dashboard.charte-orange .orange-kpi{background:var(--card);border:1px solid var(--border)}
[data-theme="sombre"] .orange-dashboard.charte-orange .orange-kpi .ok-label{color:var(--texte-doux)}
[data-theme="sombre"] .orange-dashboard.charte-orange .orange-kpi .ok-value,[data-theme="sombre"] .orange-dashboard.charte-orange .orange-kpi.blue .ok-value,[data-theme="sombre"] .orange-dashboard.charte-orange .orange-kpi.orange .ok-value,[data-theme="sombre"] .orange-dashboard.charte-orange .orange-kpi.green .ok-value,[data-theme="sombre"] .orange-dashboard.charte-orange .orange-kpi.slate .ok-value{color:var(--texte)}
[data-theme="sombre"] .orange-dashboard.charte-orange .orange-kpi.red .ok-value{color:#E8947D}
[data-theme="sombre"] .orange-dashboard.charte-orange .orange-kpi .ok-sub{color:var(--texte-doux)}
[data-theme="sombre"] .orange-dashboard.charte-orange .orange-card{background:var(--card);border:1px solid var(--border)}
[data-theme="sombre"] .orange-dashboard.charte-orange .orange-card h3{color:var(--texte)}
[data-theme="sombre"] .orange-dashboard.charte-orange .orange-card .sub,[data-theme="sombre"] .orange-dashboard.charte-orange .orange-selected-info{color:var(--texte-doux)}
[data-theme="sombre"] .orange-dashboard.charte-orange .orange-empty{color:var(--texte-doux)}
[data-theme="sombre"] .orange-dashboard.charte-orange .data-table tbody td{color:var(--texte);border-bottom:1px solid var(--border)}
[data-theme="sombre"] .orange-dashboard.charte-orange .data-table tfoot td{background:#2D2D2D;color:var(--texte)}
[data-theme="sombre"] .orange-dashboard.charte-orange .orange-ent-scroll{border:1px solid var(--border)}
[data-theme="sombre"] .orange-dashboard.charte-orange .orange-tri-ico.on{color:#EBBA8E}
[data-theme="sombre"] .orange-dashboard.charte-orange .orange-ent-table tbody td,[data-theme="sombre"] .orange-dashboard.charte-orange .orange-ent-table tfoot td{color:var(--texte)}
[data-theme="sombre"] .orange-dashboard.charte-orange .orange-ent-table td.rang{color:var(--texte-doux)}
[data-theme="sombre"] .orange-dashboard.charte-orange .orange-ent-table td.c-recu span{background:#1B333E}
[data-theme="sombre"] .orange-dashboard.charte-orange .orange-ent-table td.c-inst span{background:#412D1C}
[data-theme="sombre"] .orange-dashboard.charte-orange .orange-ent-table td.c-mes span{background:#1B402E}
[data-theme="sombre"] .orange-dashboard.charte-orange .orange-ent-table td.c-total span{background:#2D2D2D;border:1px solid var(--border)}
[data-theme="sombre"] .orange-dashboard.charte-orange .orange-ent-table tbody tr:hover td{background:#2A2A2A}
[data-theme="sombre"] .orange-dashboard.charte-orange .orange-ent-table tbody tr.orange-nous td{background:#392A19}
[data-theme="sombre"] .orange-dashboard.charte-orange .orange-ent-table tbody tr.orange-nous td.ent{color:var(--texte)}
[data-theme="sombre"] .orange-dashboard.charte-orange .orange-ent-table tfoot td{background:#2D2D2D}
[data-theme="sombre"] .orange-dashboard.charte-orange .orange-prog{background:#2D2D2D;color:var(--texte)}
[data-theme="sombre"] .orange-dashboard.charte-orange .orange-prog.bon{background:#1B402E;color:var(--texte)}
[data-theme="sombre"] .orange-dashboard.charte-orange .orange-prog.moyen{background:#463F1E;color:var(--texte)}
[data-theme="sombre"] .orange-dashboard.charte-orange .orange-prog.faible{background:#41241C;color:var(--texte)}
[data-theme="sombre"] .orange-dashboard.charte-orange .orange-prog.neutre{background:#2D2D2D;border-color:var(--border);color:var(--texte-doux)}
[data-theme="sombre"] .orange-dashboard.charte-orange .orange-ent-filtres>label{color:var(--texte-doux)}
[data-theme="sombre"] .orange-dashboard.charte-orange .orange-ent-pied,[data-theme="sombre"] .orange-dashboard.charte-orange .orange-ent-note{color:var(--texte-doux)}
[data-theme="sombre"] .orange-dashboard.charte-orange .orange-switch{color:var(--texte)}
[data-theme="sombre"] .orange-dashboard.charte-orange .orange-statut-groupe{color:var(--texte-doux)}
[data-theme="sombre"] .orange-dashboard.charte-orange .orange-status-row{color:var(--texte)}
[data-theme="sombre"] .orange-dashboard.charte-orange .orange-status-row .orange-status-track{background:#2D2D2D}
[data-theme="sombre"] .orange-dashboard.charte-orange .orange-status-row.active{background:#412D1C;color:var(--texte)}
[data-theme="sombre"] .orange-dashboard.charte-orange .orange-status-row .orange-status-value,[data-theme="sombre"] .orange-dashboard.charte-orange .orange-status-row .orange-status-arrow{color:var(--texte)}
[data-theme="sombre"] .orange-dashboard.charte-orange .orange-pop{background:var(--card)}
[data-theme="sombre"] .orange-dashboard.charte-orange .orange-pop-btn{background:var(--card);color:var(--texte)}
[data-theme="sombre"] .orange-dashboard.charte-orange .pill{background:#2D2D2D;color:var(--texte)}
[data-theme="sombre"] .orange-dashboard.charte-orange .pill.green{background:#1B402E;color:var(--texte)}
[data-theme="sombre"] .orange-dashboard.charte-orange .pill.red{background:#41241C;color:var(--texte)}
[data-theme="sombre"] .orange-dashboard.charte-orange .pill.blue,[data-theme="sombre"] .orange-dashboard.charte-orange .orange-ville-all{background:#2D2D2D !important;color:var(--texte) !important}
[data-theme="sombre"] .orange-dashboard.charte-orange .orange-carte{background:#2D2D2D;border:1px solid var(--border)}
[data-theme="sombre"] .orange-dashboard.charte-orange .orange-carte .voisin{fill:var(--texte-doux)}
[data-theme="sombre"] .orange-dashboard.charte-orange .orange-carte .nord{fill:var(--texte)}
[data-theme="sombre"] .orange-dashboard.charte-orange .orange-carte-nom{fill:var(--texte-doux)}
[data-theme="sombre"] .orange-dashboard.charte-orange .orange-carte-ville .c.n1,[data-theme="sombre"] .orange-dashboard.charte-orange .orange-carte-ville .c.n2,[data-theme="sombre"] .orange-dashboard.charte-orange .orange-carte-ville .c.n3{fill:var(--texte)}
[data-theme="sombre"] .orange-dashboard.charte-orange .orange-carte-ville .nom{fill:var(--texte)}
[data-theme="sombre"] .orange-dashboard.charte-orange .orange-carte-legende,[data-theme="sombre"] .orange-dashboard.charte-orange .orange-carte-total,[data-theme="sombre"] .orange-dashboard.charte-orange .orange-carte-hors{background:var(--card);border:1px solid var(--border);color:var(--texte)}
[data-theme="sombre"] .orange-dashboard.charte-orange .orange-carte-total small{color:var(--texte-doux)}
[data-theme="sombre"] .orange-dashboard.charte-orange b,[data-theme="sombre"] .orange-dashboard.charte-orange strong,[data-theme="sombre"] .orange-dashboard.charte-orange .orange-status{color:var(--texte)}
[data-theme="sombre"] .orange-dashboard.charte-orange .orange-status-arrow{color:var(--texte)}
[data-theme="sombre"] .orange-dashboard.charte-orange .orange-progress{background:#2D2D2D}
[data-theme="sombre"] .orange-dashboard.charte-orange td,[data-theme="sombre"] .orange-dashboard.charte-orange td.num{border-bottom-color:var(--border)}
[data-theme="sombre"] .orange-dashboard.charte-orange .orange-status-row .orange-status-arrow,[data-theme="sombre"] .orange-dashboard.charte-orange .orange-status-row.active .orange-status-arrow{color:var(--texte)}
[data-theme="sombre"] .orange-dashboard.charte-orange .data-table tbody tr,[data-theme="sombre"] .orange-dashboard.charte-orange .data-table tbody tr:nth-child(even){background:var(--card)}
[data-theme="sombre"] .orange-dashboard.charte-orange .data-table tbody tr:hover{background:#2A2A2A}
[data-theme="sombre"] .orange-dashboard.charte-orange .orange-ent-table tbody tr.orange-nous{background:#392A19}
[data-theme="sombre"] .orange-dashboard.charte-orange{background:#2D2D2D}
[data-theme="sombre"] .orange-dashboard .orange-ent-lien{color:var(--texte)}
[data-theme="sombre"] .orange-dashboard .orange-ent-lien:hover{background:#412D1C}
[data-theme="sombre"] .orange-dashboard .orange-ent-aide{color:var(--texte-doux)}
[data-theme="sombre"] .orange-detail{color:var(--texte)}
[data-theme="sombre"] .orange-detail .od-kpi{background:var(--card);border:1px solid var(--border)}
[data-theme="sombre"] .orange-detail .od-kpi span{color:var(--texte-doux)}
[data-theme="sombre"] .orange-detail .od-kpi b{color:var(--texte)}
[data-theme="sombre"] .orange-detail .od-kpi.on{background:#392A19}
[data-theme="sombre"] .orange-detail .od-onglet{color:var(--texte)}
[data-theme="sombre"] .orange-detail .od-onglet:hover{background:#2D2D2D}
[data-theme="sombre"] .orange-detail .od-barre input{background:var(--card);color:var(--texte)}
[data-theme="sombre"] .orange-detail .od-compte{color:var(--texte-doux)}
[data-theme="sombre"] .orange-detail .od-tableau{border:1px solid var(--border)}
[data-theme="sombre"] .orange-detail .od-table td{background:var(--card);border-bottom:1px solid var(--border);color:var(--texte)}
[data-theme="sombre"] .orange-detail .od-table tbody tr:hover td{background:#2A2A2A}
[data-theme="sombre"] .orange-detail .od-pill{background:#2D2D2D;border:1px solid var(--border);color:var(--texte)}
[data-theme="sombre"] .orange-detail .od-p-blocage{background:#412D1C}
[data-theme="sombre"] .orange-detail .od-p-echec{background:#41241C}
[data-theme="sombre"] .orange-detail .od-p-irrealisable{background:#363636}
[data-theme="sombre"] .orange-detail .od-p-termine{background:#1B402E}
[data-theme="sombre"] .orange-detail .od-p-cours{background:#1B333E}
[data-theme="sombre"] .orange-detail .od-pied button{background:var(--card);color:var(--texte)}
[data-theme="sombre"] .orange-detail .od-rapport{border:1px solid var(--border)}
[data-theme="sombre"] .orange-detail .od-sous{color:var(--texte-doux)}
[data-theme="sombre"] .orange-detail .od-telecharger:disabled{background:#363636;color:var(--texte-doux)}
[data-theme="sombre"] .orange-detail .od-note{color:var(--texte-doux)}
[data-theme="sombre"] .orange-detail .od-vide{color:var(--texte-doux)}
[data-theme="sombre"] .orange-detail .od-p-debloque{background:#463F1E}
[data-theme="sombre"] .orange-detail .od-barre select{background:var(--card);color:var(--texte)}
[data-theme="sombre"] .orange-detail .od-table td.od-masque{color:var(--texte-doux)}
[data-theme="sombre"] .orange-detail .od-table .od-gel2,[data-theme="sombre"] .orange-detail .od-table td.od-nd{border-right:2px solid var(--border)}
[data-theme="sombre"] .orange-detail .od-table tbody tr:hover td.od-id,[data-theme="sombre"] .orange-detail .od-table tbody tr:hover td.od-nd{background:#2A2A2A}
[data-theme="sombre"] body.role-orange #logout-side:hover{background:var(--card) !important;color:var(--texte) !important}
[data-theme="sombre"] .ter-tab{background:var(--card)}
[data-theme="sombre"] .ter-lecture{background:#3E311B;border:1px solid var(--border);color:#E8C37D}
[data-theme="sombre"] .tel-ligne{background:#1C262F}
[data-theme="sombre"] .tel-wa{background:var(--card);color:#83E2AA}
[data-theme="sombre"] .ter-item2{background:var(--card)}
[data-theme="sombre"] .orange-prod-note{color:var(--texte-doux)}
[data-theme="sombre"] .orange-dashboard .orange-hors{color:var(--texte-doux)}
[data-theme="sombre"] .res-onglet{background:var(--card);color:var(--texte)}
[data-theme="sombre"] .res-sel{color:var(--texte)}
[data-theme="sombre"] .res-refus{color:#E89A7D}
[data-theme="sombre"] .res-sans-nd{color:#E89A7D}
[data-theme="sombre"] .pf-repart{color:#E89A7D}
[data-theme="sombre"] .dfa-qr svg{background:var(--card)}
[data-theme="sombre"] .ter-mat-ligne select.ter-mat-d{background:var(--card)}
[data-theme="sombre"] #stk-impression h1{color:#7DB1E8}
[data-theme="sombre"] #stk-impression .imp-titre span{color:var(--texte)}
[data-theme="sombre"] #stk-impression h2{color:#89B4DC}
[data-theme="sombre"] #stk-impression .imp-infos th{background:#192A3B}
[data-theme="sombre"] #stk-impression .imp-table td{border:1px solid var(--border)}
[data-theme="sombre"] #stk-impression .imp-petit{color:var(--texte-doux)}
[data-theme="sombre"] #stk-impression .imp-note{color:var(--texte)}
[data-theme="sombre"] #stk-impression .imp-signatures i{color:var(--texte-doux)}
[data-theme="sombre"] #stk-impression .imp-pied{color:var(--texte-doux);border-top:1px solid var(--border)}
[data-theme="sombre"] .ter-cond{background:var(--orange-fond,#392D19)}
[data-theme="sombre"] .stk-barre{background:var(--fond,#182638)}
[data-theme="sombre"] .card-head .stk-imprimer{background:var(--card)}
[data-theme="sombre"] .card-head .stk-imprimer:hover{background:#19283B}
[data-theme="sombre"] .stk-barre button.stk-b2{background:var(--card)}
[data-theme="sombre"] .stk-barre button.stk-b2:hover{background:#19283B}
[data-theme="sombre"] .stk-barre button.stk-b3{background:var(--card)}
[data-theme="sombre"] .stk-barre button.stk-b-alerte{background:var(--card)}
[data-theme="sombre"] .stk-barre button.stk-b-alerte:hover{background:var(--rouge-fond,#3B1D19)}
[data-theme="sombre"] .stk-table-alertes tr.stk-ligne-rupture td{background:var(--rouge-fond,#3B1D19)}

/* --- 3 · Sombre : pour la nuit et les salles peu éclairées --------- */
[data-theme="sombre"]{
  --menu-fond:#12161C; --menu-texte:#98A6B5; --menu-actif:#F5B41E;
  --menu-actif-t:#12161C; --menu-titre:#F5B41E;
  --menu-filet:rgba(255,255,255,.10); --menu-survol:rgba(255,255,255,.07);
  --fond:#1A2029; --card:#232B36; --border:#333D4A; --border-fort:#44505F;
  --texte:#E4EAF0; --texte-doux:#94A3B4;
  --bleu:#4E9BE0; --accent:#4E9BE0; --bleu-clair:#1E2B3A; --bleu-bord:#2E4459;
  --bleu-fonce:#7BB6EA;
  --ardoise:#12161C; --ardoise-2:#232B36;
  /* Fonds de statut assombris : les pastilles claires éblouissaient. */
  --vert-clair:#1D2B1E; --orange-fond:#2E2415; --rouge-fond:#2E1A18;
  --vert-texte:#8FC44A; --orange:#E8A33D; --rouge:#E8635A; --violet:#A896D8;
  --vert-bord:#3B5426;
}
[data-theme="sombre"] body{ background:var(--fond); color:var(--texte) }
[data-theme="sombre"] input,[data-theme="sombre"] select,[data-theme="sombre"] textarea{
  background:#1A2029; color:var(--texte); border-color:var(--border);
}
[data-theme="sombre"] .modale{ background:var(--card); color:var(--texte) }
[data-theme="sombre"] .opt{ background:var(--card) }
[data-theme="sombre"] .data-table thead th{ background:#2B333F; color:var(--texte) }
[data-theme="sombre"] .marque, [data-theme="sombre"] .brand-logo{ background:#fff }

/* --- 4 · Clair : menu blanc, lisible en plein soleil --------------- */
[data-theme="clair"]{
  --menu-fond:#FFFFFF; --menu-texte:#5A6B7C; --menu-actif:#EAF2FB;
  --menu-actif-t:#12559B; --menu-titre:#12559B;
  --menu-filet:#E4EAF0; --menu-survol:#F2F6FA; --menu-bordure:#12559B;
  --fond:#F7F9FB; --card:#FFFFFF; --border:#E4EAF0;
}
/* Le menu clair a besoin d'une séparation nette avec la zone de travail. */
[data-theme="clair"] .sidebar{ border-right:1px solid #E4EAF0 }
[data-theme="clair"] .brand-logo{ background:transparent; padding:0 }

/* --- 5 · Terre : ocre et brun ------------------------------------- */
[data-theme="terre"]{
  --menu-fond:#3A2E24; --menu-texte:#D4C4B0; --menu-actif:#E09A3E;
  --menu-actif-t:#2A1F16; --menu-titre:#E09A3E;
  --fond:#FAF7F3; --card:#FFFFFF; --border:#E8DFD4; --border-fort:#D5C7B6;
  --texte:#2A2018; --texte-doux:#6B5C4C;
  --bleu:#B5763A; --accent:#B5763A; --bleu-clair:#FBF2E8; --bleu-bord:#E3C9A8;
  --ardoise:#3A2E24; --ardoise-2:#4E3E30;
}

/* --- 6 · Forêt : rappel de la charte NOVACOM d'origine ------------- */
[data-theme="foret"]{
  --menu-fond:#1C3227; --menu-texte:#B4C9BC; --menu-actif:#92B92C;
  --menu-actif-t:#14261C; --menu-titre:#92B92C;
  --fond:#F5F8F5; --card:#FFFFFF; --border:#DFE8E1; --border-fort:#C6D5C9;
  --texte:#1C3227; --texte-doux:#5A7062;
  --bleu:#4E7A3E; --accent:#4E7A3E; --bleu-clair:#EFF5EC; --bleu-bord:#C3DBB4;
  --ardoise:#1C3227; --ardoise-2:#2A4636;
}

/* --- Le menu lit les variables, plus des couleurs figées ---------- */
.sidebar{ background:var(--menu-fond) !important }
.sidebar-footer{ background:var(--menu-fond); border-top:1px solid var(--menu-filet);
  color:var(--menu-texte) }
nav .nav-item:not(.active){ color:var(--menu-texte) }
nav .nav-item:hover:not(.active){ background:var(--menu-survol);
  border-left-color:color-mix(in srgb, var(--menu-actif) 60%, transparent) }
nav .nav-item.active, .sidebar .nav-item.active{
  background:var(--menu-actif) !important;
  color:var(--menu-actif-t) !important;
  border-left:4px solid var(--menu-bordure) !important;
}
nav .nav-item.active span{ color:var(--menu-actif-t) !important }

/* Titres de section — variante retenue : couleur d'accent et trait
   de séparation, sans bandeau ni filet latéral. */
.nav-title{
  color:var(--menu-titre) !important;
  font-size:10px; font-weight:800; letter-spacing:.09em; text-transform:uppercase;
  margin:15px 13px 6px; padding-top:12px;
  border-top:1px solid var(--menu-filet);
}
.nav-title:first-of-type{ border-top:0; padding-top:2px; margin-top:6px }

/* --- Sélecteur de thème ------------------------------------------- */
.themes{ display:grid; gap:11px; grid-template-columns:repeat(auto-fit,minmax(168px,1fr)) }
.theme-c{
  border:2px solid var(--border); border-radius:13px; padding:9px; cursor:pointer;
  background:var(--card); text-align:left; font-family:inherit; display:block;
  transition:border-color .12s, box-shadow .12s;
}
.theme-c:hover{ border-color:var(--bleu) }
.theme-c.on{ border-color:var(--bleu); box-shadow:0 0 0 3px color-mix(in srgb,var(--bleu) 18%,transparent) }
.theme-c b{ display:block; font-size:13.5px; margin-top:8px; color:var(--texte) }
.theme-c span:last-child{ font-size:11.5px; color:var(--texte-doux); line-height:1.35; display:block }

/* Aperçu miniature : un menu et deux lignes de contenu, aux couleurs
   du thème. Il suffit à reconnaître l'ambiance sans l'appliquer. */
.theme-ap{ display:flex; height:56px; border-radius:8px; overflow:hidden;
  border:1px solid var(--border) }
.theme-menu{ width:34%; background:var(--menu-fond); flex:0 0 34%;
  border-right:1px solid rgba(0,0,0,.08) }
.theme-corps{ flex:1; background:var(--fond); padding:8px 7px; display:grid; gap:6px;
  align-content:start }
.theme-l{ height:7px; border-radius:4px; background:var(--card);
  border:1px solid var(--border); display:block }
.theme-l.court{ width:62% }

/* --- Thème sombre : contraste des zones qui gardaient un fond clair
   Ces éléments portaient une couleur figée dans le CSS de base ; sans
   ces reprises, le texte restait gris sur fond foncé et devenait
   difficile à lire. */
[data-theme="sombre"]{
  --ardoise:#E4EAF0;          /* utilisé comme couleur de TEXTE de titre */
}
[data-theme="sombre"] .card,
[data-theme="sombre"] .topbar,
[data-theme="sombre"] .table-wrap,
[data-theme="sombre"] .modale-corps,
[data-theme="sombre"] .modale-pied{ background:var(--card); color:var(--texte) }
[data-theme="sombre"] .data-table td{ color:var(--texte) }
[data-theme="sombre"] .data-table tbody tr:nth-child(even){ background:#1F2731 }
[data-theme="sombre"] .data-table tbody tr:hover{ background:#2A3340 }
[data-theme="sombre"] h1,[data-theme="sombre"] h2,[data-theme="sombre"] h3,
[data-theme="sombre"] .view-head h2,[data-theme="sombre"] .topbar b{ color:var(--texte) }
[data-theme="sombre"] .sub,[data-theme="sombre"] .view-head .sub{ color:var(--texte-doux) }
[data-theme="sombre"] button.ghost{ background:#232B36; color:var(--texte);
  border-color:var(--border) }
[data-theme="sombre"] button.ghost:hover{ background:#2A3340 }
[data-theme="sombre"] .search,[data-theme="sombre"] .metric-mini .mini{ background:#1F2731;
  color:var(--texte); border-color:var(--border) }
[data-theme="sombre"] .empty{ color:var(--texte-doux) }
[data-theme="sombre"] .sav-kpi{ background:var(--card); border-color:var(--border) }
[data-theme="sombre"] .sav-kpi b{ color:var(--texte) }
[data-theme="sombre"] .opt-t b{ color:var(--texte) }
[data-theme="sombre"] .enc.info{ background:#1E2B3A; color:#7BB6EA }

/* Thème clair : le menu blanc a besoin que le logo ne soit pas
   posé sur une pastille blanche invisible. */
[data-theme="clair"] .nav-title{ border-top-color:#E4EAF0 }

/* --- Panneaux repliés de l'écran Affectations ---------------------
   Avec 53 techniciens, la répartition et la charge occupaient tout
   l'écran et repoussaient la liste des dossiers hors de vue. */
.aff-replis{ padding:0; margin-bottom:14px; overflow:hidden }
.repli{ border-bottom:1px solid var(--border) }
.repli:last-child{ border-bottom:0 }
.repli > summary{
  list-style:none; cursor:pointer; padding:11px 15px;
  display:flex; gap:9px; align-items:baseline; flex-wrap:wrap;
  user-select:none;
}
.repli > summary::-webkit-details-marker{ display:none }
.repli > summary::before{
  content:"▸"; font-size:11px; color:var(--texte-doux); margin-right:2px;
  transition:transform .15s; display:inline-block;
}
.repli[open] > summary::before{ transform:rotate(90deg) }
.repli > summary:hover{ background:var(--fond) }
.repli > summary b{ font-size:13.5px }
.repli-corps{ padding:0 15px 14px }

/* Grille de techniciens : trois colonnes, hauteur bornée. */
.grille-techs{
  display:grid; gap:4px 12px; max-height:340px; overflow:auto;
  grid-template-columns:repeat(auto-fill,minmax(290px,1fr));
  border:1px solid var(--border); border-radius:9px; padding:8px;
}
/* Texte COMPLET : le nom se replie sur deux lignes au lieu d'être
   coupé par « … », et l'entreprise et les plaques s'affichent sous
   le nom — on distingue ainsi deux homonymes de sociétés différentes. */
.tech-case{
  display:flex; gap:9px; align-items:flex-start; font-size:13px; line-height:1.3;
  padding:6px 8px; border-radius:6px; cursor:pointer; min-width:0;
}
.tech-case input{ margin-top:2px; flex:0 0 auto }
.tech-case:hover{ background:var(--fond) }
.tech-case:has(input:checked){ background:color-mix(in srgb,var(--bleu,#1F4E79) 9%,#fff) }
.tech-case .tc-txt{ display:flex; flex-direction:column; min-width:0 }
.tech-case .tc-nom{ font-weight:600; overflow-wrap:anywhere }
.tech-case .tc-ent{ font-style:normal; font-size:11.5px; color:var(--texte-doux); overflow-wrap:anywhere }
.tech-case .tc-pl{ font-size:11px; color:var(--texte-doux); overflow-wrap:anywhere }
@media(max-width:640px){
  .grille-techs{ grid-template-columns:1fr; max-height:300px }
}

/* --- Boutons de SORTIE : déconnexion et fermeture ------------------
   Rouge et texte blanc. Ils quittent l'écran ou la session, ce qui
   les distingue d'« Annuler », qui reste neutre : annuler renonce à
   une saisie en cours, fermer quitte. */
.bouton-sortie,
#logout-btn, #logout-side,
#ter-fermer, #ter-scan-stop, #fiche-fermer, #sv-annuler, #rt-ok{
  background:var(--rouge) !important;
  color:#FFFFFF !important;
  border:1px solid var(--rouge) !important;
  font-weight:700;
}
.bouton-sortie:hover,
#logout-btn:hover, #logout-side:hover,
#ter-fermer:hover, #ter-scan-stop:hover, #fiche-fermer:hover,
#sv-annuler:hover, #rt-ok:hover{ filter:brightness(1.1) }

/* La croix des fenêtres : même code couleur, en plus discret pour ne
   pas dominer un bandeau déjà coloré. */
.modale-x{
  background:rgba(255,255,255,.14);
  border:1px solid rgba(255,255,255,.45);
  color:#FFFFFF;
}
.modale-x:hover{ background:var(--rouge); border-color:var(--rouge) }

/* Le menu latéral : la déconnexion y est en pleine largeur. */
#logout-side{ width:100%; padding:9px; border-radius:8px; cursor:pointer }

/* --- Fil d'histoire d'un dossier ---------------------------------- */
.fil{ position:relative; padding-left:16px; max-height:320px; overflow:auto }
.fil::before{
  content:""; position:absolute; left:5px; top:6px; bottom:6px;
  width:2px; background:var(--border);
}
.fil-e{ display:flex; gap:11px; padding:7px 0; position:relative }
.fil-p{
  position:absolute; left:-15px; top:12px; width:10px; height:10px;
  border-radius:50%; background:var(--bleu); border:2px solid var(--card);
}
.fil-e:first-child .fil-p{ background:var(--vert-texte) }
.fil-e b{ font-size:13px }

/* --- Point du matin ------------------------------------------------ */
.alertes{ display:grid; gap:9px; grid-template-columns:repeat(auto-fit,minmax(158px,1fr)) }
.alerte{
  border:1.5px solid var(--border); border-left:4px solid var(--c);
  border-radius:11px; padding:9px 11px; background:var(--card);
  text-align:left; cursor:pointer; font-family:inherit; display:block;
  transition:border-color .12s, background .12s;
}
.alerte:hover{ background:var(--fond) }
.alerte.on{ border-color:var(--c); background:var(--fond) }
.alerte b{ display:block; font-size:22px; line-height:1.1; color:var(--c) }
.alerte span{ display:block; font-size:11.5px; color:var(--texte-doux); margin-top:2px }

/* --- Bandeau d'état réseau ----------------------------------------
   Fixe en bas d'écran : sur un téléphone, le haut est souvent masqué
   par le clavier ou la barre du navigateur. */
.reseau{
  position:fixed; left:0; right:0; bottom:0; z-index:500;
  padding:9px 14px; font-size:13px; font-weight:700; text-align:center;
  display:flex; gap:10px; align-items:center; justify-content:center; flex-wrap:wrap;
  box-shadow:0 -2px 12px rgba(10,20,32,.18);
}
.reseau span{ font-weight:400; font-size:12px; opacity:.9 }
.reseau button{
  background:rgba(255,255,255,.22); border:1px solid rgba(255,255,255,.5);
  color:#fff; padding:4px 12px; border-radius:7px; font-size:12px;
  font-weight:700; cursor:pointer; font-family:inherit;
}
.reseau.hors{ background:#C0392B; color:#fff }
.reseau.attente{ background:#E8A33D; color:#3A2A0A }
.reseau.attente button{ background:rgba(0,0,0,.14); border-color:rgba(0,0,0,.25); color:#3A2A0A }
/* Le bandeau ne doit RIEN masquer. Il recouvrait le bouton
   « Enregistrer mon retour » de l'espace technicien, rendant l'envoi
   impossible au moment précis où il sert le plus. On réserve donc sa
   hauteur en bas de page plutôt que de le poser par-dessus. */
body:has(#bandeau-reseau){ padding-bottom:64px }
body:has(#bandeau-reseau) #ter-panneau{ padding-bottom:64px }
body:has(#bandeau-reseau) .modale-fond{ padding-bottom:76px }

/* --- Espace technicien : bandeau d'accueil -------------------------
   Le technicien ouvre l'application plusieurs fois par jour. Un salut
   nommé vaut mieux qu'un titre administratif, et l'illustration donne
   à l'écran l'allure d'une application plutôt que d'un formulaire. */
.ter-hero{
  background:linear-gradient(135deg, var(--menu-fond) 0%, #0A4F8F 100%);
  border-radius:18px; padding:20px 22px; margin-bottom:14px;
  display:flex; align-items:center; gap:14px; overflow:hidden; position:relative;
}
.ter-hero-tx{ flex:1; min-width:0 }
.ter-hero h2{ color:#fff; font-size:21px; margin:0 0 6px; line-height:1.2 }
.ter-hero p{ color:rgba(255,255,255,.82); font-size:13px; margin:0; line-height:1.45 }
.ter-hero-img{ width:132px; height:98px; flex:0 0 132px }
@media(max-width:560px){
  .ter-hero{ padding:17px 18px }
  .ter-hero h2{ font-size:18px }
  /* L'illustration s'efface : la place va aux missions. */
  .ter-hero-img{ display:none }
}

/* Cartes-compteurs cliquables, avec chevron. */
.ter-bloc{ position:relative; cursor:pointer; font-family:inherit; text-align:left;
  border:1.5px solid transparent; transition:border-color .12s, transform .08s }
.ter-bloc:active{ transform:scale(.985) }
.ter-bloc .fl{
  position:absolute; right:13px; bottom:13px; font-size:19px; font-weight:800;
  opacity:.45; line-height:1;
}
.ter-bloc.on{ border-color:currentColor }
.ter-bloc.b-faire.on{ border-color:var(--bleu) }
.ter-bloc.b-bloq.on{ border-color:var(--rouge) }
.ter-bloc.b-fait.on{ border-color:var(--vert-texte) }
@media(max-width:560px){
  .ter-blocs{ grid-template-columns:1fr; gap:9px }
  .ter-bloc{ padding:13px 15px }
}

/* --- Actions rapides du technicien --------------------------------
   Trois colonnes même sur téléphone : ce sont des actions
   occasionnelles, elles ne doivent pas occuper la moitié de l'écran. */
.ter-rapides-t{
  font-size:11.5px; text-transform:uppercase; letter-spacing:.05em;
  color:var(--texte-doux); font-weight:800; margin-bottom:9px;
}
.ter-rapides{ display:grid; grid-template-columns:repeat(3,1fr); gap:9px }
.ter-rapide{
  border:1.5px solid var(--border); border-radius:12px; background:var(--card);
  padding:12px 8px; text-align:center; cursor:pointer; font-family:inherit;
  display:flex; flex-direction:column; align-items:center; gap:3px;
  transition:border-color .12s, transform .08s;
}
.ter-rapide:hover{ border-color:var(--bleu) }
.ter-rapide:active{ transform:scale(.97) }
.ter-rapide .ic{ font-size:19px; line-height:1.1 }
.ter-rapide b{ font-size:12.5px; color:var(--texte) }
.ter-rapide i{ font-style:normal; font-size:10.5px; color:var(--texte-doux); line-height:1.25 }
@media(max-width:400px){
  .ter-rapide{ padding:10px 5px }
  .ter-rapide i{ display:none }   /* écran très étroit : le titre suffit */
}

/* Rappel d'installation : une ligne discrète, refermable. */
.rappel-install{
  display:flex; gap:9px; align-items:center;
  background:var(--bleu-clair); border:1px solid var(--bleu-bord);
  border-radius:10px; padding:8px 11px; font-size:12.5px; color:var(--bleu);
  margin-bottom:12px; line-height:1.4;
}
.rappel-install span{ flex:1; min-width:0 }
.rappel-install button{
  background:transparent; border:0; color:var(--bleu); cursor:pointer;
  font-size:15px; padding:0 3px; opacity:.6; flex:0 0 auto;
}
.rappel-install button:hover{ opacity:1 }

/* Icônes vectorielles des actions rapides. */
.ter-rapide .ic svg{ width:20px; height:20px; display:block; color:var(--bleu) }
.ter-rapide .ic{ display:grid; place-items:center; height:22px }
#ter-probleme .ic svg{ color:var(--rouge) }

/* --- Retours en attente ------------------------------------------- */
.relances{ display:grid; gap:11px }
.relance-t{ padding:14px 15px }
.relance-tete{ display:flex; gap:11px; align-items:center; margin-bottom:10px }
.relance-tete b{ font-size:14px }
.relance-nds{ display:flex; gap:6px; flex-wrap:wrap; align-items:center }

/* Rappel dans l'espace technicien : orange, pas rouge — c'est une
   invitation, pas une alerte. Le rouge est réservé aux blocages. */
.ter-rappel{
  background:linear-gradient(135deg,#8A5510,#E8A33D);
  color:#fff; border-radius:14px; padding:14px 16px; margin-bottom:12px;
  display:flex; gap:13px; align-items:center; flex-wrap:wrap;
}
.ter-rappel-tx{ flex:1; min-width:170px }
.ter-rappel b{ display:block; font-size:14.5px; line-height:1.3 }
.ter-rappel span{ display:block; font-size:12px; opacity:.9; margin-top:3px; line-height:1.4 }
.ter-rappel button{ background:#fff !important; color:#8A5510 !important;
  border:0 !important; flex:0 0 auto }

/* --- Point du matin : barre compacte -------------------------------
   Il occupait un quart de l'écran et repoussait les graphes, aussi
   importants au quotidien. Il tient désormais sur une ligne. */
.pm-barre{
  background:var(--card); border:1px solid var(--border);
  border-left:4px solid var(--c); border-radius:12px;
  padding:10px 13px; margin-bottom:12px;
}
/* Titre, pastilles et boutons sur UNE ligne. Les pastilles occupent
   la place disponible, les boutons sont poussés à droite. */
.pm-haut{ display:flex; gap:11px; align-items:center; flex-wrap:wrap }
.pm-titre{ font-size:13px; color:var(--texte); flex:0 0 auto }
.pm-puces{ display:flex; gap:7px; flex-wrap:wrap; flex:1; min-width:0; align-items:center }
.pm-puce{
  display:inline-flex; gap:7px; align-items:center;
  background:var(--c); border:2px solid transparent; border-radius:20px;
  padding:5px 13px; cursor:pointer; font-family:inherit; color:#FFFFFF;
  transition:filter .12s, border-color .12s;
}
/* Icône vectorielle : elle prend la couleur du texte, alors qu'un
   émoji garderait la sienne et jurerait sur un fond plein. */
.pm-puce svg{ width:13px; height:13px; flex:0 0 13px; display:block }
.pm-puce:hover{ filter:brightness(1.12) }
/* Sélection : un liseré clair, le fond étant déjà plein. */
.pm-puce.on{ border-color:#FFFFFF; box-shadow:0 0 0 2px var(--c) }
.pm-puce b{ font-size:14px; font-weight:800 }
.pm-puce span{ font-size:11.5px; opacity:.88 }
.pm-actions{
  display:flex; gap:8px; align-items:center; flex:0 0 auto; margin-left:auto;
}
.pm-actions button{ padding:6px 14px; font-size:12px; white-space:nowrap }

/* Sous 1100 px, les boutons repassent dessous : mieux vaut une
   seconde ligne que des pastilles écrasées. */
@media(max-width:1100px){
  .pm-actions{ margin-left:0; width:100%; padding-top:9px;
    border-top:1px solid var(--border) }
}

@media(max-width:820px){
  /* Sur écran étroit, le titre disparaît : la date est déjà en haut
     de page, et la place doit aller aux chiffres. */
  .pm-titre{ display:none }
  .pm-actions button{ flex:1 }
}

/* ---------------------------------------------------------------
   Tableau des motifs des diapositives « Vue globale ».
   Couleurs relevées au pixel sur la présentation du comité :
   en-tête marron #833C0D, lignes beiges alternées.
   --------------------------------------------------------------- */
.pres-motifs{width:100%;border-collapse:collapse;font-size:11.5px}
.pres-motifs th{background:#833C0D;color:#fff;font-weight:700;padding:5px 8px;text-align:center}
.pres-motifs th:first-child{text-align:left}
.pres-motifs td{padding:4px 8px;text-align:center;color:#1A1A1A}
.pres-motifs td:first-child{text-align:left}
.pres-motifs tbody tr:nth-child(odd) td{background:#FBE5D6}
.pres-motifs tbody tr:nth-child(even) td{background:#F8CBAD}
.pres-motifs .pres-reste td{color:#5A4A40;font-style:italic}
.pres-motifs tfoot td{background:#833C0D;color:#fff;font-weight:700;padding:5px 8px}

/* ---------------------------------------------------------------
   SUPERVISEUR : il consulte et il extrait, il ne modifie rien.
   Le serveur refuse ses écritures en 403 ; on retire aussi les
   commandes de l'écran, pour ne pas lui faire remplir un formulaire
   qui sera rejeté à l'envoi.
   Les boutons d'export, eux, restent — c'est son travail.
   --------------------------------------------------------------- */
body.lecture-seule #new-action,
body.lecture-seule .btn-suppr,
body.lecture-seule .action-modifier,
body.lecture-seule .btn-statut,
body.lecture-seule #tech-ajouter,
body.lecture-seule label:has(#tech-fichier),
body.lecture-seule .tech-modif,
body.lecture-seule .tech-suppr,
body.lecture-seule #ti-go,
body.lecture-seule #sav-coller,
body.lecture-seule #sav-nouveau,
body.lecture-seule #sav-import,
body.lecture-seule .sav-sel,
body.lecture-seule .sav-tous,
body.lecture-seule #sav-aff-go,
body.lecture-seule #sav-aff-wa,
body.lecture-seule #sv-prise,
body.lecture-seule #sv-clore,
body.lecture-seule #sv-rouvrir,
body.lecture-seule #sv-ok,
body.lecture-seule #tr-add,
body.lecture-seule #bc-add,
body.lecture-seule .bc-sup,
body.lecture-seule #mac-file,
body.lecture-seule #mac-btn,
body.lecture-seule #mac-ok,
body.lecture-seule .att-sup,
body.lecture-seule #att-enregistrer,
body.lecture-seule #rap-config,
body.lecture-seule #rf-add,
body.lecture-seule #rf-ok,
body.lecture-seule .rf-sup,
body.lecture-seule .bande-delai .bd-btn { display:none !important; }


/* ---------------------------------------------------------------
   FICHE D'UN DOSSIER — champs alignés en groupes.
   Un libellé fixe à gauche, la valeur à droite : les valeurs
   tombent sur la même verticale d'une ligne à l'autre.
   --------------------------------------------------------------- */
.fiche-groupe{margin-top:14px}
.fiche-groupe:first-of-type{margin-top:4px}
.fiche-groupe-titre{font-size:11.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  color:var(--bleu,#1F4E79);padding-bottom:5px;border-bottom:2px solid var(--border,#DDE3EA)}
.fiche-grille{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 34px;margin:0}
.fiche-champ{display:grid;grid-template-columns:132px minmax(0,1fr);align-items:baseline;gap:10px;
  padding:8px 0;border-bottom:1px solid var(--border,#E6EBF0)}
.fiche-champ dt{font-size:12.5px;color:#5F6F80;font-weight:500}
.fiche-champ dd{margin:0;font-size:14px;font-weight:600;color:#12283C;overflow-wrap:anywhere}
.fiche-champ dd.vide{color:#A7B1BC;font-weight:400}
@media (max-width:640px){
  .fiche-grille{grid-template-columns:1fr}
  .fiche-champ{grid-template-columns:110px minmax(0,1fr)}
}


/* ---------------------------------------------------------------
   DIAPOSITIVES COPERF — mise en page du modèle d'Orange
   --------------------------------------------------------------- */
.diapo.coperf{ background:#fff; border-radius:6px }
.diapo.coperf .cp-tete{ display:flex; align-items:center; gap:14px; padding:8px 22px 0 22px; min-height:15% }
.cp-titre{ flex:0 0 66%; font-weight:800; font-size:clamp(15px,2.6vw,34px); line-height:1.05;
  font-family:Arial,Helvetica,sans-serif }
.cp-titre .o{ color:#FF6600 } .cp-titre .g{ color:#7F7F7F } .cp-titre .g2{ color:#7F7F7F; font-size:.72em }
.cp-sem{ font-weight:800; font-size:clamp(14px,2.1vw,26px); color:#000 }
.cp-logo{ margin-left:auto; height:clamp(28px,4.2vw,54px) }
.diapo.coperf .cp-corps{ flex:1; min-height:0; padding:6px 22px 4px; container-type:size; display:flex }
.cp-flex{ display:flex; gap:14px; flex:1; min-height:0 }
.cp-g{ flex:1; min-width:0; border:1px solid #000; position:relative; display:flex; flex-direction:column }
.cp-g.plein{ flex:1 }
.cp-g h4{ margin:6px 0 0; text-align:center; font-size:clamp(11px,1.5vw,18px); color:#404040 }
.cp-g .diapo-graphe{ flex:1; min-height:0 }
.cp-g .pres-bandeau{ margin:6px 8px 0; background:#FFF3EB; color:#7A3300 }
.cp-bar{ flex:0 0 2.6%; background:#FF6600; align-self:stretch }
.cp-cote{ flex:0 0 21%; min-width:0; display:flex; flex-direction:column; min-height:0 }
.cp-cote.large{ flex:0 0 31% }
.cp-age{ flex:0 0 33%; display:flex; flex-direction:column; gap:8px; min-height:0 }
.cp-g.milieu{ align-self:center; flex:0 0 33%; height:58% }
.cp-tab-titre{ border:1px solid #000; text-align:center; font-weight:700; font-size:11px; padding:3px }
/* Le tableau occupe TOUTE la hauteur disponible et répartit ses lignes :
   la taille du texte suit le nombre de lignes (--n), donc tout tient. */
.cp-tab{ width:100%; height:100%; border-collapse:collapse; table-layout:auto;
  font-family:"Arial Narrow",Arial,sans-serif;
  font-size:min(12px, calc(72cqh / var(--n))) }
.cp-tab th{ background:#843C0C; color:#fff; padding:0 4px; text-align:center; font-weight:700 }
.cp-tab th:first-child, .cp-tab td:first-child{ text-align:left }
.cp-tab td{ padding:0 4px; line-height:1.05; color:#000; background:#FBE4D5; border:1px solid #fff }
.cp-tab tbody tr:nth-child(even) td{ background:#F8CBAD }
.cp-tab.noir td, .cp-tab.noir th{ border:1px solid #000 }
.cp-tab.noir tbody tr:nth-child(even) td{ background:#FBE4D5 }
.cp-tab td.c{ text-align:center }
.cp-tab tfoot td{ background:#843C0C; color:#fff; font-weight:700 }
.diapo.coperf .cp-pied{ display:flex; justify-content:space-between; padding:4px 60px 6px 70px; font-size:11px;
  color:#ED7D31; border:none }
.diapo-couverture.coperf{ background:#fff; color:#000; position:relative; align-items:center; justify-content:center; text-align:center }
.diapo-couverture.coperf .cv-logo{ height:24%; margin-bottom:2% }
.diapo-couverture.coperf h1{ color:#FF6600; font-size:clamp(24px,4.6vw,58px); margin:0 }
.diapo-couverture.coperf h2{ color:#898989; font-size:clamp(14px,2.4vw,30px); margin:.6% 0 }
.diapo-couverture.coperf .cv-sem{ color:#000; font-weight:800; font-size:clamp(11px,1.5vw,18px); margin:.5% 0 }
.diapo-couverture.coperf .cv-orange{ position:absolute; left:6%; bottom:5%; height:16% }

/* Liste des dossiers : 21 colonnes du suivi Orange, défilement horizontal,
   texte sur une ligne, en-tête qui reste visible. */
.dossiers-large{ min-width:2400px }
.dossiers-large th, .dossiers-large td{ white-space:nowrap; font-size:12.5px }
.dossiers-large td:nth-child(12){ max-width:220px; overflow:hidden; text-overflow:ellipsis }
.dossiers-large td:nth-child(19){ max-width:260px; overflow:hidden; text-overflow:ellipsis }

/* Plaques : liste déroulante des techniciens de la plaque. */
.pq-techs summary{ cursor:pointer; font-weight:700; color:var(--bleu,#1F4E79); padding:3px 0 }
.pq-techs[open] summary{ margin-bottom:4px }
.pq-techs ul{ list-style:none; margin:0; padding:6px 10px; border:1px solid var(--border); border-radius:8px;
  background:var(--fond-doux,#F5F8FB); max-height:190px; overflow:auto }
.pq-techs li{ padding:4px 0; border-bottom:1px solid var(--border) }
.pq-techs li:last-child{ border-bottom:none }

/* Tableaux COPERF : la hauteur suit le texte (pas d'étirement quand il y a
   peu de lignes) ; la taille du texte, elle, s'ajuste au nombre de lignes
   pour que TOUS les motifs tiennent dans la diapositive. */
.cp-tab{ height:auto; align-self:flex-start }
.cp-tab td, .cp-tab th{ padding:.14em 4px }
.cp-cote{ overflow:hidden }

/* ---------------------------------------------------------------
   LISTE DES DOSSIERS — volets figés.
   · l'en-tête reste en haut pendant le défilement vertical ;
   · la case, « ID DOSSIER » et « ND » restent à gauche ;
   · « Détail » et la croix de suppression restent à droite.
   Les cellules figées ont un fond opaque : sans lui, le contenu qui
   défile passerait visiblement dessous.
   --------------------------------------------------------------- */
.dossiers-cadre{ max-height:calc(100vh - 290px); min-height:280px; overflow:auto }
.dossiers-large{ border-collapse:separate; border-spacing:0 }
.dossiers-large thead th{ position:sticky; top:0; z-index:4; background:#EEF2F6 }
.dossiers-large .gel-c0, .dossiers-large .gel-c1, .dossiers-large .gel-c2, .dossiers-large .gel-fin{
  position:sticky; background:#fff; z-index:2 }
.dossiers-large thead .gel-c0, .dossiers-large thead .gel-c1, .dossiers-large thead .gel-c2,
.dossiers-large thead .gel-fin{ z-index:6; background:#EEF2F6 }
.dossiers-large .gel-c0{ left:0; min-width:34px; width:34px }
.dossiers-large .gel-c1{ left:34px; min-width:96px; width:96px }
.dossiers-large .gel-c2{ left:130px; min-width:118px; width:118px; box-shadow:2px 0 0 var(--border,#DDE3EA) }
.dossiers-large .gel-fin{ right:0; min-width:112px; box-shadow:-2px 0 0 var(--border,#DDE3EA) }
.dossiers-large tbody tr:hover .gel-c0, .dossiers-large tbody tr:hover .gel-c1,
.dossiers-large tbody tr:hover .gel-c2, .dossiers-large tbody tr:hover .gel-fin{ background:#F5F8FB }

.cp-def{ font-size:10.5px; color:#7F7F7F; text-align:center; padding:2px 8px 4px }

/* --- Espace technicien sur téléphone : écran recadré ---------------
   La page empilait trois grands blocs, un rappel, puis jusqu'à 120
   cartes : plus de 14 000 px de haut, avec les actions rapides tout en
   bas. On resserre : compteurs sur une seule ligne, bandeaux plus bas,
   cartes compactes, et un défilement vertical explicitement autorisé. */
@media(max-width:600px){
  html, body{ touch-action:pan-y; overscroll-behavior-y:auto;
    -webkit-overflow-scrolling:touch }
  body.role-technicien .content{ padding:10px }
  .ter-hero{ padding:12px 14px; margin-bottom:10px }
  .ter-hero h2{ font-size:16px; margin-bottom:3px }
  .ter-hero p{ font-size:12px; line-height:1.35 }
  .ter-rappel{ padding:10px 12px; gap:8px; margin-bottom:10px }
  .ter-rappel b{ font-size:13px }
  .ter-rappel span{ display:none }
  .ter-rappel button{ padding:8px 12px; font-size:13px }
  /* Les trois compteurs tiennent sur UNE ligne : chiffre en gros,
     libellé court dessous, plus de flèche. */
  .ter-blocs{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:7px; margin-bottom:10px }
  .ter-bloc{ flex-direction:column; align-items:flex-start; gap:4px; padding:10px 10px }
  .ter-bloc .ic{ display:none }
  .ter-bloc .fl{ display:none }
  .ter-bloc .tx span{ font-size:10px; letter-spacing:0; line-height:1.15 }
  .ter-bloc .tx b{ font-size:22px }
  .ter-bloc .tx i{ display:none }
  /* Cartes de dossier compactes : n° et client en tête, le reste sur
     deux lignes courtes, un seul bouton pleine largeur. */
  .ter-item{ padding:10px 12px; margin-bottom:8px }
  .ter-item > div[data-l="Type"], .ter-item > div[data-l="Dernière action"]{ display:none }
  .ter-item > div{ padding:2px 0 }
  .ter-item > div:first-child{ padding:0 0 4px }
  .ter-item .ter-act{ margin-top:6px }
  .ter-item .ter-act button{ padding:9px !important }
  .ter-rapides-t{ margin-bottom:6px }
  #ter-panneau .card{ padding:12px }
}

/* --- Logo de la structure plus grand ------------------------------
   Il était réduit à une trentaine de pixels de haut (hauteur fixe de
   54 px moins le remplissage). On le laisse occuper le bandeau. */
.brand-logo{ height:76px; max-height:76px; padding:6px 10px; max-width:100% }
@media(max-width:1100px){ .brand-logo{ height:64px; max-height:64px; padding:5px 8px } }

/* =====================================================================
   PILOTAGE ORANGE — mise en page de supervision nationale
   ===================================================================== */
.orange-dashboard{color:#17324d}
.orange-dashboard .view-head h2{color:#17324d}
.orange-filters{background:#fff;border:1px solid #dbe4ec;box-shadow:0 2px 8px rgba(19,52,77,.04)}
.orange-filters label{color:#52687c}
.orange-filters input,.orange-filters select{border-color:#cbd8e3}
.orange-multi{position:relative;min-width:235px}
.orange-multi-btn{height:34px;width:100%;padding:0 10px;background:#fff;border:1px solid #cbd8e3;border-radius:8px;text-align:left;color:#17324d;font:inherit;cursor:pointer}
.orange-multi-menu{display:none;position:absolute;z-index:30;top:40px;left:0;right:0;max-height:240px;overflow:auto;background:#fff;border:1px solid #cbd8e3;border-radius:9px;box-shadow:0 12px 30px rgba(16,38,58,.16);padding:7px}
.orange-multi-menu.open{display:block}
.orange-multi-menu label{display:flex;flex-direction:row;gap:7px;align-items:center;padding:8px;border-radius:6px;font-size:11px;font-weight:600;color:#17324d;cursor:pointer}
.orange-multi-menu label:hover{background:#fff3e8}
.orange-multi-menu input[type="checkbox"]{
  width:16px !important;
  min-width:16px !important;
  max-width:16px !important;
  height:16px !important;
  min-height:16px !important;
  margin:0 !important;
  padding:0 !important;
  flex:0 0 16px !important;
  accent-color:#FF7900;
  border-radius:4px;
}
.orange-multi-menu label span{
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.orange-kpi{box-shadow:0 2px 7px rgba(19,52,77,.04)}
.orange-kpi.orange{border-top-color:#FF7900}.orange-kpi.blue{border-top-color:#1565A8}.orange-kpi.green{border-top-color:#2E8B57}.orange-kpi.purple{border-top-color:#64748B}.orange-kpi.gold{border-top-color:#FFB000}
.orange-kpi.red{border-top-color:#C62828}
.orange-kpi .ok-value{color:#17324d}
.orange-layout-main{display:grid;grid-template-columns:1.25fr .9fr;gap:14px;align-items:stretch}
.orange-card{box-shadow:0 2px 8px rgba(19,52,77,.035);border-color:#dbe4ec}
.orange-map-card{min-height:370px}
.orange-map{height:315px;position:relative;overflow:hidden;border-radius:10px;background:linear-gradient(180deg,#f7fafc,#eef3f7);border:1px solid #e0e8ef}
.orange-map-svg{position:absolute;inset:0;width:100%;height:100%}
.orange-burkina-path{fill:#fff3e8;stroke:none}
.orange-map-border{fill:none;stroke:#FF7900;stroke-width:3}
.orange-map-inner{position:absolute;inset:0}
.orange-map-title{position:absolute;left:50%;top:10px;transform:translateX(-50%);font-size:11px;font-weight:900;letter-spacing:.14em;color:#17324d;background:#fff;padding:5px 10px;border-radius:20px;box-shadow:0 2px 8px rgba(0,0,0,.08)}
.orange-map-city{position:absolute;border:3px solid #fff;border-radius:50%;background:#FF7900;color:#fff;box-shadow:0 2px 8px rgba(22,45,64,.25);display:flex;flex-direction:column;align-items:center;justify-content:center;cursor:pointer;padding:0;z-index:3;line-height:1.05}
.orange-map-city:hover{transform:scale(1.08);z-index:5}
.orange-map-city span{position:absolute;left:calc(50% + var(--label-x,0px));top:calc(50% + var(--label-y,25px));transform:translate(-50%,-50%);white-space:nowrap;background:#17324d;color:#fff;padding:4px 7px;border-radius:8px;font-size:9px;font-weight:800;box-shadow:0 3px 8px rgba(23,50,77,.16);pointer-events:none}
.orange-map-city b{font-size:9px}
.orange-map-legend{position:absolute;bottom:9px;left:10px;right:10px;display:flex;justify-content:space-between;gap:10px;font-size:9px;color:#52687c;background:#ffffffdd;border-radius:7px}
.orange-map-legend i{display:inline-block;width:8px;height:8px;border-radius:50%;background:#FF7900;margin-right:5px}
.orange-selected-info{font-size:10px;color:#52687c;background:#f6f9fb;padding:7px 9px;border-radius:7px;margin-bottom:8px}
.orange-scroll{max-height:300px;overflow:auto}
.orange-problem-card .card-head select{height:32px;border:1px solid #cbd8e3;border-radius:8px;padding:0 9px;background:#fff;color:#17324d}
.orange-problem-statuses{display:flex;gap:8px;flex-wrap:wrap;margin:10px 0}
.orange-status-card{border:1px solid #f0c7c7;background:#fff7f7;color:#8d2525;border-radius:8px;padding:8px 10px;cursor:pointer;display:flex;gap:10px;align-items:center;font:inherit}
.orange-status-card b{font-size:12px}.orange-status-card span{font-size:10px;font-weight:700}.orange-status-card.active{background:#C62828;color:#fff;border-color:#C62828}
.orange-detail-title{font-size:11px;font-weight:700;color:#17324d;padding:8px 0}
.orange-detail-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px}
.orange-motif-row{display:flex;justify-content:space-between;gap:10px;padding:8px 10px;background:#f7f9fb;border-radius:7px;font-size:10px}
.orange-motif-row b{color:#C62828}
.orange-tech-summary{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:8px}
.orange-collapsible{max-height:250px;overflow:hidden;transition:max-height .2s}.orange-collapsible.open{max-height:900px}
.orange-collapsible:not(.open) .orange-scroll{max-height:190px}
.orange-status{color:#52687c}.orange-dot{flex:0 0 8px}
@media(max-width:1200px){.orange-layout-main{grid-template-columns:1fr}.orange-map-card{min-height:340px}}
@media(max-width:700px){.orange-layout-main{grid-template-columns:1fr}.orange-multi{min-width:180px;width:100%}.orange-detail-grid{grid-template-columns:1fr}.orange-map{height:270px}}
.orange-map-inner{width:500px;height:330px;left:50%;right:auto;top:0;bottom:auto;transform:translateX(-50%)}
/* Ajustements Dashboard Orange — statuts, motifs et plaques */
.orange-problem-statuses{align-items:stretch}
.orange-status-card{position:relative;min-width:170px;justify-content:flex-start;flex-direction:column;align-items:flex-start;gap:4px;text-align:left;padding:10px 12px}
.orange-status-card span{font-size:11px;max-width:220px}
.orange-status-card b{font-size:16px}
.orange-status-card em{font-size:9px;font-style:normal;opacity:.72;margin-top:2px}
.orange-status-card.active em{opacity:1}
.orange-detail-count{float:right;color:#C62828;background:#fff1f1;border-radius:12px;padding:3px 7px;font-size:9px}
.orange-detail-grid{grid-template-columns:repeat(2,minmax(0,1fr));max-height:330px;overflow:auto;padding-right:2px}
.orange-motif-row{border:0;text-align:left;cursor:pointer;color:#17324d;width:100%}
.orange-motif-row:hover{background:#fff3e8;transform:translateY(-1px)}
.orange-motif-row strong{color:#C62828;white-space:nowrap}
.orange-motif-city{color:#52687c;font-size:9px}
.orange-plaque-summary{display:flex;gap:6px;flex-wrap:wrap;margin:4px 0 9px}
.orange-plaque-summary .pill{font-size:9px}
.orange-table .card-head select{height:32px;border:1px solid #cbd8e3;border-radius:8px;padding:0 9px;background:#fff;color:#17324d}
.orange-chart{height:270px}
@media(max-width:800px){.orange-detail-grid{grid-template-columns:1fr}.orange-status-card{min-width:140px}.orange-chart{height:240px}}

/* Orange V3 — finition graphique inspirée des dashboards modernes */
.orange-dashboard{--or:#FF7900;--navy:#17324D;--ink:#52687C;--line:#E7EDF3;background:#F7F9FB;padding-bottom:28px}
.orange-dashboard .view-head{margin-bottom:2px}
.orange-dashboard .view-head h2{font-size:25px;letter-spacing:-.02em}
.orange-dashboard .orange-filters{border-radius:14px;padding:10px 12px;gap:10px;box-shadow:0 6px 20px rgba(23,50,77,.05)}
.orange-dashboard .orange-card{border-radius:16px;background:#fff;border:1px solid var(--line);box-shadow:0 6px 22px rgba(23,50,77,.045);overflow:hidden}
.orange-dashboard .orange-card .card-head{padding:14px 16px 9px}
.orange-dashboard .orange-card .card-head h3{font-size:14px;letter-spacing:-.01em}
.orange-dashboard .orange-kpis{gap:12px}
.orange-dashboard .orange-kpi{border-radius:14px;border-top-width:4px;padding:13px 15px;min-height:92px}
.orange-dashboard .orange-kpi .ok-label{font-size:10px;font-weight:700;color:#718096}
.orange-dashboard .orange-kpi .ok-value{font-size:27px;letter-spacing:-.03em;margin-top:4px}
.orange-dashboard .orange-kpi .ok-sub{font-size:9px;color:#94A3B8;margin-top:4px}
.orange-dashboard .orange-chart{height:292px;padding:2px 10px 10px}
.orange-dashboard .orange-map-card{min-height:405px}
.orange-dashboard .orange-map{height:345px;border-radius:14px;border:0;background:linear-gradient(180deg,#f8fbfd,#eef4f8)}
.orange-dashboard .orange-burkina-path{fill:#FFF1E4}.orange-dashboard .orange-map-border{stroke:#D4DEE7;stroke-width:2.2;fill:none}
.orange-dashboard .orange-burkina-path{fill:#FFF2E5}
.orange-dashboard .orange-map-city{background:#FF7900;border-width:3px;box-shadow:0 4px 14px rgba(255,121,0,.28);z-index:4}.orange-dashboard .orange-map-city b{font-size:10px;font-weight:900}.orange-dashboard .orange-map-city span{z-index:6}
.orange-dashboard .orange-map-city span{background:#17324D;border-radius:8px;padding:4px 7px;font-size:9px;box-shadow:0 3px 8px rgba(23,50,77,.16)}
.orange-dashboard .orange-map-city b{font-size:10px}
.orange-dashboard .orange-map-title{font-size:10px;color:#52687C;background:rgba(255,255,255,.92);border:1px solid #E7EDF3}
.orange-dashboard .orange-map-legend{font-size:9px;box-shadow:0 2px 10px rgba(23,50,77,.06);border:1px solid #E7EDF3;padding:7px 9px}
.orange-dashboard .orange-status-card{border-radius:12px;background:#FFF7F1;border-color:#FFD9BD;color:#A64B12;transition:.16s ease;min-width:0}
.orange-dashboard .orange-status-card:hover{transform:translateY(-1px);box-shadow:0 5px 14px rgba(255,121,0,.10)}
.orange-dashboard .orange-status-card.active{background:#FF7900;border-color:#FF7900;color:#fff;box-shadow:0 5px 14px rgba(255,121,0,.18)}
.orange-dashboard .orange-status-card b{font-size:18px}
.orange-dashboard .orange-status-card em{font-size:9px}
.orange-dashboard .orange-detail-grid{grid-template-columns:repeat(3,minmax(0,1fr));max-height:350px}
.orange-dashboard .orange-motif-row{background:#F8FAFC;border:1px solid #EDF2F7;border-radius:10px;padding:10px 12px;min-height:48px}
.orange-dashboard .orange-motif-row:hover{background:#FFF8F2;border-color:#FFDCC2}
.orange-dashboard .orange-scroll{scrollbar-width:thin;scrollbar-color:#CBD5E1 transparent}
.orange-dashboard .data-table th{background:#F8FAFC;color:#718096;font-size:9px;letter-spacing:.04em;text-transform:uppercase}
.orange-dashboard .data-table td{font-size:10px;border-bottom:1px solid #EEF2F6}
.orange-dashboard .orange-inline-filters{display:flex;gap:7px;align-items:center}
.orange-dashboard .orange-inline-filters select,.orange-dashboard .orange-inline-filters input{height:32px;border:1px solid #D7E0E8;border-radius:9px;background:#fff;padding:0 10px;color:#17324D;font:inherit;font-size:10px;outline:none}
.orange-dashboard .orange-inline-filters input{width:175px}
.orange-dashboard .orange-plaque-summary{padding:0 16px 8px}
.orange-dashboard .orange-ville-pill{border:0;cursor:pointer;padding:6px 9px;transition:.15s ease}
.orange-dashboard .orange-ville-pill:hover{transform:translateY(-1px);filter:brightness(.98)}
.orange-dashboard .orange-tech-chip,.orange-dashboard .orange-more-chip{display:inline-flex;align-items:center;border-radius:999px;padding:3px 7px;background:#EDF5FF;color:#2F80ED;font-size:9px;font-weight:700;margin:1px}
.orange-dashboard .orange-more-chip{background:#F1F5F9;color:#64748B}
.orange-dashboard .orange-muted{color:#94A3B8;font-size:9px}
.orange-dashboard .orange-selected-info{border:1px solid #EDF2F7;background:#F8FAFC;border-radius:9px;margin:0 16px 8px}
.orange-dashboard .orange-tech-summary{padding:0 16px}
.orange-dashboard .orange-collapsible{padding:0 16px 12px}
.orange-dashboard .orange-collapsible:not(.open){max-height:195px}
.orange-dashboard .orange-collapsible:not(.open) .orange-scroll{max-height:155px}
@media(max-width:1000px){.orange-dashboard .orange-detail-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.orange-dashboard .orange-inline-filters{flex-wrap:wrap}}
@media(max-width:650px){.orange-dashboard .orange-detail-grid{grid-template-columns:1fr}.orange-dashboard .orange-inline-filters input{width:140px}.orange-dashboard .orange-chart{height:260px}}

/* Orange V10 — statuts en liste interactive, style barres comme la maquette */
.orange-dashboard .orange-problem-statuses{
  display:flex;
  flex-direction:column;
  gap:6px;
  margin:7px 12px 10px;
  width:auto;
}
.orange-dashboard .orange-status-row{
  width:100%;
  min-height:38px;
  display:grid;
  grid-template-columns:minmax(150px,1.05fr) minmax(150px,1fr) 92px 16px;
  align-items:center;
  gap:10px;
  padding:7px 8px;
  border:0;
  border-radius:8px;
  background:transparent;
  color:#17324D;
  font:inherit;
  text-align:left;
  cursor:pointer;
  transition:background .15s ease,box-shadow .15s ease;
}
.orange-dashboard .orange-status-row:hover{background:#F8FAFC}
.orange-dashboard .orange-status-row.active{background:#FFF8F3;box-shadow:inset 3px 0 0 #C62828}
.orange-dashboard .orange-status-name{
  font-size:11px;
  line-height:1.25;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.orange-dashboard .orange-status-row.active .orange-status-name{font-weight:700}
.orange-dashboard .orange-status-track{
  height:8px;
  background:#EEF2F6;
  border-radius:999px;
  overflow:hidden;
}
.orange-dashboard .orange-status-track i{
  display:block;
  height:100%;
  background:#C62828;
  border-radius:999px;
  min-width:0;
  transition:width .2s ease;
}
.orange-dashboard .orange-status-value{
  font-size:10px;
  color:#17324D;
  text-align:right;
  white-space:nowrap;
}
.orange-dashboard .orange-status-arrow{
  font-size:17px;
  line-height:1;
  color:#94A3B8;
  text-align:center;
}
.orange-dashboard .orange-status-row.active .orange-status-arrow{color:#C62828;font-weight:800}
.orange-dashboard .orange-problem-card .orange-motif-detail{margin-top:2px}
@media(max-width:800px){
  .orange-dashboard .orange-status-row{grid-template-columns:minmax(120px,1fr) minmax(90px,.8fr) 80px 12px;gap:7px}
  .orange-dashboard .orange-status-name{font-size:10px}
  .orange-dashboard .orange-status-value{font-size:9px}
}
@media(max-width:560px){
  .orange-dashboard .orange-status-row{grid-template-columns:minmax(105px,1fr) minmax(70px,.7fr) 68px 10px;gap:6px;padding:7px 5px}
  .orange-dashboard .orange-status-value{font-size:8px}
}

/* Orange V9 — statuts compacts + détail des motifs plus lisible */
.orange-dashboard .orange-problem-statuses{
  display:grid;
  grid-template-columns:repeat(8,minmax(0,1fr));
  gap:8px;
  margin:7px 0 9px;
  width:100%;
}
.orange-dashboard .orange-problem-statuses .orange-status-card{
  min-width:0;
  width:100%;
  box-sizing:border-box;
  min-height:76px;
  height:76px;
  padding:8px 11px;
  justify-content:flex-start;
  gap:3px;
}
.orange-dashboard .orange-problem-statuses .orange-status-card span{
  font-size:10px;
  line-height:1.2;
  max-width:none;
  white-space:normal;
}
.orange-dashboard .orange-problem-statuses .orange-status-card b{
  font-size:19px;
  line-height:1;
  margin-top:2px
}
.orange-dashboard .orange-problem-statuses .orange-status-card em{
  font-size:8px;
  margin-top:auto;
}
.orange-dashboard .orange-problem-card .card-head{padding-bottom:6px}
.orange-dashboard .orange-problem-card .card-head h3{font-size:15px}
.orange-dashboard .orange-problem-card .card-head .sub{font-size:10px;margin-top:2px}
.orange-dashboard .orange-motif-detail{padding:0 0 10px}
.orange-dashboard .orange-detail-title{
  display:flex;align-items:center;gap:4px;flex-wrap:wrap;
  padding:4px 12px 7px;
  font-size:10px;color:#52687C;
}
.orange-dashboard .orange-detail-title b{color:#17324D}
.orange-dashboard .orange-detail-count{
  margin-left:auto;background:#FFF1E8;color:#E45F12;border-radius:999px;
  padding:3px 8px;font-size:9px;font-weight:800;white-space:nowrap
}
.orange-dashboard .orange-detail-grid{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:7px;padding:0 12px;max-height:310px;overflow:auto;
}
.orange-dashboard .orange-motif-row{
  min-height:40px;height:auto;padding:8px 11px;border-radius:8px;
  font-size:10px;line-height:1.3;
}
.orange-dashboard .orange-motif-row span{min-width:0;display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.orange-dashboard .orange-motif-row strong{font-size:10px}
@media(max-width:1150px){
  .orange-dashboard .orange-problem-statuses{grid-template-columns:repeat(4,minmax(0,1fr))}
  .orange-dashboard .orange-detail-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:700px){
  .orange-dashboard .orange-problem-statuses{grid-template-columns:repeat(2,minmax(0,1fr))}
  .orange-dashboard .orange-detail-grid{grid-template-columns:1fr}
}
@media(max-width:1150px){
  .orange-dashboard .orange-problem-statuses{grid-template-columns:repeat(4,minmax(0,1fr))}
}
@media(max-width:700px){
  .orange-dashboard .orange-problem-statuses{grid-template-columns:repeat(2,minmax(0,1fr))}
}

/* Orange V7 — carte nationale renforcée + retour aux vues globales */
.orange-dashboard .orange-reset,
.orange-dashboard .orange-map-reset{
  height:32px;border:1px solid #D7E0E8;border-radius:9px;background:#fff;color:#52687C;
  padding:0 10px;font:inherit;font-size:10px;font-weight:700;cursor:pointer;white-space:nowrap;
}
.orange-dashboard .orange-reset:hover,
.orange-dashboard .orange-map-reset:hover{background:#FFF7F1;border-color:#FFCCAA;color:#C85D0A}
.orange-dashboard .orange-map-card .card-head{display:flex;align-items:center;justify-content:space-between;gap:10px}
.orange-dashboard .orange-map{background:
  radial-gradient(circle at 50% 45%,rgba(255,255,255,.92),rgba(238,244,248,.92) 72%),
  linear-gradient(135deg,#f9fcfd,#edf3f7);}
.orange-dashboard .orange-map-svg{overflow:visible}
.orange-dashboard .orange-map-grid{stroke:#dfe8ee;stroke-width:.7;stroke-dasharray:2 5;opacity:.42}
.orange-dashboard .orange-map-neighbour{fill:#91a8b8;font-size:8px;font-weight:800;letter-spacing:.08em;text-anchor:middle}
.orange-dashboard .orange-map-north{fill:#17324D;font-size:10px;font-weight:900;text-anchor:middle}
.orange-dashboard .orange-map-compass{stroke:#17324D;stroke-width:1.6;fill:none;stroke-linecap:round;stroke-linejoin:round}
.orange-dashboard .orange-burkina-path{fill:#FFF0DC;stroke:none}
.orange-dashboard .orange-map-border{stroke:#718DA1;stroke-width:2.4;fill:none;filter:drop-shadow(0 2px 2px rgba(23,50,77,.08))}
.orange-dashboard .orange-map-city{transition:transform .16s ease,filter .16s ease;}
.orange-dashboard .orange-map-city:hover{filter:brightness(1.04);transform:scale(1.12)}
.orange-dashboard .orange-map-city:focus-visible{outline:3px solid #17324D;outline-offset:3px}
.orange-dashboard .orange-map-city span{font-size:9px;padding:4px 8px;border-radius:7px;box-shadow:0 4px 10px rgba(23,50,77,.18)}
.orange-dashboard .orange-map-city b{font-size:9px;text-shadow:0 1px 2px rgba(0,0,0,.12)}
.orange-dashboard .orange-map-legend{left:12px;right:12px;bottom:10px;align-items:center;gap:12px;flex-wrap:wrap;padding:7px 10px;background:rgba(255,255,255,.92);border:1px solid #E2EAF0;border-radius:10px}
.orange-dashboard .orange-legend-dot{display:inline-block;width:9px;height:9px;border-radius:50%;background:#FF7900;box-shadow:0 0 0 2px #fff,0 0 0 3px #FFD0AE;margin-right:5px;vertical-align:-1px}
.orange-dashboard #orange-tech-list table{table-layout:fixed;width:100%}
.orange-dashboard #orange-tech-list th:nth-child(1),.orange-dashboard #orange-tech-list td:nth-child(1){width:25%}
.orange-dashboard #orange-tech-list th:nth-child(2),.orange-dashboard #orange-tech-list td:nth-child(2){width:22%}
.orange-dashboard #orange-tech-list th:nth-child(3),.orange-dashboard #orange-tech-list td:nth-child(3){width:16%}
.orange-dashboard #orange-tech-list th:nth-child(4),.orange-dashboard #orange-tech-list td:nth-child(4){width:19%}
.orange-dashboard #orange-tech-list th:nth-child(5),.orange-dashboard #orange-tech-list td:nth-child(5){width:18%}
.orange-dashboard #orange-tech-list td{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.orange-dashboard .orange-ville-all{background:#EDF5FF!important;color:#2F80ED!important;border:1px solid #CFE2F8!important}
.orange-dashboard .orange-ville-all:hover{background:#E3F0FF!important}
@media(max-width:900px){
  .orange-dashboard .orange-map-card .card-head{align-items:flex-start}
  .orange-dashboard .orange-map{height:320px}
}
@media(max-width:650px){
  .orange-dashboard .orange-map-card .card-head{flex-direction:column}
  .orange-dashboard .orange-map-reset{align-self:flex-start}
  .orange-dashboard .orange-map{height:290px}
  .orange-dashboard .orange-map-legend{font-size:8px}
}

/* Orange V8 — carte : nuances de volume + divisions internes visuelles */
.orange-dashboard .orange-map-v8{
  background:
    radial-gradient(circle at 46% 42%,rgba(255,255,255,.96),rgba(242,247,249,.94) 68%),
    linear-gradient(135deg,#fbfdfe,#edf4f7);
}
.orange-dashboard .orange-map-v8 .orange-burkina-path{fill:#FFF0D9}
.orange-dashboard .orange-map-v8 .orange-map-division{
  fill:none;stroke:rgba(255,255,255,.92);stroke-width:1.35;
  stroke-linecap:round;stroke-linejoin:round;
}
.orange-dashboard .orange-map-v8 .orange-map-city-v8{
  background:var(--city-color,#FF7900);border-color:#fff;
  box-shadow:0 3px 10px rgba(23,50,77,.18),0 0 0 1px rgba(255,255,255,.7);
}
.orange-dashboard .orange-map-v8 .orange-map-city-v8 span{
  background:rgba(255,255,255,.96);color:#17324D;border:1px solid rgba(215,224,232,.95);
  padding:3px 7px;border-radius:7px;font-size:9px;font-weight:800;
  box-shadow:0 3px 8px rgba(23,50,77,.13);
}
.orange-dashboard .orange-map-v8 .orange-map-city-v8 b{color:#fff;font-size:9px;text-shadow:0 1px 2px rgba(0,0,0,.18)}
.orange-dashboard .orange-map-legend-v8{bottom:9px;padding:7px 10px;gap:12px}
.orange-dashboard .orange-map-scale{display:flex;align-items:center;gap:9px;flex-wrap:wrap}
.orange-dashboard .orange-map-scale span{display:inline-flex;align-items:center;gap:4px;white-space:nowrap}
.orange-dashboard .orange-map-scale i{display:inline-block;width:9px;height:9px;border-radius:50%;box-shadow:0 0 0 1px rgba(255,255,255,.8)}


/* Orange V10 — filtres d'analyse graphique et lisibilité DMR */
.orange-analysis-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;flex-wrap:wrap}
.orange-chart-controls{display:flex;align-items:flex-end;gap:8px;flex-wrap:wrap}
.orange-chart-controls label{display:flex;align-items:center;gap:5px;font-size:9px;font-weight:700;color:#718096}
.orange-chart-controls select{height:30px;min-width:145px;border:1px solid #cbd8e3;border-radius:8px;background:#fff;color:#17324d;padding:0 8px;font-size:10px;font-weight:600}
.orange-periods{display:flex;align-items:center;border:1px solid #ffd5b8;background:#fff7f1;border-radius:8px;padding:2px;gap:2px}
.orange-period{border:0;background:transparent;color:#a64b12;border-radius:6px;padding:6px 9px;font-size:10px;font-weight:800;cursor:pointer}
.orange-period:hover{background:#ffe9d6}.orange-period.active{background:#FF7900;color:#fff;box-shadow:0 2px 6px rgba(255,121,0,.2)}
.orange-analysis-card .card-head{padding-bottom:7px!important}
.orange-analysis-card .orange-chart{height:292px}
.orange-dmr-card .orange-chart{height:292px}
@media(max-width:900px){.orange-chart-controls{width:100%}.orange-chart-controls label{flex:1}.orange-chart-controls select{width:100%}.orange-periods{margin-left:auto}}
@media(max-width:600px){.orange-periods{width:100%;margin-left:0}.orange-period{flex:1}.orange-analysis-card .orange-chart,.orange-dmr-card .orange-chart{height:250px}}

/* Ajustements demandés — DMR, activité des plaques et détail du statut */
.orange-dashboard .orange-dmr-wrap{display:flex;align-items:center;gap:18px;height:292px;padding:8px 18px 12px}
.orange-dashboard .orange-dmr-chart{height:100%;flex:0 0 54%;min-width:0}
.orange-dashboard .orange-dmr-legend{flex:1;display:flex;flex-direction:column;gap:18px;min-width:170px}
.orange-dashboard .orange-dmr-legend-item{display:flex;align-items:flex-start;gap:10px}
.orange-dashboard .orange-dmr-swatch{width:14px;height:14px;border-radius:4px;flex:0 0 14px;margin-top:2px}
.orange-dashboard .orange-dmr-swatch.normal{background:#2F80ED}
.orange-dashboard .orange-dmr-swatch.complexe{background:#FF7900}
.orange-dashboard .orange-dmr-legend-item div{display:flex;flex-direction:column;gap:4px}
.orange-dashboard .orange-dmr-legend-item b{font-size:11px;font-weight:700;color:#17324D}
.orange-dashboard .orange-dmr-legend-item strong{font-size:13px;font-weight:800;color:#17324D;line-height:1.1}
.orange-dashboard .orange-detail-title{font-size:13px;font-weight:800;color:#17324D;padding:7px 12px 9px;line-height:1.25}
.orange-dashboard .orange-detail-title b{font-weight:900;color:#17324D}
@media(max-width:700px){
  .orange-dashboard .orange-dmr-wrap{height:260px;gap:8px;padding-left:10px;padding-right:10px}
  .orange-dashboard .orange-dmr-chart{flex-basis:56%}
  .orange-dashboard .orange-dmr-legend{gap:12px;min-width:135px}
  .orange-dashboard .orange-dmr-legend-item b{font-size:10px}
  .orange-dashboard .orange-dmr-legend-item strong{font-size:11px}
}

/* Orange V10 final override — remplacer les anciennes cartes de statuts par des lignes */
.orange-dashboard .orange-problem-statuses{display:flex;flex-direction:column;grid-template-columns:none;gap:6px;margin:7px 12px 10px;width:auto}
.orange-dashboard .orange-problem-statuses .orange-status-row{min-width:0;width:100%;min-height:38px;height:auto;box-sizing:border-box;display:grid;grid-template-columns:minmax(150px,1.05fr) minmax(150px,1fr) 92px 16px;flex-direction:initial;align-items:center;gap:10px;padding:7px 8px;border:0;border-radius:8px;background:transparent;color:#17324D;text-align:left}
.orange-dashboard .orange-problem-statuses .orange-status-row:hover{transform:none;box-shadow:none;background:#F8FAFC}
.orange-dashboard .orange-problem-statuses .orange-status-row.active{background:#FFF8F3;border-color:transparent;color:#17324D;box-shadow:inset 3px 0 0 #C62828}
.orange-dashboard .orange-problem-statuses .orange-status-row .orange-status-name{font-size:11px;max-width:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.orange-dashboard .orange-problem-statuses .orange-status-row b,.orange-dashboard .orange-problem-statuses .orange-status-row em{font-size:inherit;margin:0;opacity:1}
@media(max-width:800px){.orange-dashboard .orange-problem-statuses .orange-status-row{grid-template-columns:minmax(120px,1fr) minmax(90px,.8fr) 80px 12px}}
@media(max-width:560px){.orange-dashboard .orange-problem-statuses .orange-status-row{grid-template-columns:minmax(105px,1fr) minmax(70px,.7fr) 68px 10px;gap:6px}}

/* Disposition validée : motifs à gauche, détails du statut à droite */
.orange-dashboard .orange-status-detail-grid{align-items:stretch;gap:14px;margin-bottom:14px}
.orange-dashboard .orange-status-detail-grid > .orange-card{min-width:0}
.orange-dashboard .orange-status-detail-card{min-height:100%}
.orange-dashboard .orange-status-detail-card .card-head{padding-bottom:8px!important}
.orange-dashboard .orange-status-detail-card .card-head h3{font-size:13px;font-weight:800;color:#17324D;line-height:1.3}
.orange-dashboard .orange-status-detail-card .card-head h3 b{font-weight:900}
.orange-dashboard .orange-status-detail-card .orange-motif-detail{min-height:150px}
.orange-dashboard .orange-status-detail-card .orange-detail-title{padding-top:4px}
@media(max-width:800px){.orange-dashboard .orange-status-detail-grid{grid-template-columns:1fr}.orange-dashboard .orange-status-detail-card{min-height:0}}

/* Orange V10 — version compacte : réduire les espaces verticaux sans sacrifier la lisibilité */
.orange-dashboard .orange-card{padding:10px 12px}
.orange-dashboard .card-head{margin-bottom:7px}
.orange-dashboard .card h3{line-height:1.2}
.orange-dashboard .card .sub{line-height:1.25}
.orange-dashboard .data-table{font-size:10px}
.orange-dashboard .data-table th{padding:6px 8px;font-size:9px;line-height:1.15}
.orange-dashboard .data-table td{padding:6px 8px;line-height:1.2}
.orange-dashboard .orange-table .data-table tbody tr{height:30px}
.orange-dashboard .orange-problem-statuses{gap:2px;margin:4px 8px 7px}
.orange-dashboard .orange-problem-statuses .orange-status-row{min-height:32px;padding:5px 7px;gap:8px;border-radius:7px}
.orange-dashboard .orange-problem-statuses .orange-status-row .orange-status-name{font-size:10.5px}
.orange-dashboard .orange-problem-statuses .orange-status-track{height:7px}
.orange-dashboard .orange-problem-statuses .orange-status-value{font-size:9.5px}
.orange-dashboard .orange-problem-statuses .orange-status-arrow{font-size:13px;line-height:1}
.orange-dashboard .orange-status-detail-grid{gap:10px;margin-bottom:10px}
.orange-dashboard .orange-status-detail-card .card-head{padding-bottom:5px!important}
.orange-dashboard .orange-status-detail-card .card-head h3{font-size:12px;line-height:1.2}
.orange-dashboard .orange-status-detail-card .orange-motif-detail{min-height:0}
.orange-dashboard .orange-detail-title{padding:2px 8px 5px;font-size:11px}
.orange-dashboard .orange-detail-grid{gap:5px;max-height:250px}
.orange-dashboard .orange-motif-row{padding:6px 8px;min-height:34px;border-radius:7px;font-size:9.5px}
.orange-dashboard .orange-motif-row strong{font-size:9.5px}
.orange-dashboard .orange-motif-city{font-size:8.5px}
.orange-dashboard .orange-selected-info{margin:4px 0 6px!important;padding:4px 7px!important;font-size:9px!important}
.orange-dashboard .orange-tech-summary{margin:4px 0 6px!important;gap:5px!important}
.orange-dashboard .orange-tech-summary .pill{padding:3px 6px;font-size:9px}
.orange-dashboard .orange-plaque-summary{gap:4px!important;margin:4px 0 6px!important}
.orange-dashboard .orange-plaque-summary .pill{padding:3px 6px;font-size:9px}
.orange-dashboard .orange-inline-filters{gap:5px!important}
.orange-dashboard .orange-inline-filters select,.orange-dashboard .orange-inline-filters input{height:29px;font-size:9.5px}

@media(max-width:800px){
  .orange-dashboard .orange-card{padding:9px 10px}
  .orange-dashboard .data-table th,.orange-dashboard .data-table td{padding:5px 6px}
}

/* Style demandé — liste des statuts compacte, proche de la maquette de référence */
.orange-dashboard .orange-problem-statuses{
  display:flex;
  flex-direction:column;
  gap:0;
  margin:3px 8px 7px;
  width:auto;
}
.orange-dashboard .orange-problem-statuses .orange-status-row{
  min-width:0;
  width:100%;
  min-height:28px;
  height:28px;
  box-sizing:border-box;
  display:grid;
  grid-template-columns:minmax(180px,1.15fr) minmax(130px,1fr) 82px 12px;
  align-items:center;
  gap:8px;
  padding:2px 5px;
  border:0;
  border-radius:4px;
  background:transparent;
  color:#17324D;
  text-align:left;
}
.orange-dashboard .orange-problem-statuses .orange-status-row:hover{
  background:#F8FAFC;
}
.orange-dashboard .orange-problem-statuses .orange-status-row.active{
  background:#FFF8F3;
  box-shadow:inset 2px 0 0 #C62828;
}
.orange-dashboard .orange-problem-statuses .orange-status-row .orange-status-name{
  font-size:10.5px;
  font-weight:500;
  line-height:1.15;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.orange-dashboard .orange-problem-statuses .orange-status-row.active .orange-status-name{
  font-weight:600;
}
.orange-dashboard .orange-problem-statuses .orange-status-track{
  height:7px;
  background:#EEF2F6;
  border-radius:999px;
  overflow:hidden;
}
.orange-dashboard .orange-problem-statuses .orange-status-track i{
  height:100%;
  background:#C62828;
  border-radius:999px;
}
.orange-dashboard .orange-problem-statuses .orange-status-value{
  font-size:9.5px;
  font-weight:800;
  line-height:1;
  color:#17324D;
  text-align:right;
  white-space:nowrap;
}
.orange-dashboard .orange-problem-statuses .orange-status-arrow{
  font-size:12px;
  line-height:1;
  color:#9AAABD;
  text-align:center;
}
.orange-dashboard .orange-problem-statuses .orange-status-row.active .orange-status-arrow{
  color:#C62828;
  font-weight:800;
}
.orange-dashboard .orange-problem-card .orange-motif-detail{
  margin-top:0;
}
@media(max-width:800px){
  .orange-dashboard .orange-problem-statuses .orange-status-row{
    grid-template-columns:minmax(130px,1fr) minmax(90px,.9fr) 76px 10px;
    gap:7px;
  }
}
@media(max-width:560px){
  .orange-dashboard .orange-problem-statuses .orange-status-row{
    grid-template-columns:minmax(105px,1fr) minmax(70px,.8fr) 68px 9px;
    min-height:27px;
    height:27px;
    padding:2px 4px;
    gap:6px;
  }
  .orange-dashboard .orange-problem-statuses .orange-status-row .orange-status-name{font-size:9.5px}
  .orange-dashboard .orange-problem-statuses .orange-status-value{font-size:8.5px}
}


/* =====================================================================
 *  PILOTAGE ORANGE — HARMONISATION AVEC LA CHARTE KORA
 *
 *  Le tableau avait ses propres teintes (bleu #2F80ED, orange #FF7900,
 *  vert #38A169, rouge #E05252…), toutes sous le seuil de lisibilité de
 *  la charte — 4,5 pour du texte — et différentes de celles des mêmes
 *  mesures sur le tableau de bord. Ce bloc, placé en dernier, les
 *  ramène aux variables de la charte sans toucher à la mise en page.
 *  Une mesure garde la même couleur partout : reçus en bleu, installés
 *  en orange, mises en service en vert ; sans problème en vert, à
 *  problème en rouge.
 * ===================================================================== */
.orange-dashboard{color:var(--texte)}
.orange-dashboard .orange-kpi.blue{border-top-color:var(--bleu)}
.orange-dashboard .orange-kpi.orange{border-top-color:var(--orange)}
.orange-dashboard .orange-kpi.green{border-top-color:var(--vert-texte)}
.orange-dashboard .orange-kpi.red{border-top-color:var(--rouge)}
.orange-dashboard .orange-kpi.slate{border-top:4px solid var(--ardoise)}
.orange-dashboard .orange-kpi.blue .ok-value{color:var(--bleu)}
.orange-dashboard .orange-kpi.orange .ok-value{color:var(--orange)}
.orange-dashboard .orange-kpi.green .ok-value{color:var(--vert-texte)}
.orange-dashboard .orange-kpi.red .ok-value{color:var(--rouge)}
.orange-dashboard .orange-kpi.slate .ok-value{color:var(--ardoise)}

/* Textes sous le seuil de contraste (mesurés : 2,4 à 4,3 sur blanc). */
.orange-dashboard .orange-kpi .ok-sub,
.orange-dashboard .orange-muted,
.orange-dashboard .orange-status-arrow,
.orange-dashboard .orange-problem-statuses .orange-status-arrow{color:var(--texte-doux)}
.orange-dashboard .orange-kpi .ok-label,
.orange-dashboard .orange-chart-controls label,
.orange-dashboard .data-table th{color:var(--texte-doux)}
.orange-dashboard .orange-more-chip{color:var(--texte-doux)}
.orange-dashboard .orange-tech-chip,
.orange-dashboard .orange-ville-all{color:var(--bleu);background:var(--bleu-clair)}
.orange-dashboard .orange-detail-count{color:var(--orange);background:var(--orange-fond)}
.orange-dashboard .orange-map-reset:hover{color:var(--orange)}

/* Sélections actives : fond bleu de la charte, comme les boutons de
   période du tableau de bord (le blanc sur orange #FF7900 : 2,6). */
.orange-dashboard .orange-period.active,
.orange-dashboard .orange-status-card.active{background:var(--bleu);border-color:var(--bleu);color:#fff}

/* Légende du DMR : mêmes couleurs que le graphique et les cartes. */
.orange-dashboard .orange-dmr-swatch.normal{background:var(--vert-texte)}
.orange-dashboard .orange-dmr-swatch.complexe{background:var(--rouge)}

/* Statuts à problème : barre et sélection en rouge de la charte. */
.orange-dashboard .orange-status-track i{background:var(--rouge)}
.orange-dashboard .orange-status-row.active{border-left-color:var(--rouge)}

/* Boutons de période : même apparence que sur le tableau de bord —
   blanc, bleu quand actif. Ils étaient teintés d'orange. */
.orange-dashboard .orange-period{background:#fff;color:var(--texte);border:1px solid var(--border)}
.orange-dashboard .orange-period:hover{background:var(--bleu-clair)}

/* ---------------------------------------------------------------------
 *  MOTIFS : TEXTE COMPLET
 *  Les motifs du détail par statut étaient coupés en « PB non ch… » ou
 *  « Travaux s… » : le motif est justement l'information cherchée. Le
 *  libellé passe à la ligne ; la carte grandit au besoin.
 * ------------------------------------------------------------------- */
.orange-dashboard .orange-motif-row{height:auto;align-items:flex-start}
.orange-dashboard .orange-motif-row span{white-space:normal;overflow:visible;text-overflow:clip;line-height:1.3}

/* « Toutes les villes » : bleu de charte sur fond bleu clair (6,8). Il
   était en #2F80ED, à 3,5 de contraste. */
.orange-dashboard .orange-ville-all{color:var(--bleu)!important;background:var(--bleu-clair)!important;border-color:var(--bleu-bord)!important}

/* ---------------------------------------------------------------------
 *  DOSSIERS PAR ENTREPRISE — un seul graphe, pleine largeur
 *  Il remplace deux blocs qui se recoupaient : « Production par ville »
 *  et le tableau « Dossiers par entreprise ». La hauteur du graphique
 *  est fixée par le script, selon le nombre d'entreprises.
 * ------------------------------------------------------------------- */
.orange-dashboard .orange-entreprises-card{padding:16px 18px}
.orange-dashboard .orange-chart-entreprises{position:relative;margin-top:6px;min-height:200px}
.orange-dashboard .orange-chart-conseil{margin-top:10px;font-size:11.5px;line-height:1.5;color:var(--texte-doux)}
.orange-dashboard .orange-chart-conseil:empty{display:none}
/* Les deux listes à cases (villes, entreprises) ont la même largeur. */
.orange-dashboard #orange-ville-wrap,.orange-dashboard #orange-prest-wrap{min-width:200px}
.orange-dashboard .orange-chart-conseil{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin:8px 0 2px;font-size:11.5px;line-height:1.5;color:var(--texte-doux)}
.orange-dashboard .orange-comparer{display:inline-flex;align-items:center;gap:7px;padding:6px 11px;border:1px solid var(--bleu-bord);background:var(--bleu-clair);border-radius:8px;color:var(--bleu);font-weight:700;font-size:12px;cursor:pointer}
.orange-dashboard .orange-comparer input{accent-color:var(--bleu)}

/* ---------------------------------------------------------------------
 *  STATUTS ET MOTIFS
 *  À gauche, tous les statuts — les dossiers à problème d'abord. À droite,
 *  le tableau des motifs du statut choisi, avec la répartition par ville.
 * ------------------------------------------------------------------- */
.orange-dashboard .orange-status-detail-grid{grid-template-columns:.9fr 1.1fr}
.orange-dashboard .orange-statut-groupe{margin:14px 0 4px;font-size:10.5px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;color:var(--texte-doux)}
.orange-dashboard .orange-statut-groupe:first-child{margin-top:2px}
.orange-dashboard .orange-status-row.neutre .orange-status-track i{background:#9DB4CC}
.orange-dashboard .orange-pop{display:flex;gap:2px;border:1px solid var(--border);background:#fff;border-radius:8px;padding:2px;flex:none}
.orange-dashboard .orange-pop-btn{border:0;background:transparent;color:var(--texte);border-radius:6px;padding:6px 10px;font-size:11px;font-weight:700;cursor:pointer;white-space:nowrap}
.orange-dashboard .orange-pop-btn.active{background:var(--bleu);color:#fff}
.orange-dashboard .orange-motifs-table th.num,.orange-dashboard .orange-motifs-table td.num{text-align:right;font-variant-numeric:tabular-nums}
.orange-dashboard .orange-motifs-table td,.orange-dashboard .orange-motifs-table th{padding:8px 9px;font-size:12px}
.orange-dashboard .orange-motifs-table .orange-progress{display:inline-block;width:56px;vertical-align:middle;margin-left:6px}
.orange-dashboard .orange-motifs-table tr.orange-total td{border-top:2px solid var(--border-fort);font-weight:800}
.orange-dashboard .orange-pt{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:5px}
@media(max-width:1200px){.orange-dashboard .orange-status-detail-grid{grid-template-columns:1fr}}

/* ---------------------------------------------------------------------
 *  TABLEAU PAR ENTREPRISE
 *  Remplace le graphique. Colonnes triables, en-têtes teintés comme les
 *  cartes d'indicateurs (reçus bleu, installés orange, mises en service
 *  vert), progression en pastille, ligne de total, notre entreprise
 *  surlignée. Tout en jetons de la charte : lisible dans chaque thème.
 * ------------------------------------------------------------------- */
.orange-dashboard .orange-ent-head{display:flex;justify-content:space-between;align-items:flex-start;gap:14px;flex-wrap:wrap}
.orange-dashboard .orange-switch{display:inline-flex;align-items:center;gap:9px;cursor:pointer;font-size:12.5px;font-weight:700;color:var(--texte);user-select:none;position:relative}
.orange-dashboard .orange-switch[hidden]{display:none}
.orange-dashboard .orange-switch input{position:absolute;opacity:0;width:1px;height:1px}
.orange-dashboard .orange-switch-piste{position:relative;width:42px;height:24px;border-radius:999px;background:var(--border-fort);transition:background .15s;flex:none}
.orange-dashboard .orange-switch-piste i{position:absolute;top:3px;left:3px;width:18px;height:18px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.25);transition:transform .15s}
.orange-dashboard .orange-switch input:checked+.orange-switch-piste{background:var(--bleu)}
.orange-dashboard .orange-switch input:checked+.orange-switch-piste i{transform:translateX(18px)}
.orange-dashboard .orange-switch input:focus-visible+.orange-switch-piste{outline:2px solid var(--bleu);outline-offset:2px}

.orange-dashboard .orange-ent-table{width:100%;border-collapse:separate;border-spacing:0}
.orange-dashboard .orange-ent-table thead th{background:var(--fond);color:var(--texte);padding:0;border-bottom:3px solid var(--border-fort);text-align:center}
.orange-dashboard .orange-ent-table thead th.ent{text-align:left}
.orange-dashboard .orange-ent-table thead th.rang{padding:10px 8px;text-align:center;font-size:12px}
.orange-dashboard .orange-tri{all:unset;box-sizing:border-box;display:flex;align-items:center;justify-content:center;gap:6px;width:100%;padding:10px 8px;cursor:pointer;font-size:12px;font-weight:800;color:inherit}
.orange-dashboard .orange-ent-table thead th.ent .orange-tri{justify-content:flex-start;padding-left:10px}
.orange-dashboard .orange-tri:focus-visible{outline:2px solid var(--bleu);outline-offset:-2px}
.orange-dashboard .orange-tri-ico{font-size:10px;opacity:.55}
.orange-dashboard .orange-tri-ico.on{opacity:1}
.orange-dashboard .orange-ent-table thead th.h-recu{background:var(--bleu-clair);color:var(--bleu);border-bottom-color:var(--bleu)}
.orange-dashboard .orange-ent-table thead th.h-inst{background:var(--orange-fond);color:var(--orange);border-bottom-color:var(--orange)}
.orange-dashboard .orange-ent-table thead th.h-mes{background:var(--vert-clair);color:var(--vert-texte);border-bottom-color:var(--vert-texte)}
.orange-dashboard .orange-ent-table tbody td,.orange-dashboard .orange-ent-table tfoot td{padding:5px 6px;border-bottom:1px solid var(--border);font-size:13px;color:var(--texte)}
.orange-dashboard .orange-ent-table td.rang{width:44px;text-align:center;color:var(--texte-doux);font-size:12px}
.orange-dashboard .orange-ent-table td.ent{font-weight:700;padding-left:10px}
.orange-dashboard .orange-ent-table td.num span{display:block;min-width:58px;text-align:center;padding:5px 10px;border-radius:7px;font-weight:700;font-variant-numeric:tabular-nums}
.orange-dashboard .orange-ent-table td.c-recu span{background:var(--bleu-clair)}
.orange-dashboard .orange-ent-table td.c-inst span{background:var(--orange-fond)}
.orange-dashboard .orange-ent-table td.c-mes span{background:var(--vert-clair)}
.orange-dashboard .orange-ent-table td.c-total span{background:var(--fond);border:1px solid var(--border)}
.orange-dashboard .orange-ent-table td.c-prog{text-align:center}
.orange-dashboard .orange-prog{display:inline-block;min-width:64px;text-align:center;padding:5px 10px;border-radius:7px;font-weight:800;font-size:12.5px;border:1px solid var(--border)}
.orange-dashboard .orange-prog.bon{background:var(--vert-clair);color:var(--vert-texte);border-color:var(--vert-bord)}
.orange-dashboard .orange-prog.moyen{background:var(--orange-fond);color:var(--orange)}
.orange-dashboard .orange-prog.faible{background:var(--rouge-fond);color:var(--rouge)}
.orange-dashboard .orange-prog.neutre{background:var(--fond);color:var(--texte-doux)}
.orange-dashboard .orange-ent-table tbody tr:hover td{background:var(--bleu-clair)}
.orange-dashboard .orange-ent-table tbody tr.orange-nous td{background:var(--bleu-clair)}
.orange-dashboard .orange-ent-table tbody tr.orange-nous td.ent{color:var(--bleu);font-weight:800}
.orange-dashboard .orange-ent-table tfoot td{background:var(--fond);border-top:2px solid var(--border-fort);border-bottom:0;font-weight:800;padding-top:9px;padding-bottom:9px}
.orange-dashboard .orange-ent-pied{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;margin-top:12px;font-size:12px;color:var(--texte-doux)}
.orange-dashboard .orange-ent-pages{display:flex;align-items:center;gap:6px}
.orange-dashboard .orange-ent-pages select{height:32px;border:1px solid var(--border-fort);border-radius:8px;background:var(--card);color:var(--texte);font:inherit;padding:0 8px}
.orange-dashboard .orange-page{min-width:32px;height:32px;border:1px solid var(--border-fort);border-radius:8px;background:var(--card);color:var(--texte);font:inherit;font-weight:700;cursor:pointer}
.orange-dashboard .orange-page.active{background:var(--bleu);border-color:var(--bleu);color:#fff}
.orange-dashboard .orange-page:disabled{opacity:.4;cursor:default}
.orange-dashboard .orange-ent-note{margin-top:8px;font-size:11px;line-height:1.5;color:var(--texte-doux)}

/* ---------------------------------------------------------------------
 *  CARTE NATIONALE — UN SEUL REPÈRE
 *  Remplace la carte V8 (boutons HTML en pixels sur un SVG à l'échelle).
 *  Couleurs de la charte : le pays, le fond et les textes suivent le thème.
 *  Les bulles gardent leurs couleurs de données : jaune → rouge selon le
 *  volume ; texte ardoise sur les trois premières, blanc sur la rouge
 *  (contraste ≥ 4,5).
 * ------------------------------------------------------------------- */
.orange-dashboard .orange-carte{position:relative;width:100%;aspect-ratio:500/345;border-radius:14px;overflow:hidden;background:var(--bleu-clair);border:1px solid var(--border)}
.orange-dashboard .orange-carte>svg{position:absolute;inset:0;width:100%;height:100%;display:block}
.orange-dashboard .orange-carte .pays{fill:var(--orange-fond);stroke:var(--border-fort);stroke-width:1.9;stroke-linejoin:round}
.orange-dashboard .orange-carte .route{fill:none;stroke:var(--orange);stroke-opacity:.14;stroke-width:1}
.orange-dashboard .orange-carte .voisin{font-size:9px;font-weight:800;letter-spacing:.2em;fill:var(--texte-doux)}
.orange-dashboard .orange-carte .nord{font-size:12px;font-weight:900;fill:var(--texte)}
.orange-dashboard .orange-carte .nord-fleche{fill:none;stroke:var(--texte);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.orange-dashboard .orange-carte-nom{font-size:8.2px;font-weight:600;fill:var(--texte-doux);text-anchor:middle;dominant-baseline:middle;paint-order:stroke;stroke:var(--orange-fond);stroke-width:2.6px;stroke-linejoin:round}
.orange-dashboard .orange-carte-ville{cursor:pointer;outline:none}
.orange-dashboard .orange-carte-ville .b{stroke:#fff;stroke-width:2.2;filter:drop-shadow(0 1.5px 2px rgba(18,40,60,.30))}
.orange-dashboard .orange-carte-ville .b.n1{fill:#FFE08A}.orange-dashboard .orange-carte-ville .b.n2{fill:#FFC466}
.orange-dashboard .orange-carte-ville .b.n3{fill:#FF9A33}.orange-dashboard .orange-carte-ville .b.n4{fill:#D6370E}
.orange-dashboard .orange-carte-ville .c{font-weight:800;text-anchor:middle;pointer-events:none;font-variant-numeric:tabular-nums}
.orange-dashboard .orange-carte-ville .c.n1,.orange-dashboard .orange-carte-ville .c.n2,.orange-dashboard .orange-carte-ville .c.n3{fill:#12283C}
.orange-dashboard .orange-carte-ville .c.n4{fill:#fff}
.orange-dashboard .orange-carte-ville .pilule{fill:var(--card);stroke:var(--border-fort);stroke-width:.8}
.orange-dashboard .orange-carte-ville .nom{font-size:9px;font-weight:800;fill:var(--texte);text-anchor:middle;pointer-events:none}
.orange-dashboard .orange-carte-ville .ring{fill:none;stroke:var(--bleu);stroke-width:2.2}
.orange-dashboard .orange-carte-ville.sel .pilule{stroke:var(--bleu);stroke-width:1.6}
.orange-dashboard .orange-carte-ville:hover .b,.orange-dashboard .orange-carte-ville:focus-visible .b{stroke:var(--bleu)}
.orange-dashboard .orange-carte-ville:focus-visible .ring{stroke-dasharray:3 2}
.orange-dashboard .orange-carte-legende,.orange-dashboard .orange-carte-total,.orange-dashboard .orange-carte-hors{position:absolute;background:var(--card);border:1px solid var(--border);border-radius:10px;box-shadow:0 2px 10px rgba(18,40,60,.10);color:var(--texte)}
.orange-dashboard .orange-carte-legende{left:10px;bottom:10px;padding:7px 11px;font-size:10.5px}
.orange-dashboard .orange-carte-legende b{display:block;margin-bottom:5px;font-size:10.5px}
.orange-dashboard .orange-carte-legende div{display:flex;gap:11px;flex-wrap:wrap}
.orange-dashboard .orange-carte-legende i{display:inline-block;width:11px;height:11px;border-radius:50%;margin-right:5px;vertical-align:-1px;border:1.5px solid #fff;box-shadow:0 0 0 1px var(--border-fort)}
.orange-dashboard .orange-carte-total{right:10px;bottom:10px;display:flex;align-items:center;gap:10px;padding:8px 14px 8px 10px}
.orange-dashboard .orange-carte-total>svg{width:30px;height:30px;padding:6px;border-radius:8px;background:var(--bleu-clair);color:var(--bleu);flex:none}
.orange-dashboard .orange-carte-total small{display:block;font-size:10.5px;color:var(--texte-doux);line-height:1.2}
.orange-dashboard .orange-carte-total strong{display:block;font-size:21px;line-height:1.15;font-variant-numeric:tabular-nums}
.orange-dashboard .orange-carte-hors{right:10px;top:10px;max-width:60%;padding:5px 10px;font-size:10.5px}
@media(max-width:700px){.orange-dashboard .orange-carte-legende{font-size:9.5px;padding:5px 8px}.orange-dashboard .orange-carte-total strong{font-size:17px}}

/* ---------------------------------------------------------------------
 *  FILTRES ET DÉFILEMENT DU TABLEAU PAR ENTREPRISE
 *  Cinq lignes visibles, défilement vertical ; l'en-tête et la ligne de
 *  total restent fixes. Remplace la pagination.
 * ------------------------------------------------------------------- */
.orange-dashboard .orange-ent-filtres{display:flex;gap:10px;align-items:flex-end;flex-wrap:wrap;margin:10px 0 12px}
.orange-dashboard .orange-ent-filtres>label{display:flex;flex-direction:column;gap:3px;font-size:10.5px;font-weight:700;color:var(--texte-doux)}
.orange-dashboard .orange-ent-filtres input[type=date]{height:34px;border:1px solid var(--border-fort);border-radius:8px;padding:0 8px;background:var(--card);color:var(--texte);font:inherit;font-size:12.5px}
.orange-dashboard .orange-ent-filtres .orange-multi{min-width:210px}
.orange-dashboard .orange-ent-raz{height:34px}
.orange-dashboard .orange-ent-raz[hidden]{display:none}
.orange-dashboard .orange-ent-scroll{overflow:auto;border:1px solid var(--border);border-radius:10px;scrollbar-width:thin;overscroll-behavior:contain}
.orange-dashboard .orange-ent-table thead th{position:sticky;top:0;z-index:3}
.orange-dashboard .orange-ent-table tfoot td{position:sticky;bottom:0;z-index:3}

/* =====================================================================
 *  PILOTAGE ORANGE — CHARTE ORANGE
 *
 *  Ce bloc ne concerne QUE le tableau de bord « Pilotage Orange » (classe
 *  `charte-orange`) : le reste de KORA garde ses couleurs.
 *
 *  Couleurs : celles d'Orange Boosted, son système de design officiel
 *  (boosted.orange.com, « Guidelines › Colors » — vérifié).
 *    noyau        blanc #fff · noir #000 · orange accessible #f16e00
 *                 · orange de marque #ff7900
 *    soutien      bleu #4bb4e6 · jaune #ffd200 · vert #50be87
 *    fonctionnel  rouge #cd3c14 (vert #32c832, bleu #527edb, jaune #fc0)
 *    gris         #eee #ddd #ccc #999 #666 #333 · gris OBS #595959
 *  Principe d'Orange, en traduction : « Orange est une marque noire,
 *  blanche et orange. En numérique, l'orange sert de rehaut ou de couleur
 *  de focus. Les couleurs de base doivent toujours dominer. » Les couleurs
 *  de base sont le blanc, le noir et les deux oranges ; les couleurs de
 *  soutien et les couleurs fonctionnelles restent secondaires.
 *
 *  Règle d'accessibilité qui en découle (mesurée) : l'orange #ff7900 ne
 *  passe pas en TEXTE sur blanc (2,63) ni avec du texte blanc dessus
 *  (2,63) ; avec du texte NOIR il fait 7,99. L'orange sert donc de fond, de
 *  liseré ou de rehaut, jamais de couleur de texte, et tout fond orange
 *  porte du noir.
 *
 *  Teintes claires (bleu, vert, orange, rouge) : DÉRIVÉES par mélange avec
 *  du blanc, pas des couleurs officielles ; elles ne servent que de fond
 *  sous du texte noir.
 * ===================================================================== */
.orange-dashboard.charte-orange{
  --o-orange:#FF7900; --o-orange-acc:#F16E00; --o-noir:#000; --o-blanc:#fff;
  --o-bleu:#4BB4E6; --o-vert:#50BE87; --o-jaune:#FFD200; --o-rouge:#CD3C14;
  --o-g3:#EEEEEE; --o-g4:#DDDDDD; --o-g5:#CCCCCC; --o-g7:#666666; --o-g8:#595959; --o-g9:#333333;
  --o-bleu-t:#E4F4FB; --o-vert-t:#E5F5ED; --o-orange-t:#FFEBD9; --o-orange-tt:#FFF6EC; --o-jaune-t:#FFF6CC; --o-rouge-t:#F9E3DD;
  /* Les jetons de KORA sont neutralisés ici : aucune règle de ce tableau ne
     retombe sur la couleur du thème de l'application (clair, ardoise,
     forêt, sombre, terre). */
  --card:#fff; --texte:#000; --texte-doux:#595959; --border:#DDDDDD; --border-fort:#666666; --fond:#EEEEEE;
  --bleu:#000; --bleu-clair:#EEEEEE; --bleu-bord:#CCCCCC;
  --orange:#F16E00; --orange-fond:#FFEBD9;
  --vert-texte:#0B6B3A; --vert-clair:#E5F5ED; --vert-bord:#50BE87;
  --rouge:#CD3C14; --rouge-fond:#F9E3DD; --violet:#595959; --ardoise:#000;
  color:#000;
}
/* champs et listes : fond blanc, texte noir, bordure grise 5,7:1, quel que soit le thème */
.orange-dashboard.charte-orange input,.orange-dashboard.charte-orange select,.orange-dashboard.charte-orange button.ghost{background:#fff;color:#000;border:1px solid #666}
.orange-dashboard.charte-orange input:focus-visible,.orange-dashboard.charte-orange select:focus-visible,.orange-dashboard.charte-orange button:focus-visible,.orange-dashboard.charte-orange [tabindex]:focus-visible{outline:2px solid #000;outline-offset:2px}
.orange-dashboard.charte-orange input[type=checkbox]{accent-color:#000}

/* ---- bandeau : noir, liseré orange ---- */
.orange-dashboard.charte-orange .view-head{background:#000;border-radius:14px;padding:18px 22px;margin-bottom:14px;border-bottom:5px solid #FF7900}
.orange-dashboard.charte-orange .view-head h2{color:#fff}
.orange-dashboard.charte-orange .view-head h2::after{background:#FF7900}
.orange-dashboard.charte-orange .view-head .sub{color:#CCCCCC}

/* ---- filtres ---- */
.orange-dashboard.charte-orange .orange-filters{background:#fff;border:1px solid #DDDDDD}
.orange-dashboard.charte-orange .orange-filters label{color:#595959}
.orange-dashboard.charte-orange .orange-multi-btn{background:#fff;color:#000;border:1px solid #666}
.orange-dashboard.charte-orange .orange-multi-menu{background:#fff;color:#000;border:1px solid #666}
.orange-dashboard.charte-orange .orange-multi-menu label{color:#000}
.orange-dashboard.charte-orange .orange-multi-menu label:hover{background:#FFEBD9}
.orange-dashboard.charte-orange .orange-periods{background:#fff;border:1px solid #666}
.orange-dashboard.charte-orange .orange-period{background:#fff;color:#000;border:0}
.orange-dashboard.charte-orange .orange-period.active{background:#000;color:#fff}
.orange-dashboard.charte-orange .orange-refresh{background:#FF7900;color:#000;border:1px solid #000;font-weight:800}
.orange-dashboard.charte-orange .orange-refresh:hover{background:#000;color:#fff}
.orange-dashboard.charte-orange .orange-reset,.orange-dashboard.charte-orange .orange-map-reset,.orange-dashboard.charte-orange .orange-ent-raz{background:#fff;color:#000;border:1px solid #000}
.orange-dashboard.charte-orange .orange-reset:hover,.orange-dashboard.charte-orange .orange-map-reset:hover,.orange-dashboard.charte-orange .orange-ent-raz:hover{background:#000;color:#fff}

/* ---- cartes d'indicateurs : liseré de couleur, chiffres noirs ---- */
.orange-dashboard.charte-orange .orange-kpi{background:#fff;border:1px solid #DDDDDD;border-top:4px solid #000}
.orange-dashboard.charte-orange .orange-kpi.blue{border-top-color:#4BB4E6}
.orange-dashboard.charte-orange .orange-kpi.orange{border-top-color:#FF7900}
.orange-dashboard.charte-orange .orange-kpi.green{border-top-color:#50BE87}
.orange-dashboard.charte-orange .orange-kpi.red{border-top-color:#CD3C14}
.orange-dashboard.charte-orange .orange-kpi.slate{border-top-color:#000}
.orange-dashboard.charte-orange .orange-kpi .ok-label{color:#595959}
.orange-dashboard.charte-orange .orange-kpi .ok-value,.orange-dashboard.charte-orange .orange-kpi.blue .ok-value,.orange-dashboard.charte-orange .orange-kpi.orange .ok-value,.orange-dashboard.charte-orange .orange-kpi.green .ok-value,.orange-dashboard.charte-orange .orange-kpi.slate .ok-value{color:#000}
.orange-dashboard.charte-orange .orange-kpi.red .ok-value{color:#CD3C14}
.orange-dashboard.charte-orange .orange-kpi .ok-sub{color:#595959}

/* ---- cartes ---- */
.orange-dashboard.charte-orange .orange-card{background:#fff;border:1px solid #DDDDDD}
.orange-dashboard.charte-orange .orange-card h3{color:#000}
.orange-dashboard.charte-orange .orange-card .sub,.orange-dashboard.charte-orange .orange-selected-info{color:#595959}
.orange-dashboard.charte-orange .orange-empty{color:#595959}

/* ---- tableaux : en-tête noir, texte blanc ---- */
.orange-dashboard.charte-orange .data-table thead th{background:#000;color:#fff;border-bottom:0}
.orange-dashboard.charte-orange .data-table tbody td{color:#000;border-bottom:1px solid #DDDDDD}
.orange-dashboard.charte-orange .data-table tfoot td{background:#EEEEEE;color:#000;border-top:2px solid #000}

/* ---- tableau par entreprise ---- */
.orange-dashboard.charte-orange .orange-ent-scroll{border:1px solid #CCCCCC}
.orange-dashboard.charte-orange .orange-ent-table thead th,.orange-dashboard.charte-orange .orange-ent-table thead th.ent,.orange-dashboard.charte-orange .orange-ent-table thead th.rang{background:#000;color:#fff;border-bottom:4px solid #000}
.orange-dashboard.charte-orange .orange-ent-table thead th.h-recu{background:#000;color:#fff;border-bottom-color:#4BB4E6}
.orange-dashboard.charte-orange .orange-ent-table thead th.h-inst{background:#000;color:#fff;border-bottom-color:#FF7900}
.orange-dashboard.charte-orange .orange-ent-table thead th.h-mes{background:#000;color:#fff;border-bottom-color:#50BE87}
.orange-dashboard.charte-orange .orange-tri{color:#fff}
.orange-dashboard.charte-orange .orange-tri-ico{color:#fff}
.orange-dashboard.charte-orange .orange-tri-ico.on{color:#FF7900;opacity:1}
.orange-dashboard.charte-orange .orange-ent-table tbody td,.orange-dashboard.charte-orange .orange-ent-table tfoot td{color:#000}
.orange-dashboard.charte-orange .orange-ent-table td.rang{color:#595959}
.orange-dashboard.charte-orange .orange-ent-table td.c-recu span{background:#E4F4FB}
.orange-dashboard.charte-orange .orange-ent-table td.c-inst span{background:#FFEBD9}
.orange-dashboard.charte-orange .orange-ent-table td.c-mes span{background:#E5F5ED}
.orange-dashboard.charte-orange .orange-ent-table td.c-total span{background:#EEEEEE;border:1px solid #DDDDDD}
.orange-dashboard.charte-orange .orange-ent-table tbody tr:hover td{background:#F4F4F4}
.orange-dashboard.charte-orange .orange-ent-table tbody tr.orange-nous td{background:#FFF6EC}
.orange-dashboard.charte-orange .orange-ent-table tbody tr.orange-nous td:first-child{box-shadow:inset 4px 0 0 #FF7900}
.orange-dashboard.charte-orange .orange-ent-table tbody tr.orange-nous td.ent{color:#000;font-weight:800}
.orange-dashboard.charte-orange .orange-ent-table tfoot td{background:#EEEEEE;border-top:2px solid #000}
.orange-dashboard.charte-orange .orange-prog{color:#000;border:1px solid #666;background:#EEEEEE}
.orange-dashboard.charte-orange .orange-prog.bon{background:#E5F5ED;border-color:#50BE87;color:#000}
.orange-dashboard.charte-orange .orange-prog.moyen{background:#FFF6CC;border-color:#FFD200;color:#000}
.orange-dashboard.charte-orange .orange-prog.faible{background:#F9E3DD;border-color:#CD3C14;color:#000}
.orange-dashboard.charte-orange .orange-prog.neutre{background:#EEEEEE;border-color:#CCCCCC;color:#595959}
.orange-dashboard.charte-orange .orange-ent-filtres>label{color:#595959}
.orange-dashboard.charte-orange .orange-ent-pied,.orange-dashboard.charte-orange .orange-ent-note{color:#595959}

/* ---- bascule : noire quand elle est active ---- */
.orange-dashboard.charte-orange .orange-switch{color:#000}
.orange-dashboard.charte-orange .orange-switch-piste{background:#999}
.orange-dashboard.charte-orange .orange-switch input:checked+.orange-switch-piste{background:#000}
.orange-dashboard.charte-orange .orange-switch input:focus-visible+.orange-switch-piste{outline:2px solid #000}

/* ---- statuts et motifs ---- */
.orange-dashboard.charte-orange .orange-statut-groupe{color:#595959}
.orange-dashboard.charte-orange .orange-status-row{color:#000}
.orange-dashboard.charte-orange .orange-status-row .orange-status-track{background:#EEEEEE}
.orange-dashboard.charte-orange .orange-status-row .orange-status-track i{background:#CD3C14}
.orange-dashboard.charte-orange .orange-status-row.neutre .orange-status-track i{background:#666}
.orange-dashboard.charte-orange .orange-status-row.active{background:#FFEBD9;box-shadow:inset 4px 0 0 #FF7900;color:#000}
.orange-dashboard.charte-orange .orange-status-row .orange-status-value,.orange-dashboard.charte-orange .orange-status-row .orange-status-arrow{color:#000}
.orange-dashboard.charte-orange .orange-pop{background:#fff;border:1px solid #666}
.orange-dashboard.charte-orange .orange-pop-btn{background:#fff;color:#000}
.orange-dashboard.charte-orange .orange-pop-btn.active{background:#000;color:#fff}
.orange-dashboard.charte-orange .orange-motifs-table tr.orange-total td{border-top:2px solid #000}

/* ---- pastilles (plaques, techniciens) : teinte claire, bordure de couleur, texte noir ---- */
.orange-dashboard.charte-orange .pill{color:#000;border:1px solid #666;background:#EEEEEE}
.orange-dashboard.charte-orange .pill.green{background:#E5F5ED;border-color:#50BE87;color:#000}
.orange-dashboard.charte-orange .pill.red{background:#F9E3DD;border-color:#CD3C14;color:#000}
.orange-dashboard.charte-orange .pill.blue,.orange-dashboard.charte-orange .orange-ville-all{background:#EEEEEE!important;border-color:#666!important;color:#000!important}
.orange-dashboard.charte-orange .orange-dmr-swatch.normal{background:#50BE87}
.orange-dashboard.charte-orange .orange-dmr-swatch.complexe{background:#CD3C14}

/* ---- carte nationale ---- */
.orange-dashboard.charte-orange .orange-carte{background:#EEEEEE;border:1px solid #CCCCCC}
.orange-dashboard.charte-orange .orange-carte .pays{fill:#fff;stroke:#000;stroke-width:1.5}
.orange-dashboard.charte-orange .orange-carte .route{stroke:#000;stroke-opacity:.10}
.orange-dashboard.charte-orange .orange-carte .voisin{fill:#666}
.orange-dashboard.charte-orange .orange-carte .nord{fill:#000}
.orange-dashboard.charte-orange .orange-carte .nord-fleche{stroke:#000}
.orange-dashboard.charte-orange .orange-carte-nom{fill:#595959;stroke:#fff}
.orange-dashboard.charte-orange .orange-carte-ville .b{stroke:#000;stroke-width:1.2;filter:none}
.orange-dashboard.charte-orange .orange-carte-ville .b.n1{fill:#FFD200}
.orange-dashboard.charte-orange .orange-carte-ville .b.n2{fill:#FFA500}
.orange-dashboard.charte-orange .orange-carte-ville .b.n3{fill:#FF7900}
.orange-dashboard.charte-orange .orange-carte-ville .b.n4{fill:#CD3C14}
.orange-dashboard.charte-orange .orange-carte-ville .c.n1,.orange-dashboard.charte-orange .orange-carte-ville .c.n2,.orange-dashboard.charte-orange .orange-carte-ville .c.n3{fill:#000}
.orange-dashboard.charte-orange .orange-carte-ville .c.n4{fill:#fff}
.orange-dashboard.charte-orange .orange-carte-ville .pilule{fill:#fff;stroke:#000;stroke-width:.8}
.orange-dashboard.charte-orange .orange-carte-ville .nom{fill:#000}
.orange-dashboard.charte-orange .orange-carte-ville .ring{stroke:#000;stroke-width:2.4}
.orange-dashboard.charte-orange .orange-carte-ville.sel .pilule{stroke:#000;stroke-width:1.8}
.orange-dashboard.charte-orange .orange-carte-ville:hover .b,.orange-dashboard.charte-orange .orange-carte-ville:focus-visible .b{stroke-width:2.6}
.orange-dashboard.charte-orange .orange-carte-legende,.orange-dashboard.charte-orange .orange-carte-total,.orange-dashboard.charte-orange .orange-carte-hors{background:#fff;border:1px solid #DDDDDD;color:#000}
.orange-dashboard.charte-orange .orange-carte-legende i{border:1px solid #000;box-shadow:none}
.orange-dashboard.charte-orange .orange-carte-legende i.n1{background:#FFD200}
.orange-dashboard.charte-orange .orange-carte-legende i.n2{background:#FFA500}
.orange-dashboard.charte-orange .orange-carte-legende i.n3{background:#FF7900}
.orange-dashboard.charte-orange .orange-carte-legende i.n4{background:#CD3C14}
.orange-dashboard.charte-orange .orange-carte-total>svg{background:#FF7900;color:#000}
.orange-dashboard.charte-orange .orange-carte-total small{color:#595959}

/* ---- restes repérés par un balayage de toutes les couleurs affichées ---- */
.orange-dashboard.charte-orange b,.orange-dashboard.charte-orange strong,.orange-dashboard.charte-orange .orange-status{color:#000}
.orange-dashboard.charte-orange .orange-status-arrow{color:#000}
.orange-dashboard.charte-orange .orange-dot{box-shadow:0 0 0 1px #000}
.orange-dashboard.charte-orange .orange-dot.ok,.orange-dashboard.charte-orange .orange-status.ok .orange-dot{background:#50BE87}
.orange-dashboard.charte-orange .orange-progress{background:#EEEEEE}
.orange-dashboard.charte-orange .orange-progress i{background:#333}
.orange-dashboard.charte-orange .orange-pt{box-shadow:0 0 0 1px #000}
.orange-dashboard.charte-orange td,.orange-dashboard.charte-orange td.num{border-bottom-color:#DDDDDD}
/* « Actualiser » : orange, texte noir (7,99). Une règle plus précise le rendait noir. */
.orange-dashboard.charte-orange .orange-filters .orange-refresh{background:#FF7900;color:#000;border:1px solid #000}
.orange-dashboard.charte-orange .orange-filters .orange-refresh:hover{background:#000;color:#fff}
.orange-dashboard.charte-orange .orange-status-row .orange-status-arrow,.orange-dashboard.charte-orange .orange-status-row.active .orange-status-arrow{color:#000}

/* ---- audit de la charte : défauts trouvés en mesurant ------------------ */
/* THÈME SOMBRE. Il colore en sombre les lignes PAIRES des tableaux
   (`tr:nth-child(even)`) et leur survol : texte noir sur fond sombre, contraste
   1,39 (« GTS », « PB non chargé »). Le fond des lignes est donc fixé ici. */
.orange-dashboard.charte-orange .data-table tbody tr,
.orange-dashboard.charte-orange .data-table tbody tr:nth-child(even){background:#fff}
.orange-dashboard.charte-orange .data-table tbody tr:hover{background:#F4F4F4}
.orange-dashboard.charte-orange .orange-ent-table tbody tr.orange-nous{background:#FFF6EC}
/* INTERRUPTEUR. Piste éteinte #999 sur blanc : 2,85, sous les 3:1 demandés à un
   élément d'interface (WCAG 1.4.11). #666 : 5,7. */
.orange-dashboard.charte-orange .orange-switch-piste{background:#666}
/* FOCUS CLAVIER. Dans un en-tête noir, l'anneau noir de la charte est invisible ;
   l'orange de marque fait 7,99 sur noir. */
.orange-dashboard.charte-orange .orange-tri:focus-visible{outline:2px solid #FF7900;outline-offset:-4px}
/* FOND DU TABLEAU. La racine gardait #F7F9FB, un gris-bleu hérité d'une ancienne
   couche et absent de la palette d'Orange. Elle reçoit le gris #EEE de la charte.
   Un fond CLAIR et opaque est nécessaire : dans le thème sombre de KORA, un fond
   transparent mettrait les messages (« Actualisation… ») en noir sur fond sombre. */
.orange-dashboard.charte-orange{background:#EEEEEE;padding:14px;border-radius:14px}

/* ---------------------------------------------------------------------
 *  MATÉRIEL ET POSE — FORMULAIRE DU TECHNICIEN
 *  Pensé pour un téléphone en extérieur : champs hauts, boutons larges.
 * ------------------------------------------------------------------- */
.ter-champ{display:grid;gap:5px;font-size:12.5px;font-weight:600;color:var(--texte)}
.ter-champ[hidden]{display:none}
.ter-champ>span b{color:var(--rouge)}
.ter-champ input,.ter-champ select{width:100%;min-height:44px;box-sizing:border-box;font-size:16px}
.ter-mat-ligne{display:grid;grid-template-columns:minmax(0,1fr) 84px 44px;gap:8px;margin-bottom:8px}
.ter-mat-ligne input{min-height:44px;box-sizing:border-box;font-size:16px;min-width:0}
.ter-mat-ligne .ter-mat-x{min-height:44px;padding:0}
#ter-gps-carte .ghost,#ter-pose .ghost{min-height:44px}

/* ---------------------------------------------------------------------
 *  DÉTAIL D'UNE ENTREPRISE POUR ORANGE
 *  La fenêtre est posée dans <body>, hors du tableau : les jetons de la charte
 *  Orange n'y arrivent pas. Elle porte donc ses couleurs, en dur, tirées de
 *  la même palette (noir, blanc, orange #ff7900, rouge #cd3c14, gris). Le
 *  texte est toujours noir ou blanc ; l'orange sert de fond, de liseré, jamais
 *  de couleur de texte (2,63 sur blanc).
 * ------------------------------------------------------------------- */
.orange-dashboard .orange-ent-lien{all:unset;box-sizing:border-box;cursor:pointer;font-weight:700;color:#000;text-decoration:underline;text-decoration-color:#FF7900;text-decoration-thickness:2px;text-underline-offset:3px}
.orange-dashboard .orange-ent-lien:hover{background:#FFEBD9}
.orange-dashboard .orange-ent-lien:focus-visible{outline:2px solid #000;outline-offset:2px}
.orange-dashboard .orange-ent-aide{font-size:12px;color:#595959;margin:2px 0 8px}
.orange-dashboard .orange-ent-aide:empty{display:none}
#orange-detail .modale-tete{background:#000;color:#fff;border-bottom:4px solid #FF7900}
#orange-detail .modale-tete b{color:#fff}
#orange-detail .modale-sous{color:#DDD}
#orange-detail .modale-x{color:#fff}
.orange-detail{color:#000;font-size:13px}
.orange-detail button{font:inherit}
.orange-detail .od-espace{display:block;margin-bottom:10px;font-weight:700}
.orange-detail .od-espace select{margin-left:8px;height:32px;border:1px solid #666;border-radius:8px;padding:0 8px}
.orange-detail .od-kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-bottom:12px}
.orange-detail .od-kpi{all:unset;box-sizing:border-box;cursor:pointer;border:1px solid #CCC;border-top:4px solid #000;border-radius:10px;padding:10px 12px;display:flex;flex-direction:column;gap:2px;background:#fff}
.orange-detail .od-kpi span{font-size:11px;font-weight:800;color:#595959;text-transform:uppercase;letter-spacing:.03em}
.orange-detail .od-kpi b{font-size:26px;line-height:1.1;color:#000}
.orange-detail .od-kpi.od-tous{border-top-color:#4BB4E6}
.orange-detail .od-kpi.od-echec{border-top-color:#CD3C14}
.orange-detail .od-kpi.od-blocage{border-top-color:#FF7900}
.orange-detail .od-kpi.od-irrealisable{border-top-color:#595959}
.orange-detail .od-kpi.on{background:#FFF6EC;box-shadow:0 0 0 2px #000}
.orange-detail .od-kpi:focus-visible,.orange-detail .od-onglet:focus-visible{outline:2px solid #000;outline-offset:2px}
.orange-detail .od-onglets{display:flex;gap:4px;border-bottom:3px solid #000;margin-bottom:10px;flex-wrap:wrap}
.orange-detail .od-onglet{all:unset;box-sizing:border-box;cursor:pointer;padding:8px 16px;font-weight:800;color:#000;border-radius:8px 8px 0 0}
.orange-detail .od-onglet:hover{background:#EEE}
.orange-detail .od-onglet.on{background:#000;color:#fff}
.orange-detail .od-barre{display:flex;justify-content:space-between;gap:10px;align-items:center;margin-bottom:8px;flex-wrap:wrap}
.orange-detail .od-barre input{flex:1;min-width:220px;max-width:430px;height:34px;border:1px solid #666;border-radius:8px;padding:0 10px;color:#000;background:#fff}
.orange-detail .od-compte{color:#595959;font-size:12px}
.orange-detail .od-tableau{overflow:auto;max-height:50vh;border:1px solid #DDD;border-radius:10px}
.orange-detail .od-table{width:100%;border-collapse:separate;border-spacing:0;font-size:12.5px}
.orange-detail .od-table th{position:sticky;top:0;background:#000;color:#fff;text-align:left;padding:8px 10px;white-space:nowrap;z-index:2}
.orange-detail .od-table td{padding:7px 10px;border-bottom:1px solid #EEE;vertical-align:top;color:#000;background:#fff}
.orange-detail .od-table tbody tr:hover td{background:#F4F4F4}
.orange-detail .od-n{text-align:right}
/* ND, statut, plaque, technicien, date et âge sur UNE ligne : « 2026-09- / 05 » se lisait mal. */

.orange-detail .od-com{max-width:260px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.orange-detail .od-pill{display:inline-block;padding:2px 9px;border-radius:999px;font-weight:700;font-size:11.5px;border:1px solid #CCC;background:#EEE;color:#000;white-space:nowrap}
.orange-detail .od-p-blocage{background:#FFEBD9;border-color:#FF7900}
.orange-detail .od-p-echec{background:#F9E3DD;border-color:#CD3C14}
.orange-detail .od-p-irrealisable{background:#DDD;border-color:#595959}
.orange-detail .od-p-termine{background:#E5F5ED;border-color:#50BE87}
.orange-detail .od-p-cours{background:#E4F4FB;border-color:#4BB4E6}
.orange-detail .od-pied{display:flex;justify-content:center;align-items:center;gap:14px;margin-top:10px}
.orange-detail .od-pied button{height:32px;padding:0 14px;border:1px solid #666;border-radius:8px;background:#fff;color:#000;font-weight:700;cursor:pointer}
.orange-detail .od-pied button:disabled{opacity:.4;cursor:default}
.orange-detail .od-rapport{display:flex;justify-content:space-between;gap:12px;align-items:center;border:1px solid #DDD;border-left:4px solid #FF7900;border-radius:10px;padding:12px 14px;margin-bottom:8px}
.orange-detail .od-sous{color:#595959;font-size:12px}
.orange-detail .od-telecharger{background:#FF7900;color:#000;border:0;border-radius:8px;padding:9px 16px;font-weight:800;cursor:pointer;white-space:nowrap}
.orange-detail .od-telecharger:hover:not(:disabled){background:#000;color:#fff}
.orange-detail .od-telecharger:disabled{background:#DDD;color:#595959;cursor:not-allowed}
.orange-detail .od-note{color:#595959;font-size:12px;margin:8px 0 0}
.orange-detail .od-vide{padding:18px;text-align:center;color:#595959}
@media(max-width:700px){.orange-detail .od-kpis{grid-template-columns:repeat(2,1fr)}}

/* ---------------------------------------------------------------------
 *  ÉCRAN PLATEFORME (thème de KORA)
 * ------------------------------------------------------------------- */
.pf-champ{display:block;margin-bottom:12px;font-weight:700}
.pf-champ input{display:block;width:100%;margin-top:4px;padding:9px 10px;border:1px solid var(--border-fort);border-radius:8px;font:inherit;font-weight:400;background:var(--card);color:var(--texte);box-sizing:border-box}
.pf-erreur{color:var(--rouge);font-weight:700;min-height:1.3em}
.pf-mdp{display:flex;gap:10px;align-items:center;background:var(--fond);border:1px solid var(--border-fort);padding:10px 12px;border-radius:8px}
.pf-mdp code{flex:1;font-size:16px;font-weight:800;letter-spacing:.04em;word-break:break-all}

/* ---------------------------------------------------------------------
 *  DÉBLOQUÉS ET FILTRES DU DÉTAIL ORANGE · LISTE DÉROULANTE DU TECHNICIEN
 * ------------------------------------------------------------------- */
.orange-detail .od-kpis{grid-template-columns:repeat(5,1fr)}
.orange-detail .od-kpi.od-debloque{border-top-color:#FFD200}
.orange-detail .od-p-debloque{background:#FFF6CC;border-color:#FFD200}
.orange-detail .od-barre select{height:34px;border:1px solid #666;border-radius:8px;padding:0 8px;background:#fff;color:#000;max-width:210px}
.orange-detail .od-barre input{flex:1 1 180px;min-width:160px;max-width:260px}
@media(max-width:900px){.orange-detail .od-kpis{grid-template-columns:repeat(3,1fr)}}
@media(max-width:700px){.orange-detail .od-kpis{grid-template-columns:repeat(2,1fr)}}
.ter-probleme{display:block;width:100%;padding:13px 12px;font-size:16px;border:1px solid var(--border-fort);border-radius:10px;background:var(--card);color:var(--texte)}
/* Les champs « Référence PB », « Câble », « Clamps » et « Commentaire » dépassaient du bloc, à droite. */
#ter-pb,#ter-cable,#ter-clamps,#ter-com{box-sizing:border-box;width:100%}

/* ---------------------------------------------------------------------
 *  MÊMES COLONNES QUE L'ÉCRAN DOSSIERS (19 colonnes) : tableau plus large, défilant ;
 *  « ID dossier » et « ND » restent en place à gauche, comme dans l'écran d'origine.
 * ------------------------------------------------------------------- */
#orange-detail .modale{max-width:min(1320px,97vw);width:97vw}
.orange-detail .od-table th,.orange-detail .od-table td{white-space:nowrap}
.orange-detail .od-table td.od-com{max-width:300px;overflow:hidden;text-overflow:ellipsis}
.orange-detail .od-table td.od-masque{color:#595959;font-style:italic}
.orange-detail .od-table .od-gel1,.orange-detail .od-table td.od-id{position:sticky;left:0;min-width:96px;width:96px;max-width:96px;z-index:3;box-sizing:border-box}
.orange-detail .od-table .od-gel2,.orange-detail .od-table td.od-nd{position:sticky;left:96px;min-width:124px;z-index:3;border-right:2px solid #DDD;box-sizing:border-box}
.orange-detail .od-table th.od-gel1,.orange-detail .od-table th.od-gel2{z-index:5}
.orange-detail .od-table tbody tr:hover td.od-id,.orange-detail .od-table tbody tr:hover td.od-nd{background:#F4F4F4}
/* Plateforme : dossiers à vérifier (chargés avant le contrôle d'import). */
.pf-bandeau{margin:0 0 14px;padding:12px 14px;border:1px solid var(--rouge);border-left:6px solid var(--rouge);border-radius:10px;background:var(--rouge-fond);color:var(--texte)}
.pf-bandeau b{color:var(--rouge)}
.pf-alerte{color:var(--rouge)}

/* Page de connexion : « rester connecté » (réservé aux techniciens). */
#login-form .login-rester{display:grid;grid-template-columns:auto 1fr;column-gap:9px;align-items:start;margin:2px 0 14px;font-size:13.5px;cursor:pointer;color:var(--texte);font-weight:600}
#login-form .login-rester input{margin:3px 0 0;width:auto;padding:0}
#login-form .login-rester small{display:block;margin-top:2px;font-size:12px;color:var(--texte-doux);font-weight:400}

/* ---------------------------------------------------------------------
 *  COMPTE ORANGE : BARRE DE MENU AUX COULEURS D'ORANGE
 *  Orange #FF7900 en fond, noir en texte (7,98 : l'orange ne porte jamais de texte blanc, 2,63),
 *  élément actif en noir. Posé sur le rôle, pas sur un thème : le menu d'Orange reste orange
 *  quel que soit le thème choisi ; les autres comptes ne changent pas.
 * ------------------------------------------------------------------- */
body.role-orange{
  --menu-fond:#FF7900; --menu-texte:#000000; --menu-actif:#000000; --menu-actif-t:#FFFFFF;
  --menu-titre:#000000; --menu-filet:rgba(0,0,0,.35); --menu-survol:#F16E00; --menu-bordure:#FFFFFF;
}
body.role-orange .sidebar .brand{ border-bottom-color:rgba(0,0,0,.35) }
body.role-orange nav .nav-item:not(.active){ font-weight:600 }
body.role-orange nav .nav-item:hover:not(.active){ color:#000 }
body.role-orange .sidebar :focus-visible{ outline:3px solid #000; outline-offset:2px }
body.role-orange nav .nav-item.active:focus-visible{ outline-color:#FFFFFF }
body.role-orange .sidebar-compte{ background:rgba(0,0,0,.10); border-color:rgba(0,0,0,.40) }
body.role-orange .sidebar-compte b,
body.role-orange .sidebar-compte span{ color:#000 }
body.role-orange .sidebar-compte button,
body.role-orange #logout-side{ background:#000 !important; border:1px solid #000 !important; color:#FFF !important }
body.role-orange .sidebar-compte button:hover,
body.role-orange #logout-side:hover{ background:#FFF !important; border-color:#000 !important; color:#000 !important }
body.role-orange .sidebar-footer{ border-top-color:rgba(0,0,0,.35) }
body.role-orange .sidebar .status-dot{ box-shadow:0 0 0 2px #000 }

/* === Espace technicien : rubriques, numéros, infos client, compte inactif === */
.ter-tabs{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; margin:0 0 14px }
.ter-tab{ display:flex; flex-direction:column; align-items:center; gap:2px; padding:11px 6px; border-radius:12px;
  border:1px solid var(--border); background:#fff; color:var(--texte-doux); font-weight:700; font-size:12.5px; cursor:pointer;
  text-transform:uppercase; letter-spacing:.03em; line-height:1.2; text-align:center }
.ter-tab b{ font-size:20px; color:var(--texte) }
.ter-tab.on{ background:var(--navy); border-color:var(--navy); color:#fff; box-shadow:0 3px 10px rgba(10,20,32,.18) }
.ter-tab.on b{ color:#fff }
.ter-lecture{ background:#FFF4E0; border:1px solid #E8D5B0; color:#8A5A00; border-radius:10px; padding:10px 13px; font-size:13px; margin:0 0 14px }
.ter-grise{ opacity:.45; pointer-events:none; filter:grayscale(.6) }
.ter-infos{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px 16px }
.ter-info{ min-width:0; padding:0; background:none }
.ter-info span{ margin-bottom:2px }
.tel-liste{ display:grid; gap:8px; margin-top:14px }
.tel-ligne{ display:grid; grid-template-columns:minmax(0,1fr) auto auto; gap:8px; align-items:center;
  padding:9px 10px 9px 13px; border:1px solid var(--border); border-radius:12px; background:#FAFBFC }
.tel-num span{ display:block; font-size:10.5px; font-weight:700; text-transform:uppercase; color:var(--texte-doux); letter-spacing:.03em }
.tel-num b{ font-size:17px; letter-spacing:.02em; white-space:nowrap }
.tel-btn{ display:inline-flex; align-items:center; justify-content:center; min-height:42px; padding:0 15px; border-radius:10px;
  font-weight:700; font-size:13.5px; text-decoration:none; white-space:nowrap }
.tel-appel{ background:#2F6B2F; color:#fff }
.tel-wa{ background:#fff; color:#1E7F46; border:1.5px solid #1E7F46 }
@media(max-width:380px){ .tel-ligne{ grid-template-columns:1fr 1fr } .tel-num{ grid-column:1 / -1 } }
.ter-item2{ border:1px solid var(--border); border-radius:12px; padding:13px 14px; margin-bottom:10px; background:#fff; display:grid; gap:6px; cursor:pointer }
.ter-item2 .ti-t{ display:flex; gap:8px; align-items:center; flex-wrap:wrap; font-size:15px }
.ter-item2 .ti-p span{ display:block; font-size:10.5px; font-weight:700; text-transform:uppercase; color:var(--texte-doux) }
.ter-item2 .ti-p b{ font-size:13.5px; font-weight:600 }
.ter-item2 button{ justify-self:start; padding:8px 14px; font-size:13px }
.au-choix{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px }

/* ---------------------------------------------------------------------
 *  IMPORT : LA DEMANDE DE TRANSFERT EN ÉVIDENCE · PASTILLE DU MENU PLATEFORME
 * ------------------------------------------------------------------- */
.import-refus{margin-top:6px;padding:12px 14px;border:1px solid var(--rouge);border-left:6px solid var(--rouge);border-radius:10px;background:var(--rouge-fond);color:var(--texte)}
.import-refus-titre{font-weight:800;font-size:14px;color:var(--rouge);margin-bottom:3px}
.import-refus p{margin:3px 0 0}
.import-demande{margin-top:12px;padding:14px 16px;border:2px solid var(--orange);border-left-width:8px;border-radius:10px;background:var(--orange-fond);color:var(--texte);font-size:14px}
.import-demande-titre{font-size:15px;font-weight:800;margin-bottom:6px}
.import-demande p{margin:6px 0 0}
.import-demande-ok{border-color:var(--vert-bord);background:var(--vert-clair)}
.nav-item .nav-badge{margin-left:auto;min-width:20px;padding:1px 7px;border-radius:11px;background:#C62828;color:#FFF;font-size:11px;font-weight:800;text-align:center;line-height:1.5}
.nav-item .nav-badge[hidden]{display:none}

/* ---------------------------------------------------------------------
 *  COURBES DE PRODUCTION DU TABLEAU ORANGE : DMR par semaine, reçus / installés / MES
 * ------------------------------------------------------------------- */
/* La carte des reçus / installés / MES est la plus large : ses 7 jours ont des barres larges. */
.orange-prod-grid{display:grid;grid-template-columns:1fr 1.4fr;gap:14px}
@media(max-width:1000px){.orange-prod-grid{grid-template-columns:1fr}}
.orange-prod-note{margin-top:8px;font-size:11.5px;line-height:1.4;color:#595959}

/* La carte « Répartition DMR » est supprimée : la carte nationale occupe toute la largeur. */
.orange-layout-main{grid-template-columns:1fr}
/* Pleine largeur ne veut pas dire 800 px de haut : le pays garde ses proportions, centré dans une carte plafonnée. */
.orange-dashboard .orange-carte{max-height:540px}
/* Tuile « Dossiers en attente » : le jaune de la charte Orange. */
.orange-dashboard.charte-orange .orange-kpi.jaune{border-top-color:#FFD200}

/* ---------------------------------------------------------------------
 *  COLONNE « DOSSIERS » DU TABLEAU PAR ENTREPRISE : ce que l'entreprise détient, toutes dates confondues
 * ------------------------------------------------------------------- */
.orange-dashboard .orange-ent-table td.c-dos span{background:var(--fond);border:1px solid var(--border)}
/* L'en-tête reste NOIR, texte blanc, comme « Entreprise » : seul le filet du bas est gris (les autres colonnes ont leur couleur). */
.orange-dashboard .orange-ent-table thead th.h-dos{border-bottom-color:#8a949e}
.orange-dashboard .orange-ent-table td.c-dos{text-align:center}
.orange-dashboard .orange-hors{display:block;margin-top:2px;font-size:10.5px;font-weight:600;color:#595959;text-align:center}

/* ---------------------------------------------------------------------
 *  DOSSIERS D'ORANGE — réservoir (Orange) et reçus (entreprises) ; tuiles à sept
 * ------------------------------------------------------------------- */
.orange-kpis.sept{grid-template-columns:repeat(7,1fr)}
@media(max-width:1300px){.orange-kpis.sept{grid-template-columns:repeat(4,1fr)}}
@media(max-width:700px){.orange-kpis.sept{grid-template-columns:repeat(2,1fr)}}
.res-onglets{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:10px}
.res-onglet{border:1px solid var(--border);background:#fff;color:#1f2933;border-radius:8px;padding:7px 12px;font-weight:600;cursor:pointer}
.res-onglet b{margin-left:4px}
.res-onglet.actif{background:#000;color:#fff;border-color:#000}
.res-outils{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-bottom:10px}
.res-outils .search{min-width:180px}
.res-sel{font-weight:700;color:#1f2933;font-size:13px}
.res-table td{vertical-align:top}
.res-refus{margin-top:3px;font-size:12px;color:#8a2d0b}
.res-sans-nd{color:#8a2d0b;font-weight:600;font-size:12.5px}
.res-fiche{display:grid;grid-template-columns:1fr 1fr;gap:4px 14px}
.res-fiche .res-large{grid-column:1/-1}
@media(max-width:700px){.res-fiche{grid-template-columns:1fr}}
.pf-repart{color:#8a2d0b;font-size:12.5px}
/* Listes déroulantes et zones de texte d'un formulaire : même présentation que les zones de saisie (elles s'affichaient
   petites, collées à leur libellé). */
.pf-champ select,.pf-champ textarea{display:block;width:100%;margin-top:4px;padding:9px 10px;border:1px solid var(--border-fort);border-radius:8px;font:inherit;font-weight:400;background:var(--card);color:var(--texte);box-sizing:border-box}
.res-outils button:disabled{opacity:.45;cursor:not-allowed}

/* ---------------------------------------------------------------------
 *  DOUBLE AUTHENTIFICATION · MON COMPTE
 * ------------------------------------------------------------------- */
.login-2fa h2{font-size:19px;margin:0 0 8px}
.login-2fa p{margin:0 0 10px;font-size:14px}
.login-2fa label:not(.login-rester){display:block;margin:10px 0}
/* Seul le champ du code est en grand : pas la case à cocher « J'ai noté ». */
#dfa-code{display:block;width:100%;margin-top:4px;font-size:20px;letter-spacing:4px;text-align:center;box-sizing:border-box}
.login-2fa .login-rester{display:grid;grid-template-columns:auto 1fr;column-gap:9px;align-items:center;margin:12px 0;font-size:13.5px;font-weight:600;cursor:pointer;color:var(--texte)}
/* .login-card input met tout champ à 100 % : la case à cocher reprend sa taille naturelle, collée à son texte. */
.login-2fa .login-rester input{width:auto;margin:0;padding:0}
.login-2fa button:disabled{opacity:.45;cursor:not-allowed}
.dfa-etapes{margin:0 0 10px 18px;padding:0;font-size:13.5px;line-height:1.5}
.dfa-qr{display:flex;justify-content:center;margin:8px 0}
.dfa-qr svg{width:200px;height:200px;background:#fff;border-radius:8px}
.dfa-cle{font-size:13px;margin-bottom:6px}
.dfa-cle code{display:block;margin-top:6px;font-size:14px;word-break:break-all;background:var(--card);padding:6px 8px;border-radius:6px;border:1px solid var(--border)}
.dfa-aide{font-size:12.5px;color:var(--texte-doux,#4b5563)}
.dfa-codes{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin:8px 0 10px}
.dfa-codes code{font-size:15px;text-align:center;padding:6px;border:1px solid var(--border);border-radius:6px;background:var(--card);letter-spacing:1px}
#user-chip{cursor:pointer;border-radius:10px}
#user-chip:hover,#user-chip:focus-visible{outline:2px solid var(--orange);outline-offset:2px}
.mc-ligne{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:12px 0;border-bottom:1px solid var(--border);flex-wrap:wrap}
.mc-ligne .sub{font-size:12.5px;margin-top:2px}
.mc-actions{display:flex;gap:6px;flex-wrap:wrap}
#mc-dfa-zone{margin-top:10px}

/* ===== MATÉRIEL (écran « Stock matériel ») ===== */
.stk-table td{white-space:normal;vertical-align:top;font-size:12.5px}
.stk-table th{font-size:11px}
.stk-table .num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.stk-table tr.stk-negatif td{background:var(--rouge-fond)}
.stk-table tr.stk-retire td{opacity:.6}
.stk-series{font-family:ui-monospace,Consolas,monospace;font-size:11.5px;word-break:break-all;max-width:360px}
.stk-pastille{display:inline-block;padding:2px 8px;border-radius:999px;font-size:11.5px;font-weight:700;white-space:nowrap}
.stk-pastille.ok{background:var(--vert-clair);color:var(--vert-texte)}
.stk-pastille.attente{background:var(--orange-fond);color:var(--orange)}
.stk-pastille.alerte{background:var(--rouge-fond);color:var(--rouge)}
.stk-pastille.neutre{background:var(--fond);color:var(--texte-doux)}
.stk-actions{display:flex;gap:6px;flex-wrap:wrap;align-items:center}
.stk-actions button{padding:5px 10px;font-size:12px}
.stk-raisons{font-size:11.5px;margin-top:4px;line-height:1.45}
.stk-rouge{color:var(--rouge)}
.stk-onglets{margin-bottom:12px}
.stk-alertes .enc{margin-bottom:8px}
.stk-alertes .enc:last-child{margin-bottom:0}
.stk-ligne{display:grid;grid-template-columns:minmax(0,1fr) 130px 40px;gap:8px;margin-bottom:8px;align-items:start}
.stk-ligne select,.stk-ligne input,.stk-ligne textarea{min-width:0;padding:8px;border:1px solid var(--border);border-radius:7px;font-size:13px;box-sizing:border-box;width:100%}
.stk-ligne textarea{grid-column:1 / 3;font-family:ui-monospace,Consolas,monospace}
.stk-ligne .stk-aide{grid-column:1 / -1;font-size:11.5px}
.stk-ligne .stk-aide:empty{display:none}
.stk-fiche{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:8px 16px;margin-bottom:12px}
.stk-fiche div{display:flex;flex-direction:column;gap:2px}
.stk-fiche span{font-size:11px;color:var(--texte-doux);text-transform:uppercase;letter-spacing:.04em}
.stk-grille{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:0 14px}
.stk-case{display:flex;gap:8px;align-items:center;font-weight:600}
.stk-cases{display:flex;flex-wrap:wrap;gap:4px 12px;font-family:ui-monospace,Consolas,monospace;font-size:12px}
.stk-cases label{display:inline-flex;gap:4px;align-items:center}
.stk-a-confirmer button{padding:7px 12px}
button.lien{background:none;border:0;padding:0 4px;color:var(--bleu);text-decoration:underline;cursor:pointer;font-size:12px}
.ter-mat-ligne .ter-mat-s{grid-column:1 / -1;font-family:ui-monospace,Consolas,monospace;text-transform:uppercase}
@media (max-width:640px){.stk-ligne{grid-template-columns:minmax(0,1fr) 90px 40px}.stk-ligne textarea{grid-column:1 / -1}}
.ter-mat-ligne .ter-mat-s::placeholder{text-transform:none}
.ter-mat-ligne select.ter-mat-d{min-height:44px;font-size:15px;min-width:0;width:100%;box-sizing:border-box;padding:0 8px;border:1px solid var(--border);border-radius:8px;background:#fff}
.ter-mat-ligne .ter-mat-q[hidden]{display:none}
.ter-mat-choix .ter-mat-q[hidden]~.ter-mat-x{grid-column:3}
.ter-mat-sz{grid-column:1 / -1;display:grid;gap:6px;padding:8px 10px;border:1px dashed var(--border);border-radius:8px}
.ter-mat-st{font-size:12px;font-weight:700;color:var(--texte-doux)}
.ter-mat-cases{display:flex;flex-wrap:wrap;gap:6px 14px;font-family:ui-monospace,Consolas,monospace;font-size:13px}
.ter-mat-cases label{display:inline-flex;gap:6px;align-items:center;min-height:32px}
.ter-mat-cases input{width:20px;height:20px}
[data-theme="sombre"] .ter-mat-ligne select.ter-mat-d{background:var(--card)}
.ter-mat-choix:has(.ter-mat-q[hidden]) select.ter-mat-d{grid-column:1 / 3}

/* ===== Impression des documents du stock (bons, états, rapports) ===== */
#stk-impression{display:none}
@page stkdoc{size:A4 portrait;margin:12mm}
@media print{
  body.impression-stk > *:not(#stk-impression){display:none !important}
  body.impression-stk{background:#fff !important}
  body.impression-stk #stk-impression{display:block;page:stkdoc;font-family:Arial,Helvetica,sans-serif;font-size:10pt;color:#000}
}
#stk-impression .imp-tete{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;border-bottom:2px solid #12559B;padding-bottom:8px;margin-bottom:12px}
#stk-impression .imp-emetteur{display:flex;align-items:center;gap:10px;font-size:11pt}
#stk-impression .imp-emetteur img{max-height:42px;max-width:150px}
#stk-impression .imp-titre{text-align:right}
#stk-impression h1{font-size:15pt;margin:0 0 3px;color:#12559B}
#stk-impression .imp-titre span{font-size:8.5pt;color:#444}
#stk-impression h2{font-size:11pt;margin:14px 0 6px;color:#12283C;break-after:avoid}
#stk-impression .imp-saut{break-before:page}
#stk-impression table{width:100%;border-collapse:collapse;margin-bottom:8px}
#stk-impression .imp-infos th,#stk-impression .imp-infos td{border:1px solid #999;padding:4px 6px;text-align:left;vertical-align:top;font-size:9.5pt}
#stk-impression .imp-infos th{background:#EEF3F8;width:15%;white-space:nowrap}
#stk-impression .imp-table th{background:#12559B;color:#fff;font-size:8.5pt;padding:4px 5px;text-align:left;border:1px solid #12559B;-webkit-print-color-adjust:exact;print-color-adjust:exact}
#stk-impression .imp-table td{border:1px solid #bbb;padding:3px 5px;font-size:9pt;vertical-align:top}
#stk-impression .imp-table tr{break-inside:avoid}
#stk-impression .imp-table thead{display:table-header-group}
#stk-impression .n{text-align:right;white-space:nowrap}
#stk-impression .s{font-family:Consolas,monospace;font-size:7.5pt;word-break:break-all}
#stk-impression .imp-groupe td{border-top:2px solid #12559B}
#stk-impression .imp-petit{font-size:8pt;color:#555}
#stk-impression .imp-total{text-align:right;font-size:9pt;margin:2px 0 8px}
#stk-impression .imp-note{font-size:8.5pt;color:#333}
#stk-impression .imp-signatures{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:22px;break-inside:avoid}
#stk-impression .imp-signatures div{border:1px solid #999;min-height:85px;padding:6px 8px;display:flex;flex-direction:column;gap:2px}
#stk-impression .imp-signatures i{margin-top:auto;font-size:8pt;color:#666}
#stk-impression .imp-pied{margin-top:14px;font-size:7.5pt;color:#777;border-top:1px solid #ccc;padding-top:4px}

/* TÉMOIN DE CHARGEMENT. Dernière règle du fichier : si elle est lue, la feuille
   entière l'a été. La page attend ce témoin avant de s'afficher (voir index.html). */

/* ===== Conditions affichées SOUS l'action ou le problème choisi (espace technicien) ===== */
.ter-cond{margin-top:12px;padding:10px 12px;border-radius:10px;border:1px solid var(--border);
  border-left:4px solid var(--orange,#F0A030);background:var(--orange-fond,#FFF8EC)}
.ter-cond-t{font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.02em;color:var(--texte);margin-bottom:6px}
.ter-cond-l{display:flex;align-items:center;gap:8px;font-size:13.5px;padding:4px 0;color:var(--rouge)}
.ter-cond-l.ok{color:var(--vert-texte)}
.ter-cond-l b{flex:0 0 auto}
.ter-cond-l span{flex:1 1 auto}
.ter-cond-l .ghost{flex:0 0 auto;padding:6px 10px;font-size:12.5px;min-height:36px}
.ter-prob-champs{display:grid;gap:10px}
.ter-prob-champs>.ter-champ:not([hidden]){margin-top:12px}
/* Le bloc « Pourquoi le client ne veut plus… » portait un display:grid en ligne qui annulait l'attribut
   hidden : la question restait affichée en permanence, sur tous les retours. */
#ter-retr-bloc[hidden]{display:none!important}

/* ===== BARRE D'ACTIONS DU STOCK (v46) =====
   Les actions étaient de petits boutons de 12 px serrés à droite du titre, avec un lien « Modèle Excel »
   à peine visible. Elles forment désormais une barre pleine largeur sous le titre, rangée par familles
   (Entrées, Sorties, Document), boutons de 40 px de haut, une icône par action. */
.stk-barre{display:flex;flex-wrap:wrap;gap:10px 22px;align-items:flex-end;padding:12px 14px;margin:0 0 14px;
  background:var(--fond,#F4F7FB);border:1px solid var(--border);border-radius:12px}
.stk-groupe{display:flex;flex-wrap:wrap;gap:8px;align-items:center;position:relative}
.stk-groupe + .stk-groupe{padding-left:22px;border-left:1px solid var(--border)}
.card-head .stk-imprimer{min-height:38px;padding:8px 16px;font-size:13.5px;font-weight:600;color:var(--blue);border:1.5px solid var(--blue);background:#fff;border-radius:9px;cursor:pointer;white-space:nowrap}
.card-head .stk-imprimer:hover{background:#EAF2FC}
.stk-groupe-t{flex-basis:100%;font-size:11px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--texte-doux);margin-bottom:-2px}
.stk-barre button{min-height:40px;padding:9px 16px;font-size:14px;font-weight:600;border-radius:9px;white-space:nowrap;cursor:pointer}
.stk-barre button.primary{box-shadow:0 2px 6px rgba(11,78,162,.25)}
.stk-barre button.stk-b2{color:var(--blue);border:1.5px solid var(--blue);background:#fff}
.stk-barre button.stk-b2:hover{background:#EAF2FC}
.stk-barre button.stk-b3{color:var(--texte);border:1.5px dashed var(--border);background:#fff}
.stk-barre button.stk-b3:hover{border-color:var(--blue);color:var(--blue)}
.stk-barre button.stk-b-alerte{color:var(--rouge);border:1.5px solid var(--rouge);background:#fff}
.stk-barre button.stk-b-alerte:hover{background:var(--rouge-fond,#FDECEA)}
[data-theme="sombre"] .stk-barre{background:#1B222C}
[data-theme="sombre"] .stk-barre button.stk-b2,[data-theme="sombre"] .stk-barre button.stk-b3,[data-theme="sombre"] .stk-barre button.stk-b-alerte{background:#232B36}
@media (max-width:760px){
  .stk-groupe + .stk-groupe{padding-left:0;border-left:0}
  .stk-barre button{flex:1 1 auto}
}

/* ===== ALERTES DU STOCK EN TABLEAU (v47) ===== */
.card-head:has(.stk-imprimer){display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}
.stk-tete-actions{display:flex;gap:8px;flex-wrap:wrap}
.card-head .stk-imprimer.stk-b-discret{color:var(--texte-doux);border-color:var(--border)}
.stk-table-alertes tr.stk-ligne-rupture td{background:var(--rouge-fond,#FDECEA)}
.stk-table-alertes td{vertical-align:middle}
.stk-al-autres{margin-top:12px}
.stk-al-autres .enc{margin-bottom:8px}

/* TÉMOIN DE CHARGEMENT : doit rester la dernière règle du fichier (voir index.html). */
:root{--kora-css:1}

/* CLOCHE DES RETOURS : fenêtre large, champs et boutons alignés sur une grille. */
.retour-decision .rt-edition{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; margin-top:10px; align-items:end }
.retour-decision .rt-edition label{ display:flex; flex-direction:column; gap:3px; font-size:12px; color:var(--texte-doux) }
.retour-decision .rt-edition label[hidden]{ display:none }
.retour-decision select, .retour-decision input{
  width:100%; box-sizing:border-box; min-height:36px; padding:6px 9px;
  border:1px solid var(--border); border-radius:7px; font-size:12.5px }
.retour-decision .rt-actions{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; margin-top:10px }
.retour-decision .rt-actions button{
  width:100%; min-height:38px; padding:0 10px; white-space:nowrap;
  display:flex; align-items:center; justify-content:center; gap:6px }
.retour-decision .rt-panneau{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr) auto; gap:8px; margin-top:8px; align-items:center }
.retour-decision .rt-panneau[hidden]{ display:none }
.retour-decision .rt-renv{ grid-template-columns:minmax(0,1fr) auto }
.retour-decision .rt-panneau button{ min-height:36px; padding:0 18px; white-space:nowrap }
.retour-decision .rt-note{ grid-column:1 / -1; font-size:11.5px }
@media (max-width:760px){
  .retour-decision .rt-edition, .retour-decision .rt-actions,
  .retour-decision .rt-panneau, .retour-decision .rt-renv{ grid-template-columns:1fr }
}

/* MODE SOMBRE : éléments de l'espace technicien et de la barre du haut dont le fond clair était écrit en dur. */
[data-theme="sombre"] .select-wrap,[data-theme="sombre"] .icon-btn,
[data-theme="sombre"] .ter-case,[data-theme="sombre"] .ter-item,[data-theme="sombre"] .ter-item2,
[data-theme="sombre"] .ter-tab,[data-theme="sombre"] .tel-ligne{ background:var(--card); color:var(--texte) }
[data-theme="sombre"] .ter-tab.on{ background:var(--navy); color:#fff }
[data-theme="sombre"] .tel-wa{ background:transparent; color:#5FD08A; border-color:#5FD08A }
[data-theme="sombre"] .ter-lecture{ background:#2E2415; border-color:#5A4520; color:#E8A33D }
[data-theme="sombre"] .k-vue-attente,[data-theme="sombre"] .k-vue-t{ color:var(--texte) }

/* =====================================================================
 *  MODE SOMBRE — corrections finales de lisibilité
 *  (placées en fin de feuille pour l'emporter sur les règles précédentes)
 * ===================================================================== */
/* Tableau de bord Orange (« charte Orange ») : ses jetons noir / blanc étaient
   figés pour le papier ; en sombre le texte restait noir sur fond sombre.
   On inverse les jetons : tout ce qui les utilise reste cohérent. */
[data-theme="sombre"] .orange-dashboard.charte-orange{
  --o-noir:#F2F2F2; --o-blanc:#2D2D2D;
  --o-g3:#383838; --o-g4:#454545; --o-g5:#5A5A5A; --o-g7:#B8B8B8; --o-g8:#CFCFCF; --o-g9:#E6E6E6;
  --o-bleu-t:#1B333E; --o-vert-t:#1B402E; --o-orange-t:#412D1C; --o-orange-tt:#392A19;
  --o-jaune-t:#463F1E; --o-rouge-t:#41241C;
  --o-rouge:#FF7A5C;
  --card:#2D2D2D; --texte:#F2F2F2; --texte-doux:#C8C8C8; --border:#454545; --border-fort:#777777; --fond:#383838;
  --bleu:#F2F2F2; --bleu-clair:#383838; --bleu-bord:#5A5A5A;
  --orange:#FF8A2B; --orange-fond:#412D1C;
  --vert-texte:#6FD39B; --vert-clair:#1B402E; --vert-bord:#50BE87;
  --rouge:#FF7A5C; --rouge-fond:#41241C; --violet:#C8C8C8; --ardoise:#F2F2F2;
  color:#F2F2F2;
}
/* Diapositive de couverture : le bleu clair du thème sombre ne portait pas le texte blanc. */
[data-theme="sombre"] .diapo-couverture:not(.coperf){ background:#1E4A7A }
[data-theme="sombre"] .diapo-couverture:not(.coperf) p{ color:#B6C6D8 }
/* Bandeau d'avertissement et pastille de marque : ambre clair + texte blanc = illisible. */
[data-theme="sombre"] .modale-tete.attention{ color:#1A1205 }
[data-theme="sombre"] .modale-tete.attention *{ color:inherit }
[data-theme="sombre"] .brand-mark,[data-theme="sombre"] .brand-dot{ color:#1A1205 }
/* Fonds « bleu » portant du texte blanc : le bleu clair du thème sombre (#4E9BE0) donnait 3:1 ;
   un bleu plus profond donne 5,3:1 sans changer l'ambiance. */
[data-theme="sombre"] .diapo-titre,[data-theme="sombre"] .pres-table th,[data-theme="sombre"] .modale-tete:not(.attention),
[data-theme="sombre"] .orange-dashboard:not(.charte-orange) .orange-status-card.active,
[data-theme="sombre"] .orange-dashboard:not(.charte-orange) .orange-period.active,
[data-theme="sombre"] .orange-dashboard:not(.charte-orange) .orange-pop-btn.active,
[data-theme="sombre"] .orange-dashboard:not(.charte-orange) .orange-page.active{ background:#2F6FB5 }
/* Texte « bleu » (liens, boutons secondaires) : bleu clair du thème sombre. */
[data-theme="sombre"] .card-head .stk-imprimer{ color:var(--bleu-fonce); border-color:var(--bleu-fonce) }

/* =====================================================================
 *  THÈME CLAIR — menu blanc : textes écrits en blanc pour un menu sombre
 * ===================================================================== */
[data-theme="clair"] .brand strong,[data-theme="clair"] .marque-nom-cote{ color:#12559B }
[data-theme="clair"] .sidebar-compte{ background:#F2F6FA; border-color:#E4EAF0 }
[data-theme="clair"] .sidebar-compte b{ color:#12283C }
[data-theme="clair"] .sidebar-compte span{ color:#4E6A16 }
[data-theme="clair"] .sidebar-compte button{ color:#12283C; border-color:#C3CFDA }
[data-theme="clair"] .sidebar-compte button:hover{ color:#fff }