/* ===========================================================
   COMPLÉMENTS À LA REFONTE DU SITE (09/2026) — chargé sur les 26 pages refaites.
   Ce fichier remet ce que la refonte avait fait disparaître, sans toucher
   aux feuilles reimagined-*.css : sélecteur de langue et de devise, fenêtres
   de choix, lien « Ouvrir l'appli » du menu, pastille « Support humain ».
   -----------------------------------------------------------
   Sélecteur de langue dans le nouvel en-tête clair (refonte 2026)
   Remis en place le 24/09/2026 : il avait disparu des 27 pages.
   L'ancien style (.lang-btn/.lang-globe de styles.css) était conçu
   pour un bandeau vert foncé ; ici l'en-tête est crème, donc on
   redéfinit les couleurs. Contraste des traits ≥ 2:1 (règle Tom).
   =========================================================== */
.lang-head{display:flex;align-items:center;gap:6px}
.lang-head .lang-btn,
.lang-head .lang-globe{
  display:inline-flex;align-items:center;justify-content:center;
  height:38px;min-width:38px;padding:0 12px;
  border:1.5px solid rgba(11,30,22,.34);
  background:transparent;color:#0B1E16;
  border-radius:9px;cursor:pointer;
  font-family:var(--t-mono,ui-monospace,monospace);
  font-size:12.5px;font-weight:700;letter-spacing:.06em;
  transition:border-color .2s,background .2s,color .2s}
.lang-head .lang-globe{width:38px;padding:0}
.lang-head .lang-btn:hover,
.lang-head .lang-globe:hover{
  border-color:#0FB36B;color:#0A8F57;background:rgba(15,179,107,.08)}
.lang-head .lang-btn:focus-visible,
.lang-head .lang-globe:focus-visible{
  outline:2px solid #0FB36B;outline-offset:2px}
/* Pied de page sombre : mêmes boutons, couleurs inversées */
.p-footer .lang-head .lang-btn,
.p-footer .lang-head .lang-globe{
  border-color:rgba(255,255,255,.34);color:#eafff6}
/* Fenêtres « choisir la langue » / « choisir la devise » : ces règles vivaient
   dans styles.css, que les pages refaites ne chargent plus. Couleurs reprises
   de la nouvelle charte (vert forêt #12382b, crème #f7f5ee, vert tendre #cee88c). */
.lang-head .cur-btn{display:inline-flex;align-items:center;justify-content:center;height:38px;min-width:38px;padding:0 11px;border:1.5px solid rgba(11,30,22,.34);background:transparent;color:#0B1E16;border-radius:9px;cursor:pointer;font-family:var(--t-mono,ui-monospace,monospace);font-size:13px;font-weight:700;transition:border-color .2s,background .2s,color .2s}
.lang-head .cur-btn:hover{border-color:#0FB36B;color:#0A8F57;background:rgba(15,179,107,.08)}
.lang-head .cur-btn:focus-visible{outline:2px solid #0FB36B;outline-offset:2px}
.langpop{position:fixed;inset:0;z-index:1000;display:flex;align-items:center;justify-content:center;padding:20px}
.langpop[hidden]{display:none}
.langpop-ov{position:absolute;inset:0;background:rgba(8,26,20,.66);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.langpop-card{position:relative;width:100%;max-width:560px;max-height:82vh;overflow-y:auto;background:#12382b;border:1px solid rgba(247,245,238,.24);border-radius:20px;padding:26px 24px;box-shadow:0 30px 80px -24px rgba(0,0,0,.6);color:#f7f5ee;font-family:var(--body,system-ui,sans-serif);text-align:left}
.langpop-card .mono-label{display:block;margin:0 0 16px;font-family:var(--t-mono,ui-monospace,monospace);font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:#cee88c}
.langpop-x{position:absolute;top:12px;right:14px;width:34px;height:34px;border:none;background:transparent;color:#c4d3ca;font-size:26px;line-height:1;cursor:pointer;border-radius:8px}
.langpop-x:hover{color:#fff;background:rgba(255,255,255,.08)}
.langpop-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.langopt,.curopt{display:flex;align-items:center;gap:9px;padding:12px 14px;border:1px solid rgba(247,245,238,.26);background:rgba(255,255,255,.04);color:#f7f5ee;border-radius:12px;cursor:pointer;font-family:inherit;font-size:14.5px;text-align:left;transition:border-color .2s,background .2s,transform .15s}
.curopt{flex-direction:column;align-items:flex-start;gap:2px;padding:11px 13px}
.langopt:hover,.curopt:hover{border-color:#cee88c;background:rgba(206,232,140,.1);transform:translateY(-1px)}
.langopt.on,.curopt.on{border-color:#cee88c;background:rgba(206,232,140,.18);font-weight:700}
.langopt-flag{width:22px;height:16px;border-radius:3px;object-fit:cover;flex:none;box-shadow:0 0 0 1px rgba(255,255,255,.18)}
.langopt-globe{width:20px;height:20px;color:#c4d3ca;box-shadow:none;background:none}
.langopt-txt{display:flex;flex-direction:column;gap:1px;min-width:0}
.langopt-name,.curopt-name{font-size:14px;font-weight:600;line-height:1.2;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.langopt-region{font-size:11px;color:#c4d3ca;line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.curopt-code{font-family:var(--t-mono,ui-monospace,monospace);font-size:11.5px;font-weight:700;color:#c4d3ca}
.langopt.on .langopt-region,.curopt.on .curopt-code{color:#cee88c}
.langopt-soon{margin-left:auto;font-family:var(--t-mono,ui-monospace,monospace);font-size:9.5px;text-transform:uppercase;letter-spacing:.08em;color:#c4d3ca;border:1px solid rgba(247,245,238,.3);border-radius:6px;padding:2px 5px;flex:none}
.pop-search{display:block;width:100%;margin:0 0 14px;padding:11px 14px;border:1px solid rgba(247,245,238,.34);background:#fff;color:#12382b;border-radius:12px;font-family:inherit;font-size:15px;outline:none;-webkit-appearance:none}
.pop-search::placeholder{color:#63746a}
.pop-search:focus{border-color:#cee88c;box-shadow:0 0 0 3px rgba(206,232,140,.35)}
.pop-empty{margin:14px 2px 0;font-size:.9rem;color:#c4d3ca}
.langpop-note{margin:16px 0 0;font-size:.82rem;color:#c4d3ca;line-height:1.5}
[dir="rtl"] .langpop-card,[dir="rtl"] .langopt{text-align:right}
[dir="rtl"] .langopt-soon{margin-left:0;margin-right:auto}
[dir="rtl"] .curopt{align-items:flex-end;text-align:right}
[dir="rtl"] .langpop-x{right:auto;left:14px}
/* Symbole de devise cliquable à côté du montant du simulateur */
.p-money-input .p-cur-pick{cursor:pointer;text-decoration:underline dotted;text-underline-offset:3px;border-radius:4px}
.p-money-input .p-cur-pick:hover{color:#0A8F57}
.p-money-input .p-cur-pick:focus-visible{outline:2px solid #0FB36B;outline-offset:2px}
@media(max-width:420px){.langpop-grid{grid-template-columns:1fr}}
/* Petits écrans : l'en-tête de la refonte doit tenir sur une seule ligne
   (logo + bouton + menu). On garde le globe (sa liste contient aussi FR et EN) ;
   sur téléphone, la devise se choisit depuis le simulateur des tarifs
   (symbole cliquable à côté du montant). */
@media(max-width:1100px){.lang-head .lang-btn{display:none}}
@media(max-width:600px){
  .site-header .header-actions{gap:6px}
  .lang-head .cur-btn{display:none}
  .lang-head .lang-globe{height:32px;min-width:32px;width:32px;padding:0}
}
/* Bouton « langue » dans le menu déroulant (téléphone / tablette) */
.nav-lang{display:none;align-items:center;gap:6px;padding:8px 10px;border:1.5px solid rgba(11,30,22,.34);border-radius:9px;background:transparent;color:inherit;font:inherit;font-family:var(--t-mono,ui-monospace,monospace);font-size:12px;font-weight:700;letter-spacing:.06em;cursor:pointer}
.nav-lang:hover{border-color:#0FB36B;color:#0A8F57}
.nav-lang:focus-visible{outline:2px solid #0FB36B;outline-offset:2px}
@media(max-width:900px){.nav-lang{display:inline-flex}}
@media(max-width:389px){.lang-head{display:none}}
@media(max-width:900px){.nav-links{flex-wrap:wrap;row-gap:8px}}
/* Lien « Ouvrir l'appli » dans le menu déroulant (téléphone / tablette) :
   « Se connecter » est masqué par la refonte sur les petits écrans. */
.nav-app{display:none}
@media(max-width:900px){.nav-app{display:inline-flex;align-items:center}}
/* Pastille « Support humain · 7j/7 · en français » (accueil + tarifs) */
.hero-support{display:inline-flex;align-items:center;gap:9px;margin:22px 0 0;padding:9px 16px 9px 13px;border:1.5px solid rgba(18,56,43,.38);border-radius:999px;background:rgba(206,232,140,.38);color:#12382b;font-size:15px;font-weight:700;line-height:1.3}
.hero-support::before{content:"";width:9px;height:9px;border-radius:50%;background:#0FB36B;box-shadow:0 0 0 4px rgba(15,179,107,.18);flex:none}
@media(max-width:600px){.hero-support{font-size:14px;margin-top:18px}}
/* Japonais / chinois : caractères pleine largeur, le grand titre de l'accueil
   se coupait au milieu d'un mot (« 貸し出そ / う。 ») ; coréen : pas de coupure
   au milieu des mots. */
html:lang(ja) .hero-copy h1,html:lang(zh) .hero-copy h1{font-size:clamp(2.6rem,6vw,5.2rem)}
html:lang(ko) h1,html:lang(ko) h2{word-break:keep-all}
/* Entre 901 et 1100 px, la refonte masque « Se connecter » sans menu burger :
   on le garde sous forme de petit bouton carré (le texte reste lu par les
   lecteurs d'écran). Testé dans 16 langues à 901, 930, 1024 et 1100 px. */
@media(min-width:901px) and (max-width:1100px){.header-actions .nav-login{display:inline-flex;flex:none;align-items:center;justify-content:center;width:38px;height:38px;border:1px solid rgba(11,30,22,.34);border-radius:9px;font-size:0;overflow:hidden}.header-actions .nav-login::before{content:"↗";font-size:16px}}
/* ===== Schéma « Tout-en-un » (page L'application, 24/09/2026) =====
   Leapway au centre, les 5 piliers autour ; en liste sur téléphone. */
.hub-section{padding:90px 0}
.hub-head{text-align:center;margin-bottom:46px}
.hub{position:relative;max-width:980px;margin:0 auto}
.hub-core{display:flex;align-items:center;justify-content:center;width:190px;height:190px;margin:0 auto;border-radius:50%;background:#12382b;color:#f7f5ee;box-shadow:0 0 0 14px rgba(206,232,140,.35),0 0 0 15.5px rgba(18,56,43,.36)}
.hub-core-mark{font:700 28px/1 var(--body,system-ui,sans-serif);letter-spacing:-.03em}
.hub-core-mark span{color:#ef694b}
.hub-ring{list-style:none;margin:0;padding:0}
.hub-node{display:flex;flex-direction:column;align-items:center;text-align:center;gap:8px;width:190px;padding:20px 14px;background:#fff;border:1px solid #9cac95;border-radius:16px;box-shadow:0 10px 30px -18px rgba(18,56,43,.45)}
.hub-node strong{font-size:15px;line-height:1.25;color:#12382b}
.hub-tag{font-family:var(--t-mono,ui-monospace,monospace);font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:#4e7451}
.hub-icon{display:grid;place-items:center;width:46px;height:46px;border-radius:12px;background:#e4ecd8;color:#12382b}
.hub-icon svg{width:24px;height:24px}
@media(min-width:901px){
  .hub{height:560px}
  .hub-core{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);margin:0}
  .hub::before{content:"";position:absolute;left:50%;top:50%;width:430px;height:430px;transform:translate(-50%,-50%);border:1.5px dashed #9cac95;border-radius:50%}
  .hub-node{position:absolute;transform:translate(-50%,-50%)}
  .hub-node:nth-child(1){left:50%;top:9%}
  .hub-node:nth-child(2){left:86%;top:36%}
  .hub-node:nth-child(3){left:73%;top:88%}
  .hub-node:nth-child(4){left:27%;top:88%}
  .hub-node:nth-child(5){left:14%;top:36%}
}
@media(max-width:900px){
  .hub-core{width:150px;height:150px;margin-bottom:34px}
  .hub-ring{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px}
  .hub-node{width:auto}
}
/* ===== Schéma « Le fil du séjour » (page L'expérience, 24/09/2026) ===== */
.ex-journey{padding:60px 0 20px}
.jr-line{list-style:none;margin:18px 0 0;padding:0;display:grid;grid-template-columns:repeat(5,1fr);gap:0;position:relative}
.jr-line::before{content:"";position:absolute;left:10%;right:10%;top:34px;border-top:2px dashed #9cac95}
.jr-line li{position:relative;text-align:center}
.jr-line a{display:flex;flex-direction:column;align-items:center;gap:8px;padding:0 8px;color:#12382b;text-decoration:none}
.jr-icon{position:relative;display:grid;place-items:center;width:68px;height:68px;border-radius:50%;background:#12382b;color:#cee88c;box-shadow:0 0 0 7px #f7f5ee}
.jr-icon svg{width:28px;height:28px}
.jr-num{font:italic 15px Georgia,serif;color:#ef694b}
.jr-line strong{font-size:15px;line-height:1.3;max-width:15ch}
.jr-line a:hover .jr-icon{background:#0FB36B;color:#fff}
@media(max-width:760px){
  .jr-line{grid-template-columns:1fr;gap:14px}
  .jr-line::before{left:33px;right:auto;top:20px;bottom:20px;border-top:0;border-left:2px dashed #9cac95}
  .jr-line a{flex-direction:row;text-align:left;gap:14px}
  .jr-icon{width:56px;height:56px;flex:none}
  .jr-line strong{max-width:none}
}
.jr-line li::before,.jr-line li::after,.hub-ring li::before,.hub-ring li::after{content:none!important;display:none!important}
/* ===== Vraies captures de l'appli (25/09/2026, envoyées par Martin, noms floutés) ===== */
.phone-section{padding:80px 0 30px}
.phone-strip{display:grid;grid-template-columns:repeat(5,1fr);gap:18px;align-items:start}
.phone{margin:0;padding:8px;background:#12382b;border-radius:30px;box-shadow:0 24px 50px -28px rgba(18,56,43,.7)}
.phone img{display:block;width:100%;height:auto;border-radius:23px}
.phone-strip .phone:nth-child(even){transform:translateY(28px)}
.ex-shots{display:grid;grid-template-columns:1fr 1fr;gap:22px;margin:40px 0;align-items:start}
.ex-shot{margin:0;background:#fff;border:1px solid #9cac95;border-radius:14px;overflow:hidden;box-shadow:0 18px 40px -26px rgba(18,56,43,.55)}
.ex-shot img{display:block;width:100%;height:auto}
.ex-shot figcaption{padding:10px 14px;font-family:var(--t-mono,ui-monospace,monospace);font-size:10.5px;letter-spacing:.08em;color:#4e7451;border-top:1px solid #9cac95}
.ex-dark .ex-shot{border-color:rgba(247,245,238,.34)}
@media(max-width:900px){.phone-strip{grid-template-columns:repeat(5,72%);overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:14px}.phone{scroll-snap-align:center}.phone-strip .phone:nth-child(even){transform:none}.ex-shots{grid-template-columns:1fr}}
/* =====================================================================
   3D ET MOUVEMENT (25/09/2026, demande de Martin : « chaque section doit
   tenir dans mon écran », captures en 3D, téléphones qui bougent, propre)
   ===================================================================== */
/* Apparition douce (ajoutée par refonte-motion.js ; sans JS tout est visible).
   « translate » se combine avec les transform existants sans les écraser. */
.lw-rv{opacity:0;translate:0 26px;transition:opacity .7s ease,translate .9s cubic-bezier(.2,.8,.2,1)}
.lw-rv.lw-in{opacity:1;translate:0 0}

/* Galerie de captures : plus compacte (tient dans un écran) et en 3D.
   Sélecteurs préfixés : cette feuille est chargée avant reimagined-home.css. */
@media(min-width:1001px){
  main .product-section{padding-top:56px;padding-bottom:56px}
  main .product-section .section-heading{margin-bottom:22px}
  main .product-section .section-heading h2{font-size:clamp(2.3rem,3.2vw,3.1rem)}
  main .product-section .product-gallery{align-items:stretch}
  main .product-section .gallery-menu{padding:6px 0;justify-content:center}
  main .product-section .gallery-menu button{padding:9px 18px;gap:11px}
  main .product-section .gallery-menu strong{font-size:13.5px}
  main .product-section .gallery-menu small{margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:200px}
  main .product-section .gallery-view{background:transparent;display:flex;flex-direction:column;justify-content:center}
  main .product-section .gallery-image-wrap{aspect-ratio:auto;padding:26px 40px 8px;background:radial-gradient(120% 90% at 70% 20%,#eef3e4 0%,#e3e9d7 60%,#dbe3cd 100%);perspective:1700px;overflow:visible}
  main .product-section .gallery-image-wrap .screen-button{aspect-ratio:auto;height:min(46vh,400px);border-radius:10px;border:1px solid #a0ac89;
    transform:rotateY(calc(-7deg + var(--tx,0deg))) rotateX(calc(4deg + var(--ty,0deg)));transform-style:preserve-3d;
    box-shadow:24px 32px 60px -28px rgba(18,56,43,.55);transition:transform .5s cubic-bezier(.2,.8,.2,1)}
  main .product-section .gallery-caption{padding:12px 24px 14px}
}
/* Téléphones : carrousel 3D (défile seul, au clic, au doigt) */
.phone-section{padding:64px 0 40px;overflow:hidden}
.phone-section .hub-head{margin-bottom:10px}
.phone-fan{position:relative;height:clamp(440px,64vh,590px);perspective:1800px;touch-action:pan-y;
  transform:rotateY(calc(var(--spin,0deg) + (var(--p,.5) - .5) * 12deg));transform-style:preserve-3d;transition:transform .6s cubic-bezier(.2,.8,.2,1)}
.phone3d{position:absolute;left:50%;top:50%;width:clamp(170px,17vw,245px);margin:0;padding:8px;background:#12382b;border-radius:30px;cursor:pointer;
  transform:translate(-50%,-50%) translateX(calc(var(--o,0) * 64%)) translateZ(calc(var(--ao,0) * -150px)) rotateY(calc(var(--o,0) * -24deg));
  z-index:calc(10 - var(--ao,0));opacity:calc(1 - var(--ao,0) * .2);filter:saturate(calc(1 - var(--ao,0) * .25));
  box-shadow:0 30px 60px -30px rgba(18,56,43,.75);transition:transform .8s cubic-bezier(.2,.8,.2,1),opacity .6s,filter .6s}
.phone3d.is-front{box-shadow:0 40px 80px -34px rgba(18,56,43,.85),0 0 0 3px rgba(206,232,140,.55)}
.phone3d img{display:block;width:100%;height:auto;border-radius:23px;pointer-events:none}
@media(max-width:700px){.phone-fan{height:470px}.phone3d{width:200px;transform:translate(-50%,-50%) translateX(calc(var(--o,0) * 58%)) translateZ(calc(var(--ao,0) * -170px)) rotateY(calc(var(--o,0) * -30deg))}}

/* Captures en pile 3D à côté du titre (page L'expérience) */
.ex-heading.has-stack{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:56px;align-items:center}
.ex-heading.has-stack>div>p{margin-top:22px;max-width:44ch}
.stack3d{position:relative;perspective:1600px;padding:6% 0 4%}
.stack3d figure{margin:0;background:#fff;border:1px solid #9cac95;border-radius:12px;overflow:hidden;box-shadow:0 30px 60px -30px rgba(18,56,43,.6)}
.stack3d img{display:block;width:100%;height:auto}
.stack3d figcaption{padding:8px 12px;font-family:var(--t-mono,ui-monospace,monospace);font-size:9.5px;letter-spacing:.08em;color:#4e7451;border-top:1px solid #9cac95}
.stack3d .s-back{position:absolute;right:0;top:0;width:74%;opacity:.95;
  transform:rotateY(-16deg) rotateX(5deg) translateZ(-70px) translateY(calc((.5 - var(--p,.5)) * 50px))}
.stack3d .s-front{position:relative;width:78%;margin-top:18%;
  transform:rotateY(calc(-9deg + var(--tx,0deg))) rotateX(calc(3deg + var(--ty,0deg))) translateY(calc((.5 - var(--p,.5)) * -36px));
  transition:transform .5s cubic-bezier(.2,.8,.2,1)}
.ex-dark .stack3d figure{border-color:rgba(247,245,238,.34)}
@media(max-width:900px){.ex-heading.has-stack{grid-template-columns:1fr;gap:30px}}

/* Sections plus courtes (chaque bloc doit tenir dans un écran d'ordinateur) */
@media(min-width:901px){
  .hub-section{padding:56px 0}
  .hub-head{margin-bottom:18px}
  .hub{height:470px}
  .hub::before{width:360px;height:360px}
  .hub-core{width:160px;height:160px}
  .hub-node{width:172px;padding:16px 12px}
  .ex-dark,#inclus{padding-top:70px;padding-bottom:70px}
  .ex-dark .ex-heading,#inclus .ex-heading{margin-bottom:34px}
}
@media (prefers-reduced-motion: reduce){.phone3d,.phone-fan,.stack3d figure,.gallery-image-wrap .screen-button{transition:none}}
.hub-head .eyebrow{text-align:center}
.phone-section .hub-head .eyebrow{display:block;text-align:center}
.phone-fan{height:clamp(420px,57vh,560px)}
.phone3d{width:clamp(160px,15vw,228px)}
@media(min-width:901px){
  .ex-heading.has-stack{gap:48px}
  .stack3d{max-width:560px;justify-self:end;width:100%;padding:3% 0 2%}
  .ex-dark .ex-workflow article{padding-top:18px}
  .ex-dark .ex-workflow h3{margin-bottom:6px}
  .ex-dark .ex-note{margin-top:14px}
  #inclus .day-departure{margin-top:0}
}
@media(min-width:901px){
  main .ex-dark{padding-top:56px;padding-bottom:44px}
  main #inclus{padding-top:50px;padding-bottom:46px}
  main .ex-dark .ex-heading,main #inclus .ex-heading{margin-bottom:24px}
  main #inclus .day-departure{margin-bottom:0}
  main .stack3d{max-width:520px}
  main .ex-dark .ex-note{margin-bottom:0}
}
@media(min-width:1001px){main .experience-section{padding-top:56px;padding-bottom:56px}}
/* =====================================================================
   HISTOIRE DES TÉLÉPHONES (page L'application, 25/09/2026)
   La section reste à l'écran pendant le défilement (position sticky) :
   --in (0→1) = arrivée des téléphones · --q (0→1) = progression des écrans.
   Sans JS : une seule image, section de hauteur normale.
   ===================================================================== */
.phone-story{position:relative;background:linear-gradient(180deg,#f7f5ee 0%,#eef2e4 100%)}
.story-sticky{padding:60px 0}
.phone-story{overflow:hidden}
.story-grid{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:40px;align-items:center}
.story-copy h2{margin:10px 0 22px;font-size:clamp(2.2rem,3.4vw,3.4rem)}
.story-steps{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.st-btn{display:flex;align-items:center;gap:14px;width:100%;padding:11px 14px;border:1px solid transparent;border-radius:14px;background:transparent;text-align:left;cursor:pointer;color:#12382b;opacity:.55;transition:opacity .35s,background .35s,border-color .35s,transform .35s}
.st-btn:hover{opacity:.85}
.st-btn.is-on{opacity:1;background:#fff;border-color:#9cac95;box-shadow:0 12px 28px -20px rgba(18,56,43,.55);transform:translateX(6px)}
.st-num{font:italic 15px Georgia,serif;color:#ef694b;flex:none;width:24px}
.st-txt strong{display:block;font-size:15px}
.st-txt small{display:block;font-size:12px;color:#63746a;margin-top:2px}
.story-bar{height:3px;margin-top:18px;background:#d6ddd0;border-radius:3px;overflow:hidden}
.story-bar span{display:block;height:100%;background:#0FB36B;transform:scaleX(0);transform-origin:left;transition:transform .15s linear}
.story-stage{position:relative;height:min(78vh,640px);perspective:1800px;display:flex;align-items:center;justify-content:center}
.story-glow{position:absolute;width:70%;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,rgba(206,232,140,.65),rgba(206,232,140,0) 65%);filter:blur(10px);
  transform:scale(calc(.6 + var(--in,1) * .4));opacity:var(--in,1)}
.story-main,.story-side{margin:0;padding:9px;background:#12382b;border-radius:34px;box-shadow:0 40px 80px -36px rgba(18,56,43,.8)}
.story-main{position:relative;z-index:3;width:min(20vw,270px);
  transform:translateY(calc((1 - var(--in,1)) * 60vh)) rotateX(calc((1 - var(--in,1)) * 40deg)) rotateY(calc(-10deg + var(--q,0) * 20deg)) rotateZ(calc((1 - var(--in,1)) * -8deg));
  opacity:calc(.2 + var(--in,1) * .8)}
.story-main.flip-r .story-screens{animation:lwFlipR .6s cubic-bezier(.2,.8,.2,1)}
.story-main.flip-l .story-screens{animation:lwFlipL .6s cubic-bezier(.2,.8,.2,1)}
@keyframes lwFlipR{0%{transform:rotateY(-26deg) scale(.96);opacity:.4}100%{transform:none;opacity:1}}
@keyframes lwFlipL{0%{transform:rotateY(26deg) scale(.96);opacity:.4}100%{transform:none;opacity:1}}
.story-screens{position:relative;border-radius:26px;overflow:hidden;aspect-ratio:600/980;background:#f7f5ee}
.story-screens img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:top;opacity:0;transform:scale(1.04);transition:opacity .5s ease,transform .7s cubic-bezier(.2,.8,.2,1)}
.story-screens img.is-on{opacity:1;transform:none}
.phone-story:not(.is-ready) .story-screens img:not(.is-on){display:none}
.story-side{position:absolute;z-index:2;width:min(15vw,200px);opacity:calc(var(--in,1) * .8);filter:saturate(.8)}
.story-side img{display:block;width:100%;height:auto;aspect-ratio:600/980;object-fit:cover;object-position:top;border-radius:26px}
.story-side-l{transform:translateX(calc(-78% - (1 - var(--in,1)) * 40vw)) translateZ(-160px) rotateY(28deg)}
.story-side-r{transform:translateX(calc(78% + (1 - var(--in,1)) * 40vw)) translateZ(-160px) rotateY(-28deg)}
@media(max-width:900px){
  .story-grid{grid-template-columns:1fr;gap:10px}
  .story-sticky{padding:44px 0 36px}
  .story-copy h2{font-size:30px;margin:6px 0 10px}
  .story-steps{grid-auto-flow:column;grid-auto-columns:max-content;overflow-x:auto;gap:6px;padding-bottom:4px}
  .st-btn{padding:7px 12px}.st-btn.is-on{transform:none}
  .st-txt small{display:none}
  .story-bar{margin-top:8px}
  .story-stage{height:min(58svh,470px)}
  .story-main{width:min(46vw,210px)}
  .story-side{width:min(34vw,150px)}
}
/* Galerie : la capture « se lève » en arrivant à l'écran (défilement) */
@media(min-width:1001px){
  main .product-section .gallery-image-wrap .screen-button{
    transform:rotateY(calc(-7deg + var(--tx,0deg))) rotateX(calc(4deg + var(--ty,0deg) + max(0, .42 - var(--p,.42)) * 70deg)) scale(calc(1 - max(0, .42 - var(--p,.42)) * .25))}
}
/* Accueil : profondeur au défilement (la scène et le téléphone ne vont pas à la même vitesse) */
.product-scene .scene-desktop{translate:0 calc((var(--p,.5) - .5) * -50px)}
.product-scene .scene-phone{translate:0 calc((var(--p,.5) - .5) * -130px)}
.experience-visual{translate:0 calc((var(--p,.5) - .5) * -40px)}
@media (prefers-reduced-motion: reduce){.story-main,.story-side,.story-glow{transform:none!important;opacity:1!important}.product-scene .scene-desktop,.product-scene .scene-phone,.experience-visual{translate:none}}
.story-copy,.story-stage{min-width:0}
@media(max-width:900px){.story-steps{max-width:100%}.story-copy h2{overflow-wrap:break-word}}
/* Mobile : l'arrivée des téléphones reste dans l'écran (moins de trajet) */
@media(max-width:900px){
  .story-main{transform:translateY(calc((1 - var(--in,1)) * 32vh)) rotateX(calc((1 - var(--in,1)) * 30deg)) rotateY(calc(-8deg + var(--q,0) * 16deg)) rotateZ(calc((1 - var(--in,1)) * -5deg))}
  .story-side-l{transform:translateX(calc(-62% - (1 - var(--in,1)) * 18vw)) translateZ(-120px) rotateY(24deg)}
  .story-side-r{transform:translateX(calc(62% + (1 - var(--in,1)) * 18vw)) translateZ(-120px) rotateY(-24deg)}
}
/* Partout : les grands visuels se lèvent en 3D en arrivant à l'écran */
.lw-rise-host{perspective:1400px}
.lw-rise{transform-origin:50% 100%;rotate:x calc(max(0, .4 - var(--p,.4)) * 50deg);scale:calc(1 - max(0, .4 - var(--p,.4)) * .15)}
.lw-card-host{perspective:1100px}
@media (prefers-reduced-motion: reduce){.lw-rise{rotate:none;scale:none}}
/* Téléphones : on change d'écran un par un (flèches, glisser, boutons), sans bloquer le défilement */
.story-stage{height:min(70vh,600px);touch-action:pan-y;user-select:none;-webkit-user-select:none}
.story-main{width:min(19vw,250px);transition:transform .8s cubic-bezier(.2,.8,.2,1),opacity .6s ease}

.story-side{transition:transform .8s cubic-bezier(.2,.8,.2,1),opacity .6s ease}
.story-screens img{pointer-events:none;-webkit-user-drag:none}
.story-nav{position:absolute;left:50%;bottom:0;z-index:4;display:flex;align-items:center;gap:14px;transform:translateX(-50%);opacity:var(--in,1)}
.st-arrow{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;border:1px solid #7f9278;background:#fff;color:#12382b;cursor:pointer;box-shadow:0 8px 20px -12px rgba(18,56,43,.5);transition:background .2s,color .2s,transform .2s}
.st-arrow:hover{background:#12382b;color:#f7f5ee;transform:scale(1.06)}
.st-arrow:focus-visible{outline:3px solid #0FB36B;outline-offset:2px}
.st-arrow svg{width:20px;height:20px}
.st-count{min-width:44px;text-align:center;font:600 13px/1 var(--t-mono,ui-monospace,monospace);letter-spacing:.08em;color:#4e7451}
.st-count b{color:#12382b}
@media(max-width:900px){
  .story-steps{position:relative}
  .story-stage{height:min(56svh,440px)}
  .story-main{width:min(44vw,190px)}
}
/* Rapidité (25/09) : la progression du défilement ne se transmet pas aux enfants,
   pour que le navigateur n'ait presque rien à recalculer pendant qu'on fait défiler */
@property --p{syntax:'<number>';inherits:false;initial-value:.5}
.stack3d .s-front{transition:none}
@property --in{syntax:'<number>';inherits:false;initial-value:1}
@property --q{syntax:'<number>';inherits:false;initial-value:0}
.phone-story.is-pre .story-main,.phone-story.is-pre .story-side,.phone-story.is-pre .story-glow,.phone-story.is-pre .story-nav{--in:0}
.phone-story.is-arriving .story-main,.phone-story.is-arriving .story-side{transition:transform 1.3s cubic-bezier(.16,1,.3,1),opacity 1s ease}
.phone-story.is-arriving .story-glow,.phone-story.is-arriving .story-nav{transition:transform 1.3s cubic-bezier(.16,1,.3,1),opacity 1.1s ease .2s}
.story-main,.story-side,.story-glow{will-change:transform}
.lw-rise,.product-scene .scene-desktop,.product-scene .scene-phone,.gallery-image-wrap .screen-button,.experience-visual,.stack3d figure{will-change:transform,translate,rotate,scale}
/* Rapidité : la barre du haut était floutée derrière (backdrop-filter) alors qu'elle est
   presque opaque ; le flou se recalculait à chaque image du défilement. Fond plein, même teinte. */
html body .site-header{backdrop-filter:none;-webkit-backdrop-filter:none;background:#f7f5ee}