/* Arkado : direction artistique « autocollant ».
   Fond crème, encre bleu nuit, contours épais, ombres décalées pleines, grosses lettres serrées,
   mots en lettres bulles. Les couleurs vives habillent les sections, jamais tout à la fois. */
:root{
  --creme:#FFF3DE; --creme-f:#F6E4C3; --encre:#1B1A3A; --tomate:#FF5A3C; --rose:#FF9EC7; --soleil:#FFD23F; --ciel:#BFE6FF;
  --titre:"Big Shoulders Display",Impact,sans-serif; --bulle:"Titan One","Fredoka",sans-serif; --texte:"Outfit",system-ui,sans-serif;
  --trait:3px solid var(--encre); --ombre:0 6px 0 var(--encre); --large:1240px;
  --sortie:cubic-bezier(.23,1,.32,1);
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;overflow-x:clip}
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
body{margin:0;background:var(--creme);color:var(--encre);font:400 18px/1.5 var(--texte);-webkit-font-smoothing:antialiased;overflow-x:hidden}
img,canvas,svg{display:block;max-width:100%}
img{height:auto}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit}
h1,h2,h3,p{margin:0}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.cadre{max-width:var(--large);margin:0 auto;padding:0 32px}
:focus-visible{outline:3px solid var(--tomate);outline-offset:3px;border-radius:8px}
section[id]{scroll-margin-top:90px}

/* ---------- typographie ---------- */
.titre{font:900 clamp(58px,9vw,138px)/.86 var(--titre);text-transform:uppercase;letter-spacing:-.005em;text-wrap:balance}
.titre-clair{color:var(--creme)}
.bulle{display:inline-block;white-space:nowrap;font-family:var(--bulle);font-weight:400;text-transform:uppercase;letter-spacing:.01em;color:var(--rose);
  -webkit-text-stroke:.07em var(--encre);paint-order:stroke fill;text-shadow:0 .09em 0 var(--encre);line-height:1}
.titre .bulle{font-size:.82em;transform:rotate(-3deg);margin-left:.08em}
.bulle-p{color:var(--rose)}.bulle-s{color:var(--soleil)}.bulle-t{color:var(--tomate)}

/* ---------- boutons « borne d'arcade » ---------- */
.pilule{display:inline-flex;align-items:center;justify-content:center;height:54px;padding:0 26px;border-radius:99px;border:var(--trait);
  background:var(--tomate);color:var(--creme);font:700 17px var(--texte);white-space:nowrap;cursor:pointer;box-shadow:0 5px 0 var(--encre);
  transition:transform .16s var(--sortie),box-shadow .16s var(--sortie),background-color .2s ease;touch-action:manipulation;-webkit-tap-highlight-color:transparent}
.pilule span{display:inline-block;transition:transform .25s var(--sortie)}
.pilule:active{transform:translateY(4px);box-shadow:0 1px 0 var(--encre)}
.pilule-creme{background:var(--creme);color:var(--encre)}
.pilule-xl{height:72px;padding:0 40px;font-size:22px}
@media (hover:hover) and (pointer:fine){.pilule:hover{transform:translateY(-2px);box-shadow:0 7px 0 var(--encre)}.pilule:hover span{transform:scale(1.04)}}

/* ---------- ouverture ---------- */
.intro{position:fixed;inset:0;z-index:100;background:var(--creme);display:grid;place-items:center;pointer-events:none}
.intro .intro-logo{width:min(560px,78vw)}
.js-pret .intro{display:none}

/* ---------- en-tête ---------- */
.logo{position:fixed;top:24px;left:24px;z-index:40;width:150px}
.onglet{position:fixed;top:0;left:0;right:0;margin-inline:auto;width:max-content;z-index:40;display:flex;align-items:center;gap:2px;padding:10px 12px 12px;background:var(--encre);
  border:var(--trait);border-top:0;border-radius:0 0 26px 26px;box-shadow:0 6px 0 rgba(27,26,58,.14)}
.onglet>a{position:relative;z-index:1;color:var(--creme);font:500 15px var(--texte);padding:9px 15px;border-radius:99px;transition:color .25s ease}
.onglet>a.sous-indic{color:var(--encre)}
.indic{position:absolute;z-index:0;left:0;top:10px;height:calc(100% - 22px);width:0;border-radius:99px;background:var(--creme);opacity:0;
  transition:transform .4s var(--sortie),width .4s var(--sortie),opacity .2s ease}
.sep{width:2px;height:22px;background:rgba(255,243,222,.22);margin:0 8px 0 6px;border-radius:2px}
.langue{position:relative;z-index:1;display:inline-flex;gap:2px;padding:3px;border-radius:99px;background:rgba(255,243,222,.1)}
.langue a{font:700 12.5px/1 var(--texte);letter-spacing:.06em;color:rgba(255,243,222,.6);padding:8px 10px;border-radius:99px;transition:color .2s ease,background-color .2s ease}
.langue a[aria-current]{background:var(--soleil);color:var(--encre)}
@media (hover:hover){.langue a:not([aria-current]):hover{color:var(--creme)}}
.haut-d{position:fixed;top:14px;right:24px;z-index:40;display:flex;align-items:center;gap:10px}
.langue-mob{display:none}
.connexion-haut{display:inline-flex;align-items:center;height:46px;padding:0 18px;border-radius:99px;border:var(--trait);background:var(--creme);color:var(--encre);
  font:700 15px var(--texte);box-shadow:0 4px 0 var(--encre);transition:transform .2s var(--sortie),box-shadow .2s var(--sortie)}
.connexion-haut svg{display:none;width:20px;height:20px;fill:none;stroke:var(--encre);stroke-width:2.2;stroke-linecap:round}
@media (max-width:600px){.connexion-haut svg{display:block}}
.connexion-haut:active{transform:translateY(3px);box-shadow:0 1px 0 var(--encre)}
@media (hover:hover) and (pointer:fine){.connexion-haut:hover{transform:translateY(-2px);box-shadow:0 6px 0 var(--encre)}}
.cta-haut{display:inline-flex;align-items:center;gap:10px;height:52px;padding:0 22px 0 6px;border-radius:99px;border:var(--trait);background:var(--tomate);color:var(--creme);
  font:700 16px var(--texte);white-space:nowrap;box-shadow:0 5px 0 var(--encre);transform:rotate(-2deg);
  transition:transform .3s var(--sortie),box-shadow .2s var(--sortie);touch-action:manipulation;-webkit-tap-highlight-color:transparent}
.cta-ic{width:36px;height:36px;border-radius:50%;background:var(--creme);border:2.5px solid var(--encre);display:grid;place-items:center;transition:transform .45s var(--sortie)}
.cta-ic svg{width:17px;height:17px;fill:var(--tomate)}
.cta-haut:active{transform:rotate(0) translateY(4px);box-shadow:0 1px 0 var(--encre)}
@media (hover:hover) and (pointer:fine){.cta-haut:hover{transform:rotate(0) translateY(-2px);box-shadow:0 7px 0 var(--encre)}.cta-haut:hover .cta-ic{transform:rotate(-12deg) scale(1.1)}}
@media (max-width:1320px){.onglet>a{padding:9px 11px;font-size:14.5px}.sep{margin:0 6px 0 4px}}
@media (max-width:980px){
  body::before{content:"";position:fixed;top:0;left:0;right:0;height:68px;z-index:39;background:var(--creme);border-bottom:var(--trait)}
  .onglet{display:none}.logo{width:118px;top:22px;left:16px}
  .haut-d{top:10px;right:14px;gap:8px}
  .langue-mob{display:inline-flex;background:var(--encre)}
  .cta-haut{height:44px;font-size:14.5px;padding:0 16px 0 5px;gap:8px;transform:none}
  .connexion-haut{height:40px;padding:0 12px;font-size:13.5px;box-shadow:0 3px 0 var(--encre)}.cta-ic{width:30px;height:30px}.cta-ic svg{width:12px;height:12px}
}
@media (max-width:600px){.cta-t,.connexion-t{display:none}.cta-haut{padding:0 5px;width:44px;justify-content:center}.connexion-haut{width:44px;height:44px;padding:0;justify-content:center}.logo{width:104px}}

/* logo en lettres séparées (animées une par une) */
.lettres{position:relative;display:block;width:100%;aspect-ratio:5.0476/1}
.lettres>img{width:100%;height:100%}
.lettres .l{position:absolute;display:block;height:auto;transform-origin:50% 100%}

/* ---------- haut de page ---------- */
.hero{padding:130px 0 70px;position:relative}
.hero-in{max-width:var(--large);margin:0 auto;padding:0 32px;display:grid;grid-template-columns:1.08fr .92fr;gap:24px;align-items:center}
.hero h1{display:flex;flex-direction:column;align-items:flex-start;font:900 clamp(66px,8.6vw,136px)/.84 var(--titre);text-transform:uppercase}
.h-ligne{display:block;overflow:hidden;padding-bottom:.02em;white-space:nowrap}
html[lang="fr"] .hero h1{font-size:clamp(54px,7.2vw,116px)}
.hero h1 .bulle{font-size:.7em;white-space:nowrap;margin-top:.12em;transform:rotate(-4deg);transform-origin:left bottom}
.hero-sous{max-width:30ch;font-size:21px;margin-top:34px;color:#3B3A5C}
.hero-sous b{font-weight:600;color:var(--encre);background:linear-gradient(transparent 62%,var(--soleil) 62%)}
.hero-bt{display:flex;flex-wrap:wrap;gap:12px;margin-top:32px}
.url{display:flex;align-items:center;gap:8px;margin-top:30px;max-width:520px;background:#fff;border:var(--trait);border-radius:99px;padding:6px 6px 6px 22px;box-shadow:var(--ombre)}
.url input{flex:1;min-width:0;border:0;background:none;outline:none;font:500 18px var(--texte);color:var(--encre)}
.url input::placeholder{color:#9B98B5}
.url .pilule{height:48px;box-shadow:none;border-width:2.5px}
.url .pilule:active{transform:scale(.97)}
.url:focus-within{outline:3px solid var(--tomate);outline-offset:3px}
.essais{margin-top:18px;font-size:15px;color:#5A587A}
.essais button{border:0;background:none;padding:0;font-weight:600;color:var(--encre);text-decoration:underline;text-decoration-color:var(--tomate);text-decoration-thickness:2px;text-underline-offset:3px;cursor:pointer}
.hero-ecran{position:relative;justify-self:center;width:min(100%,520px)}
.ecran-jeu{position:relative;aspect-ratio:1/1;background:#FFD240;border:var(--trait);border-radius:40px;box-shadow:0 12px 0 var(--encre);transform:rotate(2.5deg)}
.ecran-video{position:absolute;inset:0;border-radius:37px;overflow:hidden}
.ecran-video video{width:100%;height:100%;object-fit:cover;display:block}
.maintenant{position:absolute;z-index:2;top:-20px;left:28px;display:inline-flex;align-items:center;gap:8px;background:var(--encre);color:var(--soleil);
  font:900 18px/1 var(--titre);letter-spacing:.06em;text-transform:uppercase;padding:10px 16px;border-radius:99px;transform:rotate(-4deg)}
.maintenant i{width:9px;height:9px;border-radius:50%;background:var(--tomate);animation:clignote 1.2s steps(2,start) infinite}
@keyframes clignote{to{visibility:hidden}}
.sort{position:absolute;z-index:3;pointer-events:none}
.sort1{width:86px;right:-30px;top:18%}
.sort2{width:120px;left:-56px;bottom:14%;transform:rotate(-16deg)}
.sort3{width:92px;right:-22px;bottom:-26px;transform:rotate(10deg)}

/* ---------- bandeaux ---------- */
.bandes{position:relative;height:120px;margin:10px 0 0;overflow:hidden}
.bande{position:absolute;left:-5%;width:110%;white-space:nowrap;overflow:hidden;border-block:var(--trait);padding:14px 0}
.bande div{display:inline-block;font:900 40px/1 var(--titre);letter-spacing:.02em;text-transform:uppercase}
.b1{top:36px;background:var(--tomate);color:var(--creme);transform:rotate(-3deg);z-index:2}
.b2{top:92px;background:var(--soleil);color:var(--encre);transform:rotate(2.2deg)}

/* ---------- comment ça marche ---------- */
.comment{background:var(--ciel);padding:130px 0 150px;border-top:var(--trait)}
.pile-cartes{margin-top:60px;display:flex;flex-direction:column;gap:40px}
.carte-etape{position:sticky;top:110px;display:grid;grid-template-columns:1fr 280px;gap:30px;align-items:center;min-height:320px;padding:46px 56px;border:var(--trait);border-radius:40px;box-shadow:0 10px 0 var(--encre);transform-origin:center top}
.e1{background:var(--creme)}.e2{background:var(--soleil);top:130px}.e3{background:var(--rose);top:150px}
.carte-etape h3{font:900 clamp(44px,5vw,76px)/.9 var(--titre);text-transform:uppercase;margin:14px 0 16px}
.carte-etape p{font-size:19px;max-width:36ch}
.num{display:inline-grid;place-items:center;width:52px;height:52px;border-radius:50%;background:var(--encre);color:var(--creme);font:900 26px var(--titre)}
.carte-etape img{width:300px}

/* ---------- où ---------- */
.ou{padding:140px 0}
.ou-grille{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;margin-top:60px}
.ou-carte{border:var(--trait);border-radius:32px;background:#fff;padding:18px 18px 28px;box-shadow:var(--ombre)}
.ou-carte h3{font:900 38px/.95 var(--titre);text-transform:uppercase;margin:22px 8px 8px}
.ou-carte p{margin:0 8px;font-size:17px;color:#3B3A5C}
.ou-vis{height:240px;border-radius:20px;border:2.5px solid var(--encre);position:relative;overflow:hidden;display:grid;place-items:center}
.vis-qr{background:var(--soleil)}.vis-qr img{width:150px;transform:rotate(-6deg) translateX(-40px)}
.vis-qr .vis-axo{position:absolute;width:170px;right:-6px;bottom:-14px;transform:none}
.vis-lien{background:var(--rose);gap:10px;align-content:center}
.lien-faux{font:500 14px "Geist Mono",monospace;background:var(--creme);border:2.5px solid var(--encre);border-radius:99px;padding:6px 14px}
.story{display:flex;flex-direction:column;align-items:center;background:var(--encre);color:var(--creme);border-radius:16px;padding:12px 26px}
.story b{font:400 22px var(--bulle);color:var(--soleil)}.story small{font-size:13px}
.vis-site{background:var(--ciel);align-content:start;justify-items:stretch;padding:16px}
.nav-faux{display:flex;gap:6px;background:var(--creme);border:2.5px solid var(--encre);border-radius:12px;padding:10px}
.nav-faux i{width:10px;height:10px;border-radius:50%;background:var(--encre);opacity:.3}
.bloc-jeu{margin-top:16px;height:130px;border-radius:14px;border:2.5px dashed var(--encre);display:grid;place-items:center;font:400 26px var(--bulle);color:var(--tomate);background:var(--creme)}

/* ---------- le bénéfice en une phrase ---------- */
.roue{background:var(--encre);color:var(--creme);padding:130px 0 40px}
.roue-in{display:grid;grid-template-columns:minmax(0,380px) 1fr;gap:70px;align-items:center}
.roue-img{width:100%;transform:rotate(-6deg)}
.roue-phrase{font:900 clamp(52px,7vw,112px)/.9 var(--titre);text-transform:uppercase;text-wrap:balance}
.roue-phrase em{font-style:normal;color:var(--soleil)}
@media (max-width:980px){.roue{padding:90px 0 20px}.roue-in{grid-template-columns:1fr;gap:30px;justify-items:center;text-align:center}.roue-img{max-width:260px}}

/* ---------- la borne (jeux jouables) ---------- */
.reel{background:var(--encre);padding:130px 0 120px;color:var(--creme);overflow:hidden}
.reel-in{display:grid;grid-template-columns:1fr minmax(0,460px);gap:60px;align-items:center}
.reel-sous{font-size:19px;color:rgba(255,243,222,.78);margin:22px 0 28px;max-width:34ch}
.choix{display:grid;gap:10px;margin:34px 0 30px;max-width:380px}
.choix button{display:flex;flex-direction:column;align-items:flex-start;gap:2px;text-align:left;padding:12px 18px;border-radius:20px;cursor:pointer;
  background:transparent;border:2.5px solid rgba(255,243,222,.25);color:var(--creme);transition:background-color .2s ease,border-color .2s ease,transform .25s var(--sortie)}
.choix b{font:900 28px/1 var(--titre);text-transform:uppercase;letter-spacing:.01em}
.choix small{font-size:14px;opacity:.7}
.choix button.on{background:var(--creme);color:var(--encre);border-color:var(--creme);transform:translateX(8px) rotate(-1deg);box-shadow:0 5px 0 var(--soleil)}
@media (hover:hover){.choix button:not(.on):hover{border-color:var(--creme)}}
.borne{position:relative;width:100%;max-width:460px;justify-self:center}
.borne>img{width:100%}
.ecran{position:absolute;left:20.6%;top:22%;width:57.4%;height:24.6%;overflow:hidden;background:var(--encre);border-radius:8px}
.ecran canvas{position:absolute;inset:0;width:100%;height:100%;filter:saturate(1.05)}
.eu-zone{position:absolute;inset:0;border:0;background:transparent;cursor:pointer;z-index:1}
.eu{position:absolute;inset:0;z-index:2;pointer-events:none;display:flex;flex-direction:column;align-items:center;justify-content:space-between;padding:5% 6%;
  background:linear-gradient(rgba(27,26,58,.5),transparent 30%,transparent 66%,rgba(27,26,58,.6))}
.eu-nom{font:900 clamp(15px,2vw,22px)/1 var(--titre);text-transform:uppercase;letter-spacing:.06em;color:var(--creme)}
.eu-start{position:absolute;top:50%;left:50%;translate:-50% -50%;white-space:nowrap;font:400 clamp(13px,1.7vw,19px)/1 var(--bulle);color:var(--soleil);-webkit-text-stroke:3px var(--encre);paint-order:stroke fill;animation:clignote-start 1.1s steps(2,start) infinite}
@keyframes clignote-start{to{visibility:hidden}}
.eu-nav{display:flex;align-items:center;gap:10px;font:900 14px var(--titre);color:var(--creme);pointer-events:auto}
.eu-nav button{border:0;background:rgba(255,243,222,.15);color:var(--creme);width:24px;height:24px;border-radius:50%;font-size:10px;cursor:pointer;display:grid;place-items:center}
.crt{position:absolute;inset:0;z-index:3;pointer-events:none;border-radius:8px;
  background:repeating-linear-gradient(transparent 0 2px,rgba(0,0,0,.14) 2px 3px);box-shadow:inset 0 0 30px rgba(0,0,0,.45)}
.hot{position:absolute;z-index:4;border:0;background:transparent;cursor:pointer;border-radius:50%}
.hot-joy{left:16%;top:46.5%;width:20%;height:9%}
.hot-bt{left:38%;top:50.5%;width:33%;height:7%;border-radius:20px}
.hot:focus-visible{outline:3px solid var(--soleil)}
@media (hover:hover){.hot:hover{background:rgba(255,210,63,.18)}}

/* ---------- prix ---------- */
.prix{padding:140px 0;text-align:center}
.prix-sous{font-size:19px;color:#3B3A5C;margin-top:20px}
.offre{display:grid;grid-template-columns:.9fr 1.1fr;margin:56px auto 0;max-width:980px;text-align:left;background:#fff;border:var(--trait);border-radius:36px;box-shadow:0 10px 0 var(--encre);overflow:hidden}
.offre-prix{position:relative;background:var(--tomate);color:var(--creme);padding:46px 40px;display:flex;flex-direction:column;align-items:flex-start;gap:12px;border-right:var(--trait)}
.offre-prix .badge{position:static;transform:rotate(-3deg)}
.offre .montant{margin:6px 0 0}
.offre .montant b{font:900 clamp(76px,9vw,118px)/.9 var(--titre);letter-spacing:-.01em}
.offre-sous{font-size:17px;color:#FFE3DA;max-width:22ch}
.offre-prix .pilule{margin-top:14px;background:var(--encre)}
.offre-liste{list-style:none;margin:0;padding:46px 40px;display:grid;gap:18px;align-content:center;font-size:18px}
.offre-liste li{position:relative;padding-left:38px}
.offre-liste li::before{content:"";position:absolute;left:0;top:1px;width:24px;height:24px;border-radius:50%;background:var(--soleil);border:2.5px solid var(--encre)}
.offre-liste li::after{content:"";position:absolute;left:8px;top:7px;width:8px;height:5px;border-left:2.5px solid var(--encre);border-bottom:2.5px solid var(--encre);transform:rotate(-45deg)}
.badge{position:absolute;top:-18px;right:24px;background:var(--soleil);color:var(--encre);border:var(--trait);border-radius:99px;padding:4px 14px;font:400 16px var(--bulle);transform:rotate(4deg)}

/* ---------- FAQ ---------- */
.faq{padding:40px 0 140px}
.faq-in{display:grid;grid-template-columns:.8fr 1.2fr;gap:50px;align-items:start}
.faq-liste{display:grid;gap:14px}
.faq details{border:var(--trait);border-radius:24px;background:#fff;box-shadow:0 4px 0 var(--encre)}
.faq summary{list-style:none;cursor:pointer;padding:20px 24px;font-weight:600;font-size:19px;display:flex;justify-content:space-between;gap:16px;align-items:center}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";flex:none;width:34px;height:34px;border-radius:50%;background:var(--soleil);border:2.5px solid var(--encre);display:grid;place-items:center;font:700 22px/1 var(--texte);transition:transform .3s var(--sortie)}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details p{padding:0 24px 22px;color:#3B3A5C;font-size:17px}

/* ---------- contact ---------- */
.fin{background:var(--tomate);color:var(--creme);padding:120px 0 0;border-top:var(--trait);overflow:hidden}
.fin-in{display:grid;grid-template-columns:1fr minmax(0,520px);gap:60px;align-items:center;padding-bottom:100px}
.fin h2{font:900 clamp(52px,6.4vw,100px)/.88 var(--titre);text-transform:uppercase;text-wrap:balance}
.fin-axo{width:180px;margin-bottom:10px}
.fin-sous{margin-top:20px;font-size:18px;color:#FFE3DA;max-width:34ch}
.fin-sous a{color:var(--creme);font-weight:600;text-decoration:underline;text-underline-offset:3px}
.contact{background:var(--creme);color:var(--encre);border:var(--trait);border-radius:32px;padding:30px;box-shadow:0 10px 0 var(--encre);display:grid;gap:16px}
.champs-2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.champ{display:flex;flex-direction:column;gap:6px;font-weight:600;font-size:14px}
.champ input,.champ textarea{font:500 16px var(--texte);color:var(--encre);background:#fff;border:2.5px solid var(--encre);border-radius:14px;padding:12px 14px;outline:none;transition:box-shadow .15s ease}
.champ input{height:50px}
.champ textarea{resize:vertical;min-height:84px}
.champ input:focus,.champ textarea:focus{box-shadow:0 0 0 4px var(--soleil)}
.contact .pilule{width:100%;margin-top:4px}
.piege{position:absolute;left:-9999px}
.contact-etat{font-size:15px;font-weight:600;margin:0;border-radius:12px}
.contact-etat:empty{display:none}
.contact-etat.ok{background:var(--soleil);padding:12px 14px}
.contact-etat.ko{background:#FFE3DA;padding:12px 14px;color:#9A2A14}
.b3{position:relative;left:-5%;background:var(--soleil);color:var(--encre);transform:rotate(-1.5deg);margin-bottom:30px}

/* ---------- pied ---------- */
.pied{background:var(--encre);color:var(--creme);padding:60px 0 50px;overflow:clip}
.pied-in{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:24px}
.logo-geant{margin-top:56px}
.pied nav{display:flex;flex-wrap:wrap;gap:22px;font-weight:500}
.pied p{width:100%;font-size:14px;opacity:.6}

/* ---------- fenêtre du jeu ---------- */
.modale{position:fixed;inset:0;z-index:90;display:grid;place-items:center;overscroll-behavior:contain}
.modale[hidden]{display:none}
.modale-fond{position:absolute;inset:0;background:rgba(27,26,58,.6);animation:fondu .2s ease-out}
.modale-boite{position:relative;animation:pop .3s var(--sortie)}
.fermer{position:absolute;top:0;right:-64px;width:48px;height:48px;border-radius:50%;border:var(--trait);background:var(--creme);cursor:pointer;display:grid;place-items:center;box-shadow:0 4px 0 var(--encre)}
.fermer svg{width:20px;height:20px;stroke:var(--encre);stroke-width:2.6;stroke-linecap:round}
@keyframes fondu{from{opacity:0}}
@keyframes pop{from{opacity:0;transform:scale(.95)}}

/* ---------- écrans étroits ---------- */
@media (max-width:980px){
  .hero{padding:96px 0 50px}
  .hero h1{font-size:clamp(54px,15vw,96px)}
  .hero-in{grid-template-columns:1fr;gap:0}
  .hero-texte{display:contents}
  .hero h1{order:1}
  .hero-ecran{order:2;width:min(86%,420px);margin:34px auto 18px}
  .hero-sous{order:3;margin-top:24px}.hero-bt{order:4}
  .maintenant{font-size:15px;top:-16px;left:20px;padding:8px 13px}
  .sort1{width:62px;right:-18px}.sort2{width:84px;left:-30px}.sort3{width:66px;right:-12px;bottom:-18px}
  .carte-etape{grid-template-columns:1fr;padding:34px 28px;top:90px}
  .carte-etape img{width:200px;justify-self:end;margin-top:-20px}
  .ou-grille{grid-template-columns:1fr}
  .reel{padding:90px 0}.reel-in{grid-template-columns:1fr;gap:36px}.borne{max-width:360px}.choix button.on{transform:none}
  .offre{grid-template-columns:1fr}.offre-prix{border-right:0;border-bottom:var(--trait);padding:34px 26px}.offre-liste{padding:30px 26px}
  .fin{padding-top:90px}.fin-in{grid-template-columns:1fr;gap:36px;padding-bottom:70px}.fin h2{font-size:clamp(44px,12vw,72px)}
  .champs-2{grid-template-columns:1fr}.contact{padding:22px}
  .faq-in{grid-template-columns:1fr}
  .fermer{right:0;top:-62px}
}
@media (max-width:560px){
  .cadre,.hero-in{padding:0 16px}
  .bandes{height:100px}.bande div{font-size:30px}.b1{top:26px}.b2{top:92px}
  .url{padding-left:16px}.url .pilule{padding:0 16px;font-size:15px}
}
@media (prefers-reduced-motion:reduce){
  .maintenant i,.eu-start{animation:none}
  .pilule,.pilule span,.faq summary::after{transition:none}
  .modale-fond,.modale-boite{animation:none}
}