/* ============================================================
   Mini Labo — Hybride Cinématographique
   Feuille de style du rendu serveur (Blade). Traduction fidèle
   du design d'origine : base sombre premium (bleu nuit) qui sert
   d'écrin aux photos très colorées, ponctuée de sections claires.
   ============================================================ */

:root {
  --base: #080c1a;          /* bleu nuit / presque noir */
  --base-alt: #0b1226;      /* section sombre alternative */
  --panel: #0f172e;         /* cartes sombres */
  --panel-hi: #141d3a;
  --border: rgba(255, 255, 255, 0.08);
  --cyan: #2ec5ec;          /* accent principal */
  --cyan-deep: #1897bb;
  --cyan-ink: #12768f;      /* cyan foncé pour le texte sur fond clair */
  --lime: #b8d34a;          /* accent secondaire */
  --green: #4faa3c;
  --orange: #f4a51e;        /* accent ponctuel */
  --navy: #2c3454;
  --pale-blue: #c3d3f0;     /* texte bleu pâle */
  --light: #f5f8fd;         /* section claire */
  --ink-soft: #4a5578;      /* texte doux sur fond clair */
  --font-display: 'Fredoka', sans-serif;
  --font-body: 'Quicksand', sans-serif;
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
}

/* ---------- Base ---------- */
*,
*::before,
*::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body, h1, h2, h3, p, form { margin: 0; }

body {
  min-height: 100vh;
  background: var(--base);
  color: #ffffff;
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img { display: block; max-width: 100%; }

/* Une photo à déclinaisons (partials/photo.blade.php) enveloppe sa balise
   dans un <picture>, qui s'intercale entre le cadre et l'image. Sans cette
   règle, le cadre imposerait sa taille au <picture> et l'image, en hauteur
   « 100 % » d'une boîte de hauteur automatique, retrouverait sa taille
   d'origine. */
.photo { display: block; height: 100%; width: 100%; }

a { color: inherit; text-decoration: none; }

button, input, textarea { font: inherit; margin: 0; }

.container {
  width: 100%;
  max-width: 72rem;
  margin-left: auto;
  margin-right: auto;
  padding-left: 1.25rem;
  padding-right: 1.25rem;
}
.container--narrow { max-width: 48rem; }

.text-cyan { color: var(--cyan); }

/* ---------- Icônes ---------- */
.icon { flex-shrink: 0; }
.icon--12 { width: 0.75rem; height: 0.75rem; }
.icon--16 { width: 1rem; height: 1rem; }
.icon--20 { width: 1.25rem; height: 1.25rem; }
.icon--24 { width: 1.5rem; height: 1.5rem; }
.icon--32 { width: 2rem; height: 2rem; }
.icon--fill { fill: currentColor; }
.icon--nudge { margin-left: 0.125rem; }

/* ---------- Surtitres ---------- */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.75rem;
  line-height: 1rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}
.eyebrow--cyan { color: var(--cyan); }
.eyebrow--orange { color: var(--orange); }
.eyebrow--lime { color: var(--lime); }
.eyebrow--green { color: var(--green); }

/* ---------- Animations d'entrée (héros) ---------- */
@keyframes fade-up {
  from { opacity: 0; transform: translateY(24px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes scale-in {
  from { opacity: 0; transform: scale(0.96); }
  to { opacity: 1; transform: scale(1); }
}
.anim { animation: fade-up 0.5s ease-out both; }
.anim--d1 { animation-delay: 0.12s; }
.anim--d2 { animation-delay: 0.24s; }
.anim--d3 { animation-delay: 0.36s; }
.anim--photo { animation: scale-in 0.7s ease-out 0.2s both; }

/* Révélations au défilement — amélioration progressive :
   sans JavaScript (pas de classe .js), tout reste visible. */
html.js [data-reveal] {
  opacity: 0;
  transform: translateY(var(--reveal-y, 24px));
  transition:
    opacity var(--reveal-duration, 0.45s) ease-out,
    transform var(--reveal-duration, 0.45s) ease-out;
  transition-delay: var(--reveal-delay, 0s);
}
html.js [data-reveal].is-revealed {
  opacity: 1;
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  .anim, .anim--photo { animation: none; }
  html.js [data-reveal] { opacity: 1; transform: none; transition: none; }
}

/* ============ NAV ============ */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  width: 100%;
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  background: rgba(8, 12, 26, 0.72);
  border-bottom: 1px solid var(--border);
}
.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 1rem;
  padding-bottom: 1rem;
}
.site-header__brand { display: flex; align-items: center; }
.site-header__logo { height: 2.75rem; width: auto; }

.site-nav { display: none; align-items: center; gap: 2rem; }
.site-nav__link {
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.7);
  transition: color 0.15s var(--ease);
}
.site-nav__link:hover { color: #ffffff; }
.site-nav__cta {
  border-radius: 9999px;
  padding: 0.625rem 1.25rem;
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-weight: 700;
  background: var(--cyan);
  color: var(--navy);
  box-shadow: 0 4px 0 var(--cyan-deep);
  transition: all 0.15s var(--ease);
}
.site-nav__cta:active { transform: translateY(0.125rem); }

.nav-toggle {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}
.nav-toggle:focus-visible ~ .site-header__inner .nav-burger,
.nav-burger:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 4px;
  border-radius: 0.5rem;
}
.nav-burger { display: block; cursor: pointer; color: #ffffff; }
.nav-burger .icon { display: block; }
/* Sélecteur à deux classes : doit l'emporter sur `.nav-burger .icon`. */
.nav-burger .nav-burger__close { display: none; }
.nav-toggle:checked ~ .site-header__inner .nav-burger__open { display: none; }
.nav-toggle:checked ~ .site-header__inner .nav-burger__close { display: block; }

.mobile-menu {
  display: none;
  border-top: 1px solid var(--border);
  background: var(--base);
}
.nav-toggle:checked ~ .mobile-menu { display: block; }
.mobile-menu__nav {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  padding-top: 1rem;
  padding-bottom: 1rem;
}
.mobile-menu__link {
  border-radius: 0.5rem;
  padding: 0.75rem;
  font-size: 1rem;
  line-height: 1.5rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.8);
}
.mobile-menu__link:hover { background: rgba(255, 255, 255, 0.05); }
.mobile-menu__cta {
  margin-top: 0.5rem;
  border-radius: 9999px;
  padding: 0.75rem 1.25rem;
  text-align: center;
  font-size: 1rem;
  line-height: 1.5rem;
  font-weight: 700;
  background: var(--cyan);
  color: var(--navy);
}

@media (min-width: 768px) {
  .site-nav { display: flex; }
  .nav-toggle,
  .nav-burger { display: none; }
  .nav-toggle:checked ~ .mobile-menu { display: none; }
}

/* ============ HERO ============ */
.hero { position: relative; overflow: hidden; }
.hero__halo {
  position: absolute;
  pointer-events: none;
  border-radius: 9999px;
  height: 420px;
  width: 420px;
}
.hero__halo--cyan {
  top: -8rem;
  left: -8rem;
  filter: blur(130px);
  background: var(--cyan);
  opacity: 0.16;
}
.hero__halo--lime {
  bottom: -10rem;
  right: 0;
  filter: blur(140px);
  background: var(--lime);
  opacity: 0.1;
}
.hero__grid {
  position: relative;
  display: grid;
  align-items: center;
  gap: 3rem;
  padding-top: 5rem;
  padding-bottom: 5rem;
}
.hero__badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  border-radius: 9999px;
  padding: 0.375rem 1rem;
  font-size: 0.75rem;
  line-height: 1rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--cyan);
  background: rgba(46, 197, 236, 0.1);
  border: 1px solid rgba(46, 197, 236, 0.3);
}
.hero__badge-dot {
  height: 0.5rem;
  width: 0.5rem;
  border-radius: 9999px;
  background: var(--orange);
}
.hero__title {
  margin-top: 1.5rem;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 2.25rem;
  line-height: 1.05;
}
.hero__lead {
  margin-top: 1.5rem;
  max-width: 36rem;
  font-size: 1.125rem;
  line-height: 1.625;
  color: var(--pale-blue);
}
.hero__actions {
  margin-top: 2.25rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  border-radius: 9999px;
  padding: 1rem 1.75rem;
  font-size: 1rem;
  line-height: 1.5rem;
  font-weight: 700;
  transition: all 0.15s var(--ease);
}
.btn--primary {
  background: var(--cyan);
  color: var(--navy);
  box-shadow: 0 6px 0 var(--cyan-deep);
  /* Seule la transformation est animée : l'aplat et le socle restent nets. */
  transition: transform 0.15s var(--ease);
}
.btn--primary:hover { transform: scale(1.02); }
.btn--primary:active { transform: scale(0.95); }
.btn--outline {
  color: #ffffff;
  border: 1.5px solid rgba(255, 255, 255, 0.25);
}
.btn--outline:hover { background: rgba(255, 255, 255, 0.05); }

.hero__photo { position: relative; }
.hero__photo-frame {
  position: relative;
  overflow: hidden;
  border-radius: 1.75rem;
  border: 1px solid var(--border);
  box-shadow: 0 30px 80px -20px rgba(0, 0, 0, 0.7);
}
.hero__photo-aspect { aspect-ratio: 4 / 5; width: 100%; }
.hero__photo-aspect img {
  height: 100%;
  width: 100%;
  object-fit: cover;
  object-position: 50% 32%;
}
.hero__photo-veil {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 7rem;
  background: linear-gradient(to top, rgba(8, 12, 26, 0.85), transparent);
}
.hero__photo-caption {
  position: absolute;
  bottom: 1.25rem;
  left: 1.25rem;
  display: flex;
  align-items: center;
  gap: 0.75rem;
}
.hero__play {
  display: flex;
  height: 2.75rem;
  width: 2.75rem;
  align-items: center;
  justify-content: center;
  border-radius: 9999px;
  background: var(--cyan);
  color: var(--navy);
}
.hero__photo-caption > span {
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-weight: 600;
  color: #ffffff;
}

@media (min-width: 640px) {
  .hero__title { font-size: 3rem; }
  .hero__actions { flex-direction: row; }
  .hero__photo-aspect { aspect-ratio: 1 / 1; }
}
@media (min-width: 1024px) {
  .hero__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    padding-top: 7rem;
    padding-bottom: 7rem;
  }
  .hero__title { font-size: 3.75rem; }
}

/* ============ CAPSULES ============ */
.capsules {
  position: relative;
  padding-top: 6rem;
  padding-bottom: 6rem;
  background: var(--base-alt);
}
.capsules__head {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1.5rem;
}
.capsules__title {
  margin-top: 1rem;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.875rem;
  line-height: 2.25rem;
}
.capsules__lead {
  margin-top: 1rem;
  max-width: 36rem;
  font-size: 1rem;
  line-height: 1.625;
  color: var(--pale-blue);
}
.capsules__vedettes { margin-top: 3.5rem; }
.capsules__grid {
  margin-top: 1.5rem;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.25rem;
}
.capsule-card {
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: 1rem;
  border: 1px solid var(--border);
  cursor: pointer;
}
.capsule-card__media {
  position: relative;
  aspect-ratio: 9 / 16;
  width: 100%;
  overflow: hidden;
}
.capsule-card__media > img {
  position: absolute;
  inset: 0;
  height: 100%;
  width: 100%;
  object-fit: cover;
  transition: transform 0.5s var(--ease);
}
.capsule-card:hover .capsule-card__media > img { transform: scale(1.05); }
.capsule-card__play-wrap {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.capsule-card__play {
  display: flex;
  height: 3.5rem;
  width: 3.5rem;
  align-items: center;
  justify-content: center;
  border-radius: 9999px;
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.25);
  color: #ffffff;
  transition: transform 0.15s var(--ease);
}
.capsule-card:hover .capsule-card__play { transform: scale(1.1); }
.capsule-card__tag {
  position: absolute;
  left: 0.75rem;
  top: 0.75rem;
  border-radius: 0.375rem;
  padding: 0.25rem 0.5rem;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.025em;
  color: var(--navy);
}
.capsule-card__caption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 2.5rem 0.75rem 0.75rem;
  background: linear-gradient(to top, rgba(8, 12, 26, 0.92), rgba(8, 12, 26, 0.55) 55%, transparent);
}
.capsule-card__caption h3 {
  font-size: 0.875rem;
  font-weight: 700;
  line-height: 1.375;
  color: #ffffff;
}
.capsule-card__caption p {
  margin-top: 0.125rem;
  font-size: 0.75rem;
  line-height: 1rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.6);
}
.capsules__more { margin-top: 3rem; text-align: center; }
.capsules__more a {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-weight: 700;
  color: var(--cyan);
  transition: color 0.15s var(--ease);
}
.capsules__more a:hover { color: #ffffff; }

@media (min-width: 640px) {
  .capsules__title { font-size: 3rem; line-height: 1; }
  .capsule-card__caption h3 { font-size: 1rem; }
}
@media (min-width: 768px) {
  .capsules__head { flex-direction: row; align-items: flex-end; }
}
@media (min-width: 1024px) {
  .capsules__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* ============ MISSION ============ */
.mission {
  padding-top: 6rem;
  padding-bottom: 6rem;
  background: var(--light);
  color: var(--navy);
}
.mission__intro {
  margin-left: auto;
  margin-right: auto;
  max-width: 42rem;
  text-align: center;
}
.mission__flask {
  margin: 0 auto 1.5rem;
  display: flex;
  height: 4rem;
  width: 4rem;
  align-items: center;
  justify-content: center;
  border-radius: 1rem;
  background: var(--orange);
  color: #ffffff;
}
.mission__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.875rem;
  line-height: 2.25rem;
}
.mission__text {
  margin-top: 1.25rem;
  font-size: 1.125rem;
  line-height: 1.625;
  color: var(--ink-soft);
}
.mission__text + .mission__text { margin-top: 1rem; }
.mission__grid {
  margin-top: 3.5rem;
  display: grid;
  grid-template-columns: repeat(1, minmax(0, 1fr));
  gap: 1.5rem;
}
.mission-card {
  border-radius: 1rem;
  background: #ffffff;
  padding: 2rem;
  border: 1px solid rgba(44, 52, 84, 0.08);
  box-shadow: 0 12px 30px -18px rgba(44, 52, 84, 0.35);
}
.mission-card__icon {
  margin-bottom: 1.25rem;
  display: flex;
  height: 3rem;
  width: 3rem;
  align-items: center;
  justify-content: center;
  border-radius: 0.75rem;
}
.mission-card h3 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.25rem;
  line-height: 1.75rem;
}
.mission-card > p {
  margin-top: 0.75rem;
  line-height: 1.625;
  color: var(--ink-soft);
}

@media (min-width: 640px) {
  .mission__title { font-size: 2.25rem; line-height: 2.5rem; }
}
@media (min-width: 768px) {
  .mission__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* ============ CRÉATEURS ============ */
.creators {
  padding-top: 6rem;
  padding-bottom: 6rem;
  background: var(--base);
}
.creators__intro {
  margin-left: auto;
  margin-right: auto;
  max-width: 42rem;
  text-align: center;
}
.creators__title {
  margin-top: 1rem;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.875rem;
  line-height: 2.25rem;
}
.creators__lead {
  margin-top: 1.25rem;
  font-size: 1.125rem;
  line-height: 1.625;
  color: var(--pale-blue);
}
.creators__photo {
  margin: 2.5rem auto 0;
  max-width: 56rem;
  overflow: hidden;
  border-radius: 1.75rem;
  border: 1px solid var(--border);
  box-shadow: 0 30px 80px -30px rgba(0, 0, 0, 0.8);
}
.creators__photo-inner { height: 360px; width: 100%; }
.creators__photo-inner img {
  height: 100%;
  width: 100%;
  object-fit: cover;
  object-position: 50% 24%;
}
.creators__grid {
  margin-top: 7rem;
  display: grid;
  grid-template-columns: repeat(1, minmax(0, 1fr));
  column-gap: 1.5rem;
  row-gap: 6rem;
}
.creator-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  border-radius: 1.5rem;
  padding: 5rem 2rem 2rem;
  text-align: center;
  background: var(--panel);
  border: 1px solid var(--border);
  box-shadow: 0 24px 60px -30px rgba(0, 0, 0, 0.85);
}
.creator-card__avatar {
  position: absolute;
  top: -3.5rem;
  height: 7rem;
  width: 7rem;
  overflow: hidden;
  border-radius: 9999px;
  border: 3px solid;
}
.creator-card__avatar img {
  height: 100%;
  width: 100%;
  object-fit: cover;
}
.creator-card h3 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.5rem;
  line-height: 2rem;
  color: #ffffff;
}
.creator-card__role {
  margin-top: 0.25rem;
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-weight: 700;
}
.creator-card__bio {
  margin-top: 1rem;
  font-size: 0.875rem;
  line-height: 1.625;
  color: rgba(255, 255, 255, 0.7);
}
.creator-card__link {
  margin-top: 1.25rem;
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-weight: 700;
  transition: opacity 0.15s var(--ease);
}
.creator-card__link:hover { opacity: 0.8; }

@media (min-width: 640px) {
  .creators__title { font-size: 2.25rem; line-height: 2.5rem; }
  .creators__photo-inner { height: 460px; }
}
@media (min-width: 768px) {
  .creators__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: stretch;
  }
}
@media (min-width: 1024px) {
  .creators__title { font-size: 3rem; line-height: 1; }
  .creators__photo-inner { height: 540px; }
}

/* ============ SUIVEZ L'EXPÉRIENCE ============ */
.follow {
  position: relative;
  overflow: hidden;
  padding-top: 6rem;
  padding-bottom: 6rem;
  /* Section claire : elle s'éclaircit vers la carte d'infolettre, qui reste
     sombre et sert de point d'ancrage entre les créateurs et les partenaires. */
  background: linear-gradient(180deg, var(--light) 0%, #ffffff 100%);
  color: var(--navy);
}
.follow__halo {
  position: absolute;
  pointer-events: none;
  left: 50%;
  top: -60px;
  height: 320px;
  width: 620px;
  transform: translateX(-50%);
  border-radius: 9999px;
  filter: blur(120px);
  background: var(--cyan);
  opacity: 0.22;
}
.follow__inner { position: relative; text-align: center; }
/* Même cyan que le surtitre des partenariats, l'autre section claire. */
.follow__eyebrow { color: var(--cyan-ink); }
.follow__title {
  margin-top: 1rem;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.75rem;
  color: var(--navy);
}
.follow__lead {
  margin: 1rem auto 0;
  max-width: 36rem;
  font-size: 1rem;
  line-height: 1.5rem;
  color: var(--ink-soft);
}
.follow__socials {
  margin-top: 2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
}
/* Boutons sociaux : contour lumineux + halo au repos, plus vif au survol */
.social-btn {
  display: flex;
  height: 3rem;
  width: 3rem;
  align-items: center;
  justify-content: center;
  border-radius: 0.75rem;
  color: #ffffff;
  background: var(--navy);
  border: 1.5px solid transparent;
  transition: all 0.3s ease-out;
  box-shadow: 0 12px 24px -16px rgba(44, 52, 84, 0.9);
}
/* Au survol, la pastille s'éclaircit et le logo reprend la couleur de sa
   plateforme (variable --brand posée par les modificateurs ci-dessous). */
.social-btn { --brand: var(--cyan-deep); }
/* Cyan TikTok (#25f4ee) assombri : lisible sur la pastille blanche et bien
   distinct du rose d'Instagram. */
.social-btn--tiktok { --brand: #0fa9bf; }
.social-btn--instagram { --brand: #e1306c; }
.social-btn--youtube { --brand: #ff0000; }
.social-btn--facebook { --brand: #1877f2; }
.social-btn:hover,
.social-btn:focus-visible {
  transform: translateY(-0.25rem) scale(1.1);
  background: #ffffff;
  color: var(--brand);
  border-color: var(--brand);
  /* Repli pour les navigateurs sans color-mix : halo marine diffus. */
  box-shadow:
    0 0 20px 6px rgba(44, 52, 84, 0.16),
    0 16px 30px -14px rgba(44, 52, 84, 0.8);
  /* Surbrillance diffuse : deux nappes floues au lieu d'un anneau net. */
  box-shadow:
    0 0 16px 2px color-mix(in srgb, var(--brand) 32%, transparent),
    0 0 34px 12px color-mix(in srgb, var(--brand) 18%, transparent),
    0 16px 30px -14px rgba(44, 52, 84, 0.8);
}

.newsletter {
  position: relative;
  margin: 3rem auto 0;
  max-width: 32rem;
  border-radius: 28px;
  padding: 2.5px;
  background: linear-gradient(135deg, var(--cyan), var(--lime) 45%, var(--orange) 100%);
  box-shadow:
    0 30px 80px -20px rgba(0, 0, 0, 0.85),
    0 0 90px -20px #2ec5ec40,
    0 0 50px -25px #f4a51e33;
}
.newsletter__glow {
  position: absolute;
  pointer-events: none;
  inset: -2.5rem;
  z-index: -1;
  border-radius: 48px;
  filter: blur(90px);
  background:
    radial-gradient(circle at 30% 20%, #2ec5ec42, transparent 60%),
    radial-gradient(circle at 70% 80%, #b8d34a38, transparent 60%),
    radial-gradient(circle at 50% 50%, #f4a51e30, transparent 65%);
}
.newsletter__card {
  position: relative;
  overflow: hidden;
  border-radius: 26px;
  padding: 2rem;
  text-align: left;
  background:
    radial-gradient(120% 105% at 88% -15%, rgba(46, 197, 236, 0.40), transparent 58%),
    radial-gradient(95% 95% at 6% 112%, rgba(184, 211, 74, 0.30), transparent 62%),
    radial-gradient(80% 80% at 98% 108%, rgba(244, 165, 30, 0.26), transparent 60%),
    linear-gradient(150deg, #25617f 0%, #1d5072 55%, #266888 100%);
}
.newsletter__blob {
  position: absolute;
  pointer-events: none;
  height: 12rem;
  width: 12rem;
  border-radius: 9999px;
  filter: blur(60px);
}
.newsletter__blob--cyan { right: -2.5rem; top: -4rem; background: var(--cyan); opacity: 0.5; }
.newsletter__blob--lime { bottom: -4rem; left: -2.5rem; background: var(--lime); opacity: 0.36; }
.newsletter__badge {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  border-radius: 9999px;
  padding: 0.25rem 0.75rem;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.025em;
  background: #2ec5ec1f;
  color: var(--cyan);
  border: 1px solid #2ec5ec55;
}
.newsletter__title {
  position: relative;
  margin-top: 0.75rem;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.5rem;
  line-height: 2rem;
  color: #ffffff;
}
.newsletter__text {
  position: relative;
  margin-top: 0.5rem;
  font-size: 0.875rem;
  line-height: 1.25rem;
  color: rgba(255, 255, 255, 0.85);
}
.newsletter__form {
  position: relative;
  margin-top: 1.5rem;
  display: flex;
  gap: 0.5rem;
}
/* Réponse après l'envoi : confirmation ou erreur de saisie. */
.newsletter__status {
  margin-top: 0.85rem;
  font-size: 0.9rem;
  font-weight: 600;
  color: #ffffff;
}
.newsletter__status--error { color: #ffd0d0; }

/* ---------- Bandeau d'invitation (bas de l'accueil) ----------
   Mêmes couleurs que la carte « Premiers informés », en format barre :
   liseré dégradé sur le dessus, nappes cyan/lime/orangé sur fond marine. */
.promo-bar {
  position: fixed;
  left: 0;
  right: 0;
  /* Le fond déborde de 3rem sous l'écran : quand l'arrivée dépasse
     légèrement sa position finale (effet de rebond), aucun vide n'apparaît
     sous la barre. */
  bottom: -3rem;
  padding-bottom: 3rem;
  z-index: 60;
  border-top: 2.5px solid transparent;
  border-image: linear-gradient(90deg, var(--cyan), var(--lime) 55%, var(--orange)) 1;
  background:
    radial-gradient(70% 220% at 88% -40%, rgba(46, 197, 236, 0.38), transparent 60%),
    radial-gradient(55% 200% at 4% 150%, rgba(184, 211, 74, 0.26), transparent 62%),
    radial-gradient(45% 180% at 98% 160%, rgba(244, 165, 30, 0.24), transparent 60%),
    linear-gradient(150deg, #25617f 0%, #1d5072 55%, #266888 100%);
  box-shadow: 0 -20px 60px -25px rgba(0, 0, 0, 0.9);
  /* Replié tant que le script ne l'ouvre pas ; invisible au clavier aussi.
     L'ouverture monte d'un trait et dépasse un peu avant de se poser :
     c'est ce léger rebond qui attire l'œil. */
  transform: translateY(110%);
  visibility: hidden;
  transition: transform 0.6s cubic-bezier(0.22, 1.35, 0.36, 1), visibility 0s linear 0.6s;
}
.promo-bar.is-open {
  transform: translateY(0);
  visibility: visible;
  transition: transform 0.6s cubic-bezier(0.22, 1.35, 0.36, 1), visibility 0s;
}
.promo-bar__inner {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  padding-top: 1rem;
  padding-bottom: 1rem;
}
.promo-bar__text { flex: 1 1 auto; min-width: 0; }
.promo-bar__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.25rem;
  line-height: 1.75rem;
  color: #ffffff;
}
.promo-bar__lead {
  margin-top: 0.25rem;
  font-size: 0.875rem;
  line-height: 1.25rem;
  color: rgba(255, 255, 255, 0.85);
}
.promo-bar__form {
  position: relative;
  display: flex;
  gap: 0.5rem;
  flex: 0 1 26rem;
}
.promo-bar__error {
  margin: 0 auto;
  padding: 0 1.5rem 0.9rem;
  max-width: 72rem;
  font-size: 0.875rem;
  font-weight: 600;
  color: #ffd0d0;
}
.promo-bar__close {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 2.25rem;
  width: 2.25rem;
  border-radius: 9999px;
  border: 1px solid rgba(255, 255, 255, 0.25);
  background: rgba(255, 255, 255, 0.06);
  color: #ffffff;
  cursor: pointer;
  transition: transform 0.15s var(--ease), background 0.15s var(--ease);
}
.promo-bar__close:hover {
  background: rgba(255, 255, 255, 0.16);
  transform: scale(1.07);
}
.promo-bar__close:active { transform: scale(0.92); }

@media (max-width: 767px) {
  .promo-bar__inner {
    flex-wrap: wrap;
    gap: 0.75rem;
    padding-top: 0.9rem;
    padding-bottom: 0.9rem;
  }
  .promo-bar__text { flex: 1 1 70%; }
  .promo-bar__title { font-size: 1.1rem; line-height: 1.5rem; }
  .promo-bar__lead { font-size: 0.8125rem; }
  .promo-bar__form { flex: 1 1 100%; order: 3; }
}

@media (prefers-reduced-motion: reduce) {
  .promo-bar { transition: none; }
}
/* Champ pâle : il ressort sur la carte sombre et se lit tout de suite
   comme la zone où l'on doit cliquer. */
.newsletter__input {
  width: 100%;
  border-radius: 9999px;
  padding: 0.75rem 1.25rem;
  font-size: 0.875rem;
  line-height: 1.25rem;
  color: var(--navy);
  background: linear-gradient(180deg, #d6f2fc 0%, #b2e4f6 100%);
  border: 1px solid rgba(255, 255, 255, 0.85);
  outline: none;
  transition: box-shadow 0.25s var(--ease), background 0.25s var(--ease);
  box-shadow:
    0 0 0 1px rgba(46, 197, 236, 0.35),
    0 6px 16px -8px rgba(0, 0, 0, 0.55);
}
.newsletter__input::placeholder { color: rgba(44, 52, 84, 0.55); }
.newsletter__input:hover { background: linear-gradient(180deg, #e4f8fe 0%, #c2ebf9 100%); }
.newsletter__input:focus {
  background: linear-gradient(180deg, #eafbff 0%, #cbeffb 100%);
  box-shadow:
    0 0 0 3px rgba(46, 197, 236, 0.55),
    0 6px 18px -8px rgba(0, 0, 0, 0.6);
}
/* Bouton d'envoi : même design et même animation que « Envoyer le message »
   de la section Partenariats (aplat orange, socle plein, zoom au survol). */
.send-btn {
  display: flex;
  height: 3rem;
  width: 3rem;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  border-radius: 9999px;
  border: 0;
  cursor: pointer;
  background: var(--orange);
  color: #ffffff;
  box-shadow: 0 6px 0 #c67f0f;
  transition: transform 0.18s var(--ease);
}
/* Zoom plus franc que sur le bouton large : la pastille est petite, il faut
   une amplitude supérieure pour que le survol se remarque. */
.send-btn:hover { transform: scale(1.07); }
.send-btn:active { transform: scale(0.92); }

@media (min-width: 640px) {
  .follow__title { font-size: 2.25rem; }
}

/* ============ PARTENARIATS ============ */
.partners {
  position: relative;
  overflow: hidden;
  border-top: 1px solid rgba(44, 52, 84, 0.08);
  padding-top: 6rem;
  padding-bottom: 6rem;
  background: var(--light);
  color: var(--navy);
}
.partners__grid {
  position: relative;
  display: grid;
  gap: 3.5rem;
}
.partners__eyebrow {
  font-size: 0.75rem;
  line-height: 1rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.025em;
  color: var(--cyan-ink);
}
.partners__title {
  margin-top: 0.75rem;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 2.25rem;
  line-height: 2.5rem;
}
.partners__lead {
  margin-top: 1.25rem;
  max-width: 32rem;
  font-size: 1.125rem;
  line-height: 1.625;
  color: var(--ink-soft);
}
.partner-form {
  border-radius: 1.5rem;
  background: #ffffff;
  padding: 1.5rem;
  border: 1px solid rgba(44, 52, 84, 0.08);
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
}
.partner-form__row { display: grid; gap: 1rem; }
/* Champ-piège : présent dans le HTML, jamais montré ni annoncé. */
.partner-form__trap {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
/* Confirmation ou erreur, juste au-dessus des champs. */
.partner-form__status {
  margin-bottom: 1rem;
  border-radius: 0.9rem;
  padding: 0.8rem 1rem;
  font-size: 0.9rem;
  font-weight: 600;
  color: #2f6b23;
  background: rgba(79, 170, 60, 0.12);
  border: 1px solid rgba(79, 170, 60, 0.35);
}
.partner-form__status--error {
  color: #a2331f;
  background: rgba(214, 69, 42, 0.1);
  border-color: rgba(214, 69, 42, 0.35);
}
.partner-form__field {
  display: block;
  font-size: 0.875rem;
  line-height: 1.25rem;
}
.partner-form__field--mt { margin-top: 1rem; }
.partner-form__field > span { font-weight: 700; color: var(--navy); }
.partner-form__field input,
.partner-form__field textarea {
  display: block;
  margin-top: 0.5rem;
  width: 100%;
  border-radius: 0.75rem;
  padding: 0.75rem 1rem;
  font-size: 0.875rem;
  line-height: 1.25rem;
  color: var(--navy);
  background: #ffffff;
  border: 1px solid rgba(44, 52, 84, 0.15);
  outline: none;
}
.partner-form__field input::placeholder,
.partner-form__field textarea::placeholder { color: rgba(44, 52, 84, 0.5); }
.partner-form__field textarea { resize: none; }
.partner-form__submit {
  margin-top: 1.5rem;
  width: 100%;
  border: 0;
  border-radius: 9999px;
  padding: 1rem 0;
  font-size: 1rem;
  line-height: 1.5rem;
  font-weight: 700;
  color: #ffffff;
  cursor: pointer;
  background: var(--orange);
  box-shadow: 0 6px 0 #c67f0f;
  transition: transform 0.15s var(--ease);
}
.partner-form__submit:hover { transform: scale(1.02); }
.partner-form__submit:active { transform: scale(0.95); }

@media (min-width: 640px) {
  .partners__title { font-size: 3rem; line-height: 1; }
  .partner-form { padding: 2rem; }
  .partner-form__row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
  .partners__grid {
    grid-template-columns: 1.15fr 1fr;
    align-items: center;
  }
}

/* ============ FOOTER ============ */
.site-footer {
  background: var(--base);
  border-top: 1px solid var(--border);
}
.site-footer__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1.5rem;
  padding-top: 2.5rem;
  padding-bottom: 2.5rem;
}
.site-footer__logo { height: 2.25rem; width: auto; }
.site-footer__inner p {
  font-size: 0.875rem;
  line-height: 1.25rem;
  color: rgba(255, 255, 255, 0.4);
}

@media (min-width: 640px) {
  .site-footer__inner { flex-direction: row; }
}

/* ============ PAGE SAISON (/capsules) ============ */
.season-intro {
  position: relative;
  overflow: hidden;
  padding-top: 2.5rem;
  padding-bottom: 4rem;
  background: var(--base);
}
.season-intro__halo {
  position: absolute;
  border-radius: 9999px;
  filter: blur(120px);
  pointer-events: none;
}
.season-intro__halo--cyan {
  top: -10rem;
  right: -6rem;
  height: 26rem;
  width: 26rem;
  background: rgba(46, 197, 236, 0.16);
}
.season-intro__halo--lime {
  bottom: -14rem;
  left: -8rem;
  height: 24rem;
  width: 24rem;
  background: rgba(184, 211, 74, 0.12);
}
.season-intro__inner { position: relative; }

.season-back {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.8125rem;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.6);
  transition: color 0.15s var(--ease);
}
.season-back:hover { color: #ffffff; }
.season-back__icon { transform: rotate(180deg); }

.season-intro__grid {
  margin-top: 2.5rem;
  display: grid;
  gap: 2.5rem;
  align-items: end;
}
.season-intro__title {
  margin-top: 1rem;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 2.25rem;
  line-height: 1.1;
}
/* Virgule en blanc : elle suit la couleur du titre, pas le cyan. */
.season-intro__title-sep { color: inherit; }
.season-intro__lead {
  margin-top: 1.25rem;
  max-width: 40rem;
  font-size: 1rem;
  line-height: 1.7;
  color: var(--pale-blue);
}

.season-status {
  border-radius: 1.25rem;
  border: 1px solid var(--border);
  background: linear-gradient(160deg, var(--panel-hi), var(--panel));
  padding: 1.5rem;
}
.season-status__count {
  display: flex;
  align-items: baseline;
  gap: 0.625rem;
}
.season-status__count strong {
  font-family: var(--font-display);
  font-size: 2.75rem;
  line-height: 1;
  color: var(--cyan);
}
.season-status__count span {
  font-size: 0.875rem;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.8);
}
.season-progress {
  margin-top: 1.125rem;
  height: 0.5rem;
  width: 100%;
  overflow: hidden;
  border-radius: 9999px;
  background: rgba(255, 255, 255, 0.08);
}
.season-progress__fill {
  display: block;
  height: 100%;
  border-radius: 9999px;
  background: linear-gradient(90deg, var(--cyan), var(--lime));
}
.season-progress__legend {
  margin-top: 0.625rem;
  font-size: 0.8125rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.55);
}
.season-status__rhythm {
  margin-top: 1.25rem;
  padding-top: 1.125rem;
  border-top: 1px solid var(--border);
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.8125rem;
  font-weight: 700;
  color: var(--lime);
}

/* ---------- Dernière capsule en ligne ---------- */
.season-spotlight {
  padding-top: 4rem;
  padding-bottom: 4rem;
  background: var(--base-alt);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
.season-spotlight__grid {
  margin-top: 1.5rem;
  display: grid;
  gap: 2rem;
  align-items: center;
}
.season-spotlight__card { width: 100%; max-width: 15rem; }
.season-spotlight__week {
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}
.season-spotlight__title {
  margin-top: 0.5rem;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.875rem;
  line-height: 1.15;
}
.season-spotlight__text {
  margin-top: 1rem;
  max-width: 34rem;
  font-size: 1rem;
  line-height: 1.7;
  color: var(--pale-blue);
}
.season-spotlight__meta {
  margin-top: 1rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.8125rem;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.55);
}
.season-spotlight__btn { margin-top: 1.5rem; }

/* ---------- Calendrier des 52 semaines ---------- */
.season-list {
  padding-top: 4rem;
  padding-bottom: 6rem;
  background: var(--base);
}
.season-list__head {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1rem;
}
.season-list__title {
  margin-top: 1rem;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.75rem;
  line-height: 1.15;
}
.season-list__legend { display: flex; gap: 1.25rem; }
.season-legend {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.75rem;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.55);
}
.season-legend__dot {
  height: 0.5rem;
  width: 0.5rem;
  border-radius: 9999px;
  background: rgba(255, 255, 255, 0.2);
}
.season-legend__dot--on {
  background: var(--cyan);
  box-shadow: 0 0 0 3px rgba(46, 197, 236, 0.2);
}

.season-grid {
  margin: 2rem 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem;
}
.season-grid__item { display: block; }

.slot {
  position: relative;
  display: block;
  height: 100%;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  border-radius: 0.875rem;
  border: 1px solid var(--border);
  background: var(--panel);
}
.slot__img {
  position: absolute;
  inset: 0;
  height: 100%;
  width: 100%;
  object-fit: cover;
  transition: transform 0.5s var(--ease);
}
.slot__img--muted { filter: grayscale(0.7); opacity: 0.35; }
.slot__veil {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(8, 12, 26, 0.94), rgba(8, 12, 26, 0.35) 60%, rgba(8, 12, 26, 0.05));
}
.slot__veil--strong { background: linear-gradient(to top, rgba(8, 12, 26, 0.96), rgba(8, 12, 26, 0.7)); }
.slot__body {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
  padding: 0.625rem 0.75rem 0.75rem;
}
.slot__week {
  font-size: 0.625rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--slot-color, var(--cyan));
}
.slot__title {
  font-size: 0.8125rem;
  font-weight: 700;
  line-height: 1.3;
  color: #ffffff;
}
.slot__title--soon { color: rgba(255, 255, 255, 0.45); font-weight: 600; }

/* Case en ligne */
.slot--online { cursor: pointer; }
.slot--online:hover .slot__img { transform: scale(1.06); }
.slot--online:hover { border-color: rgba(46, 197, 236, 0.5); }
.slot__play {
  position: absolute;
  left: 50%;
  top: 45%;
  transform: translate(-50%, -50%);
  display: flex;
  height: 2.5rem;
  width: 2.5rem;
  align-items: center;
  justify-content: center;
  border-radius: 9999px;
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.25);
  color: #ffffff;
  transition: transform 0.15s var(--ease);
}
.slot--online:hover .slot__play { transform: translate(-50%, -50%) scale(1.12); }

/* Case à venir */
.slot--soon {
  border-style: dashed;
  border-color: rgba(255, 255, 255, 0.1);
  background:
    radial-gradient(120% 90% at 50% 0%, rgba(255, 255, 255, 0.05), transparent 70%),
    var(--panel);
}
.slot--soon::after {
  content: "";
  position: absolute;
  left: 0.75rem;
  top: 0.75rem;
  height: 0.375rem;
  width: 0.375rem;
  border-radius: 9999px;
  background: var(--slot-color, var(--cyan));
  opacity: 0.5;
}
.slot__number {
  position: absolute;
  left: 50%;
  top: 45%;
  transform: translate(-50%, -50%);
  font-family: var(--font-display);
  font-size: 1.75rem;
  font-weight: 700;
  line-height: 1;
  color: rgba(255, 255, 255, 0.16);
}

.season-outro {
  margin-top: 3.5rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.25rem;
  text-align: center;
}
.season-outro p {
  max-width: 32rem;
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--pale-blue);
}

@media (min-width: 480px) {
  .season-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 640px) {
  .season-intro { padding-bottom: 5rem; }
  .season-intro__title { font-size: 3rem; }
  .season-list__title { font-size: 2.25rem; }
  .season-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; }
  .slot__number { font-size: 2.25rem; }
}
@media (min-width: 768px) {
  .season-list__head { flex-direction: row; align-items: flex-end; justify-content: space-between; }
  .season-spotlight__grid { grid-template-columns: 15rem minmax(0, 1fr); gap: 2.5rem; align-items: center; }
}
@media (min-width: 1024px) {
  .season-intro__grid { grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: 3.5rem; }
  .season-intro__title { font-size: 3.5rem; }
  .season-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .season-spotlight__title { font-size: 2.25rem; }
}

/* Capsule sans visuel : pastille colorée au numéro de semaine */
.capsule-card__blank {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-size: 3rem;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.18);
  background:
    radial-gradient(120% 90% at 50% 0%, rgba(255, 255, 255, 0.06), transparent 70%),
    var(--panel);
}
/* ============================================================
   CALENDRIER DE DIFFUSION
   Prochaine sortie, avant-saison et lecteur YouTube en façade.
   ============================================================ */

/* Rappel de la prochaine parution, sous le compteur de saison */
.season-status__next {
  margin-top: 0.75rem;
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  font-size: 0.8125rem;
  line-height: 1.4;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.55);
}
.season-status__next .icon { margin-top: 0.1rem; color: var(--orange); }

/* Avant-saison : annonce du lancement et décompte */
.season-countdown {
  margin-top: 1.75rem;
  display: flex;
  flex-direction: column;
  gap: 2rem;
  border-radius: 1.5rem;
  border: 1px solid var(--border);
  background:
    radial-gradient(120% 120% at 0% 0%, rgba(46, 197, 236, 0.12), transparent 60%),
    var(--panel);
  padding: 2rem 1.75rem;
}
.season-countdown__body { max-width: 40rem; }
.season-countdown__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.75rem;
  line-height: 1.15;
}
.season-countdown__text {
  margin-top: 1rem;
  font-size: 1rem;
  line-height: 1.625;
  color: var(--pale-blue);
}
.season-countdown__btn { margin-top: 1.75rem; }
.season-countdown__dial {
  align-self: flex-start;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-width: 8.5rem;
  border-radius: 1.25rem;
  border: 1px dashed rgba(46, 197, 236, 0.35);
  background: rgba(46, 197, 236, 0.06);
  padding: 1.25rem 1.5rem;
}
.season-countdown__dial strong {
  font-family: var(--font-display);
  font-size: 3rem;
  line-height: 1;
  color: var(--cyan);
}
.season-countdown__dial span {
  margin-top: 0.25rem;
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: rgba(255, 255, 255, 0.55);
}

@media (min-width: 768px) {
  .season-countdown {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    padding: 2.5rem;
  }
  .season-countdown__title { font-size: 2.25rem; }
}

/* Lien vers la chaîne, sous la capsule de la semaine */
.season-spotlight__yt {
  margin-top: 1.5rem;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.875rem;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.65);
  transition: color 0.15s var(--ease);
}
.season-spotlight__yt:hover { color: #ffffff; }

/* Lecteur YouTube en façade : vignette seule tant qu'on n'a pas cliqué */
.capsule-card--player { cursor: default; }
.ytlite { position: absolute; inset: 0; }
.ytlite__trigger {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
}
.ytlite__poster {
  position: absolute;
  inset: 0;
  height: 100%;
  width: 100%;
  object-fit: cover;
  transition: transform 0.5s var(--ease);
}
.ytlite__poster--blank {
  background:
    radial-gradient(120% 90% at 50% 0%, rgba(255, 255, 255, 0.08), transparent 70%),
    var(--slot-color, var(--panel));
  opacity: 0.35;
}
.ytlite__trigger:hover .ytlite__poster { transform: scale(1.05); }
.ytlite__veil {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(8, 12, 26, 0.55), transparent 55%);
}
.ytlite__play {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  height: 3.5rem;
  width: 3.5rem;
  align-items: center;
  justify-content: center;
  border-radius: 9999px;
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.25);
  color: #ffffff;
  transition: transform 0.15s var(--ease), background 0.15s var(--ease);
}
.ytlite__trigger:hover .ytlite__play {
  transform: translate(-50%, -50%) scale(1.1);
  background: rgba(46, 197, 236, 0.85);
  color: var(--navy);
}
.ytlite__trigger:focus-visible {
  outline: 2px solid var(--cyan);
  outline-offset: -4px;
}
.ytlite__frame {
  position: absolute;
  inset: 0;
  height: 100%;
  width: 100%;
  border: 0;
}
.ytlite__fallback {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 0.75rem;
  text-align: center;
  font-size: 0.8125rem;
  font-weight: 700;
  background: rgba(8, 12, 26, 0.85);
  color: #ffffff;
}

/* =========================================================================
   VOÛTE PRIVÉE
   Pages de préparation des capsules (/voute). Lisible et dense : on y vient
   pour remplir des semaines, pas pour admirer le décor.
   ========================================================================= */

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.vault-body {
  background: var(--base);
  color: #ffffff;
}

.vault-header {
  border-bottom: 1px solid var(--border);
  background: var(--base-alt);
}
.vault-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-top: 1rem;
  padding-bottom: 1rem;
}
.vault-header__brand {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  font-family: var(--font-display);
  font-weight: 600;
  color: #ffffff;
}
.vault-header__logo { height: 2rem; width: auto; }

.vault-main { padding: 2.5rem 1.25rem 4rem; }

.vault-title {
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 3vw, 2.2rem);
  font-weight: 700;
}
.vault-subtitle {
  margin-top: 0.5rem;
  max-width: 60ch;
  color: var(--pale-blue);
  line-height: 1.6;
}

.vault-flash {
  margin-bottom: 1.5rem;
  border-radius: 0.9rem;
  border: 1px solid rgba(79, 170, 60, 0.4);
  background: rgba(79, 170, 60, 0.12);
  padding: 0.85rem 1.1rem;
  color: #d8f2cf;
}
.vault-error {
  margin-top: 1.25rem;
  border-radius: 0.9rem;
  border: 1px solid rgba(244, 165, 30, 0.45);
  background: rgba(244, 165, 30, 0.12);
  padding: 0.85rem 1.1rem;
  color: #ffe0ab;
}

/* ---------- Entrée ---------- */
.vault-gate {
  max-width: 26rem;
  margin: 3rem auto;
  border-radius: 1.5rem;
  border: 1px solid var(--border);
  background: var(--panel);
  padding: 2rem;
}
.vault-gate__title {
  font-family: var(--font-display);
  font-size: 1.6rem;
  font-weight: 700;
}
.vault-gate__text {
  margin-top: 0.6rem;
  color: var(--pale-blue);
  line-height: 1.6;
}
.vault-gate__back {
  display: inline-block;
  margin-top: 1.5rem;
  color: var(--pale-blue);
  font-size: 0.9rem;
  text-decoration: underline;
}

/* ---------- Formulaires ---------- */
.vault-form {
  margin-top: 1.75rem;
  display: grid;
  gap: 1.25rem;
}
.vault-form--week { max-width: 44rem; }
.vault-field { display: grid; gap: 0.35rem; }
.vault-field--short { max-width: 12rem; }
.vault-field__label {
  font-family: var(--font-display);
  font-weight: 600;
}
.vault-field__hint {
  font-size: 0.85rem;
  color: var(--pale-blue);
  line-height: 1.4;
}
.vault-field__error {
  font-size: 0.85rem;
  color: #ffbd7a;
}
.vault-input {
  width: 100%;
  border-radius: 0.75rem;
  border: 1px solid var(--border);
  background: var(--panel-hi);
  padding: 0.7rem 0.9rem;
  color: #ffffff;
  font-family: var(--font-body);
  font-size: 1rem;
}
.vault-input:focus-visible {
  outline: 2px solid var(--cyan);
  outline-offset: 2px;
}
.vault-input--error { border-color: rgba(244, 165, 30, 0.7); }
.vault-textarea { resize: vertical; line-height: 1.5; }
.vault-form__actions {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
}
.vault-preview {
  margin-top: 1.5rem;
  color: var(--pale-blue);
  font-size: 0.9rem;
}
.vault-preview a { color: var(--cyan); text-decoration: underline; }

.vault-link-btn {
  display: inline-flex;
  align-items: center;
  border-radius: 9999px;
  border: 1px solid rgba(255, 255, 255, 0.25);
  background: none;
  padding: 0.4rem 0.9rem;
  color: #ffffff;
  font-family: var(--font-body);
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
}
.vault-link-btn:hover { background: rgba(255, 255, 255, 0.07); }

.vault-back {
  display: inline-block;
  margin-bottom: 1rem;
  color: var(--pale-blue);
  font-size: 0.9rem;
}
.vault-back:hover { color: #ffffff; }

/* ---------- Tableau de bord ---------- */
.vault-stats {
  margin-top: 1.75rem;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr));
  gap: 0.75rem;
}
.vault-stat {
  border-radius: 1rem;
  border: 1px solid var(--border);
  background: var(--panel);
  padding: 1rem;
  display: grid;
  gap: 0.15rem;
}
.vault-stat--wide { grid-column: span 2; }
.vault-stat__value {
  font-family: var(--font-display);
  font-size: 1.9rem;
  font-weight: 700;
  color: var(--cyan);
  line-height: 1.1;
}
.vault-stat__label {
  font-size: 0.85rem;
  color: var(--pale-blue);
}
.vault-next {
  margin-top: 1.25rem;
  color: var(--pale-blue);
}

.vault-table-wrap {
  margin-top: 1.5rem;
  overflow-x: auto;
  border-radius: 1rem;
  border: 1px solid var(--border);
  background: var(--panel);
}
.vault-table {
  width: 100%;
  min-width: 44rem;
  border-collapse: collapse;
  font-size: 0.95rem;
}
.vault-table th,
.vault-table td {
  text-align: left;
  padding: 0.65rem 0.9rem;
  border-bottom: 1px solid var(--border);
  vertical-align: top;
}
.vault-table thead th {
  font-family: var(--font-display);
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--pale-blue);
  background: var(--panel-hi);
  position: sticky;
  top: 0;
}
.vault-table tbody tr:last-child th,
.vault-table tbody tr:last-child td { border-bottom: 0; }
.vault-row:hover { background: rgba(255, 255, 255, 0.03); }
.vault-row--current { background: rgba(46, 197, 236, 0.08); }
.vault-row__week {
  font-family: var(--font-display);
  font-weight: 700;
  white-space: nowrap;
}
.vault-row__now {
  display: block;
  font-family: var(--font-body);
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--cyan);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.vault-row__date,
.vault-row__missing {
  color: var(--pale-blue);
  white-space: nowrap;
}
.vault-row__duration {
  display: block;
  font-size: 0.8rem;
  color: var(--pale-blue);
}
.vault-row__action { text-align: right; }

.vault-chip {
  display: inline-block;
  border-radius: 9999px;
  padding: 0.2rem 0.7rem;
  font-size: 0.8rem;
  font-weight: 700;
  white-space: nowrap;
}
.vault-chip--published {
  background: rgba(79, 170, 60, 0.18);
  color: #b6e6a6;
}
.vault-chip--vault {
  background: rgba(46, 197, 236, 0.18);
  color: #a7e5f8;
}
.vault-chip--draft {
  background: rgba(255, 255, 255, 0.08);
  color: var(--pale-blue);
}

@media (max-width: 640px) {
  .vault-stat--wide { grid-column: span 2; }
  .vault-main { padding-top: 1.75rem; }
}

/* Aucune capsule parue : la section vedettes annonce la sortie. */
.capsules__soon {
  grid-column: 1 / -1;
  border-radius: 1.25rem;
  border: 1px dashed var(--border);
  background: rgba(255, 255, 255, 0.02);
  padding: 2rem 1.5rem;
  text-align: center;
  color: var(--pale-blue);
  line-height: 1.6;
}
.capsules__soon strong { color: #ffffff; }

/* Bandeau d'aperçu privé (page publique appelée depuis la voûte). */
.preview-bar {
  position: sticky;
  top: 0;
  z-index: 60;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
  padding: 0.7rem 1.25rem;
  background: #f4a51e;
  color: #12213a;
  font-size: 0.9rem;
  line-height: 1.4;
}
.preview-bar__tag {
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 0.72rem;
  background: #12213a;
  color: #ffffff;
  border-radius: 999px;
  padding: 0.25rem 0.7rem;
}
.preview-bar__text { flex: 1 1 18rem; }
.preview-bar__back {
  font-weight: 700;
  color: #12213a;
  text-decoration: underline;
  white-space: nowrap;
}

/* Lien d'aperçu dans la voûte. */
.vault-preview-link {
  float: right;
  font-weight: 600;
  color: var(--cyan);
  text-decoration: none;
}
.vault-preview-link:hover { text-decoration: underline; }
.vault-link-btn--ghost {
  margin-left: 0.4rem;
  background: transparent;
  border: 1px solid var(--border);
  color: var(--pale-blue);
}

/* ---------- Infolettre (voûte) ---------- */
.vault-header__actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}
.vault-header__actions .vault-link-btn--ghost { margin-left: 0; }
.vault-header__actions [aria-current="page"] {
  border-color: var(--cyan);
  color: #ffffff;
}
.vault-export {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 1.5rem;
}
.vault-export .vault-link-btn--ghost { margin-left: 0; }
.vault-empty {
  margin-top: 1.5rem;
  color: var(--pale-blue);
}

/* ---------- Voûte : messages de partenariat ---------- */
.vault-messages {
  margin-top: 1.5rem;
  display: grid;
  gap: 1rem;
}
.vault-message {
  border: 1px solid var(--border);
  border-radius: 1rem;
  background: var(--panel);
  padding: 1.25rem;
}
.vault-message__head {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1rem;
  align-items: baseline;
  justify-content: space-between;
}
.vault-message__subject {
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 700;
}
.vault-message__from {
  margin-top: 0.2rem;
  font-size: 0.9rem;
  color: var(--pale-blue);
}
.vault-message__from a { color: var(--cyan); }
.vault-message__date {
  font-size: 0.85rem;
  color: var(--pale-blue);
  white-space: nowrap;
}
.vault-message__body {
  margin-top: 0.9rem;
  padding-top: 0.9rem;
  border-top: 1px solid var(--border);
  line-height: 1.65;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.vault-message__foot {
  margin-top: 1rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1rem;
  align-items: center;
  justify-content: space-between;
}
.vault-message__flag {
  font-size: 0.8rem;
  font-weight: 600;
  color: #d8f2cf;
}
.vault-message__flag--off { color: #ffd0d0; }