/* ==========================================================================
   QRoss — page d'accueil
   Grammaire : titres d'affiche géants, sections qui alternent sombre et clair,
   une section épinglée qui défile de côté, le fil mandarine qui se trace entre
   les étapes. Couleurs, polices et rayons : les jetons de style.css (charte v2).
   Rythme : vidéo · Grège · Calcaire · Calcaire · Sous-bois · Calcaire ·
   Papier · Grège · Sous-bois · pied Sous-bois.
   ========================================================================== */

/* ==========================================================================
   1 · Ouverture
   ========================================================================== */
.heros { position: relative; isolation: isolate; display: flex; align-items: flex-end; min-height: max(640px, 100svh); overflow: hidden; background: var(--c-sousbois); color: var(--c-calcaire); }
.heros__video { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; }
.heros::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(to bottom, rgba(28,38,36,.25) 0%, rgba(28,38,36,0) 30%, rgba(28,38,36,.8) 100%); }
.heros__grille { display: grid; grid-template-columns: 7fr 4fr; gap: var(--s-12); align-items: end; width: 100%; padding-block: 140px var(--s-12); }
.heros__surtitre { margin-bottom: var(--s-4); font: 700 clamp(1.125rem, 1.1vw + .7rem, 1.375rem)/1.2 var(--f-texte); }
.heros__surtitre::before { content: ""; display: inline-block; width: 40px; height: var(--fil-epaisseur); margin: 0 var(--s-3) .3em 0; border-radius: var(--fil-epaisseur); background: var(--c-mandarine); vertical-align: middle; }
.heros__ligne { display: block; }
.heros__ligne--accent { color: var(--c-anis); }  /* Anis sur Sous-bois voilé : grand texte */
.heros__atouts { display: flex; flex-wrap: wrap; gap: var(--s-3) var(--s-6); margin-top: var(--s-8); padding: 0; list-style: none; font-weight: 500; }
.heros__atouts li { display: flex; align-items: center; gap: var(--s-2); }
.heros__atouts .icone { color: var(--c-anis); }
.heros__droite .actions { margin-top: var(--s-6); }
.heros__pause { position: absolute; right: var(--marge); bottom: var(--s-12); display: none; place-items: center; width: var(--cible-min); height: var(--cible-min); border: 1px solid rgba(243,234,222,.5); border-radius: 50%; background: rgba(28,38,36,.35); color: var(--c-calcaire); cursor: pointer; }
.js .heros__pause { display: grid; }
.heros__pause .icone--lecture, .heros__pause.en-pause .icone--pause { display: none; }
.heros__pause.en-pause .icone--lecture { display: block; }
@keyframes monter { from { opacity: 0; transform: translateY(40px); } to { opacity: 1; transform: none; } }
.heros__surtitre, .heros__ligne, .heros__atouts, .heros__droite { animation: monter 600ms var(--ease) both; }
.heros__ligne:nth-child(1) { animation-delay: 80ms; }
.heros__ligne:nth-child(2) { animation-delay: 200ms; }
.heros__atouts { animation-delay: 340ms; }
.heros__droite { animation-delay: 440ms; }

/* ==========================================================================
   2 · Pourquoi — une rangée de quatre cartes, compacte
   Le problème en tête, la réponse QRoss au pied, un pictogramme pour chaque.
   ========================================================================== */
.douleurs { padding-block: var(--section); background: var(--c-grege); }
.douleurs__intro { margin-bottom: var(--tete-contenu); }
.douleurs__intro h2 { max-width: 900px; }
.douleurs__grille { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s-4); }
.douleur { display: flex; flex-direction: column; padding: var(--s-6); border-radius: var(--r-xl); background: var(--c-sauge); color: var(--c-sousbois); box-shadow: var(--e-2); transform: rotate(var(--incl)); transition: transform var(--t-court) var(--ease), box-shadow var(--t-court) var(--ease); }  /* Sous-bois sur Sauge : 5,93 */
.douleur:hover { transform: rotate(0deg) translateY(-8px); box-shadow: var(--e-3); }

/* En-tête : le pictogramme à gauche, le titre à droite */
.douleur__tete { display: flex; align-items: center; gap: var(--s-4); margin-bottom: var(--s-4); }
.douleur__picto { flex: none; display: grid; place-items: center; width: 64px; height: 64px; border-radius: 50%; background: var(--c-sousbois); color: var(--c-anis); transition: transform var(--t-moyen) var(--ease); }  /* Anis sur Sous-bois : 13,63 */
.douleur__picto .icone { width: 34px; height: 34px; stroke-width: 1.6; }
.douleur:hover .douleur__picto { transform: rotate(-12deg) scale(1.08); }
.douleur h3 { font-size: clamp(1.2rem, 1.5vw, 1.4rem); }
.douleur p { font-size: var(--t-body); line-height: var(--lh-body); }
.douleur .douleur__reponse { display: flex; gap: var(--s-2); margin-top: auto; padding-top: var(--s-4); border-top: 2px solid rgba(28,38,36,.25); font-weight: 600; }
.douleur h3 + p, .douleur__tete + p { margin-bottom: var(--s-4); }
.douleur__reponse::before { content: ""; flex: none; width: 10px; height: 10px; margin-top: .5em; border-radius: 50%; background: var(--c-anis); box-shadow: 0 0 0 2px var(--c-sousbois); }

/* Entrée en scène, déclenchée par .visible (accueil.js), en cascade :
   la carte tombe en place avec un léger rebond, puis le pictogramme éclôt
   et le point de la réponse s'allume. */
@keyframes carte-arrive {
  0%   { opacity: 0; transform: translateY(70px) rotate(calc(var(--incl) * -4)) scale(.94); }
  60%  { opacity: 1; transform: translateY(-10px) rotate(calc(var(--incl) * 1.6)) scale(1.01); }
  100% { opacity: 1; transform: translateY(0) rotate(var(--incl)) scale(1); }
}
@keyframes picto-eclot {
  0%   { transform: scale(0) rotate(-120deg); }
  70%  { transform: scale(1.15) rotate(10deg); }
  100% { transform: scale(1) rotate(0deg); }
}
@keyframes point-allume {
  0%, 100% { box-shadow: 0 0 0 2px var(--c-sousbois); }
  50%      { box-shadow: 0 0 0 2px var(--c-sousbois), 0 0 0 9px rgba(213,255,126,.55); }
}
.js .douleur.revele { opacity: 0; transition: transform var(--t-court) var(--ease), box-shadow var(--t-court) var(--ease); }
.js .douleur.revele .douleur__picto { transform: scale(0); }
.js .douleur.revele.visible { opacity: 1; animation: carte-arrive 700ms var(--ease) both; animation-delay: calc(var(--rang, 0) * 120ms); }
.js .douleur.revele.visible .douleur__picto { transform: none; animation: picto-eclot 600ms var(--ease) both; animation-delay: calc(var(--rang, 0) * 120ms + 380ms); }
.js .douleur.revele.visible .douleur__reponse::before { animation: point-allume 900ms ease-out both; animation-delay: calc(var(--rang, 0) * 120ms + 700ms); }
/* Une fois arrivée, la carte redevient libre de réagir au survol */
.js .douleur.revele.visible.posee { animation: none; transform: rotate(var(--incl)); }
.js .douleur.revele.visible.posee:hover { transform: rotate(0deg) translateY(-8px); }
.js .douleur.revele.visible.posee .douleur__picto { animation: none; }
.js .douleur.revele.visible.posee:hover .douleur__picto { transform: rotate(-12deg) scale(1.08); }

@media (prefers-reduced-motion: reduce) {
  .js .douleur.revele, .js .douleur.revele.visible { opacity: 1; animation: none; transform: rotate(var(--incl)); }
  .js .douleur.revele .douleur__picto, .js .douleur.revele.visible .douleur__picto { transform: none; animation: none; }
  .js .douleur.revele.visible .douleur__reponse::before { animation: none; }
}

@media (max-width: 1023px) { .douleurs__grille { grid-template-columns: 1fr 1fr; } }
@media (max-width: 639px) {
  .douleurs__grille { grid-template-columns: 1fr; }
  .douleur__picto { width: 52px; height: 52px; }
  /* l'inclinaison est posée en ligne dans le HTML : !important pour la retirer ici */
  .douleur { --incl: 0deg !important; }
}

/* ==========================================================================
   Titre d'affiche centré (fin de « Comment ça marche »)
   ========================================================================== */
.affiche-section__contenu { max-width: 1120px; text-align: center; }
.affiche-section__contenu .texte-l { max-width: 620px; margin: var(--s-6) auto 0; }
.affiche-section__contenu .actions { justify-content: center; }
.affiche-section__contenu--sombre { padding-top: var(--section); color: var(--c-calcaire); }

/* ==========================================================================
   3 · La promesse — Sous-bois : le texte et ses trois atouts à gauche,
   une petite scène à droite (le téléphone, l'heure tardive, le parcours ouvert)
   ========================================================================== */
.promesse { padding-block: var(--section); background: var(--c-sousbois); color: var(--c-craie); overflow: hidden; }
.promesse__grille { display: grid; grid-template-columns: 3fr 2fr; gap: var(--s-16); align-items: center; }
.promesse .surtitre { color: var(--c-craie); }
.promesse h2 { color: var(--c-calcaire); }
.promesse__atouts { display: grid; gap: var(--s-6); margin: var(--s-12) 0 var(--s-8); padding: 0; list-style: none; }
.promesse__atouts li { display: flex; gap: var(--s-4); align-items: flex-start; }
.promesse__picto { flex: none; display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; background: var(--c-foret); color: var(--c-anis); }
.promesse__picto .icone { width: 26px; height: 26px; }
.promesse__atouts li > div strong { display: block; color: var(--c-calcaire); font: 700 var(--t-title)/var(--lh-title) var(--f-texte); }
.promesse__atouts li > div span { display: block; max-width: 46ch; margin-top: var(--s-1); font-size: var(--t-body-l); line-height: var(--lh-body-l); }

/* La scène */
.promesse__scene { position: relative; display: grid; place-items: center; aspect-ratio: 1; }
.promesse__scene::before { content: ""; position: absolute; inset: 6%; border-radius: 50%; background: var(--c-foret); }
.promesse__soleil { position: absolute; top: 9%; right: 15%; width: 56px; height: 56px; border-radius: 50%; background: var(--c-mandarine); box-shadow: 0 0 0 12px rgba(222,173,120,.18), 0 0 0 26px rgba(222,173,120,.08); }
.promesse__telephone { position: relative; width: 46%; transform: rotate(6deg); filter: drop-shadow(0 30px 50px rgba(0,0,0,.45)); }
.promesse__etiquette { position: absolute; display: flex; align-items: center; gap: var(--s-3); padding: var(--s-3) var(--s-4) var(--s-3) var(--s-3); border-radius: var(--r-full); box-shadow: var(--e-3); font-size: var(--t-body-s); line-height: 1.25; white-space: nowrap; }
.promesse__etiquette strong { display: block; font-size: var(--t-body); }
.promesse__etiquette .icone { flex: none; width: 36px; height: 36px; padding: 8px; border-radius: 50%; }
.promesse__etiquette--heure { top: 22%; left: -2%; background: var(--c-papier); color: var(--c-sousbois); }
.promesse__etiquette--heure .icone { background: var(--c-sousbois); color: var(--c-craie); }
.promesse__etiquette--ouvert { bottom: 18%; right: -2%; background: var(--c-anis); color: var(--c-sousbois); }
.promesse__etiquette--ouvert .icone { background: var(--c-sousbois); color: var(--c-anis); }

/* Mouvement : les étiquettes arrivent l'une après l'autre, puis flottent doucement */
@keyframes etiquette-arrive { from { opacity: 0; transform: translateY(24px) scale(.9); } to { opacity: 1; transform: none; } }
@keyframes flotte { 0%, 100% { translate: 0 0; } 50% { translate: 0 -8px; } }
.js .promesse__scene .promesse__etiquette { opacity: 0; }
.js .promesse__scene.visible .promesse__etiquette--heure { animation: etiquette-arrive 500ms var(--ease) 500ms both, flotte 5s ease-in-out 1s infinite; }
.js .promesse__scene.visible .promesse__etiquette--ouvert { animation: etiquette-arrive 500ms var(--ease) 1100ms both, flotte 5s ease-in-out 1.6s infinite; }

@media (max-width: 1023px) {
  .promesse__grille { grid-template-columns: 1fr; gap: var(--s-8); }
  .promesse__scene { max-width: 460px; width: 100%; margin-inline: auto; }
}
@media (max-width: 639px) {
  .promesse__etiquette { font-size: var(--t-caption); padding: var(--s-2) var(--s-3) var(--s-2) var(--s-2); }
  .promesse__etiquette strong { font-size: var(--t-body-s); }
  .promesse__etiquette .icone { width: 30px; height: 30px; padding: 6px; }
  .promesse__etiquette--heure { left: 0; }
  .promesse__etiquette--ouvert { right: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .js .promesse__scene .promesse__etiquette { opacity: 1; animation: none !important; }
}

/* ==========================================================================
   4 · Pour qui — le titre et l'éventail des publics
   ========================================================================== */
.territoires { padding-block: var(--section); background: var(--c-calcaire); overflow: hidden; }
.territoires__tete { max-width: calc(900px + 2 * var(--marge)); text-align: center; }
.territoires__tete .texte-l { max-width: 640px; margin: var(--s-6) auto 0; }
.eventail { display: flex; justify-content: center; margin: 0; padding: var(--tete-contenu) var(--marge) var(--s-12); list-style: none; }
.eventail li { position: relative; flex: none; width: clamp(150px, 15vw, 210px); aspect-ratio: 3 / 4; margin-inline: calc(clamp(150px, 15vw, 210px) * -.05); border: 4px solid var(--c-papier); border-radius: var(--r-xl); overflow: hidden; box-shadow: var(--e-2); z-index: calc(10 - var(--i) * var(--i)); transform: translateY(calc(var(--i) * var(--i) * 10px)) rotate(calc(var(--i) * 7deg)); transition: transform var(--t-moyen) var(--ease); }
.eventail li:hover { transform: translateY(calc(var(--i) * var(--i) * 10px - 16px)) rotate(calc(var(--i) * 7deg)); }
.eventail img { width: 100%; height: 100%; object-fit: cover; }
.eventail span { position: absolute; inset: auto 0 0; padding: var(--s-12) var(--s-8) var(--s-6); text-wrap: balance; background: linear-gradient(to top, rgba(28,38,36,.8), rgba(28,38,36,0)); color: var(--c-calcaire); font: 800 clamp(.95rem, 1.3vw, 1.2rem)/1.1 var(--f-display); letter-spacing: -.02em; text-align: center; }
/* L'éventail s'ouvre en entrant dans l'écran */
.js .eventail.revele { opacity: 1; transform: none; }
.js .eventail.revele li { transform: translateY(60px) rotate(0deg); }
.js .eventail.revele.visible li { transform: translateY(calc(var(--i) * var(--i) * 10px)) rotate(calc(var(--i) * 7deg)); }
.js .eventail.revele.visible li:hover { transform: translateY(calc(var(--i) * var(--i) * 10px - 16px)) rotate(calc(var(--i) * 7deg)); }

/* ==========================================================================
   4 bis · Les visites — un même parcours, plusieurs thématiques (Grège)
   La photo porte un sélecteur de visite qui défile tout seul (accueil.js) ;
   la carte de la thématique affichée s'allume.
   ========================================================================== */
.visites { padding-block: var(--section); background: var(--c-grege); }
/* En-tête : le titre sur deux lignes, le texte juste dessous */
.visites__tete { max-width: 920px; margin-bottom: var(--tete-contenu); }
.visites__tete .texte-l { max-width: 640px; margin-top: var(--s-6); }
/* Puis la photo et les quatre cartes, de même hauteur */
.visites__grille { display: grid; grid-template-columns: 5fr 7fr; gap: var(--s-4); align-items: stretch; }
.visites__photo { position: relative; min-height: 360px; margin: 0; border-radius: var(--r-xl); overflow: hidden; box-shadow: var(--e-2); }
.visites__photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* Voile bas pour porter le sélecteur (charte §13) */
.visites__photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(28,38,36,0) 45%, rgba(28,38,36,.7) 100%); }
.visites__choix { position: absolute; inset: auto var(--s-4) var(--s-4); z-index: 1; display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); }
.visites__choix-titre { flex-basis: 100%; margin-bottom: var(--s-1); color: var(--c-calcaire); font: 600 var(--t-label)/1 var(--f-texte); }
.visites__pastille { padding: var(--s-2) var(--s-3); border-radius: var(--r-full); background: rgba(250,248,244,.92); color: var(--c-sousbois); font: 600 var(--t-label)/1 var(--f-texte); transition: background-color var(--t-court) var(--ease), transform var(--t-court) var(--ease); }
.visites__pastille.active { background: var(--c-anis); transform: translateY(-2px); }

.visites__liste { display: grid; grid-template-columns: 1fr 1fr; grid-auto-rows: 1fr; gap: var(--s-4); margin: 0; padding: 0; list-style: none; }
.visite { position: relative; display: flex; flex-direction: column; padding: var(--s-6); border: 2px solid transparent; border-radius: var(--r-xl); background: var(--c-papier); box-shadow: var(--e-1); cursor: default; transition: border-color var(--t-court) var(--ease), box-shadow var(--t-court) var(--ease), transform var(--t-court) var(--ease); }
.visite__picto { display: grid; place-items: center; width: 56px; height: 56px; margin-bottom: var(--s-4); border-radius: 50%; background: var(--c-calcaire); color: var(--c-sousbois); transition: background-color var(--t-court) var(--ease), color var(--t-court) var(--ease), transform var(--t-moyen) var(--ease); }
.visite__picto .icone { width: 28px; height: 28px; }
.visite h3 { font-size: clamp(1.25rem, 1.6vw, 1.5rem); }
.visite p { margin-top: var(--s-2); color: var(--c-ardoise); }
.visite.active { border-color: var(--c-sousbois); box-shadow: var(--e-2); transform: translateY(-4px); }
.visite.active .visite__picto { background: var(--c-sousbois); color: var(--c-anis); transform: rotate(-8deg) scale(1.06); }

@media (max-width: 1023px) {
  .visites__grille { grid-template-columns: 1fr; }
  .visites__photo { min-height: 0; aspect-ratio: 16 / 9; }
}
@media (max-width: 639px) {
  .visites__liste { grid-template-columns: 1fr; grid-auto-rows: auto; }
  .visites__photo { aspect-ratio: 4 / 3; }
  .visite { padding: var(--s-6); }
}

/* ==========================================================================
   5 · Comment ça marche — Sous-bois, cartes Forêt, le fil mandarine
   ========================================================================== */
.etapes { padding-block: var(--section); background: var(--c-sousbois); color: var(--c-craie); overflow: hidden; }
.etapes__tete { max-width: 900px; margin: 0 auto var(--tete-contenu); text-align: center; color: var(--c-calcaire); }
.etapes__tete .surtitre { color: var(--c-craie); }
.etapes__liste { position: relative; display: grid; gap: var(--s-16); }
.etapes__trace { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
/* Le fil : pointillés anis épais (demande de Paul, écart à la charte §6 qui le veut mandarine).
   Le trait plein du masque se déroule au défilement et découvre les pointillés. */
.etapes__trace path { fill: none; stroke-linecap: round; stroke-linejoin: round; }
/* sélecteur appuyé : il doit primer sur .etapes__trace path (bouts arrondis) */
.etapes__trace .etapes__pointilles { stroke: var(--c-anis); stroke-width: 13; stroke-dasharray: 18 16; stroke-linecap: butt; }
.etapes__revele { stroke: #fff; stroke-width: 44; }
@media (max-width: 1023px) { .etapes__trace { display: none; } }
.etape { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-16); align-items: center; }
.etape:nth-child(odd) .etape__carte { order: 2; }  /* le SVG est le premier enfant : les étapes 2 et 4 inversent */
.etape__carte { position: relative; z-index: 1; display: flex; flex-direction: column; min-height: 0; padding: var(--s-8) var(--s-12); border-radius: var(--r-xl); background: var(--c-foret); transform: rotate(var(--incl)); box-shadow: var(--e-3); }  /* Craie sur Forêt : 8,56 */
/* Le numéro : une pastille posée sur le bord de la carte tourné vers le visuel.
   Le fil passe par elle, puis par le visuel, puis par la pastille suivante. */
.etape__numero { position: absolute; top: 50%; right: -36px; z-index: 2; display: grid; place-items: center; width: 72px; height: 72px; margin-top: -36px; border: 4px solid var(--c-sousbois); border-radius: 50%; background: var(--c-anis); color: var(--c-sousbois); font: 600 var(--t-data-l)/1 var(--f-signage); }
.etape:nth-child(odd) .etape__numero { right: auto; left: -36px; }
.etape__carte h3 { color: var(--c-calcaire); }
.etape__carte p:last-child { padding-top: var(--s-4); font-size: var(--t-body-l); line-height: var(--lh-body-l); }
.etape__visuel { position: relative; z-index: 1; display: flex; justify-content: center; }
.etape__visuel img { max-height: 420px; width: auto; object-fit: contain; filter: drop-shadow(0 24px 48px rgba(0,0,0,.35)); }
.etape__visuel--photo img { width: min(100%, 320px); aspect-ratio: 3 / 4; object-fit: cover; border-radius: var(--r-xl); border: 4px solid var(--c-craie); }

/* ==========================================================================
   6 · Les fonctions — un onglet par moment d'usage (onglets de site.js)
   ========================================================================== */
.fonctions { padding-block: var(--section); background: var(--c-calcaire); }
.fonctions__tete { max-width: 900px; margin: 0 auto var(--tete-contenu); text-align: center; }

/* Les trois onglets : de grandes cartes cliquables, l'active en Sous-bois */
.moments { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-3); margin-bottom: var(--s-6); }
.moments [role="tab"] { display: grid; grid-template-columns: auto 1fr; column-gap: var(--s-4); align-items: center; min-height: 88px; padding: var(--s-4) var(--s-6); border: 1px solid var(--c-grege); border-radius: var(--r-xl); background: var(--c-papier); color: var(--c-sousbois); text-align: left; cursor: pointer; transition: background-color var(--t-court) var(--ease), border-color var(--t-court) var(--ease), box-shadow var(--t-court) var(--ease); }
.moments [role="tab"]:hover { border-color: var(--c-sousbois); }
.moments .icone { grid-row: span 2; width: 44px; height: 44px; padding: 10px; border-radius: 50%; background: var(--c-calcaire); }
.moments__titre { font: 800 var(--t-title)/1.1 var(--f-display); letter-spacing: -.02em; }
.moments__outil { color: var(--c-ardoise); font-size: var(--t-body-s); }
.moments [role="tab"][aria-selected="true"] { border-color: var(--c-sousbois); background: var(--c-sousbois); color: var(--c-calcaire); box-shadow: var(--e-2); }
.moments [role="tab"][aria-selected="true"] .moments__outil { color: var(--c-craie); }
.moments [role="tab"][aria-selected="true"] .icone { background: var(--c-anis); color: var(--c-sousbois); }

/* Le panneau : le texte à gauche, le visuel qui déborde à droite */
.moment { display: grid; grid-template-columns: 5fr 6fr; gap: var(--s-12); align-items: center; min-height: 540px; padding: var(--s-12); border-radius: var(--r-xl); background: var(--c-papier); border: 1px solid var(--c-grege); overflow: hidden; }
.moment + .moment { margin-top: var(--s-6); }  /* sans JavaScript */
.js .moment:not([hidden]) { animation: monter var(--t-moyen) var(--ease) both; }
.moment__qui { color: var(--c-ardoise); font: 600 var(--t-label)/var(--lh-label) var(--f-texte); }
.moment__qui::before { content: ""; display: inline-block; width: 24px; height: var(--fil-epaisseur); margin: 0 var(--s-2) .25em 0; border-radius: var(--fil-epaisseur); background: var(--c-mandarine); vertical-align: middle; }
.moment h3 { margin-top: var(--s-3); }
.moment__liste { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-6) var(--s-8); margin: var(--s-8) 0; padding: 0; list-style: none; }
.moment__liste li { padding-top: var(--s-3); border-top: 2px solid var(--c-grege); }
.moment__liste strong { display: block; font-size: var(--t-body-l); line-height: var(--lh-title); }
.moment__liste span { display: block; margin-top: var(--s-1); color: var(--c-ardoise); }
.moment__visuel { display: grid; place-items: center; align-self: stretch; margin: calc(-1 * var(--s-12)) calc(-1 * var(--s-12)) calc(-1 * var(--s-12)) 0; padding: var(--s-12); background: var(--c-grege); }
.moment__visuel img { max-height: 440px; width: auto; filter: drop-shadow(0 24px 40px rgba(28,38,36,.2)); }
.moment__visuel--photo { padding: 0; }
.moment__visuel--photo img { width: 100%; height: 100%; max-height: none; object-fit: cover; filter: none; }

@media (max-width: 1023px) {
  .moment { grid-template-columns: 1fr; gap: var(--s-8); padding: var(--s-8); min-height: 0; }
  .moment__visuel { order: -1; margin: calc(-1 * var(--s-8)) calc(-1 * var(--s-8)) 0; padding: var(--s-8); }
  .moment__visuel img { max-height: 300px; }
  .moment__visuel--photo { padding: 0; aspect-ratio: 3 / 2; }
}
@media (max-width: 639px) {
  .moments { gap: var(--s-2); }
  .moments [role="tab"] { grid-template-columns: 1fr; justify-items: center; row-gap: var(--s-2); min-height: 0; padding: var(--s-3) var(--s-2); text-align: center; }
  .moments .icone { grid-row: auto; width: 36px; height: 36px; padding: 8px; }
  .moments__titre { font-size: var(--t-body-s); }
  .moments__outil { display: none; }
  .moment { padding: var(--s-6); }
  .moment__visuel { margin: calc(-1 * var(--s-6)) calc(-1 * var(--s-6)) 0; padding: var(--s-6); }
  .moment__liste { grid-template-columns: 1fr; gap: var(--s-4); }
}

/* ==========================================================================
   7 · Balises
   ========================================================================== */
.balises { padding-block: var(--section); border-top: 1px solid var(--c-grege); background: var(--c-papier); }
.balises__tete { max-width: 1000px; margin: 0 auto var(--tete-contenu); text-align: center; }
.balises__tete .texte-l { max-width: 640px; margin: var(--s-6) auto 0; }
.balises__liste { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-6); padding: 0; list-style: none; }
.balises__liste a { position: relative; display: block; border-radius: var(--r-xl); overflow: hidden; color: var(--c-calcaire); text-decoration: none; }
.balises__liste img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; transition: transform var(--t-moyen) var(--ease); }
.balises__liste a:hover img { transform: scale(1.04); }
.balises__liste span { position: absolute; inset: auto 0 0; padding: var(--s-16) var(--s-6) var(--s-6); background: linear-gradient(to top, rgba(28,38,36,.75), rgba(28,38,36,0)); }

/* ==========================================================================
   8 · Appel à l'action — prolonge la section des balises (même fond, pas de double marge)
   ========================================================================== */
.page-accueil .appel { padding-top: 0; max-width: none; background: var(--c-papier); padding-inline: max(var(--marge), calc((100% - var(--page)) / 2)); }

/* ==========================================================================
   Adaptations
   ========================================================================== */
@media (max-width: 1023px) {
  .heros__grille { grid-template-columns: 1fr; gap: var(--s-8); }
  .etape { grid-template-columns: 1fr; gap: var(--s-8); }
  .etape:nth-child(odd) .etape__carte { order: 0; }
  .etape__numero, .etape:nth-child(odd) .etape__numero { position: static; margin: 0 0 var(--s-4); width: 56px; height: 56px; }
  .balises__liste { grid-template-columns: 1fr 1fr 1fr; gap: var(--s-3); }
}
@media (max-width: 639px) {
  .heros__grille { padding-block: 120px var(--s-16); }
  .heros__pause { bottom: auto; top: 96px; }
  /* Sur téléphone, l'éventail devient une rangée à faire défiler au doigt */
  .eventail, .js .eventail.revele { justify-content: flex-start; gap: var(--s-3); padding: var(--s-8) var(--marge); overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
  .eventail li, .js .eventail.revele li, .js .eventail.revele.visible li, .js .eventail.revele.visible li:hover { width: 62vw; max-width: 260px; margin: 0; transform: none; scroll-snap-align: center; z-index: auto; }
  .eventail span { font-size: 1.1rem; padding: var(--s-12) var(--s-4) var(--s-4); }
  .etape__carte { min-height: 0; padding: var(--s-6); }
  .etape__visuel img { max-height: 300px; }
  .balises__liste { grid-template-columns: 1fr; }
}

/* Réduire les animations : rien ne bouge, rien ne penche */
@media (prefers-reduced-motion: reduce) {
  .heros__surtitre, .heros__ligne, .heros__atouts, .heros__droite { animation: none; }
  .js .eventail.revele li { transition: none; }
  .js .eventail.revele li { transform: translateY(calc(var(--i) * var(--i) * 10px)) rotate(calc(var(--i) * 7deg)); }
}