/* =========================================================================
   Koehler Coiffeur — Supervision des terminaux de paiement
   Direction artistique OFFICIELLE Koehler (design system) :
   or/champagne, crème, encre, coins arrondis, ombres douces chaudes, Figtree.
   Les noms de variables/classes sont conservés (compat pages existantes) ;
   les valeurs et les composants suivent la charte.
   ========================================================================= */
:root{
  /* --- Palette de marque (valeurs réelles du thème Koehler) --- */
  --noir:#1a1a1a;            /* encre — barre de marque, texte */
  --accent:#c7a964;          /* OR / champagne — signature de marque */
  --accent-deep:#a98b45;     /* or profond — survols, accents chrome */
  --creme:#e9ddc5;           /* crème */
  --creme-doux:#f7f5f4;
  --terracotta:#d2815f;      /* terracotta — anneau de focus */

  /* --- Chrome du document --- */
  --fond:#fbfaf7;            /* off-white chaud */
  --carte:#ffffff;           /* surface */
  --surface-2:#f5f2ec;       /* surface secondaire (entêtes de tableau…) */
  --bordure:#e4dfd4;         /* filets */
  --texte:#1a1a1a;
  --texte-doux:#6b675e;
  --code-fond:#f2eee5;

  /* --- Sémantique produit --- */
  --ok:#4e8b6b;     --ok-fond:#e7f0ea;
  --ko:#b4472f;     --ko-fond:#f7e9e4;
  --warn:#c79a3e;   --warn-fond:#f7efdc;
  --info:#4a6d8c;   --info-fond:#e8eef4;

  /* --- Rayons (finition arrondie) --- */
  --r-xs:8px; --r-sm:12px; --r-lg:18px; --r-xl:24px; --r-pill:999px;

  /* --- Élévations douces (chaudes) --- */
  --ombre:0 1px 2px rgba(26,24,20,.05), 0 4px 14px rgba(26,24,20,.06);
  --ombre-md:0 6px 22px rgba(26,24,20,.09), 0 12px 40px rgba(26,24,20,.07);
  --ombre-lg:0 18px 60px rgba(26,24,20,.16);

  --ease:cubic-bezier(.32,.72,0,1);
}
*{box-sizing:border-box}
body{
  font-family:"Figtree",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  background:var(--fond); color:var(--texte); margin:0; line-height:1.6;
  -webkit-font-smoothing:antialiased; font-feature-settings:"cv11","ss01";
}

/* --- Barre de marque (encre + accent or) --- */
.marque{
  background:var(--noir); color:#fff; padding:0 28px;
  height:66px; display:flex; align-items:center; justify-content:space-between;
  border-bottom:1px solid #2c2a24; position:relative;
}
.marque::after{content:""; position:absolute; left:0; right:0; bottom:-1px; height:2px;
  background:linear-gradient(90deg,var(--accent),transparent 70%)}
.marque .logo{height:30px; width:auto; max-width:240px; display:block;
  object-fit:contain; align-self:center; flex:0 0 auto}
.marque .titre{display:flex; flex-direction:column; align-items:flex-start; line-height:1.15}
.marque .nom{font-size:1.1rem; letter-spacing:.14em; text-transform:uppercase; font-weight:600}
.marque .sous{font-size:.66rem; letter-spacing:.18em; text-transform:uppercase;
  color:rgba(233,221,197,.6); margin-top:3px}
.marque nav{display:flex; align-items:center}
.marque nav a{
  color:rgba(233,221,197,.72); text-decoration:none; font-size:.76rem; font-weight:600;
  text-transform:uppercase; letter-spacing:.09em; margin-left:24px; padding:24px 0 22px;
  position:relative; transition:color .2s;
}
.marque nav a::after{content:""; position:absolute; left:0; bottom:18px; height:2px; width:0;
  background:var(--accent); transition:width .25s var(--ease)}
.marque nav a:hover{color:#fff}
.marque nav a:hover::after,.marque nav a.actif::after{width:100%}
.marque nav a.actif{color:#fff}
.marque nav a.sortie{color:rgba(233,221,197,.4)}
.marque nav a.sortie:hover{color:rgba(233,221,197,.75)}
.marque nav a.sortie::after{display:none}

.zone{max-width:1180px; margin:0 auto; padding:34px 28px}

/* --- Indicateurs d'état (points) --- */
.pt{display:inline-block; width:9px; height:9px; border-radius:50%; margin-right:7px; vertical-align:middle}
.pt-ok{background:var(--ok)} .pt-ko{background:var(--ko)} .pt-warn{background:var(--warn)}
.pt-neutre{background:var(--warm-grey,#b5b1a9)}
.etat-ok{color:var(--ok); font-weight:600} .etat-ko{color:var(--ko); font-weight:600}

/* --- Cartes chiffres clés --- */
.kpis{display:grid; grid-template-columns:repeat(auto-fit,minmax(168px,1fr)); gap:1px;
  background:var(--bordure); border:1px solid var(--bordure); border-radius:var(--r-lg);
  overflow:hidden; margin-bottom:28px; box-shadow:var(--ombre)}
.kpi{background:var(--carte); padding:20px 22px}
.kpi .v{font-size:1.7rem; font-weight:600; letter-spacing:-.02em; font-variant-numeric:tabular-nums}
.kpi .l{color:var(--texte-doux); font-size:.7rem; text-transform:uppercase; letter-spacing:.09em; margin-top:5px}
.kpi .v.pos{color:var(--info)} .kpi .v.neg{color:var(--ko)}

/* --- Sections --- */
.section-titre{font-size:.72rem; text-transform:uppercase; letter-spacing:.16em;
  color:var(--accent-deep); margin:0 0 14px; font-weight:600}

/* --- Tableaux & cartes --- */
.tableau{width:100%; border-collapse:collapse; background:var(--carte);
  border:1px solid var(--bordure); border-radius:var(--r-lg); overflow:hidden; box-shadow:var(--ombre)}
.tableau th,.tableau td{text-align:left; padding:14px 18px; font-size:.88rem;
  border-bottom:1px solid var(--bordure)}
.tableau tr:last-child td{border-bottom:0}
.tableau th{background:var(--surface-2); color:var(--texte-doux); font-weight:600;
  font-size:.7rem; text-transform:uppercase; letter-spacing:.08em}
.tableau tr:hover td{background:var(--creme-doux)}
.mono{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; font-size:.82rem; color:#55565c}
.montant{font-weight:600; font-variant-numeric:tabular-nums}

/* --- Étiquettes / pastilles --- */
.tag{display:inline-flex; align-items:center; gap:.35rem; padding:.28rem .7rem;
  border-radius:var(--r-pill); font-size:.72rem; font-weight:600; letter-spacing:.03em}
.tag-ok{background:color-mix(in srgb,var(--ok) 15%,transparent); color:var(--ok)}
.tag-ko{background:color-mix(in srgb,var(--ko) 14%,transparent); color:var(--ko)}
.tag-neutre{background:var(--surface-2); color:var(--texte-doux)}
.tag-maj{background:color-mix(in srgb,var(--warn) 18%,transparent); color:var(--warn)}

.vide{text-align:center; color:var(--texte-doux); padding:48px; background:var(--carte);
  border:1px solid var(--bordure); border-radius:var(--r-lg)}
.pied{color:var(--texte-doux); font-size:.78rem; margin-top:22px; line-height:1.5}

/* --- Filtres / formulaires --- */
.filtres{background:var(--carte); border:1px solid var(--bordure); border-radius:var(--r-lg);
  padding:18px 20px; display:flex; gap:14px; flex-wrap:wrap; align-items:flex-end;
  margin-bottom:18px; box-shadow:var(--ombre)}
label{display:block; font-size:.72rem; text-transform:uppercase; letter-spacing:.06em;
  color:var(--texte-doux); margin-bottom:6px; font-weight:600}
select,input[type=text],input[type=password],input[type=search],input:not([type]){
  width:100%; padding:.7rem .85rem; border:1.5px solid var(--bordure); border-radius:var(--r-sm);
  font-family:inherit; font-size:.95rem; background:var(--carte); color:var(--texte);
  transition:border-color .2s, box-shadow .2s;
}
select:focus,input:focus{outline:none; border-color:var(--accent);
  box-shadow:0 0 0 3px rgba(199,169,100,.22)}
.filtres select,.filtres input{width:auto}

/* --- Boutons (or = signature Koehler) --- */
.btn{font-family:inherit; font-size:.92rem; font-weight:600; letter-spacing:.01em;
  padding:.8rem 1.7rem; border-radius:var(--r-sm); border:1.5px solid transparent; cursor:pointer;
  background:var(--accent); color:var(--noir); text-decoration:none; display:inline-block;
  transition:transform .15s var(--ease), box-shadow .2s, background .2s, color .2s}
.btn:hover{background:var(--accent-deep); box-shadow:0 6px 18px rgba(169,139,69,.32)}
.btn:active{transform:translateY(1px)}
.btn:focus-visible{outline:2px solid var(--terracotta); outline-offset:2px}
.btn[disabled]{opacity:.5; cursor:not-allowed; box-shadow:none}
.btn-ink{background:var(--noir); color:#fff}
.btn-ink:hover{background:#333; box-shadow:none}
.btn-ghost{background:transparent; color:var(--noir); border-color:var(--noir)}
.btn-ghost:hover{background:var(--noir); color:#fff}
.btn-sm{padding:.5rem 1rem; font-size:.82rem}

.lien-raz{color:var(--texte-doux); text-decoration:none; font-size:.82rem; align-self:center}
.lien-raz:hover{color:var(--texte)}
.resume{display:flex; gap:26px; flex-wrap:wrap; margin-bottom:16px; color:#4a4b51; font-size:.9rem}
.resume b{font-weight:600; font-variant-numeric:tabular-nums}

/* --- Connexion --- */
.page-connexion{min-height:100vh; display:flex; align-items:center; justify-content:center;
  background:var(--noir); position:relative; overflow:hidden}
.page-connexion::after{content:""; position:absolute; inset:0;
  background:radial-gradient(120% 90% at 85% 15%, rgba(199,169,100,.22), transparent 55%)}
.connexion{position:relative; z-index:1; background:var(--carte); width:340px; border-radius:var(--r-xl);
  padding:40px 34px; box-shadow:var(--ombre-lg)}
.connexion .nom{text-transform:uppercase; letter-spacing:.18em; font-size:1.05rem; text-align:center;
  font-weight:700; color:var(--noir)}
.connexion .nom::after{content:""; display:block; width:34px; height:2px; background:var(--accent); margin:10px auto 0}
.connexion .sous{text-align:center; color:var(--texte-doux); font-size:.7rem;
  text-transform:uppercase; letter-spacing:.12em; margin:7px 0 26px}
.connexion label{margin:14px 0 6px}
.connexion .btn{width:100%; margin-top:26px; padding:.85rem}
.connexion .err{background:color-mix(in srgb,var(--ko) 12%,transparent); color:var(--ko);
  padding:11px 13px; border-radius:var(--r-sm); font-size:.82rem; margin-top:18px}