/* ═══════════════════════════════════════════════════════════════════════
   KONSENT STUDIO · site/css/promo.css — la page du logiciel (13/11/2026)
   La grammaire du parcours (site.css) : noir profond, Poppins, pilules,
   le vert #25E389 réservé à l'action. Les écrans du logiciel portent la page.

   Refait le 15/11 (Damien : « un site extrêmement bien fini », « Poppins pour
   tous les textes », « un vrai téléphone », plus de bandes rayées) : une seule
   feuille, sans surcharges empilées.
     1. bases et typographie      5. le téléphone
     2. boutons, annonce, tête    6. la galerie, l'essai, la lettre
     3. le héros (la fenêtre)     7. télécharger, pied
     4. les cartes qui s'empilent 8. apparitions, écrans étroits
   ═══════════════════════════════════════════════════════════════════════ */

/* ── 1. bases et typographie ── */
@font-face{font-family:'Poppins';font-weight:300;font-style:normal;font-display:swap;src:url('../fonts/poppins-latin-300-normal.woff2') format('woff2')}
@font-face{font-family:'Poppins';font-weight:400;font-style:normal;font-display:swap;src:url('../fonts/poppins-latin-400-normal.woff2') format('woff2')}
@font-face{font-family:'Poppins';font-weight:500;font-style:normal;font-display:swap;src:url('../fonts/poppins-latin-500-normal.woff2') format('woff2')}
@font-face{font-family:'Poppins';font-weight:600;font-style:normal;font-display:swap;src:url('../fonts/poppins-latin-600-normal.woff2') format('woff2')}
@font-face{font-family:'Poppins';font-weight:700;font-style:normal;font-display:swap;src:url('../fonts/poppins-latin-700-normal.woff2') format('woff2')}

:root{
  --fond:#050506; --fond2:#0a0b0d; --carte:#111215; --ink:#fff; --dim:rgba(255,255,255,.74); --pale:rgba(255,255,255,.52);
  --trait:rgba(255,255,255,.12); --traitDoux:rgba(255,255,255,.07);
  --vert:#25E389; --vert-h:#3BF09A; --vert-ink:#04201C;
  --font:'Poppins',"Segoe UI",system-ui,-apple-system,sans-serif;
  --max:1200px; --ease:cubic-bezier(.2,.7,.2,1);
  color-scheme:dark;
}
*,*::before,*::after{box-sizing:border-box}
html{background:var(--fond);scroll-behavior:smooth;overflow-x:clip;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--fond);color:var(--ink);font-family:var(--font);font-size:16px;font-weight:400;line-height:1.6;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility;font-synthesis:none;overflow-x:clip}
/* Poppins partout : les champs et les boutons ne prennent pas la police de la page d'eux-mêmes */
button,input,select,textarea,summary{font-family:inherit;font-size:inherit;color:inherit}
img,video{display:block;max-width:100%;height:auto}
picture{display:block}
a{color:inherit}
h1,h2,h3{font-weight:500;margin:0;text-wrap:balance}
h1{font-size:clamp(44px,min(7.6vw,11.6vh),96px);line-height:1;letter-spacing:-.035em}
h2{font-size:clamp(32px,3.8vw,52px);line-height:1.06;letter-spacing:-.025em}
h3{font-size:clamp(20px,2vw,24px);line-height:1.25;letter-spacing:-.01em}
p{margin:0}
::selection{background:rgba(37,227,137,.35);color:#fff}
:focus-visible{outline:2px solid var(--vert);outline-offset:3px;border-radius:10px}
.cadre{width:100%;max-width:var(--max);margin:0 auto;padding-left:max(24px,env(safe-area-inset-left,0px));padding-right:max(24px,env(safe-area-inset-right,0px))}
.vert{color:var(--vert)}
.petit{font-size:13px;color:var(--pale)}
.centre{text-align:center}
.masque{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.sur{display:flex;align-items:center;font-size:12.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--vert);font-weight:500;margin-bottom:18px}
.sur .num{margin-right:12px;padding:3px 9px 2px;border-radius:999px;border:1px solid rgba(37,227,137,.4);font-size:11px;letter-spacing:.08em;line-height:1.4}
.chapo{font-size:clamp(17px,1.5vw,20px);line-height:1.55;color:var(--dim);max-width:46ch}

/* ── 2. boutons, annonce, tête ── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;height:54px;padding:0 28px;border:0;border-radius:999px;font-weight:500;font-size:16px;line-height:1;text-decoration:none;white-space:nowrap;cursor:pointer;
  transition:transform .3s var(--ease),background .25s,border-color .25s,box-shadow .3s}
.btn svg{width:18px;height:18px;flex:none;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.btn:hover{transform:translateY(-2px)}
.btn:active{transform:translateY(0)}
.btn-vert{background:var(--vert);color:var(--vert-ink);box-shadow:0 10px 30px -12px rgba(37,227,137,.6)}
.btn-vert:hover{background:var(--vert-h);box-shadow:0 16px 36px -12px rgba(37,227,137,.7)}
.btn-contour{border:1px solid rgba(255,255,255,.26);color:#fff;background:rgba(255,255,255,.03)}
.btn-contour:hover{border-color:rgba(255,255,255,.7);background:rgba(255,255,255,.07)}
.btn-petit{height:40px;padding:0 20px;font-size:14px;box-shadow:none}

.annonce{display:flex;align-items:center;justify-content:center;gap:12px;padding:9px 20px;background:linear-gradient(90deg,rgba(37,227,137,.05),rgba(37,227,137,.14),rgba(37,227,137,.05));border-bottom:1px solid rgba(37,227,137,.18);color:#fff;text-decoration:none;font-size:13.5px;text-align:center}
.annonce b{font-weight:600;font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;padding:4px 9px 3px;border-radius:999px;background:var(--vert);color:var(--vert-ink);line-height:1.3}
.annonce span{color:var(--dim)}
.annonce em{font-style:normal;display:inline-flex;align-items:center;gap:6px;color:var(--vert);font-weight:500;white-space:nowrap}
.annonce svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;transition:transform .25s var(--ease)}
.annonce:hover svg{transform:translateX(3px)}

.tete{position:sticky;top:0;z-index:30;background:rgba(5,5,6,.7);-webkit-backdrop-filter:blur(18px) saturate(1.3);backdrop-filter:blur(18px) saturate(1.3);border-bottom:1px solid var(--traitDoux)}
.tete-in{display:flex;align-items:center;gap:28px;height:68px}
.logo{display:block;flex:none}
.logo img{height:30px;width:auto}
.nav{display:flex;gap:26px;margin-left:auto;font-size:14px}
.nav a{color:var(--dim);text-decoration:none;transition:color .2s}
.nav a:hover{color:#fff}

/* ── 3. le héros : le titre, puis la fenêtre du studio posée en perspective ──
   (js/promo.js la redresse à mesure qu'on défile ; sans script elle reste inclinée) */
main{position:relative}
main>section{position:relative;z-index:1}
/* deux rails fins tiennent la page sur grand écran */
@media (min-width:1300px){
  main::before{content:"";position:absolute;inset:0;pointer-events:none;z-index:0;
    background:linear-gradient(rgba(255,255,255,.055),rgba(255,255,255,.055)) calc(50% - 624px) 0/1px 100% no-repeat,
               linear-gradient(rgba(255,255,255,.055),rgba(255,255,255,.055)) calc(50% + 624px) 0/1px 100% no-repeat;
    -webkit-mask-image:linear-gradient(#0000 0,#000 900px,#000 calc(100% - 300px),#0000 100%);mask-image:linear-gradient(#0000 0,#000 900px,#000 calc(100% - 300px),#0000 100%)}
}
.heros{padding:clamp(52px,7.5vh,92px) 0 clamp(70px,9vw,130px);overflow:hidden}
.heros::before{content:"";position:absolute;left:50%;top:38%;width:min(1500px,130vw);height:900px;transform:translateX(-50%);pointer-events:none;
  background:radial-gradient(closest-side,rgba(37,227,137,.13),rgba(37,227,137,.04) 55%,rgba(37,227,137,0))}
.heros-in{position:relative;text-align:center;display:grid;justify-items:center;gap:24px;will-change:transform,opacity}
.heros .chapo{max-width:44ch}
.actions{display:flex;gap:14px;flex-wrap:wrap;justify-content:center;margin-top:8px}
.heros .petit{margin-top:2px}
.heros-visuel{position:relative;width:min(1280px,calc(100% - 40px));margin:clamp(26px,3vw,40px) auto 0;perspective:2400px;perspective-origin:50% 0}
.fenetre{position:relative;margin:0;border-radius:clamp(8px,1.05vw,14px);overflow:hidden;background:#1b1c1f;
  transform:rotateX(var(--pente,15deg)) scale(var(--taille,.94));transform-origin:50% 0;will-change:transform;
  box-shadow:0 0 0 1px rgba(255,255,255,.14),0 2px 0 0 rgba(255,255,255,.06) inset,0 -30px 160px -30px rgba(37,227,137,.3),0 70px 140px -40px rgba(0,0,0,.95),0 30px 60px -30px rgba(0,0,0,.8)}
.fenetre img{width:100%;height:auto}
/* un reflet de verre très léger en travers de la fenêtre */
.fenetre::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(112deg,rgba(255,255,255,.07) 0%,rgba(255,255,255,0) 26%)}

/* ── 4. les gestes : des cartes qui s'empilent ──
   Chaque carte se fige sous la tête de page et la suivante monte par-dessus ; la carte recouverte
   recule et s'assombrit (js/promo.js). Sur un écran étroit ou bas (moins de 981 px de large ou de 720 px de haut :
   le bas d'une carte figée ne se verrait plus), les cartes défilent simplement. */
.pile{padding:clamp(60px,8vw,110px) 0 40px}
.pile-tete,.section-tete{text-align:center;margin-bottom:clamp(40px,5vw,68px)}
.pile-tete .sur,.section-tete .sur{justify-content:center}
.pile-tete h2{font-size:clamp(38px,5.2vw,72px);line-height:1.02;letter-spacing:-.03em}
.carte-pile{position:sticky;top:calc(92px + var(--i) * 14px);display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(32px,4.4vw,60px);align-items:center;
  min-height:min(640px,calc(100vh - 150px));margin:0 0 9vh;padding:clamp(28px,4vw,56px);border-radius:30px;
  background:linear-gradient(160deg,#141519 0%,#0c0d10 62%);
  box-shadow:0 0 0 1px rgba(255,255,255,.09),0 1px 0 0 rgba(255,255,255,.1) inset,0 -30px 70px -30px rgba(0,0,0,.95);
  transform-origin:50% 0;will-change:transform}
.carte-pile:last-child{margin-bottom:0}
.carte-pile:nth-of-type(even){grid-template-columns:minmax(0,7fr) minmax(0,5fr)}
.carte-pile:nth-of-type(even) .texte{order:2}
.carte-pile::after{content:"";position:absolute;inset:0;border-radius:inherit;background:#000;opacity:var(--ombre,0);pointer-events:none}
.carte-pile h2{font-size:clamp(28px,3.1vw,42px);line-height:1.1;margin-bottom:18px}
.carte-pile .texte>p:not(.sur){color:var(--dim);font-size:17px;max-width:42ch}
.points{list-style:none;padding:0;margin:26px 0 0;display:grid;gap:11px}
.points li{position:relative;padding-left:30px;color:#fff;font-size:15.5px}
.points li::before{content:"";position:absolute;left:1px;top:.42em;width:14px;height:8px;border-left:2px solid var(--vert);border-bottom:2px solid var(--vert);transform:rotate(-45deg)}
.lien-fleche{display:inline-flex;align-items:center;gap:8px;margin-top:28px;color:#fff;text-decoration:none;font-weight:500;border-bottom:1px solid rgba(37,227,137,.55);padding-bottom:4px;transition:border-color .25s}
.lien-fleche:hover{border-color:var(--vert)}
.lien-fleche svg{width:16px;height:16px;fill:none;stroke:var(--vert);stroke-width:2;stroke-linecap:round;stroke-linejoin:round;transition:transform .25s var(--ease)}
.lien-fleche:hover svg{transform:translateX(4px)}

/* les écrans du logiciel : films et captures */
.ecran{position:relative;margin:0;border-radius:16px;overflow:hidden;background:#0f1013;
  box-shadow:0 0 0 1px rgba(255,255,255,.1),0 40px 80px -36px rgba(0,0,0,.95)}
.ecran img,.ecran video{width:100%;height:auto}
.carte-pile .ecran img{aspect-ratio:16/10.6;object-fit:cover}
/* la légende d'un film : une ligne sous l'image (posée dessus, elle cachait les libellés de la roue) */
.ecran.film figcaption{display:flex;align-items:center;gap:10px;padding:12px 18px 11px;border-top:1px solid var(--traitDoux);background:#0d0e11;font-size:13px;line-height:1.3;color:var(--dim)}
.ecran.film figcaption b{font-weight:500;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--vert)}
.ecran.film figcaption b::after{content:"";display:inline-block;width:3px;height:3px;margin-left:10px;border-radius:50%;background:rgba(255,255,255,.35);vertical-align:middle}

/* ── 5. le téléphone : un appareil dessiné (cadre de métal, verre, boutons), l'écran pris sur le vrai parcours ── */
.scene-tel{position:relative;display:grid;place-items:center;align-self:stretch}
/* une lueur verte derrière l'appareil, sans cadre : elle se fond dans la carte */
.scene-tel::before{content:"";position:absolute;left:50%;top:50%;width:min(620px,130%);aspect-ratio:1;transform:translate(-50%,-50%);border-radius:50%;pointer-events:none;
  background:radial-gradient(closest-side,rgba(37,227,137,.26),rgba(37,227,137,.09) 48%,rgba(37,227,137,0) 100%)}
.tel{--l:clamp(200px,min(25vw,calc((100vh - 330px) / 2.17)),292px);position:relative;z-index:1;width:var(--l);margin:8px 0;transform:rotate(-4deg);filter:drop-shadow(0 34px 44px rgba(0,0,0,.6))}
.tel-cadre{position:relative;padding:calc(var(--l) * .013);border-radius:calc(var(--l) * .172);
  background:linear-gradient(135deg,#c9cacd 0%,#6f7074 9%,#2b2c30 26%,#17181b 50%,#33343a 74%,#7b7c81 91%,#d6d7da 100%);
  box-shadow:0 0 0 1px rgba(0,0,0,.85),0 1px 1px rgba(255,255,255,.35) inset,0 -1px 1px rgba(0,0,0,.6) inset}
.tel-ecran{position:relative;display:grid;grid-template-rows:auto 1fr;aspect-ratio:393/852;border:calc(var(--l) * .024) solid #000;border-radius:calc(var(--l) * .16);overflow:hidden;background:#000;
  box-shadow:0 0 0 1px rgba(255,255,255,.06)}
.tel-etat{position:relative;z-index:2;display:flex;align-items:center;justify-content:space-between;height:calc(var(--l) * .137);padding:calc(var(--l) * .018) calc(var(--l) * .085) 0 calc(var(--l) * .105);color:#fff;background:#000}
.tel-etat b{font-weight:600;font-size:calc(var(--l) * .047);letter-spacing:-.01em;line-height:1}
.tel-etat svg{width:calc(var(--l) * .2);height:auto;fill:currentColor}
.tel-ilot{position:absolute;left:50%;top:calc(var(--l) * .03);width:31%;height:calc(var(--l) * .088);transform:translateX(-50%);border-radius:999px;background:#000;box-shadow:0 0 0 1px rgba(255,255,255,.05)}
.tel-ilot::after{content:"";position:absolute;right:16%;top:50%;width:calc(var(--l) * .026);height:calc(var(--l) * .026);transform:translateY(-50%);border-radius:50%;background:radial-gradient(circle at 35% 35%,#2a3550,#0a0d16 60%)}
.tel-ecran picture{min-height:0}
.tel-page{width:100%;height:100%;object-fit:cover;object-position:50% 0}
.tel-repere{position:absolute;z-index:2;left:50%;bottom:calc(var(--l) * .02);width:35%;height:calc(var(--l) * .013);transform:translateX(-50%);border-radius:999px;background:rgba(255,255,255,.9)}
/* le verre : un reflet en biais, une ligne claire sur le bord */
.tel-ecran::after{content:"";position:absolute;inset:0;z-index:3;pointer-events:none;border-radius:inherit;
  background:linear-gradient(118deg,rgba(255,255,255,.12) 0%,rgba(255,255,255,.03) 22%,rgba(255,255,255,0) 34%)}
.tel-b{position:absolute;z-index:0;width:calc(var(--l) * .014);border-radius:2px;background:linear-gradient(180deg,#8d8e92,#2a2b2f 20%,#1a1b1e 80%,#77787c)}
.tel-b.g1{left:calc(var(--l) * -.009);top:17.5%;height:3.6%}
.tel-b.g2{left:calc(var(--l) * -.009);top:24.5%;height:6.6%}
.tel-b.g3{left:calc(var(--l) * -.009);top:33%;height:6.6%}
.tel-b.d1{right:calc(var(--l) * -.009);top:28%;height:10.5%}

/* ── 6. la galerie, l'essai, la lettre ── */
.galerie{padding:clamp(80px,10vw,130px) 0 clamp(70px,9vw,120px)}
.grille-galerie{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));grid-auto-rows:clamp(190px,21vw,262px);gap:18px}
.tuile{position:relative;margin:0;border-radius:20px;overflow:hidden;background:#0c0d10;box-shadow:0 0 0 1px rgba(255,255,255,.09)}
.tuile.grande{grid-column:span 2;grid-row:span 2}
.tuile.large{grid-column:span 2}
.tuile picture,.tuile img{width:100%;height:100%}
.tuile img{object-fit:cover;transition:transform 1.2s var(--ease)}
.tuile:hover img{transform:scale(1.04)}
.tuile figcaption{position:absolute;left:0;right:0;bottom:0;padding:56px 22px 18px;background:linear-gradient(rgba(5,5,6,0),rgba(5,5,6,.82));display:grid;gap:1px}
.tuile figcaption b{font-weight:500;font-size:16px}
.tuile figcaption span{font-size:13px;color:var(--dim)}
.tuile.grande figcaption{padding:70px 28px 24px}
.tuile.grande figcaption b{font-size:20px}

.essayer{padding:0 0 clamp(80px,10vw,130px)}
.essayer-in{position:relative;display:grid;grid-template-columns:minmax(0,6fr) minmax(0,5fr);align-items:center;min-height:420px;border-radius:30px;overflow:hidden;
  background:linear-gradient(120deg,rgba(37,227,137,.16),rgba(37,227,137,.03) 55%),#0d0e11;box-shadow:0 0 0 1px rgba(37,227,137,.26),0 1px 0 0 rgba(255,255,255,.08) inset}
.essayer-texte{position:relative;z-index:1;padding:clamp(32px,5vw,64px)}
.essayer-texte h2{font-size:clamp(30px,3.3vw,46px);margin-bottom:16px}
@media (min-width:981px){ .essayer-texte h2{white-space:nowrap} }
.essayer-texte p:not(.sur){color:var(--dim);font-size:17px;max-width:46ch;margin-bottom:30px}
.essayer-visuel{position:absolute;right:0;top:0;bottom:0;width:58%;-webkit-mask-image:linear-gradient(90deg,#0000 0,#000 46%);mask-image:linear-gradient(90deg,#0000 0,#000 46%)}
.essayer-visuel img{width:100%;height:100%;object-fit:cover;object-position:50% 50%}

.lettre{padding:0 0 clamp(80px,10vw,120px)}
.lettre-in{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,5fr);gap:56px;align-items:center}
.lettre h2{font-size:clamp(28px,3vw,40px);margin-bottom:16px}
.lettre-in>div>p:not(.sur){color:var(--dim);font-size:17px;max-width:48ch}
.form-lettre{display:grid;grid-template-columns:1fr auto;gap:12px}
.form-lettre input{font-size:16px;height:54px;padding:0 22px;border-radius:999px;border:1px solid rgba(255,255,255,.2);background:rgba(255,255,255,.04);color:#fff;min-width:0;transition:border-color .2s,background .2s}
.form-lettre input::placeholder{color:var(--pale)}
.form-lettre input:focus{outline:none;border-color:var(--vert);background:rgba(255,255,255,.06)}
.form-lettre .petit{grid-column:1 / -1;padding-left:6px}
.form-lettre.fait input,.form-lettre.fait button{display:none}
.form-lettre.fait .petit{font-size:16px;color:var(--vert)}

/* ── 7. télécharger, pied ── */
.telecharger{padding:clamp(80px,10vw,120px) 0 clamp(90px,11vw,140px);background:radial-gradient(900px 520px at 50% 0,rgba(37,227,137,.1),transparent),var(--fond2);border-top:1px solid var(--traitDoux);text-align:center}
.telecharger .sur{justify-content:center}
.telecharger h2{font-size:clamp(36px,4.6vw,64px);line-height:1.03;letter-spacing:-.03em;margin-bottom:20px}
.telecharger .chapo{margin:0 auto}
.choix-mac{display:grid;grid-template-columns:repeat(2,minmax(0,330px));justify-content:center;gap:18px;margin:46px auto 18px}
.carte-mac{display:grid;gap:4px;text-align:left;padding:28px 28px 24px;border-radius:22px;background:linear-gradient(160deg,#15161a,#0e0f12);box-shadow:0 0 0 1px rgba(255,255,255,.1),0 1px 0 0 rgba(255,255,255,.08) inset;text-decoration:none;transition:box-shadow .3s,transform .3s var(--ease)}
.carte-mac:hover{box-shadow:0 0 0 1px rgba(37,227,137,.6),0 24px 50px -24px rgba(37,227,137,.35);transform:translateY(-3px)}
.carte-mac b{font-weight:500;font-size:19px}
.carte-mac span{color:var(--pale);font-size:14px}
.carte-mac em{font-style:normal;display:inline-flex;align-items:center;gap:8px;margin-top:18px;color:var(--vert);font-weight:500}
.carte-mac em svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.carte-mac.conseille{background:linear-gradient(160deg,rgba(37,227,137,.16),rgba(37,227,137,0) 70%),#101114;box-shadow:0 0 0 1px rgba(37,227,137,.5),0 1px 0 0 rgba(255,255,255,.08) inset}
.carte-mac.conseille b::after{content:"Votre Mac";margin-left:10px;font-size:10.5px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;padding:4px 9px 3px;border-radius:999px;background:var(--vert);color:var(--vert-ink);vertical-align:3px}
.formats-ligne{max-width:62ch;margin:8px auto 0}
.premiere{max-width:760px;margin:44px auto 0;text-align:left}
.premiere summary{cursor:pointer;list-style:none;display:flex;justify-content:center;align-items:center;gap:10px;color:var(--dim);font-size:15px;transition:color .2s}
.premiere summary::-webkit-details-marker{display:none}
.premiere summary::after{content:"";width:8px;height:8px;border-right:2px solid var(--vert);border-bottom:2px solid var(--vert);transform:rotate(45deg) translateY(-3px);transition:transform .25s var(--ease)}
.premiere[open] summary::after{transform:rotate(-135deg) translateY(-1px)}
.premiere summary:hover{color:#fff}
.etapes{list-style:none;counter-reset:e;padding:0;margin:26px auto 0;display:grid;gap:14px;text-align:left}
.etapes li{counter-increment:e;position:relative;padding:20px 24px 20px 72px;border-radius:18px;background:rgba(255,255,255,.03);box-shadow:0 0 0 1px var(--traitDoux)}
.etapes li::before{content:counter(e);position:absolute;left:22px;top:20px;width:32px;height:32px;border-radius:50%;display:grid;place-items:center;background:rgba(37,227,137,.15);color:var(--vert);font-weight:600;font-size:15px}
.etapes b{display:block;font-weight:500;margin-bottom:2px}
.etapes span{color:var(--dim);font-size:15px}

.pied{border-top:1px solid var(--traitDoux);padding:52px 0 calc(44px + env(safe-area-inset-bottom,0px));background:var(--fond)}
.pied-in{display:grid;grid-template-columns:auto 1fr auto;gap:14px 34px;align-items:center;color:var(--pale);font-size:14px}
.pied-logo{height:26px;width:auto}
.pied nav{display:flex;gap:22px}
.pied nav a{color:var(--dim);text-decoration:none;transition:color .2s}
.pied nav a:hover{color:#fff}
.pied small{grid-column:1 / -1;font-size:12.5px}

/* ── 8. apparitions, écrans étroits ── */
@media (prefers-reduced-motion:no-preference){
  .monte{opacity:0;transform:translateY(28px);transition:opacity .9s var(--ease),transform .9s var(--ease)}
  .monte.vu{opacity:1;transform:none}
  .tuile.monte{transform:translateY(40px) scale(.97)}
  .tuile.monte.vu{transform:none}
  .grille-galerie .tuile:nth-child(2){transition-delay:.08s}
  .grille-galerie .tuile:nth-child(3){transition-delay:.16s}
  .grille-galerie .tuile:nth-child(4){transition-delay:.24s}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .fenetre{transform:none}
}

@media (min-width:981px) and (max-height:719px){
  .carte-pile{position:relative;top:auto;min-height:0;margin-bottom:26px}
}
@media (max-width:980px){
  .nav{display:none}
  .tete .btn-petit{margin-left:auto}
  .carte-pile,.carte-pile:nth-of-type(even){position:relative;top:auto;grid-template-columns:1fr;gap:28px;min-height:0;margin-bottom:22px}
  .carte-pile:nth-of-type(even) .texte{order:0}
  .scene-tel{padding:14px 0 6px}
  .tel{--l:min(250px,62vw)}
  .grille-galerie{grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:clamp(170px,40vw,300px)}
  .essayer-in{grid-template-columns:1fr;min-height:0}
  .essayer-visuel{position:relative;width:100%;height:clamp(220px,52vw,380px);order:-1;-webkit-mask-image:linear-gradient(180deg,#000 60%,#0000 100%);mask-image:linear-gradient(180deg,#000 60%,#0000 100%)}
  .essayer-texte{padding-top:8px}
  .lettre-in{grid-template-columns:1fr;gap:32px}
  .pied-in{grid-template-columns:1fr}
}
@media (max-width:600px){
  .cadre{padding-left:max(18px,env(safe-area-inset-left,0px));padding-right:max(18px,env(safe-area-inset-right,0px))}
  .annonce{font-size:13px;gap:8px}
  .annonce span{display:none}
  .heros{padding-top:52px}
  .actions{flex-direction:column;align-self:stretch}
  .actions .btn{width:100%}
  .heros-visuel{width:calc(100% - 24px);margin-top:44px}
  .carte-pile{padding:24px 20px 20px;border-radius:24px}
  .ecran{border-radius:12px}
  .ecran.film figcaption{padding:10px 14px 9px;font-size:12px}
  .grille-galerie{grid-template-columns:1fr;grid-auto-rows:auto;gap:14px}
  .tuile,.tuile.grande,.tuile.large{grid-column:auto;grid-row:auto;aspect-ratio:4/3}
  .tuile.grande{aspect-ratio:1/1}
  .essayer-in{border-radius:24px}
  .lettre h2 br,.essayer h2 br,.pile-tete h2 br{display:none}
  .form-lettre{grid-template-columns:1fr}
  .choix-mac{grid-template-columns:1fr}
  .etapes li{padding:18px 18px 18px 62px}
  .etapes li::before{left:16px;top:18px}
  .pied nav{flex-wrap:wrap}
}