/* ==========================================================================
   Carnet de terrain : palette Pierre, Lin & Mélèze
   Fond de lin chaud, encre ardoise, accent or de mélèze.
   ========================================================================== */

/* Polices : chargées par une balise <link> dans templates/base.html (plus rapide qu'un @import). */

:root {
  /* — Fonds — */
  --craie: #f6f3ee;         /* fond de page */
  --blanc: #fdfcfa;         /* cartes, champs, en-tête */
  --lin: #ede6da;           /* surfaces douces : section « Sur mesure » */
  --roche: #dfd8cc;         /* filets 1 px, séparations, bordures de cartes */

  /* — Encre — */
  --epicea: #262d31;        /* texte principal : ardoise profonde (nom historique conservé) */
  --ardoise: #2f383d;       /* surfaces sombres sans photo */
  --muted: #646b6d;         /* texte secondaire */
  --bord-champ: #8b9092;    /* bordures de champs de formulaire uniquement */

  /* — Accents — */
  --meleze: #b9843b;        /* aplats : boutons, badges */
  --meleze-fonce: #84591b;  /* liens et hover sur fond clair */

  /* — États des sorties (badges uniquement) — */
  --ok-fond: #e4ebe0;      --ok-texte: #3a5530;
  --peu-fond: #f6e9d2;     --peu-texte: #6f430e;
  --complet-fond: #f2dee1; --complet-texte: #7c2743;
  --clos-fond: #e9e6e0;    --clos-texte: #4f5457;

  --police-hero: "EB Garamond", Palatino, Georgia, serif;
  --police-texte: "Manrope", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --police-ui: "Manrope", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  /* Boutons : capitales condensées, comme le titre des affiches de Chamonix (« Aiguille du Midi »). */
  --police-affiche: "Oswald", "Bebas Neue", "Arial Narrow", system-ui, sans-serif;
  --rayon: 3px;
  --rayon-grand: 4px;

  --texte-sobre: rgba(246, 243, 238, 0.78);
  /* Voile neutre des photos : assombrit sans teinter. */
  --voile: 22, 25, 28;

  /* Tirage façon affiche : ombres bleu nuit, hautes lumières crème, grain. */
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
  --affiche-ombres: #1f3d5c;     /* les noirs remontent vers ce bleu nuit */
  --affiche-lumieres: #fff0d4;   /* les blancs descendent vers ce crème */
  --affiche-contraste: contrast(1.14) saturate(1.08);
  /* Découpe irrégulière, comme le bord d'un vieux tirage (trois variantes + l'en-tête). */
  --bord-a: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 1000' preserveAspectRatio='none'%3E%3Cpath d='M1.6 2.9 L29.4 1.8 L58.8 3.1 L88.2 0.1 L117.6 1.3 L147.1 5.0 L176.5 4.2 L205.9 3.2 L235.3 3.2 L264.7 2.6 L294.1 3.4 L323.5 3.8 L352.9 2.4 L382.4 4.3 L411.8 3.6 L441.2 3.6 L470.6 2.0 L500.0 2.2 L529.4 4.4 L558.8 0.7 L588.2 4.8 L617.6 3.1 L647.1 2.5 L676.5 1.8 L705.9 2.9 L735.3 3.4 L764.7 4.3 L794.1 3.4 L823.5 4.3 L852.9 4.5 L882.4 3.6 L911.8 4.2 L941.2 1.4 L970.6 4.3 L999.1 4.1 L997.9 29.4 L998.5 58.8 L993.0 88.2 L995.1 117.6 L996.4 147.1 L995.6 176.5 L997.5 205.9 L998.5 235.3 L995.2 264.7 L999.0 294.1 L996.9 323.5 L999.8 352.9 L998.4 382.4 L995.5 411.8 L997.7 441.2 L996.8 470.6 L997.2 500.0 L995.3 529.4 L997.8 558.8 L998.8 588.2 L995.1 617.6 L995.6 647.1 L997.9 676.5 L999.9 705.9 L996.8 735.3 L996.9 764.7 L996.6 794.1 L996.5 823.5 L999.9 852.9 L996.6 882.4 L998.7 911.8 L997.0 941.2 L998.2 970.6 L997.8 996.8 L970.6 998.5 L941.2 993.8 L911.8 997.2 L882.4 998.4 L852.9 996.0 L823.5 999.1 L794.1 996.5 L764.7 998.4 L735.3 995.8 L705.9 995.7 L676.5 998.3 L647.1 995.6 L617.6 998.9 L588.2 997.4 L558.8 996.0 L529.4 999.1 L500.0 996.0 L470.6 996.0 L441.2 999.4 L411.8 996.0 L382.4 998.3 L352.9 997.9 L323.5 995.4 L294.1 1000.0 L264.7 995.6 L235.3 997.8 L205.9 995.4 L176.5 996.3 L147.1 996.7 L117.6 998.6 L88.2 998.9 L58.8 997.1 L29.4 993.5 L4.6 996.4 L4.6 970.6 L4.5 941.2 L0.1 911.8 L0.9 882.4 L3.3 852.9 L2.1 823.5 L3.1 794.1 L1.3 764.7 L2.4 735.3 L1.8 705.9 L2.7 676.5 L0.9 647.1 L4.6 617.6 L6.6 588.2 L3.1 558.8 L0.2 529.4 L1.3 500.0 L2.1 470.6 L6.2 441.2 L0.3 411.8 L0.6 382.4 L4.9 352.9 L0.4 323.5 L1.6 294.1 L1.8 264.7 L2.9 235.3 L1.0 205.9 L0.6 176.5 L3.6 147.1 L0.4 117.6 L1.9 88.2 L3.9 58.8 L4.0 29.4Z'/%3E%3C/svg%3E");
  --bord-b: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 1000' preserveAspectRatio='none'%3E%3Cpath d='M2.5 3.0 L29.4 4.6 L58.8 2.5 L88.2 0.9 L117.6 3.1 L147.1 0.5 L176.5 0.5 L205.9 5.5 L235.3 4.9 L264.7 3.3 L294.1 1.3 L323.5 4.2 L352.9 1.0 L382.4 0.2 L411.8 2.2 L441.2 2.6 L470.6 2.5 L500.0 2.3 L529.4 5.0 L558.8 4.2 L588.2 1.6 L617.6 1.4 L647.1 3.8 L676.5 4.2 L705.9 4.8 L735.3 0.0 L764.7 4.6 L794.1 4.9 L823.5 0.4 L852.9 3.9 L882.4 0.4 L911.8 4.8 L941.2 0.6 L970.6 0.8 L995.9 1.3 L997.2 29.4 L999.0 58.8 L999.3 88.2 L999.4 117.6 L998.9 147.1 L995.1 176.5 L998.5 205.9 L998.9 235.3 L995.7 264.7 L999.5 294.1 L998.9 323.5 L996.1 352.9 L998.5 382.4 L999.5 411.8 L998.8 441.2 L998.1 470.6 L995.2 500.0 L997.1 529.4 L999.1 558.8 L995.5 588.2 L998.8 617.6 L996.3 647.1 L999.0 676.5 L995.6 705.9 L997.9 735.3 L999.8 764.7 L998.8 794.1 L998.7 823.5 L997.0 852.9 L999.1 882.4 L999.7 911.8 L997.2 941.2 L996.9 970.6 L995.4 998.6 L970.6 999.9 L941.2 997.8 L911.8 999.1 L882.4 997.1 L852.9 998.2 L823.5 995.1 L794.1 996.5 L764.7 998.9 L735.3 999.9 L705.9 996.5 L676.5 999.9 L647.1 997.6 L617.6 998.4 L588.2 999.6 L558.8 996.3 L529.4 996.3 L500.0 996.0 L470.6 998.2 L441.2 995.5 L411.8 997.9 L382.4 995.7 L352.9 996.9 L323.5 997.1 L294.1 999.6 L264.7 995.0 L235.3 996.4 L205.9 996.3 L176.5 997.8 L147.1 999.6 L117.6 999.9 L88.2 997.6 L58.8 996.5 L29.4 996.9 L1.7 999.4 L1.5 970.6 L1.0 941.2 L4.5 911.8 L2.2 882.4 L1.6 852.9 L1.0 823.5 L4.0 794.1 L4.4 764.7 L2.9 735.3 L0.7 705.9 L4.2 676.5 L3.6 647.1 L1.4 617.6 L2.3 588.2 L1.1 558.8 L3.1 529.4 L1.6 500.0 L4.9 470.6 L0.6 441.2 L7.0 411.8 L3.5 382.4 L1.5 352.9 L0.1 323.5 L3.6 294.1 L4.1 264.7 L1.1 235.3 L3.1 205.9 L3.1 176.5 L4.0 147.1 L3.4 117.6 L2.4 88.2 L0.1 58.8 L3.6 29.4Z'/%3E%3C/svg%3E");
  --bord-c: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 1000' preserveAspectRatio='none'%3E%3Cpath d='M3.4 3.7 L29.4 4.8 L58.8 0.3 L88.2 1.7 L117.6 4.1 L147.1 4.5 L176.5 0.4 L205.9 2.9 L235.3 4.2 L264.7 3.7 L294.1 7.9 L323.5 4.9 L352.9 1.3 L382.4 1.7 L411.8 3.5 L441.2 0.5 L470.6 1.5 L500.0 4.7 L529.4 2.7 L558.8 3.5 L588.2 5.0 L617.6 7.7 L647.1 3.9 L676.5 2.9 L705.9 1.5 L735.3 4.1 L764.7 1.8 L794.1 0.9 L823.5 2.6 L852.9 0.8 L882.4 2.4 L911.8 2.7 L941.2 1.7 L970.6 1.3 L996.4 1.8 L997.7 29.4 L997.1 58.8 L998.9 88.2 L997.2 117.6 L994.5 147.1 L999.7 176.5 L998.5 205.9 L999.5 235.3 L997.9 264.7 L1000.0 294.1 L995.8 323.5 L996.9 352.9 L999.0 382.4 L998.4 411.8 L995.6 441.2 L995.0 470.6 L995.7 500.0 L999.3 529.4 L995.9 558.8 L997.0 588.2 L999.8 617.6 L998.4 647.1 L995.8 676.5 L998.5 705.9 L995.9 735.3 L996.4 764.7 L996.5 794.1 L999.4 823.5 L997.0 852.9 L997.8 882.4 L999.4 911.8 L999.6 941.2 L999.2 970.6 L996.3 999.4 L970.6 995.3 L941.2 997.1 L911.8 995.7 L882.4 998.9 L852.9 999.0 L823.5 997.3 L794.1 998.2 L764.7 999.0 L735.3 999.2 L705.9 997.4 L676.5 995.5 L647.1 997.6 L617.6 997.0 L588.2 994.1 L558.8 996.0 L529.4 995.8 L500.0 997.3 L470.6 996.7 L441.2 996.7 L411.8 995.3 L382.4 996.4 L352.9 998.1 L323.5 995.0 L294.1 998.3 L264.7 995.3 L235.3 999.1 L205.9 998.9 L176.5 996.9 L147.1 998.9 L117.6 998.5 L88.2 999.2 L58.8 998.7 L29.4 995.8 L2.6 999.3 L0.3 970.6 L3.9 941.2 L0.6 911.8 L1.5 882.4 L2.8 852.9 L3.1 823.5 L2.7 794.1 L3.2 764.7 L4.8 735.3 L3.9 705.9 L2.7 676.5 L3.2 647.1 L3.8 617.6 L0.1 588.2 L2.5 558.8 L2.1 529.4 L0.1 500.0 L0.5 470.6 L3.1 441.2 L0.9 411.8 L2.4 382.4 L4.8 352.9 L2.9 323.5 L0.8 294.1 L4.8 264.7 L1.0 235.3 L1.0 205.9 L2.3 176.5 L2.2 147.1 L2.0 117.6 L4.9 88.2 L1.7 58.8 L0.8 29.4Z'/%3E%3C/svg%3E");
  --bord-hero: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 1000' preserveAspectRatio='none'%3E%3Cpath d='M0.9 5.8 L20.8 0.8 L41.7 0.5 L62.5 6.0 L83.3 3.9 L104.2 2.7 L125.0 1.2 L145.8 0.5 L166.7 0.1 L187.5 2.4 L208.3 2.3 L229.2 1.6 L250.0 0.4 L270.8 2.3 L291.7 2.0 L312.5 3.0 L333.3 5.4 L354.2 0.9 L375.0 5.7 L395.8 1.2 L416.7 3.5 L437.5 5.3 L458.3 2.1 L479.2 0.8 L500.0 0.6 L520.8 4.2 L541.7 5.1 L562.5 1.2 L583.3 3.2 L604.2 0.4 L625.0 3.0 L645.8 1.3 L666.7 0.1 L687.5 1.6 L708.3 2.3 L729.2 5.3 L750.0 2.4 L770.8 4.0 L791.7 1.2 L812.5 2.9 L833.3 4.6 L854.2 1.0 L875.0 1.4 L895.8 2.7 L916.7 3.5 L937.5 0.6 L958.3 0.6 L979.2 2.2 L998.6 4.4 L997.8 20.8 L1000.0 41.7 L999.2 62.5 L998.4 83.3 L996.6 104.2 L998.2 125.0 L996.9 145.8 L997.9 166.7 L997.8 187.5 L999.6 208.3 L999.0 229.2 L998.7 250.0 L999.0 270.8 L999.7 291.7 L999.0 312.5 L999.0 333.3 L998.4 354.2 L999.1 375.0 L999.5 395.8 L999.0 416.7 L998.4 437.5 L997.8 458.3 L999.2 479.2 L999.8 500.0 L998.3 520.8 L998.4 541.7 L999.5 562.5 L998.4 583.3 L1000.0 604.2 L998.0 625.0 L998.0 645.8 L999.5 666.7 L998.8 687.5 L999.2 708.3 L998.1 729.2 L998.6 750.0 L998.3 770.8 L998.1 791.7 L999.2 812.5 L998.1 833.3 L999.4 854.2 L998.1 875.0 L997.9 895.8 L998.2 916.7 L999.2 937.5 L998.9 958.3 L998.2 979.2 L999.4 995.5 L979.2 998.4 L958.3 999.3 L937.5 998.4 L916.7 995.2 L895.8 998.3 L875.0 997.5 L854.2 994.2 L833.3 995.5 L812.5 995.1 L791.7 995.0 L770.8 995.3 L750.0 997.7 L729.2 995.3 L708.3 994.5 L687.5 999.2 L666.7 995.9 L645.8 997.2 L625.0 994.6 L604.2 999.4 L583.3 994.8 L562.5 996.9 L541.7 994.5 L520.8 996.1 L500.0 995.0 L479.2 995.7 L458.3 998.1 L437.5 997.9 L416.7 996.9 L395.8 995.7 L375.0 999.0 L354.2 997.7 L333.3 995.3 L312.5 998.7 L291.7 998.9 L270.8 999.0 L250.0 996.7 L229.2 995.0 L208.3 998.0 L187.5 995.6 L166.7 996.6 L145.8 994.0 L125.0 999.2 L104.2 997.6 L83.3 995.4 L62.5 994.7 L41.7 996.3 L20.8 994.4 L2.0 994.4 L1.5 979.2 L1.1 958.3 L1.9 937.5 L0.7 916.7 L1.0 895.8 L1.8 875.0 L2.1 854.2 L2.1 833.3 L0.5 812.5 L1.7 791.7 L1.4 770.8 L1.4 750.0 L0.8 729.2 L0.8 708.3 L1.4 687.5 L1.5 666.7 L0.4 645.8 L0.3 625.0 L0.9 604.2 L2.1 583.3 L3.5 562.5 L1.3 541.7 L2.2 520.8 L2.1 500.0 L1.0 479.2 L0.5 458.3 L0.8 437.5 L1.8 416.7 L2.2 395.8 L0.3 375.0 L2.0 354.2 L0.1 333.3 L0.8 312.5 L1.2 291.7 L1.4 270.8 L1.7 250.0 L1.3 229.2 L1.9 208.3 L1.9 187.5 L1.4 166.7 L1.4 145.8 L1.3 125.0 L0.8 104.2 L1.0 83.3 L0.8 62.5 L1.6 41.7 L0.3 20.8Z'/%3E%3C/svg%3E");
}

/* --- Duotone pour photos paysage ------------------------------------------ */
.duo { position: relative; }
.duo img, .duo svg { filter: grayscale(1) contrast(1.05); display: block; width: 100%; }
.duo::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(160deg, var(--meleze), var(--epicea));
  mix-blend-mode: multiply;
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--craie);
  color: var(--epicea);
  font-family: var(--police-texte);
  font-size: 1.1rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  font-variant-numeric: lining-nums;
}

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

/* --- Titres et texte ------------------------------------------------------ */
h1, h2, h3 {
  font-family: var(--police-hero);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.01em;
  margin: 0 0 0.6em;
}
/* Titres principaux des pages : capitales condensées, comme les en-têtes et les affiches. */
h1 {
  font-family: var(--police-affiche); font-weight: 500; text-transform: uppercase;
  letter-spacing: 0.03em; line-height: 1.05;
  font-size: clamp(2.1rem, 5.5vw, 3.2rem);
}
h2 { font-size: clamp(1.5rem, 3.5vw, 1.9rem); margin-top: 2.2em; }
h3 { font-size: 1.3rem; margin-top: 1.6em; }
:is(h1, h2, h3):first-child { margin-top: 0; }

p { margin: 0 0 1em; }
.prose { max-width: 40rem; }
.prose p:last-child { margin-bottom: 0; }

a {
  color: var(--meleze-fonce);
  text-underline-offset: 0.18em;
  text-decoration-thickness: 1px;
}
a:hover { color: var(--meleze); }

:focus-visible {
  outline: 2px solid var(--meleze);
  outline-offset: 2px;
}

.saut {
  position: absolute; left: -999px; top: 0.5rem;
  background: var(--blanc); padding: 0.5rem 1rem; z-index: 10; font-family: var(--police-ui);
}
.saut:focus { left: 0.5rem; }

/* ::selection ---------------------------------------------------------------- */
::selection { background: var(--meleze); color: var(--blanc); }

/* --- Mise en page --------------------------------------------------------- */
.conteneur { width: min(100% - 2.5rem, 68rem); margin-inline: auto; }
.bloc { padding-block: clamp(2rem, 5vw, 3.5rem); }
.bloc--tight { padding-block: 0.5rem !important; }
.fil { font-family: var(--police-ui); font-size: 0.9rem; margin-bottom: 1.5rem; }
.discret { color: var(--muted); font-size: 0.9rem; }

/* --- En-tête -------------------------------------------------------------- */
/* Barre de titre : nom en capitales condensées façon affiche, sous-titre sobre en italique. */
.entete {
  position: relative; z-index: 20;
  background: rgba(253, 252, 250, 0.94);
  border-bottom: 1px solid var(--roche);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
@media (min-width: 48rem) { .entete { position: sticky; top: 0; } }
.entete__interieur {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 0.5rem 2rem; padding-block: 0.8rem;
}
.marque {
  display: inline-block;
  color: var(--epicea); text-decoration: none;
  font-family: var(--police-affiche); font-size: 1.6rem; font-weight: 500; line-height: 1.05;
  letter-spacing: 0.07em; text-transform: uppercase;
}
.marque:hover { color: var(--epicea); }
.marque small {
  display: block; margin-top: 0.15rem;
  font-family: var(--police-hero); font-size: 0.9rem; font-weight: 400; font-style: italic;
  letter-spacing: 0; text-transform: none; color: var(--muted);
}
.navigation ul { display: flex; flex-wrap: wrap; gap: 0.25rem 1.6rem; list-style: none; margin: 0; padding: 0; }
.navigation a {
  display: inline-block; padding: 0.35rem 0; border-bottom: 2px solid transparent;
  font-family: var(--police-affiche); font-size: 1rem; font-weight: 400; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--epicea); text-decoration: none;
}
.navigation a:hover { color: var(--meleze-fonce); border-bottom-color: var(--roche); }
.navigation a[aria-current="page"] { border-bottom-color: var(--meleze); font-weight: 500; }
@media (max-width: 30rem) {
  .navigation ul { gap: 0.1rem 0.85rem; }
  .navigation a { font-size: 0.92rem; letter-spacing: 0.06em; }
}

/* --- Page d'accueil -------------------------------------------------------- */
.hero {
  background: var(--craie);
  border-bottom: 1px solid var(--roche);
  padding-block: clamp(3rem, 9vw, 6.5rem);
}
.hero h1 {
  font-family: var(--police-hero);
  font-size: clamp(2.4rem, 8vw, 4.2rem);
  margin-bottom: 0.15em;
}
.hero__titre { font-family: var(--police-hero); font-size: 1.45rem; font-style: italic; color: var(--muted); margin-bottom: 1rem; }
.hero__accroche { max-width: 34rem; font-size: 1.25rem; }
.actions { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 1.75rem; }
.hero--photo {
  background: var(--ardoise) center / cover no-repeat;
  position: relative;
  overflow: hidden;
}
.hero--photo .hero__overlay {
  position: absolute; inset: 0;
  background:
    linear-gradient(90deg, rgba(var(--voile), 0.42) 0%, rgba(var(--voile), 0.12) 65%, rgba(var(--voile), 0) 100%),
    linear-gradient(180deg, rgba(var(--voile), 0.18) 0%, rgba(var(--voile), 0.05) 45%, rgba(var(--voile), 0.45) 100%);
  z-index: 0;
}
.hero--photo > * { position: relative; z-index: 1; }

/* Fondu des photos en tête de page (activité en mode diaporama) */
.hero--photo > .hero__diapos { position: absolute; inset: 0; z-index: 0; }
.hero__diapo {
  position: absolute; inset: 0; background: center / cover no-repeat;
  opacity: 0; transition: opacity 1.6s ease;
}
.hero__diapo.est-active { opacity: 1; }
.hero--grand { padding-block: clamp(5rem, 12vw, 10rem); }
.hero h1 {
  font-family: var(--police-hero);
  font-size: clamp(2.4rem, 8vw, 4.2rem);
  margin-bottom: 0.15em;
}
/* --- Hero texte blanc sur fond photo -------------------------------------- */
.hero--photo .hero__titre-principal,
.hero--photo .hero__titre,
.hero--photo .hero__accroche,
.hero--photo .hero__accroche p { color: var(--craie); }
.hero--photo .hero__titre { opacity: 0.9; }

/* --- Hero activité / sortie ----------------------------------------------- */
.hero--activite,
.hero--sortie {
  padding-block: clamp(4rem, 10vw, 8rem);
}
.hero--activite .hero__titre-principal,
.hero--sortie .hero__titre-principal {
  font-family: var(--police-hero);
  font-size: clamp(2.2rem, 7vw, 3.8rem);
  margin-bottom: 0.5rem;
}
.hero--activite .hero__titre,
.hero--sortie .hero__titre {
  font-family: var(--police-hero);
  font-size: 1.35rem;
  font-style: italic;
  color: var(--muted);
  margin-bottom: 0.75rem;
}
.hero--activite .hero__accroche,
.hero--sortie .hero__accroche {
  font-size: 1.15rem;
  opacity: 0.9;
  max-width: 40rem;
  margin: 0 0 1.5rem;
}
.hero--activite .etat,
.hero--sortie .etat { vertical-align: baseline; margin-left: 0.75rem; }
.hero--activite .fil,
.hero--sortie .fil { margin-bottom: 1rem; }
.hero--activite .fil a,
.hero--sortie .fil a { color: var(--craie); opacity: 0.8; }
.hero--activite .fil a:hover,
.hero--sortie .fil a:hover { opacity: 1; }
.hero--activite .hero__titre-principal,
.hero--sortie .hero__titre-principal,
.hero--activite .hero__titre,
.hero--sortie .hero__titre,
.hero--activite .hero__accroche,
.hero--sortie .hero__accroche { color: var(--craie); }
.hero--activite .bouton--secondaire,
.hero--sortie .bouton--secondaire { border-color: transparent; color: var(--craie); }
.hero--photo .bouton--secondaire {
  background: transparent; border-color: rgba(253, 252, 250, 0.8); color: var(--blanc);
}
.hero--photo .bouton--secondaire:hover { background: var(--blanc); border-color: var(--blanc); color: var(--epicea); }
.hero--activite .bouton--secondaire:hover,
.hero--sortie .bouton--secondaire:hover {
  background: transparent; color: var(--epicea);
}

/* --- Hero activité/sortie sans image -------------------------------------- */
.hero--activite:not(.hero--photo),
.hero--sortie:not(.hero--photo) {
  background: var(--ardoise);
  color: var(--craie);
}
.hero--activite:not(.hero--photo) .hero__titre-principal,
.hero--sortie:not(.hero--photo) .hero__titre-principal { color: var(--craie); }
.hero--activite:not(.hero--photo) .hero__titre,
.hero--sortie:not(.hero--photo) .hero__titre { color: var(--texte-sobre); }
.hero--activite:not(.hero--photo) .hero__accroche,
.hero--sortie:not(.hero--photo) .hero__accroche { color: var(--texte-sobre); }

/* --- Blocs structurants --------------------------------------------------- */
.bloc { padding-block: clamp(2rem, 5vw, 3.5rem); }
.bloc--clair { background: var(--craie); }
/* Section « Sur mesure » : lin chaud et défilé de photos. */
.bloc--surmesure {
  background: var(--lin);
  border-block: 1px solid var(--roche);
  overflow: hidden;
}
.bloc--surmesure .prose { color: var(--epicea); }
.bloc--surmesure .defile { margin-top: clamp(2rem, 4vw, 3rem); }

.bloc--sombre {
  background: var(--ardoise);
  color: var(--craie);
}
.bloc--sombre h2 { color: var(--craie); }
.bloc--sombre .prose { color: var(--craie); }
.bloc--sombre .prose p { color: var(--craie); }
.bloc--sombre a { color: var(--meleze); }
.bloc--sombre a:hover { color: var(--craie); }
.bloc--sombre .discret { color: var(--texte-sobre); }
.bloc--sombre .vide { border-left-color: var(--roche); color: var(--texte-sobre); }

/* --- Boutons -------------------------------------------------------------- */
.bouton {
  display: inline-block; padding: 0.42rem 0.95rem 0.45rem; border: 1.5px solid var(--meleze); border-radius: var(--rayon);
  background: var(--meleze); color: var(--blanc); cursor: pointer; text-decoration: none;
  font-family: var(--police-affiche); font-size: 1rem; font-weight: 500; line-height: 1.2;
  letter-spacing: 0.06em; text-transform: uppercase;
  transition: background-color 0.15s, border-color 0.15s, color 0.15s;
}
.bouton:hover { background: var(--meleze-fonce); border-color: var(--meleze-fonce); color: var(--blanc); }
.bouton--secondaire {
  background: var(--blanc); color: var(--meleze-fonce); border-color: var(--meleze);
}
.bouton--secondaire:hover {
  background: var(--meleze); color: var(--blanc); border-color: var(--meleze);
}

/* --- Agenda des sorties --------------------------------------------------- */
.mois-titre { font-size: 1.15rem; font-weight: 500; font-style: italic; color: var(--muted); margin: 2.5rem 0 0.6rem; }
.mois-titre:first-of-type { margin-top: 0; }
.agenda { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--roche); }
.sortie { border-bottom: 1px solid var(--roche); }
.sortie__lien {
  display: grid; grid-template-columns: 8rem 1fr; gap: 0.3rem 1.25rem; align-items: start;
  padding: 1.1rem 0.5rem; color: inherit; text-decoration: none;
}
.sortie__lien:hover { background: var(--blanc); color: inherit; }
.sortie__date { text-align: center; line-height: 1; }
.sortie__jour { display: block; font-size: 2.6rem; font-weight: 700; color: var(--epicea); }
.sortie__mois { display: block; margin-top: 0.25rem; font-family: var(--police-ui); font-size: 0.85rem; color: var(--muted); }
.sortie__titre { display: block; font-size: 1.35rem; font-weight: 700; line-height: 1.25; color: var(--epicea); }
.sortie__lien:hover .sortie__titre { text-decoration: underline; }
.sortie__meta {
  display: flex; flex-wrap: wrap; gap: 0.1rem 1.1rem; margin-top: 0.3rem;
  font-family: var(--police-ui); font-size: 0.9rem; color: var(--muted);
}
.sortie .etat { grid-column: 2; justify-self: start; margin-top: 0.4rem; }
@media (min-width: 42rem) {
  .sortie__lien { grid-template-columns: 8rem 1fr auto; align-items: center; }
  .sortie .etat { grid-column: 3; margin-top: 0; }
}

.vide {
  border-left: 4px solid var(--roche); padding: 0.25rem 0 0.25rem 1rem; max-width: 36rem; color: var(--muted);
}

/* --- Pastilles d'état ----------------------------------------------------- */
/* Inline-block (pas flex) : le texte de l'état reste sur la ligne de base du texte voisin. */
.etat {
  display: inline-block; white-space: nowrap; font-style: normal;
  font-family: var(--police-ui); font-size: 0.88rem; font-weight: 600; line-height: 1.3;
}
.etat::before {
  content: ""; display: inline-block; width: 0.5em; height: 0.5em; margin-right: 0.45em;
  border-radius: 50%; background: currentColor; vertical-align: 0.05em;
}
.etat--ok { color: var(--ok-texte); }
.etat--peu { color: var(--peu-texte); }
.etat--complet { color: var(--complet-texte); }
.etat--fermee, .etat--annulee, .etat--passee { color: var(--clos-texte); }
.hero--photo .etat, .hero--activite .etat, .hero--sortie .etat { color: var(--blanc); }

/* --- Fiche d'une sortie ou d'une activité --------------------------------- */
.date-grande { font-size: 1.5rem; font-style: italic; margin-bottom: 0.75rem; color: var(--epicea); }
.photo-principale {
  display: block; width: 100%; max-height: 26rem; aspect-ratio: 16 / 9; object-fit: cover;
  border-radius: var(--rayon); margin: 1.5rem 0;
}
.faits {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(10.5rem, 1fr)); gap: 1rem 1.5rem;
  margin: 1.75rem 0; padding: 1.1rem 0; border-block: 1px solid var(--roche);
}
.faits dt { font-family: var(--police-ui); font-size: 0.85rem; color: var(--muted); }
.faits dd { font-family: var(--police-hero); margin: 0.1rem 0 0; font-size: 1.15rem; font-weight: 600; line-height: 1.35; color: var(--epicea); }
.faits dd small { display: block; font-size: 0.95rem; font-weight: 400; color: var(--muted); }

/* --- Difficultés et bulles d'aide ---------------------------------------- */
.difficulte { display: inline-flex; align-items: baseline; }
.difficulte__bouton {
  display: inline-flex; align-items: baseline; gap: 0.3em; margin: 0; padding: 0;
  border: 0; border-bottom: 1px dotted var(--meleze-fonce); background: none;
  color: inherit; font: inherit; font-weight: inherit; line-height: inherit;
  text-align: inherit; cursor: pointer;
}
.difficulte__bouton:hover,
.difficulte__bouton:focus-visible { color: var(--meleze-fonce); }
.difficulte__aide {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 1.7em; height: 1.3em; padding: 0 0.18em;
  border: 1px solid currentColor; border-radius: 999px;
  color: var(--meleze-fonce); font-family: var(--police-ui); font-size: 0.62em;
  font-weight: 700; line-height: 1; transform: translateY(-0.05em);
}
.difficulte__bulle {
  width: min(21rem, calc(100vw - 2rem)); max-height: min(60vh, 24rem); overflow-y: auto;
  padding: 0.75rem 0.9rem; background: var(--blanc); color: var(--epicea);
  border: 1px solid var(--roche); border-radius: var(--rayon);
  box-shadow: 0 0.5rem 1.5rem rgba(31, 51, 46, 0.18);
  font-family: var(--police-ui); font-size: 0.86rem; font-weight: 400; line-height: 1.45;
  white-space: normal;
}
.note { max-width: 40rem; padding-left: 1rem; border-left: 4px solid var(--roche); color: var(--muted); }
.liste-materiel { max-width: 40rem; padding-left: 1.25rem; }
.liste-materiel li { margin-bottom: 0.25rem; }
.infos-cartes {
  max-width: 52rem; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(13rem, 100%), 1fr)); gap: 1rem;
  margin: 0 0 2rem 0;
}
/* Les fiches : un papier un peu plus foncé que la page, posé sans cadre. */
.info-carte, .jour-resume, .resume-sortie, .bloc-paiement, .personne {
  background: var(--lin); border: 0; border-radius: var(--rayon);
}
.info-carte {
  min-width: 0; padding: 1.1rem 1.25rem 1.2rem;
  border-top: 2px solid var(--epicea);
}
.info-carte h3 { margin: 0 0 0.6rem; font-size: 1.15rem; }
.info-carte__prix { margin: 0; font-family: var(--police-ui); font-size: 1.4rem; font-weight: 600; }
.info-carte__prix small { color: var(--muted); font-size: 0.85rem; font-weight: 400; }
.info-carte__detail { margin: 0.5rem 0 0; color: var(--muted); }
.info-carte .liste-materiel { margin: 0; }
.info-carte .liste-materiel li:last-child { margin-bottom: 0; }
.info-carte .prose { margin-top: 0.6rem; }
.info-carte .prose > :last-child { margin-bottom: 0; }
.conditions details {
  max-width: 40rem; margin-bottom: 0.6rem; padding: 0.7rem 1rem; background: var(--blanc);
  border: 1px solid var(--roche); border-radius: 8px;
}
.conditions summary { cursor: pointer; font-family: var(--police-ui); font-weight: 600; font-size: 0.95rem; }
.conditions details[open] summary { margin-bottom: 0.6rem; }
.section-conditions { margin-top: 2rem;  }
.section-conditions summary { font-family: inherit; font-size: inherit; }

/* --- Programme / itinéraire : carnet de route ------------------------------- */
.programme { margin: 2.5rem 0; }
.programme h3 { margin: 2rem 0 1rem; }
.programme h3:first-child { margin-top: 0; }

/* Résumé : une fiche par jour, chiffres comme les faits en tête de page. */
.jours-resume { display: grid; gap: 0.75rem; }
.jour-resume { padding: 0.9rem 1.25rem 1rem; }
.jour-resume__titre,
.itineraire__jour {
  margin: 0 0 0.6rem; font-family: var(--police-hero); font-size: 1.2rem; font-weight: 600; color: var(--epicea);
}
.jour-resume__titre span,
.itineraire__jour span { font-style: italic; font-weight: 400; color: var(--muted); margin-left: 0.35rem; }
.jour-resume__chiffres {
  display: flex; flex-wrap: wrap; gap: 0.2rem 1.5rem; margin: 0; font-family: var(--police-ui);
}
.jour-resume__chiffres > div { display: flex; align-items: baseline; gap: 0.4rem; }
.jour-resume__chiffres dt { font-size: 0.88rem; color: var(--muted); }
.jour-resume__chiffres dd { margin: 0; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--epicea); }
.niveaux {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.25rem 1.25rem;
  margin: 0.75rem 0 0; font-family: var(--police-ui); font-size: 0.9rem;
}
.jour-resume .niveaux { margin-top: 0.5rem; }
.niveaux__titre { color: var(--muted); font-size: 0.82rem; }
.niveau__libelle { color: var(--muted); }

/* Détail : une ligne du temps par jour. */
.itineraire { margin: 0 0 1.75rem; }
.itineraire__etapes { list-style: none; margin: 0; padding: 0; }
.etape {
  --col: 4.25rem;
  position: relative; display: grid; grid-template-columns: var(--col) 1fr; gap: 0 1.5rem;
  padding-bottom: 1.35rem;
}
/* le fil */
.etape::before {
  content: ""; position: absolute; left: calc(var(--col) + 0.75rem - 1px); top: 0.55rem; bottom: -0.55rem;
  width: 2px; background: var(--roche);
}
.etape:last-child { padding-bottom: 0; }
.etape:last-child::before { display: none; }
/* le point */
.etape::after {
  content: ""; position: absolute; left: calc(var(--col) + 0.75rem - 5px); top: 0.5rem;
  width: 10px; height: 10px; border-radius: 50%; background: var(--epicea); box-shadow: 0 0 0 4px var(--craie);
}
.etape--fixe::after { background: var(--craie); border: 1.5px solid var(--epicea); }
.etape__heure {
  margin: 0; text-align: right; font-family: var(--police-ui); font-size: 0.92rem; line-height: 1.5;
  font-variant-numeric: tabular-nums; color: var(--epicea);
}
.etape__fin { display: block; color: var(--muted); font-size: 0.85rem; }
.etape__corps { padding-left: 0.6rem; min-width: 0; }
.etape__nom { margin: 0; font-weight: 600; line-height: 1.4; color: var(--epicea); }
.etape--fixe .etape__nom { font-family: var(--police-hero); font-size: 1.15rem; font-style: italic; font-weight: 500; }
.etape__chiffres {
  display: flex; flex-wrap: wrap; gap: 0 0.9rem; margin: 0.15rem 0 0;
  font-family: var(--police-ui); font-size: 0.9rem; color: var(--muted); font-variant-numeric: tabular-nums;
}
.etape .niveaux { margin-top: 0.3rem; font-size: 0.85rem; }
@media (max-width: 30rem) {
  .etape { --col: 3.6rem; }
  .etape__corps { padding-left: 0.3rem; }
}
.programme__note { margin-top: 1rem; }

.liste-activites { list-style: none; margin: 0; padding: 0; max-width: 44rem; }
.liste-activites li { padding: 0.9rem 0; border-bottom: 1px solid var(--roche); }
.liste-activites li:first-child { border-top: 1px solid var(--roche); }
.liste-activites a { font-size: 1.3rem; font-weight: 700; color: var(--epicea); }
.liste-activites p { margin: 0.15rem 0 0; color: var(--muted); }

/* --- Grille d'activités à la carte ---------------------------------------- */
.grille-activites {
  display: grid;
  gap: 1.5rem;
  grid-template-columns: 1fr;
}
@media (min-width: 48rem) {
  .grille-activites { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 72rem) {
  .grille-activites { grid-template-columns: repeat(3, 1fr); }
}

.carte-activite {
  position: relative;
  aspect-ratio: 16 / 10;
  border-radius: 14px;
  overflow: hidden;
  background: var(--ardoise) center / cover no-repeat;
  box-shadow: 0 12px 32px -12px rgba(38, 45, 49, 0.22);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.carte-activite:hover { transform: translateY(-3px); box-shadow: 0 18px 40px -14px rgba(38, 45, 49, 0.35); }
.carte-activite__overlay {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(var(--voile),0) 30%, rgba(var(--voile),0.35) 60%, rgba(var(--voile),0.72) 100%);
  z-index: 1;
}
.carte-activite__lien {
  position: absolute; inset: 0; z-index: 2;
  display: flex; flex-direction: column; justify-content: flex-end;
  padding: 1.5rem; text-decoration: none; color: var(--craie);
  transition: background 0.1s, color 0.1s;
}
.carte-activite__titre {
  font-size: 1.55rem; font-weight: 600; line-height: 1.2;
  margin: 0 0 0.25rem; text-shadow: 0 2px 8px rgba(0,0,0,0.4);
}
.carte-activite__resume {
  font-size: 1rem; opacity: 0.85; margin: 0 0 0.75rem;
  text-shadow: 0 1px 4px rgba(0,0,0,0.4);
}
.carte-activite__cta {
  display: inline-block; font-family: var(--police-affiche); font-size: 0.95rem; font-weight: 500;
  letter-spacing: 0.06em; text-transform: uppercase;
  padding: 0.35rem 0.9rem; border: 2px solid var(--craie); border-radius: 999px;
  color: var(--craie); background: transparent;
  transition: background 0.1s, color 0.1s;
}
.carte-activite__lien:hover .carte-activite__cta {
  background: var(--craie); color: var(--epicea);
}
a.carte-activite__lien:hover {
  color: var(--roche);
}

.deux-colonnes { display: grid; gap: 2rem; }
@media (min-width: 48rem) { .deux-colonnes { grid-template-columns: 1fr 24rem; align-items: start; } }

/* --- Formulaires ---------------------------------------------------------- */
.formulaire { max-width: 36rem; }
.champ { margin-bottom: 1.3rem; }
.champ label { display: block; margin-bottom: 0.3rem; font-family: var(--police-ui); font-size: 0.95rem; font-weight: 600; }
input[type="text"], input[type="email"], input[type="tel"], input[type="number"], select, textarea {
  width: 100%; padding: 0.65rem 0.75rem; border: 1px solid var(--roche); border-radius: var(--rayon);
  background: var(--blanc); color: var(--epicea); font-family: var(--police-ui); font-size: 1rem;
}
input[type="text"]:focus, input[type="email"]:focus, input[type="tel"]:focus, input[type="number"]:focus, select:focus, textarea:focus {
  border-color: var(--meleze); outline: none;
  box-shadow: 0 0 0 3px rgba(200, 148, 60, 0.15);
}
textarea { resize: vertical; }
.champ__case { display: flex; align-items: flex-start; gap: 0.65rem; }
.champ__case label { margin: 0; font-weight: 400; }
input[type="checkbox"] { flex: none; width: 1.25rem; height: 1.25rem; margin: 0.15rem 0 0; accent-color: var(--meleze); }
.aide { margin: 0.3rem 0 0; font-family: var(--police-ui); font-size: 0.9rem; color: var(--muted); }
.erreur { margin: 0.35rem 0 0; font-family: var(--police-ui); font-size: 0.9rem; font-weight: 600; color: var(--complet-texte); }
.erreurs-form {
  margin-bottom: 1.5rem; padding: 0.75rem 1rem; border-left: 4px solid var(--complet-texte);
  background: var(--complet-fond); color: var(--complet-texte); font-family: var(--police-ui); font-size: 0.95rem;
}
.erreurs-form ul { margin: 0; padding: 0; list-style: none; }
.sr-only, .hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.resume-sortie { margin-bottom: 2rem; padding: 1rem 1.25rem; }
.resume-sortie p { margin: 0; }
.resume-sortie .titre { font-size: 1.3rem; font-weight: 700; color: var(--epicea); }

.personnes { margin: 0 0 1.3rem; padding: 0; border: 0; }
.personnes > legend { padding: 0; font-family: var(--police-ui); font-weight: 600; }
.personne { margin: 0.75rem 0; padding: 1rem 1.25rem; }
.personne[hidden] { display: none; }
.personne__entete { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; margin-bottom: 0.6rem; font-family: var(--police-ui); font-weight: 600; }
.personne__retirer { padding: 0; background: none; border: 0; color: var(--muted); font: inherit; font-size: 0.9rem; font-weight: 400; text-decoration: underline; cursor: pointer; }
.personne__noms { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(11rem, 100%), 1fr)); gap: 0 1rem; }
.personne .champ:last-child { margin-bottom: 0; }
.personnes__pied { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 0.6rem 1rem; font-family: var(--police-ui); }
.personnes__total { margin: 0; }
.formulaire-inline { display: flex; flex-wrap: wrap; gap: 0.6rem; align-items: stretch; max-width: 36rem; }
.formulaire-inline .bouton { display: inline-flex; align-items: center; }
.formulaire-inline input[type="email"] { flex: 1 1 14rem; width: auto; }

/* --- Pied de page --------------------------------------------------------- */
.pied { margin-top: 4rem; padding-block: 3rem; background: var(--lin); border-top: 1px solid var(--roche); font-size: 0.9rem; }
.pied__grille { display: grid; gap: 1.75rem; }
@media (min-width: 42rem) { .pied__grille { grid-template-columns: 1.4fr 1fr 1fr; } }
.pied h2 { font-family: var(--police-ui); margin: 0 0 0.5rem; font-size: 1.1rem; color: var(--epicea); }
.pied ul { list-style: none; margin: 0; padding: 0; }
.pied li { margin-bottom: 0.3rem; }
.pied a { color: var(--meleze-fonce); }
.pied p { margin: 0 0 0.3rem; color: var(--muted); }

/* --- Messages (confirmations, erreurs) ------------------------------------ */
.messages { margin-top: 1.25rem; }
.message {
  margin: 0 0 0.5rem; padding: 0.75rem 1rem; border-left: 4px solid var(--roche); background: var(--blanc);
  font-family: var(--police-ui); font-size: 0.95rem; color: var(--epicea);
}
.message--success { border-left-color: var(--ok-texte); background: var(--ok-fond); color: var(--ok-texte); }
.message--error { border-left-color: var(--complet-texte); background: var(--complet-fond); color: var(--complet-texte); }

/* --- Cases à cocher multiples ---------------------------------------------- */
.choix-multiples { margin: 0; padding: 0; border: 0; min-width: 0; }
.choix-multiples legend { padding: 0; margin-bottom: 0.3rem; font-family: var(--police-ui); font-size: 0.95rem; font-weight: 600; }
.choix-multiples label { display: flex; align-items: flex-start; gap: 0.6rem; margin: 0 0 0.35rem; font-weight: 400; }

/* --- Espace personnel ----------------------------------------------------- */
.bloc-paiement { max-width: 40rem; margin: 1.25rem 0; padding: 1rem 1.25rem; }
.bloc-paiement p { margin: 0 0 0.4rem; }
.bloc-paiement pre { margin: 0.5rem 0 0; font-family: var(--police-ui); font-size: 0.95rem; white-space: pre-wrap; }
.espace-entete { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem 1rem; margin: 0.75rem 0 1rem; }
.espace-entete .etat { margin: 0; }
.espace-section { margin-top: 2.75rem; }
.espace-section > h2 { margin: 0 0 0.9rem; }
.espace-section .infos-cartes { margin: 0; }
.espace-section .itineraire:last-child { margin-bottom: 0; }
.info-carte__ligne { margin: 0 0 0.35rem; }
.info-carte__acces { margin-top: 0.6rem; font-size: 0.95em; }
.info-carte__acces > :last-child { margin-bottom: 0; }
.personne__reponses { margin: 0; }
.personne__reponses dt { margin-top: 0.5rem; font-family: var(--police-ui); font-size: 0.85rem; color: var(--muted); }
.personne__reponses dd { margin: 0; }
.espace-groupe { margin-top: 1.5rem; }
.resume-inscription { margin: 1.5rem 0; }
.zone-annulation { max-width: 40rem; margin-top: 2.5rem; padding-top: 1.25rem; border-top: 1px solid var(--roche); }
.bouton--danger { background: var(--complet-texte); border-color: var(--complet-texte); color: var(--blanc); }
.bouton--danger:hover { background: #5c1229; border-color: #5c1229; }
.bouton--sombre {
  background: var(--ardoise); border-color: var(--craie); color: var(--craie) !important;
}
.bouton--sombre:hover {
  background: var(--ardoise); border-color: var(--meleze); color: var(--meleze) !important;
}


/* --- Cartes avec ombre ---------------------------------------------------- */
.carte { background: var(--lin); border-radius: var(--rayon); }

/* --- Visuels plein format ------------------------------------------------- */
.visuel-plein {
  border-radius: 12px;
  overflow: hidden;
}

/* --- Défilé de photos « Sur mesure » ------------------------------------- */
.defile {
  position: relative; overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
.defile__piste {
  display: flex; gap: 1rem; width: max-content; margin: 0; padding: 0; list-style: none;
  animation: defiler calc(var(--nb, 6) * 7s) linear infinite;
}
.defile:hover .defile__piste,
.defile:focus-within .defile__piste,
.defile.est-en-pause .defile__piste { animation-play-state: paused; }
.defile__photo { flex: none; }
.defile__photo img {
  display: block; height: clamp(11rem, 22vw, 16rem); width: auto; aspect-ratio: 4 / 3; object-fit: cover;
  border-radius: var(--rayon-grand);
}
.defile__photo:nth-child(even) img { aspect-ratio: 3 / 4; }
@keyframes defiler { to { transform: translateX(calc(-50% - 0.5rem)); } }
.defile__pause {
  position: absolute; right: max(1rem, 6%); bottom: 0.75rem; z-index: 1;
  display: grid; place-items: center; width: 2.2rem; height: 2.2rem; padding: 0;
  border: 0; border-radius: 999px; cursor: pointer;
  background: rgba(253, 252, 250, 0.88); color: var(--epicea);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.15);
}
.defile__pause path { fill: currentColor; }
.defile__pause .icone-lecture,
.defile.est-en-pause .defile__pause .icone-pause { display: none; }
.defile.est-en-pause .defile__pause .icone-lecture { display: inline; }
@media (prefers-reduced-motion: reduce) {
  .defile { overflow-x: auto; -webkit-mask-image: none; mask-image: none; }
  .defile__piste { animation: none; padding-inline: 1.25rem; }
  .defile__photo--copie, .defile__pause { display: none; }
}

/* --- Diaporama d'une activité --------------------------------------------- */
.diaporama { margin: 2.5rem 0; }
.diaporama__piste {
  display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth;
  border-radius: var(--rayon-grand); background: var(--lin);
  scrollbar-width: none;
}
.diaporama__piste::-webkit-scrollbar { display: none; }
.diaporama__piste:focus-visible { outline-offset: 4px; }
.diaporama__vue { position: relative; flex: 0 0 100%; margin: 0; scroll-snap-align: start; }
.diaporama__vue img {
  display: block; width: 100%; aspect-ratio: 3 / 2; max-height: 34rem; object-fit: cover;
}
.diaporama__vue figcaption {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 2.5rem 1.25rem 0.9rem;
  background: linear-gradient(180deg, transparent, rgba(var(--voile), 0.65));
  color: var(--blanc); font-family: var(--police-ui); font-size: 0.92rem;
}
.diaporama__commandes { display: flex; align-items: center; justify-content: center; gap: 1rem; margin-top: 0.9rem; }
.diaporama__fleche {
  display: grid; place-items: center; width: 2.5rem; height: 2.5rem; padding: 0;
  border: 0; border-radius: var(--rayon); background: none; color: var(--epicea); cursor: pointer;
  transition: border-color 0.15s, color 0.15s;
}
.diaporama__fleche:hover { color: var(--meleze-fonce); background: var(--lin); }
.diaporama__points { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.15rem; }
.diaporama__points button {
  width: 1.5rem; height: 1.5rem; padding: 0; border: 0; background: none; cursor: pointer; position: relative;
}
.diaporama__points button::after {
  content: ""; position: absolute; inset: 0; margin: auto; width: 0.5rem; height: 0.5rem;
  border-radius: 999px; background: var(--roche); transition: background-color 0.2s, width 0.2s;
}
.diaporama__points button[aria-current="true"]::after { background: var(--epicea); }

/* --- Admin overrides (pour admin Django) ---------------------------------- */
@media screen {
  .dark-mode .hero { background-color: var(--craie); }
}
/* --- Photos agrandissables et visionneuse -------------------------------- */
.zoomable {
  display: block; width: 100%; margin: 0; padding: 0; border: 0; background: none;
  font: inherit; color: inherit; cursor: zoom-in;
}
.defile__photo .zoomable { width: auto; border-radius: var(--rayon-grand); overflow: hidden; }
.defile.est-en-zoom .defile__piste { animation-play-state: paused; }

.visionneuse {
  width: 100vw; height: 100vh; max-width: none; max-height: none; margin: 0; padding: 0;
  border: 0; background: transparent; color: var(--blanc);
}
.visionneuse::backdrop { background: rgba(var(--voile), 0.92); }
.visionneuse[open] { display: grid; place-items: center; animation: apparaitre 0.2s ease; }
.visionneuse__cadre {
  display: grid; place-items: center; gap: 0.75rem;
  width: 100%; height: 100%; margin: 0; padding: 4.5rem 4.5rem 2.5rem;
}
.visionneuse__cadre img {
  max-width: 100%; max-height: calc(100vh - 9rem); width: auto; height: auto;
  object-fit: contain; border-radius: var(--rayon); box-shadow: 0 20px 60px rgba(0, 0, 0, 0.45);
}
.visionneuse__cadre figcaption { font-family: var(--police-ui); font-size: 0.95rem; text-align: center; opacity: 0.9; }
.visionneuse__bouton {
  position: fixed; display: grid; place-items: center; width: 2.75rem; height: 2.75rem; padding: 0;
  border: 1px solid rgba(253, 252, 250, 0.35); border-radius: 999px; cursor: pointer;
  background: rgba(253, 252, 250, 0.12); color: var(--blanc);
  transition: background-color 0.15s, color 0.15s;
}
.visionneuse__bouton:hover { background: var(--blanc); color: var(--epicea); }
.visionneuse__bouton[hidden] { display: none; }
.visionneuse__fermer { top: 1rem; right: 1rem; }
.visionneuse__prec { left: 1rem; top: 50%; transform: translateY(-50%); }
.visionneuse__suiv { right: 1rem; top: 50%; transform: translateY(-50%); }
@media (max-width: 40rem) {
  .visionneuse__cadre { padding: 4rem 0.75rem 5rem; }
  .visionneuse__prec, .visionneuse__suiv { top: auto; bottom: 1rem; transform: none; }
  .visionneuse__prec { left: calc(50% - 3.25rem); }
  .visionneuse__suiv { right: calc(50% - 3.25rem); }
}
html.visionneuse-ouverte { overflow: hidden; }
@keyframes apparaitre { from { opacity: 0; } }

/* --- Page des sorties : introduction et archives ------------------------- */
.intro-page { margin: -0.25rem 0 2.25rem; color: var(--epicea); }
.lien-archives { margin-top: 2.5rem; font-family: var(--police-ui); font-size: 0.95rem; }
.agenda-archives .sortie__titre,
.agenda-archives .sortie__jour { color: var(--muted); }
.agenda-archives .sortie__lien:hover .sortie__titre { color: var(--epicea); }

/* --- Tirage façon affiche ancienne sur toutes les photos --------------------
   1. contraste un peu relevé ;
   2. calque « éclaircir » bleu nuit : les ombres deviennent bleues, comme les
      aplats d'une affiche ;
   3. calque « produit » crème + grain + vignettage : les blancs prennent la
      teinte du papier ;
   4. bord découpé irrégulier (masque).                                         */
.hero--photo .hero__overlay,
.carte-activite__overlay {
  -webkit-backdrop-filter: var(--affiche-contraste); backdrop-filter: var(--affiche-contraste);
}
.zoomable img, .photo-cadre img, .visionneuse__cadre img { filter: var(--affiche-contraste); }

.hero--photo::before, .carte-activite::before,
.zoomable::before, .photo-cadre::before {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: var(--affiche-ombres); mix-blend-mode: lighten; opacity: 0.85;
}
.hero--photo::after, .carte-activite::after,
.zoomable::after, .photo-cadre::after {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background-color: var(--affiche-lumieres);
  background-image: var(--grain), radial-gradient(ellipse at center, transparent 60%, rgba(60, 40, 20, 0.25) 100%);
  background-size: 220px 220px, 100% 100%;
  background-blend-mode: soft-light, multiply;
  mix-blend-mode: multiply;
}
.hero--photo > .conteneur { z-index: 2; }
.carte-activite__lien { z-index: 3; }
.zoomable, .photo-cadre { position: relative; }
.photo-cadre { display: block; overflow: hidden; }
.photo-cadre img { display: block; width: 100%; }
.diaporama__vue figcaption { z-index: 2; }

/* Bords irréguliers */
/* L'en-tête photo ne touche plus les bords : une marge de papier tout autour, comme une affiche posée. */
.hero--photo {
  margin: clamp(0.6rem, 1.6vw, 1.25rem) clamp(0.6rem, 1.6vw, 1.25rem) 0;
  border-bottom: 0;
  -webkit-mask: var(--bord-hero) 0 0 / 100% 100% no-repeat; mask: var(--bord-hero) 0 0 / 100% 100% no-repeat;
}
.carte-activite, .defile__photo .zoomable, .diaporama__vue, .photo-cadre {
  border-radius: 0;
  -webkit-mask: var(--bord-a) 0 0 / 100% 100% no-repeat; mask: var(--bord-a) 0 0 / 100% 100% no-repeat;
}
.defile__photo:nth-child(3n+2) .zoomable, .grille-activites > :nth-child(3n+2) .carte-activite, .diaporama__vue:nth-child(3n+2) {
  -webkit-mask-image: var(--bord-b); mask-image: var(--bord-b);
}
.defile__photo:nth-child(3n) .zoomable, .grille-activites > :nth-child(3n) .carte-activite, .diaporama__vue:nth-child(3n) {
  -webkit-mask-image: var(--bord-c); mask-image: var(--bord-c);
}
.diaporama__piste { border-radius: 0; background: none; }
.defile__photo .zoomable img { border-radius: 0; }

/* Les cartes « Sur mesure » gardent leur ombre et leur soulèvement :
   portés par le cadre, l'ombre suit le bord découpé. */
.carte-activite-cadre {
  filter: drop-shadow(0 10px 14px rgba(38, 45, 49, 0.2));
  transition: transform 0.25s ease, filter 0.25s ease;
}
.carte-activite-cadre:hover { transform: translateY(-3px); filter: drop-shadow(0 16px 20px rgba(38, 45, 49, 0.28)); }
.carte-activite-cadre .carte-activite { box-shadow: none; transform: none; }

/* Titres des en-têtes (accueil, activités, sorties) en capitales condensées, comme une affiche. */
.hero .hero__titre-principal {
  font-family: var(--police-affiche); font-weight: 500; text-transform: uppercase;
  letter-spacing: 0.04em; line-height: 1.05;
  font-size: clamp(2.2rem, 6vw, 3.9rem); text-wrap: balance;
}
.hero--grand .hero__titre-principal { font-size: clamp(2.8rem, 9vw, 5.2rem); line-height: 1; margin-bottom: 0; }
.hero--grand .hero__titre { margin-top: 0.1rem; line-height: 1.25; }

/* --- Le prix : un bandeau d'affiche ------------------------------------------
   Bleu nuit, texte crème, prix en grandes capitales condensées, bord irrégulier
   comme les photos. Les autres fiches (inclus, non inclus) restent sur le papier. */
.info-carte:has(> .info-carte__prix) {
  background: var(--affiche-ombres); color: var(--affiche-lumieres);
  border-top: 0; border-radius: 0; padding: 1.2rem 1.4rem 1.3rem;
  -webkit-mask: var(--bord-c) 0 0 / 100% 100% no-repeat; mask: var(--bord-c) 0 0 / 100% 100% no-repeat;
}
.info-carte:has(> .info-carte__prix) .info-carte__prix {
  font-family: var(--police-affiche); font-size: 2.2rem; font-weight: 500; line-height: 1;
  letter-spacing: 0.03em; text-transform: uppercase; color: var(--affiche-lumieres);
}
.info-carte:has(> .info-carte__prix) .info-carte__prix small {
  display: block; margin-top: 0.35rem; font-family: var(--police-hero); font-style: italic;
  font-size: 1rem; font-weight: 400; letter-spacing: 0; text-transform: none; color: rgba(255, 240, 212, 0.8);
}
.info-carte:has(> .info-carte__prix) .info-carte__detail { color: rgba(255, 240, 212, 0.85); }
.info-carte h3 {
  font-family: var(--police-affiche); font-size: 0.82rem; font-weight: 500;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted);
}

/* --- Page Contact ------------------------------------------------------------
   À gauche l'introduction et les coordonnées (icône + petit libellé), à droite
   le formulaire sur une fiche papier, champs groupés deux par deux.            */
.contact { display: grid; gap: 2rem 3.5rem; align-items: start; }
@media (min-width: 56rem) { .contact { grid-template-columns: minmax(0, 20rem) minmax(0, 1fr); } }
.coordonnees { list-style: none; margin: 1.75rem 0 0; padding: 0; }
.coordonnees li {
  display: flex; align-items: flex-start; gap: 0.85rem;
  padding: 0.85rem 0; border-top: 1px solid var(--roche);
}
.coordonnees li:last-child { border-bottom: 1px solid var(--roche); }
.coordonnees__icone { flex: none; margin-top: 0.2rem; color: var(--meleze-fonce); }
.coordonnees__libelle {
  display: block; font-family: var(--police-ui); font-size: 0.82rem; color: var(--muted);
}
.coordonnees a {
  font-family: var(--police-ui); font-size: 1.05rem; font-weight: 600; color: var(--epicea);
  text-decoration: none; overflow-wrap: anywhere;
}
.coordonnees a:hover { color: var(--meleze-fonce); text-decoration: underline; }

.formulaire--contact {
  max-width: none; padding: clamp(1.25rem, 3vw, 2rem);
  background: var(--lin); border-radius: var(--rayon);
}
@media (min-width: 40rem) {
  .formulaire--contact { display: grid; grid-template-columns: 1fr 1fr; column-gap: 1.25rem; }
  .formulaire--contact > * { grid-column: 1 / -1; }
  .formulaire--contact .champ--nom { grid-column: 1; order: 1; }
  .formulaire--contact .champ--email { grid-column: 2; order: 2; }
  .formulaire--contact .champ--telephone { grid-column: 1; order: 3; }
  .formulaire--contact .champ--nb_personnes { grid-column: 2; order: 4; }
  .formulaire--contact .champ--activite { grid-column: 1; order: 5; }
  .formulaire--contact .champ--dates_souhaitees { grid-column: 2; order: 6; }
  .formulaire--contact .champ--message { order: 7; }
  .formulaire--contact > .bouton { order: 8; justify-self: start; }
}
.formulaire--contact .champ label { font-size: 0.9rem; }
.formulaire--contact input[type="text"], .formulaire--contact input[type="email"],
.formulaire--contact input[type="number"], .formulaire--contact select, .formulaire--contact textarea {
  background: var(--blanc); border-color: transparent; box-shadow: inset 0 0 0 1px rgba(38, 45, 49, 0.12);
}
.formulaire--contact input:focus, .formulaire--contact select:focus, .formulaire--contact textarea:focus {
  box-shadow: inset 0 0 0 1px var(--meleze), 0 0 0 3px rgba(185, 132, 59, 0.18);
}

/* --- Sélecteur avec recherche (select[data-joli]) ------------------------- */
.selecteur { position: relative; }
.selecteur__natif {
  position: absolute !important; width: 1px !important; height: 1px !important;
  opacity: 0; pointer-events: none; overflow: hidden;
}
.selecteur__bouton {
  display: flex; align-items: center; justify-content: space-between; gap: 0.75rem;
  width: 100%; padding: 0.65rem 0.75rem; text-align: left; cursor: pointer;
  background: var(--blanc); border: 1px solid var(--roche); border-radius: var(--rayon);
  font-family: var(--police-ui); font-size: 1rem; color: var(--epicea);
}
.formulaire--contact .selecteur__bouton { border-color: transparent; box-shadow: inset 0 0 0 1px rgba(38, 45, 49, 0.12); }
.selecteur__bouton:focus-visible, .selecteur.est-ouvert .selecteur__bouton {
  outline: none; box-shadow: inset 0 0 0 1px var(--meleze), 0 0 0 3px rgba(185, 132, 59, 0.18);
}
.selecteur__valeur { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.selecteur__valeur--vide { color: var(--muted); }
.selecteur__chevron { flex: none; color: var(--muted); transition: transform 0.15s; }
.selecteur.est-ouvert .selecteur__chevron { transform: rotate(180deg); }
.selecteur__panneau {
  position: absolute; z-index: 30; left: 0; right: 0; top: calc(100% + 0.35rem);
  padding: 0.5rem; background: var(--blanc); border-radius: var(--rayon);
  box-shadow: 0 0 0 1px rgba(38, 45, 49, 0.1), 0 14px 32px -12px rgba(38, 45, 49, 0.35);
}
.selecteur__recherche {
  width: 100%; margin-bottom: 0.4rem; padding: 0.5rem 0.65rem 0.5rem 2rem;
  border: 0; border-radius: var(--rayon); background: var(--craie) no-repeat 0.6rem center / 0.95rem
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Ccircle cx='7' cy='7' r='4.6' fill='none' stroke='%23646b6d' stroke-width='1.5'/%3E%3Cpath d='m10.4 10.4 3.4 3.4' stroke='%23646b6d' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E");
  font-family: var(--police-ui); font-size: 0.95rem; color: var(--epicea);
}
.selecteur__recherche:focus, .selecteur__recherche:focus-visible { outline: none; box-shadow: inset 0 0 0 1px var(--roche); }
.selecteur__recherche::-webkit-search-cancel-button { cursor: pointer; }
.selecteur__liste { list-style: none; margin: 0; padding: 0; max-height: 15rem; overflow-y: auto; }
.selecteur__option {
  position: relative; padding: 0.5rem 0.75rem 0.5rem 2rem; border-radius: var(--rayon); cursor: pointer;
  font-family: var(--police-ui); font-size: 0.95rem; line-height: 1.35; color: var(--epicea);
}
.selecteur__option--vide { color: var(--muted); font-style: italic; }
.selecteur__option.est-active { background: var(--lin); }
.selecteur__option[aria-selected="true"] { font-weight: 600; }
.selecteur__option[aria-selected="true"]::before {
  content: ""; position: absolute; left: 0.75rem; top: 50%; width: 0.7rem; height: 0.4rem; margin-top: -0.3rem;
  border-left: 2px solid var(--meleze-fonce); border-bottom: 2px solid var(--meleze-fonce); transform: rotate(-45deg);
}
.selecteur__vide { margin: 0.4rem 0.75rem; font-family: var(--police-ui); font-size: 0.9rem; color: var(--muted); }