/* helix.css  v1  (flotte) — Three.js Photo Helix
   Handle d'asset propre (mod_threejs_nuk.helix), decouple de style.css :
   meme convention que simple-cards.css. */

/* Wrapper exterieur — la hauteur est calculee et posee en inline par le JS.
   PAS d'overflow:hidden : il rognerait les ornements (i=-1 / i=N) via une
   projection 2D de la bounding box, pas les bornes 3D reelles. */
.mod-threejs-helix-wrap {
    position: relative;
    width: 100%;
    background: transparent;
}

/* Scene — remplit le wrapper et porte le contexte de perspective CSS 3D.
   Ne doit PAS avoir overflow:hidden (cela aplatirait les enfants preserve-3d).
   perspective est posee par le JS (proportionnelle a la largeur du conteneur) ;
   le JS pose aussi transform:scale() pour le zoom. */
.helix-scene {
    position: absolute;
    top: 0; left: 0;
    width: 100%;
    height: 100%;
    cursor: grab;
    touch-action: pan-y; /* v9 : le glisser vertical fait defiler la PAGE ; seul l horizontal fait tourner l helice */
}
.helix-scene:active {
    cursor: grabbing;
}

/* Stage — ancre de taille nulle au centre exact de la scene.
   Les cartes sont placees par rapport a cette origine via des transforms 3D.
   Le JS pose transform: rotateX(tilt) rotateZ(lean) rotateY(angle) a chaque frame. */
.helix-stage {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    transform-style: preserve-3d;
}

/* Carte photo. Pas de backface-visibility:hidden — les photos restent
   visibles de dos. */
.helix-card {
    position: absolute;
    overflow: hidden;
    border-radius: 5px;
    box-shadow: 0 3px 14px rgba(0, 0, 0, 0.30);
    cursor: pointer;
    transition: box-shadow 0.2s;
}
.helix-card:hover {
    box-shadow: 0 6px 28px rgba(0, 0, 0, 0.55);
}

.helix-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    pointer-events: none;
    user-select: none;
    -webkit-user-select: none;
}

/* Carte avec titre visible (Display title) : image au-dessus, titre en dessous.
   L'image cede la place au titre au lieu de le pousser hors de la carte. */
.helix-card--titled {
    display: flex;
    flex-direction: column;
}
.helix-card--titled img {
    flex: 1 1 auto;
    height: auto;
    min-height: 0;
}
.helix-card-title {
    flex: 0 0 auto;
    margin: 0;
    padding: 2px 4px;
    font-size: 10px;
    line-height: 1.2;
    font-weight: 400;
    text-align: center;
    color: #fff;
    background: rgba(0, 0, 0, 0.55);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    pointer-events: none;
}

/* ── Lightbox ──────────────────────────────────────────────────────────────── */

.helix-overlay {
    position: fixed;
    inset: 0;
    z-index: 9000;
    background: rgba(0, 0, 0, 0.92);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s;
}
.helix-overlay--open {
    opacity: 1;
    pointer-events: auto;
}

.helix-overlay-img {
    max-width: 90vw;
    max-height: 90vh;
    object-fit: contain;
    border-radius: 4px;
    display: block;
    transition: opacity 0.15s;
}

.helix-overlay-btn {
    position: absolute;
    background: rgba(255, 255, 255, 0.14);
    border: none;
    color: #fff;
    font-size: 2rem;
    line-height: 1;
    cursor: pointer;
    border-radius: 50%;
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s;
}
.helix-overlay-btn:hover {
    background: rgba(255, 255, 255, 0.28);
}

.helix-overlay-close { top: 20px;  right: 20px; font-size: 1.4rem; }
.helix-overlay-prev  { left: 20px; top: 50%; transform: translateY(-50%); }
.helix-overlay-next  { right: 20px; top: 50%; transform: translateY(-50%); }

/* ── Ornements haut/bas ─────────────────────────────────────────────────────
   Dans SAB c'etaient des perles WebGL (canvas offscreen + toDataURL + billboard).
   Ici c'est une simple image (logo SVG) posee dans le stage preserve-3d, avec la
   meme contre-rotation billboard appliquee par le JS. Aucun style requis :
   dimensions et transform sont poses en inline. */