/* ════════════════════════════════════════════════════════════════
   GABRIEL GHOSTSON — style.css  (version optimisée)
   Ordre : Variables → Reset → Typographie → Layout → Composants
            → Pages → Modaux → Animations → Mobile
════════════════════════════════════════════════════════════════ */

/* ─────────────────────────────────────────────
   1. VARIABLES
───────────────────────────────────────────── */
:root {
  --gold:         #C9A84C;
  --gold-light:   #E8C97A;
  --gold-dark:    #8B6914;
  --crimson:      #6B1A1A;
  --ink:          #0D0A07;
  --parchment:    #F5EDD8;
  --smoke:        #2A2118;
  --sidebar-w:    90px;
  --h-offset-300: -300px;
  --h-offset-50:  -50px;
  /* Couleurs alpha réutilisables — évite de répéter les rgba() partout */
  --gold-05:  rgba(201,168,76,0.05);
  --gold-08:  rgba(201,168,76,0.08);
  --gold-12:  rgba(201,168,76,0.12);
  --gold-15:  rgba(201,168,76,0.15);
  --gold-20:  rgba(201,168,76,0.20);
  --gold-30:  rgba(201,168,76,0.30);
  --gold-35:  rgba(201,168,76,0.35);
  --gold-50:  rgba(201,168,76,0.50);
}

/* ─────────────────────────────────────────────
   2. RESET & BASE
───────────────────────────────────────────── */
* { margin: 0; padding: 0; box-sizing: border-box; }

html { overflow-x: hidden; max-width: 100%; }

body {
  background:  var(--ink);
  color:       var(--parchment);
  font-family: 'IM Fell English', serif;
  overflow-x:  hidden;
  max-width:   100%;
  width:       100%;
}

/* Curseur personnalisé uniquement sur les devices avec pointeur précis */
@media (pointer: fine) {
  body { cursor: url('Cursor.png'), auto; }
}

/* ─────────────────────────────────────────────
   3. ACCESSIBILITÉ
───────────────────────────────────────────── */
/* Masqué visuellement, lisible par moteurs et lecteurs d'écran */
.seo-only {
  position:    absolute;
  width:       1px;
  height:      1px;
  overflow:    hidden;
  clip:        rect(0, 0, 0, 0);
  white-space: nowrap;
}

/* Focus visible pour navigation clavier */
:focus-visible {
  outline:        2px solid var(--gold);
  outline-offset: 3px;
}

/* ─────────────────────────────────────────────
   4. TYPOGRAPHIE GLOBALE
───────────────────────────────────────────── */
.main-title {
  font-family: 'Cinzel Decorative', serif;
  font-size:   3rem;
  text-align:  center;
  color:       var(--gold);
  margin-top:  20px;
}

/* ─────────────────────────────────────────────
   5. SIDEBAR
───────────────────────────────────────────── */
#sidebar {
  position:        fixed;
  left:            0;
  top:             0;
  width:           var(--sidebar-w);
  height:          100vh;
  background:      #0D0A07;
  border-right:    1px solid var(--gold-30);
  display:         flex;
  flex-direction:  column;
  align-items:     center;
  padding:         90px 0 20px;
  z-index:         100;
  gap:             8px;
}

#sidebar::after {
  content:    '';
  position:   absolute;
  right:      0;
  top:        0;
  bottom:     0;
  width:      1px;
  background: linear-gradient(180deg, transparent, var(--gold), var(--crimson), var(--gold), transparent);
}

.sidebar-logo {
  font-family:      'Cinzel', serif;
  font-size:        11px;
  letter-spacing:   3px;
  color:            var(--gold);
  writing-mode:     vertical-rl;
  text-orientation: mixed;
  transform:        rotate(180deg);
  margin-bottom:    20px;
  margin-top:       10px;
  height:           70px;
  overflow:         hidden;
  flex-shrink:      0;
  opacity:          0.7;
  text-transform:   uppercase;
}

/* ─────────────────────────────────────────────
   6. NAV ICONS
───────────────────────────────────────────── */
.nav-icon {
  width:           62px;
  height:          62px;
  border-radius:   50%;
  cursor:          pointer;
  transition:      all 0.3s ease;
  position:        relative;
  display:         flex;
  align-items:     center;
  justify-content: center;
  background:      var(--gold-05);
  border:          1px solid transparent;
}

.nav-icon img {
  width:         54px;
  height:        54px;
  border-radius: 50%;
  object-fit:    cover;
  transition:    all 0.3s ease;
  filter:        brightness(0.85) saturate(0.9);
}

.nav-icon:hover,
.nav-icon.active {
  background:   var(--gold-15);
  border-color: var(--gold-50);
}

.nav-icon:hover {
  transform: scale(1.2);
  z-index:   200;
}

.nav-icon:hover img,
.nav-icon.active img {
  filter: brightness(1.15) saturate(1.1);
}

.nav-tooltip {
  position:       absolute;
  left:           78px;
  top:            50%;
  transform:      translateY(-50%);
  background:     var(--smoke);
  border:         1px solid var(--gold-dark);
  color:          var(--gold-light);
  font-family:    'Cinzel', serif;
  font-size:      10px;
  letter-spacing: 1px;
  padding:        6px 12px;
  white-space:    nowrap;
  pointer-events: none;
  opacity:        0;
  transition:     opacity 0.2s;
  text-transform: uppercase;
}

.nav-icon:hover .nav-tooltip { opacity: 1; }

/* ─────────────────────────────────────────────
   7. SÉLECTEUR DE LANGUE
───────────────────────────────────────────── */
.lang-selector {
  margin-top:     auto;
  display:        flex;
  flex-direction: column;
  gap:            4px;
  padding-bottom: 20px;
}

.lang-btn {
  font-family:    'Cinzel', serif;
  font-size:      10px;
  letter-spacing: 1px;
  color:          var(--gold-50);
  background:     none;
  border:         none;
  cursor:         pointer;
  padding:        4px;
  transition:     color 0.2s;
  text-transform: uppercase;
}

.lang-btn:hover,
.lang-btn.active { color: var(--gold); }

/* ─────────────────────────────────────────────
   8. LAYOUT PRINCIPAL
───────────────────────────────────────────── */
#main {
  margin-left: var(--sidebar-w);
  position:    relative;
  height:      100vh;
  min-height:  100vh;
  overflow-y:  auto;
}

/* ─────────────────────────────────────────────
   9. PAGES — BASE
───────────────────────────────────────────── */
.page {
  display:    none;
  opacity:    0;
  height:     auto;
  min-height: 0;
}

.page.active {
  display:        block;
  opacity:        1;
  position:       static;
  width:          100%;
  pointer-events: auto;
  animation:      pageIn 0.45s ease forwards;
}

/* ─────────────────────────────────────────────
   10. PAGE HOME & AUTHOR — FOND COMMUN
───────────────────────────────────────────── */
#page-home,
#page-author {
  min-height: 100vh;
  max-height: 100svh;
  overflow:   hidden;
  display:    none;
  align-items: stretch;
}

#page-home.active,
#page-author.active { display: flex; }

#page-home {
  position: absolute;
  top:      0;
  left:     0;
  width:    100%;
}

#page-home.active { position: relative; }

.home-bg-book {
  position: absolute;
  inset:    0;
  overflow: hidden;
  z-index:  0;
}

.home-bg-book img {
  width:     calc(100% - var(--sidebar-w));
  height:    auto;
  max-width: 1150px;
  display:   block;
  filter:    saturate(0.9);
  position:  absolute;
  top:       0;
  left:      0;
}

#page-author .home-bg-book {
  left: 0; right: 0; top: 0; bottom: 0;
}

#page-author .home-bg-book img {
  width:     auto;
  height:    100vh;
  max-width: none;
}

#bg-avoir img { top: 0; }

.home-bg-overlay {
  position:   absolute;
  inset:      0;
  z-index:    1;
  background: transparent;
}

/* ─── Fantômes home ─── */
.home-ghost {
  position:       absolute;
  right:          15%;
  top:            50%;
  height:         70%;
  width:          360px;
  object-fit:     cover;
  object-position: center 10%;
  opacity:        0;
  /* Animation GPU : pas de filter sur l'animation pour éviter les repaints */
  filter:         grayscale(30%) blur(0.5px) brightness(1.1);
  will-change:    transform, opacity;
  mask-image:     linear-gradient(to bottom, rgba(0,0,0,0.95) 0%, rgba(0,0,0,0.7) 60%, rgba(0,0,0,0) 100%);
  -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,0.95) 0%, rgba(0,0,0,0.7) 60%, rgba(0,0,0,0) 100%);
  animation:      ghostAppear 28s ease-in-out infinite;
}

/* ─────────────────────────────────────────────
   11. PAGE HEADER & BODY
───────────────────────────────────────────── */
.page-header {
  padding:       20px 70px 40px;
  border-bottom: 1px solid var(--gold-15);
  position:      relative;
  max-width:     1200px;
  margin-left:   auto;
  margin-right:  auto;
}

.page-header::after {
  content:    '';
  position:   absolute;
  bottom:     -1px;
  left:       70px;
  width:      120px;
  height:     2px;
  background: linear-gradient(90deg, var(--crimson), var(--gold));
}

/* Centrage pour certaines pages */
#page-press   .page-header,
#page-contact .page-header,
#page-blog    .page-header,
#page-jeux    .page-header,
#page-conception .page-header {
  text-align:   center;
  max-width:    700px;
  margin-left:  auto;
  margin-right: auto;
}

.page-label {
  font-family:    'Cinzel', serif;
  font-size:      10px;
  letter-spacing: 5px;
  color:          var(--gold);
  text-transform: uppercase;
  margin-bottom:  12px;
  opacity:        0.7;
}

.page-title {
  font-family: 'Cinzel', serif;
  font-size:   clamp(32px, 4vw, 54px);
  font-weight: 600;
  color:       var(--parchment);
  line-height: 1.1;
}

.page-title em { color: var(--gold); font-style: italic; font-weight: 400; }

.page-body {
  padding:      50px 70px;
  background:   var(--ink);
  min-height:   unset;
  max-width:    1200px;
  margin-left:  auto;
  margin-right: auto;
}

/* ─────────────────────────────────────────────
   12. PAGE BOOKS
───────────────────────────────────────────── */
#page-books { padding-top: 0 !important; }
#page-books .page-body { padding: 0; min-height: unset; background: none; }

.critique-tooltip {
  position:        absolute;
  bottom:          calc(100% + 20px);
  left:            50%;
  transform:       translateX(-50%);
  width:           480px;
  background:      #1A1208;
  border:          1px solid var(--gold-dark);
  padding:         40px;
  display:         flex;
  flex-direction:  column;
  align-items:     center;
  justify-content: center;
  opacity:         0;
  pointer-events:  none;
  transition:      opacity 0.4s;
  z-index:         500;
}

.critique-tooltip::before {
  content:        '';
  position:       absolute;
  inset:          4px;
  border:         1px solid var(--gold-30);
  pointer-events: none;
}

.critique-tooltip .tt-source {
  display:        block;
  font-family:    'Cinzel', serif;
  font-size:      9px;
  font-style:     normal;
  letter-spacing: 2px;
  color:          var(--gold);
  opacity:        0.7;
  margin-top:     10px;
  text-transform: uppercase;
  position:       relative;
  z-index:        2;
}

/* ─────────────────────────────────────────────
   13. PAGE UNIVERS
───────────────────────────────────────────── */
#page-univers,
#page-univers .page-body { min-height: unset; height: auto; }

.univers-rond {
  width:         150px;
  height:        150px;
  border-radius: 50%;
  border:        2px solid var(--gold-dark);
  background:    var(--gold-05);
  cursor:        pointer;
  flex-shrink:   0;
  animation:     scintille 3s infinite;
  transition:    background 0.3s, transform 0.3s;
}

.univers-rond:hover {
  background:   var(--gold-15);
  transform:    scale(1.06);
  animation:    none;
  border-color: #FFB6C1;
  box-shadow:   0 0 20px rgba(255,182,193,0.5);
}

.univers-tooltip {
  position:       absolute;
  bottom:         calc(100% + 8px);
  left:           50%;
  transform:      translateX(-50%);
  font-family:    'Cinzel', serif;
  font-size:      9px;
  letter-spacing: 2px;
  color:          var(--gold);
  text-transform: uppercase;
  white-space:    nowrap;
  background:     #1A1208;
  border:         1px solid var(--gold-dark);
  padding:        6px 12px;
  opacity:        0;
  pointer-events: none;
  transition:     opacity 0.3s;
}

div:hover > .univers-tooltip,
.univers-rond:hover > .univers-tooltip { opacity: 1; }

/* ─────────────────────────────────────────────
   14. FRISE CHRONOLOGIQUE
───────────────────────────────────────────── */
.tl-wrap {
  background:  var(--ink);
  color:       var(--parchment);
  font-family: 'IM Fell English', serif;
  padding:     40px 20px 60px;
}

.tl-title {
  font-family:    'Cinzel', serif;
  font-size:      14px;
  letter-spacing: 4px;
  text-transform: uppercase;
  color:          var(--gold);
  text-align:     center;
  margin-bottom:  8px;
}

.tl-subtitle {
  font-family:   'IM Fell English', serif;
  font-size:     18px;
  text-align:    center;
  color:         var(--gold-light);
  margin-bottom: 48px;
}

.tl-legend {
  display:         flex;
  justify-content: center;
  gap:             32px;
  margin-bottom:   40px;
}

.legend-item {
  display:        flex;
  align-items:    center;
  gap:            8px;
  font-family:    'Cinzel', serif;
  font-size:      11px;
  letter-spacing: 2px;
  color:          rgba(245,237,216,0.6);
}

.legend-dot {
  width:         11px;
  height:        11px;
  border-radius: 50%;
}

.legend-dot.gabriel  { background: #9BC4CB; }
.legend-dot.penelope { background: #E8A0A8; }

.timeline {
  position:  relative;
  max-width: 700px;
  margin:    0 auto;
}

.axis-line {
  position:   absolute;
  left:       50%;
  top:        0;
  bottom:     0;
  width:      1px;
  background: linear-gradient(180deg, transparent, var(--gold-30) 10%, var(--gold-30) 90%, transparent);
  transform:  translateX(-50%);
}

.stop {
  display:               grid;
  grid-template-columns: 1fr 80px 1fr;
  align-items:           center;
  margin-bottom:         44px;
  position:              relative;
}

.stop-left  { text-align: right; padding-right: 24px; }
.stop-right { text-align: left;  padding-left:  24px; }

.stop-center {
  display:        flex;
  flex-direction: column;
  align-items:    center;
  gap:            2px;
  position:       relative;
  z-index:        2000;
}

.stop-city {
  font-family:    'Cinzel', serif;
  font-size:      12px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color:          rgba(245,237,216,0.9);
  margin-bottom:  2px;
  text-align:     center;
}

.stop-year {
  font-family: 'Cinzel', serif;
  font-size:   19px;
  font-weight: 600;
  color:       var(--gold);
  line-height: 1;
}

.stop-num {
  font-family:    'Cinzel', serif;
  font-size:      10px;
  letter-spacing: 2px;
  color:          var(--gold-50);
}

.stop-dot {
  width:          14px;
  height:         14px;
  border-radius:  50%;
  border:         1px solid var(--gold-50);
  background:     var(--ink);
  margin-top:     4px;
  position:       relative;
  z-index:        2001;
  pointer-events: all;
  transition:     transform 0.25s, border-color 0.25s, box-shadow 0.25s;
  will-change:    transform;
}

@media (pointer: fine) {
  .stop-dot { cursor: url('Cursor.png'), pointer; }
}

.stop-dot::after {
  content:       '';
  position:      absolute;
  inset:         2px;
  border-radius: 50%;
  background:    var(--gold);
  opacity:       0.7;
  transition:    background 0.25s, opacity 0.25s;
}

.stop-dot:hover {
  transform:    scale(2.2);
  border-color: var(--gold-light);
  box-shadow:   0 0 12px rgba(232,201,122,0.5);
}

.stop-dot:hover::after { background: var(--gold-light); opacity: 1; }

.stop-gabriel  { font-size: 16px; color: #9BC4CB; line-height: 1.7; font-style: normal; }
.stop-penelope { font-size: 16px; color: #E8A0A8; line-height: 1.7; font-style: normal; }

.endpoints {
  display:         flex;
  justify-content: space-between;
  max-width:       700px;
  margin:          0 auto 32px;
  padding:         16px 0;
  border-top:      1px solid var(--gold-15);
  border-bottom:   1px solid var(--gold-15);
}

.endpoint       { text-align: center; flex: 1; }
.endpoint-year  { font-family: 'Cinzel', serif; font-size: 24px; font-weight: 600; }
.endpoint-label { font-family: 'Cinzel', serif; font-size: 10px; letter-spacing: 3px; text-transform: uppercase; color: rgba(245,237,216,0.4); margin-top: 4px; }
.endpoint-desc  { font-size: 14px; font-style: normal; color: var(--gold-light); margin-top: 6px; line-height: 1.6; }

.endpoint.start .endpoint-year { color: var(--crimson); }
.endpoint.end   .endpoint-year { color: var(--gold); }

.mid-info-num { font-family: 'Cinzel', serif; font-size: 12px; letter-spacing: 2px; color: var(--gold); margin-top: 8px; }
.mid-info-txt { font-size: 13px; color: var(--gold); margin-top: 6px; }

.tagline {
  text-align:  center;
  font-size:   18px;
  font-style:  normal;
  color:       var(--gold-light);
  max-width:   500px;
  margin:      0 auto;
  line-height: 1.8;
}

.penelope-float {
  display: block;
  margin:  0 auto 32px;
  width:   200px;
  opacity: 0.9;
  filter:  drop-shadow(0 8px 24px rgba(201,168,76,0.25));
}

/* ─────────────────────────────────────────────
   15. PAGE BLOG / CONCEPTION / JEUX
───────────────────────────────────────────── */
.blog-grid {
  display:               grid;
  grid-template-columns: repeat(3, 1fr);
  gap:                   28px;
}

.blog-card {
  background: var(--gold-05);
  border:     1px solid var(--gold-12);
  padding:    28px;
  transition: all 0.3s ease;
  cursor:     pointer;
}

.blog-card:hover {
  border-color: var(--gold-30);
  transform:    translateY(-4px);
  background:   var(--gold-08);
}

.blog-date {
  font-family:    'Cinzel', serif;
  font-size:      16px;
  letter-spacing: 3px;
  color:          #9BC4CB;
  text-transform: uppercase;
  margin-bottom:  12px;
}

.blog-card h3 {
  font-family:   'Cormorant Garamond', serif;
  font-size:     20px;
  color:         var(--parchment);
  margin-bottom: 12px;
  line-height:   1.3;
}

.blog-card p {
  font-family: 'Cormorant Garamond', serif;
  font-size:   14px;
  line-height: 1.7;
  color:       rgba(245,237,216,0.6);
}

/* ─────────────────────────────────────────────
   16. PAGE CONTACT
───────────────────────────────────────────── */
#page-contact,
#page-contact .page-body { min-height: unset; height: auto; }

.contact-card {
  background: var(--gold-05);
  border:     1px solid var(--gold-15);
  padding:    36px;
}

.contact-card h3 {
  font-family:    'Cinzel', serif;
  font-size:      14px;
  letter-spacing: 3px;
  color:          var(--gold);
  text-transform: uppercase;
  margin-bottom:  20px;
}

.social-link {
  display:         flex;
  align-items:     center;
  gap:             14px;
  padding:         14px 0;
  border-bottom:   1px solid rgba(201,168,76,0.1);
  text-decoration: none;
  transition:      all 0.2s ease;
  color:           var(--parchment);
}

.social-link:hover { color: var(--gold); padding-left: 8px; }
.social-link .icon  { font-size: 22px; }

.social-link .label {
  font-family:    'Cinzel', serif;
  font-size:      11px;
  letter-spacing: 2px;
  text-transform: uppercase;
}

.floating-book {
  display:         flex;
  justify-content: center;
  align-items:     center;
  position:        relative;
}

behold-widget { --behold-columns: 3; }

.instagram-wrapper {
  display:         flex;
  justify-content: center;
}

/* ─────────────────────────────────────────────
   17. PAGE PRESSE
───────────────────────────────────────────── */
#page-press,
#page-press .page-body { min-height: unset; height: auto; }

.press-grid { display: grid; gap: 24px; }

.press-item {
  background:  var(--gold-05);
  border-left: 3px solid var(--crimson);
  padding:     28px 32px;
  position:    relative;
  transition:  all 0.3s ease;
}

.press-item:hover {
  border-left-color: var(--gold);
  background:        var(--gold-08);
}

.press-item blockquote {
  font-family:   'Cormorant Garamond', serif;
  font-size:     19px;
  font-style:    italic;
  line-height:   1.7;
  color:         var(--parchment);
  margin-bottom: 14px;
  position:      relative;
  z-index:       1;
  padding-left:  20px;
}

.press-source {
  font-family:    'Cinzel', serif;
  font-size:      10px;
  letter-spacing: 3px;
  color:          var(--gold);
  text-transform: uppercase;
  padding-left:   20px;
}

.ghost-half { width: 8px; overflow: hidden; }

.ornament {
  text-align:     center;
  color:          var(--gold);
  font-size:      24px;
  opacity:        0.4;
  margin:         40px 0;
  letter-spacing: 12px;
}

/* Étoiles de presse */
.press-ghost {
  width:      50px;
  height:     50px;
  object-fit: contain;
  flex-shrink: 0;
  opacity:    0.5;
  filter:     invert(1) sepia(1) saturate(2) hue-rotate(5deg);
}

.press-stars {
  display:    flex;
  gap:        4px;
  margin:     8px 0 12px 20px;
}

/* CTA Acheter — composant réutilisable */
.cta-acheter {
  display:        flex;
  flex-direction: column;
  gap:            8px;
  align-items:    center;
  width:          100%;
  margin-top:     20px;
}

/* Grille stories réseaux sociaux */
.stories-carousel-wrapper {
  position:   relative;
  width:      100%;
  max-width:  900px;
  margin:     0 auto;
  overflow:   hidden;
}

.story-slide { display: none; animation: fadeEffect 1s; }

.story-slide.active {
  display:               grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap:                   24px;
}

.story-image-circle {
  width:         55px;
  height:        55px;
  object-fit:    cover;
  border-radius: 50%;
  border:        1.5px solid var(--gold);
  flex-shrink:   0;
  box-shadow:    0 0 8px var(--gold-20);
}

/* ─────────────────────────────────────────────
   18. VIDÉOS PERSONNAGES (modal conception)
───────────────────────────────────────────── */
.conteneur-personnage {
  transition: transform 0.3s ease, width 0.3s ease, opacity 0.3s ease !important;
}

.conteneur-personnage.video-active {
  transform: translate(-50%, -50%) scale(0.4) !important;
  z-index:   2000 !important;
}

/* ─────────────────────────────────────────────
   19. MODAUX — BASE GLOBALE
───────────────────────────────────────────── */
.modal-overlay {
  display:         none;
  position:        fixed;
  inset:           0;
  background:      rgba(0,0,0,0.85);
  z-index:         1000;
  align-items:     center;
  justify-content: center;
  overflow-y:      auto;
  padding:         20px;
  box-sizing:      border-box;
}

.modal-base,
#modal-blog-tropes {
  display:         none;
  position:        fixed;
  inset:           0;
  background:      rgba(0,0,0,0.9);
  z-index:         1000;
  align-items:     center;
  justify-content: center;
  padding:         10px;
  box-sizing:      border-box;
}

.modal-base.open,
#modal-blog-tropes.open { display: flex; }

.modal-inner {
  background:   #1A1208;
  border:       1px solid var(--gold);
  padding:      30px;
  position:     relative;
  max-height:   85vh;
  width:        100%;
  max-width:    600px;
  overflow-y:   auto;
  margin-left:  0 !important;
  margin-right: 0 !important;
}

.modal-wide { max-width: 900px; }

.modal-label {
  font-family:    'Cinzel', serif;
  font-size:      10px;
  letter-spacing: 3px;
  color:          var(--gold);
  margin-bottom:  16px;
}

.modal-title {
  font-family:   'Cinzel', serif;
  font-size:     22px;
  color:         var(--parchment);
  margin-bottom: 24px;
}

/* Bouton retour commun */
.btn-retour {
  display:        block;
  width:          100%;
  margin-top:     24px;
  font-family:    'Cinzel', serif;
  font-size:      9px;
  letter-spacing: 2px;
  text-transform: uppercase;
  padding:        10px;
  border:         1px solid var(--gold-30);
  color:          var(--gold);
  background:     var(--gold-05);
  cursor:         pointer;
  transition:     background 0.3s;
}

.btn-retour:hover { background: var(--gold-15); }

/* Boutons année sur la carte */
.btn-annee {
  font-family:     'Cinzel Decorative', serif;
  font-size:       13px;
  color:           var(--gold);
  width:           52px;
  height:          52px;
  border:          2px solid var(--gold-30);
  border-radius:   50%;
  display:         flex;
  align-items:     center;
  justify-content: center;
  background:      var(--gold-05);
  transition:      background 0.3s;
}

.btn-ville {
  font-family:    'Cinzel', serif;
  font-size:      7px;
  letter-spacing: 1px;
  color:          var(--gold-dark);
}

/* Encarts sur la carte de Londres */
.encart-box {
  position:        relative;
  background:      rgba(26,15,0,0.85);
  border:          1px solid var(--gold);
  padding:         4px 8px;
  width:           130px;
  height:          32px;
  display:         flex;
  align-items:     center;
  justify-content: center;
  cursor:          pointer;
}

.encart-label {
  font-family:    'Cinzel Decorative', serif;
  font-size:      8px;
  letter-spacing: 2px;
  color:          #FFFFFF;
  text-align:     center;
}

.encart-popup {
  display:    none;
  position:   absolute;
  top:        36px;
  left:       0;
  width:      150px;
  background: #1a0f00;
  border:     1px solid var(--gold);
  padding:    6px;
  z-index:    20;
}

.encart-popup-title {
  font-family:    'Cinzel', serif;
  font-size:      7px;
  letter-spacing: 2px;
  color:          var(--gold-dark);
  text-align:     center;
  margin-bottom:  4px;
}

.encart-popup-img {
  width:          100%;
  height:         150px;
  object-fit:     cover;
  object-position: center 20%;
  display:        block;
}

.encart-popup-caption {
  font-family: 'Cormorant Garamond', serif;
  font-size:   8px;
  font-style:  italic;
  color:       var(--gold);
  text-align:  center;
  margin-top:  4px;
}

.pin-dot {
  width:         10px;
  height:        10px;
  border-radius: 50%;
  background:    #8B1A1A;
  border:        1.5px solid var(--gold);
  flex-shrink:   0;
}

/* ─── Timeline Tobias ─── */
.tob-event {
  display:               grid;
  grid-template-columns: 1fr 28px 1fr;
  align-items:           flex-start;
  margin-bottom:         36px;
  opacity:               0;
  transform:             translateY(12px);
  transition:            opacity 0.5s ease, transform 0.5s ease;
  will-change:           opacity, transform;
}

.tob-event.visible { opacity: 1; transform: translateY(0); }
.tob-left  { text-align: right; padding-right: 16px; }
.tob-right { text-align: left;  padding-left:  16px; }

.tob-dot-wrap { display: flex; justify-content: center; padding-top: 4px; }

.tob-dot {
  width:         11px;
  height:        11px;
  border-radius: 50%;
  flex-shrink:   0;
  transition:    transform 0.3s, box-shadow 0.3s;
  cursor:        default;
  will-change:   transform;
}

.tob-dot:hover { transform: scale(1.6); box-shadow: 0 0 10px var(--gold-50); }

.tob-year {
  font-family:   'Cinzel', serif;
  font-size:     15px;
  font-weight:   600;
  color:         var(--gold);
  margin-bottom: 4px;
}

.tob-text {
  font-family: 'Cormorant Garamond', serif;
  font-size:   13px;
  line-height: 1.6;
  color:       var(--parchment);
  opacity:     0.85;
}

/* Bouton amour — nav personnages */
.love-btn {
  font-family:    'Cinzel', serif;
  font-size:      9px;
  letter-spacing: 2px;
  text-transform: uppercase;
  padding:        6px 0;
  border:         1px solid var(--gold-30);
  color:          var(--gold);
  background:     var(--gold-05);
  cursor:         pointer;
  transition:     background 0.3s;
  width:          110px;
  text-align:     center;
  position:       relative;
}

.love-btn.active { background: var(--gold-20); }

/* Pins carte SVG */
.pin-city {
  font-family:    'Cinzel Decorative', serif;
  font-size:      9px;
  letter-spacing: 2px;
  fill:           #FFFFFF;
}

.pin-year {
  font-family: 'Cormorant Garamond', serif;
  font-size:   11px;
  font-style:  italic;
  fill:        #FFFFFF;
  opacity:     0.8;
}

.pin-frame {
  fill:         rgba(26,15,0,0.82);
  stroke:       var(--gold);
  stroke-width: 0.8;
}

.pin-londres { cursor: pointer; }
.pin-londres:hover .pin-frame { stroke: var(--gold-light); stroke-width: 1.5; }

/* ─────────────────────────────────────────────
   20. ANIMATIONS
───────────────────────────────────────────── */
@keyframes pageIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes bookFloat {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-12px); }
}

@keyframes scintille {
  0%, 100% {
    border-color: var(--gold-dark);
    background:   var(--gold-05);
    box-shadow:   none;
  }
  50% {
    border-color: var(--gold-light);
    background:   var(--gold-20);
    box-shadow:
      0 0 35px rgba(232,201,122,0.7),
      0 0 70px var(--gold-30),
      inset 0 0 20px var(--gold-15);
  }
}

@keyframes pulse-timeline {
  0%, 100% { box-shadow: 0 0 25px rgba(232,201,122,0.8), 0 0 50px rgba(232,201,122,0.4); }
  50%       { box-shadow: 0 0 45px rgba(232,201,122,1),   0 0 80px rgba(232,201,122,0.7); }
}

/* Animations fantômes — uniquement opacity + transform (pas de filter) pour GPU */
@keyframes ghostAppear {
  0%    { opacity: 0;    transform: translateY(-48%); }
  5%    { opacity: 0.22; transform: translateY(-50%); }
  12%   { opacity: 0.22; transform: translateY(-52%); }
  14%   { opacity: 0;    transform: translateY(-50%); }
  14.1% { opacity: 0; }
  100%  { opacity: 0; }
}

@keyframes ghostAppearMobile {
  0%    { opacity: 0;    transform: translateY(-48%); }
  5%    { opacity: 0.45; transform: translateY(-50%); }
  12%   { opacity: 0.45; transform: translateY(-52%); }
  14%   { opacity: 0;    transform: translateY(-50%); }
  14.1% { opacity: 0; }
  100%  { opacity: 0; }
}

/* Marie-Laure — animation opacity+transform uniquement (pas de filter animé) */
@keyframes ghostVaporous {
  0%, 100% { transform: translateY(0px);   opacity: 0.05; }
  50%       { transform: translateY(-20px); opacity: 0.50; }
}

@keyframes loveFloat {
  0%, 100% { transform: translateY(0px); }
  50%       { transform: translateY(-14px); }
}

@keyframes fadeEffect {
  from { opacity: 0; }
  to   { opacity: 1; }
}

#ghost-mariel {
  animation:          ghostVaporous 10s ease-in-out infinite;
  height:             75%;
  width:              auto;
  object-fit:         contain;
  /* Filter statique (non animé) = acceptable */
  filter:             grayscale(100%) brightness(1.2);
  will-change:        transform, opacity;
  mask-image:         linear-gradient(to bottom, rgba(0,0,0,0.9) 0%, rgba(0,0,0,0.6) 60%, rgba(0,0,0,0) 100%);
  -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,0.9) 0%, rgba(0,0,0,0.6) 60%, rgba(0,0,0,0) 100%);
}

/* Slideshow tropes */
#tropes-slideshow {
  flex-shrink:     0;
  max-height:      40vh;
  overflow:        hidden;
  position:        sticky;
  top:             0;
  display:         flex;
  flex-direction:  column;
  align-items:     center;
  width:           calc(40vh * 0.75);
}

/* ─────────────────────────────────────────────
   21. MOBILE (≤ 1080px)
   Toutes les media queries regroupées ici
───────────────────────────────────────────── */
@media only screen and (max-width: 1080px) {

  /* ─── Variables ─── */
  :root {
    --sidebar-w:    0px;
    --h-offset-300: 0px;
    --h-offset-50:  30px;
  }

  html { font-size: 16px; }
  body { overflow-x: hidden; max-width: 100vw; }

  /* ─── Sidebar → barre basse ─── */
  #sidebar {
    width:           100%;
    height:          64px !important;
    top:             auto;
    bottom:          0;
    left:            0;
    flex-direction:  row;
    flex-wrap:       wrap !important;
    align-content:   center !important;
    align-items:     center;
    justify-content: space-around;
    padding:         4px 2px !important;
    border-right:    none;
    border-top:      1px solid var(--gold-30);
    gap:             0;
  }

  #sidebar::after {
    top:        0;
    bottom:     auto;
    left:       0;
    right:      0;
    width:      100%;
    height:     1px;
    background: linear-gradient(90deg, transparent, var(--gold), var(--crimson), var(--gold), transparent);
  }

  .sidebar-logo  { display: none; }
  .lang-selector { flex-direction: row; margin-top: 0; padding-bottom: 0; }
  .nav-tooltip   { display: none; }
  .nav-icon      { width: 42px; height: 42px; }
  .nav-icon img  { width: 36px; height: 36px; }

  #site-logo img { height: 70px !important; width: auto !important; }

  #top-bar {
    top:          auto !important;
    bottom:       60px !important;
    left:         0 !important;
    border-top:   1px solid var(--gold-35);
    border-bottom: none !important;
  }

  /* ─── Main ─── */
  #main {
    margin-left:    0 !important;
    padding-top:    0 !important;
    padding-bottom: 68px !important;
    max-width:      100vw;
    overflow-x:     hidden;
  }

  /* ─── Critique tooltip (books) ─── */
  .critique-tooltip {
    position:  fixed !important;
    top:       50% !important;
    left:      50% !important;
    transform: translate(-50%, -50%) !important;
    bottom:    auto !important;
    width:     90vw !important;
    max-width: 360px !important;
    z-index:   999 !important;
  }

  /* ─── Pages plein-écran ─── */
  #page-home,
  #page-author {
    margin-top: 0 !important;
    max-height: 100svh !important;
    min-height: 100svh !important;
    width:      100vw !important;
    max-width:  100vw !important;
    overflow:   hidden !important;
    top:        0 !important;
  }

  #page-home  .home-bg-book,
  #page-author .home-bg-book {
    position: absolute;
    top:      0;
    left:     0;
    width:    100vw;
    height:   100svh;
    overflow: hidden;
  }

  #page-home  .home-bg-book img,
  #page-author .home-bg-book img {
    position:   absolute;
    width:      145vw !important;
    height:     262svh !important;
    max-width:  175vw !important;
    left:       -80px !important;
    top:        -90svh !important;
    object-fit: contain !important;
    transform:  none !important;
  }

  /* ─── Fantômes mobile ─── */
  .home-ghost {
    width:     220px;
    right:     5%;
    animation: ghostAppearMobile 28s ease-in-out infinite;
  }

  #ghost-mariel { height: 75%; }

  /* ─── Espacement pages secondaires ─── */
  #page-blog,
  #page-jeux,
  #page-conception,
  #page-univers,
  #page-contact,
  #page-press,
  #page-books { padding-top: 50px !important; }

  /* ─── Headers & Body ─── */
  .page-header { padding: 16px 16px 20px; max-width: 100%; }
  .page-header::after { left: 16px; }
  .page-body   { padding: 16px; max-width: 100%; }

  /* ─── Typographie ─── */
  .page-label { font-size: 10px; letter-spacing: 4px; }
  .page-title { font-size: 28px; }

  /* ─── Blog / Jeux / Conception ─── */
  .blog-grid    { grid-template-columns: 1fr; gap: 16px; }
  .blog-card    { padding: 24px; }
  .blog-date    { font-size: 13px; letter-spacing: 3px; }
  .blog-card h3 { font-size: 18px; }
  .blog-card p  { font-size: 14px; }

  /* ─── Presse ─── */
  .press-item blockquote { font-size: 16px; }
  .press-source          { font-size: 12px; letter-spacing: 2px; }

  /* ─── Stories / Réseaux ─── */
  .story-slide.active {
    grid-template-columns: 1fr !important;
    gap: 16px;
  }

  .story-image-circle { width: 48px; height: 48px; }

  /* ─── Tropes slideshow caché ─── */
  #tropes-slideshow { display: none !important; }

  /* ─── Univers ─── */
  .univers-rond,
  #page-univers div[style*="pulse-timeline"] {
    width:  70px !important;
    height: 70px !important;
  }

  #page-univers .page-body > div > div {
    flex-wrap:       wrap !important;
    justify-content: center !important;
    gap:             10px !important;
  }

  /* ─── Contact ─── */
  .floating-book { width: 140px; flex-shrink: 0; }

  .floating-book img {
    width:      140px !important;
    height:     auto !important;
    max-width:  none !important;
    max-height: none !important;
    display:    block;
    filter:
      drop-shadow(0 18px 30px rgba(0,0,0,0.75))
      drop-shadow(0 0 12px var(--gold-15));
    animation: bookFloat 8s ease-in-out infinite;
  }

  .contact-card         { padding: 16px; }
  .contact-card h3      { font-size: 12px; letter-spacing: 3px; margin-bottom: 12px; }
  .social-link          { padding: 10px 0; }
  .social-link .label   { font-size: 12px; letter-spacing: 2px; }
  .social-link .icon    { font-size: 20px; }

  /* ─── Feed Instagram ─── */
  #behold-feed  { max-width: 100% !important; padding: 0 8px; }
  behold-widget { --behold-columns: 2 !important; }

  /* ─── Encarts carte ─── */
  .encart-label { color: #FFFFFF !important; }

  /* ─── Pins carte ─── */
  .pin-city { font-size: 8px; letter-spacing: 0.5px; }
  .pin-year { font-size: 9px; }

  /* ─── Livres ─── */
  #page-books > div[style] { margin-top: 10px !important; }
  #page-books p             { font-size: 14px !important; }
  #page-books > div         { padding: 10px !important; }

  /* ─── Modaux ─── */
  .modal-inner {
    padding:    16px !important;
    width:      100% !important;
    max-width:  100% !important;
    max-height: 90vh !important;
    overflow-y: auto !important;
    box-sizing: border-box !important;
  }

  /* ─── Toiles étoiles cachées ─── */
  #tome3-stars,
  #tome4-stars,
  #tome5-stars { display: none; }

  /* ─── Textes modaux ─── */
  #modal-t1 p, #modal-t2 p, #modal-t3 p,
  #modal-t4 p, #modal-t5 p { font-size: 16px; line-height: 1.8; }

  #modal-blog-conception h2,
  #modal-blog-tropes h2,
  #modal-blog-love h2,
  #modal-blog-newsletter h2,
  #modal-blog-ambiance h2 { font-size: 20px; }

  #modal-blog-tropes p,
  #modal-blog-love p { font-size: 18px; }

  #modal-blog-newsletter li a  { font-size: 14px; }
  #modal-blog-newsletter input { font-size: 16px; padding: 10px; }

  /* ─── Boutons fermeture modaux ─── */
  #modal-t1 button, #modal-t2 button, #modal-t3 button,
  #modal-t4 button, #modal-t5 button,
  #modal-gabriel button, #modal-petunia button, #modal-tobias button,
  #modal-nigel button, #modal-jeanclaude button,
  #modal-blog-conception button, #modal-blog-tropes button,
  #modal-blog-love button, #modal-blog-newsletter button,
  #modal-blog-quiz button, #modal-blog-ambiance button {
    font-size: 12px;
    padding:   10px;
  }

  /* ─── Quiz ─── */
  #modal-blog-quiz h2              { font-size: 16px; }
  #modal-blog-quiz #quiz-question  { font-size: 15px; }
  #modal-blog-quiz #quiz-step      { font-size: 10px; }
  #modal-blog-quiz #quiz-result-name   { font-size: 18px; }
  #modal-blog-quiz #quiz-result-nature { font-size: 10px; }
  #modal-blog-quiz #quiz-result-desc   { font-size: 14px; }

  /* ─── Grilles modaux ─── */
  #modal-blog-conception > div > div[style*="grid"] {
    grid-template-columns: repeat(2, 1fr);
    overflow-x: hidden;
    width: 100%;
  }

  #modal-blog-ambiance > div > div[style*="grid"] {
    grid-template-columns: repeat(3, 1fr);
  }

  /* ─── Frise ─── */
  .stop { grid-template-columns: 1fr 60px 1fr; }
  .stop-gabriel, .stop-penelope { font-size: 13px; }
  .stop-city  { font-size: 10px; letter-spacing: 1px; }
  .penelope-float { width: 140px; }

  /* ─── Ghost Marie-Laure ─── */
  #ghost-mariel-container {
    justify-content: center !important;
    padding-right:   0 !important;
  }

  #ghost-mariel { height: 55% !important; }

  .encart-london { transform: none; }

  #encart-penelope { top: 3% !important; left: 2% !important; }
  #encart-british  { top: 25% !important; left: auto !important; right: 2% !important; }
  #encart-blandine { top: 38% !important; left: 2% !important; }
  #encart-colony   { top: 45% !important; bottom: auto !important; left: 35% !important; right: auto !important; transform: none !important; }
  #encart-mayfair  { top: 52% !important; bottom: auto !important; left: 2% !important; }

} /* fin @media (max-width: 1080px) */