*{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}.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(3,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-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;
}

/* --- 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:2px 10px; max-height:210px; overflow:auto;
  grid-template-columns:repeat(auto-fill,minmax(210px,1fr));
  border:1px solid var(--border); border-radius:9px; padding:7px;
}
.tech-case{
  display:flex; gap:7px; align-items:center; font-size:12.5px;
  padding:4px 6px; border-radius:6px; cursor:pointer; min-width:0;
}
.tech-case:hover{ background:var(--fond) }
.tech-case span{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
.tech-case i{
  margin-left:auto; font-style:normal; font-size:10.5px; color:var(--texte-doux);
  flex:0 0 auto; max-width:78px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
@media(max-width:640px){
  .grille-techs{ grid-template-columns:1fr; max-height:230px }
  .tech-case i{ display:none }
}

/* --- 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}