/* ==========================================================================
   BLOC — Plan du site (`plan_du_site`), sprint 2026-11-09 n° 6, point 4 (D169).

   ⚠️ AUCUNE SOURCE DANS LA MAQUETTE : ce fichier est ÉCRIT, sur les jetons de la charte
   (common.css) et dans le ton des pages légales (texte-legal.css) — fond crème, titres en
   serif, liens soulignés de jaune.

   Trois bandes pleine largeur (pages, destinations, animaux) ; dans chacune, une colonne par
   groupe (continent, famille…), qui se répartissent d'elles-mêmes selon la largeur.
   ========================================================================== */

/* `section.` et non `.plan-site` seul : `section[id]` (common.css) pèse plus lourd. */
section.plan-site{ background:var(--creme); padding:clamp(48px,7vw,96px) 0 clamp(64px,8vw,120px); }

.plan-site__bande + .plan-site__bande{
  margin-top:clamp(40px,5vw,72px); padding-top:clamp(32px,4vw,56px);
  border-top:1px solid rgba(14,14,14,.12);
}
.plan-site__titre{
  font-family:var(--serif); font-weight:400; font-size:clamp(28px,3vw,40px); line-height:1.1;
  color:var(--noir); margin:0 0 clamp(20px,2.5vw,32px);
}
.plan-site__grille{
  display:grid; grid-template-columns:repeat(auto-fill, minmax(190px, 1fr));
  gap:clamp(24px,3vw,40px) clamp(24px,3vw,48px); align-items:start;
}
/* Un enfant de grille garde sinon la largeur de son plus long nom : il déborderait sa colonne. */
.plan-site__colonne{ min-width:0; }
.plan-site__sous-titre{
  font-size:var(--fs-label); font-weight:600; letter-spacing:.14em; text-transform:uppercase;
  color:var(--noir-50); margin:0 0 12px;
}
.plan-site__sous-titre a{ color:inherit; text-decoration:none; }
.plan-site__sous-titre a:hover{ color:var(--jaune-d); }
.plan-site__liste{ list-style:none; margin:0; padding:0; }
.plan-site__liste li + li{ margin-top:6px; }
.plan-site__liste a,
.plan-site__liste span{ font-size:var(--fs-small); line-height:1.45; color:var(--noir); }
.plan-site__liste a{
  text-decoration:underline; text-decoration-color:transparent; text-underline-offset:3px;
  transition:text-decoration-color .2s var(--ease), color .2s var(--ease);
}
.plan-site__liste a:hover{ text-decoration-color:var(--jaune); }

@media (max-width:640px){
  /* Deux colonnes sur téléphone : une seule rendrait la bande des animaux interminable. */
  .plan-site__grille{ grid-template-columns:repeat(2, minmax(0,1fr)); gap:24px 16px; }
  /* Cible tactile : chaque lien gagne de la hauteur sans changer de taille de texte. */
  .plan-site__liste li + li{ margin-top:0; }
  .plan-site__liste a{ display:inline-block; padding:5px 0; }
}