/* ==========================================================
   THEME TOKENS
   Toutes les couleurs utilisées dans custom.css, sidr.css et
   chateaubriand.css sont ici, sous forme de variables CSS.
   Les 3 fichiers ne contiennent plus de couleur "en dur" :
   ils font tous var(--nom-de-la-variable).

   IMPORTANT : ce fichier doit être chargé (balise <link>)
   AVANT custom.css, sidr.css et chateaubriand.css.
   ========================================================== */

:root {
  /* ---- Couleurs de marque ---- */
  --color-brand-red: #962331;       /* rouge principal (menus, bg_rouge, .sidr...) */
  --color-brand-anis: #EEF4DE;      /* vert anis (bg_anis, menu desktop...) */
  --color-brand-vert: #46532B;  /* vert foncé, fond sous-menu volet contact */

  /* ---- Neutres ---- */
  --color-white: #ffffff;
  --color-black: #000000;
  --color-border: #dddddd;
  --color-border-2: #cccccc;

  /* ---- Superpositions (ombres, fonds semi-transparents) ---- */
  --overlay-black-10: rgba(0, 0, 0, 0.1);
  --overlay-black-20: rgba(0, 0, 0, 0.2);
  --overlay-black-50: rgba(0, 0, 0, 0.5);
  --overlay-black-80: rgba(0, 0, 0, 0.8);
  --overlay-black-90: rgba(0, 0, 0, 0.9);
  --overlay-white-0: rgba(255, 255, 255, 0);
  --overlay-white-20: rgba(255, 255, 255, 0.2);
  --overlay-white-30: rgba(255, 255, 255, 0.3);
  --overlay-white-50: rgba(255, 255, 255, 0.5);

  /* ----------------------------------------------------------
     WIDGET ACCESSIBILITÉ — curseur d'échelle des tailles de texte.
     Vaut 1 par défaut (rien ne change). accessibility-widget.js pose
     data-a11y-font="125|150|200" sur <html>, ce qui redéfinit cette
     seule variable plus bas ; comme TOUS les --font-size-* ci-dessous
     sont exprimés en calc(valeur_de_base * var(--a11y-font-scale)),
     un seul changement fait bouger tous les textes du site — sans
     toucher custom.css/sidr.css/chateaubriand.css, qui continuent de
     lire var(--font-size-xxx) sans rien savoir de ce mécanisme.
     ---------------------------------------------------------- */
  --a11y-font-scale: 1;

  /* ---- Tailles de texte ---- */
  --font-size-body: calc(16px * var(--a11y-font-scale));                 /* taille par défaut */
  --font-size-nav: calc(1rem * var(--a11y-font-scale));                  /* lien menu desktop */
  --font-size-nav-sticky: calc(0.9rem * var(--a11y-font-scale));         /* lien menu desktop, quand le menu est collé en haut */
  --font-size-nav-dropdown: calc(1.05rem * var(--a11y-font-scale));       /* lien du sous-menu déroulant (desktop) */
  --font-size-footer-title: calc(1.8rem * var(--a11y-font-scale));       /* titre de colonne en pied de page */
  --font-size-banner-text: calc(0.8rem * var(--a11y-font-scale));        /* texte du bandeau d'info (.msg_feu p) */
  --font-size-banner-strong: calc(0.85rem * var(--a11y-font-scale));     /* mot en gras du bandeau, en mobile (<575px) */
  --font-size-widget-link: calc(14px * var(--a11y-font-scale));          /* lien de widget dans le volet latéral */
  --font-size-mobile-menu-item: calc(20px * var(--a11y-font-scale));     /* item du menu mobile (volet contact) */
  --font-size-mobile-submenu-item: calc(16px * var(--a11y-font-scale));  /* item du sous-menu mobile */
  --font-size-button: calc(16px * var(--a11y-font-scale));               /* bouton lien */
  --font-size-h2: calc(58px * var(--a11y-font-scale));                   /* titre h2 */
  --font-size-h3: calc(29px * var(--a11y-font-scale));                   /* titre h3 */
  --font-size-h4: calc(21px * var(--a11y-font-scale));                   /* titre h4 */
  --font-size-quote: calc(40px * var(--a11y-font-scale));                /* citation */
  --font-size-h1-archive: calc(45px * var(--a11y-font-scale));           /* titre h1 page archive */

  --line-height-big: 1.6;
  --line-height-medium-bis: 1.4;
  --line-height-medium: 1.2;
  --line-height-small: 1;
}

/* ==========================================================
   RESPONSIVE — tailles qui changent selon la largeur d'écran
   ==========================================================
   Repéré dans sidr.css : le menu mobile du volet contact passait
   de 20px à 17px sous 450px de large, via un @media qui redéclarait
   tout le sélecteur juste pour ce changement de taille. En le
   déplaçant ici, sidr.css n'a plus besoin de ce @media du tout :
   la variable change de valeur, tout ce qui l'utilise suit.

   Chaque valeur reste multipliée par --a11y-font-scale : sans ça,
   agrandir le texte puis redimensionner la fenêtre (ou charger la
   page directement en mobile) aurait fait revenir h2/h3/quote à
   leur taille normale sous ces largeurs.
   ========================================================== */

  @media only screen and (max-width: 1199px) {/* passage col-lg-x */
    :root {
      --font-size-h2: calc(55px * var(--a11y-font-scale));
      --font-size-h3: calc(28px * var(--a11y-font-scale));
    }

  }
  @media only screen and (max-width: 991px) { /* col-md-x*/
    :root {
      --font-size-h2: calc(45px * var(--a11y-font-scale));
      --font-size-h3: calc(26px * var(--a11y-font-scale));
      --font-size-quote: calc(40px * var(--a11y-font-scale));
    }

  }
  @media only screen and (max-width: 767px) { /* col-sm-x*/
    :root {
      --font-size-h2: calc(40px * var(--a11y-font-scale));
      --font-size-h3: calc(24px * var(--a11y-font-scale));
      --font-size-quote: calc(30px * var(--a11y-font-scale));
    }

  }
  @media only screen and (max-width: 575px) { /* passage col-100% */
    :root {
      --font-size-h2: calc(35px * var(--a11y-font-scale));
      --font-size-h3: calc(22px * var(--a11y-font-scale));
      --font-size-quote: calc(27px * var(--a11y-font-scale));
      --font-size-button: calc(14px * var(--a11y-font-scale));
    }
  }

/* ==========================================================
   WIDGET ACCESSIBILITÉ — paliers posés par accessibility-widget.js
   sur <html> (data-a11y-font / data-a11y-spacing / data-theme)
   ========================================================== */

/* --- Taille de texte -----------------------------------------
   Rien à dupliquer ici : changer --a11y-font-scale suffit, tous
   les --font-size-* (base + les 4 @media au-dessus) le lisent déjà. */
:root[data-a11y-font="125"] { --a11y-font-scale: 1.25; }
:root[data-a11y-font="150"] { --a11y-font-scale: 1.5; }
:root[data-a11y-font="200"] { --a11y-font-scale: 2; }

/* --- Interlignage ----------------------------------------------
   Valeurs choisies pour respecter le critère WCAG 1.4.12 (Text
   Spacing) : interligne >= 1.5 dès le palier "Augmentée". Des
   valeurs fixes plutôt qu'un multiplicateur, parce que les 4
   paliers de départ sont très éloignés les uns des autres
   (1.6 / 1.4 / 1.2 / 1) : un même coefficient les traiterait tous
   pareil, alors que --line-height-small (1) a besoin d'un bien plus
   gros coup de pouce que --line-height-big (déjà à 1.6). */
:root[data-a11y-spacing="increased"] {
  --line-height-big: 1.8;
  --line-height-medium-bis: 1.6;
  --line-height-medium: 1.5;
  --line-height-small: 1.5;
}
:root[data-a11y-spacing="large"] {
  --line-height-big: 2;
  --line-height-medium-bis: 1.9;
  --line-height-medium: 1.8;
  --line-height-small: 1.8;
}

/* ==========================================================
   THEME "CONTRASTE ÉLEVÉ" — EXEMPLE DE DÉPART, À VALIDER
   ==========================================================
   Ceci n'est qu'un point de départ pour tester le mécanisme
   (voir la démo HTML envoyée précédemment). Une fois que le
   client aura choisi les options qu'il veut proposer, on
   affine ces valeurs ensemble — quitte à en faire plusieurs
   thèmes distincts ([data-theme="contrast"], [data-theme="large-text"],
   etc.), chacun ne redéfinissant que ce dont il a besoin.
   ========================================================== */
[data-theme="contrast"] {
  --color-brand-red: #000000;       /* accent fort en remplacement du rouge */
  --color-brand-anis: #ffdd00;
  --color-brand-vert: #000000;      /* <- corrigé : c'était "--color-brand_vert" (underscore),
                                        donc une variable différente de celle que lisent
                                        custom.css/chateaubriand.css ("--color-brand-vert",
                                        avec un tiret) — cette ligne ne s'appliquait jamais. */

  --color-white: #ffffff;
  --color-black: #ffdd00;
  --color-border: #ffffff;
  --color-border-2: #ffffff;

  --overlay-black-10: rgba(255, 255, 255, 0.1);
  --overlay-black-20: rgba(255, 255, 255, 0.2);
  --overlay-black-50: rgba(255, 255, 255, 0.5);
  --overlay-white-0: rgba(255, 255, 255, 0);
  --overlay-white-20: rgba(255, 255, 255, 0.3);
  --overlay-white-30: rgba(255, 255, 255, 0.5);
  /* --overlay-white-50 pas redéfini ici (comme dans ta version) : à revoir
     avec le reste de ce thème une fois les couleurs validées avec le client. */
}