/**
 * PlayAwale — Ossature commune des pages
 * -----------------------------------------------------------------------------
 * Décor de fond, centrage du contenu et pied de page : tout ce que partagent
 * les pages du site, indépendamment de ce qu'elles affichent.
 *
 * Cette feuille est chargée sur TOUTES les pages. Ce qui ne concerne qu'une
 * seule page appartient à assets/css/pages/.
 *
 * @package   PlayAwale
 * @version   2.0
 * @author    Nicolas Lion — Développeur web — https://nlion.fr
 * @copyright 2026 Nicolas Lion
 */

/* =============================================================================
   FOND DE PAGE
   Deux couches superposées : un dégradé de sable peint sur le body, surmonté
   d'une photographie de village en fondu.
   ============================================================================= */

body {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  color: var(--color-text);
  font-family: var(--font-body);
  line-height: var(--line-height-base);

  background-color: var(--color-page-bg);
  background-image: var(--gradient-page);

  /* Le dégradé reste fixe pendant le défilement du contenu. */
  background-attachment: fixed;
  background-size: cover;

  /* Référence de positionnement pour la photographie d'arrière-plan. */
  position: relative;
}

/* Photographie d'arrière-plan, en pseudo-élément : purement décorative, elle
   n'a donc pas sa place dans le HTML et reste invisible aux lecteurs d'écran. */
body::before {
  content: '';
  position: absolute;
  inset: 0;

  /* Deux déclarations successives, du plus compatible au plus efficace.
     Un navigateur qui ne comprend pas image-set() ignore la seconde ligne et
     conserve le PNG ; les autres choisissent le WebP, huit fois plus léger
     (38 Ko contre 307 Ko) pour un rendu identique — l'image est floue. */
  background-image: url('../../img/blured_village-awale-oware-mancala.png');
  background-image: image-set(
    url('../../img/blured_village-awale-oware-mancala.webp') type('image/webp'),
    url('../../img/blured_village-awale-oware-mancala.png') type('image/png')
  );

  background-position: center;
  background-repeat: no-repeat;
  background-size: 100%;

  /* Placée derrière le contenu. */
  z-index: var(--z-backdrop);

  /* Invisible au départ : l'animation la fait apparaître en fondu. */
  opacity: 0;
  animation: backdrop-fade-in var(--duration-backdrop) ease forwards;
}

/* Le voile : un halo au centre, une pénombre dans les angles.

   POURQUOI IL EXISTE
   La photographie de village se lisait à peine et occupait pourtant tout
   l'écran : elle disputait l'attention aux titres et aux boutons sans rien
   apprendre à personne. Éclaircie au centre et assombrie sur les bords, elle
   redevient ce qu'elle est — un décor —, et le regard va au milieu parce que
   c'est là qu'il fait clair.

   IL EST FIXE, ET SUR TOUTES LES PAGES
   Fixe, comme une lampe au-dessus d'une table : il ne défile pas avec le
   contenu. Et posé ici plutôt que sur une page, parce qu'un décor qui change
   d'un écran à l'autre se remarque — c'est justement ce qu'un décor ne doit
   pas faire.

   Il ne se clique pas : il recouvre toute la page, et laisserait sinon le
   contenu hors d'atteinte. */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;

  /* Derrière le contenu, devant la photographie. */
  z-index: var(--z-backdrop);

  background-image: var(--gradient-spotlight), var(--gradient-vignette);
}


/* Fondu d'entrée de la photographie, jusqu'à une opacité partielle qui laisse
   le dégradé transparaître. */
@keyframes backdrop-fade-in {
  from { opacity: 0; }
  to   { opacity: 0.75; }
}


/* =============================================================================
   CONTENU
   ============================================================================= */

/* Conteneur principal : centre le contenu et ménage une marge sur les bords. */
.page {
  width: 100%;
  padding: var(--space-2xl) var(--space-md);
  text-align: center;

  /* Au-dessus de la photographie d'arrière-plan. */
  position: relative;
  z-index: var(--z-content);
}


/* =============================================================================
   PIED DE PAGE
   ============================================================================= */

.page-footer {
  margin-top: var(--space-sm);
  font-family: var(--font-display);
  font-size: 0.95rem;
  color: var(--color-text);
  text-shadow: 0 2px 2px rgba(0, 0, 0, 0.12);
  text-align: center;
}

.page-footer a {
  text-decoration: underline;
  transition: color var(--duration-base) ease;
}

.page-footer a:hover {
  color: #000;
}


/* =============================================================================
   ADAPTATION AUX PETITS ÉCRANS
   ============================================================================= */

/* Tablettes et grands mobiles : la photographie est agrandie pour rester
   lisible dans un cadrage vertical. */
@media (max-width: 800px) {
  body::before {
    background-size: 150%;
  }
}

/* Mobiles : mise en page resserrée et pied de page plus discret. */
@media (max-width: 480px) {
  .page {
    padding: var(--space-md);
  }

  .page-footer {
    margin-top: var(--space-xs);
    font-size: 0.75rem;
    color: var(--color-text-muted);
    text-shadow: none;
  }
}