/* =============================================================================
   AxoHost - Site vitrine
   MEME SYSTEME QUE L'ESPACE CLIENT : les jetons ci-dessous sont repris a
   l'identique de assets/css/app.css (fond #070809, accent cyan #00e5ff, Inter).
   Rien n'est invente ici : une page du site et une page du panel doivent
   pouvoir se succeder sans que l'oeil accroche.
   ============================================================================= */

:root{
  /* Surfaces */
  --bg:#070809; --bg-soft:#0a0c0f; --bg1:#0e1319; --bg2:#141a22; --bg3:#1a212b; --bg4:#222b37;
  /* Traits */
  --border:rgba(255,255,255,.065); --border-2:rgba(255,255,255,.10);
  --border-c:rgba(0,229,255,.20);  --border-w:rgba(255,255,255,.16);
  /* Texte */
  --white:#fff; --soft:#aebbc9; --muted:#8b98a8; --grey2:#6b7a8c; --faint:#8b98a8;
  /* Couleurs */
  --cyan:#00e5ff; --cyan-2:#35ecff; --cyan-dark:#0094b5;
  --cyan-d:rgba(0,229,255,.075); --cyan-dd:rgba(0,229,255,.14); --cyan-g:rgba(0,229,255,.28);
  --green:#22c55e; --green-d:rgba(34,197,94,.10);
  --amber:#fbbf24; --amber-d:rgba(251,191,36,.10);
  --red:#ef4444;
  /* Gamme courante */
  --gm:var(--cyan); --gm2:var(--cyan-2); --gm-ink:#04141a;
  --gm-block:var(--cyan); --gm-bink:#04141a;
  --gm-soft:rgba(0,229,255,.075); --gm-line:rgba(0,229,255,.20); --gm-glow:rgba(0,229,255,.28);
  /* Ombres */
  --sh:0 4px 16px rgba(0,0,0,.35); --sh-md:0 10px 30px rgba(0,0,0,.45);
  --sh-lg:0 26px 60px rgba(0,0,0,.6); --sh-c:0 8px 26px var(--cyan-g);
  /* Divers */
  --font:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --mono:ui-monospace,'SF Mono','JetBrains Mono',Menlo,Consolas,monospace;
  --ease:cubic-bezier(.16,1,.3,1); --ease-2:cubic-bezier(.4,0,.2,1);
  /* Angles francs : c'est ce qui donne le trait d'affiche plutot que de widget. */
  --r-sm:3px; --r:5px; --r-lg:8px; --r-xl:12px;
  --shell:1200px; --pad:24px; --nav-h:64px;
}


/* -- Fonte Inter, hebergee avec le site ------------------------------------
   Aucun appel a Google Fonts : la page ne depend d'aucun serveur tiers, elle
   s'affiche a l'identique meme hors ligne, et aucune adresse IP de visiteur
   n'est transmise a un tiers (ce que la politique de confidentialite annonce).
   Licence SIL Open Font 1.1, voir assets/fonts/LICENCE-Inter.txt. ---------- */
@font-face{font-family:'Inter';font-style:normal;font-weight:400;font-display:swap;src:url('/assets/fonts/inter-400.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Inter';font-style:normal;font-weight:500;font-display:swap;src:url('/assets/fonts/inter-500.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Inter';font-style:normal;font-weight:600;font-display:swap;src:url('/assets/fonts/inter-600.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Inter';font-style:normal;font-weight:700;font-display:swap;src:url('/assets/fonts/inter-700.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Inter';font-style:normal;font-weight:800;font-display:swap;src:url('/assets/fonts/inter-800.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Inter';font-style:normal;font-weight:900;font-display:swap;src:url('/assets/fonts/inter-900.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:88px;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--soft);font-family:var(--font);
  font-size:15px;line-height:1.65;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img,svg{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
button{font-family:inherit;color:inherit;background:none;border:0;cursor:pointer}
h1,h2,h3,h4{margin:0;color:var(--white);font-weight:900;letter-spacing:-.7px;line-height:1.18}
p{margin:0}
ul,ol{margin:0;padding:0;list-style:none}
::selection{background:var(--cyan);color:#04141a}
:focus-visible{outline:2px solid var(--cyan);outline-offset:2px;border-radius:6px}
.mono{font-family:var(--mono)}
.shell{width:100%;max-width:var(--shell);margin:0 auto;padding:0 var(--pad)}
.skip{position:absolute;left:-9999px;top:0;z-index:999;background:var(--cyan);color:#04141a;
  padding:11px 18px;border-radius:0 0 9px 0;font-weight:800;font-size:13px}
.skip:focus{left:0}

/* -- Fond : un halo, et rien d'autre ---------------------------------------
   Le quadrillage a ete retire : le fond est uni. */
.bg-fx{position:fixed;inset:0;z-index:0;pointer-events:none}
.bg-halo{position:absolute;top:-340px;left:50%;transform:translateX(-50%);
  width:1100px;height:620px;border-radius:50%;background:rgba(0,229,255,.055);filter:blur(120px)}

/* -- Navigation ------------------------------------------------------------ */
.nav{position:sticky;top:0;z-index:100;height:var(--nav-h);display:flex;align-items:center;
  border-bottom:1px solid transparent;transition:background .25s,border-color .25s}
.nav.stuck{background:rgba(7,8,9,.9);backdrop-filter:blur(16px);border-bottom-color:var(--border)}
.nav .shell{display:flex;align-items:center;gap:10px}
.brand{display:flex;align-items:center;flex-shrink:0;padding:4px;border-radius:8px;transition:.16s}
.brand:hover{background:rgba(255,255,255,.05)}
.brand img{height:27px;width:auto}
.nav-right{margin-left:auto;display:flex;align-items:center;gap:8px}
.nav-discord svg{width:15px;height:15px}

/* Bouton du menu : visible sur toutes les tailles d'ecran. */
.burger{display:flex;align-items:center;gap:9px;height:32px;padding:0 13px 0 11px;
  border-radius:8px;border:1px solid var(--border-w);background:var(--bg2);color:var(--white);
  font-size:12.5px;font-weight:700;transition:.16s}
.burger:hover{background:var(--bg3);border-color:var(--border-2)}
.burger .bl{display:flex;flex-direction:column;gap:3.5px}
.burger .bl i{display:block;width:15px;height:1.5px;background:currentColor;border-radius:2px;
  transition:.25s var(--ease)}
.menu.open ~ .nav .burger .bl i:nth-child(1){transform:translateY(5px) rotate(45deg)}
@media(max-width:520px){.burger .bt{display:none}.burger{padding:0 10px}
  .nav-discord span{display:none}.nav-client{padding:7px 10px}}

/* -- Menu principal --------------------------------------------------------- */
.menu{position:fixed;inset:0;z-index:200;pointer-events:none}
.menu.open{pointer-events:auto}
.menu[hidden]{display:none}
.menu-scrim{position:absolute;inset:0;background:rgba(4,6,8,.72);backdrop-filter:blur(3px);
  opacity:0;transition:opacity .28s var(--ease)}
.menu.open .menu-scrim{opacity:1}
.menu-panel{position:absolute;top:0;right:0;bottom:0;width:min(560px,100%);overflow-y:auto;
  background:var(--bg-soft);border-left:1px solid var(--border);padding:20px 24px 28px;
  transform:translateX(24px);opacity:0;transition:transform .32s var(--ease),opacity .28s var(--ease)}
.menu.open .menu-panel{transform:none;opacity:1}
.menu-head{display:flex;align-items:center;justify-content:space-between;padding-bottom:16px;
  margin-bottom:6px;border-bottom:1px solid var(--border)}
.menu-title{font-size:10.5px;font-weight:800;letter-spacing:.13em;text-transform:uppercase;color:var(--muted)}
.menu-x{width:32px;height:32px;border-radius:8px;border:1px solid var(--border);display:grid;
  place-items:center;color:var(--muted);transition:.16s}
.menu-x:hover{color:var(--white);background:var(--bg2);border-color:var(--border-2)}
.menu-x svg{width:16px;height:16px}
.menu-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:6px 22px;margin-bottom:18px}
@media(max-width:560px){.menu-grid{grid-template-columns:minmax(0,1fr)}}
.menu-cat{padding:16px 0 4px}
.menu-cat-t{display:flex;align-items:center;gap:8px;font-size:10.5px;font-weight:800;
  letter-spacing:.11em;text-transform:uppercase;color:var(--cyan);margin-bottom:8px}
.menu-cat-t svg{width:13px;height:13px}
.menu-cat a{display:block;padding:9px 11px;border-radius:9px;transition:background .16s}
.menu-cat a:hover{background:rgba(255,255,255,.045)}
.menu-cat a b{display:flex;align-items:center;gap:5px;font-size:14px;color:var(--white);font-weight:600}
.menu-cat a:hover b{color:var(--cyan)}
.menu-cat a span{display:block;font-size:12px;color:var(--muted);line-height:1.45;margin-top:1px}
.menu-cat .ext{width:12px;height:12px;opacity:.5;transform:rotate(-45deg)}
.menu-discord{display:flex;align-items:center;gap:14px;padding:16px 18px;border-radius:var(--r);
  border:1px solid var(--border-c);background:var(--cyan-d);transition:.2s}
.menu-discord:hover{background:var(--cyan-dd);border-color:rgba(0,229,255,.34)}
.md-ic{width:38px;height:38px;border-radius:10px;display:grid;place-items:center;flex-shrink:0;
  background:var(--bg1);border:1px solid var(--border-c);color:var(--cyan)}
.md-ic svg{width:19px;height:19px}
.md-txt b{display:block;font-size:14px;color:var(--white);font-weight:700}
.md-txt span{display:block;font-size:12.2px;color:var(--muted);line-height:1.5;margin-top:2px}
.md-go{width:16px;height:16px;color:var(--cyan);flex-shrink:0;margin-left:auto}

/* -- Bandeau anime des branches (au-dessus du Discord) ---------------------
   --br : la teinte de la branche affichee. Le JavaScript ne change QUE cette
   variable, le suffixe et l'image active : toute la mise en couleur en
   decoule, donc rien ne peut se desynchroniser. */
.menu-branches{position:relative;display:flex;align-items:center;gap:14px;padding:15px 18px;
  border-radius:var(--r);margin-bottom:12px;overflow:hidden;
  border:1px solid var(--border-2);background:var(--bg1);
  transition:border-color .45s ease,background .3s}
.menu-branches::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(120% 150% at 8% 50%,var(--br-deep) 0%,transparent 62%);
  opacity:.17;transition:opacity .45s ease,background .45s ease}
.menu-branches:hover{background:var(--bg2);border-color:color-mix(in srgb,var(--br) 42%,transparent)}
.menu-branches:hover::before{opacity:.26}
.menu-branches > *{position:relative}

.mb-logo{width:46px;height:46px;flex-shrink:0;display:grid;border-radius:11px;
  background:var(--bg2);border:1px solid var(--border);padding:7px;
  box-shadow:0 0 0 0 transparent;transition:box-shadow .45s ease}
.menu-branches:hover .mb-logo{box-shadow:0 0 18px -2px color-mix(in srgb,var(--br) 55%,transparent)}
.mb-l{grid-area:1/1;width:100%;height:100%;object-fit:contain;
  opacity:0;transform:scale(.72) rotate(-14deg);
  transition:opacity .55s var(--ease),transform .55s var(--ease)}
.mb-l.on{opacity:1;transform:none}

.mb-txt{min-width:0;flex:1}
.mb-txt > b{display:block;font-size:14px;color:var(--white);font-weight:700}
.mb-txt > span{display:block;font-size:12.2px;color:var(--muted);line-height:1.5;margin-top:3px}
.mb-word{font-weight:900;color:var(--white);letter-spacing:-.2px}
.mb-word em{font-style:normal;color:var(--br);transition:color .45s ease}
.mb-txt [data-br-court]{display:inline;margin-left:6px}

.menu-branches .md-go{color:var(--br);transition:color .45s ease,transform .2s var(--ease)}
.menu-branches:hover .md-go{transform:translateX(3px)}
.mb-dots{display:flex;flex-direction:column;gap:5px;flex-shrink:0}
.mb-dots i{width:5px;height:5px;border-radius:50%;background:var(--border-w);
  transition:background .45s ease,transform .45s ease}
.mb-dots i.on{background:var(--br);transform:scale(1.45)}

/* Une transition rapide quand le texte change, pour que l'oeil suive. */
.menu-branches.swap .mb-txt > span{animation:mbSwap .5s var(--ease)}
@keyframes mbSwap{0%{opacity:0;transform:translateY(6px)}100%{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){
  .mb-l{transition:none}
  .menu-branches.swap .mb-txt > span{animation:none}
}
@media(max-width:420px){
  .mb-txt [data-br-court]{display:block;margin-left:0}
}

/* -- Boutons (identiques a l'espace client) -------------------------------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font-weight:800;
  border-radius:var(--r-sm);border:1px solid transparent;font-size:13.5px;padding:11px 22px;
  letter-spacing:.01em;
  line-height:1.2;white-space:nowrap;cursor:pointer;
  transition:transform .18s var(--ease),box-shadow .18s var(--ease),background .16s,color .16s,border-color .16s}
.btn svg{width:16px;height:16px;flex-shrink:0}
.btn:active{transform:translateY(1px) scale(.995)}
.btn-c{color:#04141a;background:linear-gradient(135deg,var(--cyan-2),var(--cyan))}
.btn-c:hover{transform:translateY(-1px);box-shadow:var(--sh-c)}
.btn-p{color:#070809;background:var(--white)}
.btn-p:hover{transform:translateY(-1px);box-shadow:0 8px 22px rgba(255,255,255,.14)}
.btn-o{color:var(--white);background:transparent;border-color:rgba(255,255,255,.28);border-width:2px}
.btn-o:hover{background:rgba(255,255,255,.06);border-color:var(--border-2)}
.btn-g{color:var(--soft);background:var(--bg2);border-color:var(--border)}
.btn-g:hover{color:var(--white);background:var(--bg3);border-color:var(--border-2)}
.btn-ghost{color:var(--muted);background:transparent}
.btn-ghost:hover{color:var(--white);background:rgba(255,255,255,.05)}
.btn-gm{color:var(--gm-ink);background:linear-gradient(135deg,var(--gm2),var(--gm))}
.btn-gm:hover{transform:translateY(-1px);box-shadow:0 8px 26px var(--gm-glow)}
.btn-sm{font-size:12.5px;padding:7px 14px;border-radius:8px}
.btn-lg{font-size:15.5px;padding:16px 32px;border-radius:var(--r)}
.btn-full{width:100%}
/* Sur telephone, un libelle long doit pouvoir passer a la ligne : sinon le
   bouton impose sa largeur a toute la page. */
@media(max-width:560px){
  .btn-lg{white-space:normal;text-align:center;padding:14px 20px}
  .hero-cta .btn,.cta-btns .btn,.flex-c .btn{flex:1 1 100%;min-width:0}}

/* -- Rythme des sections --------------------------------------------------- */
main{position:relative;z-index:1}
.sec{padding:84px 0}
.sec-sm{padding:44px 0}
@media(max-width:760px){.sec{padding:56px 0}.sec-sm{padding:40px 0}}

/* Le surtitre n'est plus une pastille mais un filet + une capitale : c'est la
   signaletique d'affiche, et elle se lit de loin. */
.eyebrow{display:inline-flex;align-items:center;gap:11px;font-size:11px;font-weight:900;
  letter-spacing:.2em;text-transform:uppercase;color:var(--cyan);background:none;border:0;
  padding:0;margin-bottom:18px}
.eyebrow::before{content:"";width:30px;height:3px;background:currentColor;flex-shrink:0}
.eyebrow .ed{display:none}
.eyebrow svg{width:13px;height:13px}
.sec-head .eyebrow{justify-content:center}
@keyframes pulse{50%{opacity:.35}}

.h-xl{font-size:clamp(34px,6.2vw,70px);letter-spacing:-2.8px;line-height:1.03}
.h-l{font-size:clamp(27px,4.2vw,46px);letter-spacing:-1.9px;line-height:1.08}
.h-m{font-size:clamp(20px,2.4vw,27px);letter-spacing:-.9px;line-height:1.16}
.cy{color:var(--cyan)}
.lead{font-size:15.5px;color:var(--muted);line-height:1.7;max-width:62ch}
.sec-head{max-width:820px;margin:0 auto 46px}
.sec-head .lead{margin-top:16px;margin-inline:auto}
.sec-head.left{margin-inline:0;text-align:left;max-width:none}
.sec-head.left .lead{margin-inline:0}

/* -- Cartes ---------------------------------------------------------------- */
.card{background:var(--bg1);border:1px solid var(--border);border-radius:var(--r-lg);
  padding:24px;position:relative;transition:border-color .2s,background .2s}
.card-h:hover{border-color:rgba(255,255,255,.2);background:var(--bg2)}

/* -- Accroche -------------------------------------------------------------- */
.hero{padding:56px 0 88px;overflow-x:clip}
.hero-in{display:grid;grid-template-columns:minmax(0,1.06fr) minmax(0,.94fr);gap:48px;align-items:center}
.hero-in>*{min-width:0}
.hero h1{margin-bottom:18px}
.hero .lead{font-size:16px;margin-bottom:26px}
.hero-cta{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:26px}
.hero-trust{display:flex;gap:22px;flex-wrap:wrap;font-size:13px;color:var(--muted)}
.hero-trust li{display:flex;align-items:center;gap:7px}
.hero-trust b{color:var(--white);font-weight:700}
.hero-trust svg{width:15px;height:15px;color:var(--green);flex-shrink:0}
@media(max-width:920px){.hero-in{grid-template-columns:minmax(0,1fr);gap:36px}.hero{padding:32px 0 64px}}

/* Apercu du panel (reprise fidele des composants du panel) */
.mock{background:var(--bg1);border:1px solid var(--border);border-radius:var(--r-lg);
  overflow:hidden;box-shadow:var(--sh-lg)}
.mock-bar{display:flex;align-items:center;gap:9px;padding:11px 14px;border-bottom:1px solid var(--border);
  background:var(--bg-soft)}
.mock-bar .dot{width:8px;height:8px;border-radius:50%;background:var(--green);
  box-shadow:0 0 7px var(--green);flex-shrink:0}
.mock-bar b{font-size:13px;color:var(--white);font-weight:700}
.mock-bar .st{margin-left:auto;font-size:10.5px;font-weight:800;letter-spacing:.06em;
  text-transform:uppercase;color:var(--green);background:var(--green-d);
  border:1px solid rgba(34,197,94,.22);padding:3px 9px;border-radius:100px}
.mock-body{padding:16px 14px}
.mock-res{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-bottom:14px}
.mock-r{background:var(--bg-soft);border:1px solid var(--border);border-radius:var(--r-sm);padding:11px 12px}
.mock-r .k{font-size:10.5px;color:var(--muted);letter-spacing:.05em;text-transform:uppercase;font-weight:700}
.mock-r .v{font-size:17px;color:var(--white);font-weight:800;letter-spacing:-.4px;margin:3px 0 7px;
  font-variant-numeric:tabular-nums}
.mock-bar-in{height:4px;border-radius:100px;background:var(--bg3);overflow:hidden}
.mock-bar-in i{display:block;height:100%;border-radius:100px;background:var(--cyan);width:0;
  transition:width 1.2s var(--ease)}
.mock-log{background:var(--bg-soft);border:1px solid var(--border);border-radius:var(--r-sm);
  padding:12px 13px;font-family:var(--mono);font-size:11.5px;line-height:1.95;color:var(--muted)}
.mock-log .t{color:var(--grey2)}
.mock-log .ok{color:var(--green)}
.mock-log .cy{color:var(--cyan)}
.mock-foot{display:flex;gap:7px;padding:0 14px 14px;flex-wrap:wrap}
.mock-chip{font-size:11px;font-weight:600;color:var(--muted);background:var(--bg2);
  border:1px solid var(--border);border-radius:var(--r-sm);padding:4px 11px}

/* -- Bandeau des jeux ------------------------------------------------------ */
.marquee{overflow:hidden;position:relative;padding:14px 0;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.marquee-t{display:flex;gap:10px;width:max-content;animation:slide 54s linear infinite}
.marquee:hover .marquee-t{animation-play-state:paused}
@keyframes slide{to{transform:translateX(-50%)}}
.mq-item{display:flex;align-items:center;gap:8px;padding:8px 16px;border-radius:var(--r-sm);
  border:1px solid var(--border);background:var(--bg1);font-size:13px;font-weight:600;
  color:var(--muted);white-space:nowrap;transition:.16s}
.mq-item:hover{border-color:var(--border-c);color:var(--white)}
.mq-item::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--cyan);opacity:.6}

/* -- Signature de gamme ----------------------------------------------------
   Le trace reste BLANC en toutes circonstances : c'est la carte, le liseré et
   les accents qui portent la couleur de la gamme, jamais la signature. ------ */
.sig{display:block;background:var(--white);
  -webkit-mask-image:var(--sig);mask-image:var(--sig);
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
  -webkit-mask-size:contain;mask-size:contain;
  -webkit-mask-position:left center;mask-position:left center}
/* width:min() plutot que width + max-width : un pourcentage en max-width est
   ignore quand le parent calcule sa taille intrinseque. La signature imposait
   alors un plancher a sa colonne, et la page debordait en largeur. */
.sig-sm{height:22px;width:min(128px,100%)}
.sig-md{height:34px;width:min(200px,100%)}
.sig-lg{height:52px;width:min(305px,100%)}
.sig-xl{height:78px;width:min(455px,100%)}
@media(max-width:1040px){.sig-xl{height:56px;width:min(330px,100%)}}
@media(max-width:600px){.sig-lg{height:40px;width:min(235px,100%)}
  .sig-xl{height:44px;width:min(255px,100%)}}

/* -- Les deux boutons de gamme ---------------------------------------------
   Deux grandes tuiles plutot qu'un petit interrupteur : c'est le choix le plus
   structurant de la page, il doit se voir. Chacune porte SA SIGNATURE (l'image,
   jamais le nom en toutes lettres), son materiel et son prix d'entree.
   Au clic, l'aplat de la gamme balaie la tuile de la gauche vers la droite. -- */
.gm-pick{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin-bottom:30px}
@media(max-width:660px){.gm-pick{grid-template-columns:minmax(0,1fr);gap:10px}}

.gm-tile{position:relative;overflow:hidden;isolation:isolate;text-align:left;
  padding:22px 24px;border-radius:var(--r-lg);background:var(--bg1);
  border:2px solid var(--border-2);cursor:pointer;
  transition:border-color .3s var(--ease),transform .3s var(--ease),box-shadow .3s var(--ease)}
.gm-tile:hover{border-color:var(--gm);transform:translateY(-2px)}
.gm-tile.on{border-color:var(--gm);box-shadow:0 14px 44px var(--gm-glow)}

/* L'aplat qui se remplit. transform plutot que width : c'est compose par le GPU. */
.gm-fill{position:absolute;inset:0;z-index:-1;background:var(--gm-block);
  transform:scaleX(0);transform-origin:left center;
  transition:transform .52s var(--ease)}
.gm-tile.on .gm-fill{transform:scaleX(1)}

.gm-in{display:flex;flex-direction:column;gap:9px;position:relative}
.gm-sig{display:block}
.gm-hw{font-size:13px;font-weight:700;color:var(--muted);transition:color .3s .1s}
.gm-from{font-size:13px;color:var(--faint);transition:color .3s .1s}
.gm-from b{font-size:17px;font-weight:900;letter-spacing:-.5px;color:var(--white);
  transition:color .3s .1s}
/* Une fois l'aplat en place, tout le texte passe a l'encre de la gamme.
   La signature, elle, reste blanche : c'est la regle de la charte. */
.gm-tile.on .gm-hw{color:var(--gm-bink);opacity:.84}
.gm-tile.on .gm-from{color:var(--gm-bink);opacity:.8}
.gm-tile.on .gm-from b{color:var(--gm-bink);opacity:1}

.gm-tick{position:absolute;top:18px;right:18px;width:30px;height:30px;border-radius:50%;
  display:grid;place-items:center;background:var(--gm-bink);color:var(--gm-block);
  transform:scale(0) rotate(-45deg);opacity:0;
  transition:transform .38s cubic-bezier(.34,1.56,.64,1) .18s,opacity .25s .18s}
.gm-tick svg{width:16px;height:16px;stroke-width:2.6}
.gm-tile.on .gm-tick{transform:scale(1) rotate(0);opacity:1}
@media(prefers-reduced-motion:reduce){
  .gm-fill{transition:none}.gm-tick{transition:none}.gm-tile{transition:none}}

/* -- Grille tarifaire ------------------------------------------------------ */
.price-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;align-items:stretch}
@media(max-width:1040px){.price-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:580px){.price-grid{grid-template-columns:minmax(0,1fr)}}

.flip{perspective:1500px}
.flip-in{display:grid;height:100%;transform-style:preserve-3d;transition:transform .66s var(--ease)}
.flip.turned .flip-in{transform:rotateY(180deg)}
.face{grid-area:1/1;backface-visibility:hidden;-webkit-backface-visibility:hidden;display:flex}
.face.back{transform:rotateY(180deg)}
.face>*{width:100%}

/* La carte s'ouvre sur un aplat de sa gamme : on identifie l'offre a la
   couleur et a la signature avant meme d'avoir lu le nom du palier. */
.plan{display:flex;flex-direction:column;height:100%;background:var(--bg1);
  border:1px solid var(--border-2);border-radius:var(--r-lg);
  position:relative;overflow:hidden;transition:border-color .2s,box-shadow .25s}
.plan:hover{border-color:var(--gm);box-shadow:0 12px 34px rgba(0,0,0,.5)}
.plan.pop{border-color:var(--gm)}
.plan-top{background:var(--gm-block);padding:16px 18px;display:flex;align-items:center;
  justify-content:space-between;gap:10px;min-height:58px}
.plan-tag{padding:4px 10px;border-radius:100px;background:var(--gm-bink);color:var(--gm-block);
  font-size:9.5px;font-weight:900;letter-spacing:.1em;text-transform:uppercase;flex-shrink:0}
.plan-body{display:flex;flex-direction:column;flex:1;padding:20px 19px 18px}
.plan-name{font-size:23px;font-weight:900;letter-spacing:-1px}
/* « BOX » est le nom du produit : present, mais il ne mange pas le palier. */
.plan-box{font-size:12.5px;font-weight:900;letter-spacing:.14em;color:var(--gm2);
  display:block;margin-bottom:2px}
.plan-base{font-size:12.5px;color:var(--muted);margin-bottom:16px}
.plan-price{display:flex;align-items:baseline;gap:6px}
.plan-price .v{font-size:42px;font-weight:900;color:var(--white);letter-spacing:-2.2px;
  line-height:1;font-variant-numeric:tabular-nums}
.plan-price .u{font-size:12.5px;color:var(--muted);font-weight:700;display:flex;
  flex-direction:column;line-height:1.25}
.plan-price .u i{font-style:normal;color:var(--faint);font-weight:600}
/* Le trimestre ne merite pas un interrupteur : une ligne sous le prix suffit. */
.plan-alt{font-size:11.6px;color:var(--faint);margin:9px 0 17px;line-height:1.55}
.plan-alt b{color:var(--gm2);font-weight:800}
.plan-alt .save{display:inline-block;margin-left:5px;font-size:9.6px;font-weight:900;
  letter-spacing:.05em;color:var(--green);background:var(--green-d);
  border:1px solid rgba(34,197,94,.3);padding:1px 6px;border-radius:100px;vertical-align:2px}
.plan-specs{display:flex;flex-direction:column;gap:9px;padding:15px 0;margin-bottom:15px;
  border-top:1px solid var(--border);border-bottom:1px solid var(--border);flex:1}
.plan-specs li{display:flex;align-items:flex-start;gap:9px;font-size:13px;line-height:1.4}
.plan-specs .k{color:var(--white);font-weight:600}
.plan-specs .hw{color:var(--muted);font-size:11px;display:block}
.plan-specs svg{width:14px;height:14px;color:var(--gm);flex-shrink:0;margin-top:3px}
.plan-for{font-size:12px;color:var(--muted);text-align:center;margin-top:9px;
  min-height:3.4em;display:flex;align-items:flex-start;justify-content:center}

/* Carte sur mesure */
.custom-card{margin-top:14px;border-radius:var(--r-xl);padding:32px;position:relative;overflow:hidden;
  background:var(--bg1);border:1px solid var(--border);
  display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:34px;align-items:center}
.cc-bar{height:5px;border-radius:100px;background:var(--bg3);overflow:hidden}
.cc-fill{height:100%;border-radius:100px;background:var(--cyan);width:0;transition:width 1.1s var(--ease)}

/* Tarif a l'unite : trois lignes et un exemple. Aucun reglage, c'est un
   tableau de prix, pas un configurateur. */
.cc-unit{border:1px solid var(--border);border-radius:var(--r-lg);background:var(--bg-soft);
  padding:6px 20px 20px;display:flex;flex-direction:column}
.cc-unit-top{display:flex;align-items:baseline;justify-content:space-between;gap:10px;
  padding:14px 0 12px;border-bottom:1px solid var(--border);margin-bottom:4px}
.cc-unit-top span{font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--faint);font-weight:800}
.cc-unit-top b{font-size:15px;font-weight:900;color:var(--gm2);letter-spacing:-.3px}
.cc-u-row{display:flex;align-items:center;gap:12px;padding:13px 0;border-bottom:1px solid var(--border)}
.cc-u-ic{width:30px;height:30px;border-radius:var(--r-sm);display:grid;place-items:center;flex-shrink:0;
  background:var(--bg2);border:1px solid var(--border)}
.cc-u-ic svg{width:15px;height:15px;color:var(--gm)}
.cc-u-l{flex:1;min-width:0;font-size:13.5px;color:var(--muted)}
.cc-u-v{font-size:15px;font-weight:900;color:var(--white);letter-spacing:-.3px;
  font-variant-numeric:tabular-nums;white-space:nowrap}
.cc-u-ex{display:flex;align-items:baseline;justify-content:space-between;gap:12px;
  flex-wrap:wrap;padding-top:16px;margin-top:auto}
.cc-u-ex > span{font-size:12.5px;color:var(--faint)}
.cc-u-ex b{font-size:24px;font-weight:900;color:var(--white);letter-spacing:-1px;
  font-variant-numeric:tabular-nums}
.cc-u-ex b i{font-style:normal;font-size:13px;font-weight:700;color:var(--muted)}
@media(max-width:860px){.custom-card{grid-template-columns:minmax(0,1fr);padding:24px;gap:22px}}

/* -- Grilles --------------------------------------------------------------- */
.grid-2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.grid-3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.grid-4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
@media(max-width:960px){.grid-3,.grid-4{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:620px){.grid-2,.grid-3,.grid-4{grid-template-columns:minmax(0,1fr)}}

.feat{padding:22px 20px}
.feat-ic{width:38px;height:38px;border-radius:10px;display:grid;place-items:center;margin-bottom:14px;
  background:var(--cyan-d);border:1px solid var(--border-c)}
.feat-ic svg{width:18px;height:18px;color:var(--cyan)}
.feat h3{font-size:15.5px;margin-bottom:7px;letter-spacing:-.4px}
.feat p{font-size:13.5px;color:var(--muted);line-height:1.62}

/* -- Chiffres -------------------------------------------------------------- */
.stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;background:var(--border);
  border:1px solid var(--border);border-radius:var(--r-lg);overflow:hidden}
.stat{background:var(--bg1);padding:26px 18px;text-align:center}
.stat .v{font-size:clamp(24px,3vw,32px);font-weight:900;color:var(--white);letter-spacing:-1.3px;
  line-height:1;font-variant-numeric:tabular-nums;margin-bottom:6px}
.stat .v em{font-style:normal;color:var(--cyan)}
.stat .k{font-size:11.5px;color:var(--muted);font-weight:600}
@media(max-width:760px){.stats{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* -- Comparatif des gammes ------------------------------------------------- */
.vs{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:14px}
@media(max-width:860px){.vs{grid-template-columns:minmax(0,1fr)}}
/* La gamme n'est plus une carte sombre a liseré colore : c'est un APLAT entier
   de sa couleur. Deux grands blocs, l'or et le vert, qu'on lit d'un coup d'oeil.
   Tout le texte passe a l'encre de la gamme ; seule la signature reste blanche.
   Les filets et les pastilles sont tires de l'encre, pour rester lisibles sur
   l'or comme sur le vert (rgba en secours si color-mix n'est pas connu). */
.vs-card{padding:30px 28px;border-radius:var(--r-xl);background:var(--gm-block);
  color:var(--gm-bink);border:0;position:relative;overflow:hidden;
  transition:transform .3s var(--ease),box-shadow .3s var(--ease)}
.vs-card:hover{transform:translateY(-3px);box-shadow:0 22px 54px var(--gm-glow)}
.vs-card .sig{margin-bottom:16px}
.vs-desc{font-size:14.8px;line-height:1.68;margin-top:12px;color:inherit;opacity:.9}
.vs-tag{font-size:11px;font-weight:900;letter-spacing:.18em;text-transform:uppercase;
  color:inherit;opacity:.8}
.vs-hw{display:flex;flex-direction:column;gap:9px;margin:20px 0;padding:17px 0;
  border-top:1px solid rgba(0,0,0,.16);border-bottom:1px solid rgba(0,0,0,.16);
  border-top-color:color-mix(in srgb,var(--gm-bink) 26%,transparent);
  border-bottom-color:color-mix(in srgb,var(--gm-bink) 26%,transparent)}
.vs-hw li{display:flex;align-items:center;gap:10px;font-size:13.8px;color:inherit;opacity:.86}
.vs-hw b{color:inherit;font-weight:900;opacity:1}
.vs-hw svg{width:16px;height:16px;color:inherit;flex-shrink:0;opacity:.85}
.vs-perk{display:flex;gap:12px;margin-bottom:14px}
.vs-perk-ic{width:32px;height:32px;border-radius:var(--r-sm);display:grid;place-items:center;
  flex-shrink:0;background:rgba(0,0,0,.13);
  background:color-mix(in srgb,var(--gm-bink) 17%,transparent)}
.vs-perk-ic svg{width:16px;height:16px;color:inherit}
.vs-perk b{display:block;font-size:14px;color:inherit;font-weight:900;margin-bottom:2px}
.vs-perk span{font-size:12.8px;color:inherit;opacity:.82;line-height:1.5}
.vs-from{display:flex;align-items:baseline;gap:7px;margin-top:20px;padding-top:18px;
  border-top:1px solid rgba(0,0,0,.16);
  border-top-color:color-mix(in srgb,var(--gm-bink) 26%,transparent)}
.vs-from .v{font-size:34px;font-weight:900;color:inherit;letter-spacing:-1.6px}
.vs-from .k{font-size:12.5px;color:inherit;opacity:.8}
@media(max-width:600px){.vs-card{padding:24px 20px}}

/* -- Tableaux -------------------------------------------------------------- */
.utab{width:100%;border-collapse:collapse;font-size:13.5px}
.utab th,.utab td{padding:13px 16px;text-align:right;border-bottom:1px solid var(--border)}
.utab th:first-child,.utab td:first-child{text-align:left}
.utab thead th{font-size:10.5px;letter-spacing:.09em;text-transform:uppercase;color:var(--muted);font-weight:800}
.utab thead th:has(.utab-sig){padding:16px}
.utab-sig{margin-left:auto;height:19px;width:min(108px,100%)}
.utab th:first-child .utab-sig{margin-left:0}
.price-note{margin-top:20px;text-align:center;font-size:12.8px;color:var(--faint);
  max-width:62ch;margin-inline:auto;line-height:1.6}
.utab tbody td{font-variant-numeric:tabular-nums;color:var(--soft)}
.utab td.i{color:#DEC431;font-weight:800}
.utab td.c{color:#12B854;font-weight:800}
.utab tbody tr:last-child td{border-bottom:0}
.utab td small{color:var(--faint);font-weight:400}
.tbl-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}

/* -- Etapes ---------------------------------------------------------------- */
.steps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;counter-reset:s}
@media(max-width:960px){.steps{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:540px){.steps{grid-template-columns:minmax(0,1fr)}}
.step{padding:22px 20px;position:relative}
.step::before{counter-increment:s;content:counter(s);position:absolute;top:6px;right:16px;
  font-size:58px;font-weight:900;color:var(--bg3);line-height:1;letter-spacing:-3px;
  pointer-events:none}
.step h3{font-size:15px;margin-bottom:7px;letter-spacing:-.4px}
.step p{font-size:13.2px;color:var(--muted);line-height:1.6}
.step-ic{width:34px;height:34px;border-radius:9px;display:grid;place-items:center;margin-bottom:13px;
  background:var(--cyan-d);border:1px solid var(--border-c)}
.step-ic svg{width:16px;height:16px;color:var(--cyan)}

/* -- Questions ------------------------------------------------------------- */
.faq{max-width:780px;margin:0 auto;display:flex;flex-direction:column;gap:8px}
.qa{border:1px solid var(--border);border-radius:var(--r);background:var(--bg1);overflow:hidden;
  transition:border-color .2s}
.qa.open{border-color:var(--border-c)}
.qa-q{width:100%;display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:16px 19px;text-align:left;font-weight:700;font-size:14.5px;color:var(--white)}
.qa-ic{width:22px;height:22px;border-radius:6px;border:1px solid var(--border-w);flex-shrink:0;
  display:grid;place-items:center;position:relative;transition:.25s var(--ease)}
.qa-ic::before,.qa-ic::after{content:"";position:absolute;background:var(--muted);border-radius:2px;transition:.25s var(--ease)}
.qa-ic::before{width:9px;height:1.5px}.qa-ic::after{width:1.5px;height:9px}
.qa.open .qa-ic{background:var(--cyan);border-color:var(--cyan)}
.qa.open .qa-ic::before,.qa.open .qa-ic::after{background:#04141a}
.qa.open .qa-ic::after{opacity:0}
.qa-a{display:grid;grid-template-rows:0fr;transition:grid-template-rows .32s var(--ease)}
.qa.open .qa-a{grid-template-rows:1fr}
.qa-a>div{overflow:hidden}
.qa-a p{padding:0 19px 18px;font-size:13.8px;color:var(--muted);line-height:1.7;max-width:70ch}

/* -- Appel a l'action ------------------------------------------------------ */
.cta{border-radius:var(--r-xl);padding:48px 40px;text-align:center;background:var(--bg1);
  border:1px solid var(--border)}
.cta .lead{margin:14px auto 24px}
.cta-btns{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}
@media(max-width:620px){.cta{padding:34px 22px}}

/* -- Pied de page ---------------------------------------------------------- */
.foot{border-top:1px solid var(--border);margin-top:8px;padding:52px 0 26px;position:relative;z-index:1}

/* Bandeau d'identite */
.foot-head{display:flex;align-items:flex-start;justify-content:space-between;gap:40px;
  flex-wrap:wrap;padding-bottom:34px;margin-bottom:34px;border-bottom:1px solid var(--border)}
.foot-id{max-width:42ch;min-width:min(280px,100%)}
/* La marque : largeur du contenu, PAS de la colonne. Sinon la zone cliquable
   s'etend sur toute la grille et le survol dessine un grand rectangle. */
.foot-brand{display:inline-flex;align-items:center;gap:11px;width:fit-content;
  padding:5px 9px 5px 5px;margin-left:-5px;border-radius:10px;transition:background .16s}
.foot-brand:hover{background:rgba(255,255,255,.05)}
.foot-brand img{height:30px;width:auto;flex-shrink:0}
.foot-wm{font-size:18px;font-weight:900;letter-spacing:-.7px;color:var(--white);line-height:1}
.foot-wm em{font-style:normal;color:var(--cyan)}
.foot-id p{font-size:13.4px;color:var(--muted);line-height:1.65;margin-top:13px}

/* Les trois contacts, en pastilles lisibles plutot qu'en icones seules */
.foot-soc{display:flex;gap:10px;flex-wrap:wrap}
.foot-soc a{display:flex;align-items:center;gap:11px;padding:11px 15px 11px 12px;
  border-radius:var(--r);border:1px solid var(--border);background:var(--bg-soft);
  transition:border-color .18s,background .18s,transform .18s var(--ease)}
.foot-soc a:hover{border-color:var(--border-c);background:var(--bg2);transform:translateY(-2px)}
.foot-soc svg{width:17px;height:17px;color:var(--cyan);flex-shrink:0}
.foot-soc span{display:flex;flex-direction:column;font-size:11.5px;color:var(--muted);line-height:1.3}
.foot-soc b{font-size:13px;font-weight:700;color:var(--white)}

/* Les quatre colonnes de liens */
.foot-cols{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:28px;margin-bottom:34px}
.foot-col h2{font-size:10.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--faint);
  margin-bottom:15px;font-weight:800}
.foot-col a{display:flex;align-items:center;gap:6px;font-size:13.4px;color:var(--muted);
  padding:5px 0;width:fit-content;transition:color .16s}
.foot-col a:hover{color:var(--cyan)}
.foot-ext{width:11px;height:11px;transform:rotate(-45deg);opacity:.6;flex-shrink:0}

.foot-bot{border-top:1px solid var(--border);padding-top:22px;display:flex;
  justify-content:space-between;align-items:center;gap:14px;flex-wrap:wrap;
  font-size:12.4px;color:var(--faint)}
.foot-loc{display:inline-flex;align-items:center;gap:7px}
.foot-loc svg{width:13px;height:13px;color:var(--green)}

@media(max-width:880px){
  .foot-cols{grid-template-columns:repeat(2,minmax(0,1fr));gap:26px}
  .foot-head{gap:28px}
}
@media(max-width:520px){
  .foot-cols{grid-template-columns:minmax(0,1fr)}
  .foot-soc{width:100%}
  .foot-soc a{width:100%}
}

/* -- Pages de contenu ------------------------------------------------------ */
.page-hero{padding:72px 0 48px;text-align:center;border-bottom:2px solid var(--border-2);margin-bottom:52px}
.page-hero .lead{margin:14px auto 0}
.prose{width:100%;max-width:790px;margin:0 auto;font-size:14.6px;line-height:1.78;
  color:var(--soft);min-width:0}
.prose h2{font-size:20px;margin:40px 0 14px;padding-top:22px;border-top:1px solid var(--border);
  display:flex;align-items:baseline;gap:11px;letter-spacing:-.6px}
.prose h2:first-child{margin-top:0;padding-top:0;border-top:0}
.prose h2 .n{font-family:var(--mono);font-size:.78em;color:var(--cyan);font-weight:700}
.prose h3{font-size:15.5px;margin:24px 0 9px;color:var(--white);letter-spacing:-.3px}
.prose p{margin:0 0 14px}
.prose ul{margin:0 0 15px;display:flex;flex-direction:column;gap:8px}
.prose ul li{position:relative;padding-left:20px;color:var(--muted)}
.prose ul li::before{content:"";position:absolute;left:3px;top:.66em;width:5px;height:5px;
  border-radius:50%;background:var(--cyan);opacity:.7}
.prose a{color:var(--cyan);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
.prose strong,.prose b{color:var(--white);font-weight:700}
.prose table{width:100%;border-collapse:collapse;margin:6px 0 20px;font-size:13.6px}
@media(max-width:560px){.prose table{display:block;overflow-x:auto;
  -webkit-overflow-scrolling:touch}}
.prose th,.prose td{padding:11px 14px;text-align:left;border-bottom:1px solid var(--border)}
.prose thead th{font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);font-weight:800}
.prose tbody td:first-child{color:var(--white);font-weight:600}
.note{border:1px solid var(--border);border-left:2px solid var(--cyan);border-radius:0 var(--r) var(--r) 0;
  background:var(--bg1);padding:16px 20px;margin:0 0 20px;font-size:13.8px;color:var(--muted)}
.note b{color:var(--white)}
.meta-row{display:flex;gap:9px;justify-content:center;flex-wrap:wrap;margin-top:16px}
.chip{display:inline-flex;align-items:center;gap:7px;padding:7px 14px;border-radius:var(--r-sm);
  border:1px solid var(--border);background:var(--bg1);font-size:12px;color:var(--muted);font-weight:600}
.chip svg{width:13px;height:13px;color:var(--cyan)}
.legal-wrap{display:grid;grid-template-columns:210px minmax(0,1fr);gap:44px;align-items:start}
@media(max-width:960px){.legal-wrap{grid-template-columns:minmax(0,1fr)}.toc{display:none}}
.toc{position:sticky;top:88px;align-self:start}
.toc h4{font-size:10.5px;letter-spacing:.11em;text-transform:uppercase;color:var(--muted);
  margin-bottom:12px;font-weight:800}
.toc a{display:block;padding:6px 11px;border-radius:7px;font-size:13px;color:var(--muted);
  border-left:2px solid var(--border);transition:.16s}
.toc a:hover{color:var(--white);border-left-color:var(--cyan);background:rgba(255,255,255,.03)}

/* -- Charte graphique ------------------------------------------------------ */
.sw-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(158px,1fr));gap:12px}
.sw{border:1px solid var(--border);border-radius:var(--r);overflow:hidden;background:var(--bg1);
  transition:border-color .2s;cursor:pointer}
.sw:hover{border-color:var(--border-2)}
.sw-c{height:78px;position:relative}
.sw-c::after{content:"Copier";position:absolute;inset:0;display:grid;place-items:center;
  background:rgba(0,0,0,.55);color:#fff;font-size:11px;font-weight:800;opacity:0;transition:.2s;
  letter-spacing:.06em;text-transform:uppercase}
.sw:hover .sw-c::after{opacity:1}
.sw.copied .sw-c::after{content:"Copie";opacity:1;background:rgba(34,197,94,.85)}
.sw-m{padding:11px 13px}
.sw-m b{display:block;font-size:12.8px;color:var(--white);font-weight:700}
.sw-m code{font-size:11px;color:var(--muted);font-family:var(--mono)}
.type-row{display:flex;align-items:baseline;gap:18px;padding:18px 0;border-bottom:1px solid var(--border);flex-wrap:wrap}
.type-row:last-child{border-bottom:0}
.type-row .lbl{font-size:10.5px;color:var(--faint);font-family:var(--mono);width:140px;flex-shrink:0;letter-spacing:.04em}
.dl-row{display:flex;gap:10px;flex-wrap:wrap;margin-top:18px}
.logo-box{display:grid;place-items:center;padding:32px;border-radius:var(--r-lg);
  border:1px solid var(--border);min-height:150px;position:relative}
.logo-box.dark{background:var(--bg)}
.logo-box.light{background:#f4f7fa}
.logo-box.gm{background:var(--gm-block)}
.logo-box .tag{position:absolute;top:10px;left:12px;font-size:10px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--faint);font-weight:800}
.logo-box.light .tag{color:#64748b}
.logo-box.gm .tag{color:var(--gm-bink);opacity:.8}
.dont-do{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:14px}
@media(max-width:700px){.dont-do{grid-template-columns:minmax(0,1fr)}}
.dd{padding:18px 20px;border-radius:var(--r);border:1px solid var(--border);background:var(--bg1)}
.dd.ok{border-left:2px solid var(--green)}
.dd.no{border-left:2px solid var(--red)}
.dd h4{font-size:11.5px;letter-spacing:.06em;text-transform:uppercase;margin-bottom:11px;font-weight:800}
.dd.ok h4{color:var(--green)}.dd.no h4{color:var(--red)}
.dd li{font-size:13.4px;color:var(--muted);padding:5px 0 5px 18px;position:relative}
.dd li::before{position:absolute;left:0;top:5px;font-weight:900}
.dd.ok li::before{content:"+";color:var(--green)}
.dd.no li::before{content:"-";color:var(--red)}

/* -- Paliers collaboration ------------------------------------------------- */
.tiers{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
@media(max-width:760px){.tiers{grid-template-columns:repeat(2,minmax(0,1fr))}}
.tier{position:relative;overflow:hidden;padding:26px 16px 20px;text-align:center;
  border-radius:var(--r-lg);border:1px solid var(--border);background:var(--bg1);
  transition:border-color .2s,background .2s}
.tier::before{content:"";position:absolute;top:0;left:0;right:0;height:5px;background:var(--tc)}
.tier:hover{border-color:var(--tc);background:var(--bg2)}
.tier .medal{width:40px;height:40px;border-radius:11px;margin:0 auto 12px;display:grid;place-items:center;
  background:var(--bg2);border:1px solid var(--border);color:var(--tc);transition:.2s}
.tier .medal svg{width:19px;height:19px}
.tier:hover .medal{border-color:var(--tc);background:color-mix(in srgb,var(--tc) 12%,var(--bg2))}
.tier b{display:block;font-size:13.5px;color:var(--white);font-weight:800;margin-bottom:2px}
.tier .rate{font-size:40px;font-weight:900;color:var(--tc);letter-spacing:-2px;line-height:1;margin-top:6px}
.tier small{font-size:11px;color:var(--faint);display:block;margin-top:4px}

/* -- Bandeau de reassurance, juste sous les prix ---------------------------
   Les quatre objections qui font abandonner un panier, repondues a l'endroit
   ou elles se posent : sous le bouton Commander. */
.assure{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;margin-top:26px;
  background:var(--border);border:1px solid var(--border);border-radius:var(--r-lg);overflow:hidden}
@media(max-width:900px){.assure{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:520px){.assure{grid-template-columns:minmax(0,1fr)}}
.assure li{display:flex;align-items:center;gap:10px;padding:16px 18px;background:var(--bg1);
  font-size:13px;color:var(--muted);line-height:1.4}
.assure b{color:var(--white);font-weight:800}
.assure svg{width:16px;height:16px;color:var(--green);flex-shrink:0}

/* -- Vignette jeu sur l'accueil -------------------------------------------- */
.gmini{display:flex;flex-direction:column;gap:4px;padding:20px;border-radius:var(--r-lg);
  background:var(--bg1);border:1px solid var(--border);border-top:4px solid var(--gm);
  transition:background .2s,border-color .2s,transform .25s var(--ease)}
.gmini:hover{background:var(--bg2);border-color:var(--border-2);border-top-color:var(--gm);
  transform:translateY(-2px)}
.gmini>b{font-size:16px;color:var(--white);font-weight:900;letter-spacing:-.5px}
.gmini-ic{width:34px;height:34px;border-radius:var(--r-sm);display:grid;place-items:center;
  background:var(--bg2);border:1px solid var(--border);margin-bottom:8px}
.gmini-ic svg{width:18px;height:18px;color:var(--gm)}
.gmini-ic img{width:100%;height:100%;object-fit:contain;border-radius:var(--r-sm)}
.gmini-n{font-size:38px;font-weight:900;color:var(--gm2);letter-spacing:-2px;line-height:1.05;
  font-variant-numeric:tabular-nums}
.gmini-n i{font-style:normal;font-size:14px;font-weight:700;margin-left:5px;color:var(--muted)}
.gmini-k{font-size:12px;color:var(--faint)}
.gmini-p{display:flex;align-items:center;gap:9px;margin-top:12px;padding-top:12px;
  border-top:1px solid var(--border)}
.gmini-p .sig{height:16px;width:min(92px,100%);flex-shrink:0}
.gmini-p em{font-style:normal;font-size:12px;color:var(--white);font-weight:800;white-space:nowrap}

/* -- Protection et sauvegardes ---------------------------------------------
   Deux arguments que la concurrence facture souvent en option : ils ont droit
   a leur propre bloc, avec le chiffre qui compte en tres gros. */
.duo{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
@media(max-width:900px){.duo{grid-template-columns:minmax(0,1fr)}}
.duo-card{display:flex;flex-direction:column;padding:28px;border-radius:var(--r-xl);
  background:var(--bg1);border:1px solid var(--border-2);position:relative;overflow:hidden}
.duo-card::before{content:"";position:absolute;inset:0 0 auto;height:4px;background:var(--cyan)}
.duo-top{display:flex;align-items:center;gap:14px;margin-bottom:16px}
.duo-ic{width:44px;height:44px;border-radius:var(--r);display:grid;place-items:center;flex-shrink:0;
  background:var(--cyan-d);border:1px solid var(--border-c);color:var(--cyan)}
.duo-ic svg{width:22px;height:22px}
.duo-k{display:block;font-size:10.5px;font-weight:900;letter-spacing:.16em;text-transform:uppercase;
  color:var(--cyan)}
.duo-top h3{font-size:24px;font-weight:900;letter-spacing:-1px;margin-top:2px}
.duo-n{margin-left:auto;font-size:40px;font-weight:900;color:var(--white);letter-spacing:-2px;
  line-height:1;font-variant-numeric:tabular-nums;display:flex;align-items:baseline;gap:5px}
.duo-n i{font-style:normal;font-size:12.5px;font-weight:800;color:var(--muted);letter-spacing:0}
@media(max-width:480px){.duo-n{font-size:32px}.duo-top{flex-wrap:wrap}}
.duo-lead{font-size:14.4px;color:var(--muted);line-height:1.66;margin-bottom:20px}

.duo-layers{display:grid;gap:1px;background:var(--border);border:1px solid var(--border);
  border-radius:var(--r);overflow:hidden;flex:1}
.duo-l{display:flex;align-items:flex-start;gap:14px;padding:13px 15px;background:var(--bg-soft)}
.duo-l b{font-size:13px;font-weight:900;color:var(--cyan);font-family:var(--mono);flex-shrink:0;
  width:26px;padding-top:1px}
.duo-l span{font-size:12.6px;color:var(--muted);line-height:1.5}
.duo-l em{display:block;font-style:normal;color:var(--white);font-weight:700;font-size:13px}

.duo-steps{display:flex;flex-direction:column;gap:12px;flex:1}
.duo-steps li{display:flex;align-items:flex-start;gap:13px;padding:13px 15px;border-radius:var(--r);
  background:var(--bg-soft);border:1px solid var(--border)}
.duo-s-ic{width:32px;height:32px;border-radius:var(--r-sm);display:grid;place-items:center;flex-shrink:0;
  background:var(--bg2);border:1px solid var(--border);color:var(--cyan)}
.duo-s-ic svg{width:16px;height:16px}
.duo-steps span{font-size:12.6px;color:var(--muted);line-height:1.5}
.duo-steps b{display:block;color:var(--white);font-weight:800;font-size:13.6px;margin-bottom:1px}

.duo-foot{display:flex;align-items:flex-start;gap:9px;margin-top:18px;padding-top:16px;
  border-top:1px solid var(--border);font-size:12.8px;color:var(--faint);line-height:1.5}
.duo-foot svg{width:15px;height:15px;color:var(--green);flex-shrink:0;margin-top:1px}

/* -- Questionnaire de dimensionnement --------------------------------------
   Trois etapes, jamais plus d'une a l'ecran : on repond, ca avance tout seul.
   Le calcul se fait dans le navigateur, sans rechargement. */
.wiz{border:1px solid var(--border-2);border-radius:var(--r-xl);background:var(--bg1);
  overflow:hidden}
.wiz-nav{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));background:var(--border);
  gap:1px;border-bottom:1px solid var(--border)}
.wiz-nav li{display:flex;align-items:center;gap:11px;padding:15px 18px;background:var(--bg-soft);
  font-size:13.5px;font-weight:800;color:var(--faint);transition:color .25s,background .25s}
.wiz-nav li i{width:24px;height:24px;border-radius:50%;display:grid;place-items:center;flex-shrink:0;
  font-style:normal;font-size:12px;font-weight:900;background:var(--bg3);color:var(--muted);
  transition:background .25s,color .25s}
.wiz-nav li.on{color:var(--white);background:var(--bg1)}
.wiz-nav li.on i{background:var(--cyan);color:#04141a}
.wiz-nav li.done i{background:var(--green);color:#04141a}
@media(max-width:620px){.wiz-nav li{padding:12px;font-size:12px;gap:8px}
  .wiz-nav li i{width:21px;height:21px;font-size:11px}}

.wiz-step{padding:26px}
.wiz-step[hidden]{display:none}
.wiz-step.on{animation:wizIn .34s var(--ease)}
@keyframes wizIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){.wiz-step.on{animation:none}}
.wiz-q{font-size:17px;font-weight:800;color:var(--white);margin-bottom:18px;letter-spacing:-.4px}
.wiz-back{margin-top:22px}

/* Etape 1 : la grille de jeux */
.wiz-games{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px}
.wiz-game{display:flex;align-items:center;gap:12px;padding:13px 14px;text-align:left;
  border-radius:var(--r);border:1px solid var(--border);background:var(--bg-soft);
  transition:border-color .18s,background .18s,transform .18s var(--ease)}
.wiz-game:hover{border-color:var(--cyan);background:var(--bg2);transform:translateY(-2px)}
.wiz-game.on{border-color:var(--cyan);background:var(--cyan-d)}
.wg-ic{width:38px;height:38px;border-radius:var(--r-sm);display:grid;place-items:center;flex-shrink:0;
  background:var(--bg2);border:1px solid var(--border)}
.wg-ic svg{width:20px;height:20px;color:var(--cyan)}
.wg-ic img{width:100%;height:100%;object-fit:contain;border-radius:var(--r-sm)}
.wg-n{font-size:13.5px;font-weight:700;color:var(--white);line-height:1.25}
/* Sur telephone, dix-neuf lignes empilees font une page interminable :
   on passe a deux colonnes, icone au-dessus du nom. */
@media(max-width:600px){
  .wiz-step{padding:20px 14px}
  .wiz-games{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
  .wiz-game{flex-direction:column;align-items:center;text-align:center;gap:9px;padding:14px 8px}
  .wg-ic{width:34px;height:34px}
  .wg-ic svg{width:19px;height:19px}
  .wg-n{font-size:12.5px}
}

/* Etape 2 : les options de charge */
.wiz-opts{display:grid;gap:10px}
.wiz-opt{display:flex;align-items:center;gap:14px;padding:16px 18px;text-align:left;
  border-radius:var(--r);border:1px solid var(--border);background:var(--bg-soft);
  transition:border-color .18s,background .18s}
.wiz-opt:hover{border-color:var(--cyan);background:var(--bg2)}
.wiz-opt .dot{width:18px;height:18px;border-radius:50%;border:2px solid var(--border-w);flex-shrink:0;
  display:grid;place-items:center;transition:.18s}
.wiz-opt:hover .dot{border-color:var(--cyan)}
.wiz-opt b{font-size:14.5px;color:var(--white);font-weight:700}
.wiz-opt span{display:block;font-size:12.5px;color:var(--faint);margin-top:2px}

/* Etape 3 : le curseur de joueurs */
.wiz-players{text-align:center}
.wiz-count{display:block;font-size:64px;font-weight:900;color:var(--cyan);letter-spacing:-3px;
  line-height:1;font-variant-numeric:tabular-nums;margin-bottom:6px}
.wiz-players input[type=range]{width:100%;max-width:560px;margin:14px auto 4px;display:block;
  -webkit-appearance:none;appearance:none;height:6px;border-radius:100px;background:var(--bg3);
  outline-offset:6px}
.wiz-players input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:24px;height:24px;
  border-radius:50%;background:var(--cyan);border:3px solid var(--bg1);cursor:grab;
  box-shadow:0 0 0 1px var(--cyan),0 4px 14px var(--cyan-g)}
.wiz-players input[type=range]::-moz-range-thumb{width:20px;height:20px;border-radius:50%;
  background:var(--cyan);border:3px solid var(--bg1);cursor:grab}
.wiz-quick{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;margin-top:18px}
.wiz-quick button{padding:8px 16px;border-radius:var(--r-sm);border:1px solid var(--border);
  background:var(--bg-soft);color:var(--muted);font-size:13px;font-weight:800;transition:.16s}
.wiz-quick button:hover,.wiz-quick button.on{border-color:var(--cyan);color:var(--white);background:var(--bg2)}

/* Le resultat */
.wiz-res{padding:0}
.wiz-head{background:var(--gm-block);color:var(--gm-bink);padding:24px 26px;
  display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap}
.wiz-head .sig{height:30px;width:min(180px,100%)}
.wiz-head b{display:block;font-size:12px;font-weight:900;letter-spacing:.16em;text-transform:uppercase;
  opacity:.75;margin-bottom:6px}
.wiz-head .box{font-size:27px;font-weight:900;letter-spacing:-1.1px}
.wiz-body{padding:24px 26px}
.wiz-need{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;background:var(--border);
  border:1px solid var(--border);border-radius:var(--r);overflow:hidden;margin-bottom:20px}
@media(max-width:560px){.wiz-need{grid-template-columns:minmax(0,1fr)}}
.wiz-need div{background:var(--bg-soft);padding:15px 16px}
.wiz-need .k{font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--faint);font-weight:800}
.wiz-need .v{font-size:24px;font-weight:900;color:var(--white);letter-spacing:-1px;margin-top:3px;
  font-variant-numeric:tabular-nums}
.wiz-why{font-size:13.6px;color:var(--muted);line-height:1.65;margin-bottom:20px}
.wiz-why b{color:var(--white);font-weight:700}
.wiz-price{display:flex;align-items:baseline;gap:8px;margin-bottom:18px}
.wiz-price .v{font-size:40px;font-weight:900;color:var(--white);letter-spacing:-2px;line-height:1;
  font-variant-numeric:tabular-nums}
.wiz-price .u{font-size:13px;color:var(--muted);font-weight:700}
.wiz-cta{display:flex;gap:10px;flex-wrap:wrap}

/* -- Guide « quel serveur pour quel jeu » ---------------------------------
   Une fiche par jeu : le chiffre qui compte en grand, la raison en une phrase,
   et le lien de commande dans la foulee. Le visiteur ne repart pas chercher. */
.guide{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
@media(max-width:820px){.guide{grid-template-columns:minmax(0,1fr)}}
.gcard{display:flex;flex-direction:column;background:var(--bg1);border:1px solid var(--border);
  border-left:4px solid var(--gm);border-radius:var(--r-lg);padding:22px 24px;
  transition:border-color .2s,background .2s}
.gcard:hover{background:var(--bg2);border-color:var(--border-2);border-left-color:var(--gm)}
.gcard-h{display:flex;align-items:center;gap:13px}
.gcard-h > div{min-width:0;flex:1}
.gcard-h h4{font-size:21px;font-weight:900;letter-spacing:-.8px}
/* L'icone du jeu : votre image si elle est deposee, sinon le dessin. */
.gcard-ic{width:44px;height:44px;border-radius:var(--r-sm);display:grid;place-items:center;flex-shrink:0;
  background:var(--bg2);border:1px solid var(--border)}
.gcard-ic svg{width:23px;height:23px;color:var(--gm)}
.gcard-ic img{width:100%;height:100%;object-fit:contain;border-radius:var(--r-sm)}
.gcard-pl{display:inline-flex;align-items:center;gap:6px;font-size:12px;color:var(--muted);
  font-weight:600;white-space:nowrap}
.gcard-pl svg{width:13px;height:13px;color:var(--gm);flex-shrink:0}
.gcard-num{display:flex;align-items:baseline;gap:9px;margin:14px 0 12px}
.gcard-num .v{font-size:46px;font-weight:900;color:var(--gm2);letter-spacing:-2.4px;line-height:1;
  font-variant-numeric:tabular-nums}
.gcard-num .u{font-size:12.5px;color:var(--white);font-weight:700;display:flex;flex-direction:column;
  line-height:1.3}
.gcard-num .u i{font-style:normal;color:var(--faint);font-weight:500}
.gcard-why{font-size:13.4px;color:var(--muted);line-height:1.62;flex:1}
.gcard-f{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;
  margin-top:18px;padding-top:16px;border-top:1px solid var(--border)}
.gcard-plan{display:flex;align-items:center;gap:11px;min-width:0}
.gcard-plan .sig{flex-shrink:0;height:18px;width:min(104px,100%)}
.gcard-plan span{font-size:12.5px;color:var(--muted);line-height:1.35;white-space:nowrap}
.gcard-plan b{color:var(--white);font-weight:800;display:block}
@media(max-width:420px){.gcard-plan span{white-space:normal}}

/* -- Emplacements d'illustration ------------------------------------------- */
/* Les quatre paliers, en resume, dans le teaser collaboration de l'accueil.
   Ils ont remplace l'ancien cadre d'illustration : meme place, mais du
   contenu utile plutot qu'un emplacement a remplir. */
.tease-tiers{display:flex;flex-direction:column;gap:8px;padding:0 34px 0 0}
.tt-row{display:flex;align-items:center;gap:12px;padding:12px 15px;border-radius:var(--r);
  background:var(--bg-soft);border:1px solid var(--border);border-left:3px solid var(--tc);
  transition:background .18s,transform .18s var(--ease)}
.tt-row:hover{background:var(--bg2);transform:translateX(3px)}
.tt-ic{width:26px;height:26px;border-radius:7px;display:grid;place-items:center;flex-shrink:0;
  background:var(--bg2);border:1px solid var(--border);color:var(--tc)}
.tt-ic svg{width:14px;height:14px}
.tt-n{font-size:13.5px;font-weight:800;color:var(--white);letter-spacing:-.2px}
.tt-m{font-size:11.5px;color:var(--faint);margin-left:auto;white-space:nowrap}
.tt-r{font-size:17px;font-weight:900;color:var(--tc);letter-spacing:-.6px;
  font-variant-numeric:tabular-nums;min-width:46px;text-align:right}
@media(max-width:860px){.tease-tiers{padding:0}}
@media(max-width:400px){.tt-m{display:none}}

/* -- Apparition ------------------------------------------------------------ */
.rv{opacity:0;transform:translateY(14px);transition:opacity .55s var(--ease),transform .55s var(--ease)}
.rv.in{opacity:1;transform:none}
.rv-d1{transition-delay:.05s}.rv-d2{transition-delay:.1s}.rv-d3{transition-delay:.15s}
.rv-d4{transition-delay:.2s}.rv-d5{transition-delay:.25s}.rv-d6{transition-delay:.3s}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important;scroll-behavior:auto!important}
  .rv{opacity:1;transform:none}
}

/* -- Divers ---------------------------------------------------------------- */
.center{text-align:center}
.mt-s{margin-top:12px}.mt-m{margin-top:22px}.mt-l{margin-top:36px}
.mb-m{margin-bottom:22px}
.flex-c{display:flex;gap:10px;align-items:center;justify-content:center;flex-wrap:wrap}
.tick{display:inline-flex;align-items:flex-start;gap:8px;font-size:13.5px;color:var(--muted)}
.tick svg{width:15px;height:15px;color:var(--green);flex-shrink:0;margin-top:3px}
.badge-new{display:inline-flex;align-items:center;gap:6px;padding:3.5px 10px;border-radius:100px;
  font-size:10px;font-weight:800;letter-spacing:.09em;text-transform:uppercase;
  background:var(--cyan-d);border:1px solid var(--border-c);color:var(--cyan)}
.badge-new svg{width:12px;height:12px}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* -- Bandeau Discord ------------------------------------------------------- */
.discord-band{display:flex;align-items:center;justify-content:space-between;gap:28px;
  flex-wrap:wrap;padding:28px 30px;border-color:var(--border-c);background:var(--cyan-d)}
.db-l{display:flex;align-items:flex-start;gap:16px;flex:1;min-width:min(280px,100%)}
.db-ic{width:48px;height:48px;border-radius:12px;display:grid;place-items:center;flex-shrink:0;
  background:var(--bg1);border:1px solid var(--border-c);color:var(--cyan)}
.db-ic svg{width:24px;height:24px}
.db-r{display:flex;flex-direction:column;align-items:flex-end;gap:9px;flex-shrink:0}
.db-url{font-size:11.5px;color:var(--muted)}
@media(max-width:700px){.discord-band{padding:24px}.db-r{align-items:stretch;width:100%}
  .db-r .btn{width:100%}.db-url{text-align:center}}

/* -- Mascotte --------------------------------------------------------------
   Elle occupe seule la colonne droite du hero : c'est le visage de la marque,
   et le panel a droit a ses propres reconstitutions, plus bas et en grand. */
.hero-art{position:relative;display:grid;place-items:center;min-height:clamp(320px,34vw,520px)}
.mascot-glow{position:absolute;width:74%;aspect-ratio:1;border-radius:50%;
  background:radial-gradient(circle,rgba(0,229,255,.16),transparent 68%);filter:blur(24px)}
.mascotte{position:relative;z-index:1;width:min(430px,84%);pointer-events:none;
  filter:drop-shadow(0 30px 58px rgba(0,0,0,.72));animation:float 6s ease-in-out infinite}
.mascotte img{width:100%;height:auto}
@keyframes float{50%{transform:translateY(-14px)}}
@media(max-width:920px){.hero-art{min-height:0}.mascotte{width:min(320px,66%)}}
@media(max-width:560px){.mascotte{width:min(240px,62%)}}
@media(prefers-reduced-motion:reduce){.mascotte{animation:none}}

/* =============================================================================
   RECONSTITUTIONS DE L'ESPACE CLIENT
   Memes surfaces, memes rayons, meme mise en page que le panel reel.
   ============================================================================= */
.mk{position:relative;z-index:1;display:grid;grid-template-columns:158px minmax(0,1fr);background:var(--bg);border:1px solid var(--border-2);
  border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--sh-lg);font-size:12px;line-height:1.5}
.mk-side{background:var(--bg-soft);border-right:1px solid var(--border);padding:13px 10px;
  display:flex;flex-direction:column;gap:12px}
@media(max-width:620px){.mk{grid-template-columns:minmax(0,1fr)}.mk-side{display:none}}
.mk-logo{display:flex;align-items:center;gap:7px;padding:2px 6px 10px;border-bottom:1px solid var(--border)}
.mk-logo img{height:18px;width:auto}
.mk-logo b{font-size:13px;color:var(--white);font-weight:900;letter-spacing:-.4px}
.mk-logo b span{color:var(--cyan)}
.mk-nav{display:flex;flex-direction:column;gap:1px;flex:1}
.mk-nav-i{display:flex;align-items:center;gap:8px;padding:6.5px 9px;border-radius:7px;
  color:var(--muted);font-size:11.5px;font-weight:500}
.mk-nav-i svg{width:13px;height:13px;flex-shrink:0}
.mk-nav-i.on{background:var(--bg2);color:var(--white);font-weight:600;
  box-shadow:inset 2px 0 0 var(--cyan)}
.mk-credit{background:var(--bg1);border:1px solid var(--border);border-radius:8px;padding:8px 10px}
.mk-credit span{display:block;font-size:9px;letter-spacing:.09em;text-transform:uppercase;color:var(--faint);font-weight:800}
.mk-credit b{font-size:13px;color:var(--white);font-weight:800;letter-spacing:-.3px}

.mk-main{min-width:0;display:flex;flex-direction:column}
.mk-head{display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:11px 15px;border-bottom:1px solid var(--border);background:var(--bg-soft)}
.mk-head b{display:block;font-size:13px;color:var(--white);font-weight:800;letter-spacing:-.3px}
.mk-head span{display:block;font-size:10.5px;color:var(--muted)}
.mk-search{display:flex!important;align-items:center;gap:8px;font-size:10.5px;color:var(--faint)!important;
  background:var(--bg1);border:1px solid var(--border);border-radius:100px;padding:4px 6px 4px 12px}
.mk-search i{font-family:var(--mono);font-size:8.5px;background:var(--bg3);border-radius:4px;
  padding:2px 5px;color:var(--muted);font-style:normal}
.mk-body{padding:14px 15px;flex:1}

/* Tableau de bord */
.mk-stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin-bottom:14px}
@media(max-width:760px){.mk-stats{grid-template-columns:repeat(2,minmax(0,1fr))}}
.mk-stat{background:var(--bg1);border:1px solid var(--border);border-radius:10px;padding:11px 12px}
.mk-stat-ic{display:grid;place-items:center;width:24px;height:24px;border-radius:7px;margin-bottom:7px;
  background:var(--cyan-d);border:1px solid var(--border-c);color:var(--cyan)}
.mk-stat-ic svg{width:12px;height:12px}
.mk-stat b{display:block;font-size:19px;color:var(--white);font-weight:900;letter-spacing:-.7px;line-height:1.1}
.mk-stat > span:not(.mk-stat-ic){display:block;font-size:10px;color:var(--muted);margin-top:2px}
.mk-sec{display:flex;align-items:center;gap:8px;margin-bottom:9px}
.mk-sec b{font-size:12.5px;color:var(--white);font-weight:800}
.mk-sec i{font-size:9.5px;font-weight:800;color:var(--muted);background:var(--bg3);
  border-radius:100px;padding:1px 7px;font-style:normal}
.mk-sec span{margin-left:auto;font-size:10.5px;color:var(--muted)}
.mk-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
@media(max-width:520px){.mk-grid{grid-template-columns:minmax(0,1fr)}}
.mk-card{position:relative;background:var(--bg1);border:1px solid var(--border);
  border-radius:10px;padding:11px 12px;overflow:hidden}
.mk-edge{position:absolute;top:0;left:0;right:0;height:2px;
  background:linear-gradient(90deg,var(--gm),transparent 75%)}
.mk-card-h{display:flex;align-items:center;gap:8px;margin-bottom:9px}
.mk-ic{width:26px;height:26px;border-radius:7px;display:grid;place-items:center;flex-shrink:0;
  background:var(--bg2);border:1px solid var(--border);color:var(--muted)}
.mk-ic svg{width:13px;height:13px}
.mk-ic.sm{width:23px;height:23px}.mk-ic.sm svg{width:11px;height:11px}
.mk-ic.lg{width:34px;height:34px}.mk-ic.lg svg{width:17px;height:17px}
.mk-card-txt{min-width:0;flex:1}
.mk-card-txt b{display:flex;align-items:center;gap:6px;font-size:11.5px;color:var(--white);
  font-weight:700;letter-spacing:-.15px}
.mk-card-txt span{display:block;font-size:10px;color:var(--muted);white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis}
.mk-card-f{display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding-top:8px;border-top:1px solid var(--border)}
.mk-card-res{font-size:10px;color:var(--muted);white-space:nowrap}
.mk-sig{height:15px;width:86px;flex-shrink:0}
.mk-sig-h{height:20px;width:118px;flex-shrink:0;margin-left:auto}
.mk-badge{display:inline-flex;align-items:center;gap:5px;font-size:9.5px;font-weight:700;
  padding:2px 7px;border-radius:100px;background:var(--bg2);border:1px solid var(--border);
  color:var(--muted);flex-shrink:0}
.mk-badge span{width:4.5px;height:4.5px;border-radius:50%;background:var(--muted)}
.mk-badge.up{color:var(--green);background:var(--green-d);border-color:rgba(34,197,94,.22)}
.mk-badge.up span{background:var(--green);box-shadow:0 0 5px var(--green)}
.mk-tag{font-size:9px;font-weight:800;color:var(--green);background:var(--green-d);
  border:1px solid rgba(34,197,94,.22);border-radius:100px;padding:1px 6px}

/* Fiche de service */
.mk-svc{position:relative;background:var(--bg1);border:1px solid var(--border);
  border-radius:10px;padding:14px;overflow:hidden}
.mk-svc-h{display:flex;align-items:center;gap:10px;margin-bottom:14px;padding-bottom:12px;
  border-bottom:1px solid var(--border);flex-wrap:wrap}
.mk-pool{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:11px 16px;margin-bottom:13px}
.mk-p-t{display:flex;justify-content:space-between;align-items:baseline;gap:8px;margin-bottom:5px}
.mk-p-t span{font-size:10px;color:var(--muted)}
.mk-p-t b{font-size:11px;color:var(--white);font-weight:700;white-space:nowrap;
  font-variant-numeric:tabular-nums}
.mk-p-t b i{color:var(--faint);font-weight:400;font-style:normal;margin-left:2px}
.mock-bar-in{height:3.5px;border-radius:100px;background:var(--bg3);overflow:hidden}
.mock-bar-in i{display:block;height:100%;border-radius:100px;background:var(--cyan);
  width:0;transition:width 1.2s var(--ease)}
.mk-subs{display:flex;flex-direction:column;gap:1px;border-top:1px solid var(--border);padding-top:10px}
.mk-sub{display:flex;align-items:center;gap:9px;padding:7px 0}
.mk-sub-r{font-size:10px;color:var(--muted);white-space:nowrap;margin-left:auto}

/* Panel d'un serveur */
.mk-srv{position:relative;z-index:1;background:var(--bg1);border:1px solid var(--border-2);border-radius:var(--r-lg);
  overflow:hidden;box-shadow:var(--sh-lg)}
.mk-srv-h{display:flex;align-items:center;gap:10px;padding:12px 14px;
  border-bottom:1px solid var(--border);background:var(--bg-soft)}
.mk-dot{width:8px;height:8px;border-radius:50%;background:var(--green);
  box-shadow:0 0 7px var(--green);flex-shrink:0}
.mk-srv-t{min-width:0;flex:1}
.mk-srv-t b{display:block;font-size:13px;color:var(--white);font-weight:800;letter-spacing:-.3px}
.mk-srv-t span{display:block;font-size:10.5px;color:var(--muted);white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis}
.mk-srv-b{padding:13px 14px}
.mk-gauges{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-bottom:12px}
@media(max-width:520px){.mk-gauges{grid-template-columns:minmax(0,1fr)}}
.mk-g-t{display:flex;justify-content:space-between;align-items:baseline;gap:6px;margin-bottom:5px}
.mk-g-t span{font-size:9.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);font-weight:700}
.mk-g-t b{font-size:12px;color:var(--white);font-weight:800;white-space:nowrap;
  font-variant-numeric:tabular-nums;letter-spacing:-.3px}
.mk-g-t b i{color:var(--faint);font-weight:400;font-style:normal;font-size:9.5px;margin-left:2px}
.mk-console{background:var(--bg-soft);border:1px solid var(--border);border-radius:9px;overflow:hidden}
.mk-c-h{display:flex;align-items:center;justify-content:space-between;padding:8px 11px;
  border-bottom:1px solid var(--border)}
.mk-c-h span{display:flex;align-items:center;gap:6px;font-size:10.5px;color:var(--soft);font-weight:700}
.mk-c-h svg{width:12px;height:12px;color:var(--cyan)}
.mk-c-h i{font-size:9px;font-weight:800;letter-spacing:.07em;text-transform:uppercase;
  color:var(--green);font-style:normal}
.mk-c-b{padding:9px 11px;font-family:var(--mono);font-size:10.5px;line-height:1.9;color:var(--muted)}
.mk-c-b .t{color:var(--grey2)}.mk-c-b .ok{color:var(--green)}.mk-c-b .cy{color:var(--cyan)}
.mk-c-f{display:flex;align-items:center;gap:7px;padding:8px 11px;border-top:1px solid var(--border);
  font-family:var(--mono);font-size:10.5px}
.mk-c-f span{color:var(--cyan)}
.mk-c-f em{color:var(--grey2);font-style:normal}
.mk-caret{width:6px;height:12px;background:var(--cyan);display:inline-block;
  animation:blink 1.1s steps(2) infinite}
@keyframes blink{50%{opacity:0}}
.mk-tabs{display:flex;gap:6px;flex-wrap:wrap;margin-top:12px}
.mk-tabs span{font-size:10.5px;font-weight:600;color:var(--muted);background:var(--bg2);
  border:1px solid var(--border);border-radius:100px;padding:4px 11px}
.mk-tabs span.on{color:var(--white);background:var(--bg3);border-color:var(--border-2)}

/* Tunnel de commande */
.mk-steps{display:flex;gap:5px;flex-wrap:wrap;margin-bottom:13px;padding-bottom:12px;
  border-bottom:1px solid var(--border)}
.mk-step{display:inline-flex;align-items:center;gap:6px;font-size:10px;font-weight:600;
  color:var(--muted);background:var(--bg1);border:1px solid var(--border);
  border-radius:100px;padding:3px 10px 3px 3px}
.mk-step i{width:15px;height:15px;border-radius:50%;display:grid;place-items:center;
  background:var(--bg3);color:var(--muted);font-size:8.5px;font-weight:800;font-style:normal}
.mk-step.on{color:var(--white);border-color:var(--border-c);background:var(--cyan-d)}
.mk-step.on i{background:var(--cyan);color:#04141a}
.mk-ck{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:12px;align-items:start}
@media(max-width:700px){.mk-ck{grid-template-columns:minmax(0,1fr)}}
.mk-ck-t{font-size:13px;color:var(--white);font-weight:800;letter-spacing:-.3px}
.mk-ck-s{font-size:10.5px;color:var(--muted);margin-bottom:11px}
.mk-pick{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:9px}
@media(max-width:520px){.mk-pick{grid-template-columns:minmax(0,1fr)}}
.mk-gm{background:var(--bg1);border:1px solid var(--border);border-radius:10px;padding:12px 11px}
.mk-gm.on{border-color:var(--gm-line);box-shadow:0 0 0 1px var(--gm-line)}
.mk-gm-h{display:flex;align-items:center;justify-content:space-between;gap:9px;margin-bottom:8px}
.mk-gm-h .sig{height:17px;width:98px}
.mk-tick{width:15px;height:15px;border-radius:50%;border:1.5px solid var(--border-w);
  flex-shrink:0;position:relative}
.mk-gm.on .mk-tick{background:var(--gm);border-color:var(--gm)}
.mk-gm.on .mk-tick::after{content:"";position:absolute;left:4.5px;top:2.5px;width:3.5px;height:7px;
  border:solid var(--gm-ink);border-width:0 1.6px 1.6px 0;transform:rotate(45deg)}
.mk-gm-tag{font-size:9px;font-weight:800;letter-spacing:.07em;text-transform:uppercase;
  color:var(--gm2);margin-bottom:8px}
.mk-gm-s{display:flex;flex-direction:column;gap:5px;padding:9px 0;margin-bottom:8px;
  border-top:1px solid var(--border);border-bottom:1px solid var(--border)}
.mk-gm-s li{display:flex;align-items:center;gap:7px;font-size:10.5px;color:var(--muted)}
.mk-gm-s svg{width:11px;height:11px;color:var(--gm);flex-shrink:0}
.mk-gm-p{font-size:10.5px;color:var(--muted)}
.mk-gm-p b{color:var(--gm2);font-weight:800;font-size:12px}
.mk-sum{background:var(--bg1);border:1px solid var(--border);border-radius:10px;padding:12px 13px}
.mk-sum-h{padding-bottom:9px;margin-bottom:9px;border-bottom:1px solid var(--border)}
.mk-sum-h b{display:block;font-size:12px;color:var(--white);font-weight:800}
.mk-sum-h span{font-size:10px;color:var(--muted)}
.mk-sum-l{display:flex;justify-content:space-between;font-size:10.5px;color:var(--muted);padding:3px 0}
.mk-sum-l b{color:var(--soft);font-weight:700}
.mk-sum-t{display:flex;justify-content:space-between;align-items:baseline;
  padding-top:9px;margin-top:6px;border-top:1px solid var(--border)}
.mk-sum-t span{font-size:11px;color:var(--white);font-weight:700}
.mk-sum-t b{font-size:17px;color:var(--white);font-weight:900;letter-spacing:-.6px}
.mk-sum-s{display:flex;flex-direction:column;gap:4px;margin-top:10px;padding-top:9px;
  border-top:1px solid var(--border)}
.mk-sum-s li{font-size:10px;color:var(--muted)}

/* =========================================================================
   PAGE « LES BRANCHES »
   Chaque section porte --br (la teinte de la branche) et --br-deep (sa
   teinte sombre) en style inline : toute la page se recolore a partir de
   ces deux variables, aucune regle n'est dupliquee par branche.
   ========================================================================= */

/* Les trois raccourcis, sous le titre */
.br-jump{display:flex;flex-wrap:wrap;gap:11px;justify-content:center;margin-top:26px}
.br-chip{display:inline-flex;align-items:center;gap:11px;padding:10px 16px 10px 11px;
  border-radius:100px;border:1px solid var(--border-2);background:var(--bg1);
  transition:border-color .2s,background .2s,transform .2s var(--ease)}
.br-chip:hover{background:var(--bg2);transform:translateY(-2px);
  border-color:color-mix(in srgb,var(--br) 50%,transparent)}
.br-chip img{width:30px;height:30px;object-fit:contain;flex-shrink:0}
.br-chip > span{display:flex;flex-direction:column;line-height:1.25;text-align:left}
.br-chip i{font-style:normal;font-size:11px;color:var(--faint)}

/* Le mot de marque : prefixe blanc, suffixe colore */
.br-word{font-weight:900;color:var(--white);letter-spacing:-.4px}
.br-word em{font-style:normal;color:var(--br)}

/* La carte d'une branche */
.br-card{border:1px solid var(--border-2);border-radius:var(--r-xl);background:var(--bg1);
  overflow:hidden;position:relative}
.br-card::before{content:"";position:absolute;inset:0 0 auto;height:3px;
  background:linear-gradient(90deg,var(--br),var(--br-deep));z-index:1}

.br-head{display:flex;align-items:center;gap:20px;flex-wrap:wrap;padding:26px 30px;
  border-bottom:1px solid var(--border);position:relative;
  background:radial-gradient(90% 180% at 0% 50%,
    color-mix(in srgb,var(--br-deep) 22%,transparent) 0%,transparent 60%)}
.br-head > div{flex:1;min-width:180px}
.br-logo{width:76px;height:76px;border-radius:18px;display:grid;place-items:center;flex-shrink:0;
  background:var(--bg2);border:1px solid var(--border);padding:12px;
  box-shadow:0 0 34px -8px color-mix(in srgb,var(--br) 60%,transparent)}
.br-logo img{width:100%;height:100%;object-fit:contain}
.br-tag{display:block;font-size:10.5px;letter-spacing:.15em;text-transform:uppercase;
  font-weight:800;color:var(--faint);margin-bottom:5px}
.br-name{font-size:clamp(28px,4vw,40px);letter-spacing:-1.6px;line-height:1}

.btn-br{color:#07090a;background:var(--br);border-color:var(--br);font-weight:900}
.btn-br:hover{transform:translateY(-1px);
  box-shadow:0 8px 22px -6px color-mix(in srgb,var(--br) 70%,transparent)}
.btn-br .ext{width:14px;height:14px;transform:rotate(-45deg)}

.br-body{padding:26px 30px 30px}
.br-lead{font-size:15.6px;color:var(--muted);line-height:1.72;max-width:74ch;margin-bottom:26px}

/* Les trois arguments d'AxoFree */
.br-pts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-bottom:24px}
.br-pt{padding:17px 18px;border-radius:var(--r);background:var(--bg-soft);border:1px solid var(--border)}
.br-pt-ic{width:32px;height:32px;border-radius:9px;display:grid;place-items:center;margin-bottom:11px;
  background:var(--bg2);border:1px solid var(--border);color:var(--br)}
.br-pt-ic svg{width:16px;height:16px}
.br-pt b{display:block;font-size:14px;color:var(--white);font-weight:800;margin-bottom:3px}
.br-pt > span{font-size:12.5px;color:var(--muted);line-height:1.5}

/* L'offre gratuite */
.br-offer{border:1px solid color-mix(in srgb,var(--br) 34%,var(--border));border-radius:var(--r-lg);
  overflow:hidden;background:var(--bg-soft)}
.br-offer-h{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;
  padding:16px 20px;border-bottom:1px solid var(--border);
  background:color-mix(in srgb,var(--br-deep) 16%,transparent)}
.br-offer-k{font-size:11px;letter-spacing:.14em;text-transform:uppercase;font-weight:800;color:var(--soft)}
.br-price{font-size:30px;font-weight:900;color:var(--br);letter-spacing:-1.4px;line-height:1}
.br-price i{font-style:normal;font-size:13px;font-weight:700;color:var(--muted);margin-left:4px}
.br-specs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;background:var(--border)}
.br-spec{background:var(--bg-soft);padding:18px 20px}
.br-spec-ic{display:block;color:var(--br);margin-bottom:9px}
.br-spec-ic svg{width:17px;height:17px}
.br-spec b{display:block;font-size:23px;font-weight:900;color:var(--white);letter-spacing:-1px}
.br-spec > span{display:block;font-size:12.2px;color:var(--muted);line-height:1.45;margin-top:3px}

/* Les deux offres d'AxoCloud */
.br-duo{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin-bottom:22px}
.br-off{padding:21px 22px;border-radius:var(--r-lg);background:var(--bg-soft);
  border:1px solid var(--border);border-left:3px solid var(--br)}
.br-off-k{display:inline-flex;align-items:center;gap:7px;font-size:11px;letter-spacing:.14em;
  text-transform:uppercase;font-weight:900;color:var(--br);margin-bottom:10px}
.br-off-k svg{width:14px;height:14px}
.br-off b{display:block;font-size:16.5px;color:var(--white);font-weight:800;
  letter-spacing:-.4px;margin-bottom:7px}
.br-off p{font-size:13.4px;color:var(--muted);line-height:1.62}
.br-off strong{color:var(--soft);font-weight:700}

.br-notes{display:flex;flex-direction:column;gap:10px;margin-bottom:22px}
.br-note{display:flex;gap:11px;font-size:13.2px;color:var(--muted);line-height:1.6}
.br-note svg{width:16px;height:16px;color:var(--br);flex-shrink:0;margin-top:2px}
.br-note b{color:var(--white);font-weight:700}

/* Les deux colonnes d'AxoBilling */
.br-two{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:26px}
.br-side-t{display:flex;align-items:center;gap:9px;font-size:13px;letter-spacing:.1em;
  text-transform:uppercase;font-weight:900;color:var(--white);
  padding-bottom:13px;margin-bottom:15px;border-bottom:1px solid var(--border)}
.br-side-t svg{width:16px;height:16px;color:var(--br)}
.br-list{display:flex;flex-direction:column;gap:13px}
.br-list li{display:flex;gap:11px;align-items:flex-start}
.br-list svg{width:16px;height:16px;color:var(--br);flex-shrink:0;margin-top:2px}
.br-list b{display:block;font-size:14px;color:var(--white);font-weight:700}
.br-list span span,.br-list li > span{font-size:12.8px;color:var(--muted);line-height:1.5}
.br-more{font-size:13px;color:var(--faint);font-style:italic;margin-top:15px}

@media(max-width:820px){
  .br-pts,.br-specs,.br-duo,.br-two{grid-template-columns:minmax(0,1fr)}
  .br-specs{gap:1px}
  .br-head,.br-body{padding-left:20px;padding-right:20px}
  .br-two{gap:30px}
}
@media(max-width:560px){
  .br-head{gap:14px}
  .br-logo{width:60px;height:60px;border-radius:15px;padding:9px}
  .btn-br{width:100%}
}