/* DIRECTION RETENUE — « Bocage »
 *
 * Direction validée par Adrien le 18 août 2026. Les deux directions écartées
 * (Veillée, Chronique) sont consignées dans ../../../CLAUDE.md du site, palette
 * et typo, pour qu'elles ne reviennent pas.
 *
 * La journée en famille, le plein air vendéen. Clair, rond, chaleureux :
 * rayons généreux, ombres douces, AUCUNE bordure visible, pastilles pleines.
 * La palette reprend le logo : vert profond, crème papier, vert guide,
 * jaune repère et corail posé seulement en accent d'alerte.
 * Titrage robuste sur grotesque neutre.
 */

/* Polices variables self-hébergées, jamais de CDN.
   ⚠️ La graisse passe par l'axe wght, pas par font-weight : sur une police
   variable, font-variation-settings neutralise font-weight. */

@font-face {
  font-family: "Bitter";
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("../fonts/bitter-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
                 U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Bitter";
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("../fonts/bitter-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7,
                 U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
                 U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("../fonts/inter-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
                 U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("../fonts/inter-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7,
                 U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
                 U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  /* Surfaces */
  --surface-fond:      #FFF8EA;
  --surface-carte:     #FFFFFF;
  --surface-entete:    #FFFFFF;   /* PLEIN, jamais translucide */
  --surface-hero:      #F4F7EA;
  --surface-accentuee: #FFF1CF;
  --surface-pied:      #063B34;
  --surface-appel:     #0B463C;

  /* Encres */
  --encre-titre:            #053F36;
  --encre-texte:            #354D43;
  --encre-attenuee:         #60766B;
  --encre-sur-accent:       #FFFFFF;
  --encre-titre-sur-hero:   #053F36;
  --encre-sur-hero:         #3D5348;
  --encre-sur-pied:         #C9DED5;
  --encre-sur-pied-fort:    #FFF8EA;
  --encre-sur-appel:        #F7EBC9;
  --encre-sur-appel-titre:  #FFFFFF;
  --encre-sur-niveau-clair: #053F36;
  --encre-sur-niveau-fort:  #FFFFFF;
  --encre-sur-niveau-3:     #3A2B06;
  --encre-titre-sur-photo:   #FFFFFF;
  --encre-sur-photo:         #FFF8EA;
  --encre-repere-sur-photo:  #F5E8C7;
  --encre-badge-sur-image:   #FFFFFF;
  --encre-prehero-badge:     #053F36;

  /* Accent : vert guide, jaune repère */
  --accent-action:        #2F7A4F;
  --accent-action-survol: #0F574A;
  --accent-doux:          #E7F2DD;
  --accent-sur-photo:     #FFD461;

  /* CTA d'affiliation : orange, tranche volontairement sur le vert du reste
     du site (liens, badges, pistes). Jamais utilisé hors bouton--principal
     et cta-btn--primary. */
  --accent-cta:        #B5541E;
  --accent-cta-survol: #8F4118;

  /* Aucune bordure : la séparation se fait par l'ombre et le fond */
  --filet-couleur:            transparent;
  --filet-epaisseur:          1px;
  --filet-fort:               #BBD7C3;
  --filet-section:            none;
  --filet-rubrique-couleur:   #E7CD88;
  --filet-rubrique-epaisseur: 1px;
  --filet-pied:               #19594E;
  --filet-appel:              transparent;
  --filet-hero-reperes:       rgba(255,255,255,.22);

  /* Formes : rondes, ombres douces */
  --rayon-carte:    16px;
  --rayon-bouton:   999px;
  --rayon-pastille: 999px;
  --ombre-carte:        0 2px 4px rgba(5,63,54,.05), 0 12px 28px rgba(5,63,54,.08);
  --ombre-carte-survol: 0 4px 8px rgba(5,63,54,.08), 0 20px 42px rgba(5,63,54,.13);
  --ombre-bouton:       0 7px 18px rgba(47,122,79,.28);
  --carte-survol-deplacement: translateY(-3px);
  --carte-vignette-largeur:   44px;
  --piste-liseret-epaisseur:  4px;

  /* Typographie : slab robuste sur grotesque */
  --police-titre:  "Bitter", "Roboto Slab", Georgia, serif;
  --police-texte:  "Inter", -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
  --police-donnee: "Inter", -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
  --police-bouton: "Inter", -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;

  --graisse-titre:  700;
  --graisse-marque: 700;
  --graisse-bouton: 600;
  --graisse-donnee: 700;
  --graisse-nav:    500;

  --interlettre-titre:    -0.018em;
  --interlettre-marque:   -0.02em;
  --interlettre-bouton:   0;
  --interlettre-rubrique: 0.12em;

  --casse-titre:  none;
  --casse-marque: none;
  --casse-bouton: none;
  --casse-nav:    none;

  /* Échelle : texte plus grand, colonne plus ample */
  --taille-texte:     18px;
  --interligne-texte: 1.68;
  --taille-h1:        2.95rem;
  --taille-h2:        1.92rem;
  --taille-h3:        1.2rem;
  --taille-chapo:     1.24rem;
  --taille-repere:    2.15rem;
  --largeur-conteneur: 1180px;

  /* Pas de lettrine dans cette direction : couleur héritée, sinon le
     ::first-letter du chapô hero reste teinté accent-action et devient
     quasi invisible sur le fond sombre du hero. */
  --lettrine-affichage:  inline;
  --lettrine-flottement: none;
  --lettrine-taille:     1em;
  --lettrine-couleur:    currentColor;

  /* Quatre niveaux d'affluence */
  --niveau-1:     #E7F2DD;
  --niveau-2:     #FFE5A3;
  --niveau-3:     #D8A83F;
  --niveau-4:     #EF6547;
  --niveau-ferme: #F0E8D9;

  /* Hero photo : overlay lisible sans masquer le décor. Fondu resserré sur
     la moitié gauche (où vit le texte) : au-delà de 65%, la photo doit se
     lire sans voile, sinon une image forte (foule, feu) devient un aplat. */
  --hero-voile: linear-gradient(90deg, rgba(5,63,54,.66) 0%, rgba(5,63,54,.36) 36%, rgba(5,63,54,.06) 62%, rgba(5,63,54,0) 82%),
                linear-gradient(0deg, rgba(5,63,54,.32) 0%, rgba(5,63,54,0) 44%);
  --surface-hero-reperes: rgba(255,255,255,.14);
  --surface-badge-sur-image: rgba(5,63,54,.84);
  --surface-prehero-badge: rgba(255,248,234,.92);
  --surface-prehero-macaron: #FFF8EA;
  --prehero-voile: linear-gradient(90deg, rgba(5,63,54,.78) 0%, rgba(5,63,54,.48) 46%, rgba(5,63,54,.08) 100%),
                   linear-gradient(0deg, rgba(5,63,54,.34) 0%, rgba(5,63,54,0) 58%);
  --filet-prehero-macaron: rgba(5,63,54,.18);
  --ombre-titre-sur-photo: 0 2px 18px rgba(0,0,0,.28);
  --ombre-prehero-macaron: 0 12px 30px rgba(5,63,54,.22);
  --bouton-secondaire-sur-photo-texte: #FFFFFF;
  --bouton-secondaire-sur-photo-bord: rgba(255,255,255,.68);
  --bouton-secondaire-sur-photo-hover: #FFD461;
}

/* Sans bordure, la carte a besoin d'un fond réellement distinct du sien :
   sur les sections blanches, elle prend le vert très clair. */
.section--accentuee .carte,
.section--accentuee .piste { background: #FFFDF7; }

/* Le liseré d'accent d'une piste : posé en ombre interne, jamais en bordure.
   Une bordure épaisse d'un seul côté sur un angle de 14px se biseaute aux
   coins, et le biseau n'apparaît qu'au rendu. La valeur du liseré reste le
   token, elle n'est recopiée d'aucune autre règle. */
.piste {
  border-top-color: transparent;
  box-shadow: inset 0 var(--piste-liseret-epaisseur) 0 var(--accent-action), var(--ombre-carte);
}