/* ============================================================
   pixel.css — Habillage « pixel art » de la vitrine (12/10/2026)
   Couche chargée APRÈS site.css : elle redessine l'apparence pour
   rejoindre le jeu (bascule complète en pixel art du 12/10/2026) sans
   toucher à la mise en page. Retour arrière = retirer le <link> de
   inc/tete.php.
   Ressources reprises du jeu : cadres 9-tranches, boutons 6 états, icônes
   (assets/ui/), polices Pixelify Sans (texte) et Press Start 2P (titres
   très courts), fond de zone « Trame ».
   Règles : aucun dégradé de texte, aucun flou, aucun halo, aucun arrondi ;
   ombres DURES uniquement ; mouvements par paliers.
   ============================================================ */

/* ── Polices (auto-hébergées, comme le jeu) ─────────────────── */
@font-face{font-family:'Pixelify Sans';font-style:normal;font-weight:400 700;font-display:swap;
  src:url(../fonts/pixelify-sans-latin.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Pixelify Sans';font-style:normal;font-weight:400 700;font-display:swap;
  src:url(../fonts/pixelify-sans-latin-ext.woff2) format('woff2');
  unicode-range:U+0100-02AF,U+0304,U+0308,U+0329,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Press Start 2P';font-style:normal;font-weight:400;font-display:swap;
  src:url(../fonts/press-start-2p-latin.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Press Start 2P';font-style:normal;font-weight:400;font-display:swap;
  src:url(../fonts/press-start-2p-latin-ext.woff2) format('woff2');
  unicode-range:U+0100-02AF,U+0304,U+0308,U+0329,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}

:root{
  --titre:'Pixelify Sans','Courier New',monospace;
  --corps:'Pixelify Sans','Courier New',monospace;
  --px:'Press Start 2P','Courier New',monospace;
  --ombre:#14090a;                 /* ombre dure des textes */
  --nuit-pixel:#0a1330;            /* fond des plaques (couleur du cœur des cadres) */
}

body{font-size:18px;line-height:1.55;font-variant-ligatures:none;-webkit-font-smoothing:auto}
img{image-rendering:auto}
.px-net,.carte-ico img,.px-fig img,.marque svg{image-rendering:pixelated}

/* ── Fond : la Trame du jeu, assombrie ──────────────────────── */
.fond{background:
  linear-gradient(180deg,rgba(5,10,24,.74),rgba(4,8,20,.9) 55%,rgba(3,6,16,.96)),
  url(../ui/fonds/trame.webp) center top/cover no-repeat;
  image-rendering:pixelated}
.fond::after{display:none}

/* ── En-tête ────────────────────────────────────────────────── */
.entete{background:#060c1e;backdrop-filter:none;-webkit-backdrop-filter:none}
.entete::after,.pied::before{height:4px;
  background:repeating-linear-gradient(90deg,var(--or) 0 8px,var(--or-sombre) 8px 12px)}
.entete-in{padding-block:12px}
.marque svg{filter:none;transition:none}
.marque:hover svg{transform:none}
.marque b{font-family:var(--titre);font-weight:500;font-size:22px;letter-spacing:.02em;
  background:none;-webkit-background-clip:border-box;background-clip:border-box;
  color:var(--or);text-shadow:2px 2px 0 var(--ombre)}
.nav a{font-family:var(--px);font-size:9px;font-weight:400;letter-spacing:.04em;transition:none;padding:11px 11px}
.nav a:hover{color:var(--or)}
.nav a[aria-current="page"]{color:var(--or)}
.nav a[aria-current="page"]::after{transform:none;width:8px;height:8px;margin-left:-4px;bottom:-1px;
  background:var(--or);box-shadow:none}
.nav a.btn{font-family:var(--px);font-size:10px;letter-spacing:.04em;min-height:48px;padding:0 6px}
.burger{border:4px solid var(--or-sombre);background:#0a1330;color:var(--or);height:44px;width:48px;font-family:var(--px)}
@media(min-width:861px) and (max-width:1120px){.nav a{padding:11px 6px;letter-spacing:0}.nav a.btn{padding:0 4px}}

/* ── Boutons : images du jeu (6 états), 9 tranches ×2 ───────── */
.btn{--o:0;overflow:visible;clip-path:none;isolation:auto;
  border:18px solid transparent;border-image:url(../ui/boutons/principal.png) 9 fill/18px stretch;
  background:none;padding:0 12px;min-height:54px;
  font-family:var(--px);font-size:11px;font-weight:400;letter-spacing:.04em;line-height:1;
  color:#fff;text-shadow:2px 2px 0 #101a44;transition:none;image-rendering:pixelated}
.btn::before,.btn::after{display:none}
.btn:hover{filter:none;color:#fff;border-image-source:url(../ui/boutons/survol.png)}
.btn:active{transform:translateY(2px)}
.btn--fantome{background:none;clip-path:none;color:var(--or-clair);text-shadow:2px 2px 0 var(--ombre);
  border-image-source:url(../ui/boutons/secondaire.png)}
.btn--fantome:hover{background:none;color:#fff;border-image-source:url(../ui/boutons/survol.png)}
.btn--large{min-height:62px;padding:0 18px;font-size:12px;border-image-source:url(../ui/boutons/cta.png)}
.btn--large:hover{border-image-source:url(../ui/boutons/survol.png)}

/* ── Titres ─────────────────────────────────────────────────── */
h1,h2,h3{font-family:var(--titre);font-weight:500;letter-spacing:0;line-height:1.15}
h1,h2{background:none;-webkit-background-clip:border-box;background-clip:border-box;
  color:var(--or);text-shadow:3px 3px 0 var(--ombre)}
h1{font-size:clamp(2rem,4.6vw,3.2rem)}
h2{font-size:clamp(1.7rem,3.4vw,2.4rem);margin-bottom:18px}
h3{font-size:1.2rem;letter-spacing:.01em}
.surtitre{font-family:var(--px);font-size:10px;font-weight:400;letter-spacing:.08em;color:var(--perv);margin-bottom:14px;gap:12px}
.surtitre::before{transform:none;width:8px;height:8px;box-shadow:none}
.chapo{font-size:1.2rem}
.prologue{font-size:1.4rem}
.ruban{font-family:var(--px);font-size:10px;font-weight:400;letter-spacing:.06em}
.pastille{border-radius:0;box-shadow:none;animation:pixel-clignote 1.6s steps(2,end) infinite}
@keyframes pixel-clignote{50%{opacity:.25}}

/* ── Panneaux : cadres du jeu ───────────────────────────────── */
.carte,.plate,.actu,.appel,.heros-panneau,.encadre,.vide{border-radius:0}
.carte,.plate,.actu{border:18px solid transparent;border-image:url(../ui/cadres/panneau.png) 9 fill/18px stretch;
  background:none;box-shadow:none;image-rendering:pixelated}
.heros-panneau{border:24px solid transparent;border-image:url(../ui/cadres/accent.png) 12 fill/24px stretch;
  background:none;box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none;padding:2px 6px;image-rendering:pixelated}
.encadre{border:24px solid transparent;border-image:url(../ui/cadres/riche.png) 12 fill/24px stretch;
  background:none;box-shadow:none;padding:6px 10px;image-rendering:pixelated}
.appel{border:32px solid transparent;border-image:url(../ui/cadres/orne.png) 16 fill/32px stretch;
  background:none;box-shadow:none;padding:18px 14px;image-rendering:pixelated}
.carte::before,.plate::before,.actu::before,.appel::before,.heros-panneau::before,.encadre::before,
.carte::after,.plate::after,.actu::after,.appel::after,.heros-panneau::after,.encadre::after{display:none}
.carte{padding:6px 8px 4px;transition:none}
.carte:hover{transform:none;box-shadow:none;filter:brightness(1.18)}
.plate{padding:6px 8px 4px}
.actu-corps{padding:4px 8px}
.carte h3,.plate h3{color:var(--or-clair);font-size:1.18rem}
.vide{border:4px dashed var(--or-sombre);background:rgba(6,12,30,.7)}

/* Icône = emplacement d'objet du jeu */
.carte-ico{width:64px;height:64px;margin-bottom:12px;border:16px solid transparent;
  border-image:url(../ui/cadres/carte.png) 8 fill/16px stretch;border-radius:0;
  background:none;box-shadow:none;image-rendering:pixelated;
  font-family:var(--px);font-size:14px;font-weight:400;color:var(--or-clair);text-shadow:2px 2px 0 var(--ombre)}
.carte-ico img{width:32px;height:32px;max-width:none;margin:-8px}

/* ── Héros ──────────────────────────────────────────────────── */
.heros h1{font-size:clamp(1.5rem,2.5vw,2rem);margin-bottom:16px}
.heros .btn--large{padding:0 10px;font-size:11px}
.heros-img img{image-rendering:auto}

/* ── Échos : cadres de rareté du jeu ────────────────────────── */
.echo{border:16px solid transparent;border-radius:0;box-shadow:none;background:none;
  border-image:url(../ui/cadres/carte_commun.png) 8 fill/16px stretch;image-rendering:pixelated;transition:none}
.echo:has(.r-rare){border-image-source:url(../ui/cadres/carte_rare.png)}
.echo:has(.r-sr){border-image-source:url(../ui/cadres/carte_epique.png)}
.echo:has(.r-ssr){border-image-source:url(../ui/cadres/carte_legendaire.png)}
.echo:has(.r-legendaire){border-image-source:url(../ui/cadres/carte_mythique.png)}
.echo:hover{transform:none;box-shadow:none;filter:brightness(1.15)}
.echo:hover img{transform:none}
.echo-bas{padding:40px 8px 6px;background:linear-gradient(0deg,rgba(4,8,20,.96) 40%,rgba(4,8,20,0))}
.echo-nom{font-family:var(--titre);font-size:1.3rem;text-shadow:2px 2px 0 var(--ombre)}
.echo-meta{font-size:.9rem;letter-spacing:.04em}
.echo-rar{top:6px;left:6px;border-radius:0;border-width:2px;font-family:var(--px);font-size:8px;font-weight:400;
  letter-spacing:.02em;padding:5px 6px;background:#060c1e}

/* ── Images et captures : bord pixel à coins coupés ─────────── */
.vue,.lore-img,.px-fig{border-radius:0;margin:4px;
  box-shadow:0 -4px 0 0 var(--or),0 4px 0 0 var(--or),-4px 0 0 0 var(--or),4px 0 0 0 var(--or)}
.vue:hover img{transform:none}
.vue-cap{border-top:4px solid var(--or-sombre);background:#0a1330;font-size:1rem}
.vue-cap b{font-family:var(--titre);font-weight:500}
.px-fig{background:linear-gradient(170deg,#141033,#070b1c)}
.px-fig--boss{background:linear-gradient(170deg,#1a1440,#0a0d22)}
.px-fig--boss img{filter:brightness(1.25)}
.px-fig b{font-family:var(--titre);font-weight:500}
.px-fig span{font-family:var(--px);font-size:8px;letter-spacing:.04em}
.actu-vignette{box-shadow:inset -4px 0 0 0 var(--or-sombre)}

/* ── Textes ─────────────────────────────────────────────────── */
.citation{font-family:var(--titre);font-weight:600;border-left:4px solid var(--or)}
.etiq{border-radius:0;border-width:2px;font-family:var(--px);font-size:8px;font-weight:400;letter-spacing:.02em;padding:5px 7px}
.pixel-avenir li::before,.ia-liste--config li::before{transform:none;box-shadow:none;width:8px;height:8px}
.pixel-avenir li{padding-left:24px}
.chiffres::before,.chiffres::after{height:4px;
  background:repeating-linear-gradient(90deg,var(--or-sombre) 0 8px,transparent 8px 16px)}
.chiffre b{font-family:var(--px);font-weight:400;font-size:1.7rem;line-height:1.5;
  background:none;-webkit-background-clip:border-box;background-clip:border-box;
  color:var(--or);text-shadow:3px 3px 0 var(--ombre)}
.chiffre span{font-family:var(--px);font-size:8px;font-weight:400;letter-spacing:.06em;line-height:1.8}

/* ── AnotherVerse IA ────────────────────────────────────────── */
.ia-ex{border-radius:0;border:4px solid #1c4a70;background:#071428;box-shadow:none}
.ia-ex p{border-radius:0}
.ia-ex-nova::before{font-family:var(--px);font-size:8px;letter-spacing:.06em}

/* ── Pied ───────────────────────────────────────────────────── */
.pied{background:#060c1e}
.pied h4{font-family:var(--px);font-size:9px;font-weight:400;letter-spacing:.06em}
.pied-bas{border-top:4px dashed var(--or-sombre)}

/* ── Écrans étroits ─────────────────────────────────────────── */
@media(max-width:860px){
  body{font-size:17px}
  .nav{background:#060c1e;border-bottom:4px solid var(--or-sombre);inset:62px 0 auto 0}
  .nav a{font-size:10px;padding:15px 12px}
  .nav a[aria-current="page"]::after{left:auto;right:14px;bottom:50%;margin:0 0 -4px}
  .nav a.btn{margin:12px 0 0}
  .heros-panneau{padding:2px 4px}
  .appel{padding:10px 4px}
  .chiffre b{font-size:1.35rem}
}

@media(prefers-reduced-motion:reduce){.pastille{animation:none}}

/* Captures d'interface (ratio 1366×628) : jamais rognées par le 16/9 de la galerie */
.vue img[src*="interface-"]{aspect-ratio:1366/628;object-fit:contain;height:auto;image-rendering:auto}

/* ── Passe du 13/10/2026 ────────────────────────────────────── */
/* Texte tertiaire un cran plus clair (contraste ≥ 6:1 sur les plaques sombres) */
:root{--txt-3:#8493b6}
/* Focus clavier visible et carré, aussi sur les boutons en border-image */
:focus-visible{outline:3px solid var(--or);outline-offset:3px;border-radius:0}
.btn:focus-visible{outline-offset:-2px}
/* Étiquettes en Press Start 2P : 8 px était sous le seuil de lisibilité */
.etiq,.echo-rar,.px-fig span,.ia-ex-nova::before{font-size:9px}
.chiffre span{font-size:10px}
.surtitre,.ruban{font-size:11px}
/* Notes sous les galeries */
.pixel-note{margin-top:14px;color:var(--txt-3);font-size:.95rem}
.pixel-note a{color:var(--perv)}
/* Fonds de zone : agrandis au plus proche voisin, comme dans le jeu */
.vue img.px-net{image-rendering:pixelated}

/* Échos : sprite de face en pixel art, agrandi au plus proche voisin */
.echo img.echo-sprite{object-fit:contain;object-position:center;padding:14% 7% 26%;box-sizing:border-box;
  image-rendering:pixelated;transition:none}
.echo:hover img.echo-sprite{transform:none}