:root{
  --nuit:#0F1C36;--nuit2:#17284B;--ambre:#FDAE05;--ivoire:#F3ECE4;--carte:#FFFFFF;
  --encre:#0F1C36;--doux:#56627A;--douxn:#B8C2D5;--trait:#EBE3D8;--vert:#1F8A5B;
  box-sizing:border-box;
  padding-top:env(safe-area-inset-top,0px);
  padding-bottom:env(safe-area-inset-bottom,0px);
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--ivoire:#ECE4D8;--carte:#FBF8F3;--trait:#E2D9CC}}
:root[data-theme="dark"]{--ivoire:#ECE4D8;--carte:#FBF8F3;--trait:#E2D9CC}
html{height:100%;scroll-padding-top:env(safe-area-inset-top,0px)}
html,body{margin:0;background:var(--nuit)}
body{height:100%;overflow:hidden;font-family:'Poppins',-apple-system,BlinkMacSystemFont,'Segoe UI',Helvetica,Arial,sans-serif;color:var(--encre);-webkit-font-smoothing:antialiased;-webkit-text-size-adjust:100%}
*,*::before,*::after{box-sizing:inherit}
.i{width:1em;height:1em;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex:none}

/* ---------- Deck ---------- */
#deck{position:fixed;inset:0;overflow-y:auto;overflow-x:hidden;scroll-snap-type:y mandatory;overscroll-behavior-y:contain;scrollbar-width:none}
#deck::-webkit-scrollbar{display:none}
.s{position:relative;height:100%;scroll-snap-align:start;scroll-snap-stop:always;overflow:hidden;
  display:grid;grid-template-rows:auto minmax(0,1fr);row-gap:16px;
  padding:calc(env(safe-area-inset-top,0px) + clamp(22px,4vh,64px)) calc(env(safe-area-inset-right,0px) + clamp(30px,6vw,120px)) calc(env(safe-area-inset-bottom,0px) + clamp(40px,6vh,80px)) calc(env(safe-area-inset-left,0px) + clamp(20px,6vw,110px));
  --fv:clamp(13px,min(3.5vw,2vh),18px)}
.navy{background:var(--nuit);color:var(--ivoire)}
.ivory{background:var(--ivoire);color:var(--encre)}
.s>.t,.s>.v{position:relative;min-width:0;z-index:1}
.t{display:flex;flex-direction:column;gap:10px;max-width:40rem}
h1,h2{margin:0;font-weight:800;letter-spacing:-.02em;line-height:1.08;text-wrap:balance}
h1{font-size:clamp(32px,min(9.6vw,6vh),92px)}
h2{font-size:clamp(22px,min(6.4vw,4vh),44px)}
h1 span,h2 span{display:block}
.amb{color:var(--ambre)}
.ivory .amb{color:#B87900}
.mark{display:inline;background-image:linear-gradient(transparent 60%,rgba(253,174,5,.6) 60%);background-repeat:no-repeat;background-size:0% 100%;transition:background-size .9s cubic-bezier(.2,.7,.2,1) var(--md,.7s);-webkit-box-decoration-break:clone;box-decoration-break:clone}
.s.in .mark{background-size:100% 100%}
.s:not(.in) .mark{transition:none}
.t p{margin:0;font-size:clamp(13.5px,min(3.6vw,2.1vh),18px);line-height:1.5;max-width:38ch}
.navy .t p{color:var(--douxn)}
.ivory .t p{color:var(--doux)}
.t p b{font-weight:700}
.navy .t p b{color:var(--ivoire)}
.ivory .t p b{color:var(--encre)}
.pill{align-self:flex-start;font-size:clamp(12px,min(3.2vw,1.8vh),15px);font-weight:600;padding:.28em .9em;border-radius:99px;border:1.5px solid var(--ambre);line-height:1.4}
.navy .pill{color:var(--ambre)}
.ivory .pill{color:#7A4E00}
.v{min-height:0;height:100%;display:grid;place-items:center;container-type:size}

@media (min-aspect-ratio:1/1) and (min-width:720px){
  .s.split{grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-rows:minmax(0,1fr);column-gap:clamp(32px,5vw,110px)}
  .s.split>.t{align-self:center}
  .s{--fv:clamp(15px,min(1.45vw,2.35vh),22px)}
  .t{gap:clamp(12px,1.8vh,20px)}
  h1{font-size:clamp(40px,min(5.6vw,9vh),104px)}
  h2{font-size:clamp(30px,min(3.6vw,6.2vh),64px)}
  .t p{font-size:clamp(16px,min(1.45vw,2.5vh),23px)}
}

/* ---------- Motion primitives ---------- */
[data-a]{opacity:0;transform:translateY(22px);transition:opacity .7s cubic-bezier(.2,.7,.2,1),transform .8s cubic-bezier(.2,.7,.2,1);transition-delay:var(--d,0s)}
[data-a="pop"]{transform:scale(.88)}
[data-a="rise"]{transform:translateY(70px)}
.s.in [data-a]{opacity:1;transform:none}
.s:not(.in) [data-a]{transition:none}
@keyframes up{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@keyframes pop{0%{opacity:0;transform:scale(.6)}70%{opacity:1;transform:scale(1.06)}100%{opacity:1;transform:scale(1)}}
@keyframes fadein{from{opacity:0}to{opacity:1}}
@keyframes grow{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes growY{from{transform:scaleY(0)}to{transform:scaleY(1)}}
@keyframes spin{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}}
@keyframes pulse{0%{transform:scale(1);opacity:.55}100%{transform:scale(2.2);opacity:0}}
@keyframes halo{0%{box-shadow:0 0 0 0 rgba(253,174,5,.5)}100%{box-shadow:0 0 0 18px rgba(253,174,5,0)}}
@keyframes draw{to{stroke-dashoffset:0}}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(5px)}}
@keyframes stamp{0%{opacity:0;transform:rotate(-14deg) scale(2.2)}60%{opacity:1;transform:rotate(-14deg) scale(.92)}100%{opacity:1;transform:rotate(-10deg) scale(1)}}
@keyframes dots{0%,20%{opacity:.25}50%{opacity:1}80%,100%{opacity:.25}}
.st{opacity:0}
.s.in .st{animation:up .5s var(--d,0s) both}
.sp{opacity:0}
.s.in .sp{animation:pop .5s var(--d,0s) both}

/* ---------- Décor orbite ---------- */
.orbit{position:absolute;z-index:0;width:min(100vmin,780px);right:-34vmin;bottom:-40vmin;pointer-events:none}
.orbit.alt{right:auto;bottom:auto;left:-40vmin;top:-44vmin}
.orbit circle{fill:none}
.orbit .arc{stroke:var(--ambre);stroke-opacity:.6;stroke-width:1.6;stroke-dasharray:1760;stroke-dashoffset:1760}
.orbit .arc2{stroke:var(--ivoire);stroke-opacity:.09;stroke-width:1}
.orbit .spin{transform-origin:300px 300px;opacity:0}
.orbit .spin circle{fill:var(--ambre)}
.s.in .orbit .arc{animation:draw 2.2s .2s ease-out both}
.s.in .orbit .spin{animation:fadein .6s 1.8s both,spin 16s 1.8s linear infinite}

/* ---------- Couverture : ticket RDV ---------- */
.logo{display:block;align-self:flex-start;width:clamp(150px,42vw,250px);height:auto;margin-bottom:8px}
.cue{position:absolute;z-index:2;left:50%;bottom:calc(env(safe-area-inset-bottom,0px) + 10px);transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:2px;font-size:12px;font-weight:500;color:var(--douxn)}
.cue .i{width:18px;height:18px;animation:bob 1.6s ease-in-out infinite}
@media (min-aspect-ratio:1/1) and (min-width:720px){.logo{width:clamp(200px,17vw,320px);margin-bottom:14px}}
.dates{display:flex;align-items:center;gap:.6em;font-weight:700;font-size:clamp(15px,min(4.2vw,2.4vh),26px);color:var(--ivoire)}
.dates i{display:block;width:clamp(36px,8vw,90px);height:2px;background:var(--ambre);transform:scaleX(0);transform-origin:left}
.s.in .dates i{animation:grow .7s .9s both}
.ticket{position:relative;width:min(100%,460px);font-size:min(var(--fv),5.2cqh);background:var(--carte);color:var(--encre);border-radius:20px;padding:1.2em 1.3em 1.1em;box-shadow:0 34px 70px -26px rgba(3,8,20,.75)}
.s.in .ticket{animation:float 6s 2.6s ease-in-out infinite}
.ticket header{display:flex;align-items:center;gap:.6em;font-weight:700;padding-bottom:.8em;border-bottom:1.5px dashed var(--trait)}
.ticket header .dot{width:.7em;height:.7em;border-radius:50%;background:var(--ambre);position:relative}
.ticket header .dot::after{content:"";position:absolute;inset:0;border-radius:50%;background:var(--ambre)}
.s.in .ticket header .dot::after{animation:pulse 1.6s 1s infinite}
.ticket dl{margin:.7em 0 0;display:grid;grid-template-columns:auto 1fr;gap:.55em 1em}
.ticket dt{color:var(--doux);font-size:.86em;align-self:center}
.ticket dd{margin:0;font-weight:600;opacity:0}
.s.in .ticket dd{animation:up .45s var(--d) both}
.ticket .hole{position:absolute;top:calc(2.95em);width:1.1em;height:1.1em;border-radius:50%;background:var(--nuit)}
.ticket .hole.l{left:-.55em}.ticket .hole.r{right:-.55em}
.stampx{position:absolute;right:.6em;bottom:.7em;border:3px solid var(--ambre);color:#B87900;font-weight:800;padding:.2em .6em;border-radius:10px;font-size:1.05em;opacity:0;background:rgba(253,174,5,.08)}
.s.in .stampx{animation:stamp .6s 2s cubic-bezier(.3,1.4,.5,1) both}

/* ---------- Étapes de la mission ---------- */
.steps{position:relative;width:min(100%,500px);display:flex;flex-direction:column;gap:1.1em;font-size:min(var(--fv),4.6cqh)}
.steps::before{content:"";position:absolute;left:1.35em;top:1.4em;bottom:1.4em;width:2px;background:var(--ambre);transform:scaleY(0);transform-origin:top}
.s.in .steps::before{animation:growY 2.2s .4s ease-in-out both}
.stp{position:relative;display:flex;align-items:center;gap:.9em;opacity:0}
.s.in .stp{animation:up .5s var(--d) both}
.stp .n{flex:none;width:2.7em;height:2.7em;border-radius:50%;display:grid;place-items:center;background:var(--nuit);color:var(--ambre);font-weight:800;box-shadow:0 0 0 5px var(--ivoire)}
.stp .c{background:var(--carte);border-radius:14px;padding:.7em 1em;box-shadow:0 10px 26px -16px rgba(15,28,54,.4);flex:1}
.stp b{display:block;font-weight:700;line-height:1.3}
.stp small{display:block;color:var(--doux);font-size:.84em;line-height:1.35;margin-top:.1em}
.stp.who-p .n{background:var(--ambre);color:var(--nuit)}
.stp.last .c{background:var(--nuit);color:var(--ivoire)}
.stp.last small{color:var(--douxn)}
.big-quote{margin:.4em 0 0;border-left:4px solid var(--ambre);padding:.15em 0 .15em .8em;font-weight:800;font-size:clamp(16px,min(4.4vw,2.6vh),26px);line-height:1.3}

/* ---------- Chaîne problème ---------- */
.chain{position:relative;width:min(100%,520px);display:grid;grid-template-columns:1fr 1fr;gap:.7em;font-size:min(var(--fv),8.6cqh)}
.ch{display:flex;align-items:center;gap:.6em;background:var(--nuit2);border:1px solid rgba(243,236,228,.13);border-radius:14px;padding:.85em .9em;color:var(--ivoire);font-weight:600;opacity:0}
.ch .i{width:1.35em;height:1.35em;color:var(--ambre)}
.s.in .ch{animation:up .45s var(--d) both,conv .6s 3.2s cubic-bezier(.5,0,.7,.4) forwards}
@keyframes conv{from{opacity:1;transform:none}to{opacity:0;transform:translate(var(--cx),var(--cy)) scale(.45)}}
.one{position:absolute;inset:0;margin:auto;width:max-content;height:max-content;background:var(--ambre);color:var(--nuit);font-weight:800;padding:.85em 1.4em;border-radius:99px;font-size:1.15em;opacity:0}
.s.in .one{animation:pop .6s 3.65s both,halo 2s 4.3s infinite}

/* ---------- Packs ---------- */
.packs{width:min(100%,540px);display:flex;flex-direction:column;align-items:center;font-size:min(var(--fv),4cqh)}
.node{display:flex;align-items:center;gap:.5em;background:var(--nuit);color:var(--ivoire);border-radius:99px;padding:.6em 1.15em .6em .85em;font-weight:700}
.node .i{width:1.4em;height:1.4em;color:var(--ambre)}
.lv{display:block;width:2px;height:clamp(14px,2.6vh,28px);background:var(--ambre);transform:scaleY(0);transform-origin:top}
.lh{display:block;width:52%;height:2px;background:var(--ambre);transform:scaleX(0)}
.s.in .lv{animation:growY .35s .8s both}
.s.in .lh{animation:grow .45s 1.05s both}
.pg{width:100%;margin-top:.7em;display:grid;grid-template-columns:1fr 1fr;gap:.6em}
.pk{background:var(--carte);border-radius:16px;padding:.85em .9em;display:flex;flex-direction:column;gap:.2em;box-shadow:0 12px 28px -18px rgba(15,28,54,.45);opacity:0}
.s.in .pk{animation:pop .55s var(--d) both}
.pk .pi{width:2.1em;height:2.1em;border-radius:10px;background:var(--nuit);color:var(--ambre);display:grid;place-items:center;margin-bottom:.35em}
.pk .pi .i{width:1.2em;height:1.2em}
.pk b{font-weight:700;line-height:1.25}
.pk>span:last-child{font-size:.84em;color:var(--doux);line-height:1.35}
.valid{margin-top:.9em;display:flex;align-items:center;gap:.5em;font-weight:600;font-size:.92em;color:var(--doux);opacity:0}
.valid .i{width:1.3em;height:1.3em;color:var(--vert)}
.s.in .valid{animation:up .5s 2.3s both}

/* ---------- Terrain : 4 entrées ---------- */
.inputs{width:min(100%,520px);display:flex;flex-direction:column;align-items:stretch;gap:.6em;font-size:min(var(--fv),4.3cqh)}
.in4{display:grid;grid-template-columns:1fr 1fr;gap:.6em}
.ip{display:flex;align-items:center;gap:.7em;background:var(--nuit2);border:1px solid rgba(243,236,228,.13);border-radius:14px;padding:.8em .9em;font-weight:600;color:var(--ivoire);opacity:0;line-height:1.3}
.s.in .ip{animation:up .45s var(--d) both}
.ip .i{width:1.5em;height:1.5em;color:var(--ambre)}
.flow{display:flex;justify-content:center;opacity:0;color:var(--ambre)}
.flow .i{width:1.8em;height:1.8em;transform:rotate(90deg)}
.s.in .flow{animation:fadein .4s 1.7s both}
.s.in .flow .i{animation:bob 1.4s 2s ease-in-out infinite}
.fiche{background:var(--carte);color:var(--encre);border-radius:16px;padding:.9em 1em;opacity:0;box-shadow:0 20px 40px -24px rgba(0,0,0,.7)}
.s.in .fiche{animation:pop .55s 2s both}
.fiche b{display:block;font-weight:700}
.bars{display:flex;flex-direction:column;gap:.4em;margin-top:.6em}
.bars i{display:block;height:.55em;border-radius:99px;background:#E6E9EF;position:relative;overflow:hidden}
.bars i::after{content:"";position:absolute;inset:0;background:var(--ambre);transform:scaleX(0);transform-origin:left}
.s.in .bars i::after{animation:grow .7s var(--d) both}
.ext{margin-top:.7em;display:flex;align-items:center;gap:.5em;font-size:.86em;font-weight:600;color:var(--doux)}
.ext em{font-style:normal;background:var(--nuit);color:var(--ambre);padding:.15em .6em;border-radius:99px;font-size:.92em}

/* ---------- 3 phrases ---------- */
.lines{width:min(100%,560px);display:flex;flex-direction:column;gap:1em;font-size:min(var(--fv),4.4cqh)}
.ln{background:var(--carte);border-radius:18px;padding:1em 1.1em;box-shadow:0 12px 28px -18px rgba(15,28,54,.45);opacity:0}
.s.in .ln{animation:up .5s var(--d) both}
.ln q{display:block;font-weight:800;font-size:1.22em;line-height:1.3;quotes:"« " " »"}
.ln small{display:block;margin-top:.45em;color:var(--doux);font-size:.86em;line-height:1.4}

/* ---------- Cibles ---------- */
.targets{width:min(100%,520px);display:flex;flex-direction:column;gap:.7em;font-size:min(var(--fv),4.4cqh)}
.tg{display:flex;align-items:center;gap:.9em;background:var(--nuit2);border:1px solid rgba(243,236,228,.13);border-radius:16px;padding:.85em 1em;opacity:0}
.s.in .tg{animation:up .45s var(--d) both}
.tg .ic{flex:none;width:2.4em;height:2.4em;border-radius:12px;background:var(--ambre);color:var(--nuit);display:grid;place-items:center}
.tg .ic .i{width:1.3em;height:1.3em}
.tg b{display:block;font-weight:700;color:var(--ivoire);line-height:1.3}
.tg small{display:block;color:var(--douxn);font-size:.84em;line-height:1.35}
.tg.hi{border-color:var(--ambre);background:rgba(253,174,5,.1)}
.brands{display:flex;gap:.4em;flex-wrap:wrap;margin-top:.35em}
.brands span{background:var(--ambre);color:var(--nuit);font-weight:700;font-size:.82em;padding:.15em .7em;border-radius:99px}

/* ---------- Appel ---------- */
.call{position:relative;width:min(100%,470px);font-size:min(var(--fv),3.9cqh);display:flex;flex-direction:column;gap:.55em}
.callhd{display:flex;align-items:center;gap:.7em;background:var(--nuit);color:var(--ivoire);border-radius:16px;padding:.65em .9em;opacity:0}
.s.in .callhd{animation:up .45s .2s both}
.callhd .av{position:relative;width:2.2em;height:2.2em;border-radius:50%;background:var(--ambre);color:var(--nuit);display:grid;place-items:center}
.callhd .av::before{content:"";position:absolute;inset:0;border-radius:50%;background:var(--ambre);opacity:0}
.s.in .callhd .av::before{animation:pulse 1.6s .6s infinite}
.callhd .av .i{position:relative;width:1.2em;height:1.2em}
.callhd b{display:block;font-weight:700;line-height:1.2}
.callhd small{display:block;color:var(--douxn);font-size:.82em}
.callhd .tm{margin-left:auto;font-variant-numeric:tabular-nums;font-weight:600;color:var(--ambre)}
.bub{align-self:flex-start;max-width:92%;background:var(--carte);border-radius:4px 16px 16px 16px;padding:.6em .85em;line-height:1.42;box-shadow:0 8px 20px -14px rgba(15,28,54,.45);opacity:0}
.s.in .bub{animation:up .45s var(--d) both}
.bub.ask{background:var(--ambre);color:var(--nuit);font-weight:700}
.bub u{text-decoration:none;background:rgba(253,174,5,.22);border-radius:4px;padding:0 .2em;font-weight:600}
.bub.ask u{background:rgba(15,28,54,.12)}

/* ---------- Bloc-notes ---------- */
.pad{position:relative;width:min(100%,440px);font-size:min(var(--fv),4.6cqh);background:var(--carte);color:var(--encre);border-radius:18px;padding:1.1em 1.2em 1em;box-shadow:0 30px 60px -28px rgba(3,8,20,.8)}
.pad h3{margin:0 0 .5em;font-size:1em;font-weight:700;display:flex;align-items:center;gap:.5em}
.pad h3 .i{color:#B87900;width:1.3em;height:1.3em}
.row{display:flex;align-items:center;gap:.8em;padding:.62em 0;border-bottom:1.5px solid #EEF0F4}
.row:last-of-type{border-bottom:0}
.box{flex:none;width:1.45em;height:1.45em;border-radius:7px;border:2px solid #CBD2DD;display:grid;place-items:center;color:var(--nuit);position:relative}
.box .i{width:1em;height:1em;stroke-width:3;stroke-dasharray:24;stroke-dashoffset:24}
.box::before{content:"";position:absolute;inset:-2px;border-radius:7px;background:var(--ambre);transform:scale(0)}
.s.in .box::before{animation:pop .35s var(--d) both}
.s.in .box .i{animation:draw .35s calc(var(--d) + .15s) both}
.box .i{position:relative;z-index:1}
.row span{font-weight:600;line-height:1.3}
.row em{display:block;font-style:normal;font-weight:400;color:var(--doux);font-size:.84em}
.bonus{margin-top:.6em;background:var(--nuit);color:var(--ivoire);border-radius:12px;padding:.7em .85em;font-size:.9em;line-height:1.4;opacity:0}
.bonus b{color:var(--ambre)}
.s.in .bonus{animation:up .5s 2.4s both}

/* ---------- Objections ---------- */
.objs{width:min(100%,540px);display:flex;flex-direction:column;gap:.75em;font-size:min(var(--fv),3.9cqh)}
.ob{display:grid;grid-template-columns:auto 1fr;gap:.25em .75em;align-items:start}
.ob .q{grid-column:1/-1;justify-self:start;background:var(--nuit);color:var(--ivoire);font-weight:700;border-radius:16px 16px 16px 4px;padding:.5em .9em;opacity:0}
.s.in .ob .q{animation:up .45s var(--d) both}
.ob .r{grid-column:1/-1;justify-self:end;max-width:94%;background:var(--carte);border-radius:16px 16px 4px 16px;padding:.6em .9em;line-height:1.42;box-shadow:0 10px 24px -16px rgba(15,28,54,.45);opacity:0;border-right:4px solid var(--ambre)}
.s.in .ob .r{animation:up .45s calc(var(--d) + .55s) both}
.navy .ob .q{background:var(--ambre);color:var(--nuit)}
.navy .ob .r{background:var(--nuit2);color:var(--ivoire);border:1px solid rgba(243,236,228,.13);border-right:4px solid var(--ambre)}
.method{display:flex;align-items:center;gap:.5em;flex-wrap:wrap;font-weight:700;font-size:clamp(13px,min(3.4vw,2vh),18px)}
.method span{padding:.25em .8em;border-radius:99px;border:1.5px solid var(--ambre)}
.method .i{width:1.1em;height:1.1em;color:var(--ambre)}
.ivory .method span{color:#7A4E00}

/* ---------- Bon RDV ---------- */
.rdv{position:relative;width:min(100%,460px);font-size:min(var(--fv),4.1cqh);display:flex;flex-direction:column;gap:.5em}
.ck{display:flex;align-items:center;gap:.8em;background:var(--nuit2);border:1px solid rgba(243,236,228,.13);border-radius:14px;padding:.62em .9em;color:var(--ivoire);opacity:0;line-height:1.3}
.s.in .ck{animation:up .45s var(--d) both}
.ck .o{flex:none;width:1.6em;height:1.6em;border-radius:50%;background:var(--ambre);color:var(--nuit);display:grid;place-items:center;transform:scale(0)}
.s.in .ck .o{animation:pop .4s calc(var(--d) + .35s) both}
.ck .o .i{width:1em;height:1em;stroke-width:3}
.ck b{font-weight:600}
.ck small{display:block;color:var(--douxn);font-size:.82em}
.hot{position:absolute;right:-.3em;bottom:-1.7em;border:3px solid var(--ambre);color:var(--ambre);font-weight:800;font-size:1.25em;padding:.2em .7em;border-radius:12px;background:var(--nuit);opacity:0}
.s.in .hot{animation:stamp .6s 3.3s cubic-bezier(.3,1.4,.5,1) both}

/* ---------- Carte tournée ---------- */
.mapw{width:min(100%,560px);display:flex;flex-direction:column;gap:.6em;font-size:min(var(--fv),4cqh)}
.map{width:100%;height:auto;display:block;overflow:visible}
.map .rt{fill:none;stroke:var(--nuit);stroke-opacity:.35;stroke-width:1.4;stroke-dasharray:4 4}
.map .rtd{fill:none;stroke:var(--ambre);stroke-width:2;stroke-linecap:round;stroke-dasharray:var(--len);stroke-dashoffset:var(--len)}
.s.in .map .rtd{animation:draw .7s var(--d) ease-out both}
.map .cty{opacity:0;transform-box:fill-box;transform-origin:center}
.s.in .map .cty{animation:pop .45s calc(var(--d) + .55s) both}
.map .cty circle{fill:var(--nuit)}
.map .cty text{font-family:'Poppins',sans-serif;font-size:11.5px;font-weight:600;fill:var(--encre)}
.map .hub circle.c{fill:var(--ambre)}
.map .hub circle.p{fill:var(--ambre);opacity:0;transform-box:fill-box;transform-origin:center}
.s.in .map .hub circle.p{animation:pulse 2s .3s infinite}
.map .hub text{font-family:'Poppins',sans-serif;font-size:13px;font-weight:800;fill:var(--encre)}
.legend{display:flex;gap:.6em;flex-wrap:wrap;opacity:0}
.s.in .legend{animation:up .5s 4.6s both}
.legend span{background:#fff;color:#0F1C36;border-radius:99px;padding:.35em .85em;font-weight:600;font-size:.88em;box-shadow:0 8px 20px -14px rgba(15,28,54,.45)}
.legend span b{color:#B87900}

/* ---------- Après l'appel ---------- */
.after{width:min(100%,480px);display:flex;flex-direction:column;gap:.8em;font-size:min(var(--fv),3.9cqh)}
.sms{background:var(--carte);color:var(--encre);border-radius:18px;padding:.9em 1em;box-shadow:0 26px 56px -26px rgba(3,8,20,.8);opacity:0}
.s.in .sms{animation:up .5s .3s both}
.sms header{display:flex;align-items:center;gap:.5em;font-size:.82em;color:var(--doux);font-weight:600;margin-bottom:.5em}
.sms header .i{color:#B87900;width:1.2em;height:1.2em}
.sms p{margin:0;background:#EEF0F4;border-radius:16px 16px 16px 4px;padding:.65em .85em;line-height:1.45}
.sms p u{text-decoration:none;background:rgba(253,174,5,.25);border-radius:4px;padding:0 .2em;font-weight:600}
.sent{display:flex;justify-content:flex-end;align-items:center;gap:.3em;margin-top:.35em;font-size:.78em;color:var(--doux);opacity:0}
.sent .i{color:var(--vert)}
.s.in .sent{animation:fadein .4s 1.3s both}
.track{background:var(--nuit2);border:1px solid rgba(243,236,228,.13);border-radius:16px;padding:.8em .9em;color:var(--ivoire);opacity:0}
.s.in .track{animation:up .5s 1.5s both}
.track h4{margin:0 0 .55em;font-size:.86em;font-weight:600;color:var(--douxn)}
.tr{display:grid;grid-template-columns:1fr auto;gap:.2em .6em;align-items:center}
.tr b{font-weight:700;line-height:1.25}
.tr small{grid-column:1;color:var(--douxn);font-size:.82em}
.chip{grid-row:1/3;grid-column:2;position:relative;height:1.9em;min-width:7.6em}
.chip span{position:absolute;inset:0;display:grid;place-items:center;border-radius:99px;font-weight:700;font-size:.82em;white-space:nowrap;opacity:0}
.chip .c1{background:rgba(243,236,228,.14);color:var(--ivoire)}
.chip .c2{background:rgba(243,236,228,.14);color:var(--ivoire)}
.chip .c3{background:var(--ambre);color:var(--nuit)}
.s.in .chip .c1{animation:fadein .3s 1.9s both,fo .3s 2.7s forwards}
.s.in .chip .c2{animation:fadein .3s 2.75s both,fo .3s 3.5s forwards}
.s.in .chip .c3{animation:pop .45s 3.55s both}
@keyframes fo{to{opacity:0}}
.daily{display:flex;align-items:center;gap:.6em;font-weight:600;opacity:0;color:#0F1C36}
.daily .i{color:var(--ambre);width:1.4em;height:1.4em}
.s.in .daily{animation:up .5s 4s both}

/* ---------- Règles ---------- */
.rules{width:min(100%,540px);display:flex;flex-direction:column;gap:.65em;font-size:min(var(--fv),4.1cqh)}
.ru{color:#0F1C36;display:flex;gap:.85em;align-items:flex-start;background:var(--carte);border-radius:16px;padding:.8em 1em;box-shadow:0 12px 28px -18px rgba(15,28,54,.45);opacity:0}
.s.in .ru{animation:up .45s var(--d) both}
.ru .ic{flex:none;width:2.2em;height:2.2em;border-radius:10px;background:var(--nuit);color:var(--ambre);display:grid;place-items:center}
.ru .ic .i{width:1.2em;height:1.2em}
.ru b{display:block;font-weight:700;line-height:1.3}
.ru small{display:block;color:var(--doux);font-size:.86em;line-height:1.4;margin-top:.1em}

/* ---------- Conclusion ---------- */
.cta{display:flex;flex-direction:column;align-items:flex-start;gap:.5em;margin-top:4px}
.cta a{display:inline-block;background:var(--ambre);color:var(--nuit);font-weight:800;text-decoration:none;font-size:clamp(15px,min(4vw,2.3vh),22px);padding:.6em 1.3em;border-radius:99px}
.cta a:focus-visible{outline:3px solid var(--ivoire);outline-offset:3px}
.s.in .cta a{animation:halo 2s 1.4s infinite}
.cta span{font-size:clamp(12.5px,min(3.3vw,1.9vh),16px);color:var(--douxn)}
.ring{container-type:inline-size;position:relative;height:min(100%,500px);aspect-ratio:1;max-width:84vw}
.ring svg{position:absolute;inset:0;width:100%;height:100%}
.ring circle{fill:none}
.ring .r1{stroke:var(--ambre);stroke-opacity:.5;stroke-width:1.5}
.ring .r2{stroke:var(--ivoire);stroke-opacity:.14;stroke-width:1;stroke-dasharray:3 7}
.rot{position:absolute;inset:0}
.s.in .rot{animation:spin 40s linear infinite}
.nd{position:absolute;left:50%;top:50%;width:0;height:0;transform:rotate(var(--a)) translateY(-42.5cqw)}
.nd b{position:absolute;left:0;top:0;width:0;height:0;transform:rotate(calc(-1 * var(--a)))}
.nd i{position:absolute;left:0;top:0;transform:translate(-50%,-50%);white-space:nowrap;font-style:normal;background:var(--ambre);color:var(--nuit);font-weight:700;font-size:clamp(11px,3.8cqw,17px);padding:.45em .95em;border-radius:99px}
.s.in .nd i{animation:cspin 40s linear infinite}
@keyframes cspin{from{transform:translate(-50%,-50%) rotate(0deg)}to{transform:translate(-50%,-50%) rotate(-360deg)}}
.core-ic{position:absolute;inset:0;margin:auto;width:30cqw;height:30cqw;box-shadow:0 22px 50px -22px rgba(0,0,0,.8);border-radius:22%}
.s.in .core-ic{animation:float 6s 1s ease-in-out infinite}

/* ---------- Navigation ---------- */
#prog{position:fixed;z-index:30;left:0;right:0;top:env(safe-area-inset-top,0px);height:3px;background:var(--ambre);transform:scaleX(0);transform-origin:left;pointer-events:none}
#rail{position:fixed;z-index:30;right:calc(env(safe-area-inset-right,0px) + 8px);top:50%;transform:translateY(-50%);display:flex;flex-direction:column;gap:7px}
#rail button{display:block;width:7px;height:7px;padding:0;border:0;border-radius:99px;background:rgba(243,236,228,.4);cursor:pointer;transition:height .3s,background-color .3s}
body[data-tone="ivory"] #rail button{background:rgba(15,28,54,.25)}
#rail button.on,body[data-tone] #rail button.on{height:22px;background:var(--ambre)}
#rail button:focus-visible{outline:2px solid var(--ambre);outline-offset:3px}
#count{position:fixed;z-index:30;right:calc(env(safe-area-inset-right,0px) + 18px);bottom:calc(env(safe-area-inset-bottom,0px) + 12px);font-size:12px;font-weight:600;letter-spacing:.04em;color:rgba(243,236,228,.62);font-variant-numeric:tabular-nums;pointer-events:none}
body[data-tone="ivory"] #count{color:rgba(15,28,54,.55)}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-delay:0s!important;animation-iteration-count:1!important;transition-duration:.01ms!important;transition-delay:0s!important}
}