/* =========================================================
   HOME.CSS — styles propres à la page d'accueil (index.html)
   ========================================================= */

.hero{padding-top:76px; padding-bottom:0; position:relative; overflow:hidden;}
.hero-grid{
  display:grid; grid-template-columns:1.15fr 0.85fr; gap:48px; align-items:center;
  padding-bottom:64px;
}
@media (max-width:900px){ .hero-grid{grid-template-columns:1fr; text-align:left; gap:12px; padding-bottom:40px;} }
.hero h1{
  font-size:clamp(32px, 5.6vw, 68px);
  line-height:1.05;
  margin:18px 0 22px;
  font-weight:700;
}
.hero h1 em{font-style:normal; color:var(--gold-2);}
.hero p.lead{max-width:46ch; font-size:17px; color:var(--cream); opacity:0.82;}
@media (max-width:480px){
  .hero{padding-top:56px;}
  .hero p.lead{font-size:15.5px;}
}

.badge-stage{
  position:relative; display:flex; align-items:center; justify-content:center;
  height:340px;
}
.badge-ring{
  position:absolute; width:300px; height:300px; border-radius:50%;
  border:1px dashed var(--line);
  animation:spin 40s linear infinite;
}
.badge-ring.small{width:230px; height:230px; border-color:rgba(200,155,46,0.35); animation-duration:26s; animation-direction:reverse;}
.badge-core{
  position:relative; width:168px; height:168px; border-radius:50%;
  background:radial-gradient(circle at 32% 28%, var(--ink-3), var(--ink) 70%);
  border:1px solid var(--gold);
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 0 60px rgba(200,155,46,0.18);
  animation:spin 22s linear infinite;
}
.badge-core img{width:74%; height:auto;}
@keyframes spin{ from{transform:rotate(0deg);} to{transform:rotate(360deg);} }
@media (prefers-reduced-motion: reduce){ .badge-ring, .badge-core{animation:none;} }
@media (max-width:900px){ .badge-stage{height:200px;} .badge-ring{width:190px;height:190px;} .badge-ring.small{width:145px;height:145px;} .badge-core{width:110px;height:110px;} }
@media (max-width:480px){ .badge-stage{height:150px;} .badge-ring{width:140px;height:140px;} .badge-ring.small{width:104px;height:104px;} .badge-core{width:82px;height:82px;} }

/* ===== MARQUEE ===== */
.marquee{
  border-top:1px solid var(--line); border-bottom:1px solid var(--line);
  background:var(--ink-2);
  overflow:hidden; white-space:nowrap;
  padding:14px 0;
}
.marquee-track{
  display:inline-block; padding-left:100%;
  animation:scroll 32s linear infinite;
  font-family:'IBM Plex Mono',monospace; font-size:13px; letter-spacing:0.08em;
  color:var(--gold-2); text-transform:uppercase;
}
.marquee-track span{margin:0 26px; color:var(--cream); opacity:0.5;}
@keyframes scroll{ from{transform:translateX(0);} to{transform:translateX(-100%);} }
@media (prefers-reduced-motion: reduce){ .marquee-track{animation:none; padding-left:0;} }
@media (max-width:480px){ .marquee-track{font-size:11px;} .marquee{padding:11px 0;} }

/* ===== UNIVERS ===== */
.univers-grid{
  display:grid; grid-template-columns:1.3fr 1fr; gap:60px; margin-top:34px; align-items:start;
}
@media (max-width:860px){ .univers-grid{grid-template-columns:1fr; gap:28px;} }
.univers-grid h2{font-size:clamp(26px,3.4vw,40px); max-width:14ch;}
.univers-grid p{opacity:0.82; margin-top:18px; max-width:56ch;}
.proverbe{
  border:1px solid var(--line); border-left:3px solid var(--gold);
  padding:26px 28px; border-radius:4px; background:var(--ink-2);
}
.proverbe p{
  font-family:'Bricolage Grotesque',sans-serif; font-size:20px; color:var(--white);
  font-style:normal; margin:0 0 10px; opacity:1; line-height:1.35;
}
.proverbe span{font-family:'IBM Plex Mono',monospace; font-size:12px; color:var(--gold-2); letter-spacing:0.06em;}
@media (max-width:480px){ .proverbe{padding:20px 20px;} .proverbe p{font-size:18px;} }

/* ===== TEASERS ===== */
.teasers{display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin-top:34px;}
@media (max-width:860px){ .teasers{grid-template-columns:1fr;} }
.teaser-card{
  border:1px solid var(--line); border-radius:12px; padding:28px;
  background:var(--ink-2); transition:border-color .2s ease, transform .2s ease;
  display:flex; flex-direction:column; gap:10px;
}
.teaser-card:hover{border-color:var(--gold); transform:translateY(-3px);}
.teaser-card h3{font-size:19px;}
.teaser-card p{font-size:13.5px; opacity:0.7; flex-grow:1;}
.teaser-card .go{
  font-family:'IBM Plex Mono',monospace; font-size:12px; color:var(--gold-2);
}
@media (max-width:480px){ .teaser-card{padding:22px;} }