/* ============================================================
   ZONEDEVIE.COM — variables.css  (design V2 — 2026)
   À charger EN PREMIER avant tous les autres CSS
   ============================================================ */

@charset "utf-8";

/* ---- Google Fonts : préconnexion pour performances ---- */
/* Ces 2 <link> doivent aussi être dans head-commun.php    */

/* ---- Palette nature/éditoriale ---- */
:root {
  --vert-fonce:  #2d4a2d;
  --vert-moyen:  #4a7c59;
  --vert-clair:  #8db89a;
  --vert-pale:   #e8f2eb;
  --terre:       #8b5e3c;
  --terre-pale:  #f5ede4;
  --ocre:        #c4955a;
  --creme:       #faf8f3;
  --blanc:       #ffffff;
  --texte:       #1c2b1c;
  --texte-doux:  #4a5a4a;
  --texte-leger: #7a8a7a;
  --bordure:     #d4e4d4;

  /* Typographie */
  --font-titre: 'Playfair Display', Georgia, serif;
  --font-corps: 'Source Serif 4', Georgia, serif;

  /* Ombres */
  --ombre-sm: 0 2px 8px rgba(45,74,45,.08);
  --ombre-md: 0 6px 24px rgba(45,74,45,.12);
  --ombre-lg: 0 16px 48px rgba(45,74,45,.18);

  /* Rayons */
  --rayon:    12px;
  --rayon-lg: 20px;

  /* Transition globale */
  --transition: .25s cubic-bezier(.4,0,.2,1);
}

/* ---- Mode sombre automatique ---- */
@media (prefers-color-scheme: dark) {
  :root {
    --vert-fonce:  #a8d4b0;
    --vert-moyen:  #7db88a;
    --vert-clair:  #4a7c59;
    --vert-pale:   #1a2e1d;
    --terre:       #c4955a;
    --terre-pale:  #2a1f15;
    --ocre:        #d4a570;
    --creme:       #141a14;
    --blanc:       #1e261e;
    --texte:       #e8f0e8;
    --texte-doux:  #b0c4b0;
    --texte-leger: #7a8a7a;
    --bordure:     #2a3d2a;
  }
}

/* ---- Reset minimal ---- */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  font-size: 17px;
  overflow-x: hidden;
}

body {
  font-family: var(--font-corps);
  background: var(--creme);
  color: var(--texte);
  line-height: 1.75;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

a {
  color: var(--vert-moyen);
  text-decoration: none;
  transition: color var(--transition);
}

a:hover {
  color: var(--terre);
  text-decoration: underline;
  text-decoration-thickness: 1px;
}

a:focus-visible {
  outline: 2px solid var(--vert-moyen);
  outline-offset: 3px;
  border-radius: 3px;
}