/* ═══════════════════════════════════════════════════════════════════════════
   FantasyDuel — feuille de style partagée du site vitrine (landing + pages)
   ═══════════════════════════════════════════════════════════════════════════ */
:root{
  /* Palette héroïque — bleus désaturés (navy/ardoise) + or (éditable via le CMS). */
  --gold:#c9a24a; --gold-bright:#e8c878; --gold-soft:#b3a578; --ink:#0c121c; --ink2:#111a28;
  --panel:#16202f; --panel2:#1d2a3b; --txt:#e7edf5; --muted:#8da3bd;
  --line:rgba(150,185,225,.16); --accent:#5d86b3;
  --font-heading:'Cinzel', serif; --font-body:'Inter', system-ui, -apple-system, sans-serif;
  --fs-base:16px; --fs-h1:1; --fs-h2:1; --fs-banner:1;   /* multiplicateurs de taille par bloc */
  --nav-h:104px;   /* hauteur de la barre de menu fixe (opaque) */
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--ink);color:var(--txt);
  font-family:var(--font-body);font-size:var(--fs-base);overflow-x:hidden}
a{color:inherit;text-decoration:none}
h1,h2,h3{font-family:var(--font-heading);margin:0;letter-spacing:.02em}
.mi{font-family:'Material Symbols Outlined';font-weight:normal;font-style:normal;
    line-height:1;vertical-align:middle;-webkit-font-feature-settings:'liga'}

/* ───────── Top nav (logo centré, entrées réparties gauche/droite) ───────── */
header.nav{position:fixed;top:0;left:0;right:0;z-index:100;display:grid;
  grid-template-columns:1fr auto 1fr;align-items:center;gap:18px;padding:10px 28px;
  background:#000;backdrop-filter:blur(10px);
  transition:background .3s,backdrop-filter .3s,border-color .3s;border-bottom:1px solid rgb(182 125 45 / 36%)}
/* Texture (card_tpl_text_bg) en surimpression à 30% sur le fond noir. */
header.nav::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:var(--nav-tex) center/cover no-repeat;opacity:.5}
header.nav.scrolled{background:#000;backdrop-filter:blur(12px);box-shadow:0 6px 20px rgba(0,0,0,.9)}
.nav-side{display:flex;align-items:center;gap:6px;min-width:0}
.nav-side.left{justify-content:flex-end}
.nav-side.right{justify-content:flex-start;gap:14px}
/* Logo agrandi qui DÉBORDE sous la barre (sur-exposition) : marges négatives
   pour ne pas agrandir la barre, z-index élevé pour passer au-dessus du bandeau. */
/* Logo agrandi qui DÉBORDE uniquement VERS LE BAS (jamais tronqué en haut) :
   ancré en haut (align-self:start, pas de marge négative en haut), seule la
   marge négative basse l'empêche d'agrandir la barre. z-index élevé = au-dessus
   du bandeau (sur-exposition). */
.nav-logo{justify-self:center;display:flex;align-items:flex-start;gap:10px;position:relative;z-index:130;align-self:start}
.nav-logo img{height:146px;width:auto;display:block;margin:0 0 -66px;
  filter:drop-shadow(0 10px 22px rgba(0,0,0,.7));transition:height .3s,margin .3s}
header.nav.scrolled .nav-logo img{height:112px;margin:0 0 -50px}
.brand{display:flex;align-items:center;gap:10px;font-family:'Cinzel',serif;font-weight:800;
  font-size:20px;letter-spacing:2px;color:var(--gold);text-transform:uppercase}
.brand .mi{font-size:26px;color:var(--gold-bright)}
nav.links{display:flex;gap:4px;flex-wrap:nowrap}
nav.links a{padding:8px 13px;border-radius:8px;font-family:var(--font-heading);font-size:15px;font-weight:700;color:var(--gold-soft);
  text-transform:uppercase;letter-spacing:1.4px;transition:.2s;white-space:nowrap}
nav.links a:hover,nav.links a.active{color:var(--gold-bright);background:rgba(255,255,255,.06)}
.nav-spacer{flex:1}
.lang-toggle{display:flex;gap:2px;background:rgba(255,255,255,.06);border:1px solid var(--line);
  border-radius:8px;padding:3px}
.lang-toggle button{background:none;border:none;color:var(--muted);font-size:13px;font-weight:700;
  padding:5px 9px;border-radius:6px;cursor:pointer}
.lang-toggle button.active{background:var(--gold);color:var(--ink)}
.account-btn{display:flex;align-items:center;gap:7px;padding:9px 14px;border-radius:10px;white-space:nowrap;
  background:rgba(255,255,255,.06);border:1px solid var(--line);font-size:13px;font-weight:600;
  color:var(--txt);transition:.2s;text-transform:uppercase;letter-spacing:.5px}
.account-btn:hover{background:var(--gold);color:var(--ink);border-color:var(--gold)}
.account-btn .mi{font-size:19px}
.account-btn .acct-name{max-width:140px;overflow:hidden;text-overflow:ellipsis}
/* Bouton « se déconnecter » discret : icône seule, sans libellé. */
.acct-logout{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;flex:0 0 auto;
  background:none;border:1px solid transparent;border-radius:9px;color:var(--muted);cursor:pointer;transition:.2s}
.acct-logout .mi{font-size:19px}
.acct-logout:hover{color:var(--gold-bright);background:rgba(255,255,255,.06);border-color:var(--line)}
.burger{display:none;background:none;border:none;color:var(--txt);font-size:28px;cursor:pointer}

/* ───────── Section shells ───────── */
section.block{position:relative;padding:96px 0;overflow:hidden}
.wrap{max-width:1180px;margin:0 auto;position:relative;z-index:2}
.sec-head{text-align:center;margin-bottom:54px}
.sec-head .kicker{font-size:12px;letter-spacing:4px;text-transform:uppercase;color:var(--gold);
  font-weight:700;margin-bottom:12px}
.sec-head h2{font-size:calc(clamp(28px,4vw,46px) * var(--fs-h2,1));font-weight:800}
.sec-head p{color:var(--muted);max-width:620px;margin:14px auto 0;font-size:16px;line-height:1.55}

/* ───────── Page header (sous-pages) ───────── */
.page-hero{position:relative;padding:150px 28px 60px;text-align:center;overflow:hidden}
.page-hero .ph-bg{position:absolute;inset:-10% 0;background-size:cover;background-position:center;
  filter:saturate(1.05);opacity:.5}
.page-hero .ph-scrim{position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(10,6,18,.6),rgba(10,6,18,.8) 60%,var(--ink))}
.page-hero .inner{position:relative;z-index:2;max-width:760px;margin:0 auto}
.page-hero .kicker{font-size:12px;letter-spacing:4px;text-transform:uppercase;color:var(--gold-bright);
  font-weight:700;margin-bottom:14px}
.page-hero h1{font-size:calc(clamp(36px,6vw,64px) * var(--fs-h2,1));font-weight:900;
  background:linear-gradient(180deg,#fff,var(--gold));-webkit-background-clip:text;background-clip:text;color:transparent}
.page-hero p{color:#d2c8e6;font-size:17px;line-height:1.6;margin:18px auto 0;max-width:620px}

/* ───────── Rarity colors ───────── */
.r-legendary{color:#ffb347} .r-epic{color:#c77dff} .r-rare{color:#5fb0ff}
.r-uncommon{color:#5fd38b} .r-common{color:#b8b8c8}
.badge-rarity{display:inline-block;font-size:10.5px;letter-spacing:2px;text-transform:uppercase;
  font-weight:700;padding:4px 10px;border-radius:99px;background:rgba(0,0,0,.45);border:1px solid var(--line)}

/* ───────── Showcase slider (factions / personnages) ───────── */
/* Bannière PLEINE LARGEUR — pose à gauche, titre à droite, fond dégradé au noir */
/* Le bandeau commence SOUS la barre de menu opaque (fond recalé, plus rien ne
   passe derrière le menu). */
.sc-banner{position:relative;width:100%;padding-top:var(--nav-h);background:var(--ink)}
.sc-stage{position:relative;height:clamp(460px,68vh,700px);overflow:hidden}
/* background-position calé vers le HAUT pour montrer les têtes (sinon coupées
   par la barre de menu) ; zoom Ken Burns adouci et sans panoramique vertical
   qui rognerait les visages. */
.sc-bg{position:absolute;inset:0;background-size:cover;background-position:center 22%;opacity:0;
  transition:opacity .9s ease;transform-origin:center 30%;will-change:transform,opacity}
.sc-bg.on{opacity:1;animation:kenburns 26s ease-out forwards}
@keyframes kenburns{0%{transform:scale(1.04)}100%{transform:scale(1.12)}}
/* Entrées animées au changement de slide : pose depuis la GAUCHE, textes/emblème
   depuis la DROITE, en décalé. La classe .anim est re-déclenchée par le JS. */
@keyframes scSlideL{from{opacity:0;transform:translateX(-70px)}to{opacity:1;transform:translateX(0)}}
@keyframes scSlideR{from{opacity:0;transform:translateX(70px)}to{opacity:1;transform:translateX(0)}}
.sc-pose.anim{animation:scSlideL .75s cubic-bezier(.16,.84,.3,1) both}
.sc-overlay.anim{animation:scSlideR .75s cubic-bezier(.16,.84,.3,1) .14s both}
/* Factions : emblème (à droite) arrive de la DROITE, textes (à gauche) de la GAUCHE. */
.fac-overlay .sc-emblem.anim{animation:scSlideR .75s cubic-bezier(.16,.84,.3,1) both}
.fac-overlay .fac-txt.anim{animation:scSlideL .75s cubic-bezier(.16,.84,.3,1) .14s both}
.sc-scrim{position:absolute;inset:0;z-index:2;
  background:
    linear-gradient(270deg, rgba(7,4,14,.92) 0%, rgba(7,4,14,.5) 40%, rgba(7,4,14,.06) 72%),
    linear-gradient(0deg, var(--ink) 1%, rgba(7,4,14,.22) 38%, rgba(7,4,14,0) 72%, rgba(7,4,14,.45) 100%),
    linear-gradient(90deg, var(--ink) 0%, rgba(7,4,14,0) 11%),
    linear-gradient(270deg, var(--ink) 0%, rgba(7,4,14,0) 11%)}
/* Conteneur centré : recentre pose + textes. Le bandeau étant déjà sous le menu,
   plus besoin de gros padding-top ici. */
.sc-inner{position:absolute;inset:0;max-width:1280px;margin:0 auto;z-index:3;
  padding:28px 32px 0;pointer-events:none}
.sc-pose{position:absolute;left:32px;right:auto;bottom:0;z-index:3;height:calc(100% - 24px);width:auto;
  filter:drop-shadow(0 18px 40px rgba(0,0,0,.6));opacity:0;transition:opacity .9s ease .15s;pointer-events:none;
  -webkit-mask-image:linear-gradient(0deg,transparent,#000 14%);mask-image:linear-gradient(0deg,transparent,#000 14%)}
.sc-pose.on{opacity:1}
.sc-overlay{position:absolute;right:32px;left:auto;bottom:44px;z-index:4;max-width:560px;pointer-events:auto;
  text-align:right;display:flex;flex-direction:column;align-items:flex-end}
.sc-emblem{width:130px;height:130px;object-fit:contain;margin-bottom:18px;align-self:flex-end;
  filter:drop-shadow(0 6px 20px rgba(0,0,0,.7))}
.sc-overlay h2{font-size:calc(clamp(34px,5.5vw,62px) * var(--fs-banner,1));font-weight:900;line-height:1.02;
  background:linear-gradient(180deg,#fff,var(--gold));-webkit-background-clip:text;background-clip:text;color:transparent;
  text-shadow:0 4px 30px rgba(0,0,0,.5)}
.sc-tagline{font-style:italic;color:#dcd0f0;font-size:clamp(15px,1.6vw,19px);margin:10px 0 0;text-shadow:0 2px 10px rgba(0,0,0,.8)}
.sc-chips{display:flex;gap:10px;flex-wrap:wrap;margin-top:16px;justify-content:flex-end}
.sc-chip{display:inline-flex;align-items:center;gap:7px;font-size:12px;font-weight:600;letter-spacing:1px;
  text-transform:uppercase;color:#e9dcf5;background:rgba(255,255,255,.08);border:1px solid var(--line);
  padding:6px 13px;border-radius:99px;backdrop-filter:blur(4px)}
.sc-arrow{position:absolute;top:50%;transform:translateY(-50%);z-index:6;width:54px;height:54px;border-radius:50%;
  background:rgba(10,6,18,.55);border:1px solid var(--line);color:#fff;font-size:30px;cursor:pointer;
  display:flex;align-items:center;justify-content:center;transition:.2s;backdrop-filter:blur(6px)}
.sc-arrow:hover{background:var(--gold);color:var(--ink);border-color:var(--gold)}
.sc-arrow.prev{left:22px}.sc-arrow.next{right:22px}
.showcase{max-width:1180px;margin:0 auto;padding:0 28px 50px}
.sc-dots{display:flex;justify-content:center;gap:9px;flex-wrap:wrap;margin:24px 0 26px}
.sc-dots button{width:11px;height:11px;border-radius:50%;border:none;cursor:pointer;padding:0;
  background:rgba(255,255,255,.2);transition:.2s}
.sc-dots button.on{background:var(--gold);transform:scale(1.25)}
.sc-content{background:var(--panel);border:1px solid var(--line);border-radius:18px;padding:32px 38px;
  box-shadow:0 20px 60px rgba(0,0,0,.4)}
.sc-content .sc-kicker{display:flex;align-items:center;gap:12px;margin-bottom:14px}
.sc-content .sc-kicker img{width:48px;height:48px;object-fit:contain}
.sc-content .sc-kicker h3{font-size:24px;font-weight:800}
.sc-content .sc-quote{font-style:italic;color:#c9bce4;font-size:16px;border-left:3px solid var(--gold);
  padding-left:16px;margin:0 0 18px}
.sc-content .sc-lore{color:#d2c8e6;font-size:16px;line-height:1.7;white-space:pre-wrap}
.sc-content .sc-desc{color:#cfc4e0;font-size:15px;line-height:1.65;margin:0 0 16px}
.sc-content .sc-playstyle{display:inline-flex;align-items:center;gap:8px;margin-top:16px;font-size:13px;font-weight:600;
  color:#efe0bd;background:rgba(201,162,74,.14);border:1px solid rgba(201,162,74,.32);padding:7px 14px;border-radius:99px}
/* Faction : emblème agrandi, collé À DROITE de la bannière ; textes à gauche */
.sc-overlay.fac-overlay{flex-direction:row-reverse;justify-content:space-between;align-items:center;
  text-align:left;left:32px;right:32px;max-width:none;width:auto}
.sc-overlay.fac-overlay .sc-emblem{width:240px;height:240px;margin:0;align-self:center;flex:0 0 auto}
.sc-overlay.fac-overlay .fac-txt{display:flex;flex-direction:column;align-items:flex-start;min-width:0}
.sc-overlay.fac-overlay .sc-chips{justify-content:flex-start}
/* Main de cartes (factions / personnages) */
.card-hand-sec{max-width:1180px;margin:0 auto;padding:6px 28px 60px}
.card-hand-sec h3{font-family:var(--font-heading);font-size:22px;color:var(--gold);text-align:center;margin:0 0 6px}
.card-hand-sec .hint-c{text-align:center;color:var(--muted);font-size:13px;margin-bottom:14px}
.card-fan{display:flex;justify-content:center;align-items:flex-end;padding:24px 0 8px;min-height:300px;flex-wrap:wrap}
.card-fan img{width:166px;border-radius:10px;box-shadow:0 16px 40px rgba(0,0,0,.55);margin-left:-56px;
  transform-origin:bottom center;transition:transform .28s,box-shadow .28s;border:1px solid rgba(0,0,0,.45);will-change:transform}
.card-fan img:first-child{margin-left:0}
.card-fan img:hover{transform:translateY(-30px) scale(1.07) rotate(0deg)!important;z-index:20;box-shadow:0 28px 64px rgba(0,0,0,.7)}
@media(max-width:760px){.card-fan img{width:118px;margin-left:-44px}}
/* Bloc d'intro déplacé SOUS la présentation */
.sc-intro{text-align:center;max-width:760px;margin:0 auto;padding:10px 28px 60px}
.sc-intro .kicker{font-size:12px;letter-spacing:4px;text-transform:uppercase;color:var(--gold);font-weight:700;margin-bottom:12px}
.sc-intro h2{font-size:calc(clamp(26px,3.6vw,40px) * var(--fs-h2,1));font-weight:800;
  background:linear-gradient(180deg,#fff,var(--gold));-webkit-background-clip:text;background-clip:text;color:transparent}
.sc-intro p{color:var(--muted);font-size:16px;line-height:1.6;margin:14px auto 0}
@media(max-width:760px){
  :root{--nav-h:90px}
  .sc-pose{display:none}
  .sc-stage{height:clamp(380px,56vh,520px)}
  .sc-overlay{padding:26px 22px;left:0;right:0;max-width:100%;align-items:flex-start;text-align:left}
  .sc-emblem{align-self:flex-start}
  .sc-chips{justify-content:flex-start}
  .sc-content{padding:24px 22px}
}

/* ───────── Footer ───────── */
footer{background:#070410;border-top:1px solid var(--line);padding:60px 28px 34px}
.foot-wrap{max-width:1180px;margin:0 auto;display:flex;flex-wrap:wrap;gap:40px;justify-content:space-between}
.foot-brand{max-width:320px}
.foot-brand .brand{margin-bottom:14px}
.foot-brand p{color:var(--muted);font-size:14px;line-height:1.6}
.foot-stores{display:flex;flex-wrap:wrap;gap:12px;margin-top:18px}
.store-badge{display:inline-flex;border-radius:8px;transition:transform .2s,filter .2s,box-shadow .2s;box-shadow:0 2px 10px rgba(0,0,0,.45)}
.store-badge img{height:42px;width:auto;display:block;border-radius:8px}
.store-badge:hover{transform:translateY(-2px);filter:brightness(1.08);box-shadow:0 6px 18px rgba(0,0,0,.55)}
.foot-col h4{font-size:12px;letter-spacing:2px;text-transform:uppercase;color:var(--gold);
  margin-bottom:16px;font-family:'Inter',sans-serif;font-weight:700}
.foot-col a{display:block;color:var(--muted);font-size:14px;margin-bottom:11px;transition:.2s;cursor:pointer}
.foot-col a:hover{color:var(--gold-bright)}
.foot-bottom{max-width:1180px;margin:42px auto 0;padding-top:24px;border-top:1px solid var(--line);
  display:flex;flex-wrap:wrap;gap:14px;justify-content:space-between;align-items:center;color:var(--muted);font-size:13px}

/* ───────── Legal modal ───────── */
.modal-back{position:fixed;inset:0;z-index:200;background:rgba(4,2,10,.8);backdrop-filter:blur(6px);
  display:none;align-items:center;justify-content:center;padding:24px}
.modal-back.open{display:flex}
.modal{background:var(--modal-bg, var(--panel)) center/100% 100% no-repeat;border:1px solid var(--line);border-radius:18px;width:min(820px,100%);
  max-height:86vh;display:flex;flex-direction:column;box-shadow:0 40px 100px rgba(0,0,0,.6)}
.modal-head{display:flex;align-items:center;justify-content:space-between;padding:22px 26px;border-bottom:1px solid var(--line)}
.modal-head h3{font-size:22px;color:var(--gold)}
.modal-head button{background:none;border:none;color:var(--muted);font-size:28px;cursor:pointer}
.modal-body{padding:26px 30px;overflow:auto;line-height:1.65;color:#dcd3ec;font-size:15px}
.modal-body h1,.modal-body h2,.modal-body h3{font-family:'Cinzel',serif;color:var(--gold-bright);margin:20px 0 10px}
.modal-body p{margin:0 0 12px}
.modal-body a{color:var(--gold-bright);text-decoration:underline}
.modal-body table{border-collapse:collapse;width:100%;margin:12px 0}
.modal-body td,.modal-body th{border:1px solid var(--line);padding:8px 10px;font-size:14px}

/* ───────── CTA buttons — plaque métal doré propre (sans image, zéro déformation) ───────── */
.cta{display:inline-flex;align-items:center;justify-content:center;gap:10px;cursor:pointer;
  min-height:56px;padding:0 36px;letter-spacing:1px;transition:.2s;text-transform:uppercase;border-radius:12px;
  font-weight:800;font-family:var(--font-heading);font-size:16px;
  color:#2a1d05;
  background:linear-gradient(180deg,#f3da97 0%,var(--gold) 52%,#a47e2c 100%);
  border:1px solid var(--gold-bright);
  box-shadow:0 6px 16px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,248,224,.65), inset 0 -3px 7px rgba(90,60,10,.35);
  text-shadow:0 1px 0 rgba(255,244,210,.5)}
.cta .mi{color:#3a2a08}
.cta:hover{transform:translateY(-2px);filter:brightness(1.05);
  box-shadow:0 10px 24px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,248,224,.75), inset 0 -3px 7px rgba(90,60,10,.3)}

/* ═══════════════ MOBILE / TABLETTE ═══════════════ */
@media(max-width:980px){
  /* ── Barre repliée : LOGO CENTRÉ, burger à droite, le reste masqué ── */
  /* On GARDE la grille 1fr auto 1fr du desktop pour centrer le logo. */
  header.nav{padding:8px 14px}
  .nav-side .links,.lang-toggle,.account-btn{display:none}   /* "Mon compte" va dans le burger */
  .nav-side.left{justify-content:flex-start}
  .nav-side.right{justify-content:flex-end}
  .burger{display:block}
  .nav-logo img{height:104px;margin:0 0 -42px}              /* logo plus compact sur mobile */
  header.nav.scrolled .nav-logo img{height:86px;margin:0 0 -34px}

  /* ── Menu hamburger OUVERT : PLEINE LARGEUR, empilé ── */
  header.nav.mobile-open{display:flex;flex-direction:column;align-items:stretch;gap:4px;
    background:var(--ink);border-bottom:1px solid var(--line);padding:10px 16px 20px}
  header.nav.mobile-open .nav-logo{order:-2;align-self:center;margin:0 auto 10px}
  header.nav.mobile-open .nav-logo img{height:104px;margin:0}     /* pas de marge négative dans le menu */
  header.nav.mobile-open .burger{position:absolute;top:12px;right:14px;z-index:3}
  header.nav.mobile-open .nav-side{order:0;display:flex;flex-direction:column;align-items:stretch;width:100%;gap:3px;min-width:0}
  header.nav.mobile-open .nav-side.left{order:-1}
  /* Menu simple : liens texte + léger séparateur entre les entrées. */
  header.nav.mobile-open .nav-side .links{display:flex;flex-direction:column;width:100%;gap:0}
  header.nav.mobile-open .nav-side .links a{display:flex;align-items:center;justify-content:center;width:100%;
    padding:16px 12px;font-family:var(--font-heading);font-weight:600;font-size:18px;letter-spacing:2px;text-transform:uppercase;
    color:#cdd8e6;border-bottom:1px solid rgba(150,185,225,.1);transition:color .15s}
  header.nav.mobile-open .nav-side.left .links a:first-child{border-top:1px solid rgba(150,185,225,.1)}
  header.nav.mobile-open .nav-side .links a.active,
  header.nav.mobile-open .nav-side .links a:hover{color:var(--gold-bright)}
  header.nav.mobile-open .lang-toggle{display:inline-flex;align-self:center;margin:16px 0 4px}
  /* "Mon compte" : unique bouton or, discret et premium, en bas du menu */
  header.nav.mobile-open .account-btn{display:inline-flex;align-self:center;justify-content:center;gap:9px;min-height:50px;padding:0 30px;
    margin-top:14px;border-radius:11px;font-family:var(--font-heading);font-weight:700;font-size:14px;letter-spacing:1.5px;text-transform:uppercase;
    color:#2a1d05;border:1px solid var(--gold-bright);
    background:linear-gradient(180deg,#f3da97,var(--gold) 58%,#a47e2c);
    box-shadow:inset 0 1px 0 rgba(255,248,224,.6), 0 5px 16px rgba(0,0,0,.45)}
  header.nav.mobile-open .account-btn:active{transform:translateY(1px)}
  header.nav.mobile-open .account-btn .mi{color:#3a2a08}
}