/* ============================================================
   public.css — Site public de l'A.S. Te'a Hau (Pirae, Tahiti)

   Thème « Lagon » (octobre 2026, succède à « Affiche de tir ») :
   lumineux et accueillant. Fond d'écume (blanc à peine bleuté), bleu
   lagon pour les grands aplats et les liens, or de la cible réservé à
   l'action principale, rouge réservé aux alertes (voir CLAUDE.md).
   Un seul geste fort : la photo du club en plein cadre en haut de
   l'accueil. Tout le reste reste calme : traits fins, coins arrondis,
   ombres légères teintées de lagon, rien de travers.

   Contrastes vérifiés (WCAG 2.2 AA) en clair et en sombre. Polices
   hébergées sur le site (Barlow, licence SIL OFL) : aucune requête vers
   un tiers. Aucune animation en boucle.
   ============================================================ */

@font-face { font-family: "Barlow"; src: url("/fonts/barlow-400.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Barlow"; src: url("/fonts/barlow-600.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "Barlow Condensed"; src: url("/fonts/barlow-condensed-600.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "Barlow Condensed"; src: url("/fonts/barlow-condensed-700.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }

:root, :root[data-theme="light"] {
  color-scheme: light;
  /* écume et encre (les noms « papier » sont gardés : tout le CSS s'en sert) */
  --papier: #f4f8f7;        /* écume */
  --papier-2: #e6efee;      /* sable mouillé : sections alternées */
  --surface: #ffffff;
  --encre: #0f2a2e;         /* 14:1 sur l'écume */
  --encre-2: #3c5559;       /* 7,4:1 */
  --encre-3: #56696c;       /* 5,4:1 */
  --trait: #6f8f92;         /* contour des champs et commandes : 3,5:1 */
  --ligne: #d5e2e1;         /* séparations discrètes */
  --lien: #0f7480;          /* lagon : 5,1:1 */
  /* le lagon */
  --lagon: #0f7480;
  --lagon-profond: #0a4f57; /* blanc dessus : 9,3:1 */
  --sur-profond: #cfe6e6;   /* texte secondaire sur le lagon profond : 7,1:1 */
  /* la cible */
  --or: #ffc21a;            /* encre dessus : 9,3:1 */
  --or-fonce: #e3a400;
  --rouge: #d6342a;         /* blanc dessus : 4,8:1 */
  --rouge-texte: #b8271e;
  --bleu: #1b6fb3;          /* blanc dessus : 5,2:1 */
  --bleu-cible: #2a9be0;
  --nuit: #0a4f57;
  /* formes */
  --bord: 1px solid var(--ligne);
  --ombre-c: rgba(10, 79, 87, .10);
  --ombre: 0 1px 2px rgba(10, 79, 87, .06), 0 10px 30px -12px rgba(10, 79, 87, .18);
  --ombre-petite: 0 1px 2px rgba(10, 79, 87, .06), 0 4px 14px -6px rgba(10, 79, 87, .16);
  --ombre-survol: 0 2px 4px rgba(10, 79, 87, .06), 0 18px 40px -14px rgba(10, 79, 87, .26);
  --rayon: 16px;
  --rayon-petit: 12px;
  --rayon-photo: 20px;
  --bord-carte: 1px solid transparent;   /* en clair, l'ombre suffit */
  --titre: "Barlow Condensed", "Arial Narrow", "Roboto Condensed", system-ui, sans-serif;
  --texte: "Barlow", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --large: 1180px;
  --gouttiere: max(16px, env(safe-area-inset-left), env(safe-area-inset-right), calc((100vw - var(--large)) / 2));
  --duree: 160ms;
}
/* Nuit sur le lagon : mêmes rôles, contrastes vérifiés (encre 15:1, encre-3 6,2:1 sur les cartes). */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --bord-carte: 1px solid var(--ligne);   /* en sombre, l'ombre ne se voit pas : la bordure la remplace */
    --papier: #0b1a1d; --papier-2: #10242a; --surface: #12272b;
    --encre: #e8f1f0; --encre-2: #bdcfcd; --encre-3: #93a8a6;
    --trait: #5b7b7d; --ligne: #23403f; --lien: #6fd3d9; --lagon: #6fd3d9;
    --lagon-profond: #0d3a40; --rouge-texte: #ff8a7f;
    --ombre-c: rgba(0, 0, 0, .4);
    --ombre: 0 1px 2px rgba(0, 0, 0, .3), 0 12px 30px -14px rgba(0, 0, 0, .6);
    --ombre-petite: 0 1px 2px rgba(0, 0, 0, .3), 0 6px 16px -8px rgba(0, 0, 0, .5);
    --ombre-survol: 0 2px 4px rgba(0, 0, 0, .3), 0 20px 40px -16px rgba(0, 0, 0, .7);
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --bord-carte: 1px solid var(--ligne);
  --papier: #0b1a1d; --papier-2: #10242a; --surface: #12272b;
  --encre: #e8f1f0; --encre-2: #bdcfcd; --encre-3: #93a8a6;
  --trait: #5b7b7d; --ligne: #23403f; --lien: #6fd3d9; --lagon: #6fd3d9;
  --lagon-profond: #0d3a40; --rouge-texte: #ff8a7f;
  --ombre-c: rgba(0, 0, 0, .4);
  --ombre: 0 1px 2px rgba(0, 0, 0, .3), 0 12px 30px -14px rgba(0, 0, 0, .6);
  --ombre-petite: 0 1px 2px rgba(0, 0, 0, .3), 0 6px 16px -8px rgba(0, 0, 0, .5);
  --ombre-survol: 0 2px 4px rgba(0, 0, 0, .3), 0 20px 40px -16px rgba(0, 0, 0, .7);
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 84px; -webkit-text-size-adjust: 100%; overflow-x: clip; }
body {
  margin: 0; overflow-x: clip; font-family: var(--texte); font-size: 1.0625rem; line-height: 1.6;
  color: var(--encre); background: var(--papier); text-rendering: optimizeLegibility;
}
h1, h2, h3 { font-family: var(--titre); font-weight: 700; line-height: 1; margin: 0 0 .5em; text-wrap: balance; }
h2 { font-size: clamp(2.3rem, 4.8vw, 3.7rem); letter-spacing: -.012em; line-height: 1.02; }
h3 { font-size: 1.4rem; font-weight: 700; letter-spacing: 0; line-height: 1.15; }
p { margin: 0 0 1em; text-wrap: pretty; }
a { color: var(--lien); text-underline-offset: 3px; text-decoration-thickness: 1.5px; }
a:hover { color: var(--encre); }
img, svg { max-width: 100%; }
strong { font-weight: 600; }
::selection { background: var(--or); color: #0f2a2e; }
html { accent-color: var(--lagon-profond); caret-color: var(--lagon); scrollbar-color: color-mix(in srgb, var(--lagon) 45%, transparent) transparent; -webkit-tap-highlight-color: color-mix(in srgb, var(--lagon) 18%, transparent); }
a, button, summary, label, input, select, textarea { touch-action: manipulation; } /* pas d'attente du double appui */
:focus-visible { outline: 3px solid var(--lagon); outline-offset: 3px; border-radius: 6px; }
/* Sur les fonds sombres (photo, lagon profond, pied de page), le focus passe en or pour rester visible. */
:is(.hero, .reperes, .appli, .pied, .bandeau-page, .appel-inscription, .creneau, .contacts .carte:first-child) :focus-visible { outline-color: var(--or); }
.icone { width: 1.25em; height: 1.25em; flex: none; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.saut { position: absolute; left: -9999px; top: 8px; z-index: 60; padding: 12px 18px; background: var(--encre); color: var(--papier); border-radius: 8px; font-weight: 600; }
.saut:focus { left: 12px; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: 1ms !important; animation: none !important; }
}

/* ---------- Boutons : pilules franches, ≥ 48 px. L'or = l'action principale, et elle seule. ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px; max-width: 100%;
  min-height: 52px; padding: 12px 26px; border-radius: 999px; border: 1px solid transparent;
  font: 600 1.06rem/1.2 var(--texte); text-align: center; text-decoration: none; cursor: pointer;
  transition: transform var(--duree) ease-out, box-shadow var(--duree) ease-out, background-color var(--duree) ease-out, color var(--duree) ease-out, border-color var(--duree) ease-out;
}
.btn-or { background: var(--or); color: #0f2a2e; box-shadow: 0 1px 0 rgba(10, 79, 87, .18), 0 8px 20px -10px rgba(227, 164, 0, .9); }
.btn-or:hover { background: #ffcb3d; color: #0f2a2e; transform: translateY(-1px); box-shadow: 0 1px 0 rgba(10, 79, 87, .18), 0 14px 28px -12px rgba(227, 164, 0, .95); }
.btn-or:active { transform: translateY(1px); box-shadow: 0 1px 0 rgba(10, 79, 87, .18); }
.btn-sombre, .btn-clair { background: var(--lagon-profond); color: #fff; }
.btn-sombre:hover, .btn-clair:hover { background: var(--lagon); color: #fff; }
.btn-contour { background: transparent; color: var(--encre); border-color: var(--trait); }
.btn-contour:hover { background: var(--surface); color: var(--encre); border-color: var(--lagon); }
.btn .icone { transition: transform var(--duree) ease-out; }
.btn:hover .icone { transform: translateX(3px); }
.btn:disabled { opacity: .6; cursor: progress; }

/* ---------- En-tête ---------- */
.entete {
  position: sticky; top: 0; z-index: 40;
  display: flex; align-items: center; gap: 14px; min-height: 70px;
  padding: calc(8px + env(safe-area-inset-top)) var(--gouttiere) 8px;
  background: color-mix(in srgb, var(--papier) 86%, transparent); border-bottom: var(--bord);
  -webkit-backdrop-filter: saturate(1.4) blur(14px); backdrop-filter: saturate(1.4) blur(14px);
}
.marque { display: flex; align-items: center; gap: 10px; margin-right: auto; color: var(--encre); text-decoration: none; min-height: 48px; }
.marque img { width: 44px; height: 44px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 1px var(--ligne); }
.marque span { display: flex; flex-direction: column; font-family: var(--titre); font-weight: 700; font-size: 1.5rem; line-height: .95; }
.marque small { font-family: var(--texte); font-weight: 400; font-size: .8rem; color: var(--encre-3); margin-top: 3px; }
.nav-large { display: flex; gap: 2px; }
.nav-large a {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 12px; border-radius: 999px;
  font-family: var(--texte); font-weight: 600; font-size: 1rem;
  color: var(--encre-2); text-decoration: none; transition: background-color var(--duree) ease-out, color var(--duree) ease-out;
}
.nav-large a:hover { background: var(--papier-2); color: var(--encre); }
.nav-large a[aria-current="true"] { background: color-mix(in srgb, var(--lagon) 14%, transparent); color: var(--encre); }
.entete .btn { min-height: 46px; padding: 8px 20px; font-size: 1rem; }
.bascule-theme {
  display: grid; place-items: center; width: 46px; height: 46px; flex: none; border-radius: 50%;
  border: 1px solid var(--trait); background: var(--surface); color: var(--encre); cursor: pointer;
  transition: transform var(--duree) ease-out;
}
.bascule-theme:hover { border-color: var(--lagon); }
.bascule-theme .ic-soleil { display: none; }
:root[data-theme="dark"] .bascule-theme .ic-soleil { display: block; }
:root[data-theme="dark"] .bascule-theme .ic-lune { display: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .bascule-theme .ic-soleil { display: block; }
  :root:not([data-theme="light"]) .bascule-theme .ic-lune { display: none; }
}

/* Menu mobile : <details> natif, fonctionne sans JavaScript. */
.menu-mobile { display: none; position: relative; }
.menu-mobile summary {
  list-style: none; display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%;
  border: 1px solid var(--trait); background: var(--surface); color: var(--encre); cursor: pointer;
}
.menu-mobile summary::-webkit-details-marker { display: none; }
.menu-mobile summary .ferme { display: none; }
.menu-mobile[open] summary .ouvre { display: none; }
.menu-mobile[open] summary .ferme { display: block; }
.menu-mobile nav {
  position: fixed; left: 0; right: 0; top: calc(70px + env(safe-area-inset-top)); padding: 6px 16px 20px;
  max-height: calc(100dvh - 70px); overflow-y: auto;
  background: var(--papier); border-bottom: var(--bord); display: flex; flex-direction: column;
}
.menu-mobile nav a {
  display: flex; align-items: center; justify-content: space-between; min-height: 58px; padding: 0 6px;
  font-family: var(--titre); font-weight: 600; font-size: 1.75rem;
  color: var(--encre); text-decoration: none; border-bottom: 1px solid var(--ligne);
}
.menu-mobile nav a:last-child { border-bottom: 0; }
.menu-mobile nav .btn { margin-top: 16px; font-family: var(--texte); font-size: 1.08rem; justify-content: center; border-bottom: 0; }

/* ---------- Hero : le club en plein cadre, le titre posé sur la pelouse ---------- */
/* La photo remplit la section ; un voile de lagon profond monte depuis le bas à gauche
   pour que le texte reste lisible (blanc sur voile : 11:1 au plus clair). */
.hero {
  position: relative; isolation: isolate; display: flex; align-items: flex-end;
  min-height: min(88svh, 860px); padding: 120px var(--gouttiere) clamp(40px, 6vw, 76px);
  background: var(--lagon-profond); color: #fff; overflow: hidden;
}
.hero-fond { position: absolute; inset: 0; z-index: -2; margin: 0; }
.hero-fond img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 38%; }
.hero::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    linear-gradient(to top, rgba(8, 44, 49, .92) 0%, rgba(8, 44, 49, .7) 30%, rgba(8, 44, 49, 0) 62%),
    linear-gradient(to right, rgba(8, 44, 49, .55) 0%, rgba(8, 44, 49, 0) 58%);
}
.hero-contenu { max-width: 720px; }
.hero h1 {
  font-size: clamp(3.2rem, 8.4vw, 7.4rem); line-height: .92; letter-spacing: -.02em;
  margin: 0 0 22px; color: #fff;
}
.hero h1 .ligne { display: inline-block; white-space: nowrap; } /* « Le tir à l'arc » / « à Pirae » : jamais coupés ailleurs */
.hero .chapo { font-size: clamp(1.1rem, 1.45vw, 1.28rem); line-height: 1.55; color: #e6f2f1; max-width: 34em; margin-bottom: 28px; }
.hero .chapo strong { color: #fff; }
.actions { display: flex; flex-wrap: wrap; gap: 12px; margin: 0; }
.hero-note { margin: 18px 0 0; font-size: .95rem; color: #cfe6e6; }
/* Bouton secondaire sur photo : verre dépoli, lisible sur n'importe quelle zone de l'image. */
.btn-verre {
  background: rgba(255, 255, 255, .14); color: #fff; border-color: rgba(255, 255, 255, .55);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
}
.btn-verre:hover { background: rgba(255, 255, 255, .26); color: #fff; border-color: #fff; }

/* ---------- Bandeau d'essentiel : les quatre repères, sur le lagon profond ---------- */
.reperes {
  list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  background: var(--lagon-profond); color: #fff;
}
.reperes li { display: flex; gap: 14px; align-items: center; padding: 24px clamp(16px, 2vw, 28px); }
.reperes li:first-child { padding-left: var(--gouttiere); }
.reperes li + li { border-left: 1px solid rgba(255, 255, 255, .16); }
.reperes strong { display: block; font-family: var(--titre); font-size: 1.5rem; font-weight: 700; line-height: 1.05; }
.reperes li > div > span { display: block; color: var(--sur-profond); font-size: .95rem; line-height: 1.35; margin-top: 3px; }
.reperes .pastille-icone { background: rgba(255, 255, 255, .1); color: #fff; }
.reperes .pastille-icone.or { background: var(--or); color: #0f2a2e; }
.reperes .pastille-icone.rouge, .reperes .pastille-icone.encre { background: rgba(255, 255, 255, .1); color: #fff; }

/* ---------- Pastilles d'icônes : ronds teintés de lagon ---------- */
.pastille-icone {
  display: grid; place-items: center; width: 46px; height: 46px; flex: none; border-radius: 50%;
  background: color-mix(in srgb, var(--lagon) 12%, var(--surface)); color: var(--lagon);
}
.pastille-icone.or { background: var(--or); color: #0f2a2e; }
.pastille-icone.rouge { background: color-mix(in srgb, var(--rouge) 14%, var(--surface)); color: var(--rouge-texte); }
.pastille-icone.encre { background: var(--lagon-profond); color: #fff; }
.pastille-icone .icone { stroke-width: 2; }

/* ---------- Sections ---------- */
.section { padding: clamp(72px, 9vw, 120px) var(--gouttiere); }
.section-sable { background: var(--papier-2); }
.entete-section { max-width: 760px; margin-bottom: clamp(32px, 4.5vw, 52px); }
.entete-section.centre { margin-inline: auto; text-align: center; }
.entete-section p { color: var(--encre-2); font-size: 1.15rem; margin: 0; }
/* Les titres restent d'un seul tenant : aucun mot surligné. */
.insec { white-space: nowrap; }
h2 em, h1 em { font-style: normal; }

.grille-3 { display: grid; gap: 22px; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grille-2 { display: grid; gap: 22px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grille-4 { display: grid; gap: 20px; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.grille-2 > *, .grille-3 > *, .grille-4 > * { min-width: 0; }
.carte {
  background: var(--surface); border: var(--bord-carte); border-radius: var(--rayon);
  padding: clamp(22px, 2.6vw, 30px); box-shadow: var(--ombre); overflow-wrap: break-word;
}
.carte h3 { margin-top: 14px; }
.carte p { color: var(--encre-2); }
.carte p:last-child, .carte ul:last-child { margin-bottom: 0; }
.marge-haute { margin-top: 22px; }

/* ---------- Le club ---------- */
.club-grille { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: clamp(28px, 5vw, 64px); align-items: start; }
.club-grille > * { min-width: 0; }
.club-texte > p { color: var(--encre-2); font-size: 1.1rem; }
.club-texte h2 + p { color: var(--encre); font-size: 1.28rem; line-height: 1.5; }
.atouts { list-style: none; margin: 30px 0 0; padding: 0; display: grid; gap: 18px; }
.atouts li { display: flex; gap: 16px; align-items: flex-start; }
.atouts h3 { margin: 2px 0 2px; font-size: 1.4rem; }
.atouts p { margin: 0; color: var(--encre-2); font-size: 1.02rem; }

/* Photos : posées droites, grands arrondis, légende en pastille de verre */
.mosaique { display: grid; grid-template-columns: 1.1fr 1fr; grid-template-rows: 1fr 1fr; gap: 14px; aspect-ratio: 1 / 1.08; position: sticky; top: 96px; }
.mosaique figure { position: relative; margin: 0; overflow: hidden; background: var(--papier-2); border-radius: var(--rayon-photo); box-shadow: var(--ombre); }
.mosaique .grande { grid-row: 1 / span 2; }
.mosaique picture, .mosaique img { display: block; width: 100%; height: 100%; }
.mosaique img { object-fit: cover; }
.mosaique figure:nth-child(2) img { object-position: 22% 50%; }
.mosaique figcaption {
  position: absolute; left: 10px; bottom: 10px; right: auto; max-width: calc(100% - 20px); padding: 5px 11px;
  font: 600 .86rem/1.25 var(--texte); color: #0f2a2e; background: rgba(255, 255, 255, .94); border-radius: 999px;
}
.photo-cadre { position: relative; margin: 0; }
.photo-cadre img { display: block; width: 100%; height: auto; border-radius: var(--rayon-photo); box-shadow: var(--ombre); }
.photo-cadre figcaption { padding: 12px 4px 0; font-size: .95rem; color: var(--encre-3); }

/* ---------- Essai offert : le panneau or, celui de l'action principale ---------- */
.essai { position: relative; padding: clamp(72px, 9vw, 120px) var(--gouttiere); background: var(--or); color: #0f2a2e; overflow: hidden; }
.essai::after { /* une grande cible en filigrane, à peine visible */
  content: ""; position: absolute; z-index: 0; width: min(70vw, 760px); aspect-ratio: 1; right: -18%; top: -30%; pointer-events: none; border-radius: 50%;
  background: repeating-radial-gradient(circle, transparent 0 9%, rgba(15, 42, 46, .06) 9% 9.6%);
}
.essai-grille { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: clamp(28px, 5vw, 64px); align-items: center; }
.essai-grille > * { min-width: 0; }
.essai h2 { font-size: clamp(2.6rem, 6vw, 4.8rem); color: #0f2a2e; line-height: .95; letter-spacing: -.02em; }
.essai-chapo { font-size: 1.2rem; color: #2b3f42; max-width: 30em; }
.essai .actions { margin-top: 26px; }
/* Sur le fond or, l'action principale passe en lagon profond (un bouton or y disparaîtrait). */
.essai .btn-or { background: #0a4f57; color: #fff; box-shadow: 0 10px 24px -12px rgba(10, 79, 87, .8); }
.essai .btn-or:hover { background: #0f2a2e; color: #fff; }
.essai .btn-clair { background: transparent; color: #0f2a2e; border-color: rgba(15, 42, 46, .45); }
.essai .btn-clair:hover { background: rgba(255, 255, 255, .4); color: #0f2a2e; border-color: #0f2a2e; }
.essai-etapes { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; counter-reset: pas; }
.essai-etapes li {
  display: flex; gap: 16px; align-items: flex-start; padding: 18px 20px;
  background: #fff; color: #0f2a2e; border-radius: var(--rayon); box-shadow: 0 1px 2px rgba(15, 42, 46, .08), 0 12px 28px -16px rgba(15, 42, 46, .4);
}
.essai-etapes .pastille-icone { background: #fff3cc; color: #0a4f57; }
.essai-etapes strong { display: block; font-family: var(--titre); font-size: 1.4rem; line-height: 1.1; }
.essai-etapes li > div > span { display: block; color: #3c5559; font-size: 1rem; }
.essai-etapes li.bonus { background: #0a4f57; color: #fff; }
.essai-etapes li.bonus .pastille-icone { background: rgba(255, 255, 255, .12); color: var(--or); }
.essai-etapes li.bonus strong { color: var(--or); }
.essai-etapes li.bonus > div > span { color: #cfe6e6; }
.lien-clair { color: inherit; font-weight: 600; }

/* ---------- Sécurité ---------- */
.securite-grille { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 64px); align-items: start; }
.securite-grille > * { min-width: 0; }
.securite-grille .photo-cadre { position: sticky; top: 100px; }
.regles { list-style: none; margin: 0; padding: 0; display: grid; gap: 22px; counter-reset: regle; }
.regles li { display: flex; gap: 16px; align-items: flex-start; }
.regles h3 { margin: 2px 0 4px; font-size: 1.4rem; }
.regles p { margin: 0; color: var(--encre-2); }
.confiance { list-style: none; margin: clamp(36px, 4vw, 52px) 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.confiance { padding-top: clamp(24px, 3vw, 32px); border-top: 1px solid color-mix(in srgb, var(--encre) 14%, transparent); }
.confiance li { display: flex; gap: 14px; align-items: flex-start; }
.confiance strong { display: block; margin-bottom: 4px; font-family: var(--titre); font-size: 1.25rem; font-weight: 700; line-height: 1.1; }
.confiance .txt { display: block; color: var(--encre-3); font-size: .95rem; line-height: 1.45; }

/* ---------- Horaires ---------- */
.moment .gros { font-family: var(--titre); font-weight: 700; font-size: 2.2rem; line-height: 1.02; color: var(--encre); margin: 16px 0 8px; }
.moment .btn { margin-top: 6px; }
/* Le créneau du samedi : la seule carte en lagon profond, c'est l'information clé. */
.creneau { background: var(--lagon-profond); color: #fff; border-color: transparent; }
.creneau .gros { color: #fff; }
.creneau p { color: var(--sur-profond); }
.creneau .heure { margin: 0 0 6px; font-family: var(--titre); font-weight: 700; font-size: 2.8rem; line-height: 1; color: var(--or); font-variant-numeric: tabular-nums; }
.creneau .pastille-icone { background: rgba(255, 255, 255, .12); color: var(--or); }
.conseil {
  display: flex; gap: 14px; align-items: flex-start; margin-top: 22px; padding: 18px 20px;
  border: var(--bord); border-radius: var(--rayon); background: color-mix(in srgb, var(--lagon) 7%, var(--surface)); color: var(--encre);
}
.conseil p { margin: 0; color: var(--encre-2); }
.conseil strong { color: var(--encre); }

/* ---------- L'appli du club : panneau lagon profond ---------- */
.appli { background: var(--lagon-profond); color: #fff; overflow: hidden; }
.appli h2 { color: #fff; }
.appli .entete-section p { color: var(--sur-profond); }
.telephones {
  list-style: none; margin: 0 auto; padding: 0; max-width: 1080px;
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(18px, 2.6vw, 36px); align-items: start;
}
.telephones > li:nth-child(even) { margin-top: 44px; }
.telephone { margin: 0; }
.coque {
  position: relative; padding: 8px; border-radius: 40px;
  background: linear-gradient(150deg, #3a4450 0%, #151b22 38%, #0b0f14 100%);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .35), 0 24px 48px -20px rgba(0, 0, 0, .55);
  transition: transform var(--duree) ease-out;
}
.coque::before, .coque::after { content: ""; position: absolute; width: 3px; border-radius: 2px; background: #1c232c; }
.coque::before { right: -3px; top: 24%; height: 12%; }
.coque::after { left: -3px; top: 18%; height: 7%; box-shadow: 0 34px 0 #1c232c, 0 64px 0 #1c232c; }
.vitre { position: relative; overflow: hidden; border-radius: 32px; background: #f4f6fa; padding-top: 24px; }
.vitre::before { content: ""; position: absolute; top: 7px; left: 50%; transform: translateX(-50%); width: 30%; height: 14px; border-radius: 999px; background: #0b0f14; z-index: 1; }
.vitre::after { content: ""; position: absolute; top: 9px; right: 16%; width: 15px; height: 8px; border-radius: 3px; border: 1.5px solid #121a24; box-shadow: 2px 0 0 -0.5px #121a24; }
.vitre .heure { position: absolute; top: 6px; left: 15%; font: 600 .66rem/1 var(--texte); color: #121a24; }
.vitre img { display: block; width: 100%; height: auto; }
.telephone figcaption { margin-top: 18px; text-align: center; }
.telephone figcaption strong { display: block; font-family: var(--titre); font-size: 1.3rem; color: var(--or); }
.telephone figcaption span { display: block; color: var(--sur-profond); font-size: .95rem; line-height: 1.4; }
.glisser { display: none; }
.appli-atouts { list-style: none; margin: clamp(52px, 6vw, 76px) auto 0; padding: 0; max-width: 1080px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 26px 32px; }
.appli-atouts li { display: flex; gap: 14px; align-items: flex-start; }
.appli-atouts strong { display: block; font-family: var(--titre); font-size: 1.25rem; color: #fff; margin-bottom: 2px; }
.appli-atouts span:not(.pastille-icone) { color: var(--sur-profond); }
.appli .pastille-icone, .appli .pastille-icone.rouge { background: rgba(255, 255, 255, .1); color: #fff; }
.appli .pastille-icone.or { background: var(--or); color: #0f2a2e; }
.appli-acces {
  display: flex; gap: 14px; align-items: flex-start; max-width: 780px; margin: clamp(40px, 5vw, 56px) auto 0;
  padding: 16px 20px; background: rgba(255, 255, 255, .07); border: 1px solid rgba(255, 255, 255, .18); border-radius: var(--rayon); color: #e6f2f1;
}
.appli-acces > .icone { color: var(--or); margin-top: 3px; }
.appli-acces small { display: block; margin-top: 6px; color: var(--sur-profond); font-size: .9rem; }

/* ---------- Tarifs : le prix d'abord, une pastille de couleur pour chaque formule ---------- */
.formule { display: flex; flex-direction: column; overflow: hidden; }
.formule::before { content: ""; display: block; width: 36px; height: 6px; margin-bottom: 18px; border-radius: 999px; background: var(--lagon); }
.formule.loisir::before { background: var(--or); }
.formule.competition::before { background: var(--rouge); }
.formule.manp::before { background: var(--encre-3); }
.formule h3 { margin: 0 0 6px; font-size: 1.6rem; }
.formule .pour { color: var(--encre-2); font-size: .98rem; flex: 1; }
.prix {
  display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 6px; margin: 18px 0 6px; padding-top: 16px;
  border-top: var(--bord); font-family: var(--titre); font-weight: 700; font-size: 3rem; line-height: 1; letter-spacing: -.02em; color: var(--encre); font-variant-numeric: tabular-nums;
}
.prix small { font-size: 1.1rem; font-weight: 600; letter-spacing: 0; color: var(--encre-3); }
.detail-prix { margin: 0; font-size: .92rem; color: var(--encre-3); }
.liste-coches { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.liste-coches li { display: flex; gap: 10px; align-items: flex-start; color: var(--encre-2); }
.liste-coches .icone { flex: none; width: 22px; height: 22px; padding: 4px; margin-top: 2px; border-radius: 50%; background: color-mix(in srgb, var(--lagon) 14%, var(--surface)); color: var(--lagon); stroke-width: 3; }
.liste-coches strong { color: var(--encre); }

/* ---------- Inscription : trois étapes numérotées (c'est bien une suite) ---------- */
.etapes { list-style: none; margin: 0; padding: 0; display: grid; gap: 20px; grid-template-columns: repeat(3, minmax(0, 1fr)); counter-reset: etape; }
.etapes li { counter-increment: etape; position: relative; padding-top: 84px; }
.etapes li::before {
  content: counter(etape); position: absolute; top: 22px; left: clamp(22px, 2.6vw, 30px);
  display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%;
  font-family: var(--titre); font-weight: 700; font-size: 1.5rem; line-height: 1;
  background: color-mix(in srgb, var(--lagon) 12%, var(--surface)); color: var(--lagon);
}
.etapes h3 { margin: 0 0 6px; font-size: 1.45rem; }
.appel-inscription {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px;
  margin-top: 32px; padding: clamp(24px, 3.2vw, 38px); border-radius: var(--rayon);
  background: var(--lagon-profond); color: #fff; box-shadow: var(--ombre);
}
.appel-inscription h3 { margin: 0 0 4px; font-size: clamp(1.8rem, 3.2vw, 2.4rem); color: #fff; }
.appel-inscription p { margin: 0; color: var(--sur-profond); }
.appel-inscription .lien-clair { color: var(--or); text-decoration: underline; }
.documents { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.documents a {
  display: flex; align-items: center; gap: 14px; min-height: 64px; padding: 12px 16px;
  border: var(--bord); border-radius: var(--rayon-petit); background: var(--surface); color: var(--encre); text-decoration: none;
  transition: border-color var(--duree) ease-out, box-shadow var(--duree) ease-out;
}
.documents a:hover { color: var(--encre); border-color: var(--lagon); }
.documents .icone-doc { color: var(--lagon); width: 28px; height: 28px; }
.documents .doc-texte { flex: 1; min-width: 0; }
.documents strong { display: block; line-height: 1.25; }
.documents span { display: block; color: var(--encre-3); font-size: .9rem; line-height: 1.35; }
.documents .format { flex: none; font: 600 .78rem/1 var(--texte); padding: 5px 9px; border-radius: 999px; background: var(--papier-2); color: var(--encre-2); }

/* ---------- Questions fréquentes ---------- */
.faq { max-width: 860px; margin: 0 auto; display: grid; gap: 10px; }
.faq details { background: var(--surface); border: var(--bord-carte); box-shadow: var(--ombre-petite); border-radius: var(--rayon-petit); transition: box-shadow var(--duree) ease-out; }
.faq details[open] { box-shadow: var(--ombre); }
.faq summary {
  list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 16px;
  min-height: 62px; padding: 14px 20px; cursor: pointer; font-weight: 600; font-size: 1.1rem;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary .icone { flex: none; width: 30px; height: 30px; padding: 5px; border-radius: 50%; background: color-mix(in srgb, var(--lagon) 12%, var(--surface)); color: var(--lagon); transition: transform var(--duree) ease-out, background-color var(--duree) ease-out; }
.faq details[open] summary .icone { transform: rotate(180deg); background: var(--lagon); color: #fff; }
.faq .reponse { padding: 0 20px 18px; color: var(--encre-2); }
.faq .reponse p:last-child { margin-bottom: 0; }

/* ---------- Contact ---------- */
.contact-carte { display: flex; flex-direction: column; gap: 6px; }
.contact-carte .lien-fort {
  display: inline-flex; align-items: center; min-height: 48px; margin-top: 10px;
  font-family: var(--titre); font-weight: 700; font-size: clamp(1.3rem, 1.7vw, 1.7rem); color: var(--encre); text-decoration: none; word-break: break-word;
}
.contact-carte .lien-fort:hover { color: var(--lagon); }
.contact-carte p { margin: 0; color: var(--encre-3); }
.contacts .carte:nth-child(1) { background: var(--lagon-profond); border-color: transparent; }
.contacts .carte:nth-child(1) .lien-fort { color: #fff; }
.contacts .carte:nth-child(1) p { color: var(--sur-profond); }
.contacts .carte:nth-child(1) .pastille-icone { background: rgba(255, 255, 255, .12); color: var(--or); }

/* ---------- Pied de page : le lagon de nuit ---------- */
.pied { position: relative; padding: 64px var(--gouttiere) 28px; background: #082c31; color: var(--sur-profond); overflow: hidden; }
.pied-haut { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1.4fr) repeat(2, minmax(0, 1fr)); gap: 32px; }
.pied-marque { display: flex; gap: 14px; align-items: flex-start; }
.pied-marque img { border-radius: 50%; background: #fff; flex: none; }
.pied-marque strong { display: block; font-family: var(--titre); font-size: 1.7rem; color: #fff; line-height: 1; margin-bottom: 6px; }
.pied-marque p { margin: 0; font-size: .95rem; }
.pied h2 { font-family: var(--texte); font-size: 1rem; font-weight: 600; color: var(--or); margin-bottom: 10px; }
.pied ul { list-style: none; margin: 0; padding: 0; }
.pied li a { display: inline-flex; align-items: center; min-height: 40px; color: #e6f2f1; text-decoration: none; }
.pied li a:hover { color: var(--or); text-decoration: underline; }
.pied .lien-bureau { gap: 6px; }
.pied .lien-bureau .icone { width: 1em; height: 1em; color: var(--or); }
.pied-geant {
  position: relative; z-index: 0; margin: 40px 0 0; font-family: var(--titre); font-weight: 700;
  font-size: clamp(4rem, 19vw, 17rem); line-height: .8; letter-spacing: -.03em; white-space: nowrap;
  color: rgba(255, 255, 255, .06); user-select: none;
}
.mentions { position: relative; z-index: 1; margin: 28px 0 0; padding-top: 20px; border-top: 1px solid rgba(255, 255, 255, .14); color: #a9c7c6; font-size: .88rem; line-height: 1.6; }
.mentions a { color: #e6f2f1; }

/* ---------- Page intérieure (essai, inscription) : bandeau photo voilé de lagon ---------- */
.bandeau-page {
  position: relative; isolation: isolate; overflow: hidden; color: #fff; padding: clamp(44px, 7vw, 92px) var(--gouttiere) clamp(52px, 7vw, 96px);
  background: var(--lagon-profond);
}
.hero-photo { position: absolute; inset: 0; z-index: -2; margin: 0; }
.hero-photo img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 30% 50%; }
.bandeau-page::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(100deg, rgba(8, 44, 49, .94) 0%, rgba(8, 44, 49, .82) 45%, rgba(8, 44, 49, .45) 100%); }
.bandeau-page h1 { font-size: clamp(2.6rem, 6.4vw, 4.8rem); line-height: .95; letter-spacing: -.02em; margin-bottom: 16px; }
.bandeau-page h1 em { font-style: normal; }
.bandeau-page p { max-width: 40em; color: #e6f2f1; font-size: 1.14rem; margin: 0; }
.fil { display: flex; width: max-content; align-items: center; gap: 8px; margin-bottom: 14px; font-size: .95rem; }
.fil a { color: #e6f2f1; min-height: 44px; display: inline-flex; align-items: center; }
.fil a:hover { color: var(--or); }

/* ---------- Formulaire ---------- */
.zone-formulaire { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 28px; align-items: start; }
.zone-formulaire > * { min-width: 0; }
.formulaire { padding: clamp(20px, 3vw, 36px); }
.formulaire fieldset { border: 0; margin: 0 0 34px; padding: 0; min-width: 0; }
.formulaire legend {
  display: flex; align-items: center; gap: 12px; width: 100%; padding: 0 0 12px; margin-bottom: 18px;
  border-bottom: var(--bord); font-family: var(--titre); font-weight: 700; font-size: 1.6rem;
}
.formulaire legend .num { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; background: color-mix(in srgb, var(--lagon) 12%, var(--surface)); color: var(--lagon); font-size: 1.2rem; }
.champs { display: grid; gap: 18px 20px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.champ { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.champ.large { grid-column: 1 / -1; }
.champ label { font-weight: 600; font-size: .98rem; }
.champ .requis { color: var(--rouge-texte); }
.champ input, .champ select, .champ textarea {
  width: 100%; min-height: 52px; padding: 12px 14px; font: 400 1.05rem/1.4 var(--texte); /* ≥ 16 px : pas de zoom forcé sur iPhone */
  color: var(--encre); background: var(--surface); border: 1px solid var(--trait); border-radius: var(--rayon-petit);
  transition: box-shadow var(--duree) ease;
}
.champ textarea { min-height: 110px; resize: vertical; }
.champ input:focus, .champ select:focus, .champ textarea:focus { outline: none; border-color: var(--lagon); box-shadow: 0 0 0 3px color-mix(in srgb, var(--lagon) 28%, transparent); }
.champ [aria-invalid="true"] { border-color: var(--rouge); box-shadow: 0 0 0 3px color-mix(in srgb, var(--rouge) 22%, transparent); }
.champ .aide { font-size: .9rem; color: var(--encre-3); }
.erreur-champ { display: flex; gap: 6px; align-items: flex-start; margin: 0; font-size: .92rem; font-weight: 600; color: var(--rouge-texte); }
.choix { display: grid; gap: 10px; }
.choix label {
  display: flex; gap: 14px; align-items: flex-start; min-height: 56px; padding: 14px 16px; cursor: pointer;
  border: 1px solid var(--trait); border-radius: var(--rayon-petit); background: var(--surface); font-weight: 400;
  transition: box-shadow var(--duree) ease, background-color var(--duree) ease;
}
.choix label:hover { box-shadow: var(--ombre-petite); }
.choix input { width: 22px; height: 22px; min-height: 0; margin: 2px 0 0; flex: none; accent-color: var(--lagon-profond); }
.choix label:has(input:checked) { background: color-mix(in srgb, var(--lagon) 10%, var(--surface)); border-color: var(--lagon); box-shadow: 0 0 0 1px var(--lagon); }
.choix label:has(input:checked) .tarif { color: var(--encre); }
.choix .libelle { flex: 1; }
.choix strong { display: block; }
.choix span { display: block; color: var(--encre-3); font-size: .92rem; }
.choix .tarif { flex: none; font-family: var(--titre); font-weight: 700; font-size: 1.3rem; color: var(--encre); white-space: nowrap; }
.formule-choix { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.formule-choix label { flex-direction: column; gap: 8px; }
.miel { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.resume-erreurs { margin: 0 0 24px; padding: 18px 20px; border-radius: var(--rayon-petit); background: #fdecea; border: 2px solid var(--rouge); color: #7d1a14; }
:root[data-theme="dark"] .resume-erreurs { background: #2e1513; color: #ffc9c4; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .resume-erreurs { background: #2e1513; color: #ffc9c4; } }
.resume-erreurs h2 { font-size: 1.4rem; margin: 0 0 8px; text-transform: none; }
.resume-erreurs ul { margin: 0; padding-left: 20px; }
.resume-erreurs a { color: inherit; font-weight: 600; }
.pied-form { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 24px; padding-top: 24px; border-top: var(--bord); }
.pied-form p { flex: 1; min-width: 240px; margin: 0; font-size: .92rem; color: var(--encre-3); }
.aparte { position: sticky; top: 96px; display: grid; gap: 18px; }
.aparte h2 { font-size: 1.45rem; margin-bottom: 10px; }
.confirmation { text-align: left; }
.confirmation .coche-grande { display: grid; place-items: center; width: 68px; height: 68px; border-radius: 50%; background: color-mix(in srgb, var(--lagon) 14%, var(--surface)); color: var(--lagon); margin-bottom: 16px; }
.confirmation .coche-grande .icone { width: 34px; height: 34px; stroke-width: 2.8; }
.confirmation h2 { font-size: clamp(2.2rem, 4.4vw, 3rem); }

/* ---------- Page Confidentialité ---------- */
.texte-legal { max-width: 860px; margin-inline: auto; }
.texte-legal h1 { font-size: clamp(2.2rem, 5vw, 3.4rem); letter-spacing: -.015em; margin-top: 8px; }
.texte-legal h2 { font-size: 1.6rem; margin-top: 1.6em; }
.texte-legal p, .texte-legal li { max-width: 70ch; color: var(--encre-2); }
.texte-legal .chapeau { font-size: 1.12rem; color: var(--encre); }
.texte-legal ul { padding-left: 1.2em; display: flex; flex-direction: column; gap: 6px; }
.texte-legal .tableau-defile { overflow-x: auto; margin: 12px 0; }
.texte-legal table { width: 100%; border-collapse: collapse; font-size: .95rem; min-width: 520px; }
.texte-legal th { text-align: left; font-family: var(--titre); font-size: 1.1rem; padding: 10px 12px; border-bottom: var(--bord); }
.texte-legal td { padding: 10px 12px; border-bottom: 1px solid var(--ligne); vertical-align: top; color: var(--encre-2); }
.texte-legal .mise-a-jour { font-size: .88rem; margin-top: 2em; }
.fil-clair .fil a, .section .fil a { color: var(--lien); }

/* ---------- Bouton de réservation à portée de pouce (téléphone) ---------- */
.barre-cta { display: none; }
.barre-cta[hidden] { display: none !important; }

/* ---------- Adaptation aux écrans ---------- */
@media (max-width: 1140px) {
  .nav-large { display: none; }
  .menu-mobile { display: block; }
  .entete > .btn { display: none; }
}
@media (max-width: 1020px) {
  .reperes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .reperes li:first-child { padding-left: clamp(16px, 2vw, 28px); }
  .reperes li:nth-child(3) { border-left: 0; }
  .reperes li:nth-child(n + 3) { border-top: 1px solid rgba(255, 255, 255, .16); }
  .grille-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .zone-formulaire { grid-template-columns: 1fr; }
  .aparte { position: static; }
  .pied-haut { grid-template-columns: 1fr 1fr; }
  .pied-marque { grid-column: 1 / -1; }
  .telephones { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 560px; }
  .telephones > li:nth-child(even) { margin-top: 0; }
  .appli-atouts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 860px) {
  /* Téléphone : la photo reste en plein cadre, le texte se pose sur la pelouse (voile plus haut). */
  .hero { min-height: max(620px, 92svh); padding-top: 100px; }
  .hero::before { background: linear-gradient(to top, rgba(8, 44, 49, .95) 0%, rgba(8, 44, 49, .82) 42%, rgba(8, 44, 49, .15) 72%, rgba(8, 44, 49, 0) 100%); }
  .hero-fond img { object-position: 42% 30%; }
  .hero .chapo { margin-bottom: 22px; }
}
@media (max-width: 760px) {
  .club-grille, .grille-3, .grille-2, .etapes, .securite-grille, .confiance, .essai-grille { grid-template-columns: 1fr; }
  .hero h1 { font-size: clamp(3rem, 14vw, 4.6rem); }
  .hero .actions .btn, .essai .actions .btn { flex: 1 1 100%; }
  .reperes li { flex-direction: column; align-items: flex-start; gap: 10px; padding: 18px 16px; }
  .reperes strong { font-size: 1.3rem; }
  .mosaique { position: relative; top: auto; aspect-ratio: auto; grid-template-columns: 1fr 1fr; grid-template-rows: auto; gap: 14px; }
  /* Hauteurs explicites : avec aspect-ratio, la grille sous-estimait la hauteur et la section suivante recouvrait les photos. */
  .mosaique .grande { grid-column: 1 / -1; grid-row: auto; aspect-ratio: auto; height: min(118vw, 560px); }
  .mosaique figure:not(.grande) { aspect-ratio: auto; height: min(44vw, 240px); }
  .securite-grille .photo-cadre { position: static; }
  .etapes { gap: 26px; }
  .formule-choix { grid-template-columns: 1fr; }
  .champs { grid-template-columns: 1fr; }
  .pied-haut { grid-template-columns: 1fr; }
  .appel-inscription .btn { width: 100%; }
  /* L'appli : un téléphone et demi à l'écran, on fait glisser les suivants. */
  .telephones { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 20px; max-width: none; margin: 0 calc(-1 * var(--gouttiere)); padding: 10px var(--gouttiere) 22px; scrollbar-width: none; }
  .telephones::-webkit-scrollbar { display: none; }
  .telephones > li { flex: 0 0 64%; scroll-snap-align: center; }
  .telephones > li .telephone { transform: none !important; }
  .glisser { display: flex; justify-content: center; align-items: center; gap: 6px; margin: 4px 0 0; color: #d5cfc4; font-size: .92rem; }
  .appli-atouts { grid-template-columns: 1fr; }
  .barre-cta {
    display: block; position: fixed; z-index: 45; left: 12px; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom));
    transform: translateY(150%); transition: transform .3s cubic-bezier(.2, .8, .2, 1);
  }
  .barre-cta.visible { transform: none; }
  .barre-cta .btn { width: 100%; min-height: 56px; font-size: 1.08rem; padding-inline: 18px; }
  .pied { padding-bottom: 108px; }
}
@media (max-width: 480px) { .grille-4 { grid-template-columns: 1fr; } }
@media (max-width: 400px) { .marque small { display: none; } }

/* ============================================================
   Inscription en ligne pas à pas (adhesion.html)
   ============================================================ */
.bandeau-court { padding-block: clamp(32px, 5vw, 56px) clamp(36px, 5vw, 60px); }
.parcours-section { padding-top: clamp(28px, 4vw, 48px); }
.parcours { max-width: 760px; margin: 0 auto; scroll-margin-top: 90px; }
.parcours-tete { margin-bottom: 18px; }
.parcours-etape { margin: 0 0 8px; font-family: var(--texte); font-weight: 600; font-size: 1rem; color: var(--lagon); }
.parcours-jauge { height: 10px; border-radius: 999px; background: var(--papier-2); overflow: hidden; }
.parcours-jauge > span { display: block; height: 100%; width: 0; background: var(--lagon); border-radius: 999px; transition: width .35s cubic-bezier(.2, .8, .2, 1); }
.reprise { margin: 10px 0 0; font-size: .95rem; color: var(--encre-2); }
#parcours-form { background: var(--surface); border: var(--bord-carte); border-radius: var(--rayon); box-shadow: var(--ombre); padding: clamp(20px, 4vw, 36px); }
.etape h2 { font-size: clamp(2rem, 6vw, 2.8rem); margin-bottom: 18px; letter-spacing: -.015em; }
.etape h2:focus { outline: none; }
.etape h3 { margin: 26px 0 10px; font-size: 1.35rem; }
.etape > p { color: var(--encre-2); }
/* Cartes de choix (radio) */
.cartes-choix { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); gap: 12px; }
.carte-choix {
  position: relative; display: flex; flex-direction: column; gap: 4px; padding: 16px 18px 16px 52px; min-height: 76px; cursor: pointer;
  background: var(--surface); border: 1px solid var(--trait); border-radius: var(--rayon); transition: border-color var(--duree) ease-out, box-shadow var(--duree) ease-out, background-color var(--duree) ease-out;
}
.carte-choix input { position: absolute; left: 18px; top: 19px; width: 22px; height: 22px; margin: 0; accent-color: var(--lagon-profond); }
.carte-choix:hover { border-color: var(--lagon); }
.carte-choix:has(input:checked) { background: color-mix(in srgb, var(--lagon) 10%, var(--surface)); border-color: var(--lagon); box-shadow: 0 0 0 1px var(--lagon); }
.carte-choix:has(input:checked) .cc-detail { color: var(--encre-2); }
.carte-choix:has(input:focus-visible) { outline: 3px solid var(--bleu-cible); outline-offset: 3px; }
.cc-titre { font-family: var(--titre); font-weight: 700; font-size: 1.4rem; line-height: 1.1; }
.cc-prix { font-family: var(--titre); font-weight: 700; font-size: 1.2rem; }
.cc-detail { font-size: .95rem; color: var(--encre-3); line-height: 1.35; }
/* Champs du parcours (repris du formulaire) */
.etape .champs { margin-top: 4px; }
.etape .champ { margin-top: 14px; }
.facultatif { font-weight: 400; color: var(--encre-3); font-size: .88rem; }
.libelle-champ { font-weight: 600; font-size: .98rem; }
/* Bascule à deux boutons (Oui / Non, Femme / Homme) */
.bascules { display: inline-flex; border: 1px solid var(--trait); border-radius: 999px; overflow: hidden; width: max-content; max-width: 100%; }
.bascules label { position: relative; cursor: pointer; }
.bascules input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.bascules span { display: inline-flex; align-items: center; justify-content: center; min-width: 88px; min-height: 48px; padding: 0 18px; font-weight: 700; background: var(--surface); }
.bascules label + label span { border-left: 1px solid var(--trait); }
.bascules input:checked + span { background: var(--lagon-profond); color: #fff; }
.bascules input:focus-visible + span { outline: 3px solid var(--bleu-cible); outline-offset: -5px; }
/* Interrupteur (case à cocher) */
.interrupteur { display: flex; gap: 14px; align-items: flex-start; margin-top: 16px; padding: 14px 16px; border: var(--bord); border-radius: var(--rayon); cursor: pointer; background: var(--surface); transition: border-color var(--duree) ease-out; }
.interrupteur input { appearance: none; flex: none; position: relative; width: 48px; height: 28px; margin: 0; border: 1px solid var(--trait); border-radius: 999px; background: var(--papier-2); cursor: pointer; transition: background-color var(--duree) ease; }
.interrupteur input::after { content: ""; position: absolute; top: 2px; left: 2px; width: 20px; height: 20px; border-radius: 50%; background: var(--encre-3); transition: transform var(--duree) ease-out, background-color var(--duree) ease-out; }
.interrupteur input:checked { background: var(--lagon); border-color: var(--lagon); }
.interrupteur input:checked::after { transform: translateX(20px); background: #fff; }
.interrupteur input:focus-visible { outline: 3px solid var(--bleu-cible); outline-offset: 2px; }
.interrupteur:has(input:checked) { border-color: var(--lagon); }
/* Liste de boutons radio simples */
.liste-radio { display: grid; gap: 8px; }
.liste-radio label { display: flex; gap: 12px; align-items: flex-start; padding: 12px 14px; border: 1.5px solid var(--ligne); border-radius: var(--rayon-petit); cursor: pointer; background: var(--surface); }
.liste-radio input { width: 22px; height: 22px; margin: 1px 0 0; flex: none; accent-color: var(--lagon-profond); }
.liste-radio label:has(input:checked) { border-color: var(--lagon); background: color-mix(in srgb, var(--lagon) 10%, var(--surface)); font-weight: 600; }
/* Total */
.total { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; margin-top: 22px; padding: 16px 18px; border-radius: var(--rayon); background: var(--lagon-profond); color: #fff; }
.total span { font-size: .95rem; color: var(--sur-profond); }
.total strong { font-family: var(--titre); font-size: 2.4rem; line-height: 1; color: var(--or); }
.total small { flex-basis: 100%; color: #d5cfc4; font-size: .9rem; }
/* Questionnaire de santé */
.question { border: 0; margin: 0; padding: 14px 0; border-bottom: 1px solid var(--ligne); display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: center; justify-content: space-between; }
.question legend { float: left; width: 100%; padding: 0; font-weight: 600; line-height: 1.4; }
.question .bascules span { min-width: 72px; min-height: 44px; }
.num-q { display: inline-grid; place-items: center; width: 28px; height: 28px; margin-right: 10px; border-radius: 50%; border: 2px solid var(--trait); font-family: var(--titre); font-size: 1rem; }
.resultat-sante { margin-top: 18px; padding: 16px 18px; border-radius: var(--rayon); border: var(--bord); background: #e3f4e8; color: #0b3d1e; }
.resultat-sante.alerte { background: #fff2cf; color: #4d3200; }
.resultat-sante a { color: inherit; }
:root[data-theme="dark"] .resultat-sante { background: #12301e; color: #c9f0d5; }
:root[data-theme="dark"] .resultat-sante.alerte { background: #33280c; color: #ffe2a3; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .resultat-sante { background: #12301e; color: #c9f0d5; }
  :root:not([data-theme="light"]) .resultat-sante.alerte { background: #33280c; color: #ffe2a3; }
}
/* Photo */
.zone-photo { display: flex; flex-wrap: wrap; gap: 18px; align-items: center; }
.cadre-photo { display: grid; place-items: center; width: 140px; aspect-ratio: 35 / 45; border: 2px dashed var(--trait); border-radius: 6px; background: var(--papier-2); overflow: hidden; color: var(--encre-3); font-size: .85rem; text-align: center; padding: 6px; }
.cadre-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cadre-photo:has(img:not([hidden])) { padding: 0; border-style: solid; }
.actions-photo { display: flex; flex-direction: column; gap: 10px; align-items: flex-start; }
.btn-texte { border: 0; background: none; padding: 6px 2px; min-height: 40px; font: inherit; font-weight: 600; color: var(--lien); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
/* Selfie dans la page : caméra frontale, gabarit du visage, compte à rebours */
.studio { position: fixed; inset: 0; z-index: 90; display: flex; flex-direction: column; background: #0b0c0f; color: #fff; }
.studio[hidden] { display: none; }
.studio-vue { position: relative; flex: 1; overflow: hidden; display: grid; place-items: center; }
.studio video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transform: scaleX(-1); }
.studio-masque { position: relative; width: min(70vw, 46vh); aspect-ratio: 35 / 45; border-radius: 48% 48% 44% 44% / 40% 40% 60% 60%; box-shadow: 0 0 0 200vmax rgba(11, 12, 15, .62); border: 3px solid var(--or); pointer-events: none; }
.studio-compte { position: absolute; font-family: var(--titre); font-weight: 700; font-size: 7rem; color: var(--or); text-shadow: 0 4px 0 #000; }
.studio-aide { position: absolute; top: calc(16px + env(safe-area-inset-top)); left: 16px; right: 16px; margin: 0; text-align: center; font-weight: 600; text-shadow: 0 1px 3px #000; }
.studio-barre { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 16px 20px calc(16px + env(safe-area-inset-bottom)); background: #0b0c0f; }
.studio-declencheur { width: 78px; height: 78px; border-radius: 50%; border: 5px solid #fff; background: var(--or); cursor: pointer; box-shadow: 0 0 0 3px #0b0c0f inset; }
.studio-declencheur:active { transform: scale(.94); }
.studio-barre .btn-texte { color: #fff; min-width: 90px; }
/* RIB */
.rib { display: flex; flex-direction: column; gap: 6px; align-items: flex-start; margin-top: 16px; padding: 16px 18px; border: var(--bord); border-radius: var(--rayon); background: var(--papier); }
.rib #iban { font-family: var(--titre); font-size: 1.5rem; letter-spacing: .03em; overflow-wrap: anywhere; }
/* Récapitulatif */
.recap { display: grid; gap: 10px; margin-bottom: 8px; }
.recap-bloc { display: flex; justify-content: space-between; gap: 12px; align-items: flex-start; padding: 12px 14px; border: 1.5px solid var(--ligne); border-radius: var(--rayon-petit); background: var(--papier); overflow-wrap: anywhere; }
.recap-bloc > div { min-width: 0; }
.recap-bloc .btn-texte { flex: none; white-space: nowrap; overflow-wrap: normal; } /* « Modifier » ne se coupe jamais */
.recap-titre { display: block; font-family: var(--texte); font-weight: 600; font-size: .9rem; color: var(--lagon); }
/* Signature */
.zone-signature { margin-top: 18px; }
.signature-tete { display: flex; justify-content: space-between; align-items: center; gap: 10px; font-weight: 600; }
#signature { display: block; width: 100%; height: 200px; margin-top: 6px; background: #fff; border: 1px solid var(--trait); border-radius: var(--rayon); touch-action: none; cursor: crosshair;
  background-image: linear-gradient(transparent calc(100% - 52px), #c9c2b4 calc(100% - 52px), #c9c2b4 calc(100% - 50px), transparent calc(100% - 50px)); }
/* Pied du parcours */
/* L'attribut hidden l'emporte toujours (boutons, champs conditionnels). */
.parcours [hidden] { display: none !important; }
.parcours-pied { display: flex; justify-content: space-between; gap: 12px; margin-top: 28px; padding-top: 20px; border-top: var(--bord); }
.parcours-pied #suivant { margin-left: auto; }
#erreur-etape { margin: 20px 0 0; }
#erreur-etape ul { margin: 0; padding-left: 20px; }
.parcours-note { display: flex; gap: 10px; align-items: flex-start; margin: 16px 4px 0; font-size: .9rem; color: var(--encre-3); }
.parcours-repli { max-width: 760px; margin: 28px auto 0; }
.parcours-repli h2 { font-size: 1.8rem; }
.coche-ronde { display: grid; place-items: center; width: 72px; height: 72px; border-radius: 50%; background: color-mix(in srgb, var(--lagon) 14%, var(--surface)); color: var(--lagon); margin-bottom: 16px; }
.coche-ronde .icone { width: 36px; height: 36px; stroke-width: 3; }
@media (max-width: 560px) {
  .parcours-pied { position: sticky; bottom: 0; margin-inline: calc(-1 * clamp(20px, 4vw, 36px)); margin-bottom: calc(-1 * clamp(20px, 4vw, 36px)); padding: 12px 16px calc(12px + env(safe-area-inset-bottom)); background: var(--surface); border-top: var(--bord); border-radius: 0 0 var(--rayon) var(--rayon); }
  .parcours-pied .btn { padding-inline: 16px; }
  .question { flex-direction: column; align-items: stretch; }
  .question .bascules { width: 100%; }
  .question .bascules label { flex: 1; }
  .question .bascules span { width: 100%; }
  #signature { height: 180px; }
}
/* Fin de l'inscription en ligne : deux documents à télécharger */
.telechargements { display: flex; flex-wrap: wrap; gap: 12px; margin: 18px 0 8px; }
/* Bloc « Prêt à viser juste ? » : adhérer ou essayer, côte à côte */
.actions-appel { display: flex; flex-wrap: wrap; gap: 12px; margin: 0; }
.appel-inscription .actions-appel .btn-clair { background: transparent; color: #fff; border-color: #fff; }
.appel-inscription .actions-appel .btn-clair:hover { background: #fff; color: #0a4f57; }

/* ============================================================
   Mouvements (aucun en boucle ; rien si l'appareil demande moins d'animations)
   ============================================================ */
@media (prefers-reduced-motion: no-preference) {
  /* Navigation dans la page : le contenu s'efface, la page saute, la section réapparaît
     en glissant légèrement (le menu, lui, ne bouge pas). */
  .fondu-sort { opacity: 0; transition: opacity .22s ease; }
  .fondu-entre { animation: fondu-entre .5s cubic-bezier(.2, .8, .2, 1) both; }
  @keyframes fondu-entre { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }

  /* Le seul mouvement non demandé du site : à l'ouverture, la photo se pose et le titre arrive. */
  .hero-fond img { animation: hero-photo 1.1s cubic-bezier(.2, .8, .2, 1) both; }
  @keyframes hero-photo { from { transform: scale(1.06); } }
  .hero-contenu > * { animation: hero-texte .7s cubic-bezier(.2, .8, .2, 1) both; }
  .hero-contenu > :nth-child(2) { animation-delay: 80ms; }
  .hero-contenu > :nth-child(3) { animation-delay: 160ms; }
  .hero-contenu > :nth-child(n + 4) { animation-delay: 240ms; }
  @keyframes hero-texte { from { opacity: 0; transform: translateY(14px); } }

  /* Changement de page (accueil → essai, adhésion…) : fondu enchaîné, navigateurs récents. */
  @view-transition { navigation: auto; }
  ::view-transition-old(root) { animation: page-sort .18s ease-in both; }
  ::view-transition-new(root) { animation: page-entre .32s cubic-bezier(.2, .8, .2, 1) both; }
  @keyframes page-sort { to { opacity: 0; } }
  @keyframes page-entre { from { opacity: 0; transform: translateY(14px); } }
}
@media (prefers-reduced-motion: no-preference) {
  /* Le défilement doux reste pour les petits déplacements ; les grands passent par un fondu. */
  section[tabindex="-1"]:focus { outline: none; }
}