/*
  IMOLYO – Présentation agences (motion design au défilement)
  Feuille de style unique. Sections commentées par numéro de diapo.
  Mécanique d'animation : voir README.md à la racine du paquet.
*/
:root{
  --nuit:#0F1C36;--nuit2:#17284B;--ambre:#FDAE05;--ivoire:#F3ECE4;--carte:#FFFFFF;
  --encre:#0F1C36;--doux:#56627A;--douxn:#B8C2D5;--trait:#EBE3D8;
  --sejour:url(../assets/img/sejour.jpg);--cuisine:url(../assets/img/cuisine.jpg);--entree:url(../assets/img/entree.jpg);
  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}
.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)}
.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) .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:36ch}
.navy .t p{color:var(--douxn)}
.ivory .t p{color:var(--doux)}
.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(14px,min(1.25vw,2.1vh),20px)}
  .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),68px)}
  .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 fadeout{from{opacity:1}to{opacity:0}}
@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 cspin{from{transform:translate(-50%,-50%) rotate(0deg)}to{transform:translate(-50%,-50%) 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);opacity:0}}
@keyframes wave{0%,100%{transform:scaleY(.18)}50%{transform:scaleY(1)}}
@keyframes press{0%,100%{transform:scale(1)}45%{transform:scale(.9)}}
@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 blink{50%{opacity:0}}

/* ---------- 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}

/* ---------- 1. Couverture ---------- */
.logo{display:block;align-self:flex-start;width:clamp(150px,42vw,250px);height:auto;margin-bottom:8px}
.rw{position:relative;width:100%;height:100%;min-height:0}
.real{position:absolute;inset:0;margin:auto;display:block;width:100%;height:100%;max-height:660px;object-fit:contain;-webkit-mask-image:linear-gradient(to bottom,#000 78%,transparent);mask-image:linear-gradient(to bottom,#000 78%,transparent)}
.s.in .real{animation:float 6s 1.6s ease-in-out infinite}
.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}
#s1>.v{padding-bottom:26px}
@media (min-aspect-ratio:1/1) and (min-width:720px){.logo{width:clamp(200px,17vw,320px);margin-bottom:14px}#s1>.v{padding-bottom:0}}

/* ---------- 2. Métier ---------- */
.tasks{width:min(100%,520px);display:flex;flex-direction:column;gap:.65em;font-size:min(var(--fv),5.1cqh)}
.task{display:flex;align-items:center;justify-content:space-between;gap:.8em;background:var(--carte);border-radius:14px;padding:.8em 1em;box-shadow:0 10px 26px -16px rgba(15,28,54,.4);opacity:0}
.s.in .task{animation:up .5s var(--d) both}
.task .lbl{position:relative;font-weight:600;white-space:nowrap}
.task .lbl::after{content:"";position:absolute;left:-2px;right:-2px;top:52%;height:2px;background:var(--encre);transform:scaleX(0);transform-origin:left}
.s.in .task .lbl::after{animation:grow .45s calc(var(--d) + .7s) both}
.s.in .task .lbl{animation:mute .45s calc(var(--d) + .7s) both}
@keyframes mute{to{color:#8A93A3}}
.task .ok{flex:none;background:var(--nuit);color:var(--ambre);font-weight:700;font-size:.8em;padding:.38em .8em;border-radius:99px;opacity:0;white-space:nowrap}
.s.in .task .ok{animation:pop .45s calc(var(--d) + 1s) both}
.quote{margin:.5em 0 0;border-left:4px solid var(--ambre);padding:.1em 0 .1em .8em;font-weight:700;font-size:1.12em;line-height:1.4;opacity:0}
.s.in .quote{animation:up .6s 3.6s both}

/* ---------- 3. 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.4s 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.85s both,halo 2s 4.5s infinite}

/* ---------- 4. Promesse / 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}

/* ---------- Téléphone ---------- */
.ph{container-type:size;position:relative;height:100%;max-height:600px;aspect-ratio:.64;max-width:84vw;background:#070D1A;border-radius:clamp(26px,4.2vh,44px);padding:clamp(6px,1vh,10px);box-shadow:0 34px 70px -26px rgba(3,8,20,.75),inset 0 0 0 1.5px rgba(255,255,255,.1)}
.ivory .ph{box-shadow:0 34px 70px -30px rgba(15,28,54,.6),inset 0 0 0 1.5px rgba(255,255,255,.08)}
@media (min-aspect-ratio:1/1) and (min-width:720px){.ph{aspect-ratio:.56}}
.scr{position:relative;height:100%;background:#fff;border-radius:clamp(20px,3.4vh,36px);overflow:hidden;color:#0F1C36;font-size:4.2cqw;line-height:1.35;display:flex;flex-direction:column}
.sb{display:flex;align-items:center;justify-content:space-between;padding:3.2cqw 6.5cqw 1.4cqw;font-size:3.3cqw;font-weight:600}
.isl{width:22cqw;height:5.4cqw;border-radius:9cqw;background:#070D1A}
.bat{position:relative;width:6.5cqw;height:3.3cqw;border:.5cqw solid #0F1C36;border-radius:1cqw}
.bat::after{content:"";position:absolute;top:.4cqw;bottom:.4cqw;left:.4cqw;right:1.6cqw;background:#0F1C36;border-radius:.3cqw}
.ah{display:flex;align-items:center;gap:3cqw;padding:1.4cqw 5cqw 3cqw;border-bottom:1px solid #EEF0F4}
.ah .bk{font-size:8cqw;line-height:.8;font-weight:400}
.ah small{display:block;font-size:3.2cqw;color:#7A8597;font-weight:500}
.ah b{display:block;font-size:4.4cqw;font-weight:700;line-height:1.25}
.bl{padding:3cqw 5cqw 0}
.bt{font-size:3.3cqw;font-weight:700;color:#7A8597;margin-bottom:2cqw}

/* ---------- 5. Capture ---------- */
.thumbs{display:grid;grid-template-columns:repeat(3,1fr);gap:2cqw}
.th{position:relative;display:block;aspect-ratio:1;border-radius:2.6cqw;background:#EEF0F4;overflow:hidden}
.th::after{content:"";position:absolute;inset:0;background-size:cover;background-position:center;opacity:0;transform:scale(.6)}
.th.a::after{background-image:var(--sejour)}
.th.b::after{background-image:var(--cuisine)}
.th.c::after{background-image:var(--entree)}
.s.in .th::after{animation:pop .5s var(--d) both}
.rec{display:flex;align-items:center;gap:3.2cqw;margin:3.5cqw 5cqw 0;padding:3.2cqw;border-radius:4cqw;background:#0F1C36;color:#fff}
.mic{position:relative;flex:none;width:11.5cqw;height:11.5cqw;border-radius:50%;background:var(--ambre);display:grid;place-items:center;color:#0F1C36}
.mic .i{position:relative;z-index:1;width:6cqw;height:6cqw}
.mic::before{content:"";position:absolute;inset:0;border-radius:50%;background:var(--ambre);opacity:0}
.s.in .mic::before{animation:pulse 1.6s .6s infinite}
.wave{flex:1;display:flex;align-items:center;gap:.9cqw;height:9cqw}
.wave i{flex:1;height:100%;background:var(--ambre);border-radius:1cqw;transform:scaleY(.18)}
.s.in .wave i{animation-name:wave;animation-timing-function:ease-in-out;animation-iteration-count:infinite;animation-delay:calc(var(--k) * -.13s)}
.tm{font-size:3.6cqw;font-variant-numeric:tabular-nums;font-weight:600;min-width:11cqw;text-align:right}
.note{display:flex;align-items:center;gap:2.4cqw;padding:2.3cqw 3cqw;border:1px solid #E6E9EF;border-radius:3cqw;margin-bottom:2cqw;opacity:0}
.note .i{width:4.4cqw;height:4.4cqw;color:#C98A00}
.note span{flex:1;font-weight:600;font-size:3.6cqw}
.note em{font-style:normal;color:#7A8597;font-size:3.3cqw}
.s.in .note{animation:up .45s var(--d) both}
.done{margin:auto 5cqw 5cqw;background:var(--ambre);color:#0F1C36;font-weight:700;text-align:center;border-radius:3.5cqw;padding:3cqw;font-size:3.7cqw;opacity:0}
.s.in .done{animation:pop .55s var(--d) both}

/* ---------- 6. Notes papier / URL ---------- */
.tabs{position:relative;display:grid;grid-template-columns:1fr 1fr;margin:3cqw 5cqw 0;background:#EEF0F4;border-radius:99px;padding:1cqw;font-size:3.4cqw;font-weight:600}
.tabs span{position:relative;z-index:1;text-align:center;padding:1.8cqw 0}
.tabs .ta{color:#0F1C36}.tabs .tb{color:#56627A}
.tabs .ti{position:absolute;top:1cqw;bottom:1cqw;left:1cqw;width:calc(50% - 1cqw);background:#fff;border-radius:99px;box-shadow:0 1px 4px rgba(15,28,54,.18)}
.s.in .tabs .ti{animation:tabgo .45s 5.5s cubic-bezier(.2,.8,.2,1) both}
.s.in .tabs .ta{animation:tdim .3s 5.5s both}
.s.in .tabs .tb{animation:tlit .3s 5.5s both}
@keyframes tabgo{from{transform:translateX(0)}to{transform:translateX(100%)}}
@keyframes tdim{to{color:#56627A}}
@keyframes tlit{to{color:#0F1C36}}
.stage{position:relative;flex:1}
.pa,.pb{position:absolute;inset:0;padding:3.5cqw 5cqw;display:flex;flex-direction:column;gap:2.4cqw}
.pb{opacity:0}
.s.in .pa{animation:fadeout .4s 5.3s both}
.s.in .pb{animation:fadein .4s 5.7s both}
.paper{position:relative;background-color:#FFFBF2;border:1px solid #EFE6D2;border-radius:3cqw;padding:2.4cqw 4.5cqw 3cqw;transform:rotate(-1.4deg);background-image:repeating-linear-gradient(to bottom,transparent 0,transparent 6.4cqw,#EADFC8 6.4cqw,#EADFC8 calc(6.4cqw + 1px));overflow:hidden;box-shadow:0 8px 18px -12px rgba(15,28,54,.45)}
.paper p{margin:0;font-family:'Caveat','Bradley Hand','Segoe Print','Comic Sans MS',cursive;font-weight:600;font-size:5.4cqw;line-height:6.4cqw;color:#26386A}
.scan{position:absolute;left:0;right:0;top:0;height:2px;background:var(--ambre);box-shadow:0 0 12px 4px rgba(253,174,5,.55);opacity:0}
.s.in .scan{animation:scan 1.6s .9s ease-in-out both}
@keyframes scan{0%{top:0;opacity:0}10%{opacity:1}90%{opacity:1}100%{top:100%;opacity:0}}
.fld{display:flex;justify-content:space-between;align-items:center;gap:2cqw;padding:1.5cqw 0;border-bottom:1px solid #EEF0F4;font-size:3.5cqw;opacity:0}
.fld span{color:#7A8597}
.fld b{display:flex;align-items:center;gap:1.4cqw;font-weight:600}
.fld .i,.res .i{width:4cqw;height:4cqw;color:#C98A00;stroke-width:2.4}
.s.in .fld{animation:up .4s var(--d) both}
.url{display:flex;align-items:center;gap:2cqw;border:1.5px solid #D9DEE6;border-radius:3cqw;padding:2.6cqw 3cqw;font-size:3.4cqw;white-space:nowrap;overflow:hidden}
.url .i{width:4.2cqw;height:4.2cqw;color:#7A8597}
.ty{display:block;overflow:hidden;max-width:0}
.s.in .ty{animation:typew 1.5s 6.1s steps(28,end) both}
@keyframes typew{from{max-width:0}to{max-width:60cqw}}
.caret{display:block;flex:none;width:.45cqw;height:4.4cqw;background:#0F1C36;animation:blink 1s steps(1) infinite}
.btn{background:var(--ambre);color:#0F1C36;font-weight:700;text-align:center;border-radius:3cqw;padding:2.8cqw;font-size:3.7cqw}
.s.in .pb .btn{animation:press .35s 7.75s both}
.res{display:flex;align-items:center;gap:2cqw;background:#F5F6F8;border-radius:3cqw;padding:2.6cqw 3cqw;font-weight:600;font-size:3.5cqw;opacity:0}
.s.in .res{animation:up .45s var(--d) both}

/* ---------- 7. CRM ---------- */
.duo{width:min(100%,480px);display:grid;grid-template-columns:1fr;gap:.5em;font-size:min(var(--fv),2.75cqh)}
.pnl{background:var(--carte);color:var(--encre);border-radius:16px;padding:.9em 1em 1em;box-shadow:0 22px 50px -26px rgba(0,0,0,.7)}
.pnl.crm{background:#F4F6F9}
.phd{display:flex;align-items:center;gap:.45em;margin-bottom:.5em}
.phd b{font-weight:800}
.phd small{margin-left:auto;color:var(--doux);font-size:.8em;font-weight:600}
.phd .dt{width:.6em;height:.6em;border-radius:50%;background:#CBD2DC}
.row{display:flex;justify-content:space-between;gap:1em;padding:.42em 0;border-top:1px solid var(--trait);font-size:.92em}
.row span{color:var(--doux)}
.go{margin-top:.6em;background:var(--ambre);color:var(--nuit);font-weight:700;text-align:center;border-radius:12px;padding:.6em}
.s.in .go{animation:press .4s 1.5s both,halo 1s 1.5s}
.arr{display:grid;place-items:center;color:var(--ambre)}
.arr .i{width:1.8em;height:1.8em;transform:rotate(90deg);stroke-width:2.2}
.s.in .arr .i{animation:nudge 1s 1.7s ease-in-out 2}
@keyframes nudge{50%{translate:0 6px}}
.inp{display:grid;grid-template-columns:7.2em 1fr;align-items:center;gap:.6em;padding:.28em 0;font-size:.92em}
.inp span{color:#6B7486}
.box{height:2em;border:1.5px solid #D5DBE5;border-radius:8px;background:#fff;display:flex;align-items:center;padding:0 .6em;overflow:hidden}
.box em{display:inline-block;font-style:normal;font-weight:600;white-space:nowrap;overflow:hidden;max-width:0;vertical-align:middle;padding-right:.08em}
.s.in .box{animation:flash 1s var(--d) both}
.s.in .box em{animation:typebox .6s calc(var(--d) + .1s) steps(10,end) both}
@keyframes typebox{from{max-width:0}to{max-width:9em}}
@keyframes flash{0%{border-color:#D5DBE5}25%{border-color:var(--ambre);box-shadow:0 0 0 3px rgba(253,174,5,.28)}100%{border-color:#D5DBE5;box-shadow:none}}
.okl{display:flex;align-items:center;gap:.45em;margin-top:.6em;font-weight:700;opacity:0}
.okl .i{width:1.2em;height:1.2em;color:#C98A00;stroke-width:2.4}
.s.in .okl{animation:pop .5s 3.9s both}


/* ---------- 8. Annonce ---------- */
.hw{height:28cqw;flex:none;overflow:hidden}
.hero{height:100%;background:var(--sejour) 50% 62%/cover}
.s.in .hero{animation:ken 7s .2s ease-out both}
@keyframes ken{from{transform:scale(1.2)}to{transform:scale(1)}}
.ad{padding:3cqw 5cqw 0;display:flex;flex-direction:column;gap:1.5cqw}
.ttl{font-weight:800;font-size:4.7cqw;line-height:1.2;opacity:0}
.meta{font-size:3.3cqw;color:#7A8597;opacity:0}
.price{font-weight:800;font-size:5cqw;color:#C98A00;opacity:0}
.price small{font-size:.62em;font-weight:700;color:#7A8597}
.legal{display:flex;align-items:center;gap:1.4cqw;font-size:3.1cqw;font-weight:600;color:#3B475E;opacity:0}
.legal .i{width:3.8cqw;height:3.8cqw;color:#C98A00;stroke-width:2.4}
.s.in .legal{animation:up .45s 4.2s both}
.desc{margin:0;font-size:3.3cqw;line-height:1.45;color:#3B475E;opacity:0}
.s.in .ttl{animation:up .5s .9s both}
.s.in .meta{animation:up .45s 1.4s both}
.s.in .price{animation:pop .5s 1.7s both}
.s.in .desc{animation:up .5s 2.1s both}
.chips,.near{display:flex;flex-wrap:wrap;gap:1.5cqw;align-items:center}
.chips span{background:#FFF3D6;color:#7A4E00;font-weight:600;font-size:3.1cqw;padding:1cqw 2.6cqw;border-radius:99px;opacity:0}
.near span{display:flex;align-items:center;gap:1cqw;border:1px solid #D9DEE6;border-radius:99px;padding:1cqw 2.4cqw;font-size:3.1cqw;font-weight:600;opacity:0}
.near .i{width:3.6cqw;height:3.6cqw;color:#C98A00}
.near small{width:100%;font-size:3.1cqw;color:#7A8597;font-weight:600;opacity:0}
.s.in .chips span,.s.in .near span{animation:pop .45s var(--d) both}
.s.in .near small{animation:fadein .4s 3.5s both}
.acts{margin-top:auto;display:grid;grid-template-columns:1fr 1fr;gap:2.5cqw;padding:3cqw 5cqw 4.5cqw;opacity:0}
.acts span{text-align:center;border-radius:3cqw;padding:2.6cqw;font-weight:700;font-size:3.6cqw}
.acts .b1{border:1.5px solid #D5DBE5}
.acts .b2{background:var(--ambre)}
.s.in .acts{animation:up .45s 4.7s both}
.s.in .acts .b2{animation:halo 1.8s 5.4s infinite}

/* ---------- 9. Média ---------- */
.mgw{width:min(100%,520px,calc((100cqh - 2.6em) / 1.26));display:flex;flex-direction:column;gap:.55em;font-size:var(--fv)}
.gal{display:grid;grid-template-columns:1.25fr 1fr;grid-template-rows:1fr 1fr;gap:.5em;aspect-ratio:16/10}
.tile{position:relative;border-radius:12px;overflow:hidden;opacity:0;box-shadow:0 18px 40px -22px rgba(0,0,0,.8)}
.tile.big{grid-row:1/3}
.s.in .tile{animation:settle .85s var(--d) cubic-bezier(.2,.8,.2,1) both}
@keyframes settle{from{opacity:0;transform:translate(var(--x),var(--y)) rotate(var(--r)) scale(.9)}to{opacity:1;transform:none}}
.im{position:absolute;inset:0;background-size:cover;background-position:center}
.im1{background-image:var(--sejour);background-position:50% 62%}
.im2{background-image:var(--cuisine);background-position:50% 58%}
.im3{background-image:var(--entree);background-position:50% 55%}
.s.in .im{animation:enhance 1s 1.9s both}
@keyframes enhance{from{filter:brightness(.6) saturate(.5) contrast(.9)}to{filter:none}}
.tg{position:absolute;left:.45em;bottom:.45em;background:rgba(15,28,54,.85);color:#fff;font-size:.74em;font-weight:600;padding:.22em .6em;border-radius:99px;opacity:0}
.nm{position:absolute;right:.45em;top:.45em;width:1.7em;height:1.7em;border-radius:50%;background:var(--ambre);color:var(--nuit);font-weight:800;display:grid;place-items:center;font-size:.8em;opacity:0}
.star{position:absolute;left:.45em;top:.45em;background:var(--ambre);color:var(--nuit);font-weight:700;font-size:.72em;padding:.25em .6em;border-radius:99px;opacity:0}
.s.in .tg,.s.in .nm{animation:pop .45s var(--d) both}
.s.in .star{animation:pop .5s 3.2s both}
.ba{position:relative;aspect-ratio:16/10;border-radius:12px;overflow:hidden;container-type:inline-size;opacity:0;box-shadow:0 18px 40px -22px rgba(0,0,0,.8);background:#222}
.s.in .ba{animation:up .6s .9s both}
.ba img{position:absolute;top:0;display:block;height:100%;width:100cqw;max-width:none;object-fit:cover;object-position:50% 64%}
.ba .av{left:0}
.ba .apw{position:absolute;top:0;bottom:0;right:0;width:0;overflow:hidden}
.ba .apw img{right:0}
.ba .hd{position:absolute;top:0;bottom:0;right:0;width:2px;background:#fff;transform:translateX(50%);box-shadow:0 0 10px rgba(0,0,0,.35);opacity:0}
.ba .hd i{position:absolute;top:50%;left:50%;width:2.1em;height:2.1em;margin:-1.05em 0 0 -1.05em;border-radius:50%;background:#fff;color:var(--nuit);display:grid;place-items:center;box-shadow:0 4px 14px rgba(0,0,0,.35)}
.ba .hd .i{width:1.2em;height:1.2em;stroke-width:2.2}
.s.in .ba .apw{animation:sweepw 2.6s 3.6s ease-in-out both,oscw 2.6s 6.2s ease-in-out infinite alternate}
.s.in .ba .hd{animation:sweepr 2.6s 3.6s ease-in-out both,oscr 2.6s 6.2s ease-in-out infinite alternate}
@keyframes sweepw{0%{width:0%}62%{width:100%}100%{width:50%}}
@keyframes sweepr{0%{right:0%;opacity:0}6%{opacity:1}62%{right:100%}100%{right:50%;opacity:1}}
@keyframes oscw{from{width:50%}to{width:68%}}
@keyframes oscr{from{right:50%;opacity:1}to{right:68%;opacity:1}}
.ba .lb{position:absolute;top:.55em;font-size:.74em;font-weight:700;padding:.22em .62em;border-radius:99px;opacity:0}
.ba .l1{left:.55em;background:rgba(15,28,54,.85);color:#fff}
.ba .l2{right:.55em;background:var(--ambre);color:var(--nuit)}
.s.in .ba .lb{animation:pop .45s 6.2s both}
.mcap{margin:0;color:var(--douxn);font-size:.85em;line-height:1.4;opacity:0}
.s.in .mcap{animation:fadein .5s 6.4s both}

/* ---------- 10. Réseaux : préparer puis publier ---------- */
.rs{height:min(100%,calc(480px + 13.8em));width:100%;display:grid;grid-template-rows:minmax(0,1fr) auto;justify-items:center;row-gap:.75em;font-size:min(var(--fv),3.3cqh)}
.post{container-type:size;position:relative;height:100%;max-height:480px;aspect-ratio:4/5;max-width:78vw;border-radius:16px;overflow:hidden;background:#D9D4CC;box-shadow:0 26px 60px -28px rgba(15,28,54,.6)}
.s.in .post{animation:stack .5s 2.2s both}
@keyframes stack{from{box-shadow:0 26px 60px -28px rgba(15,28,54,.6),0 0 0 0 rgba(0,0,0,0),0 0 0 0 rgba(0,0,0,0)}to{box-shadow:0 26px 60px -28px rgba(15,28,54,.6),7px -7px 0 -1px #E0D6C8,14px -14px 0 -2px #CFC3B3}}
.pimg{position:absolute;inset:0;background:var(--sejour) 50% 55%/cover;opacity:0}
.s.in .pimg{animation:slidein 1s .4s cubic-bezier(.2,.8,.2,1) both}
@keyframes slidein{from{opacity:0;transform:translateX(30%) scale(1.15)}to{opacity:1;transform:none}}
.ptag{position:absolute;left:5cqw;top:5cqw;background:#AD0001;color:#fff;font-weight:800;font-size:5cqw;padding:1.6cqw 3.6cqw;border-radius:2cqw;opacity:0}
.s.in .ptag{animation:drop .5s 1s both,agency 9s 7.2s infinite}
@keyframes drop{from{opacity:0;transform:translateY(-60%)}to{opacity:1;transform:none}}
.pdots{position:absolute;left:50%;top:7cqw;transform:translateX(-50%);display:flex;gap:1.6cqw;opacity:0}
.pdots i{display:block;width:2cqw;height:2cqw;border-radius:50%;background:rgba(255,255,255,.55)}
.pdots i:first-child{background:#fff}
.s.in .pdots{animation:fadein .4s 2.2s both}
.pplay{position:absolute;right:5cqw;top:5cqw;display:flex;align-items:center;gap:1.4cqw;background:rgba(15,28,54,.78);color:#fff;font-weight:700;font-size:4.4cqw;padding:1.5cqw 3cqw 1.5cqw 2.4cqw;border-radius:99px;opacity:0}
.pplay .i{width:4.6cqw;height:4.6cqw;stroke-width:2.4}
.s.in .pplay{animation:pop .45s 2.45s both}
.pband{position:absolute;left:0;right:0;bottom:0;background:#AD0001;color:#fff;padding:4.5cqw 5cqw 5cqw;display:flex;flex-direction:column;gap:1.2cqw;transform:translateY(100%)}
.s.in .pband{animation:bandup .6s 1.3s cubic-bezier(.2,.8,.2,1) both,agency 9s 7.2s infinite}
@keyframes bandup{from{transform:translateY(100%)}to{transform:none}}
@keyframes agency{0%,30%{background-color:#AD0001}34%,63%{background-color:#1E5C4E}67%,96%{background-color:#2C4A8C}100%{background-color:#AD0001}}
.pband b{font-size:6cqw;line-height:1.15}
.pband span{font-size:4.3cqw;opacity:.92}
.pband em{align-self:flex-start;margin-top:1.4cqw;font-style:normal;font-weight:800;font-size:3.6cqw;letter-spacing:.08em;border:1px solid rgba(255,255,255,.65);padding:1cqw 2.6cqw;border-radius:1.5cqw}
.pub{width:min(100%,460px);background:var(--carte);border-radius:16px;padding:.8em .9em .9em;box-shadow:0 18px 40px -26px rgba(15,28,54,.5);opacity:0}
.s.in .pub{animation:up .5s 1.9s both}
.fmts{display:flex;gap:.5em}
.fmt{flex:1;display:flex;align-items:center;justify-content:center;gap:.45em;border:1.5px solid var(--trait);border-radius:11px;padding:.45em .5em;font-weight:700;font-size:.88em;white-space:nowrap;opacity:0}
.fmt .i{width:1.2em;height:1.2em;color:#C98A00}
.s.in .fmt{animation:pop .45s var(--d) both}
.ready{display:grid;margin-top:.6em;font-weight:700;font-size:.86em;line-height:1.35}
.ready>span{grid-area:1/1;display:flex;align-items:center;gap:.5em;opacity:0}
.ready .r1 i{flex:none;width:.6em;height:.6em;border-radius:50%;background:var(--ambre)}
.s.in .ready .r1{animation:fadein .4s 3s both,fadeout .3s 6.6s forwards}
.s.in .ready .r1 i{animation:halo 1.4s 3.2s infinite}
.ready .r2 .i{width:1.15em;height:1.15em;color:#C98A00;stroke-width:2.6}
.s.in .ready .r2{animation:fadein .4s 6.7s both}
.send{display:flex;align-items:center;gap:.65em;margin-top:.55em;opacity:0}
.s.in .send{animation:up .4s 3.2s both}
.sbtn{flex:none;display:flex;align-items:center;gap:.45em;background:var(--ambre);color:var(--nuit);font-weight:800;border-radius:11px;padding:.5em .9em;font-size:.9em}
.s.in .sbtn{animation:press .35s 3.85s both}
.sic{display:grid;width:1.15em;height:1.15em}
.sic .i{grid-area:1/1;width:1.15em;height:1.15em;stroke-width:2.1}
.sic .sok{opacity:0;stroke-width:2.8}
.s.in .sic .sok{animation:pop .4s 5.3s both}
.s.in .plane{animation:fly .8s 3.95s cubic-bezier(.5,0,.75,0) forwards}
@keyframes fly{0%{transform:none;opacity:1}100%{transform:translate(4em,-3em) rotate(-14deg) scale(.5);opacity:0}}
.bar{flex:1;height:.5em;border-radius:99px;background:#ECE4D8;overflow:hidden}
.bar i{display:block;height:100%;background:var(--ambre);transform:scaleX(0);transform-origin:left}
.s.in .bar i{animation:grow 1.3s 4s cubic-bezier(.4,0,.2,1) both}
.chs{display:grid;grid-template-columns:repeat(4,1fr);gap:.35em;margin-top:.75em}
.chn{display:flex;flex-direction:column;align-items:center;gap:.3em;opacity:0}
.s.in .chn{animation:pop .45s var(--d) both}
.chn>i{position:relative;width:2.5em;height:2.5em;border-radius:50%;background:var(--nuit);color:var(--ambre);display:grid;place-items:center}
.chn>i>.i{width:1.25em;height:1.25em}
.chn .ok3{position:absolute;right:-.15em;bottom:-.15em;width:1.05em;height:1.05em;border-radius:50%;background:var(--ambre);color:var(--nuit);display:grid;place-items:center;transform:scale(0);box-shadow:0 0 0 2px var(--carte)}
.chn .ok3 .i{width:.7em;height:.7em;stroke-width:3}
.s.in .chn .ok3{animation:popin .35s calc(var(--d) + .3s) both}
@keyframes popin{from{transform:scale(0)}70%{transform:scale(1.2)}to{transform:scale(1)}}
.chn b{font-size:.68em;font-weight:600;color:var(--doux);text-align:center;line-height:1.2}
/* Réseaux : vrais logos de marque (Facebook/Instagram/LinkedIn/TikTok) — glyphe blanc sur rond aux couleurs de marque */
.chn>i>.rl{width:1.35em;height:1.35em;filter:brightness(0) invert(1)}
.chn.fb>i{background:#1877F2}
.chn.ig>i{background:radial-gradient(circle at 30% 107%,#fdf497 0%,#fd5949 45%,#d6249f 62%,#285AEB 92%)}
.chn.li>i{background:#0A66C2}
.chn.tk>i{background:#010101}

/* ---------- 11. Contrôle ---------- */
.ctl{width:min(100%,520px);display:flex;flex-direction:column;gap:1.1em;font-size:min(var(--fv),4.8cqh)}
.ck{background:var(--carte);color:var(--encre);border-radius:18px;padding:1em 1.1em 1.1em;box-shadow:0 22px 50px -26px rgba(0,0,0,.7)}
.ckh{display:flex;justify-content:space-between;align-items:center;gap:1em;margin-bottom:.45em}
.ckh b{font-weight:800}
.st{position:relative;flex:none;width:7.4em;height:1.95em}
.st i{position:absolute;inset:0;display:grid;place-items:center;font-style:normal;font-weight:700;font-size:.8em;border-radius:99px;opacity:0}
.st .b1{background:#E9EBEF;color:#56627A}
.st .b2{background:#FFF1D1;color:#7A4E00}
.st .b3{background:var(--nuit);color:#fff}
.st .b4{background:var(--nuit);color:var(--ambre)}
.s.in .st .b1{animation:fadein .3s .3s both,fadeout .3s 1.8s forwards}
.s.in .st .b2{animation:fadein .3s 1.9s both,fadeout .3s 3.2s forwards}
.s.in .st .b3{animation:fadein .3s 3.3s both,fadeout .3s 4.5s forwards}
.s.in .st .b4{animation:pop .4s 4.6s both}
.cr{display:flex;justify-content:space-between;align-items:center;gap:1em;padding:.5em 0;border-top:1px solid var(--trait);opacity:0}
.s.in .cr{animation:up .4s var(--d) both}
.cr em{flex:none;font-style:normal;font-weight:700;font-size:.78em;padding:.25em .7em;border-radius:99px}
.det{background:var(--nuit);color:#fff}
.conf{border:1.5px solid var(--ambre);color:#7A4E00}
.comp{border:1.5px dashed #8A93A3;color:#56627A}
.vbtn{margin-top:.6em;background:var(--ambre);color:var(--nuit);font-weight:800;text-align:center;border-radius:12px;padding:.62em;opacity:0}
.s.in .vbtn{animation:up .4s 2.3s both,press .35s 3.05s}
.f4{position:relative;display:grid;grid-template-columns:repeat(4,1fr);gap:.3em}
.trk{position:absolute;left:12.5%;right:12.5%;top:1.05em;height:2px;background:rgba(243,236,228,.18)}
.trk i{position:absolute;inset:0;background:var(--ambre);transform-origin:left;transform:scaleX(0)}
.s.in .trk i{animation:trk 4.1s .5s linear both}
@keyframes trk{0%{transform:scaleX(0)}22%{transform:scaleX(.333)}66%{transform:scaleX(.666)}100%{transform:scaleX(1)}}
.st4{position:relative;display:flex;flex-direction:column;align-items:center;gap:.4em;color:var(--douxn);font-weight:600;font-size:.9em}
.st4 b{width:2.1em;height:2.1em;border-radius:50%;display:grid;place-items:center;background:var(--nuit);border:2px solid rgba(243,236,228,.3);color:var(--ivoire)}
.s.in .st4 b{animation:lit .4s var(--d) both}
.s.in .st4 span{animation:litt .4s var(--d) both}
@keyframes lit{to{background:var(--ambre);border-color:var(--ambre);color:var(--nuit)}}
@keyframes litt{to{color:var(--ivoire)}}

/* ---------- 12. Offres ---------- */
.offers{width:min(100%,560px);display:flex;flex-direction:column;gap:.65em;font-size:min(var(--fv),6cqh)}
.of{display:flex;justify-content:space-between;align-items:center;gap:1em;background:var(--carte);border-radius:16px;padding:.95em 1.15em;box-shadow:0 12px 30px -20px rgba(15,28,54,.45)}
.of>div:first-child{min-width:0}
.of b{display:block;font-size:1.15em;font-weight:800}
.of span{display:block;color:var(--doux);font-size:.88em;line-height:1.35}
.pr{flex:none;text-align:right;white-space:nowrap;font-weight:800;font-size:1.05em}
.pr strong{font-size:1.75em;font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.pr small{display:block;font-weight:500;color:var(--doux);font-size:.68em}
.of.hi{background:var(--nuit);color:var(--ivoire)}
.of.hi span,.of.hi small{color:var(--douxn)}
.of.hi strong{color:var(--ambre)}
.trial{margin:.3em 0 0;color:var(--doux);font-size:.88em;line-height:1.45}

/* ---------- 13. 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%,520px);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(12px,4cqw,18px);padding:.45em .95em;border-radius:99px}
.s.in .nd i{animation:cspin 40s linear infinite}
.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}
}