/* =========================================================
   THÈME CLASSIQUE — ce qui lui reste en propre

   CE FICHIER A ÉTÉ VIDÉ DE L'ESSENTIEL, ET C'EST LA CORRECTION.

   Il portait la composition de l'accueil — la grille, le héros, la carte
   d'actualités — et le pied de page en bande sombre. Or il n'est servi qu'au
   thème de base (voir views/site/_head.ejs) : le cloisonnement des thèmes se
   fait au niveau du FICHIER, pas 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 — et Halloween restait sur la grille d'origine de
   ui.css, à six aires nommées dont quatre n'ont plus de bloc.

   Elles vivent maintenant dans assets/accueil.css, servie aux deux thèmes.
   Les couleurs bleu nuit du pied de page y sont passées en jetons `--ft-*`,
   que halloween.css repointe sur ses violets ; les valeurs par défaut sont au
   pixel celles qui étaient ici, le rendu du thème de base est inchangé.

   NE RESTE DONC QUE « EXPLOREZ RENDRYA ».

   Ce bloc a été retiré de l'accueil (voir le commentaire en tête de
   views/site/accueil.ejs) : plus aucun sélecteur ci-dessous ne trouve de
   cible. Il est conservé entier, comme le carrousel assets/explorer.js qui
   l'animait, pour que son retour ne demande que de remettre le balisage —
   c'est la convention suivie partout ailleurs sur ce site. Il est resté ici
   plutôt que de partir dans accueil.css parce qu'il n'est, lui, pas commun :
   Halloween a sa propre planche (`hw-explorer.png`) et ses vingt repères déjà
   relevés dans halloween.css, qui attendent le même sort le jour où le bloc
   reviendra.
========================================================= */

/* =========================================================
   3. « EXPLOREZ RENDRYA » — la bande pleine largeur

   LE CHANGEMENT LE PLUS IMPORTANT, ET IL SERT AUSSI L'ASSET.

   `sk-explorer.png` fait 2078 x 757, soit 2,75:1 : cette planche est dessinée
   pour une BANDE, pas pour une colonne. skin.css la contraint aujourd'hui à
   470 px de large parce qu'elle y partage une ligne avec deux autres cartes.
   Rendue à sa largeur, elle retrouve ses proportions et l'ouverture centrale
   devient assez grande pour montrer les quatre régions à la fois.

   LES QUATRE VIGNETTES SONT VISIBLES EN MÊME TEMPS, et non plus une seule.
   Les flèches et les pastilles ne changent pas de rôle pour autant : elles
   désignent toujours une région — celle-ci est simplement MISE EN AVANT au
   lieu d'être la seule affichée. explorer.js n'a pas une ligne à changer, il
   pose la même classe ; c'est ce qu'on en fait qui diffère.
========================================================= */

/*
  LA PLANCHE EST REMPLACÉE PAR UNE SECTION DESSINÉE ENTIÈREMENT EN CSS.

  Pourquoi. `sk-explorer.png` est dessinée en 2,75:1 ; la maquette demande une
  bande de 250 à 290 px de haut pour 1500 de large, soit environ 5,5:1. À son
  rapport naturel et à pleine largeur, la planche ferait 546 px de haut — le
  double. Il n'existait que trois issues : accepter une section deux fois trop
  haute ; découper le fichier, impossible puisque la seule bande retirable est
  justement celle qui porte les flèches ; ou l'écraser verticalement de 47 %.
  C'était la troisième, et c'était la SEULE image déformée du site.

  Le cadre est donc redessiné : moulure, gemmes d'angle, flèches et pastilles
  sont maintenant du CSS. Plus aucun rapport imposé, donc plus aucune
  déformation — et la hauteur suit le contenu au lieu de le contraindre.

  Conséquence sur la structure : skin.css pose tout l'intérieur en absolu, aux
  repères relevés sur le PNG. Ces repères n'existent plus. Les quatre parties
  reviennent donc dans le flux, en grille :

      flèche ‹   introduction   quatre régions   flèche ›
      ·········· réglette de pastilles ··········

  Les gemmes d'angle sont les gemmes du site — `gemme-m.png`, déjà utilisée
  partout ailleurs. Rien n'est inventé, et rien n'est étiré : elles sont posées
  carrées, à leur rapport.
*/
.grille-accueil section.explorer-bloc.zone-explorer {
  /* La planche ne dicte plus ni la hauteur ni le rapport. */
  aspect-ratio: auto;
  height: auto;
  width: 100%;
  max-width: none;
  transform: none;
  margin-inline: 0;
  align-self: stretch;
  justify-self: stretch;

  display: grid;
  /*
    Quatre colonnes. L'introduction prend 24 % : c'est ce qui tient les cartes
    dans la cote demandée — 190 à 220 px de large. À 23 % elles montaient à
    225 px entre 1560 et 1660 px de fenêtre, là où l'écart entre colonnes est
    déjà à son maximum mais pas encore celui entre cartes.
  */
  grid-template-columns: auto minmax(0, 24%) minmax(0, 1fr) auto;
  grid-template-areas:
    "fleche-g intro cartes fleche-d"
    "points   points points points";
  align-items: center;
  column-gap: clamp(14px, 1.7vw, 26px);
  row-gap: 14px;
  padding: 30px clamp(16px, 1.9vw, 28px) 20px;

  border-radius: 16px;
  background: linear-gradient(180deg,
    rgba(9, 44, 102, 0.95) 0%,
    rgba(3, 20, 52, 0.97) 100%);
  /*
    La moulure, en anneaux concentriques : filet or clair, filet or sombre,
    bande bleue, filet or intérieur. Quatre `inset` valent ici une image de
    cadre — et suivent l'arrondi tout seuls, quelle que soit la taille.

    Les deux derniers `inset` ne sont pas la moulure : ils creusent le panneau
    — une lumière froide en haut, une ombre en bas — pour qu'il ne se lise pas
    comme un aplat.
  */
  box-shadow:
    inset 0 0 0 1px rgba(250, 228, 166, 0.9),
    inset 0 0 0 2px rgba(190, 146, 58, 0.8),
    inset 0 0 0 7px rgba(13, 58, 128, 0.95),
    inset 0 0 0 8px rgba(214, 173, 88, 0.5),
    inset 0 16px 38px rgba(104, 168, 244, 0.13),
    inset 0 -24px 44px rgba(0, 4, 16, 0.32),
    0 12px 34px rgba(3, 26, 60, 0.45);
}

/*
  Les gemmes d'angle.

  Quatre calques de fond sur un seul pseudo-élément, plutôt que quatre éléments
  ajoutés au HTML : elles sont purement décoratives, elles n'ont rien à faire
  dans le balisage. `26px 26px` — carré, donc à leur rapport.
*/
.grille-accueil .zone-explorer::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  border-radius: 16px;
  background:
    url('/assets/ui/gemme-m.png') left 5px top 5px / 26px 26px no-repeat,
    url('/assets/ui/gemme-m.png') right 5px top 5px / 26px 26px no-repeat,
    url('/assets/ui/gemme-m.png') left 5px bottom 5px / 26px 26px no-repeat,
    url('/assets/ui/gemme-m.png') right 5px bottom 5px / 26px 26px no-repeat;
}

/*
  Le voile intérieur n'a plus lieu d'être : l'ouverture de la planche était
  transparente et laissait passer le ciel très clair du fond, il fallait
  l'assombrir. Le panneau est maintenant opaque par lui-même.
*/
.grille-accueil .zone-explorer::before { content: none; }

/*
  LA COLONNE D'INTRODUCTION.

  Elle était posée en absolu à 11,5 % de la largeur, pour se caler derrière la
  flèche que DESSINAIT la planche. La flèche est maintenant une case de la
  grille : la colonne reprend simplement la sienne.
*/
.grille-accueil .zone-explorer .explorer-intro {
  position: static;
  grid-area: intro;
  inset: auto;
  width: auto;
  z-index: 3;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 10px;
}

.grille-accueil .zone-explorer .explorer-accroche {
  margin: 0;
  font-size: clamp(0.72rem, 0.82vw, 0.9rem);
  line-height: 1.45;
  color: rgba(232, 240, 255, 0.82);
  text-shadow: 0 1px 4px rgba(var(--sk-voile), 0.9);
}

/* Le lien reprend la facture des boutons encadrés du site, en plus petit. */
.grille-accueil .zone-explorer .explorer-suite {
  align-self: flex-start;
  padding: 7px 15px;
  border: 1px solid rgba(240, 205, 122, 0.55);
  border-radius: 6px;
  background: linear-gradient(180deg, rgba(17, 87, 184, 0.75), rgba(6, 48, 115, 0.8));
  color: #f3e6c4;
  font-size: clamp(0.66rem, 0.76vw, 0.8rem);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  transition: transform 220ms cubic-bezier(0.22, 0.61, 0.36, 1), box-shadow 220ms ease;
}
.grille-accueil .zone-explorer .explorer-suite:hover {
  transform: translateY(-2px);
  box-shadow: 0 0 14px rgba(var(--sk-accent), 0.45);
}

/* ---------- Flèches et pastilles, dessinées ---------- */

/*
  Elles étaient des boutons VIDES et TRANSPARENTS, posés sur les flèches que
  peignait la planche : le survol passait par `backdrop-filter`, qui éclaircit
  ce qui est peint DERRIÈRE le bouton. Il n'y a plus rien derrière. Elles sont
  donc dessinées ici — ce qui les rend nettes à toute densité d'écran, et
  supprime le calage au pourcentage qui les faisait glisser hors du dessin dès
  que le cadre changeait de rapport.
*/
.grille-accueil .zone-explorer .explo-fleche {
  position: relative;
  grid-area: fleche-g;
  inset: auto;
  transform: none;
  width: clamp(34px, 2.6vw, 46px);
  height: clamp(34px, 2.6vw, 46px);
  aspect-ratio: auto;
  border-radius: 50%;
  background: linear-gradient(180deg,
    rgba(20, 80, 168, 0.92) 0%,
    rgba(5, 30, 76, 0.95) 100%);
  box-shadow: inset 0 1px 0 rgba(214, 236, 255, 0.4),
              inset 0 0 0 1px rgba(var(--sk-accent), 0.7),
              0 4px 12px rgba(var(--sk-voile), 0.5);
  /* Il n'y a plus de dessin à éclaircir : le filtre n'aurait plus d'objet et
     coûterait une couche de composition à chaque survol. */
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
.grille-accueil .zone-explorer .explo-fleche.droite { grid-area: fleche-d; }

/* Le chevron : deux bords d'une boîte carrée, tournés de 45°. Pas de glyphe —
   une police manquante le remplacerait par un rectangle vide. */
.grille-accueil .zone-explorer .explo-fleche::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 34%;
  height: 34%;
  border-left: 2px solid rgb(var(--sk-accent));
  border-bottom: 2px solid rgb(var(--sk-accent));
  transition: border-color 0.2s ease;
}
.grille-accueil .zone-explorer .explo-fleche.gauche::before {
  transform: translate(-35%, -50%) rotate(45deg);
}
.grille-accueil .zone-explorer .explo-fleche.droite::before {
  transform: translate(-65%, -50%) rotate(-135deg);
}

.grille-accueil .zone-explorer .explo-fleche:hover,
.grille-accueil .zone-explorer .explo-fleche:focus-visible {
  transform: scale(1.07);
  background: linear-gradient(180deg,
    rgba(32, 104, 204, 0.95) 0%,
    rgba(8, 42, 100, 0.97) 100%);
  box-shadow: inset 0 1px 0 rgba(230, 244, 255, 0.55),
              inset 0 0 0 1px rgba(var(--sk-accent), 0.95),
              0 0 16px rgba(var(--sk-accent), 0.45);
}
.grille-accueil .zone-explorer .explo-fleche:hover::before {
  border-color: #fff4d6;
}
.grille-accueil .zone-explorer .explo-fleche:active { transform: scale(0.96); }

/*
  La réglette de pastilles.

  Elle était une bande posée en absolu à 84,4 % de la hauteur du dessin, chaque
  pastille calée sur l'anneau que la planche peignait sous elle. Elle est
  maintenant la seconde ligne de la grille, centrée — plus aucune coordonnée à
  faire correspondre.
*/
.grille-accueil .zone-explorer .explo-points {
  position: static;
  grid-area: points;
  inset: auto;
  height: auto;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 11px;
}

.grille-accueil .zone-explorer .explo-point {
  position: relative;
  left: auto;
  top: auto;
  transform: none;
  width: 11px;
  height: 11px;
  aspect-ratio: auto;
  border-radius: 50%;
  /* L'anneau était dessiné dans le fichier ; il est ici la monture du bouton. */
  background: rgba(var(--sk-voile), 0.55);
  box-shadow: inset 0 0 0 1px rgba(var(--sk-accent), 0.55);
  transition: box-shadow 0.25s ease;
}
.grille-accueil .zone-explorer .explo-point:hover {
  box-shadow: inset 0 0 0 1px rgba(var(--sk-accent), 0.95);
}
/* `::before` allume le centre — la règle vient de skin.css et n'a pas besoin
   d'être refaite : seule la monture change. */
/*
  Les quatre régions occupent la troisième colonne de la grille : après
  l'introduction, avant la flèche droite. Les deux respirations qui les
  encadrent sont le même `column-gap`, elles sont donc égales par construction
  — l'ancien calage en pourcentage en laissait 23 à gauche et 15 à droite, et
  la composition penchait.
*/
.grille-accueil .zone-explorer .explorer-vignettes {
  position: static;
  grid-area: cartes;
  inset: auto;
  /* La rangée fait sa propre hauteur : 180 px, la cote de la maquette. C'est
     elle qui donne sa hauteur à la bande, au lieu de la subir. */
  min-height: 180px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  /* `1fr` et non `auto` : sans hauteur de ligne définie, le `height: 100%` des
     vignettes se résolvait contre une ligne dimensionnée par leur contenu —
     circulaire, donc ignoré. Les cartes restaient à leur hauteur naturelle au
     milieu d'une ouverture trois fois plus haute. */
  grid-template-rows: 1fr;
  gap: clamp(10px, 1.1vw, 20px);
  /*
    Plus de rembourrage à réserver. Il servait à tenir les cases à l'écart de
    la moulure haute et de la réglette de pastilles que DESSINAIT la planche ;
    la moulure est maintenant le rembourrage de la section, et la réglette est
    une ligne de la grille. Le vide est tenu par la structure, plus par des
    valeurs relevées sur une image.
  */
  padding: 0;
  overflow: visible;
}

/*
  Le titre vit maintenant DANS la colonne d'introduction : il n'est plus posé
  en absolu sur le cadre, c'est elle qui le place. Il reprend la casse et
  l'échelle des titres de la maquette, sur deux lignes.
*/
.grille-accueil .zone-explorer .bloc-titre {
  position: static;
  display: block;
  margin: 0;
  font-size: clamp(1.05rem, 1.5vw, 1.7rem);
  line-height: 1.12;
  letter-spacing: 0.06em;
  color: var(--sk-encre-ornee);
  text-shadow: 0 2px 8px rgba(var(--sk-voile), 0.95);
}

/* Un filet doré sous le titre : la colonne de gauche n'avait que du texte posé
   sur du bleu nuit, rien ne la raccrochait à la moulure qui l'entoure. */
.grille-accueil .zone-explorer .explorer-intro .bloc-titre::after {
  content: '';
  display: block;
  width: 70px;
  height: 2px;
  margin-top: 11px;
  background: linear-gradient(90deg,
    rgba(var(--sk-accent), 0.85) 0%,
    rgba(var(--sk-accent), 0) 100%);
}

/* ---------- Les vignettes ---------- */

/*
  Toutes visibles, toutes cliquables. Celle que désignent les flèches et les
  pastilles est simplement plus lumineuse et très légèrement plus grande — les
  autres restent lisibles, seulement retenues.

  `position: static` et `inset: auto` défont l'empilement de skin.css : les
  quatre vignettes redeviennent des cases de la rangée.
*/
.grille-accueil .zone-explorer .explorer-vignette {
  position: relative;
  inset: auto;
  display: block;
  opacity: 1;
  visibility: visible;
  overflow: hidden;
  border-radius: 7px;
  /*
    Le liseré était à 0.35 d'opacité, sans arête éclairée ni ombre portée
    marquée : quatre rectangles bleus posés sur un intérieur bleu nuit, rien ne
    les détachait du fond. Trois traits les font exister comme des cases —
    l'arête haute qui prend la lumière, le liseré doré franc, et l'ombre qui
    les décolle du panneau.
  */
  box-shadow: inset 0 1px 0 rgba(200, 228, 255, 0.3),
              inset 0 0 0 1px rgba(var(--sk-accent), 0.45),
              0 6px 18px rgba(var(--sk-voile), 0.6);
  transform: none;
  /* Retenue, pas éteinte : 0.84 laisse la région parfaitement lisible. Un
     premier réglage à 0.74 délavait les emplacements réservés au point qu'on
     ne les distinguait plus du ciel. */
  filter: brightness(0.84) saturate(0.9);
  transition: filter 320ms ease, transform 320ms cubic-bezier(0.22, 0.61, 0.36, 1),
              box-shadow 320ms ease;
}

/*
  La case désignée ne se SOULÈVE plus.

  Les quatre cases sont visibles côte à côte : en en décalant une de 4 px, la
  rangée perdait sa ligne — les quatre noms ne tombaient plus à la même
  hauteur, et le décrochage se lisait comme un défaut d'alignement plutôt que
  comme une mise en avant. Elle se distingue maintenant par ce qui ne casse
  pas la rangée : elle est plus claire, son liseré doré est franc, et un halo
  la cerne. Le soulèvement reste au survol, où il répond à un geste.
*/
.grille-accueil .zone-explorer .explorer-vignette.explo-actif {
  filter: none;
  transform: none;
  box-shadow: inset 0 1px 0 rgba(216, 236, 255, 0.5),
              inset 0 0 0 1px rgba(var(--sk-accent), 0.9),
              0 8px 22px rgba(var(--sk-voile), 0.6),
              0 0 18px rgba(var(--sk-accent), 0.32);
}

.grille-accueil .zone-explorer .explorer-vignette:hover {
  filter: none;
  transform: translateY(-4px);
}

/*
  Les quatre cases REMPLISSENT la hauteur de l'ouverture, elles ne s'y posent
  pas.

  Un rapport fixe — 4/3 par exemple — les laissait dans le haut du cadre, avec
  un grand vide en dessous : le rapport de la planche est donné, celui des
  cases ne pouvait pas tomber juste par hasard. En les étirant, la rangée
  occupe l'ouverture quelle que soit la largeur de l'écran.

  `object-fit: cover` fait tout le travail sur l'illustration : elle se recadre
  sans jamais se déformer, quelle que soit la hauteur qu'on lui donne.
*/
.grille-accueil .zone-explorer .explorer-vignette { height: 100%; }

.grille-accueil .zone-explorer .explorer-vignette img,
.grille-accueil .zone-explorer .explorer-vignette .vignette-attente {
  position: relative;
  inset: auto;
  display: block;
  width: 100%;
  height: 100%;
  min-height: 0;
  object-fit: cover;
  border-radius: 4px;
}

/*
  Le nom de la région reste en surimpression, au bas de sa vignette — mais sur
  un vrai bandeau.

  Le voile de skin.css est bâti sur `--sk-voile`, qui vaut ici 4, 26, 62 : la
  couleur même du bas de la case. Le dégradé assombrissait donc du bleu nuit
  avec du bleu nuit, et le nom se retrouvait posé à plat, sans socle. Le
  bandeau est repris sur une encre plus noire, et une fine règle dorée le
  sépare de l'illustration.
*/
.grille-accueil .zone-explorer .explorer-vignette .vignette-nom {
  padding: 24% 6% 8%;
  font-size: clamp(0.66rem, 0.82vw, 0.88rem);
  background: linear-gradient(180deg,
    rgba(1, 12, 32, 0) 0%,
    rgba(1, 12, 32, 0.5) 38%,
    rgba(1, 12, 32, 0.93) 100%);
  /*
    Colonne, pour que la règle dorée ci-dessous soit un ÉLÉMENT du bandeau et
    non une boîte posée en absolu : calée en pourcentage, elle se serait
    résolue contre la hauteur du bandeau alors que le rembourrage qui place le
    texte se résout, lui, contre sa largeur — les deux auraient glissé l'un par
    rapport à l'autre à chaque changement de largeur.
  */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
}

/* La règle dorée du bandeau : juste au-dessus du texte, effacée vers les deux
   bords pour ne pas dessiner un second cadre dans la case. */
.grille-accueil .zone-explorer .explorer-vignette .vignette-nom::before {
  content: '';
  width: 56%;
  height: 1px;
  margin-bottom: 7px;
  flex: none;
  background: linear-gradient(90deg,
    rgba(var(--sk-accent), 0) 0%,
    rgba(var(--sk-accent), 0.55) 50%,
    rgba(var(--sk-accent), 0) 100%);
}

/* Le voile haut de skin.css n'a plus d'objet : le titre n'est plus posé sur
   l'illustration, il est au-dessus d'elle. */
.grille-accueil .zone-explorer .explorer-vignette::before { content: none; }

/*
  L'emplacement réservé, tant qu'aucune illustration de région n'est fournie.

  La hachure de skin.css servait sur un grand aplat ; sur des vignettes de
  200 px posées devant un intérieur déjà bleu nuit, elle se lisait comme une
  image cassée. Un simple dégradé, à peine plus clair que le fond du cadre,
  dit « visuel à venir » sans attirer l'œil.
*/
.grille-accueil .zone-explorer .explorer-vignette .vignette-attente {
  background-color: transparent;
  /*
    Deux couches, parce qu'un dégradé linéaire seul ne fait qu'un aplat un peu
    penché : le halo radial creuse le haut de la case et lui donne une source
    de lumière, comme en aurait une illustration. La case cesse de se lire
    comme un rectangle vide.
  */
  background-image:
    radial-gradient(118% 76% at 50% 8%,
      rgba(112, 176, 248, 0.38) 0%,
      rgba(112, 176, 248, 0) 66%),
    linear-gradient(168deg,
      rgba(32, 84, 158, 0.72) 0%,
      rgba(6, 30, 74, 0.94) 100%);
}

/*
  Le filigrane de la case en attente.

  Une case vide reste une case vide : la gemme du site, en très discret et
  légèrement floue, dit « visuel à venir » avec le vocabulaire graphique de
  l'habillage plutôt qu'avec un damier de logiciel de retouche. Elle est posée
  sur l'emplacement réservé seulement — une vraie illustration la remplacera
  sans qu'il y ait rien à retirer.
*/
.grille-accueil .zone-explorer .explorer-vignette .vignette-attente::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 34%;
  width: 40%;
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  background: url('/assets/ui/gemme-xl.png') center / contain no-repeat;
  opacity: 0.3;
  filter: blur(0.3px);
  pointer-events: none;
}

/* Sans JavaScript, aucune vignette n'est désignée : toutes restent pleinement
   lisibles plutôt que retenues. */
.grille-accueil .zone-explorer.explorer-bloc:not(.explo-pret) .explorer-vignette {
  filter: none;
}

/* =========================================================
   RESPONSIVE — « Explorez Rendrya » seul

   Les replis du héros, de la carte d'actualités et du pied de page ont suivi
   leurs sections dans accueil.css. Ne restent ici que ceux de la bande.
========================================================= */

@media (max-width: 1040px) {
  /*
    L'EXPLORER SUIT SON CONTENU au lieu d'un rapport fixe.

    Le bandeau de 4.6:1 n'a de sens qu'en pleine largeur : à 680 px il ne
    faisait plus que 148 px de haut, et les quatre régions s'y écrasaient en
    filets de 30 px. La boîte reprend donc sa hauteur de son contenu, et tout
    ce qui était posé en absolu — l'introduction, la rangée de vignettes —
    revient dans le flux, l'un sous l'autre.

    Le rembourrage remplace alors les repères d'ouverture : c'est lui qui tient
    le contenu à l'écart de la moulure.
  */
  /*
    LA BANDE DEVIENT UNE PILE.

    Le cadre n'a plus besoin d'être retiré — il n'y a plus d'image à étirer en
    travers du contenu, c'est du CSS, il se redessine à n'importe quelle forme.
    Seule la grille change : les quatre colonnes de la bande ne tiennent pas
    sur un écran étroit, l'introduction passe donc au-dessus des régions.
  */
  .grille-accueil section.explorer-bloc.zone-explorer {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "intro"
      "cartes";
    row-gap: 16px;
    padding: 24px 20px 26px;
    border-radius: 12px;
  }
  /* Les gemmes se resserrent avec le cadre. */
  .grille-accueil .zone-explorer::after {
    border-radius: 12px;
    background-size: 20px 20px;
  }

  /* Les flèches et les pastilles n'ont plus rien à désigner : les quatre
     régions sont visibles à la fois, en deux rangées. */
  .grille-accueil .zone-explorer .explo-fleche,
  .grille-accueil .zone-explorer .explo-points { display: none; }

  .grille-accueil .zone-explorer .explorer-intro {
    gap: 8px;
  }
  .grille-accueil .zone-explorer .bloc-titre { font-size: 1.15rem; }
  /* Le titre est centré à cette largeur, plus posé en tête d'une colonne :
     son filet doit l'être aussi, sinon il pend à gauche sous un titre centré. */
  .grille-accueil .zone-explorer .explorer-intro .bloc-titre::after {
    margin-inline: auto;
  }

  .grille-accueil .zone-explorer .explorer-vignettes {
    /* Deux de front : à cette largeur, quatre donneraient des vignettes de
       120 px. La hauteur revient au contenu — 180 px valaient pour une rangée
       unique, pas pour deux. */
    min-height: 0;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: auto;
    gap: 12px;
  }
  .grille-accueil .zone-explorer .explorer-vignette { height: auto; }
  .grille-accueil .zone-explorer .explorer-vignette img,
  .grille-accueil .zone-explorer .explorer-vignette .vignette-attente {
    height: auto;
    aspect-ratio: 4 / 3;
  }
}

@media (max-width: 720px) {
  /* Une seule colonne de régions : en dessous, le nom ne tient plus sur la
     vignette. */
  .grille-accueil .zone-explorer .explorer-vignettes {
    grid-template-columns: 1fr;
    grid-template-rows: auto;
  }
}