/* ===== Hero scrollable : expansion + scrub vidéo + révélation alpha =====
 *
 * Direction artistique v2 (palette pastel du client + typo moderne) :
 *   turquoise #7bc6c9 · aqua #a5e1df · corail #ffb199 · pêche #ffcdb2 ·
 *   coquille #fff5f0. Texte : Geist ; titres display : MONTSERRAT MEDIUM
 *   (choix de Lino le 02/08/2026, d'après fontshare.com ; elle remplace
 *   Pixelify Sans, la fonte « pixel » qui portait tous les titres jusque-là).
 *   Boutons « verre » arrondis, transparents, floutés.
 *
 * Déroulé piloté par hero.js :
 *   phase 0 — autour de la fenêtre : boucle vidéo du coucher de soleil ;
 *   phase 1 — la fenêtre s'étend en plein écran et DÉCOUVRE physiquement les
 *             trois boutons (langues · récupérer mes vidéos · contact) ;
 *   phase 2 — lecture de la vidéo au scroll ; sa fin en alpha se dissout et
 *             révèle la page d'accueil (deux univers cliquables) derrière.
 */

/* ⚠️ POPPINS EST DEMANDÉ EN ITALIQUE DEPUIS LE 21/08/2026 (`ital,wght@…;1,700`).
   La seconde moitié de la promesse du hub, « devenez immanquable grâce à la
   vidéo », est en italique : sans cette variante, le navigateur PENCHE la
   romaine lui-même, et une oblique synthétique à 65 px se voit tout de suite
   (les courbes se déforment, les jambages ne se redessinent pas).
   ⚠️ Ça ne coûte RIEN aux pages qui ne s'en servent pas : un `@font-face`
   déclaré n'est téléchargé que si un caractère le réclame. /sport et
   /realestate chargent la même feuille et ne prendront pas ce fichier. */
@import url('https://fonts.googleapis.com/css2?family=Geist:wght@400;500;600;700&family=Montserrat:wght@500;600&family=Poppins:ital,wght@0,500;0,600;0,700;0,800;1,600;1,700&family=Outfit:wght@500;600;700&display=swap');

/* La coupure des ligatures qui se trouvait ici visait Pixelify Sans, dont le
   glyphe « fi » était illisible. Montserrat n'a pas ce défaut : la règle est
   partie le 02/08/2026 avec la fonte qui la justifiait. */

html {
  scroll-behavior: smooth;
}

:root {
  --shell:  #fff5f0;             /* fond coquille rosée */
  --teal:   #7bc6c9;
  --aqua:   #a5e1df;
  --coral:  #ffb199;
  --coral-deep: #ef8f6e;         /* corail soutenu (hover / texte sur clair) */
  --peach:  #ffcdb2;
  --teal-ink: #2e7377;           /* turquoise foncé lisible (textes) */
  --ink:    #26393c;             /* encre bleu-vert profonde */
  --muted:  #5d7275;
  --line:   rgba(38, 57, 60, 0.16);
  --copy:    "Outfit", "Geist", -apple-system, sans-serif;   /* texte sur la vidéo */
  --sans:    "Geist", -apple-system, "Helvetica Neue", sans-serif;
  --display: "Montserrat", "Geist", -apple-system, sans-serif;
  /* --brand : réservée aux « Lino Sanchez » du site (hero, hub, menu du monde
     Sport). Choix de Lino le 28/07/2026 — le reste des titres garde --display. */
  --brand:   "Poppins", "Geist", -apple-system, sans-serif;
  --brand-yellow: #eab308;       /* jaune du module typewriter (21st.dev) */
}

.hero-track { position: relative; }

/* ===== SCROLL : aucune cale, aucun scroll-snap. =====
 * Il y a eu ici une « cale » (.hero-snap + scroll-snap-stop: always) qui
 * arrêtait le scroll sur l'écran de choix. Elle a été RETIRÉE le 22/07/2026 :
 * dans le navigateur intégré d'Instagram, dont la barre d'outils coulisse et
 * redimensionne le viewport en continu, son point d'ancrage se déplaçait en
 * cours de geste et le navigateur ré-alignait la page de force — l'écran de
 * choix se révélait puis reculait, en boucle, et le site était inutilisable.
 * Le parcours est maintenant : scrub alpha à travers la vidéo, PUIS scroll
 * parfaitement normal jusqu'au bas du site. Ne pas réintroduire de snap ici. */

.hero-sticky {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100dvh;
  height: var(--hero-vh, 100dvh);   /* hauteur visible réelle (cf. hero.js) */
  overflow: hidden;
  background: var(--shell);
}

/* --- phase 0 : boucle vidéo autour de la fenêtre --- */
.hero-bg {
  position: absolute;
  inset: 0;
  background-size: cover;          /* poster en attendant la vidéo */
  background-position: center;
  z-index: 1;
}
.hero-bg video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.hero-bg::after {                  /* voile doux pour la lisibilité du titre */
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(rgba(38, 57, 60, 0.32), rgba(38, 57, 60, 0.12) 55%, rgba(38, 57, 60, 0.3));
}

/* --- page d'accueil révélée par la transparence de fin de vidéo --- */
.hero-reveal {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ink);
  font-family: var(--sans);
  pointer-events: none;              /* activé par JS une fois révélé */
  background:
    radial-gradient(58% 46% at 18% 8%, rgba(165, 225, 223, 0.5), transparent 70%),
    radial-gradient(52% 44% at 84% 92%, rgba(255, 205, 178, 0.55), transparent 72%),
    var(--shell);
  opacity: calc(var(--r, 0));
}
.hero-reveal-inner {
  width: min(1060px, 88vw);
  text-align: center;
  opacity: calc(var(--r, 0));
  transform: translateY(calc((1 - var(--r, 0)) * 28px));
}
.reveal-eyebrow {
  font-size: 0.76rem;
  font-weight: 600;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: var(--teal-ink);
  margin: 0 0 1.4rem;
}
.reveal-title {
  font-family: var(--display);
  font-weight: 500;
  font-size: clamp(2.2rem, 5.2vw, 4.2rem);
  line-height: 1.1;
  margin: 0 0 3rem;
}
.reveal-title em {
  font-style: normal;
  color: var(--coral-deep);
}

.reveal-choices {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(1rem, 2.5vw, 2rem);
  max-width: 900px;
  margin: 0 auto;
}
.reveal-card {
  display: block;
  padding: clamp(1.8rem, 3.5vw, 3rem) clamp(1.4rem, 3vw, 2.6rem);
  border: 1px solid rgba(255, 255, 255, 0.65);
  border-radius: 24px;
  background: rgba(255, 255, 255, 0.5);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  color: inherit;
  text-decoration: none;
  text-align: center;
  box-shadow: 0 18px 44px rgba(123, 198, 201, 0.18);
  transition: border-color 0.35s ease, background 0.35s ease,
              transform 0.35s ease, box-shadow 0.35s ease;
}
.reveal-card:hover,
.reveal-card:focus-visible {
  border-color: var(--coral);
  background: rgba(255, 255, 255, 0.78);
  transform: translateY(-4px);
  box-shadow: 0 26px 56px rgba(239, 143, 110, 0.22);
  outline: none;
}
.reveal-card h2 {
  font-family: var(--sans);
  font-weight: 700;
  font-size: clamp(1.5rem, 2.6vw, 2.1rem);
  letter-spacing: -0.01em;
  margin: 0 0 0.6rem;
}
.reveal-card p {
  font-size: 0.95rem;
  line-height: 1.55;
  color: var(--muted);
  margin: 0 0 1.6rem;
}
.reveal-card .card-cta {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--coral-deep);
}
.reveal-card .card-cta::after {
  content: "→";
  margin-left: 0.6em;
  letter-spacing: 0;
  transition: margin-left 0.35s ease;
}
.reveal-card:hover .card-cta::after { margin-left: 1.1em; }

/* --- média : canvas plein écran (alpha), révélé par clip-path --- */
.hero-media {
  position: absolute;
  inset: 0;
  z-index: 3;
  will-change: clip-path;
  box-shadow: 0 30px 80px rgba(38, 57, 60, 0.35);
  pointer-events: none;              /* seuls les boutons enfants sont cliquables */
}
.hero-media canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}
.hero-sticky.is-revealed .hero-media { box-shadow: none; }

/* --- boutons « verre » découverts par l'agrandissement de la fenêtre ---
 * Ils vivent DANS la fenêtre clipée : invisibles carte fermée, découverts
 * physiquement quand elle s'étend, et le clip limite la zone cliquable.
 * Après la révélation finale, ils passent en tons encre sur clair. */
.glass-btn {
  position: absolute;
  top: clamp(16px, 3vh, 28px);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--sans);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  text-decoration: none;
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.5);
  border-radius: 999px;
  padding: 12px 22px;
  background: rgba(255, 255, 255, 0.18);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  pointer-events: auto;
  transition: color 0.4s ease, border-color 0.4s ease, background 0.4s ease;
}
.glass-btn:hover { background: rgba(255, 255, 255, 0.34); }
.hero-sticky.is-revealed .glass-btn {
  color: var(--ink);
  border-color: var(--line);
  background: rgba(255, 255, 255, 0.55);
}
.hero-sticky.is-revealed .glass-btn:hover {
  color: var(--coral-deep);
  border-color: var(--coral);
  background: rgba(255, 255, 255, 0.85);
}

.hero-cta {                                                 /* centré en haut */
  left: 50%;
  transform: translateX(-50%);
  background: rgba(255, 177, 153, 0.42);
  border-color: rgba(255, 177, 153, 0.9);
  /* agrandi 1,5× par rapport au gabarit .glass-btn (0.68rem / 12px 22px / gap 6px) */
  font-size: 1.02rem;
  padding: 18px 33px;
  gap: 9px;
}
.hero-cta:hover { background: rgba(255, 177, 153, 0.62); }
.hero-sticky.is-revealed .hero-cta {
  color: #fff;
  background: rgba(239, 143, 110, 0.75);
  border-color: rgba(239, 143, 110, 0.9);
}
.hero-sticky.is-revealed .hero-cta:hover {
  color: #fff;
  background: rgba(239, 143, 110, 0.95);
  border-color: var(--coral-deep);
}
.hero-contact { right: clamp(16px, 3vw, 32px); }            /* angle droit */

/* sélecteur de langues (repris de l'ancien site, sans traduction pour l'instant) */
.hero-lang {
  left: clamp(16px, 3vw, 32px);                              /* angle gauche */
  padding: 8px 12px;
  gap: 2px;
  letter-spacing: 0;
}
.hero-lang .lang-btn {
  border: none;
  background: none;
  font-size: 1.05rem;
  line-height: 1;
  padding: 4px 5px;
  cursor: pointer;
  border-radius: 999px;
  opacity: 0.55;
  transition: opacity 0.25s ease, transform 0.25s ease;
}
.hero-lang .lang-btn:hover { opacity: 1; transform: translateY(-1px); }
.hero-lang .lang-btn.is-active { opacity: 1; }

/* --- textes superposés pendant l'expansion --- */
.hero-text {
  position: absolute;
  inset: 0;
  z-index: 4;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  color: #fff;
  text-align: center;
}
.hero-title {
  font-family: var(--brand);
  font-weight: 700;
  font-size: clamp(2.8rem, 8vw, 6.4rem);
  line-height: 1.02;
  margin: 0;
  text-shadow: 0 2px 28px rgba(38, 57, 60, 0.4);
}
.hero-title .t-left,
.hero-title .t-right {
  display: block;
  will-change: transform;
}
/* même jaune que le « Sanchez » du hub : la marque reste identique d'un
   écran à l'autre (une seule variable pilote les deux) */
.hero-title .t-right { color: var(--brand-yellow); }
.hero-date {
  font-family: var(--sans);
  margin: 1.4rem 0 0;
  font-size: clamp(0.72rem, 1.6vw, 0.85rem);
  font-weight: 600;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  text-shadow: 0 1px 14px rgba(38, 57, 60, 0.45);
}
/* « Défiler » : plus de pastille (retirée le 28/07) — le mot lui-même
   clignote en alternant blanc et jaune de marque, ce qui accroche l'œil
   sans ajouter d'élément d'interface par-dessus la vidéo. */
.hero-hint {
  position: absolute;
  bottom: calc(5.5vh + env(safe-area-inset-bottom, 0px));
  left: 50%;
  transform: translateX(-50%);
  margin: 0;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  font-family: var(--sans);
  /* grossi le 02/08/2026 (Lino), en même temps que celui de /realestate :
     à 0,86 rem le mot se perdait sur la vidéo plein écran */
  font-size: clamp(0.98rem, 3.2vw, 1.18rem);
  font-weight: 700;
  letter-spacing: 0.3em;
  text-indent: 0.3em;                 /* recentre malgré l'interlettrage */
  text-transform: uppercase;
  color: #fff;
  text-shadow: 0 2px 16px rgba(38, 57, 60, 0.75);
  animation: hero-hint-flash 1.4s steps(1) infinite;
}
@keyframes hero-hint-flash {
  0%, 49%   { color: #fff; }
  50%, 100% { color: var(--brand-yellow); }
}
@media (prefers-reduced-motion: reduce) {
  .hero-hint { animation: none; }
}
/* Le petit trait qui tombait ici a été remplacé le 03/08/2026 par la flèche
   à trois chevrons de scrollcue.css, commune à tous les « Défiler » du
   site. Elle hérite de `currentColor`, donc elle clignote avec le mot. */

/* ===== Hub en tête de piste (essai du 09/08/2026) =====
   Le grand wordmark et « Défiler » vivent dans `.hero-text` (z-index 4), donc
   AU-DESSUS du hub. Ils appartiennent à la vidéo, pas au hub : on les efface
   tant que le hub du haut est à l'écran. `hero.js` pose la classe.
   ⚠️ `visibility` en plus de l'opacité : sans elle, le titre resterait
   cliquable et surtout lisible par la recherche dans la page. */
.hero-sticky.is-hubtop .hero-text {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

/* fondus (pilotés par JS : --e expansion 0→1, --r révélation 0→1) */
.hero-sticky { --e: 0; --r: 0; }
.hero-bg    { opacity: calc(1 - var(--e)); }
.hero-date,
.hint-word  { opacity: calc(0.9 * (1 - var(--e) * 3)); }

/* ===== La flèche survit au mot (Lino, 03/08/2026) =====
 * Le MOT « Défiler » s'efface avec l'expansion, comme avant — il a dit ce
 * qu'il avait à dire. La FLÈCHE, elle, reste allumée pendant toute la vidéo
 * scrollable : c'est le seul repère qui rappelle qu'il faut continuer.
 * Elle s'éteint dans deux cas, et seulement ceux-là :
 *   · pendant un bloc de texte (`.is-reel`) — l'écran devient un reel, on ne
 *     pose rien par-dessus ;
 *   · en même temps que « Passer » (`.cue-on` posée par hero.js sur le même
 *     calcul), donc une fois le dernier bloc passé.
 * ⚠️ `.hero-hint` doit rester à opacité 1, sinon elle multiplierait celle de
 * la flèche et l'éteindrait avec le mot. C'est pour ça que le fondu de
 * l'expansion est descendu sur `.hint-word` et non sur le paragraphe. */
.hero-hint { opacity: 1; }
.hero-hint .scroll-cue {
  opacity: calc(0.9 * (1 - var(--e) * 3));
  transition: opacity 0.35s ease;
}
.hero-sticky.cue-on .hero-hint .scroll-cue { opacity: 0.9; }
/* en dernier : pendant un bloc de texte, la flèche s'efface quoi qu'il arrive */
.hero-sticky.is-reel .hero-hint .scroll-cue { opacity: 0; }

/* --- fallback vidéo (JS indisponible / échec de chargement) --- */
.hero-fallback {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: none;
}

/* ===== MODE SIMPLE (html.hero-simple) =====
 * Servi aux navigateurs intégrés (Instagram, Facebook, TikTok…) et en repli si
 * le JS échoue. La page redevient un document ORDINAIRE, qui défile d'un trait :
 *
 *      vidéo plein écran  →  Professionnels / Particuliers  →  Contact
 *
 * Zéro zone épinglée, zéro cale de snap, zéro hauteur calculée en JS : rien qui
 * puisse piéger le doigt quand la barre d'outils de l'application coulisse.
 * Les hauteurs sont en `svh` (hauteur écran barres DÉPLOYÉES) : contrairement à
 * `vh`/`dvh`, elle ne laisse jamais de trou ni de débordement quand ces barres
 * apparaissent ou disparaissent. */
html.hero-simple .hero-track  { height: auto !important; }
html.hero-simple .hero-sticky {
  position: relative;      /* ancre .hero-text sur le premier écran */
  height: auto;
  overflow: visible;
  display: flex;
  flex-direction: column;
  /* --r : révélation à fond (.hero-reveal et .hero-reveal-inner le lisent).
     --e : expansion à zéro, pour garder « Vos idées en vidéos » et « Défiler »
     visibles sur la vidéo — ici la fenêtre ne s'agrandit jamais. */
  --r: 1;
  --e: 0;
}
/* dans le DOM l'écran de choix précède la vidéo (il est révélé PAR-DESSOUS) :
   en mode simple on rétablit l'ordre de lecture naturel */
html.hero-simple .hero-media  { order: 1; }
html.hero-simple .hero-reveal { order: 2; }

html.hero-simple .hero-bg,
html.hero-simple .hero-media canvas { display: none; }

/* titre « Lino Sanchez » superposé au premier écran seulement */
html.hero-simple .hero-text {
  top: 0;
  bottom: auto;
  height: 100svh;
  min-height: 420px;
}
html.hero-simple .hero-title .t-left,
html.hero-simple .hero-title .t-right { transform: none !important; }

html.hero-simple .hero-media {
  position: relative;
  inset: auto;
  height: 100svh;
  min-height: 420px;
  clip-path: none !important;        /* posé en ligne par hero.js en mode scrub */
  box-shadow: none;
}
html.hero-simple .hero-fallback { display: block; }

html.hero-simple .hero-reveal {
  position: relative;
  inset: auto;
  min-height: 100svh;
  padding: 12vh 0;
  pointer-events: auto;
}
html.hero-simple .hero-reveal-inner { transform: none; }

/* --- accessibilité : pas d'animation demandée --- */
@media (prefers-reduced-motion: reduce) {
  .hero-track { height: auto !important; }
  .hero-sticky { position: relative; height: auto; }
  .hero-media, .hero-bg, .hero-text { display: none; }
  .hero-reveal { position: relative; pointer-events: auto; padding: 14vh 0; }
  .hero-reveal-inner { opacity: 1; transform: none; }
  .hero-hint::after { animation: none; }
}

/* --- mobile --- */
@media (max-width: 640px) {
  .reveal-choices { grid-template-columns: 1fr; }
  .reveal-title { margin-bottom: 2.2rem; }
  /* trois boutons sur une rangée étroite : plus compacts, sur deux niveaux */
  .glass-btn { font-size: 0.6rem; padding: 10px 14px; letter-spacing: 0.16em; }
  .hero-lang { padding: 7px 9px; }
  .hero-lang .lang-btn { font-size: 0.95rem; }
  .hero-cta { top: clamp(64px, 10vh, 84px); }   /* centré, sous les deux angles */
}

/* ===================================================================== */
/* ===== Écran de choix : vidéo boomerang + carrés-boutons de verre ===== */

.hero-reveal .reveal-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.hero-reveal::after {                 /* voile léger : vidéo nette mais lisible */
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(rgba(255, 245, 240, 0.32), rgba(38, 57, 60, 0.18));
}
.hero-reveal-inner { position: relative; z-index: 1; }
.hero-reveal .reveal-eyebrow { color: #fff; text-shadow: 0 1px 12px rgba(38, 57, 60, 0.5); }
.hero-reveal .reveal-title   { color: #fff; text-shadow: 0 2px 24px rgba(38, 57, 60, 0.45); }
.hero-reveal .reveal-title em { color: var(--peach); }
/* Le mot qui défile prend la place de l'ancien <em> : même couleur, donc le
   titre garde ses deux tons. Le balayage de rotate.css part du corail et se
   résout sur `currentColor` — c'est-à-dire sur cette pêche-là. */
.hero-reveal .reveal-title .rot { color: var(--peach); }

/* les carrés sont des <button> : verre semi-transparent */
.reveal-card {
  font-family: var(--sans);
  cursor: pointer;
  background: rgba(255, 255, 255, 0.16);
  border: 1px solid rgba(255, 255, 255, 0.45);
  color: #fff;
}
.reveal-card p { color: rgba(255, 255, 255, 0.82); }
.reveal-card .card-cta { color: var(--peach); }
.reveal-card:hover,
.reveal-card:focus-visible {
  background: rgba(255, 255, 255, 0.28);
  border-color: rgba(255, 255, 255, 0.85);
  box-shadow: 0 26px 56px rgba(38, 57, 60, 0.35);
}

/* ===== Overlays de services : verre plein écran sur la vidéo ===== */

.services-overlay {
  position: fixed;
  inset: 0;
  z-index: 30;
  overflow-y: auto;
  background: rgba(38, 57, 60, 0.3);
  backdrop-filter: blur(6px) saturate(120%);
  -webkit-backdrop-filter: blur(6px) saturate(120%);
  outline: none;
}
.services-overlay[hidden] { display: none; }
body.services-open { overflow: hidden; }

.services-frame {
  width: min(1120px, calc(100% - 32px));
  margin: 0 auto;
  /* Le haut dégage la barre de menu, qui est `fixed` (z-index 90) donc
     TOUJOURS au-dessus de cet overlay (z-index 30) : sans cette réserve, le
     titre passe dessous. 84 px = 10 px d'offset + 60 px de barre + un peu
     d'air (14 px d'offset sur desktop, la marge couvre les deux). */
  padding: calc(84px + env(safe-area-inset-top, 0px)) 0 8vh;
}
.services-head { text-align: center; color: #fff; margin-bottom: clamp(1.6rem, 4vh, 3rem); }
/* Retour placé APRÈS les offres (02/08/2026) : en haut, il tombait sous la
   barre de menu et devenait incliquable. */
.services-back {
  position: static;
  display: flex;
  width: fit-content;
  margin: clamp(1.8rem, 5vh, 3rem) auto 0;
}
.services-head .reveal-eyebrow { color: var(--peach); }
.services-title {
  font-family: var(--display);
  font-weight: 500;
  font-size: clamp(1.9rem, 4.4vw, 3.4rem);
  line-height: 1.1;
  margin: 0;
  text-shadow: 0 2px 24px rgba(38, 57, 60, 0.5);
}
.services-title em { font-style: normal; color: var(--peach); }
.services-title .rot { color: var(--peach); }
.services-sub {
  margin: 0.9rem 0 0;
  font-size: clamp(0.9rem, 1.8vw, 1.05rem);
  font-weight: 500;
  color: rgba(255, 255, 255, 0.92);
  text-shadow: 0 1px 12px rgba(38, 57, 60, 0.5);
}

.services-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(14px, 2.2vw, 26px);
}
.services-grid-2 { max-width: 780px; margin: 0 auto; }
/* trois cartes de front (pro, depuis le 31/07/2026) — repasse à une colonne
   sous 760 px grâce à la règle responsive plus bas */
.services-grid-3 { grid-template-columns: repeat(3, 1fr); }

.svc-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  padding: clamp(1.5rem, 3vw, 2.3rem);
  border-radius: 26px;
  border: 1px solid rgba(255, 255, 255, 0.5);
  background: rgba(255, 245, 240, 0.6);
  backdrop-filter: blur(18px) saturate(150%);
  -webkit-backdrop-filter: blur(18px) saturate(150%);
  box-shadow: 0 22px 54px rgba(38, 57, 60, 0.25);
  color: var(--ink);
}
.svc-card h3 {
  font-family: var(--display);
  font-weight: 500;
  font-size: clamp(1.35rem, 2.4vw, 1.8rem);
  margin: 0;
}
.svc-card > p { margin: 0; line-height: 1.65; color: #3c5154; font-size: 1rem; }
.svc-tag {
  font-size: 0.68rem !important;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--teal-ink) !important;
}
/* pied de carte homogène : prix + bouton alignés en bas de chaque carré */
.svc-foot {
  margin-top: auto;
  padding-top: 0.8rem;
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}
.svc-price { margin: 0 !important; }
.svc-price strong {
  font-family: var(--sans);
  font-weight: 800;
  font-size: 1.9rem;
  letter-spacing: -0.02em;
  color: var(--ink);
  margin-right: 0.4rem;
}
.svc-price span { font-size: 0.85rem; color: var(--muted); }
/* « Gratuit », « Sur devis » — un mot ne tient pas à la taille d'un montant */
.svc-price.is-word strong { font-size: 1.35rem; letter-spacing: -0.01em; }

.svc-options {
  display: inline-flex;
  gap: 6px;
  padding: 5px;
  border-radius: 999px;
  background: rgba(38, 57, 60, 0.08);
  align-self: flex-start;
}
.svc-opt {
  font-family: var(--sans);
  font-size: 0.78rem;
  font-weight: 700;
  padding: 8px 16px;
  border: none;
  border-radius: 999px;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  transition: background 0.25s ease, color 0.25s ease;
}
.svc-opt.is-active { background: #fff; color: var(--ink); box-shadow: 0 4px 12px rgba(38, 57, 60, 0.15); }

/* ===== « Ce que vous obtenez » (Lino, 15/08/2026) ==========================
 * Le paragraphe VEND, la liste ENGAGE — deux registres, donc deux blocs, comme
 * les `.offer-liste` de /realestate depuis le 11/08.
 * ⚠️ LES DEUX LISTES VIVENT DANS LE HTML et c'est `data-duree` sur la carte qui
 * choisit. Sans JS, `[data-pour="1h"]` reste visible : jamais de trou.
 * ⚠️ PAS DE COCHES, comme sur /realestate : les deux durées sont EXCLUSIVES
 * l'une de l'autre, des coches inviteraient à comparer au lieu de choisir.
 * Un filet vertical d'un pixel, et rien d'autre. */
.svc-livrable { margin: 0.1rem 0 0; }
.svc-livrable-t {
  margin: 0 0 0.4rem;
  font-family: var(--sans);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
}
.svc-liste {
  margin: 0;
  padding: 0 0 0 0.9rem;
  list-style: none;
  border-left: 1px solid rgba(38, 57, 60, 0.18);
  /* ⚠️ 52ch et non les 44 de la prose : ce sont des énumérations. À 44 la ligne
     du livrable principal part sur trois lignes et la liste pèse plus lourd que
     l'offre qu'elle décrit. Même arbitrage que sur /realestate. */
  max-width: 52ch;
  font-family: var(--sans);
  font-size: 0.86rem;
  font-weight: 300;
  line-height: 1.5;
  color: var(--ink);
}
.svc-liste li + li { margin-top: 0.18rem; }
/* Le livrable principal — celui qui porte l'alternative — se lit en premier.
   ⚠️ UN SEUL cran de mise en avant : les deux autres lignes s'ajoutent, elles
   ne se choisissent pas. Trois lignes au même poids annuleraient la hiérarchie.
   ⚠️ PAS de terre cuite ni d'accent coloré ici : cette couleur appartient aux
   prix, un livrable dans la teinte des remises se lirait comme une promotion. */
.svc-liste li { position: relative; }
.svc-liste li.is-choix { font-weight: 500; }
/* Le filet s'épaissit EN REGARD de la ligne mise en avant, et rien de plus —
   une pastille ou un fond teinté auraient fait une carte dans la carte.
   ⚠️ Un pseudo-élément posé sur le rail, PAS un `box-shadow` étalé : essayé
   d'abord, il produisait un trait court décalé à gauche du rail au lieu de se
   superposer dessus. Ici le trait épouse exactement la hauteur de la ligne. */
.svc-liste li.is-choix::before {
  content: '';
  position: absolute;
  left: -0.9rem;
  top: 0;
  bottom: 0;
  width: 2px;
  margin-left: -1px;       /* centré sur le filet d'un pixel du <ul> */
  background: var(--ink);
}
/* ===== C'est `data-duree` de la carte qui tranche =========================
 * ⚠️ ÉCRIT EN « ON CACHE TOUT, ON MONTRE LA BONNE » depuis le 15/08/2026, et
 * plus en paires. La forme d'avant (`[data-duree=1h] [data-pour=2h]`) demandait
 * une règle par COUPLE : deux durées faisaient 2 règles, les quatre forfaits en
 * auraient demandé 12. Ici, une ligne par valeur, et une seule à ajouter le
 * jour où un cinquième forfait arrive.
 * ⚠️ Le `[data-pour]` est indispensable dans la première règle : sans lui, elle
 * masquerait aussi les listes SANS variante — celle du mini Docu, par exemple.
 * ⚠️ Sans JS, la valeur écrite dans le HTML reste affichée : jamais de trou. */
.svc-card[data-duree] .svc-liste[data-pour] { display: none; }
.svc-card[data-duree="1h"]         .svc-liste[data-pour="1h"],
.svc-card[data-duree="2h"]         .svc-liste[data-pour="2h"],
.svc-card[data-duree="essai"]      .svc-liste[data-pour="essai"],
.svc-card[data-duree="starter"]    .svc-liste[data-pour="starter"],
.svc-card[data-duree="croissance"] .svc-liste[data-pour="croissance"],
.svc-card[data-duree="pro"]        .svc-liste[data-pour="pro"] { display: block; }

/* ⚠️ QUATRE BOUTONS NE TIENNENT PAS SUR UNE LIGNE À 375 px. Le rail passe donc
   à la ligne, et perd son arrondi de gélule : sur deux rangs, un `border-radius`
   de 999 px dessine un stade difforme. Les boutons, eux, gardent le leur. */
.svc-options { flex-wrap: wrap; }
.svc-card[data-duree="essai"] .svc-options,
.svc-card[data-duree="starter"] .svc-options,
.svc-card[data-duree="croissance"] .svc-options,
.svc-card[data-duree="pro"] .svc-options { border-radius: 14px; }

/* La remise, à droite du prix. ⚠️ Elle n'a pas la couleur d'un prix : c'est une
   information SUR le prix, pas un montant. Discrète et lisible, jamais criarde
   — même raisonnement que les remises de /realestate.
   ⚠️⚠️ SÉLECTEUR `.svc-price .svc-remise` ET NON `.svc-remise` SEUL. Écrite à
   plat, la règle perdait contre `.svc-price span` (0,1,1 contre 0,1,0) et la
   remise héritait de la couleur du texte secondaire — la teinte affichée était
   donc un ACCIDENT, pas un choix. Constaté le 15/08/2026.
   ⚠️ La terre cuite ne reste que comme repli pour les palettes chaudes. Chaque
   monde pose la sienne par `--svc-remise-ink` : sur /action, page d'où tout le
   chaud a été retiré, une remise en terre cuite serait la seule tache orange. */
.svc-price .svc-remise {
  margin-left: 0.5rem;
  font-family: var(--sans);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--svc-remise-ink, var(--im-deal, #b0522c));
}
.svc-remise[hidden] { display: none; }

.svc-select {
  position: static;
  align-self: flex-start;
  margin-top: 0.4rem;
  color: var(--ink);
  border-color: rgba(38, 57, 60, 0.25);
  background: rgba(255, 255, 255, 0.55);
}
.svc-select:hover { background: #fff; border-color: var(--coral); color: var(--coral-deep); }
.svc-chosen {
  margin: 0.2rem 0 0 !important;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--teal-ink) !important;
}
.svc-chosen::before { content: "✓ "; }

/* --- offre de l'été : liseré animé corail → orange → pêche --- */
@property --sun {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}
/* ⚠️ LES TROIS DERNIÈRES COULEURS CHAUDES ÉCRITES EN DUR DE L'OFFRE D'ÉTÉ,
   passées en variables le 15/08/2026 avec les valeurs d'origine EN REPLI.
   C'est la dette que TRANSITION signalait : le liseré tournant, lui, était
   déjà repeint par palette, mais le REMPLISSAGE rosé et les deux LUEURS
   corail ne l'étaient pas. Résultat, sur un monde bleu il restait une tache
   chaude sous la carte et sous la pastille — visible, et d'autant plus qu'une
   ombre colorée se remarque là où on ne la cherche pas.
   Une palette qui ne déclare rien ne bouge pas d'un pixel. */
.svc-summer {
  border: none;
  background:
    linear-gradient(var(--svc-summer-fond, rgba(255, 245, 240, 0.78)),
                    var(--svc-summer-fond, rgba(255, 245, 240, 0.78))) padding-box,
    conic-gradient(from var(--sun), #ef8f6e, #ff7a3d, #ffcdb2, #ef8f6e) border-box;
  border: 2px solid transparent;
  animation: sun-spin 6s linear infinite;
  box-shadow: 0 22px 54px var(--svc-summer-lueur, rgba(255, 122, 61, 0.3));
}
@keyframes sun-spin { to { --sun: 360deg; } }
.svc-badge {
  position: absolute;
  top: -12px;
  right: 18px;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #fff;
  padding: 7px 14px;
  border-radius: 999px;
  background: linear-gradient(120deg, #ff7a3d, #ef8f6e);
  box-shadow: 0 8px 20px var(--svc-badge-lueur, rgba(255, 122, 61, 0.4));
}

/* ===== Calendrier date + heure ===== */

.cal-modal {
  position: fixed;
  inset: 0;
  z-index: 40;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(38, 57, 60, 0.45);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.cal-modal[hidden] { display: none; }
/* .glass-btn pose display:inline-flex, qui bat l'attribut hidden du navigateur
   (les styles auteur gagnent sur les styles UA à spécificité égale) : sans
   cette ligne, « Suivant → » était visible avant même d'avoir choisi une date */
#calSuivant[hidden] { display: none; }
.cal-panel {
  width: min(420px, 100%);
  max-height: 92vh;
  overflow-y: auto;
  padding: 22px 24px 24px;
  border-radius: 26px;
  border: 1px solid rgba(255, 255, 255, 0.7);
  background: rgba(255, 245, 240, 0.9);
  backdrop-filter: blur(20px) saturate(150%);
  -webkit-backdrop-filter: blur(20px) saturate(150%);
  box-shadow: 0 30px 80px rgba(38, 57, 60, 0.35);
}
.cal-head { display: flex; align-items: center; justify-content: space-between; }
.cal-head .reveal-eyebrow { margin: 0; }
.cal-close {
  border: none; background: none; cursor: pointer;
  font-size: 1rem; color: var(--ink); padding: 4px 8px;
}
.cal-close:hover { color: var(--coral-deep); }
.cal-nav {
  display: flex; align-items: center; justify-content: space-between;
  margin: 14px 0 10px;
}
.cal-month { font-family: var(--display); font-weight: 500; font-size: 1.1rem; text-transform: capitalize; }
.cal-arrow {
  width: 34px; height: 34px; border-radius: 999px; border: 1px solid var(--line);
  background: #fff; cursor: pointer; font-size: 1.1rem; line-height: 1; color: var(--ink);
}
.cal-arrow:hover { border-color: var(--coral); color: var(--coral-deep); }
.cal-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
}
.cal-dow {
  text-align: center; font-size: 0.66rem; font-weight: 700;
  letter-spacing: 0.1em; color: var(--muted); padding: 4px 0;
}
.cal-day {
  aspect-ratio: 1;
  border: none; border-radius: 12px; background: transparent;
  font-family: var(--sans); font-size: 0.85rem; font-weight: 600;
  color: var(--ink); cursor: pointer;
}
.cal-day:hover:not(:disabled):not(.is-pad) { background: rgba(123, 198, 201, 0.25); }
.cal-day.is-picked { background: var(--teal); color: #fff; }
.cal-day:disabled { color: #c3bcb4; cursor: default; }
.cal-day.is-pad { pointer-events: none; }
.cal-label {
  margin: 14px 0 8px; font-size: 0.68rem; font-weight: 700;
  letter-spacing: 0.24em; text-transform: uppercase; color: var(--teal-ink);
}
.cal-slots { display: flex; flex-wrap: wrap; gap: 8px; }
.cal-slot {
  font-family: var(--sans); font-size: 0.8rem; font-weight: 600;
  padding: 8px 13px; border-radius: 999px; border: 1px solid var(--line);
  background: #fff; color: var(--ink); cursor: pointer;
}
.cal-slot:hover { border-color: var(--teal); }
.cal-slot.is-picked { background: var(--teal); border-color: var(--teal); color: #fff; }
.btn-confirm {
  width: 100%; margin-top: 18px;
  font-family: var(--sans); font-size: 0.74rem; font-weight: 700;
  letter-spacing: 0.24em; text-transform: uppercase;
  padding: 16px; border: none; border-radius: 999px; cursor: pointer;
  color: #fff;
  background: linear-gradient(120deg, var(--coral), var(--coral-deep));
  box-shadow: 0 14px 30px rgba(239, 143, 110, 0.35);
  transition: opacity 0.3s ease, transform 0.3s ease;
}
.btn-confirm:hover:not(:disabled) { transform: translateY(-2px); }
.btn-confirm:disabled { opacity: 0.4; cursor: default; }

/* --- responsive services --- */
@media (max-width: 760px) {
  .services-grid { grid-template-columns: 1fr; }
}

/* ===== Bouton « Suivant » du calendrier (esthétique du bouton corail) ===== */
.btn-suivant {
  position: static;
  width: 100%;
  justify-content: center;
  margin-top: 18px;
  color: #fff;
  background: rgba(239, 143, 110, 0.85);
  border-color: rgba(239, 143, 110, 0.95);
}
.btn-suivant:hover { background: var(--coral-deep); }

/* ===== Volets réservation / contact (après déverrouillage) ===== */
.flow-panel {
  min-height: 100vh;
  display: flex;
  align-items: center;
  background:
    radial-gradient(58% 46% at 14% 6%, rgba(165, 225, 223, 0.45), transparent 70%),
    radial-gradient(50% 42% at 88% 30%, rgba(255, 205, 178, 0.42), transparent 72%),
    var(--shell);
}
.flow-panel[hidden] { display: none; }
.flow-inner {
  width: min(760px, calc(100% - 32px));
  margin: 0 auto;
  padding: clamp(48px, 9vh, 90px) 0;
  text-align: center;
}
.flow-title {
  font-family: var(--display);
  font-weight: 500;
  font-size: clamp(1.9rem, 4.4vw, 3.2rem);
  line-height: 1.1;
  margin: 0 0 2rem;
}
.flow-title em { font-style: normal; color: var(--coral-deep); }

.flow-card {
  position: relative;
  text-align: left;
  padding: clamp(1.6rem, 4vw, 2.6rem);
  border: 1px solid rgba(255, 255, 255, 0.7);
  border-radius: 28px;
  background: rgba(255, 255, 255, 0.5);
  backdrop-filter: blur(16px) saturate(150%);
  -webkit-backdrop-filter: blur(16px) saturate(150%);
  box-shadow: 0 22px 54px rgba(123, 198, 201, 0.18);
}
.resa-recap {
  margin: 0 0 1.4rem;
  padding: 14px 18px;
  border-radius: 16px;
  background: rgba(165, 225, 223, 0.28);
  border: 1px solid rgba(123, 198, 201, 0.4);
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--ink);
}
.field-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
.field { display: block; margin-bottom: 14px; }
.field span {
  display: block;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--teal-ink);
  margin-bottom: 7px;
}
.field input, .field textarea {
  width: 100%;
  font-family: var(--sans);
  font-size: 0.95rem;
  color: var(--ink);
  background: rgba(255, 255, 255, 0.8);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 13px 16px;
  outline: none;
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
  resize: vertical;
}
.field input:focus, .field textarea:focus {
  border-color: var(--teal);
  box-shadow: 0 0 0 4px rgba(123, 198, 201, 0.22);
}
/* champ invalide, signalé au blur par site.js (même anneau que le focus,
   décliné corail) ; l'explication s'affiche dans le message du formulaire */
.field input.is-invalid, .field textarea.is-invalid {
  border-color: var(--coral-deep);
  box-shadow: 0 0 0 4px rgba(239, 143, 110, 0.18);
}

.flow-label {
  margin: 0.6rem 0 0.7rem;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--teal-ink);
}
.pay-methods {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
.pay-method {
  position: relative;
  font-family: var(--sans);
  text-align: left;
  padding: 16px 18px;
  border-radius: 18px;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.65);
  cursor: pointer;
  transition: border-color 0.3s ease, background 0.3s ease, box-shadow 0.3s ease;
}
.pay-method strong { display: block; font-size: 0.95rem; color: var(--ink); margin-bottom: 4px; }
/* petit cône « travaux » en bas à droite de la carte carte-bancaire */
.pay-cone {
  position: absolute;
  right: 12px;
  bottom: 10px;
  width: 30px;
  height: 30px;
  filter: drop-shadow(0 3px 5px rgba(217, 113, 63, 0.35));
}
.pay-method span { font-size: 0.82rem; color: var(--muted); line-height: 1.45; }
.pay-method:hover:not(.is-disabled) { border-color: var(--teal); }
.pay-method.is-active {
  border-color: var(--coral-deep);
  background: rgba(255, 205, 178, 0.35);
  box-shadow: 0 0 0 3px rgba(239, 143, 110, 0.25);
}
.pay-method.is-disabled {
  opacity: 0.75;
  cursor: default;
  background: rgba(255, 255, 255, 0.35);
  border-style: dashed;
}

/* barre du total : récap du service à gauche, montant à droite */
.pay-total {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-top: 1.4rem;
  padding: 16px 20px;
  border-radius: 18px;
  background: rgba(255, 205, 178, 0.4);
  border: 1px solid rgba(239, 143, 110, 0.55);
}
.pay-total-info { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.pay-total-label {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--teal-ink);
}
.pay-total-service {
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--ink);
  line-height: 1.35;
}
.pay-total strong {
  flex-shrink: 0;
  font-family: var(--sans);
  font-weight: 800;
  font-size: 2.2rem;
  letter-spacing: -0.02em;
  color: var(--coral-deep);
  line-height: 1;
}

/* ===== Fenêtre de confirmation ===== */
.confirm-modal {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(38, 57, 60, 0.5);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  animation: confirm-fade 0.3s ease;
}
.confirm-modal[hidden] { display: none; }
@keyframes confirm-fade { from { opacity: 0; } to { opacity: 1; } }
.confirm-panel {
  width: min(440px, 100%);
  text-align: center;
  padding: clamp(1.8rem, 4vw, 2.6rem);
  border-radius: 28px;
  border: 1px solid rgba(255, 255, 255, 0.75);
  background: rgba(255, 245, 240, 0.94);
  backdrop-filter: blur(20px) saturate(150%);
  -webkit-backdrop-filter: blur(20px) saturate(150%);
  box-shadow: 0 30px 80px rgba(38, 57, 60, 0.35);
  animation: confirm-pop 0.35s cubic-bezier(.2,.8,.3,1.2);
}
@keyframes confirm-pop { from { transform: scale(0.9) translateY(10px); } to { transform: none; } }
.confirm-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  margin-bottom: 1rem;
  border-radius: 999px;
  font-size: 1.7rem;
  color: #fff;
  background: linear-gradient(120deg, var(--teal), #4fa8ab);
  box-shadow: 0 12px 26px rgba(123, 198, 201, 0.45);
}
.confirm-panel h3 {
  font-family: var(--display);
  font-weight: 500;
  font-size: clamp(1.4rem, 3.2vw, 1.9rem);
  margin: 0 0 1.3rem;
  color: var(--ink);
}
/* récap sans libellés : date en tête, puis service, nom, paiement */
.confirm-recap {
  text-align: center;
  margin: 0 0 1.4rem;
  padding: 20px 18px;
  border-radius: 22px;
  background: linear-gradient(rgba(255, 255, 255, 0.72), rgba(255, 245, 240, 0.55));
  border: 1px solid rgba(255, 255, 255, 0.8);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9), 0 10px 26px rgba(123, 198, 201, 0.16);
}
.confirm-row {
  font-size: 0.98rem;
  font-weight: 600;
  color: var(--ink);
  padding: 7px 0;
  border-bottom: 1px solid rgba(38, 57, 60, 0.08);
}
.confirm-row:last-child { border-bottom: none; }
.confirm-row-lead {
  font-family: var(--display);
  font-weight: 500;
  font-size: 1.25rem;
  color: var(--coral-deep);
  padding-top: 0;
}
.confirm-row-soft { color: var(--muted); font-weight: 500; font-size: 0.88rem; }
.confirm-note { margin: 0 0 1.4rem; font-size: 0.82rem; color: var(--muted); }
.confirm-panel .btn-valider { margin-top: 0; }

/* ===== Fond vidéo derrière un volet (contact) ===== */
.flow-panel-video { position: relative; overflow: hidden; }
.flow-bg-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}
/* Voile encore allégé le 02/08/2026 (Lino) : à 0,50→0,62 la vidéo virait au
   crème et la carte de contact, blanche, s'y fondait — « blanc sur blanc,
   l'œil met quelques secondes à se repérer ». En laissant passer la vidéo, le
   fond redevient contrasté et la carte se détache d'elle-même. */
/* ⚠️ VOILE PASSÉ EN VARIABLES le 15/08/2026, valeurs d'origine EN REPLI : la
   coquille rosée de /sport était écrite en dur ici, et sur un monde bleu elle
   réchauffait tout le bas de page. Une palette qui ne déclare rien ne bouge pas.
   Les deux alphas (0,24 → 0,36) sont le réglage de Lino du 02/08, ne pas les
   remonter : c'est en laissant passer la vidéo que la carte blanche se détache. */
.flow-panel-video::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background: linear-gradient(
    var(--flow-voile-haut, rgba(255, 245, 240, 0.24)),
    var(--flow-voile-bas,  rgba(255, 245, 240, 0.36)));
}
.flow-panel-video .flow-inner { position: relative; z-index: 1; }
/* la vidéo étant plus visible, on renforce la lisibilité du titre/sur-titre
   ⚠️ LE HALO EST UN APLAT CLAIR POSÉ SOUS DU TEXTE SOMBRE : c'est lui, et non
   la couleur du texte, qui fait tenir le sur-titre quand la vidéo passe sur un
   plan foncé. Passé en variable le 15/08/2026 avec le rosé d'origine en repli,
   pour qu'un monde bleu ne pose pas un halo chaud sous son texte. */
/* ⚠️ « CONTACT » PASSE À L'ENCRE (15/08/2026), il était dans l'accent. La
   vidéo de fond a changé le même jour : sa bande haute est une dune VÉGÉTALE,
   plus sombre que le ciel de l'ancienne. Mesuré sous le voile, l'accent y
   tombait à 2,92:1 — sous le minimum du grand texte. L'encre donne 4,90:1.
   ⚠️ Vaut pour TOUTES les palettes, parce que c'est la VIDÉO qui l'impose et
   qu'elle est la même partout. L'accent restait un choix tenable tant que le
   plan derrière était clair ; il ne l'est plus. */
.flow-panel-video .reveal-eyebrow {
  color: var(--ink);
  text-shadow: 0 1px 10px var(--flow-halo, rgba(255, 245, 240, 0.9));
}
.flow-panel-video .flow-title { text-shadow: 0 2px 16px var(--flow-halo-titre, rgba(255, 245, 240, 0.85)); }
/* Le fond ayant gagné en contraste, la carte doit gagner en présence : plus
   opaque et posée sur une ombre plus franche, elle se lit au premier coup
   d'œil comme un objet distinct du décor. */
.flow-panel-video .flow-card {
  background: rgba(255, 255, 255, 0.74);
  border-color: rgba(255, 255, 255, 0.9);
  box-shadow: 0 26px 60px rgba(38, 57, 60, 0.28);
}

/* « Contact » porte seul le volet depuis le retrait de son titre : il passe
   de 0,76 rem à 1,15 rem, sinon la section s'ouvre sur une ligne minuscule. */
.reveal-eyebrow.is-lead {
  font-size: clamp(1rem, 2.6vw, 1.3rem);
  letter-spacing: 0.28em;
  margin-bottom: clamp(1.4rem, 3.5vh, 2.2rem);
}

.btn-valider {
  width: 100%;
  margin-top: 20px;
  font-family: var(--sans);
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  padding: 17px;
  border: none;
  border-radius: 999px;
  cursor: pointer;
  color: #fff;
  background: linear-gradient(120deg, var(--coral), var(--coral-deep));
  box-shadow: 0 14px 30px rgba(239, 143, 110, 0.35);
  transition: opacity 0.3s ease, transform 0.3s ease;
}
.btn-valider:hover:not(:disabled) { transform: translateY(-2px); }
.btn-valider:disabled { opacity: 0.4; cursor: default; }

.flow-note {
  margin: 1rem 0 0;
  font-size: 0.78rem;
  color: var(--muted);
  text-align: center;
}
.flow-note a { color: var(--coral-deep); text-decoration: none; }
.flow-note a:hover { text-decoration: underline; }
.flow-msg { min-height: 1.3em; margin: 0.8rem 0 0; text-align: center; font-size: 0.9rem; font-weight: 500; color: #c14f2e; }
.flow-msg.is-ok { color: var(--teal-ink); }
.flow-success { margin: 0; text-align: center; font-size: 1.05rem; line-height: 1.8; color: var(--ink); }

.flow-footer {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 22px;
  flex-wrap: wrap;
  margin-top: 3rem;
  font-size: 0.8rem;
  color: var(--muted);
}
.flow-footer a { color: var(--muted); text-decoration: none; }
.flow-footer a:hover { color: var(--coral-deep); }

@media (max-width: 620px) {
  .field-row, .pay-methods { grid-template-columns: 1fr; }
}

/* ===== « Passer » (accueil) =====
 * Piloté par .is-on (JS) : visible SEULEMENT pendant la phase vidéo (e = 1),
 * masqué pendant l'expansion et une fois le hub révélé.
 * Plus de pastille de verre (retirée le 29/07) : simple mot, même typographie
 * que « Défiler ». « Défiler » alterne blanc et jaune ; « Passer » reste fixe
 * sur le jaune de la marque. */
.hero-skip {
  position: absolute;
  right: clamp(16px, 3vw, 32px);
  bottom: calc(clamp(18px, 4vh, 40px) + env(safe-area-inset-bottom, 0px));
  margin: 0;
  padding: 6px 2px;                /* un peu de zone tactile autour du mot */
  border: 0;
  background: none;
  cursor: pointer;
  font-family: var(--sans);
  font-size: 0.86rem;
  font-weight: 700;
  letter-spacing: 0.3em;
  text-indent: 0.3em;              /* recentre malgré l'interlettrage */
  text-transform: uppercase;
  color: var(--brand-yellow);
  text-shadow: 0 2px 16px rgba(38, 57, 60, 0.75);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.35s ease;
}
.hero-skip.is-on { opacity: 1; pointer-events: auto; }