@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');
/* =========================================================================
   GUYANT FERMETURE — Design system "SaaS moderne 2026"
   Feuille globale et IDENTIQUE pour les 4 pages (admin / login / bon / espace).
   Chargée APRES le <style> inline -> surcharge. Réutilise les noms de
   variables existants : on remappe juste les VALEURS -> tout le markup +
   le HTML généré par le JS adopte la nouvelle palette automatiquement.
   Inspiration : Notion / Stripe / Linear / Vercel. Inter, ombres douces,
   coins arrondis, beaucoup de blanc, hiérarchie claire.
   ========================================================================= */

:root{
  --primary:#2563eb;  --primary-hover:#1d4ed8;
  --success:#22c55e;  --warning:#f59e0b;  --danger:#ef4444;
  /* THEME SOMBRE : surfaces en gris fonce facon Notepad Windows dark */
  --background:#202024; --surface:#2a2a2e;
  --text:#e8e8ea; --text-muted:#9b9ba3; --border:#3a3a42;
  /* remap des noms historiques utilisés par le markup / le JS inline */
  --bg:#202024; --card:#2a2a2e; --card2:#34343a; --line:#3a3a42;
  --txt:#e8e8ea; --muted:#9b9ba3; --accent:#2563eb; --accent2:#1d4ed8;
  --ok:#22c55e; --info:#2563eb;
  --radius:12px; --radius-lg:20px; --radius-pill:999px;
  --shadow-xs:0 1px 2px rgba(0,0,0,.04);
  --shadow-sm:0 1px 3px rgba(0,0,0,.06);
  --shadow:0 10px 30px rgba(0,0,0,.06);
  --shadow-hover:0 8px 20px rgba(0,0,0,.08);
  --ring:0 0 0 3px rgba(37,99,235,.15);
}

*{ box-sizing:border-box; }

body{
  margin:0;
  background:linear-gradient(160deg, #0f172a 0%, #312e81 58%, #5b21b6 100%) !important;
  background-attachment:fixed !important;
  color:var(--text) !important;
  font-family:'Inter', system-ui, -apple-system, "Segoe UI", sans-serif !important;
  -webkit-font-smoothing:antialiased;
}
::selection{ background:rgba(37,99,235,.18); }

/* ============================ TYPOGRAPHIE ============================ */
h1,h2,h3{ color:var(--text); letter-spacing:-.015em; }
h1{ font-weight:700; }
h2{ font-weight:600; }
h3{ font-weight:600; }
p, .meta{ line-height:1.6; }
.meta{ color:var(--text-muted); }
a{ color:var(--primary); text-decoration:none; }
a:hover{ color:var(--primary-hover); }
label{
  display:block; color:var(--text-muted); font-weight:500; font-size:13px;
  letter-spacing:normal; text-transform:none; margin:14px 0 6px;
}

/* ============================ NAVBAR / HEADER ============================ */
header{
  background:var(--surface) !important; color:var(--text) !important;
  border-bottom:1px solid var(--border) !important;
  box-shadow:0 1px 3px rgba(0,0,0,.05) !important;
  position:sticky; top:0; z-index:40; min-height:70px;
}
header .hbrand, header h1, header h1 *{
  color:var(--text) !important; font-weight:700; letter-spacing:-.02em; text-transform:none;
}
header .hbrand{ font-size:19px; }
header small{ color:var(--text-muted) !important; opacity:1; }

/* ============================ CARTES ============================ */
.card{
  background:var(--surface); border:1px solid var(--border) !important;
  border-radius:16px !important; box-shadow:var(--shadow-sm); padding:20px;
  transition:all .2s ease;
}
.empty, .day-empty{ color:var(--text-muted); font-weight:500; text-transform:none; letter-spacing:normal; }

/* ============================ BOUTONS ============================ */
.btn, .createbtn, .dlbtn, .telact, button[type=submit]{
  font-family:inherit; font-weight:600; letter-spacing:normal; text-transform:none;
  background:var(--primary); color:#fff; border:none !important; border-radius:10px !important;
  box-shadow:var(--shadow-xs); cursor:pointer; transition:all .2s ease;
}
.btn{ padding:10px 18px; }
.btn:hover, .dlbtn:hover, .telact:hover, button[type=submit]:hover{
  background:var(--primary-hover); transform:translateY(-1px); box-shadow:var(--shadow-hover);
}
.btn:active, button[type=submit]:active{ transform:translateY(0); box-shadow:var(--shadow-xs); }
.btn.ghost{ background:var(--surface); color:var(--text); border:1px solid var(--border) !important; box-shadow:var(--shadow-xs); }
.btn.ghost:hover{ background:var(--background); color:var(--text); transform:translateY(-1px); }
.btn.danger{ background:var(--danger); color:#fff; }
.btn.danger:hover{ background:#dc2626; }
.btn.sm{ padding:7px 12px; font-size:13px; }

/* gros bouton créer -> bouton moderne en ligne (plus de carré flottant) */
.createbtn{
  position:static !important; width:auto; height:auto; flex-direction:row !important;
  gap:8px; padding:12px 20px !important; border-radius:10px !important; font-size:15px !important;
  font-weight:600; box-shadow:var(--shadow-sm); margin-bottom:18px;
}
.createbtn:hover{ background:var(--primary-hover); transform:translateY(-1px); box-shadow:var(--shadow-hover); }
.createbtn .plus{ font-size:18px !important; }

.backbtn{
  color:var(--text-muted) !important; background:transparent; border:none; box-shadow:none;
  font-weight:500; text-transform:none; letter-spacing:normal; padding:6px 0;
}
.backbtn:hover{ color:var(--primary) !important; }

/* ============================ MENU UTILISATEUR ============================ */
.uchip{
  background:var(--surface) !important; color:var(--text) !important;
  border:1px solid var(--border); border-radius:999px; box-shadow:var(--shadow-xs);
  font-weight:600; text-transform:none; transition:all .2s ease;
}
.uchip:hover{ background:var(--background); }
.uchip .cv{ color:var(--text-muted); }
.umenu{ background:var(--surface); border:1px solid var(--border) !important; border-radius:14px; box-shadow:0 10px 30px rgba(0,0,0,.12); }
.umenu .uhead{ border-bottom:1px solid var(--border); }
.umi{ color:var(--text); font-weight:500; border-radius:8px; transition:all .15s ease; }
.umi:hover, .umi:active{ background:var(--card2); color:var(--text); }
.umi.danger{ color:#f87171; }
.umi.danger:hover{ background:rgba(239,68,68,.16); color:#f87171; }
.umi-sep{ background:var(--border); }

/* ============================ CHAMPS DE SAISIE ============================ */
input, textarea, select{
  background:var(--background) !important; color:var(--text) !important;
  border:1px solid var(--border) !important; border-radius:10px !important;
  font-family:inherit; font-weight:400; transition:all .15s ease;
}
input::placeholder, textarea::placeholder{ color:#94a3b8; }
input:focus, textarea:focus, select:focus{
  outline:none; border-color:var(--primary) !important; box-shadow:var(--ring);
}
.err{ color:var(--danger); font-weight:500; }

/* ============================ LISTE / GROUPES DE BONS ============================ */
.grp-h{
  background:var(--surface); border:1px solid var(--border) !important;
  border-radius:12px !important; box-shadow:var(--shadow-xs); transition:all .2s ease;
}
.grp-h:hover{ box-shadow:var(--shadow-sm); }
.grp-h .grp-t{ color:var(--text); font-weight:600; text-transform:capitalize; letter-spacing:normal; }
.grp-h .grp-c{
  background:var(--background); color:var(--text-muted); border:1px solid var(--border);
  border-radius:999px; font-weight:600; font-size:12px; padding:4px 10px;
}
.grp-h .chev{ color:var(--text-muted); }

.bon{ transition:all .2s ease; }
.bon .r-date{ color:var(--text-muted); font-weight:600; text-transform:none; letter-spacing:normal; }
.bon .r-main{ color:var(--text); font-weight:500; }
.r-sep{ color:#cbd5e1; }
.r-tag{
  background:var(--background) !important; color:var(--text-muted) !important; transform:none;
  border:1px solid var(--border); border-radius:999px; padding:3px 9px; font-weight:600; font-size:11px;
}

/* statut des bons -> COULEUR PLEINE sur toute la carte + affichage sur 2 lignes (infos completes) */
.card.bon{ display:flex !important; align-items:flex-start !important; border:1px solid transparent !important; }
.card.bon .r-main{ white-space:normal !important; overflow:visible !important; text-overflow:clip !important; line-height:1.5 !important; }
.card.bon .r-date{ padding-top:1px; }
.card.bon-wait    { background:#475569 !important; border-color:#3f4b5e !important; color:#fff !important; }  /* en attente (auto) */
.card.bon-signed  { background:#16a34a !important; border-color:#15803d !important; color:#fff !important; }  /* signe (auto) */
.card.bon-wait-m  { background:#d97706 !important; border-color:#b45309 !important; color:#fff !important; }  /* en attente (manuel) */
.card.bon-signed-m{ background:#2563eb !important; border-color:#1d4ed8 !important; color:#fff !important; }  /* signe (manuel) */
.card.bon .r-date, .card.bon .r-main, .card.bon .r-main b, .card.bon .r-sep{ color:#fff !important; }
.card.bon .r-sep{ opacity:.55 !important; }
.card.bon .badge{ background:rgba(0,0,0,.22) !important; color:#fff !important; }
.card.bon .btn{ background:rgba(0,0,0,.22) !important; color:#fff !important; border:1px solid rgba(255,255,255,.28) !important; box-shadow:none !important; }
.card.bon .btn:hover{ background:rgba(0,0,0,.34) !important; transform:none !important; }
.card.bon:hover{ box-shadow:var(--shadow-hover); transform:translateY(-1px); }

/* === Header non-fixe : la banderole defile et disparait quand on descend === */
header{ position:static !important; }
/* Logo en WATERMARK fixe, en haut a gauche (PC uniquement, masque sur mobile) === */
body::before{
  content:''; position:fixed; top:12px; left:14px; width:130px; height:54px; z-index:5;
  background:url('/logo.png') left center / contain no-repeat;
  opacity:.32; pointer-events:none;
}

/* petits badges modernes réutilisables */
.badge{ display:inline-flex; align-items:center; gap:4px; border-radius:999px; padding:4px 10px; font-size:12px; font-weight:600; line-height:1; }
.badge-success{ background:rgba(34,197,94,.16); color:#4ade80; }
.badge-warning{ background:rgba(245,158,11,.16); color:#fbbf24; }
.badge-primary{ background:rgba(59,130,246,.18); color:#60a5fa; }

/* ============================ CALENDRIER ============================ */
.cal{
  background:var(--surface); border:1px solid var(--border) !important;
  border-radius:20px !important; padding:24px; box-shadow:0 10px 30px rgba(0,0,0,.06);
}
.cal-title{ color:var(--text); font-weight:700; font-size:1.25rem; text-transform:none; letter-spacing:-.01em; }
.cal-today{
  background:var(--card2); color:var(--text-muted); border:1px solid var(--border);
  border-radius:8px; padding:5px 12px; font-weight:500; text-transform:none; transition:all .2s ease;
}
.cal-today:hover{ background:var(--background); color:var(--primary); border-color:var(--primary); }
.cal-nav{
  width:44px; height:44px; border-radius:50% !important; background:var(--card2);
  border:1px solid var(--border); color:var(--text); box-shadow:var(--shadow-xs);
  font-size:20px; transition:all .2s ease;
}
.cal-nav:hover{ background:var(--primary); color:#fff; border-color:var(--primary); transform:translateY(-1px); box-shadow:var(--shadow-hover); }
.cal-nav:active{ transform:translateY(0); }
.cal-dows span{ color:var(--text-muted); font-weight:600; font-size:11px; text-transform:uppercase; letter-spacing:.04em; }
.cal-grid{ gap:8px !important; }
.cal-cell{
  background:var(--card2); border:1px solid var(--border) !important; border-radius:12px !important;
  transition:all .2s ease;
}
.cal-cell.cal-blank{ background:transparent; border-color:transparent !important; box-shadow:none; }
.cal-cell .cal-d{ color:var(--text); font-weight:600; font-size:14px; }
.cal-cell.has:hover{ transform:translateY(-2px); box-shadow:0 8px 20px rgba(0,0,0,.35); border-color:#52525b !important; }
/* jour du jour / sélectionné -> bleu primaire avec ring */
.cal-cell.today{ background:var(--primary) !important; border-color:var(--primary) !important; box-shadow:0 0 0 4px rgba(37,99,235,.15) !important; outline:none !important; }
.cal-cell.today .cal-d{ color:#fff; font-weight:700; }
.cal-cell.today .cal-badge{ background:#fff; color:var(--primary); }
.cal-cell.today .dot.w{ background:#fdba74; } .cal-cell.today .dot.s{ background:#86efac; }
/* badge nombre de bons : pilule bleue en haut à droite */
.cal-badge{
  background:var(--primary); color:#fff; border-radius:999px; padding:4px 8px;
  font-size:12px; font-weight:600; transform:none; border:none; min-width:0; height:auto;
}
.dot{ width:7px; height:7px; border-radius:50%; }
.dot.w{ background:var(--warning); } .dot.s{ background:var(--success); }
.cal-legend{ color:var(--text-muted); font-weight:500; text-transform:none; letter-spacing:normal; }

/* ============================ OVERLAY / BOTTOM-SHEET ============================ */
.ov, .overlay{ background:rgba(15,23,42,.45) !important; }
.sheet{ background:var(--surface) !important; border-top:none; border-radius:20px 20px 0 0 !important; box-shadow:0 -10px 40px rgba(0,0,0,.12); }
.sheet h2{ color:var(--text); font-weight:700; font-size:1.3rem; text-transform:none; letter-spacing:-.01em; }
.sheet .x{ background:var(--background) !important; color:var(--text-muted) !important; border-radius:8px !important; transition:all .15s ease; }
.sheet .x:hover{ background:var(--card2) !important; color:var(--text) !important; }
.linkbox{ background:var(--background) !important; border:1px solid var(--border) !important; border-radius:10px !important; color:var(--text) !important; }
.share a{
  background:var(--card2); color:var(--text); border:1px solid var(--border) !important;
  border-radius:10px; font-weight:600; text-transform:none; box-shadow:var(--shadow-xs); transition:all .2s ease;
}
.share a:hover{ background:var(--background); border-color:var(--primary); color:var(--primary); transform:translateY(-1px); }

/* ============================ PAGE BON (signature / infos) ============================ */
.card h2{
  color:var(--text-muted) !important; border-bottom:none; display:block; padding-bottom:0;
  text-transform:uppercase; font-size:12px; letter-spacing:.05em; font-weight:600;
}
.info .k{ color:var(--text-muted); text-transform:none; font-size:14px; letter-spacing:normal; }
.info .v{ color:var(--text); font-weight:600; }
.telcl{ color:var(--primary); font-weight:600; }
.telact{ border-radius:10px !important; }
.telact.call{ background:var(--primary); color:#fff; }
.telact.msg{ background:var(--surface); color:var(--text); border:1px solid var(--border) !important; box-shadow:var(--shadow-xs); }
.navbtn{ border:1px solid var(--border) !important; border-radius:10px !important; box-shadow:var(--shadow-xs); font-weight:600; text-transform:none; transition:all .2s ease; }
.navbtn.gmaps{ background:var(--primary) !important; color:#fff !important; border-color:var(--primary) !important; }
.navbtn.waze{ background:var(--surface) !important; color:var(--text) !important; }
.navbtn:hover{ transform:translateY(-1px); box-shadow:var(--shadow-hover); }
.mapframe{ border:1px solid var(--border) !important; border-radius:12px !important; }
.pad{ border:1px solid var(--border) !important; border-radius:12px !important; }
.clr{ background:var(--surface); border:1px solid var(--border); color:var(--text-muted); border-radius:8px; text-transform:none; }
.back{
  background:var(--surface) !important; color:var(--text) !important; border:1px solid var(--border) !important;
  border-radius:10px !important; box-shadow:var(--shadow-sm); transition:all .2s ease;
}
.back:hover{ background:var(--background) !important; }
.locked{ background:var(--background); border:1px solid var(--border) !important; border-radius:10px !important; }

/* chips (matériel / type de journée / heures supp) */
.chips .ch, .jtype .jt, .hsupp .hs{
  background:var(--card2); border:1px solid var(--border) !important; color:var(--text);
  border-radius:10px !important; box-shadow:var(--shadow-xs); font-weight:500; transition:all .2s ease;
}
.chips .ch:hover, .jtype .jt:hover, .hsupp .hs:hover{ border-color:#cbd5e1; }
.chips .ch.on, .jtype .jt.on, .hsupp .hs.on{ background:var(--primary); color:#fff; border-color:var(--primary) !important; font-weight:600; }

/* confirmation signée */
.modal{ background:var(--surface) !important; border:1px solid var(--border) !important; border-radius:20px !important; box-shadow:0 20px 50px rgba(0,0,0,.18); }
.modal .check{ background:var(--success); border:none; border-radius:50% !important; color:#fff; }

/* ============================ LOGIN (carte centrée propre) ============================ */
.logo{ align-items:center !important; }
.logo .brandtext{
  font-size:28px !important; font-weight:700; letter-spacing:-.02em; line-height:1.15;
  text-align:center !important; color:var(--text) !important; text-transform:none;
}
.logo p{ color:var(--text-muted); text-transform:none; letter-spacing:normal; font-weight:500; }
.foot{ color:var(--text-muted); text-transform:none; letter-spacing:normal; font-weight:400; }
form.card{
  border:1px solid var(--border) !important; border-radius:16px !important;
  box-shadow:0 10px 30px rgba(0,0,0,.08) !important; background:var(--surface) !important;
}

/* ============================ RESPONSIVE ============================ */
/* Tablette : cellules plus compactes */
@media (max-width:900px){
  .cal{ padding:18px; border-radius:16px !important; }
  .cal-grid{ gap:6px !important; }
  .cal-title{ font-size:1.15rem; }
}
/* Mobile : calendrier pleine largeur, header réorganisé, tactile */
@media (max-width:600px){
  .cal{ padding:14px; border-radius:14px !important; }
  .cal-grid{ gap:5px !important; }
  .cal-cell{ border-radius:9px !important; }
  .cal-cell .cal-d{ font-size:12px; }
  .cal-badge{ padding:2px 6px; font-size:10px; }
  .cal-nav{ width:40px; height:40px; font-size:18px; }
  .cal-today{ padding:4px 10px; font-size:11px; }
  header{ min-height:60px; }
  header .hbrand{ font-size:17px; }
  .card{ padding:16px; border-radius:14px !important; }
  /* cibles tactiles confortables */
  .btn, .createbtn, .telact, button[type=submit]{ min-height:44px; }
  .grp-h{ padding:12px; }
  /* Pas de watermark logo sur mobile (demande owner) */
  body::before{ display:none !important; }
}

/* ============================ ACCUEIL : menu administrateur ============================ */
.home-head{ margin:6px 2px 20px; }
.home-title{ font-size:1.6rem; font-weight:700; color:var(--text); margin:0; letter-spacing:-.02em; }
.home-title span{ color:#60a5fa; }
.home-sub{ color:var(--text-muted); margin:5px 0 0; font-size:14px; }
.home-stats{ display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin-bottom:20px; }
.stat{ background:var(--surface); border:1px solid var(--border); border-radius:14px; padding:16px 12px; text-align:center; }
.stat-n{ font-size:1.7rem; font-weight:700; color:var(--text); line-height:1; }
.stat-l{ font-size:11px; color:var(--text-muted); margin-top:7px; text-transform:uppercase; letter-spacing:.05em; }
.home-grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(155px,1fr)); gap:14px; }
.tile{
  display:flex; flex-direction:column; align-items:flex-start; gap:6px; text-align:left;
  background:var(--surface); border:1px solid var(--border); border-radius:16px; padding:18px;
  cursor:pointer; transition:all .2s ease; box-shadow:var(--shadow-sm); color:var(--text); font-family:inherit;
}
.tile:hover{ transform:translateY(-3px); box-shadow:var(--shadow-hover); border-color:var(--primary); }
.tile-ic{ font-size:26px; line-height:1; }
.tile-t{ font-weight:600; font-size:15px; }
.tile-d{ font-size:12px; color:var(--text-muted); line-height:1.4; }

/* ============================ Type d'intervention (badge + chips) ============================ */
.ibadge{ display:inline-block; padding:3px 9px; border-radius:999px; font-size:11px; font-weight:700; white-space:nowrap; vertical-align:middle; }
.itype-ch::before{ content:''; display:inline-block; width:9px; height:9px; border-radius:50%; background:var(--ic); margin-right:7px; vertical-align:-1px; }
.itype-ch.on{ background:var(--ic) !important; border-color:var(--ic) !important; color:#fff !important; }
.itype-ch.on::before{ background:#fff; }

@media (max-width:600px){
  .home-title{ font-size:1.35rem; }
  .home-grid{ grid-template-columns:repeat(2, 1fr); gap:10px; }
  .stat-n{ font-size:1.4rem; }
}

/* ============================ Accueil : sections + outils "à venir" ============================ */
.home-section{ font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:.06em;
  color:var(--text-muted); margin:24px 2px 12px; display:flex; align-items:center; gap:9px; }
.soon-pill{ background:rgba(245,158,11,.18); color:#fbbf24; border-radius:999px; padding:2px 9px;
  font-size:10px; font-weight:700; letter-spacing:.03em; text-transform:none; }
.tile{ position:relative; }
.tile-badge{ position:absolute; top:10px; right:10px; background:rgba(245,158,11,.18); color:#fbbf24;
  border-radius:999px; padding:2px 7px; font-size:9px; font-weight:700; text-transform:uppercase; letter-spacing:.04em; }
.soon-tag{ display:inline-block; background:rgba(245,158,11,.16); color:#fbbf24;
  border:1px solid rgba(245,158,11,.35); border-radius:999px; padding:7px 14px; font-size:13px; font-weight:600; }