/* Aube — identité : la nuit qui s'éclaircit. Indigo profond, corail d'aurore, crème. */
@font-face{font-family:"Fraunces";src:url("../fonts/fraunces-latin.woff2") format("woff2");font-weight:300 700;font-style:normal;font-display:swap}
@font-face{font-family:"Figtree";src:url("../fonts/figtree-latin.woff2") format("woff2");font-weight:400 800;font-style:normal;font-display:swap}

:root{
  --ink:#1E2140;--ink-2:#3D4160;--muted:#6B6F8A;--faint:#9A9DB5;
  --cream:#FBF5EC;--paper:#fff;--line:#ECE4D6;--line-2:#E3E0EE;
  --coral:#EC6A47;--coral-deep:#D9552F;--sun:#F6A53B;--peach:#FFE9D2;--sand:#FFF6EA;
  --lilac:#7C70CF;--lilac-soft:#F1EEFB;--sage:#2F8F7A;--sage-soft:#E6F4F0;
  --night:#2A2550;
  --serif:"Fraunces",Georgia,"Times New Roman",serif;
  --sans:"Figtree",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --radius:22px;--shadow:0 1px 2px rgba(30,33,64,.04),0 10px 30px rgba(30,33,64,.07);
  --ease:cubic-bezier(.22,.8,.26,1);
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;height:100%}
body{margin:0;min-height:100%;font-family:var(--sans);font-size:17px;line-height:1.55;color:var(--ink-2);background:var(--cream);
  -webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:transparent;overflow-x:hidden}
button,input{font:inherit;color:inherit}
button{cursor:pointer;border:0;background:none;padding:0}
h1,h2,h3,p{margin:0}
a{color:var(--coral-deep)}
[hidden]{display:none!important}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* Décor : halo d'aurore derrière la colonne (visible surtout sur grand écran) */
.backdrop{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden;background:
  radial-gradient(60vw 50vh at 85% -10%,rgba(246,165,59,.20),transparent 70%),
  radial-gradient(55vw 55vh at 5% 105%,rgba(124,112,207,.16),transparent 70%),var(--cream)}
.backdrop i{position:absolute;border-radius:50%;filter:blur(70px);opacity:.5;animation:drift 22s ease-in-out infinite alternate}
.backdrop i:nth-child(1){width:38vw;height:38vw;left:-10vw;top:10vh;background:rgba(236,106,71,.16)}
.backdrop i:nth-child(2){width:30vw;height:30vw;right:-6vw;bottom:4vh;background:rgba(124,112,207,.18);animation-duration:28s}
@keyframes drift{to{transform:translate3d(4vw,-5vh,0) scale(1.12)}}

.app{position:relative;z-index:1;width:100%;max-width:480px;min-height:100vh;min-height:100dvh;margin:0 auto;display:flex;flex-direction:column;background:var(--cream)}
@media (min-width:720px){
  body{padding:28px 0}
  .app{min-height:calc(100dvh - 56px);border-radius:36px;box-shadow:0 30px 80px rgba(30,33,64,.14),0 0 0 1px rgba(30,33,64,.04);overflow:hidden}
}

/* En-tête : retour + 5 phases */
.top{position:sticky;top:0;z-index:20;padding:14px 20px 10px;background:var(--cream)}
.top::after{content:"";position:absolute;left:0;right:0;top:100%;height:16px;pointer-events:none;background:linear-gradient(var(--cream),rgba(251,245,236,0))}
.top-row{display:flex;align-items:center;gap:12px;height:36px}
.back{width:36px;height:36px;margin-left:-8px;border-radius:50%;display:grid;place-items:center;color:var(--ink);transition:background .2s}
.back:active{background:rgba(30,33,64,.08)}
.back[disabled]{opacity:0;pointer-events:none}
.brand-mini{display:flex;align-items:center;gap:7px;font-family:var(--serif);font-size:20px;color:var(--ink);letter-spacing:-.2px;margin:0 auto;transform:translateX(-14px)}
.brand-mini svg{width:22px;height:22px}
.phases{display:grid;grid-template-columns:repeat(5,1fr);gap:6px;margin-top:10px}
.phase{display:flex;flex-direction:column;gap:6px}
.phase b{height:4px;border-radius:4px;background:#E9E1D3;overflow:hidden;display:block}
.phase b::after{content:"";display:block;height:100%;width:var(--fill,0%);border-radius:4px;background:linear-gradient(90deg,var(--coral),var(--sun));transition:width .6s var(--ease)}
.phase span{font-size:11px;line-height:1.2;font-weight:600;color:var(--faint);letter-spacing:.1px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:color .3s}
.phase.on span{color:var(--ink)}

/* Écran */
.stage{flex:1;display:flex;flex-direction:column;position:relative}
.screen{flex:1;display:flex;flex-direction:column;padding:8px 22px 0;animation:screenIn .5s var(--ease) both}
.screen.leaving{animation:screenOut .2s ease both}
@keyframes screenIn{from{opacity:0;transform:translate3d(0,14px,0)}to{opacity:1;transform:none}}
@keyframes screenOut{to{opacity:0;transform:translate3d(0,-8px,0)}}
.screen-body{flex:1;padding-bottom:26px}
.eyebrow{font-size:12.5px;font-weight:700;letter-spacing:1.4px;text-transform:uppercase;color:var(--coral-deep);margin-bottom:10px}
.title{font-family:var(--serif);font-weight:400;font-size:30px;line-height:1.16;letter-spacing:-.5px;color:var(--ink);margin-bottom:12px;font-variation-settings:"opsz" 72}
.title em{font-style:normal;color:var(--coral-deep)}
.title:focus{outline:none}
.sub{font-size:16.5px;line-height:1.55;color:var(--muted);margin-bottom:22px}
.sub strong,.prose strong{color:var(--ink);font-weight:700}
.prose p{margin-bottom:16px;font-size:17px;line-height:1.62;color:var(--ink-2)}
.lead-strong{font-weight:700;color:var(--ink);font-size:17.5px;margin-bottom:18px;line-height:1.45}
.note{font-size:13.5px;line-height:1.5;color:var(--faint);margin-top:12px}
.center{text-align:center}

/* Apparition en cascade */
.rise{opacity:0;transform:translate3d(0,16px,0);animation:rise .6s var(--ease) forwards;animation-delay:calc(var(--i,0) * 70ms + 80ms)}
@keyframes rise{to{opacity:1;transform:none}}

/* Options */
.options{display:flex;flex-direction:column;gap:12px}
.opt{position:relative;display:flex;align-items:flex-start;gap:14px;width:100%;text-align:left;padding:17px 16px 17px 18px;border-radius:var(--radius);
  background:var(--paper);box-shadow:0 0 0 1.5px var(--line),0 2px 6px rgba(30,33,64,.03);transition:box-shadow .25s,background .25s,transform .15s}
.opt:active{transform:scale(.985)}
.opt-ico{flex:none;width:38px;height:38px;border-radius:12px;display:grid;place-items:center;background:var(--sand);color:var(--coral-deep);font-size:20px;transition:background .25s,color .25s}
.opt-ico svg{width:20px;height:20px}
.opt-txt{flex:1;min-width:0;padding-top:1px}
.opt-txt b{display:block;font-size:17px;line-height:1.3;font-weight:700;color:var(--ink)}
.opt-txt small{display:block;font-size:14.5px;line-height:1.45;color:var(--muted);margin-top:4px}
.opt.plain{align-items:center;padding:19px 16px 19px 20px}
.opt-mark{flex:none;width:24px;height:24px;margin-top:6px;border-radius:50%;box-shadow:inset 0 0 0 2px #D9D3C6;display:grid;place-items:center;transition:all .25s var(--ease)}
.opt.plain .opt-mark{margin-top:0}
.opt[data-multi] .opt-mark{border-radius:8px}
.opt-mark svg{width:14px;height:14px;stroke:#fff;stroke-width:3;fill:none;stroke-dasharray:22;stroke-dashoffset:22;transition:stroke-dashoffset .3s .05s}
.opt.sel{background:#FFFBF6;box-shadow:0 0 0 2px var(--coral),0 10px 26px rgba(236,106,71,.14)}
.opt.sel .opt-mark{background:var(--coral);box-shadow:none;transform:scale(1.06)}
.opt.sel .opt-mark svg{stroke-dashoffset:0}
.opt.sel .opt-ico{background:var(--coral);color:#fff}
.badge{position:absolute;top:-11px;left:16px;padding:3px 11px;border-radius:999px;background:var(--ink);color:#fff;font-size:12px;font-weight:700;letter-spacing:.2px}
.opt.has-badge{margin-top:8px}
.none-link{display:block;width:100%;text-align:center;padding:12px;margin-top:4px;font-size:15px;color:var(--muted);text-decoration:underline;text-underline-offset:3px}

/* Pied : bouton principal */
.dock{position:sticky;bottom:0;z-index:15;padding:18px 22px calc(18px + env(safe-area-inset-bottom));background:linear-gradient(rgba(251,245,236,0),var(--cream) 34%)}
.btn{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;min-height:60px;padding:14px 22px;border-radius:999px;
  background:linear-gradient(135deg,#2B2F5E,var(--ink));color:#fff;font-size:18px;font-weight:700;letter-spacing:.1px;text-align:center;line-height:1.25;
  box-shadow:0 12px 28px rgba(30,33,64,.26),inset 0 1px 0 rgba(255,255,255,.12);transition:transform .15s,opacity .3s,box-shadow .3s;text-decoration:none}
.btn:active{transform:scale(.98)}
.btn[disabled]{opacity:.38;box-shadow:none;pointer-events:none}
.btn.warm{background:linear-gradient(135deg,#F0825A,var(--coral-deep));box-shadow:0 14px 30px rgba(217,85,47,.34),inset 0 1px 0 rgba(255,255,255,.22)}
.btn svg{width:20px;height:20px}
.btn.loading{pointer-events:none}
.btn.loading::after{content:"";width:18px;height:18px;border-radius:50%;border:2.5px solid rgba(255,255,255,.35);border-top-color:#fff;animation:spin .7s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.dock-note{text-align:center;font-size:13px;color:var(--faint);margin-top:10px;line-height:1.45}
.link{font-size:15.5px;font-weight:600;color:var(--ink);text-decoration:underline;text-underline-offset:3px}

/* Accueil */
.welcome{padding:0;display:flex;flex-direction:column;min-height:100dvh}
@media (min-width:720px){.welcome{min-height:calc(100dvh - 56px)}}
.sky{position:relative;height:42vh;min-height:270px;max-height:380px;overflow:hidden;background:linear-gradient(180deg,#221E48 0%,#473A7A 26%,#A65F8C 52%,#EE8E66 76%,#FFD9A0 100%)}
.sky::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,#14122E 0%,#231F4D 45%,#3B3270 100%);animation:nightFade 3.2s 0.3s var(--ease) forwards}
@keyframes nightFade{to{opacity:0}}
.stars{position:absolute;inset:0;animation:nightFade 2.6s .3s ease forwards}
.stars i{position:absolute;width:2px;height:2px;border-radius:50%;background:#fff;opacity:.8;animation:twinkle 2.4s ease-in-out infinite alternate}
@keyframes twinkle{to{opacity:.2}}
.sun{position:absolute;left:50%;bottom:-70px;width:150px;height:150px;margin-left:-75px;border-radius:50%;
  background:radial-gradient(circle at 50% 40%,#FFF3D6,#FFC56B 55%,#F6953B);box-shadow:0 0 60px 22px rgba(255,197,107,.55),0 0 160px 70px rgba(246,149,59,.35);
  transform:translateY(120px);animation:sunrise 3.4s .35s var(--ease) forwards}
@keyframes sunrise{to{transform:translateY(-52px)}}
.hills{position:absolute;left:0;right:0;bottom:-1px;width:100%;height:auto;display:block}
.hills path:nth-child(1){fill:#7B4F86;opacity:.55}
.hills path:nth-child(2){fill:#5B3D78;opacity:.8}
.hills path:nth-child(3){fill:var(--cream)}
.sky-brand{position:absolute;top:22px;left:0;right:0;display:flex;justify-content:center;align-items:center;gap:9px;color:#fff;font-family:var(--serif);font-size:26px;letter-spacing:-.3px}
.sky-brand svg{width:28px;height:28px}
.welcome-body{flex:1;padding:6px 24px 0;display:flex;flex-direction:column}
.welcome .title{font-size:35px;line-height:1.1;text-align:center;margin-bottom:14px}
.welcome .sub{text-align:center;font-size:17px;margin-bottom:20px}
.fact{display:flex;gap:14px;align-items:center;padding:16px 18px;border-radius:20px;background:var(--paper);box-shadow:var(--shadow);margin-bottom:10px}
.fact-num{flex:none;font-family:var(--serif);font-size:34px;line-height:1;color:var(--coral-deep);letter-spacing:-1px}
.fact p{font-size:14.5px;line-height:1.45;color:var(--ink-2)}
.fact p small{display:block;color:var(--faint);font-size:12.5px;margin-top:3px}
.trust{display:flex;justify-content:center;flex-wrap:wrap;gap:6px 16px;margin-top:12px;font-size:13px;color:var(--muted)}
.trust span{display:inline-flex;align-items:center;gap:5px}
.trust svg{width:14px;height:14px}
.legal-links{text-align:center;font-size:12px;color:var(--faint);padding:14px 0 6px}
.legal-links a{color:var(--faint);margin:0 6px}

/* Champ */
.field{width:100%;height:64px;padding:0 20px;border-radius:20px;border:0;outline:0;background:var(--paper);font-size:19px;font-weight:600;color:var(--ink);
  box-shadow:0 0 0 2px var(--line);transition:box-shadow .25s}
.field::placeholder{color:#B9B5C4;font-weight:500}
.field:focus{box-shadow:0 0 0 2.5px var(--ink),0 10px 26px rgba(30,33,64,.1)}
.field.err{box-shadow:0 0 0 2.5px var(--coral-deep)}
.field-err{color:var(--coral-deep);font-size:14px;font-weight:600;margin-top:8px;min-height:20px}
.tip{display:flex;gap:12px;align-items:flex-start;margin-top:22px;padding:16px 18px;border-radius:18px;background:var(--lilac-soft);font-size:14.5px;line-height:1.5;color:var(--ink-2)}
.tip svg{flex:none;width:20px;height:20px;color:var(--lilac);margin-top:1px}
.tip small{display:block;color:var(--faint);font-size:12.5px;margin-top:4px}

/* Curseur */
.slider-wrap{margin:34px 0 8px;padding:0 4px}
.slider-val{display:flex;align-items:baseline;justify-content:center;gap:8px;margin-bottom:22px}
.slider-val b{font-family:var(--serif);font-size:74px;line-height:1;color:var(--ink);font-weight:400;letter-spacing:-2px;min-width:1.2em;text-align:center;font-variant-numeric:tabular-nums}
.slider-val span{font-size:16px;color:var(--muted);font-weight:600}
.glasses{display:flex;flex-wrap:wrap;justify-content:center;gap:5px;min-height:56px;margin-bottom:20px}
.glasses i{width:15px;height:22px;border-radius:2px 2px 7px 7px;background:linear-gradient(180deg,rgba(236,106,71,.2) 30%,var(--coral) 30%);animation:pop .25s var(--ease) both}
@keyframes pop{from{transform:scale(0)}}
input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:36px;background:transparent;margin:0;cursor:pointer}
input[type=range]::-webkit-slider-runnable-track{height:10px;border-radius:10px;background:linear-gradient(90deg,var(--coral) var(--p,33%),#E9E1D3 var(--p,33%))}
input[type=range]::-moz-range-track{height:10px;border-radius:10px;background:#E9E1D3}
input[type=range]::-moz-range-progress{height:10px;border-radius:10px;background:var(--coral)}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:34px;height:34px;margin-top:-12px;border-radius:50%;background:#fff;border:3px solid var(--ink);box-shadow:0 6px 16px rgba(30,33,64,.25)}
input[type=range]::-moz-range-thumb{width:28px;height:28px;border-radius:50%;background:#fff;border:3px solid var(--ink);box-shadow:0 6px 16px rgba(30,33,64,.25)}
.slider-scale{display:flex;justify-content:space-between;font-size:13px;color:var(--faint);margin-top:2px}
.slider-msg{margin-top:22px;padding:16px 18px;border-radius:18px;background:var(--paper);box-shadow:var(--shadow);font-size:15.5px;line-height:1.55;text-align:center;min-height:98px;display:flex;align-items:center;justify-content:center}

/* Pastille d'illustration */
.orb{width:60px;height:60px;border-radius:50%;display:grid;place-items:center;margin-bottom:18px;background:var(--peach);color:var(--coral-deep);box-shadow:0 0 0 8px rgba(255,233,210,.5)}
.orb svg{width:28px;height:28px}
.orb.lilac{background:var(--lilac-soft);color:var(--lilac);box-shadow:0 0 0 8px rgba(241,238,251,.6)}

/* Cartes de chiffres */
.cards{display:flex;flex-direction:column;gap:12px;margin:6px 0 16px}
.stat{padding:18px 20px;border-radius:var(--radius);background:var(--paper);box-shadow:var(--shadow)}
.stat b{display:block;font-family:var(--serif);font-weight:400;font-size:30px;line-height:1.15;color:var(--ink);letter-spacing:-.6px;font-variant-numeric:tabular-nums}
.stat b small{font-family:var(--sans);font-size:15px;font-weight:600;color:var(--muted);letter-spacing:0}
.stat>span{display:block;font-size:14.5px;line-height:1.45;color:var(--muted);margin-top:4px}
.callout{padding:16px 18px;border-radius:18px;background:var(--sand);box-shadow:inset 0 0 0 1px #F3E3CD;font-size:15.5px;line-height:1.55;color:#7A4A1E;margin:4px 0 16px}
.callout.lilac{background:var(--lilac-soft);box-shadow:inset 0 0 0 1px #DDD6F3;color:var(--ink-2)}

/* Graphique du rebond */
.chart{margin:4px -4px 18px;padding:16px 14px 10px;border-radius:var(--radius);background:var(--night);color:#fff;position:relative;overflow:hidden}
.chart svg{display:block;width:100%;height:auto}
.chart-legend{display:flex;gap:16px;font-size:12.5px;color:#C9CBE0;margin-bottom:6px;padding:0 4px}
.chart-legend i{display:inline-block;width:10px;height:10px;border-radius:50%;margin-right:6px;vertical-align:-1px}
.draw{stroke-dasharray:var(--len,600);stroke-dashoffset:var(--len,600);animation:draw 2.4s var(--d,.4s) var(--ease) forwards}
@keyframes draw{to{stroke-dashoffset:0}}
.fade-in{opacity:0;animation:rise .5s var(--d,1s) ease forwards}

/* Boucle d'habitude */
.loop{position:relative;width:210px;height:210px;margin:2px auto 20px}
.loop svg{width:100%;height:100%;overflow:visible}
.loop-dot{offset-path:path("M105 20 A85 85 0 1 1 104.9 20");animation:orbit 7s linear infinite;offset-rotate:0deg}
@keyframes orbit{to{offset-distance:100%}}
.loop-center{position:absolute;inset:0;display:grid;place-items:center;text-align:center;font-family:var(--serif);font-size:17px;line-height:1.2;color:var(--ink)}
.loop-steps{display:flex;flex-direction:column;gap:10px}
.lstep{display:flex;gap:14px;padding:15px 16px;border-radius:20px;background:var(--bg);align-items:flex-start}
.lstep i{flex:none;width:34px;height:34px;border-radius:50%;display:grid;place-items:center;font-style:normal;font-weight:800;font-size:15px;color:#fff;background:var(--c)}
.lstep b{display:block;color:var(--ink);font-size:16.5px;line-height:1.3}
.lstep span{display:block;font-size:15px;line-height:1.45;color:var(--ink-2);margin-top:2px}
.lstep small{display:block;font-size:13px;color:var(--muted);font-style:italic;margin-top:3px}

/* Analyse en cours */
.loader{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:20px 0 60px}
.ring{position:relative;width:168px;height:168px;margin-bottom:28px}
.ring svg{width:100%;height:100%;transform:rotate(-90deg)}
.ring circle{fill:none;stroke-width:10;stroke-linecap:round}
.ring .track{stroke:#EBE3D5}
.ring .bar{stroke:url(#gdawn);stroke-dasharray:440;stroke-dashoffset:440;transition:stroke-dashoffset .5s linear}
.ring-num{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-family:var(--serif);font-size:42px;color:var(--ink);font-variant-numeric:tabular-nums;white-space:nowrap}
.ring-num small{font-size:22px;margin-left:4px;color:var(--muted)}
.checks{display:flex;flex-direction:column;gap:12px;text-align:left;margin-top:8px}
.check{display:flex;align-items:center;gap:12px;font-size:16px;font-weight:600;color:var(--faint);transition:color .4s}
.check i{width:24px;height:24px;border-radius:50%;box-shadow:inset 0 0 0 2px #D9D3C6;display:grid;place-items:center;transition:all .4s var(--ease)}
.check i svg{width:13px;height:13px;stroke:#fff;stroke-width:3;fill:none;opacity:0}
.check.done{color:var(--ink)}
.check.done i{background:var(--sage);box-shadow:none}
.check.done i svg{opacity:1}

/* Email : aperçu flouté du score */
.peek{position:relative;margin:4px 0 22px;padding:22px;border-radius:26px;background:linear-gradient(150deg,#2B2760,#1E2140);color:#fff;overflow:hidden;text-align:center}
.peek::after{content:"";position:absolute;right:-50px;top:-50px;width:170px;height:170px;border-radius:50%;background:radial-gradient(circle,rgba(246,165,59,.5),transparent 65%)}
.peek-score{position:relative;z-index:1;display:flex;align-items:baseline;justify-content:center;gap:6px;font-family:var(--serif);line-height:1}
.peek-score b{font-weight:400;font-size:84px;letter-spacing:-2px;filter:blur(14px);user-select:none}
.peek-score span{font-size:24px;color:#C9CBE0}
.peek-rows{position:relative;z-index:1;display:flex;justify-content:center;gap:8px;margin:12px 0 16px;filter:blur(4px)}
.peek-rows i{height:9px;border-radius:9px;background:rgba(255,255,255,.4)}
.peek-lock{position:relative;z-index:1;display:inline-flex;align-items:center;gap:8px;padding:8px 14px;border-radius:999px;background:rgba(255,255,255,.13);font-size:13.5px;font-weight:700;letter-spacing:.2px}
.peek-lock svg{width:16px;height:16px}
.consent{font-size:12.5px;line-height:1.5;color:var(--faint);margin-top:14px;text-align:center}

/* Score */
.score-head{text-align:center;margin-bottom:18px}
.gauge{position:relative;width:200px;height:200px;margin:4px auto 6px}
.gauge svg{width:100%;height:100%;transform:rotate(-90deg)}
.gauge circle{fill:none;stroke-width:12;stroke-linecap:round}
.gauge .track{stroke:#EBE3D5}
.gauge .bar{stroke:url(#gdawn2);stroke-dasharray:534;stroke-dashoffset:534;transition:stroke-dashoffset 1.8s var(--ease)}
.gauge-num{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;gap:4px;font-family:var(--serif);color:var(--ink)}
.gauge-num b{font-size:70px;font-weight:400;letter-spacing:-2px;line-height:1;font-variant-numeric:tabular-nums}
.gauge-num span{font-size:20px;color:var(--faint);margin-top:26px}
.hl{padding:18px 20px;border-radius:var(--radius);background:var(--lilac-soft);box-shadow:inset 0 0 0 1px #DDD6F3;margin-bottom:12px}
.hl.warm{background:var(--sand);box-shadow:inset 0 0 0 1px #F3E3CD}
.hl-top{display:flex;align-items:center;gap:12px;margin-bottom:8px}
.hl-top i{flex:none;width:40px;height:40px;border-radius:50%;display:grid;place-items:center;background:var(--ink);color:#fff;font-style:normal;font-weight:800;font-size:15px}
.hl.warm .hl-top i{background:var(--coral-deep)}
.hl-top b{color:var(--ink);font-size:16.5px;line-height:1.3}
.hl p{font-size:15.5px;line-height:1.55}
.radar{margin:14px auto 0;max-width:360px}
.radar svg{display:block;width:100%;height:auto;overflow:visible}
.radar .shape{transform-origin:180px 165px;transform:scale(0);animation:grow 1.2s .5s var(--ease) forwards}
@keyframes grow{to{transform:scale(1)}}
.radar text{font-family:var(--sans);font-size:12px;fill:var(--muted);font-weight:600}
.radar text.v{font-size:14px;fill:var(--ink);font-weight:800}
.section-label{font-size:12.5px;font-weight:700;letter-spacing:1.3px;text-transform:uppercase;color:var(--faint);text-align:center;margin:26px 0 4px}

/* Plan */
.proj{padding:20px 14px 16px;border-radius:var(--radius);background:linear-gradient(150deg,#2B2760,#1E2140);color:#fff;margin-bottom:16px;position:relative;overflow:hidden}
.proj::after{content:"";position:absolute;left:-40px;bottom:-70px;width:200px;height:200px;border-radius:50%;background:radial-gradient(circle,rgba(236,106,71,.45),transparent 65%)}
.proj h3{font-size:12px;font-weight:700;letter-spacing:1.3px;text-transform:uppercase;color:#FFD9A0;margin:0 6px 14px;position:relative;z-index:1}
.proj-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:4px;position:relative;z-index:1}
.proj-grid div{text-align:center;padding:0 2px}
.proj-grid b{display:block;font-family:var(--serif);font-weight:400;font-size:28px;line-height:1.1;letter-spacing:-.6px;font-variant-numeric:tabular-nums}
.proj-grid div>span{display:block;font-size:12.5px;line-height:1.3;color:#C9CBE0;margin-top:5px}
.traj{padding:16px 16px 8px;border-radius:var(--radius);background:var(--paper);box-shadow:var(--shadow);margin-bottom:16px}
.traj h4{margin:0 0 4px;font-size:14px;color:var(--muted);font-weight:600}
.traj svg{display:block;width:100%;height:auto;overflow:visible}
.traj text{font-family:var(--sans);font-size:11px;fill:var(--faint)}
.week{padding:18px 18px 8px;border-radius:var(--radius);background:var(--paper);box-shadow:var(--shadow);margin-bottom:12px}
.week-head{display:flex;gap:12px;align-items:center;margin-bottom:12px}
.week-head i{flex:none;min-width:44px;height:38px;padding:0 8px;border-radius:12px;background:var(--ink);color:#fff;display:grid;place-items:center;font-style:normal;font-weight:800;font-size:13px}
.week-head b{display:block;color:var(--ink);font-size:15px;letter-spacing:.6px;text-transform:uppercase}
.week-head span{display:block;font-size:13.5px;color:var(--muted)}
.day{display:flex;gap:12px;font-size:15px;line-height:1.5;margin-bottom:10px}
.day em{flex:none;width:52px;font-style:normal;font-weight:700;color:var(--coral-deep);font-size:13.5px;padding-top:1px}
.rows{display:flex;flex-direction:column;gap:10px;margin-bottom:16px}
.row{display:flex;justify-content:space-between;align-items:center;gap:14px;padding:15px 18px;border-radius:18px;background:var(--paper);box-shadow:var(--shadow);font-size:15px}
.row span{color:var(--muted)}
.row b{color:var(--ink);text-align:right;font-size:15.5px}
.tech{padding:20px;border-radius:var(--radius);background:var(--paper);box-shadow:var(--shadow);margin-bottom:12px}
.tech h3{font-size:12px;font-weight:700;letter-spacing:1.3px;text-transform:uppercase;color:var(--coral-deep);margin-bottom:8px}
.tech h4{margin:0 0 8px;font-family:var(--serif);font-weight:400;font-size:23px;color:var(--ink)}
.tech p{font-size:15.5px;line-height:1.58}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.chips span{padding:7px 13px;border-radius:999px;background:var(--sage-soft);color:#1F6B5A;font-size:14px;font-weight:600}

/* Offre */
.pay-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:14px}
.pay-stats div{padding:14px 6px;border-radius:18px;background:var(--sage-soft);text-align:center}
.pay-stats b{display:block;font-family:var(--serif);font-weight:400;font-size:25px;line-height:1.1;color:#1F6B5A;letter-spacing:-.5px}
.pay-stats span{display:block;font-size:12.5px;line-height:1.25;color:var(--ink-2);margin-top:4px}
.versus{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:8px;padding:16px 18px;border-radius:var(--radius);background:var(--sand);box-shadow:inset 0 0 0 1px #F3E3CD;margin-bottom:22px}
.versus small{display:block;font-size:13px;color:#8A5A2B}
.versus b{font-family:var(--serif);font-weight:400;font-size:26px;color:var(--coral-deep);letter-spacing:-.5px}
.versus b span{font-family:var(--sans);font-size:14px;font-weight:600}
.versus div:last-child{text-align:right}
.versus div:last-child small{color:#1F6B5A}
.versus div:last-child b{color:var(--sage)}
.versus i{font-style:normal;font-size:12px;font-weight:800;color:var(--faint);letter-spacing:1px}
.promo{display:flex;align-items:center;gap:12px;padding:14px 16px;border-radius:18px;background:var(--ink);color:#fff;margin-bottom:16px}
.promo i{flex:none;width:40px;height:40px;border-radius:50%;background:rgba(255,217,160,.16);color:#FFD9A0;display:grid;place-items:center;font-style:normal;font-weight:800;font-size:14px}
.promo b{display:block;font-size:15.5px}
.promo span{display:block;font-size:13px;color:#C9CBE0;font-variant-numeric:tabular-nums}
.plans{display:flex;flex-direction:column;gap:12px;margin-bottom:20px}
.plan{position:relative;display:flex;align-items:center;gap:14px;width:100%;text-align:left;padding:18px 18px 18px 16px;border-radius:var(--radius);background:var(--paper);
  box-shadow:0 0 0 1.5px var(--line);transition:box-shadow .25s,background .25s}
.plan.sel{background:#FFFBF6;box-shadow:0 0 0 2.5px var(--coral),0 12px 28px rgba(236,106,71,.16)}
.plan .opt-mark{margin:0}
.plan.sel .opt-mark{background:var(--coral);box-shadow:none}
.plan.sel .opt-mark svg{stroke-dashoffset:0}
.plan-name{flex:1}
.plan-name b{display:block;color:var(--ink);font-size:17.5px}
.plan-name span{display:block;font-size:14px;color:var(--muted);margin-top:2px}
.plan-name s{color:var(--faint)}
.plan-price{text-align:right}
.plan-price b{display:block;font-family:var(--serif);font-weight:400;font-size:23px;color:var(--ink);letter-spacing:-.4px}
.plan-price b small{font-family:var(--sans);font-size:13px;color:var(--muted);font-weight:600}
.plan-price span{display:block;font-size:13px;font-weight:700;color:var(--coral-deep);margin-top:1px}
.plan .badge{background:linear-gradient(135deg,#F0825A,var(--coral-deep))}
.incl{display:flex;flex-direction:column;gap:14px;margin:6px 0 22px}
.incl div{display:flex;gap:14px;align-items:flex-start}
.incl i{flex:none;width:40px;height:40px;border-radius:13px;background:var(--paper);box-shadow:var(--shadow);display:grid;place-items:center;color:var(--coral-deep)}
.incl i svg{width:20px;height:20px}
.incl b{display:block;color:var(--ink);font-size:16px}
.incl span{display:block;font-size:14.5px;line-height:1.45;color:var(--muted)}
.guarantee{display:flex;gap:14px;align-items:center;padding:18px;border-radius:var(--radius);background:var(--sage-soft);margin-bottom:22px}
.guarantee svg{flex:none;width:44px;height:44px;color:var(--sage)}
.guarantee b{display:block;color:#17594A;font-size:16px}
.guarantee span{display:block;font-size:14px;line-height:1.45;color:#2C6B5C}
.faq{border-radius:var(--radius);background:var(--paper);box-shadow:var(--shadow);margin-bottom:16px;overflow:hidden}
.faq details{border-bottom:1px solid var(--line);padding:0 18px}
.faq details:last-child{border-bottom:0}
.faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;gap:12px;align-items:center;padding:16px 0;font-weight:700;color:var(--ink);font-size:15.5px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-size:22px;font-weight:400;color:var(--coral-deep);transition:transform .25s}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq p{font-size:15px;line-height:1.55;padding-bottom:16px;color:var(--ink-2)}
.fine{font-size:12.5px;line-height:1.5;color:var(--faint);text-align:center;margin-bottom:8px}
.fine a{color:var(--faint)}
.seals{display:flex;justify-content:center;flex-wrap:nowrap;gap:12px;font-size:12px;color:var(--muted);margin-top:10px;white-space:nowrap}
.later{display:block;margin:6px auto 0;padding:12px;font-size:15px;color:var(--muted);text-decoration:underline;text-underline-offset:3px}
.seals span::before{content:"✓ ";color:var(--sage);font-weight:800}

/* Paiement : feuille */
.sheet-wrap{position:fixed;inset:0;z-index:60;display:flex;align-items:flex-end;justify-content:center;background:rgba(20,18,46,0);transition:background .35s;pointer-events:none}
.sheet-wrap.open{background:rgba(20,18,46,.56);pointer-events:auto}
.sheet{width:100%;max-width:480px;max-height:94dvh;overflow:auto;-webkit-overflow-scrolling:touch;background:var(--cream);border-radius:28px 28px 0 0;padding:10px 22px calc(22px + env(safe-area-inset-bottom));
  transform:translateY(102%);transition:transform .45s var(--ease)}
.sheet-wrap.open .sheet{transform:none}
@media (min-width:720px){.sheet-wrap{align-items:center}.sheet{border-radius:28px;max-height:90dvh}}
.sheet-grip{width:44px;height:5px;border-radius:5px;background:#DDD5C6;margin:4px auto 14px}
.sheet-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px}
.sheet-head h2{font-family:var(--serif);font-weight:400;font-size:24px;color:var(--ink);letter-spacing:-.3px}
.sheet-x{width:36px;height:36px;border-radius:50%;background:rgba(30,33,64,.07);display:grid;place-items:center;color:var(--ink)}
.sheet-x svg{width:16px;height:16px}
.sum{padding:16px 18px;border-radius:20px;background:var(--paper);box-shadow:var(--shadow);margin-bottom:16px;font-size:15px}
.sum div{display:flex;justify-content:space-between;gap:12px;padding:4px 0}
.sum div b{color:var(--ink)}
.sum .minus{color:var(--sage);font-weight:700}
.sum .total{border-top:1px solid var(--line);margin-top:8px;padding-top:12px;font-size:17px;font-weight:800;color:var(--ink)}
.sum p{font-size:12.5px;line-height:1.5;color:var(--faint);margin-top:8px}
#pay-el{min-height:120px;margin-bottom:16px}
.pay-err{color:var(--coral-deep);font-size:14.5px;font-weight:600;margin:0 0 12px;min-height:0;text-align:center}
.secure{display:flex;justify-content:center;align-items:center;gap:7px;font-size:13px;color:var(--muted);margin-top:12px}
.secure svg{width:14px;height:14px}

/* Pages annexes (merci, espace, légal) */
.page{padding:26px 24px 40px}
.page .title{font-size:31px}
.done-art{position:relative;height:210px;margin:-26px -24px 22px;overflow:hidden;background:linear-gradient(180deg,#473A7A 0%,#A65F8C 40%,#EE8E66 72%,#FFD9A0 100%)}
.done-art .sun{bottom:-40px;animation-duration:2.6s}
.done-check{position:absolute;left:50%;top:50%;width:76px;height:76px;margin:-48px 0 0 -38px;border-radius:50%;background:#fff;display:grid;place-items:center;box-shadow:0 14px 40px rgba(30,33,64,.25);transform:scale(0);animation:grow .6s 1.2s var(--ease) forwards}
.done-check svg{width:36px;height:36px;stroke:var(--sage);stroke-width:3.2;fill:none;stroke-dasharray:40;stroke-dashoffset:40;animation:draw .5s 1.6s ease forwards;--len:40}
.steps{display:flex;flex-direction:column;gap:12px;margin:22px 0}
.step{display:flex;gap:14px;align-items:flex-start;padding:16px 18px;border-radius:20px;background:var(--paper);box-shadow:var(--shadow)}
.step i{flex:none;width:34px;height:34px;border-radius:50%;background:var(--peach);color:var(--coral-deep);display:grid;place-items:center;font-style:normal;font-weight:800}
.step b{display:block;color:var(--ink);font-size:16px;line-height:1.35}
.step span{display:block;font-size:14.5px;line-height:1.5;color:var(--muted);margin-top:2px}
.mailbox{display:inline-block;padding:3px 10px;border-radius:8px;background:var(--lilac-soft);color:var(--ink);font-weight:700;font-size:14.5px}
.legal h1{font-family:var(--serif);font-weight:400;font-size:30px;color:var(--ink);line-height:1.2;margin-bottom:8px}
.legal h2{font-size:18px;color:var(--ink);margin:26px 0 8px}
.legal p,.legal li{font-size:15.5px;line-height:1.65;margin-bottom:10px}
.legal ul{padding-left:20px;margin:0 0 10px}

@media (max-width:359px){.title{font-size:27px}.welcome .title{font-size:31px}.proj-grid b{font-size:24px}}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-delay:0s!important;transition-duration:.01ms!important}
}