/* ============================================================================
   GIRI SOINS — DESIGN TOKENS (canonique)
   Créé 2026-06-10 — Phase P0 audit esthétique
   IMPORTÉ EN PREMIER dans tous les fichiers HTML (avant CSS inline)
   ⛔ NE PAS modifier sans backup + tests Puppeteer multi-praticiens
   ========================================================================= */

/* -------- 1. COULEURS CANONIQUES (override unification cross-page) -------- */
:root{
  /* Or — palette unifiée (fini 3 teintes de --gold-light) */
  --gold:#b8944a;
  --gold-light:#d4b87a;
  --gold-dark:#8b6914;
  --gold-glow:rgba(184,148,74,.35);

  /* Crème / fonds nobles */
  --cream:#f5ecd6;
  --cream-soft:#fdf9f1;
  --bg-dark:#0c0a08;
  --bg-dark2:#151210;

  /* Borders unifiées (était 3 valeurs rgba différentes) */
  --border-soft:rgba(184,148,74,.12);
  --border-default:rgba(184,148,74,.22);
  --border-strong:rgba(184,148,74,.45);
}

/* -------- 2. Z-INDEX SYSTEM (échelle disciplinée pour futurs ajouts) ----- */
:root{
  --z-base:1;
  --z-card:10;
  --z-dropdown:100;
  --z-sticky:200;
  --z-float-nav:1000;
  --z-modal-backdrop:1900;
  --z-modal:2000;
  --z-toast:3000;
  --z-tooltip:3100;
  --z-debug:9999;
}

/* -------- 3. SPACING SCALE (échelle 8pt grid) --------------------------- */
:root{
  --sp-0:4px;
  --sp-1:8px;
  --sp-2:16px;
  --sp-3:24px;
  --sp-4:32px;
  --sp-5:48px;
  --sp-6:64px;
  --sp-7:96px;
  --sp-8:128px;
}

/* -------- 4. ANIMATION TIMING (fini 0.2/0.25/0.3/0.35/0.4...) ---------- */
:root{
  --dur-instant:80ms;
  --dur-fast:150ms;
  --dur-normal:300ms;
  --dur-slow:500ms;
  --dur-slower:800ms;
  --ease-out:cubic-bezier(.22,1,.36,1);
  --ease-bounce:cubic-bezier(.34,1.56,.64,1);
  --ease-smooth:cubic-bezier(.25,.46,.45,.94);
}

/* -------- 5. BREAKPOINTS (informatifs pour futurs @media) -------------- */
/* @custom-media --bp-mobile-s (max-width:320px) */
/* @custom-media --bp-mobile   (max-width:414px) */
/* @custom-media --bp-mobile-l (max-width:568px) */
/* @custom-media --bp-tablet   (max-width:768px) */
/* @custom-media --bp-laptop   (max-width:1024px) */
/* @custom-media --bp-desktop  (max-width:1280px) */

/* -------- 6. SHADOWS DISCIPLINÉS --------------------------------------- */
:root{
  --shadow-xs:0 1px 2px rgba(0,0,0,.06);
  --shadow-sm:0 2px 6px rgba(0,0,0,.08);
  --shadow-md:0 4px 14px rgba(0,0,0,.10);
  --shadow-lg:0 8px 28px rgba(0,0,0,.14);
  --shadow-xl:0 16px 48px rgba(0,0,0,.20);
  --shadow-gold:0 8px 28px var(--gold-glow);
}

/* -------- 7. TYPOGRAPHIE — H1 LISIBILITÉ (fix P0-003 audit) ----------- */
/* Force line-height confortable sur tous H1 (était 1.04 catastrophique sur landing) */
h1{
  line-height:1.15;
  letter-spacing:-.01em;
  text-rendering:optimizeLegibility;
}
/* Préserve cas spéciaux nécessitant line-height plus serré (hero praticien --bsh-m drop-shadows) */
.hero h1,.hero-has-banner h1{
  line-height:1.1;
}

/* -------- 8. FOCUS VISIBLE GLOBAL (a11y P1-008) ----------------------- */
*:focus-visible{
  outline:2px solid var(--gold,#b8944a);
  outline-offset:2px;
  box-shadow:0 0 0 4px rgba(184,148,74,.18);
  border-radius:4px;
}
button:focus-visible,a:focus-visible{
  outline-offset:3px;
}

/* -------- 9. SMOOTH FONT RENDERING (premium polish) ------------------- */
html{
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
}

/* ============================================================================
   PHASE P1 — Polish premium ajouts (2026-06-10)
   ========================================================================= */

/* -------- 10. ::SELECTION couleur or premium ---------------------------- */
::selection{
  background:color-mix(in srgb,var(--gold,#b8944a) 28%,transparent);
  color:inherit;
  text-shadow:none;
}
::-moz-selection{
  background:color-mix(in srgb,var(--gold,#b8944a) 28%,transparent);
  color:inherit;
  text-shadow:none;
}

/* -------- 11. SCROLLBAR sobre or (WebKit + Firefox) -------------------- */
*{scrollbar-width:thin;scrollbar-color:var(--gold,#b8944a) transparent}
*::-webkit-scrollbar{width:10px;height:10px}
*::-webkit-scrollbar-track{background:transparent}
*::-webkit-scrollbar-thumb{
  background:color-mix(in srgb,var(--gold,#b8944a) 35%,transparent);
  border-radius:8px;
  border:2px solid transparent;
  background-clip:padding-box;
  transition:background var(--dur-fast,150ms) var(--ease-out);
}
*::-webkit-scrollbar-thumb:hover{
  background:color-mix(in srgb,var(--gold,#b8944a) 55%,transparent);
  background-clip:padding-box;
}

/* -------- 12. MOBILE TAP HIGHLIGHT (fini halo bleu disgracieux) ------- */
html{-webkit-tap-highlight-color:transparent}
a,button,[role="button"]{-webkit-tap-highlight-color:color-mix(in srgb,var(--gold,#b8944a) 16%,transparent)}

/* -------- 13. SMOOTH SCROLL global (premium) -------------------------- */
html{scroll-behavior:smooth}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.01ms!important;
    animation-iteration-count:1!important;
    transition-duration:.01ms!important;
  }
}

/* -------- 14. BODY line-height baseline (override doux) ---------------- */
body{line-height:var(--line-body,1.65)}
:root{--line-body:1.65;--line-tight:1.25;--line-display:1.1}

/* -------- 15. FOCUS-VISIBLE explicit sur inputs (a11y P1-008 renforcé) - */
input:focus-visible,select:focus-visible,textarea:focus-visible{
  outline:2px solid var(--gold,#b8944a);
  outline-offset:1px;
  box-shadow:0 0 0 4px rgba(184,148,74,.15);
  border-color:var(--gold,#b8944a)!important;
}

/* -------- 16. .m-tile et tiles bento focus alternative (a11y) -------- */
.m-tile:focus-visible,.bfr:focus-visible,.bento:focus-visible{
  outline:2px solid var(--gold,#b8944a);
  outline-offset:3px;
  box-shadow:0 0 0 5px rgba(184,148,74,.18);
}

/* -------- 17. .btn-primary canonique (utilisation future P2) ---------- */
.btn-primary{
  display:inline-flex;align-items:center;gap:10px;
  padding:14px 30px;
  background:linear-gradient(135deg,var(--gold),var(--gold-light));
  color:var(--bg-dark,#1a1107);
  border:0;border-radius:100px;
  font-weight:600;font-size:.9rem;letter-spacing:.04em;
  text-decoration:none;cursor:pointer;
  box-shadow:var(--shadow-gold);
  transition:transform var(--dur-normal) var(--ease-out),box-shadow var(--dur-normal) var(--ease-out);
}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 12px 36px var(--gold-glow)}
.btn-primary:active{transform:translateY(0)}

/* -------- 18. PRINT médiaqueries minimales (premium polish) ----------- */
@media print{
  .float-nav,.wa-float,.gs-fab-wa,.gs-asst-fab,.gs-rts-ecare-banner,#gs-cookie-banner{display:none!important}
  body{background:#fff!important;color:#000!important}
  a{text-decoration:underline!important;color:#000!important}
}

/* ============================================================================
   PHASE P2 — Polish esthétique premium (2026-06-10)
   ========================================================================= */

/* -------- 19. RADIUS TOKENS (rayons disciplinés) ----------------------- */
:root{
  --radius-xs:6px;
  --radius-sm:10px;
  --radius-md:14px;
  --radius-lg:20px;
  --radius-xl:28px;
  --radius-pill:100px;
  --radius-circle:50%;
}

/* -------- 20. CLS PREVENTION — images sans aspect-ratio --------------- */
/* Évite layout shifts avant chargement (Core Web Vitals) */
img:not([width]):not([height]):not([style*="aspect-ratio"]){
  aspect-ratio:attr(width) / attr(height);
}
/* Fallback safe pour avatars cercles */
.hero-av img,.hero-av-placeholder{aspect-ratio:1/1}

/* -------- 21. HOVER MICRO-INTERACTIONS (boutons + cards) -------------- */
/* Note: protégé par :not pour ne pas écraser hover existants explicitement définis */
a[class*="btn-"]:not([class*="float-nav"]):not(.btn-whatsapp):hover,
button[class*="btn-"]:hover{
  transition:transform var(--dur-normal,300ms) var(--ease-out,cubic-bezier(.22,1,.36,1)),
             box-shadow var(--dur-normal,300ms) var(--ease-out);
}

/* -------- 22. FLOAT-NAV bounce easing (P2 audit point #6) ------------ */
.float-nav.scrolled{
  transition:background var(--dur-slow,500ms) var(--ease-bounce,cubic-bezier(.34,1.56,.64,1)),
             backdrop-filter var(--dur-slow) var(--ease-out),
             padding var(--dur-normal,300ms) var(--ease-bounce);
}

/* -------- 23. CARDS HOVER ELEVATION premium --------------------------- */
.svc-card,.test-card,.gal-item,.testi-card{
  transition:transform var(--dur-normal,300ms) var(--ease-out,cubic-bezier(.22,1,.36,1)),
             box-shadow var(--dur-normal,300ms) var(--ease-out),
             border-color var(--dur-normal,300ms) var(--ease-out);
}
@media(hover:hover){
  .svc-card:hover,.test-card:hover{
    transform:translateY(-3px);
    box-shadow:var(--shadow-lg,0 8px 28px rgba(0,0,0,.14));
  }
}

/* -------- 24. IMAGE LAZY FADE-IN smooth (premium) --------------------- */
img[loading="lazy"]{
  transition:opacity var(--dur-slow,500ms) var(--ease-out,cubic-bezier(.22,1,.36,1));
}
img[loading="lazy"]:not(.loaded):not([src=""]){opacity:.001}
img[loading="lazy"].loaded,img[loading="lazy"][src]:not([src=""]){opacity:1}

/* -------- 25. LINK-AS-BUTTON underline a11y (P2-010) ------------------ */
/* Garde focus + sublime underline sur lien-bouton qui visuellement = bouton */
a[role="button"]:focus-visible::after,
a.btn-primary:focus-visible::after,
a.cta-main:focus-visible::after,
a.btn-gold:focus-visible::after{
  content:'';position:absolute;left:20%;right:20%;bottom:4px;
  height:1.5px;background:currentColor;opacity:.6;border-radius:1px;
}

/* -------- 26. SECTION reveal fade-up subtil (intersection-observer-ready) */
.sec,.feat,.hero,.testi,.gal,.svc,.about,.fin{
  /* Préparation pour reveal — actif uniquement si JS pose .reveal-up */
}
.reveal-up{
  opacity:0;transform:translateY(24px);
  transition:opacity var(--dur-slow,500ms) var(--ease-out),
             transform var(--dur-slow) var(--ease-out);
}
.reveal-up.in-view{opacity:1;transform:translateY(0)}
@media(prefers-reduced-motion:reduce){
  .reveal-up{opacity:1!important;transform:none!important;transition:none!important}
}

/* -------- 27. INPUT TEXTAREA SELECT padding harmonisé ---------------- */
input,select,textarea{
  font-family:inherit;font-size:inherit;color:inherit;
}

/* -------- 28. BLOCKQUOTE premium polish (testimonials raffinées) ----- */
blockquote{
  position:relative;font-style:italic;
  padding-left:1.5em;
  border-left:2px solid var(--gold,#b8944a);
  color:inherit;
}
blockquote::before{
  content:'';position:absolute;left:-3px;top:0;
  width:6px;height:6px;border-radius:50%;
  background:var(--gold,#b8944a);
}

/* -------- 29. TABLE premium (si jamais utilisé dans backoffice) ------- */
table{border-collapse:collapse;border-spacing:0;width:100%}
table th,table td{
  padding:var(--sp-2,16px) var(--sp-3,24px);
  border-bottom:1px solid var(--border-soft,rgba(184,148,74,.12));
  text-align:left;
}
table th{
  font-weight:600;color:var(--gold,#b8944a);
  letter-spacing:.04em;font-size:.85em;text-transform:uppercase;
}

/* -------- 30. UTILITIES (classes optionnelles ultra-utiles) ----------- */
.u-elev-1{box-shadow:var(--shadow-sm)}
.u-elev-2{box-shadow:var(--shadow-md)}
.u-elev-3{box-shadow:var(--shadow-lg)}
.u-text-gold{color:var(--gold)!important}
.u-bg-cream{background:var(--cream-soft)!important}
.u-radius-md{border-radius:var(--radius-md)}
.u-radius-lg{border-radius:var(--radius-lg)}
.u-radius-pill{border-radius:var(--radius-pill)}