/* ============================================================
   choix-legion.css — Page de choix de la Légion (pages/choix-legion.html)
   Auteur : Jean · Extrait du HTML : 2026-07-27
   Rôle   : habillage propre à cette page — palette sombre « archives
   de l'Imperium », grille des dix-huit portraits de Primarques et
   modale d'agrandissement.

   POURQUOI UNE FEUILLE À PART, et non un ajout à css/style.css :
   cette page est volontairement autonome. Elle ne charge PAS
   css/style.css, n'affiche ni la barre de navigation ni le pied de
   page communs, et repose sur sa propre palette (fond noir, or,
   sang) et ses propres polices (Cinzel + EB Garamond). Fusionner les
   deux feuilles obligerait chaque règle à se défendre contre l'autre.

   POURQUOI PLUS EN LIGNE dans le HTML, alors : parce qu'un <style>
   de 400 lignes est retéléchargé avec la page à chaque visite, ne
   peut pas être mis en cache séparément, empêche toute politique de
   sécurité de contenu (CSP) stricte, et n'est pas relu par les
   outils qui vérifient le CSS du projet.

   CONVENTION DE NOMMAGE : classes en kebab-case français préfixées
   « legion- », comme le reste du site (nav-menu, timeline-titre,
   orga-boite). Les variables sont préfixées « --legion- » pour ne
   jamais entrer en collision avec celles de css/style.css si cette
   page venait un jour à charger les deux.
   ============================================================ */

/* Polices auto-hébergées (RGPD : aucune requête vers Google Fonts,
   cohérent avec le reste du site — voir css/style.css). */
@font-face {
  font-family: "Cinzel";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../assets/fonts/cinzel-latin-500-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Cinzel";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../assets/fonts/cinzel-latin-600-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Cinzel";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../assets/fonts/cinzel-latin-700-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Cinzel";
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url("../assets/fonts/cinzel-latin-900-normal.woff2") format("woff2");
}
@font-face {
  font-family: "EB Garamond";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../assets/fonts/ebgaramond-latin-400-normal.woff2") format("woff2");
}
@font-face {
  font-family: "EB Garamond";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../assets/fonts/ebgaramond-latin-500-normal.woff2") format("woff2");
}
@font-face {
  font-family: "EB Garamond";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../assets/fonts/ebgaramond-latin-600-normal.woff2") format("woff2");
}
@font-face {
  font-family: "EB Garamond";
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("../assets/fonts/ebgaramond-latin-400-italic.woff2") format("woff2");
}
:root {
  --legion-fond: #0a0908;
  --legion-surface: #12100e;
  --legion-surface-2: #181513;
  --legion-surface-decalee: #1e1a17;
  --legion-bordure: oklch(0.55 0.02 60 / 0.18);
  --legion-texte: #d8d0c4;
  --legion-texte-doux: #a29b8d;
  /* #6b6459 initial ne donnait que 3,4:1 sur --legion-fond (texte
     courant 0.8rem/0.85rem) : sous le seuil AA de 4,5:1 (WCAG
     1.4.3). Éclairci à #857c6a (~4,8:1), même teinte discrète. */
  --legion-texte-attenue: #857c6a;
  --legion-or: #c9a13b;
  --legion-or-clair: #e8c667;
  --legion-sang: #7a1f1f;
  --legion-sang-clair: #a83232;
  --legion-radius-s: 0.375rem;
  --legion-radius-m: 0.5rem;
  --legion-radius-l: 0.75rem;
  --legion-police-titre: "Cinzel", "Times New Roman", serif;
  --legion-police-texte: "EB Garamond", Georgia, serif;
  --legion-espace-2: 0.5rem;
  --legion-espace-3: 0.75rem;
  --legion-espace-4: 1rem;
  --legion-espace-6: 1.5rem;
  --legion-espace-8: 2rem;
  --legion-espace-10: 2.5rem;
  --legion-espace-12: 3rem;
  --legion-espace-16: 4rem;
  --legion-espace-24: 6rem;
}
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
html {
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
}
/* Lien d'évitement (WCAG 2.4.1) : caché hors écran, révélé au
   focus clavier — même principe que .lien-evitement dans
   css/style.css, adapté à la palette sombre de cette page. */
.lien-evitement {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 2000;
  background: var(--legion-sang-clair);
  color: #fff;
  padding: 0.6rem 1rem;
  border-radius: 0 0 var(--legion-radius-s) 0;
  text-decoration: none;
}
.lien-evitement:focus {
  left: 0;
}
body {
  background:
    radial-gradient(
      ellipse at 20% 0%,
      oklch(0.18 0.02 40 / 0.5),
      transparent 55%
    ),
    radial-gradient(
      ellipse at 80% 100%,
      oklch(0.15 0.03 20 / 0.4),
      transparent 55%
    ),
    var(--legion-fond);
  color: var(--legion-texte);
  font-family: var(--legion-police-texte);
  font-size: 18px;
  line-height: 1.6;
  min-height: 100vh;
  background-attachment: fixed;
}
img,
svg {
  display: block;
  max-width: 100%;
  height: auto;
}
::selection {
  background: var(--legion-or);
  color: #000;
}
:focus-visible {
  outline: 2px solid var(--legion-or-clair);
  outline-offset: 3px;
}

header {
  position: relative;
  z-index: 1;
  text-align: center;
  padding: var(--legion-espace-16) var(--legion-espace-4)
    var(--legion-espace-10);
  border-bottom: 1px solid var(--legion-bordure);
  background: linear-gradient(180deg, oklch(0.1 0.02 40 / 0.6), transparent);
}
.legion-surtitre {
  font-family: var(--legion-police-titre);
  font-size: clamp(0.7rem, 0.6rem + 0.3vw, 0.85rem);
  letter-spacing: 0.35em;
  color: var(--legion-or);
  text-transform: uppercase;
  margin-bottom: var(--legion-espace-4);
}
h1 {
  font-family: var(--legion-police-titre);
  font-weight: 900;
  font-size: clamp(2.2rem, 1.5rem + 3vw, 4.2rem);
  letter-spacing: 0.05em;
  color: var(--legion-or-clair);
  text-shadow:
    0 0 24px oklch(0.7 0.15 80 / 0.35),
    0 2px 0 #000;
  text-transform: uppercase;
  line-height: 1.1;
}
header p.legion-accroche {
  margin-top: var(--legion-espace-4);
  color: var(--legion-texte-doux);
  font-style: italic;
  font-size: clamp(1rem, 0.9rem + 0.4vw, 1.25rem);
  max-width: 60ch;
  margin-inline: auto;
}

main {
  position: relative;
  z-index: 1;
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 var(--legion-espace-6) var(--legion-espace-24);
}

.legion-grille {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(220px, 100%), 1fr));
  gap: var(--legion-espace-6);
  margin-top: var(--legion-espace-8);
}

.legion-carte {
  position: relative;
  border-radius: var(--legion-radius-l);
  overflow: hidden;
  aspect-ratio: 2/3;
  cursor: pointer;
  border: 1px solid var(--legion-bordure);
  background: var(--legion-surface);
  transition:
    transform 0.35s cubic-bezier(0.16, 1, 0.3, 1),
    box-shadow 0.35s cubic-bezier(0.16, 1, 0.3, 1),
    border-color 0.35s ease;
}
.legion-carte img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}
.legion-carte:hover,
.legion-carte:focus-visible {
  transform: translateY(-6px);
  box-shadow:
    0 18px 40px oklch(0 0 0 / 0.55),
    0 0 0 1px oklch(0.65 0.12 80 / 0.4);
}
.legion-carte:hover img,
.legion-carte:focus-visible img {
  filter: contrast(1.1);
  transform: scale(1.05);
}
.legion-carte.legion-carte--expurgee {
  border-color: var(--legion-sang);
}

.legion-carte-etiquette {
  display: none;
}
.legion-carte-nom {
  font-family: var(--legion-police-titre);
  font-weight: 700;
  font-size: clamp(0.95rem, 0.85rem + 0.3vw, 1.15rem);
  color: #f1e9d6;
  letter-spacing: 0.03em;
  text-shadow: 0 2px 6px #000;
  line-height: 1.15;
}
.legion-carte-legion {
  font-size: 0.75rem;
  color: var(--legion-or);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

footer {
  position: relative;
  z-index: 1;
  text-align: center;
  padding: var(--legion-espace-10) var(--legion-espace-4);
  border-top: 1px solid var(--legion-bordure);
  color: var(--legion-texte-attenue);
  font-size: 0.85rem;
  letter-spacing: 0.08em;
}

@media (max-width: 600px) {
  header {
    padding: var(--legion-espace-10) var(--legion-espace-4)
      var(--legion-espace-8);
  }
  .legion-grille {
    grid-template-columns: repeat(auto-fill, minmax(min(160px, 100%), 1fr));
    gap: var(--legion-espace-4);
  }
}

@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

/* MODALE IMAGE + BOUTON DORÉ */

.legion-modale {
  position: fixed;
  inset: 0;
  display: none;
  z-index: 999;
}

.legion-modale.legion-modale--ouverte {
  display: block;
}

.legion-modale-fond {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.78);
  backdrop-filter: blur(6px);
}

.legion-modale-contenu {
  position: relative;
  z-index: 1;
  max-width: min(900px, 92vw);
  max-height: 92vh;
  margin: 4vh auto;
  padding: 1rem;
  background: var(--legion-surface);
  border: 1px solid var(--legion-or);
  border-radius: 1rem;
  box-shadow: 0 0 40px rgba(0, 0, 0, 0.7);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
}

.legion-modale-contenu img {
  width: 100%;
  max-height: 72vh;
  object-fit: contain;
  border-radius: 0.75rem;
}

.legion-modale-titre {
  font-family: var(--legion-police-titre);
  color: var(--legion-or-clair);
  text-align: center;
  font-size: 1.3rem;
}

.legion-modale-fermer {
  position: absolute;
  top: 0.6rem;
  right: 0.8rem;
  border: none;
  background: transparent;
  color: var(--legion-texte);
  font-size: 2rem;
  cursor: pointer;
}

.legion-bouton-valider {
  border: none;
  padding: 0.9rem 1.4rem;
  border-radius: 0.8rem;
  cursor: pointer;
  font-family: var(--legion-police-titre);
  font-weight: 700;
  letter-spacing: 0.04em;
  color: #1a1204;
  background: linear-gradient(180deg, var(--legion-or-clair), var(--legion-or));
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.35);
  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease,
    opacity 0.2s ease;
}

.legion-bouton-valider:hover:not([disabled]) {
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.45);
}

.legion-bouton-valider[disabled] {
  opacity: 0.55;
  cursor: not-allowed;
}

.legion-motif-expurgee {
  margin-top: 0.2rem;
  font-size: 0.8rem;
  color: var(--legion-texte-attenue);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}