/* ==========================================================================
   Les Règles du Jeu · page de vente.

   Grammaire empruntée aux pages produit d'Apple : la police système (donc
   San Francisco sur un Mac ou un iPhone), une échelle de tailles stricte,
   une colonne étroite et centrée, des tuiles arrondies sur gris très clair,
   une barre translucide, et des arrivées lentes sans rebond.
   ========================================================================== */
:root{
  /* --t va de 0 (jour) à 1 (nuit) au fil du scroll ; --p est la même chose en %.
     Toutes les couleurs sont mélangées à partir de là : la page entière
     glisse du blanc au noir, texte, verre et filets compris. */
  --t:0; --p:0%;
  --encre:color-mix(in oklab,#FFFFFF var(--p),#1D1D1F);
  --gris:color-mix(in srgb,rgba(237,235,245,.74) var(--p),#6E6E73);
  --pale:color-mix(in srgb,rgba(237,235,245,.52) var(--p),#86868B);
  --filet:color-mix(in srgb,rgba(255,255,255,.12) var(--p),#D2D2D7);
  --accent:color-mix(in oklab,#B9A3FF var(--p),#4A1FC4);
  --fond:color-mix(in oklab,#110826 var(--p),#FBFBFC);
  --voile:var(--fond);
  --capsule-1:color-mix(in srgb,rgba(255,255,255,.12) var(--p),rgba(255,255,255,.30));
  --capsule-2:color-mix(in srgb,rgba(255,255,255,.04) var(--p),rgba(255,255,255,.08));
  --verre-1:color-mix(in srgb,rgba(255,255,255,.085) var(--p),rgba(255,255,255,.44));
  --verre-2:color-mix(in srgb,rgba(255,255,255,.05) var(--p),rgba(255,255,255,.22));
  --verre-3:color-mix(in srgb,rgba(255,255,255,.03) var(--p),rgba(255,255,255,.14));
  --verre-bord:color-mix(in srgb,rgba(255,255,255,.13) var(--p),rgba(255,255,255,.55));
  --verre-arete:color-mix(in srgb,rgba(255,255,255,.16) var(--p),rgba(255,255,255,.85));
  --ombre:color-mix(in srgb,rgba(0,0,0,.4) var(--p),rgba(16,15,20,.05));
  --tuile-1:color-mix(in srgb,rgba(255,255,255,.09) var(--p),rgba(255,255,255,.62));
  --tuile-2:color-mix(in srgb,rgba(255,255,255,.04) var(--p),rgba(255,255,255,.40));
  --blanc:#FFFFFF; --surface:#F5F5F7;
  --violet:#4A1FC4; --violet-fonce:#36148F; --bleu:#6A3BFF; --rose:#FF6FB1;
  --police:-apple-system,BlinkMacSystemFont,"SF Pro Display","SF Pro Text","Segoe UI",
    "Helvetica Neue",Helvetica,Arial,sans-serif;
  --lent:cubic-bezier(.28,.11,.32,1);
}
*{box-sizing:border-box;min-width:0}
html{scroll-behavior:smooth;scroll-padding-top:60px;-webkit-text-size-adjust:100%}
html,body{max-width:100%;overflow-x:clip}
/* le fond : une trame de petits + gris, très fins, sur blanc cassé.
   C'est elle qui donne au verre quelque chose à réfracter : sans motif
   derrière, une surface en verre ne se voit pas. */
body{margin:0;background-color:var(--fond);color:var(--encre);font-family:var(--police);
  font-size:17px;line-height:1.47;letter-spacing:-.022em;font-weight:400;
  -webkit-font-smoothing:antialiased;}
.trame{position:fixed;inset:0;z-index:-2;pointer-events:none;opacity:calc(1 - var(--t));
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='44' height='44'%3E%3Cpath d='M22 19.5v5M19.5 22h5' stroke='%23000' stroke-opacity='.07' stroke-width='.8' stroke-linecap='round'/%3E%3C/svg%3E");
  background-size:44px 44px}
/* deux voiles de couleur, fixes et très doux : c'est ce que le verre réfracte */
body::before{content:"";position:fixed;inset:-20%;z-index:-1;pointer-events:none;
  background:
    radial-gradient(46vw 40vw at 14% 10%,rgba(108,63,224,.16),transparent 62%),
    radial-gradient(50vw 40vw at 90% 70%,rgba(58,123,255,.13),transparent 64%)}
/* l'ouverture a son propre ciel, plus intense : c'est lui que le verre réfracte */
.ouverture::before{content:"";position:absolute;left:50%;top:-10%;width:min(1400px,140vw);
  height:120%;transform:translateX(-50%);z-index:-1;pointer-events:none;filter:blur(30px);
  -webkit-mask-image:linear-gradient(180deg,#000 45%,transparent 92%);
  mask-image:linear-gradient(180deg,#000 45%,transparent 92%);
  background:
    radial-gradient(38% 44% at 30% 42%,rgba(108,63,224,.34),transparent 70%),
    radial-gradient(40% 46% at 72% 40%,rgba(58,123,255,.30),transparent 70%),
    radial-gradient(30% 36% at 52% 78%,rgba(124,90,255,.22),transparent 70%)}
.ouverture{position:relative;overflow:hidden;padding-bottom:40px}
img{max-width:100%;display:block;height:auto}

.large{width:min(1020px,calc(100% - 40px));margin-inline:auto}
.etroit{width:min(720px,calc(100% - 40px));margin-inline:auto}

h1,h2,h3{margin:0;font-weight:600;color:var(--encre);line-height:1.05;
  letter-spacing:-.015em}
h1{font-size:clamp(40px,6.2vw,80px);letter-spacing:-.018em}
h2{font-size:clamp(32px,4.6vw,56px)}
h3{font-size:clamp(21px,2.2vw,24px);line-height:1.15}
p{margin:0 0 16px}
a{color:var(--violet);text-decoration:none}
.sous{font-size:clamp(16px,1.75vw,18px);line-height:1.42;color:var(--gris);
  letter-spacing:.004em;font-weight:400}
.oeil{font-size:19px;font-weight:600;color:var(--accent);margin:0 0 8px;
  letter-spacing:-.01em}
.legende{font-size:12px;line-height:1.33;color:var(--pale);letter-spacing:-.01em}
.centre{text-align:center}
section{padding:clamp(12px,1.6vw,20px) 0}
/* chaque section est posée dans un encadré de verre */
.bloc{border-radius:30px;padding:clamp(26px,4vw,52px) clamp(16px,4vw,56px);
  position:relative;isolation:isolate}
.bloc.verre{
  -webkit-backdrop-filter:blur(14px) saturate(190%) brightness(1.03);
  backdrop-filter:blur(3px) url(#lentille-section) saturate(190%) brightness(1.03);
  /* le dégradé interne : plus clair en haut, plus transparent en bas */
  background:linear-gradient(180deg,var(--verre-1) 0%,var(--verre-2) 50%,var(--verre-3) 100%);
  border:1px solid var(--verre-bord);
  box-shadow:inset 0 1px 0 var(--verre-arete),
             inset 0 -1px 0 rgba(16,15,20,.035),
             0 10px 30px rgba(16,15,20,.05)}
.bloc.verre::before{opacity:.45}
.bloc.verre::after{background:radial-gradient(360px 220px at var(--mx,50%) var(--my,50%),
  rgba(255,255,255,.32),rgba(255,255,255,0) 70%)}
@media(max-width:833px){
  .bloc{border-radius:24px;padding:clamp(26px,6vw,40px) clamp(16px,5vw,26px)}
}
.gris{background:transparent}

/* --- la barre : translucide, fine, discrète ------------------------------ */
.barre{position:fixed;top:4px;left:50%;transform:translateX(-50%);z-index:50;
  height:54px;width:min(980px,calc(100% - 24px));border-radius:980px;
  padding:0 8px 0 22px}
.barre .large{height:100%;width:100%;display:flex;align-items:center;
  justify-content:space-between;gap:20px}
.barre .fin{background:linear-gradient(180deg,#8B66FF,var(--violet));color:#fff !important;
  padding:9px 16px;border-radius:980px;font-size:13px;font-weight:500;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.4),0 3px 10px rgba(108,63,224,.2)}
body{padding-top:58px}
.barre .marque{font-size:15px;font-weight:600;color:var(--encre);letter-spacing:-.01em}
.barre nav{display:none;gap:30px}
.barre nav a{font-size:12px;color:var(--encre);opacity:.86;letter-spacing:-.01em}
.barre nav a:hover{opacity:1;color:var(--violet)}
.barre .fin{font-size:13px}


/* ==========================================================================
   Le verre, façon Liquid Glass.

   La différence avec le glassmorphisme habituel : on ne se contente pas de
   flouter le fond, on le RÉFRACTE. Une carte de déplacement (img/verre/*.png)
   encode dans ses canaux rouge et vert de combien pousser chaque pixel du
   fond ; au centre, rien ne bouge, et près du bord le décor se courbe comme
   au bord d'une vraie lentille. S'y ajoutent un liseré spéculaire, une
   lueur qui suit le curseur, et une déformation à l'appui.

   Chrome et Edge appliquent la lentille. Safari et Firefox ne savent pas
   encore passer un filtre SVG en backdrop : ils reçoivent la version floutée,
   déclarée avant, et la page reste correcte.
   ========================================================================== */
.filtres{position:absolute;width:0;height:0;overflow:hidden}
.verre{position:relative;isolation:isolate;
  background:linear-gradient(180deg,var(--capsule-1),var(--capsule-2));
  -webkit-backdrop-filter:blur(10px) saturate(210%) brightness(1.08);
  backdrop-filter:blur(3px) url(#lentille-barre) saturate(210%) brightness(1.08);
  border:1px solid var(--verre-bord);
  /* l'épaisseur : un reflet net sur l'arête haute, une ombre interne en bas,
     et un halo interne blanc qui donne le bombé */
  box-shadow:inset 0 1px 0 rgba(255,255,255,.85),
             inset 0 -2px 6px rgba(20,10,60,.06),
             inset 0 0 10px rgba(255,255,255,.22),
             0 6px 18px rgba(40,30,90,.07)}
/* la traînée spéculaire, fixe, sur le tiers haut : la lumière du studio */
.verre::before{content:"";position:absolute;inset:0;border-radius:inherit;
  pointer-events:none;z-index:1;
  background:linear-gradient(180deg,rgba(255,255,255,.34) 0%,rgba(255,255,255,.07) 38%,
    transparent 60%)}
.verre > *{position:relative;z-index:2}
/* la lueur spéculaire suit le curseur, comme un reflet qui glisse */
.verre::after{content:"";position:absolute;inset:0;border-radius:inherit;
  pointer-events:none;mix-blend-mode:plus-lighter;opacity:0;
  transition:opacity .4s var(--lent);
  background:radial-gradient(160px 90px at var(--mx,50%) var(--my,50%),
    rgba(255,255,255,.55),rgba(255,255,255,0) 72%)}
.verre:hover::after{opacity:1}
.verre.rappel{backdrop-filter:blur(2px) url(#lentille-pilule) saturate(178%) brightness(1.05)}
.verre.boite{backdrop-filter:blur(4px) url(#lentille-boite) saturate(200%) brightness(1.06);
  -webkit-backdrop-filter:blur(16px) saturate(200%) brightness(1.06);
  background:linear-gradient(180deg,rgba(255,255,255,.40),rgba(255,255,255,.20))}
.verre.jouer{backdrop-filter:blur(2px) url(#lentille-rond) saturate(190%) brightness(1.08);
  background:rgba(255,255,255,.30)}
/* le verre se déforme légèrement quand on appuie : c'est le côté « liquide » */
.jouer.verre:active{transform:scale(.985);
  transition:transform .3s cubic-bezier(.2,.9,.2,1.25)}

/* --- la nuit : le blanc glisse vers le noir au milieu de la page ------------ */
.crepuscule,.aube{padding:0;height:clamp(24px,4vw,44px);pointer-events:none}
.nuit{position:relative;overflow:hidden}
.nuit > :not(.lueur-nuit){position:relative;z-index:1}
/* une lueur violette qui glisse en parallaxe derrière chaque chapitre sombre,
   et qui ne s'allume qu'une fois la nuit tombée */
.lueur-nuit{position:absolute;left:50%;top:0;width:min(70vw,760px);height:min(70vw,760px);
  margin-left:calc(min(70vw,760px) / -2);border-radius:50%;pointer-events:none;z-index:0;opacity:var(--t);
  background:radial-gradient(closest-side,rgba(108,63,224,.30),rgba(58,123,255,.10) 55%,transparent 72%)}
.achat-anneaux img{filter:brightness(calc(1 - var(--t) * .12))}
body:not(.debloque) .bouton.verrou{background:linear-gradient(180deg,var(--verre-1),var(--verre-2));
  color:var(--gris);border-color:var(--verre-bord);box-shadow:inset 0 1px 0 var(--verre-arete)}
footer.nuit{padding-top:10px}
.kamil-scene .texte.verre{border-radius:26px;padding:clamp(22px,3vw,36px)}
.fenetre{position:relative;overflow:hidden;border-radius:0}
.fenetre .parallaxe{position:absolute;left:0;right:0;top:-18%;height:136%;
  will-change:transform;transform:translate3d(0,0,0)}
.fenetre .parallaxe img{width:100%;height:100%;object-fit:cover;display:block}
.graine-bande{padding:0}
.graine-bande .fenetre{height:clamp(320px,52vh,560px)}
.graine-bande .fenetre::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,var(--voile) 0%,transparent 26%,transparent 72%,var(--voile) 100%)}
.graine-bande .citation{text-align:center;max-width:16ch;margin:clamp(-40px,-4vw,-24px) auto 0;
  position:relative;padding:0 20px clamp(40px,6vw,80px)}
.kamil-scene figure.fenetre{border-radius:30px}

/* --- les respirations : des bandes pleine largeur, sans encadré ------------ */
.respiration{padding:clamp(22px,3.6vw,48px) 0;position:relative;overflow:hidden}
.respiration .large{display:grid;gap:clamp(24px,4vw,56px);align-items:center}
.respiration figure{margin:0;position:relative}
.respiration img{width:100%;border-radius:28px;display:block;
  box-shadow:0 30px 70px rgba(60,40,120,.14)}
.citation{font-size:clamp(26px,3.6vw,44px);font-weight:600;line-height:1.12;
  letter-spacing:-.025em;color:var(--encre);margin:0}
.citation em{font-style:normal;
  background:linear-gradient(94deg,var(--violet),#5B54F2 50%,var(--bleu));
  -webkit-background-clip:text;background-clip:text;color:transparent}
.respiration .qui{margin:14px 0 0;font-size:clamp(12.5px,3.3vw,15px);color:var(--gris);white-space:nowrap}
.flotte{animation:flotte 9s ease-in-out infinite}
@keyframes flotte{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-12px) rotate(-1.2deg)}}

/* la graine : l'image couvre, le texte se pose dessus dans une bulle de verre */
.graine{position:relative;border-radius:34px;overflow:hidden;min-height:clamp(380px,50vw,560px);
  display:flex;align-items:flex-end;padding:clamp(18px,3vw,32px)}
.graine img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.graine .bulle{position:relative;max-width:520px;border-radius:24px;padding:clamp(20px,3vw,30px)}
.graine .bulle h2{font-size:clamp(26px,3.4vw,40px)}
.graine .bulle p{margin:10px 0 0;color:var(--gris)}

/* l'exercice : plus d'encadré, une tuile violette qui tranche */
.atelier.verre{background:linear-gradient(160deg,rgba(124,90,255,.16),rgba(58,123,255,.10) 60%,
  rgba(255,111,177,.10));border:1px solid rgba(255,255,255,.7);
  backdrop-filter:blur(3px) url(#lentille-section) saturate(190%) brightness(1.03);
  -webkit-backdrop-filter:blur(14px) saturate(190%) brightness(1.03)}

/* Kamil : la photo prend la largeur, le texte se pose dessus */
.kamil-scene{display:grid;gap:clamp(22px,4vw,56px);align-items:center}
.kamil-scene figure{margin:0;border-radius:30px;overflow:hidden;aspect-ratio:4/5;
  box-shadow:0 30px 70px rgba(60,40,120,.14)}
.kamil-scene img{width:100%;height:100%;object-fit:cover;object-position:center 15%}
.kamil-scene .texte p{margin:12px 0 0;font-size:16.5px;color:var(--gris)}
.kamil-scene .texte h2{margin-top:6px}

/* le bloc d'achat : les anneaux en filigrane */
.achat{display:grid;gap:clamp(20px,3vw,40px);align-items:center}
.achat-anneaux{margin:0;display:none}
.achat-anneaux img{width:100%;display:block;
  -webkit-mask-image:radial-gradient(closest-side,#000 52%,transparent 100%);
  mask-image:radial-gradient(closest-side,#000 52%,transparent 100%)}

/* le bouton qui attend la fin de la vidéo */
body:not(.debloque) .rappel{display:none !important}
body:not(.debloque) .bouton.verrou{
  color:var(--gris);cursor:not-allowed;
  background:linear-gradient(180deg,rgba(255,255,255,.62),rgba(255,255,255,.34));
  border:1px solid rgba(255,255,255,.7);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9),inset 0 -1px 0 rgba(16,15,20,.05),
             0 4px 12px rgba(40,30,90,.06)}
body:not(.debloque) .bouton.verrou::before{display:none}
body:not(.debloque) .bouton.verrou:hover{transform:none}
body:not(.debloque) .fin.verrou{background:rgba(255,255,255,.5) !important;color:var(--gris) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9) !important;cursor:not-allowed}
.cadenas{width:15px;height:15px;margin-right:9px;flex:none;display:none}
body:not(.debloque) .verrou .cadenas{display:inline-block}
.fin .cadenas{width:12px;height:12px;margin-right:6px}
.verrou.secoue{animation:secoue .5s var(--lent)}
@keyframes secoue{0%,100%{transform:translateX(0)}25%{transform:translateX(-5px)}75%{transform:translateX(5px)}}
.attente-video{margin:14px 0 0;display:flex;align-items:center;justify-content:center;gap:12px;
  font-size:13px;color:var(--gris)}
.attente-video .jauge{width:120px;height:4px;border-radius:4px;background:var(--filet);
  overflow:hidden}
.attente-video .jauge i{display:block;height:100%;width:0;border-radius:4px;
  background:linear-gradient(90deg,var(--violet),var(--bleu))}

@media(min-width:834px){
  .respiration .large{grid-template-columns:minmax(0,.9fr) minmax(0,1fr)}
  .respiration.inverse .large{grid-template-columns:minmax(0,1fr) minmax(0,.9fr)}
  .respiration.inverse figure{order:2}
  .kamil-scene{grid-template-columns:.8fr 1.2fr}
  .achat{grid-template-columns:1.05fr .95fr}
  .achat-anneaux{display:block}
}

/* --- boutons et liens ---------------------------------------------------- */
.bouton{display:inline-flex;align-items:center;justify-content:center;
  font-family:inherit;font-size:17px;font-weight:500;letter-spacing:-.022em;
  color:#fff;border:1px solid rgba(255,255,255,.38);border-radius:980px;
  padding:14px 28px;cursor:pointer;position:relative;isolation:isolate;
  background:linear-gradient(180deg,#8F6BFF 0%,var(--violet) 55%,#5A2FC8 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.5),
             inset 0 -2px 6px rgba(30,10,90,.28),
             0 6px 14px rgba(108,63,224,.20);
  transition:transform .25s cubic-bezier(.2,.9,.2,1.25),box-shadow .25s var(--lent)}
.bouton::before{content:"";position:absolute;inset:0;border-radius:inherit;z-index:-1;
  background:linear-gradient(180deg,rgba(255,255,255,.42),transparent 55%)}
.bouton:hover{transform:translateY(-1px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.55),inset 0 -2px 6px rgba(30,10,90,.28),
             0 10px 22px rgba(108,63,224,.26)}
.bouton:active{transform:scale(.97)}
.bouton:focus-visible{outline:3px solid rgba(108,63,224,.4);outline-offset:2px}
.bouton.clair{background:var(--surface);color:var(--encre)}
.bouton.clair:hover{background:#EBEBED}
.lien{display:inline-flex;align-items:center;gap:4px;font-size:17px;color:var(--violet)}
.lien::after{content:"›";font-size:19px;line-height:1;transform:translateY(-1px);
  transition:transform .2s var(--lent)}
.lien:hover::after{transform:translate(2px,-1px)}
.appel{display:flex;flex-wrap:wrap;gap:14px 26px;justify-content:center;
  align-items:center;margin-top:26px}

/* --- l'ouverture --------------------------------------------------------- */
.ouverture{padding-top:clamp(56px,8vw,96px);padding-bottom:clamp(24px,4vw,56px);text-align:center}
/* le titre vit sur le fond, pas dans un cadre */
.ouverture .large{padding:0}
.ouverture h1{max-width:16ch;margin:6px auto 0;
  background:linear-gradient(94deg,var(--violet) 0%,#5B54F2 50%,var(--bleu) 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  padding-bottom:.08em}
.ouverture .sous{max-width:40ch;margin:16px auto 0}

/* le lecteur : une grande tuile arrondie, ombre très douce */
.film{margin:clamp(28px,4vw,44px) auto 0;border-radius:24px;position:relative;
  aspect-ratio:16/9;box-shadow:0 30px 70px rgba(20,10,60,.16)}
.film .ecran{position:absolute;inset:0;border-radius:24px;overflow:hidden;background:#000}
.film video{width:100%;height:100%;object-fit:cover;display:block;background:#000}
.film.lit .jouer,.film.lit .duree{opacity:0;pointer-events:none;transition:opacity .3s}
.film iframe,.film video{position:absolute;inset:0;width:100%;height:100%;border:0}
.film .jouer{position:absolute;inset:0;margin:auto;width:76px;height:76px;
  border-radius:50%;border:0;cursor:pointer;
  display:grid;place-items:center;transition:transform .25s var(--lent)}
.film:hover .jouer{transform:scale(1.06);background:rgba(255,255,255,.4)}
.film .jouer i{width:0;height:0;margin-left:5px;border-left:18px solid #fff;
  border-top:11px solid transparent;border-bottom:11px solid transparent;display:block}
.film .duree{position:absolute;left:18px;bottom:18px;font-size:12px;color:#fff;
  background:rgba(0,0,0,.35);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  padding:6px 12px;border-radius:980px}

/* --- les tuiles ---------------------------------------------------------- */
.tuiles{display:grid;gap:12px;margin-top:clamp(28px,4vw,44px)}
.tuile{background:linear-gradient(176deg,var(--tuile-1),var(--tuile-2));border-radius:16px;padding:24px 22px;
  transition:transform .4s var(--lent)}
.tuile:hover{transform:translateY(-3px)}
.tuile.claire{background:linear-gradient(176deg,var(--tuile-1),var(--tuile-2));
  border:1px solid rgba(255,255,255,.8);box-shadow:0 4px 14px rgba(16,15,20,.05)}
.tuile .oeil{font-size:15px;margin-bottom:6px}
.tuile p{margin:10px 0 0;color:var(--gris);font-size:16px;line-height:1.45}
.tuile img{border-radius:12px;margin-top:18px;border:1px solid rgba(0,0,0,.06)}
.tuile .pied{margin-top:14px;font-size:12px;color:var(--pale)}

/* --- les chiffres, à la manière des caractéristiques ---------------------- */
.specs{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--filet);
  border-radius:20px;overflow:hidden;margin-top:clamp(28px,4vw,44px)}
.specs div{background:linear-gradient(176deg,var(--tuile-1),var(--tuile-2));
  padding:26px 18px;text-align:center}
.specs strong{display:block;font-size:clamp(32px,4vw,44px);font-weight:600;
  letter-spacing:-.02em;line-height:1}
.specs span{display:block;margin-top:6px;font-size:13px;color:var(--gris)}

/* --- listes -------------------------------------------------------------- */
.liste{list-style:none;margin:18px 0 0;padding:0}
.liste li{position:relative;padding:14px 0 14px 30px;border-top:1px solid var(--filet);
  font-size:17px;line-height:1.45}
.liste li:first-child{border-top:0}
.liste li::before{content:"";position:absolute;left:2px;top:22px;width:8px;height:8px;
  border-radius:50%;background:var(--violet)}
.liste.sobre li::before{background:var(--filet)}
.liste.sobre li{color:var(--gris)}

/* --- l'exercice ---------------------------------------------------------- */
.atelier{background:linear-gradient(176deg,rgba(255,255,255,.58),rgba(255,255,255,.38));
  border-radius:22px;padding:clamp(22px,3vw,34px);
  display:grid;gap:clamp(22px,3vw,42px);align-items:center;margin-top:clamp(26px,4vw,42px);
  border:1px solid var(--filet)}
.atelier svg{width:100%;max-width:330px;margin-inline:auto;display:block;overflow:visible}
.anneau,.axe{fill:none;stroke:var(--filet);stroke-width:1}
.forme{fill:rgba(108,63,224,.12);stroke:var(--violet);stroke-width:1.6;transition:d .3s var(--lent)}
.pt{fill:var(--violet)}
.nom{font-size:10px;fill:var(--pale);letter-spacing:-.01em}
.curseurs{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.curseurs li{display:grid;grid-template-columns:76px minmax(0,1fr) 26px;gap:14px;
  align-items:center}
.curseurs label{font-size:13px;color:var(--gris)}
.curseurs input{width:100%;accent-color:var(--violet);cursor:pointer}
.curseurs .v{font-size:16px;font-weight:600;text-align:right}
.reponse{margin:18px 0 0;font-size:17px;color:var(--encre);min-height:3em}

/* --- Kamil --------------------------------------------------------------- */
.portrait{display:grid;gap:clamp(22px,3vw,44px);align-items:center}
.portrait figure{margin:0;border-radius:14px;overflow:hidden}
.portrait img{width:100%;aspect-ratio:1;object-fit:cover;object-position:center 14%}

/* --- questions ----------------------------------------------------------- */
.questions{margin-top:clamp(24px,3vw,38px);border-top:1px solid var(--filet)}
details{border-bottom:1px solid var(--filet);overflow:hidden}
summary{list-style:none;cursor:pointer;padding:20px 34px 20px 0;position:relative;
  font-size:17px;font-weight:600;letter-spacing:-.01em}
summary::-webkit-details-marker{display:none}
summary::after{content:"+";position:absolute;right:4px;top:18px;font-size:22px;
  font-weight:300;color:var(--accent);transition:transform .45s var(--lent)}
details[open] summary::after{transform:rotate(45deg)}
details p{margin:0 0 20px;color:var(--gris);max-width:62ch}

/* --- l'achat ------------------------------------------------------------- */
.achat{background:transparent;
  border-radius:26px;padding:clamp(6px,2vw,20px);
  text-align:center;border:0}
.achat .liste{max-width:640px;margin-inline:auto;text-align:left}
@media(min-width:834px){
  .achat{text-align:left}
  .achat .liste,.achat .sous{margin-inline:0}
  .achat .appel{justify-content:flex-start}
}

/* --- le pied ------------------------------------------------------------- */
footer{background:transparent;padding:34px 0 46px;font-size:12px;line-height:1.5;
  color:var(--pale);letter-spacing:-.01em}
footer .large{display:grid;gap:14px}
footer a{color:var(--gris)}
footer .liens{display:flex;flex-wrap:wrap;gap:18px}
footer .trait{height:1px;background:var(--filet)}

/* --- la barre d'achat, en bas ------------------------------------------- */
.rappel{position:fixed;left:50%;bottom:14px;z-index:45;
  width:auto;max-width:calc(100% - 24px);border-radius:980px;padding:6px 6px 6px 16px;
  transform:translate(-50%,160%);transition:transform .5s var(--lent)}
.rappel.visible{transform:translate(-50%,0)}
.rappel .dedans{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:nowrap}
.rappel p{margin:0;font-size:12px;color:var(--gris);white-space:nowrap}
.rappel .bouton{padding:7px 14px;font-size:13px;white-space:nowrap}

/* --- le formulaire ------------------------------------------------------- */
dialog{border:0;padding:0;background:transparent;max-width:100%;max-height:100%}
dialog::backdrop{background:rgba(20,10,60,.22);-webkit-backdrop-filter:blur(3px);
  backdrop-filter:blur(3px)}
.boite{width:min(520px,calc(100vw - 24px));max-height:92vh;overflow:auto;
  border-radius:24px;padding:clamp(26px,4vw,40px);position:relative}
.boite h2{font-size:clamp(26px,4vw,34px)}
.boite .sous{font-size:17px;margin:8px 0 24px}
.fermer{position:absolute;top:16px;right:16px;width:30px;height:30px;border:0;
  border-radius:50%;background:var(--surface);color:var(--gris);font-size:17px;cursor:pointer}
.champ{margin-bottom:12px}
.champ label{display:block;font-size:12px;color:var(--gris);margin-bottom:6px}
.champ input{width:100%;font-family:inherit;font-size:17px;color:var(--encre);
  background:rgba(255,255,255,.55);border:1px solid rgba(255,255,255,.7);border-radius:12px;
  padding:13px 14px;letter-spacing:-.022em}
.champ input:focus{outline:0;border-color:var(--violet);background:var(--blanc)}
.erreur{color:#B3261E;font-size:14px;margin:0 0 12px;display:none}
.erreur.visible{display:block}
.formules{list-style:none;margin:0 0 16px;padding:0;display:grid;gap:8px}
.formule{display:flex;align-items:center;gap:14px;border:1px solid var(--filet);
  border-radius:14px;padding:14px 16px;cursor:pointer}
.formule input{accent-color:var(--violet);width:18px;height:18px;flex:none}
.formule .f-mt{margin-left:auto;font-weight:600}
.formule:has(input:checked){border-color:var(--violet);
  box-shadow:0 0 0 3px rgba(108,63,224,.14)}
.total{display:flex;justify-content:space-between;align-items:baseline;gap:16px;
  padding-top:14px;border-top:1px solid var(--filet);font-size:13px;color:var(--gris)}
.total strong{font-size:30px;font-weight:600;color:var(--encre);letter-spacing:-.02em}
.detail{font-size:14px;color:var(--gris);margin:6px 0 0}
.boite .bouton{width:100%;margin-top:18px}
.attendre{font-size:14px;color:var(--gris);margin:14px 0 0}
.retour{background:none;border:0;font-size:14px;color:var(--violet);cursor:pointer;
  padding:16px 0 0;font-family:inherit}
[hidden]{display:none !important}

/* --- les arrivées : lentes, sans rebond ---------------------------------- */
.pose > *{opacity:0;transform:translateY(10px)}
.pose.vue > *{opacity:1;transform:none;
  transition:opacity .7s var(--lent),transform .7s var(--lent)}
.pose.vue > *:nth-child(2){transition-delay:.06s}
.pose.vue > *:nth-child(3){transition-delay:.12s}
.pose.vue > *:nth-child(n+4){transition-delay:.18s}

@media(min-width:834px){
  .barre nav{display:flex}
  .tuiles{grid-template-columns:repeat(2,minmax(0,1fr))}
  .tuiles .large-tuile{grid-column:1/-1}
  .specs{grid-template-columns:repeat(4,1fr)}
  .atelier{grid-template-columns:minmax(0,.8fr) minmax(0,1fr)}
  .portrait{grid-template-columns:minmax(0,.8fr) minmax(0,1fr)}
  .deux-listes{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:40px}
}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before{transition:none!important;animation:none!important}
  .pose > *{opacity:1;transform:none}
}

/* --- une seule page : la VSL d'abord, la suite après ------------------------- */
.vsl-page{min-height:calc(100svh - 64px);display:flex;flex-direction:column;justify-content:center}
.vsl-page h1{max-width:14ch}
.mots{position:absolute;inset:0;pointer-events:none;z-index:0}
.mots span{position:absolute;font-size:11px;font-weight:500;letter-spacing:.18em;
  text-transform:uppercase;color:var(--gris);opacity:.55;white-space:nowrap;
  animation:derive 14s ease-in-out infinite alternate}
.mots span:nth-child(2n){animation-duration:17s;animation-delay:-6s}
.mots span:nth-child(3n){animation-duration:21s;animation-delay:-11s}
@keyframes derive{from{translate:0 0}to{translate:6px -10px}}
.ouverture .large{position:relative;z-index:1}
@media(max-width:833px){
  .mots{position:static;order:2;display:flex;flex-wrap:wrap;justify-content:center;
    gap:8px 16px;padding:26px 20px 6px}
  .mots span{position:static !important;transform:none !important;font-size:9.5px;
    letter-spacing:.14em;animation:none}
}
.suite-ouverture{padding-top:clamp(12px,2.6vw,32px)}
.suite-ouverture .degrade{font-size:clamp(34px,5.4vw,66px);letter-spacing:-.03em;
  background:linear-gradient(94deg,var(--violet) 0%,#5B54F2 50%,var(--bleu) 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;padding-bottom:.08em}
body:not(.debloque) .barre nav{display:none}

/* --- l'ouverture, soignée : la pastille, le titre sur deux lignes, le bouton ---- */
.vsl-page .oeil.pastille{display:inline-flex;align-items:center;gap:9px;
  font-size:12px;font-weight:600;letter-spacing:.07em;text-transform:uppercase;color:var(--accent);
  padding:8px 15px 8px 12px;border-radius:980px;margin:0 0 20px;
  background:linear-gradient(180deg,var(--capsule-1),var(--capsule-2));
  border:1px solid var(--verre-bord);box-shadow:inset 0 1px 0 var(--verre-arete),0 4px 14px var(--ombre)}
.pastille i{width:7px;height:7px;border-radius:50%;background:var(--violet);flex:none;
  animation:pouls 2.4s ease-out infinite}
@keyframes pouls{0%{box-shadow:0 0 0 0 rgba(108,63,224,.45)}70%{box-shadow:0 0 0 9px rgba(108,63,224,0)}
  100%{box-shadow:0 0 0 0 rgba(108,63,224,0)}}
.vsl-page h1{max-width:none;font-weight:700;letter-spacing:-.042em;line-height:.98;margin-top:0}
.vsl-page h1 span{display:inline-block}
.vsl-page .sous{max-width:34ch;font-size:19px;margin-top:18px}
.vsl-page .film{box-shadow:0 34px 80px rgba(60,40,140,.20),0 0 0 1px rgba(255,255,255,.45)}
.vsl-page .film .jouer{width:84px;height:84px}
/* le bouton verrouillé : une capsule de verre, le cadenas dans une pastille violette */
.vsl-page .bouton.verrou{padding:14px 30px 14px 16px;font-size:17px;gap:12px;overflow:hidden}
.vsl-page .bouton.verrou .cadenas{width:28px;height:28px;padding:7px;margin:0;border-radius:50%;
  background:rgba(108,63,224,.14);color:var(--violet)}
body.debloque .vsl-page .bouton.verrou{padding:15px 34px;animation:pop .7s cubic-bezier(.2,.9,.2,1.25)}
body.debloque .vsl-page .bouton.verrou::after{content:"";position:absolute;top:-40%;bottom:-40%;
  width:36%;left:-60%;transform:skewX(-18deg);pointer-events:none;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.6),transparent);
  animation:brille 1.3s .35s ease-out 1 forwards}
@keyframes brille{to{left:150%}}
@keyframes pop{0%{transform:scale(.94)}55%{transform:scale(1.05)}100%{transform:scale(1)}}
.vsl-page .attente-video{font-size:12.5px;font-variant-numeric:tabular-nums;gap:14px;margin-top:16px}
.vsl-page .attente-video .jauge{width:min(200px,44vw);height:5px}
@media(max-width:833px){
  .vsl-page .oeil.pastille{text-transform:none;letter-spacing:-.01em;font-size:13px;
    padding:7px 14px 7px 11px;margin-bottom:16px}
}

/* --- l'ouverture, épurée : le titre, la vidéo, le bouton, rien d'autre ---------- */
.vsl-page{min-height:0;justify-content:flex-start;padding-top:clamp(14px,3vw,40px);padding-bottom:clamp(40px,8vw,90px)}
.vsl-page h1{display:flex;flex-direction:column;align-items:center;gap:.05em;margin:0 auto}
.vsl-page h1 .grand{font-size:clamp(66px,14vw,124px);font-weight:700;letter-spacing:-.05em;line-height:.95}
.vsl-page h1 .petit{font-size:clamp(21px,4.6vw,38px);font-weight:600;letter-spacing:-.03em;line-height:1.1;
  background:none;-webkit-text-fill-color:var(--encre);color:var(--encre)}
.vsl-page .sous{font-size:15.5px;max-width:40ch;margin-top:12px;color:var(--pale)}
.vsl-page .film{margin-top:clamp(22px,3.4vw,36px)}
/* la barre d'avancement vit dans la vidéo, fine, impossible à saisir */
.film .avancement{position:absolute;left:0;right:0;bottom:0;height:4px;z-index:3;pointer-events:none;
  background:rgba(255,255,255,.22)}
.film .avancement i{display:block;height:100%;width:0;
  background:linear-gradient(90deg,var(--violet),var(--bleu))}
/* le bouton lecture bat doucement pour appeler le doigt */
.vsl-page .film .jouer{animation:battement 2.2s ease-in-out infinite}
@keyframes battement{0%,100%{transform:scale(1);box-shadow:0 0 0 0 rgba(255,255,255,.35)}
  50%{transform:scale(1.06);box-shadow:0 0 0 16px rgba(255,255,255,0)}}
.film.lit .jouer{animation:none !important}
.vsl-page .legende{font-size:11.5px}
.vsl-page .appel{margin-top:18px !important}

/* --- l'ouverture, encore : plus d'air, et le bouton qui se remplit avec la vidéo --- */
.vsl-page{padding-top:clamp(44px,8vw,96px);padding-bottom:clamp(60px,12vw,140px)}
.vsl-page .legende{margin-top:16px !important}
.vsl-page .appel{margin-top:30px !important}
.vsl-page .film .jouer{width:80px;height:80px}
.remplissable{--avance:0%;position:relative}
.remplissable .remplissage{position:absolute;inset:0;display:inline-flex;align-items:center;
  justify-content:center;padding:inherit;border-radius:inherit;color:#fff;white-space:nowrap;
  background:linear-gradient(180deg,#8F6BFF 0%,var(--violet) 55%,#5A2FC8 100%);
  clip-path:inset(0 calc(100% - var(--avance)) 0 0);transition:clip-path .5s linear}
body:not(.debloque) .vsl-page .bouton.verrou{padding:15px 34px;gap:0}
body.debloque .remplissable .remplissage{clip-path:inset(0 0 0 0)}

/* --- retours : moins d'air, Kamil dans un rond, le prix sur la page ------------ */
body.debloque .vsl-page{padding-bottom:clamp(14px,2.6vw,28px)}
.suite-ouverture .sous{font-size:16px}
.kamil-scene figure,.kamil-scene figure.fenetre{aspect-ratio:1;border-radius:50%;
  width:min(340px,78vw);margin-inline:auto}
.kamil-scene img{object-position:center 10%}
.achat,.achat.achat{display:block;text-align:center}
.achat .liste,.achat .sous{margin-inline:auto}
.tarifs{display:grid;gap:12px;margin-top:clamp(22px,3vw,34px)}
.tarif{font-family:inherit;text-align:left;cursor:pointer;display:grid;gap:4px;padding:18px 20px;
  border-radius:20px;color:var(--encre);
  background:linear-gradient(180deg,var(--verre-1),var(--verre-2));border:1px solid var(--verre-bord);
  box-shadow:inset 0 1px 0 var(--verre-arete);transition:transform .3s var(--lent),border-color .3s}
.tarif:hover{transform:translateY(-3px);border-color:var(--violet)}
.tarif .t-nom{font-size:12px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:var(--accent)}
.tarif strong{font-size:clamp(26px,3vw,34px);font-weight:700;letter-spacing:-.03em;line-height:1.05;margin-top:2px}
.tarif .t-det{font-size:13px;color:var(--pale)}
.tarif .t-cta{margin-top:12px;justify-self:start;padding:9px 16px;border-radius:980px;font-size:14px;
  font-weight:500;color:#fff;background:linear-gradient(180deg,#8F6BFF,var(--violet) 55%,#5A2FC8);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.4),0 4px 12px rgba(108,63,224,.22)}
@media(min-width:834px){.tarifs{grid-template-columns:repeat(3,1fr)}}

/* --- moins « produit », plus humain ---------------------------------------- */
.oeil{font-size:12.5px;letter-spacing:.14em;text-transform:uppercase;font-weight:600}
.chiffres{margin:18px auto 0;font-size:14px;letter-spacing:.04em;color:var(--pale)}
.parties{list-style:none;margin:clamp(26px,4vw,40px) auto 0;padding:0;max-width:760px;text-align:left}
.parties li{display:grid;grid-template-columns:56px 1fr;gap:16px;padding:22px 0;border-top:1px solid var(--filet)}
.parties .num{font-size:22px;font-weight:600;color:var(--accent);letter-spacing:.02em;line-height:1.15}
.parties h3{font-size:22px;letter-spacing:-.02em}
.parties p{margin:8px 0 0;color:var(--gris);font-size:16px;line-height:1.5}
.parties .pied{margin-top:8px;font-size:12.5px;color:var(--pale);letter-spacing:.04em}
.plans{margin:clamp(22px,3vw,34px) auto 0;max-width:640px;text-align:left;border-top:1px solid var(--filet)}
.plan{font-family:inherit;cursor:pointer;width:100%;display:grid;grid-template-columns:1fr auto;
  grid-template-areas:"nom cta" "prix cta" "det cta";align-items:center;column-gap:16px;
  padding:18px 4px;background:none;border:0;border-bottom:1px solid var(--filet);color:var(--encre);
  text-align:left;transition:background .3s}
.plan:hover{background:color-mix(in srgb,var(--violet) 6%,transparent)}
.plan .p-nom{grid-area:nom;font-size:12px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--accent)}
.plan strong{grid-area:prix;font-size:clamp(24px,2.6vw,30px);font-weight:600;letter-spacing:-.02em;line-height:1.1;margin-top:4px}
.plan .p-det{grid-area:det;font-size:13px;color:var(--pale);margin-top:2px}
.plan .p-cta{grid-area:cta;padding:11px 18px;border-radius:980px;font-size:14px;font-weight:500;color:#fff;
  background:linear-gradient(180deg,#8F6BFF,var(--violet) 55%,#5A2FC8);white-space:nowrap;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.4),0 4px 12px rgba(108,63,224,.22)}
.mains-bande{padding:0}
.mains-bande .fenetre{height:clamp(300px,50vh,540px)}
.mains-bande img{filter:grayscale(1) contrast(1.05)}
.mains-bande .fenetre::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:rgba(108,63,224,.55);mix-blend-mode:multiply}
.mains-bande .fenetre::after{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;
  background:linear-gradient(180deg,var(--voile) 0%,transparent 30%,transparent 70%,var(--voile) 100%)}

/* ==========================================================================
   Angles droits, violet franc, moins d'écran.
   Plus un seul coin arrondi (sauf le rond de Kamil et le bouton lecture),
   plus de verre, plus de dégradés dans les titres : de l'encre violette, des
   filets, une bande violette pleine, et un fil qui relie les chapitres.
   ========================================================================== */
.bloc,.bloc.verre,.film,.film .ecran,.bouton,.remplissable .remplissage,.barre,.barre .fin,
.plan .p-cta,.respiration img,.kamil-scene .texte.verre,.boite.verre,.boite input,.champ input,
.formule,.tarif,.lien,.suite,.suite li,.atelier{border-radius:0 !important}
.bloc.verre,.kamil-scene .texte.verre,.boite.verre{
  -webkit-backdrop-filter:none !important;backdrop-filter:none !important;
  background:transparent !important;box-shadow:none !important;
  border:1px solid color-mix(in srgb,var(--accent) 35%,var(--filet)) !important}
.bloc.verre::before,.bloc.verre::after,.verre::before,.verre::after{display:none !important}
.jouer.verre::before,.jouer.verre::after{display:block !important}
.boite.verre{background:var(--fond) !important}

/* la barre : une ligne en haut, pleine largeur */
.barre{top:0;width:100%;height:56px;padding:0 clamp(16px,3vw,32px);
  -webkit-backdrop-filter:none !important;backdrop-filter:none !important;
  background:color-mix(in srgb,var(--fond) 88%,transparent) !important;
  border:0 !important;border-bottom:1px solid var(--filet) !important;box-shadow:none !important}
.barre .fin{background:var(--violet) !important;box-shadow:none !important;padding:10px 18px;
  font-size:12px;letter-spacing:.08em;text-transform:uppercase}
body:not(.debloque) .fin.verrou{background:transparent !important;border:1px solid var(--filet) !important}
body{padding-top:56px}

/* les titres : de l'encre violette, pas de dégradé */
.ouverture h1,.suite-ouverture .degrade,.vsl-page h1 .grand{
  background:none !important;-webkit-text-fill-color:var(--violet);color:var(--violet)}
.vsl-page h1 .grand{-webkit-text-fill-color:var(--violet);color:var(--violet);font-weight:700;letter-spacing:-.05em}
.citation em{background:none;-webkit-text-fill-color:currentColor;color:currentColor;font-weight:400;
  text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.14em;
  text-decoration-color:rgba(255,255,255,.55)}
.ouverture::before{background:
  radial-gradient(38% 44% at 32% 44%,rgba(74,31,196,.30),transparent 70%),
  radial-gradient(40% 46% at 70% 40%,rgba(106,59,255,.26),transparent 70%)}
body::before{background:
  radial-gradient(46vw 40vw at 14% 10%,rgba(74,31,196,.14),transparent 62%),
  radial-gradient(50vw 40vw at 90% 70%,rgba(106,59,255,.12),transparent 64%)}

/* les boutons : des rectangles pleins */
.bouton{background:var(--violet) !important;border:1px solid var(--violet) !important;
  box-shadow:none !important;letter-spacing:.02em}
.bouton::before,.bouton::after{display:none !important}
.remplissable .remplissage{background:var(--violet)}
body:not(.debloque) .bouton.verrou{background:transparent !important;
  border:1px solid color-mix(in srgb,var(--violet) 35%,var(--filet)) !important;color:var(--gris)}
body.debloque .vsl-page .bouton.verrou{animation:none}
.plan .p-cta{background:var(--violet);box-shadow:none}
.plan:hover{background:color-mix(in srgb,var(--violet) 8%,transparent)}
.film{box-shadow:0 30px 70px rgba(40,20,110,.22) !important}
.film .jouer{border-radius:50% !important}
.kamil-scene figure,.kamil-scene figure.fenetre{border-radius:50% !important}

/* la bande violette : la phrase de Kamil en blanc sur violet plein */
.bande-violette{background:var(--violet);color:#fff;padding:clamp(56px,9vw,120px) 0}
.bande-violette .oeil{color:rgba(255,255,255,.7)}
.bande-violette .citation{color:#fff;font-size:clamp(30px,4.4vw,54px);font-weight:600;margin:0 auto;max-width:18ch}
.bande-violette .qui{color:rgba(255,255,255,.7);margin-top:18px}
.bande-violette .etroit{position:relative;z-index:1}

/* le fil : une ligne fine qui relie les chapitres, dans chaque fondu */
.crepuscule,.aube{position:relative;height:clamp(28px,4vw,48px)}

/* la nuit : violette, pas noire ; sa lueur plus franche */
.lueur-nuit{background:radial-gradient(closest-side,rgba(106,59,255,.34),rgba(74,31,196,.14) 55%,transparent 72%)}
.mains-bande .fenetre::before{background:rgba(74,31,196,.6)}
.parties .num{color:var(--accent);font-weight:700}
.liste li::before{background:var(--accent);border-radius:0;width:6px;height:6px;transform:rotate(45deg)}
.trame{opacity:calc(.6 - var(--t) * .6)}
/* les images en bande : un masque qui laisse voir le fond, plus d'aplat qui
   laisse une ligne visible sous le texte */
.graine-bande .fenetre::after,.mains-bande .fenetre::after{display:none}
.graine-bande .fenetre,.mains-bande .fenetre{
  -webkit-mask-image:linear-gradient(180deg,transparent 0%,#000 26%,#000 72%,transparent 100%);
  mask-image:linear-gradient(180deg,transparent 0%,#000 26%,#000 72%,transparent 100%)}
/* Kamil : la photo entière dans le rond, sans zoom ni glissement */
.kamil-scene .parallaxe{top:0;height:100%;transform:none !important}
.kamil-scene img{object-fit:cover;object-position:center 40%}

/* --- le bloc de paiement, comme partout : la modalité, le prix, le bouton ------ */
.offre{max-width:520px;margin:clamp(26px,4vw,40px) auto 0;text-align:center}
.modalites{display:grid;grid-template-columns:repeat(3,1fr);border:1px solid var(--filet)}
.modalite{font-family:inherit;font-size:14px;font-weight:500;padding:12px 8px;cursor:pointer;
  background:transparent;border:0;color:var(--gris);transition:background .25s,color .25s}
.modalite + .modalite{border-left:1px solid var(--filet)}
.modalite.active{background:var(--violet);color:#fff}
.prix{margin:26px 0 20px}
.prix strong{display:block;font-size:clamp(56px,9vw,84px);font-weight:700;letter-spacing:-.04em;line-height:1;color:var(--encre)}
.prix span{display:block;margin-top:8px;font-size:14px;color:var(--pale)}
.bouton.grand{width:100%;padding:18px 24px;font-size:17px;font-weight:600}
.offre .legende{margin-top:14px}

/* --- la page merci suit la même ligne ---------------------------------------- */
.suite li{background:transparent;border:1px solid color-mix(in srgb,var(--accent) 35%,var(--filet))}
.respiration .qui{white-space:normal}
.citation em{text-decoration:none}
.bande-violette .citation em{text-decoration:underline}
.merci .film .ecran{background:linear-gradient(160deg,#1b1233,#0e0920)}
/* plus de découpe du texte (elle rognait les jambages du titre) */
.ouverture h1,.suite-ouverture .degrade,.vsl-page h1 .grand,.citation em,.vsl-page h1 .petit{
  -webkit-background-clip:border-box;background-clip:border-box;padding-bottom:0;overflow:visible}
/* ==========================================================================
   Le premier écran, épuré : rien que le titre, la vidéo, le bouton.
   Pas de barre tant que la vidéo n'est pas finie, pas de trame, une seule
   lueur douce derrière la vidéo.
   ========================================================================== */
body:not(.debloque) .barre{display:none}
body:not(.debloque){padding-top:0}
body:not(.debloque) .trame{opacity:0}
.trame{opacity:calc(.35 - var(--t) * .35)}
body::before{background:radial-gradient(60vw 50vw at 50% 0%,rgba(74,31,196,.10),transparent 65%)}
.ouverture::before{filter:blur(40px);
  background:radial-gradient(48% 38% at 50% 58%,rgba(74,31,196,.26),transparent 72%)}
.vsl-page{min-height:100svh;justify-content:center;padding-top:clamp(40px,7vw,80px);padding-bottom:clamp(40px,7vw,80px)}
body.debloque .vsl-page{min-height:0}
.vsl-page h1 .grand{font-size:clamp(60px,13vw,112px);font-weight:600;letter-spacing:-.045em}
.vsl-page h1 .petit{font-weight:500;font-size:clamp(20px,4.4vw,34px);color:var(--encre);-webkit-text-fill-color:var(--encre)}
.vsl-page .sous{font-size:15px;color:var(--pale);max-width:38ch}
.vsl-page .film{margin-top:clamp(26px,4vw,40px);box-shadow:0 40px 90px rgba(74,31,196,.22) !important}
.vsl-page .legende{font-size:11px;color:var(--pale);margin-top:14px !important}
.vsl-page .appel{margin-top:22px !important}
body:not(.debloque) .vsl-page .bouton.verrou{background:rgba(74,31,196,.10) !important;
  border:0 !important;color:var(--violet);font-weight:600}
.vsl-page .bouton.verrou{min-width:min(320px,100%);padding:17px 34px;font-size:16px}
.merci .sous{max-width:44ch}

/* ==========================================================================
   Premier écran, encore plus nu : fond blanc, aucune lueur, une ligne fine
   autour de la vidéo, un bouton violet qui se révèle avec la vidéo.
   ========================================================================== */
body:not(.debloque) body::before,body:not(.debloque) .ouverture::before{display:none}
.ouverture::before{display:none}
body::before{display:none}
.vsl-page{padding-top:clamp(56px,9vw,110px)}
.vsl-page h1 .grand{font-weight:600;font-size:clamp(58px,12.5vw,108px);letter-spacing:-.04em}
.vsl-page h1 .petit{margin-top:6px}
.vsl-page .sous{margin-top:16px;font-size:14.5px}
.vsl-page .film{margin-top:clamp(30px,5vw,48px);box-shadow:0 1px 0 rgba(0,0,0,.02) !important;
  outline:1px solid var(--filet);outline-offset:0}
.vsl-page .legende{margin-top:16px !important;font-size:11px}
.vsl-page .appel{margin-top:26px !important}
/* le bouton : violet plein, qui s'affirme au fil de la vidéo (plus de découpe) */
.remplissable .remplissage{display:none}
.vsl-page .bouton.verrou{background:var(--violet) !important;color:#fff !important;border:0 !important;
  opacity:calc(.28 + .72 * var(--avance-n,0));transition:opacity .6s linear}
body.debloque .vsl-page .bouton.verrou{opacity:1}
/* la barre restait dans le flux (la règle .verre la remettait en relatif) : elle
   laissait un trou au-dessus d'elle. Elle est fixée en haut, sans trou. */
.barre{position:fixed !important;top:0 !important;left:0 !important;right:0 !important;transform:none !important}
/* le bouton verrouillé : lisible dès le départ, il se colore avec la vidéo */
.vsl-page .bouton.verrou{opacity:1 !important;
  background:color-mix(in srgb,var(--violet) calc((10 + 90 * var(--avance-n,0)) * 1%),#fff) !important;
  color:var(--violet) !important;transition:background .6s linear,color .3s}
.vsl-page .bouton.verrou.mi-chemin,body.debloque .vsl-page .bouton.verrou{color:#fff !important;
  background:var(--violet) !important}
body.debloque .vsl-page .bouton.verrou{background:var(--violet) !important}
body:not(.debloque) .vsl-page .bouton.verrou{
  background:color-mix(in srgb,var(--violet) calc((10 + 90 * var(--avance-n,0)) * 1%),#fff) !important;
  color:var(--violet) !important}
body:not(.debloque) .vsl-page .bouton.verrou.mi-chemin{color:#fff !important}

/* --- le premier écran habillé : la marque en haut, les sept mots en bas ---------- */
.vsl-page{justify-content:flex-start;padding-top:clamp(22px,4vw,40px);padding-bottom:0}
body:not(.debloque) .vsl-page .large{display:flex;flex-direction:column;align-items:center;
  min-height:calc(100svh - clamp(22px,4vw,40px))}
.marque-haut{font-size:12px;letter-spacing:.22em;text-transform:uppercase;font-weight:600;
  color:var(--violet);margin:0 0 clamp(30px,7vw,64px)}
body.debloque .marque-haut{display:none}
.valeurs{margin:auto 0 0;padding:36px 12px 28px;font-size:10.5px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--pale);line-height:2.1;max-width:34ch}
body.debloque .valeurs{display:none}
body:not(.debloque) .vsl-page::after{content:"";position:absolute;left:0;right:0;bottom:0;height:42%;
  pointer-events:none;z-index:0;background:linear-gradient(180deg,transparent,rgba(74,31,196,.07))}
.vsl-page .large{position:relative;z-index:1;width:100%}
.vsl-page .film{width:100%}
/* le conteneur garde ses marges (la vidéo touchait les bords) */
.vsl-page .large{width:min(1020px,calc(100% - 40px))}
.vsl-page .film{max-width:860px;margin-inline:auto}
/* tout centré verticalement, espacé régulièrement, du haut en bas */
body:not(.debloque) .vsl-page{padding-top:0;padding-bottom:0;min-height:100svh}
body:not(.debloque) .vsl-page .large{justify-content:center;min-height:100svh;
  padding:28px 0;box-sizing:border-box}
.marque-haut{margin:0 0 clamp(22px,4vw,34px)}
.vsl-page .sous{margin-top:14px}
.vsl-page .film{margin-top:clamp(22px,3.6vw,34px)}
.vsl-page .legende{margin-top:14px !important}
.vsl-page .appel{margin-top:22px !important}
.valeurs{margin:clamp(26px,5vw,44px) 0 0;padding:0 12px}
/* version ordinateur : le premier écran tient dans la hauteur, le titre merci se coupe bien */
@media(min-width:1100px){.vsl-page .film{max-width:720px}}
.merci h1{max-width:15ch;margin-inline:auto}
/* ==========================================================================
   Ordinateur : moins zoomé, plus épuré. Une colonne plus étroite, une échelle
   de texte plus petite, une vidéo plus sobre.
   ========================================================================== */
@media(min-width:1100px){
  body{font-size:16px}
  .large{width:min(920px,calc(100% - 80px))}
  .etroit{width:min(680px,calc(100% - 80px))}
  .vsl-page h1 .grand{font-size:76px}
  .vsl-page h1 .petit{font-size:26px}
  .vsl-page .sous{font-size:14px}
  .vsl-page .film{max-width:640px}
  .vsl-page .bouton.verrou{min-width:300px;padding:15px 30px;font-size:15px}
  .marque-haut{font-size:11px}
  h2{font-size:40px}
  h3{font-size:19px}
  .suite-ouverture .degrade{font-size:46px}
  .suite-ouverture .sous{font-size:15px}
  .citation{font-size:34px}
  .bande-violette .citation{font-size:38px;max-width:20ch}
  .bande-violette{padding:72px 0}
  .bloc{padding:44px 52px}
  .sous{font-size:15.5px}
  .chiffres{font-size:13px}
  .parties{max-width:640px}
  .parties li{padding:18px 0;grid-template-columns:48px 1fr}
  .parties .num{font-size:18px}
  .parties p{font-size:15px}
  .parties .pied{font-size:12px}
  .liste li{font-size:15px;padding:12px 0 12px 28px}
  .liste li::before{top:19px}
  .kamil-scene{gap:40px}
  .kamil-scene figure,.kamil-scene figure.fenetre{width:300px}
  .kamil-scene .texte h2{font-size:32px}
  .kamil-scene .texte p{font-size:15px}
  summary{font-size:16px;padding:16px 34px 16px 0}
  details p{font-size:15px}
  .offre{max-width:440px}
  .prix strong{font-size:60px}
  .bouton.grand{padding:16px 24px;font-size:16px}
  .graine-bande .fenetre{height:440px}
  .graine-bande .citation{font-size:30px}
  .barre{height:52px}
  .barre .marque{font-size:15px}
  .barre nav a{font-size:12px}
  .barre .fin{padding:9px 16px;font-size:11px}
  body.debloque{padding-top:52px}
  .merci h1{font-size:52px}
}
/* ordinateur : tout le premier écran tient dans la hauteur, même sur un portable */
@media(min-width:1100px){
  .vsl-page h1 .grand{font-size:clamp(56px,7.5vh,72px)}
  .vsl-page h1 .petit{font-size:clamp(20px,2.8vh,26px)}
  .vsl-page .film{max-width:min(600px,72vh)}
  .marque-haut{margin-bottom:clamp(14px,2.6vh,28px)}
  .vsl-page .film{margin-top:clamp(16px,2.6vh,28px)}
  .vsl-page .appel{margin-top:clamp(14px,2.2vh,22px) !important}
  .merci h1{font-size:clamp(40px,5.6vh,52px)}
}

/* la phrase de la page merci : deux lignes sur ordinateur, naturel sur téléphone */
.deux-lignes{max-width:none;margin-inline:auto}
@media(max-width:833px){.deux-lignes br{display:none}}
.vsl-page .sous.deux-lignes,.merci .sous.deux-lignes{max-width:none;white-space:nowrap}
@media(max-width:833px){.vsl-page .sous.deux-lignes,.merci .sous.deux-lignes{white-space:normal;max-width:40ch}}

/* ==========================================================================
   Retours de Kamil (vidéo du 20/09) : la page suit le brief à la lettre.
   ========================================================================== */
sup{font-size:.45em;vertical-align:super;line-height:0;margin-left:.08em;font-weight:600}
.sur-titre{margin:10px 0 0;font-size:13px;letter-spacing:.06em;text-transform:uppercase;color:var(--accent)}
body:not(.debloque) .vsl-page{position:relative}
body:not(.debloque) .marque-haut{position:absolute;top:20px;left:0;right:0;margin:0;text-align:center}
body.debloque .sur-titre{display:none}
.cloture{margin:22px 0 0;font-weight:600;color:var(--encre);font-size:16px;line-height:1.5}
.liste.exercices li{display:grid;gap:2px}
.liste.exercices strong{font-size:20px;font-weight:600;letter-spacing:-.02em;color:var(--encre)}
.liste.exercices span{font-size:14px;color:var(--pale)}
.accordeon{margin-top:clamp(22px,3vw,34px);border-top:1px solid var(--filet)}
.accordeon details{border-bottom:1px solid var(--filet);overflow:hidden}
.accordeon summary{font-size:18px}
.accordeon .contenu{padding:0 0 22px}
.accordeon .intro{margin:0 0 6px;color:var(--gris);font-size:15px}
.accordeon h4{margin:18px 0 4px;font-size:12px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--accent)}
.lecons{list-style:none;margin:0;padding:0}
.lecons li{padding:7px 0 7px 18px;position:relative;font-size:15px;line-height:1.5;color:var(--gris)}
.lecons li::before{content:"";position:absolute;left:0;top:14px;width:5px;height:5px;background:var(--accent);transform:rotate(45deg)}
.lecons strong{font-weight:600;color:var(--encre)}
#contenu .bloc{margin-top:clamp(12px,1.6vw,20px)}
@media(min-width:1100px){.accordeon summary{font-size:17px}.lecons li{font-size:14.5px}}

/* les sept mots du brief : sur ordinateur seulement, aux bords, en tailles variées,
   tant que la vidéo n'est pas finie */
.mots{display:none}
@media(min-width:1100px){
  body:not(.debloque) .mots{display:block;position:absolute;inset:0;pointer-events:none;z-index:0}
  .mots span{position:absolute;text-transform:uppercase;letter-spacing:.22em;color:var(--violet);
    white-space:nowrap;animation:derive 16s ease-in-out infinite alternate}
  .mots .m1{font-size:13px;opacity:.5}
  .mots .m2{font-size:10px;opacity:.38;animation-delay:-5s}
  .mots .m3{font-size:11px;opacity:.42;animation-delay:-9s}
  .mots .m4{font-size:14px;opacity:.5;animation-delay:-3s}
  .mots .m5{font-size:10px;opacity:.36;animation-delay:-12s}
  .mots .m6{font-size:12px;opacity:.45;animation-delay:-7s}
  .mots .m7{font-size:11px;opacity:.4;animation-delay:-14s}
  @keyframes derive{from{translate:0 0}to{translate:5px -8px}}
}

/* --- le bouton final, seul : le prix n'apparaît qu'à l'étape 2 du formulaire ---- */
.achat .bouton.grand{width:auto;min-width:min(360px,100%)}
#pour-qui .liste{margin-top:26px}

/* --- les sept mots, plus petits ------------------------------------------------ */
@media(min-width:1100px){
  .mots .m1{font-size:10px;opacity:.42}.mots .m2{font-size:8.5px;opacity:.32}
  .mots .m3{font-size:9px;opacity:.36}.mots .m4{font-size:10.5px;opacity:.42}
  .mots .m5{font-size:8.5px;opacity:.3}.mots .m6{font-size:9.5px;opacity:.38}
  .mots .m7{font-size:9px;opacity:.34}
}

/* --- le fond : un voilage, de grands plis verticaux très doux, et un grain de tissu.
   Trois rythmes de plis superposés pour qu'ils ne se répètent pas à l'œil. -------- */
.trame,body:not(.debloque) .trame{opacity:calc(1 - var(--t));
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .2 0 0 0 0 .1 0 0 0 0 .5 0 0 0 .05 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E"),
    repeating-linear-gradient(90deg,rgba(74,31,196,0) 0,rgba(74,31,196,.045) 46px,rgba(255,255,255,.5) 92px,rgba(74,31,196,0) 150px),
    repeating-linear-gradient(90deg,rgba(30,15,90,0) 0,rgba(30,15,90,.035) 110px,rgba(30,15,90,0) 236px),
    repeating-linear-gradient(90deg,rgba(74,31,196,0) 0,rgba(74,31,196,.03) 190px,rgba(74,31,196,0) 410px),
    linear-gradient(180deg,rgba(255,255,255,.85) 0%,rgba(255,255,255,0) 34%,rgba(74,31,196,.05) 100%);
  background-size:180px 180px,auto,auto,auto,auto}
/* le formulaire : le texte suit le thème (un <dialog> ne l'hérite pas tout seul),
   sinon les formules étaient écrites en noir sur fond sombre */
dialog#boite{color:var(--encre)}
#boite .formule,#boite .formule span,#boite label{color:var(--encre)}
#boite .formule .f-mt{color:var(--encre)}
#boite input[type=text],#boite input[type=email],#boite input[type=tel]{color:#1D1D1F}
/* le bouton d'accès est centré (il gardait l'alignement à gauche de l'ancienne mise en page à deux colonnes) */
.achat .appel{justify-content:center !important}
.achat,.achat .legende{text-align:center !important}
/* ==========================================================================
   Le formulaire, plus petit et plus nu : une croix fine et visible, des champs
   à simple filet, moins de hauteur partout.
   ========================================================================== */
.boite{width:min(420px,calc(100vw - 28px));padding:30px 28px 26px !important}
.boite .oeil{font-size:11px;letter-spacing:.16em;margin-bottom:10px}
.boite h2{font-size:24px;letter-spacing:-.02em}
.boite .sous{font-size:14px;margin:6px 0 20px;color:var(--gris)}
.fermer{top:12px;right:12px;width:32px;height:32px;border-radius:0 !important;
  background:transparent !important;border:0 !important;box-shadow:none !important;
  color:var(--encre) !important;font-size:24px;font-weight:300;line-height:1;cursor:pointer;
  opacity:.7;display:grid;place-items:center;padding:0}
.fermer:hover{opacity:1}
.champ{margin-bottom:14px}
.champ label,#boite label{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--pale)}
.champ input,#boite input[type=text],#boite input[type=email],#boite input[type=tel]{
  height:44px;padding:0 2px;font-size:16px;color:var(--encre) !important;
  background:transparent !important;border:0 !important;border-radius:0 !important;
  border-bottom:1px solid var(--filet) !important;box-shadow:none !important}
.champ input:focus,#boite input:focus{outline:0;border-bottom-color:var(--accent) !important;
  background:transparent !important}
#boite input:-webkit-autofill{-webkit-text-fill-color:var(--encre);
  transition:background-color 9999s ease-in-out 0s}
.boite .bouton{margin-top:14px;padding:14px 20px;font-size:15px}
.formule{padding:12px 14px !important;font-size:15px}
.formules{gap:6px}

/* ==========================================================================
   Le fond : plus de plis ni de motif. De la matière, posée de façon inégale sur
   les côtés (des nappes violettes organiques et un grain), le centre reste net.
   ========================================================================== */
.trame,body:not(.debloque) .trame{opacity:calc(1 - var(--t));
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .2  0 0 0 0 .1  0 0 0 0 .5  0 0 0 .09 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url%28%23g%29'/%3E%3C/svg%3E"),url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1600' height='1000' preserveAspectRatio='none'%3E%3Cfilter id='n' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.0035 .006' numOctaves='4' seed='11'/%3E%3CfeColorMatrix values='0 0 0 0 .29  0 0 0 0 .12  0 0 0 0 .77  0 0 0 1.25 -.52'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url%28%23n%29'/%3E%3C/svg%3E");
  background-size:220px 220px,cover;background-repeat:repeat,no-repeat;background-position:0 0,center;
  -webkit-mask-image:linear-gradient(90deg,#000 0%,rgba(0,0,0,.55) 15%,transparent 33%,transparent 67%,rgba(0,0,0,.55) 85%,#000 100%);
  mask-image:linear-gradient(90deg,#000 0%,rgba(0,0,0,.55) 15%,transparent 33%,transparent 67%,rgba(0,0,0,.55) 85%,#000 100%)}
@media(max-width:833px){
  .trame,body:not(.debloque) .trame{
    -webkit-mask-image:linear-gradient(90deg,#000 0%,transparent 26%,transparent 74%,#000 100%);
    mask-image:linear-gradient(90deg,#000 0%,transparent 26%,transparent 74%,#000 100%)}
}

/* --- la formule, sur la page, après l'envoi des coordonnées ------------------- */
#choix{max-width:460px;margin:0 auto;text-align:left}
#choix .oeil{text-align:center}
#choix .formule{color:var(--encre);border-radius:0}
#choix .formule .f-mt{color:var(--encre)}
#choix .total{display:flex;justify-content:space-between;align-items:baseline;margin-top:18px;
  padding-top:16px;border-top:1px solid var(--filet);color:var(--gris);font-size:14px}
#choix .total strong{font-size:30px;font-weight:700;letter-spacing:-.03em;color:var(--encre)}
#choix .detail{margin:4px 0 16px;font-size:13px;color:var(--pale)}
#choix .bouton.grand{width:100%}
#choix .attendre{text-align:center}
[hidden]{display:none !important}

/* ==========================================================================
   Le fond, version sobre : un grain fin de papier sur toute la page, et deux
   grandes lumières violettes très douces, posées de travers (en haut à gauche,
   en bas à droite). Aucune tache, aucun motif : des dégradés lisses sous un grain net.
   ========================================================================== */
.trame,body:not(.debloque) .trame{opacity:calc(1 - var(--t));
  -webkit-mask-image:none;mask-image:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='256' height='256'%3E%3Cfilter id='g' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.1' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .16  0 0 0 0 .10  0 0 0 0 .34  0 0 0 .11 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url%28%23g%29'/%3E%3C/svg%3E"),
    radial-gradient(62vw 72vh at -12% 12%,rgba(74,31,196,.115),rgba(74,31,196,0) 62%),
    radial-gradient(58vw 70vh at 112% 88%,rgba(106,59,255,.10),rgba(106,59,255,0) 62%),
    radial-gradient(34vw 44vh at 104% 2%,rgba(74,31,196,.05),rgba(74,31,196,0) 64%);
  background-size:256px 256px,auto,auto,auto;
  background-repeat:repeat,no-repeat,no-repeat,no-repeat;background-position:0 0,0 0,0 0,0 0}
@media(max-width:833px){
  .trame,body:not(.debloque) .trame{-webkit-mask-image:none;mask-image:none;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='256' height='256'%3E%3Cfilter id='g' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.1' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .16  0 0 0 0 .10  0 0 0 0 .34  0 0 0 .11 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url%28%23g%29'/%3E%3C/svg%3E"),
      radial-gradient(120vw 50vh at -30% 8%,rgba(74,31,196,.10),rgba(74,31,196,0) 62%),
      radial-gradient(120vw 50vh at 130% 92%,rgba(106,59,255,.09),rgba(106,59,255,0) 62%);
    background-size:256px 256px,auto,auto;background-repeat:repeat,no-repeat,no-repeat}
}

/* ==========================================================================
   Le fond : des reflets. De petites touches de lumière violette, en biais,
   nettes au cœur et douces autour, posées çà et là sur les côtés, comme la
   lumière qui accroche une vitre. Dessous, le grain fin du papier.
   ========================================================================== */
.trame,body:not(.debloque) .trame{opacity:calc(1 - var(--t));-webkit-mask-image:none;mask-image:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1600 1000' preserveAspectRatio='xMidYMid slice'%3E%3Cdefs%3E%3ClinearGradient id='a' x1='0' x2='1'%3E%3Cstop offset='0' stop-color='%234A1FC4' stop-opacity='0'/%3E%3Cstop offset='.35' stop-color='%235B33E6' stop-opacity='.75'/%3E%3Cstop offset='.55' stop-color='%238F6BFF' stop-opacity='.95'/%3E%3Cstop offset='1' stop-color='%234A1FC4' stop-opacity='0'/%3E%3C/linearGradient%3E%3ClinearGradient id='h' x1='0' x2='1'%3E%3Cstop offset='0' stop-color='%236A3BFF' stop-opacity='0'/%3E%3Cstop offset='.5' stop-color='%236A3BFF' stop-opacity='.32'/%3E%3Cstop offset='1' stop-color='%236A3BFF' stop-opacity='0'/%3E%3C/linearGradient%3E%3Cfilter id='net' x='-20%25' y='-400%25' width='140%25' height='900%25'%3E%3CfeGaussianBlur stdDeviation='.7'/%3E%3C/filter%3E%3Cfilter id='doux' x='-20%25' y='-200%25' width='140%25' height='500%25'%3E%3CfeGaussianBlur stdDeviation='7'/%3E%3C/filter%3E%3C/defs%3E%3Cg transform='rotate%28-26 115 105%29' opacity='0.9'%3E%3Crect x='5.0' y='98.4' width='220' height='13.200000000000001' fill='url%28%23h%29' filter='url%28%23doux%29'/%3E%3Crect x='5.0' y='103.9' width='220' height='2.2' fill='url%28%23a%29' filter='url%28%23net%29'/%3E%3C/g%3E%3Cg transform='rotate%28-26 255 350%29' opacity='0.6'%3E%3Crect x='200.0' y='345.5' width='110' height='9.0' fill='url%28%23h%29' filter='url%28%23doux%29'/%3E%3Crect x='200.0' y='349.25' width='110' height='1.5' fill='url%28%23a%29' filter='url%28%23net%29'/%3E%3C/g%3E%3Cg transform='rotate%28-26 55 590%29' opacity='0.75'%3E%3Crect x='-20.0' y='584.6' width='150' height='10.8' fill='url%28%23h%29' filter='url%28%23doux%29'/%3E%3Crect x='-20.0' y='589.1' width='150' height='1.8' fill='url%28%23a%29' filter='url%28%23net%29'/%3E%3C/g%3E%3Cg transform='rotate%28-26 335 765%29' opacity='0.55'%3E%3Crect x='290.0' y='760.8' width='90' height='8.399999999999999' fill='url%28%23h%29' filter='url%28%23doux%29'/%3E%3Crect x='290.0' y='764.3' width='90' height='1.4' fill='url%28%23a%29' filter='url%28%23net%29'/%3E%3C/g%3E%3Cg transform='rotate%28-26 300 965%29' opacity='0.8'%3E%3Crect x='210.0' y='959.0' width='180' height='12.0' fill='url%28%23h%29' filter='url%28%23doux%29'/%3E%3Crect x='210.0' y='964.0' width='180' height='2.0' fill='url%28%23a%29' filter='url%28%23net%29'/%3E%3C/g%3E%3Cg transform='rotate%28-26 1465 70%29' opacity='0.8'%3E%3Crect x='1370.0' y='64.3' width='190' height='11.399999999999999' fill='url%28%23h%29' filter='url%28%23doux%29'/%3E%3Crect x='1370.0' y='69.05' width='190' height='1.9' fill='url%28%23a%29' filter='url%28%23net%29'/%3E%3C/g%3E%3Cg transform='rotate%28-26 1355 315%29' opacity='0.55'%3E%3Crect x='1305.0' y='310.8' width='100' height='8.399999999999999' fill='url%28%23h%29' filter='url%28%23doux%29'/%3E%3Crect x='1305.0' y='314.3' width='100' height='1.4' fill='url%28%23a%29' filter='url%28%23net%29'/%3E%3C/g%3E%3Cg transform='rotate%28-26 1545 565%29' opacity='0.9'%3E%3Crect x='1425.0' y='557.8' width='240' height='14.399999999999999' fill='url%28%23h%29' filter='url%28%23doux%29'/%3E%3Crect x='1425.0' y='563.8' width='240' height='2.4' fill='url%28%23a%29' filter='url%28%23net%29'/%3E%3C/g%3E%3Cg transform='rotate%28-26 1395 805%29' opacity='0.65'%3E%3Crect x='1335.0' y='800.2' width='120' height='9.600000000000001' fill='url%28%23h%29' filter='url%28%23doux%29'/%3E%3Crect x='1335.0' y='804.2' width='120' height='1.6' fill='url%28%23a%29' filter='url%28%23net%29'/%3E%3C/g%3E%3Cg transform='rotate%28-26 1525 945%29' opacity='0.75'%3E%3Crect x='1450.0' y='939.6' width='150' height='10.8' fill='url%28%23h%29' filter='url%28%23doux%29'/%3E%3Crect x='1450.0' y='944.1' width='150' height='1.8' fill='url%28%23a%29' filter='url%28%23net%29'/%3E%3C/g%3E%3C/svg%3E"),url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='256' height='256'%3E%3Cfilter id='g' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.1' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .16  0 0 0 0 .10  0 0 0 0 .34  0 0 0 .09 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url%28%23g%29'/%3E%3C/svg%3E");
  background-size:cover,256px 256px;background-repeat:no-repeat,repeat;background-position:center,0 0}
@media(max-width:833px){
  .trame,body:not(.debloque) .trame{-webkit-mask-image:none;mask-image:none;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 900' preserveAspectRatio='xMidYMid slice'%3E%3Cdefs%3E%3ClinearGradient id='a' x1='0' x2='1'%3E%3Cstop offset='0' stop-color='%234A1FC4' stop-opacity='0'/%3E%3Cstop offset='.35' stop-color='%235B33E6' stop-opacity='.75'/%3E%3Cstop offset='.55' stop-color='%238F6BFF' stop-opacity='.95'/%3E%3Cstop offset='1' stop-color='%234A1FC4' stop-opacity='0'/%3E%3C/linearGradient%3E%3ClinearGradient id='h' x1='0' x2='1'%3E%3Cstop offset='0' stop-color='%236A3BFF' stop-opacity='0'/%3E%3Cstop offset='.5' stop-color='%236A3BFF' stop-opacity='.32'/%3E%3Cstop offset='1' stop-color='%236A3BFF' stop-opacity='0'/%3E%3C/linearGradient%3E%3Cfilter id='net' x='-20%25' y='-400%25' width='140%25' height='900%25'%3E%3CfeGaussianBlur stdDeviation='.7'/%3E%3C/filter%3E%3Cfilter id='doux' x='-20%25' y='-200%25' width='140%25' height='500%25'%3E%3CfeGaussianBlur stdDeviation='7'/%3E%3C/filter%3E%3C/defs%3E%3Cg transform='rotate%28-26 34 120%29' opacity='0.8'%3E%3Crect x='-11.0' y='115.2' width='90' height='9.600000000000001' fill='url%28%23h%29' filter='url%28%23doux%29'/%3E%3Crect x='-11.0' y='119.2' width='90' height='1.6' fill='url%28%23a%29' filter='url%28%23net%29'/%3E%3C/g%3E%3Cg transform='rotate%28-26 378 210%29' opacity='0.85'%3E%3Crect x='323.0' y='204.6' width='110' height='10.8' fill='url%28%23h%29' filter='url%28%23doux%29'/%3E%3Crect x='323.0' y='209.1' width='110' height='1.8' fill='url%28%23a%29' filter='url%28%23net%29'/%3E%3C/g%3E%3Cg transform='rotate%28-26 20 520%29' opacity='0.6'%3E%3Crect x='-10.0' y='516.1' width='60' height='7.800000000000001' fill='url%28%23h%29' filter='url%28%23doux%29'/%3E%3Crect x='-10.0' y='519.35' width='60' height='1.3' fill='url%28%23a%29' filter='url%28%23net%29'/%3E%3C/g%3E%3Cg transform='rotate%28-26 384 640%29' opacity='0.65'%3E%3Crect x='349.0' y='635.8' width='70' height='8.399999999999999' fill='url%28%23h%29' filter='url%28%23doux%29'/%3E%3Crect x='349.0' y='639.3' width='70' height='1.4' fill='url%28%23a%29' filter='url%28%23net%29'/%3E%3C/g%3E%3Cg transform='rotate%28-26 46 820%29' opacity='0.75'%3E%3Crect x='-4.0' y='815.2' width='100' height='9.600000000000001' fill='url%28%23h%29' filter='url%28%23doux%29'/%3E%3Crect x='-4.0' y='819.2' width='100' height='1.6' fill='url%28%23a%29' filter='url%28%23net%29'/%3E%3C/g%3E%3C/svg%3E"),url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='256' height='256'%3E%3Cfilter id='g' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.1' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .16  0 0 0 0 .10  0 0 0 0 .34  0 0 0 .09 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url%28%23g%29'/%3E%3C/svg%3E");
    background-size:cover,256px 256px;background-repeat:no-repeat,repeat;background-position:center,0 0}
}

/* ==========================================================================
   Retours de Kamil (vidéo « Hiérarchie des textes ») : des niveaux de lecture
   nets, de l'air entre les phrases, une seule bascule du clair au sombre.
   ========================================================================== */
/* le premier écran : le titre moins massif, le sous-titre entre parenthèses, tout petit */
.vsl-page h1 .grand{font-size:clamp(42px,10.4vw,64px);letter-spacing:-.04em}
.vsl-page h1 .petit{font-size:clamp(19px,4.6vw,26px);margin-top:6px}
.sur-titre{margin:12px 0 0;font-size:11.5px;letter-spacing:.02em;text-transform:none;font-style:italic;color:var(--pale)}
.vsl-page .sous{margin-top:clamp(22px,5vw,30px);font-size:15px;color:var(--gris);max-width:34ch}
.fleche{display:block;width:1px;height:20px;margin:14px auto 0;background:var(--accent);opacity:.55;position:relative}
.fleche::after{content:"";position:absolute;left:50%;bottom:0;width:7px;height:7px;margin-left:-4px;
  border-right:1px solid var(--accent);border-bottom:1px solid var(--accent);transform:rotate(45deg)}
.vsl-page .film{margin-top:14px}
body.debloque .fleche{display:none}
@media(min-width:1100px){
  .vsl-page h1 .grand{font-size:clamp(50px,6.6vh,64px)}
  .vsl-page .sous{margin-top:18px}
  .fleche{height:14px;margin-top:10px}
}
/* le bloc 1 : deux temps, le second plus fort */
.suite-ouverture .degrade{margin-bottom:6px}
.sous.fort{color:var(--encre);font-weight:600}
.suite-ouverture{padding-bottom:clamp(26px,5vw,48px)}
/* la phrase de fin : détachée, la parole sur sa propre ligne */
.cloture.finale{margin-top:clamp(34px,6vw,52px);padding-top:clamp(24px,4vw,34px);border-top:1px solid var(--filet);
  font-weight:400;color:var(--gris);line-height:1.6}
.cloture.finale .parole{display:inline-block;margin-top:10px;font-weight:600;color:var(--encre);font-size:1.08em}
/* de l'air dans les blocs de texte */
.bloc .sous{line-height:1.6}
.liste li{line-height:1.55}
#pour-qui .cloture{margin-top:30px;padding-top:24px;border-top:1px solid var(--filet);line-height:1.6}
.chiffres{line-height:1.7}
/* la page merci */
.merci h1 .grand{font-size:clamp(40px,10vw,60px)}
.merci h1 .petit{font-size:clamp(20px,5vw,28px);margin-top:8px}
.merci h1{max-width:none}
.merci .oeil{margin-bottom:clamp(16px,4vw,22px)}
.merci .sous.lignes{max-width:none;white-space:normal;margin:clamp(20px,5vw,26px) auto 0;line-height:1.65;font-size:15px}
.merci .sous.lignes + .sous.lignes{margin-top:12px}
.merci .film{margin-top:clamp(28px,6vw,38px) !important}
.merci .appel{margin-top:clamp(24px,5vw,30px) !important}
@media(min-width:1100px){
  .merci h1 .grand{font-size:clamp(40px,5.6vh,54px)}
  .merci h1 .petit{font-size:22px}
  .merci .sous.lignes{font-size:14px;margin-top:16px}
  .merci .sous.lignes + .sous.lignes{margin-top:8px}
  .merci .film{margin-top:22px !important}
}
@media(min-width:1100px){.vsl-page .sous{max-width:48ch}}

br.ordi{display:none}
@media(min-width:1100px){br.ordi{display:inline}.vsl-page .sous{max-width:none}}

/* ==========================================================================
   Le fond : une lueur qui se promène. Deux halos violets très larges et presque
   invisibles dérivent lentement à travers l'écran, chacun à son rythme, donc le
   fond ne se répète jamais vraiment. Rien d'autre : ni trait, ni motif, ni grain.
   ========================================================================== */
.trame,body:not(.debloque) .trame{opacity:calc(1 - var(--t));background-image:none;
  -webkit-mask-image:none;mask-image:none;overflow:hidden}
.trame::before,.trame::after{content:"";position:absolute;border-radius:50%;pointer-events:none;
  -webkit-mask-image:none;mask-image:none;will-change:transform}
.trame::before{width:70vmax;height:70vmax;left:-20vmax;top:-25vmax;
  background:radial-gradient(closest-side,rgba(74,31,196,.085),rgba(74,31,196,.03) 55%,rgba(74,31,196,0) 72%);
  animation:balade-a 46s ease-in-out infinite alternate}
.trame::after{width:60vmax;height:60vmax;right:-20vmax;bottom:-25vmax;
  background:radial-gradient(closest-side,rgba(106,59,255,.07),rgba(106,59,255,.025) 55%,rgba(106,59,255,0) 72%);
  animation:balade-b 61s ease-in-out infinite alternate}
@keyframes balade-a{
  0%{transform:translate3d(0,0,0)}
  33%{transform:translate3d(48vw,22vh,0)}
  66%{transform:translate3d(18vw,62vh,0)}
  100%{transform:translate3d(72vw,38vh,0)}}
@keyframes balade-b{
  0%{transform:translate3d(0,0,0)}
  30%{transform:translate3d(-42vw,-30vh,0)}
  70%{transform:translate3d(-66vw,-6vh,0)}
  100%{transform:translate3d(-24vw,-58vh,0)}}
@media(prefers-reduced-motion:reduce){.trame::before,.trame::after{animation:none}}

/* La marque en haut est posée en absolu : on réserve sa place pour que le
   contenu ne vienne jamais dessous, même quand la page dépasse l'écran. */
body:not(.debloque) .vsl-page{padding-top:0;padding-bottom:0}
body:not(.debloque) .vsl-page .large{padding-top:68px;padding-bottom:36px}