/*
Theme Name: Jennif'Air
Theme URI: https://www.jennifair.com
Author: NKO Design
Author URI: https://www.nkodesign.com
Description: Theme bloc sur mesure de Jennif'Air (parapente et activites aeriennes a Serre-Poncon). Contenu 100 % en blocs natifs, modifiable dans l'editeur.
Version: 1.0.2611121149
Update URI: false
Requires at least: 6.6
Tested up to: 7.1
Requires PHP: 8.0
License: GPL-2.0-or-later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: jennifair
*/
/* ==========================================================
   Jennif'Air — maquette d'accueil
   Références : maquette « Paragliding. », « BirAlive », morzineparapente.com
   ========================================================== */

/* polices hébergées sur le site (SIL Open Font License, fichiers Google Fonts, jeu latin) :
   pas de connexion à Google avant d'afficher le texte, ni d'adresse IP des visiteurs transmise.
   Mulish est une police variable : un seul fichier pour toutes les graisses. */
@font-face {
  font-family: "Mulish";
  font-style: normal;
  font-weight: 200 1000;
  font-display: swap;
  src: url(assets/fonts/mulish-latin.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Kaushan Script";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(assets/fonts/kaushan-script-latin.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  --bleu: #0000E3;
  --magenta: #D906DF;
  --nuit: #1D3C4E;
  --encre: #1B2024;
  --ardoise: #49606D;
  --fantome: rgba(29, 60, 78, .07);
  --sable: #FBF6EC;
  --rose-clair: #F38BF6;
  --blanc: #FFFFFF;

  --sans: "Mulish", system-ui, sans-serif;
  --pinceau: "Kaushan Script", cursive;

  --enveloppe: 1240px;
  --gouttiere: clamp(16px, 4vw, 48px);
  --respiration: clamp(56px, 6vw, 88px);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.7;
  color: var(--ardoise);
  background: var(--blanc);
  overflow-x: hidden;
}
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
h1, h2, h3 { margin: 0; color: var(--nuit); hyphens: none; text-wrap: balance; }
p { margin: 0 0 1em; }
ul, ol { margin: 0; padding: 0; list-style: none; }

.enveloppe {
  width: 100%;
  max-width: calc(var(--enveloppe) + 2 * var(--gouttiere));
  margin-inline: auto;
  padding-inline: var(--gouttiere);
}

/* ---------- typographie partagée ---------- */
.etiquette {
  display: inline-block;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--magenta);
}
.titre-section {
  font-size: clamp(30px, 3.4vw, 46px);
  font-weight: 900;
  line-height: 1.08;
  text-transform: uppercase;
  letter-spacing: -.01em;
}
.titre-manuscrit {
  font-family: var(--pinceau);
  font-weight: 400;
  font-size: clamp(40px, 5vw, 72px);
  line-height: 1.1;
  color: var(--nuit);
}
.manuscrite {
  font-family: var(--pinceau);
  font-size: clamp(22px, 2vw, 28px);
  line-height: 1.3;
  color: var(--magenta);
  margin: 10px 0 26px;
}
.titre-centre {
  text-align: center;
  font-size: clamp(26px, 2.6vw, 36px);
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
}

/* ---------- boutons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 15px 28px;
  border-radius: 4px;
  border: 2px solid transparent;
  font-size: 14px;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
  line-height: 1.2;
  transition: background-color .25s, color .25s, border-color .25s, transform .25s, box-shadow .25s, background-size .45s cubic-bezier(.6, 0, .2, 1), translate .35s ease-out;
  position: relative; overflow: hidden; isolation: isolate;
}
@media (hover: hover) and (pointer: fine) { .btn:hover { transform: translateY(-2px); } }
.btn.petit { padding: 10px 18px; font-size: 12px; }
.btn-contour { border-color: var(--nuit); color: var(--nuit); background: linear-gradient(var(--nuit), var(--nuit)) no-repeat 0 0 / 0% 100%; }
@media (hover: hover) and (pointer: fine) { .btn-contour:hover { background-size: 100% 100%; color: var(--blanc); } }
.btn-bleu { background: var(--bleu); color: var(--blanc); }
@media (hover: hover) and (pointer: fine) { .btn-bleu:hover { box-shadow: 0 12px 28px rgba(0, 0, 227, .35); } }
.btn-magenta { background: var(--magenta); color: var(--blanc); }
@media (hover: hover) and (pointer: fine) { .btn-magenta:hover { box-shadow: 0 12px 28px rgba(217, 6, 223, .4); } }
.btn-magenta-contour { border-color: var(--magenta); color: var(--magenta); background: linear-gradient(var(--magenta), var(--magenta)) no-repeat 0 0 / 0% 100%; }
@media (hover: hover) and (pointer: fine) { .btn-magenta-contour:hover { background-size: 100% 100%; color: var(--blanc); } }
.btn-blanc-contour { border-color: var(--blanc); color: var(--blanc); background: linear-gradient(var(--blanc), var(--blanc)) no-repeat 0 0 / 0% 100%; }
@media (hover: hover) and (pointer: fine) { .btn-blanc-contour:hover { background-size: 100% 100%; color: var(--nuit); } }
.duo-actions { display: flex; flex-wrap: wrap; gap: 14px; }
.duo-actions.centre { justify-content: center; margin-top: clamp(28px, 3.4vw, 44px); }
/* deux choix l'un sous l'autre, à la largeur du plus long (bons cadeaux : une activité / un montant) */
.duo-actions.empile { display: inline-flex; flex-direction: column; }

/* ==========================================================
   EN-TÊTE — posé dans le cadre du hero, puis collant au défilement
   ========================================================== */
.entete {
  --cadre-x: clamp(14px, 6.4vw, 96px);
  --cadre-haut: clamp(16px, 4.4vw, 64px);
  position: absolute;
  z-index: 20;
  top: calc(var(--cadre-haut) + 22px);
  left: calc(var(--cadre-x) + clamp(18px, 2.6vw, 40px));
  right: calc(var(--cadre-x) + clamp(18px, 2.6vw, 40px));
  display: flex;
  align-items: center;
  gap: 28px;
  color: var(--blanc);
}
.logo img { height: 46px; width: auto; }
.logo-couleur { display: none; }
.nav { margin-left: auto; }
.nav > ul { display: flex; gap: clamp(14px, 1.7vw, 28px); }
.nav > ul > li > a {
  display: block;
  padding: 10px 0;
  font-size: 15px;
  font-weight: 600;
  position: relative;
}
.nav > ul > li > a::after {
  content: "";
  position: absolute; left: 0; right: 0; bottom: 4px;
  height: 2px; background: currentColor;
  transform: scaleX(0); transform-origin: left;
  transition: transform .3s;
}
@media (hover: hover) and (pointer: fine) { .nav > ul > li > a:hover::after { transform: scaleX(1); } }
/* lisibilité du menu posé sur une photo claire (voile blanche, ciel) */
.entete:not(.fixe) .nav > ul > li > a,
.entete:not(.fixe) .btn-reserver { text-shadow: 0 1px 3px rgba(4, 6, 40, .55), 0 0 14px rgba(4, 6, 40, .45); }
.entete:not(.fixe) .logo img { filter: drop-shadow(0 1px 6px rgba(4, 6, 40, .45)); }

.a-sous { position: relative; }
.a-sous > a { padding-right: 16px !important; }
.a-sous > a::before {
  content: ""; position: absolute; right: 0; top: 50%;
  width: 6px; height: 6px; margin-top: -5px;
  border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
}
.sous-menu {
  position: absolute; top: 100%; left: -24px;
  display: grid; grid-template-columns: repeat(2, auto); align-items: start; gap: 0 36px;
  width: max-content; /* les colonnes prennent la largeur de leurs liens, sans se chevaucher */
  padding: 26px 30px;
  background: var(--blanc);
  border-top: 3px solid var(--bleu);
  box-shadow: 0 24px 60px rgba(27, 32, 36, .18);
  opacity: 0; visibility: hidden; transform: translateY(8px);
  transition: opacity .25s, transform .25s, visibility .25s;
}
.a-sous:focus-within .sous-menu { opacity: 1; visibility: visible; transform: none; }
@media (hover: hover) and (pointer: fine) { .a-sous:hover .sous-menu { opacity: 1; visibility: visible; transform: none; } }
.sous-col { display: flex; flex-direction: column; min-width: 190px; }
.sous-col a { color: var(--ardoise); font-size: 14px; font-weight: 600; padding: 5px 0; white-space: nowrap; }
@media (hover: hover) and (pointer: fine) { .sous-col a:hover { color: var(--bleu); } }
.sous-col .sous-titre { color: var(--nuit); font-weight: 900; text-transform: uppercase; letter-spacing: .06em; font-size: 13px; }
.sous-col .sous-titre + .sous-titre, .sous-col a + .sous-titre { margin-top: 10px; }
/* Collection Prestige : en tête du sous-menu, sur toute la largeur, au-dessus des deux colonnes */
.sous-menu > .sous-vedette { grid-column: 1 / -1; margin-bottom: 14px; padding-bottom: 12px; border-bottom: 1px solid #E4E8EE; }
.sous-menu > a.sous-vedette, .sous-menu > .sous-vedette > a { display: block; padding: 5px 0; color: var(--magenta); font-size: 13px; font-weight: 900; letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; }
@media (hover: hover) and (pointer: fine) { .sous-menu > a.sous-vedette:hover, .sous-menu > .sous-vedette > a:hover { color: var(--bleu); } }
/* pages pas encore prêtes (Avion, Saut à l'élastique) */
.bientot { margin-left: 6px; font-size: 11px; font-style: italic; font-weight: 600; letter-spacing: 0; text-transform: none; color: #8A9199; white-space: nowrap; }

.entete-actions { display: flex; align-items: center; gap: 12px; }
.btn-reserver {
  padding: 11px 18px;
  border: 2px solid currentColor;
  border-radius: 4px;
  font-size: 13px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
  transition: background-color .25s, color .25s;
}
@media (hover: hover) and (pointer: fine) { .btn-reserver:hover { background: var(--blanc); color: var(--bleu); } }

/* « Offrir un bon cadeau » : reflet qui passe + cadeau qui s'ouvre au survol */
.btn-cadeau {
  position: relative;
  display: inline-flex; align-items: center; gap: 10px;
  padding: 12px 20px;
  border-radius: 4px;
  background: var(--magenta);
  color: var(--blanc);
  font-size: 13px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
  overflow: hidden;
  box-shadow: 0 8px 22px rgba(217, 6, 223, .35);
  transition: transform .3s, box-shadow .3s;
  animation: cadeau-souffle 3.6s ease-in-out infinite;
}
.btn-cadeau::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, .55) 50%, transparent 70%);
  transform: translateX(-130%);
  animation: cadeau-reflet 3.6s ease-in-out infinite;
}
.ico-cadeau { width: 20px; height: 20px; fill: currentColor; overflow: visible; }
.ico-cadeau .couvercle { transform-origin: 4px 10px; transition: transform .35s cubic-bezier(.3, 1.6, .5, 1); animation: cadeau-sautille 3.6s ease-in-out infinite; }
.ico-cadeau .ruban { fill: rgba(255, 255, 255, .45); }
@media (hover: hover) and (pointer: fine) { .btn-cadeau:hover { transform: translateY(-2px) scale(1.03); box-shadow: 0 14px 32px rgba(217, 6, 223, .5); animation: none; } }
@media (hover: hover) and (pointer: fine) { .btn-cadeau:hover .couvercle { animation: none; transform: translate(-1px, -4px) rotate(-16deg); } }
@keyframes cadeau-reflet { 0%, 55% { transform: translateX(-130%); } 80%, 100% { transform: translateX(130%); } }
@keyframes cadeau-sautille { 0%, 60%, 100% { transform: none; } 68% { transform: translateY(-3px) rotate(-8deg); } 76% { transform: none; } 82% { transform: translateY(-1.5px) rotate(-4deg); } }
@keyframes cadeau-souffle { 0%, 100% { box-shadow: 0 8px 22px rgba(217, 6, 223, .35); } 50% { box-shadow: 0 8px 30px rgba(217, 6, 223, .6); } }

.burger { display: none; }
.sous-toggle { display: none; }

/* état collant */
.entete.fixe {
  position: fixed;
  top: 0; left: 0; right: 0;
  padding: 12px var(--gouttiere);
  background: var(--blanc);
  color: var(--nuit);
  box-shadow: 0 6px 30px rgba(27, 32, 36, .1);
  animation: entete-arrive .35s ease-out;
}
.entete.fixe .logo img { height: 40px; }
.entete.fixe .logo-blanc { display: none; }
.entete.fixe .logo-couleur { display: block; }
@media (hover: hover) and (pointer: fine) { .entete.fixe .btn-reserver:hover { background: var(--nuit); color: var(--blanc); } }
@keyframes entete-arrive { from { transform: translateY(-100%); } to { transform: none; } }

/* ==========================================================
   HERO — photo bord à bord, cadre blanc arrondi, titre géant
   ========================================================== */
.hero {
  --cadre-x: clamp(14px, 6.4vw, 96px);
  --cadre-haut: clamp(16px, 4.4vw, 64px);
  --cadre-bas: clamp(56px, 7vw, 104px);
  position: relative;
  height: 100vh;
  height: 100svh;
  min-height: 560px;
  overflow: hidden;
  isolation: isolate;
  color: var(--blanc);
}
.hero-photo {
  position: absolute; inset: 0; z-index: -2;
  background: url(assets/img/hero-accueil.webp) 50% 50% / cover no-repeat;
}
.hero-photo::after {
  content: "";
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 80% 75% at 50% 45%, rgba(6, 10, 34, 0) 40%, rgba(6, 10, 34, .42) 100%),
    linear-gradient(180deg, rgba(6, 10, 34, .38) 0%, rgba(6, 10, 34, .04) 26%, rgba(6, 10, 34, 0) 48%, rgba(6, 10, 34, .46) 100%);
}
.hero-cadre {
  position: absolute; z-index: 2;
  top: var(--cadre-haut); left: var(--cadre-x); right: var(--cadre-x); bottom: var(--cadre-bas);
  border: 3px solid var(--blanc);
  border-radius: 30px;
  pointer-events: none;
}
.hero-titre {
  position: absolute; z-index: 3;
  left: 50%; top: auto;
  bottom: calc(var(--cadre-bas) + clamp(24px, 5vh, 56px));
  transform: translateX(-50%);
  width: max-content;
  font-size: clamp(50px, 8vw, 136px);
  font-weight: 900;
  line-height: .9;
  letter-spacing: -.035em;
  color: var(--blanc);
  filter: drop-shadow(0 10px 30px rgba(4, 6, 40, .35));
}
.hero-titre .l1, .hero-titre .l2 {
  display: block;
  background: linear-gradient(180deg, #FFFFFF 0%, #FFFFFF 38%, #C9CCFF 78%, #9EA3FF 100%);
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
}
.hero-titre .l1 { padding-right: 1.1em; }
.hero-titre .l2 { padding-left: 2.2em; padding-bottom: .06em; }
.hero-sous {
  display: block;
  margin-top: 18px;
  text-align: right;
  font-size: clamp(11px, 1.05vw, 16px);
  font-weight: 800;
  letter-spacing: .16em;
  line-height: 1.4;
  text-transform: uppercase;
  color: var(--blanc);
}

.hero-voile {
  position: absolute; z-index: 6;
  width: clamp(200px, 24vw, 380px);
  right: calc(var(--cadre-x) - clamp(24px, 2.6vw, 44px));
  top: calc(var(--cadre-haut) + 6%);
  filter: drop-shadow(0 30px 40px rgba(4, 6, 40, .35));
  animation: voile-plane 9s ease-in-out infinite;
}
.hero-voile-loin {
  position: absolute; z-index: 1;
  width: clamp(54px, 5.5vw, 90px);
  left: 19%; top: 64%;
  transform: scaleX(-1);
  opacity: .9;
  filter: blur(.4px);
  animation: voile-plane-loin 12s ease-in-out infinite;
}
@keyframes voile-plane { 0%, 100% { transform: translate(0, 0) rotate(0deg); } 50% { transform: translate(-14px, 12px) rotate(-2deg); } }
@keyframes voile-plane-loin { 0%, 100% { transform: scaleX(-1) translate(0, 0); } 50% { transform: scaleX(-1) translate(-10px, -8px); } }

.hero-reseaux {
  position: absolute; z-index: 5;
  left: calc(var(--cadre-x) + 30px);
  bottom: calc(var(--cadre-bas) + 30px);
  display: flex; flex-direction: column; gap: 16px;
}
.hero-reseaux svg, .pied-reseaux svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; }
.hero-reseaux svg .plein, .pied-reseaux svg .plein { fill: currentColor; stroke: none; }
.hero-reseaux a { display: block; opacity: .85; transition: opacity .2s, transform .2s; }
@media (hover: hover) and (pointer: fine) { .hero-reseaux a:hover { opacity: 1; transform: scale(1.1); } }

/* « faites défiler » : une grande double flèche blanche qui descend, sous le cadre du hero */
.hero-defiler {
  position: absolute; z-index: 5;
  left: 50%; bottom: calc(var(--cadre-bas) / 2 - 30px);
  width: 60px; height: 60px; margin-left: -30px;
  display: block; cursor: pointer;
  filter: drop-shadow(0 2px 10px rgba(10, 6, 30, .6));
}
/* libellé « Faites défiler » au-dessus des flèches : sur ordinateur seulement (au doigt, le geste va de soi) */
.hero-defiler span {
  display: none;
  position: absolute; left: 50%; bottom: 100%;
  translate: -50% 0;
  margin-bottom: 2px;
  font-size: 11px; font-weight: 800; letter-spacing: .24em; text-transform: uppercase; white-space: nowrap;
  color: var(--blanc);
}
@media (hover: hover) and (pointer: fine) and (min-width: 1280px) {
  .hero-defiler { bottom: calc(var(--cadre-bas) / 2 - 44px); }
  .hero-defiler span { display: block; }
  .hero-defiler:hover span { color: #FFC7F7; }
}
.hero-defiler::before, .hero-defiler::after {
  content: ""; position: absolute; left: 50%; top: 6px;
  width: 24px; height: 24px; margin-left: -12px;
  border-right: 4px solid var(--blanc); border-bottom: 4px solid var(--blanc);
  border-radius: 0 0 3px 0;
  rotate: 45deg;
  animation: chevron 1.7s cubic-bezier(.45, 0, .35, 1) infinite;
}
.hero-defiler::after { top: 22px; animation-delay: .22s; }
@media (hover: hover) and (pointer: fine) { .hero-defiler:hover::before, .hero-defiler:hover::after { border-color: #FFC7F7; } }
@keyframes chevron { 0% { opacity: 0; translate: 0 -10px; } 35% { opacity: 1; } 75%, 100% { opacity: 0; translate: 0 16px; } }

/* ---------- nuages (img/nuage-photo.webp, détouré) ---------- */
.nuage { position: absolute; display: block; height: auto; pointer-events: none; }
.hero .nuage { z-index: 4; }
.n-titre { width: clamp(200px, 22vw, 360px); left: 10%; top: 62%; opacity: .95; animation: derive 26s ease-in-out infinite; }
.n-droite { width: clamp(260px, 30vw, 470px); right: -9%; top: 64%; animation: derive 32s ease-in-out infinite reverse; }
.n-gauche { width: clamp(200px, 22vw, 350px); left: -9%; top: 24%; opacity: .9; animation: derive 30s ease-in-out infinite; }
@keyframes derive { 0%, 100% { translate: 0 0; } 50% { translate: 26px -6px; } }

/* ==========================================================
   BIENVENUE — photo encadrée qui déborde, texte et mot fantôme
   ========================================================== */
.bienvenue {
  position: relative;
  padding-top: clamp(64px, 7vw, 104px);
  overflow: hidden;
}
.bienvenue-grille {
  display: grid;
  grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
  gap: clamp(48px, 7vw, 110px);
  align-items: center;
  position: relative; z-index: 2;
}
.bienvenue-visuel { position: relative; padding: 70px 0 90px 34px; }
.filet-cadre {
  position: absolute;
  top: 34px; left: 0; right: 40px; bottom: 54px;
  border: 2px solid var(--nuit);
  border-top-color: var(--magenta);
}
.photo-portrait {
  position: relative;
  width: calc(100% - 74px);
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: 45% 45%;
}
.voile-sortie {
  position: absolute; z-index: 3;
  width: 62%;
  left: -12%; top: -96px;
  transform: scaleX(-1);
  filter: drop-shadow(0 20px 26px rgba(27, 32, 36, .28));
}
.photo-vignette {
  position: absolute; z-index: 2;
  right: 0; bottom: 18px;
  width: 44%;
  aspect-ratio: 1;
  object-fit: cover;
  object-position: 72% 50%;
  border: 8px solid var(--blanc);
  box-shadow: 0 24px 50px rgba(27, 32, 36, .22);
}

.bienvenue-texte { position: relative; }
.mot-fantome {
  position: absolute;
  top: -.66em; left: -.04em;
  font-size: clamp(64px, 8.4vw, 124px);
  font-weight: 900;
  line-height: 1;
  letter-spacing: -.03em;
  text-transform: uppercase;
  color: var(--fantome);
  z-index: -1;
  white-space: nowrap;
}
.bienvenue-texte > p:not(.manuscrite) { max-width: 560px; }
.chiffres {
  display: grid;
  grid-template-columns: repeat(4, auto);
  justify-content: start;
  gap: 0;
  margin: 34px 0 38px;
  border-top: 1px solid #DDE3EA;
  border-bottom: 1px solid #DDE3EA;
}
.chiffres li { padding: 18px 26px 16px 0; margin-right: 26px; border-right: 1px solid #DDE3EA; }
.chiffres li:last-child { border-right: 0; margin-right: 0; }
.chiffres strong { display: block; font-size: clamp(30px, 3vw, 42px); font-weight: 900; line-height: 1; color: var(--bleu); }
.chiffres small { font-size: .5em; font-weight: 800; }
.chiffres span { display: block; margin-top: 8px; font-size: 13px; font-weight: 700; color: var(--ardoise); }
.bienvenue-pied { display: flex; align-items: center; flex-wrap: wrap; gap: 18px 32px; }
.signature { font-family: var(--pinceau); font-size: 24px; color: var(--nuit); }

.transition-montagnes {
  display: block;
  width: 100%; height: auto;
  min-height: 150px;
  object-fit: cover; object-position: 70% 50%;
  margin-top: clamp(-40px, -2vw, 0px);
}

/* ==========================================================
   ACTIVITÉS — cartes photo étagées, noir et blanc puis couleur
   ========================================================== */
.activites { padding: clamp(40px, 5vw, 64px) 0 clamp(64px, 7vw, 104px); }
.tete-section { text-align: center; max-width: 960px; margin: 0 auto clamp(32px, 4vw, 56px); }
.tete-section > p { max-width: 640px; margin-inline: auto; }
.tete-section .titre-manuscrit + .etiquette { display: block; max-width: none; margin: -2px auto 18px; font-size: clamp(13px, 1.2vw, 15px); }
.tete-section .titre-manuscrit { display: flex; align-items: center; justify-content: center; gap: 26px; margin: 4px 0 14px; }
.icone-titre { width: clamp(40px, 4vw, 58px); height: auto; flex: none; transform: translateY(-10px) rotate(-6deg); }
.icone-titre.inverse { transform: translateY(-18px) scaleX(-1) rotate(-6deg) scale(.82); }

/* 5 cartes puis 4, décalées d'une demi-carte : grille de 10 colonnes, chaque carte en couvre 2 */
.cartes {
  --decale: 56px;
  display: grid;
  grid-template-columns: repeat(10, minmax(0, 1fr));
  align-items: start;
  row-gap: calc(var(--decale) + 34px);
  padding-top: var(--decale);
}
.carte {
  grid-column: span 2;
  position: relative;
  aspect-ratio: 3 / 5;
  overflow: hidden;
  background: var(--encre);
  color: var(--blanc);
}
.carte:nth-child(2n) { margin-top: calc(-1 * var(--decale)); }
.carte:nth-child(6) { grid-column: 3 / span 2; }
/* 7 cartes : les deux dernières restent centrées sous les cinq premières */
.carte:nth-child(6):nth-last-child(2) { grid-column: 4 / span 2; }
.carte img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  filter: grayscale(1) contrast(1.06);
  transition: filter .5s, transform .8s;
}
.carte-photo { position: absolute; inset: 0; display: block; }
.carte-texte { pointer-events: none; }
.carte-texte a { pointer-events: auto; }
@media (hover: hover) and (pointer: fine) { .carte h3 a:hover { text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 2px; } }
.carte::after {
  content: "";
  pointer-events: none;
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(27, 32, 36, 0) 40%, rgba(27, 32, 36, .78) 100%);
  transition: opacity .4s;
}
@media (hover: hover) and (pointer: fine) { .carte:hover img { filter: none; transform: scale(1.05); } }
/* la photo glisse un peu dans son cadre au défilement (le script règle « translate ») : elle déborde pour ne jamais laisser de vide */
.js .carte-photo img { scale: 1.14; }

/* bandeau des activités qui défile, en grand, au-dessus des cartes (le script le fait tourner) */
.defile-activites {
  display: flex; overflow: hidden; margin: 0 0 clamp(40px, 5vw, 72px); padding: 4px 0;
  /* on l'attrape à l'horizontale ; à la verticale, le doigt fait toujours défiler la page */
  cursor: grab; touch-action: pan-y;
  -webkit-user-select: none; user-select: none;
}
.defile-activites.saisi { cursor: grabbing; }
.defile-piste { display: flex; flex: none; width: max-content; will-change: transform; }
.defile-activites p {
  flex: none; margin: 0; padding-right: .5em;
  display: flex; align-items: center; gap: .5em;
  font-size: clamp(30px, 4.6vw, 74px); font-weight: 900; line-height: 1.08; letter-spacing: -.02em;
  text-transform: uppercase; white-space: nowrap;
  color: transparent; -webkit-text-stroke: 1.5px var(--nuit);
}
.defile-activites p.plein { color: var(--bleu); -webkit-text-stroke: 0; }
.defile-activites p::after { content: "\2726"; font-size: .4em; color: var(--magenta); -webkit-text-stroke: 0; }
.carte-texte { position: absolute; z-index: 2; left: 22px; right: 18px; bottom: 26px; transition: transform .4s; }
.carte h3 { color: var(--blanc); font-size: clamp(17px, 1.6vw, 22px); font-weight: 900; line-height: 1.1; text-transform: uppercase; }
.carte-texte p { margin: 6px 0 4px; font-size: 14px; font-weight: 600; line-height: 1.35; color: rgba(255, 255, 255, .85); }
.carte-info { font-size: 13px; font-weight: 800; color: #EE5BF2; }
.carte-actions {
  position: absolute; z-index: 3; left: 22px; right: 18px; bottom: 22px;
  display: flex; gap: 8px;
  opacity: 0; transform: translateY(14px);
  transition: opacity .35s, transform .35s;
}
.carte-actions a {
  flex: 1;
  padding: 9px 6px;
  border-radius: 4px;
  text-align: center;
  font-size: 12px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase;
  background: var(--blanc); color: var(--bleu);
}
.carte-actions a + a { background: var(--magenta); color: var(--blanc); }
@media (hover: hover) and (pointer: fine) { .carte:hover .carte-texte { transform: translateY(-52px); } }
@media (hover: hover) and (pointer: fine) { .carte:hover .carte-actions { opacity: 1; transform: none; } }

/* ==========================================================
   PARAPENTE — texte et formules à gauche, photo pleine hauteur à droite
   ========================================================== */
.parapente {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 46%);
  min-height: 820px;
}
.parapente-texte {
  position: relative;
  padding: clamp(70px, 8vw, 120px) clamp(40px, 6vw, 100px) clamp(70px, 8vw, 120px) max(var(--gouttiere), calc((100vw - var(--enveloppe)) / 2));
}
.parapente-texte .titre-section { margin: 10px 0 22px; max-width: 520px; }
.chapo { max-width: 540px; font-size: 17px; }
.formules {
  position: relative;
  margin: 38px 0 44px;
  max-width: 560px;
  counter-reset: f;
}
.formules::before {
  content: "";
  position: absolute;
  left: calc(-1 * max(var(--gouttiere), calc((100vw - var(--enveloppe)) / 2)));
  top: 0; bottom: 0;
  width: 5px;
  background: var(--magenta);
}
.formules li { position: relative; padding: 0 0 22px 38px; }
.formules li::before {
  content: "";
  position: absolute; left: 0; top: 6px;
  width: 14px; height: 14px;
  border-radius: 50%;
  border: 3px solid rgba(217, 6, 223, .3);
  background: var(--magenta);
  background-clip: padding-box;
}
.formules h3 { font-size: 18px; font-weight: 800; line-height: 1.35; margin-bottom: 6px; }
.formules h3 a { transition: color .2s; }
@media (hover: hover) and (pointer: fine) { .formules h3 a:hover { color: var(--bleu); } }
.formules p { font-size: 15px; margin: 0; }

.parapente-visuel { position: relative; overflow: hidden; background: var(--nuit); }
.parapente-visuel img {
  position: absolute; left: 0; right: 0; top: -60px;
  width: 100%; height: calc(100% + 120px);
  object-fit: cover;
  object-position: 50% 50%;
}
.parapente-visuel::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(29, 60, 78, .25), rgba(29, 60, 78, .55));
}
.filet-carre {
  position: absolute; z-index: 2;
  left: 50%; top: 79%;
  width: min(52%, 300px); aspect-ratio: 1;
  transform: translate(-50%, -50%);
  border: 2px solid rgba(217, 6, 223, .9);
}
.mot-espace {
  position: absolute; z-index: 3;
  left: 50%; top: 79%;
  transform: translate(-50%, -50%);
  margin: 0;
  text-align: center;
  font-size: clamp(34px, 4vw, 60px);
  font-weight: 900;
  line-height: 1.12;
  letter-spacing: .42em;
  text-indent: .42em;
  text-transform: uppercase;
  color: var(--blanc);
  white-space: nowrap;
}
.mot-espace span { display: block; }

/* ==========================================================
   BONS CADEAUX — ciel pastel entre deux rangées de nuages
   ========================================================== */
.cadeaux {
  position: relative;
  padding: clamp(84px, 8vw, 120px) 0 clamp(92px, 9vw, 130px);
  text-align: center;
  overflow: hidden;
  isolation: isolate;
}
.cadeaux-contenu { position: relative; z-index: 2; max-width: 760px; }
.cadeaux-contenu .titre-manuscrit { margin: 6px 0 22px; }
.cadeaux-contenu .duo-actions { justify-content: center; }
.cadeaux-contenu .etiquette + .accroche { margin-top: 12px !important; }
.cadeaux-contenu > p { font-size: 17px; color: var(--nuit); }
.puces-cadeau { display: flex; justify-content: center; flex-wrap: wrap; gap: 10px 28px; margin: 24px 0 34px; }
.puces-cadeau li { position: relative; padding-left: 22px; font-weight: 800; font-size: 14px; color: var(--nuit); }
.puces-cadeau li::before { content: ""; position: absolute; left: 0; top: 7px; width: 10px; height: 10px; border-radius: 50%; background: var(--magenta); }
.accroche {
  text-wrap: balance;
  margin: 0 0 30px !important;
  font-size: clamp(24px, 2.6vw, 34px) !important;
  font-weight: 900;
  line-height: 1.2;
  color: var(--bleu) !important;
}
.bord-nuages {
  position: absolute; left: 0; z-index: 1;
  width: 100%; height: clamp(110px, 13vw, 200px);
  background: var(--c-nuage, var(--blanc));
  -webkit-mask: url(assets/img/nuages-bord.svg) 50% 100% / cover no-repeat;
  mask: url(assets/img/nuages-bord.svg) 50% 100% / cover no-repeat;
  pointer-events: none;
}
.bord-nuages.bas { bottom: -8px; }
.bord-nuages.haut { top: -8px; transform: scale(-1, -1); }
.cadeaux-ballon {
  position: absolute; z-index: 3;
  width: clamp(120px, 12vw, 190px);
  right: 9%; top: clamp(40px, 5vw, 80px);
  filter: drop-shadow(0 30px 30px rgba(29, 60, 78, .22));
  animation: ballon-monte 10s ease-in-out infinite;
}
@keyframes ballon-monte { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-18px); } }
.cadeaux .n-cadeaux { z-index: 4; width: clamp(220px, 22vw, 340px); right: 2%; top: calc(clamp(40px, 5vw, 80px) + clamp(150px, 15vw, 240px)); opacity: .95; animation: derive 24s ease-in-out infinite; }

/* ==========================================================
   FAQ — trois cartes à pastille
   ========================================================== */
.questions { padding: var(--respiration) 0; }
.grille-questions {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(24px, 3.4vw, 50px);
  margin-top: clamp(28px, 3.4vw, 48px);
}
.question-photo { position: relative; aspect-ratio: 4 / 3; overflow: hidden; margin-bottom: 24px; }
.question-photo img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s cubic-bezier(.22, .61, .36, 1); }
@media (hover: hover) { .question:hover .question-photo img { transform: scale(1.05); } }
/* la photo mène au lien principal de la carte (app.js) */
.question-photo.cliquable { cursor: pointer; }
.pastille {
  position: absolute; top: 0; right: 0;
  width: 62px; padding: 9px 0 8px;
  background: var(--magenta); color: var(--blanc);
  text-align: center;
  font-size: 11px; font-weight: 800; letter-spacing: .1em; line-height: 1.2; text-transform: uppercase;
}
.pastille b { display: block; font-size: 24px; font-weight: 900; letter-spacing: 0; }
.question h3 { font-size: 20px; font-weight: 800; margin-bottom: 10px; }
.question p { font-size: 15px; margin-bottom: 22px; }
.question .duo-actions { gap: 10px; }
/* un vol précis visé depuis le menu (vol-prestige.html#prestige-hiver) : sa photo reste sous l'en-tête fixe */
.question[id] { scroll-margin-top: 110px; }
.collection-lien { margin-top: clamp(40px, 5vw, 64px); text-align: center; }

/* ==========================================================
   BANDEAU — bleu nuit et photo en filigrane (maquette « Paragliding. »)
   ========================================================== */
.bandeau {
  position: relative;
  padding: clamp(60px, 6vw, 90px) 0;
  background: var(--nuit);
  color: var(--blanc);
  overflow: hidden;
  isolation: isolate;
}
.bandeau-fond {
  position: absolute; left: 0; right: 0; top: -60px; z-index: -1;
  width: 100%; height: calc(100% + 120px);
  object-fit: cover; object-position: 70% 30%;
  mix-blend-mode: luminosity;
  opacity: .28;
}
.bandeau-grille { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 30px 60px; }
.bandeau-texte { position: relative; padding-left: 30px; }
.bandeau-texte::before { content: ""; position: absolute; left: 0; top: 4px; bottom: 4px; width: 5px; background: var(--magenta); }
.bandeau h2 { color: var(--blanc); font-size: clamp(28px, 3vw, 42px); font-weight: 900; line-height: 1.1; }
.bandeau-texte p { margin: 10px 0 0; font-size: 18px; font-weight: 600; opacity: .9; }

/* ==========================================================
   PIED DE PAGE
   ========================================================== */
.pied {
  position: relative;
  padding: clamp(70px, 7vw, 100px) 0 0;
  background: var(--encre);
  color: rgba(255, 255, 255, .72);
  font-size: 15px;
}
.pied-grille {
  display: grid;
  grid-template-columns: 1.5fr 1.2fr .8fr;
  gap: clamp(32px, 4vw, 64px);
  padding-bottom: 60px;
}
.pied-logo { height: 54px; width: auto; margin-bottom: 22px; }
.pied-marque p { max-width: 300px; }
.pied-reseaux { display: flex; gap: 14px; margin-top: 22px; }
.pied-reseaux a { display: grid; place-items: center; width: 40px; height: 40px; border: 1px solid rgba(255, 255, 255, .25); border-radius: 4px; color: var(--blanc); transition: background-color .25s, border-color .25s; }
@media (hover: hover) and (pointer: fine) { .pied-reseaux a:hover { background: var(--magenta); border-color: var(--magenta); } }
.pied-titre { color: var(--blanc); font-size: 15px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; margin-bottom: 24px; }
.galerie { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.galerie li { aspect-ratio: 1; padding: 3px; border: 1px solid rgba(217, 6, 223, .7); }
.galerie img { width: 100%; height: 100%; object-fit: cover; }
.coordonnees li { display: flex; gap: 14px; align-items: flex-start; margin-bottom: 16px; line-height: 1.5; }
.coordonnees svg { width: 20px; height: 20px; flex: none; margin-top: 1px; fill: none; stroke: var(--magenta); stroke-width: 1.8; stroke-linejoin: round; stroke-linecap: round; }
@media (hover: hover) and (pointer: fine) { .coordonnees a:hover, .pied-liens a:hover { color: var(--blanc); } }
.pied-liens li { margin-bottom: 10px; }
.pied-bas {
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: 10px 30px;
  padding-top: 26px; padding-bottom: 30px;
  border-top: 1px solid rgba(255, 255, 255, .12);
  font-size: 13px;
}
.pied-bas p { margin: 0; }
.pied-vertical {
  position: absolute;
  right: 18px; top: 50%;
  margin: 0;
  writing-mode: vertical-rl;
  transform: translateY(-50%) rotate(180deg);
  font-size: 11px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase;
  white-space: nowrap;
  color: rgba(255, 255, 255, .35);
}

/* ==========================================================
   PAGES INTERNES
   ========================================================== */
.hero-court { height: 52vh; min-height: 420px; }
.hero-court .hero-titre { font-size: clamp(40px, 6.4vw, 104px); }

/* page 404 */
.hero-404 .hero-titre { top: 40%; bottom: auto; transform: translate(-50%, -50%); text-align: center; font-size: clamp(120px, 24vw, 340px); }
.hero-404 .hero-titre .l1 { padding: 0; }
.hero-404 .hero-sous { text-align: center; font-size: clamp(14px, 1.6vw, 22px); margin-top: 8px; }
.hero-404 .hero-voile { top: calc(var(--cadre-haut) + 4%); }
.hero-404-actions {
  position: absolute; z-index: 5;
  left: 50%; bottom: calc(var(--cadre-bas) + clamp(30px, 5vh, 60px));
  transform: translateX(-50%);
  width: min(560px, calc(100% - 2 * var(--cadre-x) - 40px));
  text-align: center;
}
.hero-404-actions p { font-size: 17px; font-weight: 600; color: var(--blanc); text-shadow: 0 2px 12px rgba(4, 6, 40, .4); }
.hero-404-actions .duo-actions { justify-content: center; }

/* hero de page : même cadre, titre d'un seul mot */
.hero-page { height: 74vh; min-height: 560px; max-height: 820px; }
.hero-page .hero-titre { top: 50%; bottom: auto; transform: translate(-50%, -50%); text-align: center; font-size: clamp(46px, 8.6vw, 140px); }
.hero-page .hero-titre .l1 { padding: 0; }
.hero-page.titre-bas .hero-titre { top: auto; bottom: calc(var(--cadre-bas) + clamp(40px, 6vh, 56px)); transform: translateX(-50%); }
/* titre en bas à droite, un mot par ligne : pour une photo dont les visages occupent le centre (Vols enfants) */
.hero-page.titre-droite .hero-titre {
  top: auto; left: auto; right: calc(var(--cadre-x) + clamp(24px, 3vw, 48px));
  bottom: calc(var(--cadre-bas) + clamp(40px, 6vh, 56px));
  transform: none; text-align: right;
  font-size: clamp(46px, 6vw, 100px);
}
.hero-page.titre-droite .hero-titre .mot { display: block; }
.hero-page.titre-droite .hero-sous { margin-left: auto; text-align: right; white-space: nowrap; }
.hero-page.titre-droite .n-droite { display: none; }
.hero-page .hero-sous { text-align: center; margin-top: 22px; }
.hero-page .hero-photo { background-position: 50% 50%; }
.fil-ariane {
  position: absolute; z-index: 5;
  left: calc(var(--cadre-x) + 30px);
  bottom: calc(var(--cadre-bas) + 24px);
  display: flex; flex-wrap: wrap; gap: 8px;
  font-size: 13px; font-weight: 700;
  color: rgba(255, 255, 255, .92);
}
.fil-ariane li + li::before { content: "/"; margin-right: 8px; opacity: .6; }
@media (hover: hover) and (pointer: fine) { .fil-ariane a:hover { text-decoration: underline; } }

.section { padding: var(--respiration) 0; }
.section.serre { padding-top: clamp(48px, 5vw, 76px); }

/* fiche pratique */
.fiche {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(135px, 1fr));
  margin: 34px 0 38px;
  border-top: 1px solid #DDE3EA;
}
.fiche > div { padding: 18px 22px 16px 0; border-bottom: 1px solid #DDE3EA; }
.fiche dt { font-size: 12px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--magenta); }
.fiche dd { margin: 6px 0 0; font-size: 19px; font-weight: 800; line-height: 1.3; color: var(--nuit); }

/* pastille de prix sur les cartes à pastille */
.pastille.prix { width: auto; min-width: 62px; padding: 10px 14px 9px; }
.pastille.prix b { font-size: 22px; }
.question.sans-photo { border-top: 3px solid var(--nuit); padding-top: 26px; }
.question.sans-photo .pastille { position: static; display: inline-block; margin-bottom: 18px; }
.grille-questions.quatre { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.grille-questions.deux { grid-template-columns: repeat(2, minmax(0, 400px)); justify-content: center; }
.grille-questions.centree { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.grille-questions.centree > * { grid-column: span 2; }
.grille-questions.centree > :nth-child(3n+1):nth-last-child(2) { grid-column: 2 / span 2; }
.grille-questions.centree > :nth-child(3n+1):last-child { grid-column: 3 / span 2; }
.note-reserver { max-width: 640px; margin: clamp(28px, 3.4vw, 44px) auto 0; text-align: center; font-size: 15px; color: var(--ardoise); }

/* étapes numérotées */
.etapes {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(28px, 4vw, 56px);
  margin-top: clamp(40px, 5vw, 70px);
  counter-reset: etape;
}
.etapes > li { position: relative; padding-top: 22px; }
.etapes > li::after { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: var(--nuit); transform-origin: 0 50%; }
.etapes > li::before {
  counter-increment: etape;
  content: counter(etape, decimal-leading-zero);
  display: block;
  margin-bottom: 14px;
  font-size: 46px; font-weight: 900; line-height: 1;
  color: var(--bleu);
}
.etapes h3 { font-size: 19px; font-weight: 800; margin-bottom: 8px; }
.etapes p { font-size: 15px; margin: 0; }

/* FAQ en accordéon (details/summary : tout le texte reste dans la page) */
.faq-groupe { max-width: 920px; margin: 0 auto clamp(50px, 6vw, 80px); }
.faq-groupe:last-child { margin-bottom: 0; }
.faq-groupe > h2 {
  margin-bottom: 18px;
  font-size: 14px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase;
  color: var(--magenta);
}
.faq-liste { border-top: 1px solid #DDE3EA; }
.faq-liste details { border-bottom: 1px solid #DDE3EA; }
.faq-liste summary {
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  padding: 22px 0;
  list-style: none; cursor: pointer;
  font-size: 18px; font-weight: 800; line-height: 1.4; color: var(--nuit);
}
.faq-liste summary::-webkit-details-marker { display: none; }
.faq-liste summary::after {
  content: "+";
  flex: none;
  display: grid; place-items: center;
  width: 32px; height: 32px;
  border: 2px solid var(--magenta); border-radius: 4px;
  font-size: 20px; font-weight: 700; line-height: 1;
  color: var(--magenta);
  transition: transform .3s, background-color .3s, color .3s;
}
.faq-liste details[open] summary::after { transform: rotate(45deg); background: var(--magenta); color: var(--blanc); }
@media (hover: hover) and (pointer: fine) { .faq-liste summary:hover { color: var(--bleu); } }
.faq-liste details > p { margin: 0; padding: 0 64px 24px 0; }

/* frise chronologique */
.frise { position: relative; max-width: 860px; margin: clamp(40px, 5vw, 70px) auto 0; padding-left: 46px; }
.frise::before { content: ""; position: absolute; left: 9px; top: 8px; bottom: 8px; width: 3px; background: var(--magenta); transform-origin: 50% 0; scale: 1 var(--trace, 1); }
.frise > li { position: relative; padding-bottom: 42px; }
.frise > li:last-child { padding-bottom: 0; }
.frise > li::before {
  content: "";
  position: absolute; left: -46px; top: 6px;
  width: 21px; height: 21px; border-radius: 50%;
  background: var(--blanc); border: 4px solid var(--magenta);
}
.frise .annee { display: block; font-family: var(--pinceau); font-size: 34px; line-height: 1; color: var(--bleu); }
.frise h3 { font-size: 20px; font-weight: 800; margin: 8px 0 6px; }
.frise p { margin: 0; }

/* équipe */
.equipe {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0;
  margin-top: clamp(40px, 5vw, 70px);
  border-top: 1px solid #DDE3EA; border-bottom: 1px solid #DDE3EA;
}
.equipe > li { padding: 30px 26px 28px 0; margin-right: 26px; border-right: 1px solid #DDE3EA; }
.equipe > li:last-child { border-right: 0; margin-right: 0; }
.equipe .prenom { display: block; font-family: var(--pinceau); font-size: 36px; line-height: 1.1; color: var(--nuit); }
.equipe .role { display: block; margin: 6px 0 10px; font-size: 12px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--magenta); }
.equipe p { margin: 0; font-size: 15px; }

/* contact */
.contact-grille { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(48px, 7vw, 110px); align-items: start; }
.contact-infos .coordonnees { margin-top: 26px; }
.contact-infos .coordonnees li { color: var(--ardoise); font-size: 17px; }
.contact-infos .coordonnees a { color: var(--nuit); font-weight: 800; }
@media (hover: hover) and (pointer: fine) { .contact-infos .coordonnees a:hover { color: var(--bleu); } }
.encart {
  margin-top: 30px; padding: 22px 26px;
  border-left: 5px solid var(--magenta);
  background: #F6F7FB;
  font-size: 15px;
}
.encart strong { color: var(--nuit); }
.formulaire { display: grid; grid-template-columns: 1fr 1fr; gap: 20px 22px; }
.formulaire .plein { grid-column: 1 / -1; }
.formulaire label { display: block; margin-bottom: 8px; font-size: 12px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--nuit); }
.formulaire input, .formulaire select, .formulaire textarea {
  width: 100%;
  padding: 14px 16px;
  border: 2px solid #CBD3DD; border-radius: 4px;
  background: var(--blanc);
  font: inherit; font-size: 16px; color: var(--nuit);
  transition: border-color .2s;
}
.formulaire input:focus, .formulaire select:focus, .formulaire textarea:focus { outline: none; border-color: var(--bleu); }
.formulaire textarea { min-height: 150px; resize: vertical; }
.formulaire .btn { justify-self: start; cursor: pointer; }
.formulaire .mention-champs { margin: -4px 0 0; font-size: 13px; font-weight: 600; color: var(--ardoise); }

/* liste de points cochés */
.coches { margin: 24px 0 32px; }
.coches li { position: relative; padding: 0 0 12px 32px; color: var(--nuit); font-weight: 700; }
.coches li::before {
  content: ""; position: absolute; left: 2px; top: 5px;
  width: 9px; height: 15px;
  border-right: 3px solid var(--magenta); border-bottom: 3px solid var(--magenta);
  transform: rotate(40deg);
}

/* avis Google */
.avis { padding: var(--respiration) 0; }
.avis .tete-section { margin-bottom: 30px; }
.avis-note {
  display: flex; align-items: center; justify-content: center; flex-wrap: wrap;
  gap: 14px 22px;
  margin-bottom: clamp(40px, 5vw, 64px);
}
.avis-note > strong { font-size: clamp(54px, 5.4vw, 76px); font-weight: 900; line-height: 1; color: var(--bleu); }
.avis-detail { display: flex; flex-direction: column; gap: 4px; font-size: 14px; font-weight: 700; color: var(--nuit); }
.avis-detail .etoiles { font-size: 24px; }
.etoiles {
  display: inline-block;
  letter-spacing: 2px; line-height: 1;
  color: var(--magenta);
}
.avis-detail .etoiles {
  background: linear-gradient(90deg, var(--magenta) 94%, #DDE3EA 94%);
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
}
.grille-avis { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(20px, 3vw, 40px); }
/* sous les témoignages : laisser un avis sur Google, Tripadvisor ou Facebook */
.avis-laisser { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 14px 20px; margin-top: clamp(40px, 5vw, 64px); }
.avis-laisser p { margin: 0; font-size: 15px; font-weight: 700; color: var(--nuit); text-align: center; text-wrap: balance; }
.avis-laisser .duo-actions { justify-content: center; gap: 10px; }
@media (max-width: 420px) { .avis-laisser .btn.petit { padding-inline: 14px; } }
.avis-carte {
  position: relative;
  display: flex; flex-direction: column;
  margin: 0;
  padding: 34px 30px 28px;
  border: 1px solid #DDE3EA;
  border-top: 3px solid var(--magenta);
  background: var(--blanc);
}
.avis-carte::before {
  content: "\201C";
  position: absolute; right: 24px; top: 6px;
  font-family: var(--pinceau); font-size: 90px; line-height: 1;
  color: var(--fantome);
}
.avis-carte .etoiles { font-size: 16px; }
.avis-carte blockquote { margin: 16px 0 24px; }
.avis-carte blockquote p { margin: 0; font-size: 16px; line-height: 1.65; color: var(--nuit); }
.avis-carte figcaption { display: flex; align-items: center; gap: 14px; margin-top: auto; }
.initiale {
  display: grid; place-items: center;
  width: 42px; height: 42px; flex: none;
  background: var(--nuit); color: var(--blanc);
  font-weight: 900;
}
.avis-carte figcaption b { display: block; color: var(--nuit); font-size: 15px; }
.avis-carte figcaption small { display: block; font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ardoise); }

/* vidéos verticales encadrées */
.medias { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 300px)); justify-content: center; gap: clamp(24px, 4vw, 56px); }
.media { margin: 0; padding: 10px; border: 2px solid var(--nuit); border-top-color: var(--magenta); }
.media video { display: block; width: 100%; aspect-ratio: 9 / 16; object-fit: cover; background: var(--encre); }
.media figcaption { padding: 12px 4px 2px; font-size: 13px; font-weight: 700; color: var(--nuit); text-align: center; }
/* vidéos de vol en paysage (le décor compte), sous les cartes d'une section de vols */
.medias.paysage { grid-template-columns: repeat(auto-fit, minmax(260px, 560px)); }
.medias.paysage .media video { aspect-ratio: 16 / 9; }
/* trois vidéos ou plus : une seule ligne sur ordinateur, les colonnes se partagent la largeur */
.medias.paysage.trois { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.grille-questions + .medias { margin-top: clamp(48px, 6vw, 80px); }

/* partenaires */
.partenaires { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.partenaires li {
  padding: 9px 16px;
  border: 1px solid #DDE3EA; border-radius: 4px;
  font-size: 14px; font-weight: 700; color: var(--nuit);
}

/* chiffres à trois colonnes */
.chiffres:has(> li:nth-child(3):last-child) { grid-template-columns: repeat(3, auto); }

/* texte courant d'une page */
.texte-page { max-width: 760px; margin: 0 auto; }
.texte-page h2 { margin: 48px 0 14px; font-size: 24px; font-weight: 900; text-transform: uppercase; }
.texte-page h2:first-child { margin-top: 0; }

/* ==========================================================
   HERO ANIMÉ DE L'ACCUEIL
   Quatre plans qui bougent à des vitesses différentes (souris, défilement),
   photo qui zoome lentement, nuages et voiles qui traversent le ciel,
   titre qui apparaît lettre par lettre. Sans JavaScript : tout est statique.
   ========================================================== */
.hero-anime .hero-plan {
  position: absolute; inset: 0;
  pointer-events: none;
  --dx: 0px; --dy: 0px; --ds: 0px;
  translate: calc(var(--px, 0) * var(--dx)) calc(var(--py, 0) * var(--dy) + var(--sy, 0) * var(--ds));
}
.hero-anime .plan-photo { inset: -6%; z-index: 0; --dx: -16px; --dy: -10px; --ds: 220px; }
.hero-anime .plan-loin  { z-index: 1; --dx: -30px; --dy: -16px; --ds: 140px; }
.hero-anime .hero-cadre { z-index: 2; }
.hero-anime .plan-titre { z-index: 3; --dx: 14px; --dy: 10px; --ds: -170px; opacity: calc(1 - var(--sy, 0) * 1.5); }
.hero-anime .plan-pres  { z-index: 4; --dx: 54px; --dy: 26px; --ds: -330px; }
.hero-anime .hero-photo { z-index: 0; transform-origin: 62% 38%; animation: hero-zoom 28s ease-in-out infinite alternate; }
@keyframes hero-zoom { from { transform: scale(1); } to { transform: scale(1.12); } }

/* lueur du soleil, en haut à gauche de la photo */
.hero-lueur {
  position: absolute; inset: 0; z-index: 1;
  background: radial-gradient(circle at 5% 4%, rgba(255, 214, 150, .6), rgba(255, 214, 150, 0) 34%);
  mix-blend-mode: screen;
  pointer-events: none;
  animation: hero-lueur 7s ease-in-out infinite alternate;
}
@keyframes hero-lueur { from { opacity: .45; } to { opacity: .95; } }

/* nuages qui traversent le ciel, du plus lointain au plus proche */
.nuage-file {
  position: absolute; left: 0; top: var(--t);
  width: var(--w); height: auto;
  opacity: var(--o, .8);
  animation: nuage-traverse var(--d) linear infinite;
  animation-delay: var(--del, 0s);
}
@keyframes nuage-traverse { from { transform: translateX(-48vw); } to { transform: translateX(118vw); } }
.nf-1 { --t: 27%; --w: 17vw; --d: 95s;  --del: -22s; --o: .7;  filter: blur(.6px); }
.nf-2 { --t: 44%; --w: 11vw; --d: 125s; --del: -74s; --o: .55; filter: blur(1px); }
.nf-3 { --t: 55%; --w: 21vw; --d: 108s; --del: -48s; --o: .65; }
.nf-4 { --t: 90%; --w: 36vw; --d: 68s;  --del: -12s; --o: .95; }
.nf-5 { --t: 33%; --w: 24vw; --d: 82s;  --del: -55s; --o: .88; }

/* voiles au loin qui traversent en se balançant */
.voile-vol {
  position: absolute; left: 0; top: var(--t);
  width: var(--w);
  opacity: var(--o, 1);
  animation: voile-traverse var(--d) linear infinite;
  animation-delay: var(--del, 0s);
}
.voile-vol img { display: block; width: 100%; height: auto; animation: voile-balance 5s ease-in-out infinite alternate; }
@keyframes voile-traverse { from { transform: translateX(-10vw); } to { transform: translateX(112vw); } }
@keyframes voile-balance { from { transform: translateY(-10px) rotate(-5deg); } to { transform: translateY(12px) rotate(4deg); } }
.vv-1 { --t: 30%; --w: clamp(36px, 4vw, 60px); --d: 72s; --del: -18s; }
.vv-2 { --t: 16%; --w: clamp(24px, 2.6vw, 40px); --d: 98s; --del: -64s; --o: .85; filter: blur(.4px); }

/* titre découpé lettre par lettre (par app.js) */
.hero .mot { display: inline-block; overflow: hidden; padding: 0 .02em .16em; margin-bottom: -.16em; vertical-align: top; }
.hero .lettre {
  display: inline-block;
  background: linear-gradient(180deg, #FFFFFF 0%, #FFFFFF 38%, #C9CCFF 78%, #9EA3FF 100%);
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
}
.js .hero .l1, .js .hero .l2 { background: none; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* entrée en scène : la photo se pose, le cadre se dessine, les lettres montent */
.js .hero-anime .plan-photo { opacity: 0; scale: 1.16; }
.js .hero-anime .hero-cadre { opacity: 0; scale: 1.05; }
.js .hero .lettre { translate: 0 112%; }
.js .hero-anime .hero-sous,
.js .hero-anime .hero-reseaux,
.js .hero-anime .hero-defiler { opacity: 0; translate: 0 16px; }
.js .hero-anime .plan-loin,
.js .hero-anime .plan-pres { opacity: 0; }
.js.pret .hero-anime .plan-photo { animation: hero-entree-photo 1.4s cubic-bezier(.2, .7, .2, 1) forwards; }
.js.pret .hero-anime .hero-cadre { animation: hero-entree 1s cubic-bezier(.2, .7, .2, 1) .25s forwards; }
.js.pret .hero .lettre { animation: hero-lettre .7s cubic-bezier(.2, .85, .25, 1) forwards; animation-delay: calc(.3s + var(--i) * 22ms); }
.js.pret .hero-anime .hero-sous { animation: hero-entree .7s ease-out 1s forwards; }
.js.pret .hero-anime .hero-reseaux,
.js.pret .hero-anime .hero-defiler { animation: hero-entree .7s ease-out 1.3s forwards; }
.js.pret .hero-anime .plan-loin,
.js.pret .hero-anime .plan-pres { animation: hero-apparait 1.6s ease-out .5s forwards; }
@keyframes hero-entree-photo { to { opacity: 1; scale: 1; } }
@keyframes hero-entree { to { opacity: 1; scale: 1; translate: 0 0; } }
@keyframes hero-lettre { to { translate: 0 0; } }
@keyframes hero-apparait { to { opacity: 1; } }

/* ==========================================================
   HERO « CHOISISSEZ VOTRE CIEL »
   Une grande photo du lac au coucher du soleil : elle entre en douceur, respire lentement
   (zoom très lent) et glisse un peu avec la souris et au défilement.
   Le curseur Zen ↔ Adrénaline choisit l'activité ; les fiches sont toutes dans la page,
   le script ne fait que basculer « est-actif ».
   ========================================================== */
.hero-ciel .hero-photo {
  animation: none;
  background: linear-gradient(180deg, #6C73C9 0%, #F2A57A 38%, #F7B25E 46%, #3F4A3A 62%, #1E2A1E 100%);
}
.hero-scene { position: absolute; inset: -3%; z-index: 1; pointer-events: none; }
.hero-scene .plan {
  position: absolute; inset: 0;
  display: block; width: 100%; height: 100%; max-width: none;
  object-fit: cover; object-position: 50% 50%;
  transform: translate(calc(var(--px, 0) * var(--prof, 0) * -34px), calc(var(--py, 0) * var(--prof, 0) * -16px + var(--sy, 0) * var(--prof, 0) * -170px));
}
.plan-coucher { --prof: .5; }
/* lisibilité : un voile léger sous l'en-tête, derrière le titre et la fiche, et en bas */
.hero-ciel::after {
  content: ""; position: absolute; inset: 0; z-index: 2;
  background:
    radial-gradient(ellipse 42% 44% at 22% 64%, rgba(20, 12, 30, .45), rgba(20, 12, 30, 0) 72%),
    radial-gradient(ellipse 30% 38% at 84% 64%, rgba(20, 12, 30, .45), rgba(20, 12, 30, 0) 72%),
    linear-gradient(180deg, rgba(20, 12, 30, .35) 0%, rgba(20, 12, 30, 0) 20%, rgba(20, 12, 30, 0) 58%, rgba(20, 12, 30, .5) 100%);
  pointer-events: none;
}
@media (prefers-reduced-motion: no-preference) {
  .js .hero-ciel .plan { opacity: 0; scale: 1.08; }
  .js.pret .hero-ciel .plan {
    animation: photo-entre 1.4s cubic-bezier(.2, .7, .2, 1) forwards, photo-respire 28s ease-in-out 1.4s infinite alternate;
  }
}
@keyframes photo-entre { to { opacity: 1; scale: 1; } }
@keyframes photo-respire { from { opacity: 1; scale: 1; } to { opacity: 1; scale: 1.06; } }

/* le titre, à gauche ; la fiche de l'activité, à droite ; le choix en bas du cadre */
.hero-ciel .hero-titre {
  left: calc(var(--cadre-x) + 44px); transform: none;
  bottom: calc(var(--cadre-bas) + 104px);
  font-size: clamp(42px, 6.2vw, 104px);
  text-align: left;
}
.hero-ciel .hero-titre .l1 { padding-right: 0; }
.hero-ciel .hero-titre .l2 { padding-left: .9em; }
.hero-ciel .hero-sous { text-align: left; margin-top: 16px; padding-left: .25em; }

.ciel-fiches {
  position: absolute; z-index: 5;
  right: calc(var(--cadre-x) + 44px); bottom: calc(var(--cadre-bas) + 104px);
  width: min(360px, 32vw); height: 200px;
}
.ciel-fiche {
  position: absolute; right: 0; bottom: 0; width: 100%;
  text-align: right; color: var(--blanc);
  text-shadow: 0 2px 16px rgba(30, 14, 60, .5);
  opacity: 0; visibility: hidden; translate: 0 16px;
  transition: opacity .6s ease, translate .7s var(--sortie), visibility 0s .7s;
}
.ciel-fiche.est-actif { opacity: 1; visibility: visible; translate: 0 0; transition-delay: .35s, .35s, 0s; }
.ciel-nom { margin: 0 0 6px; font-family: var(--pinceau); font-size: clamp(38px, 3.6vw, 58px); line-height: 1.05; }
.ciel-nom a { transition: color .2s; }
@media (hover: hover) and (pointer: fine) { .ciel-nom a:hover { color: #FFD9F5; } }
.ciel-accroche { margin: 0 0 4px; font-size: 18px; font-weight: 700; line-height: 1.35; }
.ciel-info { margin: 0 0 18px; font-size: 12px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: #FFE0F8; }
.ciel-fiche .duo-actions { justify-content: flex-end; gap: 10px; }
.ciel-fiche .btn { text-shadow: none; }

/* le badge « prestige » : un médaillon de verre dépoli, un anneau de texte qui tourne,
   un reflet qui passe ; il s'efface dès que le visiteur choisit une activité */
.ciel-badge {
  position: absolute; right: 0; bottom: -14px;
  width: 252px; aspect-ratio: 1; border-radius: 50%;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; color: var(--blanc);
  background:
    radial-gradient(circle at 30% 22%, rgba(255, 255, 255, .26), rgba(255, 255, 255, 0) 58%),
    radial-gradient(circle at 70% 90%, rgba(217, 6, 223, .35), rgba(217, 6, 223, 0) 60%),
    rgba(30, 14, 52, .34);
  -webkit-backdrop-filter: blur(9px) saturate(1.25); backdrop-filter: blur(9px) saturate(1.25);
  box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .6), 0 22px 54px rgba(20, 8, 40, .38);
  overflow: hidden;
  transition: opacity .45s ease, scale .6s var(--sortie), visibility 0s;
}
.ciel-badge.cache { opacity: 0; scale: .82; visibility: hidden; transition: opacity .35s ease, scale .45s ease, visibility 0s .45s; }
/* tout le médaillon est cliquable : le lien « Collection Prestige » couvre le disque */
.ciel-badge:not(.cache) { cursor: pointer; }
.ciel-badge:focus-within { scale: 1.05; box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .85), 0 0 0 7px rgba(255, 229, 160, .22), 0 26px 60px rgba(20, 8, 40, .45); }
@media (hover: hover) and (pointer: fine) { .ciel-badge:hover:not(.cache) { scale: 1.05; box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .85), 0 0 0 7px rgba(255, 229, 160, .22), 0 26px 60px rgba(20, 8, 40, .45); } }
@media (hover: hover) and (pointer: fine) { .ciel-badge:hover .badge-anneau { animation-duration: 14s; } }
.ciel-badge .badge-lien { position: static; margin: 0; }
.ciel-badge .badge-lien a { position: absolute; inset: 0; z-index: 3; border-radius: 50%; font-size: 0; color: transparent; }
.ciel-badge .badge-lien a:focus-visible { outline: none; }
.ciel-badge:has(.badge-lien a:focus-visible) { outline: 3px solid #FFE5A0; outline-offset: 4px; }
/* les mots de l'anneau : lus par le script pour dessiner l'anneau, gardés pour les lecteurs d'écran */
.badge-anneau-texte { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
.badge-anneau {
  position: absolute; inset: 0; width: 100%; height: 100%;
  font: 800 10.5px var(--sans); letter-spacing: .18em; fill: rgba(255, 255, 255, .82);
  animation: badge-tourne 40s linear infinite;
  pointer-events: none;
}
@keyframes badge-tourne { to { rotate: 360deg; } }
.ciel-badge::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(115deg, transparent 34%, rgba(255, 255, 255, .38) 50%, transparent 66%);
  translate: -130% 0;
  animation: badge-reflet 7s ease-in-out 3.4s infinite;
}
@keyframes badge-reflet { 0%, 72% { translate: -130% 0; } 100% { translate: 130% 0; } }
.ciel-badge p { position: relative; margin: 0; max-width: 66%; text-shadow: 0 2px 12px rgba(30, 14, 60, .45); }
.badge-haut, .badge-bas { font-size: 10.5px; font-weight: 800; letter-spacing: .2em; text-transform: uppercase; line-height: 1.35; }
.ciel-badge .badge-mot {
  max-width: 78%;
  margin: 6px 0 7px;
  font-family: var(--pinceau); font-size: 31px; line-height: 1.02;
  background: linear-gradient(100deg, #FFE5A0 0%, #FFF8E6 46%, #FFC7F7 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  text-shadow: none !important;
  filter: drop-shadow(0 3px 12px rgba(30, 10, 60, .45));
}
.js.pret .ciel-badge { animation: badge-entre 1s cubic-bezier(.3, 1.45, .5, 1) 1.2s backwards; }
@keyframes badge-entre { from { opacity: 0; scale: .55; rotate: -24deg; } }

/* tant qu'on n'a pas touché au curseur, son bouton appelle doucement */
.ciel-curseur:not(.touche) input::-webkit-slider-thumb { animation: pouce-appel 1.9s ease-in-out 3.2s infinite; }
@keyframes pouce-appel {
  0%, 100% { box-shadow: 0 0 0 7px rgba(217, 6, 223, .22), 0 6px 18px rgba(20, 10, 40, .45); }
  50% { box-shadow: 0 0 0 15px rgba(217, 6, 223, 0), 0 0 0 7px rgba(255, 255, 255, .5), 0 6px 18px rgba(20, 10, 40, .45); }
}

/* le titre de l'accueil : un reflet doré passe sur les lettres de temps en temps */
.hero-ciel .hero-titre .l1, .hero-ciel .hero-titre .l2 {
  background:
    linear-gradient(105deg, rgba(255, 231, 168, 0) 40%, rgba(255, 236, 180, .95) 50%, rgba(255, 231, 168, 0) 60%) no-repeat,
    linear-gradient(180deg, #FFFFFF 0%, #FFFFFF 38%, #C9CCFF 78%, #9EA3FF 100%);
  background-size: 260% 100%, 100% 100%;
  background-position: 160% 0, 0 0;
  -webkit-background-clip: text; background-clip: text;
}
.js.pret .hero-ciel .hero-titre .l1, .js.pret .hero-ciel .hero-titre .l2 { animation: titre-reflet 9s ease-in-out 2.8s infinite; }
.js.pret .hero-ciel .hero-titre .l2 { animation-delay: 3s; }
@keyframes titre-reflet { 0% { background-position: 160% 0, 0 0; } 16%, 100% { background-position: -60% 0, 0 0; } }

/* sans script : la liste des activités, simplement */
.ciel-choix {
  position: absolute; z-index: 5;
  left: calc(var(--cadre-x) + 44px); right: calc(var(--cadre-x) + 44px);
  bottom: calc(var(--cadre-bas) + 30px);
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: 6px 18px;
}
.ciel-choix li {
  font-size: 12px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
  color: rgba(255, 255, 255, .74);
  text-shadow: 0 1px 10px rgba(30, 14, 60, .55);
  transition: color .3s;
}

/* le curseur d'intensité, de la plus douce à la plus forte ; le script y range la liste, un nom par cran */
.ciel-curseur {
  position: absolute; z-index: 5;
  left: calc(var(--cadre-x) + 44px); right: calc(var(--cadre-x) + 44px);
  bottom: calc(var(--cadre-bas) + 24px);
  display: flex; align-items: center; gap: 18px;
}
.curseur-bout {
  flex: none;
  font-size: 11px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase;
  color: rgba(255, 255, 255, .86);
  text-shadow: 0 1px 10px rgba(30, 14, 60, .55);
}
.curseur-bout.fort { color: #FFC7F7; }
.curseur-piste { position: relative; flex: 1; }
.curseur-piste input {
  display: block; width: 100%; height: 30px; margin: 0;
  background: transparent; cursor: pointer;
  -webkit-appearance: none; appearance: none;
}
.curseur-piste input:focus { outline: none; }
.curseur-piste input::-webkit-slider-runnable-track { height: 4px; border-radius: 2px; background: linear-gradient(90deg, rgba(196, 220, 255, .95), #FFFFFF 48%, var(--magenta)); }
.curseur-piste input::-moz-range-track { height: 4px; border-radius: 2px; background: linear-gradient(90deg, rgba(196, 220, 255, .95), #FFFFFF 48%, var(--magenta)); }
.curseur-piste input::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none; box-sizing: border-box;
  width: 26px; height: 26px; margin-top: -11px;
  border-radius: 50%; border: 5px solid var(--magenta); background: var(--blanc);
  box-shadow: 0 0 0 7px rgba(217, 6, 223, .22), 0 6px 18px rgba(20, 10, 40, .45);
  transition: transform .2s, box-shadow .2s;
}
.curseur-piste input::-moz-range-thumb {
  box-sizing: border-box; width: 26px; height: 26px;
  border-radius: 50%; border: 5px solid var(--magenta); background: var(--blanc);
  box-shadow: 0 0 0 7px rgba(217, 6, 223, .22), 0 6px 18px rgba(20, 10, 40, .45);
}
.curseur-piste input:active::-webkit-slider-thumb { transform: scale(1.15); }
.curseur-piste input:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 4px var(--blanc), 0 0 0 9px rgba(217, 6, 223, .55); }
.curseur-piste input:focus-visible::-moz-range-thumb { box-shadow: 0 0 0 4px var(--blanc), 0 0 0 9px rgba(217, 6, 223, .55); }
/* un nom par cran, aligné sur la position du bouton (13 px = la moitié de sa largeur) */
.curseur-piste .ciel-choix { position: absolute; left: 0; right: 0; bottom: 100%; display: block; height: 22px; margin: 0; }
.curseur-piste .ciel-choix li {
  position: absolute; bottom: 4px;
  left: calc(13px + (100% - 26px) * var(--i) / var(--n));
  translate: -50% 0;
  white-space: nowrap; cursor: pointer;
  font-size: 11px; letter-spacing: .07em;
}
.curseur-piste .ciel-choix li::after {
  content: ""; position: absolute; left: 50%; top: calc(100% + 16px);
  width: 6px; height: 6px; margin-left: -3px; border-radius: 50%;
  background: rgba(255, 255, 255, .85);
}
.curseur-piste .ciel-choix li.est-actif { color: var(--blanc); }
@media (hover: hover) and (pointer: fine) { .curseur-piste .ciel-choix li:hover { color: var(--blanc); } }
/* le dernier nom (« Saut à l'élastique ») passe sur deux lignes et se décale un peu vers la gauche, son repère reste sur le cran */
.curseur-piste .ciel-choix li:last-child { white-space: normal; width: 8.2em; text-align: center; line-height: 1.15; translate: -58% 0; }
.curseur-piste .ciel-choix li:last-child::after { left: 58%; }
.js .ciel-fiches, .js .ciel-curseur { opacity: 0; translate: 0 14px; }
.js.pret .ciel-fiches, .js.pret .ciel-curseur { opacity: 1; translate: 0 0; transition: opacity .7s ease 1.1s, translate .7s ease 1.1s; }

/* moins de place : seul le nom de l'activité choisie reste au-dessus du curseur (10 crans) */
@media (max-width: 1320px) {
  .curseur-piste .ciel-choix li:not(.est-actif) { opacity: 0; }
  .curseur-piste .ciel-choix li:not(.est-actif)::after { opacity: 0; }
}

@media (max-width: 760px) {
  .hero-ciel .hero-titre { left: calc(var(--cadre-x) + 22px); top: calc(var(--cadre-haut) + 92px); bottom: auto; font-size: clamp(36px, 10.6vw, 60px); }
  .hero-ciel .hero-sous { margin-top: 10px; }
  .ciel-fiches { left: calc(var(--cadre-x) + 22px); right: calc(var(--cadre-x) + 22px); width: auto; bottom: calc(var(--cadre-bas) + 90px); height: 176px; }
  .ciel-fiche { text-align: left; }
  .ciel-fiche .duo-actions { justify-content: flex-start; }
  .ciel-badge { width: 164px; bottom: 0; }
  .ciel-badge .badge-mot { font-size: 23px; margin: 4px 0 5px; }
  .badge-haut, .badge-bas { font-size: 8px; letter-spacing: .14em; }
  .ciel-accroche { font-size: 16px; }
  .ciel-curseur { left: calc(var(--cadre-x) + 18px); right: calc(var(--cadre-x) + 18px); bottom: calc(var(--cadre-bas) + 16px); gap: 12px; }
  .curseur-bout { font-size: 10px; letter-spacing: .1em; }
  .ciel-choix { left: calc(var(--cadre-x) + 18px); right: calc(var(--cadre-x) + 18px); }
  /* photo panoramique dont le sujet est à droite (Agnès et Bernard sur « L'esprit Jennif'Air ») */
  .cadrage-portrait .hero-photo { background-position: 78% 50% !important; }
  /* en portrait, le cadrage garde le parapente et le lac ; le haut s'assombrit sous le titre */
  .hero-scene .plan { object-position: 74% 50%; }
  .hero-ciel::after {
    background:
      linear-gradient(180deg, rgba(20, 12, 30, .58) 0%, rgba(20, 12, 30, .38) 22%, rgba(20, 12, 30, 0) 42%, rgba(20, 12, 30, 0) 56%, rgba(20, 12, 30, .62) 100%);
  }
  .hero-anime .hero-photo { background-position: 70% 50%; }
  .nf-1 { --w: 30vw; } .nf-3 { --w: 38vw; } .nf-5 { --w: 42vw; } .nf-4 { --w: 60vw; }
  .vv-1 { --t: 40%; }
}

@media (prefers-reduced-motion: reduce) {
  .hero-anime *, .hero-anime { animation: none !important; }
  .js .hero-anime .plan-photo, .js .hero-anime .hero-cadre, .js .hero-anime .plan-loin, .js .hero-anime .plan-pres,
  .js .hero-anime .hero-sous, .js .hero-anime .hero-reseaux, .js .hero-anime .hero-defiler { opacity: 1; scale: none; translate: none; }
  .js .hero .lettre { translate: none; }
  .hero-defiler::before, .hero-defiler::after { animation: none; }
  .hero-anime .hero-plan, .hero-ciel .plan { translate: none; }
  .nuage-file, .voile-vol { display: none; }
}

/* ==========================================================
   FONDS DE SECTION ET TRANSITIONS
   Le fond de chaque section est posé par outils/assembler.ps1
   (classe fond-*), qui insère aussi les séparateurs .sep entre deux fonds.
   ========================================================== */
.fond-blanc   { background-color: var(--blanc); }
.fond-sable   { background-color: var(--sable); }
.fond-nuit    { background-color: var(--nuit); color: rgba(255, 255, 255, .78); }

/* couleurs nommées pour les séparateurs et les bords de nuages */
.de-blanc   { --sep-de: var(--blanc); }   .vers-blanc   { --sep-vers: var(--blanc); }   .c-blanc   { --c-nuage: var(--blanc); }
.de-sable   { --sep-de: var(--sable); }   .vers-sable   { --sep-vers: var(--sable); }   .c-sable   { --c-nuage: var(--sable); }
.de-nuit    { --sep-de: var(--nuit); }    .vers-nuit    { --sep-vers: var(--nuit); }    .c-nuit    { --c-nuage: var(--nuit); }
.de-encre   { --sep-de: var(--encre); }   .vers-encre   { --sep-vers: var(--encre); }

/* séparateur : la section du dessus « coule » dans celle du dessous */
.sep {
  --sep-h: clamp(46px, 6vw, 96px);
  position: relative; z-index: 4;
  height: var(--sep-h);
  margin-top: -1px;
  background: var(--sep-vers);
  pointer-events: none;
}
.sep::before {
  content: "";
  position: absolute; inset: 0;
  background: var(--sep-de);
  -webkit-mask: var(--sep-forme) 0 0 / 100% 100% no-repeat;
  mask: var(--sep-forme) 0 0 / 100% 100% no-repeat;
}
.sep-vague  { --sep-forme: url(assets/img/sep-vague.svg); }
.sep-crete  { --sep-forme: url(assets/img/sep-crete.svg); }
.sep-nuages { --sep-forme: url(assets/img/sep-nuages.svg); }
.sep-courbe { --sep-forme: url(assets/img/sep-courbe.svg); }
/* sections coupées en deux (texte + photo) : la forme mord sur la photo */
.sep.chevauche-bas { background: transparent; margin-bottom: calc(-1 * var(--sep-h)); }
.sep.chevauche-haut { background: transparent; margin-top: calc(-1 * var(--sep-h)); }
.sep.chevauche-haut::before { background: var(--sep-vers); transform: scaleY(-1); }

/* respirations après un séparateur */
.bienvenue { padding-bottom: var(--respiration); }
.bienvenue:has(.transition-montagnes) { padding-bottom: 0; }
.activites { padding-top: var(--respiration); }
.bienvenue:has(.transition-montagnes) + .activites { padding-top: clamp(40px, 5vw, 80px); }
/* l'image de montagnes fond le haut (section courante) dans la section suivante */
.transition-montagnes { background: linear-gradient(180deg, transparent 38%, var(--sep-vers, var(--blanc)) 74%); margin-bottom: -4px; }

/* le bandeau final reçoit une forme en haut et en bas : il respire davantage */
.bandeau { padding: clamp(60px, 6vw, 90px) 0; }

/* sous une section sombre, ce sont les nuages pastel qui montent dans le bleu nuit */
.bord-nuages.haut.c-nuit {
  top: -2px; transform: none;
  -webkit-mask-image: url(assets/img/nuages-bord-creux.svg);
  mask-image: url(assets/img/nuages-bord-creux.svg);
}

/* sections sombres */
.fond-nuit h2, .fond-nuit h3, .fond-nuit .titre-manuscrit, .fond-nuit .titre-centre, .fond-nuit .titre-section { color: var(--blanc); }
.fond-nuit .etiquette { color: var(--rose-clair); }
.fond-nuit .tete-section > p { color: rgba(255, 255, 255, .78); }
.fond-nuit .btn-contour { border-color: var(--blanc); color: var(--blanc); background-image: linear-gradient(var(--blanc), var(--blanc)); }
@media (hover: hover) and (pointer: fine) { .fond-nuit .btn-contour:hover { color: var(--nuit); } }
.fond-nuit .avis-note > strong, .fond-nuit .avis-detail, .fond-nuit .avis-laisser p { color: var(--blanc); }
.fond-nuit .avis-carte { border-color: transparent; border-top-color: var(--magenta); box-shadow: 0 24px 50px rgba(0, 0, 0, .22); }
.fond-nuit .question p { color: rgba(255, 255, 255, .78); }
.fond-nuit .question.sans-photo { border-top-color: var(--rose-clair); }
.fond-nuit .faq-liste summary { color: var(--blanc); }

/* encarts blancs sur fond teinté */
.fond-sable .encart { background: var(--blanc); }

/* apparition douce au défilement (seulement si JavaScript est actif) */
/* chaque type d'élément a son entrée (classes posées par app.js).
   Les états de départ ne s'appliquent que si le visiteur accepte les animations. */
:root { --sortie: cubic-bezier(.2, .7, .2, 1); --rideau: cubic-bezier(.7, 0, .2, 1); }
@media (prefers-reduced-motion: no-preference) {
  .js .an-monte  { opacity: 0; translate: 0 34px; transition: opacity .9s var(--sortie), translate .9s var(--sortie); }
  .js .an-gauche { opacity: 0; translate: -36px 0; transition: opacity .9s var(--sortie), translate .9s var(--sortie); }
  .js .an-zoom   { opacity: 0; scale: .9; transition: opacity .8s var(--sortie), scale .9s var(--sortie); }
  .js .an-fondu  { opacity: 0; transition: opacity 1s ease; }
  .js .an-pop    { opacity: 0; scale: .3; transition: opacity .4s ease .55s, scale .7s cubic-bezier(.3, 1.7, .5, 1) .55s; }
  .js .an-carte  { opacity: 0; scale: .94; transition: opacity .9s var(--sortie), scale 1s var(--sortie), transform .5s var(--sortie); }
  .js .an-masque { clip-path: inset(0 0 100% 0); translate: 0 .45em; transition: clip-path 1.1s var(--rideau), translate 1.1s var(--sortie); }
  .js .an-ecrit  { clip-path: inset(-25% 100% -25% 0); transition: clip-path 1.2s cubic-bezier(.65, 0, .25, 1); }
  .js .an-etiquette { opacity: 0; letter-spacing: .6em; transition: opacity .9s ease, letter-spacing 1.3s var(--sortie); }
  .js .an-rideau { clip-path: inset(100% 0 0 0); transition: clip-path 1s var(--rideau); }
  .js .an-rideau-cote { clip-path: inset(0 0 0 100%); transition: clip-path 1.4s var(--rideau); }
  .js .an-rideau img, .js .an-rideau video, .js .an-rideau-cote img { scale: 1.2; transition: scale 1.4s var(--sortie); }
  /* photos des cartes : la transition d'apparition ne doit pas effacer celle du zoom au survol */
  .js .question-photo.an-rideau img { transition: scale 1.4s var(--sortie), transform .6s cubic-bezier(.22, .61, .36, 1); }
  .js .an-trace  { clip-path: inset(0 100% 100% 0); transition: clip-path 1.5s var(--rideau) .25s; }
  .js .an-plane  { opacity: 0; translate: -90px -60px; rotate: -14deg; transition: opacity 1s ease .3s, translate 1.8s var(--sortie) .3s, rotate 1.8s var(--sortie) .3s; }
  .js .an-espace { opacity: 0; scale: 1.25; filter: blur(8px); transition: opacity 1.1s ease .5s, scale 1.6s var(--sortie) .5s, filter 1.2s ease .5s; }
  .js .an-ballon { opacity: 0; translate: 0 180px; transition: opacity 1.2s ease, translate 2.4s var(--sortie); }
  .js .an-barre::before, .js .etapes > li.revele::after { scale: 1 0; transition: scale 1.3s var(--rideau) .2s; }
  .js .etapes > li.revele::after { scale: 0 1; }
  /* boutons : l'entrée garde aussi leurs effets de survol */
  .js .btn.revele { transition: opacity .9s var(--sortie), translate .9s var(--sortie), background-color .25s, color .25s, border-color .25s, transform .25s, box-shadow .25s, background-size .45s cubic-bezier(.6, 0, .2, 1); }
  .js .btn.revele.visible { transition: opacity .9s var(--sortie), translate .35s ease-out, background-color .25s, color .25s, border-color .25s, transform .25s, box-shadow .25s, background-size .45s cubic-bezier(.6, 0, .2, 1); }

  .js .revele.visible { opacity: 1; translate: none; scale: none; rotate: none; filter: none; }
  .js .an-masque.visible { clip-path: inset(-10% -5% -30% -5%); }
  .js .an-ecrit.visible { clip-path: inset(-25% -5% -25% -2%); }
  .js .an-etiquette.visible { letter-spacing: .16em; }
  .js .an-rideau.visible, .js .an-rideau-cote.visible, .js .an-trace.visible { clip-path: inset(0); }
  .js .an-rideau.visible img, .js .an-rideau.visible video, .js .an-rideau-cote.visible img { scale: none; }
  .js .an-barre.visible::before, .js .etapes > li.revele.visible::after { scale: none; }

  /* en-tête : le logo et le menu descendent à l'ouverture de la page */
  .js .entete > .logo, .js .entete .nav > ul > li { opacity: 0; translate: 0 -14px; transition: opacity .8s ease, translate .8s var(--sortie); }
  .js.pret .entete > .logo, .js.pret .entete .nav > ul > li { opacity: 1; translate: none; }
  .js.pret .entete .nav > ul > li:nth-child(1) { transition-delay: .1s; }
  .js.pret .entete .nav > ul > li:nth-child(2) { transition-delay: .17s; }
  .js.pret .entete .nav > ul > li:nth-child(3) { transition-delay: .24s; }
  .js.pret .entete .nav > ul > li:nth-child(4) { transition-delay: .31s; }
  .js.pret .entete .nav > ul > li:nth-child(5) { transition-delay: .38s; }

  /* héros des pages intérieures : la photo se pose, le cadre se dessine */
  .js .hero-page .hero-photo, .js .hero-404 .hero-photo { opacity: 0; scale: 1.14; }
  .js.pret .hero-page .hero-photo, .js.pret .hero-404 .hero-photo { animation: hero-entree-photo 1.2s var(--sortie) forwards, hero-zoom 30s ease-in-out 1.2s infinite alternate; }
  .js .hero-page .hero-cadre, .js .hero-404 .hero-cadre { opacity: 0; scale: 1.05; }
  .js.pret .hero-page .hero-cadre, .js.pret .hero-404 .hero-cadre { animation: hero-entree .9s var(--sortie) .15s forwards; }
  .js .hero-page .hero-sous, .js .hero-page .fil-ariane, .js .hero-404 .hero-sous, .js .hero-404-actions { opacity: 0; translate: 0 16px; }
  .js.pret .hero-page .hero-sous, .js.pret .hero-404 .hero-sous { animation: hero-entree .7s ease-out .6s forwards; }
  .js.pret .hero-page .fil-ariane, .js.pret .hero-404-actions { animation: hero-entree .7s ease-out .8s forwards; }
  .js .hero-page .hero-defiler { opacity: 0; translate: 0 16px; }
  .js.pret .hero-page .hero-defiler { animation: hero-entree .7s ease-out 1s forwards; }
}

/* reflet qui traverse les boutons pleins au survol */
.btn-bleu::after, .btn-magenta::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, .45) 50%, transparent 70%);
  translate: -120% 0;
  transition: translate .8s ease;
}
@media (hover: hover) and (pointer: fine) { .btn-bleu:hover::after, .btn-magenta:hover::after { translate: 120% 0; } }

/* cartes d'activités : reflet qui suit la souris (position posée par app.js) */
.carte { transition: transform .5s var(--sortie, ease); }
.carte::before {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background: radial-gradient(circle at var(--mx, 50%) var(--my, 50%), rgba(255, 255, 255, .25), rgba(255, 255, 255, 0) 45%);
  opacity: 0; transition: opacity .3s;
  pointer-events: none;
}
@media (hover: hover) and (pointer: fine) { .carte:hover::before { opacity: 1; } }

/* « Faites défiler » qui accompagne la lecture (créé par app.js) : apparaît une fois le hero passé,
   s'efface quand le pied de page arrive ; sous l'en-tête, pour que le menu mobile le recouvre */
.defiler-suite {
  position: fixed; z-index: 15;
  left: 50%; bottom: 22px;
  translate: -50% 14px;
  display: flex; align-items: center; gap: 10px;
  padding: 12px 18px 12px 20px;
  border: 0; border-radius: 999px;
  background: rgba(27, 32, 36, .8);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  box-shadow: 0 8px 24px rgba(10, 6, 30, .22);
  color: var(--blanc);
  font: 800 11px/1 var(--sans); letter-spacing: .22em; text-transform: uppercase;
  cursor: pointer;
  opacity: 0; visibility: hidden;
  transition: opacity .25s var(--sortie), translate .25s var(--sortie), visibility 0s linear .25s, background-color .2s ease;
}
.defiler-suite.visible { opacity: 1; visibility: visible; translate: -50% 0; transition-delay: 0s; }
.defiler-suite::after {
  content: "";
  width: 8px; height: 8px; margin-top: -5px;
  border-right: 2.5px solid currentColor; border-bottom: 2.5px solid currentColor;
  rotate: 45deg;
}
.defiler-suite:focus-visible { outline: 3px solid var(--rose-clair); outline-offset: 3px; }
@media (hover: hover) and (pointer: fine) {
  .defiler-suite:hover { background: var(--bleu); }
}
@media (prefers-reduced-motion: no-preference) {
  .defiler-suite.visible::after { animation: suite-pousse 1.8s ease-in-out infinite; }
}
@media (prefers-reduced-motion: reduce) {
  .defiler-suite { translate: -50% 0; }
}
@keyframes suite-pousse { 0%, 100% { translate: 0 0; } 50% { translate: 0 4px; } }
@media (max-width: 760px) {
  .defiler-suite { bottom: 16px; width: 46px; height: 46px; padding: 0; justify-content: center; }
  .defiler-suite span { display: none; }
}

/* barre de progression de lecture */
.progression {
  position: fixed; top: 0; left: 0; z-index: 60;
  width: 100%; height: 3px;
  background: linear-gradient(90deg, var(--bleu), var(--magenta));
  transform-origin: 0 50%;
  scale: 0 1;
  pointer-events: none;
}

/* textes juridiques */
.hero-page.hero-court .hero-titre { font-size: clamp(36px, 6vw, 96px); }
.texte-page h3 { margin: 30px 0 10px; font-size: 17px; font-weight: 800; color: var(--nuit); }
.texte-page > p, .texte-page li { color: var(--ardoise); }
.texte-page .coches li { font-weight: 600; color: var(--nuit); }
.texte-page h2[id], .texte-page h3[id] { scroll-margin-top: 110px; }
.sommaire { margin: 40px 0 10px; padding: 26px 30px; background: var(--blanc); border-left: 5px solid var(--magenta); }
.sommaire ol { margin: 0; padding-left: 20px; list-style: decimal; columns: 2; column-gap: 40px; }
.sommaire li { margin-bottom: 8px; font-weight: 700; color: var(--nuit); break-inside: avoid; }
@media (hover: hover) and (pointer: fine) { .sommaire a:hover { color: var(--bleu); } }
@media (max-width: 760px) { .sommaire ol { columns: 1; } }

/* crédit du pied de page */
.credit { display: inline-flex; align-items: center; gap: 10px; }
.credit img { height: 36px; width: auto; opacity: .8; transition: opacity .2s; }
@media (hover: hover) and (pointer: fine) { .credit a:hover img { opacity: 1; } }

/* ==========================================================
   RESPONSIVE
   ========================================================== */
@media (max-width: 1180px) {
  .nav > ul { gap: 16px; }
  .nav > ul > li > a { font-size: 14px; }
  .btn-reserver { display: none; }
}

@media (max-width: 1024px) {
  .entete { gap: 14px; }
  .nav {
    position: fixed; inset: 0; z-index: -1;
    display: flex; align-items: center; justify-content: center;
    background: var(--bleu);
    opacity: 0; visibility: hidden;
    transition: opacity .3s, visibility .3s;
  }
  .menu-ouvert .nav { opacity: 1; visibility: visible; }
  .nav > ul { flex-direction: column; align-items: center; gap: 6px; }
  .nav > ul > li > a { font-size: 24px; font-weight: 800; color: var(--blanc); }
  .nav { flex-direction: column; justify-content: flex-start; overflow-y: auto; padding: 130px 24px 56px; }
  .nav > ul { margin: auto 0; width: 100%; }
  .nav > ul > li { text-align: center; }
  .a-sous { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 4px 10px; }
  .a-sous > a { padding-right: 0 !important; }
  .a-sous > a::before { display: none; }
  .sous-toggle {
    display: grid; place-items: center;
    width: 38px; height: 38px; padding: 0;
    border: 2px solid rgba(255, 255, 255, .6); border-radius: 50%;
    background: transparent; color: var(--blanc); cursor: pointer;
    transition: transform .3s, background-color .3s;
  }
  .sous-toggle::before { content: ""; width: 9px; height: 9px; margin-top: -4px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); }
  .a-sous.ouvert .sous-toggle { transform: rotate(180deg); background: rgba(255, 255, 255, .15); }
  .sous-menu { display: none; }
  .a-sous.ouvert .sous-menu {
    display: flex; flex-direction: column; gap: 18px;
    position: static; flex-basis: 100%; width: auto;
    opacity: 1; visibility: visible; transform: none;
    margin: 8px 0 14px; padding: 18px 0 4px;
    background: transparent; border: 0; border-top: 1px solid rgba(255, 255, 255, .2); box-shadow: none;
  }
  .a-sous.ouvert .sous-col { min-width: 0; align-items: center; }
  .a-sous.ouvert .sous-col a { color: rgba(255, 255, 255, .86); font-size: 17px; padding: 6px 0; white-space: normal; }
  .a-sous.ouvert .sous-col .sous-titre { color: var(--blanc); font-size: 14px; }
  .a-sous.ouvert .sous-menu > .sous-vedette { flex-basis: auto; align-self: stretch; margin-bottom: 0; padding-bottom: 14px; border-bottom-color: rgba(255, 255, 255, .2); text-align: center; }
  .a-sous.ouvert .sous-menu > a.sous-vedette, .a-sous.ouvert .sous-menu > .sous-vedette > a { color: #FFB3FB; font-size: 14px; white-space: normal; }
  .a-sous.ouvert .bientot { color: rgba(255, 255, 255, .55); }
  .entete-actions { margin-left: auto; }
  .burger {
    display: grid; place-content: center; gap: 5px;
    width: 46px; height: 46px; padding: 0;
    border: 2px solid currentColor; border-radius: 4px;
    background: transparent; color: inherit; cursor: pointer;
  }
  .burger span { display: block; width: 20px; height: 2px; background: currentColor; transition: transform .3s, opacity .3s; }
  .menu-ouvert .burger { color: var(--blanc); }
  .menu-ouvert .burger span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .menu-ouvert .burger span:nth-child(2) { opacity: 0; }
  .menu-ouvert .burger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

  .cartes { --decale: 40px; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .carte, .carte:nth-child(6), .carte:nth-child(6):nth-last-child(2) { grid-column: auto; }
  .carte:nth-child(2n) { margin-top: 0; }
  .carte:nth-child(3n+2) { margin-top: calc(-1 * var(--decale)); }
  /* une carte seule sur la dernière ligne : au milieu */
  .carte:nth-child(3n+1):last-child { grid-column: 2; }

  .parapente { grid-template-columns: 1fr; }
  .parapente-texte { padding-inline: var(--gouttiere); }
  .formules::before { left: calc(-1 * var(--gouttiere)); }
  .parapente-visuel { min-height: 520px; }

  .pied-grille { grid-template-columns: 1fr 1fr; }
  .contact-grille { grid-template-columns: 1fr; }
  .grille-questions, .grille-questions.quatre { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grille-questions.centree { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .grille-questions.centree > *, .grille-questions.centree > :nth-child(3n+1):nth-last-child(2), .grille-questions.centree > :nth-child(3n+1):last-child { grid-column: span 2; }
  .grille-questions.centree > :nth-child(odd):last-child { grid-column: 2 / span 2; }
  .grille-avis { grid-template-columns: 1fr; max-width: 640px; margin-inline: auto; }
}

@media (max-width: 760px) {
  .hero { min-height: 640px; }
  .hero-cadre { border-radius: 22px; }
  .hero-titre { font-size: clamp(40px, 12.4vw, 90px); }
  .n-titre { display: none; }
  .n-gauche { width: 40vw; top: 22%; }
  .hero-titre .l1 { padding-right: 0; }
  .hero-titre .l2 { padding-left: .9em; }
  .hero-sous { text-align: left; letter-spacing: .1em; max-width: 15em; margin-left: .2em; }
  .hero-voile { width: 46vw; right: -8vw; top: 13%; }
  .hero-voile-loin { left: 10%; top: 70%; }
  .hero-reseaux { display: none; }
  .btn-cadeau span { display: none; }
  .btn-cadeau { padding: 12px 13px; }
  .logo img { height: 38px; }

  .bienvenue-grille { grid-template-columns: 1fr; }
  .bienvenue-visuel { max-width: 460px; }
  .chiffres { grid-template-columns: repeat(2, auto); }
  .chiffres li:nth-child(2) { border-right: 0; margin-right: 0; }
  .chiffres li:nth-child(n+3) { border-top: 1px solid #DDE3EA; }

  .cartes { --decale: 0px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .carte:nth-child(n) { margin-top: 0; }
  .carte:nth-child(3n+1):last-child { grid-column: auto; }
  .carte:nth-child(2n) { translate: 0 40px; }
  .carte-actions { opacity: 1; transform: none; left: 12px; right: 12px; bottom: 12px; }
  .carte-texte { left: 14px; right: 12px; bottom: 58px; }
  .carte:hover .carte-texte { transform: none; }
  .carte img { filter: none; }
  .activites { padding-bottom: 110px; }

  .tete-section .titre-manuscrit { gap: 12px; }
  .icone-titre { width: 30px; }

  .grille-questions, .grille-questions.quatre, .grille-questions.deux, .grille-questions.centree { grid-template-columns: 1fr; }
  .grille-questions.centree > *, .grille-questions.centree > :nth-child(3n+1):nth-last-child(2), .grille-questions.centree > :nth-child(3n+1):last-child, .grille-questions.centree > :nth-child(odd):last-child { grid-column: auto; }
  .etapes { grid-template-columns: 1fr; }
  .formulaire { grid-template-columns: 1fr; }
  .equipe { grid-template-columns: 1fr; }
  .equipe > li { border-right: 0; margin-right: 0; padding-right: 0; }
  .equipe > li + li { border-top: 1px solid #DDE3EA; }
  .faq-liste details > p { padding-right: 0; }
  .hero-page .hero-titre { font-size: clamp(38px, 12vw, 80px); }
  /* titre en bas : au-dessus du fil d'Ariane (qui passe sur deux lignes), sans le nuage de droite qui le cacherait */
  .hero-page.titre-bas .hero-titre, .hero-page.titre-droite .hero-titre { bottom: calc(var(--cadre-bas) + 84px); }
  .hero-page.titre-bas .n-droite { display: none; }
  /* au téléphone, la photo est entière en hauteur et les visages en occupent le milieu :
     le titre passe en haut, dans le ciel, centré sur une ligne, et la photo se décale pour garder les deux visages */
  .hero-page.titre-droite .hero-titre { top: calc(var(--cadre-haut) + 100px); bottom: auto; left: 50%; right: auto; transform: translateX(-50%); text-align: center; }
  .hero-page.titre-droite .hero-titre .mot { display: inline-block; }
  .hero-page.titre-droite .hero-sous { margin-inline: auto; text-align: center; white-space: normal; }
  .hero-page.titre-droite .hero-photo { background-position: 35% 50% !important; }
  .fil-ariane { left: calc(var(--cadre-x) + 18px); right: calc(var(--cadre-x) + 18px); }
  .cadeaux-ballon { width: 24vw; right: 4vw; top: 30px; }
  .cadeaux .n-cadeaux { display: none; }
  .pied-grille { grid-template-columns: 1fr; }
  .pied-vertical { display: none; }
  .mot-espace { letter-spacing: .3em; text-indent: .3em; }
}

/* ==========================================================
   TÉLÉPHONE ET ÉCRANS TACTILES
   ========================================================== */
@media (max-width: 760px) {
  /* titres du haut des pages intérieures : dans le cadre, et à la ligne entre les mots quand ils sont longs
     (Collection Prestige, Conditions de vente : ils débordaient du cadre, coupés des deux côtés) ;
     le sous-titre centré sous le titre (il était calé sur le bord gauche du bloc) */
  .hero-page .hero-titre { width: auto; left: calc(var(--cadre-x) + 16px); right: calc(var(--cadre-x) + 16px); transform: translateY(-50%); }
  .hero-page.titre-bas .hero-titre { transform: none; }
  .hero-page.titre-droite .hero-titre { left: calc(var(--cadre-x) + 16px); right: calc(var(--cadre-x) + 16px); transform: none; }
  .hero-page .hero-sous { margin-inline: auto; text-align: center; }
  /* une taille de photo réglée pour l'ordinateur (ULM : 150 % de large) laissait un vide gris sous la photo :
     au téléphone, la photo couvre tout le cadre */
  .hero-page .hero-photo { background-size: cover !important; }
}
/* pas de voile gris au toucher : chaque bouton a son propre retour (il s'enfonce légèrement) */
html { -webkit-tap-highlight-color: transparent; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
a, button, summary, .btn, .btn-cadeau, .btn-reserver, .burger, .sous-toggle { touch-action: manipulation; }
.btn, .btn-cadeau, .btn-reserver, .burger, .sous-toggle { -webkit-user-select: none; user-select: none; }
.btn:active, .btn-cadeau:active, .btn-reserver:active { transform: scale(.97); }
/* au doigt, les petits boutons des cartes (Réserver, Offrir) passent à 44 px de haut */
@media (pointer: coarse) {
  .btn.petit { padding-top: 13px; padding-bottom: 13px; }
}
/* tablettes tactiles (au-delà de 760 px) : les boutons des cartes d'activités restent visibles et la photo en couleurs,
   sans attendre un survol qui n'existe pas au doigt (au téléphone, la mise en page des cartes s'en charge déjà) */
@media (min-width: 761px) and (hover: none), (min-width: 761px) and (pointer: coarse) {
  .carte-actions { opacity: 1; transform: none; }
  .carte-texte { transform: translateY(-52px); }
  .carte img { filter: none; }
}


/* ==========================================================
   ADAPTATIONS AUX BLOCS NATIFS DE WORDPRESS
   Tout ce qui précède est le CSS de la maquette, inchangé.
   Les blocs gardent les classes de la maquette (className) ;
   ces règles ne corrigent que ce que le balisage des blocs déplace.
   ========================================================== */

/* Texte posé directement dans un conteneur (étiquette, signature, bouton seul…) :
   le paragraphe d'enrobage s'efface, son contenu prend la place du texte d'origine. */
p.x-in { all: unset !important; display: contents !important; }

/* Images de la médiathèque : la classe du composant est portée par la figure,
   l'image la remplit et hérite de son cadrage. */
html :where(figure.wp-block-image) { margin: 0; }
html :where(figure.wp-block-image) > a { object-fit: inherit; object-position: inherit; }
html :where(figure.wp-block-image) > img,
html :where(figure.wp-block-image) > a > img {
  display: block;
  width: 100%; height: 100%;
  object-fit: inherit; object-position: inherit;
  border-radius: inherit;
}
.question-photo > figure { height: 100%; }
.transition-montagnes > img { min-height: 150px; }
figure.pied-logo { width: max-content; }
figure.pied-logo > img { width: auto; }

/* lecteurs d'écran */
.screen-reader-text, .wp-block-social-link-label {
  position: absolute !important; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; padding: 0; margin: -1px;
}

/* ---------- réseaux sociaux (bloc natif) : les icônes au trait de la maquette ---------- */
.wp-block-social-link-anchor svg { display: none; }
/* en ligne, comme le SVG de la maquette : même hauteur de ligne */
.wp-block-social-link-anchor::before {
  content: ""; display: inline-block; vertical-align: baseline;
  width: 20px; height: 20px;
  background: currentColor;
  -webkit-mask: var(--ico) center / contain no-repeat;
  mask: var(--ico) center / contain no-repeat;
}
.wp-social-link-instagram { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8'%3E%3Crect x='3' y='3' width='18' height='18' rx='5'/%3E%3Ccircle cx='12' cy='12' r='4'/%3E%3Ccircle cx='17.3' cy='6.7' r='1.1' fill='%23000' stroke='none'/%3E%3C/svg%3E"); }
/* « body .is-layout-flex { display: flex } » de WordPress ne doit pas rallumer les réseaux du hero en mobile */
@media (max-width: 760px) { .hero-reseaux.wp-block-social-links { display: none; } }
.wp-social-link-facebook { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M13.5 21v-7.5h2.6l.4-3h-3V8.6c0-.9.3-1.5 1.5-1.5h1.6V4.4c-.3 0-1.2-.1-2.3-.1-2.3 0-3.8 1.4-3.8 3.9v2.3H7.9v3h2.6V21h3Z'/%3E%3C/svg%3E"); }

/* ---------- coordonnées : icônes en masque (pied de page et contact) ---------- */
.coordonnees li::before {
  content: ""; flex: none;
  width: 20px; height: 20px; margin-top: 1px;
  background: var(--magenta);
  -webkit-mask: var(--ico) center / contain no-repeat;
  mask: var(--ico) center / contain no-repeat;
}
.coordonnees .c-adresse { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linejoin='round' stroke-linecap='round'%3E%3Cpath d='M12 21s-6.5-5.6-6.5-11a6.5 6.5 0 0 1 13 0c0 5.4-6.5 11-6.5 11Z'/%3E%3Ccircle cx='12' cy='10' r='2.3'/%3E%3C/svg%3E"); }
.coordonnees .c-tel { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linejoin='round' stroke-linecap='round'%3E%3Cpath d='M6.6 3.5 9 3l1.6 4-2 1.3a11 11 0 0 0 7.1 7.1l1.3-2 4 1.6-.5 2.4a2 2 0 0 1-2 1.6C10.6 19 5 13.4 5 5.5a2 2 0 0 1 1.6-2Z'/%3E%3C/svg%3E"); }
.coordonnees .c-sms { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linejoin='round' stroke-linecap='round'%3E%3Crect x='4' y='5' width='16' height='12' rx='2'/%3E%3Cpath d='M8 21l3-4'/%3E%3C/svg%3E"); }
.coordonnees .c-mail { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linejoin='round' stroke-linecap='round'%3E%3Crect x='3' y='5' width='18' height='14' rx='2'/%3E%3Cpath d='m3.5 6 8.5 7 8.5-7'/%3E%3C/svg%3E"); }

/* ---------- flèche « découvrir » du hero : calque rendu cliquable par le script, avec son libellé
   « Faites défiler » ; la double flèche est dessinée par la feuille de la maquette (::before et ::after) ---------- */
.hero-defiler { cursor: pointer; }

/* ---------- vidéos (bloc natif) ---------- */
.media figcaption { margin: 0; }
/* WordPress pose les dimensions du fichier sur la vidéo (largeur, hauteur, proportions en ligne) :
   le format portrait de la maquette reprend la main */
.media video { height: auto !important; aspect-ratio: 9 / 16 !important; }
/* vidéos tournées à l'horizontale (vols été et hiver) : image entière, sans recadrage en bande verticale */
.medias.paysage .media video { aspect-ratio: 16 / 9 !important; }

/* ==========================================================
   EN-TÊTE : logo en images de la médiathèque, menu en listes
   ========================================================== */
.entete .logo { display: block; flex: none; }
.entete .logo a { display: block; }

/* sous-menu des activités : Collection Prestige en tête, puis deux colonnes titrées, Parapente à gauche, Autres activités à droite */
.sous-menu { display: grid; grid-template-columns: repeat(2, auto); align-items: start; gap: 0 36px; }
.sous-menu > .sous-titre { min-width: 190px; }
.sous-menu ul { display: block; }
.sous-menu a { display: block; color: var(--ardoise); font-size: 14px; font-weight: 600; line-height: 1.7; padding: 5px 0; white-space: nowrap; }
@media (hover: hover) and (pointer: fine) { .sous-menu a:hover { color: var(--bleu); } }
.sous-menu .sous-titre > a { color: var(--nuit); font-weight: 900; text-transform: uppercase; letter-spacing: .06em; font-size: 13px; }

/* bouton « Offrir un bon cadeau » : le cadeau est dessiné en masque, le couvercle saute */
.btn-cadeau::before {
  content: ""; flex: none;
  width: 20px; height: 20px;
  background: currentColor;
  --couvercle: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='3' y='7' width='18' height='4' rx='1'/%3E%3Cpath d='M12 7c-1.5-3-5-3.5-5-1.2C7 7 9.5 7 12 7Zm0 0c1.5-3 5-3.5 5-1.2C17 7 14.5 7 12 7Z'/%3E%3C/svg%3E");
  --boite: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 11h14v9a1 1 0 0 1-1 1H6a1 1 0 0 1-1-1v-9Z'/%3E%3C/svg%3E");
  -webkit-mask: var(--couvercle) 0 0 / 100% 100% no-repeat, var(--boite) 0 0 / 100% 100% no-repeat;
  mask: var(--couvercle) 0 0 / 100% 100% no-repeat, var(--boite) 0 0 / 100% 100% no-repeat;
  animation: cadeau-couvercle 3.6s ease-in-out infinite;
}
@media (hover: hover) and (pointer: fine) { .btn-cadeau:hover::before { animation: none; -webkit-mask-position: -1px -4px, 0 0; mask-position: -1px -4px, 0 0; } }
@keyframes cadeau-couvercle {
  0%, 60%, 76%, 100% { -webkit-mask-position: 0 0, 0 0; mask-position: 0 0, 0 0; }
  68% { -webkit-mask-position: 0 -3px, 0 0; mask-position: 0 -3px, 0 0; }
  82% { -webkit-mask-position: 0 -1.5px, 0 0; mask-position: 0 -1.5px, 0 0; }
}

/* menu mobile : le bouton est un paragraphe (le script le rend activable au clavier) */
.burger { margin: 0; }

@media (max-width: 1024px) {
  .burger {
    position: relative;
    display: block;
    width: 46px; height: 46px; padding: 0;
    border: 2px solid currentColor; border-radius: 4px;
    font-size: 0; line-height: 0; color: inherit; cursor: pointer;
    background: linear-gradient(currentColor, currentColor) 50% 50% / 20px 2px no-repeat;
    transition: background-size .3s;
  }
  .burger::before, .burger::after {
    content: "";
    position: absolute; left: 50%; top: 50%;
    width: 20px; height: 2px; margin: -1px 0 0 -10px;
    background: currentColor;
    transition: transform .3s;
  }
  .burger::before { transform: translateY(-7px); }
  .burger::after { transform: translateY(7px); }
  .menu-ouvert .burger { color: var(--blanc); background-size: 0 2px; }
  .menu-ouvert .burger::before { transform: rotate(45deg); }
  .menu-ouvert .burger::after { transform: rotate(-45deg); }

  .sous-menu { display: none; }
  .a-sous.ouvert .sous-menu { display: flex; flex-direction: column; align-items: center; gap: 0; }
  .a-sous.ouvert .sous-menu > li { min-width: 0; text-align: center; }
  .a-sous.ouvert .sous-menu > .sous-titre { margin-bottom: 18px; }
  .a-sous.ouvert .sous-menu a { color: rgba(255, 255, 255, .86); font-size: 17px; padding: 6px 0; white-space: normal; }
  .a-sous.ouvert .sous-menu .sous-titre > a { color: var(--blanc); font-size: 14px; }
}

/* ==========================================================
   FORMULAIRE (Contact Form 7, mêmes classes que la maquette)
   ========================================================== */
.contact-grille .wpcf7 { min-width: 0; }
.wpcf7 form.formulaire .wpcf7-form-control-wrap { display: block; }
/* le bouton d'envoi est un <input> : la règle des champs (.formulaire input) ne doit pas l'atteindre */
.formulaire input.btn {
  justify-self: start; width: auto; cursor: pointer;
  -webkit-appearance: none; appearance: none;
  padding: 15px 28px; border: 2px solid transparent; border-radius: 4px;
  font-family: inherit; font-size: 14px; font-weight: 800; line-height: 1.2;
}
.formulaire input.btn-bleu, .formulaire input.btn-bleu:focus { background: var(--bleu); color: var(--blanc); border-color: transparent; }
@media (hover: hover) and (pointer: fine) { .formulaire input.btn-bleu:hover { box-shadow: 0 12px 28px rgba(0, 0, 227, .35); } }
.formulaire .wpcf7-spinner { display: none; }
.wpcf7 form.formulaire.submitting .btn { opacity: .6; }
.formulaire .wpcf7-not-valid-tip { display: block; margin-top: 6px; font-size: 13px; font-weight: 700; color: var(--magenta); }
.formulaire input.wpcf7-not-valid, .formulaire textarea.wpcf7-not-valid { border-color: var(--magenta); }
.wpcf7 form.formulaire .wpcf7-response-output {
  grid-column: 1 / -1;
  margin: 0; padding: 14px 18px;
  border: 2px solid var(--bleu); border-radius: 4px;
  font-size: 15px; font-weight: 700; color: var(--nuit);
}
.wpcf7 form.formulaire.sent .wpcf7-response-output { border-color: #2E9E5B; }
.wpcf7 form.formulaire.invalid .wpcf7-response-output,
.wpcf7 form.formulaire.failed .wpcf7-response-output { border-color: var(--magenta); }

/* ==========================================================
   BLACK FRIDAY 2026 (jusqu'au 30 novembre) : bandeau + pastilles « −15 % »
   Affichés seulement avec la classe body.bf-actif, posée par functions.php jusqu'au 1er décembre.
   ========================================================== */
.bf-actif { --bf-h: 42px; }
.bandeau-bf {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  height: var(--bf-h); padding: 0 16px;
  overflow: hidden; white-space: nowrap;
  background: var(--nuit); color: var(--blanc);
  font-size: 14px; font-weight: 600; line-height: 1;
  text-decoration: none;
}
.bandeau-bf .bf-titre { font-weight: 900; letter-spacing: .08em; text-transform: uppercase; }
.bandeau-bf .bf-remise { padding: 5px 8px; border-radius: 4px; background: var(--magenta); font-weight: 900; }
.bandeau-bf .bf-court { display: none; }
.bandeau-bf .bf-lien { margin-left: 6px; font-weight: 800; text-decoration: underline; text-underline-offset: 3px; }
@media (hover: hover) and (pointer: fine) { .bandeau-bf:hover .bf-lien { color: #FFB3FB; } }
@media (max-width: 900px) {
  .bandeau-bf { gap: 8px; font-size: 13px; }
  .bandeau-bf .bf-long { display: none; }
  .bandeau-bf .bf-court { display: inline; }
  .bandeau-bf .bf-lien { display: none; }
}
/* l'en-tête est placé par rapport au haut de la page : il descend avec le bandeau (la photo d'en-tête suit d'elle-même) */
.bf-actif .entete:not(.fixe) { top: calc(var(--cadre-haut) + 22px + var(--bf-h)); }
/* pastille « −15 % » sous le prix des offres parapente */
.bf-actif .pastille.prix.pp::after {
  content: "−15 %";
  position: absolute; top: 100%; right: 0;
  padding: 5px 8px;
  background: var(--nuit); color: var(--blanc);
  font-size: 12px; font-weight: 900; letter-spacing: .02em;
}
.bf-actif .carte-info.pp::after {
  content: "−15 %";
  display: inline-block; margin-left: 8px; padding: 3px 6px; border-radius: 3px;
  background: var(--magenta); color: var(--blanc);
  font-size: 11px; font-weight: 900;
}