/* ==========================================================================
   BRASÉ'ROQ — TOKENS
   Toutes les valeurs de design du site (couleurs, typo, espacements…).
   Modifier une valeur ici la change partout sur le site.
   ========================================================================== */

:root {

  /* ---------------------------------------------------------------------
     1. COULEURS — LA MATIÈRE (noirs chauds, comme de la fonte refroidie)
     Aucun gris "bleu" : tout est très légèrement réchauffé pour rester
     dans l'univers du métal et du feu.
     --------------------------------------------------------------------- */
  --c-fonte:        #0A0806;   /* fond général de la page                  */
  --c-cuve:         #100C09;   /* fond des sections alternées              */
  --c-suie:         #16110E;   /* fond des cartes                          */
  --c-suie-haut:    #1D1713;   /* carte survolée / surface surélevée       */

  --c-trait:        #2A221D;   /* bordures discrètes                       */
  --c-trait-fort:   #3D322A;   /* bordures marquées                        */

  /* ---------------------------------------------------------------------
     2. COULEURS — LE TEXTE (de l'acier poli au blanc de chaux)
     --------------------------------------------------------------------- */
  --c-titre:        #F7F3EE;   /* titres                                   */
  --c-texte:        #D5CDC4;   /* texte courant                            */
  --c-texte-doux:   #A2988E;   /* texte secondaire                         */
  --c-texte-faible: #6E645C;   /* mentions, légendes                       */

  /* ---------------------------------------------------------------------
     3. COULEURS — LE FEU (l'accent de la marque)
     Le rouge reprend celui de la flamme du logo Brasé'Roq.
     --------------------------------------------------------------------- */
  --c-braise:       #A31515;   /* rouge profond du logo                    */
  --c-ember:        #C2410C;   /* braise chaude                            */
  --c-flamme:       #F26B0F;   /* ACCENT PRINCIPAL                         */
  --c-flamme-clair: #FF9A2E;   /* accent lisible en petit corps            */
  --c-etincelle:    #FFC861;   /* pointes de flamme, survols               */
  --c-lueur:        #FFE9B8;   /* le plus clair : cœur du feu              */

  /* Le vert du label « Fabriqué en Aveyron » — réservé au terroir,
     jamais utilisé comme accent d'interface (sinon il combat le feu). */
  --c-aveyron:      #5EC247;

  /* ---------------------------------------------------------------------
     4. DÉGRADÉS
     --------------------------------------------------------------------- */
  --g-flamme:    linear-gradient(135deg, var(--c-braise) 0%, var(--c-flamme) 48%, var(--c-etincelle) 100%);
  --g-flamme-h:  linear-gradient(90deg,  var(--c-braise) 0%, var(--c-flamme) 50%, var(--c-etincelle) 100%);
  --g-texte:     linear-gradient(100deg, var(--c-etincelle) 0%, var(--c-flamme-clair) 50%, var(--c-ember) 100%);
  /* Voile posé sur les photos pour que le texte reste lisible */
  --g-voile:     linear-gradient(180deg, rgba(10,8,6,.15) 0%, rgba(10,8,6,.55) 55%, rgba(10,8,6,.94) 100%);

  /* ---------------------------------------------------------------------
     5. LUEURS & OMBRES
     --------------------------------------------------------------------- */
  --lueur-douce:  0 0 40px rgba(242,107,15,.13);
  --lueur-forte:  0 0 60px rgba(242,107,15,.28);
  --lueur-bord:   0 0 0 1px rgba(242,107,15,.35), 0 0 28px rgba(242,107,15,.20);

  --ombre-s:  0 2px 10px rgba(0,0,0,.45);
  --ombre-m:  0 12px 32px rgba(0,0,0,.55);
  --ombre-l:  0 26px 70px rgba(0,0,0,.68);

  /* ---------------------------------------------------------------------
     6. TYPOGRAPHIE
     Oswald : condensé, industriel — écho aux lettres découpées au laser
              sur les braseros.
     Inter  : lecture confortable pour les textes longs.
     --------------------------------------------------------------------- */
  --f-titre: "Oswald", "Haettenschweiler", "Arial Narrow", sans-serif;
  --f-texte: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;

  /* Échelle fluide : la taille s'adapte à la largeur de l'écran
     sans avoir besoin de media queries. */
  --t-xs:   0.75rem;                              /* 12px  — mentions      */
  --t-s:    0.8125rem;                            /* 13px  — surtitres     */
  --t-m:    0.9375rem;                            /* 15px  — texte petit   */
  --t-base: 1rem;                                 /* 16px  — texte courant */
  --t-l:    clamp(1.05rem, 0.98rem + 0.35vw, 1.25rem);
  --t-xl:   clamp(1.35rem, 1.15rem + 0.9vw,  1.85rem);
  --t-2xl:  clamp(1.7rem,  1.35rem + 1.6vw,  2.6rem);
  --t-3xl:  clamp(2.1rem,  1.5rem  + 2.8vw,  3.8rem);
  --t-4xl:  clamp(2.6rem,  1.5rem  + 5vw,    6rem);   /* titre de hero     */

  --lh-serre:  1.08;
  --lh-titre:  1.18;
  --lh-texte:  1.72;

  /* ---------------------------------------------------------------------
     7. ESPACEMENTS & GABARITS
     --------------------------------------------------------------------- */
  --e-1: 0.25rem;  --e-2: 0.5rem;   --e-3: 0.75rem;  --e-4: 1rem;
  --e-5: 1.5rem;   --e-6: 2rem;     --e-7: 3rem;     --e-8: 4rem;
  --e-9: 6rem;     --e-10: 8rem;

  /* Respiration verticale d'une section, fluide */
  --section-y: clamp(4.5rem, 3rem + 7vw, 9rem);

  --largeur-max:   1240px;   /* conteneur standard        */
  --largeur-large: 1560px;   /* galeries, sections larges */
  --largeur-texte: 760px;    /* longueur de ligne lisible */

  --marge-page: clamp(1.25rem, 5vw, 3.5rem);

  /* ---------------------------------------------------------------------
     8. ARRONDIS, TRANSITIONS, PLANS
     --------------------------------------------------------------------- */
  --r-s: 4px;  --r-m: 8px;  --r-l: 14px;  --r-xl: 22px;  --r-rond: 999px;

  --tr-rapide: 180ms cubic-bezier(.4,0,.2,1);
  --tr-normal: 320ms cubic-bezier(.4,0,.2,1);
  --tr-lent:   620ms cubic-bezier(.16,1,.3,1);

  --z-fond: 0;  --z-lueur: 1;  --z-contenu: 2;
  --z-nav: 100; --z-menu: 110; --z-lightbox: 200;

  --hauteur-nav: 76px;

  /* ---------------------------------------------------------------------
     9. VARIABLES PILOTÉES PAR LE JAVASCRIPT
     Elles font vivre le « jeu de lumière » : la position du curseur et
     l'avancement du scroll sont injectés ici, le CSS s'en sert pour
     déplacer les lueurs. Valeurs par défaut = expérience correcte
     même si le JS ne se charge pas.
     --------------------------------------------------------------------- */
  --souris-x: 50%;    /* position horizontale du curseur       */
  --souris-y: 30%;    /* position verticale du curseur         */
  --scroll: 0;        /* progression de lecture, de 0 à 1      */
  --chaleur: 0.55;    /* intensité générale de la lueur, 0 à 1 */
}

/* ==========================================================================
   ACCESSIBILITÉ — mouvement réduit
   Si la personne a demandé « moins d'animations » dans son système,
   on coupe les effets de mouvement mais on garde les couleurs et les lueurs.
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  :root {
    --tr-rapide: 1ms; --tr-normal: 1ms; --tr-lent: 1ms;
  }
}