/* ============================================================
   ecran-titre-pixel.css — Écran titre / connexion en PIXEL ART (12/10/2026)
   ------------------------------------------------------------
   Chargé par index.php (page AUTONOME, sans header.php) APRÈS theme-pixel.css, uniquement quand
   l'interrupteur jeu_config.site_pixel est actif (sinon index.php sert son rendu historique à
   l'identique). Tout est préfixé :root[data-pixel="1"] pour passer devant le <style> en ligne.
   Mêmes ids / names / scripts que la page historique : seul l'habillage change.
   Règles : cadres + boutons du kit (images/ui/pixel/), Press Start 2P pour le logo et les titres
   courts, Pixelify Sans pour le texte, aucun dégradé / arrondi / flou, 1 px d'image = 2 px CSS.
   🪤 font-variant-ligatures:none (ligature « fi » de Pixelify Sans).
   ============================================================ */

:root[data-pixel="1"]{
  --titre:'Press Start 2P',monospace; --ui:'Pixelify Sans',monospace;
  --ok:#5fd36a; --err:#ff6b7a;
  --lp:min(448px,calc(100vw - 24px)); --decal:0px;
}
:root[data-pixel="1"] body,
:root[data-pixel="1"] body *{font-variant-ligatures:none;-webkit-font-smoothing:none}
:root[data-pixel="1"] body::before{display:none!important}   /* décor de zone de theme-pixel.css : l'écran titre a sa scène */

/* ═════════ FOND : scène pixel art, nette (pas de respiration en scale, pas de flou) ═════════ */
:root[data-pixel="1"] .fond{animation:none;transition:filter .3s steps(3);image-rendering:pixelated;
  background-color:var(--pk-nuit-0);background-size:cover;background-repeat:no-repeat;background-position:38% 100%}
:root[data-pixel="1"] body.ouvert .fond{filter:brightness(.62)}
/* Voile : deux bandes à plat (pas de dégradé) pour asseoir le pied de page */
:root[data-pixel="1"] .voile{background:none;box-shadow:inset 0 -96px 0 rgba(5,10,24,.3),inset 0 -48px 0 rgba(5,10,24,.35),inset 0 56px 0 rgba(5,10,24,.25)}

/* ═════════ LOGO : « ANOTHER / VERSE / N·E·X·U·S » en police pixel ═════════ */
@keyframes px-apparait{from{opacity:0}}
@keyframes px-clignote{50%{opacity:.3}}
:root[data-pixel="1"] .titre{align-items:flex-start;justify-content:flex-start;gap:clamp(20px,5vh,44px);
  padding:clamp(56px,14vh,150px) 0 0 clamp(20px,7vw,110px);transition:none}
:root[data-pixel="1"] body.ouvert .titre{transform:none}
:root[data-pixel="1"] .logo{filter:none;animation:px-apparait .9s steps(6) both;align-items:flex-start}
:root[data-pixel="1"] .logo-px .px-a,
:root[data-pixel="1"] .logo-px .px-b{font-family:var(--titre);font-weight:400;text-transform:uppercase;letter-spacing:0;
  font-size:48px;line-height:56px;white-space:nowrap}
:root[data-pixel="1"] .logo-px .px-a{color:var(--pk-or-3);text-shadow:4px 4px 0 var(--pk-or-0),8px 8px 0 rgba(0,0,0,.5)}
:root[data-pixel="1"] .logo-px .px-b{color:var(--pk-perv-3);text-shadow:4px 4px 0 var(--pk-perv-0),8px 8px 0 rgba(0,0,0,.5);padding-left:8px}
:root[data-pixel="1"] .logo-px .px-n{font-family:var(--titre);font-size:16px;line-height:16px;letter-spacing:8px;margin:18px 0 0 8px;
  color:var(--pk-texte2);text-shadow:2px 2px 0 #000}

/* Appel « Cliquez / Touchez pour établir le lien » : clignotement par paliers */
:root[data-pixel="1"] .appel{font-family:var(--titre);font-weight:400;font-size:12px;line-height:16px;letter-spacing:0;text-transform:none;
  color:#fff;text-shadow:2px 2px 0 #000;padding:10px 12px;background:rgba(5,10,24,.82);box-shadow:var(--pk-cran-or);
  animation:px-apparait .9s .5s steps(6) both,px-clignote 1.6s 1.5s steps(1) infinite}
:root[data-pixel="1"] .appel span{animation:none}
:root[data-pixel="1"] body.ouvert .appel{animation:none;opacity:0;visibility:hidden}
:root[data-pixel="1"] .appel::before,
:root[data-pixel="1"] .appel::after{width:8px;height:8px;transform:none;border:0;background:var(--pk-or-3);box-shadow:2px 2px 0 var(--pk-or-0);animation:none}
:root[data-pixel="1"] .appel:focus-visible{outline:2px dashed var(--pk-or-3);outline-offset:8px}

/* ═════════ HUD HAUT / BAS ═════════ */
:root[data-pixel="1"] .statut{padding:8px 10px;border:0;background:#0f2a17;color:#b6f5bf;
  font-family:var(--titre);font-weight:400;font-size:8px;line-height:8px;letter-spacing:0;text-transform:uppercase;
  box-shadow:0 -2px 0 0 var(--pk-ok),0 2px 0 0 var(--pk-ok),-2px 0 0 0 var(--pk-ok),2px 0 0 0 var(--pk-ok)}
:root[data-pixel="1"] .statut i{width:8px;height:8px;background:var(--pk-ok);box-shadow:none;animation:px-clignote 1.2s steps(1) infinite}
:root[data-pixel="1"] .statut b{font-weight:400;color:#fff}
:root[data-pixel="1"] svg.sy{width:24px;height:24px;flex:none;fill:currentColor;stroke:none;shape-rendering:crispEdges}
:root[data-pixel="1"] .rond{width:40px;height:40px;border:0;background:var(--pk-nuit-1);color:var(--pk-or-4);transform:none;
  box-shadow:var(--pk-cran-or)}
:root[data-pixel="1"] .rond:hover{color:#fff;box-shadow:var(--pk-cran-perv);transform:none}
:root[data-pixel="1"] .rond svg.sy{width:24px;height:24px}
:root[data-pixel="1"] #son::after{width:6px;height:6px;right:-6px;top:-6px;background:var(--pk-or-3);box-shadow:none;animation:px-clignote 1s steps(1) infinite}

:root[data-pixel="1"] .version{font-family:var(--ui);font-weight:600;font-size:15px;line-height:1.35;letter-spacing:0;color:var(--pk-texte2);text-shadow:2px 2px 0 #000}
:root[data-pixel="1"] .version b{color:var(--pk-or-4);font-weight:700}
:root[data-pixel="1"] .legal{font-size:14px;letter-spacing:0;color:var(--pk-texte2)}
:root[data-pixel="1"] .legal a{color:var(--pk-texte);border-bottom:2px solid var(--pk-or-1)}
:root[data-pixel="1"] .legal a:hover{color:var(--pk-or-4);border-bottom-color:var(--pk-or-3)}
:root[data-pixel="1"] .raccourci{min-width:76px;padding:10px 8px 8px;border:0;background:var(--pk-nuit-1);color:var(--pk-or-4);transform:none;
  font-family:var(--titre);font-weight:400;font-size:8px;line-height:8px;letter-spacing:0;text-shadow:2px 2px 0 #000;
  box-shadow:var(--pk-cran-or)}
:root[data-pixel="1"] .raccourci svg.sy{width:24px;height:24px}
:root[data-pixel="1"] .raccourci:hover{color:#fff;background:var(--pk-perv-0);box-shadow:var(--pk-cran-perv);transform:none}

/* ═════════ PANNEAU DE CONNEXION : cadre « riche » du kit ═════════ */
:root[data-pixel="1"] .panneau{top:12px;right:12px;bottom:12px;width:var(--lp);
  background:none;border-style:solid;border-width:24px;border-image:url(/jeu/images/ui/pixel/cadres/riche.png) 12 fill / 24px stretch;
  image-rendering:pixelated;box-shadow:none;transform:translateX(calc(100% + 40px));transition:transform .5s steps(8)}
:root[data-pixel="1"] body.ouvert .panneau{transform:none;transition:transform .5s steps(8)}
:root[data-pixel="1"] .panneau[inert]{transition:transform .5s steps(8),visibility 0s .5s}
:root[data-pixel="1"] .panneau::before,
:root[data-pixel="1"] .panneau::after{display:none}
:root[data-pixel="1"] .hud.haut{transition:none}
:root[data-pixel="1"] body.ouvert .hud.haut{padding-right:calc(var(--lp) + 28px)}
:root[data-pixel="1"] .defile{padding:2px 8px 6px;scrollbar-color:var(--pk-or-2) var(--pk-nuit-0)}
:root[data-pixel="1"] .fermer{top:4px;right:4px;width:32px;height:32px;border:0;background:var(--pk-nuit-1);color:var(--pk-or-4);
  box-shadow:var(--pk-cran-or);z-index:3}
:root[data-pixel="1"] .fermer:hover{color:#fff;box-shadow:var(--pk-cran-perv)}
:root[data-pixel="1"] .fermer svg.sy{width:24px;height:24px}

:root[data-pixel="1"] .entete{margin:auto 0 14px;padding-right:40px}
:root[data-pixel="1"] .entete small{font-family:var(--titre);font-weight:400;font-size:8px;line-height:12px;letter-spacing:0;color:var(--pk-perv-3);text-transform:uppercase}
:root[data-pixel="1"] .entete h2{background:none;-webkit-background-clip:border-box;background-clip:border-box;-webkit-text-fill-color:currentColor;
  font-family:var(--titre);font-weight:400;font-size:16px;line-height:24px;letter-spacing:0;text-transform:uppercase;
  color:var(--pk-or-3);text-shadow:2px 2px 0 var(--pk-or-0);margin-top:8px}

:root[data-pixel="1"] .onglets{gap:8px;margin-bottom:16px}
:root[data-pixel="1"] .onglet{clip-path:none;padding:12px 4px;font-family:var(--titre);font-weight:400;font-size:8px;line-height:12px;letter-spacing:0;
  background:var(--pk-nuit-2);color:var(--pk-texte2);box-shadow:var(--pk-cran-nuit);transition:none}
:root[data-pixel="1"] .onglet:hover{color:#fff}
:root[data-pixel="1"] .onglet[aria-selected=true]{background:var(--pk-perv-1);color:#fff;text-shadow:2px 2px 0 var(--pk-perv-0);
  box-shadow:0 -2px 0 0 var(--pk-perv-3),-2px 0 0 0 var(--pk-perv-3),2px 0 0 0 var(--pk-perv-3),0 2px 0 0 var(--pk-perv-3)}

/* Champs */
:root[data-pixel="1"] .champ{margin:0 2px 14px}
:root[data-pixel="1"] .champ > svg.sy{left:12px;margin-top:-12px;width:24px;height:24px;transition:none;color:var(--pk-texte3);stroke:none}
:root[data-pixel="1"] .champ:focus-within > svg.sy{color:var(--pk-or-3);stroke:none}
:root[data-pixel="1"] .champ input{height:48px;padding:0 48px 0 48px;border:0;background:var(--pk-nuit-0);color:var(--pk-texte);
  font-family:var(--ui);font-weight:600;font-size:18px;letter-spacing:0;transition:none;
  box-shadow:var(--pk-cran-nuit),inset 0 2px 0 0 #000}
:root[data-pixel="1"] .champ input::placeholder{color:var(--pk-texte3);font-weight:500}
:root[data-pixel="1"] .champ input:focus{background:var(--pk-nuit-0);box-shadow:var(--pk-cran-perv),inset 0 2px 0 0 #000}
:root[data-pixel="1"] .champ input:-webkit-autofill{-webkit-text-fill-color:var(--pk-texte);caret-color:var(--pk-texte);transition:background-color 99999s}
:root[data-pixel="1"] .champ .oeil{right:6px;margin-top:-18px;color:var(--pk-texte3)}
:root[data-pixel="1"] .champ .oeil:hover{color:var(--pk-or-4)}
:root[data-pixel="1"] .champ .oeil svg.sy{width:24px;height:24px}
:root[data-pixel="1"] .champ .badge{right:10px;padding:4px 5px;border:0;background:var(--pk-perv-0);color:var(--pk-perv-4);
  font-family:var(--titre);font-weight:400;font-size:8px;line-height:8px;letter-spacing:0;box-shadow:var(--pk-cran-perv)}

/* Bouton d'action : image du kit (6 états) */
:root[data-pixel="1"] .cta{clip-path:none;width:100%;height:auto;min-height:44px;margin-top:6px;padding:0 4px;
  border-style:solid;border-width:18px;border-color:transparent;border-image:url(/jeu/images/ui/pixel/boutons/cta.png) 9 fill / 18px stretch;
  background:none;image-rendering:pixelated;
  font-family:var(--titre);font-weight:400;font-size:12px;line-height:12px;letter-spacing:0;text-transform:uppercase;color:#fff;
  text-shadow:2px 2px 0 var(--pk-perv-0);transition:none}
:root[data-pixel="1"] .cta::before,
:root[data-pixel="1"] .cta::after,
:root[data-pixel="1"] .cta span::before,
:root[data-pixel="1"] .cta span::after{display:none}
:root[data-pixel="1"] .cta:hover{filter:none;border-image-source:url(/jeu/images/ui/pixel/boutons/survol.png)}
:root[data-pixel="1"] .cta:active{transform:translateY(2px)}
:root[data-pixel="1"] .cta[disabled]{filter:none;border-image-source:url(/jeu/images/ui/pixel/boutons/indispo.png);color:#9a9a9a;text-shadow:none;cursor:wait;transform:none}
:root[data-pixel="1"] .cta.second{border-image-source:url(/jeu/images/ui/pixel/boutons/secondaire.png);color:var(--pk-or-4);text-shadow:2px 2px 0 #000}
:root[data-pixel="1"] .cta:focus-visible{outline:2px dashed var(--pk-or-3);outline-offset:2px}

:root[data-pixel="1"] .liens{flex-wrap:wrap;gap:8px 12px;margin:12px 2px 0;font-family:var(--ui);font-size:16px;font-weight:600}
:root[data-pixel="1"] .liens a,
:root[data-pixel="1"] .lien{color:var(--pk-perv-3);font-family:var(--ui);font-weight:600;font-size:16px}
:root[data-pixel="1"] .liens a:hover,
:root[data-pixel="1"] .lien:hover{color:var(--pk-or-4);text-decoration:underline;text-decoration-thickness:2px}
:root[data-pixel="1"] .cadeau-appel{color:var(--pk-or-4)!important}
:root[data-pixel="1"] .cadeau-appel b{color:var(--pk-or-3);font-weight:700}
:root[data-pixel="1"] .cadeau-appel .px-ic{width:16px;height:16px;margin:-4px 0 0 2px}
:root[data-pixel="1"] .msg{margin:6px 2px 12px;padding:8px 10px;font-family:var(--ui);font-size:16px;font-weight:700;line-height:1.25;
  background:var(--pk-nuit-0);box-shadow:var(--pk-cran-nuit),inset 4px 0 0 0 currentColor}
:root[data-pixel="1"] .msg:empty{display:none}

/* Mot de passe oublié */
:root[data-pixel="1"] .oubli{margin:14px 2px 0;padding-top:14px;border-top:2px solid var(--pk-nuit-4)}
:root[data-pixel="1"] .oubli p.aide{font-family:var(--ui);font-size:16px;color:var(--pk-texte2)}

/* Cadeau de bienvenue : emplacements d'objets à cadre de rareté, icônes du kit */
:root[data-pixel="1"] .cadeau{margin:2px 2px 16px;padding:12px;border:0;background:var(--pk-nuit-1);box-shadow:var(--pk-cran-or)}
:root[data-pixel="1"] .cadeau h3{font-family:var(--titre);font-weight:400;font-size:8px;line-height:12px;letter-spacing:0;color:var(--pk-or-3)}
:root[data-pixel="1"] .objets{gap:14px;margin-top:12px}
:root[data-pixel="1"] .objet{width:56px;height:56px;border:0;background:var(--pk-nuit-0);
  box-shadow:0 -2px 0 0 var(--r),0 2px 0 0 var(--r),-2px 0 0 0 var(--r),2px 0 0 0 var(--r)}
:root[data-pixel="1"] .objet .px-ic{width:32px;height:32px}
:root[data-pixel="1"] .objet b{right:-8px;bottom:-8px;padding:3px 4px;border:0;background:var(--pk-nuit-0);color:#fff;
  font-family:var(--titre);font-weight:400;font-size:8px;line-height:8px;box-shadow:var(--pk-cran-nuit)}
:root[data-pixel="1"] .cadeau p{font-family:var(--ui);font-size:16px;line-height:1.25;color:var(--pk-texte2)}
:root[data-pixel="1"] .cadeau p b{color:var(--pk-texte)}

/* Case des CGU : carré cranté, coche carrée */
:root[data-pixel="1"] .case{margin:6px 2px;font-family:var(--ui);font-size:16px;line-height:1.25;color:var(--pk-texte2)}
:root[data-pixel="1"] .case input{width:20px;height:20px;margin:2px 2px 0;border:0;background:var(--pk-nuit-0);box-shadow:var(--pk-cran-or)}
:root[data-pixel="1"] .case input:checked{background:var(--pk-nuit-0);border:0}
:root[data-pixel="1"] .case input:checked::after{width:10px;height:10px;border:0;background:var(--pk-or-3);transform:none}
:root[data-pixel="1"] .case input:focus-visible{box-shadow:var(--pk-cran-perv)}
:root[data-pixel="1"] .case a{color:var(--pk-perv-3);text-decoration:underline;text-decoration-thickness:2px}
:root[data-pixel="1"] .case small{color:var(--pk-texte3);font-size:14px}

:root[data-pixel="1"] .pied-panneau{font-family:var(--ui);font-size:14px;color:var(--pk-texte3);padding-top:16px}
:root[data-pixel="1"] .pied-panneau a:hover{color:var(--pk-or-4)!important}

/* ═════════ PAYSAGE COMPACT (téléphone / PWA) ═════════ */
@media (max-height:520px) and (orientation:landscape){
  :root[data-pixel="1"]{--lp:min(440px,56vw)}
  :root[data-pixel="1"] .titre{padding:clamp(40px,12vh,60px) 0 0 clamp(16px,4vw,40px);gap:14px}
  :root[data-pixel="1"] .logo-px .px-a,:root[data-pixel="1"] .logo-px .px-b{font-size:24px;line-height:32px}
  :root[data-pixel="1"] .logo-px .px-a{text-shadow:2px 2px 0 var(--pk-or-0),4px 4px 0 rgba(0,0,0,.5)}
  :root[data-pixel="1"] .logo-px .px-b{text-shadow:2px 2px 0 var(--pk-perv-0),4px 4px 0 rgba(0,0,0,.5);padding-left:4px}
  :root[data-pixel="1"] .logo-px .px-n{font-size:8px;line-height:8px;letter-spacing:4px;margin:8px 0 0 4px}
  :root[data-pixel="1"] .appel{font-size:8px;line-height:12px}
  :root[data-pixel="1"] .hud.haut{padding-top:max(8px,env(safe-area-inset-top))}
  :root[data-pixel="1"] .statut{padding:6px 8px}
  :root[data-pixel="1"] .rond{width:34px;height:34px}
  :root[data-pixel="1"] .rond svg.sy{width:24px;height:24px}
  :root[data-pixel="1"] .version{font-size:13px}
  :root[data-pixel="1"] .raccourci{flex-direction:row;min-width:0;padding:8px 8px;gap:6px}
  :root[data-pixel="1"] .panneau{top:6px;right:6px;bottom:6px;border-width:16px;
    border-image:url(/jeu/images/ui/pixel/cadres/carte.png) 8 fill / 16px stretch;transform:translateX(calc(100% + 24px))}
  :root[data-pixel="1"] body.ouvert .hud.haut{padding-right:calc(var(--lp) + 20px)}
  :root[data-pixel="1"] .defile{padding:0 8px 4px}
  :root[data-pixel="1"] .fermer{top:-6px;right:-6px;width:32px;height:32px}
  :root[data-pixel="1"] .entete{margin:2px 0 8px}
  :root[data-pixel="1"] .entete small{font-size:8px}
  :root[data-pixel="1"] .entete h2{font-size:12px;line-height:16px;margin-top:4px}
  :root[data-pixel="1"] .onglets{margin-bottom:10px}
  :root[data-pixel="1"] .onglet{padding:9px 4px}
  :root[data-pixel="1"] .champ{margin-bottom:10px}
  :root[data-pixel="1"] .champ input{height:40px;font-size:16px}
  :root[data-pixel="1"] .champ > svg.sy{margin-top:-12px}
  :root[data-pixel="1"] .cta{min-height:36px;font-size:8px;line-height:8px;border-width:16px;border-image-width:16px}
  :root[data-pixel="1"] .liens{margin-top:8px;font-size:15px}
  :root[data-pixel="1"] .cadeau{padding:8px 10px;margin-bottom:12px}
  :root[data-pixel="1"] .objet{width:48px;height:48px}
  :root[data-pixel="1"] .objet .px-ic{width:32px;height:32px}
  :root[data-pixel="1"] .pied-panneau{font-size:13px;padding-top:10px}
}
/* Portrait : logo plus petit, panneau en tiroir par le bas */
@media (orientation:portrait){
  :root[data-pixel="1"] .titre{align-items:center;padding:9vh 0 0}
  :root[data-pixel="1"] .logo{align-items:center}
  :root[data-pixel="1"] .logo-px .px-a,:root[data-pixel="1"] .logo-px .px-b{font-size:32px;line-height:40px}
  :root[data-pixel="1"] .logo-px .px-a{text-shadow:4px 4px 0 var(--pk-or-0),6px 6px 0 rgba(0,0,0,.5)}
  :root[data-pixel="1"] .logo-px .px-b{text-shadow:4px 4px 0 var(--pk-perv-0),6px 6px 0 rgba(0,0,0,.5);padding-left:0}
  :root[data-pixel="1"] .logo-px .px-n{font-size:8px;letter-spacing:6px;margin:12px 0 0 6px}
  :root[data-pixel="1"] .appel{font-size:8px}
  :root[data-pixel="1"] body.ouvert .titre{transform:none}
  :root[data-pixel="1"] .fond{background-position:36% 100%}
  :root[data-pixel="1"] .panneau{top:auto;left:8px;right:8px;bottom:8px;width:auto;height:70dvh;transform:translateY(calc(100% + 24px))}
  :root[data-pixel="1"] body.ouvert .panneau{transform:none}
  :root[data-pixel="1"] .panneau[inert]{transition:transform .5s steps(8),visibility 0s .5s}
  :root[data-pixel="1"] body.ouvert .hud.haut{padding-right:max(22px,env(safe-area-inset-right))}
  :root[data-pixel="1"] .raccourci span{display:none}
  :root[data-pixel="1"] .raccourci{min-width:0;padding:10px}
}
@media (prefers-reduced-motion:reduce){
  :root[data-pixel="1"] .panneau,:root[data-pixel="1"] body.ouvert .panneau{transition:none}
}