/* ==========================================================
   Ulia.Radio — Socle commun

   Chargé avant toute feuille de section. Contient ce qui est
   global et rien d'autre : reset, variables, styles du document.
   Une feuille de section ne doit jamais redéclarer :root.
   ========================================================== */

:root {
  /* ---- Typographie ---- */
  --font-display: 'Clash Display', system-ui, sans-serif;
  --font-body: 'Albert Sans', system-ui, -apple-system, sans-serif;

  /* ---- Couleurs ---- */
  --u-blue:      #075be6;
  --u-blue-deep: #064bd7;
  --u-blue-lite: #1976ff;
  --u-ink:       #14161a;
  --u-ink-soft:  #5b6472;
  --u-page:      #f3f4f6;
  --u-line:      rgba(7, 91, 230, 0.14);

  /* ---- Chargement (skeleton) ----
     Fond des pochettes/avatars/vignettes tant que l'image n'est pas
     chargée (ou en repli si elle est absente) — gris neutre plutôt que la
     teinte de marque, qui ressortait comme un vrai bloc de couleur plus
     qu'un état "en attente". Toujours un peu plus sombre que --u-page,
     quel que soit le fond réel de la section qui l'utilise. */
  --u-skeleton:       color-mix(in srgb, var(--u-ink) 7%, var(--u-page));
  --u-skeleton-shine: color-mix(in srgb, var(--u-ink) 2%, var(--u-page));

  /* ---- Gabarit ---- */
  --u-max:        1400px;
  /* Gouttière commune au header et au menu : ils doivent s'aligner
     au pixel près, une valeur unique évite la dérive. */
  --u-gutter:     clamp(18px, 4vw, 40px);
  --u-header-h:   92px;
  --u-logo-h:     70px;
  --u-radius-pill: 999px;
  --u-radius-soft: 9px;

  /* ---- Profondeur ----
     Un seul endroit pour arbitrer les superpositions, plutôt que
     des z-index dispersés qu'on finit par surenchérir. */
  --z-hero-media:  0;
  --z-hero-veil:   1;
  --z-hero-body:   2;
  --z-header:      50;
  --z-menu:        60;
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  /* Le header est fixe : sans ça, une ancre place la cible
     sous le bandeau. */
  scroll-padding-top: calc(var(--u-header-h) + 16px);
}

html,
body {
  width: 100%;
  min-height: 100%;
}

body {
  font-family: var(--font-body);
  background: var(--u-page);
  color: var(--u-blue);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

/* ==========================================================
   Chargement (skeleton)

   Utilitaire générique : posé en `background` sur n'importe quel
   conteneur de pochette/avatar/vignette à la place d'un aplat/dégradé
   fixe. Un <img> en object-fit:cover posé par-dessus le recouvre dès
   qu'il charge — inutile de suivre l'état "chargé" en JS, le shimmer
   reste simplement invisible une fois l'image affichée.
   ========================================================== */

@keyframes u-skeleton-shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

.u-skeleton {
  background-image: linear-gradient(100deg,
    var(--u-skeleton) 30%, var(--u-skeleton-shine) 50%, var(--u-skeleton) 70%);
  background-size: 200% 100%;
  animation: u-skeleton-shimmer 1.6s ease-in-out infinite;
}

@media (prefers-reduced-motion: reduce) {
  .u-skeleton { animation: none; background-image: none; background-color: var(--u-skeleton); }
}

/* Verrou de défilement pendant l'ouverture du menu plein écran. */
body.is-locked {
  overflow: hidden;
}

img,
svg,
video {
  display: block;
  max-width: 100%;
}

button {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  cursor: pointer;
}

a { color: inherit; }

/* Réservé aux lecteurs d'écran : visible pour eux, hors champ
   pour l'œil. clip-path plutôt que display:none, qui retirerait
   l'élément de l'arbre d'accessibilité. */
.u-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* Lien d'évitement : premier élément focusable de la page. */
.u-skip {
  position: absolute;
  top: 8px;
  left: 8px;
  z-index: 100;
  padding: 10px 16px;
  border-radius: var(--u-radius-soft);
  background: #fff;
  color: var(--u-blue);
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 14px;
  text-decoration: none;
  transform: translateY(-200%);
  transition: transform 0.18s ease;
}

.u-skip:focus-visible {
  transform: none;
  outline: 3px solid var(--u-blue-deep);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  .u-skip { transition: none; }
}