/* ============================================================
   Kelmo · thème commun (police, mode sombre, petits effets)
   Chargé après le style propre à chaque page.
   ============================================================ */

/* ---------- Police de la marque : Plus Jakarta Sans (licence SIL OFL) ---------- */
@font-face{
  font-family:"Kelmo Sans";
  src:url("/fonts/plus-jakarta-sans-latin-wght-normal.woff2") format("woff2");
  font-weight:200 800; font-style:normal; font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:"Kelmo Sans";
  src:url("/fonts/plus-jakarta-sans-latin-ext-wght-normal.woff2") format("woff2");
  font-weight:200 800; font-style:normal; font-display:swap;
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
:root{
  --font:"Kelmo Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
  --on-accent:#ffffff;
  --accent-ink:#101915;
  --logo-bg:#101915;
  --surface-input:#fafbfa;
  --ombre-carte:0 1px 2px rgba(18,33,28,.04),0 14px 34px -24px rgba(18,33,28,.28);
}
html body, html button, html input, html select, html textarea{font-family:var(--font);}
html body{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility;}
html h1, html h2{letter-spacing:-.02em;}
/* Les chiffres s'alignent (prix, statistiques, horaires) */
.stat-num, .acc-stat-num, .kpi b, .num, .t{font-variant-numeric:tabular-nums;}

/* ---------- Mode sombre ---------- */
html[data-theme="dark"]{
  color-scheme:dark;
  --ink:#eef3f0; --sub:#9fb1a9; --muted:#9fb1a9;
  --line:#26352f; --bg:#0b1210; --card:#121b17; --card-soft:#1a2621;
  --accent:#f1efe8; --on-accent:#12211c; --accent-ink:#bfeedd;
  --accent-light:#1c3830; --warn:#f0c27b; --warn-light:#3a2c14; --danger:#ff8a80;
  --surface-input:#16211c; --err:#ff8a80; --err-light:#3a1d1d;
  --ombre-carte:0 1px 2px rgba(0,0,0,.3),0 18px 40px -26px rgba(0,0,0,.8);
}
html[data-theme="dark"] body{background:var(--bg);color:var(--ink);}
/* Les logos restent dans leur vert Kelmo foncé, avec un léger contour */
html[data-theme="dark"] .logo-k, html[data-theme="dark"] .splash-logo, html[data-theme="dark"] .lk,
html[data-theme="dark"] .brand-k{
  background:var(--logo-bg) !important; color:#fff !important; box-shadow:inset 0 0 0 1px rgba(255,255,255,.14);
}
/* Champs de saisie */
html[data-theme="dark"] input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]),
html[data-theme="dark"] select, html[data-theme="dark"] textarea{
  background-color:var(--surface-input); color:var(--ink); border-color:var(--line);
}
html[data-theme="dark"] input::placeholder, html[data-theme="dark"] textarea::placeholder{color:#6f837b;}
html[data-theme="dark"] img{filter:none;}
html[data-theme="dark"] ::selection{background:#2d5a4a;color:#fff;}
html[data-theme="dark"] hr{border-color:var(--line);}

/* ---------- Bouton thème (lune / soleil) ---------- */
.k-theme-btn{width:38px;height:38px;border-radius:50%;border:1px solid var(--line);background:var(--card);color:var(--ink);display:inline-flex;align-items:center;justify-content:center;cursor:pointer;flex:0 0 auto;padding:0;transition:border-color .2s ease,transform .15s ease,background .2s ease;}
.k-theme-btn:hover{border-color:var(--ink);}
.k-theme-btn:active{transform:scale(.94);}
.k-theme-btn:focus-visible{outline:2px solid var(--ink);outline-offset:2px;}
.k-theme-btn.sur-sombre{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.18);color:#fff;}

/* ---------- Squelettes de chargement ---------- */
.k-skel{position:relative;overflow:hidden;background:var(--card-soft,#eeece3);border-radius:10px;}
.k-skel::after{content:"";position:absolute;inset:0;transform:translateX(-100%);background:linear-gradient(90deg,transparent,rgba(255,255,255,.45),transparent);animation:kSkel 1.25s ease-in-out infinite;}
html[data-theme="dark"] .k-skel::after{background:linear-gradient(90deg,transparent,rgba(255,255,255,.06),transparent);}
@keyframes kSkel{100%{transform:translateX(100%);}}

/* ---------- Illustrations des états vides ---------- */
.k-illu{display:block;margin:0 auto 12px;width:132px;height:auto;color:var(--ink);}
.k-illu .fond{fill:var(--accent-light,#e1f5ee);}
.k-illu .trait{stroke:currentColor;}
.k-illu .doux{fill:var(--card,#fff);stroke:currentColor;}

/* ---------- Apparitions douces ---------- */
@media (prefers-reduced-motion:no-preference){
  .k-apparait{animation:kApparait .45s cubic-bezier(.2,.7,.2,1) both;}
  @keyframes kApparait{from{opacity:0;transform:translateY(10px);}to{opacity:1;transform:none;}}
}
@media (prefers-reduced-motion:reduce){
  *, *::before, *::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important;}
}

/* ---------- Encre inversée et sections sombres ----------
   --on-ink : texte posé sur un fond « encre » (bouton foncé en clair, clair en sombre)
   --section-sombre : grands blocs volontairement foncés (bandeaux, pied de page) */
:root{ --on-ink:#ffffff; --section-sombre:#12211c; }
html[data-theme="dark"]{ --on-ink:#12211c; --section-sombre:#101b17; }
html[data-theme="dark"] .section-sombre{box-shadow:inset 0 0 0 1px rgba(255,255,255,.06);}

/* ---------- Accessibilité : contour visible au clavier ---------- */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible{outline:2px solid var(--ink, #12211c);outline-offset:2px;border-radius:6px;}
html[data-theme="dark"] :where(a, button, input, select, textarea, summary, [tabindex]):focus-visible{outline-color:#bfeedd;}

/* ---------- Boutons Kelmo : un seul style doux sur tout le site ---------- */
:root{
  --pil-bg:linear-gradient(180deg,#ffffff 0%,#f3f2ee 100%);
  --pil-bord:rgba(18,33,28,.08);
  --pil-ombre:inset 0 1px 0 rgba(255,255,255,.9),0 1px 2px rgba(18,33,28,.05),0 10px 22px -14px rgba(18,33,28,.35);
  --pil-fonce:inset 0 1px 0 rgba(255,255,255,.14),0 1px 2px rgba(0,0,0,.12),0 12px 24px -14px rgba(16,25,21,.65);
}
html[data-theme="dark"]{
  --pil-bg:linear-gradient(180deg,#1b2621 0%,#141d19 100%);
  --pil-bord:rgba(255,255,255,.08);
  --pil-ombre:inset 0 1px 0 rgba(255,255,255,.05),0 10px 22px -14px rgba(0,0,0,.8);
  --pil-fonce:inset 0 1px 0 rgba(255,255,255,.5),0 12px 24px -14px rgba(0,0,0,.9);
}
/* Boutons secondaires : clairs, en relief doux */
.btn-secondary, .btn.secondary, .nav-haut .btn, button.ghost, .k-theme-btn:not(.sur-sombre){
  background:var(--pil-bg) !important;
  border:1px solid var(--pil-bord) !important;
  box-shadow:var(--pil-ombre);
  border-radius:999px !important;
  color:var(--ink);
  transition:transform .18s cubic-bezier(.2,.8,.2,1.3),box-shadow .18s ease;
}
/* Boutons principaux : foncés, avec un léger reflet */
.btn-primary, .btn.primary, button.primary, .btn.plein{
  border-radius:999px !important;
  box-shadow:var(--pil-fonce);
  transition:transform .18s cubic-bezier(.2,.8,.2,1.3),box-shadow .18s ease,opacity .15s ease;
}
@media (hover:hover){
  .btn-secondary:hover, .btn.secondary:hover, .nav-haut .btn:hover, button.ghost:hover, .btn-primary:hover, .btn.primary:hover, button.primary:hover{transform:translateY(-1px);}
}
.btn-secondary:active, .btn.secondary:active, button.ghost:active, .btn-primary:active, .btn.primary:active, button.primary:active{transform:scale(.97);}
button.ghost{padding:7px 13px;}