@font-face{font-family:"Bricolage Grotesque";src:url("/fonts/bricolage-grotesque.woff2") format("woff2");font-weight:200 800;font-style:normal;font-display:swap}
:root{
  --fond:#FFFFFF;--fond2:#F2F2F7;--carte:#FFFFFF;--texte:#000000;--texte2:#3A3A3C;--trait:#D9D9DF;
  --accent:#FF2E7E;--ember:#FF8A3D;--aurore:#8B5CFF;--menthe:#0E8F6B;
  --degrade:linear-gradient(135deg,#FF8A3D,#FF2E7E);
  --halo:.20;
  --titre:"Bricolage Grotesque",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --corps:ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  color-scheme:light dark;
}
@media (prefers-color-scheme:dark){
  :root{--fond:#1C1530;--fond2:#231A3A;--carte:#2A2142;--texte:#FFFFFF;--texte2:#FFFFFF;--trait:#403560;--accent:#FF4F90;--menthe:#34E0B0;--halo:.38}
}
*{box-sizing:border-box}
html{scroll-behavior:auto;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--fond);color:var(--texte);font-family:var(--corps);font-size:18px;line-height:1.6}
a{color:inherit;text-decoration-color:var(--accent);text-decoration-thickness:2px;text-underline-offset:3px}
a:hover{text-decoration-color:currentColor}
:focus-visible{outline:3px solid var(--aurore);outline-offset:3px;border-radius:6px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.lien-evitement{position:absolute;left:-999px;top:8px;background:var(--fond);color:var(--texte);padding:10px 14px;border-radius:8px;z-index:10}
.lien-evitement:focus{left:12px}
.cadre{max-width:1120px;margin:0 auto;padding:0 24px}

/* En-tête */
.entete{border-bottom:1px solid var(--trait)}
.entete .cadre{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:72px}
.marque{display:flex;align-items:center;gap:12px;text-decoration:none;font-family:var(--titre);font-weight:700;font-size:24px;letter-spacing:-.02em}
.marque img{width:40px;height:40px;border-radius:10px;display:block}
.menu{display:flex;align-items:center;gap:22px;font-size:16px}
.menu a{text-decoration:none}
.menu a:hover{text-decoration:underline;text-decoration-color:var(--accent)}
.menu .petit-bouton{background:var(--texte);color:var(--fond);padding:9px 16px;border-radius:999px;font-weight:600}
.menu .petit-bouton:hover{text-decoration:none;opacity:.88}
@media (max-width:760px){.menu .ancre{display:none}.menu{gap:14px}}
@media (max-width:420px){.menu .langue{display:none}}

/* Hero */
.hero{padding:56px 0 72px;position:relative;overflow:hidden}
.hero .cadre{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:48px;align-items:center}
h1,h2,h3{font-family:var(--titre);margin:0;letter-spacing:-.025em;font-weight:700}
h1{font-size:clamp(2.2rem,5vw,3.9rem);line-height:1.02;text-wrap:balance}
.intro{font-size:clamp(1.1rem,2vw,1.3rem);max-width:34em;margin:22px 0 0;color:var(--texte2)}
.attente{margin-top:30px;max-width:34em}
.attente label{display:block;font-weight:600;margin-bottom:8px}
.champ{display:flex;gap:10px;flex-wrap:wrap}
.champ input[type=email]{flex:1 1 240px;min-width:0;font:inherit;color:var(--texte);background:var(--carte);border:2px solid var(--trait);border-radius:14px;padding:14px 16px;min-height:54px}
.champ input[type=email]::placeholder{color:#6B6B72}
@media (prefers-color-scheme:dark){.champ input[type=email]::placeholder{color:#C9C0E0}}
.champ input[type=email]:focus{border-color:var(--aurore);outline:none}
.bouton{font:inherit;font-weight:700;font-size:19px;color:#fff;background:var(--degrade);border:0;border-radius:14px;padding:0 26px;min-height:54px;cursor:pointer;text-shadow:0 1px 1px rgba(0,0,0,.18)}
.bouton:hover{filter:brightness(1.06)}
.bouton[disabled]{opacity:.65;cursor:wait}
.piege{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.mention{font-size:15px;color:var(--texte2);margin:12px 0 0}
.retour{margin:12px 0 0;font-weight:600;min-height:1.6em}
.retour.ok{color:var(--menthe)}
.retour.erreur{color:#C4163E}
@media (prefers-color-scheme:dark){.retour.erreur{color:#FF8FA8}}
.magasins{display:flex;gap:12px;flex-wrap:wrap;margin-top:28px}
.magasin{display:inline-flex;flex-direction:column;border:2px solid var(--trait);border-radius:14px;padding:9px 18px;min-width:168px;line-height:1.25}
.magasin small{font-size:13px;color:var(--texte2)}
.magasin strong{font-size:17px}

/* Aperçu téléphone */
.scene{position:relative;display:flex;justify-content:center;padding:12px 0}
.scene::before{content:"";position:absolute;inset:6% 4% 4% 4%;border-radius:50%;background:radial-gradient(closest-side,var(--aurore),var(--accent) 55%,var(--ember));opacity:var(--halo);filter:blur(56px)}
.tel{position:relative;width:min(300px,78vw);aspect-ratio:390/825;border-radius:46px;background:#14101F;padding:10px;box-shadow:0 30px 60px -28px rgba(20,16,31,.55)}
/* Copie de l'écran Accueil de l'application (390 x 825 points) : 1 point = var(--u) */
.ecran{--u:calc(100cqw/390);container-type:inline-size;position:relative;height:100%;border-radius:37px;overflow:hidden;background:#1C1530;color:#fff;font-family:var(--corps)}
.ecran svg{display:block}
.plein{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 12%}
.voile{position:absolute;inset:0;background:linear-gradient(to bottom,rgba(0,0,0,0) 0%,rgba(0,0,0,.25) 42%,rgba(0,0,0,.75) 70%,rgba(0,0,0,.97) 100%)}
.etat{position:absolute;top:calc(14*var(--u));left:calc(26*var(--u));right:calc(22*var(--u));display:flex;justify-content:space-between;align-items:center;font-size:calc(14*var(--u));font-weight:600;text-shadow:0 1px 4px rgba(0,0,0,.35)}
.etat-d svg{width:calc(38*var(--u));height:auto}
.t-entete{position:absolute;top:calc(50*var(--u));left:calc(16*var(--u));right:calc(16*var(--u));display:flex;justify-content:space-between;align-items:center}
.nomapp{display:flex;align-items:flex-end;font-family:var(--corps);font-size:calc(18*var(--u));font-weight:800;text-shadow:0 0 6px rgba(0,0,0,.3)}
.nomapp .c1{width:calc(16*var(--u));height:calc(16*var(--u));margin:0 0 calc(2*var(--u)) calc(4*var(--u))}
.nomapp .c2{width:calc(9*var(--u));height:calc(9*var(--u));margin:0 0 calc(1*var(--u)) calc(-9*var(--u))}
.t-menu{width:calc(34*var(--u));height:calc(34*var(--u));border-radius:50%;background:rgba(0,0,0,.3);display:grid;place-items:center}
.t-menu svg{width:calc(22*var(--u));height:calc(22*var(--u))}
.pnouveau{position:absolute;top:calc(110*var(--u));left:calc(20*var(--u));background:#FF5C9A;border-radius:calc(12*var(--u));padding:calc(5*var(--u)) calc(12*var(--u));font-size:calc(11*var(--u));font-weight:700}
.enligne{position:absolute;top:calc(110*var(--u));right:calc(20*var(--u));width:calc(14*var(--u));height:calc(14*var(--u));border-radius:50%;background:#5DCAA5;border:calc(2*var(--u)) solid #fff;box-sizing:border-box}
.contenu{position:absolute;left:0;right:0;bottom:calc(180*var(--u));padding:0 calc(24*var(--u))}
.nom{font-size:calc(46*var(--u));font-weight:800;line-height:calc(50*var(--u))}
.age{font-size:calc(20*var(--u));font-weight:600;margin-top:calc(2*var(--u))}
.lieu{display:flex;align-items:center;gap:calc(4*var(--u));margin-top:calc(6*var(--u));font-size:calc(13*var(--u));font-weight:600}
.lieu svg{width:calc(14*var(--u));height:calc(14*var(--u));color:rgba(255,255,255,.85)}
.bio{margin:calc(16*var(--u)) 0 0;max-width:80%;font-size:calc(15*var(--u));line-height:calc(21*var(--u))}
.chips{display:flex;flex-wrap:wrap;gap:calc(8*var(--u));margin-top:calc(16*var(--u))}
.chips i{font-style:normal;background:rgba(255,255,255,.2);border-radius:calc(16*var(--u));padding:calc(6*var(--u)) calc(13*var(--u));font-size:calc(12*var(--u));font-weight:600}
.rail{position:absolute;right:calc(16*var(--u));bottom:calc(170*var(--u));display:flex;flex-direction:column;gap:calc(16*var(--u));align-items:center}
.b{width:calc(52*var(--u));height:calc(52*var(--u));border-radius:50%;background:rgba(0,0,0,.35);display:grid;place-items:center}
.b svg{width:calc(22*var(--u));height:calc(22*var(--u))}
.b-non{background:rgba(226,75,74,.85)}
.b-non svg{width:calc(24*var(--u));height:calc(24*var(--u))}
.barre-onglets{position:absolute;left:calc(16*var(--u));right:calc(16*var(--u));bottom:calc(16*var(--u));height:calc(62*var(--u));display:flex;background:rgba(20,13,32,.95);border-radius:calc(22*var(--u));overflow:hidden;box-shadow:0 calc(6*var(--u)) calc(12*var(--u)) rgba(0,0,0,.25)}
.o{flex:1;position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:calc(2*var(--u));color:rgba(255,255,255,.55)}
.o svg{width:calc(23*var(--u));height:calc(23*var(--u))}
.o small{font-size:calc(10*var(--u));font-weight:600}
.o.actif{color:#fff}
.o.actif svg{transform:scale(1.18) translateY(calc(-1*var(--u)))}
.trait{position:absolute;top:0;left:50%;width:calc(28*var(--u));height:calc(3*var(--u));margin-left:calc(-14*var(--u));border-radius:2px;background:linear-gradient(90deg,#FF8A3D,#FF2E7E)}
.legende{position:absolute;left:0;right:0;bottom:-6px;text-align:center;font-size:13px;color:var(--texte2)}

/* Sections */
section{padding:84px 0}
.fond2{background:var(--fond2)}
h2{font-size:clamp(1.9rem,4.2vw,3.1rem);line-height:1.08;text-wrap:balance;max-width:20em}
.sous{max-width:36em;margin:16px 0 0;color:var(--texte2)}
.deux{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 56px;margin-top:44px}
.point{padding:26px 0;border-top:1px solid var(--trait)}
.point h3{font-size:1.4rem;line-height:1.2}
.point p{margin:8px 0 0;color:var(--texte2)}
.etapes{list-style:none;margin:44px 0 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:40px;counter-reset:e}
.etapes li{counter-increment:e;border-top:3px solid var(--texte);padding-top:18px}
.etapes li::before{content:counter(e);display:block;font-family:var(--titre);font-weight:800;font-size:3.4rem;line-height:1;letter-spacing:-.04em;margin-bottom:10px}
.etapes h3{font-size:1.4rem}
.etapes p{margin:8px 0 0;color:var(--texte2)}
.faq{margin-top:36px;max-width:46em}
details{border-top:1px solid var(--trait);padding:4px 0}
details:last-child{border-bottom:1px solid var(--trait)}
summary{cursor:pointer;font-family:var(--titre);font-weight:600;font-size:1.25rem;letter-spacing:-.01em;padding:16px 0;list-style:none;display:flex;justify-content:space-between;gap:16px;align-items:center}
summary::-webkit-details-marker{display:none}
summary::after{content:"+";font-size:1.7rem;line-height:1;font-weight:500}
details[open] summary::after{content:"\2212"}
details p{margin:0 0 18px;color:var(--texte2);max-width:40em}
.final{text-align:left}
.final .attente{margin-top:26px}

/* Pied */
.pied{border-top:1px solid var(--trait);padding:32px 0 44px;font-size:15px;color:var(--texte2)}
.pied .cadre{display:flex;flex-wrap:wrap;gap:12px 28px;justify-content:space-between}
.pied nav{display:flex;flex-wrap:wrap;gap:8px 22px}

@media (max-width:900px){
  .hero .cadre{grid-template-columns:1fr;gap:36px}
  .scene{order:2}
  .deux{grid-template-columns:1fr}
  .etapes{grid-template-columns:1fr;gap:28px}
  section{padding:60px 0}
}
@media (prefers-reduced-motion:reduce){*{scroll-behavior:auto!important}}

/* ===== Refonte : héros sombre animé ===== */
.sombre{--fond:#1C1530;--fond2:#231A3A;--carte:rgba(255,255,255,.09);--texte:#FFFFFF;--texte2:#EDE8F8;--trait:rgba(255,255,255,.26);--accent:#FF4F90;--menthe:#34E0B0;color:#fff}
.sombre .champ input[type=email]::placeholder{color:#C9C0E0}
.sombre .retour.erreur{color:#FF9DB4}
.entete.sombre{position:absolute;top:0;left:0;right:0;z-index:5;background:transparent;border:0}
.hero.sombre{background:#1C1530;padding:118px 0 72px;min-height:min(940px,100svh);display:flex;align-items:center}
.hero .cadre{position:relative;z-index:2;width:100%;gap:32px;grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr)}
.fonds{position:absolute;inset:0;overflow:hidden;z-index:0}
.fonds i{position:absolute;border-radius:50%;filter:blur(90px);opacity:.55;will-change:transform}
.fonds i:nth-child(1){width:620px;height:620px;left:-160px;top:-120px;background:#FF8A3D;animation:derive1 22s ease-in-out infinite alternate}
.fonds i:nth-child(2){width:560px;height:560px;right:-120px;top:10%;background:#FF2E7E;animation:derive2 26s ease-in-out infinite alternate}
.fonds i:nth-child(3){width:640px;height:640px;left:34%;bottom:-340px;background:#8B5CFF;animation:derive3 30s ease-in-out infinite alternate}
@keyframes derive1{to{transform:translate(160px,120px) scale(1.15)}}
@keyframes derive2{to{transform:translate(-140px,160px) scale(.9)}}
@keyframes derive3{to{transform:translate(-200px,-90px) scale(1.12)}}
.hero.sombre::after{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(to bottom,rgba(28,21,48,.25),rgba(28,21,48,.55));pointer-events:none}

h1{font-weight:800;font-size:clamp(2.4rem,5.2vw,4.4rem);line-height:.98;letter-spacing:-.035em}
.mot{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.08em;margin-bottom:-.08em}
.mot>span{display:inline-block;transform:translateY(112%);animation:monte .9s cubic-bezier(.2,.8,.2,1) forwards;animation-delay:calc(.12s + var(--i)*.07s)}
@keyframes monte{to{transform:none}}
.intro{opacity:0;animation:apparait .8s ease forwards .9s}
.hero .attente,.hero .magasins,.hero .mention{opacity:0;animation:apparait .8s ease forwards 1.1s}
@keyframes apparait{to{opacity:1}}
.sombre .champ input[type=email]{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.3);backdrop-filter:blur(8px)}
.sombre .champ input[type=email]:focus{border-color:#fff}
.sombre .bouton{box-shadow:0 10px 30px -8px rgba(255,46,126,.7)}

.magasin{flex-direction:row;align-items:center;gap:12px;padding:10px 20px 10px 14px;background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.28);backdrop-filter:blur(8px);min-width:0}
.magasin .mi{display:grid;place-items:center;width:38px;height:38px;border-radius:11px;background:var(--degrade)}
.magasin .mi svg{width:22px;height:22px;color:#fff}
.magasin>span{display:flex;flex-direction:column;line-height:1.2}
.magasin small{display:flex;align-items:center;gap:6px;color:var(--texte2)}
.magasin small::before{content:"";width:7px;height:7px;border-radius:50%;background:#FFC24D;animation:bat 1.6s ease-in-out infinite}
@keyframes bat{50%{transform:scale(1.6);opacity:.5}}

/* Scène : anneaux de « pouls », puces de villes, téléphone */
.scene{padding:0;min-height:560px;align-items:center}
.scene::before{display:none}
.anneaux{position:absolute;left:50%;top:50%;width:0;height:0}
.anneaux i{position:absolute;left:-210px;top:-210px;width:420px;height:420px;border-radius:50%;border:2px solid rgba(255,255,255,.45);opacity:0;animation:pouls 6s ease-out infinite}
.anneaux i:nth-child(2){animation-delay:2s}.anneaux i:nth-child(3){animation-delay:4s}
@keyframes pouls{0%{transform:scale(.55);opacity:.7}100%{transform:scale(2.1);opacity:0}}
.tel{position:relative;z-index:2;opacity:0;animation:entree 1.2s cubic-bezier(.2,.8,.2,1) forwards .5s,flotte 7s ease-in-out infinite 1.7s;box-shadow:0 50px 90px -30px rgba(0,0,0,.65),0 0 0 1.5px rgba(255,255,255,.18)}
@keyframes entree{from{opacity:0;transform:translateY(60px) rotate(5deg) scale(.94)}to{opacity:1;transform:none}}
@keyframes flotte{50%{transform:translateY(-12px) rotate(-.8deg)}}
.puce{position:absolute;z-index:3;display:inline-flex;align-items:center;gap:9px;padding:9px 16px 9px 12px;border-radius:999px;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.3);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);font-size:15px;font-weight:600;white-space:nowrap;color:#fff;opacity:0;animation:puceIn .8s ease forwards,puceFlotte 8s ease-in-out infinite}
.puce b{width:10px;height:10px;border-radius:50%;background:#5DCAA5;box-shadow:0 0 0 4px rgba(93,202,165,.25)}
.p1{left:-4%;top:20%;animation-delay:1.5s,1.5s}
.p2{right:-10%;top:44%;animation-delay:1.8s,2s}.p2 b{background:#FF8A3D;box-shadow:0 0 0 4px rgba(255,138,61,.25)}
.p3{left:-2%;bottom:14%;animation-delay:2.1s,3s}.p3 b{background:#A184FF;box-shadow:0 0 0 4px rgba(161,132,255,.25)}
@keyframes puceIn{to{opacity:1}}
@keyframes puceFlotte{50%{transform:translateY(-14px)}}

/* Boucle dans l'écran : le cœur est touché, un « match » apparaît */
.b-oui{position:relative;animation:tape 9s ease-in-out infinite 3s}
@keyframes tape{0%,2%{transform:scale(1);background:rgba(0,0,0,.35)}4%{transform:scale(.84)}7%{transform:scale(1.14);background:#FF5C9A}10%,70%{transform:scale(1);background:#FF5C9A}76%,100%{transform:scale(1);background:rgba(0,0,0,.35)}}
.c{position:absolute;left:50%;top:50%;width:calc(14*var(--u));height:calc(13*var(--u));margin:calc(-6*var(--u)) 0 0 calc(-7*var(--u));background:#FF5C9A;opacity:0;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z'/%3E%3C/svg%3E") center/contain no-repeat;animation:jaillit 9s ease-out infinite 3s}
.c1{--dx:calc(-26*var(--u))}.c2{--dx:calc(-8*var(--u));animation-delay:3.08s}.c3{--dx:calc(14*var(--u));animation-delay:3.16s}.c4{--dx:calc(-18*var(--u));animation-delay:3.24s}.c5{--dx:calc(24*var(--u));animation-delay:3.32s}
@keyframes jaillit{0%,6%{opacity:0;transform:translate(0,0) scale(.4)}8%{opacity:1}22%{opacity:0;transform:translate(var(--dx),calc(-95*var(--u))) scale(1.3)}100%{opacity:0}}
.match{position:absolute;left:calc(14*var(--u));right:calc(14*var(--u));top:calc(96*var(--u));display:flex;align-items:center;gap:calc(12*var(--u));padding:calc(12*var(--u)) calc(16*var(--u));border-radius:calc(20*var(--u));background:linear-gradient(135deg,#FF8A3D,#FF2E7E);box-shadow:0 calc(14*var(--u)) calc(30*var(--u)) rgba(255,46,126,.45);opacity:0;transform:translateY(calc(-30*var(--u))) scale(.92);animation:matchIn 9s cubic-bezier(.2,.9,.2,1) infinite 3s}
.match>svg{width:calc(28*var(--u));height:calc(28*var(--u));flex:none}
.match strong{display:block;font-size:calc(16*var(--u));font-weight:800;line-height:1.2}
.match small{display:block;font-size:calc(12.5*var(--u));opacity:.95}
@keyframes matchIn{0%,9%{opacity:0;transform:translateY(calc(-30*var(--u))) scale(.92)}13%{opacity:1;transform:translateY(0) scale(1.04)}16%,70%{opacity:1;transform:none}76%,100%{opacity:0;transform:translateY(calc(-20*var(--u))) scale(.96)}}

/* Bandeau défilant */
.bandeau{overflow:hidden;background:var(--degrade);color:#fff;padding:18px 0;border-block:1px solid rgba(255,255,255,.2)}
.piste{display:flex;width:max-content;animation:defile 48s linear infinite}
.bandeau:hover .piste{animation-play-state:paused}
.piste span{font-family:var(--titre);font-weight:800;font-size:clamp(1.3rem,2.6vw,2rem);letter-spacing:-.02em;padding:0 28px;white-space:nowrap;display:flex;align-items:center;gap:56px}
.piste span::after{content:"";width:12px;height:12px;background:currentColor;opacity:.75;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z'/%3E%3C/svg%3E") center/contain no-repeat}
@keyframes defile{to{transform:translateX(-50%)}}

/* Appel final */
.final.sombre{position:relative;overflow:hidden;background:#1C1530;padding:110px 0}
.final.sombre::before{content:"";position:absolute;inset:0;background:radial-gradient(60% 90% at 15% 20%,rgba(255,138,61,.45),transparent 70%),radial-gradient(55% 80% at 90% 80%,rgba(139,92,255,.5),transparent 70%),radial-gradient(40% 60% at 70% 10%,rgba(255,46,126,.4),transparent 70%)}
.final.sombre .cadre{position:relative}
.final h2{font-size:clamp(2.4rem,6vw,4.6rem);font-weight:800;line-height:1;max-width:14em}

@media (max-width:900px){
  .hero .cadre{grid-template-columns:minmax(0,1fr)}
  .hero.sombre{padding-top:104px;min-height:0}
  .scene{min-height:0;padding:30px 0 10px}
  .p1{left:0;top:8%}.p2{right:0;top:40%}.p3{left:0;bottom:6%}
  .puce{font-size:13px;padding:7px 12px 7px 9px}
  .anneaux i{width:320px;height:320px;left:-160px;top:-160px}
}
@media (max-width:480px){.p2{display:none}.p1{left:-2%}}
@media (prefers-reduced-motion:reduce){
  .mot>span,.intro,.hero .attente,.hero .magasins,.hero .mention,.tel,.puce{animation:none!important;opacity:1!important;transform:none!important}
  .fonds i,.anneaux i,.piste,.b-oui,.c,.magasin small::before{animation:none!important}
  .match{animation:none!important;opacity:1;transform:none}
  .c{display:none}
}

/* ===== Version 2 : interactions, carte, révélations ===== */
html{scroll-padding-top:84px}
.progres{position:fixed;top:0;left:0;right:0;height:3px;z-index:30;background:linear-gradient(90deg,#FF8A3D,#FF2E7E,#8B5CFF);transform-origin:0 50%;transform:scaleX(0);pointer-events:none}
.entete.sombre{position:fixed;transition:background .35s,backdrop-filter .35s,border-color .35s}
.entete.sombre.scroll{background:rgba(28,21,48,.78);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border-bottom:1px solid rgba(255,255,255,.12)}
.entete.sombre .cadre{min-height:68px}

/* Survol : logo, navigation, boutons */
.marque img{transition:transform .35s cubic-bezier(.3,1.6,.5,1)}
.marque:hover img{transform:rotate(-10deg) scale(1.12)}
.menu a.ancre,.menu a.langue{position:relative;text-decoration:none}
.menu a.ancre::after,.menu a.langue::after{content:"";position:absolute;left:0;right:0;bottom:-5px;height:2px;border-radius:2px;background:var(--degrade);transform:scaleX(0);transition:transform .3s}
.menu a.ancre:hover::after,.menu a.langue:hover::after{transform:scaleX(1)}
.menu a:hover{text-decoration:none}
.petit-bouton,.bouton,.magasin{transition:translate .25s ease-out,box-shadow .3s,filter .3s,background .3s,border-color .3s}
.bouton{position:relative;overflow:hidden}
.bouton::after{content:"";position:absolute;inset:0;background:linear-gradient(110deg,transparent 30%,rgba(255,255,255,.45) 50%,transparent 70%);transform:translateX(-120%)}
.bouton:hover::after{transform:translateX(120%);transition:transform .8s}
.bouton:hover{box-shadow:0 14px 36px -8px rgba(255,46,126,.85)}
.bouton:active{scale:.97}
.champ input[type=email]{transition:border-color .25s,box-shadow .25s,background .25s}
.champ input[type=email]:focus{box-shadow:0 0 0 5px rgba(139,92,255,.35)}
.magasin{position:relative;overflow:hidden}
.magasin::after{content:"";position:absolute;inset:0;background:linear-gradient(110deg,transparent 35%,rgba(255,255,255,.28) 50%,transparent 65%);transform:translateX(-130%)}
.magasin:hover{border-color:rgba(255,255,255,.7);background:rgba(255,255,255,.18)}
.magasin:hover::after{transform:translateX(130%);transition:transform .7s}
.magasin .mi{transition:transform .35s cubic-bezier(.3,1.6,.5,1)}
.magasin:hover .mi{transform:rotate(-12deg) scale(1.14)}

/* Héros : lumière qui suit le curseur, inclinaison, puces réactives */
.hero.sombre::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:radial-gradient(560px circle at var(--mx,72%) var(--my,28%),rgba(255,255,255,.14),transparent 62%)}
.inclin{position:relative;z-index:2;transform:perspective(1100px) rotateY(calc(var(--px,0)*11deg)) rotateX(calc(var(--py,0)*-9deg));transition:transform .25s ease-out}
.puce{pointer-events:auto;cursor:default;translate:calc(var(--px,0)*var(--k,18)*1px) calc(var(--py,0)*var(--k,18)*.7px);transition:translate .3s ease-out,background .25s,scale .25s,box-shadow .25s}
.p1{--k:-26}.p2{--k:30}.p3{--k:-16}
.puce:hover{scale:1.1;background:rgba(255,255,255,.26);box-shadow:0 12px 30px -10px rgba(0,0,0,.5)}
.puce:hover b{animation:bat .9s infinite}
.cclic{position:absolute;z-index:6;width:calc(var(--t)*1px);height:calc(var(--t)*1px);margin:calc(var(--t)*-.5px) 0 0 calc(var(--t)*-.5px);pointer-events:none;background:linear-gradient(135deg,#FF8A3D,#FF2E7E);-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z'/%3E%3C/svg%3E") center/contain no-repeat;animation:cclic 1.3s cubic-bezier(.2,.7,.3,1) forwards}
@keyframes cclic{0%{opacity:0;transform:translate(0,0) scale(.3) rotate(0)}12%{opacity:1}100%{opacity:0;transform:translate(calc(var(--dx)*1px),calc(var(--dy)*1px)) scale(1.15) rotate(var(--r))}}

/* Révélation des titres au défilement */
.js [data-rev] .mot>span{transform:translateY(112%);animation:none}
.js [data-rev].vu .mot>span{animation:monte .9s cubic-bezier(.2,.8,.2,1) forwards;animation-delay:calc(var(--i)*.06s)}
h2{font-weight:800;letter-spacing:-.03em}
h2 .mot{padding-bottom:.12em;margin-bottom:-.12em}

/* Carte */
.carte-sec{position:relative;overflow:hidden;background:#1C1530;padding:104px 0 96px}
.carte-sec .cadre{position:relative;z-index:2}
.fonds2{position:absolute;inset:0;z-index:0}
.fonds2 i{position:absolute;border-radius:50%;filter:blur(110px);opacity:.4}
.fonds2 i:nth-child(1){width:520px;height:520px;left:-100px;top:10%;background:#8B5CFF}
.fonds2 i:nth-child(2){width:480px;height:480px;right:-80px;bottom:-10%;background:#FF2E7E}
.carte-sec h2{font-size:clamp(2.1rem,5vw,3.8rem);line-height:1.02;max-width:15em}
.bascule{position:relative;display:inline-flex;margin-top:30px;padding:5px;border-radius:999px;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.22);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.curseur{position:absolute;top:5px;bottom:5px;left:5px;width:calc(50% - 5px);border-radius:999px;background:var(--degrade);box-shadow:0 8px 22px -8px rgba(255,46,126,.8);transform:translateX(calc(var(--i)*100%));transition:transform .5s cubic-bezier(.3,1.3,.4,1)}
.bascule button{position:relative;font:inherit;font-weight:700;font-size:16px;color:#fff;background:none;border:0;padding:12px 24px;min-width:168px;cursor:pointer;border-radius:999px;transition:opacity .25s}
.bascule button[aria-selected=false]{opacity:.78}
.bascule button:hover{opacity:1}
.carte{position:relative;margin-top:30px;border-radius:28px;background:linear-gradient(160deg,rgba(255,255,255,.09),rgba(255,255,255,.02));border:1px solid rgba(255,255,255,.18);padding:18px 18px 14px;box-shadow:0 40px 80px -40px rgba(0,0,0,.7)}
.cv{display:block;width:100%;height:auto;aspect-ratio:1000/391;overflow:hidden;border-radius:18px;cursor:crosshair}
.pts{stroke:rgba(255,255,255,.26);fill:none}
.pts-monde{stroke-width:3.3}.pts-europe{stroke-width:.62}
.clair{stroke:#FF8A3D}
.clair-monde{stroke-width:3.3}.clair-europe{stroke-width:.62}
.carte{--mq:1}
.mode-local .pts-monde,.mode-local .clair-monde{opacity:0}
.mode-monde .pts-europe,.mode-monde .clair-europe{opacity:0}
.pts,.clair,.arcs,.voyages,.zone,.ville{transition:opacity .6s}
.zone-r{fill:none;stroke:#FF4F90;stroke-width:.25;stroke-dasharray:1.1 .9;transform-origin:center;transform-box:fill-box;animation:tourne 22s linear infinite}
@keyframes tourne{to{transform:rotate(360deg)}}
.zone-f{animation:resp 3.2s ease-in-out infinite;transform-origin:center;transform-box:fill-box}
@keyframes resp{50%{transform:scale(1.22)}}
.mode-monde .zone{opacity:0}
.arc{fill:none;stroke:url(#arcg);stroke-width:1.6;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 1.8s cubic-bezier(.3,.7,.2,1) var(--d,0s),stroke-width .25s,opacity .25s;opacity:.85}
.mode-monde.vu .arc{stroke-dashoffset:0}
.mode-local .arcs,.mode-local .voyages{opacity:0}
.voyage{fill:#fff;opacity:0;transition:opacity .6s 1.6s}
.mode-monde.vu .voyage{opacity:1}
.arc.on{stroke-width:2.8;opacity:1}
.ville{cursor:pointer;outline:none}
.ville .onde{fill:rgba(255,255,255,.18);transform-box:fill-box;transform-origin:center;animation:resp 3s ease-in-out infinite}
.ville .pt{fill:#fff;stroke:#FF2E7E;stroke-width:2}
.ville.moi .pt{fill:#FF4F90;stroke:#fff}
.ville.moi .onde{fill:rgba(255,79,144,.4)}
.ville text{font:700 14px var(--corps);fill:#fff;paint-order:stroke;stroke:#1C1530;stroke-width:4px;stroke-linejoin:round;opacity:.95;pointer-events:none}
.ville .dk{font-weight:600;fill:#FFC9DD;font-size:12px}
.ville:hover .pt,.ville:focus-visible .pt{fill:#FF8A3D}
.ville:hover text{font-size:15px}
.mode-local [data-m=w],.mode-monde [data-m=l]{opacity:0;pointer-events:none}
.cap{margin:14px 6px 0;font-size:16px;color:var(--texte2);min-height:1.6em;transition:opacity .4s}
.cap b{color:#fff}
.mode-local .cap2,.mode-monde .cap1{display:none}

/* Points de confiance */
.point{position:relative;display:grid;grid-template-columns:58px minmax(0,1fr);column-gap:20px;align-items:start;transition:padding .3s}
.point .ic{grid-row:span 2;width:58px;height:58px;border-radius:17px;display:grid;place-items:center;background:var(--carte);border:1px solid var(--trait);color:var(--accent);transition:transform .45s cubic-bezier(.3,1.6,.5,1),background .3s,color .3s,border-color .3s}
.point .ic svg{width:28px;height:28px}
.point h3{align-self:end}
.point p{margin-top:6px;grid-column:2}
.point::before{content:"";position:absolute;left:0;top:-1px;height:3px;width:100%;background:var(--degrade);transform:scaleX(0);transform-origin:left;transition:transform .55s cubic-bezier(.2,.8,.2,1)}
.point:hover::before{transform:scaleX(1)}
.point:hover .ic{transform:rotate(-9deg) scale(1.14);background:var(--degrade);color:#fff;border-color:transparent}

/* Étapes */
.etapes{position:relative}
.etapes li{border-top:3px solid var(--trait);transition:transform .4s cubic-bezier(.3,1.4,.5,1)}
.etapes li:hover{transform:translateY(-8px)}
.etapes li::before{transition:letter-spacing .4s}
.etapes li:hover::before{background:var(--degrade);-webkit-background-clip:text;background-clip:text;color:transparent;letter-spacing:-.01em}
.etapes::before{content:"";position:absolute;top:0;left:0;right:0;height:3px;background:var(--degrade);transform:scaleX(0);transform-origin:left;transition:transform 1.8s cubic-bezier(.2,.8,.2,1);z-index:2}
.etapes.vu::before{transform:scaleX(1)}
.js .etapes:not(.vu)::before{transform:scaleX(0)}
html:not(.js) .etapes::before{transform:scaleX(1)}

/* FAQ */
summary{transition:color .25s,padding-left .3s}
summary:hover{color:var(--accent);padding-left:10px}
summary::after{content:"+";display:inline-block;transition:transform .4s cubic-bezier(.3,1.6,.5,1)}
details[open] summary::after{content:"+";transform:rotate(135deg)}


/* Appel final : cœurs qui montent */
.coeurs-fond{position:absolute;inset:0;overflow:hidden;pointer-events:none}
.coeurs-fond i{position:absolute;bottom:-60px;width:calc(var(--t)*1px);height:calc(var(--t)*1px);background:linear-gradient(135deg,#FF8A3D,#FF2E7E);opacity:0;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z'/%3E%3C/svg%3E") center/contain no-repeat;animation:monteCoeur var(--w) linear infinite;animation-delay:var(--d)}
@keyframes monteCoeur{0%{opacity:0;transform:translateY(0) rotate(-12deg)}10%{opacity:.55}85%{opacity:.35}100%{opacity:0;transform:translateY(-640px) rotate(14deg)}}
.final h2{font-size:clamp(2.4rem,6vw,4.8rem)}

@media (max-width:900px){
  .carte-sec{padding:72px 0}
  .carte{padding:10px 10px 8px;border-radius:22px}
  .bascule{display:flex;width:100%}
  .bascule button{flex:1;min-width:0;padding:11px 8px;font-size:14px}
  .cv{aspect-ratio:4/3}
  .pts-monde,.clair-monde{stroke-width:3.6}
  .ville .dk{display:none}
  .mode-local .ville .dk{display:inline}
  .ville text{font-size:12px}
  .point{grid-template-columns:48px minmax(0,1fr);column-gap:16px}
  .point .ic{width:48px;height:48px}
  .inclin{transform:none!important}
}
@media (prefers-reduced-motion:reduce){
  .js [data-rev] .mot>span{transform:none!important;animation:none!important}
  .arc{stroke-dashoffset:0!important;transition:none!important}
  .voyage,.coeurs-fond,.zone-r,.zone-f,.ville .onde{animation:none!important}
  .voyage{opacity:0}
  .inclin{transform:none!important}
  .etapes::before{transform:scaleX(1)!important;transition:none!important}
}

/* Villes qui sortent de l'onde derrière le téléphone */
.ondes-villes{position:absolute;left:50%;top:50%;width:0;height:0;z-index:1;pointer-events:none}
.vo{position:absolute;left:0;top:0;display:inline-flex;align-items:center;gap:8px;white-space:nowrap;padding:8px 15px 8px 11px;border-radius:999px;background:rgba(255,255,255,.15);border:1px solid rgba(255,255,255,.32);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);font-weight:700;font-size:15px;color:#fff;opacity:0;animation:vo var(--cycle) cubic-bezier(.25,.6,.3,1) infinite;animation-delay:calc(var(--i)*1.7s + 1.4s)}
.vo b{width:9px;height:9px;border-radius:50%;background:#5DCAA5;box-shadow:0 0 0 4px rgba(93,202,165,.25)}
.vo:nth-child(3n+2) b{background:#FF8A3D;box-shadow:0 0 0 4px rgba(255,138,61,.25)}
.vo:nth-child(3n) b{background:#A184FF;box-shadow:0 0 0 4px rgba(161,132,255,.25)}
.vo em{font-style:normal;font-weight:600;font-size:13px;color:#FFD3E3}
@keyframes vo{
  0%{opacity:0;transform:translate(-50%,-50%) rotate(var(--a)) translateX(var(--r0)) rotate(calc(var(--a)*-1)) scale(.6)}
  4%{opacity:1;transform:translate(-50%,-50%) rotate(var(--a)) translateX(calc(var(--r0) + (var(--r1) - var(--r0))*.18)) rotate(calc(var(--a)*-1)) scale(1)}
  15%{opacity:1}
  21%,100%{opacity:0;transform:translate(-50%,-50%) rotate(var(--a)) translateX(var(--r1)) rotate(calc(var(--a)*-1)) scale(1.04)}
}
@media (max-width:900px){.vo{--r0:var(--m0);--r1:var(--m1);font-size:13px;padding:6px 12px 6px 9px}.vo em{font-size:11px}}
@media (prefers-reduced-motion:reduce){.vo{animation:none!important;display:none}}