/* ════════════════════════════════════════════════════════════════════
   Découvrir (/discover) — MISE EN PAGE seulement (refonte du 07/10/2026).
   Les composants (billboard .bb, rangées .shelf, affiches .wtile, pionniers .ptile, classement .top10,
   comment ça marche .howto, cartes .rcard) vivent dans atelier.css. La page démarre au bord du
   contenu (32 px, règle DS 13) ; les rangées débordent à droite pour montrer qu'elles défilent.
   ════════════════════════════════════════════════════════════════════ */

/* Pile verticale : billboard, puis une rangée tous les 40 px. */
.dv { display: flex; flex-direction: column; gap: 40px; min-width: 0; }
.dv[hidden] { display: none; }
.dv-rows { display: flex; flex-direction: column; gap: 40px; min-width: 0; }
.dv-rows:empty { display: none; }
#dv-hero:empty { display: none; }
/* Bouton Pause du billboard (.ibtn du DS) devant les points : centré sur eux, blanc sur l'image. */
#dv-hero .bb-dots { align-items: center; }
#dv-hero .bb-pause { color: var(--md-sys-color-on-media); }

/* Appel aux pionniers (étape vide) : le texte s'arrête avant le bord (colonne de lecture). */
.dv-join .shelf-sub { max-width: 60ch; }

/* Tout voir : retour, titre, phrase, grille. */
.dv-back { align-self: flex-start; margin-bottom: -24px; }
.dv-voir-h { display: flex; flex-direction: column; gap: 8px; }

@media (max-width: 760px) {
  .dv, .dv-rows { gap: 32px; }
}