/* ==========================================================================
   Codexe, base.css
   Reset, typographie, mise en page, header, pied de page, boutons et
   composants communs. Les jetons (couleurs, polices, espacements, mouvement)
   viennent de tokens.css et ne sont jamais redéfinis ici.
   Univers : fond noir, texte blanc, violet pour tout ce qui est interactif,
   aucun arrondi, unité pixel de 4 px (--px).
   ========================================================================== */

:root {
  --header-h: 80px;
  --bordure: 1px solid var(--gris-ligne);
  --z-compagnon: 150;
  --z-menu: 190;
  --z-header: 200;
  --z-dialog: 500;
  --z-curseur: 900;
  --z-boot: 1000;
  --z-transition: 1100;
  --z-arcade: 1200;
}

/* Police de repli aux métriques proches de Manrope : le texte ne saute pas
   quand la police arrive. */
@font-face {
  font-family: "Manrope repli";
  src: local("Helvetica Neue"), local("Arial");
  size-adjust: 97%;
  ascent-override: 104%;
  descent-override: 29%;
  line-gap-override: 0%;
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  overflow-x: hidden;              /* jamais sur body : le header collant en dépend */
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 16px);
  -webkit-text-size-adjust: 100%;
  background: var(--noir);
  color-scheme: light;
}

body {
  margin: 0;
  min-height: 100vh;
  font-family: "Manrope", "Manrope repli", system-ui, sans-serif;
  font-size: var(--fs-texte);
  line-height: 1.6;
  color: var(--blanc);
  background: var(--noir);
  overflow-wrap: break-word;
  -webkit-tap-highlight-color: transparent;
  text-rendering: optimizeLegibility;
}

img, svg, video, canvas { max-width: 100%; height: auto; }
img { display: block; }
.pixelise, .pixelise img, .pixelise canvas { image-rendering: pixelated; }

h1, h2, h3, h4 {
  font-family: var(--font-titre);
  font-weight: 700;
  line-height: 1.12;
  margin: 0 0 0.5em;
  color: var(--blanc);
  text-wrap: balance;
}
h1 { font-size: var(--fs-h1); letter-spacing: -0.01em; }
h2 { font-size: var(--fs-h2); letter-spacing: -0.005em; }
h3 { font-size: var(--fs-h3); font-weight: 600; }
h4 { font-size: 1.1rem; font-weight: 600; }
p { margin: 0 0 1em; }
ul, ol { margin: 0 0 1em; padding-left: 1.25em; }
a {
  color: var(--violet-clair);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
  transition: color var(--duree-rapide) var(--courbe);
}
a:hover { color: var(--blanc); }
strong { font-weight: 700; color: var(--blanc); }
small { font-size: var(--fs-petit); }
code, kbd, pre, samp { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; }
code { font-size: 0.92em; color: var(--violet-clair); }
hr { border: 0; border-top: var(--bordure); margin: var(--espace-4) 0; }
::selection { background: var(--violet); color: #FFFFFF; }

:focus-visible { outline: 2px solid var(--violet); outline-offset: 2px; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }

/* Lien d'évitement */
.skip-link {
  position: absolute; left: 0.6rem; top: -100px; z-index: 300;
  background: var(--violet); color: #fff; padding: 0.7rem 1.2rem;
  font-family: var(--font-titre); font-weight: 700; text-decoration: none;
}
.skip-link:focus { top: 0.6rem; }

.container { max-width: var(--largeur-max); margin-inline: auto; padding-inline: var(--gouttiere); }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
[hidden] { display: none !important; }

/* ---------- Micro-composants pixel ---------- */
.pixel {
  font-family: var(--font-pixel);
  font-size: var(--fs-pixel);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--violet-clair);
  line-height: 1.5;
}
.pixel-blanc { color: var(--blanc); }
.pixel-gris { color: var(--gris-texte); }

.tag {
  display: inline-flex; align-items: center; gap: 0.4em;
  padding: 0.3em 0.6em;
  border: 1px solid var(--gris-ligne); background: var(--surface-2);
  font-family: var(--font-pixel); font-size: var(--fs-pixel); letter-spacing: 0.04em;
  text-transform: uppercase; color: var(--gris-texte); white-space: nowrap; line-height: 1.3;
}
.tag-violet { border-color: var(--violet); color: var(--violet-clair); }

.kbd {
  display: inline-block;
  padding: 0.15em 0.55em 0.2em;
  border: 1px solid var(--gris-texte); border-bottom-width: 3px;
  background: var(--surface-2); color: var(--blanc);
  font-family: var(--font-pixel); font-size: 0.7rem; letter-spacing: 0.06em;
  text-transform: uppercase; line-height: 1.4; vertical-align: middle;
}

.terminal {
  font-family: var(--font-pixel); font-size: var(--fs-pixel); line-height: 2;
  color: var(--gris-texte); letter-spacing: 0.04em; margin: 0; white-space: normal;
}
.terminal .ligne { display: block; }
.terminal .ok { color: var(--violet-clair); }
.terminal .prompt { color: var(--violet); }
.terminal .curseur-term {
  display: inline-block; width: 0.6em; height: 1em; background: var(--violet);
  vertical-align: -0.15em; margin-left: 0.2em;
  animation: clignote 1s steps(2, start) infinite;
}
@keyframes clignote { to { visibility: hidden; } }

/* ---------- Boutons « touches de clavier » ----------
   Une touche qui s'enfonce : bord inférieur de 4 px (--px), enfoncement au clic,
   lueur néon au survol. */
.btn {
  --btn-fond: var(--surface-2);
  --btn-bord: var(--gris-ligne);
  --btn-ombre: #000000;
  --btn-texte: var(--blanc);
  display: inline-flex; align-items: center; justify-content: center; gap: 0.6rem;
  min-height: 48px; padding: 0.75rem 1.5rem;
  font-family: var(--font-titre); font-weight: 700; font-size: 0.95rem;
  letter-spacing: 0.04em; text-transform: uppercase; line-height: 1.2;
  color: var(--btn-texte); background: var(--btn-fond);
  border: 1px solid var(--btn-bord); text-decoration: none; cursor: pointer;
  white-space: nowrap; position: relative; user-select: none;
  box-shadow: 0 var(--px) 0 var(--btn-ombre);
  transition: transform var(--duree-rapide) var(--courbe), box-shadow var(--duree-rapide) var(--courbe),
              border-color var(--duree) var(--courbe), color var(--duree) var(--courbe);
}
@media (hover: hover) and (pointer: fine) { .btn:hover { color: var(--btn-texte); border-color: var(--violet); box-shadow: 0 var(--px) 0 var(--btn-ombre), var(--glow-violet); } }
.btn:active, .btn.enfonce { transform: translateY(var(--px)); box-shadow: 0 0 0 var(--btn-ombre), var(--glow-violet); }
/* Au toucher : l'appui enfonce le bouton sans lueur (rien ne clignote sur téléphone) */
@media (hover: none), (pointer: coarse) { .btn:active, .btn.enfonce { box-shadow: 0 0 0 var(--btn-ombre); } }
.btn svg { flex: none; }
.btn-primaire { --btn-fond: var(--violet); --btn-bord: var(--violet); --btn-ombre: var(--violet-sombre); --btn-texte: #FFFFFF; }
.btn-primaire:hover { --btn-bord: var(--violet-clair); }
.btn-blanc { --btn-fond: var(--blanc); --btn-texte: var(--noir); --btn-bord: var(--blanc); --btn-ombre: var(--gris-texte); }
.btn-lg { min-height: 56px; padding: 0.9rem 2rem; font-size: 1.05rem; }
.btn-sm { min-height: 40px; padding: 0.45rem 0.9rem; font-size: 0.8rem; }
.btn[aria-pressed="true"] { border-color: var(--violet); color: var(--violet-clair); }

.lien-fleche {
  font-family: var(--font-titre); font-weight: 600; text-transform: uppercase;
  letter-spacing: 0.04em; font-size: 0.9rem; text-decoration: none;
  display: inline-flex; align-items: center; gap: 0.5rem;
}
.lien-fleche::after {
  content: ""; width: 9px; height: 9px;
  border-right: 2px solid currentColor; border-top: 2px solid currentColor;
  transform: rotate(45deg); transition: transform var(--duree-rapide) var(--courbe);
}
@media (hover: hover) and (pointer: fine) { .lien-fleche:hover::after { transform: translateX(4px) rotate(45deg); } }

/* ---------- Sections ---------- */
.section { padding-block: var(--espace-6); position: relative; }
.section-tete { max-width: 760px; margin-bottom: var(--espace-4); }
.section-tete .pixel { display: block; margin-bottom: var(--espace-2); }
.section-tete h2 { margin-bottom: 0.45em; }
.section-tete .intro, .intro { font-size: 1.125rem; color: var(--gris-texte); max-width: 60ch; margin: 0; }
.section-pied { margin: var(--espace-4) 0 0; }
.fond-1 { background: var(--surface-1); }
.bord-haut { border-top: var(--bordure); }
.bord-bas { border-bottom: var(--bordure); }

/* ---------- Grilles et cartes ---------- */
.grille { display: grid; gap: var(--gouttiere); }
.grille > * { min-width: 0; }
@media (min-width: 640px) { .grille-2, .grille-3, .grille-4 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .grille-3 { grid-template-columns: repeat(3, 1fr); } .grille-4 { grid-template-columns: repeat(4, 1fr); } }

.carte {
  position: relative; background: var(--surface-2); border: var(--bordure);
  padding: var(--espace-4) var(--espace-3); display: flex; flex-direction: column; gap: var(--espace-2);
  transition: border-color var(--duree) var(--courbe), box-shadow var(--duree) var(--courbe);
}
.carte h3 { margin: 0; }
.carte p { margin: 0; color: var(--gris-texte); }
.carte ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 0.35rem; color: var(--gris-texte); font-size: var(--fs-petit); }
.carte li::before { content: ""; display: inline-block; width: 6px; height: 6px; background: var(--violet); margin-right: 0.6rem; vertical-align: 0.1em; }
@media (hover: hover) and (pointer: fine) { .carte:hover { border-color: var(--violet); box-shadow: var(--glow-violet); } }

/* ==========================================================================
   Header
   ========================================================================== */
.header {
  position: sticky; top: 0; z-index: var(--z-header);
  background: rgba(247, 245, 254, 0.9);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border-bottom: var(--bordure);
}
.header-inner { display: flex; align-items: center; gap: 1.2rem; min-height: var(--header-h); }
.header-logo { flex: none; display: flex; align-items: center; text-decoration: none; }
.header-logo img, .header-logo svg { height: 56px; width: auto; display: block; overflow: visible; }
.header-logo .dino-logo { transform-box: fill-box; transform-origin: 50% 100%; }
@media (hover: hover) and (pointer: fine) { .header-logo:hover .dino-logo { animation: dino-hop 520ms steps(8, end) 1; } }
.header-logo .dino-logo.saute { animation: dino-hop 520ms steps(8, end) 1; }
@keyframes dino-hop { 0%, 100% { transform: translateY(0); } 40% { transform: translateY(-40px); } 70% { transform: translateY(0); } 85% { transform: translateY(-14px); } }

.nav-principale { margin-left: auto; }
.nav-principale > ul { display: flex; align-items: center; gap: 0.2rem; list-style: none; margin: 0; padding: 0; }
.nav-principale a {
  display: flex; align-items: center; gap: 0.5rem; padding: 0.55rem 0.7rem;
  font-family: var(--font-titre); font-weight: 600; font-size: 0.88rem; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--gris-texte); text-decoration: none; white-space: nowrap;
  transition: color var(--duree-rapide) var(--courbe);
}
.nav-principale a:hover { color: var(--blanc); }
.nav-principale a[aria-current="page"], .nav-principale a.actif { color: var(--violet-clair); }
.nav-principale a .num { font-family: var(--font-pixel); font-size: 0.6rem; color: var(--violet); letter-spacing: 0; line-height: 1; }

.header-actions { display: flex; align-items: center; gap: 0.8rem; flex: none; }
/* Puce du record du site : « Record · 1 337 · LCK », vers le jeu */
.header-record {
  display: inline-flex; align-items: center; gap: 0.55em; min-height: 36px; padding: 0.35em 0.7em;
  border: 1px solid var(--violet); background: var(--surface-2); color: var(--blanc); text-decoration: none;
  font-family: var(--font-pixel); font-size: 0.7rem; letter-spacing: 0.06em; text-transform: uppercase; white-space: nowrap;
  box-shadow: 0 var(--px) 0 var(--violet-sombre); transition: box-shadow var(--duree-rapide) var(--courbe), transform var(--duree-rapide) var(--courbe);
}
.header-record::before { content: ""; width: 8px; height: 8px; background: var(--violet); animation: clignote 1.4s steps(2, start) infinite; }
.header-record .rec-lib { color: var(--violet-clair); }
.header-record b { font-weight: 400; color: var(--blanc); }
.header-record .rec-pseudo { color: var(--gris-texte); }
.header-record:hover { color: var(--blanc); box-shadow: 0 var(--px) 0 var(--violet-sombre), var(--glow-violet); }
.header-record:active { transform: translateY(var(--px)); box-shadow: 0 0 0 var(--violet-sombre); }
.header-cta { min-height: 42px; padding: 0.5rem 1.1rem; font-size: 0.85rem; }

.burger {
  display: none; flex-direction: column; justify-content: center; gap: 5px;
  width: 46px; height: 46px; padding: 11px; background: none; border: 1px solid transparent; cursor: pointer;
}
.burger span { display: block; height: 3px; background: var(--blanc); transition: transform var(--duree) var(--courbe), opacity var(--duree) var(--courbe); }
.burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

/* Paliers mesurés à 1920 px : largeur naturelle du header 992 px (logo 142, menu 663, bouton 101,
   écarts), plus une marge de 40 px. Menu resserré sous 1100 px, burger sous 1000 px. */
@media (max-width: 1099px) { .nav-principale a { padding: 0.5rem 0.5rem; font-size: 0.82rem; } .header-inner { gap: 0.8rem; } }
@media (max-width: 999px) {
  /* backdrop-filter crée un bloc conteneur pour position:fixed : le panneau
     serait dimensionné par le header. On le retire sous le palier burger. */
  .header { backdrop-filter: none; -webkit-backdrop-filter: none; background: var(--noir); }
  .nav-principale {
    position: fixed; inset: var(--header-h) 0 0 0; z-index: var(--z-menu);
    background: var(--noir); overflow-y: auto; padding: 0.6rem var(--gouttiere) 3rem; display: none; margin: 0;
  }
  .nav-principale.ouverte { display: block; }
  .nav-principale > ul { flex-direction: column; align-items: stretch; gap: 0; }
  .nav-principale a { width: 100%; font-size: 1.15rem; padding: 1.05rem 0.4rem; border-bottom: var(--bordure); gap: 0.9rem; }
  .nav-principale a .num { font-size: 0.75rem; }
  .nav-principale .nav-contact { margin-top: var(--espace-3); }
  .burger { display: flex; }
  .header-actions { margin-left: auto; }
}
@media (min-width: 1000px) { .nav-principale .nav-contact { display: none; } }
@media (max-width: 560px) { .header-cta { display: none; } .header-logo img, .header-logo svg { height: 48px; } }
@media (max-width: 400px) { .header-record .rec-lib { display: none; } }

/* ==========================================================================
   Pied de page
   ========================================================================== */
/* Le bas du pied de page laisse la place du bouton d'accessibilité fixe (14 px du bord, 44 px de haut) : rien ne se superpose */
.footer { border-top: var(--bordure); padding-block: var(--espace-5) calc(72px + env(safe-area-inset-bottom, 0px)); font-size: var(--fs-petit); color: var(--gris-texte); background: var(--noir); }
.footer-haut { display: grid; gap: var(--espace-4); }
@media (min-width: 640px) { .footer-haut { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1000px) { .footer-haut { grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: var(--espace-5); } }
.footer-marque img { height: 22px; width: auto; margin-bottom: var(--espace-3); }
.footer-marque p { max-width: 36ch; }
.footer-titre { font-family: var(--font-pixel); font-size: var(--fs-pixel); text-transform: uppercase; letter-spacing: 0.08em; color: var(--violet-clair); margin: 0 0 var(--espace-2); }
.footer nav ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.55rem; }
.footer a { color: var(--gris-texte); text-decoration: none; }
.footer a:hover { color: var(--blanc); }
.footer-email { font-family: var(--font-titre); font-weight: 600; color: var(--blanc) !important; font-size: 1rem; }
.footer-email:hover { color: var(--violet-clair) !important; }
.footer-score { font-family: var(--font-pixel); font-size: var(--fs-pixel); color: var(--blanc); margin: 0 0 var(--espace-2); }
.footer-boutons { display: flex; flex-wrap: wrap; gap: 0.6rem; }
.footer .btn { color: var(--blanc); }
.footer .btn-sm { min-height: 36px; }
.footer-bas { margin-top: var(--espace-5); padding-top: var(--espace-3); border-top: var(--bordure); display: flex; flex-wrap: wrap; gap: 0.6rem 1.6rem; align-items: center; justify-content: space-between; }
.footer-bas p { margin: 0; }

/* ---------- En-tête de page intérieure, fil d'Ariane, prose ---------- */
.page-tete { padding-block: var(--espace-5) var(--espace-4); border-bottom: var(--bordure); }
.page-tete .pixel { display: block; margin-bottom: var(--espace-2); }
.page-tete h1 { margin-bottom: 0.3em; }
.page-tete .intro { max-width: 60ch; }
.fil { display: flex; flex-wrap: wrap; gap: 0.45rem; list-style: none; margin: 0 0 var(--espace-3); padding: 0; font-family: var(--font-pixel); font-size: var(--fs-pixel); text-transform: uppercase; letter-spacing: 0.06em; color: var(--gris-texte); }
.fil li + li::before { content: "/"; margin-right: 0.45rem; color: var(--violet); }
.fil a { color: var(--gris-texte); text-decoration: none; }
.fil a:hover { color: var(--blanc); }
.prose { max-width: 760px; }
.prose h2 { font-size: 1.5rem; margin-top: var(--espace-5); }
.prose h3 { font-size: 1.15rem; margin-top: var(--espace-4); }
.prose p, .prose li { color: var(--gris-texte); }
.prose ul { padding-left: 1.1em; }
.prose .placeholder { color: var(--violet-clair); }

/* ---------- Apparitions au défilement (JS présent seulement) ---------- */
.js .reveal { opacity: 0; transform: translateY(14px); transition: opacity 360ms steps(6, end), transform 360ms steps(6, end); }
.js .reveal.visible { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.001s !important; animation-iteration-count: 1 !important; transition-duration: 0.001s !important; }
  .js .reveal { opacity: 1; transform: none; }
}
@media print { .header, .footer-boutons, .compagnon, .curseur, .arcade-voile { display: none !important; } }

/* Badge « Site réalisé par Codexe », le même que sur les sites clients (badge/badge-codexe.html) */
.codexe-badge { --codexe-h: 16px; display: inline-flex; align-items: center; gap: 0.45em; position: relative; color: var(--gris-texte); text-decoration: none; font: 600 0.8rem/1 var(--font-titre); letter-spacing: 0.02em; white-space: nowrap; }
.codexe-badge:hover, .codexe-badge:focus-visible { color: var(--blanc); text-decoration: none; }
.codexe-badge .codexe-wm { height: var(--codexe-h); width: auto; display: block; position: relative; z-index: 1; }
.codexe-badge .codexe-dino { position: absolute; left: -0.1em; bottom: calc(var(--codexe-h) * 0.05); height: calc(var(--codexe-h) * 0.95); width: auto; opacity: 0; transform: translate(0.4em, 0); transition: transform 0.32s steps(6, end), opacity 0.12s; pointer-events: none; image-rendering: pixelated; }
.codexe-badge:hover .codexe-dino, .codexe-badge:focus-visible .codexe-dino { opacity: 1; animation: codexe-saut 0.62s steps(8, end) 1; transform: translate(calc(var(--codexe-h) * -1.9), 0); }
@keyframes codexe-saut { 0% { transform: translate(0.4em, 0); } 35% { transform: translate(calc(var(--codexe-h) * -1), calc(var(--codexe-h) * -0.9)); } 70% { transform: translate(calc(var(--codexe-h) * -1.9), 0); } 85% { transform: translate(calc(var(--codexe-h) * -1.9), calc(var(--codexe-h) * -0.25)); } 100% { transform: translate(calc(var(--codexe-h) * -1.9), 0); } }
@media (prefers-reduced-motion: reduce) { .codexe-badge .codexe-dino { transition: none; animation: none !important; } }
html.a11y-sans-animation .codexe-badge .codexe-dino { transition: none; animation: none !important; }