/* screens.css — styles par écran v4. Classes scopées par page (inoffensif si chargé partout). */

/* ============================================================= ÉCRAN 1 — LANGUE */
.lang{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:24px 26px 40px;text-align:center}
.lang__title{font-family:"Fraunces",serif;font-weight:600;font-size:24px;color:var(--indigo-deep);line-height:1.15}
.lang__sub{font-family:"Fraunces",serif;font-weight:600;font-size:18px;color:var(--indigo);opacity:.7;margin-top:2px}
.lang__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:13px;margin-top:40px;width:100%}
.lang-btn{
  background:linear-gradient(160deg,#edecf6,#e1e1f0);
  border:1px solid #d6d6ea;border-radius:16px;cursor:pointer;
  padding:16px 6px 13px;display:flex;flex-direction:column;align-items:center;gap:2px;
  transition:transform .15s var(--ease),box-shadow .2s,border-color .2s;
  font-family:inherit;position:relative;
}
.lang-btn:hover{transform:translateY(-3px);box-shadow:0 16px 30px -18px rgba(63,61,119,.6);border-color:var(--lav)}
.lang-btn__code{font-weight:700;font-size:16px;color:var(--indigo-deep);letter-spacing:.02em}
.lang-btn__name{font-size:12px;color:var(--muted)}
.lang-btn__soon{position:absolute;top:6px;right:6px;font-size:8px;font-weight:700;letter-spacing:.05em;
  background:var(--lav);color:#fff;padding:2px 6px;border-radius:99px}

/* ============================================================= ÉCRAN 2 — INTRO */
.screen--violet{
  background:
    radial-gradient(110% 70% at 50% 0%, #908dce 0%, transparent 60%),
    linear-gradient(170deg,#807dc3,#605da6 52%,#4d4a93);
}
.snow{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:1}
.snow i{position:absolute;top:-20px;color:rgba(255,255,255,.92);animation:fall linear infinite;will-change:transform,opacity;text-shadow:0 0 6px rgba(255,255,255,.4)}
@keyframes fall{0%{transform:translateY(-20px) rotate(0);opacity:0}10%{opacity:.95}100%{transform:translateY(860px) rotate(240deg);opacity:.2}}

/* sections pleine page (hero plein écran, suite au scroll) */
.fullpage{min-height:100%;display:flex;flex-direction:column;justify-content:center;align-items:center;position:relative}
.chev{margin-top:auto;padding-top:14px;font-size:26px;line-height:1;animation:bob 1.6s ease-in-out infinite;cursor:pointer;opacity:.8}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(6px)}}

.intro-hero{padding:18px 26px 22px;color:#eceaf6;z-index:2}
.intro__kicker{font-family:"Fraunces",serif;font-style:italic;font-weight:600;font-size:23px;color:#e3e1f6;text-align:center}
.intro__title{font-family:"Fraunces",serif;font-weight:600;font-size:52px;line-height:.95;letter-spacing:.02em;color:#fff;text-align:center;margin:2px 0}
.intro__script{font-family:"Pacifico",cursive;font-size:30px;line-height:1.15;color:#d7d5f2;text-align:center;margin-top:4px}
.intro__body{font-size:13.5px;line-height:1.72;color:#dedcf2;text-align:center;margin:26px auto 0;max-width:312px}
/* CTA déplacé après la description → force le scroll pour l'atteindre */
.intro-cta{display:flex;justify-content:center;padding:30px 26px 10px}
.intro__cta{margin:0;font-size:16px;padding:15px 30px}
.intro__cta.btn--solid{background:rgba(255,255,255,.18);border:1.5px solid rgba(255,255,255,.5);backdrop-filter:blur(4px)}
.intro__cta.btn--solid:hover{background:rgba(255,255,255,.28)}

.contains-section{padding:18px 20px 30px;z-index:2;position:relative}
.contains{background:linear-gradient(165deg,#454379,#322f5d);border-radius:24px;padding:24px 18px 22px;box-shadow:0 24px 50px -26px rgba(0,0,0,.65)}
.contains__title{font-family:"Fraunces",serif;font-weight:600;font-size:21px;color:#fff;text-align:center}
.contains__row{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin-top:20px}
.contains__cell{display:flex;flex-direction:column;align-items:center;gap:9px;text-align:center}
.contains__ico{width:46px;height:46px;color:#d5d3f0}
.contains__ico svg{width:100%;height:100%;fill:none;stroke:currentColor;stroke-width:1.5}
.contains__txt{font-size:11px;color:#e7e6f6;line-height:1.25;white-space:nowrap}
.contains__txt b{font-weight:700;font-size:14px;color:#fff;display:block}
.contains__note{font-size:11px;font-style:italic;line-height:1.55;color:#c8c6e6;text-align:center;margin-top:20px}

/* ============================================================= ÉCRAN 3 — ÉDITIONS */
.eds{flex:1;padding:4px 16px 18px}
.eds__title{font-family:"Fraunces",serif;font-weight:600;font-size:18px;color:var(--indigo-deep);text-align:center;line-height:1.18;text-wrap:balance;max-width:15em;margin:0 auto}
.eds__sub{font-family:"Fraunces",serif;font-weight:600;font-size:14px;color:var(--indigo);opacity:.65;text-align:center;margin-bottom:14px}
.ed-card{
  background:linear-gradient(165deg,#e7e7f4,#dedef0);border:1px solid #d4d4ea;border-radius:20px;
  padding:12px 13px 11px;margin-bottom:12px;cursor:pointer;position:relative;
  transition:transform .16s var(--ease),box-shadow .2s,border-color .2s;
}
.ed-card:hover{transform:translateY(-3px);box-shadow:0 22px 44px -24px rgba(63,61,119,.55);border-color:var(--lav)}
.ed-card__top{display:flex;gap:13px;align-items:flex-start}
.ed-card__shot{flex:0 0 78px;width:78px;height:78px;border-radius:13px;overflow:hidden;
  background:linear-gradient(150deg,#4a4a82,#312f5b);display:flex;align-items:center;justify-content:center}
.ed-card__shot img{width:100%;height:100%;object-fit:cover}
.ed-card__shot .ph{color:#b9b8dc;font-size:10px;text-align:center;padding:6px;line-height:1.3}
.ed-card__meta{flex:1;min-width:0;padding-top:2px}
.ed-card__name{font-family:"Fraunces",serif;font-weight:600;font-size:17px;color:var(--indigo-deep);line-height:1.1}
.ed-card__price{font-weight:700;font-size:13px;color:var(--indigo);margin:1px 0 1px}
.ed-card__products{font-size:11px;color:var(--muted)}
.ed-card__cutouts{display:flex;gap:5px;margin-top:8px}
.ed-card__cutouts img{height:42px;width:auto;object-fit:contain;filter:drop-shadow(0 5px 7px rgba(63,61,119,.25))}
.ed-card__cta{margin-top:10px;display:block;width:100%;text-align:center;background:#cdcde6;color:var(--indigo-deep);
  font-weight:600;font-size:13px;padding:9px;border-radius:99px;transition:background .15s}
.ed-card:hover .ed-card__cta{background:var(--indigo-deep);color:#fff}

/* ============================================================= ÉCRAN 4 — GRILLE */
.grid-hero{padding:16px 24px 16px;text-align:center}      /* fullpage via .fullpage */
.grid-hero__kicker{font-family:"Fraunces",serif;font-weight:600;font-size:21px;color:var(--indigo-deep);line-height:1}
.grid-hero__script{font-family:"Pacifico",cursive;font-size:42px;color:var(--indigo);line-height:1.18;margin-top:4px}
.grid-hero__shot{margin:18px auto 0;width:min(72%,230px);aspect-ratio:1/1;border-radius:18px;overflow:hidden;
  background:linear-gradient(150deg,#4a4a82,#2f2d57);display:flex;align-items:center;justify-content:center;
  box-shadow:0 26px 50px -26px rgba(47,45,87,.7)}
.grid-hero__shot img{width:100%;height:100%;object-fit:cover}
.grid-hero__shot .ph{color:#bdbcde;font-size:12px;text-align:center;padding:14px;line-height:1.4}
.grid-hero__n{font-family:"Fraunces",serif;font-weight:600;font-size:21px;color:var(--indigo-deep);margin-top:18px}
.grid-hero__sub{font-size:13px;color:var(--muted);margin-top:2px}
.grid-hero__chev{color:var(--indigo);font-size:24px;animation:bob 1.6s ease-in-out infinite;cursor:pointer}

.spoiler{margin:14px 22px 6px;background:#fff;border:1px solid #f0c6da;border-radius:16px;padding:12px 14px;
  box-shadow:0 14px 30px -20px rgba(233,75,138,.5);display:flex;align-items:center;gap:12px}
.spoiler__txt{flex:1}
.spoiler__title{font-weight:700;font-size:13px;color:var(--rose)}
.spoiler__hint{font-size:11px;color:var(--muted)}
.switch{position:relative;width:46px;height:26px;flex:0 0 auto}
.switch input{position:absolute;opacity:0;width:100%;height:100%;margin:0;cursor:pointer}
.switch__track{position:absolute;inset:0;background:#d8d8e8;border-radius:99px;transition:background .2s}
.switch__track::after{content:"";position:absolute;top:3px;left:3px;width:20px;height:20px;background:#fff;border-radius:50%;transition:transform .2s;box-shadow:0 2px 4px rgba(0,0,0,.2)}
.switch input:checked + .switch__track{background:var(--rose)}
.switch input:checked + .switch__track::after{transform:translateX(20px)}

.grid-reveal{padding-bottom:6px}
.mosaic{display:grid;grid-template-columns:repeat(12,1fr);grid-auto-rows:1fr;gap:7px;
  padding:12px 14px 10px;aspect-ratio:12/17}
.case{border:none;border-radius:12px;cursor:pointer;position:relative;overflow:hidden;
  transition:transform .15s var(--ease),box-shadow .2s,filter .2s}
/* numéro serif italique, position alternée (moins normé) */
.case__n{position:absolute;z-index:2;
  font-family:"Fraunces",serif;font-style:italic;font-weight:600;font-size:clamp(13px,4.6vw,18px);line-height:1}
.case__n--tl{top:6px;left:9px}
.case__n--tr{top:6px;right:10px}
.case__n--bl{bottom:6px;left:9px}
.case__n--br{bottom:6px;right:10px}
.case__n--c{top:50%;left:50%;transform:translate(-50%,-50%)}
/* cases ACTIVES = dégradé vertical, numéro indigo foncé */
.case--open{background:linear-gradient(180deg,#edecf6 0%,#b9bce0 60%,#9498c9 100%)}
.case--open .case__n{color:var(--indigo-deep)}
.case--b.case--open{background:linear-gradient(180deg,#f1f0f8 0%,#c4c6e6 60%,#a3a6d2 100%)}
.case--open:hover{transform:scale(1.03);box-shadow:0 14px 26px -14px rgba(63,61,119,.55);filter:brightness(1.03);z-index:3}
/* cases INACTIVES = aplat uni, numéro estompé, pas de cadenas */
.case--locked{background:#d3d3e1;cursor:not-allowed}
.case--locked .case__n{color:#a6a6c0}
/* AUJOURD'HUI = case pleine indigo, numéro blanc, label discret */
.case--open.case--today{background:linear-gradient(180deg,#4a4f87,#34325f)}
.case--open.case--today .case__n{color:#fff}
.case__tag{position:absolute;bottom:7px;left:0;right:0;z-index:2;text-align:center;
  font-family:"Inter",sans-serif;font-size:8.5px;font-weight:500;letter-spacing:.02em;color:rgba(255,255,255,.85)}
.case__spark{display:none}
.grid-foot{text-align:center;font-size:12px;color:var(--muted);padding:6px 0 10px}

/* popup-gate « spoiler alert » sur case verrouillée */
.gate{position:absolute;inset:0;z-index:70;display:flex;align-items:center;justify-content:center;
  background:rgba(40,38,70,.45);backdrop-filter:blur(2px);opacity:0;transition:opacity .2s}
.gate.is-in{opacity:1}
.gate__card{background:#fff;border-radius:22px;padding:24px 22px 18px;width:82%;max-width:280px;text-align:center;
  box-shadow:0 34px 60px -22px rgba(40,38,70,.55);transform:translateY(10px) scale(.96);transition:transform .22s var(--ease)}
.gate.is-in .gate__card{transform:none}
.gate__title{font-family:"Fraunces",serif;font-weight:600;font-size:23px;color:var(--indigo-deep);margin-bottom:18px}
.gate__go{display:block;width:100%;background:var(--indigo);color:#fff;border:none;border-radius:99px;
  padding:13px;font-family:"Inter",sans-serif;font-weight:600;font-size:14px;cursor:pointer;
  box-shadow:0 12px 24px -12px rgba(90,97,143,.7);transition:filter .15s,transform .15s}
.gate__go:hover{filter:brightness(1.08);transform:translateY(-1px)}
.gate__cancel{display:block;margin:13px auto 2px;background:none;border:none;color:var(--muted);
  font-family:"Inter",sans-serif;font-size:13px;font-weight:600;cursor:pointer}
.gate__cancel:hover{color:var(--indigo-deep)}

/* barre démo */
.demobar{flex:0 0 auto;background:rgba(255,255,255,.92);backdrop-filter:blur(6px);border-top:1px solid #e0e0ee;
  padding:9px 16px;display:flex;align-items:center;gap:10px;font-size:11px;color:var(--indigo-deep)}
.demobar__lbl{font-weight:700;white-space:nowrap;letter-spacing:.02em}
.demobar input[type=range]{flex:1;accent-color:var(--indigo)}
.demobar__val{font-weight:700;min-width:18px;text-align:center}
.demobar__spoil{display:flex;align-items:center;gap:5px;white-space:nowrap;cursor:pointer}

/* révélation : la case grandit + voile de marque (transition chic, sans confettis) */
.reveal{position:absolute;z-index:55;border-radius:12px;overflow:hidden;background-size:cover;background-position:center;
  box-shadow:0 30px 60px -20px rgba(40,38,70,.5);will-change:left,top,width,height,border-radius}
.reveal--grow{transition:left .55s var(--ease),top .55s var(--ease),width .55s var(--ease),height .55s var(--ease),border-radius .55s var(--ease);border-radius:0}
.veil{position:absolute;inset:0;z-index:58;opacity:0;pointer-events:none;
  background:radial-gradient(120% 90% at 50% 40%, #6360a8 0%, #3a3768 55%, #2b2950 100%);
  transition:opacity .45s ease}
.veil--in{opacity:1}

/* ============================================================= ÉCRAN 5 — JOUR */
.day{flex:1}
.day-hero{position:relative;padding:14px 24px 16px;text-align:center;
  background:radial-gradient(120% 70% at 50% 14%,#eceafa,transparent 62%)}
.day-hero .chev{color:var(--indigo)}
.day-hero .day-title{margin-top:8px}
.day-hero__label{font-family:"Fraunces",serif;font-weight:600;font-size:19px;color:var(--indigo-deep)}
.day-hero__script{font-family:"Pacifico",cursive;font-size:36px;color:var(--indigo);line-height:1.15;margin-top:2px}
.day-visual{position:relative;margin:6px auto 0;width:min(86%,300px);aspect-ratio:1/1;display:flex;align-items:center;justify-content:center}
.day-visual::before{content:"";position:absolute;inset:-6% -2% auto;top:8%;height:84%;z-index:0;
  background:radial-gradient(circle at 50% 45%,rgba(122,127,180,.28),transparent 62%)}
.day-visual__splash{position:absolute;inset:0;z-index:0;pointer-events:none}
.day-visual img{position:relative;z-index:2;max-width:100%;max-height:100%;object-fit:contain;filter:drop-shadow(0 18px 26px rgba(63,61,119,.35))}
.day-visual__ph{position:relative;z-index:2;width:62%;aspect-ratio:1/1;border-radius:24px;
  background:linear-gradient(150deg,#7a7fb4,#5a618f);display:flex;align-items:center;justify-content:center;
  font-family:"Fraunces",serif;font-size:60px;color:rgba(255,255,255,.85)}

.day-body{padding:10px 26px 34px;text-align:center}
/* le défi = un gage/jeu, mis en avant (pas une description produit) : titre + texte dans la carte */
.defi{margin:16px auto 14px;max-width:332px;background:linear-gradient(165deg,#ecebf8,#e1e1f2);
  border:1px solid #d9d9ea;border-radius:16px;padding:16px 18px 15px;box-shadow:0 14px 30px -22px rgba(63,61,119,.5)}
.defi__tag{display:inline-block;font-family:"Inter",sans-serif;font-size:10.5px;font-weight:700;letter-spacing:.07em;
  text-transform:uppercase;color:#fff;background:var(--indigo);padding:4px 12px;border-radius:99px;margin-bottom:10px}
.defi__name{font-family:"Fraunces",serif;font-weight:600;font-size:19px;letter-spacing:.03em;text-transform:uppercase;
  color:var(--indigo-deep);line-height:1.15;margin-bottom:8px}
.day-challenge{font-size:13px;line-height:1.62;color:var(--ink);margin:0 auto;max-width:320px}
.day-guide{margin:14px 0 8px;display:inline-block}

.section{margin-top:26px;text-align:left}
.section__t{font-family:"Fraunces",serif;font-weight:600;font-size:15px;color:var(--indigo-deep);margin-bottom:10px}
.video{position:relative;width:100%;aspect-ratio:9/16;max-height:340px;border-radius:16px;overflow:hidden;background:#000;margin:0 auto}
.video iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.section__t--center{text-align:center}

/* pastilles « story » (comment utiliser & entretenir) — teinte DA, pas rose Insta */
.stories{display:flex;justify-content:center;gap:18px;flex-wrap:wrap}
.story{background:none;border:none;cursor:pointer;padding:0}
.story__ring{position:relative;display:flex;width:86px;height:86px;border-radius:50%;padding:3px;
  background:linear-gradient(150deg,#8a8fc4,#5a618f 55%,#3E4470);
  box-shadow:0 12px 24px -12px rgba(63,61,119,.55);transition:transform .15s var(--ease)}
.story:hover .story__ring{transform:scale(1.05)}
.story__ring img{width:100%;height:100%;border-radius:50%;object-fit:cover;border:2.5px solid #fff;background:#5a618f}
.story__play{position:absolute;inset:3px;display:flex;align-items:center;justify-content:center;
  color:#fff;font-size:19px;border-radius:50%;text-shadow:0 1px 5px rgba(0,0,0,.5);pointer-events:none}

/* galerie de visuels alternatifs — 2 par ligne */
.gallery{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.gallery img{width:100%;aspect-ratio:1/1;object-fit:cover;border-radius:14px;background:#eceaf4;
  box-shadow:0 10px 22px -14px rgba(63,61,119,.4)}

/* lightbox de lecture d'un short */
.lightbox{position:absolute;inset:0;z-index:80;display:flex;align-items:center;justify-content:center;
  background:rgba(20,18,40,.72);backdrop-filter:blur(3px);opacity:0;transition:opacity .2s}
.lightbox.is-in{opacity:1}
.lightbox__short{position:relative;width:78%;max-width:300px;aspect-ratio:9/16;border-radius:18px;overflow:hidden;
  background:#000;box-shadow:0 30px 60px -20px rgba(0,0,0,.7);transform:scale(.96);transition:transform .2s var(--ease)}
.lightbox.is-in .lightbox__short{transform:none}
.lightbox__short iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.lightbox__close{position:absolute;top:8px;right:10px;z-index:2;width:30px;height:30px;border-radius:50%;
  border:none;background:rgba(255,255,255,.92);color:#23243a;font-size:20px;line-height:1;cursor:pointer}

.reviews__head{display:flex;align-items:center;gap:8px;margin-bottom:10px}
.reviews__head .h{font-family:"Fraunces",serif;font-weight:600;font-size:15px;color:var(--indigo-deep)}
.reviews__head .s{color:#f0b429;font-size:13px}
.reviews__head .c{font-size:11px;color:var(--muted)}
.review{background:#f1f0f8;border-radius:14px;padding:11px 13px;margin-bottom:8px}
.review__top{display:flex;align-items:center;gap:8px;margin-bottom:4px}
.review__av{width:24px;height:24px;border-radius:50%;background:var(--indigo);color:#fff;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:700}
.review__name{font-weight:600;font-size:12px;color:var(--indigo-deep);flex:1}
.review__stars{color:#f0b429;font-size:11px}
.review__txt{font-size:12px;color:var(--ink);line-height:1.45}

.day-cta{display:flex;flex-direction:column;gap:9px;margin-top:22px}
.crosssell{margin-top:22px;background:linear-gradient(160deg,#e9e8f5,#dedef0);border-radius:18px;padding:16px;text-align:center}
.crosssell h4{font-family:"Fraunces",serif;font-weight:600;font-size:15px;color:var(--indigo-deep)}
.crosssell p{font-size:12px;color:var(--muted);margin:4px 0 11px}