/* ================================================================
   STARFALL PRODUCTIONS — global.css V3.5
   Styles communs à toutes les pages du site.
   Chargé avant le <style> spécifique de chaque page.
   ================================================================ */

/* ================================================================
   01. VARIABLES & RESET
   ================================================================ */
:root {
  --gold:#c9a84c;
  --gold-light:#e8cc80;
  --gold-dim:#7a6030;
  --gold-glow:rgba(201,168,76,.15);

  --navy-deep:#020810;
  --navy-card:rgba(4,10,20,.78);

  --text-primary:#f0ece4;
  --text-secondary:#a8b4c0;
  --text-muted:#6a7a8a;

  --border-gold:rgba(201,168,76,.28);
  --border-sub:rgba(255,255,255,.06);

  --font-display:'Cormorant Garamond', serif;
  --font-title:'Cinzel', serif;
  --font-body:'Raleway', sans-serif;

  --nav-h:76px;
  --max-w:1240px;
  --pad-x:clamp(24px,5vw,80px);

  --ease:cubic-bezier(0.25,0.46,0.45,0.94);
  --ease-out:cubic-bezier(0.16,1,0.3,1);
}

*{ margin:0; padding:0; box-sizing:border-box; }
html{ scroll-behavior:smooth; }

body{
  background: radial-gradient(circle at top, rgba(20,40,80,.3), transparent 40%), #020810;
  color:var(--text-primary);
  font-family:var(--font-body);
  overflow-x:hidden;
}
a{ text-decoration:none; color:inherit; }
ul{ list-style:none; }
button{cursor:pointer;border:none;background:none;font-family:inherit;color:inherit}



/* ----------------------------------------------------------------
   02. NAV BAR (Sync RP)
   ---------------------------------------------------------------- */
.nav{
  position:fixed;top:0;left:0;right:0;
  z-index:1000;
  height:var(--nav-h);
  display:flex;align-items:center;justify-content:space-between;
  padding:0 var(--pad-x);
  gap:16px;
  border-bottom:1px solid transparent;
  transition:background .5s var(--ease),border-color .5s var(--ease),backdrop-filter .5s;
}
.nav.is-scrolled{
  background:rgba(2,8,16,.9);
  backdrop-filter:blur(22px) saturate(1.5);
  -webkit-backdrop-filter:blur(22px) saturate(1.5);
  border-color:var(--border-gold);
}
.nav__logo{
  display:flex;align-items:center;gap:12px;flex-shrink:0;
  transition:opacity .3s;
}
.nav__logo:hover{opacity:.8}
.nav__logo-emblem{
  width:58px; height:58px; flex-shrink:0; border-radius:50%; overflow:hidden;
  box-shadow:0 0 18px rgba(201,168,76,.35);
}
.nav__logo-emblem img{ width:100%; height:100%; object-fit:cover; display:block; }
.nav__logo-text{display:flex;flex-direction:column;line-height:1.15}
.nav__logo-text .studio{
  font-family:var(--font-body);font-size:9px;font-weight:500;
  letter-spacing:.22em;text-transform:uppercase;color:var(--gold-dim);
}
.nav__logo-text .ship{
  font-family:var(--font-title);font-size:14px;letter-spacing:.1em;color:var(--text-primary);
}
.nav__links{ display:flex;align-items:center;gap:4px; flex:1;justify-content:center; }
.nav__link{
  font-family:var(--font-body); font-size:13px; font-weight:500; letter-spacing:.08em;
  text-transform:uppercase; color:var(--text-secondary); padding:9px 14px;
  position:relative; white-space:nowrap; transition:color .3s;
}
.nav__link::after{
  content:''; position:absolute;bottom:4px;left:14px;right:14px;
  height:1px;background:var(--gold);
  transform:scaleX(0);transform-origin:left; transition:transform .35s var(--ease);
}
.nav__link:hover{color:var(--gold-light)}
.nav__link:hover::after{transform:scaleX(1)}

/* ── CURSEURS NAUTIQUES ── */
body,*{cursor:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 40 40'%3E%3Ccircle cx='20' cy='20' r='13' fill='none' stroke='%23c9a84c' stroke-width='1.5'/%3E%3Cline x1='20' y1='2' x2='20' y2='13' stroke='%23c9a84c' stroke-width='1.5' stroke-linecap='round'/%3E%3Cline x1='20' y1='27' x2='20' y2='38' stroke='%23c9a84c' stroke-width='1.5' stroke-linecap='round'/%3E%3Cline x1='2' y1='20' x2='13' y2='20' stroke='%23c9a84c' stroke-width='1.5' stroke-linecap='round'/%3E%3Cline x1='27' y1='20' x2='38' y2='20' stroke='%23c9a84c' stroke-width='1.5' stroke-linecap='round'/%3E%3Ccircle cx='20' cy='20' r='2.5' fill='%23c9a84c'/%3E%3C/svg%3E") 20 20,crosshair!important}
p,h1,h2,h3,h4,h5,h6,span,li,.section-title,.specs-game-title,.spec,.card__badge,.footer__col-desc,.footer__copy{cursor:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='30' viewBox='0 0 22 30'%3E%3Cline x1='4' y1='4' x2='18' y2='4' stroke='%23c9a84c' stroke-width='2' stroke-linecap='round'/%3E%3Cline x1='11' y1='4' x2='11' y2='26' stroke='%23c9a84c' stroke-width='2'/%3E%3Cline x1='4' y1='26' x2='18' y2='26' stroke='%23c9a84c' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") 11 15,text!important}
.footer__cookies-link{
  font-family:var(--font-body);font-size:11px;font-weight:400;letter-spacing:.06em;
  color:var(--text-muted);text-decoration:none;
}
.footer__cookies-link:hover{color:var(--gold);}
a,button,.btn,.card,.back-top,.nav__link,.lang-switcher__trigger,.lang-option,.footer__cookies-link{cursor:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='44' viewBox='0 0 16 22'%3E%3Cpath d='M2 2 L2 18 L6 14 L9 21 L12 20 L9 13 L14 13 Z' fill='%23e8cc80' stroke='black' stroke-width='0.75' stroke-linejoin='round'/%3E%3C/svg%3E") 4 4,pointer!important}
.nav__link.is-active{color:var(--gold-light)}
.nav__link.is-active::after{transform:scaleX(1)}

/* ----------------------------------------------------------------
   03. SÉLECTEUR DE LANGUE (Sync RP)
   ---------------------------------------------------------------- */
.lang-switcher{position:relative;flex-shrink:0}
.lang-switcher__trigger{
  display:flex;align-items:center;gap:6px;
  font-family:var(--font-body);font-size:11px;font-weight:600;letter-spacing:.16em;
  color:var(--text-secondary); padding:7px 12px; border:1px solid var(--border-gold);
  transition:color .3s,border-color .3s,background .3s;
}
.lang-switcher__trigger:hover{color:var(--gold);border-color:var(--gold-dim);background:var(--gold-glow)}
.lang-switcher__trigger .arr{width:8px;height:5px;transition:transform .3s var(--ease)}
.lang-switcher.is-open .arr{transform:rotate(180deg)}
.lang-switcher__dropdown{
  position:absolute;top:calc(100% + 8px);left:0; min-width:130px;
  background:rgba(3,9,20,.97); border:1px solid var(--border-gold); backdrop-filter:blur(16px);
  transform-origin:top left; transform:scaleY(0);opacity:0;pointer-events:none;
  transition:transform .3s var(--ease),opacity .3s;
}
.lang-switcher.is-open .lang-switcher__dropdown{ transform:scaleY(1);opacity:1;pointer-events:auto; }
.lang-option{
  display:flex;align-items:center;gap:10px; width:100%;padding:10px 16px;
  font-size:11px;font-weight:500;letter-spacing:.1em; color:var(--text-secondary);
  transition:background .2s,color .2s; text-decoration:none;
}
.lang-option:hover,.lang-option.active{background:var(--gold-glow);color:var(--gold-light)}




/* ----------------------------------------------------------------
   BOUTON RETOUR EN HAUT
   ---------------------------------------------------------------- */
.back-top{
  position:fixed; bottom:36px; right:36px; z-index:500; width:52px; height:52px;
  display:flex; align-items:center; justify-content:center; border:1px solid var(--border-gold);
  background:rgba(2,8,16,.88); backdrop-filter:blur(12px); color:var(--gold);
  opacity:0; transform:translateY(16px); pointer-events:none;
  transition:opacity .4s var(--ease),transform .4s var(--ease-out),border-color .3s,background .3s,color .3s;
}
.back-top.in{ opacity:1; transform:translateY(0); pointer-events:auto; }
.back-top:hover{ background:var(--gold); border-color:var(--gold); color:#020810; transform:translateY(-4px); }
.back-top svg{ width:18px; height:18px; transition:transform .3s var(--ease); }
.back-top:hover svg{ transform:translateY(-2px); }
.back-top::before{
  content:attr(aria-label); position:absolute; right:calc(100% + 12px); top:50%;
  transform:translateY(-50%); font-family:var(--font-body); font-size:10px; font-weight:500;
  letter-spacing:.12em; text-transform:uppercase; color:var(--text-secondary);
  white-space:nowrap; opacity:0; transition:opacity .25s; pointer-events:none;
}
.back-top:hover::before{ opacity:1; }

/* ----------------------------------------------------------------
   SCROLLBAR
   ---------------------------------------------------------------- */
::-webkit-scrollbar { width: 10px; }
::-webkit-scrollbar-track { background: #05070d; }
::-webkit-scrollbar-thumb {
  background: linear-gradient(to bottom, #7a5a1c, #d4af37, #7a5a1c);
  border-radius: 10px; border: 1px solid rgba(212,175,55,0.25);
}
::-webkit-scrollbar-thumb:hover { background: linear-gradient(to bottom, #9b7424, #f1cd63, #9b7424); }
html { scrollbar-width: thin; scrollbar-color: #b68b2a #05070d; }

/* ================================================================
   MOBILE NAV — Burger 3 traits
   ================================================================ */

/* Burger — caché sur desktop */
.nav__burger{
  display:none;
  flex-direction:column;justify-content:center;gap:6px;
  width:40px;height:40px;
  background:transparent;border:none;
  flex-shrink:0;
  cursor:pointer;
  z-index:1100;
}
.nav__burger span{
  display:block;
  width:26px;height:2px;
  background:var(--text-secondary,#a8b4c0);
  border-radius:2px;
  transition:transform .3s ease,opacity .2s ease,background .3s;
  transform-origin:center;
}
/* Animation → croix */
.nav__burger.is-open span:nth-child(1){transform:translateY(8px) rotate(45deg);background:var(--gold,#c9a84c);}
.nav__burger.is-open span:nth-child(2){opacity:0;transform:scaleX(0);}
.nav__burger.is-open span:nth-child(3){transform:translateY(-8px) rotate(-45deg);background:var(--gold,#c9a84c);}

@media(max-width:768px){

  /* Afficher le burger */
  .nav__burger{display:flex;}

  /* Pousser le lang-switcher avant le burger */
  .nav__links{flex:unset;}
  .lang-switcher{margin-left:auto;}

  /* Panneau de navigation mobile */
  .nav__links{
    /* Position */
    position:fixed;
    top:var(--nav-h,60px);
    left:0;right:0;
    /* Hauteur max pour éviter de déborder sur les petits écrans */
    max-height:calc(100vh - var(--nav-h,60px));
    overflow-y:auto;
    /* Style */
    background:rgba(2,6,20,.98);
    backdrop-filter:blur(20px);
    -webkit-backdrop-filter:blur(20px);
    border-top:1px solid rgba(201,168,76,.22);
    border-bottom:1px solid rgba(201,168,76,.12);
    /* Layout */
    display:flex !important;
    flex-direction:column;
    list-style:none;
    margin:0;padding:8px 0 24px;gap:0;
    /* Animation — caché par défaut */
    opacity:0;
    visibility:hidden;
    pointer-events:none;
    transform:translateY(-6px);
    transition:opacity .22s ease,transform .22s ease,visibility 0s .22s;
    z-index:990;
  }

  /* Ouvert */
  .nav__links.is-open{
    opacity:1;
    visibility:visible;
    pointer-events:auto;
    transform:translateY(0);
    transition:opacity .22s ease,transform .22s ease,visibility 0s 0s;
  }

  /* Liens individuels */
  .nav__link{
    display:block;
    width:100%;
    padding:16px 28px;
    font-size:12px;
    font-family:var(--font-body,'Raleway',sans-serif);
    font-weight:600;
    letter-spacing:.14em;
    text-transform:uppercase;
    color:var(--text-secondary,#a8b4c0);
    box-sizing:border-box;
    border-bottom:1px solid rgba(201,168,76,.07);
    transition:color .2s,background .2s,padding-left .2s;
    white-space:normal;
  }
  .nav__link:last-of-type{border-bottom:none;}
  .nav__link:hover,.nav__link:active{
    color:var(--gold,#c9a84c);
    background:rgba(201,168,76,.05);
    padding-left:36px;
  }
  /* Retirer le soulignement desktop */
  .nav__link::after{display:none;}

  /* Logo : réduire un peu */
  .nav__logo-emblem{width:44px;height:44px;}
  .nav__logo-text .studio{font-size:7px;}
  .nav__logo-text .ship{font-size:12px;}
}

/* ── CARD BUTTONS MOBILE : fixes spécifiques downloads ── */
@media(max-width:768px){
  .card{overflow:visible;}
  .card__buttons{flex-wrap:wrap;gap:12px;}
  .card__buttons .btn{min-width:0 !important;width:100%;box-sizing:border-box;justify-content:center;}
  .card h3{font-size:32px;}
}

/* ================================================================
   MOBILE NAV — Mode 1912 : le panneau burger utilise des couleurs
   codées en dur (navy/or 2026) ; on les remplace ici par la palette
   1912 (variables déjà définies au :root de chaque page -1912.php).
   ================================================================ */
@media(max-width:768px){
  body.page-1912 .nav__links{
    background:var(--paper,#efe4c8);
    border-top:1px solid var(--border-gold,rgba(122,90,28,.35));
    border-bottom:1px solid var(--border-gold,rgba(122,90,28,.2));
  }
  body.page-1912 .nav__link{
    color:var(--ink,#3a2c18);
    border-bottom:1px solid rgba(90,67,36,.12);
  }
  body.page-1912 .nav__link:hover,
  body.page-1912 .nav__link:active{
    color:var(--brass-dark,#5a4324);
    background:rgba(90,67,36,.08);
  }
  body.page-1912 .nav__burger span{
    background:var(--brass-dark,#5a4324);
  }
  body.page-1912 .nav__burger.is-open span:nth-child(1),
  body.page-1912 .nav__burger.is-open span:nth-child(3){
    background:var(--crimson,#7c231c);
  }
}