/* The Cabane Club : DA des slides La Rosière et du logo.
   Crème neige, encre bois brûlé, serif avec italique en accent, étiquettes en mono, petites annotations en serif italique braise (plus de police marqueur, retour d'Augustin du 28/10). */

:root {
  --creme: #f1ebdf;
  --creme-2: #e6dfd0;
  --encre: #1f2a22;
  --encre-douce: #5e6e64;
  --braise: #3d7a4c; /* accent devenu vert herbe (DA verte du 29/10) */
  --sapin: #1f4330;
  --sauge: #e7ede2;
  --ciel: #eef0f1;
  --foret: #16261d;
  --jaune: #f4d23c;
  --papier: #fbfaf4;
  --nuit: #14161a;
  --trait: rgba(31, 42, 34, 0.16);

  --serif: "Fraunces", Georgia, serif;
  --sans: "Inter Tight", system-ui, sans-serif;
  --mono: "DM Mono", ui-monospace, monospace;

  --marge: clamp(16px, 5vw, 56px);
  --max: 1200px;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--creme);
  color: var(--encre);
  font: 400 16px/1.55 var(--sans);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
/* Grain léger sur toute la page */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 100;
  opacity: 0.22;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .23 0 0 0 0 .16 0 0 0 0 .12 0 0 0 .55 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}

a { color: inherit; }
img { max-width: 100%; display: block; }
h1, h2, h3 { font-family: var(--serif); font-weight: 400; letter-spacing: -0.01em; margin: 0; }
.hero h1, .fiche-titre h1, .titre-section h2, .texte-legal h1 { font-variation-settings: "opsz" 144; letter-spacing: -0.02em; }
h1 em, h2 em, h3 em, .gros em, .hero-sous em { font-style: italic; color: var(--sapin); }
p { margin: 0; }

.mono {
  font: 500 12px/1.4 var(--mono);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--encre-douce);
}
.discret { opacity: 0.7; }
.gros { font: 300 clamp(22px, 3.2vw, 34px)/1.3 var(--serif); letter-spacing: -0.01em; }

.annotation {
  font: italic 400 clamp(18px, 2vw, 22px)/1.2 var(--serif);
  color: var(--braise);
  display: inline-block;
}
.annotation.petite { font-size: 17px; }

/* Wordmark : comme le logo, « the » et « club » en serif italique étroite, « Cabane » en grotesque gras */
.marque {
  text-decoration: none;
  display: inline-flex;
  align-items: baseline;
  gap: 0.12em;
  font-size: 22px;
  line-height: 1;
  white-space: nowrap;
}
.marque i { font: italic 400 1.15em/1 "Instrument Serif", serif; }
.marque b { font: 800 1em/1 "Archivo", sans-serif; font-variation-settings: "wdth" 112; letter-spacing: -0.04em; }
.marque.grande { font-size: clamp(34px, 7vw, 64px); }

/* Boutons */
.bouton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 52px;
  padding: 0 26px;
  border: 0;
  border-radius: 999px;
  background: var(--encre);
  color: var(--creme);
  font: 600 16px/1 var(--sans);
  text-decoration: none;
  cursor: pointer;
  transition: transform 0.15s ease, background 0.2s ease;
}
.bouton:hover { background: var(--braise); }
.bouton:active { transform: scale(0.97); }
.bouton:disabled { opacity: 0.5; cursor: wait; }
.bouton.petit { min-height: 38px; padding: 0 18px; font-size: 14px; }
.lien-fleche {
  font: 600 16px/1 var(--sans);
  text-decoration: none;
  border-bottom: 1px dashed currentColor;
  padding-bottom: 4px;
}
.lien-fleche::after { content: " →"; }

/* En-tête */
.entete {
  position: sticky;
  top: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px var(--marge);
  background: color-mix(in srgb, var(--creme) 88%, transparent);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.entete nav { display: flex; align-items: center; gap: 22px; font-weight: 500; font-size: 15px; }
.entete nav a:not(.bouton) { text-decoration: none; }
@media (max-width: 520px) {
  .entete nav a:not(.bouton) { display: none; }
}

main > section { padding: clamp(56px, 9vw, 120px) var(--marge); max-width: var(--max); margin: 0 auto; }

/* Hero */
.hero h1 em { color: var(--braise); }
.hero { text-align: center; padding-top: clamp(48px, 10vw, 120px) !important; padding-bottom: clamp(32px, 5vw, 56px) !important; }
.hero h1 { font-size: clamp(42px, 8vw, 116px); line-height: 0.98; margin: 18px auto 0; }
.hero-sous { font: 300 clamp(18px, 2.2vw, 22px)/1.45 var(--serif); max-width: 42ch; margin: 22px auto 0; text-wrap: balance; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 18px 28px; justify-content: center; align-items: center; margin-top: 34px; }
.hero-court h1 { max-width: none; }
.insecable { white-space: nowrap; }
/* Une .ligne = une ligne, partout (consigne d'Augustin : le nombre de lignes compte).
   Si elle ne tient pas, le script d'ajustement réduit la taille du bloc, et de tout son groupe. */
.ligne { display: block; white-space: nowrap; }
.etapes li b.ligne { font-weight: 500; }

/* Film : fausse caméra */
.film { padding-top: 0 !important; position: relative; }
.camera { position: relative; border-radius: 6px; overflow: hidden; aspect-ratio: 16 / 9; background: var(--nuit); }
.camera img, .camera video { width: 100%; height: 100%; object-fit: cover; display: block; }
.camera [hidden] { display: none; }
.camera-ui { position: absolute; inset: 0; pointer-events: none; color: #fff; }
.camera-ui::before {
  content: "";
  position: absolute;
  inset: 14px;
  background:
    linear-gradient(#fff, #fff) top left / 22px 2px no-repeat, linear-gradient(#fff, #fff) top left / 2px 22px no-repeat,
    linear-gradient(#fff, #fff) top right / 22px 2px no-repeat, linear-gradient(#fff, #fff) top right / 2px 22px no-repeat,
    linear-gradient(#fff, #fff) bottom left / 22px 2px no-repeat, linear-gradient(#fff, #fff) bottom left / 2px 22px no-repeat,
    linear-gradient(#fff, #fff) bottom right / 22px 2px no-repeat, linear-gradient(#fff, #fff) bottom right / 2px 22px no-repeat;
  opacity: 0.85;
}
.camera-ui .mono { color: #fff; position: absolute; text-shadow: 0 1px 6px rgba(0, 0, 0, 0.4); }
.rec { position: absolute; top: 24px; left: 30px; font: 600 12px/1 var(--mono); letter-spacing: 0.1em; display: flex; align-items: center; gap: 8px; }
.rec::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: var(--braise); animation: clignote 1.2s steps(2) infinite; }
.tc { top: 24px; right: 30px; }
.coin { bottom: 24px; left: 30px; }
.coin-bas { bottom: 24px; right: 30px; }
@keyframes clignote { 50% { opacity: 0; } }
/* Vignettes 16:9 sous le film : on fait défiler, on clique, ça passe dans la caméra */
.plans { list-style: none; margin: 14px 0 0; padding: 0 0 6px; display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - 3 * 14px) / 4.3); gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
.plans::-webkit-scrollbar { display: none; }
.plans li { scroll-snap-align: start; }
.plan { all: unset; cursor: pointer; display: block; width: 100%; }
.plan img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 5px; outline: 3px solid transparent; outline-offset: -3px; transition: outline-color 0.2s ease, opacity 0.2s ease; opacity: 0.75; }
.plan:hover img, .plan:focus-visible img { opacity: 1; }
.plan.actif img { opacity: 1; outline-color: var(--braise); }
.plan .mono { display: block; margin-top: 10px; font-size: 11px; }
.plan.est-video .mono::before { content: "▶ "; color: var(--braise); }
@media (max-width: 600px) {
  .coin, .coin-bas { display: none; }
  .rec { left: 24px; } .tc { right: 24px; }
  .plans { grid-auto-columns: 46%; margin-right: calc(-1 * var(--marge)); padding-right: var(--marge); }
  .plans::after { content: ""; width: 1px; }
}

/* Problème */
.probleme { max-width: 860px !important; }
.probleme blockquote { margin: 22px 0 28px; font: 300 clamp(36px, 6vw, 72px)/1.05 var(--serif); color: var(--encre); }
.probleme blockquote em { color: var(--braise); }
.probleme .gros + .gros { margin-top: 22px; }
.probleme + .regles { padding-top: 0; }

/* Règles de la Cabane */
.regles ol { margin-bottom: 0; }
.etapes.regles li::before { content: "Règle 0" counter(e); }

/* Engagements */
.engagements ol { list-style: none; padding: 0; margin: 28px 0 0; display: grid; gap: 0; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--trait); }
.engagements li { padding: 28px 28px 8px 0; }
.engagements li + li { padding-left: 28px; border-left: 1px solid var(--trait); }
.engagements .num { display: block; margin-bottom: 18px; color: var(--braise); }
.engagements h3 { font-size: clamp(26px, 2.5vw, 32px); margin-bottom: 12px; }
@media (min-width: 801px) { .engagements h3 { white-space: nowrap; } }
.engagements p { color: var(--encre-douce); max-width: 34ch; }
@media (max-width: 800px) {
  .engagements ol { grid-template-columns: 1fr; }
  .engagements li, .engagements li + li { padding: 26px 0; border-left: 0; border-bottom: 1px solid var(--trait); }
}

/* Expériences */
.titre-section { margin-bottom: 30px; }
.titre-section h2 { font-size: clamp(34px, 5vw, 60px); line-height: 1.02; margin-top: 12px; max-width: 18ch; }
.grille-avenir { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 22px; }
.carte-avenir { text-decoration: none; background: var(--creme-2); border-radius: 6px; overflow: hidden; display: flex; flex-direction: column; transition: transform 0.25s ease; }
.carte-avenir:hover { transform: translateY(-4px); }
.carte-avenir .carte-photo { aspect-ratio: 4 / 3; }
.carte-avenir.complet .carte-photo { filter: grayscale(0.2); }
.carte-texte { padding: 22px 22px 26px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.carte-texte h3 { font-size: 34px; }
.carte-texte p:not(.mono) { color: var(--encre-douce); }
.carte-texte .lien-fleche { margin-top: auto; align-self: flex-start; }

.carte-photo {
  position: relative;
  background: var(--sapin) center / cover no-repeat;
}
.carte-photo:not([style]) { background: radial-gradient(120% 90% at 30% 20%, #c97b4f, #7a3e26 55%, var(--encre)); }
.carte-photo::before { content: ""; position: absolute; inset: 0; background: linear-gradient(rgba(20, 22, 26, 0.45), transparent 45%); }
.carte-photo .etiquette { position: absolute; top: 14px; left: 14px; color: #fff; text-shadow: 0 1px 8px rgba(0, 0, 0, 0.45); }
.tampon {
  position: absolute;
  right: 14px;
  bottom: 14px;
  font: 600 13px/1 var(--mono);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--creme);
  background: var(--braise);
  padding: 9px 12px;
  border-radius: 3px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.2);
}
.tampon.grand { font-size: 15px; padding: 11px 15px; right: 24px; bottom: 24px; }

.grille-passee { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.carte-passee { margin: 0; }
.carte-passee .carte-photo { aspect-ratio: 4 / 5; border-radius: 4px; overflow: hidden; }
.carte-passee .compte {
  position: absolute;
  left: 14px;
  top: 34px;
  font: 300 clamp(48px, 7vw, 84px)/1 var(--serif);
  color: #fff;
  text-shadow: 0 2px 18px rgba(0, 0, 0, 0.35);
}
.carte-passee .compte::after { content: " personnes"; font: 500 11px/1 var(--mono); letter-spacing: 0.06em; text-transform: uppercase; vertical-align: middle; }
.carte-passee figcaption { margin-top: 12px; font: 300 18px/1.35 var(--serif); }
.carte-passee figcaption b { font-weight: 500; }
@media (max-width: 760px) {
  /* Carrousel pleine largeur : la marge est gardée au début, au bout, et à chaque arrêt du défilement */
  .grille-passee { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 72%; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--marge); margin: 0 calc(-1 * var(--marge)); padding: 0 var(--marge); scrollbar-width: none; }
  .grille-passee::after { content: ""; width: 1px; }
  .grille-passee::-webkit-scrollbar { display: none; }
  .carte-passee { scroll-snap-align: start; }
}

/* Étapes */
.etapes { text-align: center; }
.etapes ol { list-style: none; counter-reset: e; padding: 0; margin: 30px auto 38px; max-width: 760px; display: grid; gap: 8px; }
.etapes li { counter-increment: e; font: 300 clamp(22px, 3vw, 32px)/1.3 var(--serif); padding: 16px 0; border-bottom: 1px solid var(--trait); }
.etapes li::before { content: "0" counter(e); font: 500 12px/1 var(--mono); color: var(--braise); display: block; margin-bottom: 10px; letter-spacing: 0.08em; }
.etapes li b { font-weight: 500; }
.etapes .annotation { display: block; width: max-content; margin: 26px auto 0; }

/* Fiche expérience */
.fiche-haut { display: grid; grid-template-columns: 1.05fr 1fr; gap: clamp(24px, 5vw, 64px); align-items: center; }
.fiche-photo { position: relative; aspect-ratio: 4 / 5; border-radius: 6px; background: var(--sapin) center / cover no-repeat; }
.fiche-photo:not([style]) { background: radial-gradient(120% 90% at 30% 20%, #c97b4f, #7a3e26 55%, var(--encre)); }
.fiche-titre h1 { font-size: clamp(52px, 8vw, 104px); line-height: 0.95; margin: 14px 0 8px; }
.fiche-titre h1 .point { color: var(--braise); }
.fiche-titre .hero-sous { margin: 0 0 26px; }
.infos { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0; margin: 0 0 30px; border-top: 1px solid var(--trait); }
.infos div { padding: 14px 0; border-bottom: 1px solid var(--trait); }
.infos dd { margin: 6px 0 0; font: 400 20px/1.2 var(--serif); }
.fiche-titre .mono.discret { margin-top: 14px; }
.complet-note { font: 300 20px/1.4 var(--serif); }
.fiche-texte { max-width: 860px !important; padding-bottom: 0 !important; }
@media (max-width: 820px) {
  .fiche-haut { grid-template-columns: 1fr; padding-top: 18px !important; }
  .fiche-photo { aspect-ratio: 4 / 3; }
}

.prix { max-width: 760px !important; }
.prix table { width: 100%; border-collapse: collapse; margin: 22px 0 34px; font: 400 18px/1.35 var(--serif); }
.prix td { padding: 16px 0; border-bottom: 1px solid var(--trait); vertical-align: top; }
.prix .montant { text-align: right; white-space: nowrap; padding-left: 20px; font-family: var(--mono); font-size: 15px; }
.prix .total td { border-bottom: 2px solid var(--encre); font-weight: 600; font-size: 22px; padding-top: 22px; }
.prix .total .montant { font-size: 20px; color: var(--braise); }
.prix h3 { font-size: 24px; margin-bottom: 10px; }
.sur-place { margin: 0 0 30px; padding-left: 20px; color: var(--encre-douce); line-height: 1.8; }
.prix .gros { margin-top: 16px; }

.barre-mobile { display: none; }
@media (max-width: 820px) {
  .barre-mobile { display: block; position: sticky; bottom: 0; z-index: 40; padding: 12px var(--marge) calc(12px + env(safe-area-inset-bottom)); background: linear-gradient(transparent, var(--creme) 30%); }
  .barre-mobile .bouton { width: 100%; }
}

/* Pied */
.pied { border-top: 1px solid var(--trait); padding: 56px var(--marge) 40px; display: grid; gap: 18px; justify-items: start; max-width: var(--max); margin: 40px auto 0; }
.pied-phrase { font: 300 22px/1.3 var(--serif); }
.pied-phrase em { color: var(--sapin); }
.pied-liens { display: flex; flex-wrap: wrap; gap: 10px 26px; font-weight: 500; }

.texte-legal { max-width: 720px !important; }
.texte-legal h1 { font-size: clamp(40px, 6vw, 64px); margin: 12px 0 30px; }
.texte-legal h3 { font-size: 22px; margin: 28px 0 8px; }
.texte-legal p { color: var(--encre-douce); }

/* Formulaire de candidature */
.page-form { min-height: 100dvh; display: flex; flex-direction: column; }
.page-form main { flex: 1; display: flex; }
.entete-form { background: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; }
.fermer { text-decoration: none; font-size: 20px; width: 40px; height: 40px; display: grid; place-items: center; border-radius: 50%; }
.fermer:hover { background: var(--creme-2); }

.form { flex: 1; width: 100%; max-width: 680px; margin: 0 auto; padding: 8px var(--marge) 28px; display: flex; flex-direction: column; }
.fil { position: fixed; top: 0; left: 0; right: 0; height: 3px; background: var(--trait); z-index: 60; }
.fil span { display: block; height: 100%; width: 0; background: var(--braise); transition: width 0.6s cubic-bezier(0.2, 0.8, 0.2, 1); }
.ecran { flex: 1; display: flex; flex-direction: column; justify-content: center; gap: 16px; padding: 4vh 0 6vh; position: relative; }
.ecran.entre > * { animation: monte 0.45s cubic-bezier(0.2, 0.8, 0.2, 1) both; }
.ecran.entre > *:nth-child(2) { animation-delay: 0.04s; }
.ecran.entre > *:nth-child(3) { animation-delay: 0.08s; }
.ecran.entre > *:nth-child(n + 4) { animation-delay: 0.12s; }
@keyframes monte { from { opacity: 0; transform: translateY(14px); } }
.ecran.secoue .saisie, .ecran.secoue .choix { animation: secoue 0.35s; }
@keyframes secoue { 25% { transform: translateX(-6px); } 75% { transform: translateX(6px); } }
@media (prefers-reduced-motion: reduce) { .ecran.entre > * { animation: none; } }

.question { font-size: clamp(32px, 6.5vw, 52px); line-height: 1.06; }
.intro .question { font-size: clamp(40px, 8vw, 68px); }
.aide { font: 300 18px/1.4 var(--serif); color: var(--encre-douce); margin-top: -4px; }
.retour { position: absolute; top: 0; left: -8px; border: 0; background: none; font-size: 22px; color: var(--encre-douce); cursor: pointer; width: 40px; height: 40px; border-radius: 50%; }
.retour:hover { background: var(--creme-2); }

.saisie {
  width: 100%;
  border: 0;
  border-bottom: 2px solid var(--encre);
  background: transparent;
  color: var(--encre);
  font: 400 clamp(26px, 5vw, 36px)/1.25 var(--serif);
  padding: 10px 0;
  border-radius: 0;
  outline: none;
  resize: none;
  -moz-appearance: textfield;
}
.saisie::-webkit-outer-spin-button, .saisie::-webkit-inner-spin-button { -webkit-appearance: none; }
.saisie::placeholder { color: rgba(59, 42, 32, 0.28); }
.saisie:focus { border-bottom-color: var(--braise); }
textarea.saisie { font-size: clamp(22px, 4vw, 28px); }
.saisie.petite { font-size: 20px; margin-top: 6px; }
.avec-prefixe { display: flex; align-items: baseline; gap: 4px; border-bottom: 2px solid var(--encre); }
.avec-prefixe:focus-within { border-bottom-color: var(--braise); }
.avec-prefixe span { font: 400 clamp(26px, 5vw, 36px)/1 var(--serif); color: var(--encre-douce); }
.avec-prefixe .saisie { border: 0; }

.choix { display: grid; gap: 10px; margin-top: 6px; }
.option {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  min-height: 56px;
  padding: 12px 16px;
  border: 1.5px solid var(--trait);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.35);
  color: var(--encre);
  font: 500 17px/1.25 var(--sans);
  text-align: left;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s, transform 0.1s;
}
.option:hover { border-color: var(--encre); }
.option:active { transform: scale(0.99); }
.option[aria-pressed="true"] { border-color: var(--encre); background: var(--encre); color: var(--creme); }
.option .touche { width: 26px; height: 26px; display: grid; place-items: center; border: 1px solid currentColor; border-radius: 6px; font-size: 12px; flex: none; color: inherit; opacity: 0.7; }

.erreur { color: var(--braise); font: 500 14px/1.3 var(--sans); min-height: 18px; }
.actions { display: flex; align-items: center; gap: 18px; margin-top: 6px; }
.entree { display: none; }
@media (hover: hover) { .entree { display: inline; } }
@media (max-width: 600px) {
  .actions .bouton { width: 100%; }
}
.ecran .annotation { align-self: flex-start; margin-top: 10px; }
.form-pied { text-align: center; opacity: 0.6; }
.question { font-variation-settings: "opsz" 72; letter-spacing: -0.015em; }

/* ===== Refonte accueil (29/10) : C1 sur ordinateur, C2 sur mobile, section 01 de M5, expériences e2, pied en vert ===== */
.vert { color: var(--braise); }
.bouton.jaune { background: var(--jaune); color: var(--encre); }
.bouton.jaune:hover { background: #ffe066; }

/* Accueil : photo plein cadre (ordinateur) */
.accueil { position: relative; color: #fff; display: flex; flex-direction: column; }
.accueil .photo { position: absolute; inset: 0; overflow: hidden; }
.accueil .photo img { width: 100%; height: 100%; object-fit: cover; }
.accueil .photo::after { content: ""; position: absolute; inset: 0; }
.nav-hero { position: relative; z-index: 3; display: flex; justify-content: space-between; align-items: center; padding: 18px var(--marge); }
.nav-hero nav { display: flex; align-items: center; gap: 22px; font-weight: 500; font-size: 15px; }
.nav-hero nav a:not(.bouton) { text-decoration: none; }
.hero-centre { position: relative; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 20px; }
.hero-centre .mono { color: #fff; }
.hero-centre h1 { font-size: clamp(44px, 7.4vw, 112px); line-height: 0.95; font-variation-settings: "opsz" 144; letter-spacing: -0.035em; align-self: stretch; }
.hero-centre h1 em { color: var(--jaune); }
.hero-centre .hero-sous { font: 400 clamp(17px, 1.7vw, 21px)/1.45 var(--serif); align-self: stretch; max-width: none; margin: 0; }
.hero-centre .hero-actions { margin-top: 6px; }
.h-ordi { min-height: 92svh; }
.h-ordi .photo img { object-position: 50% 70%; }
.h-ordi .photo::after { background: linear-gradient(180deg, rgba(15, 30, 22, 0.45), rgba(15, 30, 22, 0.25) 45%, rgba(15, 30, 22, 0.75)); }
.h-ordi .hero-centre { flex: 1; justify-content: center; padding: 0 var(--marge) 200px; }

/* Accueil : logo dans le ciel (mobile) */
.h-mob { display: none; min-height: 100svh; background: var(--ciel); }
.h-mob .photo { inset: 14% 0 0 0; -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 12%); mask-image: linear-gradient(180deg, transparent 0, #000 12%); }
.h-mob .photo img { object-position: 50% 0%; }
.h-mob .photo::after { background: linear-gradient(180deg, transparent 40%, rgba(22, 38, 29, 0.85) 85%, var(--foret)); }
.h-mob .nav-hero nav a:not(.bouton) { display: none; }
.geant { position: relative; z-index: 2; margin-top: 4vh; padding: 0 var(--marge); text-align: center; font-size: clamp(44px, 12vw, 170px); color: var(--encre); }
.geant .marque { font-size: 1em; gap: 0.08em; text-decoration: none; }
.h-mob .hero-centre { margin-top: auto; padding: 0 var(--marge) 56px; }

/* Film : la caméra chevauche la photo (ordinateur), section forêt (mobile) */
.film-fond { position: relative; margin-top: -170px; }
main > .film-fond > .film { padding-top: 0; padding-bottom: 40px; max-width: 1120px; }
.film-entete { display: none; }
.camera { border-radius: 16px; box-shadow: 0 24px 50px rgba(15, 30, 22, 0.25); }
.rec::before { background: #ff4b3a; }
.camera-ui .coin { font: italic 400 20px/1.2 var(--serif); color: #fff; text-shadow: 0 2px 10px rgba(0, 0, 0, 0.4); text-transform: none; letter-spacing: 0; }
.plans { grid-auto-columns: calc((100% - 4 * 12px) / 5); gap: 12px; }
.plan img { border-radius: 10px; }
.plan.actif img { outline-color: var(--jaune); }
.plan.est-video .mono::before { color: var(--braise); }

@media (max-width: 760px) {
  .h-ordi { display: none; }
  .h-mob { display: flex; }
  .film-fond { margin-top: 0; background: var(--foret); color: #fff; }
  main > .film-fond > .film { padding: 20px 0 70px; }
  .film-entete { display: block; text-align: center; margin-bottom: 26px; }
  .film-entete .mono { color: var(--jaune); }
  .film-choix { font: italic 400 22px var(--serif); margin-top: 8px; }
  .camera { border-radius: 0; box-shadow: none; }
  .camera-ui .coin { display: block; font-size: 17px; }
  .plans { grid-auto-columns: 42%; margin: 12px 0 0; padding: 0 var(--marge); scroll-padding-inline: var(--marge); }
  .plan .mono { color: #b9c6bd; }
}

/* 01 · La Cabane : tirages photo et règles sur une note */
.cabane { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; }
.cabane h2, .prochaine-bloc h2, .album-bloc h2 { font: 600 clamp(34px, 5vw, 66px)/1 var(--sans); letter-spacing: -0.05em; margin: 12px 0 30px; }
.cabane h2 .vert, .prochaine-bloc h2 em, .album-bloc h2 em { color: var(--braise); font-style: normal; }
.tirages { position: relative; height: 460px; }
.tirage { position: absolute; margin: 0; background: #fff; padding: 8px 8px 30px; border-radius: 3px; box-shadow: 0 18px 40px rgba(23, 39, 30, 0.2); }
.tirage img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.tirage figcaption { position: absolute; left: 10px; bottom: 8px; font: 400 12px var(--mono); color: var(--encre-douce); }
.t1 { width: 56%; left: 0; top: 20px; transform: rotate(-6deg); }
.t2 { width: 54%; right: 0; top: 60px; transform: rotate(5deg); z-index: 1; }
.note { background: var(--papier); border-radius: 6px; padding: 30px; box-shadow: 0 2px 0 rgba(23, 39, 30, 0.06), 0 20px 40px rgba(23, 39, 30, 0.08); }
.note ol { list-style: none; margin: 14px 0 0; padding: 0; }
.note li { padding: 13px 0; border-top: 1px dashed rgba(23, 39, 30, 0.22); }
.note li b { display: block; font: 600 22px/1.2 var(--sans); letter-spacing: -0.03em; }
.note li span { color: var(--encre-douce); }

/* 02 · Engagements en bande verte */
.bande-verte { background: var(--sapin); color: #fff; }
.bande-verte .engagements .mono { color: var(--jaune); }
.bande-verte .engagements ol { border: 0; gap: 36px; }
.bande-verte .engagements li, .bande-verte .engagements li + li { padding: 0; border: 0; }
.bande-verte .engagements .num { font: 800 46px/1 var(--sans); letter-spacing: -0.04em; color: var(--jaune); margin: 0; }
.bande-verte .engagements h3 { font: 600 24px/1.15 var(--sans); letter-spacing: -0.03em; margin: 12px 0 8px; white-space: normal; }
.bande-verte .engagements p { color: #c4d3c8; }
@media (max-width: 800px) { .bande-verte .engagements li, .bande-verte .engagements li + li { border: 0; padding: 0; } }

/* 03 · La prochaine Construction en grand, la suivante en dessous */
.prochaine { display: grid; grid-template-columns: 1.2fr 1fr; background: var(--papier); border-radius: 22px; overflow: hidden; text-decoration: none; box-shadow: 0 22px 44px rgba(23, 39, 30, 0.1); }
.prochaine-photo { min-height: 420px; background: var(--sapin) center / cover no-repeat; }
.prochaine-texte { padding: 34px; display: flex; flex-direction: column; align-items: flex-start; }
.prochaine-texte h3 { font: 600 36px/1.05 var(--sans); letter-spacing: -0.04em; margin-top: 16px; }
.statut { display: inline-flex; align-items: center; padding: 6px 12px; border-radius: 999px; font: 500 12px var(--mono); background: #fff; border: 1px dashed var(--encre-douce); }
.statut.ouvert { background: var(--jaune); border: 0; }
.statut.plein { background: var(--encre); color: #fff; border: 0; }
.lignes { margin: 22px 0 26px; align-self: stretch; border-top: 1px dashed rgba(23, 39, 30, 0.22); }
.lignes div { display: flex; justify-content: space-between; gap: 12px; padding: 11px 0; border-bottom: 1px dashed rgba(23, 39, 30, 0.22); }
.lignes dt { color: var(--encre-douce); }
.lignes dd { margin: 0; font-weight: 600; text-align: right; }
.prochaine-texte .lien-fleche { margin-top: auto; }
.ensuite { display: flex; align-items: center; gap: 16px; margin-top: 16px; padding: 14px 18px; border-radius: 16px; border: 1.5px dashed rgba(23, 39, 30, 0.3); text-decoration: none; }
.ensuite-photo { width: 56px; height: 56px; border-radius: 10px; flex: 0 0 56px; background: var(--sapin) center / cover no-repeat; }
.ensuite-texte { flex: 1; min-width: 0; }
.ensuite-texte h3 { font: 600 21px/1.1 var(--sans); letter-spacing: -0.03em; }

/* 04 · Déjà vécu en album */
.album-bloc { text-align: center; }
.album { display: flex; justify-content: center; gap: clamp(10px, 3vw, 34px); margin-top: 20px; padding: 10px 0 20px; }
.album .tirage { position: relative; width: clamp(110px, 24vw, 260px); text-align: left; }
.album .tirage:nth-child(1) { transform: rotate(-5deg); }
.album .tirage:nth-child(2) { transform: rotate(2deg) translateY(14px); }
.album .tirage:nth-child(3) { transform: rotate(-2deg); }
.album .tirage figcaption { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; right: 10px; }

@media (max-width: 760px) {
  .cabane { grid-template-columns: 1fr; gap: 30px; }
  .tirages { height: 360px; }
  .prochaine { grid-template-columns: 1fr; }
  .prochaine-photo { min-height: 240px; }
  .prochaine-texte { padding: 24px; }
  .album .tirage figcaption { font-size: 10px; }
}

/* Pied : même contenu que l'ancien, en vert forêt */
.pied { max-width: none; margin: 0; border: 0; background: var(--foret); color: var(--creme); padding: 64px var(--marge) 40px; }
.pied-phrase em { color: var(--jaune); }
.pied .mono { color: #9fb2a5; }
.camera-ui .coin { position: absolute; bottom: 22px; left: 30px; }
.bande-verte > section { padding: clamp(56px, 9vw, 120px) var(--marge); max-width: var(--max); margin: 0 auto; }
@media (max-width: 760px) { .camera-ui .coin { left: 22px; bottom: 16px; } }
main > .film-fond > .film { margin: 0 auto; padding-left: var(--marge); padding-right: var(--marge); }
@media (max-width: 760px) {
  main > .film-fond > .film { padding-left: 0; padding-right: 0; }
  .album { gap: 6px; }
  .album .tirage { width: 31%; padding: 5px 5px 24px; }
  .album .tirage figcaption { left: 6px; bottom: 6px; font-size: 9.5px; }
}

/* Retours du 29/10 au soir */
.pied-phrase { align-self: stretch; }
.ensuite .bouton { flex: none; }
@media (max-width: 760px) {
  /* Vidéo avec de la marge et des coins arrondis */
  main > .film-fond > .film { padding-left: var(--marge); padding-right: var(--marge); }
  .camera { border-radius: 14px; }
  .plans { padding: 0; margin-right: calc(-1 * var(--marge)); padding-right: var(--marge); }
  /* Image et logo plus hauts */
  .h-mob .photo { inset: 8% 0 0 0; }
  .geant { margin-top: 0; }
  /* Calque sombre en fondu radial derrière le titre */
  .h-mob .hero-centre::before { content: ""; position: absolute; z-index: -1; left: -10%; right: -10%; top: -18%; bottom: 10%; background: radial-gradient(closest-side, rgba(12, 24, 17, 0.62), rgba(12, 24, 17, 0.35) 55%, transparent); pointer-events: none; }
  .h-mob .hero-centre h1 { text-shadow: 0 2px 18px rgba(0, 0, 0, 0.35); }
  .ens-mot { display: none; }
  .ensuite { padding: 12px 14px; gap: 12px; }
}
.hero-centre { isolation: isolate; }

/* 04 · Déjà vécu : cartes photo assombries, carrousel sur mobile (version 1 du 29/10) */
.album-bloc { text-align: left; }
.vecu { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.vecu-carte { position: relative; margin: 0; aspect-ratio: 4 / 5; border-radius: 18px; overflow: hidden; color: #fff; background: var(--sapin) center / cover no-repeat; }
.vecu-carte::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(10, 20, 14, 0.15), transparent 35%, rgba(10, 20, 14, 0.85)); }
.vecu-carte figcaption { position: absolute; left: 20px; right: 20px; bottom: 20px; z-index: 1; }
.vecu-carte .mono { color: #fff; }
.vecu-carte b { display: block; font: 600 34px/1 var(--sans); letter-spacing: -0.04em; margin: 6px 0 8px; }
.vecu-phrase { display: block; font: italic 400 17px/1.35 var(--serif); opacity: 0.92; }
.vecu-pastille { position: absolute; top: 16px; left: 16px; z-index: 1; background: var(--jaune); color: var(--encre) !important; padding: 6px 11px; border-radius: 999px; }
@media (max-width: 760px) {
  .vecu { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 80%; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--marge); margin: 0 calc(-1 * var(--marge)); padding: 0 var(--marge); scrollbar-width: none; }
  .vecu::-webkit-scrollbar { display: none; }
  .vecu::after { content: ""; width: 1px; }
  .vecu-carte { scroll-snap-align: start; }
}
.h-ordi .photo img { object-position: 50% 70%; }
.accueil { overflow: hidden; }

/* ===== Fiche façon affiche (ski, d'après le flyer envoyé aux inscrits, 29/10) ===== */
:root { --glacier: #1f5b74; }
main > .affiche-bloc { max-width: 1160px; padding-top: 18px; padding-bottom: 0; }
.affiche { position: relative; aspect-ratio: 16 / 10; border-radius: 18px 18px 0 0; overflow: hidden; background: var(--glacier) center 62% / cover no-repeat; color: #f4f1ea; }
.affiche::before { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(14, 40, 54, 0.55), rgba(14, 40, 54, 0.05) 45%, rgba(14, 40, 54, 0.1)); }
.affiche > * { position: relative; }
.affiche-haut { display: flex; justify-content: space-between; align-items: flex-start; gap: 20px; padding: clamp(18px, 3.5vw, 40px); }
.affiche-titre { font: 800 clamp(64px, 12vw, 168px)/0.84 "Archivo", sans-serif; font-variation-settings: "wdth" 125; letter-spacing: -0.03em; text-transform: uppercase; margin: 0; }
.affiche-titre span { display: block; }
.affiche-date { flex: none; display: flex; flex-direction: column; align-items: center; border: 1.5px solid rgba(244, 241, 234, 0.9); padding: 10px 16px 12px; font: 700 13px/1 "Archivo", sans-serif; font-variation-settings: "wdth" 112; letter-spacing: 0.08em; text-transform: uppercase; }
.affiche-date b { font: 800 clamp(40px, 6vw, 76px)/1 "Archivo", sans-serif; font-variation-settings: "wdth" 112; letter-spacing: -0.02em; margin: 6px 0; }
.affiche-cadre { position: absolute; left: clamp(18px, 3.5vw, 40px); right: clamp(18px, 3.5vw, 40px); bottom: clamp(18px, 3.5vw, 40px); top: 52%; border: 1.5px solid rgba(244, 241, 234, 0.85); border-bottom: 0; display: flex; justify-content: space-between; align-items: flex-start; padding: 10px 16px; font: 700 clamp(16px, 2vw, 24px)/1 "Archivo", sans-serif; font-variation-settings: "wdth" 112; text-shadow: 0 1px 10px rgba(0, 0, 0, 0.25); }
.affiche .tampon { z-index: 2; }
.affiche-bas { display: grid; grid-template-columns: 1fr 1.3fr; background: #eef2f3; border-radius: 0 0 18px 18px; }
.affiche-bas > * { padding: 22px clamp(18px, 3.5vw, 40px); }
.affiche-lieu b { display: block; font: 800 clamp(34px, 4.6vw, 56px)/0.95 "Archivo", sans-serif; font-variation-settings: "wdth" 112; color: var(--glacier); text-transform: uppercase; letter-spacing: -0.02em; }
.affiche-lieu span { font: 500 clamp(18px, 2vw, 24px)/1.2 var(--serif); color: var(--glacier); text-transform: uppercase; letter-spacing: 0.04em; }
.affiche-accroche { border-left: 1.5px solid rgba(31, 91, 116, 0.35); align-self: stretch; display: flex; align-items: center; font: 700 clamp(14px, 1.4vw, 17px)/1.4 "Archivo", sans-serif; font-variation-settings: "wdth" 100; text-transform: uppercase; color: var(--glacier); letter-spacing: 0.01em; }

.histoire { max-width: 900px !important; text-align: center; }
.histoire h2 { font: 400 clamp(28px, 4.4vw, 52px)/1.08 var(--serif); letter-spacing: -0.02em; margin: 14px 0 22px; }
.histoire .gros { max-width: 40ch; margin: 0 auto; color: var(--encre-douce); }
.histoire-fin { display: inline-block; margin-top: 26px; background: var(--jaune); padding: 8px 16px; border-radius: 999px; font-weight: 600; }

main > .trio { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(12px, 3vw, 34px); padding-top: 0; max-width: 1000px; }
.trio .tirage { position: relative; inset: auto; width: auto; transform: rotate(-2deg); }
.trio .tirage:nth-child(2) { transform: rotate(1.5deg) translateY(16px); }
.trio .tirage:nth-child(3) { transform: rotate(-1deg); }
.trio .tirage figcaption { position: static; padding: 10px 2px 0; font: italic 400 16px/1.25 var(--serif); color: var(--encre); }

main > .lieu { display: grid; grid-template-columns: 1.1fr 1fr; gap: clamp(24px, 5vw, 64px); align-items: center; }
.lieu-photo img { width: 100%; aspect-ratio: 4 / 3.4; object-fit: cover; border-radius: 16px; box-shadow: 0 22px 44px rgba(23, 39, 30, 0.14); }
.lieu h2 { font: 600 clamp(32px, 4vw, 52px)/1 var(--sans); letter-spacing: -0.05em; margin: 12px 0 18px; }
.lieu-texte p:not(.mono) { font: 300 clamp(18px, 1.8vw, 21px)/1.5 var(--serif); margin-bottom: 12px; }

.a-savoir { margin: 34px 0 0; padding: 26px 26px 10px; background: var(--papier); border-radius: 14px; box-shadow: 0 16px 34px rgba(23, 39, 30, 0.07); }
.a-savoir div { padding: 0 0 16px; margin-bottom: 16px; border-bottom: 1px dashed rgba(23, 39, 30, 0.22); }
.a-savoir div:last-child { border: 0; margin-bottom: 0; }
.a-savoir dt { color: var(--braise); margin-bottom: 6px; }
.a-savoir dd { margin: 0; font: 400 18px/1.4 var(--serif); }

main > .la-bas { text-align: center; padding-bottom: clamp(70px, 10vw, 120px); }
.la-bas h2 { font: 800 clamp(34px, 6vw, 72px)/1 "Archivo", sans-serif; font-variation-settings: "wdth" 112; text-transform: uppercase; letter-spacing: -0.03em; color: var(--glacier); }
.la-bas h2 em { font-style: normal; color: var(--braise); }
.signature { font: italic 400 24px var(--serif); margin: 14px 0 26px; }
.la-bas .mono { margin-bottom: 14px; }

@media (max-width: 760px) {
  main > .affiche-bloc { padding: 10px 10px 0; }
  .affiche { aspect-ratio: 4 / 5.2; }
  .affiche-cadre { top: 46%; }
  .affiche-bas { grid-template-columns: 1fr; }
  .affiche-accroche { border-left: 0; border-top: 1.5px solid rgba(31, 91, 116, 0.25); }
  main > .trio { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 66%; overflow-x: auto; scroll-snap-type: x mandatory; padding: 10px var(--marge) 30px; scrollbar-width: none; }
  .trio .tirage { scroll-snap-align: center; }
  main > .lieu { grid-template-columns: 1fr; }
}
.affiche > .tampon { position: absolute; right: clamp(28px, 4.5vw, 54px); bottom: clamp(28px, 4.5vw, 54px); left: auto; top: auto; }
.affiche { background-position: center 30%; aspect-ratio: 16 / 10.5; }
@media (max-width: 760px) { .affiche { background-position: center 62%; aspect-ratio: 4 / 5.2; } }
.affiche { background-position: center 40%; }
.affiche-accroche { flex-direction: column; justify-content: center; align-items: flex-start; }
.affiche-accroche .ligne:first-child { font-size: 1.15em; margin-bottom: 4px; }
.lieu-photo img { aspect-ratio: 4 / 5; object-position: 50% 60%; }
@media (max-width: 760px) { .affiche { background-position: 58% center; } .lieu-photo img { aspect-ratio: 4 / 4.4; } }
.la-bas h2 em { color: var(--glacier); }
.affiche-accroche .ligne { align-self: stretch; }
.affiche-bas { grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); }
@media (max-width: 760px) { .affiche-bas { grid-template-columns: minmax(0, 1fr); } }

/* « Ce qui t'attend » : cartes sombres, vidéos en boucle, carrousel (proposition 4 du 29/10) */
main > .activites { max-width: 1200px; }
.activites h2 { font: 600 clamp(32px, 4.4vw, 52px)/1 var(--sans); letter-spacing: -0.05em; margin: 12px 0 28px; }
.rail-act { display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - 4 * 14px) / 4.4); gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding-bottom: 6px; }
.rail-act::-webkit-scrollbar { display: none; }
.act-carte { position: relative; aspect-ratio: 4 / 5; border-radius: 18px; overflow: hidden; color: #fff; background: var(--foret); scroll-snap-align: start; }
.act-carte video, .act-carte img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.act-carte::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 40%, rgba(10, 20, 14, 0.85)); }
.act-texte { position: absolute; left: 18px; right: 18px; bottom: 18px; z-index: 1; }
.act-texte .mono { color: #fff; opacity: 0.85; }
.act-texte b { display: block; font: 600 24px/1.08 var(--sans); letter-spacing: -0.035em; margin-top: 4px; }
.mystere video { filter: blur(14px) saturate(0.6) brightness(0.55); transform: scale(1.15); }
.act-point { position: absolute; z-index: 1; left: 0; right: 0; top: 30%; text-align: center; font: 800 120px/1 "Archivo", sans-serif; font-variation-settings: "wdth" 112; color: var(--jaune); }
@media (max-width: 760px) {
  .rail-act { grid-auto-columns: 74%; margin: 0 calc(-1 * var(--marge)); padding: 0 var(--marge) 6px; scroll-padding-inline: var(--marge); }
  .rail-act::after { content: ""; width: 1px; }
}
/* Retour du 29/10 : cartes plus grandes, rail qui déborde à droite de l'écran */
main > .activites { max-width: none; padding-right: 0; padding-left: max(var(--marge), calc((100vw - 1200px) / 2)); }
.activites h2 { font-size: clamp(40px, 6vw, 84px); }
.rail-act { grid-auto-columns: clamp(300px, 31vw, 460px); gap: 18px; padding-right: var(--marge); }
.act-carte { aspect-ratio: 3 / 4; border-radius: 22px; }
.act-texte { left: 24px; right: 24px; bottom: 24px; }
.act-texte b { font-size: clamp(26px, 2.3vw, 34px); }
.act-point { font-size: 160px; }
@media (max-width: 760px) {
  main > .activites { padding-left: var(--marge); }
  .rail-act { grid-auto-columns: 84%; margin: 0 0 0 calc(-1 * var(--marge)); padding: 0 var(--marge) 6px; }
}

/* Galerie du chalet : photos qui défilent, flèches et compteur (30/10) */
.lieu-photo { position: relative; min-width: 0; }
.galerie-rail { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; border-radius: 16px; box-shadow: 0 22px 44px rgba(23, 39, 30, 0.14); }
.galerie-rail::-webkit-scrollbar { display: none; }
.galerie-rail img { flex: 0 0 100%; scroll-snap-align: start; border-radius: 0; box-shadow: none; }
.gal-fl { position: absolute; top: 50%; transform: translateY(-50%); width: 46px; height: 46px; border: 0; border-radius: 50%; background: rgba(251, 250, 244, 0.92); color: var(--foret); font: 500 20px/1 var(--sans); cursor: pointer; box-shadow: 0 6px 18px rgba(0, 0, 0, 0.18); transition: transform 0.15s; }
.gal-fl:hover { transform: translateY(-50%) scale(1.08); }
.gal-g { left: 14px; } .gal-d { right: 14px; }
.gal-compte { position: absolute; left: 14px; bottom: 14px; background: rgba(22, 38, 29, 0.7); color: #fff; padding: 6px 11px; border-radius: 999px; }
@media (max-width: 760px) { .gal-fl { width: 40px; height: 40px; font-size: 17px; } }

/* Haut de fiche H2 (30/10) : texte et infos à gauche, vidéo 4:5 à droite */
main > .haut-fiche { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(24px, 5vw, 72px); align-items: center; max-width: 1240px; padding-top: clamp(12px, 3vw, 40px); }
.haut-fiche h1 { font: 600 clamp(48px, 7vw, 100px)/0.92 var(--sans); letter-spacing: -0.06em; margin: 14px 0 20px; }
.haut-fiche h1 span, .haut-fiche h1 em { display: block; }
.haut-fiche h1 em { font-style: normal; color: var(--braise); }
.haut-accroche { font: 300 clamp(19px, 1.9vw, 23px)/1.4 var(--serif); margin-bottom: 28px; }
.haut-accroche b { font-weight: 400; display: block; }
.haut-infos { border-top: 1px solid rgba(23, 39, 30, 0.15); margin: 0 0 26px; }
.haut-infos div { display: flex; justify-content: space-between; gap: 16px; padding: 13px 0; border-bottom: 1px solid rgba(23, 39, 30, 0.15); }
.haut-infos dt { opacity: 0.65; }
.haut-infos dd { margin: 0; font: 600 18px var(--sans); letter-spacing: -0.02em; text-align: right; }
.haut-video { position: relative; }
.haut-video video, .haut-video img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 22px; box-shadow: 0 28px 60px rgba(23, 39, 30, 0.22); background: var(--foret); }
.haut-tag { position: absolute; top: 16px; left: 16px; background: var(--braise); color: #fff; padding: 6px 11px; border-radius: 999px; }
.haut-legende { position: absolute; left: 16px; bottom: 16px; color: #fff; }
@media (max-width: 760px) {
  main > .haut-fiche { grid-template-columns: minmax(0, 1fr); padding-top: 4px; }
  .haut-video { order: -1; }
  .haut-video video, .haut-video img { aspect-ratio: 4 / 4.3; }
  .alerte-ouvrir { width: 100%; }
}

/* Activités en mosaïque A1 (30/10) : une grande carte, quatre petites, rien ne déborde */
main > .activites { max-width: 1240px; padding-left: var(--marge); padding-right: var(--marge); }
.mosaique { display: grid; grid-template-columns: 1.25fr 1fr 1fr; grid-template-rows: repeat(2, minmax(0, 1fr)); gap: 14px; height: min(64vw, 720px); }
.mosaique .act-carte { aspect-ratio: auto; border-radius: 20px; }
.mosaique .grande { grid-row: span 2; }
.mosaique .act-texte b { font-size: clamp(20px, 2vw, 28px); }
.mosaique .grande .act-texte b { font-size: clamp(28px, 3vw, 42px); }
.mosaique .act-point { font-size: 80px; top: 22%; }
@media (max-width: 760px) {
  .mosaique { grid-template-columns: 1fr 1fr; grid-template-rows: none; height: auto; }
  .mosaique .act-carte { aspect-ratio: 4 / 5; }
  .mosaique .grande { grid-column: span 2; grid-row: auto; aspect-ratio: 1; }
  .mosaique .act-texte { left: 14px; right: 14px; bottom: 12px; }
  .mosaique .act-texte b { font-size: 18px; }
}

/* Pop-up « Préviens-moi du prochain trip » */
.la-bas-boutons { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
dialog.alerte { border: 0; padding: 0; border-radius: 22px; width: min(440px, calc(100vw - 32px)); background: var(--papier); color: inherit; box-shadow: 0 30px 80px rgba(10, 20, 14, 0.35); }
dialog.alerte::backdrop { background: rgba(16, 28, 20, 0.55); backdrop-filter: blur(4px); }
.alerte-corps { padding: 30px 26px 26px; }
.alerte h3 { font: 600 30px/1.02 var(--sans); letter-spacing: -0.045em; margin: 10px 0 10px; }
.alerte-sous { opacity: 0.7; margin: 0 0 20px; }
.alerte-form { display: flex; flex-direction: column; gap: 10px; }
.alerte-form input[type=email] { font: 400 17px var(--sans); padding: 15px 16px; border-radius: 14px; border: 1px solid rgba(23, 39, 30, 0.2); background: #fff; }
.alerte-form input[type=email]:focus { outline: 2px solid var(--braise); outline-offset: 1px; }
.alerte .piege { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.alerte-msg { min-height: 1.4em; margin: 12px 0 0; font-size: 15px; }
.alerte.fait .alerte-form, .alerte.fait .alerte-sous { display: none; }
.alerte.fait .alerte-msg { font: 600 18px var(--sans); color: var(--braise); }
.alerte-croix { position: absolute; top: 10px; right: 10px; }
.alerte-croix button { width: 38px; height: 38px; border: 0; border-radius: 50%; background: rgba(23, 39, 30, 0.07); font-size: 22px; cursor: pointer; color: inherit; }

/* Histoire : une phrase par ligne (test Skydive, 30/10) */
.histoire .phrases span { display: block; }
.histoire .phrases span + span { margin-top: 0.55em; }

/* Accueil : toutes les prochaines Constructions en grande carte (30/10) */
.prochaine-bloc .prochaine + .prochaine { margin-top: 18px; }
.haut-places { margin-left: 14px; opacity: 0.7; }
@media (max-width: 760px) { .haut-places { display: block; margin: 10px 0 0; text-align: center; } }

/* 03 · Carte N°3 « En préparation » (V2 du 30/10) : photo floutée sur vert, grain, bouton pop-up */
.prochaine.bientot .prochaine-photo { position: relative; overflow: hidden; background: var(--sapin); }
.bientot-flou { position: absolute; inset: -30px; background: url('/static/img/accueil-ordi.webp') center / cover no-repeat; filter: blur(22px); opacity: 0.45; }
.bientot-grain { position: absolute; inset: 0; opacity: 0.18; mix-blend-mode: overlay; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
.bientot-num { position: absolute; left: 34px; bottom: 30px; color: #fff; }
.bientot-num span { font-size: 13px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--jaune); }
.bientot-num b { display: block; font: 700 clamp(90px, 11vw, 150px)/0.9 var(--sans); letter-spacing: -0.06em; }
.bientot-sous { color: var(--encre-douce); margin: 14px 0 26px; font-size: 17px; line-height: 1.45; }
.bientot-sous b { color: var(--encre); }
.prochaine.bientot .bouton { margin-top: auto; }
@media (max-width: 760px) { .bientot-num { left: 24px; bottom: 22px; } .prochaine.bientot .bouton { width: 100%; } }