/* ═══════════════════════════════════════════════════════════════
   LA MARQUISE — Grignan
   Deux couleurs : le blanc et le marron. Rien d'autre.
   Pour ne pas tomber dans l'aplat, le marron est décliné en une
   échelle de six valeurs, et les sections alternent le long de
   cette échelle : on sent qu'on change de pièce en descendant.
   ═══════════════════════════════════════════════════════════════ */

:root {
  /* ---- L'échelle, du plus clair au plus sombre ---- */
  --blanc:      #FFFFFF;
  --creme:      #FBF8F4;
  --sable:      #F1E8DF;
  --lin:        #E3D6C7;
  --taupe:      #C1A68C;   /* la valeur qui se voit sur clair comme sur sombre */
  --brun:       #6E4F3A;
  --brun-fonce: #3B2A20;
  --brun-nuit:  #241913;

  /* ---- Rôles — valeurs par défaut, sections claires ---- */
  --fond:        var(--blanc);
  --carte-fond:  var(--blanc);
  --texte:       var(--brun-nuit);
  --doux:        #6B594B;
  --trait:       #DFD1C0;
  --accent:      var(--brun);
  --accent-voile:var(--sable);
  --prix:        #9A6634;
  --btn-texte:   var(--blanc);

  /* ---- Sections sombres : on ne change que les rôles ---- */
  --ombre: 0 22px 50px -20px rgba(36, 25, 19, .45);

  /* ---- Typographie ---- */
  --font-titre: 'Oswald', 'Haettenschweiler', 'Arial Narrow', sans-serif;
  --font-corps: 'Karla', 'Segoe UI', system-ui, sans-serif;

  --t-hero:  clamp(2.4rem, 1.2rem + 4.6vw, 4.5rem);
  --t-h2:    clamp(1.8rem, 1.1rem + 2.9vw, 3.1rem);
  --t-h3:    clamp(1.15rem, 1rem + 0.85vw, 1.55rem);
  --t-corps: clamp(1rem,    .96rem + .2vw, 1.125rem);
  --t-petit: .8125rem;
  --t-micro: .6875rem;

  /* ---- Espacements ---- */
  --gap-xs: .5rem;
  --gap-s:  1rem;
  --gap-m:  2rem;
  --gap-l:  clamp(3rem, 6vw, 6rem);
  --gap-xl: clamp(4.5rem, 10vw, 9rem);
  --large:  1180px;
  --lecture: 62ch;

  /* ---- Rythme d'animation ---- */
  --anim-duree:    640ms;
  --anim-decalage: 70ms;
  --anim-distance: 22px;
  --anim-courbe:   cubic-bezier(.16, 1, .3, 1);

  --rayon: 2px;
}

/* Bascule locale : une section sombre redéfinit les mêmes rôles.
   Aucun composant n'a besoin de savoir sur quel fond il se trouve. */
.sombre {
  --fond:        var(--brun-fonce);
  --carte-fond:  var(--blanc);
  --texte:       var(--creme);
  --doux:        #C7B4A2;
  --trait:       #5B4535;
  --accent:      #E2C7AA;
  --accent-voile:#4A3628;
  --prix:        #E5BA82;
  --btn-texte:   var(--brun-nuit);
}
.sombre--nuit { --fond: var(--brun-nuit); --trait: #4A362A; }

/* Les fonds de section, dans l'ordre de lecture */
.fond-blanc { --fond: var(--blanc); }
.fond-creme { --fond: var(--creme); }
.fond-sable { --fond: var(--sable); }
.fond-lin   { --fond: var(--lin); }