/* ============================================================================
   Kydos — LA VITRINE
   ----------------------------------------------------------------------------
   Même vocabulaire visuel que l'application : le bleu nuit, l'accent bleu-violet,
   l'or des jetons, et Manrope. Un visiteur qui installe Kydos après avoir vu ce
   site ne doit pas avoir l'impression de changer de produit.

   Le mouvement est présent partout mais discret, et TOUJOURS déclenché par
   quelque chose — l'arrivée à l'écran, le survol. Rien ne bouge en boucle sauf
   ce qui est censé bouger en boucle : les décorations de profil, parce que c'est
   précisément le produit qu'on montre.
   ========================================================================== */

:root{
  --fond:#0b0e13;
  --fond2:#0f141c;
  --carte:#141a24;
  --carte2:#19212d;
  --trait:#242e3c;
  --trait2:#313e50;
  --encre:#eef2f7;
  --encre2:#b6c1cf;
  --encre3:#7d8a9b;
  --acc:#4d7dff;
  --acc2:#7c5cff;
  --or:#f7b955;
  --vert:#2ed37f;
  --r:14px;
  --large:1180px;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;background:var(--fond);color:var(--encre);
  font:500 16px/1.65 Manrope,system-ui,-apple-system,Segoe UI,sans-serif;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
img,svg{max-width:100%}
h1,h2,h3{margin:0;font-weight:800;letter-spacing:-.02em;line-height:1.12}
p{margin:0}
a{color:inherit;text-decoration:none}
ul{margin:0;padding:0;list-style:none}

/* ---------- briques communes ---------- */
.kicker{
  display:inline-block;margin-bottom:14px;
  color:var(--acc);font-size:11px;font-weight:800;
  letter-spacing:.16em;text-transform:uppercase;
}
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  padding:11px 20px;border:1px solid transparent;border-radius:10px;
  font:800 14px Manrope,sans-serif;cursor:pointer;white-space:nowrap;
  transition:transform .18s cubic-bezier(.2,.7,.3,1),background .18s,border-color .18s,box-shadow .18s;
}
.btn svg{width:17px;height:17px;flex:0 0 auto}
.btn:hover{transform:translateY(-2px)}
.btn:active{transform:translateY(0)}
.btn-plein{
  background:linear-gradient(135deg,var(--acc),var(--acc2));color:#fff;
  box-shadow:0 8px 22px rgba(77,125,255,.3);
}
.btn-plein:hover{box-shadow:0 12px 30px rgba(77,125,255,.42)}
.btn-contour{border-color:var(--trait2);color:var(--encre);background:rgba(255,255,255,.03)}
.btn-contour:hover{border-color:var(--acc);background:rgba(77,125,255,.1)}
.btn-fantome{background:transparent;color:var(--encre2)}
.btn-fantome:hover{color:var(--encre);background:rgba(255,255,255,.05)}
.btn-grand{padding:15px 26px;font-size:15px;border-radius:12px}
.btn-large{width:100%;padding:13px 20px;margin-top:10px}

.puces li{position:relative;padding-left:24px;margin-bottom:9px;color:var(--encre2);font-size:14.5px}
.puces li::before{
  content:"";position:absolute;left:0;top:.62em;width:9px;height:9px;border-radius:50%;
  background:linear-gradient(135deg,var(--acc),var(--acc2));
}

/* ---------- l'apparition au défilement ----------
   Chaque bloc arrive une fois, quand il entre dans l'écran. Le décalage se fait
   par `--d`, posé par le script : sans lui, tout le bloc surgirait d'un coup et
   l'effet ferait bon marché. */
.anim{opacity:0;transform:translateY(22px);
  transition:opacity .7s cubic-bezier(.2,.7,.3,1),transform .7s cubic-bezier(.2,.7,.3,1);
  transition-delay:calc(var(--d,0) * 90ms)}
.anim.vu{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .anim{opacity:1;transform:none;transition:none}
}

/* ===================== BARRE DE NAVIGATION ===================== */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:80;
  display:flex;align-items:center;gap:28px;
  padding:14px max(20px,calc((100vw - var(--large)) / 2));
  background:rgba(11,14,19,0);border-bottom:1px solid transparent;
  transition:background .3s,border-color .3s,backdrop-filter .3s;
}
.nav.pose{
  background:rgba(11,14,19,.82);backdrop-filter:blur(16px);
  border-bottom-color:var(--trait);
}
.marque{display:flex;align-items:center;gap:10px;font-weight:800;font-size:19px;letter-spacing:-.03em}
.marque-jeton{width:30px;height:30px;flex:0 0 auto;border-radius:7px;
  filter:drop-shadow(0 2px 7px rgba(6,10,24,.6))}
.nav-liens{display:flex;gap:6px;margin-left:auto}
.nav-liens a{
  position:relative;padding:8px 13px;border-radius:8px;
  color:var(--encre2);font-size:14px;font-weight:700;transition:color .2s,background .2s;
}
.nav-liens a:hover{color:var(--encre);background:rgba(255,255,255,.05)}
.nav-actions{display:flex;gap:9px;align-items:center}
.nav-burger{display:none;flex-direction:column;gap:5px;padding:9px;border:0;background:none;cursor:pointer}
.nav-burger span{display:block;width:20px;height:2px;border-radius:2px;background:var(--encre2);transition:.25s}
.nav-burger[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nav-burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.nav-burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* ===================== ACCUEIL ===================== */
.hero{position:relative;padding:150px max(20px,calc((100vw - var(--large)) / 2)) 60px;overflow:hidden}
/* Une aurore lente derrière le titre. C'est le seul fond animé du site : il
   place l'ambiance en trois secondes et on ne le remarque plus ensuite. */
.hero-lueur{
  position:absolute;inset:-30% -10% auto;height:120%;pointer-events:none;
  background:
    radial-gradient(48% 40% at 22% 30%,rgba(77,125,255,.28),transparent 68%),
    radial-gradient(42% 38% at 76% 22%,rgba(124,92,255,.24),transparent 66%),
    radial-gradient(36% 34% at 58% 62%,rgba(247,185,85,.12),transparent 64%);
  filter:blur(28px);animation:aurore 22s ease-in-out infinite alternate;
}
@keyframes aurore{
  0%{transform:translate3d(-2%,0,0) scale(1)}
  50%{transform:translate3d(3%,2%,0) scale(1.08)}
  100%{transform:translate3d(-1%,-2%,0) scale(1.02)}
}
.hero-grille{
  position:absolute;inset:0;pointer-events:none;opacity:.5;
  background-image:linear-gradient(rgba(255,255,255,.028) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(255,255,255,.028) 1px,transparent 1px);
  background-size:56px 56px;
  mask-image:radial-gradient(70% 60% at 50% 32%,#000,transparent 78%);
  -webkit-mask-image:radial-gradient(70% 60% at 50% 32%,#000,transparent 78%);
}
.hero-corps{
  position:relative;display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
  gap:54px;align-items:center;
}
.hero h1{font-size:clamp(38px,5.4vw,66px);margin-bottom:20px}
.hero h1 em{
  font-style:normal;
  background:linear-gradient(120deg,var(--acc),var(--acc2) 55%,var(--or));
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.hero-texte p{max-width:52ch;color:var(--encre2);font-size:17px}
.hero-boutons{display:flex;gap:12px;flex-wrap:wrap;margin:30px 0 16px}
.hero-note{color:var(--encre3);font-size:13px}
.hero-note b{color:var(--encre2)}

/* ---- les fiches qui flottent ---- */
.hero-visuel{position:relative;min-height:430px}
.fiche-flottante{
  position:absolute;padding:16px 18px;border-radius:16px;
  background:linear-gradient(160deg,var(--carte2),var(--carte));
  border:1px solid var(--trait);
  box-shadow:0 26px 60px rgba(0,0,0,.5);
  animation:flotte 7s ease-in-out infinite;
}
@keyframes flotte{
  0%,100%{transform:translateY(0) rotate(var(--rot,0deg))}
  50%{transform:translateY(-13px) rotate(var(--rot,0deg))}
}
.fiche-1{--rot:-2deg;top:14px;left:2%;width:270px;z-index:3}
.fiche-2{--rot:3deg;top:150px;right:0;width:230px;animation-delay:-2.4s;z-index:2}
.fiche-3{--rot:-4deg;bottom:6px;left:14%;width:250px;animation-delay:-4.6s;z-index:1}
.fiche-tete{display:flex;align-items:center;gap:13px}
.fiche-tete b{display:block;font-size:15px}
.grade{display:block;font-style:normal;color:var(--or);font-size:11.5px;font-weight:700}
.fiche-jetons{
  display:flex;justify-content:space-between;align-items:baseline;
  margin-top:14px;padding-top:12px;border-top:1px solid var(--trait);
}
.fiche-jetons span{color:var(--encre3);font-size:11px;font-weight:800;letter-spacing:.08em;text-transform:uppercase}
.fiche-jetons b{color:var(--or);font-size:17px;font-variant-numeric:tabular-nums}
.fiche-legende{margin-top:11px;color:var(--encre3);font-size:11.5px;font-weight:700}
.mini-damier{
  width:100%;aspect-ratio:1;border-radius:8px;overflow:hidden;
  display:grid;grid-template-columns:repeat(8,1fr);
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.4);
}
.mini-damier i{display:block;aspect-ratio:1}
.mini-cartes{display:flex;gap:7px;justify-content:center;padding:6px 0}
.mc{
  width:42px;height:58px;border-radius:5px;display:grid;place-items:center;
  background:linear-gradient(160deg,#fdfbf6,#e8e2d4);
  border:1px solid #c7bfae;box-shadow:0 6px 14px rgba(0,0,0,.45);
  font-size:20px;transform:rotate(calc(var(--i,0) * 4deg - 6deg));
}
.mc.rouge{color:#c2334d}.mc.noir{color:#1e222b}
.mc:nth-child(1){--i:0}.mc:nth-child(2){--i:1}.mc:nth-child(3){--i:2}.mc:nth-child(4){--i:3}

/* ---- les chiffres ---- */
.hero-chiffres{
  position:relative;display:grid;grid-template-columns:repeat(4,1fr);gap:16px;
  margin-top:64px;padding:24px;border-radius:var(--r);
  background:rgba(255,255,255,.028);border:1px solid var(--trait);
}
.chiffre{text-align:center}
.chiffre b{display:block;font-size:30px;font-weight:800;letter-spacing:-.03em}
.chiffre span{color:var(--encre3);font-size:12px;font-weight:700}

/* ===================== BLOCS ===================== */
.bloc{padding:100px max(20px,calc((100vw - var(--large)) / 2))}
.bloc-sombre{background:var(--fond2);border-top:1px solid var(--trait);border-bottom:1px solid var(--trait)}
.bloc-tete{max-width:640px;margin:0 auto 48px;text-align:center}
.bloc-tete h2{font-size:clamp(28px,3.5vw,40px);margin-bottom:14px}
.bloc-tete p{color:var(--encre2)}

/* ---- les familles de jeux ---- */
.familles{display:grid;grid-template-columns:repeat(auto-fit,minmax(258px,1fr));gap:20px}
.famille{
  position:relative;padding:26px;border-radius:var(--r);overflow:hidden;
  background:var(--carte);border:1px solid var(--trait);
  transition:transform .3s cubic-bezier(.2,.7,.3,1),border-color .3s,box-shadow .3s;
}
.famille:hover{transform:translateY(-6px);border-color:var(--trait2);box-shadow:0 22px 50px rgba(0,0,0,.4)}
.famille h3{font-size:19px;margin-bottom:9px}
.famille p{color:var(--encre2);font-size:14px;margin-bottom:16px}
.famille ul{display:flex;flex-wrap:wrap;gap:6px}
.famille li{
  padding:4px 10px;border-radius:20px;font-size:11.5px;font-weight:700;
  background:rgba(255,255,255,.05);color:var(--encre3);border:1px solid var(--trait);
}
.famille-art{
  height:98px;margin:-6px 0 18px;border-radius:11px;position:relative;overflow:hidden;
  display:grid;place-items:center;
}
.famille[data-fam="casino"] .famille-art{background:radial-gradient(120% 100% at 50% 0,#1d6b47,#0d3524)}
.famille[data-fam="cartes"] .famille-art{background:radial-gradient(120% 100% at 50% 0,#2a3550,#131a29)}
.famille[data-fam="plateau"] .famille-art{background:radial-gradient(120% 100% at 50% 0,#5b4530,#2a1f16)}
.famille[data-fam="deduction"] .famille-art{background:radial-gradient(120% 100% at 50% 0,#3a2550,#1a1029)}
/* Les jetons se décalent au survol : la carte réagit sans que rien ne bouge
   avant qu'on s'y intéresse. */
.art-jeton{
  position:absolute;width:44px;height:44px;border-radius:50%;
  box-shadow:0 6px 14px rgba(0,0,0,.5),inset 0 0 0 4px rgba(255,255,255,.85);
  transition:transform .4s cubic-bezier(.2,.7,.3,1);
}
.art-jeton.j1{background:#c2334d;left:calc(50% - 52px);transform:rotate(-8deg)}
.art-jeton.j2{background:#2f6fd0;left:calc(50% - 22px);z-index:2}
.art-jeton.j3{background:#e0b23c;left:calc(50% + 8px);transform:rotate(9deg)}
.famille:hover .art-jeton.j1{transform:translate(-13px,-6px) rotate(-16deg)}
.famille:hover .art-jeton.j3{transform:translate(13px,-6px) rotate(17deg)}
.art-carte{
  position:absolute;width:40px;height:56px;border-radius:5px;display:grid;place-items:center;
  background:linear-gradient(160deg,#fdfbf6,#e6dfd0);border:1px solid #c4bbaa;
  box-shadow:0 7px 16px rgba(0,0,0,.5);font-size:19px;
  transition:transform .4s cubic-bezier(.2,.7,.3,1);
}
.art-carte.c1{color:#1e222b;transform:translateX(-34px) rotate(-13deg)}
.art-carte.c2{color:#c2334d;z-index:2}
.art-carte.c3{color:#c2334d;transform:translateX(34px) rotate(13deg)}
.famille:hover .art-carte.c1{transform:translateX(-46px) rotate(-22deg)}
.famille:hover .art-carte.c3{transform:translateX(46px) rotate(22deg)}
.art-damier{
  width:74px;height:74px;border-radius:6px;
  background-image:
    linear-gradient(45deg,#e0c8a0 25%,transparent 25%,transparent 75%,#e0c8a0 75%),
    linear-gradient(45deg,#e0c8a0 25%,#7d5638 25%,#7d5638 75%,#e0c8a0 75%);
  background-size:18.5px 18.5px;background-position:0 0,9.25px 9.25px;
  box-shadow:0 8px 18px rgba(0,0,0,.5);
  transition:transform .4s cubic-bezier(.2,.7,.3,1);
}
.famille:hover .art-damier{transform:rotate(6deg) scale(1.06)}
.art-oeil{
  width:64px;height:64px;border-radius:50%;
  background:radial-gradient(circle at 38% 34%,#f2ecff,#a05cff 46%,#2a1050 78%);
  box-shadow:0 0 26px rgba(160,92,255,.5),inset 0 0 16px rgba(0,0,0,.5);
  transition:transform .4s cubic-bezier(.2,.7,.3,1);
}
.famille:hover .art-oeil{transform:scale(1.09)}

/* ---- les atouts ---- */
.atouts{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:22px}
.atout{padding:28px;border-radius:var(--r);background:var(--carte);border:1px solid var(--trait)}
.atout h3{font-size:18px;margin-bottom:10px}
.atout p{color:var(--encre2);font-size:14.5px}
.atout-icone{
  width:46px;height:46px;border-radius:12px;display:grid;place-items:center;margin-bottom:16px;
  background:linear-gradient(140deg,rgba(77,125,255,.2),rgba(124,92,255,.14));
  border:1px solid rgba(77,125,255,.3);color:var(--acc);
}
.atout-icone svg{width:23px;height:23px}

/* ---- la vitrine du vestiaire ---- */
.vitrine{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.8fr);gap:56px;align-items:center}
.vitrine h2{font-size:clamp(27px,3.4vw,38px);margin-bottom:16px}
.vitrine p{color:var(--encre2);margin-bottom:14px}
.vitrine .puces{margin-top:22px}
.vitrine-art{display:grid;place-items:center}
.socle{
  position:relative;display:grid;place-items:center;gap:26px;
  padding:52px 44px;border-radius:22px;
  background:radial-gradient(80% 70% at 50% 22%,rgba(247,185,85,.11),transparent 70%),var(--carte);
  border:1px solid var(--trait);box-shadow:0 30px 70px rgba(0,0,0,.45);
}
.socle-nom{text-align:center;font-weight:800;font-size:17px}
.socle-nom span{
  display:block;margin-top:5px;color:#ff4d6d;font-size:10px;
  font-weight:800;letter-spacing:.14em;text-transform:uppercase;
}

/* ---- l'avatar et ses décorations ----
   Les règles viennent de l'application : on ne redéfinit ici que ce qu'il faut
   pour qu'un avatar décoré tienne debout hors de son contexte habituel. */
.av{
  position:relative;isolation:isolate;overflow:visible;
  width:52px;height:52px;border-radius:50%;flex:0 0 auto;
  display:inline-flex;align-items:center;justify-content:center;
  background:radial-gradient(120% 120% at 32% 24%,#c9b98d,#9a8a5e 58%,#6d6142);
}
.av i{font-style:normal;font-weight:900;font-size:17px;color:#fffdf6;
  text-shadow:0 1px 4px rgba(0,0,0,.5)}
.av-grand{width:150px;height:150px}
.av-grand i{font-size:50px}
.av-deco{position:absolute;inset:calc((1 - var(--deco-r,1.2)) * 50%);
  display:block;pointer-events:none;overflow:visible}
.av-deco svg{width:100%;height:100%;display:block;overflow:visible}
.av-deco-fond{z-index:-1;
  -webkit-mask:radial-gradient(closest-side,#0000 calc(100% / var(--deco-r,1.2) - .5px),#000 calc(100% / var(--deco-r,1.2)));
          mask:radial-gradient(closest-side,#0000 calc(100% / var(--deco-r,1.2) - .5px),#000 calc(100% / var(--deco-r,1.2)))}
.av-deco-dessus{z-index:2}
.av-deco [class^="d-"]{transform-box:view-box}
@keyframes dTour{to{transform:rotate(1turn)}}
@keyframes dContre{to{transform:rotate(-1turn)}}
.av-deco .d-couronne{transform-origin:60px 30px;animation:dPose 4.4s ease-in-out infinite}
@keyframes dPose{0%,100%{transform:translateY(0)}50%{transform:translateY(-2px)}}
.av-deco .d-couronne>g{filter:drop-shadow(0 3px 6px rgba(0,0,0,.55))}
.av-deco .d-gemmes circle{transform-box:fill-box;transform-origin:center;
  animation:dGemme 2.7s ease-in-out infinite}
.av-deco .d-gemmes circle:nth-child(2){animation-delay:.9s}
.av-deco .d-gemmes circle:nth-child(3){animation-delay:1.8s}
@keyframes dGemme{0%,100%{opacity:.78}50%{opacity:1;filter:brightness(1.6)}}
.av-deco .d-lueur{transform-origin:60px 42px;animation:dLueur 4.4s ease-in-out infinite}
@keyframes dLueur{0%,100%{opacity:.5;transform:scale(1)}50%{opacity:1;transform:scale(1.05)}}
.av-deco .d-eclat{animation:dEclat 5s ease-in-out infinite}
@keyframes dEclat{0%,55%{transform:translateX(0)}100%{transform:translateX(190px)}}
.av-deco .d-acier{filter:drop-shadow(0 4px 10px rgba(0,0,0,.6))}
.av-deco .d-brillance{transform-origin:60px 60px;animation:dTour 6.5s linear infinite}
@media(prefers-reduced-motion:reduce){.av-deco *{animation:none!important}}

/* ---- téléchargement ---- */
.dl-cartes{display:grid;grid-template-columns:repeat(auto-fit,minmax(252px,1fr));gap:20px}
.dl{
  padding:30px 26px;border-radius:var(--r);text-align:center;
  background:var(--carte);border:1px solid var(--trait);
  transition:transform .3s cubic-bezier(.2,.7,.3,1),border-color .3s,box-shadow .3s;
}
.dl:hover{transform:translateY(-6px);border-color:var(--acc);box-shadow:0 22px 50px rgba(77,125,255,.16)}
.dl-web:hover{border-color:var(--trait2);box-shadow:0 22px 50px rgba(0,0,0,.4)}
.dl-logo{
  width:56px;height:56px;margin:0 auto 18px;border-radius:15px;display:grid;place-items:center;
  background:rgba(255,255,255,.05);border:1px solid var(--trait);color:var(--encre);
}
.dl-logo svg{width:29px;height:29px}
.dl h3{font-size:20px;margin-bottom:7px}
.dl-info{color:var(--encre2);font-size:13.5px;margin-bottom:18px;min-height:2.6em}
.dl .btn{width:100%}
.dl small{display:block;margin-top:13px;color:var(--encre3);font-size:11.5px}
.dl.indispo{opacity:.55}
.dl.indispo .btn{pointer-events:none}

/* ---- le compte ---- */
.compte-carte{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,420px);gap:0;
  border-radius:20px;overflow:hidden;border:1px solid var(--trait);
  background:var(--carte);box-shadow:0 30px 70px rgba(0,0,0,.4);
}
.compte-gauche{padding:44px}
.compte-gauche h2{font-size:clamp(25px,3vw,33px);margin-bottom:14px}
.compte-gauche p{color:var(--encre2);margin-bottom:22px}
.compte-droite{padding:36px;background:var(--fond2);border-left:1px solid var(--trait)}
.onglets{display:flex;gap:3px;padding:4px;margin-bottom:22px;
  border-radius:11px;background:rgba(255,255,255,.04);border:1px solid var(--trait)}
.onglet{
  flex:1;padding:9px;border:0;border-radius:8px;background:transparent;
  color:var(--encre3);font:800 13px Manrope,sans-serif;cursor:pointer;transition:.2s;
}
.onglet:hover{color:var(--encre2)}
.onglet.actif{background:linear-gradient(135deg,var(--acc),var(--acc2));color:#fff}
.champ{display:block;margin-bottom:15px}
.champ span{display:block;margin-bottom:7px;color:var(--encre3);
  font-size:10.5px;font-weight:800;letter-spacing:.09em;text-transform:uppercase}
.champ input{
  width:100%;padding:12px 14px;border-radius:10px;
  border:1px solid var(--trait2);background:rgba(255,255,255,.04);
  color:var(--encre);font:600 15px Manrope,sans-serif;transition:border-color .2s,box-shadow .2s;
}
.champ input:focus{outline:0;border-color:var(--acc);box-shadow:0 0 0 3px rgba(77,125,255,.18)}
.erreur{min-height:20px;color:#ff6b7f;font-size:13px;font-weight:700}
.compte-note{display:block;margin-top:14px;color:var(--encre3);font-size:11.5px;text-align:center}
.cc-tete{display:flex;align-items:center;gap:16px;margin-bottom:22px}
.cc-tete b{display:block;font-size:19px}
.cc-tete i{font-style:normal;color:var(--or);font-size:12.5px;font-weight:700}
.cc-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:8px}
.cc-stats div{padding:13px 8px;border-radius:11px;text-align:center;
  background:rgba(255,255,255,.04);border:1px solid var(--trait)}
.cc-stats b{display:block;font-size:19px;font-variant-numeric:tabular-nums}
.cc-stats span{color:var(--encre3);font-size:10.5px;font-weight:700}

/* ---- pied de page ---- */
.pied{padding:44px max(20px,calc((100vw - var(--large)) / 2));border-top:1px solid var(--trait)}
.pied-corps{display:flex;align-items:center;gap:30px;flex-wrap:wrap}
.pied-marque{display:flex;align-items:center;gap:12px}
.pied-marque b{display:block;font-size:16px}
.pied-marque span{color:var(--encre3);font-size:12px}
.pied-liens{display:flex;gap:20px;margin-left:auto}
.pied-liens a{color:var(--encre2);font-size:13.5px;font-weight:700;transition:color .2s}
.pied-liens a:hover{color:var(--acc)}
.pied-mention{width:100%;padding-top:22px;border-top:1px solid var(--trait);
  display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;
  color:var(--encre3);font-size:12px}

/* ===================== ADAPTATION ===================== */
@media(max-width:980px){
  .hero-corps{grid-template-columns:1fr;gap:44px}
  .hero-visuel{min-height:400px;max-width:440px;margin:0 auto;width:100%}
  .vitrine{grid-template-columns:1fr;gap:40px}
  .compte-carte{grid-template-columns:1fr}
  .compte-droite{border-left:0;border-top:1px solid var(--trait)}
  .nav-liens{
    position:fixed;inset:60px 0 auto;flex-direction:column;gap:0;margin:0;padding:14px 20px 20px;
    background:rgba(11,14,19,.97);backdrop-filter:blur(16px);border-bottom:1px solid var(--trait);
    transform:translateY(-120%);transition:transform .3s cubic-bezier(.2,.7,.3,1);
  }
  .nav-liens.ouvert{transform:none}
  .nav-liens a{padding:13px 4px;border-radius:0;border-bottom:1px solid var(--trait)}
  .nav-burger{display:flex}
  .nav-actions .btn-fantome{display:none}
}
@media(max-width:640px){
  .hero{padding-top:120px}
  .hero-chiffres{grid-template-columns:repeat(2,1fr);gap:20px}
  .bloc{padding:70px 20px}
  .compte-gauche,.compte-droite{padding:28px}
  .pied-liens{margin-left:0;width:100%}
}