/* ============================================================
   Espace client HighWatch-Conseil — connexion + dashboard
   Charte : noir / or / rouge (identique à la vitrine), polices
   Marcellus (titres) + Inter (corps) auto-hébergées.
   Chargée par les gabarits pageAuth / pageClient (ui-client.js).
   ============================================================ */

:root{
  /* charte vitrine */
  --noir:#0A1220; --noir-2:#111A2D; --noir-3:#17223A;
  --or:#3B7DDE; --or-clair:#7FB0FF;
  --rouge:#123A8C; --rouge-vif:#1858D6;
  --argent:#D9DBDE; --gris:#9BA0A8; --gris-f:#6B7078; --trait:#223052;

  /* espace de travail clair */
  --fond:#F4F3F0; --carte:#FFFFFF; --texte:#15171C; --texte-2:#5C6169; --ligne:#E4E2DC;

  /* statuts (texte foncé sur fond clair : contraste AA) */
  --st-encours:#9A4E00; --st-encours-bg:#FDEEDC;
  --st-ok:#1E6B35;      --st-ok-bg:#E4F2E7;
  --st-plan:#1D5FA3;    --st-plan-bg:#E4EDF8;
  --st-neutre:#565B63;  --st-neutre-bg:#ECECEA;

  --display:'Marcellus',Cambria,Georgia,serif;
  --corps:'Inter',system-ui,'Segoe UI',Calibri,Arial,sans-serif;
  --sidebar-l:248px; --topbar-h:100px;

  /* alias de compatibilité : le HTML des pages existantes (rdv,
     interventions…) référence encore ces variables en style inline */
  --ink:var(--noir); --paper:var(--fond); --text:var(--texte);
  --muted:var(--texte-2); --line:var(--ligne);
  --teal:var(--st-ok); --amber:var(--or); --navy:var(--noir-2);
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;font-family:var(--corps);color:var(--texte);background:var(--fond);font-size:14px;line-height:1.55;}

/* ============================== PAGES D'AUTHENTIFICATION (sombres) */
body.auth{background:var(--noir);color:var(--argent);min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:36px 18px;}
.auth-boite{width:100%;max-width:460px;display:flex;flex-direction:column;align-items:center;}
.auth-boite.large{max-width:640px;}
.auth-logo{width:100%;}
.auth-logo img{width:100%;height:auto;display:block;}
.auth-tagline{color:var(--gris);font-size:12.5px;letter-spacing:1.6px;text-transform:uppercase;margin:14px 0 0;text-align:center;}
.redline{width:54px;height:2px;background:var(--rouge-vif);margin:12px auto 6px;}
.auth-sous{color:var(--gris);font-size:12.5px;letter-spacing:1.6px;text-transform:uppercase;margin:0 0 22px;text-align:center;}
.carte-auth{width:100%;background:var(--noir-2);border:1px solid var(--trait);border-radius:6px;padding:28px 30px;}
.carte-auth h1{font-family:var(--display);font-weight:normal;font-size:21px;color:#fff;margin:0 0 16px;}
.carte-auth h2{font-family:var(--display);font-weight:normal;font-size:16px;color:var(--or-clair);margin:22px 0 8px;}
.carte-auth p{font-size:13.5px;}
.carte-auth label{display:block;font-size:11px;font-weight:600;color:var(--gris);text-transform:uppercase;letter-spacing:.8px;margin:14px 0 5px;}
.carte-auth input,.carte-auth select,.carte-auth textarea{width:100%;padding:11px 12px;border:1px solid var(--trait);border-radius:5px;background:var(--noir-3);color:var(--argent);font-size:14px;font-family:inherit;}
.carte-auth input:focus,.carte-auth select:focus,.carte-auth textarea:focus{outline:none;border-color:var(--or);}
.carte-auth ::placeholder{color:var(--gris-f);}
.carte-auth .bouton{display:block;width:100%;margin-top:22px;background:var(--or);color:var(--noir);border:none;border-radius:5px;padding:12px 20px;font-size:13.5px;font-weight:700;letter-spacing:1.4px;text-transform:uppercase;cursor:pointer;font-family:inherit;text-align:center;}
.carte-auth .bouton:hover{background:var(--or-clair);}
.auth-liens{margin:18px 0 0;display:flex;flex-direction:column;gap:8px;text-align:center;}
.auth-liens a,.carte-auth a{color:var(--gris);font-size:13px;text-decoration:none;}
.auth-liens a:hover,.carte-auth a:hover{color:var(--or-clair);text-decoration:underline;}
.carte-auth .msg{padding:11px 13px;border-radius:5px;font-size:13px;margin:0 0 14px;}
.carte-auth .msg.ok{background:rgba(30,107,53,.22);color:#9FD9AF;border:1px solid #2C5B3A;}
.carte-auth .msg.err{background:rgba(18,58,140,.18);color:#F1A9A0;border:1px solid #6E3029;}
.carte-auth .note{color:var(--gris);font-size:12px;}
.carte-auth code{background:var(--noir-3);border:1px solid var(--trait);color:var(--or-clair);padding:2px 7px;border-radius:4px;font-size:13px;}
.carte-auth img.qr{display:block;margin:14px auto;border:8px solid #fff;border-radius:6px;}
.codes-secours{background:var(--noir-3);border:1px solid var(--trait);border-radius:6px;padding:14px 18px;margin:12px 0;font-family:Consolas,'Courier New',monospace;font-size:14px;letter-spacing:1px;color:var(--or-clair);columns:2;}
.codes-secours div{padding:3px 0;break-inside:avoid;}
.auth-pied{color:var(--gris-f);font-size:11.5px;margin-top:26px;text-align:center;letter-spacing:.4px;}
.carte-auth .grille2{display:grid;grid-template-columns:1fr 1fr;gap:0 18px;}
@media(max-width:560px){
  .carte-auth{padding:22px 18px;}
  .carte-auth .grille2{grid-template-columns:1fr;}
  .codes-secours{columns:1;}
}

/* ================================================== LAYOUT CLIENT */
body.client{display:grid;grid-template-columns:var(--sidebar-l) 1fr;grid-template-rows:var(--topbar-h) 1fr;min-height:100vh;}

/* --- barre supérieure --- */
.topbar{grid-column:1/-1;position:sticky;top:0;z-index:40;display:flex;align-items:center;gap:14px;background:var(--carte);border-bottom:1px solid var(--ligne);padding:0 18px;height:var(--topbar-h);}
.burger{display:none;background:none;border:1px solid var(--ligne);border-radius:6px;padding:7px 9px;cursor:pointer;color:var(--texte);}
.burger svg{display:block;}
.marque{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--texte);}
.marque img{width:68px;height:auto;display:block;}
.marque-txt{font-family:var(--display);font-size:16.5px;letter-spacing:1.8px;white-space:nowrap;}
.topbar-titre{color:var(--texte-2);font-size:12px;letter-spacing:1.6px;text-transform:uppercase;margin-left:6px;}
.menu-user{margin-left:auto;position:relative;}
.menu-user summary{list-style:none;display:flex;align-items:center;gap:9px;cursor:pointer;padding:6px 10px;border-radius:8px;border:1px solid transparent;user-select:none;}
.menu-user summary::-webkit-details-marker{display:none;}
.menu-user summary:hover,.menu-user[open] summary{background:var(--fond);border-color:var(--ligne);}
.avatar{width:30px;height:30px;border-radius:50%;background:var(--noir);color:var(--or-clair);display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;letter-spacing:.5px;}
.user-nom{font-size:13.5px;font-weight:600;max-width:160px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.menu-user .chev{color:var(--texte-2);}
.menu-user-liste{position:absolute;right:0;top:calc(100% + 6px);min-width:190px;background:var(--carte);border:1px solid var(--ligne);border-radius:8px;box-shadow:0 8px 26px rgba(10,18,32,.14);padding:6px;z-index:50;}
.menu-user-liste a,.menu-user-liste button{display:block;width:100%;text-align:left;padding:9px 12px;border-radius:6px;font-size:13.5px;color:var(--texte);text-decoration:none;background:none;border:none;cursor:pointer;font-family:inherit;}
.menu-user-liste a:hover,.menu-user-liste button:hover{background:var(--fond);}
.menu-user-liste button{color:var(--rouge);}
.menu-user-liste form{margin:0;}

/* --- sidebar --- */
.sidebar{grid-row:2;background:var(--noir);display:flex;flex-direction:column;padding:16px 10px;overflow-y:auto;}
.sidebar nav{display:flex;flex-direction:column;gap:2px;}
.nav-lien,.nav-groupe summary{display:flex;align-items:center;gap:11px;padding:10px 12px;border-radius:7px;color:var(--gris);text-decoration:none;font-size:13.5px;border-left:3px solid transparent;cursor:pointer;user-select:none;}
.nav-lien svg,.nav-groupe summary svg{flex:none;width:18px;height:18px;}
.nav-lien:hover,.nav-groupe summary:hover{color:#fff;background:var(--noir-2);}
.nav-lien.actif{color:#fff;background:var(--noir-3);border-left-color:var(--rouge-vif);}
.nav-lien.actif svg{color:var(--or-clair);}
.nav-groupe summary{list-style:none;}
.nav-groupe summary::-webkit-details-marker{display:none;}
.nav-groupe summary::after{content:"";width:7px;height:7px;border-right:1.6px solid var(--gris-f);border-bottom:1.6px solid var(--gris-f);transform:rotate(45deg);margin-left:auto;transition:transform .15s;}
.nav-groupe[open] summary::after{transform:rotate(-135deg);}
.nav-groupe.actif summary{color:#fff;}
.nav-sous{display:block;padding:8px 12px 8px 44px;color:var(--gris);text-decoration:none;font-size:13px;border-radius:7px;border-left:3px solid transparent;}
.nav-sous:hover{color:var(--or-clair);background:var(--noir-2);}
.sidebar-pied{margin-top:auto;padding:16px 12px 6px;color:var(--gris-f);font-size:10.5px;letter-spacing:.6px;line-height:1.6;}
.sidebar-pied b{color:var(--gris);font-weight:600;}
.voile{display:none;}

/* --- contenu --- */
.contenu{grid-row:2;padding:26px 30px 46px;min-width:0;}
.contenu-int{max-width:1180px;margin:0 auto;}
.contenu h1{font-family:var(--display);font-weight:normal;font-size:26px;margin:0 0 4px;color:var(--noir);}
.contenu h2{font-family:var(--display);font-weight:normal;font-size:17.5px;color:var(--noir-2);margin:26px 0 10px;}
.sous-titre{color:var(--texte-2);font-size:13px;margin:0 0 18px;}

/* ===================================================== COMPOSANTS */
.carte{background:var(--carte);border:1px solid var(--ligne);border-radius:10px;box-shadow:0 1px 4px rgba(10,18,32,.05);padding:20px 24px;margin:16px 0;}
.carte h2:first-child,.carte h2[style]{margin-top:0;}

/* KPI */
.kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin:16px 0;}
.kpi{background:var(--carte);border:1px solid var(--ligne);border-top:3px solid var(--or);border-radius:10px;padding:16px 18px;box-shadow:0 1px 4px rgba(10,18,32,.05);}
.kpi.rouge{border-top-color:var(--rouge-vif);}
.kpi.vert{border-top-color:var(--st-ok);}
.kpi.bleu{border-top-color:var(--st-plan);}
.kpi-chiffre{font-size:30px;font-weight:700;line-height:1.1;color:var(--noir);}
.kpi-lib{color:var(--texte-2);font-size:12px;text-transform:uppercase;letter-spacing:.7px;margin-top:4px;}

/* pastilles de statut */
.pastille{display:inline-block;padding:3px 10px;border-radius:20px;font-size:11px;font-weight:700;letter-spacing:.3px;white-space:nowrap;}
.pastille.st-encours{background:var(--st-encours-bg);color:var(--st-encours);}
.pastille.st-ok,.pastille.on{background:var(--st-ok-bg);color:var(--st-ok);}
.pastille.st-plan{background:var(--st-plan-bg);color:var(--st-plan);}
.pastille.st-neutre{background:var(--st-neutre-bg);color:var(--st-neutre);}
.pastille.off{background:#F9E4E4;color:#B02A2A;}

/* barre de progression */
.progression{display:inline-flex;align-items:center;gap:9px;min-width:150px;}
.progression .piste{flex:1;height:8px;min-width:90px;background:var(--ligne);border-radius:6px;overflow:hidden;}
.progression .barre{display:block;height:100%;background:linear-gradient(90deg,var(--or),var(--or-clair));border-radius:6px;}
.progression.complet .barre{background:var(--st-ok);}
.progression .pct{font-size:12px;font-weight:600;color:var(--texte-2);white-space:nowrap;}

/* alertes / actions en attente */
.alerte{background:var(--carte);border:1px solid var(--ligne);border-left:4px solid var(--rouge-vif);border-radius:10px;padding:16px 20px;margin:16px 0;}
.alerte h2{margin:0 0 8px;font-size:15.5px;}
.alerte ul{margin:0;padding-left:18px;}
.alerte li{margin:5px 0;font-size:13.5px;}

/* tableaux */
.table-scroll{overflow-x:auto;}
table{border-collapse:collapse;width:100%;font-size:13px;}
th{background:var(--noir-2);color:var(--argent);text-align:left;padding:9px 11px;font-size:10.5px;text-transform:uppercase;letter-spacing:.5px;white-space:nowrap;}
th:first-child{border-radius:6px 0 0 6px;}
th:last-child{border-radius:0 6px 6px 0;}
td{padding:9px 11px;border-bottom:1px solid var(--ligne);vertical-align:top;word-wrap:break-word;}
tr:last-child td{border-bottom:none;}
.retenu{background:var(--st-ok-bg);}
.num{text-align:right;white-space:nowrap;}
th.num,td.num{text-align:right;}

/* devis (aperçu imprimable, cabinet + client) */
.devis-apercu h3{font-family:var(--display);font-size:14px;color:var(--texte);margin:18px 0 8px;}
.devis-apercu h3:first-child{margin-top:0;}
.devis-entete{display:flex;flex-wrap:wrap;gap:24px;justify-content:space-between;margin-bottom:10px;}
.devis-meta{border-collapse:collapse;font-size:12.5px;}
.devis-meta td,.devis-meta th{padding:3px 10px 3px 0;border:none;background:none;text-transform:none;letter-spacing:0;font-size:12.5px;}
.devis-meta td:first-child{color:var(--texte-2);white-space:nowrap;}
.devis-parties{display:flex;gap:32px;flex-wrap:wrap;font-size:12.5px;}
.devis-parties p{margin:4px 0 0;line-height:1.5;}
.devis-lignes th,.devis-lignes td{font-size:12.5px;}
.devis-recap{display:flex;gap:32px;flex-wrap:wrap;margin-top:14px;}
.devis-total td{border-top:2px solid var(--noir-2);font-weight:700;padding-top:8px;}
.devis-paiement{margin-top:16px;font-size:12.5px;}
@media print{
  .topbar,.sidebar,.voile,.bouton,form[action*="envoyer"]{display:none!important;}
  .contenu{margin:0!important;}
}

/* agenda hebdomadaire (rendez-vous confirmés) */
.agenda-nav{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:0 0 14px;flex-wrap:wrap;}
.agenda-nav .agenda-titre{font-family:var(--display);font-size:16px;color:var(--texte);}
.agenda-nav .agenda-liens{display:flex;gap:8px;align-items:center;flex-wrap:wrap;}
.agenda-scroll{overflow-x:auto;}
.agenda-grille{display:grid;grid-template-columns:repeat(7,minmax(150px,1fr));gap:10px;}
.agenda-jour{background:var(--carte);border:1px solid var(--ligne);border-radius:8px;padding:10px;min-height:110px;}
.agenda-jour.aujourdhui{border-color:var(--or);box-shadow:0 0 0 1px var(--or);}
.agenda-jour h3{margin:0 0 8px;font-size:11px;text-transform:uppercase;letter-spacing:.4px;color:var(--texte-2);font-weight:700;}
.agenda-jour.aujourdhui h3{color:var(--st-ok);}
.agenda-rdv{background:var(--st-ok-bg);border-left:3px solid var(--st-ok);border-radius:4px;padding:6px 8px;margin-bottom:6px;font-size:12px;text-decoration:none;color:inherit;display:block;}
.agenda-rdv .agenda-heure{font-weight:700;color:var(--st-ok);}
.agenda-rdv .agenda-client{font-weight:600;display:block;}
.agenda-rdv .agenda-obj{color:var(--texte-2);display:block;}
.agenda-vide{color:var(--texte-2);font-size:11.5px;font-style:italic;}

/* boutons */
.bouton{display:inline-block;background:var(--or);color:var(--noir);border:none;border-radius:7px;padding:10px 20px;font-size:13.5px;font-weight:700;cursor:pointer;margin-top:14px;font-family:inherit;text-decoration:none;}
.bouton:hover{background:var(--or-clair);}
.bouton.secondaire{background:var(--noir-2);color:#fff;}
.bouton.secondaire:hover{background:var(--noir-3);}
.bouton.danger{background:var(--rouge);color:#fff;}
.bouton.danger:hover{background:var(--rouge-vif);}
.bouton.ghost{background:none;border:1px solid var(--ligne);color:var(--texte);font-weight:600;}
.bouton.ghost:hover{border-color:var(--or);color:var(--noir);background:none;}
.bouton.petit{padding:5px 11px;font-size:12px;margin:0;}
button.lien{background:none;border:none;color:var(--rouge);cursor:pointer;font-size:13.5px;padding:0;font-family:inherit;}

/* formulaires */
label{display:block;font-size:11px;font-weight:600;color:var(--texte-2);text-transform:uppercase;letter-spacing:.6px;margin:12px 0 4px;}
input,select,textarea{width:100%;padding:9px 11px;border:1px solid #CFCCC3;border-radius:6px;font-size:14px;font-family:inherit;background:#FBFBF9;color:var(--texte);}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--or);}
input[type="file"]{padding:7px;}
.grille2{display:grid;grid-template-columns:1fr 1fr;gap:0 22px;}

/* messages */
.msg{padding:11px 14px;border-radius:7px;font-size:13.5px;margin:0 0 16px;}
.msg.ok{background:var(--st-ok-bg);color:var(--st-ok);border:1px solid #BFE0CB;}
.msg.err{background:#F9E4E4;color:#B02A2A;border:1px solid #EAC1C1;}
.note{color:var(--texte-2);font-size:12px;}
code{background:#EFECE4;padding:2px 6px;border-radius:4px;font-size:12.5px;}

/* listes du tableau de bord */
.liste-simple{list-style:none;margin:0;padding:0;}
.liste-simple li{display:flex;align-items:center;gap:10px;padding:9px 0;border-bottom:1px solid var(--ligne);font-size:13.5px;flex-wrap:wrap;}
.liste-simple li:last-child{border-bottom:none;}
.liste-simple .quand{font-weight:600;white-space:nowrap;}
.liste-simple .pousse{margin-left:auto;}
.voir-tout{display:inline-block;margin-top:10px;font-size:13px;color:var(--noir-2);font-weight:600;text-decoration:none;}
.voir-tout:hover{color:var(--rouge);text-decoration:underline;}

/* cartes outils (page /dossiers) */
.grille-outils{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;}
.carte-outil{display:block;background:var(--carte);border:1px solid var(--ligne);border-radius:10px;padding:18px;text-decoration:none;color:var(--texte);box-shadow:0 1px 4px rgba(10,18,32,.05);}
.carte-outil:hover{border-color:var(--or);}
.carte-outil .co-titre{font-family:var(--display);font-size:15.5px;color:var(--noir);margin:8px 0 4px;}
.carte-outil .co-desc{font-size:12px;color:var(--texte-2);}
.carte-outil svg{color:var(--or);}

.contenu a{color:var(--noir-2);}
.contenu a:hover{color:var(--rouge);}
.contenu footer{color:var(--texte-2);font-size:11.5px;text-align:center;padding:30px 0 0;}

/* ===================================================== RESPONSIVE */
@media(max-width:1024px){
  :root{--sidebar-l:76px;}
  .sidebar{padding:16px 8px;}
  .nav-lien,.nav-groupe summary{justify-content:center;padding:11px 8px;gap:0;}
  .nav-lien .lib,.nav-groupe summary .lib,.nav-groupe summary::after{display:none;}
  .nav-groupe .nav-sous{display:none;}
  .sidebar-pied{display:none;}
  .topbar-titre{display:none;}
  .kpis{grid-template-columns:repeat(2,1fr);}
  .grille-outils{grid-template-columns:repeat(2,1fr);}
  .contenu{padding:22px 20px 40px;}
}
@media(max-width:767px){
  body.client{grid-template-columns:1fr;}
  .burger{display:block;}
  .sidebar{position:fixed;top:var(--topbar-h);left:0;bottom:0;width:248px;z-index:45;transform:translateX(-100%);transition:transform .18s ease;padding:16px 10px;box-shadow:4px 0 18px rgba(10,18,32,.3);}
  .sidebar.ouverte{transform:none;}
  .sidebar .nav-lien,.sidebar .nav-groupe summary{justify-content:flex-start;gap:11px;padding:10px 12px;}
  .sidebar .nav-lien .lib,.sidebar .nav-groupe summary .lib,.sidebar .nav-groupe summary::after{display:initial;}
  .sidebar .nav-groupe .nav-sous{display:block;}
  .sidebar-pied{display:block;}
  .voile{display:block;position:fixed;inset:var(--topbar-h) 0 0 0;background:rgba(10,18,32,.45);z-index:44;}
  .voile[hidden]{display:none;}
  .user-nom{display:none;}
  .menu-user .chev{display:none;}
  .kpis{grid-template-columns:1fr;}
  .grille2{grid-template-columns:1fr;}
  .grille-outils{grid-template-columns:1fr;}
  .contenu{padding:18px 14px 36px;}
  .marque-txt{font-size:14px;letter-spacing:1.2px;}
}
@media(prefers-reduced-motion:reduce){
  .sidebar{transition:none;}
  .nav-groupe summary::after{transition:none;}
}

/* ============================ TRANSITIONS ENTRE PAGES
   Chaque page est servie par un chargement serveur classique : on anime
   l'entrée du contenu (fondu + léger glissement). Seul le contenu bouge ;
   l'en-tête et la barre latérale restent fixes. Désactivé si l'utilisateur
   préfère réduire les animations. */
@keyframes rl-entree{ from{ opacity:0; transform:translateY(8px); } to{ opacity:1; transform:none; } }
@media(prefers-reduced-motion:no-preference){
  .contenu,
  body.admin main,
  .auth-boite{
    animation:rl-entree .3s cubic-bezier(.22,.61,.36,1) both;
  }
}