/* =====================================================================
   CRM Green Maintenance Énergies — feuille de style applicative
   Aucune dépendance externe.
   ===================================================================== */

:root {
  /* Palette de marque */
  --vert-900:#052e16; --vert-800:#14532d; --vert-700:#15803d; --vert-600:#16a34a;
  --vert-500:#22c55e; --vert-100:#dcfce7; --vert-050:#f0fdf4;

  --ardoise-900:#0f172a; --ardoise-800:#1e293b; --ardoise-700:#334155;
  --ardoise-600:#475569; --ardoise-500:#64748b; --ardoise-400:#94a3b8;
  --ardoise-300:#cbd5e1; --ardoise-200:#e2e8f0; --ardoise-100:#f1f5f9; --ardoise-050:#f8fafc;

  --bleu:#0284c7;  --bleu-bg:#e0f2fe;
  --indigo:#4f46e5; --indigo-bg:#e0e7ff;
  --violet:#7c3aed; --violet-bg:#ede9fe;
  --orange:#d97706; --orange-bg:#fef3c7;
  --rouge:#dc2626;  --rouge-bg:#fee2e2;
  --vert:#16a34a;   --vert-bg:#dcfce7;
  --gris:#64748b;   --gris-bg:#f1f5f9;

  /* Rôles */
  --fond:#f4f6f4;
  --surface:#ffffff;
  --surface-2:#fafbfa;
  --bordure:#e3e8e3;
  --bordure-forte:#cdd5cd;
  --texte:#16241c;
  --texte-doux:#5b6b61;
  --texte-faible:#8a9990;
  --primaire:var(--vert-700);
  --primaire-clair:var(--vert-050);
  --ombre-s:0 1px 2px rgba(16,32,22,.06);
  --ombre-m:0 2px 8px rgba(16,32,22,.08);
  --ombre-l:0 12px 32px rgba(16,32,22,.14);
  --rayon:10px;
  --rayon-s:7px;
  --barre:246px;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="clair"]) {
    --fond:#0d1512;
    --surface:#141d19;
    --surface-2:#18231e;
    --bordure:#25332c;
    --bordure-forte:#33453b;
    --texte:#e6efe9;
    --texte-doux:#a3b3aa;
    --texte-faible:#7d8f85;
    --primaire:var(--vert-500);
    --primaire-clair:#12291c;
    --bleu-bg:#0c2e42; --indigo-bg:#1e1b4b; --violet-bg:#2e1065;
    --orange-bg:#3f2c06; --rouge-bg:#3f1212; --vert-bg:#0d2f1b; --gris-bg:#1e2a24;
    --bleu:#38bdf8; --indigo:#a5b4fc; --violet:#c4b5fd;
    --orange:#fbbf24; --rouge:#f87171; --vert:#4ade80; --gris:#94a3b8;
    --ombre-l:0 12px 32px rgba(0,0,0,.5);
  }
}

*,*::before,*::after { box-sizing:border-box; }

html { -webkit-text-size-adjust:100%; }

body {
  margin:0;
  font:15px/1.55 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  color:var(--texte);
  background:var(--fond);
  -webkit-font-smoothing:antialiased;
}

a { color:var(--primaire); text-decoration:none; }
a:hover { text-decoration:underline; }
h1,h2,h3,h4 { margin:0; font-weight:650; line-height:1.25; letter-spacing:-.01em; }
h1 { font-size:1.4rem; } h2 { font-size:1.1rem; } h3 { font-size:.97rem; } h4 { font-size:.88rem; }
p { margin:0 0 .7em; }
small { font-size:.8rem; }
code, .mono { font-family:ui-monospace,"SF Mono",Menlo,Consolas,monospace; font-size:.86em; }
.ico { fill:currentColor; vertical-align:-3px; flex:0 0 auto; }

/* ===================================================================
   STRUCTURE
   =================================================================== */

.appli { display:flex; min-height:100vh; }

.barre-laterale {
  width:var(--barre); flex:0 0 var(--barre);
  background:var(--surface);
  color:var(--texte-doux);
  border-right:1px solid var(--bordure);
  display:flex; flex-direction:column;
  position:sticky; top:0; height:100vh;
  z-index:40;
}
.barre-marque {
  display:flex; align-items:center; gap:10px;
  padding:16px 18px; border-bottom:1px solid var(--bordure);
}
.barre-marque .logo {
  width:34px; height:34px; border-radius:9px; flex:0 0 auto;
  background:linear-gradient(135deg,var(--vert-500),var(--vert-700));
  display:grid; place-items:center; color:#fff; font-weight:800; font-size:.8rem;
}
.barre-marque .nom { color:var(--texte); font-weight:650; font-size:.92rem; line-height:1.2; }
.barre-marque .nom span { display:block; color:var(--texte-faible); font-weight:500; font-size:.72rem; }

.barre-nav { flex:1; overflow-y:auto; padding:10px 0 20px; }
.barre-nav::-webkit-scrollbar { width:8px; }
.barre-nav::-webkit-scrollbar-thumb { background:var(--bordure-forte); border-radius:4px; }

.nav-groupe { padding:12px 18px 5px; font-size:.67rem; text-transform:uppercase;
  letter-spacing:.09em; color:var(--texte-faible); font-weight:700; }
.nav-lien {
  display:flex; align-items:center; gap:11px;
  padding:8px 18px; color:var(--texte-doux); font-size:.885rem; font-weight:500;
  border-left:3px solid transparent; transition:background .12s, color .12s;
}
.nav-lien:hover { background:var(--ardoise-050); color:var(--texte); text-decoration:none; }
.nav-lien.actif { background:var(--primaire-clair); color:var(--vert-800);
  border-left-color:var(--vert-600); font-weight:600; }
.nav-lien .ico { opacity:.75; }
.nav-lien.actif .ico { opacity:1; color:var(--vert-700); }
.nav-pastille {
  margin-left:auto; min-width:20px; padding:1px 6px; border-radius:10px;
  background:var(--rouge); color:#fff; font-size:.7rem; font-weight:700; text-align:center;
}
.nav-pastille.calme { background:var(--ardoise-100); color:var(--texte-doux); }

.barre-pied { border-top:1px solid var(--bordure); padding:10px 14px; }
.barre-util { display:flex; align-items:center; gap:9px; padding:5px; border-radius:8px; }
.barre-util:hover { background:var(--ardoise-050); text-decoration:none; }
.avatar {
  width:31px; height:31px; border-radius:50%; flex:0 0 auto;
  display:grid; place-items:center; font-size:.73rem; font-weight:700; color:#fff;
  background:var(--vert-600);
}
.barre-util .qui { min-width:0; }
.barre-util .qui b { display:block; color:var(--texte); font-size:.82rem; font-weight:600;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.barre-util .qui span { color:var(--texte-faible); font-size:.71rem; }

.zone { flex:1; min-width:0; display:flex; flex-direction:column; }

.entete {
  position:sticky; top:0; z-index:30;
  background:color-mix(in srgb, var(--surface) 92%, transparent);
  backdrop-filter:blur(8px);
  border-bottom:1px solid var(--bordure);
  padding:11px 22px;
  display:flex; align-items:center; gap:14px;
}
.entete h1 { flex:0 1 auto; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.entete .actions { margin-left:auto; display:flex; gap:8px; align-items:center; flex-wrap:wrap; }

.contenu { padding:20px 22px 56px; flex:1; }
.contenu > * + * { margin-top:18px; }

.bouton-menu { display:none; }

/* ===================================================================
   RECHERCHE GLOBALE
   =================================================================== */

.recherche-globale { position:relative; flex:1 1 260px; max-width:420px; }
.recherche-globale input {
  width:100%; padding:8px 12px 8px 34px; border-radius:999px;
  border:1px solid var(--bordure); background:var(--surface-2);
  font-size:.88rem; color:var(--texte);
}
.recherche-globale input:focus { outline:2px solid var(--vert-500); outline-offset:-1px; background:var(--surface); }
.recherche-globale .ico-recherche {
  position:absolute; left:11px; top:50%; transform:translateY(-50%);
  color:var(--texte-faible); pointer-events:none;
}
.recherche-resultats {
  position:absolute; top:calc(100% + 6px); left:0; right:0;
  background:var(--surface); border:1px solid var(--bordure); border-radius:var(--rayon);
  box-shadow:var(--ombre-l); overflow:hidden; z-index:60; max-height:60vh; overflow-y:auto;
}
.recherche-resultats a {
  display:block; padding:9px 13px; border-bottom:1px solid var(--bordure); color:var(--texte);
}
.recherche-resultats a:last-child { border-bottom:0; }
.recherche-resultats a:hover, .recherche-resultats a.survol { background:var(--primaire-clair); text-decoration:none; }
.recherche-resultats b { display:block; font-weight:600; font-size:.88rem; }
.recherche-resultats span { color:var(--texte-faible); font-size:.78rem; }
.recherche-vide { padding:14px; color:var(--texte-faible); font-size:.85rem; text-align:center; }

/* ===================================================================
   CARTES & GRILLES
   =================================================================== */

.carte {
  background:var(--surface); border:1px solid var(--bordure);
  border-radius:var(--rayon); box-shadow:var(--ombre-s);
}
.carte-tete {
  display:flex; align-items:center; gap:10px;
  padding:13px 16px; border-bottom:1px solid var(--bordure);
}
.carte-tete h2, .carte-tete h3 { margin:0; }
.carte-tete .actions { margin-left:auto; display:flex; gap:7px; align-items:center; }
.carte-corps { padding:16px; }
.carte-corps.serre { padding:12px; }
.carte-corps > * + * { margin-top:13px; }
.carte-pied {
  padding:11px 16px; border-top:1px solid var(--bordure);
  background:var(--surface-2); border-radius:0 0 var(--rayon) var(--rayon);
  font-size:.85rem;
}

.grille { display:grid; gap:16px; }
.g2 { grid-template-columns:repeat(2,minmax(0,1fr)); }
.g3 { grid-template-columns:repeat(3,minmax(0,1fr)); }
.g4 { grid-template-columns:repeat(4,minmax(0,1fr)); }
.g5 { grid-template-columns:repeat(5,minmax(0,1fr)); }
.g-2-1 { grid-template-columns:2fr 1fr; }
.g-1-2 { grid-template-columns:1fr 2fr; }
.g-3-2 { grid-template-columns:3fr 2fr; }

@media (max-width:1200px) {
  .g5 { grid-template-columns:repeat(3,minmax(0,1fr)); }
  .g4 { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width:980px) {
  .g2,.g3,.g5,.g-2-1,.g-1-2,.g-3-2 { grid-template-columns:minmax(0,1fr); }
}
@media (max-width:620px) {
  .g4 { grid-template-columns:minmax(0,1fr); }
}

/* ===================================================================
   INDICATEURS
   =================================================================== */

.kpi {
  background:var(--surface); border:1px solid var(--bordure); border-radius:var(--rayon);
  padding:14px 15px; box-shadow:var(--ombre-s); position:relative; overflow:hidden;
}
.kpi .titre { font-size:.74rem; text-transform:uppercase; letter-spacing:.05em;
  color:var(--texte-faible); font-weight:700; }
.kpi .valeur { font-size:1.62rem; font-weight:700; letter-spacing:-.02em; margin-top:4px; line-height:1.1; }
.kpi .detail { font-size:.79rem; color:var(--texte-doux); margin-top:3px; }
.kpi.accent-vert   { border-left:3px solid var(--vert); }
.kpi.accent-bleu   { border-left:3px solid var(--bleu); }
.kpi.accent-orange { border-left:3px solid var(--orange); }
.kpi.accent-rouge  { border-left:3px solid var(--rouge); }
.kpi.accent-violet { border-left:3px solid var(--violet); }
.kpi a { color:inherit; }

.mesure { display:flex; align-items:baseline; gap:7px; }
.mesure .unite { font-size:.85rem; color:var(--texte-faible); font-weight:500; }

/* ===================================================================
   BADGES & ÉTIQUETTES
   =================================================================== */

.badge {
  display:inline-flex; align-items:center; gap:4px;
  padding:2px 8px; border-radius:999px;
  font-size:.745rem; font-weight:650; line-height:1.5; white-space:nowrap;
}
.badge-vert{background:var(--vert-bg);color:var(--vert)}
.badge-bleu{background:var(--bleu-bg);color:var(--bleu)}
.badge-indigo{background:var(--indigo-bg);color:var(--indigo)}
.badge-violet{background:var(--violet-bg);color:var(--violet)}
.badge-orange{background:var(--orange-bg);color:var(--orange)}
.badge-rouge{background:var(--rouge-bg);color:var(--rouge)}
.badge-gris{background:var(--gris-bg);color:var(--gris)}
.badge-plein { background:var(--primaire); color:#fff; }
.badge-contour { background:transparent; border:1px solid var(--bordure-forte); color:var(--texte-doux); }

.puce { width:8px; height:8px; border-radius:50%; display:inline-block; flex:0 0 auto; }

.etiquette-duree {
  display:inline-flex; align-items:center; gap:4px;
  background:var(--violet-bg); color:var(--violet);
  padding:2px 8px; border-radius:999px; font-size:.745rem; font-weight:700;
}

/* ===================================================================
   BOUTONS
   =================================================================== */

.btn {
  display:inline-flex; align-items:center; justify-content:center; gap:6px;
  padding:8px 14px; border-radius:var(--rayon-s); border:1px solid transparent;
  font-size:.875rem; font-weight:600; font-family:inherit; cursor:pointer;
  background:var(--surface); color:var(--texte); border-color:var(--bordure-forte);
  transition:background .12s, border-color .12s, transform .05s;
  white-space:nowrap; text-decoration:none;
}
.btn:hover { background:var(--ardoise-050); text-decoration:none; }
.btn:active { transform:translateY(1px); }
.btn:focus-visible { outline:2px solid var(--vert-500); outline-offset:2px; }
.btn-primaire { background:var(--vert-700); border-color:var(--vert-700); color:#fff; }
.btn-primaire:hover { background:var(--vert-800); border-color:var(--vert-800); }
.btn-danger { background:var(--rouge); border-color:var(--rouge); color:#fff; }
.btn-danger:hover { filter:brightness(.92); background:var(--rouge); }
.btn-doux { background:var(--primaire-clair); border-color:transparent; color:var(--vert-800); }
.btn-doux:hover { background:var(--vert-100); }
.btn-fantome { background:transparent; border-color:transparent; color:var(--texte-doux); }
.btn-fantome:hover { background:var(--ardoise-100); color:var(--texte); }
.btn-s { padding:5px 9px; font-size:.8rem; }
.btn-xs { padding:3px 7px; font-size:.75rem; border-radius:5px; }
.btn-l { padding:11px 20px; font-size:.95rem; }
.btn-bloc { width:100%; }
.btn[disabled], .btn.inactif { opacity:.5; pointer-events:none; }

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="clair"]) .btn:hover { background:var(--surface-2); }
  :root:not([data-theme="clair"]) .btn-fantome:hover { background:var(--surface-2); }
}

.groupe-btn { display:inline-flex; }
.groupe-btn .btn { border-radius:0; margin-left:-1px; }
.groupe-btn .btn:first-child { border-radius:var(--rayon-s) 0 0 var(--rayon-s); margin-left:0; }
.groupe-btn .btn:last-child { border-radius:0 var(--rayon-s) var(--rayon-s) 0; }

/* ===================================================================
   FORMULAIRES
   =================================================================== */

.champs { display:grid; gap:14px; }
.champs.c2 { grid-template-columns:repeat(2,minmax(0,1fr)); }
.champs.c3 { grid-template-columns:repeat(3,minmax(0,1fr)); }
.champs.c4 { grid-template-columns:repeat(4,minmax(0,1fr)); }
@media (max-width:820px) { .champs.c2,.champs.c3,.champs.c4 { grid-template-columns:minmax(0,1fr); } }

.champ { display:flex; flex-direction:column; gap:5px; min-width:0; }
.champ.large { grid-column:1/-1; }
.champ > label, .etiquette {
  font-size:.79rem; font-weight:650; color:var(--texte-doux);
}
.champ .aide { font-size:.765rem; color:var(--texte-faible); }
.requis::after { content:" *"; color:var(--rouge); }

input[type=text],input[type=email],input[type=password],input[type=tel],input[type=number],
input[type=date],input[type=time],input[type=search],input[type=url],select,textarea {
  width:100%; padding:8px 11px; font:inherit; font-size:.885rem;
  color:var(--texte); background:var(--surface);
  border:1px solid var(--bordure-forte); border-radius:var(--rayon-s);
  transition:border-color .12s, box-shadow .12s;
}
textarea { resize:vertical; min-height:78px; line-height:1.5; }
select { appearance:none; padding-right:30px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%2364748b'%3E%3Cpath d='M7 10l5 5 5-5z'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 7px center; background-size:18px; }
input:focus,select:focus,textarea:focus {
  outline:none; border-color:var(--vert-600); box-shadow:0 0 0 3px rgba(34,197,94,.16);
}
input[type=color] { padding:3px; height:38px; cursor:pointer; }
input:disabled, select:disabled, textarea:disabled { background:var(--ardoise-100); color:var(--texte-faible); }
input::placeholder, textarea::placeholder { color:var(--texte-faible); }

.champ-erreur { color:var(--rouge); font-size:.78rem; font-weight:600; }

.case { display:flex; align-items:flex-start; gap:8px; font-size:.875rem; cursor:pointer; }
.case input { width:16px; height:16px; margin:2px 0 0; accent-color:var(--vert-600); flex:0 0 auto; cursor:pointer; }
.case span small { display:block; color:var(--texte-faible); font-weight:400; }

.cases-colonne { display:grid; gap:9px; }
.cases-carte {
  display:grid; gap:8px; max-height:230px; overflow-y:auto;
  border:1px solid var(--bordure); border-radius:var(--rayon-s); padding:11px; background:var(--surface-2);
}

.segments { display:inline-flex; background:var(--ardoise-100); border-radius:var(--rayon-s); padding:2px; gap:2px; }
.segments a, .segments button {
  padding:5px 11px; border-radius:5px; font-size:.82rem; font-weight:600;
  color:var(--texte-doux); border:0; background:transparent; cursor:pointer;
}
.segments a.actif, .segments button.actif { background:var(--surface); color:var(--texte); box-shadow:var(--ombre-s); }
.segments a:hover { text-decoration:none; color:var(--texte); }

.barre-filtres {
  display:flex; gap:9px; align-items:flex-end; flex-wrap:wrap;
}
.barre-filtres .champ { flex:0 1 170px; gap:3px; }
.barre-filtres .champ.q { flex:1 1 240px; }

.pied-form {
  display:flex; gap:9px; align-items:center; flex-wrap:wrap;
  padding-top:15px; margin-top:4px; border-top:1px solid var(--bordure);
}
.pied-form .droite { margin-left:auto; display:flex; gap:9px; }

fieldset { border:0; padding:0; margin:0; }
legend { font-size:.82rem; font-weight:700; color:var(--texte); padding:0 0 9px; }

.section-form + .section-form { margin-top:22px; padding-top:20px; border-top:1px solid var(--bordure); }

/* ===================================================================
   TABLEAUX
   =================================================================== */

.table-boite { overflow-x:auto; border-radius:var(--rayon); }
table.tab { width:100%; border-collapse:collapse; font-size:.875rem; }
table.tab th {
  text-align:left; font-size:.73rem; text-transform:uppercase; letter-spacing:.045em;
  color:var(--texte-faible); font-weight:700; padding:9px 12px;
  background:var(--surface-2); border-bottom:1px solid var(--bordure); white-space:nowrap;
}
table.tab td { padding:10px 12px; border-bottom:1px solid var(--bordure); vertical-align:middle; }
table.tab tbody tr:last-child td { border-bottom:0; }
table.tab tbody tr:hover { background:var(--surface-2); }
table.tab tr.critique { background:color-mix(in srgb, var(--rouge-bg) 45%, transparent); }
table.tab tr.attention { background:color-mix(in srgb, var(--orange-bg) 40%, transparent); }
table.tab .num { text-align:right; font-variant-numeric:tabular-nums; white-space:nowrap; }
table.tab .compact { width:1%; white-space:nowrap; }
table.tab a.lien-fort { font-weight:600; color:var(--texte); }
table.tab a.lien-fort:hover { color:var(--primaire); }
table.tab th.trier a { color:var(--texte-faible); }

.cellule-principale { display:flex; align-items:center; gap:10px; min-width:0; }
.cellule-principale .titre { font-weight:600; }
.cellule-principale .sous { font-size:.785rem; color:var(--texte-faible); }

.vide {
  text-align:center; padding:40px 20px; color:var(--texte-faible);
}
.vide .ico { width:36px; height:36px; opacity:.35; margin-bottom:8px; }
.vide p { margin:0 0 12px; }

/* ===================================================================
   MESSAGES
   =================================================================== */

.messages { display:grid; gap:9px; }
.message {
  display:flex; gap:10px; align-items:flex-start;
  padding:11px 14px; border-radius:var(--rayon-s); font-size:.885rem;
  border:1px solid transparent;
}
.message .ico { margin-top:1px; }
.message-success { background:var(--vert-bg); color:var(--vert); border-color:color-mix(in srgb,var(--vert) 25%,transparent); }
.message-error   { background:var(--rouge-bg); color:var(--rouge); border-color:color-mix(in srgb,var(--rouge) 25%,transparent); }
.message-warning { background:var(--orange-bg); color:var(--orange); border-color:color-mix(in srgb,var(--orange) 25%,transparent); }
.message-info    { background:var(--bleu-bg); color:var(--bleu); border-color:color-mix(in srgb,var(--bleu) 25%,transparent); }
.message .fermer { margin-left:auto; background:0; border:0; color:inherit; opacity:.6; cursor:pointer; padding:0; }
.message .fermer:hover { opacity:1; }

.encart {
  padding:12px 14px; border-radius:var(--rayon-s); font-size:.87rem;
  background:var(--surface-2); border-left:3px solid var(--bordure-forte);
}
.encart-vert   { background:var(--vert-bg); border-left-color:var(--vert); }
.encart-orange { background:var(--orange-bg); border-left-color:var(--orange); }
.encart-rouge  { background:var(--rouge-bg); border-left-color:var(--rouge); }
.encart-bleu   { background:var(--bleu-bg); border-left-color:var(--bleu); }
.encart-violet { background:var(--violet-bg); border-left-color:var(--violet); }
.encart b { display:block; margin-bottom:2px; }

/* ===================================================================
   ALERTES (liste)
   =================================================================== */

.alerte-ligne {
  display:flex; gap:12px; align-items:flex-start;
  padding:12px 14px; border-bottom:1px solid var(--bordure);
}
.alerte-ligne:last-child { border-bottom:0; }
.alerte-ligne:hover { background:var(--surface-2); }
.alerte-ligne .marqueur { width:4px; align-self:stretch; border-radius:2px; flex:0 0 auto; }
.alerte-ligne .marqueur.critique { background:var(--rouge); }
.alerte-ligne .marqueur.warning  { background:var(--orange); }
.alerte-ligne .marqueur.info     { background:var(--bleu); }
.alerte-ligne .corps { min-width:0; flex:1; }
.alerte-ligne .corps b { font-size:.9rem; font-weight:650; }
.alerte-ligne .corps .msg {
  font-size:.825rem; color:var(--texte-doux); margin-top:3px; white-space:pre-line;
}
.alerte-ligne .cotes { display:flex; flex-direction:column; gap:6px; align-items:flex-end; flex:0 0 auto; }

/* ===================================================================
   PLANNING
   =================================================================== */

.calendrier { display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); gap:1px; background:var(--bordure); }
.cal-entete {
  background:var(--surface-2); padding:7px; text-align:center;
  font-size:.73rem; font-weight:700; text-transform:uppercase; color:var(--texte-faible);
}
.cal-jour {
  background:var(--surface); min-height:112px; padding:5px 6px;
  display:flex; flex-direction:column; gap:3px;
}
.cal-jour.hors-mois { background:var(--surface-2); opacity:.55; }
.cal-jour.aujourdhui { background:var(--primaire-clair); box-shadow:inset 0 0 0 2px var(--vert-500); }
.cal-jour.week-end { background:color-mix(in srgb, var(--surface-2) 70%, var(--fond)); }
.cal-jour .num-jour { font-size:.78rem; font-weight:700; color:var(--texte-doux); }
.cal-jour .num-jour a { color:inherit; }
.cal-jour .plus { font-size:.73rem; color:var(--texte-faible); }

.evt {
  display:block; padding:3px 6px; border-radius:5px; font-size:.755rem; line-height:1.35;
  background:var(--bleu-bg); color:var(--texte); border-left:3px solid var(--bleu);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.evt:hover { text-decoration:none; filter:brightness(.97); }
.evt b { font-weight:650; }
.evt.t-visite_entretien { background:var(--vert-bg); border-left-color:var(--vert); }
.evt.t-depannage { background:var(--rouge-bg); border-left-color:var(--rouge); }
.evt.t-sav { background:var(--orange-bg); border-left-color:var(--orange); }
.evt.t-mise_en_service { background:var(--indigo-bg); border-left-color:var(--indigo); }
.evt.t-installation { background:var(--violet-bg); border-left-color:var(--violet); }
.evt.t-diagnostic, .evt.t-devis_technique { background:var(--gris-bg); border-left-color:var(--gris); }
.evt.fait { opacity:.62; }
.evt.retard { box-shadow:inset 0 0 0 1px var(--rouge); }

.semaine-grille { display:grid; gap:1px; background:var(--bordure); overflow-x:auto; }
.semaine-grille > div { background:var(--surface); padding:8px; min-width:0; }
.semaine-tete { background:var(--surface-2) !important; font-size:.76rem; font-weight:700; }
.semaine-tech {
  background:var(--surface-2) !important; font-size:.82rem; font-weight:650;
  display:flex; align-items:center; gap:7px; position:sticky; left:0; z-index:2;
}
.semaine-case { min-height:82px; display:flex; flex-direction:column; gap:4px; }

.tournee-etape {
  display:flex; gap:12px; padding:14px 16px; border-bottom:1px solid var(--bordure);
}
.tournee-etape:last-child { border-bottom:0; }
.tournee-heure {
  flex:0 0 62px; text-align:center; font-weight:700; font-size:.95rem;
  font-variant-numeric:tabular-nums;
}
.tournee-heure small { display:block; font-weight:500; font-size:.72rem; color:var(--texte-faible); }
.tournee-corps { flex:1; min-width:0; }
.tournee-corps h3 { font-size:.95rem; }
.tournee-meta { font-size:.82rem; color:var(--texte-doux); margin-top:3px; }
.tournee-actions { display:flex; gap:7px; margin-top:10px; flex-wrap:wrap; }

/* ===================================================================
   PIPELINE (kanban)
   =================================================================== */

.kanban { display:flex; gap:12px; overflow-x:auto; padding-bottom:10px; align-items:flex-start; }
.kanban-col {
  flex:0 0 258px; background:var(--surface-2); border:1px solid var(--bordure);
  border-radius:var(--rayon); display:flex; flex-direction:column; max-height:74vh;
}
.kanban-tete {
  padding:10px 12px; border-bottom:1px solid var(--bordure);
  display:flex; align-items:center; gap:7px; font-size:.83rem; font-weight:700;
}
.kanban-tete .n { margin-left:auto; font-size:.75rem; color:var(--texte-faible); font-weight:600; }
.kanban-corps { padding:9px; display:grid; gap:8px; overflow-y:auto; min-height:60px; }
.kanban-corps.survol { background:var(--primaire-clair); }
.kanban-carte {
  background:var(--surface); border:1px solid var(--bordure); border-radius:var(--rayon-s);
  padding:10px; box-shadow:var(--ombre-s); cursor:grab; font-size:.85rem;
}
.kanban-carte:active { cursor:grabbing; }
.kanban-carte.glisse { opacity:.45; }
.kanban-carte b { display:block; font-weight:650; margin-bottom:3px; }
.kanban-carte .meta { font-size:.775rem; color:var(--texte-faible); display:flex; gap:6px; flex-wrap:wrap; align-items:center; }
.kanban-pied { padding:9px 12px; border-top:1px solid var(--bordure); font-size:.78rem; color:var(--texte-doux); }

/* ===================================================================
   FRISE / CHRONOLOGIE
   =================================================================== */

.frise { position:relative; padding-left:22px; }
.frise::before {
  content:""; position:absolute; left:6px; top:4px; bottom:4px; width:2px; background:var(--bordure);
}
.frise-item { position:relative; padding-bottom:15px; font-size:.87rem; }
.frise-item:last-child { padding-bottom:0; }
.frise-item::before {
  content:""; position:absolute; left:-19px; top:5px; width:9px; height:9px;
  border-radius:50%; background:var(--surface); border:2px solid var(--bordure-forte);
}
.frise-item.vert::before { border-color:var(--vert); background:var(--vert); }
.frise-item.rouge::before { border-color:var(--rouge); background:var(--rouge); }
.frise-item.bleu::before { border-color:var(--bleu); background:var(--bleu); }
.frise-date { font-size:.755rem; color:var(--texte-faible); font-weight:600; }
.frise-item p { margin:2px 0 0; }

/* ===================================================================
   PROGRESSION & JAUGES
   =================================================================== */

.jauge { height:7px; background:var(--ardoise-200); border-radius:999px; overflow:hidden; }
.jauge > span { display:block; height:100%; background:var(--vert-600); border-radius:999px; }
.jauge.rouge > span { background:var(--rouge); }
.jauge.orange > span { background:var(--orange); }
.jauge.bleu > span { background:var(--bleu); }
.jauge-l { height:11px; }

.mini-barres { display:flex; align-items:flex-end; gap:4px; height:64px; }
.mini-barres > div { flex:1; background:var(--vert-100); border-radius:3px 3px 0 0; position:relative; min-height:2px; }
.mini-barres > div > span { display:block; height:100%; background:var(--vert-600); border-radius:3px 3px 0 0; }
.axe-mois { display:flex; gap:4px; margin-top:5px; }
.axe-mois > div { flex:1; text-align:center; font-size:.62rem; color:var(--texte-faible);
  white-space:nowrap; overflow:hidden; }

.anneaux { display:flex; gap:14px; align-items:center; flex-wrap:wrap; }
.anneau {
  --p:0; --c:var(--vert-600);
  width:92px; height:92px; border-radius:50%; flex:0 0 auto;
  background:conic-gradient(var(--c) calc(var(--p) * 1%), var(--ardoise-200) 0);
  display:grid; place-items:center; position:relative;
}
.anneau::before {
  content:""; position:absolute; inset:9px; border-radius:50%; background:var(--surface);
}
.anneau .val { position:relative; font-weight:700; font-size:1.05rem; }

/* ===================================================================
   DIVERS
   =================================================================== */

.fil { display:flex; gap:6px; align-items:center; font-size:.8rem; color:var(--texte-faible); }
.fil a { color:var(--texte-faible); }
.fil a:hover { color:var(--primaire); }

.onglets { display:flex; gap:3px; border-bottom:1px solid var(--bordure); overflow-x:auto; }
.onglets a, .onglets button {
  padding:9px 14px; font-size:.875rem; font-weight:600; color:var(--texte-doux);
  border:0; background:0; cursor:pointer; border-bottom:2px solid transparent; white-space:nowrap;
}
.onglets a:hover, .onglets button:hover { color:var(--texte); text-decoration:none; }
.onglets a.actif, .onglets button.actif { color:var(--primaire); border-bottom-color:var(--primaire); }
.onglets .n { font-size:.72rem; background:var(--ardoise-100); padding:1px 6px; border-radius:999px; margin-left:5px; }

.paire { display:flex; justify-content:space-between; gap:12px; font-size:.875rem; padding:5px 0; }
.paire + .paire { border-top:1px dashed var(--bordure); }
.paire dt, .paire .cle { color:var(--texte-faible); flex:0 0 auto; }
.paire dd, .paire .val { margin:0; text-align:right; font-weight:550; min-width:0; word-break:break-word; }

.liste-simple { list-style:none; margin:0; padding:0; }
.liste-simple li { padding:7px 0; border-bottom:1px solid var(--bordure); font-size:.875rem; }
.liste-simple li:last-child { border-bottom:0; }

.prestations { list-style:none; margin:0; padding:0; display:grid; gap:5px; font-size:.855rem; }
.prestations li { display:flex; gap:7px; align-items:flex-start; }
.prestations li::before { content:"✓"; color:var(--vert); font-weight:700; flex:0 0 auto; }

.pagination { display:flex; gap:5px; align-items:center; justify-content:center; flex-wrap:wrap; }
.pagination a, .pagination span {
  min-width:34px; padding:6px 9px; text-align:center; border-radius:var(--rayon-s);
  border:1px solid var(--bordure); font-size:.84rem; color:var(--texte-doux); background:var(--surface);
}
.pagination a:hover { background:var(--surface-2); text-decoration:none; }
.pagination .actif { background:var(--vert-700); border-color:var(--vert-700); color:#fff; font-weight:700; }
.pagination .inerte { opacity:.4; pointer-events:none; }

.zone-depot {
  border:2px dashed var(--bordure-forte); border-radius:var(--rayon);
  padding:18px; text-align:center; color:var(--texte-faible); font-size:.86rem;
  background:var(--surface-2); cursor:pointer;
}
.zone-depot:hover, .zone-depot.survol { border-color:var(--vert-600); background:var(--primaire-clair); color:var(--vert-800); }

.vignettes { display:grid; grid-template-columns:repeat(auto-fill,minmax(112px,1fr)); gap:9px; }
.vignette {
  position:relative; border:1px solid var(--bordure); border-radius:var(--rayon-s);
  overflow:hidden; background:var(--surface-2); aspect-ratio:4/3;
}
.vignette img { width:100%; height:100%; object-fit:cover; display:block; }
.vignette .nom {
  position:absolute; inset:auto 0 0 0; padding:4px 6px; font-size:.7rem;
  background:rgba(0,0,0,.62); color:#fff; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.vignette .sup {
  position:absolute; top:4px; right:4px; background:rgba(0,0,0,.6); border:0;
  color:#fff; border-radius:5px; padding:2px 5px; cursor:pointer; font-size:.7rem; line-height:1;
}
.vignette-doc { display:grid; place-items:center; aspect-ratio:4/3; color:var(--texte-faible); }

.signature-zone {
  border:1px solid var(--bordure-forte); border-radius:var(--rayon-s);
  background:#fff; touch-action:none; width:100%; height:150px; display:block; cursor:crosshair;
}

.modale {
  position:fixed; inset:0; background:rgba(8,20,14,.55); z-index:100;
  display:flex; align-items:flex-start; justify-content:center; padding:5vh 16px;
  overflow-y:auto;
}
.modale[hidden] { display:none !important; }
.modale-boite {
  background:var(--surface); border-radius:12px; box-shadow:var(--ombre-l);
  width:100%; max-width:620px; overflow:hidden;
}
.modale-boite.large { max-width:900px; }
.modale-tete { padding:14px 18px; border-bottom:1px solid var(--bordure); display:flex; align-items:center; gap:10px; }
.modale-tete h3 { margin:0; }
.modale-tete .fermer { margin-left:auto; background:0; border:0; cursor:pointer; color:var(--texte-faible); }
.modale-corps { padding:18px; }
.modale-corps > * + * { margin-top:14px; }
.modale-pied { padding:13px 18px; border-top:1px solid var(--bordure); background:var(--surface-2);
  display:flex; gap:9px; justify-content:flex-end; }

details.bloc { border:1px solid var(--bordure); border-radius:var(--rayon-s); background:var(--surface); }
details.bloc > summary {
  padding:10px 14px; cursor:pointer; font-weight:600; font-size:.885rem;
  display:flex; align-items:center; gap:8px; list-style:none;
}
details.bloc > summary::-webkit-details-marker { display:none; }
details.bloc > summary::after { content:"▾"; margin-left:auto; color:var(--texte-faible); }
details.bloc[open] > summary { border-bottom:1px solid var(--bordure); }
details.bloc > summary::after { transition:transform .15s; }
details.bloc[open] > summary::after { transform:rotate(180deg); }
details.bloc .interieur { padding:14px; }

.texte-doux { color:var(--texte-doux); }
.texte-faible { color:var(--texte-faible); }
.texte-rouge { color:var(--rouge); }
.texte-vert { color:var(--vert); }
.texte-orange { color:var(--orange); }
.gras { font-weight:650; }
.petit { font-size:.8rem; }
.centre { text-align:center; }
.droite { text-align:right; }
.nowrap { white-space:nowrap; }
.pleine { width:100%; }
.rien { display:none; }
.tabulaire { font-variant-numeric:tabular-nums; }
.pre-ligne { white-space:pre-line; }
.flex { display:flex; gap:9px; align-items:center; }
.flex-entre { display:flex; gap:9px; align-items:center; justify-content:space-between; }
.flex-colonne { display:flex; flex-direction:column; gap:9px; }
.flex-fin { display:flex; gap:9px; align-items:center; justify-content:flex-end; }
.enroule { flex-wrap:wrap; }
.mt0{margin-top:0}.mt1{margin-top:8px}.mt2{margin-top:16px}.mt3{margin-top:24px}
.mb0{margin-bottom:0}.mb1{margin-bottom:8px}.mb2{margin-bottom:16px}
.grandir { flex:1; min-width:0; }

/* ===================================================================
   RESPONSIVE
   =================================================================== */

@media (max-width:900px) {
  .barre-laterale {
    position:fixed; left:0; top:0; bottom:0;
    transform:translateX(-100%); transition:transform .22s ease;
    box-shadow:var(--ombre-l);
  }
  body.menu-ouvert .barre-laterale { transform:translateX(0); }
  body.menu-ouvert::after {
    content:""; position:fixed; inset:0; background:rgba(8,20,14,.45); z-index:35;
  }
  .bouton-menu { display:inline-flex; }
  .entete { padding:10px 14px; }
  .entete h1 { font-size:1.12rem; }
  .contenu { padding:14px 14px 60px; }
  .kpi .valeur { font-size:1.4rem; }
  .cal-jour { min-height:76px; }
  .evt { font-size:.7rem; }
  .barre-filtres .champ { flex:1 1 140px; }
}

@media (max-width:560px) {
  .calendrier { font-size:.8rem; }
  .cal-jour { min-height:58px; padding:3px; }
  .entete .actions .btn span.libelle { display:none; }
  table.tab th, table.tab td { padding:8px 9px; }
  .masquer-mobile { display:none !important; }
}

/* ===================================================================
   IMPRESSION
   =================================================================== */

@media print {
  .barre-laterale, .entete, .actions, .btn, .no-print, .messages { display:none !important; }
  body { background:#fff; color:#000; font-size:11pt; }
  .contenu { padding:0; }
  .carte { border:1px solid #999; box-shadow:none; break-inside:avoid; }
  a { color:#000; text-decoration:none; }
  .page-coupe { break-after:page; }
}

/* =====================================================================
   Terrain : mémo vocal, médias de visite, catalogue d'articles
   ===================================================================== */
.enregistreur {
  border:1px solid var(--bordure); border-radius:var(--rayon-s);
  padding:10px 12px; background:var(--surface-2);
}
.enregistreur.actif { border-color:var(--rouge); background:var(--rouge-bg); }

.media-ligne {
  display:flex; gap:10px; align-items:flex-start;
  padding:9px 0; border-bottom:1px solid var(--bordure);
}
.lien-sup {
  background:0; border:0; padding:0; margin-left:6px; font:inherit;
  color:var(--rouge); text-decoration:underline; cursor:pointer;
}

.puces-articles { display:flex; flex-direction:column; gap:11px; max-height:300px; overflow-y:auto; }
.puces-groupe { display:flex; flex-wrap:wrap; gap:6px; align-items:stretch; }
.puces-groupe > .petit.gras { width:100%; text-transform:uppercase; letter-spacing:.03em; }
.puce-article {
  display:flex; flex-direction:column; gap:1px; text-align:left; font:inherit;
  border:1px solid var(--bordure-forte); border-radius:var(--rayon-s);
  background:var(--surface); padding:6px 10px; cursor:pointer;
}
.puce-article:hover { border-color:var(--vert-600); background:var(--primaire-clair); }
.puce-article.ajoute { border-color:var(--vert-600); background:var(--vert-100); }

.choix-cartes { display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:11px; }
.choix-carte {
  display:flex; flex-direction:column; gap:4px; cursor:pointer; background:var(--surface);
  border:1px solid var(--bordure-forte); border-radius:var(--rayon-s); padding:12px 14px;
}
.choix-carte:has(input:checked) {
  border-color:var(--vert-600); background:var(--primaire-clair); box-shadow:var(--ombre-s);
}
.choix-titre { font-weight:600; display:flex; align-items:center; gap:6px; }

/* =====================================================================
   MANUEL D'UTILISATION
   ===================================================================== */
.manuel { display:grid; grid-template-columns:288px minmax(0,1fr); gap:18px; align-items:start; }
.manuel-sommaire { position:sticky; top:74px; }
.manuel-corps { display:flex; flex-direction:column; gap:18px; min-width:0; }

.manuel-toc { display:flex; flex-direction:column; margin-top:6px; max-height:58vh; overflow-y:auto; }
.manuel-toc a {
  display:flex; gap:9px; align-items:baseline; padding:6px 8px; border-radius:var(--rayon-s);
  color:var(--texte-doux); font-size:.84rem; line-height:1.35;
}
.manuel-toc a:hover { background:var(--ardoise-050); color:var(--texte); text-decoration:none; }
.manuel-toc a.actif { background:var(--primaire-clair); color:var(--vert-800); font-weight:600; }
.manuel-toc a b { font-weight:600; }
.manuel-toc .num {
  flex:0 0 20px; text-align:right; color:var(--texte-faible);
  font-variant-numeric:tabular-nums; font-size:.76rem;
}

.manuel-chapitre { scroll-margin-top:78px; }
.manuel-num { color:var(--texte-faible); font-weight:600; }
.manuel-chapeau { color:var(--texte-doux); font-size:.95rem; margin:0 0 14px; }

.manuel-texte { font-size:.925rem; line-height:1.62; color:var(--texte); }
.manuel-texte > * + * { margin-top:12px; }
.manuel-texte h3 {
  font-size:1.02rem; margin:24px 0 8px; padding-bottom:5px;
  border-bottom:1px solid var(--bordure); color:var(--vert-800);
}
.manuel-texte h4 { font-size:.93rem; margin:16px 0 5px; color:var(--texte); }
.manuel-texte p { margin:0; }
.manuel-texte ul, .manuel-texte ol { margin:0; padding-left:22px; }
.manuel-texte li + li { margin-top:5px; }
.manuel-texte strong { font-weight:650; }
.manuel-texte .table-boite { margin-top:10px; }

/* Suite d'actions à faire dans l'ordre */
.etapes { list-style:none; padding:0; counter-reset:etape; }
.etapes > li {
  position:relative; padding:0 0 0 34px; counter-increment:etape; margin-top:9px;
}
.etapes > li::before {
  content:counter(etape); position:absolute; left:0; top:1px;
  width:23px; height:23px; border-radius:50%; display:grid; place-items:center;
  background:var(--primaire-clair); color:var(--vert-800);
  font-size:.75rem; font-weight:700; border:1px solid var(--vert-100);
}

/* Où cliquer : Clients ▸ Fiche ▸ Souscrire */
.chemin {
  display:inline-flex; flex-wrap:wrap; gap:4px; align-items:center;
  background:var(--ardoise-050); border:1px solid var(--bordure);
  border-radius:999px; padding:2px 11px; font-size:.8rem; font-weight:600; color:var(--texte-doux);
}
.chemin i { font-style:normal; color:var(--texte-faible); }

.manuel-texte dl { margin:0; }
.manuel-texte dt { font-weight:650; margin-top:11px; color:var(--vert-800); }
.manuel-texte dd { margin:2px 0 0; color:var(--texte-doux); }

@media (max-width:980px) {
  .manuel { grid-template-columns:minmax(0,1fr); }
  .manuel-sommaire { position:static; }
  .manuel-toc { max-height:none; }
}

@media print {
  .manuel { display:block; }
  .manuel-chapitre { break-before:page; border:0; }
  .manuel-chapitre:first-of-type { break-before:auto; }
  .manuel-texte { font-size:10.5pt; }
  .manuel-toc, .manuel-sommaire { display:none !important; }
}