/* Base commune : direction artistique du jeu Z-Survival (thème « sang noir », branche dev du jeu, css/tokens.css et css/base.css),
   polices du jeu (licence SIL OFL 1.1, fonts/LICENSE-*.txt), boutons, logo, marques « provisoire », mouvement réduit.
   Aucune police, image ni code de HoYoverse. */

@font-face {
  font-family: "Barlow";
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  src: url("../fonts/barlow-latin-400-normal.woff2") format("woff2");
}

@font-face {
  font-family: "Barlow";
  font-weight: 700;
  font-style: normal;
  font-display: swap;
  src: url("../fonts/barlow-latin-700-normal.woff2") format("woff2");
}

/* Titre qui dégouline (logo, titres de section). */
@font-face {
  font-family: "Rubik Wet Paint";
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  src: url("../fonts/rubik-wet-paint-latin-400-normal.woff2") format("woff2");
}

/* Libellés grunge : sous-ensemble réduit aux majuscules, chiffres et ponctuation → toujours en text-transform: uppercase. */
@font-face {
  font-family: "Rubik Dirt";
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  src: url("../fonts/rubik-dirt-latin-400-normal.woff2") format("woff2");
}

:root {
  color-scheme: dark;

  /* Couleurs du jeu (mêmes noms et valeurs que css/tokens.css de Z-Survival, branche dev) */
  --color-bg: #050505;              /* fond de page, noir profond */
  --color-surface: #131313;         /* cartes, panneaux */
  --color-surface-raised: #222224;  /* éléments surélevés */
  --color-border: #6a6a6e;          /* contours, séparateurs */
  --color-text: #f4f1ec;            /* texte principal (os) */
  --color-text-muted: #b8b4ae;      /* texte secondaire */
  --color-action: #d81414;          /* rouge sang : boutons, cadre, grands titres */
  --color-on-action: #f4f1ec;       /* texte posé sur le rouge sang */
  --color-action-text: #ff4a3d;     /* rouge lisible en petit texte sur fond sombre */
  --color-action-deep: #7a0a0a;     /* rouge profond */
  --color-action-hover: #ef2a2a;
  --color-action-active: #a80f0f;
  --color-action-glow: rgb(216 20 20 / 55%);
  --color-warning: #f2c94c;         /* avertissement : marques « provisoire » */
  --color-focus: #9fd3ff;           /* anneau de focus */
  --color-ground: #1c1c1e;          /* fond autour de l'écran */
  --color-ground-light: #3d3d40;

  /* Logo (Z incliné et ses coulures) */
  --menu-rouge: #a50f0d;            /* coulures */
  --menu-coulure-sombre: #4a0505;   /* coulures : bord dans l'ombre */
  --menu-coulure-reflet: #c42a22;   /* coulures : reflet humide */
  --menu-z-contour: #1a0303;        /* contour sombre du Z */

  /* Polices du jeu */
  --font-sans: "Barlow", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-display: "Rubik Wet Paint", Impact, "Arial Black", sans-serif;
  --font-label: "Rubik Dirt", Impact, "Arial Black", sans-serif;

  /* Mise en page du site */
  --marge: 16px;
  --entete-h: 60px;
  --nav-h: 60px;                    /* barre de navigation en bas sur téléphone */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 16px;
  --touch-target: 44px;
  --duree: 600ms;
  --courbe: cubic-bezier(0.2, 0.7, 0.2, 1);
}

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

html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
html, body { margin: 0; height: 100%; }

body {
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
}

h1, h2, h3, p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
a { color: inherit; }
button { font: inherit; color: inherit; }

:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 3px; }

/* Filtres SVG (déclarés dans le HTML) : conteneur invisible. */
.defs { position: absolute; width: 0; height: 0; overflow: hidden; }

/* ---------- Boutons (bouton rouge plein du jeu) ---------- */
.bouton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
  min-width: var(--touch-target);
  min-height: var(--touch-target);
  padding: 0.5rem 1.5rem;
  border: 0;
  border-radius: var(--radius-md);
  font-family: var(--font-sans);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 150ms, transform 150ms var(--courbe);
}
.bouton-principal { background: var(--color-action); color: var(--color-on-action); }
.bouton-principal:hover { background: var(--color-action-hover); }
.bouton-principal:active { background: var(--color-action-active); transform: scale(0.97); }

/* ---------- Logo « Z-Survival » (logo du jeu, js/logo.js) ----------
   Z rouge incliné (13°) à contour sombre, coulures de sang sous la lettre, « -Survival » couleur os. */
.logo {
  display: inline-flex;
  align-items: flex-end;
  font-family: var(--font-display);
  font-weight: 400;
  line-height: 0.95;
  color: var(--color-text);
  white-space: nowrap;
  text-decoration: none;
}
.logo-z {
  position: relative;
  display: inline-block;
  color: var(--color-action);
  -webkit-text-stroke: 0.035em var(--menu-z-contour);
  paint-order: stroke fill;
  transform: translate(0.1em, 0) rotate(13deg);
  transform-origin: 88% 96%;
}
.logo-coulures {
  position: absolute;
  z-index: -1;
  left: 0.04em;
  top: 70%;
  width: 0.72em;
  height: 0.84em;
  transform: rotate(-13deg);
  transform-origin: 50% 0;
}
.logo-coulures-svg { display: block; width: 100%; height: 100%; overflow: hidden; }
.logo-coulure-corps, .logo-goutte { fill: var(--menu-rouge); }
.logo-coulure-ombre { fill: none; stroke: var(--menu-coulure-sombre); stroke-width: 1.1; stroke-linecap: round; }
.logo-coulure-reflet { fill: none; stroke: var(--menu-coulure-reflet); stroke-width: 0.7; stroke-linecap: round; opacity: 0.8; }
.logo-coulure-brillant { fill: var(--menu-coulure-reflet); }
.logo-goutte { opacity: 0; }

/* ---------- Logo du studio (No Way Studio, copie fixe du jeu : img/no-way-studio.svg) ---------- */
.studio-logo { display: block; width: auto; max-width: 100%; height: auto; }

/* ---------- Coup de pinceau (entrée choisie, comme les menus du jeu) ---------- */
.brush {
  position: absolute;
  inset: 2px -6px;
  z-index: -1;
  background: var(--color-text);
  filter: url("#brush");
  opacity: 0;
  transform: rotate(-1.2deg);
  transition: opacity 200ms;
}

/* ---------- Menu de langue (globe) : accueil (css/accueil.css) et en-tête (css/principal.css) ---------- */
.langue { position: relative; }
.langue-bouton {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-width: var(--touch-target);
  min-height: var(--touch-target);
  padding: 0 10px;
  border: 1px solid rgb(244 241 236 / 35%);
  border-radius: 999px;
  background: rgb(5 5 5 / 55%);
  color: var(--color-text);
  font-weight: 700;
  font-size: 0.8rem;
  letter-spacing: 0.06em;
  cursor: pointer;
  backdrop-filter: blur(6px);
  transition: border-color 150ms, color 150ms;
}
.langue-bouton:hover,
.langue-bouton[aria-expanded="true"] { border-color: var(--color-action); color: var(--color-action-text); }
.globe-icone {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
}
.langue-menu {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  min-width: 9.5rem;
  padding: 6px;
  border: 1px solid var(--color-surface-raised);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  box-shadow: 0 10px 30px rgb(0 0 0 / 60%);
  transform-origin: top right;
  animation: langue-ouvre 160ms var(--courbe);
}
.langue-menu[hidden] { display: none; }
@keyframes langue-ouvre {
  from { opacity: 0; transform: translateY(-4px) scale(0.97); }
}
.langue-choix {
  display: flex;
  align-items: center;
  width: 100%;
  min-height: var(--touch-target);
  padding: 0 12px;
  border: 0;
  border-left: 3px solid transparent;
  border-radius: var(--radius-sm);
  background: none;
  color: var(--color-text);
  font-weight: 700;
  text-align: left;
  cursor: pointer;
}
.langue-choix:hover,
.langue-choix:focus-visible { background: var(--color-surface-raised); }
.langue-choix[aria-current="true"] { border-left-color: var(--color-action); color: var(--color-action-text); }

/* ---------- Bouton de son (musique, js/musique.js) : à côté de chaque globe ; même allure que le globe ----------
   Coupé : haut-parleur barré. Chargement : petit cercle en pointillés qui tourne. Lecture : ondes qui battent, halo rouge. */
.son-bouton {
  position: relative;
  display: inline-grid;
  place-items: center;
  flex: none;
  width: var(--touch-target);
  height: var(--touch-target);
  padding: 0;
  border: 1px solid rgb(244 241 236 / 35%);
  border-radius: 999px;
  background: rgb(5 5 5 / 55%);
  color: var(--color-text);
  cursor: pointer;
  backdrop-filter: blur(6px);
  transition: border-color 150ms, color 150ms, box-shadow 150ms;
}
/* Zone de clic d'au moins 44 × 44 px, même quand le bouton est dessiné plus petit (en-tête). */
.son-bouton::after {
  content: "";
  position: absolute;
  inset: min(0px, calc((100% - var(--touch-target)) / 2));
  border-radius: 999px;
}
.son-bouton:hover { border-color: var(--color-action); color: var(--color-action-text); }
.son-bouton[aria-pressed="true"] { border-color: var(--color-action); box-shadow: 0 0 12px var(--color-action-glow); }
.son-icone {
  width: 22px;
  height: 22px;
  overflow: visible;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.son-hp { fill: currentColor; fill-opacity: 0.15; }
.son-barre { stroke: var(--color-action-text); stroke-width: 1.9; }
.son-onde, .son-attente { display: none; }
.son-bouton[data-etat="chargement"] .son-barre,
.son-bouton[data-etat="lecture"] .son-barre { display: none; }
.son-bouton[data-etat="chargement"] .son-attente {
  display: inline;
  stroke: var(--color-action-text);
  stroke-dasharray: 4 2.8;
  transform-box: fill-box;
  transform-origin: center;
  animation: son-attente 0.9s linear infinite;
}
.son-bouton[data-etat="lecture"] .son-hp { fill: var(--color-action); fill-opacity: 1; stroke: var(--color-action); }
.son-bouton[data-etat="lecture"] .son-onde { display: inline; animation: son-onde 1.6s ease-in-out infinite; }
.son-bouton[data-etat="lecture"] .son-onde-2 { animation-delay: 0.3s; }
@keyframes son-attente { to { transform: rotate(360deg); } }
@keyframes son-onde {
  0%, 100% { opacity: 0.3; }
  45% { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .son-bouton[data-etat="chargement"] .son-attente,
  .son-bouton[data-etat="lecture"] .son-onde { animation: none; opacity: 1; }
}

/* ---------- Contenus provisoires : toujours visibles comme tels ---------- */
.marque-provisoire {
  display: inline-block;
  padding: 0.2em 0.6em;
  border: 1px dashed var(--color-warning);
  border-radius: var(--radius-sm);
  color: var(--color-warning);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  line-height: 1.4;
}

.emplacement {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.25em;
  border: 1px dashed var(--color-border);
  border-radius: var(--radius-md);
  background:
    repeating-linear-gradient(135deg, transparent 0 14px, rgb(216 20 20 / 5%) 14px 28px),
    var(--color-surface);
  text-align: center;
  padding: var(--marge);
}
.emplacement-etiquette { color: var(--color-warning); font-weight: 700; }
.emplacement-detail { color: var(--color-text-muted); font-size: 0.875rem; }

/* ---------- Mouvement réduit : animations coupées ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    transition-delay: 0s !important;
    scroll-behavior: auto !important;
  }
}