/* =========================================================================
   LanorTrad — Accueil : héros 3D, sections
   ========================================================================= */

.hero { position: relative; padding-top: calc(var(--nav-h) + 40px); min-height: 100vh; display: flex; align-items: center; overflow: hidden; }
.hero .wrap { display: grid; grid-template-columns: 1.05fr .95fr; gap: 40px; align-items: center; width: 100%; }

.hero-copy { max-width: 600px; }
.hero-copy .eyebrow { display: inline-flex; align-items: center; gap: 10px; margin-bottom: 20px; }
.hero-copy .eyebrow::before { content: ""; width: 30px; height: 2px; background: var(--grad); border-radius: 2px; }
.hero-title { font-size: clamp(2.6rem, 6vw, 4.7rem); line-height: .98; margin-bottom: 22px; }
.hero-title .line { display: block; overflow: hidden; }
.hero-title .line > span { display: block; animation: heroUp .9s var(--ease) both; }
.hero-title .line:nth-child(2) > span { animation-delay: .12s; }
@keyframes heroUp { from { transform: translateY(110%); } to { transform: translateY(0); } }

.swap-text { display: inline-block; }
.swap-text.swap { animation: swapIn .65s var(--ease) both; }
@keyframes swapIn { from { opacity: 0; transform: translateY(26px) rotateX(-55deg); transform-origin: bottom; } to { opacity: 1; transform: none; } }

/* Hauteurs figées du héros.
   Le carrousel change de série toutes les 5,2 s, et les textes n'ont pas du
   tout la même longueur d'une série à l'autre : en 1280 px, le titre passe de
   74 à 147 px (« Tokyo Underworld » repasse à la ligne) et le synopsis de 138 à
   276 px. Résultat, tout le bas du héros — bouton « Lire maintenant » compris —
   se déplaçait à chaque rotation, en continu tant que la page restait ouverte.
   Mesuré à 0,26 de CLS sur deux rotations, soit la zone rouge de Google.
   L'ancien min-height de 3,4em ne couvrait que 2 lignes sur 10.

   On réserve donc 2 lignes de titre, et on ramène le synopsis à un nombre de
   lignes fixe : c'est une accroche, la version complète est sur la fiche.
   Pour l'ajuster, il n'y a qu'un chiffre à changer (et la hauteur qui va avec,
   à raison de 1.6 par ligne). */
.hero-title { min-height: 1.96em; }        /* 2 lignes x line-height .98 */
.hero-desc { color: var(--txt-soft); font-size: 1.08rem; max-width: 52ch; margin-bottom: 18px;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 7;
  overflow: hidden; height: 11.2em;        /* 7 lignes x 1.6 */
  transition: opacity .4s; }
/* min-height : les puces de genre sont injectees par hero.js, donc absentes au
   premier rendu. Sans hauteur reservee, leur arrivee pousse d'un coup le bouton
   « Lire maintenant », la recherche et les compteurs vers le bas — c'est la
   principale source de decalage de la page (meme raison que le min-height de
   .hero-desc juste au-dessus). */
.hero-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 28px; min-height: 2.2em; }
.hero-chip { padding: 6px 14px; border-radius: 999px; font-size: .82rem; font-weight: 600; background: var(--glass); border: 1px solid var(--line); color: var(--txt-soft); }
.hero-actions { display: flex; gap: 14px; flex-wrap: wrap; align-items: center; margin-bottom: 24px; }

/* Barre de recherche du héros : bouton stylé en champ, ouvre la palette ⌘K */
.hero-search {
  display: flex; align-items: center; gap: 12px;
  width: 100%; max-width: 440px; margin: 0 0 36px;
  padding: 13px 16px; border-radius: 14px; text-align: left; cursor: text;
  background: var(--glass); border: 1px solid var(--line); color: var(--txt-mut);
  transition: border-color .2s, background .2s, box-shadow .2s;
}
.hero-search:hover, .hero-search:focus-visible {
  border-color: var(--violet); background: var(--bg-2); outline: none;
  box-shadow: 0 10px 26px -14px rgba(124,58,237,.55);
}
.hero-search svg { color: var(--txt-soft); flex-shrink: 0; }
.hero-search .hs-ph { flex: 1; min-width: 0; font-size: .98rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hero-search .hs-kbd {
  font-family: var(--font-body); font-size: .72rem; font-weight: 600;
  padding: 3px 9px; border-radius: 7px; flex-shrink: 0;
  background: var(--bg-3); border: 1px solid var(--line); color: var(--txt-mut);
}
@media (pointer: coarse) { .hero-search .hs-kbd { display: none; } }

.hero-stats { display: flex; gap: 34px; }
.hero-stats .s strong { font-family: var(--font-display); font-size: 1.7rem; display: block; line-height: 1; }
.hero-stats .s span { color: var(--txt-mut); font-size: .82rem; }

/* Sur la carte de devant, le vrai titre/genres est déjà dans la colonne texte :
   on masque le libellé de la couverture pour ne pas dupliquer / surcharger l'art. */
.deck-card.front .glass-label { opacity: 0; transition: opacity .4s var(--ease); }

/* — Scène 3D — */
.hero-3d { position: relative; height: 560px; perspective: 1400px; display: grid; place-items: center; }
.deck { position: relative; width: 320px; height: 470px; transform-style: preserve-3d; transition: transform .25s var(--ease); animation: float 7s ease-in-out infinite; }
.deck-card {
  position: absolute; inset: 0; border-radius: 22px; overflow: hidden;
  background: var(--bg-3); border: 1px solid var(--line-strong);
  box-shadow: 0 40px 80px -30px rgba(0,0,0,.9);
  transform-style: preserve-3d; backface-visibility: hidden;
  transition: transform .9s var(--ease), opacity .9s var(--ease);
}
.deck-card img { width: 100%; height: 100%; object-fit: cover; }
.deck-card .glass-label {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 60px 22px 22px;
  background: linear-gradient(to top, rgba(7,7,13,.96), transparent);
}
.deck-card .glass-label h3 { font-size: 1.5rem; }
.deck-card .glass-label p { color: var(--txt-mut); font-size: .85rem; margin-top: 4px; }
.deck-card .reflect { position: absolute; inset: 0; background: linear-gradient(115deg, transparent 40%, rgba(255,255,255,.14) 50%, transparent 60%); transform: translateX(-100%); }
.deck-card.front .reflect { animation: sheen 4.5s ease-in-out infinite; }
@keyframes sheen { 0%, 60% { transform: translateX(-110%); } 100% { transform: translateX(110%); } }

/* positions de pile (gérées en JS via classes) */
.deck-card.front { transform: translateZ(60px) rotateY(-16deg) rotateX(4deg); z-index: 5; }
.deck-card.mid   { transform: translateZ(0) translateX(46px) rotateY(-16deg) scale(.94); opacity: .8; z-index: 4; }
.deck-card.back  { transform: translateZ(-60px) translateX(86px) rotateY(-16deg) scale(.88); opacity: .55; z-index: 3; }
.deck-card.hidden { transform: translateZ(-120px) translateX(120px) rotateY(-16deg) scale(.8); opacity: 0; z-index: 2; }

.deck-glow { position: absolute; width: 80%; height: 80%; border-radius: 50%; filter: blur(70px); background: radial-gradient(circle, var(--violet), transparent 70%); opacity: .5; z-index: -1; animation: pulseGlow 5s ease-in-out infinite; }

/* indicateurs */
.hero-dots { position: absolute; bottom: 6px; left: 50%; transform: translateX(-50%); display: flex; gap: 8px; z-index: 10; }
.hero-dots button { width: 9px; height: 9px; border-radius: 999px; background: var(--line-strong); transition: .3s; }
.hero-dots button.on { width: 26px; background: var(--grad); }

.scroll-cue { position: absolute; bottom: 26px; left: 50%; transform: translateX(-50%); color: var(--txt-mut); font-size: .78rem; display: flex; flex-direction: column; align-items: center; gap: 8px; letter-spacing: .2em; text-transform: uppercase; }
.scroll-cue .mouse { width: 22px; height: 36px; border: 2px solid var(--line-strong); border-radius: 14px; position: relative; }
.scroll-cue .mouse::after { content: ""; position: absolute; top: 7px; left: 50%; transform: translateX(-50%); width: 4px; height: 7px; border-radius: 2px; background: var(--violet); animation: wheel 1.6s var(--ease) infinite; }
@keyframes wheel { 0% { opacity: 0; transform: translate(-50%, 0); } 40% { opacity: 1; } 80%, 100% { opacity: 0; transform: translate(-50%, 12px); } }

/* — Bande de stats — */
.stat-band { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.stat-band .stat {
  padding: 28px 22px; border-radius: var(--radius); text-align: center;
  background: var(--glass); border: 1px solid var(--line); backdrop-filter: blur(10px);
  transition: transform .35s var(--ease), border-color .35s;
}
.stat-band .stat:hover { transform: translateY(-6px); border-color: rgba(168,85,247,.4); }
.stat-band .num { font-family: var(--font-display); font-size: clamp(2rem, 4vw, 3rem); font-weight: 800; }
.stat-band .lbl { color: var(--txt-mut); font-size: .9rem; margin-top: 4px; }

/* — Latest chapters — */
.latest-grid { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
.latest {
  display: flex; gap: 14px; padding: 12px; border-radius: var(--radius);
  background: var(--glass); border: 1px solid var(--line); transition: transform .3s var(--ease), border-color .3s, background .3s;
}
.latest:hover { transform: translateY(-4px); border-color: rgba(168,85,247,.4); background: var(--glass-2); }
.latest img { width: 60px; height: 84px; object-fit: cover; border-radius: 10px; flex-shrink: 0; }
.latest .info { min-width: 0; display: flex; flex-direction: column; justify-content: center; }
.latest .info h4 { font-size: .98rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.latest .info .ch { color: var(--violet); font-weight: 700; font-size: .9rem; margin-top: 3px; }
.latest .info .when { color: var(--txt-mut); font-size: .78rem; margin-top: 2px; }

/* — Prochaines sorties — */
.releases { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.rel { display: flex; align-items: center; gap: 14px; padding: 12px 14px; border-radius: var(--radius); background: var(--glass); border: 1px solid var(--line); position: relative; overflow: hidden; transition: transform .3s var(--ease), border-color .3s; --accent: #a855f7; }
.rel:hover { transform: translateY(-3px); border-color: color-mix(in srgb, var(--accent) 55%, transparent); }
.rel::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--accent); }
.rel img { width: 52px; height: 72px; object-fit: cover; border-radius: 9px; flex-shrink: 0; }
.rel .ri { flex: 1; min-width: 0; }
.rel .ri h4 { font-size: .98rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rel .ri .meta { display: flex; align-items: center; gap: 8px; margin-top: 4px; font-size: .82rem; color: var(--txt-mut); flex-wrap: wrap; }
.rel .ri .ch { color: var(--accent); font-weight: 700; filter: brightness(1.35); }
.rel .ri .when.soon { color: var(--violet); font-weight: 700; }
.rel .badge-st { padding: 5px 11px; border-radius: 999px; font-size: .72rem; font-weight: 700; white-space: nowrap; font-family: var(--font-display); }
.rel .badge-st.ok { background: rgba(34,197,94,.16); color: #4ade80; border: 1px solid rgba(34,197,94,.32); }
.rel .badge-st.est { background: rgba(245,158,11,.14); color: #fbbf24; border: 1px solid rgba(245,158,11,.32); }
.rel .badge-st.late { background: rgba(244,63,94,.14); color: #fb7185; border: 1px solid rgba(244,63,94,.32); }
@media (max-width: 680px) { .releases { grid-template-columns: 1fr; } }

/* Le bloc .cta a demenage dans components.css : equipe.html l'utilise aussi
   (« On recrute ! ») sans charger home.css. */

/* — Le mot de la team (accueil) — */
.team-word {
  border-radius: var(--radius-lg); padding: clamp(26px, 4.5vw, 44px);
  background: var(--glass); border: 1px solid var(--line);
  text-align: center;
}
.team-word p { color: var(--txt-soft); max-width: 62ch; margin: 12px auto 0; font-size: 1.05rem; line-height: 1.7; }
.team-word .team-sign { margin-top: 16px; font-family: var(--font-display); font-weight: 700; color: var(--txt); }
.team-word .team-sign a { color: var(--txt-mut); font-family: var(--font-body, inherit); font-weight: 500; font-size: .88rem; }
.team-word .team-sign a:hover { color: var(--txt-soft); }

/* — En ce moment : fil d'activité de la communauté (accueil) — */
.pulse-feed { display: grid; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); gap: 10px; }
.pu-item { display: flex; align-items: baseline; gap: 10px; padding: 12px 15px; border-radius: 14px;
  background: var(--glass); border: 1px solid var(--line); font-size: .88rem; color: var(--txt-soft); line-height: 1.45; }
.pu-ico { flex: none; font-size: 1rem; }
.pu-item p { margin: 0; flex: 1; min-width: 0; }
.pu-item a { color: var(--txt); }
.pu-item a:hover { color: var(--accent); }
.pu-user { font-weight: 600; }
.pu-when { flex: none; font-size: .74rem; color: var(--txt-mut); white-space: nowrap; }

/* — Responsive — */
@media (max-width: 980px) {
  .hero { min-height: auto; padding-bottom: 100px; }   /* dégage la place du bouton de nav flottant */
  .hero .wrap { grid-template-columns: 1fr; gap: 20px; text-align: center; padding-top: 20px; }
  .hero-copy { margin-inline: auto; }
  .hero-copy .eyebrow, .hero-actions, .hero-chips { justify-content: center; }
  .hero-actions { margin-bottom: 20px; }

  /* Même principe qu'en haut du fichier, resserré : sur un téléphone le
     synopsis atteignait 470 px (14 lignes), ce qui poussait à lui seul le
     bouton « Lire maintenant » hors de l'écran. */
  .hero-desc { -webkit-line-clamp: 5; height: 8em; }   /* 5 lignes x 1.6 */
  .hero-search { margin-inline: auto; }
  .hero-stats { justify-content: center; }
  .hero-3d { height: 460px; order: -1; }
  .scroll-cue { display: none; }
  .stat-band { grid-template-columns: repeat(2, 1fr); }

  /* Héros allégé sur mobile : on coupe les effets décoratifs coûteux en GPU
     (float, reflet, glow animé/flou 70px) tout en gardant la pile 3D + le carrousel. */
  .deck { animation: none; }
  .deck-card { box-shadow: 0 24px 48px -22px rgba(0,0,0,.85); }
  .deck-card.front .reflect { animation: none; }
  .deck-glow { filter: blur(44px); opacity: .4; animation: none; }
}
@media (max-width: 480px) {
  .deck { width: 250px; height: 370px; }
  .hero-3d { height: 400px; }
}