/* ═══════════════════════════════════════════════════════════════════
   RELINKING v3 — « Le netlinking en abonnement. Clair. »
   Écrit pour des agences, des freelances et des SEO : ils veulent le prix,
   la qualité, la liste des sites et le délai — sans traduire une métaphore.
   Identité : cobalt + tournesol sur un blanc froid, navy pour les temps forts.
   Bricolage Grotesque (titres) + Instrument Sans (texte). 04/09/2026.
   ═══════════════════════════════════════════════════════════════════ */
:root{
  --bg:#F3F5F9; --card:#FFFFFF; --card2:#EAEEF6; --ink:#0F1B2D; --ink2:#22304A; --mute:#5A6A85; --faint:#8C98AE;
  --line:#DDE3EE; --line2:#C9D2E2;
  --blue:#2E5BFF; --blue-d:#1F44C9; --blue-soft:#E4EAFF; --sun:#FFC53D; --sun-d:#C98F0E; --sun-soft:#FFF3D1;
  --ok:#1DB27A; --ok-soft:#DDF5EB; --no:#E5484D; --no-soft:#FDE4E5;
  --navy:#0F1B2D; --navy2:#16233B; --on-navy:#F2F5FA; --on-navy-mute:#A9B6CC;
  --c-sante:#12A37A; --c-voyage:#0EA5C6; --c-business:#7C5CFF; --c-maison:#F27A2A; --c-media:#D14D9A;
  --maxw:1160px; --r:12px; --r2:20px;
  --sh:0 1px 2px rgba(15,27,45,.05),0 12px 34px -20px rgba(15,27,45,.28);
  --sh2:0 30px 70px -36px rgba(15,27,45,.45);
  --h:'Bricolage Grotesque',system-ui,sans-serif; --b:'Instrument Sans',system-ui,sans-serif;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --bg:#0B1220; --card:#121B2E; --card2:#182338; --ink:#EEF2F8; --ink2:#D5DDEA; --mute:#9AA8BF; --faint:#6F7E98;
  --line:#22304A; --line2:#2E3E5C; --blue:#5B80FF; --blue-d:#3D63E6; --blue-soft:#1A2542; --sun:#FFC53D; --sun-d:#FFD670; --sun-soft:#2B2410;
  --ok:#2FD08F; --ok-soft:#12362A; --no:#FF6B6F; --no-soft:#3A1A1C; --navy:#060B14; --navy2:#0E1728;
  --sh:0 0 0 1px rgba(255,255,255,.04); --sh2:0 30px 70px -36px rgba(0,0,0,.8);
}}
:root[data-theme="dark"]{
  --bg:#0B1220; --card:#121B2E; --card2:#182338; --ink:#EEF2F8; --ink2:#D5DDEA; --mute:#9AA8BF; --faint:#6F7E98;
  --line:#22304A; --line2:#2E3E5C; --blue:#5B80FF; --blue-d:#3D63E6; --blue-soft:#1A2542; --sun:#FFC53D; --sun-d:#FFD670; --sun-soft:#2B2410;
  --ok:#2FD08F; --ok-soft:#12362A; --no:#FF6B6F; --no-soft:#3A1A1C; --navy:#060B14; --navy2:#0E1728;
  --sh:0 0 0 1px rgba(255,255,255,.04); --sh2:0 30px 70px -36px rgba(0,0,0,.8);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}}
body{margin:0;background:var(--bg);color:var(--ink);font:400 17px/1.6 var(--b);-webkit-font-smoothing:antialiased;overflow-x:hidden}
img,svg{max-width:100%;display:block}
a{color:inherit}
h1,h2,h3,h4,.btn,.num,.eyebrow,th,.mono{font-family:var(--h)}
:focus-visible{outline:3px solid var(--sun);outline-offset:3px;border-radius:6px}
::selection{background:var(--sun);color:var(--navy)}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 22px}
.wrap-s{max-width:800px;margin:0 auto;padding:0 22px}
.tab{font-variant-numeric:tabular-nums}

/* ── barre ─────────────────────────────────────────────── */
.bar{position:sticky;top:0;z-index:50;background:color-mix(in srgb,var(--bg) 84%,transparent);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
.bar-in{display:flex;align-items:center;gap:22px;height:70px}
.logo{display:flex;align-items:center;gap:11px;text-decoration:none;color:var(--ink);font:800 22px/1 var(--h);letter-spacing:-.03em}
.logo svg{width:36px;height:36px}
.logo em{font-style:normal;color:var(--blue)}
.logo small{font:600 11px/1 var(--b);color:var(--mute);letter-spacing:.06em;margin-left:2px;align-self:flex-end;margin-bottom:2px}
.bar nav{margin-left:auto;display:flex;align-items:center;gap:2px;font:600 14.5px/1 var(--b)}
.bar nav a{color:var(--mute);text-decoration:none;padding:10px 13px;border-radius:99px;transition:background .2s,color .2s}
.bar nav a:hover{background:var(--card2);color:var(--ink)}
.bar nav a.on{color:var(--ink);background:var(--card2)}
.bar nav a.btn{color:var(--navy);background:var(--sun);padding:12px 18px;margin-left:8px;font-size:14px}
.bar nav a.btn:hover{background:var(--sun);color:var(--navy)}
@media(max-width:940px){.bar nav a.opt{display:none}}

/* ── boutons ─────────────────────────────────────────────── */
.btn{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:10px;padding:16px 26px;border-radius:99px;border:1px solid transparent;cursor:pointer;
  font:700 15.5px/1 var(--h);text-decoration:none;color:#fff;background:var(--blue);overflow:hidden;isolation:isolate;
  transition:transform .2s cubic-bezier(.2,.8,.2,1),box-shadow .2s,background .2s;box-shadow:0 12px 28px -14px rgba(46,91,255,.7)}
.btn:hover{transform:translateY(-2px);background:var(--blue-d)}
.btn:active{transform:translateY(0)}
.btn-sun{background:var(--sun);color:var(--navy);box-shadow:0 12px 28px -14px rgba(255,197,61,.8)}
.btn-sun:hover{background:var(--sun);filter:brightness(1.04)}
.btn-2{background:var(--card);color:var(--ink);border-color:var(--line2);box-shadow:none}
.btn-2:hover{background:var(--card);border-color:var(--blue);color:var(--blue)}
.btn-s{padding:12px 18px;font-size:14px}
.btn-l{padding:19px 32px;font-size:17px}
.btn .arr{display:inline-block;transition:transform .2s}.btn:hover .arr{transform:translateX(4px)}
.on-navy .btn-2{background:transparent;color:#fff;border-color:rgba(255,255,255,.3)}
.on-navy .btn-2:hover{border-color:var(--sun);color:var(--sun)}

/* ── titres ─────────────────────────────────────────────── */
.eyebrow{display:inline-flex;align-items:center;gap:9px;font:700 12px/1 var(--h);letter-spacing:.12em;text-transform:uppercase;color:var(--blue);margin:0 0 14px}
.eyebrow::before{content:'';width:10px;height:10px;border-radius:3px;background:var(--sun)}
h1{font:800 clamp(38px,5.8vw,66px)/1.02 var(--h);letter-spacing:-.035em;margin:0 0 20px;text-wrap:balance}
h1 .em{color:var(--blue)}
h1 .sun{background:linear-gradient(transparent calc(100% - .56em),var(--sun) calc(100% - .56em) calc(100% - .24em),transparent calc(100% - .24em));padding:0 .06em .08em}
h2{font:800 clamp(28px,3.8vw,42px)/1.08 var(--h);letter-spacing:-.03em;margin:0 0 14px;text-wrap:balance}
h3{font:700 19px/1.3 var(--h);letter-spacing:-.01em;margin:0 0 8px}
.lead{font:400 clamp(17px,1.9vw,20px)/1.6 var(--b);color:var(--mute);max-width:60ch;margin:0 0 28px}
.lead b,p b{color:var(--ink);font-weight:700}
section{padding:88px 0;position:relative}
.alt{background:var(--card)}
.on-navy{background:var(--navy);color:var(--on-navy)}
.on-navy h2,.on-navy h3{color:#fff}.on-navy .lead,.on-navy p{color:var(--on-navy-mute)}.on-navy p b{color:#fff}.on-navy .eyebrow{color:var(--sun)}
.rv{opacity:1;transform:none}
.js .rv{opacity:0;transform:translateY(18px);transition:opacity .7s cubic-bezier(.2,.8,.2,1),transform .7s cubic-bezier(.2,.8,.2,1)}
.js .rv.in{opacity:1;transform:none}
.js .rv.d1{transition-delay:.08s}.js .rv.d2{transition-delay:.16s}.js .rv.d3{transition-delay:.24s}
.mt{margin-top:36px}.center{text-align:center}

/* ── héros + configurateur ─────────────────────────────── */
.hero{padding:58px 0 30px;overflow:hidden;background:radial-gradient(ellipse 60% 55% at 85% -10%,var(--blue-soft),transparent 60%),radial-gradient(ellipse 40% 40% at 0% 100%,var(--sun-soft),transparent 60%)}
.hero-top{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:40px;align-items:end;margin-bottom:34px}
@media(max-width:900px){.hero-top{grid-template-columns:1fr;gap:18px}}
.pill{display:inline-flex;align-items:center;gap:9px;background:var(--card);border:1px solid var(--line);color:var(--mute);font:700 12px/1 var(--h);letter-spacing:.08em;text-transform:uppercase;padding:9px 14px;border-radius:99px;margin-bottom:22px}
.pill i{width:8px;height:8px;border-radius:50%;background:var(--ok);animation:pulse 2s infinite}
@keyframes pulse{0%,100%{box-shadow:0 0 0 3px color-mix(in srgb,var(--ok) 30%,transparent)}50%{box-shadow:0 0 0 7px transparent}}
.promesses{display:grid;gap:10px;font-size:15px;color:var(--mute);margin:0;padding:0;list-style:none}
.promesses li{display:flex;gap:10px;align-items:flex-start}
.promesses li::before{content:'';flex:0 0 22px;height:22px;border-radius:50%;background:var(--ok-soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231DB27A' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center/13px no-repeat;margin-top:1px}
.promesses b{color:var(--ink)}

.config{background:var(--card);border:1px solid var(--line);border-radius:26px;box-shadow:var(--sh2);display:grid;grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);overflow:hidden}
@media(max-width:940px){.config{grid-template-columns:1fr}}
.cf-l{padding:30px 32px 28px;border-right:1px solid var(--line)}
@media(max-width:940px){.cf-l{border-right:0;border-bottom:1px solid var(--line)}}
.cf-t{font:800 20px/1.2 var(--h);letter-spacing:-.02em;margin:0 0 4px}
.cf-s{font-size:14px;color:var(--mute);margin:0 0 20px}
.cf-lab{display:flex;justify-content:space-between;align-items:baseline;font:700 13px/1 var(--h);letter-spacing:.1em;text-transform:uppercase;color:var(--mute);margin:20px 0 10px}
.cf-lab b{font:800 14px/1 var(--h);letter-spacing:0;text-transform:none;color:var(--ink)}
.themes{display:flex;flex-wrap:wrap;gap:8px}
.themes button{display:inline-flex;align-items:center;gap:8px;padding:9px 13px 9px 9px;border-radius:99px;border:1px solid var(--line2);background:var(--card);color:var(--ink);font:600 13.5px/1 var(--b);cursor:pointer;transition:border-color .2s,background .2s,transform .15s}
.themes button i{width:14px;height:14px;border-radius:4px;background:var(--tc)}
.themes button:hover{transform:translateY(-1px);border-color:var(--tc)}
.themes button.on{border-color:var(--tc);background:color-mix(in srgb,var(--tc) 12%,var(--card));box-shadow:0 0 0 2px color-mix(in srgb,var(--tc) 35%,transparent)}
.niveaux{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.niveaux button{position:relative;border:1px solid var(--line2);background:var(--card);border-radius:14px;padding:12px 10px 10px;cursor:pointer;text-align:left;color:var(--ink);transition:border-color .2s,background .2s,transform .15s}
.niveaux button:hover{transform:translateY(-1px)}
.niveaux button b{display:block;font:800 22px/1 var(--h);letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.niveaux button small{display:block;font:600 12px/1.2 var(--b);color:var(--mute);margin-top:5px}
.niveaux button em{position:absolute;top:-9px;right:10px;font:700 10px/1 var(--h);letter-spacing:.08em;text-transform:uppercase;font-style:normal;background:var(--sun);color:var(--navy);padding:4px 7px;border-radius:99px}
.niveaux button.on{border-color:var(--blue);background:var(--blue-soft);box-shadow:0 0 0 2px color-mix(in srgb,var(--blue) 35%,transparent)}
.cf-url{display:flex;gap:8px}
.cf-url input{flex:1;min-width:0;padding:12px 14px;border:1px solid var(--line2);border-radius:12px;font:400 15px/1.3 var(--b);background:var(--card);color:var(--ink)}
.cf-url input:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 3px color-mix(in srgb,var(--blue) 22%,transparent)}
.cf-r{padding:30px 32px 28px;background:linear-gradient(180deg,var(--card),var(--card2));display:flex;flex-direction:column;gap:18px}
.tableau{display:grid;grid-template-columns:repeat(12,1fr);gap:6px}
.tableau i{aspect-ratio:1/1;border-radius:7px;background:var(--line);position:relative;transition:background .35s,transform .35s,box-shadow .35s;font:700 9px/1 var(--h);display:grid;place-items:center;color:transparent}
.tableau i.on{background:var(--tc);color:#fff;transform:scale(1.04);box-shadow:0 6px 14px -8px var(--tc)}
.tableau i.on.pop{animation:tpop .45s cubic-bezier(.2,.8,.2,1)}
@keyframes tpop{0%{transform:scale(.4)}60%{transform:scale(1.18)}100%{transform:scale(1.04)}}
.tableau i.neutre{background:color-mix(in srgb,var(--tc) 18%,var(--line))}
.cf-leg{display:flex;gap:16px;flex-wrap:wrap;font-size:12.5px;color:var(--mute)}
.cf-leg span{display:inline-flex;align-items:center;gap:6px}
.cf-leg i{width:12px;height:12px;border-radius:3px;background:var(--tc)}.cf-leg i.n{background:color-mix(in srgb,var(--tc) 18%,var(--line))}
.jauges{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.jauge{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:12px 14px}
.jauge small{display:block;font:700 10.5px/1 var(--h);letter-spacing:.12em;text-transform:uppercase;color:var(--mute)}
.jauge b{display:block;font:800 24px/1.1 var(--h);letter-spacing:-.02em;margin-top:6px;font-variant-numeric:tabular-nums}
.jauge .bar-j{height:6px;border-radius:3px;background:var(--line);margin-top:8px;overflow:hidden}
.jauge .bar-j i{display:block;height:100%;width:0;background:var(--tc);transition:width .7s cubic-bezier(.2,.8,.2,1)}
.ticket{background:var(--navy);color:#fff;border-radius:18px;padding:20px 22px;display:grid;grid-template-columns:1fr auto;gap:8px 16px;align-items:center;position:relative;overflow:hidden}
.ticket::after{content:'';position:absolute;right:-30px;top:-30px;width:120px;height:120px;border-radius:50%;background:radial-gradient(circle,color-mix(in srgb,var(--sun) 35%,transparent),transparent 70%)}
.ticket small{font:700 11px/1 var(--h);letter-spacing:.12em;text-transform:uppercase;color:var(--on-navy-mute);display:block}
.ticket .prix{font:800 46px/1 var(--h);letter-spacing:-.04em;color:var(--sun);font-variant-numeric:tabular-nums}
.ticket .prix i{font:600 16px/1 var(--b);font-style:normal;color:var(--on-navy-mute);letter-spacing:0;margin-left:4px}
.ticket .det{grid-column:1/-1;font-size:14px;color:var(--on-navy-mute);line-height:1.5;margin:0}
.ticket .det b{color:#fff}
.ticket .btn{grid-column:1/-1;width:100%;margin-top:6px}
.ticket .pl{text-align:right;font:800 18px/1.1 var(--h);color:#fff}.ticket .pl small{margin-bottom:4px}
.hero-kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:30px}
@media(max-width:900px){.hero-kpis{grid-template-columns:repeat(2,1fr)}}
.kp{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:18px 20px}
.kp .num{display:block;font:800 30px/1 var(--h);letter-spacing:-.03em;color:var(--ink);font-variant-numeric:tabular-nums}
.kp span{display:block;font-size:13.5px;color:var(--mute);margin-top:6px;line-height:1.4}
.kp .num.sunc{color:var(--sun-d)}

/* ── logos / preuves ─────────────────────────────────────── */
.grille3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.grille2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
@media(max-width:900px){.grille3,.grille2{grid-template-columns:1fr}}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r2);padding:26px 28px;box-shadow:var(--sh)}
.card i.ic{display:inline-grid;place-items:center;width:44px;height:44px;border-radius:12px;background:var(--blue-soft);font-style:normal;font-size:20px;margin-bottom:14px}
.card p{margin:0;color:var(--mute);font-size:15.5px;line-height:1.6}

/* ── packs ─────────────────────────────────────────────────── */
.packs{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:16px}
.pk{background:var(--card);border:1px solid var(--line);border-radius:var(--r2);padding:24px 26px 22px;box-shadow:var(--sh);border-top:5px solid var(--tc);display:flex;flex-direction:column;gap:12px;transition:transform .25s,box-shadow .25s}
.pk:hover{transform:translateY(-5px);box-shadow:var(--sh2)}
.pk h3{margin:0;display:flex;align-items:center;gap:10px}
.pk h3 i{width:14px;height:14px;border-radius:4px;background:var(--tc)}
.pk .st{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.pk .st div{background:var(--card2);border-radius:10px;padding:10px 10px}
.pk .st b{display:block;font:800 20px/1 var(--h);font-variant-numeric:tabular-nums}
.pk .st small{display:block;font-size:11px;color:var(--mute);margin-top:4px;line-height:1.3}
.pk p{margin:0;color:var(--mute);font-size:14.5px;line-height:1.55}
.pk ul{margin:0;padding:0;list-style:none;display:flex;flex-wrap:wrap;gap:6px}
.pk ul li{font:600 12px/1 var(--b);padding:6px 9px;border-radius:99px;background:color-mix(in srgb,var(--tc) 10%,var(--card));color:var(--ink);border:1px solid color-mix(in srgb,var(--tc) 30%,transparent)}
.pk .aut{display:inline-flex;align-items:center;gap:6px;font:700 12px/1 var(--h);letter-spacing:.08em;text-transform:uppercase;color:var(--tc)}
.pk .btn{margin-top:auto;align-self:flex-start}

/* ── la règle 1 pour 5 ─────────────────────────────────────── */
.regle{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:40px;align-items:center}
@media(max-width:900px){.regle{grid-template-columns:1fr}}
.pile{display:grid;grid-template-columns:repeat(5,1fr);gap:10px}
.pile div{aspect-ratio:3/4;border-radius:12px;background:var(--card2);border:1px solid var(--line);display:grid;place-items:center;text-align:center;padding:10px;font:600 12px/1.3 var(--b);color:var(--mute);position:relative;overflow:hidden}
.pile div::before{content:'';position:absolute;left:10px;right:10px;top:12px;height:5px;border-radius:3px;background:var(--line2);box-shadow:0 10px 0 var(--line2),0 20px 0 var(--line2),0 30px 0 var(--line2)}
.pile div span{position:relative;margin-top:36px}
.pile div.lien{background:var(--blue-soft);border-color:var(--blue);color:var(--ink)}
.pile div.lien::after{content:'';position:absolute;right:10px;bottom:10px;width:14px;height:14px;border-radius:50%;background:var(--sun)}

/* ── mission : 4 étapes ─────────────────────────────────────── */
.mission{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;position:relative;counter-reset:mi}
@media(max-width:900px){.mission{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.mission{grid-template-columns:1fr}}
.mi{counter-increment:mi;background:var(--navy2);border:1px solid rgba(255,255,255,.08);border-radius:var(--r2);padding:24px 24px 22px;position:relative}
.mi::before{content:counter(mi);display:inline-grid;place-items:center;width:38px;height:38px;border-radius:50%;background:rgba(255,255,255,.08);color:#fff;font:800 15px/1 var(--h);margin-bottom:14px;transition:background .4s,color .4s}
.mi.fait::before{background:var(--sun);color:var(--navy)}
.mi h3{color:#fff}.mi p{margin:0;font-size:14.5px;line-height:1.6}
.mi .dur{position:absolute;top:22px;right:22px;font:700 11px/1 var(--h);letter-spacing:.1em;text-transform:uppercase;color:var(--sun)}
.mi-bar{height:6px;border-radius:3px;background:rgba(255,255,255,.1);margin:0 0 22px;overflow:hidden}
.mi-bar i{display:block;height:100%;width:0;background:var(--sun);transition:width .8s cubic-bezier(.2,.8,.2,1)}

/* ── comparatif ───────────────────────────────────────────── */
.tw{overflow-x:auto;border:1px solid var(--line);border-radius:var(--r2);background:var(--card);box-shadow:var(--sh)}
table{width:100%;border-collapse:collapse;font-size:15px;min-width:640px}
th,td{padding:15px 18px;text-align:left;border-bottom:1px solid var(--line);vertical-align:top}
th{font:700 13px/1.3 var(--h);letter-spacing:.06em;text-transform:uppercase;color:var(--mute);background:var(--card2)}
th.nous{color:var(--blue)}
td.nous{background:var(--blue-soft);font-weight:600}
tr:last-child td{border-bottom:0}
td .no{color:var(--no);font-weight:700}td .ok{color:var(--ok);font-weight:700}

/* ── tarifs ───────────────────────────────────────────────── */
.tarifs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;align-items:stretch}
@media(max-width:900px){.tarifs{grid-template-columns:1fr}}
.tf{background:var(--card);border:1px solid var(--line);border-radius:24px;padding:28px 28px 26px;box-shadow:var(--sh);display:flex;flex-direction:column;position:relative}
.tf.phare{border-color:var(--blue);box-shadow:0 0 0 3px color-mix(in srgb,var(--blue) 25%,transparent),var(--sh2);transform:translateY(-6px)}
.tf .niv{font:700 12px/1 var(--h);letter-spacing:.12em;text-transform:uppercase;color:var(--mute)}
.tf .phare-tag{position:absolute;top:-13px;left:26px;background:var(--sun);color:var(--navy);font:800 11px/1 var(--h);letter-spacing:.1em;text-transform:uppercase;padding:7px 11px;border-radius:99px}
.tf h3{font-size:26px;margin:8px 0 2px}
.tf .p{font:800 54px/1 var(--h);letter-spacing:-.04em;margin:10px 0 2px;font-variant-numeric:tabular-nums}
.tf .p i{font:600 15px/1 var(--b);font-style:normal;color:var(--mute);letter-spacing:0;margin-left:4px}
.tf .pl{font:700 14px/1.3 var(--h);color:var(--blue);margin:0 0 14px}
.tf .pour{font-size:14.5px;color:var(--mute);margin:0 0 16px;line-height:1.55;min-height:3.2em}
.tf ul{margin:0 0 20px;padding:0;list-style:none;font-size:14.5px;line-height:1.5;display:grid;gap:8px}
.tf ul li{padding-left:26px;position:relative;color:var(--ink2)}
.tf ul li::before{content:'';position:absolute;left:0;top:3px;width:16px;height:16px;border-radius:50%;background:var(--ok-soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231DB27A' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center/10px no-repeat}
.tf ul li.plus::before{background:var(--sun-soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23C98F0E' stroke-width='3.4' stroke-linecap='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E") center/10px no-repeat}
.tf .btn{margin-top:auto;width:100%}
.tarif-note{font-size:14px;color:var(--mute);text-align:center;max-width:70ch;margin:22px auto 0;line-height:1.6}

/* ── garanties ─────────────────────────────────────────────── */
.garanties{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:14px}
.ga{background:var(--card);border:1px solid var(--line);border-radius:var(--r2);padding:22px 24px;display:flex;gap:14px;align-items:flex-start}
.ga i{flex:0 0 40px;height:40px;border-radius:12px;display:grid;place-items:center;background:var(--sun-soft);font-style:normal;font-size:18px}
.ga b{display:block;font:700 16px/1.3 var(--h);margin-bottom:4px}
.ga p{margin:0;font-size:14px;color:var(--mute);line-height:1.55}

/* ── FAQ ───────────────────────────────────────────────────── */
.faq details{border:1px solid var(--line);border-radius:var(--r2);background:var(--card);margin-bottom:10px;overflow:hidden;transition:border-color .2s}
.faq details[open]{border-color:var(--blue)}
.faq summary{cursor:pointer;list-style:none;padding:18px 58px 18px 22px;position:relative;font:700 16.5px/1.35 var(--h)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:'+';position:absolute;right:16px;top:13px;width:30px;height:30px;border-radius:50%;border:1px solid var(--line2);display:grid;place-items:center;font:400 20px/1 var(--b);color:var(--mute);transition:transform .25s,background .25s}
.faq details[open] summary::after{transform:rotate(45deg);background:var(--blue);color:#fff;border-color:var(--blue)}
.faq .rep{padding:0 22px 20px;color:var(--mute);font-size:16px;line-height:1.7}
.faq .rep p{margin:0 0 12px}.faq .rep p:last-child{margin:0}

/* ── final ─────────────────────────────────────────────────── */
.final{background:var(--navy);color:#fff;border-radius:26px;padding:54px 46px;box-shadow:var(--sh2);display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);gap:34px;align-items:center;position:relative;overflow:hidden}
.final::before{content:'';position:absolute;inset:-40%;background:conic-gradient(from 0deg,transparent 0 70%,color-mix(in srgb,var(--sun) 25%,transparent) 85%,transparent);animation:tourne 18s linear infinite;pointer-events:none}
@keyframes tourne{to{transform:rotate(360deg)}}
.final>*{position:relative}
@media(max-width:900px){.final{grid-template-columns:1fr;padding:40px 26px}}
.final h2{color:#fff}.final .lead{color:rgba(255,255,255,.82)}
.final .cta{display:flex;gap:12px;flex-wrap:wrap}
.final .mini{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);border-radius:18px;padding:22px}
.final .mini b{display:block;font:800 15px/1.3 var(--h);color:var(--sun);margin-bottom:8px}
.final .mini ul{margin:0;padding:0 0 0 18px;font-size:14.5px;line-height:1.7;color:rgba(255,255,255,.85)}

/* ── formulaire (abonnement) ───────────────────────────────── */
.form{background:var(--card);border:1px solid var(--line);border-radius:var(--r2);padding:28px 30px;box-shadow:var(--sh)}
.champ{margin-bottom:18px}
.champ label{display:block;font:700 14px/1.4 var(--h);margin-bottom:7px}
.champ label span{font-weight:500;color:var(--faint);font-size:12.5px;margin-left:6px}
.form input[type=text],.form input[type=email],.form input[type=url],.form textarea,.form select{width:100%;padding:13px 15px;border:1px solid var(--line2);border-radius:12px;font:400 15.5px/1.4 var(--b);background:var(--card);color:var(--ink)}
.form input:focus,.form textarea:focus,.form select:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 3px color-mix(in srgb,var(--blue) 22%,transparent)}
.form textarea{min-height:90px;resize:vertical}
.form .btn{width:100%}
.form .aide{font-size:12.5px;color:var(--faint);margin-top:10px;line-height:1.5}
.hp{position:absolute;left:-9999px}
.alerte{border-radius:var(--r);padding:14px 18px;margin-bottom:16px;font-size:15px;line-height:1.6;border:1px solid var(--line)}
.alerte-ok{border-color:var(--ok);background:var(--ok-soft)}
.alerte-ko{border-color:var(--no);background:var(--no-soft)}
.choix{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:8px}
.choix label{border:1px solid var(--line2);border-radius:12px;padding:12px 12px;cursor:pointer;display:flex;flex-direction:column;gap:4px;font:600 14px/1.3 var(--b);position:relative;background:var(--card)}
.choix label i{width:12px;height:12px;border-radius:3px;background:var(--tc,var(--blue))}
.choix label small{font-size:12px;color:var(--mute);font-weight:500}
.choix input{position:absolute;opacity:0}
.choix label:has(input:checked){border-color:var(--blue);background:var(--blue-soft);box-shadow:0 0 0 2px color-mix(in srgb,var(--blue) 35%,transparent)}
.recap{background:var(--navy);color:#fff;border-radius:var(--r2);padding:24px 26px;position:sticky;top:90px}
.recap small{font:700 11px/1 var(--h);letter-spacing:.12em;text-transform:uppercase;color:var(--on-navy-mute);display:block}
.recap .p{font:800 44px/1 var(--h);letter-spacing:-.04em;color:var(--sun);margin:6px 0 10px}
.recap .p i{font:600 15px/1 var(--b);font-style:normal;color:var(--on-navy-mute);margin-left:4px}
.recap dl{display:grid;grid-template-columns:1fr auto;gap:8px 14px;margin:14px 0 0;padding-top:14px;border-top:1px solid rgba(255,255,255,.14);font-size:14px}
.recap dt{color:var(--on-navy-mute);margin:0}.recap dd{margin:0;text-align:right;font-weight:700;font-variant-numeric:tabular-nums}
.deux-col{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(280px,.7fr);gap:26px;align-items:start}
@media(max-width:900px){.deux-col{grid-template-columns:1fr}.recap{position:static}}

/* ── prose (légal) ─────────────────────────────────────────── */
.prose h2{font-size:clamp(26px,3.4vw,36px)}
.prose h3{margin-top:30px}
.prose p,.prose li{color:var(--ink2);font-size:16.5px;line-height:1.75}
.prose ul{padding-left:22px}
.cta{display:flex;gap:12px;flex-wrap:wrap}

/* ── pied ─────────────────────────────────────────────────── */
footer{padding:44px 0 60px;border-top:1px solid var(--line);font-size:14px;color:var(--mute)}
.pied{display:flex;gap:26px;flex-wrap:wrap;align-items:flex-start}
.pied nav{display:flex;gap:18px;flex-wrap:wrap;margin-left:auto}
.pied a{color:var(--mute);text-decoration:none}.pied a:hover{color:var(--blue)}
.pied .maj{font-size:13px;margin-top:6px;color:var(--faint)}
.pied .px{font:800 18px/1 var(--h);color:var(--ink)}
.pied-cul{display:flex;gap:4px;margin-top:10px}.pied-cul i{width:18px;height:6px;border-radius:3px}

/* ── toast ───────────────────────────────────────────────── */
#toast{position:fixed;left:50%;bottom:22px;z-index:85;transform:translate(-50%,20px);opacity:0;pointer-events:none;max-width:min(92vw,520px);background:var(--navy);color:#fff;border-radius:14px;padding:12px 18px;font:500 14.5px/1.45 var(--b);box-shadow:var(--sh2);transition:transform .35s cubic-bezier(.2,.8,.2,1),opacity .35s}
#toast.on{transform:translate(-50%,0);opacity:1}
#toast b{color:var(--sun)}
h1 .sun{-webkit-box-decoration-break:clone;box-decoration-break:clone}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) h1 .sun{background:linear-gradient(transparent calc(100% - .56em),color-mix(in srgb,var(--sun) 40%,transparent) calc(100% - .56em) calc(100% - .24em),transparent calc(100% - .24em))}}
:root[data-theme="dark"] h1 .sun{background:linear-gradient(transparent calc(100% - .56em),color-mix(in srgb,var(--sun) 40%,transparent) calc(100% - .56em) calc(100% - .24em),transparent calc(100% - .24em))}
.bar nav a.btn{white-space:nowrap}
@media(max-width:560px){.bar nav a.btn{font-size:13px;padding:11px 14px}.logo small{display:none}}