/* Mise en page : colonne centrale de 1200 px, sections alternées sur deux fonds sombres, photos en grands blocs arrondis */
:root{
  --bg:#0B0B12; --bg2:#12121B; --panel:#15151F; --panel-hot:#1C1810;
  --line:rgba(255,255,255,.09); --line2:rgba(255,255,255,.18);
  --ink:#F3F1EC; --mut:#B9B7C6; --dim:#9A98A8;
  --gold:#F6B500; --gold-soft:rgba(246,181,0,.14); --gold-ink:#1A1405; --red:#D81F3D;
  --display:'Bricolage Grotesque',system-ui,-apple-system,'Segoe UI',sans-serif;
  --body:'Instrument Sans',system-ui,-apple-system,'Segoe UI',sans-serif;
  --ease:cubic-bezier(.22,1,.36,1);
  color-scheme:dark;
  --ns:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAF4AAAA8CAMAAADYMP0NAAAAYFBMVEUBAQLy8ez3oAD4ZwCopqdqaQSaZw1ubm9oVRNiYWT7yAAoJiMOD1ZoZ2qqkAlubYBUNxXBwL0rJyVmUxhnHQpbWmGoqKgwLiJkVSSmVQT//wBVOhr///9VNyEAAKL/AACWey/eAAAAIHRSTlMB/v7++wn2BfBe/VsR4vWo8P6dow6jA9paBQGcAWMEAQXclvgAAAPwSURBVHjarZjbdqsgEIYnUZAUpFRMNbFJ3v8t94CHgA5oV/dctE3q+uZnYA4C8Ae7xx8Zox6qvgM7jGbs7ujybaND2sdsPwfZ4+9ehGYZsQp1/YR6NIDLYfWNEFqfY9NaW7F67lKe3lYeke5lI/tja86FYNNDW/zphEuodviqE559Jsx9rblIqHcLkFk+AzbCSfrIxyXYJoE/1Tk+0h38nDV0oUWTwJ/KZod+3jXk2zH+W7zTn7JefxygowLOXil8Sv8dFCdDsd0JndraNJ+BFPpjvY3R5/mPOTQJ/Km8QqU2+GYjXmvOXcZyHiWZWA4+jT+VNaHfxmwu+iD/GZYIrv0auATI453+9QGNxWvRrUPYWAvoQA/JrM3wZRfieff05ett02OC26BUJ/EbPm5soN1SBR6/UdACgwN45KufhV/FeH6wsmbwfn+rAB+eDYkqs81gH3+CTzXz13gA9lf1zsHMX+G5fN5axthv8GVdbwO0xCeK/RnPx7u9HMVLgr/srom6H4e+aaRc9bFscK7QkPxqnAJWNQHbkjCWqcmeblvbDP7ripz6a8O/wDdVFOai46uO6TpJrCHEwxUnESo+Fzeh3GDgyQrvnUCPnRhuLKX+09VJVZMJ7HTZnTbiwiWj8W2Nd9/VJVkgMOP92SyKrAcbBojCA62/YqoRHo/84hw5KYpi9qo5y6qvcHTb6ncd+K6k4AstWkUR+NPvBVDq8QfFH5PLhvzAlkX4RqNywSH5X7WPP24ADwJCGf5vbrYkPjEAYXyY6+iDxXNYrAIf83m/nXNC/A/Jn/NGdkaEHrYOOOTV0xNWg34Zu40zVQ/jlICOipWT8zTHZvCJ+Dh7Ld27QzPGO4nUF9yvM4OvoCUnxPEZrPYu/d8FbRCRA97u4LGQVYn4kEVYNiLk965d5vDuU0Z/bK17sQj0n10RzOPpAoH66TeAu7Lrs7ODryg+vuKR/BYePMDLfTzNL3ugXoFbNgTROaJ+5Jd0AyCG3GBrj8U+0QAuSt39jDl1V58JPY/wcAif0N/CVBZvaABP/BTS+WPv3Of4OP88jGlwFnlO6WtsnFbyKJ6ID1Y35YqNMMYOj94KE+dsUQjYTaukflc7RZEzzo7GntCPmTtk6YWF2+/w0JXBzYPhWbppxiN1GF/9LA2ylGF6UiaoOwX43LkOGfXj0HaU/ju81/8F8QGnIqNaqiPt4V18Sjxv2UPDhyY/BOb4OAtnzyQ3bfL14Qq7d4H+fae9Aafiw7l9SAhf6qq6XCxVxykbTNy9XQpjkVBBm5/uxtTcj4/dMo63mL6GMbPY8BgJbQv/w6YZProlpfNlsd+6eIVzAnttH/gHELFARAdCwNEAAAAASUVORK5CYII=");
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:84px}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--body);font-size:17px;line-height:1.55;overflow-x:clip;-webkit-font-smoothing:antialiased}
h1,h2,h3,p,ul,ol,figure,blockquote{margin:0;padding:0}
ul,ol{list-style:none}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
svg{flex:none}
:focus-visible{outline:3px solid var(--gold);outline-offset:3px;border-radius:6px}
.wrap{max-width:1264px;margin-inline:auto;padding-inline:clamp(20px,4vw,32px)}
.sec{padding-block:clamp(56px,7vw,88px);overflow-x:clip}
.alt{background:var(--bg2);border-block:1px solid var(--line)}
.eyebrow{display:block;font-size:14px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--gold)}
.h2{font-family:var(--display);font-weight:700;font-size:clamp(30px,3.6vw,50px);line-height:1.06;letter-spacing:-.025em;text-wrap:balance}
.lead{color:var(--mut);font-size:18px;text-wrap:pretty}
.head{display:flex;flex-direction:column;gap:14px;max-width:760px;margin-bottom:40px}
.ic{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.gold{color:var(--gold)}

/* boutons */
.btn{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:12px;min-height:56px;padding:0 clamp(18px,2.4vw,28px);background:var(--red);color:#fff;font-weight:700;font-size:clamp(16px,1.3vw,18px);border-radius:12px;white-space:nowrap;overflow:hidden;transition:transform .3s var(--ease),box-shadow .3s}
.btn::after{content:"";position:absolute;inset:0;background:linear-gradient(100deg,transparent 30%,rgba(255,255,255,.28) 50%,transparent 70%);transform:translateX(-130%)}
.btn .ic{transition:transform .3s var(--ease)}
.btn:hover{transform:translateY(-3px);box-shadow:0 14px 34px -10px rgba(216,31,61,.75)}
.btn:hover::after{transform:translateX(130%);transition:transform .7s var(--ease)}
.btn:hover .ic{transform:translateX(5px)}
.btn:active{transform:scale(.97)}
.btn.sm{min-height:46px;padding:0 18px;font-size:16px;font-weight:600;border-radius:10px}
.btn.line{background:none;border:1px solid rgba(255,255,255,.3);font-weight:600;min-height:50px;font-size:17px}
.btn.line:hover{border-color:var(--gold);color:var(--gold);box-shadow:none}
.btn.full{display:flex;min-height:50px;font-size:17px}
.link{display:inline-flex;align-items:center;min-height:56px;padding:0 6px;font-weight:600;border-bottom:2px solid rgba(255,255,255,.25);transition:border-color .25s,color .25s}
.link:hover{border-color:var(--gold);color:var(--gold)}

/* barre de progression + en-tête */
#bar{position:fixed;top:0;left:0;right:0;height:3px;background:var(--gold);transform-origin:left;transform:scaleX(0);z-index:60}
.top{position:sticky;top:env(safe-area-inset-top,0px);z-index:50;background:rgba(11,11,18,.8);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border-bottom:1px solid transparent;transition:border-color .3s}
.top.s{border-color:var(--line)}
.top .wrap{display:flex;align-items:center;justify-content:space-between;gap:20px;padding-block:14px}
.brand{display:flex;align-items:center;gap:10px;font-family:var(--display);font-weight:800;font-size:clamp(17px,4.6vw,20px);letter-spacing:.01em}
.logo i{display:block;height:clamp(24px,7vw,30px);aspect-ratio:94/60;background:var(--ns) center/contain no-repeat;transition:transform .6s var(--ease)}
.logo{position:relative;display:flex;flex:none;animation:logoglow 3s ease-in-out infinite alternate}
.logo::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(100deg,transparent 38%,rgba(255,255,255,.95) 50%,transparent 62%);background-size:300% 100%;background-position:150% 0;-webkit-mask:var(--ns) center/100% 100% no-repeat;mask:var(--ns) center/100% 100% no-repeat;animation:logoshine 4.5s ease-in-out 1.6s infinite}
@keyframes logoshine{0%,60%{background-position:150% 0}100%{background-position:-50% 0}}
.brand .gold{background:linear-gradient(100deg,#F6B500 0%,#FFE9A8 40%,#F6B500 60%,#F6B500 100%);background-size:240% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;animation:goldflow 4s linear infinite}
@media(hover:hover){.brand:hover .logo i{transform:scale(1.14) rotate(-6deg)}}
@keyframes logoglow{from{filter:drop-shadow(0 0 0 rgba(246,181,0,0))}to{filter:drop-shadow(0 0 9px rgba(246,181,0,.6))}}
@keyframes logoin{from{opacity:0;transform:scale(.25) rotate(-35deg)}to{opacity:1;transform:none}}
@keyframes namein{from{opacity:0;transform:translateX(-16px);letter-spacing:.22em}}
.js .top .logo{animation:logoin 1.1s cubic-bezier(.34,1.4,.64,1) .1s both,logoglow 3s ease-in-out 1.2s infinite alternate}
.js .top .brand>span:last-child{animation:namein .9s var(--ease) .45s both}
.nav{display:flex;gap:30px;font-size:16px;font-weight:500}
.nav a{position:relative;padding:12px 0;color:var(--mut);transition:color .2s}
.nav a::after{content:"";position:absolute;left:0;right:0;bottom:6px;height:2px;background:var(--gold);transform:scaleX(0);transform-origin:left;transition:transform .35s var(--ease)}
.nav a:hover,.nav a.on{color:var(--ink)}
.nav a:hover::after,.nav a.on::after{transform:scaleX(1)}
@media(max-width:900px){.nav{display:none}}

/* accueil */
.hero{position:relative;isolation:isolate}
.hero::before{content:"";position:absolute;inset:-80px 0 0;z-index:-1;pointer-events:none;background:radial-gradient(620px circle at var(--hx,72%) var(--hy,34%),rgba(216,31,61,.26),transparent 62%),radial-gradient(520px circle at 12% 88%,rgba(246,181,0,.10),transparent 60%)}
.hero .wrap{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(460px,100%),1fr));gap:48px 64px;align-items:center;padding-block:clamp(28px,4vw,48px) 56px}
.hc{display:flex;flex-direction:column;align-items:flex-start;gap:22px}
.pill{display:inline-flex;align-items:center;gap:10px;padding:8px 16px;border:1px solid rgba(246,181,0,.45);border-radius:999px;color:var(--gold);font-size:15px;font-weight:600}
.h-hero{font-family:var(--display);font-weight:800;font-size:clamp(40px,5vw,68px);line-height:1.03;letter-spacing:-.03em}
.h-hero em{font-style:normal;color:var(--gold)}
.mk{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.14em;margin-bottom:-.14em}
.w{display:inline-block}
.hero .lead{font-size:clamp(17px,1.4vw,20px);max-width:54ch}
.cta-row{display:flex;flex-wrap:wrap;align-items:center;gap:14px 22px}
.pay{display:flex;align-items:center;gap:10px;font-weight:600;font-size:16px}
.stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px clamp(10px,3vw,28px);width:100%;margin-top:6px;padding-top:24px;border-top:1px solid var(--line)}
.stats b{display:block;white-space:nowrap;font-family:var(--display);font-weight:700;font-size:clamp(23px,6.6vw,34px);line-height:1;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.stats span{display:block;margin-top:4px;color:var(--mut);font-size:clamp(12px,3.2vw,15px);line-height:1.35}
.vis{position:relative}
.vis .ph{aspect-ratio:1/1;border-radius:28px}
.chip{position:absolute;display:flex;align-items:center;gap:12px;padding:12px 18px 12px 12px;background:rgba(11,11,18,.86);border:1px solid var(--line2);border-radius:16px;line-height:1.25;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.chip.a{left:20px;top:20px;border-color:rgba(246,181,0,.5)}
.chip.b{right:20px;bottom:20px}
.chip i{display:flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:12px;background:var(--gold);color:var(--gold-ink)}
.chip.b i{background:var(--red);color:#fff}
.chip b{display:block;font-size:16px}
.chip small{display:block;color:var(--mut);font-size:14px}

/* photos */
.ph{position:relative;overflow:hidden;border-radius:26px;border:1px solid var(--line);background:var(--panel)}
.ph img{width:100%;height:100%;object-fit:cover;transform:translate3d(0,var(--py,0px),0) scale(1.08);will-change:transform}
.r54{aspect-ratio:5/4}.r43{aspect-ratio:4/3}.r32{aspect-ratio:3/2}.r52{aspect-ratio:5/2}
@media(max-width:700px){.r52{aspect-ratio:4/3}}

/* bandeau garanties */
.strip{background:var(--bg2);border-block:1px solid var(--line)}
.strip ul{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(230px,100%),1fr));gap:22px 28px;padding-block:28px}
.strip li{display:flex;align-items:center;gap:14px;font-weight:600}
.strip .ic{width:28px;height:28px;stroke-width:1.8;color:var(--gold)}

/* cartes */
.card{position:relative;background:var(--panel);border:1px solid var(--line);border-radius:22px;transition:translate .45s var(--ease),transform .25s ease-out,border-color .3s,box-shadow .45s}
.card::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:0;transition:opacity .3s;background:radial-gradient(280px circle at var(--mx,50%) var(--my,50%),rgba(246,181,0,.13),transparent 60%)}
@media(hover:hover){.card:hover{translate:0 -6px;border-color:rgba(246,181,0,.45);box-shadow:0 26px 50px -28px #000}.card:hover::before{opacity:1}}
.grid2{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(420px,100%),1fr));gap:24px}
.plat{display:flex;flex-direction:column;align-items:flex-start;gap:14px;padding:28px 30px 30px;overflow:hidden;container-type:inline-size;background:radial-gradient(460px circle at 100% 0,var(--cg),transparent 62%),var(--panel)}
.plat.nf{--c:#E50914;--cg:rgba(229,9,20,.22);--cb:rgba(229,9,20,.65)}
.plat.pv{--c:#1A98FF;--cg:rgba(26,152,255,.20);--cb:rgba(26,152,255,.65)}
.plat>*{position:relative;z-index:1}
.plat .vh{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.plat p{font-size:18px;max-width:max(58%,260px)}
.plat .wm{position:absolute;z-index:0;top:16px;right:22px;text-align:right;font-family:var(--display);font-weight:800;font-size:clamp(44px,6vw,80px);font-size:13.5cqw;line-height:.86;letter-spacing:-.04em;color:var(--c);opacity:.22;pointer-events:none;-webkit-user-select:none;user-select:none;transition:opacity .4s,transform 1s var(--ease)}
@media(hover:hover){.plat:hover{border-color:var(--cb)}.plat:hover .wm{opacity:.36}}
.tag{display:inline-flex;align-items:center;gap:8px;padding:5px 12px;background:var(--gold-soft);border-radius:999px;color:var(--gold);font-size:14px;font-weight:600}
.tag .ic{width:15px;height:15px;overflow:visible}
.tag{position:relative;overflow:hidden}
.tag::after{content:"";position:absolute;inset:0;background:linear-gradient(100deg,transparent 30%,rgba(255,255,255,.4) 50%,transparent 70%);transform:translateX(-130%)}
.sh{transform-box:fill-box;transform-origin:100% 100%}
.plat h3{font-family:var(--display);font-weight:700;font-size:32px;line-height:1.1;letter-spacing:-.02em}
.plat p{color:var(--mut)}
.checks{display:flex;flex-direction:column;gap:10px}
.checks li{display:flex;align-items:flex-start;gap:12px}
.checks .ic{box-sizing:border-box;width:22px;height:22px;padding:4.5px;margin-top:1px;border-radius:50%;background:var(--gold-soft);color:var(--gold);stroke-width:3.2}
.checks li:nth-child(2){--k:1}.checks li:nth-child(3){--k:2}.checks li:nth-child(4){--k:3}.checks li:nth-child(5){--k:4}

/* blocs photo + texte */
.split{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(460px,100%),1fr));gap:40px 72px;align-items:center}
.col{display:flex;flex-direction:column;gap:20px}
.steps{position:relative;display:flex;flex-direction:column;gap:26px;margin-top:14px}
.steps li:not(:last-child)::before,.steps li:not(:last-child)::after{content:"";position:absolute;left:22px;top:46px;bottom:-26px;width:2px;background:var(--line2)}
.steps li:not(:last-child)::after{background:var(--gold);transform-origin:top;transform:scaleY(clamp(0,calc(var(--p,1)*2 - var(--n,0)),1))}
.steps li{position:relative;z-index:1;display:flex;align-items:flex-start;gap:18px}
.num{display:flex;align-items:center;justify-content:center;flex:none;width:46px;height:46px;border-radius:14px;background:var(--gold);color:var(--gold-ink);font-family:var(--display);font-weight:800;font-size:22px}
.steps h3,.why h3,.faq h3{font-size:20px;font-weight:700;line-height:1.3}
.steps p{color:var(--mut)}
.band{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:28px 56px;margin-top:48px;padding:clamp(24px,3.4vw,44px);border-radius:26px}
.band .col{flex:1 1 420px;gap:16px}
.chips{display:flex;flex-wrap:wrap;gap:12px}
.chips li{display:flex;align-items:center;gap:10px;padding:10px 18px;background:var(--bg);border:1px solid var(--line2);border-radius:12px;font-weight:600}
.chips .ic{width:22px;height:22px;stroke-width:1.8;color:var(--gold)}

/* tarifs */
.plans{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px;align-items:stretch;perspective:1200px}
@media(max-width:1040px){.plans{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:560px){.plans{grid-template-columns:minmax(0,1fr)}}
.plan{display:flex;flex-direction:column;container-type:inline-size;background:linear-gradient(180deg,#1B1B28,#12121A);transform-style:preserve-3d}
.p-top{position:relative;overflow:hidden;display:flex;flex-direction:column;align-items:flex-start;gap:12px;padding:26px 24px 22px;border-radius:21px 21px 0 0;border-bottom:1px solid var(--line);background:radial-gradient(130% 100% at 50% 0,rgba(246,181,0,.17),transparent 68%)}
.p-top::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(105deg,transparent 35%,rgba(255,255,255,.11) 50%,transparent 65%);transform:translateX(-120%);animation:sweep 5.5s ease-in-out infinite;animation-delay:calc(var(--d,0)*.45s + 1.5s)}
@keyframes sweep{0%,55%{transform:translateX(-120%)}100%{transform:translateX(120%)}}
.plan h3{display:flex;align-items:center;align-self:stretch;gap:10px;font-size:15px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--ink)}
.plan h3::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--gold);box-shadow:0 0 0 4px var(--gold-soft)}
.amt{font-family:var(--display);font-weight:800;font-size:clamp(40px,4vw,52px);font-size:min(56px,19.5cqw);white-space:nowrap;line-height:1.05;letter-spacing:-.03em;font-variant-numeric:tabular-nums;transform-origin:left center;background:linear-gradient(100deg,#F6B500 0%,#FFE9A8 35%,#F6B500 55%,#C98A00 80%,#F6B500 100%);background-size:240% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;animation:goldflow 5s linear infinite}
@keyframes goldflow{to{background-position:-240% 0}}
.amt small{font-family:var(--body);font-size:17px;font-weight:600;letter-spacing:0;color:var(--mut);-webkit-text-fill-color:var(--mut)}
.per{display:flex;flex-wrap:wrap;align-items:center;gap:8px 10px;font-size:14px}
.per span{padding:5px 12px;border-radius:999px;background:rgba(255,255,255,.06);border:1px solid var(--line2);font-weight:600}
.plan h3 s{margin-left:auto;font-size:14px;font-weight:500;letter-spacing:0;text-transform:none;color:var(--dim)}
.plan .checks{flex:1;gap:12px;padding:22px 24px 4px;font-size:16px}
.plan>.btn{margin:18px 24px 24px}
@property --a{syntax:'<angle>';inherits:false;initial-value:0deg}
.plan.hot{border:2px solid transparent;background:linear-gradient(180deg,#241C0B,#15110A) padding-box,conic-gradient(from var(--a),#F6B500,#6B4E00 22%,#F6B500 45%,#FFE9A8 55%,#F6B500 68%,#6B4E00 86%,#F6B500) border-box;animation:spin 5s linear infinite;box-shadow:0 30px 70px -40px rgba(246,181,0,.55)}
.plan.hot .p-top{border-radius:19px 19px 0 0;border-color:rgba(246,181,0,.3);background:radial-gradient(130% 100% at 50% 0,rgba(246,181,0,.32),transparent 70%)}
.plan.hot .per span{background:var(--gold);color:var(--gold-ink);border-color:transparent}
.plan.hot .checks .ic{background:var(--gold);color:var(--gold-ink)}
@media(min-width:1041px){.plan.hot{margin-block:-14px}.plan.hot .p-top{padding-top:40px}.plan.hot>.btn{margin-bottom:38px}}
#tarifs{position:relative;overflow:hidden}
#tarifs::before{content:"";position:absolute;left:50%;top:58%;width:min(1100px,130vw);aspect-ratio:1;translate:-50% -50%;pointer-events:none;background:radial-gradient(closest-side,rgba(246,181,0,.12),rgba(216,31,61,.05) 55%,transparent);animation:breathe 7s ease-in-out infinite alternate}
@keyframes breathe{from{opacity:.5;scale:.88}to{opacity:1;scale:1.08}}
#tarifs .wrap{position:relative}
@keyframes spin{to{--a:360deg}}
.badge{position:absolute;z-index:2;top:-15px;right:20px;overflow:hidden;padding:5px 14px;background:var(--gold);color:var(--gold-ink);border-radius:999px;font-size:13px;font-weight:700;letter-spacing:.03em;text-transform:uppercase}
.badge::after{content:"";position:absolute;inset:0;background:linear-gradient(100deg,transparent 30%,rgba(255,255,255,.75) 50%,transparent 70%);transform:translateX(-120%);animation:shine 3.4s ease-in-out 1s infinite}
@keyframes shine{60%,100%{transform:translateX(120%)}}
.note{display:flex;align-items:flex-start;gap:12px;margin-top:28px;color:var(--mut);font-size:16px}
.note .ic{margin-top:2px;color:var(--gold)}

/* pourquoi */
.why{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(250px,100%),1fr));gap:20px;margin-top:28px}
.why .card{display:flex;flex-direction:column;gap:12px;padding:26px;border-radius:20px}
.why i{display:flex;align-items:center;justify-content:center;width:48px;height:48px;border-radius:14px;background:var(--gold-soft);color:var(--gold);transition:transform .5s var(--ease),background .3s,color .3s}
.why .ic{width:26px;height:26px;stroke-width:1.8}
.why .card:hover i{transform:rotate(-8deg) scale(1.1);background:var(--gold);color:var(--gold-ink)}
.why p{color:var(--mut);font-size:16px}

/* avis */
.mq{overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.tr{display:flex;gap:20px;width:max-content;padding-block:8px;animation:mq 64s linear infinite}
.mq:hover .tr{animation-play-state:paused}
@keyframes mq{to{transform:translateX(-50%)}}
.rev{flex:none;width:min(316px,82vw);display:flex;flex-direction:column;gap:14px;padding:24px;background:var(--panel);border:1px solid var(--line);border-radius:20px}
.stars{display:flex;gap:3px;color:var(--gold)}
.stars svg{width:18px;height:18px;fill:currentColor}
.rev blockquote{flex:1;font-size:16px}
.rev figcaption{display:flex;align-items:center;gap:12px;line-height:1.3}
.rev i{display:flex;align-items:center;justify-content:center;flex:none;width:40px;height:40px;border-radius:50%;background:var(--gold-soft);color:var(--gold);font-style:normal;font-weight:700}
.rev b{display:block}.rev small{color:var(--mut);font-size:14px}

/* questions */
.faq{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(460px,100%),1fr));gap:48px 64px;align-items:start}
.contact{display:flex;flex-direction:column;gap:6px;padding:22px 24px;border-radius:20px}
.contact p{font-weight:700;font-size:18px;margin-bottom:6px}
.contact a,.contact span{display:flex;align-items:center;gap:12px;min-height:44px}
.contact .ic{width:22px;height:22px;stroke-width:1.8;color:var(--gold)}
.contact a:hover{color:var(--gold)}
.qa{display:flex;flex-direction:column;gap:14px}
.q{border-radius:20px;overflow:hidden}
.q button{all:unset;box-sizing:border-box;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:18px;width:100%;padding:22px 26px}
.q button:focus-visible{outline:3px solid var(--gold);outline-offset:-3px;border-radius:20px}
.q .pm{position:relative;flex:none;width:18px;height:18px;transition:transform .45s var(--ease)}
.q .pm::before,.q .pm::after{content:"";position:absolute;left:0;right:0;top:8px;height:2px;background:var(--gold);border-radius:2px}
.q .pm::after{transform:rotate(90deg);transition:transform .45s var(--ease)}
.q.open .pm{transform:rotate(180deg)}.q.open .pm::after{transform:rotate(0)}
.q .ans{display:grid;grid-template-rows:0fr;transition:grid-template-rows .5s var(--ease)}
.q .ans>div{overflow:hidden}
.q.open .ans{grid-template-rows:1fr}
.q .ans p{padding:0 26px 24px;color:var(--mut)}
.q.open{border-color:rgba(246,181,0,.4)}

/* appel final */
.final{position:relative;overflow:hidden;border-radius:30px;border:1px solid var(--line2);background:var(--panel);isolation:isolate}
.final>img{position:absolute;inset:0;z-index:-2;width:100%;height:100%;object-fit:cover;object-position:right 38%;animation:drift 18s ease-in-out infinite alternate}
@keyframes drift{from{transform:scale(1.02)}to{transform:scale(1.14) translateX(-1.5%)}}
.final::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,rgba(11,11,18,.88) 0,rgba(11,11,18,.88) 380px,rgba(11,11,18,0) 780px)}
.final .in{display:flex;flex-direction:column;align-items:flex-start;gap:22px;max-width:720px;padding:clamp(24px,4.6vw,64px)}
.final h2{font-family:var(--display);font-weight:800;font-size:clamp(32px,3.8vw,52px);line-height:1.05;letter-spacing:-.03em;text-wrap:balance}
.final p{font-size:19px;color:#E4E2EC;max-width:38ch}
.final .btn{min-height:58px;animation:glow 2.8s ease-in-out infinite}
@keyframes glow{50%{box-shadow:0 0 0 12px rgba(216,31,61,.22)}}

/* pied de page */
.foot{margin-top:clamp(56px,7vw,88px);background:#08080D;border-top:1px solid var(--line)}
.foot .cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(240px,100%),1fr));gap:32px 48px;padding-block:44px 28px}
.foot .c{display:flex;flex-direction:column;gap:4px;font-size:16px;color:var(--mut)}
.foot .c b{color:var(--ink);margin-bottom:6px}
.foot .c a{padding:5px 0;transition:color .2s}.foot .c a:hover{color:var(--gold)}
.foot .site{color:var(--gold);font-weight:600}
.foot .legal{padding-block:24px 28px;border-top:1px solid var(--line);color:var(--dim);font-size:14px}

/* bouton flottant */
.fab{position:fixed;right:18px;bottom:calc(18px + env(safe-area-inset-bottom,0px));z-index:40;min-height:54px;border-radius:999px;box-shadow:0 14px 34px -10px rgba(0,0,0,.8);opacity:0;pointer-events:none;transform:translateY(20px);transition:opacity .4s,transform .5s var(--ease)}
.fab.show{opacity:1;pointer-events:auto;transform:none}
.fab.show:hover{transform:translateY(-3px)}

/* animations d'entrée (actives seulement quand le script tourne) */
.js .hero:not(.play) .hc,.js .hero:not(.play) .vis{visibility:hidden}
.play .w{animation:wordin .95s var(--ease) both;animation-delay:calc(.1s + var(--i)*.07s)}
.play .pill{animation:rise .7s var(--ease) both}
.play .hc>.lead,.play .cta-row,.play .pay,.play .stats{animation:rise .8s var(--ease) both;animation-delay:.8s}
.play .cta-row{animation-delay:.92s}.play .pay{animation-delay:1.02s}.play .stats{animation-delay:1.12s}
.play .vis .ph{animation:open 1.3s var(--ease) .25s both}
.play .vis .ph img{animation:zoom 2.6s var(--ease) .25s both}
.play .chip{animation:pop .6s var(--ease) both,float 6s ease-in-out 2.4s infinite alternate}
.play .chip.a{animation-delay:1.2s,2.4s}.play .chip.b{animation-delay:1.5s,3.1s}
@keyframes lockshut{from{transform:translate(1px,-3px) rotate(26deg)}60%{transform:translateY(1.5px)}to{transform:none}}
@keyframes lockloop{0%,80%,100%{transform:none}86%,90%{transform:translate(1px,-3px) rotate(26deg)}96%{transform:translateY(1.5px)}}
@keyframes tagpulse{from{box-shadow:0 0 0 0 rgba(246,181,0,.6)}to{box-shadow:0 0 0 16px rgba(246,181,0,0)}}
@keyframes tagshine{0%,70%{transform:translateX(-130%)}100%{transform:translateX(130%)}}
.js .plat.rv .sh{transform:translate(1px,-3px) rotate(26deg)}
.js .plat.rv.in .sh{animation:lockshut .7s cubic-bezier(.34,1.56,.64,1) .8s both,lockloop 7s ease-in-out 4s infinite}
.js .plat.rv.in .tag{animation:tagpulse 1s ease-out 1.35s 1 both}
.js .plat.rv.in .tag::after{animation:tagshine 7s ease-in-out 1.6s infinite}
.js .plat.pv.rv.in .sh{animation-delay:1s,4.6s}
.js .plat.pv.rv.in .tag{animation-delay:1.55s}
.play .chip.a .sh{animation:lockshut .7s cubic-bezier(.34,1.56,.64,1) 1.9s both,lockloop 7s ease-in-out 6s infinite}
@keyframes wordin{from{transform:translateY(110%) rotate(4deg)}}
@keyframes rise{from{opacity:0;transform:translateY(18px)}}
@keyframes open{from{clip-path:inset(12% 12% 12% 12% round 28px);opacity:0}to{clip-path:inset(0 round 28px);opacity:1}}
@keyframes zoom{from{scale:1.25}to{scale:1}}
@keyframes pop{from{opacity:0;transform:scale(.8) translateY(10px)}}
@keyframes float{to{translate:0 -8px}}
.js .rv{opacity:0;transform:translateY(30px);transition:opacity .9s var(--ease),transform .9s var(--ease);transition-delay:calc(var(--d,0)*90ms)}
.js .rv.up{transform:translateY(-30px)}
.js .plan.rv{transform:perspective(900px) rotateX(16deg) translateY(56px) scale(.95);transform-origin:50% 100%}
.js .plan.rv.up{transform:perspective(900px) rotateX(-16deg) translateY(-56px) scale(.95);transform-origin:50% 0}
.js .rv.in{opacity:1;transform:none}
.js .plan.rv.in{transform:none}
.js .plan.rv.in .amt{animation:goldflow 5s linear infinite,pricepop .95s var(--ease) calc(var(--d,0)*90ms + .2s) both}
@keyframes pricepop{from{opacity:0;transform:scale(.5) translateY(16px)}60%{opacity:1;transform:scale(1.07)}to{opacity:1;transform:none}}
.js .rv .checks .ic,.js .checks.rv .ic{transform:scale(0)}
.js .rv.in .checks .ic,.js .checks.rv.in .ic{transform:none;transition:transform .5s cubic-bezier(.34,1.56,.64,1);transition-delay:calc(.45s + var(--k,0)*.11s)}
.js .rv .checks .ic path,.js .checks.rv .ic path{stroke-dasharray:21;stroke-dashoffset:21}
.js .rv.in .checks .ic path,.js .checks.rv.in .ic path{stroke-dashoffset:0;transition:stroke-dashoffset .45s ease-out;transition-delay:calc(.68s + var(--k,0)*.11s)}
.js .plat.rv .wm{opacity:0;transform:translateX(70px)}
.js .plat.rv.in .wm{opacity:.22;transform:none;transition-delay:.3s}
@media(hover:hover){.js .plat.rv.in:hover .wm{opacity:.36;transition-delay:0s}}
.js .card.rv{transition:opacity .9s var(--ease),transform .9s var(--ease),translate .45s var(--ease),border-color .3s,box-shadow .45s;transition-delay:calc(var(--d,0)*90ms),calc(var(--d,0)*90ms),0s,0s,0s}
.js .card.rv.tilt{transition:transform .2s ease-out,translate .45s var(--ease),border-color .3s,box-shadow .45s;transition-delay:0s}
.js .wipe img{clip-path:inset(0 0 100% 0);scale:1.18;transition:clip-path 1.2s var(--ease),scale 1.8s var(--ease)}
.js .wipe.up img{clip-path:inset(100% 0 0 0)}
.js .wipe.in img{clip-path:inset(0 0 0 0);scale:1}
.js .steps li{opacity:0;transform:translateX(24px);transition:opacity .7s var(--ease),transform .7s var(--ease);transition-delay:calc(var(--d,0)*160ms)}
.js .steps.up li{transform:translateX(-24px)}
.js .steps.in li{opacity:1;transform:none}
.js .steps .num{transform:scale(.4);transition:transform .6s cubic-bezier(.34,1.56,.64,1);transition-delay:calc(var(--d,0)*160ms + .1s)}
.js .steps.in .num{transform:none}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  html{scroll-behavior:auto}
  .mq{overflow-x:auto;-webkit-mask-image:none;mask-image:none}
  .ph img{transform:none}
}

/* ordinateur : une seule colonne centrée, dans le même ordre que sur téléphone */
.wrap{max-width:1024px}
.hero .wrap,.split,.faq{grid-template-columns:minmax(0,1fr)}
@media(min-width:900px){
  .hero .wrap{gap:44px;padding-block:56px 64px}
  .hc,.head,.split .col,.faq .col{align-items:center;text-align:center}
  .head{margin-inline:auto}
  .hero .lead,.split .lead{max-width:60ch}
  .cta-row,.note{justify-content:center}
  .vis .ph{aspect-ratio:16/9}
  .chip,.steps,.split .checks{text-align:left}
  .steps{width:min(560px,100%)}
  .split,.faq{gap:44px}
  .split>.ph,.faq .ph{aspect-ratio:2/1;width:100%}
  .faq .ph{margin-top:14px}
  .strip ul{grid-template-columns:repeat(4,minmax(0,1fr));gap:20px}
  .why{grid-template-columns:repeat(2,minmax(0,1fr))}
  .contact{align-self:stretch;flex-direction:row;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:6px 28px;text-align:left}
  .contact p{margin:0}
}
@media(min-width:1041px){
  .plans{grid-template-columns:repeat(2,minmax(0,1fr));gap:30px 24px}
  .plan.hot{margin-block:0}
  .plan.hot .p-top{padding-top:26px}
  .plan.hot>.btn{margin-bottom:24px}
}

/* menu : un bouton tout à droite de l'en-tête ouvre un volet qui glisse depuis la droite */
.top .wrap{max-width:none}
@media(max-width:900px){.top .wrap{padding-block:11px}}
.mb{all:unset;box-sizing:border-box;position:relative;flex:none;width:48px;height:48px;border-radius:13px;border:1px solid var(--line2);background:rgba(255,255,255,.05);cursor:pointer;-webkit-tap-highlight-color:transparent;transition:border-color .3s,background .3s,transform .2s}
.mb:active{transform:scale(.92)}
.mb:focus-visible{outline:3px solid var(--gold);outline-offset:3px}
.mb i{position:absolute;left:13px;top:17px;width:20px;height:2px;border-radius:2px;background:var(--ink);transition:transform .45s var(--ease),width .35s var(--ease),top .45s var(--ease),left .45s var(--ease)}
.mb i:nth-child(2){top:27px;left:20px;width:13px}
@media(hover:hover){.mb:hover{border-color:var(--gold);background:var(--gold-soft)}.mb:hover i:nth-child(2){left:13px;width:20px}}
.nav-open .mb{border-color:var(--gold)}
.nav-open .mb i{top:22px;transform:rotate(45deg)}
.nav-open .mb i:nth-child(2){left:13px;width:20px;transform:rotate(-45deg)}
.shade{position:fixed;inset:0;z-index:48;background:rgba(5,5,10,.66);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);opacity:0;visibility:hidden;touch-action:none;transition:opacity .4s,visibility 0s .4s}
.nav-open .shade{opacity:1;visibility:visible;cursor:pointer;transition-delay:0s}
.menu{position:fixed;z-index:49;top:var(--hh,77px);right:0;bottom:0;width:min(390px,86vw);display:flex;flex-direction:column;padding:22px 24px calc(22px + env(safe-area-inset-bottom,0px));background:var(--bg2);border-left:1px solid var(--line2);box-shadow:-30px 0 60px -30px #000;overflow-y:auto;overscroll-behavior:contain;visibility:hidden;transform:translateX(104%);transition:transform .55s var(--ease),visibility 0s .55s}
.nav-open .menu{visibility:visible;transform:none;transition-delay:0s}
.mt{margin-bottom:6px;font-size:13px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--gold)}
.menu .nav{display:flex;flex-direction:column;gap:0;font-size:20px;font-weight:600}
.menu .nav a{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:60px;padding:0;border-bottom:1px solid var(--line);color:var(--ink);opacity:0;transform:translateX(26px);transition:opacity .35s,transform .6s var(--ease),color .2s}
.menu .nav a::after{content:none}
.nav-open .menu .nav a{opacity:1;transform:none;transition-delay:calc(.14s + var(--i)*.05s),calc(.14s + var(--i)*.05s),0s}
.menu .nav .ic{width:18px;height:18px;color:var(--mut);transition:transform .3s var(--ease),color .2s}
.menu .nav a.on,.menu .nav a.on .ic{color:var(--gold)}
@media(hover:hover){.menu .nav a:hover,.menu .nav a:hover .ic{color:var(--gold)}.menu .nav a:hover .ic{transform:translateX(4px)}}
.menu-foot{display:flex;flex-direction:column;align-items:center;gap:6px;margin-top:auto;padding-top:28px}
.menu-foot .btn{align-self:stretch;min-height:54px}
.tel{display:flex;align-items:center;min-height:44px;color:var(--mut);font-size:15.5px;font-variant-numeric:tabular-nums;transition:color .2s}
.tel:hover{color:var(--gold)}

/* Spotify : troisième carte du catalogue, sur toute la largeur */
.plat.sp{--c:#1FDF64;--cg:rgba(31,223,100,.20);--cb:rgba(31,223,100,.65);grid-column:1/-1}
.plat.sp .wm{font-size:min(10cqw,88px)}
.plat.sp .tag{background:#123A26;color:#6DF0A0}
.plat.sp .tag .ic{fill:currentColor;stroke:none}
.sp-in{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(300px,100%),1fr));gap:22px 48px;align-items:end;width:100%}
.sp-tx{display:flex;flex-direction:column;gap:14px}
.plat.sp p{max-width:none}
.eqz{display:flex;align-items:flex-end;justify-content:space-between;gap:4px;height:clamp(56px,9cqw,84px)}
.eqz i{flex:1 1 0;max-width:9px;height:100%;border-radius:4px;background:linear-gradient(180deg,#9BFFC2,var(--c));opacity:.9;transform-origin:bottom;transform:scaleY(.45);animation:eqz .8s ease-in-out infinite alternate}
.eqz i:nth-child(3n){transform:scaleY(.85);animation-duration:.62s}.eqz i:nth-child(4n+1){transform:scaleY(.65);animation-duration:1s}
.eqz i:nth-child(2n){animation-delay:-.5s}.eqz i:nth-child(3n+1){animation-delay:-.2s}.eqz i:nth-child(5n){animation-delay:-.65s}.eqz i:nth-child(7n){animation-delay:-.35s}.eqz i:nth-child(11n){animation-delay:-.1s}
@keyframes eqz{from{transform:scaleY(.18)}to{transform:scaleY(1)}}

/* écriture : Inter pour tout le site, et un mot en Instrument Serif italique dans chaque titre */
:root{--display:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;--body:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;--serif:'Instrument Serif',Georgia,'Times New Roman',serif}
body{letter-spacing:-.011em}
.h-hero,.h2,.final h2{font-weight:600;letter-spacing:-.04em;line-height:1.04}
.h-hero em,.h2 em,.final h2 em{font-family:var(--serif);font-style:italic;font-weight:400;font-size:1.12em;line-height:.9;letter-spacing:-.015em;color:var(--gold)}
.mk:has(em){padding-right:.12em;margin-right:-.12em}
.eyebrow,.mt{font-size:13px;font-weight:600;letter-spacing:.14em}
.brand{font-weight:700;letter-spacing:.02em}
.btn{font-weight:600;letter-spacing:-.01em}
.stats b{font-weight:600;letter-spacing:-.04em}
.amt{font-weight:700;letter-spacing:-.045em}
.plat .wm{letter-spacing:-.055em}
.num{padding:0 3px 2px 0;font-family:var(--serif);font-style:italic;font-weight:400;font-size:30px;line-height:1}
.steps h3,.why h3,.q h3{font-weight:600;letter-spacing:-.02em}
.plan h3{letter-spacing:.11em}

/* couleur d'accent : orange à la place du jaune, partout sur le site */
:root{--gold:#FF6B1A;--gold-soft:rgba(255,107,26,.15);--gold-ink:#1F0D02}
/* logo : le S en orange */
:root{--ns:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAF4AAAA8CAMAAADYMP0NAAAAYFBMVEUBAQH5aBny8eyopqZpEQJkLA5wb3GqSBFiYWQpHRsNEVhoZ2qLOg9gKg1ubYDBwL4qHyBkZABbWmFeKhCnVACoqKj/AAAxIBz/cwD///+GOAyEOA8ABvgAAJ9wD3WyOwA8KOS3AAAAIHRSTlMB/v77DfAG815bEOLyoqj+ngKjWwUDAdkCAWeWAwYLBEsMrisAAAOxSURBVHjapZiLdqMgEIYnESQgNBqtmuu+/1vugJooDpfszjltT1vz8TswNwD+w/pu8+vYUA+VvyvLRjfjOOIP+TG3Qtc0sU9ds9hsYrCWr82weWW2elRdfqCaDOAE8MpTX3MtxMEzIQw32+dOxfFjRY50/Gr5Dv1eQTN84g+JPx7xFcoEXQ1B+GSaB9TbF5BRfgMsAXfvcDcB/LGK8RkwfcgxXgfwx6KO0UUW/SCM2yQCb/WHrM2kHzTrQ/iQ/h5AZ9JFaGvD/AYkz6QfZtcE8MfiAqXyHa9qIpCEdiY2QaahialHfkXov/vn+7aKf3bjy5HVchEfwlv93gH1xAs++C6sjQHxOTUx/J4vhzVeDA/c7KZhb5vTM9cGRkjid/ztxmJYMraLCzYqVN5ABh756lp+ImqD15l1IYJ3+1vSeP7Zvd0b5OKP8KMWvo+HED5fvV1g4Xt4IaHD7Wy+wRdVtXfQa9G/3Vq9pFzW5+MlwX/v7jbRi3tb11J6dSzqnAvUJL90Cc1PxkLPBVw5e0DX7M7qGn++IKc67/gnsB3KCIaurm4ZPgySeIc1Hi7YiVD+OdkOpVMmnO1daru1ltixkPofmydVRQbwC4PRJPM8x4CAPoy3f6sKMkGgqoyEb48Ui+KB1o/8mmcVwqj6Elu3vX5bgXuVV7A+L0Cpx28Ufwouk1PNedQ5JP9cTf6HjD4K9TdhfKABQv80mGakuevUCqLd9zlr/JXkL3EjMY7iSwiIq6c7rBrXZc1U99r2xjXXRCf+cX8EH/DP3FHN1XsYBjc87NbQ7j0j+BIY2SHOBQBfAj//VLOB8TKqq7kx9b9QBvxDJmFpNj3iLaHeHdCI/t3U8hzWfJtj43g6QaD+wASgjN9MJPAlxccRr6Tb/3aNl2k8zS8AfsmB9Fv1E59M0Hv7sykIWFgy8IECcFKqt6dzqa693cnN8HKz42cGPqAfR9Dp/x0awOPh1fo2de5j/MIOz7zGXkTN4cu37f/U5Gc5Z+8fm9303IqY2+3OuZ+mOeTjff1ITw24DLJODqkfI9ek6kn3HR6GYnXzwFNT+Yt9hS+v7wJZyNT8rGtFdGk/ieuQST82bUk62QSm8E7/GX+KhGee5OCZwlv/FHje4ofG1CrepUX4eMCjZ1Lw4GyFiSp5F+hyDM6wpHuEvrcSxtUCZVW8LZTHKTP+XZ1r82vY9MeuxChYqnHWLeN80/jEx9nqmrEFR/Dmk8e/XsHO5Xt9S0rHy9u+Xapfz53UhPgXZxw16+0Yew4AAAAASUVORK5CYII=")}
.brand .gold{background-image:linear-gradient(100deg,#FF6B1A 0%,#FFD2B0 40%,#FF6B1A 60%,#FF6B1A 100%)}
@keyframes logoglow{from{filter:drop-shadow(0 0 0 rgba(255,107,26,0))}to{filter:drop-shadow(0 0 9px rgba(255,107,26,.6))}}
.hero::before{background:radial-gradient(620px circle at var(--hx,72%) var(--hy,34%),rgba(255,107,26,.13),transparent 62%),radial-gradient(520px circle at 12% 88%,rgba(255,107,26,.06),transparent 60%)}
.chip.a{border-color:rgba(255,107,26,.5)}
.card::before{background:radial-gradient(280px circle at var(--mx,50%) var(--my,50%),rgba(255,107,26,.13),transparent 60%)}
@media(hover:hover){.card:hover{border-color:rgba(255,107,26,.45)}}
.p-top{background:radial-gradient(130% 100% at 50% 0,rgba(255,107,26,.17),transparent 68%)}
.amt{background-image:linear-gradient(100deg,#FF6B1A 0%,#FFD2B0 35%,#FF6B1A 55%,#C2410C 80%,#FF6B1A 100%)}
.plan.hot{background:linear-gradient(180deg,#1E1008,#0E0805) padding-box,conic-gradient(from var(--a),#FF6B1A,#6B2A00 22%,#FF6B1A 45%,#FFD2B0 55%,#FF6B1A 68%,#6B2A00 86%,#FF6B1A) border-box;box-shadow:0 30px 70px -40px rgba(255,107,26,.55)}
.plan.hot .p-top{border-color:rgba(255,107,26,.3);background:radial-gradient(130% 100% at 50% 0,rgba(255,107,26,.32),transparent 70%)}
#tarifs::before{background:radial-gradient(closest-side,rgba(255,107,26,.10),transparent)}
.q.open{border-color:rgba(255,107,26,.4)}
@keyframes tagpulse{from{box-shadow:0 0 0 0 rgba(255,107,26,.6)}to{box-shadow:0 0 0 16px rgba(255,107,26,0)}}

/* boutons de commande : fond orange, texte sombre */
.btn{background:var(--gold);color:var(--gold-ink)}
.btn::after{background:linear-gradient(100deg,transparent 30%,rgba(255,255,255,.55) 50%,transparent 70%)}
.btn:hover{box-shadow:0 14px 34px -10px rgba(255,107,26,.7)}
.btn:focus-visible{outline-color:#fff}
.btn.line{color:var(--ink)}
@keyframes glow{50%{box-shadow:0 0 0 12px rgba(255,107,26,.24)}}

/* arrière-plan : noir profond, pour faire ressortir l'orange et les photos */
:root{--bg:#050506;--bg2:#0A0A0C;--panel:#101013}
.top{background:rgba(5,5,6,.82)}
.chip{background:rgba(5,5,6,.86)}
.plan{background:linear-gradient(180deg,#141418,#0C0C0F)}
.final::before{background:linear-gradient(90deg,rgba(5,5,6,.9) 0,rgba(5,5,6,.9) 380px,rgba(5,5,6,0) 780px)}
.foot{background:#020203}

/* commande : fenêtre de choix de la plateforme avant d'ouvrir WhatsApp */
.pick{position:fixed;inset:0;z-index:70;display:flex;align-items:flex-end;justify-content:center;background:rgba(2,2,3,.74);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);touch-action:none;opacity:0;transition:opacity .3s}
.pick[hidden]{display:none}
.pick.on{opacity:1}
.pick-box{position:relative;width:min(520px,100%);max-height:100%;overflow-y:auto;overscroll-behavior:contain;touch-action:pan-y;display:flex;flex-direction:column;gap:14px;padding:30px 20px calc(22px + env(safe-area-inset-bottom,0px));background:var(--bg2);border:1px solid var(--line2);border-bottom:0;border-radius:26px 26px 0 0;box-shadow:0 -30px 80px -30px #000;transform:translateY(48px);transition:transform .5s var(--ease)}
.pick.on .pick-box{transform:none}
@media(min-width:700px){.pick{align-items:center;padding:24px}.pick-box{padding:36px 32px 30px;border-bottom:1px solid var(--line2);border-radius:26px;transform:translateY(24px) scale(.97)}}
.pick .h2{padding-right:48px;font-size:clamp(28px,7vw,38px)}
.pick-list{display:flex;flex-direction:column;gap:10px;margin-top:6px}
.pick-o{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:2px 14px;padding:16px 16px 16px 20px;border:1px solid var(--line2);border-radius:18px;background:radial-gradient(260px circle at 100% 50%,var(--cg),transparent 72%),var(--panel);opacity:0;transform:translateY(14px);transition:opacity .35s,transform .5s var(--ease),border-color .25s}
.pick.on .pick-o{opacity:1;transform:none;transition-delay:calc(.1s + var(--i)*.06s),calc(.1s + var(--i)*.06s),0s}
.pick-o.nf{--c:#FF3D47;--cg:rgba(229,9,20,.20)}.pick-o.pv{--c:#35A5FF;--cg:rgba(26,152,255,.18)}.pick-o.sp{--c:#1FDF64;--cg:rgba(31,223,100,.16)}
.pick-o b{font-size:22px;font-weight:700;line-height:1.2;letter-spacing:-.02em;color:var(--c)}
.pick-o span{grid-column:1;color:var(--mut);font-size:15.5px}
.pick-o i{grid-column:2;grid-row:1/3;display:flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:50%;background:var(--gold);color:var(--gold-ink);transition:transform .3s var(--ease)}
@media(hover:hover){.pick-o:hover{border-color:var(--c)}.pick-o:hover i{transform:translateX(4px)}}
.pick-n{display:flex;align-items:center;gap:10px;margin-top:2px;color:var(--mut);font-size:15px}
.pick-n .ic{color:var(--gold)}
.pick-x{all:unset;box-sizing:border-box;position:absolute;top:16px;right:16px;width:44px;height:44px;border-radius:12px;border:1px solid var(--line2);cursor:pointer;-webkit-tap-highlight-color:transparent;transition:border-color .25s}
.pick-x i{position:absolute;left:11px;top:20px;width:20px;height:2px;border-radius:2px;background:var(--ink);transform:rotate(45deg)}
.pick-x i:nth-child(2){transform:rotate(-45deg)}
.pick-x:hover{border-color:var(--gold)}
.pick-x:focus-visible,.pick-o:focus-visible{outline:3px solid var(--gold);outline-offset:3px}

/* ordinateur : la page occupe toute la largeur de l'ecran, texte et photo cote a cote */
@media(min-width:1100px){
  .wrap{max-width:none;padding-inline:clamp(40px,4.5vw,96px)}
  .hero .wrap{grid-template-columns:repeat(auto-fit,minmax(min(460px,100%),1fr));gap:48px clamp(48px,5vw,96px);padding-block:clamp(28px,4vw,48px) 56px}
  .split{grid-template-columns:repeat(auto-fit,minmax(min(460px,100%),1fr));gap:40px clamp(56px,5.5vw,104px)}
  .faq{grid-template-columns:repeat(auto-fit,minmax(min(460px,100%),1fr));gap:48px 64px}
  .hc{align-items:flex-start;text-align:start}
  .head,.split .col,.faq .col{align-items:normal;text-align:start}
  .head{margin-inline:0}
  .hero .lead{max-width:54ch}
  .split .lead{max-width:none}
  .cta-row,.note{justify-content:normal}
  .vis .ph{aspect-ratio:1/1}
  .steps{width:auto}
  .split>.ph,.faq .ph{width:auto}
  .split>.ph.r54{aspect-ratio:5/4}
  .split>.ph.r43{aspect-ratio:4/3}
  .faq .ph{aspect-ratio:3/2;margin-top:0}
  .strip ul{grid-template-columns:repeat(auto-fit,minmax(min(230px,100%),1fr));gap:22px 28px}
  .why{grid-template-columns:repeat(auto-fit,minmax(min(250px,100%),1fr))}
  .contact{align-self:auto;flex-direction:column;flex-wrap:nowrap;align-items:normal;justify-content:normal;gap:6px;text-align:start}
  .contact p{margin:0 0 6px}
  .grid2{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(min-width:1200px){
  .grid2{grid-template-columns:repeat(3,minmax(0,1fr))}
  .plat.sp{grid-column:auto}
  .plat.sp .sp-in{flex:1;grid-template-columns:minmax(0,1fr);align-content:space-between}
  .plat.sp .eqz{height:clamp(56px,16cqw,84px)}
}
@media(min-width:1240px){
  .plans{grid-template-columns:repeat(4,minmax(0,1fr));gap:20px}
  .plan.hot{margin-block:-14px}
  .plan.hot .p-top{padding-top:40px}
  .plan.hot>.btn{margin-bottom:38px}
}
@media(min-width:1600px){
  .h-hero{font-size:clamp(68px,4.3vw,92px)}
  .h2{font-size:clamp(50px,3vw,66px)}
  .lead{font-size:20px}
  .head{max-width:900px;margin-bottom:48px}
  .sec{padding-block:104px}
  .grid2,.plans,.why{gap:28px}
}
/* ===== corrections du 17 octobre 2026 ===== */
/* animations calmes : le logo et les prix ne tournent plus en boucle */
.logo,.brand .gold,.amt,.plan.hot{animation:none}
.js .top .logo{animation:logoin 1.1s cubic-bezier(.34,1.4,.64,1) .1s both}
.logo::after{animation:logoshine 4.5s ease-in-out 1.6s 1}
.js .plan.rv.in .amt{animation:pricepop .95s var(--ease) calc(var(--d,0)*90ms + .2s) both}
.final .btn{animation:glow 2.8s ease-in-out 3}
/* hors de l'écran, les animations s'arrêtent : moins de batterie, téléphone qui ne chauffe pas */
.zz,.zz::before,.zz::after,.zz *,.zz *::before,.zz *::after{animation-play-state:paused!important}
/* avis : un appui long met le défilement en pause */
.mq.hold .tr{animation-play-state:paused!important}
@media(hover:hover){.mq:hover .tr{animation-play-state:paused!important}}
/* zones à toucher d'au moins 44 px */
.brand{min-height:44px}
.foot .c{gap:0}
.foot .c a{display:flex;align-items:center;min-height:44px;padding:0}
/* lien d'évitement pour la navigation au clavier */
.skip{position:fixed;left:12px;top:-90px;z-index:100;padding:12px 18px;border-radius:12px;background:var(--gold);color:var(--gold-ink);font-weight:700;text-decoration:none;transition:top .2s}
.skip:focus{top:12px;outline:3px solid #fff;outline-offset:2px}
/* ordinateur : les liens du menu sont affichés dans l'en-tête */
@media (min-width:1100px){
.mb{visibility:hidden;pointer-events:none}
.shade{display:none}
.menu{top:env(safe-area-inset-top,0px);right:0;bottom:auto;left:auto;width:auto;height:77px;flex-direction:row;align-items:center;gap:26px;padding:0 clamp(20px,4vw,32px);background:none;border:0;box-shadow:none;overflow:visible;visibility:visible;transform:none;transition:none;z-index:51}
.mt{display:none}
.menu .nav{flex-direction:row;align-items:center;gap:24px;font-size:15px;font-weight:500}
.menu .nav a{min-height:44px;min-width:44px;justify-content:center;border:0;opacity:1;transform:none;color:var(--mut);transition:color .2s}
.menu .nav .ic{display:none}
.menu .nav a::after{content:"";position:absolute;left:0;right:0;bottom:6px;height:2px;background:var(--gold);transform:scaleX(0);transform-origin:left;transition:transform .35s var(--ease)}
.menu .nav a:hover,.menu .nav a.on{color:var(--ink)}
.menu .nav a:hover::after,.menu .nav a.on::after{transform:scaleX(1)}
.menu-foot{flex-direction:row;margin:0;padding:0}
.menu-foot .btn{align-self:auto;min-height:46px;padding:0 18px;font-size:15px}
.menu-foot .tel{display:none}
.fab{display:none}
}