/* =========================================================
   variables.css — L'Atelier des Arts
   Palette Kandinsky · Direction artistique Piste 1
   ========================================================= */

:root {
  /* === PALETTE KANDINSKY === */
  /* Fonds gris-bleu — teintes données par la cliente (mail du 21/07/2026),
     validées à l'appel du 5/08. Remplacent le beige/crème d'origine. */
  --color-bg:       #f2f8fa;     /* fond principal gris-bleu clair */
  --color-bg-alt:   #dfeaef;     /* fond secondaire, dérivé de #cadbe1 en plus clair */
  --color-bandeau:  #cadbe1;     /* bande de transition en haut du pied de page */
  --color-white:    #ffffff;
  --color-ink:      #111111;     /* noir profond — texte et contours de structure */
  --color-ink-soft: #2a2a2a;
  --color-muted:    #5f6675;     /* gris-bleu pour les textes secondaires */
  --color-line:     #cdd9df;     /* filets gris-bleu */

  /* === CODE-COULEUR FONCTIONNEL (mail du 21/07/2026) ===
     Orangé = information passive · Navy + jaune = soutenir l'association
     Rouge  = action à effectuer par le lecteur, y compris tous les survols */
  /* Rouge assombri le 17/08/2026 (recette) : l'ancien #e43d3d plafonnait à
     4.17:1 en texte blanc sur aplat et 3.89:1 en texte rouge sur le fond du
     site, sous le seuil d'accessibilité AA (4.5:1). Même teinte, même
     saturation, 7 % plus sombre : 4.86:1 et 4.53:1. */
  --color-red:      #de1f1f;    /* action à effectuer + états :hover */
  --color-red-dark: #bf1b1b;    /* survol d'un élément déjà rouge (sinon aucun retour visuel) */
  --color-orange:   #f0c35d;    /* information passive : bandeau « à la une », contour des photos */
  --color-blue:     #395495;    /* bleu cobalt */
  --color-yellow:   #f6e448;    /* jaune clair — texte des blocs de soutien */
  --color-navy:     #2b2f48;    /* fonds décoratifs pleins + blocs de soutien (le texte reste noir) */
  --color-green:    #47943f;    /* accent */

  /* === TYPOGRAPHIES === */
  --font-display: 'Josefin Sans', 'Helvetica Neue', system-ui, sans-serif;
  --font-body:    'Comfortaa', 'Helvetica Neue', system-ui, sans-serif;

  /* === LAYOUT === */
  --container:     1280px;
  --sidebar-width: 320px;
  --gutter:         48px;
  --padding-x:      40px;

  /* === ESPACEMENT === */
  --space-2:  0.5rem;
  --space-3:  0.75rem;
  --space-4:  1rem;
  --space-6:  1.5rem;
  --space-8:  2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;

  /* === TRANSITIONS === */
  --ease: 0.25s ease;
  --ease-fast: 0.15s ease;

  /* === OMBRES === */
  --shadow-card: 0 10px 30px -16px rgba(17,17,17,0.22);
  --shadow-hard: 14px 14px 0 0 var(--color-navy);
}

/* ---------- Reset minimal ----------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html {
  -webkit-text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  scroll-behavior: smooth;
}
body { margin: 0; min-height: 100vh; overflow-x: hidden; }
h1,h2,h3,h4,h5,h6,p,ul,ol,figure,blockquote { margin: 0; padding: 0; }
ul,ol { list-style: none; }
a { color: inherit; text-decoration: none; }
img,svg,picture { display: block; max-width: 100%; height: auto; }
button { font: inherit; cursor: pointer; border: 0; background: transparent; color: inherit; }
input,textarea,select { font: inherit; }
:focus-visible { outline: 2px solid var(--color-red); outline-offset: 3px; }