/* Jetons : voir DESIGN.md. Aucune couleur en dur en dehors de :root. */
@font-face {
  font-family: "Plus Jakarta Sans";
  src: url("../fonts/plus-jakarta-sans-latin.woff2") format("woff2");
  font-weight: 400 800;
  font-style: normal;
  font-display: swap;
}

:root {
  --fond: #ffffff;
  --fond-doux: #f3f5f9;
  --encre: #0f2140;
  --encre-douce: #4a5670;
  --or: #c5a459;
  --or-clair: #d4b773;
  --blanc: #ffffff;
  --gris-nuit: #a3acbb;
  --nuit-haute: #182d52;
  --ligne: rgba(15, 33, 64, 0.14);
  --ombre-photo: 0 18px 44px rgba(15, 33, 64, 0.16);

  --rayon: 16px;
  --largeur: 1120px;
  --gouttiere: 20px;

  --t-h1: clamp(2.75rem, 1.7rem + 4.6vw, 5rem);
  --t-h2: clamp(1.875rem, 1.4rem + 2vw, 2.75rem);
  --t-h3: clamp(1.125rem, 1.08rem + 0.2vw, 1.25rem);
  --t-texte: 1.0625rem;
  --t-petit: 0.875rem;

  color-scheme: light;
}

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

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

body {
  margin: 0;
  background: var(--fond);
  color: var(--encre);
  font-family: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: var(--t-texte);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img { display: block; max-width: 100%; height: auto; }
h1, h2, h3, p, ul, ol, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
a { color: inherit; }
abbr[title] { text-decoration: none; cursor: help; } /* pas de pointillé : le nom complet reste au survol */

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

.visuel-cache {
  position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}

.saut {
  position: absolute; left: 8px; top: -64px; z-index: 10;
  background: var(--encre); color: var(--blanc);
  padding: 12px 16px; border-radius: var(--rayon); font-weight: 700; text-decoration: none;
}
.saut:focus { top: 8px; }

.conteneur { width: min(100% - 2 * var(--gouttiere), var(--largeur)); margin-inline: auto; }

/* Titres */
h1 { font-size: var(--t-h1); font-weight: 800; line-height: 1; letter-spacing: -0.035em; }
h2 { font-size: var(--t-h2); font-weight: 800; line-height: 1.08; letter-spacing: -0.025em; max-width: 20ch; }
h3 { font-size: var(--t-h3); font-weight: 700; line-height: 1.3; }
.chapo { color: var(--encre-douce); max-width: 52ch; }

/* Boutons */
.bouton {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 52px; padding: 0 24px;
  border: 0; border-radius: var(--rayon);
  font: inherit; font-weight: 700; font-size: 1rem; text-decoration: none; cursor: pointer;
  transition: background-color 150ms ease;
}
.bouton-principal { background: var(--or); color: var(--encre); }
.bouton-principal:hover { background: var(--or-clair); }
.bouton-secondaire { background: var(--encre); color: var(--blanc); }
.bouton-secondaire:hover { background: var(--encre-douce); }
.bouton[disabled] { opacity: 0.6; cursor: wait; }

/* En-tête */
.entete { padding-block: 20px; }
.entete .conteneur { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.marque { display: block; line-height: 0; }
.marque img { height: 30px; width: auto; }
.entete .bouton { min-height: 44px; padding: 0 16px; font-size: var(--t-petit); white-space: nowrap; }

/* Sections */
.section { padding-block: 48px; }
.section > .conteneur > h2 + * { margin-top: 32px; }

/* Héros */
.heros { padding-block: 24px 56px; }
.heros .conteneur { display: grid; gap: 48px; align-items: center; }
.heros h1 span { display: block; }
.heros h1 .ligne-2 { color: var(--encre-douce); }
.heros .chapo { margin-top: 24px; font-size: 1.125rem; }
.heros-action { margin-top: 32px; display: grid; gap: 12px; justify-items: start; }
.heros-action p { color: var(--encre-douce); font-size: var(--t-petit); max-width: 42ch; }

/* Cadres photo : en attendant les vraies photos */
.cadre {
  border-radius: var(--rayon); background: var(--fond-doux);
  display: grid; place-items: center; align-content: center; gap: 2px; text-align: center;
  color: var(--encre-douce); font-size: var(--t-petit); font-weight: 700;
  overflow: hidden;
}
.cadre img, .cadre video { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; }
.cadre small { display: block; font-weight: 400; }


/* Bandeau « Ce qu'on règle » : le blocage du joueur, barré, puis ce qu'on en fait */
.fil { display: flex; align-items: stretch; background: var(--encre); color: var(--blanc); overflow: hidden; }
.fil-titre {
  flex-shrink: 0; display: flex; align-items: center; gap: 10px; padding: 0 24px 0 var(--gouttiere);
  background: var(--or); color: var(--encre); font-weight: 800; font-size: 0.875rem; white-space: nowrap;
}
.fil-titre::before {
  content: ""; width: 22px; height: 19px; background: url("../img/logo/picto-bleu.svg") center / contain no-repeat;
}
.fil-defile { flex: 1; overflow: hidden; padding-block: 18px; }
.fil-piste { display: flex; width: max-content; }
.fil ul { display: flex; flex-shrink: 0; }
.fil li { display: flex; align-items: center; gap: 14px; padding-right: 56px; white-space: nowrap; }
.fil-avant { color: var(--gris-nuit); font-weight: 500; text-decoration: line-through; text-decoration-color: rgba(197, 164, 89, 0.7); text-decoration-thickness: 2px; }
.fil-fleche { color: var(--or); font-weight: 800; }
.fil-apres { font-weight: 700; }
@media (prefers-reduced-motion: no-preference) {
  .fil-piste { animation: defile 50s linear infinite; }
}
@keyframes defile { to { transform: translateX(-50%); } }

/* Problèmes */
/* Zone « fondu » : dégradé animé (Paper Shaders) derrière les problèmes et « C'est pour toi ? », fondu en haut et en bas */
.zone-fondu { position: relative; isolation: isolate; }
.zone-fondu .fond-effet {
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 18%, #000 82%, transparent 100%);
  mask-image: linear-gradient(180deg, transparent 0, #000 18%, #000 82%, transparent 100%);
}
.problemes-tete { display: flex; align-items: center; justify-content: space-between; gap: 32px; }
.sceau-metal { position: relative; flex-shrink: 0; width: 120px; aspect-ratio: 1028 / 872; }
.sceau-metal img { width: 100%; height: 100%; object-fit: contain; }
.sceau-metal.pret img { visibility: hidden; }
.sceau-metal canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.problemes { display: grid; gap: 12px; margin-top: 40px; }
.problemes li {
  background: rgba(255, 255, 255, 0.66); border-radius: var(--rayon); padding: 32px 28px;
  -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
}
.problemes .num { display: block; margin-bottom: 24px; color: var(--or); font-size: 3rem; font-weight: 800; line-height: 1; letter-spacing: -0.04em; }
.problemes p { margin-top: 8px; color: var(--encre-douce); max-width: 60ch; }


/* Bloc bleu nuit : la méthode */
.bloc-nuit { background: var(--encre); color: var(--blanc); border-radius: var(--rayon); padding: 40px 20px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 40px; }
.bloc-nuit h2 { color: var(--blanc); }
.bloc-nuit .chapo { color: var(--gris-nuit); margin-top: 16px; }
.etapes { display: grid; gap: 24px; counter-reset: etape; margin-top: 32px; }
.etapes li { counter-increment: etape; display: grid; grid-template-columns: 40px 1fr; gap: 16px; }
.etapes li::before {
  content: counter(etape);
  display: grid; place-items: center; width: 40px; height: 40px; border-radius: var(--rayon);
  background: var(--or); color: var(--encre); font-weight: 800;
}
.etapes p { margin-top: 6px; color: var(--gris-nuit); }

/* « Deux façons d'avancer avec moi » : le bilan gratuit, puis l'accompagnement personnalisé (sans prix) */
.bloc-nuit.bloc-propose { display: block; }
.propose-tete h2 { max-width: none; }
.propose-tete .chapo { max-width: 64ch; }
.formule .bouton { white-space: nowrap; }
.propose { display: grid; gap: 12px; margin-top: 32px; }
.formule { border-radius: var(--rayon); padding: 32px 28px; display: grid; gap: 14px; align-content: start; justify-items: start; }
.formule-appel { background: var(--blanc); color: var(--encre); }
.formule-appel p { color: var(--encre-douce); }
.formule-appel { display: flex; flex-direction: column; align-items: flex-start; }
.formule-appel .bouton { margin-top: auto; }
.appel-note { margin-top: 10px; padding: 10px 12px; border-radius: 10px; background: rgba(197, 164, 89, 0.12); color: var(--encre) !important; font-size: 0.875rem; line-height: 1.45; }
.appel-details { flex: 1; display: grid; gap: 14px; align-content: space-evenly; margin: 10px 0 20px; width: 100%; }
.appel-details li { display: flex; align-items: center; gap: 12px; color: var(--encre); font-weight: 600; font-size: 0.9375rem; }
.icone { flex-shrink: 0; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 10px; background: rgba(197, 164, 89, 0.16); color: #9a7c35; }
.icone svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.formule-suivi .icone { color: var(--or); }
.formule-suivi { background: linear-gradient(160deg, #1d3561 0%, var(--nuit-haute) 55%, #13254a 100%);}
.formule-texte { color: rgba(255, 255, 255, 0.82); }
.formule-tete { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; align-self: stretch; }
.formule-tete .bouton { margin-block: auto; }
.formule-inclus { display: grid; gap: 16px; padding-top: 4px; }
.formule-inclus li { display: flex; gap: 14px; align-items: flex-start; color: var(--gris-nuit); font-size: 0.9375rem; }
.formule-inclus strong { color: var(--blanc); }

/* Ruban de lumière or qui fait le tour de la carte accompagnement et du bloc de réservation */
@property --tour { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
.formule-suivi, .reservation { position: relative; isolation: isolate; }
.formule-suivi::before, .reservation::before {
  content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; padding: 2px; pointer-events: none;
  background:
    conic-gradient(from var(--tour), transparent 0 62%, rgba(197, 164, 89, 0.9) 80%, #f6e7bd 86%, rgba(197, 164, 89, 0.9) 90%, transparent 100%),
    linear-gradient(rgba(197, 164, 89, 0.22), rgba(197, 164, 89, 0.22));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
}
@media (prefers-reduced-motion: no-preference) {
  .formule-suivi::before, .reservation::before { animation: tour 7s linear infinite; }
}
@keyframes tour { to { --tour: 360deg; } }
.formule-suivi h3 { color: var(--blanc); font-size: 1.5rem; letter-spacing: -0.015em; }
.formule-etiquette { color: var(--or); font-size: 0.75rem; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; }
.formule-appel .formule-etiquette { color: #9a7c35; }
.formule-points { display: grid; gap: 10px; }
.formule-points li { display: grid; grid-template-columns: 18px 1fr; gap: 10px; color: var(--gris-nuit); font-size: 0.9375rem; }
.formule-points strong { color: var(--blanc); }
.formule-points li::before { content: ""; width: 8px; height: 8px; margin-top: 9px; border-radius: 50%; background: var(--or); }
.bouton-contour { background: transparent; color: var(--blanc); box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.35); margin-top: 10px; }
.bouton-contour:hover { box-shadow: inset 0 0 0 2px var(--or); }


/* Qui va t'entraîner */
.moi { display: grid; gap: 32px; }
/* Moins de blanc entre le bloc sombre et la réservation */
.section-moi { padding-bottom: 0; }
.section-moi + #reserver { padding-top: 40px; }
.moi-texte > * + * { margin-top: 16px; }
.moi-texte p { color: var(--encre-douce); max-width: 60ch; }
.moi-texte p strong { color: var(--encre); }

/* Bloc sombre plein écran (format Opus) : texte + mosaïque noir et blanc, grain par-dessus */
.moi-bloc { position: relative; overflow: hidden; isolation: isolate; background: #081122; color: var(--blanc); padding-block: 56px; }
.moi-bloc .grain { z-index: 2; opacity: 0.12; }
.moi-bloc h2 { color: var(--blanc); margin-bottom: 32px; }
.moi-bloc .moi-texte p { color: rgba(255, 255, 255, 0.74); }
.moi-bloc .moi-texte p strong { color: var(--blanc); }
/* Portrait à gauche, texte au milieu, les 2 lieux de l'accompagnement à droite */
.moi-portrait, .lieux figure { position: relative; overflow: hidden; border-radius: var(--rayon); background: var(--encre); }
.moi-portrait { aspect-ratio: 9 / 16; max-height: 640px; }
.moi-portrait img, .lieux img { display: block; width: 100%; height: 100%; object-fit: cover; filter: grayscale(1); transition: transform 1200ms cubic-bezier(.2, .7, .2, 1); }
.moi-portrait img { object-position: 62% 30%; }
.lieux img[src*="nb-salle"] { object-position: 60% 30%; }
.moi-portrait:hover img, .lieux figure:hover img { transform: scale(1.04); }
.lieux { position: relative; }
.lieux-titre { margin-bottom: 14px; color: var(--or); font-size: 0.75rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; }
.lieux ul { display: grid; gap: 12px; }
.lieux figure { aspect-ratio: 4 / 3; }
.lieux figure::after { content: ""; position: absolute; inset: 40% 0 0; background: linear-gradient(0deg, rgba(8, 17, 34, 0.8), rgba(8, 17, 34, 0)); }
.lieux figcaption {
  position: absolute; left: 20px; bottom: 14px; z-index: 1;
  color: var(--blanc); font-size: 1.75rem; font-weight: 800; letter-spacing: -0.02em; line-height: 1;
}
/* Sceau à cheval entre les 2 photos : « TERRAIN · SALLE » tourne autour du monogramme */
.lieux-sceau {
  position: absolute; right: -14px; top: calc(50% + 14px); z-index: 2; transform: translateY(-50%);
  width: 92px; height: 92px; border-radius: 50%; background: #081122; display: grid; place-items: center;
}
.lieux-sceau svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.lieux-sceau text { fill: var(--or); font-size: 9.5px; font-weight: 800; letter-spacing: 0.08em; }
.lieux-sceau img { width: 34px; height: auto; }
@media (prefers-reduced-motion: no-preference) {
  .lieux-sceau svg { animation: sceau 16s linear infinite; }
}
@keyframes sceau { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .moi-portrait img, .lieux img { transition: none; } }
.moi-suite { position: relative; z-index: 3; margin-top: 40px; padding-top: 36px; border-top: 1px solid rgba(255, 255, 255, 0.08); display: grid; gap: 40px; }
.moi-etiquette { color: var(--or); font-size: 0.75rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; }
/* Transfo mise en avant + mini texte (foot, Master), Hyrox en clin d'œil : 2 photos qui se chevauchent */
.transfo-bloc { display: grid; gap: 12px; justify-items: center; }
.transfo-bloc .transfo { width: 100%; }
.transfo { position: relative; aspect-ratio: 4 / 5; overflow: hidden; border-radius: var(--rayon); background: var(--encre); }
.transfo img { display: block; width: 100%; height: 100%; object-fit: cover; }
.transfo::after { content: ""; position: absolute; inset: 60% 0 0; background: linear-gradient(0deg, rgba(8, 17, 34, 0.8), rgba(8, 17, 34, 0)); }
.transfo figcaption { position: absolute; left: 14px; bottom: 12px; z-index: 1; color: var(--blanc); font-size: 0.75rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; }
.transfo-texte { display: grid; gap: 12px; align-content: center; }
.transfo-titre { color: var(--blanc); font-size: 1.375rem; font-weight: 800; line-height: 1.25; letter-spacing: -0.015em; max-width: 24ch; }
.transfo-texte p:last-child { color: rgba(255, 255, 255, 0.74); max-width: 46ch; }
.hyrox { display: grid; gap: 14px; justify-items: center; align-content: center; }
.hyrox-photos { position: relative; width: 100%; max-width: 260px; aspect-ratio: 1 / 1; }
.hyrox-photos img {
  position: absolute; width: 62%; aspect-ratio: 4 / 5; object-fit: cover;
  border-radius: var(--rayon); outline: 4px solid #081122; transition: transform 600ms cubic-bezier(.2, .7, .2, 1);
}
.hyrox-photos img:first-child { left: 0; top: 0; transform: rotate(-5deg); }
.hyrox-photos img:last-child { right: 0; bottom: 0; transform: rotate(4deg); }
.hyrox:hover img:first-child { transform: rotate(-8deg) translateX(-6px); }
.hyrox:hover img:last-child { transform: rotate(7deg) translateX(6px); }
.hyrox-legende { color: var(--gris-nuit); font-size: 0.875rem; font-style: italic; }
@media (prefers-reduced-motion: reduce) { .hyrox-photos img { transition: none; } }


/* Questions fréquentes */
.faq { display: grid; gap: 8px; max-width: 760px; }
.section-faq h2 { margin-inline: auto; text-align: center; }
.section-faq .faq { margin-inline: auto; }
.faq details { background: var(--fond-doux); border-radius: var(--rayon); }
.faq summary { list-style: none; cursor: pointer; padding: 20px 56px 20px 24px; font-weight: 700; position: relative; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: ""; position: absolute; right: 24px; top: 50%; width: 10px; height: 10px; margin-top: -7px;
  border-right: 2px solid var(--encre); border-bottom: 2px solid var(--encre); transform: rotate(45deg);
  transition: transform 150ms ease;
}
.faq details[open] summary::after { transform: rotate(-135deg); margin-top: -2px; }
.faq details p { padding: 0 24px 24px; color: var(--encre-douce); max-width: 62ch; }

/* Formulaire */
.reservation { background: var(--fond-doux); border-radius: var(--rayon); padding: 40px 20px; }
.reservation .chapo { margin-top: 16px; }
.formulaire { margin-top: 32px; display: grid; gap: 20px; }
.champ { display: grid; gap: 8px; }
.champ label, .champ legend { font-weight: 700; font-size: 1rem; padding: 0; }
.champ .aide { color: var(--encre-douce); font-size: var(--t-petit); }
.champ input[type="text"],
.champ input[type="number"],
.champ input[type="url"],
.champ input[type="date"],
.champ input[type="tel"],
.champ input[type="email"],
.champ textarea {
  width: 100%; min-height: 52px; padding: 14px 16px;
  background: var(--fond); color: var(--encre);
  border: 1px solid var(--ligne); border-radius: var(--rayon);
  font: inherit; font-size: 1rem;
}
.champ input:focus, .champ textarea:focus, .champ select:focus { border-color: var(--encre); outline: none; }
.champ select {
  width: 100%; min-height: 52px; padding: 14px 40px 14px 16px; cursor: pointer;
  background: var(--fond) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' fill='none' stroke='%230f2140' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 16px center;
  color: var(--encre); border: 1px solid var(--ligne); border-radius: var(--rayon);
  font: inherit; font-size: 1rem; -webkit-appearance: none; appearance: none;
}
.champ select:invalid { color: var(--encre-douce); }
.date-trio { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.4fr) minmax(0, 1fr); gap: 8px; }
.champ textarea { min-height: 112px; resize: vertical; }
.champ input::placeholder, .champ textarea::placeholder { color: var(--encre-douce); opacity: 0.7; }
fieldset.champ { border: 0; margin: 0; padding: 0; }
.choix { display: flex; flex-wrap: wrap; gap: 8px; }
.choix label { position: relative; font-weight: 500; }
.choix input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.choix span {
  display: inline-flex; align-items: center; min-height: 48px; padding: 0 20px;
  background: var(--fond); border: 1px solid var(--ligne); border-radius: var(--rayon);
  transition: background-color 150ms ease;
}
.choix input:checked + span { background: var(--encre); border-color: var(--encre); color: var(--blanc); font-weight: 700; }
.choix input:focus-visible + span { outline: 3px solid var(--encre); outline-offset: 3px; }
.consentement { display: grid; grid-template-columns: 24px 1fr; gap: 12px; align-items: start; color: var(--encre-douce); font-size: var(--t-petit); }
.consentement input { width: 20px; height: 20px; margin: 2px 0 0; accent-color: var(--encre); }
.piege { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.message { border-radius: var(--rayon); padding: 16px 20px; background: var(--fond); }
.message[hidden] { display: none; }
.message strong { display: block; }
.message p { margin-top: 4px; color: var(--encre-douce); }
.message .bouton { margin-top: 16px; }

/* Pied de page */
.pied { padding-block: 48px 64px; color: var(--encre-douce); font-size: var(--t-petit); border-top: 1px solid var(--ligne); }
.pied .conteneur { display: grid; gap: 16px; }
.pied nav { display: flex; flex-wrap: wrap; gap: 8px 24px; }
.pied a { text-underline-offset: 3px; }
.pied a:hover { color: var(--encre); }
.insta { display: inline-flex; align-items: center; gap: 8px; }
.insta svg { width: 18px; height: 18px; stroke: currentColor; stroke-width: 2; fill: none; stroke-linecap: round; stroke-linejoin: round; }

/* Effets (voir DESIGN.md, section Effets) */
.heros { position: relative; isolation: isolate; }
.fond-effet { position: absolute; inset: 0; z-index: -1; opacity: 0; transition: opacity 800ms ease; }
.fond-effet.pret { opacity: 1; }
.fond-effet canvas, .signature canvas { display: block; width: 100%; height: 100%; }

.reservation { position: relative; overflow: hidden; }
.calendrier { width: 160px; height: 160px; margin: -8px 0 8px -8px; }
.calendrier canvas { display: block; width: 100%; height: 100%; }


.cta-flottant {
  position: fixed; left: 50%; bottom: 16px; z-index: 20;
  transform: translate(-50%, 24px); opacity: 0; pointer-events: none;
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 52px; padding: 0 24px; border-radius: var(--rayon);
  background: var(--or); color: var(--encre); font-weight: 700; text-decoration: none; white-space: nowrap;
  transition: opacity 200ms ease, transform 200ms ease;
}
.cta-flottant.visible { opacity: 1; transform: translate(-50%, 0); pointer-events: auto; }
.cta-flottant.verre { background: transparent; padding: 0; }
.cta-flottant.verre .cta-texte { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.cta-flottant.verre .glass-button { box-shadow: var(--ombre-photo); }
.cta-flottant.verre canvas { box-shadow: none !important; } /* la lib pose une ombre noire en style inline */
.cta-flottant .glass-button-text { color: var(--encre); font-family: "Plus Jakarta Sans", system-ui, sans-serif; font-weight: 700; }
@media (prefers-reduced-motion: reduce) { .cta-flottant { transition: none; } }



/* Titre : le sport défile (CSS pur ; sans animation, reste sur « dans ton sport. ») */
.rotateur { display: block; height: 1.2em; overflow: hidden; margin-bottom: -0.2em; }
.rotateur-piste { display: block; }
.rotateur-piste span {
  display: block; height: 1.2em; line-height: 1; white-space: nowrap;
  text-decoration: underline; text-decoration-color: var(--or); text-decoration-thickness: 0.08em; text-underline-offset: 0.1em;
}
@media (prefers-reduced-motion: no-preference) {
  .rotateur-piste { animation: sports 9s cubic-bezier(.7, 0, .2, 1) infinite; }
}
@keyframes sports {
  0.00%, 28.67% { transform: translateY(-0.0em); }
  33.33%, 62.00% { transform: translateY(-1.2em); }
  66.67%, 95.33% { transform: translateY(-2.4em); }
  100% { transform: translateY(-3.6em); }
}

/* Filigrane du monogramme dans le bloc bleu nuit */
.bloc-nuit { position: relative; overflow: hidden; isolation: isolate; }
.bloc-nuit::before {
  content: ""; position: absolute; right: -6%; bottom: -10%; width: 55%; aspect-ratio: 1028 / 872; z-index: -1;
  background: url("../img/logo/picto-blanc.svg") center / contain no-repeat; opacity: 0.05;
}

/* Courbe de charge (barres CSS ; remplacées par la 3D quand elle est prête) */
.charge { background: var(--fond); color: var(--encre); border-radius: var(--rayon); padding: 20px 16px 16px; align-self: start; }
.charge figcaption { color: var(--encre); font-size: 0.75rem; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; }
.charge-zone { position: relative; margin-top: 16px; }
.charge-scene { position: absolute; left: 0; right: 0; top: 0; height: 180px; }
.charge-scene canvas { display: block; width: 100%; height: 100%; }
.charge-jours { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; align-items: end; }
.charge-jours li { display: grid; justify-items: center; gap: 6px; text-align: center; }
.charge-jours .barre {
  width: 70%; height: 180px; display: flex; align-items: flex-end;
  background: linear-gradient(to top, var(--encre) calc(var(--charge) * 10%), transparent 0);
  border-radius: 6px;
}
.charge.en-3d .barre { background: none; }
.charge-jours .jour-j .barre { background: linear-gradient(to top, var(--or) 100%, transparent 0); }
.charge.en-3d .jour-j .barre { background: none; }
.charge-jours .j { font-weight: 800; font-size: 0.9375rem; }
.charge-jours .jour-j .j { background: var(--or); border-radius: 6px; padding: 0 6px; }
.charge-note { margin-top: 14px; color: var(--encre-douce); font-size: var(--t-petit); }

/* Pied de page : logo */
.signature { width: min(100% - 2 * var(--gouttiere), var(--largeur)); margin: 0 auto 32px; }
.signature img { width: min(420px, 80%); height: auto; }


/* Héros cinéma (format Opus Athletic) : vidéo plein écran floutée, voile bleu nuit, grain */
.entete.sur-video { position: absolute; inset: 0 0 auto; z-index: 5; }
.heros-cinema { position: relative; min-height: 100vh; display: grid; align-items: end; padding-block: 140px 96px; color: var(--blanc); overflow: hidden; isolation: isolate; }
.heros-media { position: absolute; inset: 0; z-index: -1; background: var(--encre); }
.heros-media video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transform: scale(1.04); }
.heros-voile {
  position: absolute; inset: 0;
  background:
    linear-gradient(90deg, rgba(8, 17, 34, 0.94) 0%, rgba(8, 17, 34, 0.72) 50%, rgba(8, 17, 34, 0.5) 100%),
    linear-gradient(0deg, rgba(5, 8, 14, 0.7) 0%, rgba(5, 8, 14, 0) 50%),
    rgba(15, 33, 64, 0.25);
}
.grain {
  position: absolute; inset: -50%; opacity: 0.16; mix-blend-mode: overlay; pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
}
@media (prefers-reduced-motion: no-preference) {
  .grain { animation: grain 0.9s steps(6) infinite; }
}
@keyframes grain {
  0% { transform: translate(0, 0); } 20% { transform: translate(-6%, 4%); } 40% { transform: translate(5%, -7%); }
  60% { transform: translate(-3%, 8%); } 80% { transform: translate(7%, 2%); } 100% { transform: translate(0, 0); }
}
.heros-cinema h1 { color: var(--blanc); max-width: 12ch; }
.heros-cinema h1 .ligne-2 { color: rgba(255, 255, 255, 0.72); }
.heros-cinema .chapo { color: rgba(255, 255, 255, 0.86); max-width: 46ch; }
.heros-cinema .heros-action p { color: rgba(255, 255, 255, 0.72); }
.heros-cinema .conteneur { display: block; }

/* Pages légales */
.legal { padding-block: 32px 64px; }
.legal .conteneur { max-width: 760px; }
.legal h1 { font-size: var(--t-h2); }
.legal h2 { font-size: var(--t-h3); margin-top: 40px; max-width: none; }
.legal p, .legal li { margin-top: 12px; color: var(--encre-douce); }
.legal ul { list-style: disc; padding-left: 20px; }
.legal .a-completer { color: var(--encre); background: var(--fond-doux); padding: 0 4px; border-radius: 4px; font-weight: 700; }
.retour { display: inline-block; margin-bottom: 32px; color: var(--encre-douce); }

/* Page audit : réservation en 2 étapes (audit.html) */
.audit { padding-block: 16px 72px; }
.audit-grille { display: grid; gap: 40px; align-items: start; }
.audit h1 { font-size: var(--t-h2); line-height: 1.08; letter-spacing: -0.025em; max-width: 16ch; }
.audit .chapo { margin-top: 12px; }
.progression { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 6px; margin-top: 32px; max-width: 640px; }
.progression span { height: 4px; border-radius: 4px; background: var(--ligne); transition: background-color 200ms ease; }
.progression span.actif { background: var(--or); }
.progression-texte { margin-top: 10px; color: var(--encre-douce); font-size: var(--t-petit); font-weight: 700; }
.etape { margin-top: 16px; max-width: 640px; }
.etape[hidden] { display: none; }
.etape h2:focus { outline: none; }
.etape-carte { background: var(--fond-doux); border-radius: var(--rayon); padding: 24px 20px; }
.etape .formulaire { margin-top: 0; }
.formulaire .bouton { width: 100%; }
/* Questionnaire en vagues : une seule visible à la fois */
.vague { border: 0; margin: 0; padding: 0; min-width: 0; display: grid; gap: 22px; }
.vague[hidden] { display: none; }
.vague-titre { padding: 0; margin-bottom: 2px; font-size: var(--t-h3); font-weight: 800; letter-spacing: -0.015em; }
.vague-titre:focus { outline: none; }
.facultatif { color: var(--encre-douce); font-weight: 500; }
.vague-nav { display: flex; align-items: center; gap: 16px; }
.vague-nav .bouton { width: auto; flex: 1; }
.fleche-retour {
  flex-shrink: 0; display: grid; place-items: center; width: 52px; height: 52px; border: 1px solid var(--ligne); border-radius: var(--rayon);
  background: var(--fond); color: var(--encre); cursor: pointer; transition: border-color 150ms ease;
}
.fleche-retour:hover { border-color: var(--encre); }
.fleche-retour[hidden] { display: none; }
.fleche-retour svg, .lien-retour svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.lien-retour svg { width: 16px; height: 16px; vertical-align: -3px; margin-right: 6px; }
.note-prog { padding: 12px 14px; border-radius: 10px; background: rgba(197, 164, 89, 0.12); color: var(--encre); font-size: 0.9375rem; }
.note-prog[hidden] { display: none; }
.champ[hidden] { display: none; }
.champs-duo { display: grid; gap: 20px; }
.mention { color: var(--encre-douce); font-size: var(--t-petit); text-align: center; }
.mention a { text-underline-offset: 3px; }
.etape-tete { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px 16px; margin-bottom: 16px; }
.etape-tete h2 { font-size: var(--t-h3); max-width: none; }
.lien-retour {
  background: none; border: 0; padding: 0; cursor: pointer;
  font: inherit; font-size: var(--t-petit); color: var(--encre-douce); text-decoration: underline; text-underline-offset: 3px;
}
.lien-retour:hover { color: var(--encre); }
.calendly { background: var(--fond-doux); border-radius: var(--rayon); overflow: hidden; }
.calendly iframe { display: block; width: 100%; height: 1000px; border: 0; background: var(--fond); }
.calendly-attente { display: grid; gap: 12px; justify-items: start; padding: 32px 20px; min-height: 360px; align-content: center; }
.calendly-attente p { color: var(--encre-douce); max-width: 46ch; }
.calendly-attente .bouton { margin-top: 8px; }
.fin-picto { width: 48px; height: auto; }
.fin h2 { margin-top: 20px; font-size: var(--t-h2); }
.fin p { margin-top: 12px; color: var(--encre-douce); max-width: 50ch; }
.fin p strong { color: var(--encre); }
.fin .bouton { margin-top: 0; }
.fin-envoi { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 24px; }
.fin-envoi .bouton[hidden] { display: none; }
.fin .fin-deja { color: var(--encre); font-weight: 600; }

.audit-recap {
  position: relative; overflow: hidden; isolation: isolate;
  background: var(--encre); color: var(--blanc); border-radius: var(--rayon); padding: 32px 20px;
}
.audit-recap::before {
  content: ""; position: absolute; right: -10%; bottom: -12%; width: 70%; aspect-ratio: 1028 / 872; z-index: -1;
  background: url("../img/logo/picto-blanc.svg") center / contain no-repeat; opacity: 0.05;
}
.audit-recap h2 { color: var(--blanc); font-size: 1.5rem; }
.audit-recap .etapes { margin-top: 24px; }

@media (min-width: 600px) {
  .champs-duo { grid-template-columns: 1fr 1fr; }
  .etape-carte { padding: 32px; }
}
@media (min-width: 880px) {
  .audit { padding-block: 32px 112px; }
  .audit-grille { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 64px; }
  .audit-recap { position: sticky; top: 24px; padding: 40px; }
  .calendly iframe { height: 720px; }
}

/* Téléphone */
.sur-mobile { display: none; }

/* Téléphone et tablette (sous 880 px) */
@media (max-width: 879px) {
  /* Héros : voile du bas vers le haut (le texte est en bas), la vidéo reste visible en haut */
  .heros-voile {
    background:
      linear-gradient(0deg, rgba(8, 17, 34, 0.96) 0%, rgba(8, 17, 34, 0.82) 42%, rgba(8, 17, 34, 0.35) 75%, rgba(8, 17, 34, 0.55) 100%),
      rgba(15, 33, 64, 0.2);
  }
  .heros-cinema { padding-block: 120px 56px; }

  .problemes-tete { align-items: flex-start; gap: 16px; }
  .sceau-metal { width: 64px; }

  .bloc-propose { padding: 28px 16px; }
  .formule { padding: 24px 20px; }
  .formule-tete .bouton { margin-block: 4px 8px; }

  .moi { gap: 28px; }
  .moi-portrait { aspect-ratio: 4 / 5; max-height: 440px; }
  .moi-portrait img { object-position: 62% 25%; }
  .lieux-sceau { right: 10px; width: 78px; height: 78px; }
  .lieux-sceau img { width: 28px; }
  .transfo-bloc .transfo { max-width: 300px; }

  /* Réservation : calendrier en vedette, centré, halo or qui respire, bouton pleine largeur */
  .reservation { padding: 24px 20px 32px; text-align: center; }
  .calendrier { position: relative; width: 240px; height: 240px; margin: 0 auto 4px; }
  .calendrier::before {
    content: ""; position: absolute; inset: 8%; z-index: -1; border-radius: 50%;
    background: radial-gradient(circle, rgba(197, 164, 89, 0.38) 0%, rgba(197, 164, 89, 0) 68%);
  }
  .reservation h2 { margin-inline: auto; }
  .reservation .chapo { margin-inline: auto; }
  .reservation .heros-action { justify-items: center; }
  .reservation .heros-action .bouton { width: 100%; }
}
@media (max-width: 879px) and (prefers-reduced-motion: no-preference) {
  .calendrier::before { animation: halo 3.2s ease-in-out infinite; }
}
@keyframes halo { 50% { transform: scale(1.12); opacity: 0.65; } }

/* Téléphone */
@media (max-width: 599px) {
  .sur-ordi { display: none; }
  .sur-mobile { display: inline; }
  .entete .bouton { min-height: 40px; padding: 0 14px; }
  /* Date de naissance : listes plus compactes pour que « Jour », « Mois », « Année » restent lisibles */
  .date-trio { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.5fr) minmax(0, 1.1fr); gap: 6px; }
  .date-trio select { padding: 12px 28px 12px 12px; background-position: right 10px center; font-size: 0.9375rem; }
  .etape-carte { padding: 20px 16px; }
}

/* Bureau */
@media (min-width: 880px) {
  .section { padding-block: 64px; }
  .heros { padding-block: 48px 96px; }
  .heros .conteneur { grid-template-columns: 1.2fr 1fr; gap: 48px; }
  .problemes { grid-template-columns: repeat(3, 1fr); }
  .sceau-metal { width: 180px; }
  .bloc-nuit { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); padding: 64px; gap: 64px; }
  .bloc-propose { padding: 56px; }
  .propose { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.7fr); }
  .formule { padding: 32px; }
  .formule-suivi { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px 28px; align-items: start; }
  .formule-inclus { grid-column: 1 / -1; grid-template-columns: 1fr 1fr; gap: 18px 28px; }
  .moi { grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr) minmax(0, 0.85fr); gap: 48px; align-items: center; }
  .moi-suite { grid-template-columns: 210px minmax(0, 1fr) 260px; gap: 40px; align-items: center; }
      .reservation { padding: 64px; }
  .calendrier { position: absolute; top: 50%; right: 48px; width: 340px; height: 340px; margin: 0; transform: translateY(-50%); }
  .formulaire { max-width: 640px; }
  .pied .conteneur { grid-template-columns: 1fr auto; align-items: center; }
}

/* Apparition en fondu au défilement (classes posées par site.js ; rien sans JS ni avec « Réduire les animations ») */
.revele .a-reveler {
  opacity: 0; transform: translateY(28px);
  transition: opacity 900ms cubic-bezier(.2, .7, .2, 1), transform 900ms cubic-bezier(.2, .7, .2, 1);
  transition-delay: calc(var(--rang, 0) * 110ms);
}
.revele .a-reveler.vu { opacity: 1; transform: none; }