/* ==========================================================================
   INFOLUMIÈRE — accueil V4 (IL-REFONTE-01)
   Reprise de la maquette V3 validée. Les noms de jetons reprennent ceux du
   CRM (src/styles/info-lumiere.css). Feuille propre à l'accueil : les autres
   pages du site gardent styles.css / landing.css.
   ========================================================================== */
/* Polices auto-hébergées (OFL), réduites aux graisses utilisées. Roboto et
   Cormorant viennent de fonts.css, partagé avec le reste du site. */
@font-face { font-family: "Roboto Serif"; font-style: normal; font-weight: 400 700; font-display: swap; src: url(fonts/roboto-serif-var-latin.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Roboto Serif"; font-style: italic; font-weight: 400 500; font-display: swap; src: url(fonts/roboto-serif-italic-var-latin.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Roboto Condensed"; font-style: normal; font-weight: 500 700; font-display: swap; src: url(fonts/roboto-condensed-var-latin.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Allura"; font-style: normal; font-weight: 400; font-display: swap; src: url(fonts/allura-400-latin.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
:root {
  /* — Existants (info-lumiere.css, thème sombre) — */
  --il-bg-deep: #041935;          /* bleu nuit */
  --il-bg-surface: #102E51;       /* « bleu carte » = bleu océan du brief */
  --il-bg-raised: #16395F;        /* bleu tuile */
  --il-bg-glow: #0B3B73;          /* bleu lumière : nappes, jamais en aplat */
  --il-gold: #CEA481;
  --il-gold-light: #EFCB94;
  --il-gold-deep: #A9825C;
  --il-gold-bright: #F5C77E;      /* or embrasé */
  --il-champagne: #F6DFB3;
  --il-cream: #F8F2E8;
  --il-ivory: #FDFBF6;
  --il-text-secondary: #BCC3CF;
  --il-text-muted: #98A2B3;
  --il-azur: #8FB9EC;             /* existe en token, absent de la charte */
  --il-azur-light: #B9D3F4;
  --il-azur-deep: #3C6FB8;
  --il-info: #9DB8DA;             /* charte : « Bleu brume — information » → à renommer « Bleu info » */
  --il-papier: #FBF7EE;
  --il-titre-jour: #0B2447;       /* titres du thème clair */
  --il-gold-jour: #A67C4E;        /* or assombri du thème clair */
  --il-success: #8FC9A9;
  /* — PROPOSÉS (charte v1.4) — */
  --il-brume: #DDEAF5;            /* nouveau : le « bleu brume » du brief */
  --il-brume-clair: #EEF4FA;
  --il-brume-encre: #3B5578;      /* texte secondaire sur brume (contraste ≥ 4.5:1) */
  --il-ocean-profond: #061C3A;    /* fond de la section Praticien Pro */
  --il-azur-verre: rgba(143, 185, 236, .10);
  --il-azur-filet: rgba(143, 185, 236, .34);
  --il-or-filet: rgba(206, 164, 129, .30);

  --r-card: 16px;
  --r-xl: 20px;
  --ease: cubic-bezier(.22, .61, .36, 1);
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --font-display: "Roboto Serif", Georgia, serif;
  --font-sans: "Roboto", system-ui, -apple-system, sans-serif;
  --font-cond: "Roboto Condensed", "Roboto", sans-serif;
  --gutter: 16px;
  --header-h: 68px;
}
@media (min-width: 768px) { :root { --gutter: 28px; } }
@media (min-width: 1200px) { :root { --gutter: 40px; --header-h: 76px; } }

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 8px); interpolate-size: allow-keywords; }
body {
  margin: 0; background: var(--il-bg-deep); color: var(--il-text-secondary);
  font: 300 16px/1.62 var(--font-sans); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
  overflow-x: clip;
}
img { display: block; max-width: 100%; }
a { color: inherit; }
button { font: inherit; }
:focus-visible { outline: 2px solid var(--il-gold-light); outline-offset: 3px; border-radius: 6px; }
.wrap { width: 100%; max-width: 1220px; margin: 0 auto; padding: 0 var(--gutter); }
.sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
sup { font-size: .6em; line-height: 0; }

/* ---------- Typographie ---------- */
.eyebrow {
  display: inline-flex; align-items: center; gap: 12px;
  font: 600 11px/1.4 var(--font-cond); letter-spacing: .26em; text-transform: uppercase; color: var(--il-gold-light);
}
.eyebrow::before { content: ""; width: 30px; height: 1px; background: linear-gradient(90deg, transparent, currentColor); transform-origin: left; }
.clair .eyebrow { color: var(--il-gold-jour); }
.eyebrow.azur { color: var(--il-azur); }
.clair .eyebrow.azur { color: var(--il-azur-deep); }
h1, h2, h3 { margin: 0; font-family: var(--font-display); font-weight: 500; letter-spacing: -.012em; }
.titre-lumiere {
  background: linear-gradient(100deg, var(--il-gold-bright) 0%, var(--il-champagne) 40%, var(--il-ivory) 85%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.h2 { font-size: clamp(29px, 3.7vw, 48px); line-height: 1.1; }
.h2.doux { background: linear-gradient(100deg, var(--il-champagne) 0%, var(--il-ivory) 75%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.clair .h2 { color: var(--il-titre-jour); }
.clair .h2 em { font-style: normal; background: linear-gradient(100deg, var(--il-gold-deep), var(--il-gold) 70%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.h3 { font-size: 19px; line-height: 1.25; color: var(--il-champagne); }
.clair .h3 { color: var(--il-titre-jour); }
.lead { font-size: clamp(16px, 1.45vw, 18.5px); line-height: 1.66; max-width: 60ch; margin: 0; }
.clair { color: #3B475A; }
.clair .lead { color: #3B475A; }
.muted { color: var(--il-text-muted); font-size: 14px; }
.clair .muted { color: #56606F; }
.signature { font: italic 400 clamp(18px, 2vw, 24px)/1.4 var(--font-display); color: var(--il-champagne); }

/* ---------- Boutons ---------- */
.btn {
  position: relative; overflow: hidden; isolation: isolate;
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 50px; padding: 0 28px; border-radius: 999px; border: 0; cursor: pointer;
  font: 500 15px/1 var(--font-sans); letter-spacing: .01em; text-decoration: none; white-space: nowrap;
  transition: transform .45s var(--ease-out), box-shadow .45s var(--ease-out), background-color .45s, color .45s, border-color .45s;
}
.btn svg { width: 16px; height: 16px; flex: none; transition: transform .45s var(--ease-out); }
.btn:hover svg { transform: translateX(4px); }
.btn-or {
  color: var(--il-bg-deep);
  background: linear-gradient(180deg, var(--il-ivory) -55%, var(--il-champagne) 34%, var(--il-gold-bright) 118%);
  box-shadow: 0 12px 30px -14px rgba(245, 199, 126, .65), inset 0 1px 0 rgba(255, 255, 255, .6), inset 0 0 0 1px rgba(253, 251, 246, .45);
}
/* reflet qui traverse le bouton au survol */
.btn-or::after {
  content: ""; position: absolute; inset: -20% auto -20% 0; width: 45%; z-index: -1;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .75), transparent);
  transform: translateX(-160%) skewX(-18deg); transition: transform .9s var(--ease-out);
}
.btn-or:hover { transform: translateY(-2px); box-shadow: 0 18px 38px -14px rgba(245, 199, 126, .8), inset 0 1px 0 rgba(255,255,255,.7), inset 0 0 0 1px rgba(253,251,246,.6); }
.btn-or:hover::after { transform: translateX(330%) skewX(-18deg); }
.btn-or:active { transform: translateY(0); }
.btn-ghost { color: var(--il-champagne); background: rgba(4, 25, 53, .28); box-shadow: inset 0 0 0 1px rgba(246, 223, 179, .42); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.btn-ghost:hover { background: rgba(246, 223, 179, .1); box-shadow: inset 0 0 0 1px rgba(246, 223, 179, .8), 0 0 24px -6px rgba(246, 223, 179, .35); }
.btn-azur { color: var(--il-azur-light); background: rgba(143, 185, 236, .08); box-shadow: inset 0 0 0 1px var(--il-azur-filet); }
.btn-azur:hover { background: rgba(143, 185, 236, .16); box-shadow: inset 0 0 0 1px var(--il-azur), 0 0 26px -8px rgba(143, 185, 236, .5); }
.clair .btn-ghost { color: var(--il-titre-jour); background: transparent; box-shadow: inset 0 0 0 1px rgba(166, 124, 78, .5); backdrop-filter: none; }
.clair .btn-ghost:hover { background: rgba(255, 255, 255, .62); box-shadow: inset 0 0 0 1px rgba(60, 111, 184, .45), 0 10px 24px -16px rgba(60, 111, 184, .45); }
.btn-sm { min-height: 44px; padding: 0 18px; font-size: 14px; }
.btns { display: flex; flex-wrap: wrap; gap: 12px; }

/* ---------- Badges ---------- */
.badge { display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 11px; border-radius: 999px; font: 600 10.5px/1 var(--font-cond); letter-spacing: .14em; text-transform: uppercase; white-space: nowrap; }
.badge svg { width: 11px; height: 11px; }
.b-free { color: var(--il-success); box-shadow: inset 0 0 0 1px rgba(143, 201, 169, .5); background: rgba(143, 201, 169, .08); }
.b-club { color: var(--il-champagne); border: 1px dashed rgba(246, 223, 179, .6); background: rgba(246, 223, 179, .06); }
.b-key { color: var(--il-azur); border: 1px dashed rgba(143, 185, 236, .6); background: rgba(143, 185, 236, .07); }
.b-cond { color: #E3B774; box-shadow: inset 0 0 0 1px rgba(227, 183, 116, .55); background: rgba(227, 183, 116, .1); }
.clair .b-free { color: #2F6E53; box-shadow: inset 0 0 0 1px rgba(47, 110, 83, .4); }
.clair .b-cond { color: #8A5A12; box-shadow: inset 0 0 0 1px rgba(138, 90, 18, .45); background: rgba(227, 183, 116, .14); }

/* ---------- En-tête et tiroir mobile : composants-v42.css (communs à toutes les pages) ---------- */
.brand { display: inline-flex; align-items: center; gap: 12px; min-height: 44px; text-decoration: none; flex: none; }
.brand-name { font: 500 21px/1 var(--font-display); color: var(--il-cream); letter-spacing: .01em; }
.brand-name b { font-weight: 500; color: var(--il-champagne); }

/* ==========================================================================
   HÉROS CINÉMATOGRAPHIQUE
   ========================================================================== */
.hero { position: relative; isolation: isolate; overflow: hidden; background: var(--il-bg-deep); }
.hero-media { position: absolute; inset: 0; z-index: -3; }
.hero-media img { width: 100%; height: 100%; object-fit: cover; object-position: 68% 32%; }
/* voiles : texte à gauche, raccord bas vers la nuit */
.hero-voile { position: absolute; inset: 0; z-index: -2; pointer-events: none;
  background:
    linear-gradient(90deg, rgba(4,25,53,.97) 0%, rgba(4,25,53,.9) 26%, rgba(4,25,53,.52) 46%, rgba(4,25,53,.06) 66%, rgba(4,25,53,0) 80%),
    linear-gradient(180deg, rgba(4,25,53,.55) 0%, rgba(4,25,53,0) 18%, rgba(4,25,53,0) 62%, rgba(4,25,53,.92) 94%, var(--il-bg-deep) 100%);
}
/* ambiance : couches positionnées sur le soleil (JS pose --sx / --sy) */
.ambiance { position: absolute; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; }
.rayons {
  position: absolute; left: var(--sx, 58%); top: var(--sy, 30%); width: 1700px; height: 1700px; margin: -850px 0 0 -850px;
  background: repeating-conic-gradient(from 14deg,
      rgba(255, 233, 196, 0) 0deg, rgba(255, 233, 196, .075) 4deg, rgba(255, 233, 196, 0) 9deg,
      rgba(255, 233, 196, 0) 17deg, rgba(255, 233, 196, .05) 21deg, rgba(255, 233, 196, 0) 26deg,
      rgba(255, 233, 196, 0) 37deg, rgba(255, 233, 196, .085) 42deg, rgba(255, 233, 196, 0) 48deg,
      rgba(255, 233, 196, 0) 60deg);
  -webkit-mask-image: radial-gradient(closest-side, #000 3%, rgba(0,0,0,.5) 26%, transparent 64%);
  mask-image: radial-gradient(closest-side, #000 3%, rgba(0,0,0,.5) 26%, transparent 64%);
  opacity: 0; animation: rayons-in 2.6s .5s var(--ease) forwards, rayons-derive 46s 3.1s ease-in-out infinite alternate;
}
.halo-soleil { position: absolute; left: var(--sx, 58%); top: var(--sy, 30%); width: 520px; height: 520px; margin: -260px 0 0 -260px; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(255, 238, 205, .55), rgba(245, 199, 126, .22) 38%, rgba(245, 199, 126, 0) 72%);
  opacity: 0; animation: halo-in 2.2s .3s var(--ease) forwards, halo-respire 11s 2.5s ease-in-out infinite alternate; }
.brume-paysage { position: absolute; left: -10%; right: -10%; bottom: 6%; height: 46%;
  background:
    radial-gradient(ellipse 38% 26% at 22% 62%, rgba(232, 240, 250, .13), transparent 70%),
    radial-gradient(ellipse 30% 22% at 58% 70%, rgba(255, 236, 210, .12), transparent 70%),
    radial-gradient(ellipse 34% 20% at 84% 58%, rgba(232, 240, 250, .1), transparent 70%),
    radial-gradient(ellipse 60% 30% at 50% 88%, rgba(220, 232, 248, .08), transparent 70%);
  opacity: 0; animation: brume-in 3s 1s var(--ease) forwards, brume-derive 58s 1s ease-in-out infinite alternate; }
.particules { position: absolute; inset: 0; }
.particules i { position: absolute; left: var(--x); top: var(--y); width: var(--t); height: var(--t); border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 244, 222, 1) 0%, rgba(246, 223, 179, .85) 35%, rgba(246, 223, 179, 0) 72%);
  opacity: 0; animation: flotte var(--d) var(--r) linear infinite; will-change: transform, opacity; }
@keyframes rayons-in { to { opacity: .9; } }
@keyframes rayons-derive { from { transform: rotate(-2.2deg); } to { transform: rotate(2.6deg); } }
@keyframes halo-in { from { opacity: 0; transform: scale(.85); } to { opacity: 1; transform: scale(1); } }
@keyframes halo-respire { from { opacity: .82; transform: scale(1); } to { opacity: 1; transform: scale(1.06); } }
@keyframes brume-in { to { opacity: 1; } }
@keyframes brume-derive { from { transform: translateX(-2.5%); } to { transform: translateX(2.5%); } }
@keyframes flotte {
  0% { opacity: 0; transform: translate3d(0, 0, 0) scale(.6); }
  14% { opacity: var(--o); }
  70% { opacity: calc(var(--o) * .7); }
  100% { opacity: 0; transform: translate3d(var(--dx), var(--dy), 0) scale(1); }
}
.hero.repos .ambiance *, .final.repos .ambiance * { animation-play-state: paused !important; }

/* contenu du héros */
.hero-corps { position: relative; min-height: min(860px, 100svh); display: flex; flex-direction: column; justify-content: center; padding: calc(var(--header-h) + 56px) var(--gutter) 150px; }
.hero-corps .eyebrow { margin-bottom: 22px; }
.hero-titre { font-size: clamp(38px, 4.5vw, 66px); line-height: 1.06; letter-spacing: -.018em; position: relative; margin: 0 0 6px; }
/* lueur dorée derrière le titre (opacité seule : composité) */
.hero-titre::before { content: ""; position: absolute; left: -6%; top: -18%; width: 92%; height: 140%; z-index: -1; pointer-events: none;
  background: radial-gradient(ellipse 60% 52% at 40% 50%, rgba(245, 199, 126, .2), rgba(245, 199, 126, 0) 70%); opacity: 0; transition: opacity 1.6s var(--ease) .9s; }
.hero-titre .ln { display: block; overflow: hidden; padding: .04em 0 .12em; margin-bottom: -.1em; }
.hero-titre .ln-in {
  display: inline-block; padding-right: .06em;
  background-image: linear-gradient(100deg, rgba(255,255,255,0) 42%, rgba(255, 252, 244, .95) 50%, rgba(255,255,255,0) 58%),
                    linear-gradient(100deg, var(--il-gold-bright) 0%, var(--il-champagne) 42%, var(--il-ivory) 86%);
  background-size: 300% 100%, var(--tw, 900px) 100%; background-position: 130% 0, var(--bx, 0px) 0; background-repeat: no-repeat;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  transform: translate3d(0, 108%, 0); }
.hero-filet { display: block; width: 120px; height: 14px; margin: 20px 0 22px; }
.hero-filet path { stroke-dasharray: 160; stroke-dashoffset: 160; }
.hero-texte { opacity: 0; transform: translate3d(0, 14px, 0); }
.hero-texte .lead { color: #D3D9E2; max-width: 52ch; }
.hero-texte .lead + .lead { margin-top: 8px; color: var(--il-text-secondary); }
.hero-ctas { margin-top: 30px; opacity: 0; transform: translate3d(0, 16px, 0) scale(.98); }
.hero-note { margin-top: 18px; display: flex; align-items: center; gap: 10px; opacity: 0; }
.hero-note::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--il-gold-bright); box-shadow: 0 0 10px var(--il-gold-bright); flex: none; }
.hero-signe { position: absolute; right: var(--gutter); bottom: 168px; text-align: right; transform: rotate(-4deg); text-shadow: 0 2px 18px rgba(4,25,53,.7); opacity: 0; display: none; }
.defiler { position: absolute; left: 50%; bottom: 96px; width: 1px; height: 46px; background: linear-gradient(180deg, rgba(246,223,179,0), rgba(246,223,179,.5)); opacity: 0; display: none; }
.defiler::after { content: ""; position: absolute; left: -2px; top: 0; width: 5px; height: 5px; border-radius: 50%; background: var(--il-champagne); animation: defile 2.4s 3.2s var(--ease) 3 both; }
@keyframes defile { 0% { transform: translateY(0); opacity: 0; } 30% { opacity: 1; } 100% { transform: translateY(42px); opacity: 0; } }
@media (min-width: 1024px) { .hero-signe, .defiler { display: block; } }

/* séquence d'entrée (ajoutée par JS) */
.hero.joue .hero-titre .ln-in { animation: ligne 1.15s var(--ease-out) forwards, eclat 1.7s 1.25s var(--ease) forwards; animation-delay: calc(.25s + var(--i) * .13s), calc(1.15s + var(--i) * .1s); }
.hero.joue .hero-titre::before { opacity: 1; }
.hero.joue .eyebrow::before { animation: trait .9s .1s var(--ease-out) both; }
.hero.joue .hero-filet path { animation: dessin 1.4s 1s var(--ease) forwards; }
.hero.joue .hero-texte { animation: monte .95s 1.05s var(--ease-out) forwards; }
.hero.joue .hero-ctas { animation: monte 1s 1.55s var(--ease-out) forwards; }
.hero.joue .hero-note { animation: apparait 1s 1.95s var(--ease) forwards; }
.hero.joue .hero-signe { animation: signe 1.6s 2.1s var(--ease) forwards; }
.hero.joue .defiler { animation: apparait 1s 2.8s var(--ease) forwards; }
@keyframes ligne { to { transform: translate3d(0, 0, 0); } }
@keyframes eclat { from { background-position: 130% 0, var(--bx, 0px) 0; } to { background-position: -30% 0, var(--bx, 0px) 0; } }
@keyframes trait { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes dessin { to { stroke-dashoffset: 0; } }
@keyframes monte { to { opacity: 1; transform: none; } }
@keyframes apparait { to { opacity: 1; } }
@keyframes signe { from { opacity: 0; transform: rotate(-4deg) translateY(8px); } to { opacity: .95; transform: rotate(-4deg); } }
/* état final immédiat (fin de séquence, défilement, mouvement réduit) */
.hero.fini .hero-titre .ln-in { animation: none; transform: none; background-position: -30% 0, var(--bx, 0px) 0; }
.hero.fini .hero-texte, .hero.fini .hero-ctas, .hero.fini .hero-note { animation: none; opacity: 1; transform: none; }
.hero.fini .hero-signe { animation: none; opacity: .95; }
.hero.fini .hero-filet path { animation: none; stroke-dashoffset: 0; }
.hero.fini .hero-titre::before { opacity: 1; transition: none; }

/* Héros mobile : bande photo courte, texte qui remonte dessus */
@media (max-width: 1023px) {
  .hero-media { position: relative; inset: auto; height: clamp(300px, 46svh, 400px); }
  .hero-media img { object-position: 84% 30%; }
  .hero-voile { background: linear-gradient(180deg, rgba(4,25,53,.6) 0%, rgba(4,25,53,0) 22%, rgba(4,25,53,0) 52%, rgba(4,25,53,.85) 82%, var(--il-bg-deep) 100%); height: clamp(300px, 46svh, 400px); bottom: auto; }
  .ambiance { height: clamp(300px, 46svh, 400px); bottom: auto; }
  .hero-corps { min-height: 0; padding-top: 0; padding-bottom: 120px; margin-top: -92px; }
  .hero-corps .eyebrow { margin-bottom: 14px; font-size: 10.5px; letter-spacing: .22em; }
  .hero-titre { font-size: clamp(33px, 8.6vw, 46px); text-wrap: balance; }
  .hero-filet { margin: 12px 0 14px; width: 96px; }
  .hero-texte .lead { font-size: 15.5px; line-height: 1.6; }
  .hero-texte .lead + .lead { display: none; }
  .hero-ctas { margin-top: 22px; }
  .hero-ctas .btn { flex: 1 1 auto; }
  .hero-note { font-size: 13px; }
}
@media (max-width: 400px) { .hero-ctas .btn { padding: 0 18px; } }

/* ---------- Bande des promesses (verre ivoire → brume, chevauche le héros) ---------- */
.promesses { position: relative; z-index: 5; margin-top: -86px; }
.promesses ul {
  list-style: none; margin: 0 auto; padding: 26px 22px; max-width: 1120px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 14px;
  border-radius: var(--r-xl); background: linear-gradient(100deg, rgba(253,251,246,.97) 0%, rgba(238,244,250,.97) 55%, rgba(221,234,245,.97) 100%);
  box-shadow: 0 30px 60px -30px rgba(1, 8, 20, .7), inset 0 0 0 1px rgba(206, 164, 129, .35);
}
.promesses li { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 10px; color: var(--il-titre-jour); font-size: 14.5px; line-height: 1.35; font-weight: 400; }
.promesses .med { width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; color: var(--il-gold-jour);
  background: radial-gradient(circle at 35% 30%, #fff, var(--il-brume-clair) 60%, var(--il-brume)); box-shadow: inset 0 0 0 1px rgba(166,124,78,.35), 0 8px 18px -10px rgba(11,36,71,.4); }
.promesses svg { width: 25px; height: 25px; }
.promesses small { display: block; color: #56606F; font-size: 12.5px; margin-top: 2px; font-weight: 300; }
@media (min-width: 900px) { .promesses ul { grid-template-columns: repeat(4, 1fr); padding: 30px 26px; } .promesses li + li { border-left: 1px solid rgba(166,124,78,.18); } }
@media (max-width: 1023px) { .promesses { margin-top: -64px; } }

/* ---------- Sections ---------- */
.section { position: relative; padding: 96px 0; overflow: hidden; isolation: isolate; }
@media (min-width: 1024px) { .section { padding: 128px 0; } }
.tete { max-width: 780px; margin-bottom: 48px; }
.tete.centre { margin-left: auto; margin-right: auto; text-align: center; }
.tete.centre .eyebrow { justify-content: center; }
.tete .h2 { margin: 16px 0 18px; }
.tete.centre .lead { margin: 0 auto; }
.fond-nuit { background: var(--il-bg-deep); }
.fond-ocean { background: linear-gradient(180deg, var(--il-bg-deep) 0%, #082448 45%, var(--il-bg-surface) 100%); }
.fond-brume { background: linear-gradient(180deg, var(--il-brume-clair) 0%, var(--il-brume) 100%); }
.fond-aube { background: linear-gradient(160deg, var(--il-ivory) 0%, #F4F1EA 38%, var(--il-brume-clair) 72%, var(--il-brume) 100%); }
.fond-pro { background: radial-gradient(ellipse 80% 60% at 85% 10%, rgba(60,111,184,.28), transparent 60%), linear-gradient(180deg, var(--il-ocean-profond) 0%, #08244A 55%, #0A2A52 100%); }
/* nappes de lumière (charte 1.3 ②) — peintes une fois, jamais animées */
.nappe::before, .nappe::after { content: ""; position: absolute; border-radius: 50%; pointer-events: none; z-index: -1; }
.nappe::before { width: 980px; height: 680px; left: -320px; top: -220px; background: radial-gradient(closest-side, rgba(11, 59, 115, .85), rgba(11, 59, 115, 0)); }
.nappe::after { width: 760px; height: 560px; right: -260px; bottom: -200px; background: radial-gradient(closest-side, rgba(60, 111, 184, .26), rgba(60, 111, 184, 0)); }
.nappe.inverse::before { left: auto; right: -320px; }
.nappe.inverse::after { right: auto; left: -260px; }

/* transitions entre sections : courbes + filet doré dessiné à l'apparition */
.courbe { position: absolute; left: 0; width: 100%; height: 84px; pointer-events: none; z-index: 2; display: block; }
.courbe.haut { top: -1px; }
.courbe.bas { bottom: -1px; }
.courbe .filet { fill: none; stroke: var(--il-gold); stroke: url(#g-filet); stroke-opacity: .7; stroke-width: 1.2; stroke-dasharray: 1700; stroke-dashoffset: 1700; vector-effect: non-scaling-stroke; }
.courbe.vu .filet { animation: dessin 2.4s var(--ease) forwards; }
@media (max-width: 767px) { .courbe { height: 46px; } }

/* ornements végétaux */
.orne { position: absolute; pointer-events: none; z-index: 0; height: auto; opacity: .7; transform-origin: 85% 100%; }
.orne.balance { animation: balance 11s ease-in-out infinite alternate; }
.orne.balance.lent { animation-duration: 15s; animation-delay: -4s; }
@keyframes balance { from { transform: rotate(-1.6deg); } to { transform: rotate(2deg); } }
.section.repos .orne, .section.repos .orne * { animation-play-state: paused; }
.brin path { fill: none; stroke: var(--il-gold); stroke-width: 1.1; stroke-linecap: round; stroke-dasharray: 600; stroke-dashoffset: 600; }
.brin.vu path { animation: dessin 2.8s var(--ease) forwards; }
.brin.vu path:nth-child(2) { animation-delay: .35s; } .brin.vu path:nth-child(3) { animation-delay: .6s; } .brin.vu path:nth-child(4) { animation-delay: .8s; } .brin.vu path:nth-child(5) { animation-delay: 1s; }
@media (max-width: 767px) { .orne { width: 120px !important; opacity: .45; } }

/* apparition au défilement */
.rv { opacity: 0; transform: translate3d(0, 22px, 0); transition: opacity 1s var(--ease-out), transform 1.1s var(--ease-out); transition-delay: calc(var(--i, 0) * 90ms); }
.rv.vu { opacity: 1; transform: none; }
.rv-img img { opacity: 0; transform: scale(1.06); transition: opacity 1.3s var(--ease), transform 1.8s var(--ease-out); }
.rv-img.vu img { opacity: 1; transform: scale(1); }

/* ---------- Cartes : une famille, micro-interactions ---------- */
.carte {
  position: relative; border-radius: var(--r-card); overflow: hidden; isolation: isolate;
  background: linear-gradient(162deg, var(--il-bg-raised) 0%, var(--il-bg-surface) 52%, #0B2646 100%);
  box-shadow: 0 24px 46px -26px rgba(1, 8, 20, .9), inset 0 0 0 1px var(--il-or-filet);
  transition: transform .6s var(--ease-out), box-shadow .6s var(--ease-out);
}
/* lumière qui suit le pointeur */
.carte::before { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; opacity: 0; transition: opacity .5s var(--ease);
  background: radial-gradient(320px circle at var(--mx, 50%) var(--my, 0%), rgba(246, 223, 179, .16), rgba(143, 185, 236, .06) 45%, transparent 70%); }
/* reflet unique au survol */
.carte::after { content: ""; position: absolute; top: -30%; bottom: -30%; left: 0; width: 38%; z-index: 3; pointer-events: none;
  background: linear-gradient(100deg, transparent, rgba(255, 248, 232, .13), transparent); transform: translateX(-180%) skewX(-16deg); transition: transform 1.1s var(--ease-out); }
@media (hover: hover) {
  .carte:hover { transform: translateY(-5px); box-shadow: 0 34px 60px -28px rgba(1, 8, 20, .95), inset 0 0 0 1px rgba(246, 223, 179, .62), 0 0 0 1px rgba(246,223,179,.08); }
  .carte:hover::before { opacity: 1; }
  .carte:hover::after { transform: translateX(380%) skewX(-16deg); }
}
.carte:focus-within { box-shadow: 0 24px 46px -26px rgba(1, 8, 20, .9), inset 0 0 0 1px rgba(246, 223, 179, .7); }
.carte .corps { position: relative; z-index: 2; padding: 24px; }
@media (min-width: 768px) { .carte .corps { padding: 26px 28px; } }
/* un seul coin lumineux, jamais sur une carte à photo */
.coin-d > .coin, .coin-g > .coin { position: absolute; width: 240px; height: 240px; bottom: -120px; z-index: 0; pointer-events: none; background: radial-gradient(closest-side, rgba(245, 199, 126, .2), transparent); }
.coin-d > .coin { right: -90px; } .coin-g > .coin { left: -90px; }
/* variante verre azur (zones de fonctionnalités) */
.carte.azur { background: linear-gradient(160deg, rgba(185,211,244,.2) 0%, rgba(22,57,95,.92) 36%, rgba(16,46,81,.96) 100%); box-shadow: 0 24px 46px -26px rgba(1,8,20,.9), inset 0 0 0 1px var(--il-azur-filet), inset 0 1px 0 rgba(185,211,244,.3); }
@media (hover: hover) { .carte.azur:hover { box-shadow: 0 34px 60px -28px rgba(1,8,20,.95), inset 0 0 0 1px rgba(185, 211, 244, .75), 0 0 34px -12px rgba(143,185,236,.45); } }
/* variante claire */
.carte.papier { background: linear-gradient(170deg, #FFFFFF 0%, #FFFCF6 60%, var(--il-papier) 100%); box-shadow: 0 22px 44px -28px rgba(11, 36, 71, .4), inset 0 0 0 1px rgba(166, 124, 78, .24); color: #3B475A; }
@media (hover: hover) { .carte.papier:hover { box-shadow: 0 30px 54px -28px rgba(11,36,71,.45), inset 0 0 0 1px rgba(166,124,78,.6); } }
.carte.papier::before { background: radial-gradient(300px circle at var(--mx, 50%) var(--my, 0%), rgba(143, 185, 236, .16), transparent 70%); }
.carte.papier::after { background: linear-gradient(100deg, transparent, rgba(255,255,255,.7), transparent); }

/* ---------- Film 60 s ---------- */
.film-cadre { position: relative; max-width: 1040px; margin: 0 auto; aspect-ratio: 16 / 9; border-radius: 22px; overflow: hidden; isolation: isolate;
  box-shadow: 0 50px 90px -40px rgba(0, 0, 0, .85), inset 0 0 0 1px rgba(246, 223, 179, .3); background: #071a33; }
.film-cadre::before { content: ""; position: absolute; inset: 10px; z-index: 3; border-radius: 16px; pointer-events: none; box-shadow: inset 0 0 0 1px rgba(246, 223, 179, .18); }
.film-cadre img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 1.6s var(--ease-out); }
.film-cadre .voile { position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(4,25,53,.15), rgba(4,25,53,.2) 50%, rgba(4,25,53,.85)), radial-gradient(ellipse at 50% 45%, rgba(4,25,53,0), rgba(4,25,53,.45)); }
.film-lire { position: absolute; z-index: 4; left: 50%; top: 46%; width: 96px; height: 96px; margin: -48px 0 0 -48px; border: 0; border-radius: 50%; cursor: pointer; display: grid; place-items: center;
  color: var(--il-bg-deep); background: radial-gradient(circle at 35% 30%, var(--il-ivory), var(--il-champagne) 55%, var(--il-gold-bright)); box-shadow: 0 16px 40px -12px rgba(245,199,126,.7), inset 0 0 0 1px rgba(255,255,255,.6);
  transition: transform .5s var(--ease-out), box-shadow .5s var(--ease-out); }
.film-lire svg { width: 30px; height: 30px; margin-left: 5px; }
.film-lire::before { content: ""; position: absolute; inset: -14px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(246,223,179,.55); transition: transform .7s var(--ease-out), opacity .7s; }
.film-cadre:hover .film-lire, .film-lire:focus-visible { transform: scale(1.06); box-shadow: 0 22px 50px -12px rgba(245,199,126,.85), inset 0 0 0 1px rgba(255,255,255,.7); }
.film-cadre:hover .film-lire::before { transform: scale(1.18); opacity: .4; }
.film-cadre:hover img { transform: scale(1.03); }
.film-legende { position: absolute; z-index: 4; left: 28px; right: 28px; bottom: 22px; display: flex; justify-content: space-between; align-items: end; gap: 12px; color: var(--il-cream); }
.film-legende b { font: 500 clamp(18px, 2.2vw, 26px)/1.15 var(--font-display); color: var(--il-ivory); display: block; }
.film-legende span { font-size: 13.5px; color: var(--il-text-secondary); }
.film-duree { font: 600 12px/1 var(--font-cond); letter-spacing: .18em; color: var(--il-champagne); padding: 9px 12px; border-radius: 999px; background: rgba(4,25,53,.6); box-shadow: inset 0 0 0 1px rgba(246,223,179,.35); white-space: nowrap; }
.film-meta { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 22px; margin-top: 26px; font-size: 13.5px; color: var(--il-text-secondary); }
.film-meta span { display: inline-flex; align-items: center; gap: 8px; }
.film-meta svg { width: 16px; height: 16px; color: var(--il-azur); }
@media (max-width: 767px) { .film-lire { width: 72px; height: 72px; margin: -36px 0 0 -36px; } .film-legende { left: 16px; right: 16px; bottom: 14px; } .film-legende span { display: none; } .film-cadre { border-radius: 16px; } }

/* ---------- Mon Éveil : démonstration animée ---------- */
.eveil-grille { display: grid; grid-template-columns: minmax(0, 1fr); gap: 44px; align-items: center; }
@media (min-width: 1024px) { .eveil-grille { grid-template-columns: 1fr 1fr; gap: 72px; } }
.eveil-grille > * { min-width: 0; }
.etapes { list-style: none; padding: 0; margin: 28px 0 30px; display: grid; gap: 10px; }
.etape { width: 100%; text-align: left; display: grid; grid-template-columns: 34px 1fr; gap: 14px; align-items: start; padding: 14px 16px; border-radius: 14px; border: 0; cursor: pointer;
  background: rgba(255,255,255,.45); box-shadow: inset 0 0 0 1px rgba(60,111,184,.14); color: #3B475A; transition: background-color .5s, box-shadow .5s; position: relative; overflow: hidden; }
.etape:hover { background: rgba(255,255,255,.75); }
.etape .num { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; font: 600 13px/1 var(--font-cond); color: var(--il-azur-deep); box-shadow: inset 0 0 0 1px var(--il-azur-filet); background: #fff; transition: background-color .5s, color .5s; }
.etape strong { display: block; color: var(--il-titre-jour); font-weight: 500; font-size: 15.5px; }
.etape span.d { font-size: 14px; line-height: 1.5; color: #56606F; }
.etape .prog { position: absolute; left: 0; bottom: 0; height: 2px; width: 100%; background: linear-gradient(90deg, var(--il-azur-deep), var(--il-gold)); transform-origin: left; transform: scaleX(0); }
.etape[aria-current="step"] { background: #fff; box-shadow: inset 0 0 0 1px rgba(60,111,184,.35), 0 14px 30px -20px rgba(11,36,71,.4); }
.etape[aria-current="step"] .num { background: var(--il-azur-deep); color: #fff; box-shadow: none; }
.demo.lecture .etape[aria-current="step"] .prog { animation: progression var(--duree, 5s) linear forwards; }
.demo.arret .etape[aria-current="step"] .prog { transform: scaleX(1); opacity: .35; }
@keyframes progression { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.demo-ctrl { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.pause { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 16px; border-radius: 999px; border: 0; cursor: pointer; font-size: 14px; color: var(--il-azur-deep); background: #fff; box-shadow: inset 0 0 0 1px var(--il-azur-filet); }
.pause svg { width: 14px; height: 14px; }
.sombre .pause { color: var(--il-azur-light); background: rgba(143,185,236,.08); }

.scene { position: relative; display: grid; place-items: center; padding: 20px 0; }
.scene::before { content: ""; position: absolute; width: 520px; height: 520px; border-radius: 50%; background: radial-gradient(closest-side, rgba(143,185,236,.45), rgba(143,185,236,0)); z-index: 0; }
.telephone { position: relative; z-index: 1; width: 300px; aspect-ratio: 9 / 19.2; padding: 11px; border-radius: 48px;
  background: linear-gradient(155deg, #2A3A57 0%, #0B1528 40%, #1A2944 100%);
  box-shadow: 0 50px 80px -36px rgba(11, 36, 71, .65), 0 0 0 1px rgba(255,255,255,.06), inset 0 0 0 1.5px rgba(255,255,255,.12); }
.telephone::before { content: ""; position: absolute; top: 20px; left: 50%; width: 96px; height: 26px; margin-left: -48px; border-radius: 16px; background: #050b17; z-index: 6; }
.ecrans { position: relative; height: 100%; border-radius: 38px; overflow: hidden; background: linear-gradient(180deg, var(--il-papier) 0%, #F8F7F3 42%, var(--il-brume-clair) 100%); }
.ecran { position: absolute; inset: 0; display: flex; flex-direction: column; opacity: 0; visibility: hidden; transform: translate3d(0, 14px, 0) scale(.985); transition: opacity .7s var(--ease), transform .8s var(--ease-out), visibility 0s .8s; }
.ecran.actif { opacity: 1; visibility: visible; transform: none; transition: opacity .7s var(--ease), transform .8s var(--ease-out), visibility 0s; }
.barre-etat { height: 46px; flex: none; display: flex; justify-content: space-between; align-items: end; padding: 0 26px 6px; font: 600 11.5px/1 var(--font-sans); color: var(--il-titre-jour); }
.e-bandeau { position: relative; height: 104px; margin: 0 10px; border-radius: 18px; overflow: hidden; flex: none; }
.e-bandeau img { width: 100%; height: 100%; object-fit: cover; }
.e-bandeau::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(4,25,53,0), rgba(4,25,53,.7)); }
.e-bandeau b { position: absolute; left: 14px; bottom: 30px; z-index: 1; font: 500 17px/1.1 var(--font-display); color: var(--il-ivory); }
.e-bandeau small { position: absolute; left: 14px; bottom: 10px; z-index: 1; font: 600 8.5px/1 var(--font-cond); letter-spacing: .16em; text-transform: uppercase; color: var(--il-champagne); padding: 4px 7px; border-radius: 999px; background: rgba(4,25,53,.55); box-shadow: inset 0 0 0 1px rgba(246,223,179,.4); }
.e-corps { padding: 12px 14px; display: grid; gap: 9px; font-size: 11.5px; color: #3B475A; align-content: start; }
.e-carte { background: #fff; border-radius: 14px; padding: 11px 12px; box-shadow: 0 6px 16px -12px rgba(11,36,71,.35), inset 0 0 0 1px rgba(60,111,184,.16); }
.e-label { font: 600 8.5px/1.2 var(--font-cond); letter-spacing: .18em; text-transform: uppercase; color: var(--il-gold-jour); }
.e-titre { font: 500 14px/1.25 var(--font-display); color: var(--il-titre-jour); margin: 3px 0 0; }
.e-ligne { display: flex; justify-content: space-between; align-items: center; padding: 6px 0; border-top: 1px solid rgba(60,111,184,.12); }
.e-ligne:first-of-type { border-top: 0; }
.e-ligne span { color: #56606F; } .e-ligne b { font-weight: 500; color: var(--il-titre-jour); }
.interrupteur { width: 34px; height: 20px; border-radius: 999px; background: var(--il-azur-deep); position: relative; flex: none; }
.interrupteur::after { content: ""; position: absolute; right: 2px; top: 2px; width: 16px; height: 16px; border-radius: 50%; background: #fff; }
.puces { display: flex; flex-wrap: wrap; gap: 5px; }
.puce { font-size: 10.5px; padding: 5px 8px; border-radius: 999px; color: #3B475A; background: #fff; box-shadow: inset 0 0 0 1px rgba(60,111,184,.22); transition: background-color .5s var(--ease), color .5s, box-shadow .5s; }
.puce.on { background: var(--il-azur-deep); color: #fff; box-shadow: none; }
.ecran.actif .puce.anime { animation: puce-on .6s var(--ease-out) forwards; animation-delay: var(--t); }
@keyframes puce-on { 0% { transform: scale(1); } 40% { transform: scale(1.08); } 100% { transform: scale(1); background: var(--il-azur-deep); color: #fff; box-shadow: none; } }
.pensee { font: italic 400 14px/1.5 var(--font-display); color: var(--il-titre-jour); padding: 12px 13px; border-radius: 14px; background: linear-gradient(120deg, rgba(246,223,179,.55), rgba(255,255,255,.9) 70%); box-shadow: inset 2px 0 0 var(--il-gold); }
.pensee .m { opacity: 0; transition: opacity .5s var(--ease); }
.ecran.actif .pensee .m { opacity: 1; transition-delay: calc(.5s + var(--k) * 70ms); }
.compteur { font-size: 10.5px; color: var(--il-azur-deep); font-weight: 500; }
.compteur .n { display: inline-block; }
.mail-tete { padding: 10px 14px 8px; border-bottom: 1px solid rgba(166,124,78,.14); font-size: 10.5px; color: #56606F; display: grid; gap: 2px; }
.mail-tete b { color: var(--il-titre-jour); font-weight: 500; font-size: 11.5px; }
.actu { display: grid; grid-template-columns: 1fr; gap: 6px; padding: 9px 10px; border-radius: 12px; background: #fff; box-shadow: inset 0 0 0 1px rgba(166,124,78,.16); opacity: 0; transform: translateY(8px); transition: opacity .6s var(--ease), transform .7s var(--ease-out); }
.ecran.actif .actu { opacity: 1; transform: none; transition-delay: calc(.6s + var(--k) * 180ms); }
.actu i { display: block; height: 6px; border-radius: 3px; background: #E4E8EF; }
.actu i:nth-child(2) { width: 78%; }
.actu em { font-style: normal; font-size: 9.5px; color: #56606F; display: flex; justify-content: space-between; }
.actu em b { color: var(--il-azur-deep); font-weight: 500; }
.ruban { margin: 0 10px; padding: 7px 10px; border-radius: 10px; font-size: 10px; line-height: 1.35; color: #8A5A12; background: rgba(227,183,116,.18); box-shadow: inset 0 0 0 1px rgba(138,90,18,.25); }
.desabo { text-align: center; font-size: 9.5px; color: #56606F; text-decoration: underline; padding: 6px 0 14px; }

@media (max-width: 767px) { .telephone { width: 268px; } .scene::before { width: 380px; height: 380px; } .etapes { margin: 22px 0; } .etape { padding: 12px 14px; } .etape span.d { display: none; } }

/* ---------- Univers & outils ---------- */
.univers-grille { display: grid; gap: 16px; grid-template-columns: 1fr; }
@media (min-width: 620px) { .univers-grille { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1120px) { .univers-grille { grid-template-columns: repeat(4, 1fr); } }
.univers { min-height: 340px; display: flex; flex-direction: column; justify-content: flex-end; text-decoration: none; }
.univers .photo { position: absolute; inset: 0; z-index: 0; overflow: hidden; }
.univers .photo img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.6s var(--ease-out), opacity 1.3s var(--ease); }
.univers::before { z-index: 2; }
.univers .voile { position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(4,25,53,.4) 0%, rgba(4,25,53,0) 26%, rgba(4,25,53,.3) 52%, rgba(4,25,53,.95) 100%); transition: opacity .6s; }
@media (hover: hover) { .univers:hover .photo img { transform: scale(1.05); } }
.univers .u-badge { position: absolute; top: 16px; right: 16px; z-index: 3; }
.univers .u-bas { position: relative; z-index: 3; padding: 0 20px 20px; display: grid; gap: 8px; }
.univers .u-nom { display: flex; align-items: center; gap: 12px; }
.medaillon { width: 42px; height: 42px; flex: none; border-radius: 50%; display: grid; place-items: center; font: 500 16px/1 var(--font-display); color: var(--il-bg-deep);
  background: radial-gradient(circle at 35% 30%, var(--il-ivory), var(--il-champagne) 60%, var(--il-gold) 125%); box-shadow: 0 0 0 1px rgba(253,251,246,.6), 0 6px 18px -6px rgba(0,0,0,.6); }
.u-nom b { display: block; font: 500 22px/1.05 var(--font-display); color: var(--il-ivory); }
.u-nom small { display: block; margin-top: 4px; font-size: 13px; color: var(--il-cream); opacity: .85; }
.u-phrase { font: italic 400 15.5px/1.4 var(--font-display); color: var(--il-champagne); padding-left: 54px; }

.outils-grille { display: grid; gap: 16px; grid-template-columns: 1fr; margin-top: 60px; }
@media (min-width: 620px) { .outils-grille { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1120px) { .outils-grille { grid-template-columns: repeat(3, 1fr); } }
.outil { display: grid; grid-template-columns: 112px minmax(0, 1fr); min-height: 150px; }
.outil .vignette { position: relative; overflow: hidden; }
.outil .vignette img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.outil .vignette::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(16,46,81,0) 30%, rgba(17,47,82,1) 100%); }
.outil .corps { display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px; align-content: center; padding: 18px 20px; background: radial-gradient(ellipse 85% 75% at 100% 0%, rgba(185,211,244,.13), transparent 62%); }
.outil p { margin: 0; font-size: 14px; line-height: 1.5; color: #C9D2DE; }
.outil .badge { justify-self: start; margin-top: 4px; }
.legende { display: flex; flex-wrap: wrap; gap: 12px 20px; align-items: center; margin-top: 28px; font-size: 13.5px; color: var(--il-text-muted); }
.legende span { display: inline-flex; align-items: center; gap: 8px; }
@media (max-width: 619px) { .univers { min-height: 280px; } .outil { grid-template-columns: 96px minmax(0, 1fr); min-height: 132px; } }

/* ---------- Accompagnement humain ---------- */
.humain-grille { display: grid; gap: 44px; align-items: center; }
@media (min-width: 1024px) { .humain-grille { grid-template-columns: .92fr 1.08fr; gap: 76px; } }
.humain-grille > * { min-width: 0; }
.portrait { position: relative; margin: 0; border-radius: 24px; overflow: hidden; aspect-ratio: 4 / 5; max-height: 600px; box-shadow: 0 40px 70px -36px rgba(11, 36, 71, .6); }
.portrait img { width: 100%; height: 100%; object-fit: cover; }
.portrait figcaption { position: absolute; left: 16px; right: 16px; bottom: 16px; padding: 16px 18px; border-radius: 16px; background: linear-gradient(140deg, rgba(4,25,53,.86), rgba(16,46,81,.8)); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); color: var(--il-cream); font-size: 14px; line-height: 1.5; box-shadow: inset 0 0 0 1px rgba(246,223,179,.25); }
.trio { display: grid; gap: 14px; margin: 30px 0 32px; }
@media (min-width: 640px) { .trio { grid-template-columns: repeat(3, 1fr); } }
.trio .corps { padding: 20px; }
.trio .h3 { font-size: 17px; margin-bottom: 6px; }
.trio p { margin: 0; font-size: 14px; line-height: 1.5; color: #56606F; }
.trio .ico { width: 36px; height: 36px; border-radius: 12px; display: grid; place-items: center; color: var(--il-azur-deep); background: var(--il-brume-clair); box-shadow: inset 0 0 0 1px var(--il-azur-filet); margin-bottom: 12px; }
.trio .ico svg { width: 20px; height: 20px; }


/* ---------- MyClub ---------- */
.offres { display: grid; gap: 18px; max-width: 1000px; margin: 0 auto; }
@media (min-width: 900px) { .offres { grid-template-columns: 1fr 1fr; } }
.offre .corps { padding: 32px; display: grid; gap: 14px; height: 100%; align-content: start; }
.offre ul { list-style: none; padding: 0; margin: 2px 0 6px; display: grid; gap: 10px; }
.offre li { display: grid; grid-template-columns: 22px 1fr; gap: 10px; font-size: 14.5px; line-height: 1.45; }
.offre li svg { width: 18px; height: 18px; margin-top: 2px; }
.offre .btn { justify-self: start; margin-top: 6px; }
.prix { font: 500 42px/1 var(--font-display); }
.prix small { font: 300 14px/1.3 var(--font-sans); margin-left: 6px; }
.offre.gratuit { background: linear-gradient(165deg, #FFFFFF 0%, var(--il-brume-clair) 55%, var(--il-brume) 100%); box-shadow: 0 26px 50px -28px rgba(1,8,20,.85), inset 0 0 0 1px rgba(166,124,78,.3); color: #3B475A; }
.offre.gratuit .h3 { color: var(--il-titre-jour); }
.offre.gratuit .prix { color: var(--il-titre-jour); } .offre.gratuit .prix small { color: #56606F; }
.offre.gratuit li svg { color: var(--il-azur-deep); }
.offre.gratuit .eyebrow { color: var(--il-azur-deep); }
.offre.gratuit::before { background: radial-gradient(300px circle at var(--mx, 50%) var(--my, 0%), rgba(143,185,236,.22), transparent 70%); }
.offre.gratuit::after { background: linear-gradient(100deg, transparent, rgba(255,255,255,.7), transparent); }
.offre.club { background: linear-gradient(var(--il-bg-surface), #0A2546) padding-box, linear-gradient(140deg, var(--il-azur) 0%, rgba(143,185,236,.2) 40%, rgba(246,223,179,.25) 60%, var(--il-gold-light) 100%) border-box; border: 1px solid transparent; box-shadow: 0 30px 60px -30px rgba(1,8,20,.95), 0 0 60px -30px rgba(143,185,236,.5); }
.offre.club .prix { color: var(--il-champagne); } .offre.club .prix small { color: var(--il-text-secondary); }
.offre.club li svg { color: var(--il-gold-light); }
.offre .discret { margin: 0; font-size: 13px; color: var(--il-text-muted); }
.ouverture { display: grid; gap: 4px; padding: 14px 16px; border-radius: 14px; background: linear-gradient(135deg, rgba(221,234,245,.22) 0%, rgba(143,185,236,.11) 55%, rgba(143,185,236,.05) 100%); box-shadow: inset 0 0 0 1px rgba(185,211,244,.46), 0 14px 30px -24px rgba(143,185,236,.6); transition: box-shadow .6s var(--ease); }
@media (hover: hover) { .offre.club:hover .ouverture { box-shadow: inset 0 0 0 1px rgba(185,211,244,.62), 0 0 26px -10px rgba(143,185,236,.5); } }
.ouverture b { font: 500 18px/1.25 var(--font-display); color: var(--il-azur-light); }
.ouverture span { font-size: 13.5px; color: #D6DDE7; }
.club-photo { position: absolute; inset: 0; z-index: -2; opacity: .22; }
.club-photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 40%; }
.club-photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, var(--il-bg-deep) 0%, rgba(4,25,53,.4) 30%, rgba(4,25,53,.6) 70%, var(--il-bg-deep) 100%); }

/* ---------- Confiance ---------- */
.confiance-grille { display: grid; gap: 16px; }
@media (min-width: 720px) { .confiance-grille { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1120px) { .confiance-grille { grid-template-columns: repeat(4, 1fr); } }
.engagement .corps { display: grid; gap: 10px; }
.engagement .ico { width: 44px; height: 44px; border-radius: 14px; display: grid; place-items: center; color: var(--il-azur-deep); background: linear-gradient(160deg, #fff, var(--il-brume)); box-shadow: inset 0 0 0 1px var(--il-azur-filet); }
.engagement .ico svg { width: 22px; height: 22px; }
.engagement .h3 { font-size: 18px; }
.engagement p { margin: 0; font-size: 14px; line-height: 1.55; color: #56606F; }
.ethique { margin-top: 44px; display: grid; gap: 0; border-radius: var(--r-xl); overflow: hidden; background: linear-gradient(120deg, var(--il-bg-deep), var(--il-bg-surface)); box-shadow: 0 30px 60px -32px rgba(11,36,71,.7); }
@media (min-width: 900px) { .ethique { grid-template-columns: 1.1fr repeat(4, 1fr); } }
.ethique > div { padding: 22px 24px; color: var(--il-text-secondary); font-size: 14px; line-height: 1.5; }
.ethique > div + div { border-top: 1px solid rgba(246,223,179,.12); }
@media (min-width: 900px) { .ethique > div + div { border-top: 0; border-left: 1px solid rgba(246,223,179,.12); } }
.ethique .tit { font: 500 20px/1.25 var(--font-display); color: var(--il-champagne); }
.ethique .num { display: block; font: 500 22px/1 var(--font-display); color: var(--il-gold-light); margin-bottom: 8px; }

/* ---------- FAQ ---------- */
.faq { max-width: 880px; margin: 0 auto; display: grid; gap: 12px; }
.faq details { border-radius: 16px; background: linear-gradient(165deg, rgba(22,57,95,.7), rgba(16,46,81,.7)); box-shadow: inset 0 0 0 1px rgba(206,164,129,.24); transition: box-shadow .4s, background-color .4s; }
.faq details:hover, .faq details[open] { box-shadow: inset 0 0 0 1px rgba(246,223,179,.5); }
.faq summary { list-style: none; cursor: pointer; min-height: 62px; padding: 17px 60px 17px 24px; position: relative; font: 500 17.5px/1.35 var(--font-display); color: var(--il-cream); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: ""; position: absolute; right: 24px; top: 50%; width: 10px; height: 10px; border-right: 1.5px solid var(--il-gold-light); border-bottom: 1.5px solid var(--il-gold-light); transform: translateY(-70%) rotate(45deg); transition: transform .45s var(--ease-out); }
.faq details[open] summary::after { transform: translateY(-30%) rotate(-135deg); }
.faq details::details-content { block-size: 0; overflow: hidden; transition: block-size .5s var(--ease-out), content-visibility .5s allow-discrete; }
.faq details[open]::details-content { block-size: auto; }
.faq .rep { padding: 0 24px 22px; font-size: 15px; line-height: 1.66; }
.faq .rep p { margin: 0; }

/* ---------- Final ---------- */
.final { position: relative; isolation: isolate; overflow: hidden; padding: 150px 0 140px; min-height: 620px; display: flex; align-items: center; }
.final > .photo { position: absolute; inset: 0; z-index: -3; }
.final > .photo img { width: 100%; height: 100%; object-fit: cover; object-position: 72% 50%; }
.final .voile { position: absolute; inset: 0; z-index: -2; background: linear-gradient(90deg, rgba(4,25,53,.95) 0%, rgba(4,25,53,.78) 38%, rgba(4,25,53,.12) 72%), linear-gradient(180deg, var(--il-bg-deep) 0%, rgba(4,25,53,0) 24%, rgba(4,25,53,0) 70%, rgba(3,18,40,.9) 100%); }
.final .h2 { font-size: clamp(32px, 4.6vw, 60px); max-width: 15ch; margin: 18px 0 18px; }
.final .signature { margin-top: 30px; }
.final .ambiance { z-index: -1; }
@media (max-width: 767px) {
  .final { padding: 110px 0 96px; min-height: 0; }
  .final > .photo img { object-position: 80% 50%; }
  .final .voile { background: linear-gradient(180deg, var(--il-bg-deep) 0%, rgba(4,25,53,.55) 30%, rgba(4,25,53,.78) 62%, rgba(3,18,40,.95) 100%); }
}

/* ---------- Pied : composants-v42.css (partagé avec toutes les pages) ---------- */
.langs { display: flex; gap: 6px; margin-top: 18px; }
.langs span { height: 44px; min-width: 44px; display: inline-flex; align-items: center; justify-content: center; padding: 0 10px; border-radius: 999px; box-shadow: inset 0 0 0 1px rgba(188,195,207,.2); font: 600 11px/1 var(--font-cond); letter-spacing: .12em; }
.langs span.actif { color: var(--il-champagne); box-shadow: inset 0 0 0 1px rgba(239,203,148,.5); }


/* ==========================================================================
   Mouvement réduit : préférence système OU bascule de revue
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; animation-delay: 0s !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; transition-delay: 0s !important; }
  .particules { display: none; }
  .halo-soleil, .brume-paysage { opacity: 1; animation: none !important; }
}
html.calme *, html.calme *::before, html.calme *::after { animation-duration: .001ms !important; animation-delay: 0s !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; transition-delay: 0s !important; }
html.calme .particules { display: none; }
html.calme .halo-soleil, html.calme .brume-paysage { opacity: 1; animation: none !important; }
html.calme .rv, html.calme .rv-img img { opacity: 1 !important; transform: none !important; }

/* ---------- Ajustements V2 après revue des captures ---------- */
.offre.gratuit .btn-ghost { color: var(--il-titre-jour); background: rgba(255,255,255,.55); box-shadow: inset 0 0 0 1px rgba(11,36,71,.32); backdrop-filter: none; }
.offre.gratuit .btn-ghost:hover { background: #fff; box-shadow: inset 0 0 0 1px var(--il-azur-deep), 0 10px 24px -14px rgba(11,36,71,.4); }
.univers .u-badge { background: rgba(4,25,53,.66); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
#faq.nappe::after { display: none; }
@media (max-width: 1023px) {
  .eveil-gauche { display: contents; }
  .eveil-gauche > .rv:first-child { order: 1; }
  .eveil-grille .scene { order: 2; }
  .eveil-gauche > .etapes { order: 3; margin: 0; }
  .eveil-gauche > .demo-ctrl { order: 4; }
  .eveil-gauche > .note { order: 5; }
  .eveil-grille { gap: 28px; }
}
.promesses ul.rv { transition-duration: 1.1s, 1.2s; }
/* courriel : défilement doux, comme une lecture sur téléphone */
.mail-defile { will-change: transform; }
.ecran.actif .mail-defile { animation: lire-mail 4.2s 2.2s var(--ease) forwards; }
@keyframes lire-mail { to { transform: translate3d(0, var(--dy, 0px), 0); } }
.ecran[data-ecran="3"] { overflow: hidden; }

/* ==========================================================================
   V4 — compléments de l'intégration (au-delà de la maquette V3)
   ========================================================================== */
:root { --font-script: "Allura", "Segoe Script", cursive; --font-titre-app: "Cormorant", "Roboto Serif", Georgia, serif; }
.sr-focus:focus { position: fixed !important; left: 12px; top: 12px; z-index: 100; width: auto; height: auto; clip: auto; padding: 10px 16px; border-radius: 10px; background: var(--il-ivory); color: var(--il-bg-deep); }
.brand img { width: 38px; height: 38px; filter: drop-shadow(0 0 10px rgba(245, 199, 126, .25)); }
@media (max-width: 520px) { .brand img { width: 32px; height: 32px; } }
.script { font-family: var(--font-script); font-weight: 400; letter-spacing: 0; }
.centre { text-align: center; justify-content: center; }
.btns.centre { margin-top: 34px; }
.muted a { color: inherit; }
.clair .muted a { color: var(--il-titre-jour); }

/* sélecteur de langue (câblé par funnel-i18n.js : .lh-lang button) */
.lh-lang { display: inline-flex; gap: 2px; padding: 3px; border-radius: 999px; box-shadow: inset 0 0 0 1px rgba(188, 195, 207, .25); }
.lh-lang button { min-width: 34px; height: 30px; padding: 0 8px; border: 0; border-radius: 999px; background: transparent; color: var(--il-text-secondary); font: 600 11px/1 var(--font-cond); letter-spacing: .14em; cursor: pointer; transition: background-color .3s, color .3s; }
.lh-lang button:hover { color: var(--il-cream); }
.lh-lang button.active { background: rgba(246, 223, 179, .14); color: var(--il-champagne); }

/* bandeau de prévisualisation, avis de langue */

/* ---------- Film officiel + présentation de 20 s ---------- */
/* V4.1 — le film officiel en position principale ; la présentation de 20 s devient un contenu secondaire */
.film-scene { display: grid; gap: 22px; max-width: 1140px; margin: 0 auto; }
.film-principal { max-width: none; width: 100%; border-radius: 26px;
  box-shadow: 0 60px 110px -46px rgba(0, 0, 0, .9), inset 0 0 0 1px rgba(246, 223, 179, .32), 0 0 90px -34px rgba(143, 185, 236, .42); }
.film-principal::before { inset: 12px; border-radius: 18px; }
/* l'affiche porte le nom et la signature du film : le voile ne fonce que le bas, pour la légende */
.film-principal .voile { background: linear-gradient(180deg, rgba(4, 25, 53, 0) 52%, rgba(4, 25, 53, .5) 76%, rgba(4, 25, 53, .9) 100%); }
/* bouton de lecture dans la légende, en bas à gauche : il ne couvre jamais le titre de l'affiche */
.film-principal .film-lire { position: relative; left: auto; top: auto; flex: none; width: 88px; height: 88px; margin: 0;
  background: radial-gradient(circle at 34% 28%, var(--il-ivory), var(--il-champagne) 52%, var(--il-gold-bright) 100%);
  box-shadow: 0 24px 60px -16px rgba(245, 199, 126, .75), 0 0 0 10px rgba(253, 251, 246, .07), inset 0 0 0 1px rgba(255, 255, 255, .7); }
.film-principal .film-lire svg { width: 28px; height: 28px; margin-left: 5px; }
.film-principal .film-lire::before { inset: -10px; box-shadow: inset 0 0 0 1px rgba(246, 223, 179, .6); }
.film-principal .film-lire::after { content: ""; position: absolute; inset: -20px; border-radius: 50%; pointer-events: none; box-shadow: inset 0 0 0 1px rgba(185, 211, 244, .28); transition: transform .9s var(--ease-out), opacity .9s; }
.film-principal:hover .film-lire::after { transform: scale(1.1); opacity: .35; }
.film-principal .film-legende { left: 44px; right: 34px; bottom: 34px; align-items: center; justify-content: flex-start; gap: 30px; }
.film-principal .film-titre { min-width: 0; }
.film-principal .film-duree { margin-left: auto; }
.film-principal.sans-film .film-lire { display: none; }
.film-principal.lecture .film-legende, .film-principal.lecture .voile { visibility: hidden; }
/* lecture : le film garde son format 16:9 dans le cadre (bandes bleu nuit sur téléphone) */
.film-principal .film-video { object-fit: contain; background: var(--il-bg-deep); }
.film-principal .film-video:focus-visible { outline: 2px solid var(--il-champagne); outline-offset: -4px; }
.film-video::cue { font-family: var(--font-sans); font-size: .95em; line-height: 1.35; color: var(--il-ivory); background: rgba(4, 25, 53, .78); }
.film-legende .film-sur { display: block; margin-bottom: 9px; font: 600 10.5px/1 var(--font-cond); letter-spacing: .22em; text-transform: uppercase; color: var(--il-azur-light); }
.film-principal .film-legende b { font-size: clamp(22px, 2.6vw, 34px); }
.film-second { display: grid; gap: 18px; align-items: center; }
@media (min-width: 900px) { .film-second { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 30px; } }
.film-second .pres-carte { width: 100%; margin: 0; grid-template-columns: 150px minmax(0, 1fr); gap: 24px; align-items: center; justify-items: stretch; padding: 14px 22px 14px 14px; border-radius: 22px;
  background: linear-gradient(135deg, rgba(221, 234, 245, .1), var(--il-azur-verre) 60%, rgba(143, 185, 236, .03)); box-shadow: inset 0 0 0 1px var(--il-azur-filet); transition: box-shadow .6s var(--ease), background-color .6s var(--ease); }
.film-second .pres-carte:hover { box-shadow: inset 0 0 0 1px rgba(185, 211, 244, .5), 0 22px 44px -30px rgba(143, 185, 236, .55); }
.film-second .pres-carte .pres-cadre { border-radius: 14px; box-shadow: 0 18px 30px -20px rgba(0, 0, 0, .8), inset 0 0 0 1px rgba(246, 223, 179, .3); }
.film-second .pres-carte .lp-pres-play { width: 52px; height: 52px; margin: -26px 0 0 -26px; }
.film-second .pres-carte .lp-pres-play svg { width: 18px; height: 18px; margin-left: 3px; }
.film-second .pres-carte figcaption { text-align: left; }
.film-second .pres-carte figcaption .eyebrow { justify-content: flex-start; }
.film-second .pres-carte figcaption b { font-size: 19px; }
.film-second .film-meta { margin-top: 0; }
@media (min-width: 900px) { .film-second .film-meta { flex-direction: column; align-items: flex-start; gap: 13px; padding-left: 26px; border-left: 1px solid var(--il-azur-filet); } }
@media (max-width: 767px) {
  .film-principal { border-radius: 18px; }
  .film-principal::before { inset: 8px; border-radius: 12px; }
  .film-principal .film-lire { width: 58px; height: 58px; }
  .film-principal .film-lire svg { width: 20px; height: 20px; margin-left: 3px; }
  .film-principal .film-lire::before { inset: -7px; }
  .film-principal .film-lire::after { inset: -14px; }
  .film-principal .film-legende { left: 24px; right: 18px; bottom: 20px; gap: 20px; }
  .film-legende .film-sur { margin-bottom: 5px; font-size: 9.5px; }
  .film-second .pres-carte { grid-template-columns: 116px minmax(0, 1fr); gap: 16px; padding: 12px 16px 12px 12px; }
  .film-second .pres-carte figcaption b { font-size: 17px; }
}
/* téléphone : une vignette plus haute (4:3), plus immersive ; le film s'y lira en 16:9, bandes comprises */
/* titre du film sous la vignette sur téléphone : dans l'image, il couvrirait la signature de l'affiche */
.film-sous-legende { display: none; }
@media (max-width: 599px) {
  .film-principal { aspect-ratio: 4 / 3; } .film-principal img { object-position: 50% 42%; }
  .film-principal .film-titre { display: none; }
  .film-sous-legende { display: grid; gap: 4px; margin: -6px 0 2px; text-align: center; }
  .film-sous-legende b { font: 500 19px/1.2 var(--font-display); color: var(--il-ivory); }
  .film-sous-legende span { font-size: 13px; color: var(--il-text-secondary); }
}
.film-video { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 6; background: #000; }
.pres-portrait { margin: 0 auto; width: min(270px, 74vw); display: grid; gap: 14px; justify-items: center; }
.pres-cadre { position: relative; width: 100%; aspect-ratio: var(--lp-ratio, .5625); border-radius: 22px; overflow: hidden; background: #071a33; box-shadow: 0 40px 70px -36px rgba(0, 0, 0, .85), inset 0 0 0 1px rgba(246, 223, 179, .3); }
.pres-cadre video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.lp-pres-play { position: absolute; left: 50%; top: 50%; width: 64px; height: 64px; margin: -32px 0 0 -32px; border: 0; border-radius: 50%; cursor: pointer; display: grid; place-items: center; color: var(--il-bg-deep); background: radial-gradient(circle at 35% 30%, var(--il-ivory), var(--il-champagne) 55%, var(--il-gold-bright)); box-shadow: 0 14px 34px -12px rgba(245,199,126,.7); transition: transform .5s var(--ease-out); }
.lp-pres-play svg { width: 22px; height: 22px; margin-left: 3px; }
.lp-pres-play:hover, .lp-pres-play:focus-visible { transform: scale(1.06); }
[data-lp-etat="lecture"] .lp-pres-play { opacity: 0; pointer-events: none; }
.pres-portrait figcaption { text-align: center; }
.pres-portrait figcaption .eyebrow { justify-content: center; margin-bottom: 6px; font-size: 10px; }
.pres-portrait figcaption .eyebrow::before { display: none; }
.pres-portrait figcaption b { display: block; font: 500 17px/1.2 var(--font-display); color: var(--il-cream); }
.pres-portrait figcaption > span:last-child { display: block; margin-top: 4px; }
.pres-portrait figcaption span { font-size: 13px; color: var(--il-text-muted); }

/* ---------- Fond ivoire (espace client) ---------- */
.fond-ivoire { background: radial-gradient(ellipse 70% 50% at 80% 0%, rgba(246, 223, 179, .42), transparent 70%), radial-gradient(ellipse 60% 40% at 8% 100%, rgba(185, 211, 244, .3), transparent 70%), linear-gradient(180deg, var(--il-ivory) 0%, #F6F2EA 60%, var(--il-brume-clair) 100%); }
.fond-ivoire .h2 em, .fond-aube .h2 em { font-style: normal; background: linear-gradient(100deg, var(--il-gold-deep), var(--il-gold) 70%); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* ---------- Praticien Pro : tête et pied de section ---------- */
.pro-tete { max-width: 820px; margin-bottom: 40px; }
.pro-cta-haut { align-items: center; gap: 16px; margin-top: 26px; }
.pro-bas { display: grid; gap: 30px; margin-top: 56px; align-items: start; }
@media (min-width: 1024px) { .pro-bas { grid-template-columns: 1.1fr .9fr; } }
.fonctions { list-style: none; padding: 0; margin: 0; display: grid; gap: 14px; }
.fonctions li { display: grid; grid-template-columns: 34px 1fr; gap: 12px; align-items: start; }
.fonctions svg { width: 22px; height: 22px; color: var(--il-gold-light); margin-top: 2px; }
.fonctions strong { display: block; color: var(--il-cream); font-weight: 500; }
.fonctions span { font-size: 14.5px; color: var(--il-text-secondary); }
.dispo { padding: 16px 18px; border-radius: 14px; background: rgba(227, 183, 116, .08); box-shadow: inset 0 0 0 1px rgba(227, 183, 116, .35); font-size: 14px; line-height: 1.55; color: #E9DCC4; margin: 0 0 26px; }
.dispo b { color: #E3B774; font-weight: 500; }
.btn.desactive, .lien-off { opacity: .55; cursor: not-allowed; }
.btn.desactive:hover { transform: none; }
.btn.desactive::after { display: none; }
.lien-off { color: inherit; }

/* ---------- Beosigner ---------- */
.beo-tete { display: grid; gap: 40px; align-items: center; }
@media (min-width: 1024px) { .beo-tete { grid-template-columns: 1.1fr .9fr; gap: 64px; } }
.beo-sous { margin: 0 0 14px; font: 400 clamp(18px, 1.9vw, 23px)/1.35 var(--font-display); color: var(--il-titre-jour); }
.beo-visuel { position: relative; margin: 0; max-width: 470px; justify-self: center; }
.beo-visuel picture { display: block; border-radius: 28px; overflow: hidden; box-shadow: 0 40px 70px -36px rgba(11, 36, 71, .6), inset 0 0 0 1px rgba(246, 223, 179, .4); }
.beo-visuel img { width: 100%; height: auto; }
.beo-visuel figcaption { position: absolute; right: -6px; top: 22px; transform: rotate(-6deg); font-size: clamp(22px, 2.4vw, 29px); line-height: 1.05; color: var(--il-titre-jour); text-align: right; }
.beo-visuel figcaption svg, .script svg { width: .8em; height: .8em; vertical-align: -.05em; }
@media (max-width: 767px) { .beo-visuel figcaption { position: static; transform: none; margin-top: 14px; text-align: center; } }
.beo-benefices { list-style: none; margin: 64px 0 0; padding: 0; display: grid; gap: 18px; }
/* mobile : deux colonnes dès 360 px — la liste est courte, elle ne doit pas occuper quatre écrans */
@media (min-width: 360px) { .beo-benefices { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 360px) and (max-width: 639px) { .beo-benefices { gap: 22px 8px; margin-top: 44px; } .beo-benefices li { padding: 4px 6px; } .beo-benefices h3 { font-size: 15.5px; overflow-wrap: break-word; } .beo-benefices p { font-size: 13px; line-height: 1.5; } }
@media (min-width: 1120px) { .beo-benefices { grid-template-columns: repeat(4, 1fr); gap: 0; } .beo-benefices li + li { border-left: 1px solid rgba(166, 124, 78, .2); } }
.beo-benefices li { padding: 6px 26px; text-align: center; }
.beo-ico { display: inline-grid; place-items: center; width: 64px; height: 64px; border-radius: 50%; color: var(--il-gold-jour); background: radial-gradient(circle at 35% 30%, #fff, #F6E7CC); box-shadow: inset 0 0 0 1px rgba(166, 124, 78, .32), 0 10px 22px -14px rgba(166, 124, 78, .7); }
.beo-ico svg { width: 30px; height: 30px; }
.beo-benefices h3 { margin: 14px 0 6px; font: 500 19px/1.25 var(--font-display); color: var(--il-titre-jour); }
.beo-benefices p { margin: 0; font-size: 14.5px; color: #3B475A; }
.beo-compare { display: grid; gap: 20px; margin-top: 64px; }
@media (min-width: 1024px) { .beo-compare { grid-template-columns: 1fr 1fr; } }
.beo-sans, .beo-avec { position: relative; overflow: hidden; isolation: isolate; border-radius: 26px; min-height: 330px; display: grid; align-items: end; }
.beo-sans picture, .beo-avec picture { position: absolute; inset: 0; z-index: -2; }
.beo-sans img, .beo-avec img { width: 100%; height: 100%; object-fit: cover; }
.beo-sans img { object-position: 15% 40%; }
.beo-avec img { object-position: 80% 30%; }
.beo-sans::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(253, 251, 246, .35) 0%, rgba(253, 251, 246, .88) 40%, rgba(253, 251, 246, .97) 100%); }
.beo-avec::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(4, 25, 53, .97) 0%, rgba(4, 25, 53, .9) 52%, rgba(4, 25, 53, .35) 100%); }
.beo-sans { box-shadow: inset 0 0 0 1px rgba(166, 124, 78, .25), 0 30px 50px -34px rgba(11, 36, 71, .5); }
.beo-avec { box-shadow: inset 0 0 0 1px rgba(246, 223, 179, .35), 0 30px 50px -30px rgba(4, 25, 53, .8); }
.beo-sans .corps, .beo-avec .corps { padding: 30px 30px 32px; }
.beo-sans .corps { margin-left: auto; max-width: 74%; }
.beo-avec .corps { max-width: 72%; }
.beo-compare h3 { margin: 10px 0 8px; font: 500 clamp(21px, 2vw, 26px)/1.2 var(--font-display); }
.beo-sans h3 { color: var(--il-titre-jour); }
.beo-avec h3 { color: var(--il-champagne); }
.beo-avec .eyebrow { color: var(--il-gold-light); }
.beo-compare p { margin: 0 0 14px; font-size: 14.5px; }
.beo-sans p { color: #3B475A; }
.beo-avec p { color: var(--il-text-secondary); }
.beo-compare ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; font-size: 14px; }
.beo-compare li { display: grid; grid-template-columns: 22px 1fr; gap: 10px; align-items: start; }
.beo-compare li svg { width: 22px; height: 22px; padding: 4px; border-radius: 50%; }
.beo-sans li { color: #3B475A; }
.beo-sans li svg { color: var(--il-gold-jour); box-shadow: inset 0 0 0 1px rgba(166, 124, 78, .45); }
.beo-sans li.moins { color: #5E6876; }
.beo-sans li.moins svg { opacity: .55; }
.beo-avec li { color: #E6EBF2; }
.beo-avec li svg { color: var(--il-bg-deep); background: linear-gradient(180deg, var(--il-champagne), var(--il-gold-bright)); }
.beo-avec .script { position: absolute; right: 26px; top: 26px; transform: rotate(-6deg); font-size: 27px; line-height: 1.05; text-align: right; color: var(--il-ivory); text-shadow: 0 2px 12px rgba(4, 25, 53, .6); }
@media (max-width: 767px) {
  .beo-sans .corps, .beo-avec .corps { max-width: none; padding: 26px 22px; }
  .beo-sans { align-items: end; padding-top: 120px; }
  .beo-sans::before { background: linear-gradient(180deg, rgba(253, 251, 246, .2) 0%, rgba(253, 251, 246, .95) 34%); }
  .beo-avec::before { background: linear-gradient(180deg, rgba(4, 25, 53, .45) 0%, rgba(4, 25, 53, .96) 36%); }
  .beo-avec { padding-top: 130px; }
}
.h2.petit { font-size: clamp(25px, 2.7vw, 34px); }
.clair .h2.petit { color: var(--il-titre-jour); }
.beo-possibles { margin-top: 70px; }
.beo-possibles .tete { margin-bottom: 26px; }
.beo-possibles ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; grid-template-columns: repeat(2, 1fr); }
@media (min-width: 900px) { .beo-possibles ul { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1200px) { .beo-possibles ul { grid-template-columns: repeat(6, 1fr); } }
.beo-possibles li { display: grid; justify-items: center; gap: 8px; padding: 22px 16px; text-align: center; border-radius: 18px; background: linear-gradient(170deg, #FFFDF8, #F7EFE1); box-shadow: inset 0 0 0 1px rgba(166, 124, 78, .2), 0 18px 30px -26px rgba(11, 36, 71, .5); transition: transform .45s var(--ease-out), box-shadow .45s var(--ease-out); }
@media (hover: hover) { .beo-possibles li:hover { transform: translateY(-4px); box-shadow: inset 0 0 0 1px rgba(166, 124, 78, .5), 0 26px 40px -28px rgba(11, 36, 71, .55); } }
.beo-possibles svg { width: 34px; height: 34px; color: var(--il-gold-jour); }
.beo-possibles b { font: 500 16.5px/1.25 var(--font-display); color: var(--il-titre-jour); }
.beo-possibles span { font-size: 13.5px; line-height: 1.45; color: #4A5566; }
.beo-equation { margin-top: 44px; padding: 30px 34px; border-radius: 28px; display: grid; gap: 26px; align-items: center; color: var(--il-text-secondary); background: radial-gradient(ellipse 60% 120% at 100% 0%, rgba(246, 223, 179, .14), transparent 60%), linear-gradient(160deg, #0C2A4F, #061C3A); box-shadow: 0 40px 70px -40px rgba(4, 25, 53, .9), inset 0 0 0 1px rgba(246, 223, 179, .25); }
/* 29/10/2026 (P3) : le schéma « accompagnement + accès + appareil » répétait la comparaison ;
   reste le message, la gamme et la mention « aucun achat ici », sur une colonne */
@media (min-width: 1120px) { .beo-equation { grid-template-columns: 1fr; } }
.beo-equation h3 { margin: 10px 0 8px; font: 500 clamp(21px, 2.1vw, 27px)/1.2 var(--font-display); color: var(--il-champagne); }
.beo-equation p { margin: 0; font-size: 15px; }
.beo-eq { list-style: none; margin: 0; padding: 18px; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px 8px; border-radius: 20px; background: rgba(253, 251, 246, .96); box-shadow: inset 0 0 0 1px rgba(166, 124, 78, .25); }
.beo-eq li { display: grid; justify-items: center; gap: 8px; max-width: 132px; text-align: center; font-size: 12.5px; line-height: 1.35; color: var(--il-titre-jour); }
.beo-eq .beo-ico { width: 52px; height: 52px; }
.beo-eq .beo-ico svg { width: 24px; height: 24px; }
.beo-eq li.op { color: var(--il-gold-jour); }
.beo-eq li.op svg { width: 20px; height: 20px; }
.beo-eq li.resultat { font-weight: 600; }
/* La gamme, en liens HTML descriptifs (maillage des pages produits, 28/10/2026) */
.beo-gamme { grid-column: 1 / -1; margin: 0; font-size: 14.5px; line-height: 2; color: var(--il-text-muted); }
.beo-gamme span { color: inherit; }
.beo-gamme a { color: var(--il-champagne); text-underline-offset: 3px; display: inline-block; min-height: 24px; }
.beo-honnete { grid-column: 1 / -1; font-size: 13.5px !important; color: var(--il-text-muted); }

/* ---------- Demande d'accompagnement (#qualifier) ---------- */
.qual-v4 { margin-top: 80px; display: grid; gap: 34px; align-items: start; scroll-margin-top: calc(var(--header-h) + 20px); }
@media (min-width: 1024px) { .qual-v4 { grid-template-columns: .95fr 1.05fr; gap: 56px; } }
.qual-texte .lead { margin-top: 14px; }
.qual-perks { list-style: none; margin: 22px 0; padding: 0; display: grid; gap: 10px; color: #3B475A; }
.qual-perks li { display: grid; grid-template-columns: 22px 1fr; gap: 10px; }
.qual-perks svg { width: 20px; height: 20px; color: #2F6E53; }
.qual-secu { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 13.5px; color: #4A5566; }
.qual-secu svg { width: 16px; height: 16px; color: var(--il-gold-jour); }
.qual-liens { margin: 14px 0 0; font-size: 14px; color: #4A5566; }
.qual-liens a { color: var(--il-titre-jour); }
.qual-form { padding: 28px; border-radius: 24px; display: grid; gap: 16px; background: linear-gradient(170deg, #FFFFFF, #FBF6EC); box-shadow: 0 34px 60px -36px rgba(11, 36, 71, .55), inset 0 0 0 1px rgba(166, 124, 78, .25); }
.qual-form .field { display: grid; gap: 7px; }
.qual-form .field-row { display: grid; gap: 16px; }
@media (min-width: 560px) { .qual-form .field-row { grid-template-columns: 1fr 1fr; } }
.qual-form label { font: 600 11px/1.2 var(--font-cond); letter-spacing: .16em; text-transform: uppercase; color: var(--il-gold-jour); }
.qual-form input, .qual-form select { width: 100%; min-height: 48px; padding: 0 14px; border-radius: 12px; border: 1px solid rgba(11, 36, 71, .18); background: #fff; font: 400 16px/1.2 var(--font-sans); color: var(--il-titre-jour); transition: border-color .3s, box-shadow .3s; }
.qual-form input:focus, .qual-form select:focus { outline: none; border-color: var(--il-gold-jour); box-shadow: 0 0 0 3px rgba(206, 164, 129, .25); }
.qual-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.qual-chip { min-height: 44px; padding: 0 14px; border-radius: 999px; border: 1px solid rgba(11, 36, 71, .18); background: #fff; color: var(--il-titre-jour); font: 400 14px/1.2 var(--font-sans); cursor: pointer; transition: background-color .3s, border-color .3s, color .3s; }
.qual-chip:hover { border-color: var(--il-gold-jour); }
.qual-chip.on { background: var(--il-titre-jour); border-color: var(--il-titre-jour); color: var(--il-ivory); }
.hp-field { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.qual-envoi { width: 100%; margin-top: 6px; }
.qual-form .form-err { margin: 0; padding: 10px 12px; border-radius: 10px; font-size: 14px; color: #6B2A1E; background: #FBE9E5; box-shadow: inset 0 0 0 1px #E5A797; }
.qual-preview { margin: 0; padding: 10px 12px; border-radius: 10px; font-size: 13.5px; color: #3B475A; background: var(--il-brume-clair); box-shadow: inset 0 0 0 1px rgba(60, 111, 184, .3); }
.qual-preview[hidden] { display: none; }

.beo-visuel figcaption { color: var(--il-ivory); right: 18px; text-shadow: 0 2px 12px rgba(4, 25, 53, .7); }
@media (max-width: 767px) { .beo-visuel figcaption { color: var(--il-titre-jour); text-shadow: none; } }
/* petits écrans : un libellé long passe à la ligne plutôt que de sortir de l'écran */
@media (max-width: 480px) { main .btn { white-space: normal; text-align: center; line-height: 1.25; padding: 12px 22px; } }

/* Recette du 28/10/2026 (tests/i18n-navigateur.test.js) — l'en-tête tenait mal
   à deux largeurs, dans la maquette comme dans le site :
   · sous 375 px, logo + nom + « Commencer » + menu dépassaient de 37 px (FR) :
     le bouton du menu sortait de l'écran. Le nom s'efface, le médaillon reste
     (le lien porte « InfoLumière — accueil ») ;
   · de 1240 à 1379 px, navigation + langue + espace membre + « Commencer
     gratuitement » débordaient de 37 px : le bouton prend sa forme courte. */
/* Lien seul dans son paragraphe (« Lire la politique de confidentialité ») : cible de 16 px → 44 px. */
#confiance .tete .muted a { display: inline-flex; align-items: center; min-height: 44px; }
/* 320 px : un mot long (NL « Ontspanningsruimte », DE « Entspannungsbereich ») se coupe au lieu de déborder */
.outil .h3, .eveil-grille h2 { overflow-wrap: break-word; }
@media (max-width: 380px) { .eveil-grille .btn { white-space: normal; text-align: center; line-height: 1.3; } }
/* deux fonds voisins de même famille (univers → MyClub, Beosigner → Confiance) : un filet champagne marque la bascule */
.section.filet-haut { box-shadow: inset 0 1px 0 rgba(206, 164, 129, .42); } /* pas de pseudo-élément : .nappe utilise déjà ::before et ::after */
/* Accueil — activités énergétiques (30/10/2026), dans la section accompagnement */
.soins-accueil { margin-top: clamp(48px, 6vw, 80px); }
.soins-accueil .h2.petit { margin: 14px 0 12px; }
.soins-accueil .lead { max-width: 720px; }
.soins-accueil .trio { margin-top: 26px; }
.soins-acces { text-decoration: none; color: inherit; display: block; transition: transform .45s var(--ease-out), box-shadow .45s var(--ease-out); }
.soins-acces:hover { transform: translateY(-3px); }
.soins-acces h4 { margin: 12px 0 6px; }
.soins-accueil .soins-note { margin-top: 18px; font-size: 13px; color: #56606F; }