/* =========================================
   HISTORIQUE.CSS — Styles spécifiques
   ========================================= */

/* ===== ARBRE ===== */
/* Arbre : conteneur + scène relative */
.arbre-container { max-width:1000px; margin:50px auto; }
.arbre-stage { position: relative; }
.arbre-stage > img {
  display:block; width:100%; height:auto;
  border-radius:10px; border:1px solid #000;
}

/* Smartphone : image moins large pour “respirer” */
@media (max-width: 480px) {
  .arbre-container { max-width: 92vw; } /* ↓ réduit un peu */
}

/* Boutons : toujours au-dessus de l'image */
.btnhisto{
  position:absolute; z-index:5;               /* ✅ visible */
  transform: translate(-50%, -50%);
  border:0; padding:8px 12px; font-size:16px; width:60px;
  color:#fff; text-shadow:1px 1px 1px #000; border-radius:10px;
  background-color: rgb(7,185,5);
  background-image: linear-gradient(to top left, rgba(4,115,3,.2), rgba(4,115,3,.2) 30%, rgba(4,115,3,0));
  box-shadow: inset 2px 2px 3px rgba(0,0,0,.6), inset -2px -2px 3px rgba(0,0,0,.6);
  cursor:pointer;
}

/* TES positions d’origine en px (on les garde) */
.btnhisto2002 { top:730px; left:445px; } .btnhisto2003 { top:680px; left:450px; }
.btnhisto2004 { top:630px; left:415px; } .btnhisto2005 { top:580px; left:380px; }
.btnhisto2006 { top:530px; left:350px; } .btnhisto2007 { top:480px; left:320px; }
.btnhisto2008 { top:430px; left:290px; } .btnhisto2009 { top:380px; left:260px; }
.btnhisto2010 { top:630px; left:490px; } .btnhisto2011 { top:580px; left:455px; }
.btnhisto2012 { top:530px; left:455px; } .btnhisto2013 { top:480px; left:455px; }
.btnhisto2014 { top:430px; left:455px; } .btnhisto2015 { top:380px; left:455px; }
.btnhisto2016 { top:330px; left:455px; } .btnhisto2017 { top:280px; left:455px; }
.btnhisto2018 { top:230px; left:455px; } .btnhisto2019 { top:180px; left:455px; }
.btnhisto2020 { top:580px; left:530px; } .btnhisto2021 { top:530px; left:555px; }
.btnhisto2022 { top:480px; left:600px; } .btnhisto2023 { top:435px; left:600px; }
.btnhisto2024 { top:387px; left:600px; }


/* ===== STAR WARS ===== */
.starwars-container{
  position: relative;
  margin: 0 auto 40px;
  width: 100%;
  max-width: 1000px;
  height: clamp(420px, 65vh, 700px);
  background: #000 url('/img/fond-starwars.jpg') center top / cover no-repeat;
  overflow: hidden;
  border-radius: 10px;
  perspective: 700px;               /* effet cône */
}

/* Titre centré, 1 seule ligne, 100% visible au départ */
#starwars-title{
  position:absolute; z-index:3;
  top:50%; left:50%; transform:translate(-50%,-50%);
  margin:0;
  color:#FFE81F;
  font-family:"Pathway Gothic One", sans-serif;
  font-size:clamp(28px, 5vw, 56px);
  letter-spacing:2px;
  white-space:nowrap;
  opacity:1; visibility:visible;
}

/* Crawl : ancré bas + déjà sous le cadre pour partir du BAS */
.starwars-crawl{
  position:absolute; z-index:1;
  left:50%;
  bottom:0;
  width:90%;
  max-width:820px;
  transform-origin:50% 100%;
  transform: translateX(-50%) rotateX(24deg) translateY(60vh); /* démarre bas */
  color:#FFE81F;
  text-align:center;
  line-height:1.6;
  font-size:clamp(16px, 2.3vw, 24px);
  animation:none;
}
.starwars-content p{
  width:85%;
  margin:0 auto;
}

/* Déclenchement au start (ajouté par JS sur le conteneur) */
.starwars-container.is-playing #starwars-title{
  animation: sw-title-out .8s ease 2s forwards;
}
.starwars-container.is-playing .starwars-crawl{
  animation: sw-crawl 50s linear forwards;
}

/* Fondu du titre */
@keyframes sw-title-out{
  to { opacity:0; visibility:hidden; }
}

/* Défilement : du bas (60vh) vers très haut (-200vh) */
@keyframes sw-crawl{
  0%   { transform: translateX(-50%) rotateX(24deg) translateY(60vh); }
  100% { transform: translateX(-50%) rotateX(24deg) translateY(-200vh); }
}

/* Bouton “Relire” (affiché en fin par JS) */
#relancer-text{
  position:absolute; left:50%; bottom:12px; transform:translateX(-50%);
  color:#FFE81F; font-weight:700; cursor:pointer; display:none; z-index:4;
}


/* ===== VIDÉO (si utilisée sur la page) ===== */

.video-space{
  position: relative;
  width: 100%;
  max-width: 800px;
  margin: 50px auto;
  background: #000;
  border: 1px solid #000;
  border-radius: 10px;
  overflow: hidden;
  aspect-ratio: 16/9;
}
.video-space iframe{
  position:absolute; inset:0;
  width:100%; height:100%; border:0; display:block;
}