/* Styles de public/index.php — sortis de la page (i102b). */

.wrap{max-width:1180px;margin:0 auto;padding:0 clamp(22px,5vw,44px)}
.sec{padding:clamp(56px,8vh,92px) 0}
.sechead{max-width:660px;margin-bottom:36px}
.sechead h2{margin-top:12px}
.sechead p{margin-top:12px}

/* ── 1. HÉROS ───────────────────────────────────────────────────────────
   Contrainte mobile : le héros tient DANS l'écran, photo comprise. Il faisait
   902 px pour une fenêtre de 877 px — la seule preuve visuelle de la page
   était coupée par le pli. `max-height` sur la photo suffit : le texte garde
   sa taille, c'est l'image qui cède. */
.l2hero{padding-top:clamp(96px,14vh,150px)}
.l2hero .sub{max-width:52ch}
.hero-ctas{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin-top:28px}
.hero-note{margin-top:14px;font-size:.84rem;color:var(--ivoire-2);opacity:.9}
@media(max-width:900px){
  .l2hero{padding-top:84px;padding-bottom:26px}
  .l2hero h1{font-size:clamp(1.9rem,8.2vw,2.7rem);line-height:1.1}
  .l2hero .sub{font-size:1rem;line-height:1.55}
  .hero-ctas{gap:10px;margin-top:22px}
  .hero-ctas .btn-lux{flex:1 1 100%;text-align:center;justify-content:center}
  .rshot--hero{max-height:34vh}
  .rshot--hero img{height:100%;object-fit:cover}
}

/* Le mur du héros apporte SES PROPRES styles (src/partials/hero_wall.php) :
   `.l2hero.has-wall` y est défini une seule fois, avec le voile, l'inclinaison
   et les fondus. Rien à ajouter ici — deux endroits qui décrivent le même mur
   finissent toujours par se contredire.
   UNE SEULE EXCEPTION, sur téléphone : là, le mur remonte jusque sous la barre
   et le nom de la marque tombait parfois sur une photo claire. Un dégradé
   court en haut du mur — et rien d'autre ne bouge. */
@media(max-width:900px){
  .l2hero.has-wall .hw::before{content:"";position:absolute;left:0;right:0;top:0;height:180px;z-index:1;
    background:linear-gradient(180deg,rgba(7,6,10,.88) 0%,rgba(7,6,10,.55) 48%,rgba(7,6,10,0) 100%)}
}

/* Photo d'illustration — le cadre, l'ombre, la légende. */
.rshot{position:relative;border-radius:18px;overflow:hidden;background:#0e0c09;
  box-shadow:0 26px 60px rgba(0,0,0,.55),0 0 0 1px rgba(255,255,255,.06)}
.rshot img{width:100%;height:100%;object-fit:cover;display:block}
.rshot--hero{aspect-ratio:4/3}
.rshot .rcap{position:absolute;left:0;right:0;bottom:0;padding:34px 16px 13px;
  background:linear-gradient(180deg,transparent,rgba(8,6,5,.9));
  font-size:.82rem;color:var(--ivoire-2);line-height:1.45}
.rbadge{position:absolute;top:14px;left:14px;z-index:2;font-size:.72rem;letter-spacing:.12em;
  text-transform:uppercase;background:rgba(10,8,6,.66);border:1px solid rgba(242,201,76,.55);
  color:var(--or-clair);padding:5px 12px;border-radius:999px;backdrop-filter:blur(4px)}

/* ── 2. PREUVE VISUELLE — comparateur avant/après ───────────────────────
   Même composant que /mondes : un seul comportement à maintenir. */
.ba-duo{display:grid;grid-template-columns:repeat(2,1fr);gap:22px;max-width:800px;margin:0 auto;align-items:start}
@media(max-width:720px){.ba-duo{grid-template-columns:1fr;max-width:380px;gap:24px}}
.ba{position:relative;aspect-ratio:2/3;border-radius:var(--r-lg,16px);overflow:hidden;
  border:1px solid var(--hair);box-shadow:0 24px 60px rgba(0,0,0,.5);
  user-select:none;-webkit-user-select:none;width:100%}
.ba img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.ba .ba-top{clip-path:inset(0 calc(100% - var(--pos,50%)) 0 0)}
.ba .ba-line{position:absolute;top:0;bottom:0;left:var(--pos,50%);width:2px;background:var(--or);
  transform:translateX(-1px);pointer-events:none}
.ba .ba-knob{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:42px;height:42px;
  border-radius:50%;background:var(--or);color:#17110a;display:flex;align-items:center;justify-content:center;
  font-weight:700;font-size:1.05rem;box-shadow:0 4px 14px rgba(0,0,0,.45)}
.ba .ba-range{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:ew-resize;margin:0;touch-action:none}
.ba .ba-tag{position:absolute;bottom:10px;font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;
  padding:4px 10px;border-radius:var(--r-pill,2rem);background:rgba(10,9,7,.62);color:var(--ivoire);pointer-events:none}
.ba .ba-tag-l{left:10px}.ba .ba-tag-r{right:10px;background:rgba(217,184,119,.9);color:#17110a}

/* ── 3. DEUX CHEMINS — la bifurcation d'audience ────────────────────────
   Deux fonds VISUELLEMENT différents : le lecteur doit voir qu'on change
   d'interlocuteur avant même d'avoir lu le titre de la carte. */
.paths{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:34px}
@media(max-width:860px){.paths{grid-template-columns:1fr;gap:14px}}
.path{border-radius:18px;padding:clamp(26px,3.4vw,38px);display:flex;flex-direction:column;
  border:1px solid var(--hair-soft);min-height:100%}
.path--parent{background:linear-gradient(158deg,rgba(242,201,76,.12),rgba(236,72,153,.06) 60%,rgba(255,255,255,.02))}
.path--pro{background:linear-gradient(158deg,rgba(120,97,255,.14),rgba(57,229,224,.06) 60%,rgba(255,255,255,.02))}
.path h3{font-family:var(--serif);font-weight:500;font-size:clamp(1.4rem,3vw,1.9rem);margin:0 0 12px;line-height:1.15}
.path p{color:var(--ivoire-2);font-size:.98rem;line-height:1.62;margin:0 0 24px;max-width:40ch}
.path .btn-lux{align-self:flex-start;margin-top:auto}

/* ── 4. TROIS ÉTAPES ────────────────────────────────────────────────────*/
.steps3{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,2.4vw,26px)}
@media(max-width:880px){.steps3{grid-template-columns:1fr;gap:22px}}
.step{display:flex;flex-direction:column}
.step .sm{position:relative;aspect-ratio:4/3;border-radius:16px;overflow:hidden;background:#0e0c09;
  box-shadow:0 18px 42px rgba(0,0,0,.46),0 0 0 1px rgba(255,255,255,.05)}
.step .sm img{width:100%;height:100%;object-fit:cover;display:block}
.step .sn{position:absolute;top:12px;left:12px;width:40px;height:40px;border-radius:50%;
  background:var(--or);color:#17110a;font-family:var(--serif);font-weight:700;font-size:1.25rem;
  display:flex;align-items:center;justify-content:center;box-shadow:0 8px 18px rgba(0,0,0,.45)}
.step h3{font-family:var(--serif);font-size:1.3rem;line-height:1.22;margin:16px 0 0}

/* ── 5. LES UNIVERS ─────────────────────────────────────────────────────*/
.univ{display:flex;flex-wrap:wrap;justify-content:center;gap:12px}
.univ > *{flex:0 0 152px;max-width:152px}
@media(max-width:560px){.univ{gap:10px}.univ > *{flex:0 0 calc(50% - 5px);max-width:calc(50% - 5px)}}
.univ a{position:relative;display:block;aspect-ratio:2/3;border-radius:14px;overflow:hidden;
  border:1px solid var(--hair-soft);background:#0e0c09;text-decoration:none;
  transition:transform .3s,border-color .3s}
.univ a:hover,.univ a:focus-visible{transform:translateY(-5px);border-color:var(--or)}
.univ a::after{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;
  background:linear-gradient(115deg,transparent 40%,rgba(255,255,255,.42) 48%,
             rgba(242,201,76,.5) 53%,transparent 62%);
  transform:translateX(-130%);transition:transform .75s cubic-bezier(.3,.8,.3,1)}
.univ a:hover::after,.univ a:focus-visible::after{transform:translateX(130%)}
@media(prefers-reduced-motion:reduce){
  .univ a,.univ a::after{transition:none}
  .univ a:hover{transform:none}
  .univ a:hover::after{transform:translateX(-130%)}
}
.univ img{width:100%;height:100%;object-fit:cover;display:block}
.univ .un{position:absolute;left:0;right:0;bottom:0;padding:24px 9px 9px;z-index:3;
  background:linear-gradient(transparent,rgba(8,7,5,.9));color:var(--ivoire);
  font-family:var(--serif);font-size:.92rem;line-height:1.2}

/* ── Notice « la magie est créative » — jamais un avertissement ─────────*/
.ainote{display:flex;gap:13px;align-items:flex-start;max-width:64ch;margin:26px auto 0;
  padding:16px 20px;border:1px solid var(--hair-soft);border-radius:14px;
  background:rgba(255,255,255,.025);color:var(--ivoire-2);font-size:.9rem;line-height:1.6}
.ainote .sp{color:var(--or);flex:none;font-size:1.05rem;line-height:1.4}

/* ── Photo réelle vs Magie IA ───────────────────────────────────────────*/
.twoup{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:30px}
@media(max-width:760px){.twoup{grid-template-columns:1fr;gap:14px}}
.twocard{border:1px solid var(--hair-soft);border-radius:16px;padding:26px 24px;background:var(--surface)}
.twocard h3{font-family:var(--serif);font-weight:500;font-size:1.35rem;margin:0 0 10px}
.twocard p{color:var(--ivoire-2);font-size:.94rem;line-height:1.62;margin:0}
.twocard--real h3{color:var(--aqua,#39E5E0)}
.twocard--ai h3{color:var(--pink,#FF6EC7)}

/* ── 6. VOIR EN VRAI / 7. TEASER PRO / 8. FINALE ────────────────────────*/
.demo{display:grid;grid-template-columns:1.1fr 1fr;gap:clamp(22px,4vw,48px);align-items:center}
@media(max-width:860px){.demo{grid-template-columns:1fr}}
.proband{border:1px solid var(--hair);border-radius:18px;padding:clamp(26px,4vw,42px);
  background:linear-gradient(150deg,rgba(120,97,255,.12),rgba(255,255,255,.02));
  display:flex;flex-wrap:wrap;gap:20px;align-items:center;justify-content:space-between}
.proband div{max-width:56ch}
.proband h2{font-family:var(--serif);font-weight:500;font-size:clamp(1.3rem,2.8vw,1.8rem);margin:0 0 8px;line-height:1.25}
.proband p{color:var(--ivoire-2);margin:0;font-size:.96rem}
.finale{text-align:center;padding:clamp(34px,6vw,64px) clamp(20px,4vw,44px);
  border-radius:20px;border:1px solid var(--hair);
  background:linear-gradient(160deg,rgba(242,201,76,.09),rgba(255,255,255,.02))}
.finale h2{font-family:var(--serif);font-weight:500;font-size:clamp(1.8rem,4.4vw,2.9rem);margin:0 0 14px}
.finale p{color:var(--ivoire-2);max-width:46ch;margin:0 auto 28px}

/* ── CTA collante mobile ────────────────────────────────────────────────
   Sur un parcours de six écrans, la CTA ne doit jamais être « plus haut ».
   Elle n'apparaît qu'après le premier écran, pour ne pas doubler le héros. */
.stickycta{position:fixed;left:0;right:0;bottom:0;z-index:60;display:none;
  padding:10px 14px calc(10px + env(safe-area-inset-bottom));
  background:rgba(11,10,8,.93);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
  border-top:1px solid var(--hair-soft);
  transform:translateY(110%);transition:transform .28s ease}
.stickycta.on{transform:none}
.stickycta a{display:block;text-align:center}
@media(max-width:860px){.stickycta{display:block}body{padding-bottom:0}}
@media(prefers-reduced-motion:reduce){.stickycta{transition:none}}