/**
 * PlayAwale — Normalisation du rendu (reset)
 * -----------------------------------------------------------------------------
 * Efface les différences de rendu par défaut entre navigateurs pour partir
 * d'une base identique partout. Ce fichier ne contient aucune décision
 * esthétique : uniquement de la remise à plat.
 *
 * Il doit être chargé AVANT toute feuille de mise en page ou de composant.
 *
 * @package   PlayAwale
 * @version   2.0
 * @author    Nicolas Lion — Développeur web — https://nlion.fr
 * @copyright 2026 Nicolas Lion
 */

/* Les dimensions incluent bordure et remplissage : une largeur de 300px reste
   300px à l'écran, quels que soient le padding et la bordure. */
*,
*::before,
*::after {
  box-sizing: border-box;
}

/* Marges par défaut supprimées : chaque espacement devient un choix explicite. */
body,
h1, h2, h3, h4, h5, h6,
p,
figure,
blockquote,
dl, dd {
  margin: 0;
}

/* Listes utilisées comme structure (menus, grilles) : sans puce ni retrait. */
ul[role='list'],
ol[role='list'] {
  list-style: none;
  margin: 0;
  padding: 0;
}

html {
  /* Le défilement vers une ancre glisse au lieu de sauter. */
  scroll-behavior: smooth;

  /* La page occupe toujours au moins la hauteur de la fenêtre. */
  min-height: 100%;

  /* Empêche l'agrandissement automatique du texte à la rotation sur iOS. */
  -webkit-text-size-adjust: 100%;
}

body {
  min-height: 100vh;

  /* Lissage des polices, plus fidèle sur écrans à haute densité. */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Les médias se comportent comme des blocs et ne débordent jamais du parent. */
img,
picture,
video,
canvas,
svg {
  display: block;
  max-width: 100%;
}

/* Les champs de formulaire héritent de la typographie de la page. */
input,
button,
textarea,
select {
  font: inherit;
  color: inherit;
}

/* Les boutons deviennent des surfaces neutres, à habiller par les composants. */
button {
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;

  /* Supprime le rectangle gris au toucher sur mobile. */
  -webkit-tap-highlight-color: transparent;
}

a {
  color: inherit;
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
}

/* Les mots très longs se coupent au lieu de déborder horizontalement. */
p,
h1, h2, h3, h4, h5, h6 {
  overflow-wrap: break-word;
}

/* Anneau de focus visible uniquement au clavier : indispensable à la
   navigation sans souris, sans gêner l'utilisateur à la souris. */
:focus-visible {
  outline: 3px solid var(--color-focus-ring);
  outline-offset: 3px;
}

/* L'attribut « hidden » doit toujours masquer, quoi qu'en dise le reste.
   Le navigateur lui applique bien « display: none », mais cette règle vient de
   sa feuille par défaut : la moindre règle d'auteur posant un display —
   « .game-over { display: flex } », par exemple — l'emporte sur elle et
   l'élément réapparaît. On réaffirme donc la règle côté auteur, avec
   !important pour couvrir aussi les display posés sur une classe.
   Conséquence : masquer un élément se fait par « element.hidden = true »,
   jamais en manipulant son style. */
[hidden] {
  display: none !important;
}

/* Masque un élément à l'écran tout en le laissant lisible par les lecteurs
   d'écran (titres de section, libellés d'accessibilité). */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Respect du réglage système « réduire les animations » : les mises en scène
   deviennent instantanées pour les personnes sensibles au mouvement. */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}