/* Courts d'un Soir — page en construction
   Palette et échelles typographiques centralisées ci-dessous. */

:root {
  --plum-900: #23081f;
  --plum-800: #35102f;
  --plum-700: #4e1747;
  --plum-600: #64205c;
  --lavender: #c9bbdd;
  --lavender-dim: #9c8ab5;
  --neon: #ff3fc5;
  --white: #fff;

  --font: "Helvetica Neue", "Segoe UI", Roboto, Arial, system-ui, sans-serif;
  --font-display: "Helvetica Neue", "Arial Black", "Segoe UI", Roboto, sans-serif;

  --gut: clamp(1.25rem, 4vw, 3.5rem);
  --radius: clamp(14px, 1.6vw, 26px);
}

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

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

body {
  margin: 0;
  min-height: 100svh;
  font-family: var(--font);
  color: var(--white);
  background: var(--plum-700);
  background-image:
    radial-gradient(120% 90% at 78% 22%, rgba(255, 63, 197, .22), transparent 58%),
    radial-gradient(90% 80% at 8% 96%, rgba(100, 32, 92, .75), transparent 60%),
    linear-gradient(168deg, var(--plum-700) 0%, var(--plum-800) 62%, var(--plum-900) 100%);
  background-attachment: fixed;
  overflow-x: hidden;
}

[hidden] { display: none !important; }

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

/* Grain très léger pour casser l'aplat de couleur */
.grain {
  position: fixed; inset: 0; z-index: 9;
  pointer-events: none; opacity: .055; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

.page {
  position: relative; z-index: 1;
  display: flex; flex-direction: column;
  min-height: 100svh;
  max-width: 1560px;
  margin: 0 auto;
  padding: clamp(1.1rem, 2.6vw, 2.2rem) var(--gut) 0;
}

/* ---------- Barre du haut ---------- */

.topbar {
  display: flex; align-items: baseline;
  justify-content: space-between; gap: 1rem 1.5rem;
  flex-wrap: wrap;
}

.dates {
  margin: 0;
  display: flex; align-items: baseline; gap: .85rem; flex-wrap: wrap;
  font-size: clamp(.82rem, 1.15vw, 1.02rem);
  font-weight: 600;
  letter-spacing: .13em;
  text-transform: uppercase;
}

.countdown {
  color: var(--lavender);
  font-weight: 500;
  letter-spacing: .09em;
  opacity: .8;
}
.countdown::before {
  content: "";
  display: inline-block;
  width: 22px; height: 1px;
  margin-right: .85rem; vertical-align: middle;
  background: currentColor; opacity: .5;
}

.lang { display: flex; align-items: center; gap: .45rem; }

.lang__btn {
  appearance: none; background: none; border: 0; padding: .2rem .1rem;
  font: inherit; font-size: clamp(.8rem, 1.05vw, .94rem); font-weight: 700;
  letter-spacing: .12em;
  color: var(--lavender); opacity: .55;
  cursor: pointer;
  transition: opacity .18s ease, color .18s ease;
}
.lang__btn:hover { opacity: .85; }
.lang__btn.is-active { color: var(--white); opacity: 1; }
.lang__sep { color: var(--lavender); opacity: .35; font-size: .85rem; }

/* ---------- Bloc principal ---------- */

.hero {
  flex: 1;
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(2.2rem, 5vw, 4rem);
  align-content: center;
  padding: clamp(1.6rem, 3.4vh, 3rem) 0 clamp(1.8rem, 3.8vh, 3.4rem);
}

@media (min-width: 900px) {
  .hero {
    /* La photo prend plus de place que le titre, comme sur la maquette. */
    grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr);
    align-items: center;
    gap: clamp(2.5rem, 3.6vw, 4rem);
  }
}

/* Le logo est le titre : sablier, signature manuscrite et mention
   « festival international… » y sont déjà. Rien à répéter en texte. */
.title { margin: 0; }

.logo {
  display: block;
  width: clamp(240px, 33vw, 430px);
  max-width: 100%;
  height: auto;
}

.hero__media {
  position: relative;
  display: flex; flex-direction: column;
  gap: clamp(1.1rem, 2.2vw, 1.9rem);
}

/* Alignement à droite seulement en deux colonnes ; empilé, tout reste à gauche. */
@media (min-width: 900px) {
  .hero__media { align-items: flex-end; }
}

/* Appel à films : bouton vers la plateforme de soumission. */
.cta {
  display: inline-flex; align-items: center; gap: .75em;
  max-width: 100%;
  padding: clamp(.55rem, .95vw, .75rem) clamp(1rem, 1.7vw, 1.4rem);
  border-radius: 999px;
  background: var(--lavender);
  color: var(--plum-800);
  font-size: clamp(.68rem, .92vw, .82rem);
  font-weight: 800;
  letter-spacing: .085em;
  line-height: 1.3;
  text-transform: uppercase;
  text-decoration: none;
  transition: transform .22s cubic-bezier(.2, .8, .3, 1), background-color .22s ease, box-shadow .22s ease;
}
.cta:hover {
  background: var(--white);
  transform: translateY(-2px);
  box-shadow: 0 14px 34px -14px rgba(0, 0, 0, .6);
}
.cta__arrow { width: 1em; height: 1em; flex: none; transition: transform .22s ease; }
.cta:hover .cta__arrow { transform: translateX(3px); }

.shot {
  position: relative;
  width: 100%;
  margin: 0;
  aspect-ratio: 4 / 3;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--plum-800);
  /* Halo néon en écho à l'enseigne du festival. En box-shadow plutôt qu'en
     pseudo-élément flouté : un filter: blur() sur un z-index négatif empêche
     le navigateur de peindre la photo. */
  box-shadow:
    0 32px 70px -30px rgba(0, 0, 0, .8),
    0 0 130px -22px rgba(255, 63, 197, .5);
}

@media (min-width: 900px) {
  .shot { aspect-ratio: 16 / 10; }
}

/* ---------- Carrousel ----------
   Diapositives empilées (position: absolute), fondu enchaîné par opacité.
   La première est visible par défaut en CSS pur : la page reste correcte
   même si main.js échoue à charger. */

.carousel__slide {
  position: absolute; inset: 0;
  margin: 0;
  opacity: 0;
  transition: opacity 1.1s ease;
}
.carousel__slide.is-active {
  opacity: 1;
  z-index: 1; /* au-dessus des diapositives qui terminent leur fondu de sortie */
}

.carousel__slide picture,
.carousel__slide img {
  display: block;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center 42%;
}

@media (prefers-reduced-motion: reduce) {
  .carousel__slide { transition: none; }
}

/* ---------- Mention d'état ----------
   Ni boucle défilante (effet gabarit), ni pleine largeur (trop agressif pour
   un festival qui s'adresse à des professionnels). Une ligne posée, lisible. */

.band {
  padding: clamp(.9rem, 1.8vw, 1.5rem) 0 0;
  border-top: 1px solid rgba(201, 187, 221, .18);
}

.band__text {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(1.15rem, 2.3vw, 2.1rem);
  line-height: 1.1;
  letter-spacing: -.015em;
  text-transform: uppercase;
  color: var(--white);
}

/* ---------- Pied de page ---------- */

.footer {
  display: flex; align-items: center;
  justify-content: space-between; gap: 1rem 2rem;
  flex-wrap: wrap;
  padding: clamp(1rem, 2.2vw, 1.6rem) 0 clamp(1.3rem, 2.6vw, 2rem);
}

.footer__note {
  margin: 0;
  font-size: clamp(.76rem, 1vw, .88rem);
  letter-spacing: .05em;
  color: var(--lavender);
  opacity: .75;
}

.footer__links {
  display: flex; align-items: center; gap: clamp(1rem, 2.2vw, 1.9rem);
  flex-wrap: wrap;
  margin: 0; padding: 0; list-style: none;
}
.footer__links a {
  color: var(--lavender);
  font-size: clamp(.76rem, 1vw, .88rem);
  font-weight: 600;
  letter-spacing: .11em;
  text-transform: uppercase;
  text-decoration: none;
  border-bottom: 1px solid transparent;
  padding-bottom: 2px;
  transition: color .18s ease, border-color .18s ease;
}
.footer__links a:hover { color: var(--white); border-bottom-color: currentColor; }

/* Le courriel n'est pas un lien : pas de mailto: (on préfère que les gens
   qui écrivent utilisent leur propre logiciel de messagerie), donc pas de
   soulignement au survol ni de majuscules qui nuiraient à la lisibilité. */
.footer__email {
  color: var(--lavender);
  font-size: clamp(.76rem, 1vw, .88rem);
  font-weight: 600;
  letter-spacing: .02em;
}

/* ---------- Petits écrans ----------
   Placé après les règles de base : à spécificité égale, c'est l'ordre qui tranche. */

@media (max-width: 560px) {
  .topbar { flex-wrap: nowrap; align-items: flex-start; }
  .dates { flex-direction: column; gap: .35rem; }
  .countdown::before { display: none; }
}

/* ---------- Accessibilité ---------- */

:focus-visible {
  outline: 2px solid var(--lavender);
  outline-offset: 4px;
  border-radius: 4px;
}

/* Entrée en scène, uniquement si l'utilisateur ne l'a pas désactivée */
@media (prefers-reduced-motion: no-preference) {
  .topbar, .hero__text, .hero__media, .band, .footer {
    animation: rise .85s cubic-bezier(.2, .75, .3, 1) backwards;
  }
  .hero__text  { animation-delay: .06s; }
  .hero__media { animation-delay: .14s; }
  .band        { animation-delay: .22s; }
  .footer      { animation-delay: .28s; }

  @keyframes rise {
    from { opacity: 0; transform: translate3d(0, 18px, 0); }
    to   { opacity: 1; transform: none; }
  }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
  }
}