/* Eden — « Une seconde vie pour le verre » en film au défilement.
   Scènes plein écran (100svh), scènes épinglées pilotées par le défilement (data-step),
   fond coloré continu qui prend la teinte du verre raconté. */

html.rse-snap{scroll-snap-type:y proximity}
/* Le thème pose overflow-x:hidden sur html/body, ce qui fait de body un conteneur de défilement
   et casse position:sticky. clip coupe le débordement sans créer de conteneur. */
html.rse-snap,body.rse-film{overflow:visible;overflow-x:clip}
body.rse-film .eden-main{padding-top:0}
.rse-film{--f-ivoire:#F6F0E7;--f-champ:#B89B6A;--f-champ-clair:#D9C39A;--f-ease:cubic-bezier(.22,1,.36,1);--f-step:70svh;
  position:relative;color:var(--f-ivoire);background:transparent;font-family:'Schibsted Grotesk','Helvetica Neue',Arial,sans-serif}
@supports not (height:1svh){.rse-film{--f-step:70vh}}
.rse-film *{box-sizing:border-box}

/* Fond continu */
.f-backdrop{position:fixed;inset:0;z-index:-1;background:#183425;transition:background-color 1.4s var(--f-ease)}
body.rse-film{background:#183425}

/* En-tête du site : transparent sur l'ouverture, réduit ensuite */
body.rse-film .eden-header{background:transparent;backdrop-filter:none;border-bottom-color:transparent;transition:background .5s,backdrop-filter .5s}
body.rse-film .eden-header .header-top{display:none}
body.rse-film .eden-header .logo,body.rse-film .eden-header .header-side a,body.rse-film .eden-header .header-side{color:var(--f-ivoire)}
body.rse-film .eden-header .logo-subtitle{color:rgba(246,240,231,.7)}
body.rse-film .eden-burger span{background:var(--f-ivoire)}
body.rse-film.f-compact .eden-header{background:rgba(15,14,13,.55);backdrop-filter:blur(14px)}
body.rse-film.f-compact .eden-header .header-main{padding-top:12px;padding-bottom:12px}
body.rse-film.f-compact .eden-header .logo-subtitle{display:none}
@media (min-width:901px){
  body.rse-film .eden-nav{border-top-color:rgba(246,240,231,.18)}
  body.rse-film .eden-nav-menu a{color:var(--f-ivoire)}
  body.rse-film.f-compact .eden-nav{display:none}
}

/* Scènes */
.f-scene{position:relative;min-height:100svh;min-height:100vh;display:flex;align-items:center;overflow:hidden;scroll-snap-align:start}
@supports (height:1svh){.f-scene{min-height:100svh}}
.f-pin{position:relative;height:calc(100svh + (var(--steps) - 1) * var(--f-step))}
.f-stage{position:sticky;top:0;height:100svh;overflow:hidden;display:flex;align-items:center;justify-content:center}
.f-mark{position:absolute;left:0;width:1px;height:1px;scroll-snap-align:start;pointer-events:none}
.f-bg{position:absolute;inset:0;z-index:0}
.f-bg img,.f-bg video{width:100%;height:100%;object-fit:cover;display:block}
.f-veil{position:absolute;inset:0;z-index:1;pointer-events:none}
.f-content{position:relative;z-index:2;width:100%;max-width:1240px;margin:0 auto;padding:0 clamp(22px,5vw,64px)}
.f-center{text-align:center}

/* Typo */
.f-eyebrow{font-size:12px;letter-spacing:.32em;text-transform:uppercase;color:var(--f-champ-clair);margin:0 0 22px}
.f-title{font-family:'Cormorant Garamond',Georgia,serif;font-weight:400;line-height:1.02;margin:0;text-wrap:balance}
.f-xl{font-size:clamp(52px,9vw,128px)}
.f-l{font-size:clamp(40px,6.4vw,92px)}
.f-m{font-size:clamp(30px,4.2vw,58px)}
.f-title em{font-style:italic;color:var(--f-champ-clair)}
.f-sub{font-size:clamp(17px,1.6vw,20px);line-height:1.6;max-width:30em;opacity:.92;margin:26px 0 0}
.f-center .f-sub{margin-inline:auto}
.f-note{font-size:12.5px;letter-spacing:.04em;opacity:.7;margin-top:18px}
.f-crumb{display:inline-block;margin-bottom:34px;font-size:12.5px;letter-spacing:.24em;text-transform:uppercase;color:var(--f-ivoire);text-decoration:none;opacity:.8}
.f-crumb:hover{opacity:1}
.f-down{display:inline-flex;align-items:center;gap:12px;margin-top:40px;font-size:12px;letter-spacing:.26em;text-transform:uppercase;color:var(--f-ivoire);text-decoration:none;border-bottom:1px solid rgba(217,195,154,.6);padding-bottom:6px}
.f-down span{display:inline-block;animation:f-bob 2.4s var(--f-ease) infinite}
@keyframes f-bob{0%,100%{transform:translateY(0)}50%{transform:translateY(5px)}}

/* Apparitions pilotées par l'étape (data-on / data-off → .on) */
.f-step{opacity:0;transform:translateY(26px);transition:opacity .9s var(--f-ease),transform .9s var(--f-ease)}
.f-step.on{opacity:1;transform:none}
.f-step.gone{opacity:0;transform:translateY(-30px)}
.f-stack{position:relative;display:grid}
.f-stack>*{grid-area:1/1}
.f-reveal{opacity:0;transform:translateY(24px);transition:opacity 1.1s var(--f-ease),transform 1.1s var(--f-ease)}
.f-reveal.in{opacity:1;transform:none}

/* Reflet lumineux discret sur les grands mots */
.f-shine{background:linear-gradient(100deg,var(--f-ivoire) 0%,var(--f-ivoire) 42%,#fff8e6 50%,var(--f-ivoire) 58%,var(--f-ivoire) 100%);background-size:250% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:f-shine 7s ease-in-out infinite}
@keyframes f-shine{0%{background-position:120% 0}60%,100%{background-position:-20% 0}}

/* S1 Ouverture */
.s-open .f-bg video{transform:scale(1.04)}
@keyframes f-zoom{to{transform:scale(1)}}
.s-open .f-veil{background:radial-gradient(ellipse at 30% 60%,rgba(10,22,15,.35),rgba(10,22,15,.82) 75%),linear-gradient(180deg,rgba(10,22,15,.4),rgba(10,22,15,.2) 40%,rgba(10,22,15,.85))}

/* S2 D'où elles viennent : lumière de verre en mouvement */
.s-origin .f-bg{background:radial-gradient(circle at 20% 30%,rgba(64,107,50,.55),transparent 45%),radial-gradient(circle at 80% 70%,rgba(123,69,31,.45),transparent 50%),#0f2218}
.s-origin .f-bg::before,.s-origin .f-bg::after{content:"";position:absolute;inset:-20%;background:linear-gradient(115deg,transparent 40%,rgba(255,244,214,.08) 48%,rgba(255,244,214,.18) 50%,rgba(255,244,214,.08) 52%,transparent 60%);animation:f-sweep 9s ease-in-out infinite}
.s-origin .f-bg::after{animation-delay:-4.5s;opacity:.6;transform:scaleX(-1)}
.s-origin .f-bg video{position:absolute;inset:0;opacity:0;transform:none;transition:opacity 1.4s var(--f-ease)}
.s-origin .f-bg video.on{opacity:1}
.s-origin .f-veil{background:radial-gradient(ellipse at 50% 45%,rgba(12,24,16,.35),rgba(12,24,16,.78) 75%),linear-gradient(180deg,rgba(12,24,16,.5),rgba(12,24,16,.2) 45%,rgba(12,24,16,.7))}
@keyframes f-sweep{0%{transform:translateX(-30%)}50%{transform:translateX(30%)}100%{transform:translateX(-30%)}}

/* S3 Ce que nous recherchons */
.s-search .f-bg{background:linear-gradient(90deg,#e8dfd6,#eae1d8 50%,#eee7df)}
.s-search .f-bg img{position:absolute;left:0;right:0;bottom:0;height:72%;width:100%;object-fit:contain;object-position:50% 100%;-webkit-mask-image:radial-gradient(ellipse 46% 62% at 50% 62%,#000 70%,transparent 100%);mask-image:radial-gradient(ellipse 46% 62% at 50% 62%,#000 70%,transparent 100%)}
.s-search .f-veil{background:linear-gradient(180deg,rgba(233,226,214,0) 70%,rgba(233,226,214,.35) 100%)}
.s-search .f-eyebrow{color:#6b5530}
.s-search .f-stage{align-items:flex-start}
.s-search .f-content{padding-top:clamp(120px,17vh,170px)}
.s-search .f-words{display:flex;justify-content:center;gap:clamp(18px,3.4vw,56px);flex-wrap:nowrap;white-space:nowrap}
.s-search .f-words .f-title{color:#2b2a14;font-size:clamp(30px,4.4vw,64px);letter-spacing:.06em}
.s-search .f-tail{position:relative;z-index:2;text-align:center;font-size:clamp(15px,1.3vw,18px);color:#4a3f2a;margin:16px 0 0}

/* S4 Transformation : le décor reste, le défilement le parcourt */
.s-trans .f-bg{background:#ece6dc}
.s-trans .f-bg>*{position:absolute;inset:0;opacity:0;transform:none;transition:opacity 1.2s var(--f-ease)}
.s-trans .f-bg>.on{opacity:1}
.s-trans .f-bg img{transform-origin:92% 55%;transform:scale(1);transition:opacity 1.2s var(--f-ease),transform 7s var(--f-ease)}
.s-trans .f-bg img.on{transform:scale(1.35)}
.s-trans .f-veil{background:linear-gradient(180deg,rgba(36,22,14,.55) 0%,rgba(36,22,14,0) 30%,rgba(36,22,14,0) 62%,rgba(36,22,14,.7) 100%)}
.s-trans .f-stage{align-items:flex-end}
.s-trans .f-content{padding-bottom:clamp(40px,9vh,90px)}
.s-trans .f-title{font-size:clamp(46px,8vw,118px);letter-spacing:.08em;text-shadow:0 2px 30px rgba(20,12,6,.45)}
.s-trans .f-caption{display:block;margin-top:10px;font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--f-ivoire);opacity:.75}

/* S5 Ce qu'elles peuvent devenir */
.s-become .f-bg img{position:absolute;inset:0;object-position:50% 58%;opacity:0;transform:scale(1.08);transition:opacity 1.6s var(--f-ease),transform 9s linear}
.s-become .f-bg img.on{opacity:1;transform:scale(1)}
.s-become .f-veil{background:linear-gradient(90deg,rgba(40,22,10,.82) 0%,rgba(40,22,10,.45) 42%,rgba(40,22,10,0) 70%),linear-gradient(0deg,rgba(40,22,10,.5),rgba(40,22,10,0) 35%)}
.s-become .f-content{max-width:1240px}
.s-become .f-title{max-width:8.5em}

/* S7 Presque rien : cartons de fin de film */
.s-ask .f-bg{background:radial-gradient(ellipse at 50% 40%,#1f3d2b,#0d1c13 70%)}
.s-ask .f-head{position:absolute;top:clamp(110px,18vh,170px);left:0;right:0;text-align:center;transition:opacity .8s,transform .8s var(--f-ease)}
.s-ask .f-head .f-eyebrow{margin-bottom:10px}
.s-ask .f-head .f-title{font-size:clamp(26px,3vw,38px);color:var(--f-champ-clair)}
.s-ask .f-stack .f-title{font-size:clamp(40px,6.6vw,96px)}

/* S8 Fonctionnement */
.s-how .f-bg{background:linear-gradient(160deg,#2f5226,#183425 70%)}
.s-how .f-num{font-family:'Cormorant Garamond',Georgia,serif;font-size:clamp(110px,20vw,260px);line-height:.8;color:var(--f-champ-clair);opacity:.9}
.s-how .f-stack .f-title{font-size:clamp(34px,5vw,72px);max-width:12em;margin:18px auto 0}
.s-how .f-dots{position:absolute;bottom:clamp(30px,7vh,60px);left:0;right:0;display:flex;justify-content:center;gap:10px;z-index:2}
.s-how .f-dots i{width:34px;height:2px;background:rgba(246,240,231,.25);transition:background .6s}
.s-how .f-dots i.on{background:var(--f-champ-clair)}
.s-how .f-label{position:absolute;top:clamp(110px,18vh,170px);left:0;right:0;text-align:center;z-index:2}

/* S9 Conversion */
.s-cta{background:var(--f-ivoire);color:#1b1a17}
.s-cta .f-title{color:#1b1a17}
.s-cta .f-title em{color:#8a6f3f}
.s-cta .f-eyebrow{color:#7A5C33}
.f-btn{display:inline-flex;align-items:center;gap:12px;margin-top:40px;padding:20px 34px;font-family:inherit;font-size:13px;font-weight:500;letter-spacing:.22em;text-transform:uppercase;background:#1b1a17;color:var(--f-ivoire);border:1px solid #1b1a17;cursor:pointer;transition:background .3s,color .3s}
.f-btn:hover{background:transparent;color:#1b1a17}
.s-cta .f-contact{margin-top:28px;font-size:14px;color:#5d574f}
.s-cta .f-contact a{color:inherit}

/* FAQ, hors récit */
.f-faq{background:var(--f-ivoire);color:#1b1a17;padding:clamp(56px,8vw,96px) 0 clamp(70px,9vw,110px);border-top:1px solid #e4dccd}
.f-faq .f-content{max-width:780px}
.f-faq h2{font-family:'Cormorant Garamond',Georgia,serif;font-weight:400;font-size:clamp(30px,3.4vw,42px);margin:0 0 20px}
.f-faq details{border-top:1px solid #e4dccd}
.f-faq details:last-of-type{border-bottom:1px solid #e4dccd}
.f-faq summary{list-style:none;cursor:pointer;padding:16px 36px 16px 0;position:relative;font-size:16px}
.f-faq summary::-webkit-details-marker{display:none}
.f-faq summary::after{content:"+";position:absolute;right:4px;top:50%;transform:translateY(-50%);color:#8a6f3f;font-size:20px}
.f-faq details[open] summary::after{content:"–"}
.f-faq details p{margin:0 0 18px;color:#5d574f;font-size:15px;line-height:1.65;max-width:40em}

/* Panneau latéral : formulaire */
.f-panel{position:fixed;inset:0 0 0 auto;width:min(560px,100%);max-width:100%;height:100%;max-height:100%;margin:0 0 0 auto;padding:0;border:0;background:var(--f-ivoire);color:#1b1a17;box-shadow:-30px 0 80px rgba(0,0,0,.25);overflow:auto}
.f-panel::backdrop{background:rgba(10,18,13,.55);backdrop-filter:blur(3px)}
.f-panel[open]{animation:f-slide .55s var(--f-ease)}
@keyframes f-slide{from{transform:translateX(40px);opacity:0}to{transform:none;opacity:1}}
.f-panel .f-panel-in{padding:clamp(26px,5vw,44px)}
.f-panel h2{font-family:'Cormorant Garamond',Georgia,serif;font-weight:400;font-size:34px;line-height:1.1;margin:0 0 10px;padding-right:40px}
.f-panel .f-close{position:absolute;top:18px;right:18px;width:42px;height:42px;border:1px solid #e4dccd;background:transparent;font-size:22px;cursor:pointer;color:#1b1a17}
.f-panel .rse{background:transparent}
.f-panel .builder{margin-top:20px}

@media (max-width:900px){
  .s-search .f-bg img{object-fit:contain;object-position:50% 62%}
  .s-search .f-bg{background:#555A22}
  .s-search .f-veil{background:none}
  .s-search .f-words .f-title{color:var(--f-ivoire);font-size:clamp(28px,8vw,40px)}
  .s-search .f-words{flex-wrap:wrap;white-space:normal;gap:6px 18px}
  .s-search .f-eyebrow{color:var(--f-champ-clair)}
  .s-search .f-tail{color:var(--f-ivoire)}
  .s-search .f-bg img{position:static;height:100%;-webkit-mask-image:none;mask-image:none}
  .s-trans .f-bg img{object-position:92% 60%;transform-origin:50% 60%}
  .s-become .f-veil{background:linear-gradient(0deg,rgba(40,22,10,.9) 0%,rgba(40,22,10,.55) 40%,rgba(40,22,10,0) 70%)}
  .s-become .f-stage{align-items:flex-end}
  .s-become .f-content{padding-bottom:clamp(40px,8vh,70px)}
}
@media (prefers-reduced-motion:reduce){
  .s-open .f-bg video,.f-shine,.f-down span,.s-origin .f-bg::before,.s-origin .f-bg::after{animation:none}
  .f-shine{color:var(--f-ivoire);background:none}
  .f-step,.f-reveal,.s-trans .f-bg img,.s-become .f-bg img{transition:opacity .3s}
  .s-become .f-bg img{transform:none}
  html.rse-snap{scroll-snap-type:none}
}

/* —— Ergonomie (contrôle multi-écrans du 02/10) —— */
/* Le contenu ne passe jamais sous l'en-tête : --f-hdr = hauteur réelle mesurée en JS */
.s-open .f-content{padding-top:calc(var(--f-hdr,170px) + 16px);padding-bottom:24px}
.f-stage,.s-cta{padding-top:var(--f-hdrc,60px);box-sizing:border-box}
.f-stage>.f-bg,.f-stage>.f-veil{top:0}
.f-links{display:flex;flex-wrap:wrap;gap:14px 30px;align-items:center;margin-top:36px}
.f-links .f-down{margin-top:0}
.f-skip{font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:rgba(246,240,231,.78);text-decoration:none;border-bottom:1px solid transparent;padding-bottom:6px}
.f-skip:hover,.f-skip:focus-visible{color:var(--f-ivoire);border-bottom-color:rgba(246,240,231,.5)}
/* Barre de progression du film */
.f-progress{position:fixed;left:0;top:var(--f-hdrc,60px);height:2px;width:100%;transform-origin:0 50%;transform:scaleX(0);background:var(--f-champ-clair);z-index:79;opacity:0;transition:opacity .4s}
body.f-compact .f-progress{opacity:.85}
/* Bouton permanent */
.f-float{position:fixed;right:clamp(14px,3vw,32px);bottom:clamp(14px,3vw,32px);z-index:78;display:inline-flex;align-items:center;gap:10px;padding:14px 20px;font:500 12px/1 'Schibsted Grotesk',Arial,sans-serif;letter-spacing:.16em;text-transform:uppercase;color:#1b1a17;background:var(--f-ivoire);border:0;border-radius:999px;box-shadow:0 10px 30px rgba(0,0,0,.28);cursor:pointer;opacity:0;transform:translateY(16px);pointer-events:none;transition:opacity .5s,transform .5s var(--f-ease)}
.f-float.show{opacity:1;transform:none;pointer-events:auto}
.f-float:focus-visible{outline:2px solid var(--f-champ);outline-offset:3px}

/* Scène 3 sur téléphone et tablette : image posée en bas, mots au-dessus */
@media (max-width:900px){
  .s-search .f-bg img{position:absolute;left:0;right:0;bottom:0;width:100%;height:56%;object-fit:cover;object-position:50% 70%}
  .s-search .f-content{padding-top:clamp(24px,5vh,48px)}
}
/* Écrans bas (téléphone à l'horizontale) */
@media (max-height:520px){
  .f-xl{font-size:clamp(34px,6vw,56px)}
  .f-l{font-size:clamp(28px,4.6vw,44px)}
  .f-m,.s-ask .f-stack .f-title,.s-how .f-stack .f-title{font-size:clamp(24px,3.6vw,36px)}
  .f-sub{font-size:15px;margin-top:12px}
  .f-eyebrow{margin-bottom:10px}
  .f-links{margin-top:16px}
  .f-crumb{margin-bottom:10px}
  .s-how .f-num{font-size:clamp(64px,12vw,110px)}
  .s-how .f-label,.s-ask .f-head{top:calc(var(--f-hdrc,60px) + 10px)}
  .s-search .f-bg img{height:50%;object-fit:contain}
  .s-search .f-words .f-title{font-size:clamp(22px,3.6vw,34px)}
  .s-search .f-words{flex-wrap:nowrap}
  .s-trans .f-title{font-size:clamp(36px,6vw,64px)}
  .s-become .f-content{padding-bottom:20px}
  .f-btn{margin-top:18px;padding:14px 26px}
  .s-cta .f-contact{margin-top:12px}
  .f-float{padding:10px 16px}
}
@media (prefers-reduced-motion:reduce){.f-float{transition:none}}

/* Formulaire réel */
.f-panel .f-hp{position:absolute!important;left:-9999px;width:1px;height:1px;overflow:hidden}
.f-panel .f-status{min-height:1.2em}
.f-panel .f-status.err{color:#9b2f1f}
.f-panel .r-btn[disabled]{opacity:.55;cursor:wait}
.f-panel .f-thanks h2{font-size:44px}
.f-panel input[aria-invalid="true"]{border-color:#9b2f1f}
.f-panel .f-form[hidden],.f-panel .f-thanks[hidden]{display:none!important}
.f-panel .f-thanks{padding-top:10px}
.f-panel .f-thanks:focus{outline:none}