/* ==========================================================
   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 {
  --bleu-txt: #124471;      /* texte courant, titres forts — sur blanc : 13.7:1 */
  --bleu-fonce: #266C8A;
  --bleu-clair: #68B2D2;      /* nav, boutons, sous-titres — sur blanc : 5.8:1 */
  --bleu-glace: #5BC4BD; /* accroches / gros titres décoratifs — sur blanc : 4.2:1 */
  --bleu-glace-fonce: #2c9c97;
  --teal-tint: rgba(91, 196, 189, 0.11);
  --bleu-h3: #266C8A;

  --bg-alt: #F9F9F9;
  --deep: #0B384B;
  --focus: #0B384B;

  /* ---- Neutres ---- */
  --blanc: #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);
  --overlay-white-90: rgba(255, 255, 255, 0.9);

  /* ---- Tailles de texte ---- */
  --font-size-body: 18px;                 /* taille par défaut */
  --font-size-nav: 1.25rem;                  /* lien menu desktop */
  --font-size-nav-sticky: 1.15rem;         /* lien menu desktop, quand le menu est collé en haut */
  --font-size-nav-dropdown: 1.2rem;       /* lien du sous-menu déroulant (desktop) */
  --font-size-footer-title: 1.8rem;       /* titre de colonne en pied de page */
  --font-size-banner-text: 0.8rem;        /* texte du bandeau d'info (.msg_feu p) */
  --font-size-banner-strong: 0.85rem;     /* mot en gras du bandeau, en mobile (<575px) */
  --font-size-widget-link: 14px;          /* lien de widget dans le volet latéral */
  --font-size-mobile-menu-item: 20px;     /* item du menu mobile (volet contact) */
  --font-size-mobile-submenu-item: 16px;  /* item du sous-menu mobile */
  --font-size-button: 16px;               /* bouton lien */
  --font-size-h2: 3rem;                   /* titre h2 */
  --font-size-h2-ancre: 2.3rem;                   /* titre h2 */
  --font-size-h3: 29px;                   /* titre h3 */
  --font-size-big-h3: 50px;                   /* titre big h3 JennaSue */
  --font-size-h4: 21px;                   /* titre h4 */
  --font-size-quote: 40px;                /* citation */

  --line-height-big: 2;
  --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) {
    :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) { 
    :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) { 
    :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) { 
    :root {
      --font-size-h2: calc(35px * var(--a11y-font-scale));
      --font-size-h3: calc(22px * var(--a11y-font-scale));
      --font-size-quote: calc(30px * var(--a11y-font-scale));
    }
  }*/