/* Carrousel orbital 3D réutilisable (planète + lunes). Styles génériques ; le
   contenu propre à chaque page (cartes, sections, contenu actif) reste dans le
   CSS de l'app. Voir planet-carousel.js. */

.planet-carousel {
    position: relative;
    width: 100%;
    /* Hauteur fluide : ~300px sur téléphone en portrait, jusqu'à 455px (+30 %)
       sur grand écran. La scène 3D suit la hauteur du canevas (champ vertical
       fixe de la caméra) ; en largeur, le cadrage recule au besoin sur canevas
       étroit (fitCamera dans planet-carousel.js).
       Sur écran BAS (portable, fenêtre réduite), le terme 75dvh - 235px prend
       le dessus : ~235px couvrent la navbar, les marges et le titre de section
       (mesurés sur À propos, le plus chargé), et les 25dvh restants laissent
       toujours au moins un quart de la fenêtre à la carte sous le carrousel,
       pour qu'on voie tout de suite que le carrousel révèle du contenu.
       Plancher à 220px pour que la scène reste manipulable (sous ~600px de
       fenêtre, la part de la carte se comprime). dvh suit la barre d'adresse
       mobile ; repli vh pour les navigateurs sans dvh. */
    height: clamp(220px, min(22vw + 220px, 75vh - 235px), 455px);
    height: clamp(220px, min(22vw + 220px, 75dvh - 235px), 455px);
    /* marge basse généreuse : espace entre le carrousel et le contenu de
       l'élément actif affiché en dessous. */
    margin: 1rem auto 3rem;
    touch-action: none;   /* le carrousel gère lui-même le glisser */
    outline: none;
}

.planet-carousel canvas {
    display: block;
    cursor: grab;
}