/* ==========================================================================
   cassiopeia_grognard — variables.css
   Rôles de la charte sgtcoignet : à quoi sert chaque couleur ou taille.
   Pour changer l'ambiance du site, on modifie ces valeurs, pas les règles.
   ========================================================================== */

:root {
  /* En-tête */
  --sc-header-bordure: var(--sc-or-imperial);
  --sc-header-hauteur: 3.875rem;
  --sc-logo-taille: 2.1rem;
  --sc-footer-logo-taille: 1.4rem;

  /* Menu */
  --sc-menu-texte: var(--sc-parchemin-alt);
  --sc-menu-actif: var(--sc-or-imperial);
}

:root {
  /* Pied de page */
  --sc-footer-bordure: var(--sc-or-imperial);
  --sc-footer-titre: var(--sc-parchemin);
  --sc-footer-lien-survol: var(--sc-or-imperial);
}

:root {
  /* Tailles de texte */
  --sc-menu-taille: 1rem;
  --sc-footer-taille: 1rem;
  --sc-footer-titre-taille: 1.125rem;
  --sc-footer-copy-taille: 0.875rem;
}

:root {
  --sc-footer-texte: color-mix(in srgb, var(--sc-parchemin-alt) 85%, transparent);
  --sc-footer-texte-discret: color-mix(in srgb, var(--sc-parchemin-alt) 70%, transparent);
}

:root {
  /* Barre du haut */
  --sc-topbar-fond: color-mix(in srgb, var(--headerbg) 55%, black);
  --sc-topbar-texte: var(--sc-parchemin-alt);
  --sc-topbar-taille: 1rem;
  --sc-topbar-espace: 0.25rem;
}

:root {
  /* Bannière d'accueil */
  --sc-banner-hauteur: clamp(14rem, 30vw, 600px);
  --sc-banner-voile: rgb(0 0 0 / 0.5);
  --sc-banner-filet: var(--sc-or-imperial);
}

:root {
  --sc-retrait: 1.5em;
  --sc-titre-couleur: var(--sc-bleu-empire);
  --sc-titre-interligne: 1.2;
  --sc-titre-taille: clamp(2rem, 5vw, 3rem);
}

:root {
  --sc-footer-titre: var(--sc-or-imperial);
}

:root {
  /* Carrousel Découverte */
  --sc-carrousel-hauteur: clamp(18rem, 40vw, 500px);
  --sc-carrousel-visibles: 3;
  --sc-carrousel-voile: var(--sc-bleu-empire);
  --sc-carrousel-voile-hauteur: 45%;
  --sc-carrousel-retrait: 1rem;
  --sc-carrousel-titre-couleur: white;
  --sc-carrousel-titre-taille: 1.25rem;
  --sc-carrousel-texte-taille: 1rem;
  --sc-carrousel-fleche-taille: 2rem;
  --sc-carrousel-pastille-couleur: var(--sc-bleu-empire);
  --sc-carrousel-pastille-taille: 14px;
  --sc-carrousel-pastille-contour: 2px;
  --sc-carrousel-focus-couleur: var(--sc-or-imperial);
  --sc-carrousel-focus-epaisseur: 3px;
}