/* TARIFIA — identité visuelle « Émeraude & Or », tirée du logo (anneau orange, cœur vert, T doré). Chargée en dernier. */
@font-face{font-family:"Poppins";font-weight:500;font-display:swap;src:url(/fonts/poppins-500.woff2) format("woff2")}
@font-face{font-family:"Poppins";font-weight:600;font-display:swap;src:url(/fonts/poppins-600.woff2) format("woff2")}
@font-face{font-family:"Poppins";font-weight:700;font-display:swap;src:url(/fonts/poppins-700.woff2) format("woff2")}
@font-face{font-family:"Poppins";font-weight:800;font-display:swap;src:url(/fonts/poppins-800.woff2) format("woff2")}
@font-face{font-family:"Inter";font-weight:400;font-display:swap;src:url(/fonts/inter-400.woff2) format("woff2")}
@font-face{font-family:"Inter";font-weight:500;font-display:swap;src:url(/fonts/inter-500.woff2) format("woff2")}
@font-face{font-family:"Inter";font-weight:600;font-display:swap;src:url(/fonts/inter-600.woff2) format("woff2")}
@font-face{font-family:"Inter";font-weight:700;font-display:swap;src:url(/fonts/inter-700.woff2) format("woff2")}

:root{
  --b-em-900:#04291a;--b-em-800:#063521;--b-em-700:#08452b;--b-em-600:#0b5d3b;--b-em-500:#10794c;--b-em-400:#1a9a61;
  --b-or-700:#b45f00;--b-or-600:#d97400;--b-or-500:#f08c00;--b-or-400:#ffa31a;--b-gold:#ffc35c;--b-gold-2:#ffdc93;
  --b-ivory:#fdf8ee;--b-ink:#0d1f17;
  --b-ring:linear-gradient(135deg,#ffb238 0%,#f08c00 45%,#c76a00 100%);
  --b-gold-grad:linear-gradient(180deg,#ffe2a1 0%,#ffc35c 45%,#e89a1c 100%);
  --b-card:linear-gradient(160deg,rgb(255 255 255/.075),rgb(255 255 255/.02));
  --b-line:rgb(255 195 92/.28);
  --b-shadow:0 18px 40px -18px rgb(0 0 0/.55),0 2px 0 rgb(0 0 0/.12);
  --b-r:18px;
}

/* ---------- Base ---------- */
html body{font-family:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;letter-spacing:.005em}
html body :is(h1,h2,h3,h4,.x-welcome,.head__eyebrow,.hero__eyebrow,.x-brand,.x-count,.g-card__title){font-family:"Poppins","Inter",system-ui,sans-serif;letter-spacing:-.01em}
html body :is(h1,h2){font-weight:800}
html body :is(h3,h4){font-weight:700}

/* Fond sombre : émeraude profonde avec halos orange/or comme l'anneau du logo */
:root[data-theme="dark"],:root[data-theme="dark"] body{background-color:var(--b-em-800)!important}
:root[data-theme="dark"] body{background:
  radial-gradient(900px 520px at 85% -8%,rgb(240 140 0/.20),transparent 60%),
  radial-gradient(700px 600px at -10% 30%,rgb(26 154 97/.28),transparent 60%),
  radial-gradient(900px 700px at 50% 110%,rgb(255 195 92/.10),transparent 60%),
  linear-gradient(180deg,var(--b-em-700) 0%,var(--b-em-800) 45%,var(--b-em-900) 100%) fixed!important;color:var(--b-ivory)}
:root[data-theme="dark"] .x-3d-bg{opacity:.55}

/* Fond clair : ivoire chaud, accents émeraude et or */
:root[data-theme="light"] body{background:
  radial-gradient(800px 480px at 90% -10%,rgb(240 140 0/.12),transparent 60%),
  radial-gradient(700px 600px at -10% 35%,rgb(16 121 76/.10),transparent 60%),
  linear-gradient(180deg,#fffaf1,#f7efe0) fixed!important;color:var(--b-ink)}

/* ---------- En-tête ---------- */
html body .nav.glass{background:linear-gradient(180deg,rgb(6 53 33/.92),rgb(4 41 26/.88))!important;-webkit-backdrop-filter:blur(14px) saturate(1.3);backdrop-filter:blur(14px) saturate(1.3);
  box-shadow:0 1px 0 rgb(255 195 92/.35),0 10px 30px -14px rgb(0 0 0/.6)!important;border-bottom:0!important}
html body .nav.glass::after{content:"";position:absolute;left:0;right:0;bottom:-2px;height:2px;background:var(--b-ring);opacity:.95}
html body .x-brand{gap:10px;color:#fff!important;font-weight:800;font-size:1.12rem;letter-spacing:.06em}
html body .x-brand__mark{width:34px!important;height:34px!important;border-radius:50%!important;background:url(/logo-pdf.jpg) center/cover no-repeat!important;
  box-shadow:0 0 0 2px rgb(255 195 92/.55),0 6px 14px -4px rgb(240 140 0/.6)!important}
html body .x-brand__mark::before,html body .x-brand__mark::after{display:none!important}
html body .x-brand>span:last-child{background:var(--b-gold-grad);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
html body .nav.glass .seg a{color:rgb(253 248 238/.82)!important;border-radius:999px;font-weight:600}
html body .nav.glass .seg a[aria-current="true"]{background:var(--b-ring)!important;color:#1a0f00!important;box-shadow:0 4px 12px -4px rgb(240 140 0/.7)}

/* ---------- Boutons ---------- */
html body .btn{border-radius:14px!important;font-family:"Poppins","Inter",sans-serif;font-weight:700!important;letter-spacing:.01em;transition:transform .15s ease,box-shadow .2s ease,filter .2s}
html body .btn:active{transform:translateY(1px) scale(.99)}
html body :is(.btn--orange,.x-go,.x-cta,.btn.x-go){background:var(--b-ring)!important;border:0!important;color:#1d1000!important;
  box-shadow:inset 0 1px 0 rgb(255 255 255/.55),inset 0 -2px 0 rgb(0 0 0/.15),0 10px 22px -10px rgb(240 140 0/.85)!important;text-shadow:0 1px 0 rgb(255 255 255/.35)}
html body :is(.btn--orange,.x-go,.x-cta):hover{filter:brightness(1.06);box-shadow:inset 0 1px 0 rgb(255 255 255/.6),0 14px 26px -10px rgb(240 140 0/.95)!important}
:root[data-theme="dark"] .btn:not(.btn--orange):not(.x-go):not(.x-cta):not(.btn--danger):not(.btn--green){background:rgb(255 255 255/.06)!important;color:var(--b-ivory)!important;
  border:1px solid var(--b-line)!important;box-shadow:none!important}
:root[data-theme="light"] .btn:not(.btn--orange):not(.x-go):not(.x-cta):not(.btn--danger):not(.btn--green){background:#fff!important;color:var(--b-em-600)!important;border:1px solid rgb(11 93 59/.25)!important;box-shadow:0 4px 12px -8px rgb(11 93 59/.4)!important}
html body .btn--green{background:linear-gradient(135deg,var(--b-em-400),var(--b-em-600))!important;color:#fff!important;border:0!important}

/* ---------- Cartes, panneaux, encadrés ---------- */
:root[data-theme="dark"] :is(.cards>div,.x-panel,.callout,.step,.breakdown,.x-simbox,.x-vhbox,.chart,.g-card,#stats>div,.table-wrap){
  background:var(--b-card)!important;border:1px solid var(--b-line)!important;border-radius:var(--b-r)!important;box-shadow:var(--b-shadow)!important;
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
:root[data-theme="light"] :is(.cards>div,.x-panel,.callout,.step,.breakdown,.x-simbox,.x-vhbox,.chart,#stats>div,.table-wrap){
  background:#fff!important;border:1px solid rgb(240 140 0/.22)!important;border-radius:var(--b-r)!important;box-shadow:0 14px 30px -18px rgb(11 61 39/.35)!important}

/* Compteurs : chiffres dorés */
html body #stats>div{position:relative;overflow:hidden}
html body #stats>div::before{content:"";position:absolute;inset:0 0 auto;height:3px;background:var(--b-ring)}
html body #stats>div>:first-child{font-family:"Poppins",sans-serif;font-weight:800!important;font-size:clamp(1.6rem,6vw,2.1rem);
  background:var(--b-gold-grad);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent;text-shadow:none!important;filter:drop-shadow(0 2px 6px rgb(0 0 0/.35))}
:root[data-theme="light"] #stats>div>:first-child{background:linear-gradient(180deg,var(--b-em-500),var(--b-em-700));-webkit-background-clip:text;background-clip:text}
html body #stats>div>:last-child{font-weight:600;opacity:.92;text-shadow:none!important}
html body #stats>div *{transform:none!important}
:root[data-theme="light"] #stats>div>:first-child{filter:none}

/* ---------- Intro / héros ---------- */
html body .x-intro{background:
  radial-gradient(600px 300px at 100% 0%,rgb(240 140 0/.25),transparent 60%),
  linear-gradient(150deg,var(--b-em-500) 0%,var(--b-em-600) 40%,var(--b-em-800) 100%)!important;
  border:1px solid rgb(255 195 92/.4)!important;border-bottom:0!important;border-radius:24px!important;position:relative;overflow:hidden;
  box-shadow:0 24px 50px -22px rgb(0 0 0/.7),inset 0 1px 0 rgb(255 255 255/.12)!important}
html body .x-intro::after{content:"";position:absolute;left:0;right:0;bottom:0;height:4px;background:var(--b-ring)}
html body .x-intro .hero__eyebrow{background:rgb(4 41 26/.55)!important;color:var(--b-gold)!important;border:1px solid rgb(255 195 92/.5);box-shadow:none!important;border-radius:999px!important;font-weight:700;letter-spacing:.08em}
html body .x-intro h1{color:#fff!important;text-shadow:0 2px 14px rgb(0 0 0/.35)}
html body .x-intro h1 span{background:var(--b-gold-grad);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent!important}
html body .x-intro .x-welcome__sub{color:rgb(253 248 238/.92)!important}
html body .x-intro .x-welcome__sub strong{color:var(--b-gold)!important}
html body .x-intro .hero__meta{color:rgb(253 248 238/.7)!important}

/* ---------- Titres de rubriques ---------- */
html body .head__eyebrow{display:inline-flex;align-items:center;gap:8px;padding:6px 14px;border-radius:999px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;font-size:.74rem}
:root[data-theme="dark"] .head__eyebrow{color:var(--b-gold)!important;background:rgb(255 195 92/.10);border:1px solid rgb(255 195 92/.35)}
:root[data-theme="light"] .head__eyebrow{color:var(--b-or-700)!important;background:rgb(240 140 0/.10);border:1px solid rgb(240 140 0/.3)}
:root[data-theme="dark"] .head h2{color:#fff}
:root[data-theme="light"] .head h2{color:var(--b-em-700)}
html body .head h2::after{content:"";display:block;width:64px;height:4px;margin-top:12px;border-radius:4px;background:var(--b-ring)}
:root[data-theme="dark"] .head__sub{color:rgb(253 248 238/.78)!important}

/* ---------- Formulaires ---------- */
html body :is(input,select,textarea){border-radius:12px!important;transition:border-color .15s,box-shadow .15s}
:root[data-theme="dark"] :is(input,select,textarea){background:rgb(4 41 26/.65)!important;border:1px solid rgb(255 195 92/.3)!important;color:#fff!important}
:root[data-theme="light"] :is(input,select,textarea){background:#fff!important;border:1px solid rgb(11 93 59/.25)!important;color:var(--b-ink)!important}
html body :is(input,select,textarea):focus{outline:none!important;border-color:var(--b-or-500)!important;box-shadow:0 0 0 3px rgb(240 140 0/.28)!important}
html body .x-field,html body .x-label{font-weight:600}

/* ---------- Bandeau abonnement, accès réservé ---------- */
html body .x-ben,html body .x-gate{background:
  radial-gradient(500px 260px at 100% 0%,rgb(240 140 0/.22),transparent 60%),
  linear-gradient(160deg,var(--b-em-500),var(--b-em-800))!important;border:1px solid rgb(255 195 92/.4)!important;border-radius:24px!important;
  box-shadow:0 24px 50px -24px rgb(0 0 0/.7),inset 0 -4px 0 var(--b-or-500)!important}
html body .x-gate h2,html body .x-ben h2{color:#fff!important}
html body .x-gate__price,html body .x-ben__eye{color:var(--b-gold)!important;font-weight:800}

/* ---------- Totaux ---------- */
html body .row--total{border-radius:12px;background:linear-gradient(90deg,rgb(240 140 0/.18),rgb(255 195 92/.06))!important;border:1px solid rgb(240 140 0/.45)}
:root[data-theme="dark"] .row--total dd{color:var(--b-gold)!important;font-family:"Poppins",sans-serif;font-weight:800}
:root[data-theme="light"] .row--total dd{color:var(--b-or-700)!important;font-family:"Poppins",sans-serif;font-weight:800}

/* ---------- Barre du bas ---------- */
html body .x-tabbar{background:linear-gradient(180deg,rgb(6 53 33/.94),rgb(4 41 26/.97))!important;-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
  border:1px solid rgb(255 195 92/.3)!important;box-shadow:0 -10px 30px -12px rgb(0 0 0/.6),inset 0 2px 0 rgb(240 140 0/.9)!important}
html body .x-tabbar :is(a,button){color:rgb(253 248 238/.75)!important;font-weight:600}
html body .x-tabbar :is(a,button)[aria-current="page"],html body .x-tabbar .is-on{color:var(--b-gold)!important}
html body .x-tabbar__ico{border-radius:12px}

/* ---------- Pied de page, feuille « Plus » ---------- */
html body .foot{background:linear-gradient(180deg,transparent,rgb(4 41 26/.6))!important;border-top:1px solid rgb(255 195 92/.25)}
:root[data-theme="light"] .foot{background:linear-gradient(180deg,transparent,rgb(240 140 0/.06))!important}
:root[data-theme="dark"] .x-sheet{background:linear-gradient(180deg,var(--b-em-700),var(--b-em-900))!important;border:1px solid var(--b-line)!important;color:var(--b-ivory)}
html body .x-sheet a{border-radius:14px}

/* ---------- Tableaux ---------- */
:root[data-theme="dark"] thead th{color:var(--b-gold)!important;font-family:"Poppins",sans-serif;letter-spacing:.03em}
html body tbody tr{transition:background .15s}
:root[data-theme="dark"] tbody tr:hover{background:rgb(255 195 92/.06)}

/* ---------- Assistante IA ---------- */
html body .x-ai__head{background:linear-gradient(150deg,var(--b-em-500),var(--b-em-800))!important;box-shadow:inset 0 -3px 0 var(--b-or-500)}

/* Liens */
:root[data-theme="dark"] .link,:root[data-theme="dark"] main a:not(.btn):not([class]){color:var(--b-gold)}

/* Respect des préférences d'animation */
@media (prefers-reduced-motion:reduce){html body .btn{transition:none}}

/* ===== Couche 3D professionnelle ===== */
html body .main{perspective:1400px}
/* Cartes en relief : biseau doré, profondeur, inclinaison au survol/au doigt */
html body :is(.cards>div,#stats>div,.x-panel,.breakdown,.x-simbox,.x-vhbox,.callout,.step,.table-wrap,.x-intro,.x-ben,.x-gate){
  transform-style:preserve-3d;transform:perspective(1000px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) translateZ(0);
  transition:transform .35s cubic-bezier(.2,.8,.2,1),box-shadow .35s;will-change:transform;
  box-shadow:0 1px 0 rgb(255 226 161/.35) inset,0 -6px 0 rgb(0 0 0/.22) inset,0 6px 0 var(--b-em-900),0 10px 0 rgb(240 140 0/.55),0 30px 50px -18px rgb(0 0 0/.75)!important}
:root[data-theme="light"] :is(.cards>div,#stats>div,.x-panel,.breakdown,.x-simbox,.x-vhbox,.callout,.step,.table-wrap){
  box-shadow:0 1px 0 #fff inset,0 -5px 0 rgb(11 93 59/.08) inset,0 6px 0 #e9dcc4,0 9px 0 rgb(240 140 0/.45),0 26px 40px -18px rgb(11 61 39/.45)!important}
html body .x-tilt-on{--lift:1}
html body :is(.cards>div,#stats>div,.x-panel)>*{transform:translateZ(calc(var(--lift,0) * 28px));transition:transform .35s}
/* Reflet lumineux qui suit l'inclinaison */
html body :is(.cards>div,#stats>div,.x-intro,.x-ben,.x-gate){position:relative;overflow:hidden}
html body :is(.cards>div,#stats>div,.x-intro,.x-ben,.x-gate)::after{content:"";position:absolute;inset:0;pointer-events:none;border-radius:inherit;
  background:radial-gradient(420px 220px at var(--gx,30%) var(--gy,0%),rgb(255 226 161/.22),transparent 60%);mix-blend-mode:screen}
/* Titres extrudés en relief doré */
:root[data-theme="dark"] :is(.head h2,.x-intro h1,.x-gate h2,.x-ben h2){text-shadow:0 1px 0 #0a4a30,0 2px 0 #08402a,0 3px 0 #063521,0 4px 0 #052c1c,0 5px 0 #b45f00,0 10px 18px rgb(0 0 0/.55)!important}
:root[data-theme="light"] .head h2{text-shadow:0 1px 0 #f7d79a,0 2px 0 #f2c26b,0 3px 0 #e9a53a,0 8px 14px rgb(11 61 39/.25)}
/* Boutons 3D : bloc biseauté qui s'enfonce */
html body :is(.btn--orange,.x-go,.x-cta){box-shadow:inset 0 2px 0 rgb(255 255 255/.6),inset 0 -3px 0 rgb(120 60 0/.35),0 5px 0 #a35400,0 12px 22px -8px rgb(240 140 0/.8)!important;transform:translateY(0)}
html body :is(.btn--orange,.x-go,.x-cta):active{transform:translateY(4px)!important;box-shadow:inset 0 2px 0 rgb(255 255 255/.5),0 1px 0 #a35400,0 4px 10px -4px rgb(240 140 0/.7)!important}
:root[data-theme="dark"] .btn:not(.btn--orange):not(.x-go):not(.x-cta):not(.btn--danger){box-shadow:inset 0 1px 0 rgb(255 226 161/.25),0 4px 0 var(--b-em-900),0 10px 18px -8px rgb(0 0 0/.6)!important}
/* Champs creusés */
:root[data-theme="dark"] :is(input,select,textarea){box-shadow:inset 0 3px 8px rgb(0 0 0/.45),inset 0 -1px 0 rgb(255 226 161/.15)!important}
/* Logo d'en-tête : pièce 3D qui tourne */
html body .x-brand__mark{animation:b-coin 9s cubic-bezier(.6,0,.4,1) infinite;transform-style:preserve-3d}
@keyframes b-coin{0%,70%{transform:rotateY(0)}85%{transform:rotateY(180deg)}100%{transform:rotateY(360deg)}}
/* Barre du bas flottante en relief */
html body .x-tabbar{box-shadow:inset 0 2px 0 rgb(240 140 0/.9),inset 0 1px 0 rgb(255 226 161/.3),0 -2px 0 var(--b-em-900),0 -18px 40px -12px rgb(0 0 0/.7)!important}
html body .x-tabbar :is(a,button)[aria-current="page"] .x-tabbar__ico,html body .x-tabbar .is-on .x-tabbar__ico{transform:translateY(-6px) scale(1.08);box-shadow:0 4px 0 #a35400,0 10px 16px -6px rgb(240 140 0/.8)}
/* Apparition en profondeur au défilement */
html body .x-rise{opacity:0;transform:perspective(1000px) translateY(40px) rotateX(14deg)}
html body .x-rise.is-in{opacity:1;transform:perspective(1000px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));transition:opacity .7s ease,transform .8s cubic-bezier(.2,.8,.2,1)}
@media (prefers-reduced-motion:reduce){html body *{animation:none!important}html body .x-rise{opacity:1;transform:none}}
html body .x-intro h1 span{text-shadow:none!important;filter:drop-shadow(0 3px 0 #7a3f00) drop-shadow(0 8px 10px rgb(0 0 0/.5))}

/* ===== Cartes d'action 3D aux couleurs du logo (les deux thèmes) ===== */
html:root[data-theme] body main:not(#_) .cards{gap:22px!important}
html:root[data-theme] body main:not(#_) .cards>div{
  background-color:#0b5d3b!important;background-image:radial-gradient(120% 90% at 100% 0%,rgb(240 140 0/.35),transparent 55%),radial-gradient(90% 80% at 0% 100%,rgb(255 199 64/.18),transparent 60%),linear-gradient(150deg,#13804f 0%,#0b5d3b 45%,#063a25 100%)!important;
  border:2px solid transparent!important;border-radius:24px!important;padding:22px 20px 20px 96px!important;min-height:150px;color:#fff!important;
  background-clip:padding-box!important;outline:2px solid rgb(255 199 64/.55);outline-offset:-2px;
  box-shadow:inset 0 2px 0 rgb(255 226 161/.45),inset 0 -8px 16px rgb(0 0 0/.3),0 7px 0 #063a25,0 12px 0 #d97a00,0 34px 46px -16px rgb(4 40 24/.8)!important}
html:root[data-theme] body main:not(#_) .cards>div h3{color:#ffd56b!important;font:800 1.18rem/1.2 Poppins,sans-serif!important;letter-spacing:-.01em;text-shadow:0 2px 0 #063a25,0 3px 0 #a35400,0 8px 14px rgb(0 0 0/.5)!important}
html:root[data-theme] body main:not(#_) .cards>div p{color:rgb(255 255 255/.9)!important}
html:root[data-theme] body main:not(#_) .cards>div::before{position:absolute;left:18px;top:22px;width:62px;height:62px;border-radius:50%;display:grid;place-items:center;font-size:28px;
  background:radial-gradient(circle at 35% 30%,#ffe9a8,#ffb020 45%,#d97a00 80%);border:3px solid #fff3cf;
  box-shadow:inset 0 -5px 0 rgb(120 60 0/.35),inset 0 3px 0 rgb(255 255 255/.7),0 5px 0 #8a4700,0 12px 18px -4px rgb(0 0 0/.55);transform:translateZ(40px)}
html:root[data-theme] body main:not(#_) .cards>div:nth-child(1)::before{content:"🔎"}html:root[data-theme] body main:not(#_) .cards>div:nth-child(2)::before{content:"🧮"}
html:root[data-theme] body main:not(#_) .cards>div:nth-child(3)::before{content:"🚗"}html:root[data-theme] body main:not(#_) .cards>div:nth-child(4)::before{content:"📦"}
html:root[data-theme] body main:not(#_) .cards>div:nth-child(5)::before{content:"📋"}html:root[data-theme] body main:not(#_) .cards>div:nth-child(6)::before{content:"🤝"}
html:root[data-theme] body main:not(#_) .cards>div:nth-child(n+7)::before{content:"⭐"}
html:root[data-theme] body main:not(#_) .cards>div .btn{background:linear-gradient(180deg,#ffc94a,#f39200 60%,#d97a00)!important;color:#3a1d00!important;border:0!important;border-radius:999px!important;font-weight:800!important;
  box-shadow:inset 0 2px 0 rgb(255 255 255/.65),inset 0 -3px 0 rgb(120 60 0/.35),0 5px 0 #8a4700,0 12px 20px -8px rgb(0 0 0/.6)!important}
html:root[data-theme] body main:not(#_) .cards>div .btn::after{content:" →"}
html:root[data-theme] body main:not(#_) .cards>div .btn:active{transform:translateY(4px)!important;box-shadow:inset 0 2px 0 rgb(255 255 255/.5),0 1px 0 #8a4700!important}
@media (max-width:380px){html:root[data-theme] body main:not(#_) .cards>div{padding-left:20px!important;padding-top:96px!important}}

/* ===== Bande défilante en direct ===== */
.x-tick{position:sticky;top:var(--x-tick-top,0);z-index:40;display:flex;align-items:stretch;height:38px;margin:0 0 6px;overflow:hidden;
  background:linear-gradient(180deg,#0e6b44,#063a25);border-top:1px solid rgb(255 199 64/.5);border-bottom:2px solid #f39200;
  box-shadow:inset 0 1px 0 rgb(255 226 161/.3),0 6px 14px -6px rgb(0 0 0/.55);font:600 13px/38px Inter,system-ui,sans-serif;color:#fff}
.x-tick__lbl{flex:none;padding:0 12px;background:linear-gradient(180deg,#ffc94a,#f39200 60%,#d97a00);color:#3a1d00;font:800 11px/38px Poppins,sans-serif;letter-spacing:.08em;box-shadow:inset 0 2px 0 rgb(255 255 255/.6),4px 0 10px rgb(0 0 0/.35);position:relative;z-index:1}
.x-tick__lbl::before{content:"";display:inline-block;width:8px;height:8px;margin-right:6px;border-radius:50%;background:#d10000;box-shadow:0 0 0 0 rgb(209 0 0/.7);animation:x-pulse 1.4s infinite;vertical-align:1px}
@keyframes x-pulse{70%{box-shadow:0 0 0 8px rgb(209 0 0/0)}100%{box-shadow:0 0 0 0 rgb(209 0 0/0)}}
.x-tick__vp{flex:1;overflow:hidden;-webkit-mask:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent);mask:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent)}
.x-tick__tr{display:flex;width:max-content;animation:x-scroll 300s linear infinite;will-change:transform}
.x-tick__tr>div{display:flex;white-space:nowrap;padding-right:40px}
.x-tick__vp:active .x-tick__tr{animation-play-state:paused}
@keyframes x-scroll{to{transform:translateX(-50%)}}
.x-tick span{padding:0 4px}.x-tick small{color:rgb(255 255 255/.6);font-weight:500;font-size:11px}
.x-tick em{font-style:normal;color:#ffd56b;font-weight:800}
.x-tick__sec{color:#ffb020;padding:0 10px;font-family:Poppins,sans-serif;font-size:12px;letter-spacing:.04em;text-transform:uppercase}
.x-tick__dot{color:#f39200;padding:0 8px!important;font-size:9px}
.x-tick i{font-style:normal;font-weight:700;font-size:12px}.x-tick i.up{color:#4be08a}.x-tick i.dn{color:#ff6b5b}.x-tick i.eq{color:#cfd8d3}
@media (prefers-reduced-motion:reduce){.x-tick__tr{animation-duration:900s!important}}
/* ===== Réactivité au premier toucher ===== */
html,body,a,button,[role="button"],.btn,input,select,label{touch-action:manipulation}
a,button,.btn,[role="button"]{-webkit-tap-highlight-color:rgb(243 146 0/.25)}
@media (hover:none){html body :is(.cards>div,#stats>div,.x-panel,.breakdown,.x-simbox,.x-vhbox,.callout,.step,.table-wrap,.x-intro,.x-ben,.x-gate){transform:none!important;transition:box-shadow .2s!important}
  html body :is(.cards>div,#stats>div,.x-panel)>*{transform:none!important}}
/* Éléments cliquables immobiles : un seul toucher suffit */
html:root body:not(#_) :is(.btn,button,a,.cards>div,.x-tabbar,.x-tabbar *,.theme-btn,#stats>div,.x-panel,.callout,.step):not(.x-brand__mark){animation:none!important}
html:root body:not(#_) .x-rise{opacity:1!important;transform:none!important}
/* Bande défilante large et lumineuse */
html body .x-tick{height:58px!important;font:700 17px/58px Inter,system-ui,sans-serif!important;border-bottom-width:3px!important;
  background:linear-gradient(180deg,#0a3f28,#03170e)!important}
html body .x-tick__lbl{font:800 13px/58px Poppins,sans-serif!important;padding:0 14px!important}
html body .x-tick span{color:#fff!important;text-shadow:0 0 8px rgb(255 255 255/.55)}
html body .x-tick small{color:#9ff3c8!important;font-size:13px!important;text-shadow:0 0 6px rgb(75 224 138/.6)}
html body .x-tick em{color:#ffe14d!important;font-size:18px;text-shadow:0 0 6px rgb(255 225 77/.9),0 0 16px rgb(255 176 32/.7)}
html body .x-tick__sec{color:#ffb020!important;font-size:15px!important;text-shadow:0 0 8px rgb(255 176 32/.9),0 0 18px rgb(243 146 0/.6)}
html body .x-tick i{font-size:15px!important}
html body .x-tick i.up{color:#39ff88!important;text-shadow:0 0 8px rgb(57 255 136/.8)}
html body .x-tick i.dn{color:#ff4d4d!important;text-shadow:0 0 8px rgb(255 77 77/.8)}
html body .x-tick__dot{color:#ff9d00!important;text-shadow:0 0 8px #ff9d00}

/* ===== Tous les panneaux en 3D émeraude, couleurs du logo (les deux thèmes) ===== */
html:root body:not(#_) :is(.breakdown,.step,.x-panel,.table-wrap,.x-simbox,.x-vhbox,.stat,#stats>div,.aside,.chart,.x-lock,.card,.g-card){
  background-color:#0b5d3b!important;
  background-image:radial-gradient(110% 80% at 100% 0%,rgb(240 140 0/.28),transparent 55%),radial-gradient(90% 70% at 0% 100%,rgb(255 199 64/.14),transparent 60%),linear-gradient(155deg,#13804f 0%,#0b5d3b 50%,#063a25 100%)!important;
  color:#fff!important;border:0!important;border-radius:24px!important;outline:2px solid rgb(255 199 64/.55);outline-offset:-2px;
  box-shadow:inset 0 2px 0 rgb(255 226 161/.45),inset 0 -8px 16px rgb(0 0 0/.3),0 7px 0 #063a25,0 12px 0 #d97a00,0 34px 46px -16px rgb(4 40 24/.75)!important}
html:root body:not(#_) :is(.breakdown,.step,.x-panel,.table-wrap,.x-simbox,.x-vhbox,.stat,#stats>div,.aside,.chart,.x-lock,.card,.g-card) :is(p,span,li,td,dd,dt,label,small,div,.row,.fineprint){color:rgb(255 255 255/.88)!important}
html:root body:not(#_) :is(.breakdown,.step,.x-panel,.table-wrap,.x-simbox,.x-vhbox,.stat,#stats>div,.aside,.chart,.x-lock,.card,.g-card) :is(h2,h3,h4,strong,b,th,.step__eyebrow,.step__num,legend){color:#ffd56b!important;-webkit-text-fill-color:#ffd56b!important;background:none!important;text-shadow:0 2px 0 #063a25,0 4px 10px rgb(0 0 0/.45)!important}
html:root body:not(#_) :is(.breakdown,.step,.x-panel,.table-wrap,.x-simbox,.x-vhbox,.stat,#stats>div) :is(.row,tr){border-color:rgb(255 199 64/.25)!important}
html:root body:not(#_) :is(.breakdown,.x-simbox,.x-vhbox,.x-panel) .row--total{background:linear-gradient(180deg,#ffc94a,#f39200 60%,#d97a00)!important;border-radius:16px!important;
  box-shadow:inset 0 2px 0 rgb(255 255 255/.6),inset 0 -3px 0 rgb(120 60 0/.35),0 5px 0 #8a4700,0 12px 20px -8px rgb(0 0 0/.6)!important}
html:root body:not(#_) .row--total :is(*,strong,span,small,b){color:#3a1d00!important;-webkit-text-fill-color:#3a1d00!important;text-shadow:none!important}
html:root body:not(#_) :is(.breakdown,.step,.x-panel,.table-wrap,.x-simbox,.x-vhbox,.aside,.x-lock,.card) :is(input,select,textarea){background:#fffaf0!important;color:#0b3d27!important;-webkit-text-fill-color:#0b3d27!important;border:2px solid rgb(255 199 64/.7)!important}
html:root body:not(#_) :is(.breakdown,.step,.x-panel,.table-wrap,.x-simbox,.x-vhbox,.aside,.x-lock,.card) a:not(.btn){color:#ffd56b!important}
html:root body:not(#_) :is(.breakdown,.step,.x-panel,.table-wrap,.x-simbox,.x-vhbox,.aside,.x-lock,.card) .btn:not(.x-go):not(.x-cta):not(.btn--orange){background:linear-gradient(180deg,#1a9a60,#0b5d3b)!important;color:#fff!important;border:1px solid rgb(255 199 64/.6)!important;box-shadow:inset 0 1px 0 rgb(255 226 161/.4),0 4px 0 #04291a!important}
/* Titres en dégradé doré : relief net (pas d'ombre floue derrière le texte transparent) */
html:root body:not(#_) :is(.callout h2,.callout h3,.callout__lead,.head h2,.x-intro h1){text-shadow:none!important;filter:drop-shadow(0 2px 0 #063a25) drop-shadow(0 3px 0 #a35400) drop-shadow(0 8px 10px rgb(0 0 0/.45))}

/* ===== Équilibre des couleurs du logo : autant d'orange que de vert ===== */
:root{--o-card:radial-gradient(110% 80% at 0% 0%,rgb(255 236 170/.55),transparent 55%),radial-gradient(90% 70% at 100% 100%,rgb(11 93 59/.22),transparent 60%),linear-gradient(155deg,#ffbf3a 0%,#f39200 50%,#c96a00 100%)}
/* Une carte / un panneau sur deux en orange, socle vert */
html:root body:not(#_) main .cards>div:nth-child(even),
html:root body:not(#_) :is(.breakdown,.step,.x-panel,.table-wrap,.x-simbox,.x-vhbox,.stat,#stats>div,.aside,.chart,.card,.g-card):nth-child(even){
  background-color:#f39200!important;background-image:var(--o-card)!important;outline-color:rgb(11 93 59/.6)!important;
  box-shadow:inset 0 2px 0 rgb(255 255 255/.6),inset 0 -8px 16px rgb(120 60 0/.25),0 7px 0 #a35400,0 12px 0 #0b5d3b,0 34px 46px -16px rgb(4 40 24/.7)!important}
html:root body:not(#_) main .cards>div:nth-child(even) :is(p,small,span),
html:root body:not(#_) :is(.breakdown,.step,.x-panel,.table-wrap,.x-simbox,.x-vhbox,.stat,#stats>div,.aside,.chart,.card,.g-card):nth-child(even) :is(p,span,li,td,dd,dt,label,small,div,.row,.fineprint){color:#2b1500!important}
html:root body:not(#_) main .cards>div:nth-child(even) h3,
html:root body:not(#_) :is(.breakdown,.step,.x-panel,.table-wrap,.x-simbox,.x-vhbox,.stat,#stats>div,.aside,.chart,.card,.g-card):nth-child(even) :is(h2,h3,h4,strong,b,th,.step__eyebrow,.step__num,legend){color:#063a25!important;-webkit-text-fill-color:#063a25!important;text-shadow:0 1px 0 rgb(255 255 255/.7),0 3px 8px rgb(120 60 0/.35)!important}
html:root body:not(#_) :is(#stats>div,.stat):nth-child(even) :is(strong,b,h2,h3,[class*="num"],[class*="val"]){color:#063a25!important;-webkit-text-fill-color:#063a25!important}
/* Médaillon et bouton inversés sur les cartes orange : vert émeraude */
html:root body:not(#_) main .cards>div:nth-child(even)::before{background:radial-gradient(circle at 35% 30%,#3fd08a,#13804f 45%,#063a25 85%)!important;border-color:#ffe2a1!important;box-shadow:inset 0 -5px 0 rgb(0 0 0/.3),inset 0 3px 0 rgb(255 255 255/.4),0 5px 0 #04291a,0 12px 18px -4px rgb(0 0 0/.5)!important}
html:root body:not(#_) main .cards>div:nth-child(even) .btn,
html:root body:not(#_) :is(.breakdown,.step,.x-panel,.x-simbox,.x-vhbox,.aside,.card):nth-child(even) .btn{background:linear-gradient(180deg,#1fae6c,#0b5d3b 60%,#063a25)!important;color:#fff!important;border:0!important;box-shadow:inset 0 2px 0 rgb(255 255 255/.4),inset 0 -3px 0 rgb(0 0 0/.3),0 5px 0 #04291a,0 12px 20px -8px rgb(0 0 0/.55)!important}
html:root body:not(#_) :is(.breakdown,.x-simbox,.x-vhbox,.x-panel):nth-child(even) .row--total{background:linear-gradient(180deg,#1fae6c,#0b5d3b 60%,#063a25)!important;box-shadow:inset 0 2px 0 rgb(255 255 255/.4),0 5px 0 #04291a!important}
html:root body:not(#_) :is(.breakdown,.x-simbox,.x-vhbox,.x-panel):nth-child(even) .row--total :is(*,strong,span,small,b){color:#ffd56b!important;-webkit-text-fill-color:#ffd56b!important}
/* En-tête, barre du bas et bande : vert et orange à parts égales */
html:root body:not(#_) header.nav{background:linear-gradient(100deg,#063a25 0%,#0b5d3b 30%,#13804f 48%,#f39200 52%,#e07f00 75%,#b85d00 100%)!important;border-bottom:3px solid #ffc940!important}
html:root body:not(#_) header.nav :is(a,span,strong,b){text-shadow:0 2px 4px rgb(0 0 0/.45)}
html:root body:not(#_) .x-tabbar{background:linear-gradient(100deg,#063a25 0%,#0b5d3b 30%,#13804f 48%,#f39200 52%,#e07f00 75%,#b85d00 100%)!important;box-shadow:inset 0 2px 0 #ffc940,0 -18px 40px -12px rgb(0 0 0/.6)!important}
html:root body:not(#_) .x-tabbar :is(a,button){color:#fff!important;text-shadow:0 1px 3px rgb(0 0 0/.6)}
/* Fond : halos vert et orange de même intensité */
:root[data-theme="dark"] body:not(#_){background:radial-gradient(70% 45% at 0% 0%,rgb(19 128 79/.55),transparent 70%),radial-gradient(70% 45% at 100% 100%,rgb(243 146 0/.45),transparent 70%),radial-gradient(60% 40% at 100% 20%,rgb(243 146 0/.30),transparent 70%),radial-gradient(60% 40% at 0% 80%,rgb(19 128 79/.40),transparent 70%),#04170f!important;background-attachment:fixed!important}
:root[data-theme="light"] body:not(#_){background:radial-gradient(70% 45% at 0% 0%,rgb(19 128 79/.22),transparent 70%),radial-gradient(70% 45% at 100% 100%,rgb(243 146 0/.24),transparent 70%),radial-gradient(60% 40% at 100% 20%,rgb(243 146 0/.18),transparent 70%),radial-gradient(60% 40% at 0% 80%,rgb(19 128 79/.18),transparent 70%),#fff8ec!important;background-attachment:fixed!important}
/* Pièces « Pourquoi s'abonner » en damier vert / orange */
html:root body:not(#_) .x-ben li:is(:nth-child(4n+2),:nth-child(4n+3)) .x-coin__f--a{background:radial-gradient(circle at 30% 25%,#ffc04a,#f39200 55%,#b86400)!important;color:#2b1500!important;border-color:#0b5d3b!important}
html:root body:not(#_) .x-ben li:is(:nth-child(4n+2),:nth-child(4n+3)) .x-coin__f--a :is(*,strong,p,span,small){color:#063a25!important;-webkit-text-fill-color:#063a25!important;text-shadow:0 1px 0 rgb(255 255 255/.6)!important}
html:root body:not(#_) .x-ben li:is(:nth-child(4n+2),:nth-child(4n+3)) .x-coin__f--a .x-coin__ico{background:radial-gradient(circle at 35% 30%,#3fd08a,#13804f 50%,#063a25)!important}
html:root body:not(#_) .x-ben li:is(:nth-child(4n+2),:nth-child(4n+3)) .x-coin__f--b{background:radial-gradient(circle at 30% 25%,#1d8a5b,#0b5d3b 55%,#06301f)!important;color:#fff!important}
html:root body:not(#_) .x-ben li:is(:nth-child(4n+2),:nth-child(4n+3)) .x-coin__f--b :is(*,strong,p,span){color:#fff!important;-webkit-text-fill-color:#fff!important}
/* Compteurs orange : chiffres verts lisibles */
html:root body:not(#_) .stat:nth-child(even) :is(.stat__fig,.stat__label){color:#063a25!important;-webkit-text-fill-color:#063a25!important;background:none!important;text-shadow:0 1px 0 rgb(255 255 255/.6)!important}
/* Encadrés (statut, infos) : orange en relief, texte net */
html:root body:not(#_) .callout:not(.x-ben){background:var(--o-card)!important;background-color:#f39200!important;border:0!important;border-radius:24px!important;outline:2px solid rgb(11 93 59/.6);outline-offset:-2px;
  box-shadow:inset 0 2px 0 rgb(255 255 255/.6),inset 0 -8px 16px rgb(120 60 0/.25),0 7px 0 #a35400,0 12px 0 #0b5d3b,0 34px 46px -16px rgb(4 40 24/.6)!important}
html:root body:not(#_) .callout:not(.x-ben) :is(p,span,li,div,small,strong,b,.callout__head,.callout__lead,h2,h3){color:#2b1500!important;-webkit-text-fill-color:#2b1500!important;text-shadow:none!important;filter:none!important;background:none}
html:root body:not(#_) .callout:not(.x-ben) :is(.callout__head,h2,h3,strong){color:#063a25!important;-webkit-text-fill-color:#063a25!important}
html:root body:not(#_) .callout:not(.x-ben) .btn{background:linear-gradient(180deg,#1fae6c,#0b5d3b 60%,#063a25)!important;color:#fff!important;-webkit-text-fill-color:#fff!important;box-shadow:inset 0 2px 0 rgb(255 255 255/.4),0 5px 0 #04291a!important}
html:root body:not(#_) .callout:not(.x-ben) .btn *{color:#fff!important;-webkit-text-fill-color:#fff!important}