/* ══════════════════════════════════════════════════════════════════════
   Explorateur de fonctionnalités (page 9)

   Au clic sur une fonctionnalité, une fiche s'ouvre par-dessus la scène.
   Quand une fonctionnalité en compte plusieurs — la billetterie et ses
   quinze destinations — on présente d'abord une planche d'aperçus, et
   c'est le clic sur un aperçu qui ouvre la grande image.

   Tout vit à l'intérieur de la scène 960 × 540 : la fiche se met donc à
   l'échelle avec la présentation, comme n'importe quelle page.
   ══════════════════════════════════════════════════════════════════════ */

.expl{
  position:absolute; inset:0; z-index:60;
  display:none; align-items:center; justify-content:center;
  background:rgba(7,26,60,.62);
  backdrop-filter:blur(3px); -webkit-backdrop-filter:blur(3px);
}
.expl.est-ouvert{ display:flex; }
.js-anim .expl.est-ouvert{ animation:expl-fond 240ms ease-out both; }
@keyframes expl-fond{ from{ opacity:0 } to{ opacity:1 } }

/* ---------- Le panneau ---------- */
.expl__panneau{
  position:relative; display:flex; flex-direction:column;
  max-width:912px; max-height:516px;
  background:var(--bg); border-radius:16px;
  box-shadow:0 26px 70px rgba(7,26,60,.34), 0 4px 14px rgba(7,26,60,.14);
  overflow:hidden;
}
.js-anim .expl.est-ouvert .expl__panneau{
  animation:expl-entree 300ms var(--anim-courbe, cubic-bezier(.16,1,.3,1)) both;
}
@keyframes expl-entree{
  from{ opacity:0; translate:0 14px; scale:.985 }
  to  { opacity:1; translate:0 0;    scale:1 }
}

/* ---------- En-tête ---------- */
.expl__tete{
  flex:none; display:flex; align-items:center; gap:10px;
  padding:14px 16px 12px 20px;
  border-bottom:1px solid var(--line);
}
.expl__retour{
  flex:none; display:none; align-items:center; gap:5px;
  height:22px; padding:0 10px 0 7px; border:1px solid var(--line);
  border-radius:11px; background:#fff; cursor:pointer;
  font-family:var(--font); font-size:8.5px; font-weight:700; color:var(--navy);
}
.expl__retour svg{ width:9px; height:9px; fill:none; stroke:currentColor;
  stroke-width:2.4; stroke-linecap:round; stroke-linejoin:round; }
.expl__retour:hover{ border-color:rgba(255,10,78,.45); color:var(--rose); }
/* Le retour n'a de sens que s'il y a une planche derriere. */
.expl--detail.expl--groupe .expl__retour{ display:flex; }

.expl__ident{ flex:1 1 auto; min-width:0; }
.expl__oeil{
  display:block; margin:0 0 2px;
  font-size:7.5px; font-weight:700; letter-spacing:.22em; color:var(--rose);
}
.expl__titre{
  display:block; margin:0;
  font-size:15px; line-height:19px; font-weight:800; letter-spacing:-.012em;
  color:var(--navy);
}
.expl__sous{
  display:block; margin:2px 0 0;
  font-family:var(--font-alt); font-size:8.5px; line-height:12px; color:var(--grey);
}
.expl__fermer{
  flex:none; width:26px; height:26px; border:0; border-radius:50%;
  background:var(--rose); color:#fff; cursor:pointer;
  display:grid; place-items:center;
  box-shadow:0 6px 18px rgba(255,10,78,.30);
}
.expl__fermer svg{ width:11px; height:11px; fill:none; stroke:currentColor;
  stroke-width:2.6; stroke-linecap:round; }
.expl__fermer:hover{ background:var(--rose-alt, #e60043); }

/* ---------- Corps ---------- */
.expl__corps{ flex:1 1 auto; min-height:0; overflow:hidden; padding:14px 16px 16px; }

/* La planche d'aperçus */
.expl__planche{
  display:grid; grid-template-columns:repeat(5, 1fr); gap:10px;
  align-content:start; height:100%;
}
.expl--detail .expl__planche{ display:none; }
.expl__carte{
  display:flex; flex-direction:column;
  padding:0; border:1px solid var(--line); border-radius:10px;
  background:#fff; cursor:pointer; overflow:hidden; text-align:left;
  box-shadow:0 2px 8px rgba(7,26,60,.05);
  transition:transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}
.expl__carte:hover{
  transform:translateY(-2px); border-color:rgba(255,10,78,.35);
  box-shadow:0 10px 24px rgba(7,26,60,.12);
}
/* L'aperçu est montré en entier : ces visuels portent du texte, les rogner
   les rendrait illisibles. */
.expl__carte img{
  display:block; width:100%; height:101px;
  object-fit:contain; background:#f2f4f8;
  border-bottom:1px solid var(--line);
}
.expl__carte span{
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;
  overflow:hidden; padding:6px 8px 0;
  font-size:8.4px; line-height:11px; font-weight:700; color:var(--navy);
  letter-spacing:-.004em;
}

/* La grande image */
.expl__detail{ display:none; height:100%; align-items:center; justify-content:center; }
.expl--detail .expl__detail{ display:flex; }
.expl__detail img{
  max-width:100%; max-height:100%; object-fit:contain;
  border-radius:10px; box-shadow:0 10px 30px rgba(7,26,60,.16);
}

/* ---------- Le bouton de la page 9 quand il est actif ---------- */
.s09__pill[data-expl]{ cursor:pointer; }
.s09__pill[data-expl]:hover{ border-color:rgba(255,10,78,.45); }

@media (prefers-reduced-motion:reduce){
  .js-anim .expl.est-ouvert,
  .js-anim .expl.est-ouvert .expl__panneau{ animation:none; }
}

/* Une capture de site : elle est posee a sa taille, centree, et c'est le
   panneau qui s'y cale (voir caler() dans js/explorateur.js). */
.expl--nu .expl__detail{ align-items:center; justify-content:center; }
.expl--nu .expl__detail img{ max-width:none; max-height:none; }