@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 -> cartes blanches modernes + liseré couleur à gauche */
.card.bon{ background:var(--surface) !important; color:var(--text) !important; border:1px solid var(--border) !important; }
.card.bon-signed, .card.bon-signed-m{ border-left:4px solid var(--success) !important; }
.card.bon-wait,   .card.bon-wait-m  { border-left:4px solid var(--warning) !important; }
.card.bon:hover{ box-shadow:var(--shadow-hover); transform:translateY(-1px); }

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

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

/* ============================ MODULES METIER (pages CRUD) ============================ */
.mod-head{ display:flex; align-items:center; gap:14px; margin:4px 0 16px; }
.mod-ic{ font-size:30px; line-height:1; flex:0 0 auto; }
.mod-title{ margin:0; font-size:20px; font-weight:700; }
.mod-form{ display:grid; grid-template-columns:1fr 1fr; gap:10px 12px; }
.mod-form .mf.full{ grid-column:1 / -1; }
.mod-form .mf label{ margin-top:0; }
@media(max-width:560px){ .mod-form{ grid-template-columns:1fr; } }
.mod-count{ font-size:12px; color:var(--text-muted); text-transform:uppercase; letter-spacing:.05em; font-weight:700; margin:2px 0 10px; }
.mod-list{ display:flex; flex-direction:column; gap:10px; }
.mod-item{ display:flex; align-items:flex-start; gap:12px; background:var(--card); border:1px solid var(--line);
  border-radius:14px; padding:13px 14px; box-shadow:var(--shadow-sm); }
.mi-main{ flex:1 1 auto; min-width:0; }
.mi-title{ font-weight:600; font-size:15px; display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.mi-meta{ font-size:13px; color:var(--text-muted); margin-top:3px; }
.mi-extra{ font-size:13px; color:var(--text); opacity:.82; margin-top:5px; line-height:1.45; white-space:pre-wrap; }
.mi-acts{ display:flex; gap:6px; flex:0 0 auto; }
.mi-tag{ display:inline-block; background:var(--card2); border:1px solid var(--line); color:var(--text-muted);
  border-radius:999px; padding:2px 9px; font-size:11px; font-weight:700; }
.mi-alert{ display:inline-block; background:rgba(245,158,11,.18); color:#fbbf24; border:1px solid rgba(245,158,11,.35);
  border-radius:999px; padding:2px 9px; font-size:11px; font-weight:700; }

/* Photos */
.ph-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(160px,1fr)); gap:12px; }
.ph-card{ position:relative; background:var(--card); border:1px solid var(--line); border-radius:14px; overflow:hidden; box-shadow:var(--shadow-sm); }
.ph-card img{ width:100%; aspect-ratio:4/3; object-fit:cover; display:block; background:var(--card2); }
.ph-info{ padding:9px 11px; }
.ph-lbl{ font-weight:600; font-size:13px; display:flex; align-items:center; gap:7px; flex-wrap:wrap; }
.ph-del{ position:absolute; top:8px; right:8px; width:32px; height:32px; border:none; border-radius:9px;
  background:rgba(0,0,0,.55); color:#fff; font-size:15px; cursor:pointer; }
.ph-del:hover{ background:var(--danger); }

/* Export */
.exp-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:14px; }
.exp-card{ display:flex; flex-direction:column; gap:5px; background:var(--card); border:1px solid var(--line);
  border-radius:16px; padding:18px; box-shadow:var(--shadow-sm); transition:all .2s ease; color:var(--text); }
.exp-card:hover{ transform:translateY(-3px); box-shadow:var(--shadow-hover); border-color:var(--primary); color:var(--text); }
.exp-ic{ font-size:26px; line-height:1; }
.exp-t{ font-weight:600; font-size:15px; }
.exp-d{ font-size:12px; color:var(--text-muted); line-height:1.4; }
.exp-dl{ margin-top:8px; font-size:12px; font-weight:700; color:var(--primary); }