/* ============================================================
   Foyer Rural de Aumes — feuille de style principale
   Charte reprise de l'affiche de la 28e édition (2023) :
   jaune safran, sarcelle profond, blanc, ponctuations Téléthon.
   ============================================================ */

/* ---------- 1. Jetons ------------------------------------- */
:root{
  /* ---- Orange : la couleur de marque -------------------------
     Reprise des tee-shirts que l'association porte depuis des
     années. Comme l'ancien jaune, c'est une couleur claire : elle
     porte du texte sombre, jamais du blanc. */
  --orange:       #F08A1C;   /* aplats, boutons, accents */
  --orange-clair: #F9A03F;   /* survols */
  --orange-fonce: #B85403;   /* texte orange sur fond clair */
  --orange-pale:  #FFF6EA;   /* fond de page */

  /* ---- Bleu : la couleur qui structure ------------------------
     Assez profond pour tenir face à l'orange, assez chaud pour
     rester associatif. */
  --bleu:         #1D6396;   /* liens, accents secondaires */
  --bleu-fonce:   #12395C;   /* fonds sombres, pied de page */
  --encre:        #14263C;   /* texte courant */

  /* ---- Neutres ------------------------------------------------ */
  --papier:       #FFFFFF;
  --gris:         #5A6B80;
  --trait:        rgba(20,38,60,.16);

  /* ---- Couleur sémantique conservée ---------------------------
     Le rose appartient à l'AFM-Téléthon, pas à notre charte : il
     n'apparaît que là où il est question du Téléthon. */
  --telethon:     #E4007E;

  /* ---- Code couleur des parcours ------------------------------
     Les trois formats VTT suivent un dégradé d'orange qui monte
     avec la difficulté. Le parcours pédestre, discipline à part,
     passe en bleu. */
  --p-famille:    #FFC885;
  --p-sportif:    #F08A1C;
  --p-expert:     #A8480A;
  --p-marche:     #1D6396;

  /* Typographies */
  --display: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --texte:   "Source Sans 3", "Segoe UI", Arial, sans-serif;

  /* Rythme */
  --max:     1180px;
  --etroit:  760px;
  --r:       10px;
  --ombre:   0 1px 2px rgba(20,38,60,.06), 0 12px 32px -14px rgba(20,38,60,.3);
}

/* ---------- 2. Base --------------------------------------- */
*,*::before,*::after{ box-sizing:border-box; }

html{ scroll-behavior:smooth; scroll-padding-top:92px; }

body{
  margin:0;
  background:var(--orange-pale);
  color:var(--encre);
  font-family:var(--texte);
  font-size:1.0625rem;
  line-height:1.65;
  font-weight:400;
  -webkit-font-smoothing:antialiased;
}

img{ max-width:100%; height:auto; display:block; }

a{ color:var(--bleu); text-decoration-color:rgba(29,99,150,.45); text-underline-offset:3px; }
a:hover{ color:var(--bleu-fonce); }

h1,h2,h3,h4{
  font-family:var(--display);
  font-variation-settings:"wdth" 78,"wght" 800;
  line-height:1.02;
  letter-spacing:-.015em;
  color:var(--bleu-fonce);
  margin:0 0 .5em;
  text-wrap:balance;
  overflow-wrap:break-word;
}
h1{ font-size:clamp(1.95rem,7.4vw,4.6rem); text-transform:uppercase; }
h1 sup,h2 sup,.plaque-nom sup,.marque-nom sup{ text-transform:lowercase; font-size:.5em; top:-.62em; }
h2{ font-size:clamp(1.6rem,5.2vw,3rem); text-transform:uppercase; }
h3{ font-size:clamp(1.2rem,2vw,1.5rem); font-variation-settings:"wdth" 88,"wght" 750; text-transform:none; letter-spacing:-.005em; }
h4{ font-size:1.05rem; font-variation-settings:"wdth" 92,"wght" 700; text-transform:none; }

p{ margin:0 0 1.1em; }
p:last-child{ margin-bottom:0; }

:focus-visible{ outline:3px solid var(--bleu); outline-offset:3px; border-radius:3px; }

.saut-contenu{ position:absolute; left:-9999px; top:0; background:var(--bleu-fonce); color:#fff; padding:.8rem 1.2rem; z-index:200; }
.saut-contenu:focus{ left:.5rem; top:.5rem; }

/* ---------- 3. Utilitaires -------------------------------- */
.conteneur{ width:min(100% - 2.5rem, var(--max)); margin-inline:auto; }
.conteneur-etroit{ width:min(100% - 2.5rem, var(--etroit)); margin-inline:auto; }

.surligne{
  display:inline-flex; align-items:center; gap:.55rem;
  font-family:var(--display); font-variation-settings:"wdth" 92,"wght" 700;
  font-size:.74rem; text-transform:uppercase; letter-spacing:.16em;
  color:var(--bleu); margin:0 0 1rem;
}
.surligne::before{ content:""; width:26px; height:2px; background:currentColor; flex:none; }
.surligne-clair{ color:var(--orange); }

.chapo{ font-size:1.2rem; line-height:1.55; color:#2C4257; }
.mineur{ font-size:.92rem; color:var(--gris); }
.centre{ text-align:center; }
.centre .surligne{ justify-content:center; }
.marque-rose{ color:var(--telethon); }

/* ---------- 4. Boutons ------------------------------------ */
.bouton{
  display:inline-flex; align-items:center; justify-content:center; gap:.6rem;
  font-family:var(--display); font-variation-settings:"wdth" 92,"wght" 700;
  font-size:.9rem; letter-spacing:.06em; text-transform:uppercase;
  padding:.92rem 1.6rem; border-radius:999px; border:2px solid transparent;
  text-decoration:none; cursor:pointer;
  transition:transform .16s ease, background-color .16s ease, color .16s ease, border-color .16s ease;
}
.bouton:hover{ transform:translateY(-2px); }
.bouton-plein{ background:var(--orange); color:var(--encre); }
.bouton-plein:hover{ background:var(--orange-clair); color:var(--encre); }
.bouton-sombre{ background:var(--bleu-fonce); color:#fff; }
.bouton-sombre:hover{ background:var(--bleu); color:#fff; }
.bouton-contour{ border-color:var(--bleu-fonce); color:var(--bleu-fonce); background:transparent; }
.bouton-contour:hover{ background:var(--bleu-fonce); color:#fff; }
.bouton-clair{ border-color:rgba(255,255,255,.55); color:#fff; background:transparent; }
.bouton-clair:hover{ background:#fff; color:var(--bleu-fonce); border-color:#fff; }

.groupe-boutons{ display:flex; flex-wrap:wrap; gap:.7rem; }

/* ---------- 5. En-tête ------------------------------------ */
.entete{
  position:sticky; top:0; z-index:100;
  background:rgba(255,255,255,.95); backdrop-filter:blur(10px);
  border-bottom:3px solid var(--orange);
}
.entete-int{ display:flex; align-items:center; gap:1.1rem; min-height:76px; }
.marque{ display:flex; align-items:center; gap:.7rem; text-decoration:none; flex:none; }
.marque img{ width:48px; height:48px; }
.marque-txt{ display:flex; flex-direction:column; line-height:1.05; }
.marque-nom{
  font-family:var(--display); font-variation-settings:"wdth" 80,"wght" 800;
  font-size:1.02rem; text-transform:uppercase; color:var(--bleu-fonce); letter-spacing:-.01em;
}
.marque-lieu{
  font-family:var(--display); font-variation-settings:"wdth" 95,"wght" 600;
  font-size:.66rem; text-transform:uppercase; letter-spacing:.18em; color:var(--bleu);
}

.nav{ margin-left:auto; }
.nav ul{ list-style:none; display:flex; align-items:center; gap:.15rem; margin:0; padding:0; }
.nav a{
  display:block; padding:.55rem .7rem; text-decoration:none;
  font-family:var(--display); font-variation-settings:"wdth" 95,"wght" 650;
  font-size:.85rem; text-transform:uppercase; letter-spacing:.05em;
  color:var(--bleu-fonce); border-radius:6px;
}
.nav a:hover{ background:var(--orange-clair); color:var(--encre); }
.nav .actif{ color:var(--bleu); }
.nav .actif::after{ content:""; display:block; height:3px; background:var(--orange); margin-top:3px; border-radius:2px; }

.sous{ position:relative; }
.sous > button{
  font:inherit; background:none; border:0; cursor:pointer;
  display:flex; align-items:center; gap:.35rem; padding:.55rem .7rem; border-radius:6px;
  font-family:var(--display); font-variation-settings:"wdth" 95,"wght" 650;
  font-size:.85rem; text-transform:uppercase; letter-spacing:.05em; color:var(--bleu-fonce);
}
.sous > button:hover{ background:var(--orange-clair); }
.sous > button svg{ transition:transform .2s ease; }
.sous[data-ouvert="true"] > button svg{ transform:rotate(180deg); }
.sous-menu{
  position:absolute; top:calc(100% + .4rem); left:0; min-width:250px;
  background:var(--papier); border:1px solid var(--trait); border-radius:var(--r);
  box-shadow:var(--ombre); padding:.4rem; display:none; flex-direction:column; gap:.1rem;
}
.sous[data-ouvert="true"] .sous-menu{ display:flex; }

/* Pont invisible entre le bouton et la liste.
   Le sous-menu est décalé de .4rem sous le bouton : sans ce pont,
   le pointeur traverse un vide où plus rien n'est survolé, et le
   menu se referme avant d'être atteint. */
.sous-menu::before{
  content:""; position:absolute; top:-.6rem; left:0; right:0; height:.6rem;
}
.sous-menu a{ text-transform:none; letter-spacing:0; font-size:.92rem; padding:.6rem .7rem; }

.burger{
  display:none; margin-left:auto; background:none;
  border:2px solid var(--bleu-fonce); border-radius:8px;
  width:44px; height:44px; cursor:pointer; padding:0; align-items:center; justify-content:center;
}
.burger span{ display:block; width:20px; height:2px; background:var(--bleu-fonce); position:relative; }
.burger span::before,.burger span::after{ content:""; position:absolute; left:0; width:20px; height:2px; background:var(--bleu-fonce); }
.burger span::before{ top:-6px; }
.burger span::after{ top:6px; }

.entete .bouton{ padding:.7rem 1.1rem; font-size:.78rem; flex:none; }

/* ---------- 6. Sections ----------------------------------- */
.section{ padding:clamp(3.5rem,7vw,6rem) 0; }
.section-serree{ padding:clamp(2.5rem,4vw,3.5rem) 0; }
.section-blanche{ background:var(--papier); }

/* Crème : la respiration tiède entre deux sections blanches.
   C'est aussi le fond par défaut du site. */
.section-creme{ background:var(--orange-pale); }
/* Aplat orange plein — réservé aux bandeaux courts et frappants
   (le « 13 € » de la page événement). Sur une grande section, il
   écrase les photos et fatigue l'œil : préférer .section-creme. */
.section-orange{ background:var(--orange); color:var(--encre); }
.section-orange .surligne{ color:var(--bleu-fonce); }
.section-orange .chapo{ color:#4A2A05; }
.section-orange .mineur{ color:#6B3D08; }
.section-sombre{ background:var(--bleu-fonce); color:#C7D8E8; }
.section-sombre h1,.section-sombre h2,.section-sombre h3,.section-sombre h4{ color:#fff; }
.section-sombre a{ color:var(--orange); }
.section-sombre .chapo{ color:#AFC6DA; }
.section-sombre .mineur{ color:#8FA6BF; }
.section-sombre .marque-rose{ color:#FF7DBE; }
.a-confirmer{ font-style:normal; color:var(--orange-fonce); }
.section-sombre .a-confirmer{ color:var(--orange); }

.tete-section{ margin-bottom:2.6rem; max-width:62ch; }
.tete-section-ligne{ display:flex; align-items:flex-end; justify-content:space-between; gap:1.5rem; flex-wrap:wrap; margin-bottom:2.6rem; }
.tete-section-ligne h2{ margin-bottom:0; }

/* Bande de courbes de niveau : signature graphique reprise de l'affiche */
.topo{
  background-image:url("../img/motif-courbes-niveau-bleu.svg");
  background-size:1400px auto; background-repeat:repeat-x; background-position:center top;
  opacity:.20; height:120px; width:100%; pointer-events:none;
}
.topo-inverse{ transform:scaleY(-1); }

/* ---------- 7. Hero accueil ------------------------------- */
.hero{
  position:relative; overflow:hidden;
  background:linear-gradient(178deg, #FFFFFF 0%, var(--orange-pale) 62%, #FFF1DC 100%);
  border-bottom:1px solid rgba(240,138,28,.28);
}
.hero::after{
  content:""; position:absolute; inset:auto 0 -30px 0; height:300px;
  background-image:url("../img/motif-courbes-niveau-orange.svg");
  background-size:1500px auto; background-repeat:repeat-x; background-position:center bottom;
  opacity:.22; pointer-events:none;
}
.hero-int{
  position:relative; z-index:1;
  display:grid; grid-template-columns:1.15fr .85fr; gap:clamp(2rem,5vw,4rem);
  align-items:center; padding:clamp(3rem,7vw,5.5rem) 0 clamp(3.5rem,7vw,6rem);
}
.hero h1{ margin-bottom:1.1rem; color:var(--bleu-fonce); }
.hero h1 em{ font-style:normal; color:var(--orange-fonce); display:block; }
.hero .chapo{ color:#2C4257; }
.hero-meta{ display:flex; gap:1.6rem; flex-wrap:wrap; margin-top:2rem; padding-top:1.4rem; border-top:3px solid var(--orange); }
.hero-meta div{ display:flex; flex-direction:column; }
.hero-meta dt{
  font-family:var(--display); font-variation-settings:"wdth" 95,"wght" 700;
  font-size:.68rem; text-transform:uppercase; letter-spacing:.15em; color:var(--orange-fonce);
}
.hero-meta dd{
  margin:.15rem 0 0; font-family:var(--display); font-variation-settings:"wdth" 80,"wght" 800;
  font-size:1.5rem; color:var(--bleu-fonce);
}

/* Affiche punaisée */
.affiche{
  position:relative; max-width:400px; margin-left:auto;
  background:var(--papier); padding:14px; border-radius:4px;
  box-shadow:var(--ombre); transform:rotate(-1.4deg); transition:transform .3s ease;
}
.affiche:hover{ transform:rotate(0deg) scale(1.012); }
.affiche img{ border-radius:2px; }
.affiche::before{
  content:""; position:absolute; top:-9px; left:50%; transform:translateX(-50%);
  width:18px; height:18px; border-radius:50%;
  background:var(--telethon); box-shadow:0 2px 5px rgba(0,0,0,.28);
}

/* Bande photo pleine largeur */
.bande-photo{ position:relative; overflow:hidden; background:var(--bleu-fonce); }
.bande-photo img{ width:100%; height:clamp(240px,32vw,420px); object-fit:cover; }
.bande-photo-legende{
  position:absolute; left:0; right:0; bottom:0; padding:3rem 0 1.1rem;
  background:linear-gradient(to top, rgba(20,38,60,.85), transparent);
  color:#fff; font-size:.9rem;
}

/* ---------- 8. Bandeau « à la une » ----------------------- */
.une{ position:relative; overflow:hidden; }
.une::before{
  content:""; position:absolute; inset:0;
  background-image:url("../img/motif-courbes-niveau-blanc.svg");
  background-size:1500px auto; background-repeat:repeat; opacity:.08;
}
.section-orange.une::before{ background-image:url("../img/motif-courbes-niveau-bleu.svg"); opacity:.12; }
.une-int{ position:relative; display:grid; grid-template-columns:auto 1fr auto; gap:clamp(1.5rem,4vw,3rem); align-items:center; }

.date-bloc{
  flex:none; text-align:center; color:#fff;
  border:3px solid var(--orange); border-radius:var(--r);
  padding:.9rem 1.2rem; min-width:118px; background:rgba(255,255,255,.06);
}
.date-bloc .jour{ display:block; font-family:var(--display); font-variation-settings:"wdth" 72,"wght" 850; font-size:3.4rem; line-height:.9; color:var(--orange); }
.date-bloc .mois{ display:block; font-family:var(--display); font-variation-settings:"wdth" 95,"wght" 700; font-size:.76rem; text-transform:uppercase; letter-spacing:.16em; margin-top:.35rem; color:#fff; }
.date-bloc .annee{ display:block; font-size:.72rem; letter-spacing:.16em; color:rgba(255,255,255,.65); margin-top:.1rem; font-family:var(--display); font-variation-settings:"wdth" 95,"wght" 600; }
.date-bloc-sombre{ border-color:var(--bleu-fonce); background:var(--orange); }
.date-bloc-sombre .jour{ color:var(--bleu-fonce); }
.date-bloc-sombre .mois{ color:var(--bleu-fonce); }
.date-bloc-sombre .annee{ color:rgba(20,38,60,.7); }

/* ---------- 9. Plaques de parcours (signature) ------------ */
.plaques{ display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:1.25rem; }
.plaque{
  position:relative; background:var(--papier); border-radius:8px;
  border:1px solid var(--trait); padding:2.2rem 1.4rem 1.5rem;
  box-shadow:var(--ombre); transition:transform .22s ease;
}
.plaque:hover{ transform:translateY(-5px) rotate(-.7deg); }
/* les deux œillets de fixation d'une vraie plaque de guidon */
.plaque::before,.plaque::after{
  content:""; position:absolute; top:12px; width:9px; height:9px; border-radius:50%;
  background:var(--orange-pale); box-shadow:inset 0 1px 2px rgba(20,38,60,.4);
}
.plaque::before{ left:16px; }
.plaque::after{ right:16px; }
.plaque-bande{ position:absolute; top:0; left:0; right:0; height:7px; border-radius:8px 8px 0 0; background:var(--bleu); }
.plaque-type{ font-family:var(--display); font-variation-settings:"wdth" 95,"wght" 700; font-size:.68rem; text-transform:uppercase; letter-spacing:.16em; color:var(--gris); display:block; margin-bottom:.15rem; }
.plaque-nom{ font-family:var(--display); font-variation-settings:"wdth" 82,"wght" 800; font-size:1.35rem; text-transform:uppercase; color:var(--bleu-fonce); display:block; margin-bottom:.7rem; line-height:1.05; }
.plaque-km{ font-family:var(--display); font-variation-settings:"wdth" 68,"wght" 850; font-size:4rem; line-height:.82; color:var(--bleu-fonce); display:flex; align-items:baseline; gap:.2rem; }
.plaque-km span{ font-size:1.05rem; font-variation-settings:"wdth" 95,"wght" 700; text-transform:uppercase; letter-spacing:.06em; color:var(--gris); }
.plaque-deniv{ font-family:var(--display); font-variation-settings:"wdth" 92,"wght" 700; font-size:.85rem; letter-spacing:.05em; color:var(--orange-fonce); margin:.5rem 0 .9rem; text-transform:uppercase; }
.plaque p{ font-size:.95rem; line-height:1.55; color:#46586E; margin:0; }

.p-famille .plaque-bande{ background:var(--p-famille); }
.p-sportif .plaque-bande{ background:var(--p-sportif); }
.p-sportif .plaque-deniv{ color:var(--bleu); }
.p-expert .plaque-bande{ background:var(--p-expert); }
.p-expert .plaque-deniv{ color:var(--bleu-fonce); }
.p-marche .plaque-bande{ background:var(--p-marche); }
.p-marche .plaque-deniv{ color:#1A5A8C; }

/* ---------- 10. Cartes génériques ------------------------- */
.grille{ display:grid; gap:1.5rem; }
.grille-2{ grid-template-columns:repeat(auto-fit,minmax(290px,1fr)); }
.grille-3{ grid-template-columns:repeat(auto-fit,minmax(270px,1fr)); }
.grille-4{ grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); }

.carte{
  background:var(--papier); border:1px solid var(--trait); border-radius:var(--r);
  overflow:hidden; display:flex; flex-direction:column;
  transition:transform .2s ease, box-shadow .2s ease;
}
.carte:hover{ transform:translateY(-4px); box-shadow:var(--ombre); }
.carte-visuel{ aspect-ratio:16/10; overflow:hidden; background:var(--bleu-fonce); }
.carte-visuel img{ width:100%; height:100%; object-fit:cover; transition:transform .5s ease; }
.carte:hover .carte-visuel img{ transform:scale(1.04); }
.carte-corps{ padding:1.4rem; display:flex; flex-direction:column; gap:.55rem; flex:1; }
.carte-corps h3{ margin:0; }
.carte-corps p{ font-size:.96rem; color:#46586E; }
.carte-lien{
  margin-top:auto; padding-top:.4rem;
  font-family:var(--display); font-variation-settings:"wdth" 92,"wght" 700;
  font-size:.82rem; text-transform:uppercase; letter-spacing:.08em;
  color:var(--bleu); text-decoration:none;
}
.carte-lien:hover{ color:var(--bleu-fonce); }

.etiquette{
  display:inline-block; align-self:flex-start;
  font-family:var(--display); font-variation-settings:"wdth" 95,"wght" 700;
  font-size:.66rem; text-transform:uppercase; letter-spacing:.14em;
  padding:.32rem .65rem; border-radius:999px;
  background:var(--orange); color:var(--encre);
}
.etiquette-rose{ background:rgba(228,0,126,.13); color:#A8005C; }

/* Sur fond sombre, une étiquette teintée devient illisible : le
   fond passe en blanc translucide et le texte s'éclaircit. */
.section-sombre .etiquette-rose,
.banniere-page .etiquette-rose{ background:rgba(255,255,255,.15); color:#FFC2DE; }
.section-sombre .etiquette-bleu,
.banniere-page .etiquette-bleu{ background:rgba(255,255,255,.15); color:#C7D8E8; }
.etiquette-bleu{ background:rgba(29,99,150,.14); color:var(--bleu-fonce); }

/* ---------- 11. Agenda ------------------------------------ */
.agenda{ display:flex; flex-direction:column; gap:1rem; }
.agenda-item{
  display:grid; grid-template-columns:auto 1fr auto; gap:1.6rem; align-items:center;
  background:var(--papier); border:1px solid var(--trait); border-radius:var(--r);
  padding:1.3rem 1.5rem; text-decoration:none;
  transition:border-color .2s ease, transform .2s ease;
}
.agenda-item:hover{ border-color:var(--orange-fonce); transform:translateX(4px); }
.agenda-corps h3{ margin:0 0 .2rem; }
.agenda-corps p{ margin:0; font-size:.95rem; color:#46586E; }
.agenda-lieu{
  display:inline-flex; align-items:center; gap:.4rem; margin-top:.5rem;
  font-family:var(--display); font-variation-settings:"wdth" 95,"wght" 650;
  font-size:.74rem; text-transform:uppercase; letter-spacing:.1em; color:var(--gris);
}
.agenda-fleche{ color:var(--bleu); flex:none; }
.agenda-passe{ opacity:.75; }
.agenda-vignette{ width:104px; flex:none; border-radius:8px; overflow:hidden; border:1px solid var(--trait); }
.agenda-vignette img{ width:100%; aspect-ratio:1/1; object-fit:cover; }

/* ---------- 12. Programme de la journée ------------------- */
.programme{ list-style:none; margin:0; padding:0; }
.programme li{ display:grid; grid-template-columns:134px 1fr; gap:1.4rem; padding:1.15rem 0; border-top:1px solid var(--trait); align-items:baseline; }
.programme li:last-child{ border-bottom:1px solid var(--trait); }
.programme .heure{ font-family:var(--display); font-variation-settings:"wdth" 80,"wght" 800; font-size:1.12rem; color:var(--orange-fonce); white-space:nowrap; }
.programme strong{ display:block; font-family:var(--display); font-variation-settings:"wdth" 90,"wght" 700; font-size:1.05rem; color:var(--bleu-fonce); }
.programme p{ margin:.15rem 0 0; font-size:.96rem; color:#46586E; }
.section-sombre .programme li{ border-color:rgba(255,255,255,.16); }
.section-sombre .programme strong{ color:#fff; }
.section-sombre .programme p{ color:#AFC6DA; }
.section-sombre .programme .heure{ color:var(--orange); }

/* ---------- 13. Encadrés & infos pratiques ---------------- */
.encadre{
  background:var(--papier); border:1px solid var(--trait);
  border-left:6px solid var(--orange); border-radius:var(--r); padding:1.5rem 1.7rem;
}
.encadre-rose{ border-left-color:var(--telethon); }
.encadre-petrole{ border-left-color:var(--bleu); }
.encadre h3{ margin-top:0; }

.infos-cles{ display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:1px; background:var(--trait); border:1px solid var(--trait); border-radius:var(--r); overflow:hidden; }
.infos-cles div{ background:var(--papier); padding:1.3rem 1.4rem; }
.infos-cles dt{ font-family:var(--display); font-variation-settings:"wdth" 95,"wght" 700; font-size:.68rem; text-transform:uppercase; letter-spacing:.15em; color:var(--gris); margin-bottom:.3rem; }
.infos-cles dd{ margin:0; font-family:var(--display); font-variation-settings:"wdth" 82,"wght" 800; font-size:1.35rem; color:var(--bleu-fonce); line-height:1.15; }
.infos-cles dd small{ display:block; font-family:var(--texte); font-size:.85rem; font-weight:400; color:var(--gris); margin-top:.2rem; letter-spacing:0; }

.liste-check{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:.7rem; }
.liste-check li{ position:relative; padding-left:1.9rem; }
.liste-check li::before{ content:""; position:absolute; left:0; top:.5em; width:12px; height:12px; border-radius:3px; background:var(--orange); }

/* ---------- 14. Widget HelloAsso -------------------------- */
.billetterie{ background:var(--papier); border:1px solid var(--trait); border-radius:var(--r); padding:.75rem; box-shadow:var(--ombre); }
.billetterie iframe{ width:100%; min-height:760px; border:0; border-radius:6px; display:block; }

/* ---------- 15. FAQ --------------------------------------- */
.faq{ display:flex; flex-direction:column; }
.faq details{ border-bottom:1px solid var(--trait); }
.faq summary{
  cursor:pointer; list-style:none; padding:1.15rem 2.5rem 1.15rem 0; position:relative;
  font-family:var(--display); font-variation-settings:"wdth" 88,"wght" 700;
  font-size:1.06rem; color:var(--bleu-fonce);
}
.faq summary::-webkit-details-marker{ display:none; }
.faq summary::after{ content:"+"; position:absolute; right:.4rem; top:50%; transform:translateY(-50%); font-size:1.5rem; color:var(--orange-fonce); line-height:1; }
.faq details[open] summary::after{ content:"–"; }
.faq summary:hover{ color:var(--bleu); }
.faq-reponse{ padding:0 2.5rem 1.4rem 0; color:#46586E; }

/* ---------- 16. Galerie photo ----------------------------- */
.galerie{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:.9rem; }
.galerie-quatre{ grid-template-columns:repeat(4,minmax(0,1fr)); }
.galerie-item{
  position:relative; margin:0; padding:0; border:0; cursor:zoom-in; overflow:hidden;
  border-radius:var(--r); background:var(--bleu-fonce); display:block; width:100%;
}
.galerie-item img{ width:100%; aspect-ratio:1/1; object-fit:cover; transition:transform .45s ease, opacity .3s ease; }
.galerie-item:hover img{ transform:scale(1.05); opacity:.9; }
.galerie-item .legende{
  position:absolute; left:0; right:0; bottom:0; padding:2rem .9rem .8rem;
  background:linear-gradient(to top, rgba(20,38,60,.88), transparent);
  color:#fff; font-family:var(--display); font-variation-settings:"wdth" 92,"wght" 650;
  font-size:.8rem; text-align:left; letter-spacing:.02em;
}
.galerie-large{ grid-column:span 2; }
.galerie-large img{ aspect-ratio:16/9; }

/* Les affiches s'affichent en entier, sur fond blanc, légende sous l'image */
.galerie-affiche{ background:var(--papier); border:1px solid var(--trait); display:flex; flex-direction:column; }
.galerie-affiche img{ aspect-ratio:4/5; object-fit:contain; padding:10px 10px 0; }
.galerie-affiche .legende{ position:static; background:none; color:var(--bleu-fonce); padding:.7rem .9rem 1rem; }

/* Visionneuse */
.visionneuse{
  position:fixed; inset:0; z-index:1000; display:none;
  background:rgba(20,38,60,.95); padding:2rem 1rem;
  align-items:center; justify-content:center;
}
.visionneuse[data-ouvert="true"]{ display:flex; }
.visionneuse img{ max-width:min(1100px,92vw); max-height:80vh; border-radius:6px; object-fit:contain; }
.visionneuse-legende{ position:absolute; bottom:1.6rem; left:0; right:0; text-align:center; color:#C7D8E8; font-size:.92rem; padding:0 1rem; }
.visionneuse button{
  position:absolute; background:rgba(255,255,255,.12); border:2px solid rgba(255,255,255,.4);
  color:#fff; width:48px; height:48px; border-radius:50%; cursor:pointer;
  font-size:1.4rem; line-height:1; display:flex; align-items:center; justify-content:center;
}
.visionneuse button:hover{ background:var(--orange); color:var(--encre); border-color:var(--orange); }
.visionneuse .v-fermer{ top:1.2rem; right:1.2rem; }
.visionneuse .v-prec{ left:1.2rem; top:50%; transform:translateY(-50%); }
.visionneuse .v-suiv{ right:1.2rem; top:50%; transform:translateY(-50%); }

/* ---------- 17. Partenaires ------------------------------- */
.partenaires{ display:flex; flex-wrap:wrap; gap:.6rem 2rem; align-items:center; justify-content:center; }
.partenaires span{ font-family:var(--display); font-variation-settings:"wdth" 92,"wght" 650; font-size:.86rem; color:var(--gris); letter-spacing:.02em; }

/* ---------- 18. Formulaire -------------------------------- */
.formulaire{ display:grid; gap:1.15rem; }
.champ{ display:flex; flex-direction:column; gap:.4rem; }
.champ label{ font-family:var(--display); font-variation-settings:"wdth" 95,"wght" 700; font-size:.74rem; text-transform:uppercase; letter-spacing:.12em; color:var(--bleu-fonce); }
.champ input,.champ select,.champ textarea{
  font-family:var(--texte); font-size:1rem; color:var(--encre);
  padding:.85rem 1rem; border:1.5px solid rgba(20,38,60,.22); border-radius:8px;
  background:var(--papier); width:100%;
}
.champ input:focus,.champ select:focus,.champ textarea:focus{ border-color:var(--bleu); outline:none; box-shadow:0 0 0 3px rgba(240,138,28,.45); }
.champ textarea{ min-height:170px; resize:vertical; }
.champ-duo{ display:grid; grid-template-columns:1fr 1fr; gap:1.15rem; }
.champ-case{ display:flex; gap:.7rem; align-items:flex-start; }
.champ-case input{ width:auto; margin-top:.3rem; flex:none; }
.champ-case label{ text-transform:none; letter-spacing:0; font-family:var(--texte); font-size:.92rem; font-weight:400; color:#46586E; }
.pot-de-miel{ position:absolute; left:-9999px; }
.message-formulaire{ display:none; padding:1rem 1.2rem; border-radius:8px; background:var(--orange); color:var(--encre); }
.message-formulaire[data-visible="true"]{ display:block; }

/* ---------- 19. Article ----------------------------------- */
.article-corps{ font-size:1.09rem; line-height:1.75; }
.article-corps h2{ font-size:clamp(1.5rem,2.6vw,2rem); margin-top:2.4rem; text-transform:none; font-variation-settings:"wdth" 84,"wght" 780; }
.article-corps h3{ margin-top:1.8rem; }
.article-corps ul,.article-corps ol{ padding-left:1.3rem; margin:0 0 1.2rem; }
.article-corps li{ margin-bottom:.5rem; }
.article-corps blockquote{
  margin:2rem 0; padding:.4rem 0 .4rem 1.6rem; border-left:5px solid var(--orange);
  font-family:var(--display); font-variation-settings:"wdth" 88,"wght" 600;
  font-size:1.25rem; line-height:1.4; color:var(--bleu-fonce);
}
.article-corps figure{ margin:2rem 0; }
.article-corps figure img{ border-radius:var(--r); }
.article-corps figcaption{ font-size:.88rem; color:var(--gris); margin-top:.5rem; }
.meta-article{ display:flex; flex-wrap:wrap; gap:.5rem 1.2rem; align-items:center; font-family:var(--display); font-variation-settings:"wdth" 95,"wght" 650; font-size:.76rem; text-transform:uppercase; letter-spacing:.11em; color:var(--gris); }

/* ---------- 20. Bannière de page -------------------------- */
.banniere-page{ position:relative; overflow:hidden; padding:clamp(3rem,6vw,5rem) 0 clamp(2.5rem,5vw,3.5rem); }
.banniere-page::after{
  content:""; position:absolute; inset:auto 0 -60px 0; height:280px;
  background-image:url("../img/motif-courbes-niveau-blanc.svg");
  background-size:1500px auto; background-repeat:repeat-x; background-position:center bottom;
  opacity:.08; pointer-events:none;
}
.banniere-page > *{ position:relative; z-index:1; }
.ariane{ font-size:.82rem; color:rgba(199,216,232,.85); margin-bottom:1.4rem; }
.ariane a{ color:rgba(199,216,232,.85); text-decoration:none; }
.ariane a:hover{ color:var(--orange); }

/* Bannière avec photo en fond */
.banniere-photo{ background:var(--bleu-fonce); }
.banniere-photo .fond{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:.42; z-index:0; }
.banniere-photo::before{
  content:""; position:absolute; inset:0; z-index:0;
  background:linear-gradient(105deg, rgba(18,57,92,.93) 0%, rgba(18,57,92,.74) 45%, rgba(18,57,92,.34) 100%);
}

/* ---------- 21. Pied de page ------------------------------ */
.pied{ background:var(--bleu-fonce); color:#AFC6DA; padding:clamp(3rem,5vw,4.5rem) 0 2rem; border-top:6px solid var(--orange); }
.pied-grille{ display:grid; grid-template-columns:1.4fr 1fr 1fr 1.2fr; gap:2.5rem; }
.pied h4{ color:var(--orange); font-variation-settings:"wdth" 95,"wght" 700; font-size:.76rem; text-transform:uppercase; letter-spacing:.15em; margin-bottom:1rem; }
.pied ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:.55rem; }
.pied a{ color:#AFC6DA; text-decoration:none; font-size:.96rem; }
.pied a:hover{ color:var(--orange); }
.pied-marque{ display:flex; align-items:center; gap:.8rem; margin-bottom:1rem; }
.pied-marque img{ width:56px; height:56px; }
.pied-marque strong{ font-family:var(--display); font-variation-settings:"wdth" 80,"wght" 800; font-size:1.1rem; text-transform:uppercase; color:#fff; line-height:1.1; }
.pied-bas{ margin-top:3rem; padding-top:1.5rem; border-top:1px solid rgba(255,255,255,.16); display:flex; flex-wrap:wrap; gap:1rem; justify-content:space-between; font-size:.85rem; color:#9DB0C6; }
.pied-bas a{ font-size:.85rem; }

/* ---------- 22. Responsive -------------------------------- */
@media (max-width:1040px){ .pied-grille{ grid-template-columns:1fr 1fr; gap:2rem; } }

@media (max-width:980px){
  .galerie-quatre{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .burger{ display:flex; }
  .nav{
    display:none; position:absolute; top:100%; left:0; right:0;
    background:var(--papier); border-bottom:3px solid var(--orange);
    box-shadow:var(--ombre); padding:1rem 1.25rem 1.5rem;
  }
  .nav[data-ouvert="true"]{ display:block; }
  .nav ul{ flex-direction:column; align-items:stretch; gap:.15rem; }
  .nav a,.sous > button{ padding:.8rem .5rem; font-size:.95rem; width:100%; }
  .nav .actif::after{ display:none; }
  .sous-menu{ position:static; box-shadow:none; border:0; padding:0 0 .4rem 1rem; min-width:0; }
  /* en-tête sur une seule ligne : la marque cède la place,
     l'appel à l'action et le burger ne sont jamais rognés */
  .entete-int{ position:relative; flex-wrap:nowrap; gap:.55rem; }
  .marque{ flex:0 1 auto; min-width:0; overflow:hidden; }
  .marque img{ width:40px; height:40px; flex:none; }
  .marque-txt{ min-width:0; }
  .marque-nom{ font-size:.86rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .marque-lieu{ font-size:.6rem; }
  .entete .bouton,.burger{ flex:none; }

  /* L'inscription reste atteignable en permanence sur mobile */
  .barre-action{
    display:block; position:fixed; left:0; right:0; bottom:0; z-index:90;
    background:rgba(255,255,255,.97);
    -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
    border-top:3px solid var(--orange);
    padding:.7rem 1rem calc(.7rem + env(safe-area-inset-bottom, 0px));
    box-shadow:0 -6px 24px -12px rgba(20,38,60,.4);
  }
  .barre-action .bouton{ width:100%; font-size:.92rem; padding:1rem 1rem; }
  body{ padding-bottom:88px; }

  /* Le bouton d'en-tête reste visible : il disparaissait auparavant */
  .entete .bouton{ display:inline-flex; order:2; }
  .burger{ order:3; margin-left:.5rem; }
  .marque{ order:1; }
  .nav{ order:4; }

  .hero-int{ grid-template-columns:1fr; }
  .affiche{ max-width:400px; margin-inline:auto; transform:rotate(-1deg); }

  .une-int{ grid-template-columns:auto 1fr; }
  .une-int .groupe-boutons{ grid-column:1 / -1; }
}

@media (max-width:640px){
  body{ font-size:1rem; padding-bottom:88px; }
  .entete .bouton{ padding:.6rem .75rem; font-size:.68rem; }
  .marque-txt{ display:none; }
  .bouton-grand{ font-size:.84rem; padding:.95rem 1.1rem; }
  .barre-action .bouton{ font-size:.82rem; padding:.9rem .8rem; }
  .entete .bouton-prix{ display:none; }
  .programme .heure{ white-space:normal; }
  .une-int{ grid-template-columns:1fr; }
  .agenda-item{ grid-template-columns:auto 1fr; gap:1rem; }
  .agenda-fleche{ display:none; }
  .agenda-vignette{ display:none; }
  .champ-duo{ grid-template-columns:1fr; }
  .programme li{ grid-template-columns:1fr; gap:.2rem; }
  .pied-grille{ grid-template-columns:1fr; }
  .date-bloc{ min-width:96px; padding:.7rem 1rem; }
  .date-bloc .jour{ font-size:2.6rem; }
  .plaque-km{ font-size:3.2rem; }
  .galerie,.galerie-quatre{ grid-template-columns:1fr 1fr; gap:.5rem; }
  .galerie-large{ grid-column:span 2; }
  .galerie-item .legende{ font-size:.68rem; padding:1.4rem .6rem .5rem; }
  .visionneuse .v-prec{ left:.4rem; }
  .visionneuse .v-suiv{ right:.4rem; }
}


/* ---------- 25. Lisibilité des boutons ---------------------
   Placé en fin de feuille : les règles de couleur des sections
   (.section-sombre a, .section-orange …) ont la même spécificité que
   celles des boutons, c'est donc l'ordre qui tranche. Chaque état
   fixe ici fond ET texte, pour qu'aucun survol ne rende un libellé
   illisible.
   ---------------------------------------------------------- */

/* Bouton principal — orange de marque, survol plus clair */
.bouton-plein,
.section-sombre .bouton-plein,
.banniere-page .bouton-plein,
.pied .bouton-plein{ background:var(--orange); color:var(--encre); }
.bouton-plein:hover,
.section-sombre .bouton-plein:hover,
.banniere-page .bouton-plein:hover,
.pied .bouton-plein:hover{ background:var(--orange-clair); color:var(--encre); }

/* Sur l'aplat orange plein, le bouton principal s'inverse en bleu :
   un bouton orange sur fond orange n'existerait pas. Le héros, lui,
   est passé sur fond clair : son bouton reste orange. */
.section-orange .bouton-plein{ background:var(--bleu-fonce); color:#fff; }
.section-orange .bouton-plein:hover{ background:var(--bleu); color:#fff; }

/* Bouton sarcelle — survol en sarcelle plus clair */
.bouton-sombre,
.section-orange .bouton-sombre,
.section-sombre .bouton-sombre{ background:var(--bleu-fonce); color:#fff; }
.bouton-sombre:hover,
.section-orange .bouton-sombre:hover,
.section-sombre .bouton-sombre:hover{ background:var(--bleu); color:#fff; }

/* Bouton contour */
.bouton-contour,
.section-orange .bouton-contour{ background:transparent; border-color:var(--bleu-fonce); color:var(--bleu-fonce); }
.bouton-contour:hover,
.section-orange .bouton-contour:hover{ background:var(--bleu-fonce); color:#fff; }

/* Bouton clair, réservé aux fonds sombres */
.bouton-clair,
.section-sombre .bouton-clair,
.banniere-page .bouton-clair{ background:transparent; border-color:rgba(255,255,255,.55); color:#fff; }
.bouton-clair:hover,
.section-sombre .bouton-clair:hover,
.banniere-page .bouton-clair:hover{ background:#fff; border-color:#fff; color:var(--bleu-fonce); }


/* ---------- 26. Volet solidarité (AFM-Téléthon) ------------ */
.panneau-afm{
  background:var(--orange-pale); border:1px solid var(--trait);
  border-top:6px solid var(--telethon); border-radius:var(--r);
  padding:1.8rem;
}
.panneau-afm-logo{
  background:var(--papier); border-radius:8px; padding:1.1rem;
  display:flex; justify-content:center; margin-bottom:1.4rem;
}
.panneau-afm-logo img{ width:auto; height:96px; image-rendering:auto; }
.panneau-afm h3{ margin-bottom:1rem; }

.missions{ margin:0; display:flex; flex-direction:column; gap:.9rem; }
.missions dt{
  font-family:var(--display); font-variation-settings:"wdth" 88,"wght" 780;
  font-size:1.02rem; text-transform:uppercase; letter-spacing:.04em;
  color:var(--telethon);
}
.missions dd{ margin:.15rem 0 0; font-size:.96rem; color:#46586E; }

.partenaire-afm{ display:inline-flex; }
.partenaire-afm img{ width:auto; height:44px; }

@media (max-width:640px){
  .panneau-afm{ padding:1.4rem; }
  .panneau-afm-logo img{ height:78px; }
}


/* ---------- 27. Appel à l'action « inscription » ----------- */

/* Bouton d'en-tête : le prix est collé au libellé, dans une pastille */
.bouton-inscription{ gap:.5rem; }
.bouton-prix{
  display:inline-block; padding:.12rem .45rem; border-radius:999px;
  background:var(--bleu-fonce); color:#fff;
  font-size:.78em; letter-spacing:.03em;
}
.bouton-inscription:hover .bouton-prix{ background:var(--encre); }
.section-orange .bouton-inscription .bouton-prix,


.bouton-grand{ font-size:1rem; padding:1.1rem 2rem; }

/* Barre d'action fixe, mobile uniquement.
   Déclarée en min-width : ce bloc est plus bas dans la feuille que
   la media query mobile, une règle display:none l'aurait écrasée. */
@media (min-width:981px){
  .barre-action{ display:none; }
}


/* ---------- 28. Accueil : bandeau du prochain rendez-vous -- */
.bloc-une{
  position:relative;
  display:grid; grid-template-columns:280px 1fr; gap:clamp(2rem,5vw,3.5rem);
  align-items:center;
}
.bloc-une .affiche{ max-width:none; margin:0; display:block; }
.une-date{ display:flex; gap:1.4rem; align-items:center; margin-top:1.4rem; }

/* Photo encadrée, à la façon d'un tirage posé sur la page */
.cadre-photo{
  margin:0; background:var(--papier); padding:14px; border-radius:4px;
  box-shadow:var(--ombre); transform:rotate(1.1deg); transition:transform .3s ease;
  max-width:440px; margin-left:auto;
}
.cadre-photo:hover{ transform:rotate(0deg); }
.cadre-photo img{ border-radius:2px; }

/* Encart de la lettre d'information */
.encart-newsletter{
  background:var(--papier); border:1px solid var(--trait); border-radius:var(--r);
  padding:1.7rem; box-shadow:var(--ombre);
}
.encart-newsletter .bouton{ width:100%; }

@media (max-width:900px){
  .bloc-une{ grid-template-columns:1fr; }
  .bloc-une .affiche{ max-width:300px; margin-inline:auto; }
  .cadre-photo{ margin-inline:auto; transform:rotate(1deg); }
}
@media (max-width:520px){
  .une-date{ flex-direction:column; align-items:flex-start; gap:.9rem; }
}


/* ---------- 29. Date exprimée en période ------------------- */
/* Utilisé quand la date exacte n'est pas encore arrêtée :
   mieux vaut annoncer « premier week-end d'août » qu'une case vide. */
.date-bloc-periode{ padding:.85rem 1rem; }
.date-bloc-periode .mois{ margin:0 0 .25rem; font-size:.6rem; letter-spacing:.13em; line-height:1.3; }
.date-bloc-periode .jour{ font-size:1.85rem; letter-spacing:-.01em; text-transform:uppercase; font-variation-settings:"wdth" 82,"wght" 850; }


/* ---------- 30. Encadré du cumul des boucles --------------- */
/* Le point le plus mal compris de la randonnée : on le chiffre. */
.cumul{
  display:grid; grid-template-columns:1fr auto; gap:2rem; align-items:center;
}
.cumul-total{
  flex:none; text-align:center; padding:1.1rem 1.6rem;
  background:var(--orange-pale); border-radius:var(--r); border:1px solid var(--trait);
}
.cumul-calcul{
  display:block; font-family:var(--display); font-variation-settings:"wdth" 95,"wght" 650;
  font-size:.76rem; text-transform:uppercase; letter-spacing:.12em; color:var(--gris);
}
.cumul-chiffre{
  display:flex; align-items:baseline; justify-content:center; gap:.2rem;
  font-family:var(--display); font-variation-settings:"wdth" 68,"wght" 850;
  font-size:3.6rem; line-height:1; color:var(--bleu-fonce); margin:.25rem 0;
}
.cumul-chiffre span{
  font-size:1rem; font-variation-settings:"wdth" 95,"wght" 700;
  text-transform:uppercase; letter-spacing:.06em; color:var(--gris);
}
.cumul-mention{
  display:block; font-size:.82rem; color:var(--gris);
}
@media (max-width:700px){
  .cumul{ grid-template-columns:1fr; gap:1.4rem; }
}


/* ---------- 31. Repli de la billetterie -------------------- */
.billetterie{ position:relative; }
.billetterie-repli{
  display:none; text-align:center; padding:3rem 1.5rem;
}
.billetterie-repli h3{ margin:.4rem 0 .6rem; }
.billetterie[data-repli="true"] iframe{ display:none; }
.billetterie[data-repli="true"] .billetterie-repli{ display:block; }

/* Signature de l'agence, discrète dans le pied de page */
.pied-signature{ flex-basis:100%; color:#9DB0C6; font-size:.82rem; }
.pied-signature a{ font-size:.82rem; color:#C7D8E8; }
.pied-signature a:hover{ color:var(--orange); }
@media (min-width:781px){
  .pied-signature{ flex-basis:auto; }
}


/* ---------- 32. Tarifs de la billetterie ------------------- */
/* Le module HelloAsso ne s'affichant pas de façon fiable, on
   annonce ce qui est en vente avant d'envoyer sur la plateforme :
   le visiteur sait ce qu'il va trouver. */
.tarifs{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(210px,1fr));
  gap:1.2rem; margin-top:2.4rem;
}
.tarif{
  background:var(--papier); border:1px solid var(--trait); border-radius:var(--r);
  padding:1.5rem 1.4rem; box-shadow:var(--ombre);
  border-top:5px solid var(--bleu);
  display:flex; flex-direction:column;
}
.tarif-rose{ border-top-color:var(--telethon); }
.tarif-nom{
  font-family:var(--display); font-variation-settings:"wdth" 88,"wght" 750;
  font-size:1.02rem; line-height:1.2; color:var(--bleu-fonce);
}
.tarif-prix{
  display:flex; align-items:baseline; gap:.15rem;
  font-family:var(--display); font-variation-settings:"wdth" 70,"wght" 850;
  font-size:2.9rem; line-height:1; color:var(--bleu-fonce); margin:.5rem 0 .6rem;
}
.tarif-prix span{
  font-size:1.1rem; font-variation-settings:"wdth" 95,"wght" 700; color:var(--gris);
}
.tarif-rose .tarif-prix{ color:var(--telethon); }
.tarif p{ font-size:.9rem; color:var(--gris); margin:0; }

@media (max-width:520px){
  .tarifs{ grid-template-columns:1fr 1fr; gap:.9rem; }
  .tarif{ padding:1.1rem 1rem; }
  .tarif-prix{ font-size:2.3rem; }
  .tarif p{ font-size:.84rem; }
}


/* ---------- 33. Lisibilité sur les aplats orange -----------
   L'orange est une couleur claire : tout ce qui s'écrit dessus
   doit être franchement sombre. Le bleu des liens, très lisible
   sur fond clair, tombe à 2,55:1 sur orange — il y est remplacé
   par un brun profond, mesuré à 5,85:1. */
.section-orange .surligne{ color:#3D2204; }
.hero .surligne{ color:var(--bleu); }
.hero .surligne::before{ background:var(--orange); }

/* Le mot mis en exergue dans les grands titres : le bleu moyen
   descend à 2,55:1 sur orange, le bleu profond remonte à 4,73:1 */
.section-orange h1 em,
.section-orange h2 em{ color:var(--bleu-fonce); }

.hero-meta dt{ color:#4A2A05; }

/* Sur fond orange, les liens de texte courant restent lisibles */
.section-orange a:not(.bouton){ color:#3D2204; text-decoration-color:rgba(61,34,4,.5); }

/* Le rose de l'AFM-Téléthon, un ton plus soutenu pour passer le
   seuil de contraste en petit corps. La teinte de marque reste
   utilisée sur les aplats et les pastilles. */
.missions dt{ color:#BD0068; }


/* ---------- 34. Accents orange sur fond clair --------------
   L'orange quitte les grands aplats. Il se concentre sur des
   surfaces réduites, où il reste saturé et assumé. */

/* Le filet des sur-titres, sur fond clair, passe en orange :
   c'est le rappel de marque le plus économique du site.
   Les fonds sombres et l'aplat orange gardent leurs variantes :
   sans cette exclusion, la règle les écraserait et le sur-titre
   deviendrait illisible. */
.section:not(.section-sombre):not(.section-orange) .surligne::before{
  background:var(--orange);
}

/* Le texte reste bleu — lisible, sobre — mais son filet est
   orange. Deux couleurs pour trois pixels. */
.section:not(.section-sombre):not(.section-orange) .surligne{
  color:var(--bleu);
}

/* Les grandes sections claires gagnent un filet orange en tête :
   assez pour signer, trop fin pour peser. */
.tete-section-ligne{ border-bottom:1px solid rgba(240,138,28,.25); padding-bottom:1.4rem; }

/* Cartes et encadrés : un liseré orange plutôt qu'un fond */
.carte:hover{ border-color:rgba(240,138,28,.5); }
.agenda-item:hover{ border-color:rgba(240,138,28,.5); }

/* ---------- 23. Mouvement réduit -------------------------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{ animation-duration:.01ms !important; transition-duration:.01ms !important; scroll-behavior:auto !important; }
  .affiche{ transform:none; }
}

/* ---------- 24. Impression -------------------------------- */
@media print{
  .entete,.pied,.billetterie,.burger,.visionneuse{ display:none; }
  body{ background:#fff; }
}