/* =========================================================
   COMPOSITION DE L'ACCUEIL ET PIED DE PAGE — communs aux deux thèmes

   POURQUOI CE FICHIER EXISTE.

   Tout ce qu'il contient vivait dans classic.css, qui n'est servie qu'au thème
   de base (voir views/site/_head.ejs). Le cloisonnement des thèmes se fait au
   niveau du FICHIER et non du sélecteur : ces règles n'étaient donc pas « du
   thème classique », c'étaient des règles de MISE EN PAGE que seul le thème
   classique recevait.

   Conséquence, avant ce fichier : Halloween retombait sur la grille d'origine
   de ui.css — trois colonnes, deux rangées, six aires nommées (`serveurs`,
   `presentation`, `acces`, `actus`, `explorer`, `communaute`) dont QUATRE n'ont
   plus de bloc dans le gabarit. Le héros s'y retrouvait coincé dans la colonne
   centrale, la carte d'actualités seule en bas à gauche, et le pied de page
   réduit à la ligne de copyright centrée de style.css.

   C'est exactement le problème que skin.css a déjà résolu une fois, dans
   l'autre sens : la structure de l'habillage avait été écrite sous
   `.theme-halloween`, et l'en donner au thème de base en la dupliquant aurait
   créé deux structures parallèles vouées à diverger. Même remède ici — une
   seule composition, deux jeux d'assets.

   CE QU'IL NE FAIT PAS : il ne porte aucune couleur de thème en dur. Le pied de
   page était bleu nuit ; ses teintes passent par les jetons `--ft-*` déclarés
   plus bas, que halloween.css repointe sur ses violets. Les valeurs par défaut
   sont au pixel celles qu'avait classic.css : le rendu du thème de base est
   inchangé.

   APRÈS skin.css, dont il reprend plusieurs règles, et AVANT les feuilles de
   thème et nocturne.css, qui doivent pouvoir le repeindre.
========================================================= */

/* =========================================================
   JETONS DU PIED DE PAGE

   Pourquoi des jetons dédiés plutôt que les `--ui-*` existants : `--ui-nuit`
   vaut #033982, la bande du pied de page partait de rgba(3, 32, 78, 0.94). Les
   deux sont proches sans être identiques, et le thème de base ne doit pas
   bouger d'un pixel. On déclare donc la valeur exacte, et c'est Halloween qui
   la repointe — le même contrat que les `--sk-*` de skin.css.

   `--ft-encre` est un TRIPLET et non une couleur : le pied de page l'emploie à
   trois opacités différentes (devise 0.72, ligne légale 0.6, liens 0.85).
========================================================= */

:root {
  --ft-fond-haut: rgba(3, 32, 78, 0.94);
  --ft-fond-bas: rgba(2, 20, 52, 0.97);
  --ft-ombre: rgba(3, 26, 60, 0.35);
  --ft-filet: rgba(240, 205, 122, 0.18);
  --ft-encre: 226, 238, 255;
  --ft-marque: #f3e6c4;
}

/* =========================================================
   1. LA GRILLE DE L'ACCUEIL

   Une seule rangée : le texte du héros à gauche, les actualités à sa droite.
   Toute la page d'accueil tient alors dans un écran, sans défilement.

   LES DEUX ZONES SE SUPERPOSENT, et c'est voulu. Le héros n'est pas une
   colonne : il porte sa propre illustration en `.hero-fond`, posée en
   `inset: 0`. Le mettre dans une colonne de gauche recadrerait l'illustration
   sur cette moitié-là, et le raccord se verrait contre le fond de page. Il
   garde donc TOUTE la largeur, et la carte se pose par-dessus sa moitié
   droite — celle que son texte n'occupe pas.

   D'où le placement par lignes et colonnes plutôt que par zones nommées :
   `grid-template-areas` ne sait pas faire chevaucher deux blocs.

       ┌─────────────────────────────────────────┐
       │ héros (colonnes 1 → -1)                 │
       │   texte              ┌────────────────┐ │
       │                      │ actualités (2) │ │
       │                      └────────────────┘ │
       └─────────────────────────────────────────┘
========================================================= */

@media (min-width: 1041px) {
  /*
    LARGEUR UTILE DE LA PAGE — 1500 px, centrés.

    ui.css la calculait en retranchant les bannières de la barre, ce qui
    donnait 1613 px à 1920. Une largeur fixe rend la page compacte, et c'est
    elle qui cale le héros.
  */
  .grille-accueil { width: min(1500px, 100% - 80px); }

  .grille-accueil {
    /*
      La seconde colonne est celle de la carte. `44%` et non une largeur fixe :
      à 700 px fixes elle tenait bien à 1920, mais dès 1280 elle mordait sur le
      texte du héros, dont la largeur, elle, a un plancher de 430 px. En
      pourcentage les deux rétrécissent ensemble et l'écart tient.

      `grid-template-areas` est retiré : le placement se fait par lignes et
      colonnes, seule façon de faire chevaucher le héros et la carte.
    */
    grid-template-columns: minmax(0, 1fr) minmax(400px, 44%);
    grid-template-areas: none;
    column-gap: 40px;
    row-gap: 0;
    min-height: 0;
    align-content: start;
  }

  /* Le héros prend toute la rangée, sous la carte. */
  .grille-accueil .zone-presentation {
    grid-area: 1 / 1 / 2 / -1;
  }

  /*
    Les actualités, dans la seconde colonne de la MÊME rangée.

    `align-self: center` les cale à mi-hauteur du héros : la carte fait 406 px
    pour un héros de 480, et posée en haut elle aurait laissé un vide sous
    elle sans rien au-dessus.

    `z-index` : le héros porte un `.dedans` en couche 2 — sans cela la carte
    passerait dessous.
  */
  .grille-accueil .zone-actus {
    grid-area: 1 / 2 / 2 / 3;
    align-self: center;
    justify-self: stretch;
    position: relative;
    z-index: 3;
    width: auto;
    max-width: none;
    margin-inline: 0;
  }
}

/* =========================================================
   1 bis. HAUTEURS DE LA CARTE D'ACTUALITÉS

   Il n'en reste qu'une. Les trois autres — état, communauté, accès — ont été
   retirées de la page, et leurs réglages de hauteur avec elles : ils ne
   resserraient des lignes que pour tenir dans une colonne de 387 px, qui
   n'existe plus.

       actualités    ~390 – 430 px   titre + trois articles de ~105
========================================================= */

@media (min-width: 1041px) {
  /* --- Actualités : trois articles de ~105 px --- */
  .grille-accueil .zone-actus .actu { padding: 14px 0; gap: 14px; }
  .grille-accueil .zone-actus .actu-vignette { width: 104px; height: 76px; }
  .grille-accueil .zone-actus .bloc-titre { margin-bottom: 10px; }
}

/* ---------------------------------------------------------
   Emplacement d'actualité encore libre

   Le cadre montre trois actualités empilées. Tant que le wiki n'en publie pas
   trois, les emplacements restants sont dessinés en attente plutôt que remplis
   d'annonces inventées : même gabarit, même hauteur, mais estompés et sans
   lien — on voit tout de suite que la place est réservée, pas qu'il s'agit
   d'une nouvelle.

   Les teintes sont des bruns de parchemin, et elles valent pour les DEUX
   thèmes : la carte d'actualités est un cadre crème dans l'un comme dans
   l'autre — la planche Halloween l'est aussi, c'est la raison pour laquelle
   halloween.css ne touche ni `--text` ni `--text-dim`.
--------------------------------------------------------- */

.zone-actus .actu-attente {
  opacity: 0.5;
  cursor: default;
}
.zone-actus .actu-attente .actu-vignette {
  background: rgba(92, 68, 34, 0.06);
  border-style: dashed;
  border-color: rgba(120, 92, 44, 0.45);
}
.zone-actus .actu-attente .badge-rendrya {
  background: rgba(92, 68, 34, 0.1);
  border-color: rgba(120, 92, 44, 0.3);
  color: #6d5a3c;
  box-shadow: none;
}
.zone-actus .actu-attente .actu-titre { color: #6d5a3c; font-weight: 600; }
.zone-actus .actu-attente p { font-style: italic; }

/* =========================================================
   2. LE HÉROS

   Il occupe toute la largeur. Son illustration reste celle du fond de page —
   c'est le même fichier, posé une seule fois : on ne le duplique pas dans le
   bloc, ce qui évite au passage tout risque de le déformer.

   Le texte, lui, reste cantonné à la moitié gauche : en pleine largeur il
   traverserait l'écran sur 1 100 px et deviendrait illisible. La droite est
   laissée à l'illustration, comme sur la référence.

   Rien ici n'est une couleur : ce ne sont que des hauteurs, des tailles de
   corps et des alignements. Les deux thèmes peuvent donc les partager tels
   quels, chacun gardant son illustration de fond — `--sk-fond`.
========================================================= */

@media (min-width: 1041px) {
  .grille-accueil .hero-rendrya {
    /*
      Une hauteur plancher, mais habitée.

      Le héros occupe 32 % de la maquette : c'est sa « grande partie
      supérieure ». Sans plancher il retombait à 19 % et la page perdait son
      temps fort. Le vide n'en est pas un — le texte est calé dans la hauteur,
      et la moitié droite montre l'illustration de fond, exactement comme la
      maquette y montre son décor.

      PAS de `display: flex` : le bloc contient un `.dedans` qui enveloppe le
      texte, et passé en conteneur flexible il le réduisait à la largeur de son
      contenu — le titre se coupait en deux lignes et les boutons s'empilaient.
    */
    /* 480 px, borne basse de la fourchette demandée : le contenu en occupe
       300, le reste laisse voir le château et l'illustration à droite. */
    min-height: 480px;
    display: grid;
    /*
      Le contenu est calé EN BAS du héros, pas centré.

      Centré, il laissait 39 px de part et d'autre : 64 px séparaient le slogan
      des cartes, et la section suivante paraissait commencer trop tard. Calé
      en bas, tout le jeu passe AU-DESSUS du titre — là où la maquette laisse
      justement respirer le ciel entre la barre et le titre — et le slogan
      vient à 28 px des cartes.
    */
    align-content: end;
    padding: 12px 0 10px;
  }

  /*
    Le texte tient 42 % de la largeur, comme sur la maquette : le reste est
    laissé au décor. Un bloc plus large traverserait l'écran et perdrait la
    composition en deux temps — contenu à gauche, illustration à droite.
  */
  .grille-accueil .hero-texte {
    max-width: 42%;
    min-width: 430px;
  }

  /*
    LE TEXTE OCCUPE LA HAUTEUR DU HÉROS.

    C'est l'autre moitié du problème de vide. Un bloc de 250 px centré dans un
    héros de 480 laisse 115 px sous le slogan, et la section suivante paraît
    commencer trop tard. Sur la maquette, le contenu du héros remplit le héros :
    titre large, lignes aérées, slogan en bas.

    On ne rallonge donc pas le bloc — on l'étale, ce qui monte le titre et
    descend le slogan jusqu'aux bords.
  */
  .grille-accueil .hero-accroche { margin: 16px 0 40px; }
  .grille-accueil .hero-texte .description {
    margin-bottom: 40px;
    line-height: 2.2;
  }
  .grille-accueil .hero-signature { margin-top: 46px; }

  /* Le titre monte d'un cran : c'est lui qui porte l'identité. */
  .grille-accueil .hero-titre { font-size: clamp(2.4rem, 3.9vw, 3.5rem); }
  .grille-accueil .hero-accroche { font-size: clamp(0.95rem, 1.5vw, 1.15rem); }
  .grille-accueil .hero-texte .description { font-size: 1.04rem; }

  /*
    Tout le héros s'aligne à gauche.

    Le gabarit centrait le chapô, les boutons et la signature — cohérent quand
    le bloc occupait une colonne étroite, bancal maintenant qu'il tient la
    moitié de l'écran : le titre partait de la marge et le reste flottait au
    milieu. Une seule colonne de lecture, un seul bord.
  */
  .grille-accueil .hero-texte,
  .grille-accueil .hero-texte .description,
  .grille-accueil .hero-accroche { text-align: left; }

  .grille-accueil .hero-texte .actions { justify-content: flex-start; }

  /* La signature s'aligne sur le texte plutôt que de traverser toute la
     largeur du bloc. */
  .grille-accueil .hero-signature { max-width: 470px; }
}

/* =========================================================
   3. LE PIED DE PAGE

   Une vraie bande sombre, à la place de la ligne de copyright.

   Elle est posée hors de la grille et prend toute la largeur de la fenêtre :
   c'est ce qui la fait lire comme le bas d'un site officiel plutôt que comme
   la dernière ligne d'une page.

   PORTÉE `.home-body` ET NON `.classic-body`.

   C'est la seule classe que les deux thèmes ont en commun sur <body> — l'un
   porte `home-body classic-body`, l'autre `home-body theme-halloween`. Elle
   couvre donc le site public et l'espace membre, qui partagent la coquille,
   et laisse le panel d'administration en dehors : son <body> n'a aucune
   classe, et admin.css ne contient pas une seule règle `.footer`.
========================================================= */

.home-body .footer {
  margin-top: 40px;
  padding: 0;
  text-align: left;
  letter-spacing: normal;
  text-transform: none;
  font-size: 0.86rem;
  background: linear-gradient(180deg,
    var(--ft-fond-haut) 0%,
    var(--ft-fond-bas) 100%);
  /* Filet doré en tête, le même que celui des cadres : c'est lui qui raccroche
     le pied de page au reste de l'habillage. L'or ne bouge pas d'un thème à
     l'autre, il est commun aux deux planches. */
  border-top: 2px solid var(--ui-or);
  box-shadow: 0 -6px 24px var(--ft-ombre);
}

.footer-dedans {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 30px;
  width: min(1180px, 100% - 60px);
  margin: 0 auto;
  padding: 40px 0 30px;
}

.footer-marque {
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: "Cinzel Decorative", "Trebuchet MS", serif;
  font-size: 1.05rem;
  letter-spacing: 0.04em;
  color: var(--ft-marque);
  text-decoration: none;
}
.footer-marque .gemme { width: 18px; height: 18px; }

.footer-devise {
  margin: 0;
  text-align: center;
  font-family: "Cinzel Decorative", "Trebuchet MS", serif;
  font-style: italic;
  font-size: 0.9rem;
  color: rgba(var(--ft-encre), 0.72);
}

.footer-social {
  display: flex;
  align-items: center;
  gap: 10px;
}
.footer-social-titre {
  margin-right: 4px;
  font-size: 0.78rem;
  color: rgba(var(--ft-encre), 0.6);
}
/*
  Le fond des pastilles vient de `--ui-bleu*`, déjà repointé sur les violets
  par halloween.css, et leur halo au survol de `--sk-accent`, qui y passe du
  doré à la citrouille. Les deux thèmes sont donc servis sans une règle de
  plus.
*/
.footer-social a {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1px solid rgba(240, 205, 122, 0.4);
  background: linear-gradient(180deg, var(--ui-bleu-clair), var(--ui-bleu));
  color: #fff;
  transition: transform 240ms cubic-bezier(0.22, 0.61, 0.36, 1), box-shadow 240ms ease;
}
.footer-social a:hover {
  transform: translateY(-3px) scale(1.06);
  box-shadow: 0 0 14px 2px rgba(var(--sk-accent), 0.5);
}
.footer-social svg { width: 16px; height: 16px; fill: currentColor; }

/* La ligne légale se détache sous le reste, séparée d'un filet discret. */
.home-body .footer-bas {
  border-top: 1px solid var(--ft-filet);
}
.home-body .footer-bas .footer-dedans {
  grid-template-columns: 1fr auto;
  padding: 15px 0 19px;
  font-size: 0.78rem;
  color: rgba(var(--ft-encre), 0.6);
}
.home-body .footer-ligne { margin: 0; }
.home-body .footer-legal {
  justify-content: flex-end;
  margin: 0;
  letter-spacing: normal;
}
.home-body .footer-legal a { color: rgba(var(--ft-encre), 0.85); }

/* =========================================================
   4. RESPONSIVE

   La grille de ui.css reprend la main sous 1041 px — une colonne, puis deux —
   et les règles ci-dessus la suivent sans rien imposer. Ne restent que les
   endroits où la composition a besoin d'un repli propre.
========================================================= */

@media (max-width: 1040px) {
  /* Le héros redevient un bloc simple, texte sur toute la largeur, sans
     hauteur plancher : à cette largeur le décor n'a plus de place à occuper. */
  .grille-accueil .hero-rendrya { min-height: 0; display: block; }
  .grille-accueil .hero-texte { max-width: none; min-width: 0; }

  /*
    Les actualités, centrées et un peu élargies.

    ui.css les plafonne à 420 px et les laisse calées à gauche : c'était juste
    quand elles ouvraient une pile de quatre cartes, qui donnait la colonne.
    Seules, elles se retrouvaient collées au bord gauche d'une grille deux fois
    plus large. Le plafond monte à 620 px — la carte reste lisible sur une
    tablette — et elle se centre.
  */
  .grille-accueil .zone-actus {
    max-width: 620px;
    margin-inline: auto;
  }
}

@media (max-width: 720px) {
  .footer-dedans {
    grid-template-columns: 1fr;
    justify-items: center;
    gap: 16px;
    text-align: center;
  }
  .home-body .footer-bas .footer-dedans { grid-template-columns: 1fr; }
  .home-body .footer-legal { justify-content: center; }
}