/* charte-site.css v1 (refonte-site, 02/11/2026) : le contenu des pages de spiderdjango.tv en « Aubergine royale ».
   Chargée en DERNIER par chaque page (après charte-barre.css et les <style> de la page). Les pages dossiers ne la chargent pas : le récit garde sa charte.
   Repris de l'appli du bord : coins coupés. Repris du Reel : trame de points, titres riso (plaque rose décalée), tampons penchés. */

/* fond : aubergine + trame de points rose (comme le Reel) */
html,body{background-color:var(--a-nuit)!important}
body{background-image:radial-gradient(rgba(255,111,181,.10) 1.6px,transparent 2px)!important;background-size:22px 22px!important;
  color:var(--a-texte);font-family:var(--a-corps)!important;-webkit-font-smoothing:antialiased}
body::before,body::after{background-image:none!important}
::selection{background:var(--a-fluo);color:var(--a-nuit)}
a{color:inherit}
:focus-visible{outline:2px solid var(--a-jaune)!important;outline-offset:2px}

/* ---------- titres de section : gros, en riso ---------- */
.gg-pre,.section-pre,.section-pretitle,.pretitle,.intro-pretitle,.hero-pretitle{font-family:var(--a-mono)!important;font-size:12px!important;letter-spacing:.5px!important;
  text-transform:none!important;color:var(--a-rose)!important}
.gg-title,.section-title,h1,h2,.hero-title,.intro-title,.selec-title{font-family:var(--a-titre)!important;font-weight:900!important;text-transform:uppercase;letter-spacing:.3px!important;color:var(--a-creme)!important;
  text-shadow:.05em .045em 0 var(--a-fluo)}
.gg-title{font-size:clamp(30px,5vw,44px)!important;line-height:.95!important}
.gg-link{font-family:var(--a-mono)!important;text-transform:none!important;letter-spacing:.3px!important;color:var(--a-jaune)!important;font-size:13px!important}

/* ---------- panneaux à coins coupés (repris du bord) ---------- */
.gg-hero,.gg-nb,.card,.bloc,.kdoa-card,.quote-card,.selec-carte{border-radius:0!important;
  clip-path:polygon(var(--a-coin) 0,100% 0,100% calc(100% - var(--a-coin)),calc(100% - var(--a-coin)) 100%,0 100%,0 var(--a-coin))}
.gg-hero{border-bottom:0!important;box-shadow:none!important;background:var(--a-nuit-2)!important;outline:1px solid var(--a-lisere)}
.gg-hero-panel{background:var(--a-nuit)!important;border-radius:0!important;border:2px solid var(--a-creme);box-shadow:8px 8px 0 var(--a-fluo)!important}
.gg-hero-title{font-family:var(--a-titre)!important;font-weight:900!important;font-size:34px!important;line-height:.98!important;text-transform:uppercase;color:var(--a-creme)!important}
.gg-hero-periode,.gg-hero-studio{font-family:var(--a-mono)!important;letter-spacing:.3px!important;text-transform:none!important;color:var(--a-doux)!important}
.gg-hero-prix{font-family:var(--a-titre)!important;font-weight:900;font-size:20px!important;color:var(--a-jaune)!important}
.gg-hero-btn,.btn.primary,.taverne-cta-btn{font-family:var(--a-titre)!important;font-weight:900!important;font-size:18px!important;letter-spacing:.8px!important;text-transform:uppercase;
  background:var(--a-fluo)!important;color:var(--a-nuit)!important;border:0!important;border-radius:0!important;padding:10px 20px!important;
  clip-path:polygon(9px 0,100% 0,100% calc(100% - 9px),calc(100% - 9px) 100%,0 100%,0 9px);transition:background .15s,transform .15s}
.gg-hero-btn:hover,.btn.primary:hover,.taverne-cta-btn:hover{background:var(--a-jaune)!important;transform:translate(-2px,-2px)}
.btn{border-radius:0!important;font-family:var(--a-mono)!important;text-transform:none!important;letter-spacing:.3px!important}
.gg-hero-dos{background:var(--a-rose)!important;color:var(--a-nuit)!important;border-radius:0!important;font-family:var(--a-mono)!important}

/* tampon penché (« mieux noté de la semaine », couronnes) */
.selec-couronne,.selec-auto,.gg-hero-panel .selec-couronne,.gg-hero-panel .selec-auto{font-family:var(--a-mono)!important;font-size:12px!important;letter-spacing:.3px!important;text-transform:none!important;
  color:var(--a-jaune)!important;background:transparent!important;border:2px solid var(--a-jaune)!important;border-radius:0!important;padding:4px 9px!important;
  transform:rotate(-3deg);box-shadow:none!important;animation:aTampon .45s cubic-bezier(.3,1.6,.5,1) both}

/* les vignettes du carrousel */
.gg-hero-thumbs{background:var(--a-nuit-2)!important}
.gg-thumb{font-family:var(--a-mono)!important}

/* le fil */
.gg-nb{background:var(--a-nuit-2)!important;border-color:var(--a-lisere)!important}
.gg-nb-fleche{color:var(--a-rose)!important}

/* le fil : l'info choisie est surlignée, pas inondée */
.gg-nb-item.on{background:var(--a-panneau)!important;box-shadow:inset 5px 0 0 var(--a-fluo)}
.gg-nb-item.on .gg-nb-item-title{color:var(--a-creme)!important}.gg-nb-item.on .gg-nb-item-date{color:var(--a-rose)!important}
.gg-nb-item.dossier.on{background:var(--a-panneau)!important;box-shadow:inset 5px 0 0 var(--a-jaune)}
.gg-nb-item-title{font-family:var(--a-corps)!important;font-weight:700!important;font-size:14px!important}
.gg-hero-title,.gg-hero-panel h3{-webkit-text-fill-color:currentColor!important;background:none!important}
@media (max-width:700px){.gg-hero-title{font-size:30px!important}}

/* titres de rubrique des autres blocs de l'accueil */
.cal-title,.taverne-cta-title{font-family:var(--a-titre)!important;font-weight:900!important;text-transform:uppercase;letter-spacing:.3px!important;font-size:clamp(28px,4vw,40px)!important;color:var(--a-creme)!important;text-shadow:.05em .045em 0 var(--a-fluo)}

/* téléphone : les flèches du carrousel ne couvrent plus le texte du panneau */
@media (max-width:900px){.gg-sec .trip-arrow{bottom:auto!important;height:calc((100vw - 40px) / 3.097)!important}
  .gg-hero-panel{box-shadow:none!important;border-width:0 0 2px!important;border-color:var(--a-fluo)!important}}

/* fiche : gros titre, notes en jaune, étiquettes lisibles */
.hero-title{font-size:clamp(46px,7vw,96px)!important;line-height:.92!important;letter-spacing:.5px!important}
.indicator-block,.overview-grid > *{border-radius:0!important;background:var(--a-panneau)!important;border-color:var(--a-trait)!important}
.indicator-label,.overview-label,.indicator-sub{color:var(--a-doux)!important;font-size:11px!important;letter-spacing:.4px!important;text-transform:none!important}
.indicator-steam,.indicator-igdb{font-family:var(--a-titre)!important;font-weight:900!important;font-size:26px!important;color:var(--a-jaune)!important;background:none!important;border:0!important;padding:0!important}
.badge,.hero-badges > *{border-radius:0!important}
.sub,.hero-meta{font-family:var(--a-mono)!important;letter-spacing:.3px!important;text-transform:none!important;color:var(--a-doux)!important}

/* les panneaux de contenu (cartes « verre » de l'ancienne peau) passent en panneau aubergine */
.card,.selec-carte,.disc-card,.bloc,.game-card,.panel,section.bloc{background:var(--a-panneau)!important;border-color:var(--a-trait)!important}
@media (max-width:900px){.gg-hero-slide::after{display:none!important}}

/* icônes au trait (même grammaire que le bord : 24, trait 1.75, angles vifs) */
.ico{width:1.15em;height:1.15em;vertical-align:-.18em;fill:none;stroke:currentColor;stroke-width:1.75;stroke-linecap:square;stroke-linejoin:miter}

/* ---------- mouvements (un seul moment à l'arrivée, le reste répond au geste) ---------- */
@keyframes aTampon{from{transform:rotate(-14deg) scale(1.6);opacity:0}to{transform:rotate(-3deg) scale(1);opacity:1}}
@keyframes aRiso{from{text-shadow:0 0 0 var(--a-fluo)}to{text-shadow:.05em .045em 0 var(--a-fluo)}}
.gg-title,h1{animation:aRiso .5s .15s cubic-bezier(.2,.8,.2,1) both}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* découvertes : l'image de la carte reste dans sa colonne (le ratio 16/9 étiré en hauteur l'élargissait par-dessus le texte) */
.disc-cover{width:100%!important;min-width:0}

/* pages légales : les sections en panneau aubergine, coins coupés */
.legal-section{background:var(--a-panneau)!important;border-color:var(--a-trait)!important;border-radius:0!important;
  clip-path:polygon(var(--a-coin) 0,100% 0,100% calc(100% - var(--a-coin)),calc(100% - var(--a-coin)) 100%,0 100%,0 var(--a-coin))}

/* mini-jeux : bornes en panneau à coins coupés, une couleur de la charte par jeu (le liseré du haut), bouton « Jouer » rose fluo, jaune au survol */
.borne{background:var(--a-panneau)!important;border-color:var(--a-trait)!important;border-radius:0!important;
  clip-path:polygon(var(--a-coin) 0,100% 0,100% calc(100% - var(--a-coin)),calc(100% - var(--a-coin)) 100%,0 100%,0 var(--a-coin))}
.borne::before{left:0!important;right:0!important;height:4px!important;border-radius:0!important}
.borne-abordage,.borne-duel{--enseigne:var(--a-fluo)!important;--lueur:rgba(255,46,136,.35)!important}
.borne-horizon,.borne-encore{--enseigne:var(--a-jaune)!important;--lueur:rgba(255,210,63,.3)!important}
.borne-triade,.borne-loup{--enseigne:var(--a-rose)!important;--lueur:rgba(255,111,181,.35)!important}
.borne p{color:var(--a-texte)!important}
.borne .meta,.arcade-note{color:var(--a-doux)!important;font-size:13px!important;letter-spacing:.2px!important}
.borne .badge{border-radius:0!important;color:var(--a-creme)!important;border-color:var(--a-lisere)!important;background:var(--a-nuit-2)!important}
a.jouer,.borne a.jouer{background:var(--a-fluo)!important;color:var(--a-nuit)!important;filter:none!important;border-radius:0!important;
  font-family:var(--a-titre)!important;font-weight:900!important;font-size:20px!important;letter-spacing:.8px!important;text-transform:uppercase;padding:11px 14px!important;
  clip-path:polygon(9px 0,100% 0,100% calc(100% - 9px),calc(100% - 9px) 100%,0 100%,0 9px);transition:background .15s,transform .15s!important}
a.jouer:hover,.borne a.jouer:hover{background:var(--a-jaune)!important;transform:translate(-2px,-2px)}
a.jouer.off{background:transparent!important;color:var(--a-doux)!important;border:1px dashed var(--a-lisere)!important;clip-path:none}