/* ════════════════════════════════════════════════════════════════
   univers.css — Styles spécifiques à univers.html
   FIX : regroupe les 3 blocs <style> qui étaient éparpillés dans le
   HTML (tête, milieu et fin de body) + remplace les styles inline
   dupliqués (galeries Penelope/JeanClaude, bandeau d'achat) par des
   classes partagées.
   .modal-base et .modal-inner restent dans style.css (partagés
   avec les autres pages).
════════════════════════════════════════════════════════════════ */

/* ── Modaux personnages ──────────────────────────────────────── */
.modal-title {
  font-family:    'Cinzel', serif;
  font-size:      12px;
  letter-spacing: 4px;
  color:          var(--gold);
  text-align:     center;
  margin-bottom:  20px;
  text-transform: uppercase;
}

/* Phrase descriptive sous le nom du personnage (contenu indexable) */
.modal-desc {
  font-family: 'Cormorant Garamond', serif;
  font-size:   16px;
  font-style:  italic;
  color:       var(--parchment);
  text-align:  center;
  margin-top:  -10px;
  margin-bottom: 20px;
  opacity:     0.85;
}

.modal-btn {
  display:        block;
  width:          100%;
  margin-top:     20px;
  font-family:    'Cinzel', serif;
  font-size:      9px;
  letter-spacing: 2px;
  text-transform: uppercase;
  padding:        10px;
  border:         1px solid rgba(201,168,76,0.4);
  color:          var(--gold);
  background:     rgba(201,168,76,0.05);
  cursor:         pointer;
  transition:     background 0.3s;
}
.modal-btn:hover { background: rgba(201,168,76,0.15); }

.modal-grid-img {
  width:      100%;
  cursor:     zoom-in;
  border:     1px solid rgba(201,168,76,0.2);
  display:    block;
  transition: opacity 0.2s;
}
.modal-grid-img:hover { opacity: 0.85; }

/* ── Galerie masonry pour les modaux personnage
   FIX v3 : les versions précédentes (grille à cellules de forme
   imposée) ont coupé des têtes, des bordures décoratives, et laissé
   des zones vides — la forme de cellule ne correspondait jamais à
   toutes les images en même temps. Cette version n'impose plus
   aucune forme : chaque image garde sa hauteur naturelle (pas de
   object-fit, pas de hauteur fixe), donc rien n'est jamais recadré.
   La mise en avant de l'image "héros" se fait par sa largeur
   (column-span:all), jamais par un recadrage.
──────────────────────────────────────────────────────────────── */
.masonry-gallery {
  column-count: 2;
  column-gap:   10px;
}
.masonry-gallery .modal-grid-img {
  width:         100%;
  display:       block;
  margin-bottom: 10px;
  break-inside:  avoid;
}
.masonry-hero {
  column-span: all;
}

@media (max-width: 700px) {
  .masonry-gallery { column-count: 1; }
}

/* ── Galerie narrative Tobias (3 bandes)
   Contrairement à .masonry-gallery, ici les images ne sont pas
   recadrées en formes arbitraires : chaque bande garde un ratio
   large et bas, plus proche du format natif des illustrations
   (paysage), pour limiter le recadrage. La bande Oakleigh garde
   l'ordre du DOM = ordre du récit (arrivée → effondrement → lévitation).
   .tg-contain : l'image ornée (bordure décorative) ne doit jamais
   être recadrée — object-fit:contain plutôt que cover.
──────────────────────────────────────────────────────────────── */
.tg-gallery {
  display:        flex;
  flex-direction: column;
  gap:            10px;
}
.tg-row {
  display: flex;
  gap:     10px;
}
.tg-row .modal-grid-img {
  height:          100%;
  object-fit:      cover;
  object-position: center top;
}
.tg-w1 { flex: 1; }
.tg-w2 { flex: 2; }
.tg-row--a { height: clamp(260px, 34vw, 360px); }
.tg-row--b { height: clamp(200px, 28vw, 260px); }
.tg-row--c { height: clamp(150px, 20vw, 190px); }

.modal-grid-img.tg-contain {
  object-fit: contain !important;
}

@media (max-width: 700px) {
  .tg-row { flex-wrap: wrap; }
  .tg-row--a, .tg-row--b, .tg-row--c { height: auto; }
  .tg-row .modal-grid-img {
    height:       140px;
    flex:         1 1 45%;
  }
  .modal-grid-img.tg-contain { height: 140px; }
}

/* Texte de remplacement des fiches "à venir"
   (Archibald, Venise, Padre Pietro, Cléopâtra Darling, Mystère) */
.modal-placeholder {
  font-family: 'Cormorant Garamond', serif;
  font-size:   18px;
  font-style:  italic;
  color:       var(--parchment);
  text-align:  center;
  padding:     40px 0;
}

/* ── Zoom overlay ─────────────────────────────────────────────── */
#penelope-zoom-overlay {
  display:         none;
  position:        fixed;
  inset:           0;
  background:      rgba(0,0,0,0.92);
  z-index:         2000;
  align-items:     center;
  justify-content: center;
  cursor:          zoom-out;
}
#penelope-zoom-img {
  max-width:  88vw;
  max-height: 88vh;
  object-fit: contain;
  border:     1px solid rgba(201,168,76,0.4);
}

/* ── Galerie personnage (Penelope + JeanClaude)
   FIX : remplace ~25 lignes de style inline quasi identiques,
   dupliquées entre les deux galeries, par des classes partagées.
   Les onmouseover/onmouseout JS sont remplacés par :hover.
──────────────────────────────────────────────────────────────── */
.pers-galerie-row {
  display:         flex;
  align-items:     center;
  justify-content: center;
  gap:             0;
  overflow:        hidden;
}

.pers-galerie-side {
  width:       clamp(18px,6vw,45px);
  flex-shrink: 0;
  height:      400px;
  overflow:    hidden;
  cursor:      pointer;
  opacity:     0.4;
  transition:  opacity 0.3s;
  filter:      brightness(0.6);
}
.pers-galerie-side:hover { opacity: 0.7; }

.pers-galerie-side img {
  width:           200px;
  height:          600px;
  object-fit:      cover;
  object-position: center top;
  display:         block;
}
/* Le vignette "précédent" est décalée pour centrer le visage */
.pers-galerie-side--prev img { margin-left: -120px; }

.pers-galerie-main {
  flex:       1;
  text-align: center;
  min-width:  0;
}

.pers-galerie-img {
  width:           100%;
  height:          clamp(300px,60vw,600px);
  object-fit:      cover;
  object-position: center top;
  display:         block;
  border-left:     1px solid rgba(201,168,76,0.3);
  border-right:    1px solid rgba(201,168,76,0.3);
  transition:      opacity 0.3s ease;
}

.pers-galerie-counter {
  font-family:    'Cinzel', serif;
  font-size:      9px;
  letter-spacing: 3px;
  color:          var(--gold);
  text-transform: uppercase;
  margin-top:     12px;
  opacity:        0.6;
}

/* FIX : cette galerie n'avait aucune adaptation mobile, contrairement
   au reste du fichier — les hauteurs fixes (400px / 600px) ne
   réagissaient jamais à un petit écran. */
@media (max-width: 700px) {
  .pers-galerie-side {
    width:  clamp(20px, 8vw, 50px);
    height: 240px;
  }
  .pers-galerie-side img {
    width:  130px;
    height: 360px;
  }
  .pers-galerie-side--prev img { margin-left: -65px; }
  .pers-galerie-img {
    height: clamp(240px, 70vw, 360px);
  }
}

/* ── Largeur mobile des modaux Penelope / JeanClaude
   FIX : style.css force .modal-inner à width:100% !important et
   max-width:100% !important sur tout écran ≤1080px — une règle
   générique pensée pour les modaux "texte" (Gabriel, Tobias...).
   Appliquée aux galeries portrait de Penelope et JeanClaude, elle
   les étalait pleine largeur d'écran : le modal devenait plus large
   que haut au lieu de garder une silhouette verticale comme sur
   ordinateur. Sélecteur #id + .classe = spécificité plus forte que
   .modal-inner seul, donc cette règle gagne même face à un autre
   !important. min-width évite que le modal devienne trop étroit
   pour le texte sur les très petits écrans. */
@media (max-width: 1080px) {
  #modal-penelope .modal-inner,
  #modal-jeanclaude .modal-inner {
    width:     96% !important;
    max-width: 420px !important;
    min-width: 280px !important;
  }
}

/* ── Hauteur mobile spécifique au modal Penelope
   FIX : .pers-galerie-img et .pers-galerie-side (ci-dessus) sont
   des classes partagées avec le modal JeanClaude — les modifier
   directement aurait agrandi les deux galeries à la fois. Sélecteur
   scopé à #modal-penelope pour n'augmenter que sa hauteur sur
   mobile, sans toucher JeanClaude. */
@media (max-width: 700px) {
  #modal-penelope .pers-galerie-img {
    height: clamp(320px, 90vw, 460px);
  }
  #modal-penelope .pers-galerie-side {
    height: 320px;
  }
  #modal-penelope .pers-galerie-side img {
    height: 480px;
  }
}

/* ── Légende descriptive sous chaque personnage de la grille
   Visible en permanence sur mobile/tactile (pas de hover possible).
   Révélée au survol uniquement sur les appareils à souris.
──────────────────────────────────────────────────────────────── */
.univers-desc {
  font-family: 'Cormorant Garamond', serif;
  font-style:  italic;
  font-size:   11px;
  color:       var(--parchment);
  text-align:  center;
  max-width:   130px;
  margin:      6px auto 0;
  line-height: 1.3;
}

@media (hover: hover) and (pointer: fine) {
  .univers-desc {
    font-size:  15px;
    max-width:  160px;
    opacity:    0;
    max-height: 0;
    overflow:   hidden;
    margin-top: 0;
    transition: opacity 0.3s ease, max-height 0.3s ease, margin-top 0.3s ease;
  }
  .univers-perso-wrapper:hover .univers-desc {
    opacity:    0.85;
    max-height: 80px;
    margin-top: 6px;
  }
}

/* ── Conteneurs de la grille personnages
   FIX : remplace les style.cssText inline (rows[p.row], wrapper) par
   des classes, pour pouvoir forcer un mode grille 3 colonnes fixe
   sur mobile sans dépendre du flex-wrap (qui wrappait de façon
   incohérente : 3+1 sur une ligne, 2+2 sur une autre, selon la
   largeur réelle de chaque rond + sa légende).
──────────────────────────────────────────────────────────────── */
.univers-grid {
  display:        flex;
  flex-direction: column;
  gap:            32px;
}

.univers-row {
  display:        flex;
  flex-direction: row;
  gap:             28px;
  flex-wrap:       wrap;
  align-items:     center;
}

.univers-perso-wrapper {
  position: relative;
  display:  inline-block;
}

/* FIX : le canvas des étoiles (position:absolute;inset:0) se
   positionnait par rapport à .univers-perso-wrapper, qui contient
   aussi la légende .univers-desc — le survol étoilé débordait donc
   sur le texte sous le rond. .univers-rond-stage isole le rond (+
   son canvas) dans son propre conteneur positionné, dont la taille
   ne couvre plus que le rond lui-même. */
.univers-rond-stage {
  position: relative;
}

/* Frise chronologique : même classe .univers-rond que les autres
   personnages pour la taille/forme (garantie identique), avec en plus
   la bordure dorée, le halo et l'animation de pulsation. */
.univers-rond-frise {
  border:     3px solid #E8C97A;
  box-shadow: 0 0 25px rgba(232,201,122,0.8), 0 0 50px rgba(232,201,122,0.4);
  animation:  pulse-timeline 1.5s ease-in-out infinite;
}

@media (max-width: 1080px) {
  /* FIX : sans ça, chaque groupe logique de 4 personnages (Gabriel/
     Petunia/Tobias/Nigel, etc.) formait sa propre mini-grille de 3
     colonnes qui se réinitialisait à chaque groupe → le 4e personnage
     de chaque groupe se retrouvait toujours seul sur sa ligne.
     #univers-grid devient LA grille à 3 colonnes ; les groupes
     (.univers-row) deviennent transparents au flux (display:contents)
     pour que tous les personnages s'enchaînent en continu, 3 par 3,
     sans tenir compte des groupes d'origine. */
  .univers-grid {
    display:               grid;
    grid-template-columns: repeat(3, 1fr);
    gap:                   18px 8px;
    align-items:           start;
    justify-items:         center;
  }
  .univers-row {
    display: contents;
  }
  .univers-perso-wrapper {
    display:        flex;
    flex-direction:  column;
    align-items:     center;
    width:           100%;
  }
  .univers-rond-stage {
    width: 100%;
  }
  .univers-rond {
    width:        100% !important;
    height:       auto !important;
    aspect-ratio: 1 / 1;
  }
  .univers-desc {
    max-width: 100%;
  }
}

/* ── Modal vidéos / Shorts ────────────────────────────────────── */
.modal-videos-intro {
  font-family:   'Cormorant Garamond', serif;
  font-size:     15px;
  color:         var(--parchment);
  text-align:    center;
  margin-bottom: 24px;
  opacity:       0.85;
}

.modal-videos-status {
  text-align:  center;
  color:       var(--parchment);
  font-family: 'Cormorant Garamond', serif;
  padding:     20px;
}
/* Caché par défaut, basculé en display:block par le JS en cas d'erreur */
#videos-error { display: none; }

.video-card {
  cursor:     pointer;
  background: #1A1208;
  border:     1px solid rgba(201,168,76,0.3);
  overflow:   hidden;
  transition: border-color 0.3s, transform 0.2s;
}
.video-card:hover {
  border-color: var(--crimson, #6B1A1A);
  transform:    translateY(-2px);
}
.video-card img {
  width:        100%;
  aspect-ratio: 9/16;
  object-fit:   cover;
  display:      block;
}
.video-card .video-title {
  font-family:        'Cormorant Garamond', serif;
  font-size:          12px;
  color:              var(--parchment, #F5F5DC);
  padding:            8px;
  line-height:        1.3;
  display:            -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow:           hidden;
}
.video-card .video-views {
  font-family: 'Cinzel', serif;
  font-size:   10px;
  color:       rgba(201,168,76,0.7);
  padding:     0 8px 8px;
}
@media (max-width: 600px) {
  #videos-grid { grid-template-columns: repeat(2,1fr) !important; }
}

/* ── Bandeau d'achat fixe ─────────────────────────────────────── */
#bandeau-achat {
  position:        fixed;
  left:             var(--sidebar-w);
  right:            0;
  bottom:           0;
  z-index:          150;
  background:       rgba(13,10,7,0.92);
  border-top:       1px solid rgba(201,168,76,0.35);
  padding:          9px 20px;
  display:          flex;
  align-items:      center;
  justify-content:  center;
  gap:              16px;
  flex-wrap:        wrap;
  font-family:      'Cinzel', serif;
}
.bandeau-text {
  color:          #F5EDD8;
  font-size:      13px;
  letter-spacing: 0.5px;
  opacity:        0.9;
}
.bandeau-price {
  color:          #C9A84C;
  font-size:      14px;
  letter-spacing: 1px;
}
.bandeau-link {
  color:           #C9A84C;
  font-size:       12px;
  letter-spacing:  2px;
  text-transform:  uppercase;
  text-decoration: none;
  border:          1px solid rgba(201,168,76,0.5);
  padding:         4px 14px;
  transition:      all 0.3s;
}
.bandeau-link:hover {
  background:   rgba(201,168,76,0.15);
  border-color: #C9A84C;
}

#main { padding-bottom: 52px; }
@media (max-width: 1080px) {
  #bandeau-achat { bottom: 64px; }
  #main { padding-bottom: 0; }
}