/* ============================================================
   SOLILO FILMS — Night Redesign
   Couche de finition chargée APRÈS base/components/pages/home.
   Pousse le design global : profondeur, clair-obscur, cosmos
   abstrait en gradients, cadres fins, halos, filets orbitaux.
   Aucun asset, aucune photographie, aucun contenu inventé.
   ============================================================ */

/* ---------- Fond général : galaxie abstraite en couches ----------
   On enrichit body::before (halos + vignette) sans le remplacer,
   en ajoutant une nébuleuse diffuse et des étoilettes par gradients. */
body::before {
  background:
    /* Nébuleuse cosmique abstraite (gradients uniquement) */
    radial-gradient(38% 30% at 12% 8%, rgba(175,198,214,0.10), transparent 70%),
    radial-gradient(30% 26% at 90% 18%, rgba(220,232,239,0.07), transparent 70%),
    radial-gradient(46% 40% at 78% 78%, rgba(16,42,67,0.55), transparent 72%),
    radial-gradient(34% 30% at 22% 88%, rgba(175,198,214,0.06), transparent 70%),
    /* Soleil : halo chaud ivoire (SOLILO = soleil) */
    radial-gradient(26% 22% at 16% 82%, rgba(245,235,220,0.14), transparent 70%),
    radial-gradient(14% 12% at 16% 82%, rgba(245,235,220,0.22), transparent 80%),
    /* Lune : halo diffus bleu royal (SOLILO = étoile/lumière) */
    radial-gradient(18% 16% at 84% 22%, rgba(65,105,225,0.18), transparent 75%),
    radial-gradient(6% 6% at 84% 22%, rgba(65,105,225,0.30), transparent 80%),
    /* Halos lumineux clairs (chiaroscuro) */
    radial-gradient(55% 40% at 15% 5%, rgba(220,232,239,0.10), transparent 70%),
    radial-gradient(45% 35% at 88% 12%, rgba(175,198,214,0.08), transparent 70%),
    radial-gradient(60% 45% at 50% 45%, rgba(16,42,67,0.35), transparent 75%),
    radial-gradient(70% 50% at 50% 100%, rgba(6,21,37,0.9), transparent 75%),
    /* Vignettage : concentre le regard */
    radial-gradient(120% 90% at 50% 40%, transparent 55%, rgba(2,8,15,0.6) 100%);
}

/* Étoilettes discrètes supplémentaires, par gradients (poussière d'étoiles) */
body::after {
  background-image:
    url("/static/img/grain.svg"),
    radial-gradient(1px 1px at 6% 18%, rgba(220,232,239,0.5) 50%, transparent 55%),
    radial-gradient(1px 1px at 14% 62%, rgba(220,232,239,0.3) 50%, transparent 55%),
    radial-gradient(1px 1px at 24% 34%, rgba(220,232,239,0.4) 50%, transparent 55%),
    radial-gradient(1px 1px at 33% 80%, rgba(220,232,239,0.28) 50%, transparent 55%),
    radial-gradient(1px 1px at 47% 12%, rgba(220,232,239,0.36) 50%, transparent 55%),
    radial-gradient(1px 1px at 58% 48%, rgba(220,232,239,0.3) 50%, transparent 55%),
    radial-gradient(1px 1px at 66% 26%, rgba(220,232,239,0.42) 50%, transparent 55%),
    radial-gradient(1px 1px at 76% 70%, rgba(220,232,239,0.34) 50%, transparent 55%),
    radial-gradient(1px 1px at 88% 40%, rgba(220,232,239,0.4) 50%, transparent 55%),
    radial-gradient(1px 1px at 18% 8%, rgba(245,235,220,0.6) 50%, transparent 55%),
    radial-gradient(1px 1px at 68% 5%, rgba(245,235,220,0.5) 50%, transparent 55%),
    radial-gradient(1px 1px at 44% 55%, rgba(220,232,239,0.42) 50%, transparent 55%),
    radial-gradient(1px 1px at 90% 60%, rgba(220,232,239,0.36) 50%, transparent 55%);
  background-size: 200px 200px, 100% 100%, 100% 100%, 100% 100%, 100% 100%,
    100% 100%, 100% 100%, 100% 100%, 100% 100%, 100% 100%, 100% 100%,
    100% 100%, 100% 100%, 100% 100%, 100% 100%, 100% 100%;
  opacity: 0.2;
}

/* ---------- Révélation au scroll (IntersectionObserver) ----------
   Ne JAMAIS masquer le contenu si JS absent : on cible uniquement
   html.js .reveal. Le JS ajoute la classe "js" au document. */
html.js .reveal {
  opacity: 1;
  transform: translateY(26px);
  clip-path: inset(0 0 0 0);
  transition:
    transform 0.9s var(--ease-out),
    clip-path 1.1s var(--ease-out);
  will-change: transform, clip-path;
}
html.js .reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
  clip-path: inset(0 0 0 0);
}
/* Décalage élégant des révélations successives */
html.js .reveal.is-visible:nth-child(2) { transition-delay: 0.08s; }
html.js .reveal.is-visible:nth-child(3) { transition-delay: 0.16s; }
html.js .reveal.is-visible:nth-child(4) { transition-delay: 0.24s; }

/* ---------- Filet orbital cosmique (ligne fine + point lumineux) ---------- */
.cosmic-line {
  position: relative;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(175,198,214,0.4), transparent);
  overflow: visible;
}
.cosmic-line::after {
  content: "";
  position: absolute;
  left: 50%;
  top: -2px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--color-light);
  box-shadow: 0 0 10px var(--color-light);
}

/* ============================================================
   Navigation numérotée compacte 00–07
   Numéros au-dessus ou à gauche, lisibles mais secondaires.
   ============================================================ */
.desktop-nav a {
  display: inline-flex;
  align-items: baseline;
  gap: 0.5rem;
}
.desktop-nav a::before {
  content: attr(data-index);
  font-family: var(--font-sans);
  font-size: 0.55rem;
  letter-spacing: 0.1em;
  color: var(--color-gold);
  opacity: 0.7;
  transform: translateY(-1px);
}
.desktop-nav a:hover::before,
.desktop-nav a.active::before {
  opacity: 1;
  text-shadow: 0 0 8px rgba(216,171,118,0.5);
}

/* ============================================================
   Menu mobile plein écran : lignes orbitales + hiérarchie numérotée
   ============================================================ */
.mobile-nav {
  background:
    radial-gradient(60% 40% at 50% 20%, rgba(16,42,67,0.5), transparent 70%),
    radial-gradient(40% 30% at 80% 90%, rgba(175,198,214,0.05), transparent 70%),
    var(--color-night);
}
.mobile-nav::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    radial-gradient(1px 1px at 12% 20%, rgba(220,232,239,0.4) 50%, transparent 55%),
    radial-gradient(1px 1px at 78% 30%, rgba(220,232,239,0.3) 50%, transparent 55%),
    radial-gradient(1px 1px at 30% 80%, rgba(220,232,239,0.34) 50%, transparent 55%),
    radial-gradient(1px 1px at 88% 70%, rgba(220,232,239,0.28) 50%, transparent 55%);
}
.mobile-nav a {
  position: relative;
  display: inline-flex;
  align-items: baseline;
  gap: 0.9rem;
  padding: 0.4rem 0;
}
.mobile-nav a::before {
  content: attr(data-index);
  font-family: var(--font-sans);
  font-size: 0.6rem;
  letter-spacing: 0.14em;
  color: var(--color-gold);
  opacity: 0.75;
}
.mobile-nav a:hover,
.mobile-nav a.nav-contact {
  color: var(--color-ivory);
  text-shadow: 0 0 18px rgba(220,232,239,0.3);
}

/* ============================================================
   Heroes internes : plus amples, asymétriques, filet + large glow
   ============================================================ */
.page-hero {
  position: relative;
  padding-block: clamp(4.5rem, 10vw, 8rem) clamp(3rem, 6vw, 5rem);
  overflow: hidden;
}
.page-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    /* Large glow asymétrique */
    radial-gradient(42% 60% at 78% 30%, rgba(220,232,239,0.10), transparent 70%),
    radial-gradient(30% 40% at 20% 80%, rgba(175,198,214,0.06), transparent 70%);
}
/* Filet vertical de cadrage (à droite) */
.page-hero::after {
  content: "";
  position: absolute;
  top: 0;
  right: clamp(1.5rem, 6vw, 5rem);
  bottom: 0;
  width: 1px;
  background: linear-gradient(transparent, rgba(175,198,214,0.35), transparent);
  opacity: 0.6;
}
.page-hero .container {
  position: relative;
  z-index: 2;
  max-width: 1320px;
}
.page-hero .eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 1.5rem;
}
.page-hero .eyebrow::before {
  content: "";
  width: 34px;
  height: 1px;
  background: linear-gradient(90deg, var(--color-gold), transparent);
}
.page-title {
  font-size: clamp(2.6rem, 6.5vw, 5rem);
  line-height: 1.02;
  max-width: 18ch;
  text-shadow: 0 0 50px rgba(220,232,239,0.18);
}
.page-title em {
  font-style: italic;
  color: var(--color-light);
  text-shadow: 0 0 30px rgba(220,232,239,0.25);
}
.page-intro {
  margin-top: var(--space-3);
  max-width: 52ch;
  color: var(--color-mist);
  font-size: clamp(1rem, 1.6vw, 1.15rem);
  line-height: 1.7;
  font-weight: 300;
}

/* ============================================================
   Cartes non "SaaS" : angles presque carrés, cadres 1px,
   numéro/label éditorial, reflets et profondeur.
   ============================================================ */
.film-card,
.team-card,
.founder-card,
.regard-item,
.partner-box,
.sensib-cta {
  border-radius: 2px;
  border: 1px solid rgba(175,198,214,0.18);
  background: linear-gradient(180deg, rgba(16,42,67,0.28), rgba(6,21,37,0.5));
  box-shadow: 0 1px 0 rgba(220,232,239,0.05) inset, 0 18px 40px rgba(2,8,15,0.35);
  position: relative;
  overflow: hidden;
}
/* Reflet lumineux sur le bord supérieur (effet verre) */
.film-card::before,
.team-card::before,
.founder-card::before,
.regard-item::before,
.partner-box::before,
.sensib-cta::before {
  content: "";
  position: absolute;
  top: 0;
  left: 6%;
  right: 6%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(220,232,239,0.4), transparent);
  opacity: 0.5;
  pointer-events: none;
}
/* Numéro / label éditorial */
.film-card .film-num,
.team-card .team-num,
.founder-card .founder-num,
.regard-item .regard-num {
  position: absolute;
  top: 0.9rem;
  right: 1rem;
  font-family: var(--font-sans);
  font-size: 0.6rem;
  letter-spacing: 0.18em;
  color: var(--color-gold);
  opacity: 0.75;
}
/* Hover : le cadre s'éclaire, la lumière se déplace — pas de grosse translation */
.film-card,
.team-card,
.founder-card,
.regard-item,
.partner-box,
.sensib-cta {
  transition: border-color var(--dur-comp) var(--ease-out),
              box-shadow var(--dur-comp) var(--ease-out),
              transform var(--dur-comp) var(--ease-out);
}
.film-card:hover,
.team-card:hover,
.founder-card:hover,
.regard-item:hover,
.partner-box:hover,
.sensib-cta:hover {
  border-color: rgba(220,232,239,0.45);
  box-shadow: 0 0 0 1px rgba(220,232,239,0.12) inset,
              0 0 30px rgba(220,232,239,0.10),
              0 18px 40px rgba(2,8,15,0.4);
  transform: translateY(-2px);
}

/* ---------- Places noires riches (zones sans asset) ----------
   Halo, cadre, minuscule point lumineux, lignes de cadrage.
   Aucun dessin figuratif. */
.film-thumb,
.featured-visual,
.project-thumb,
.team-photo,
.founder-photo,
.placeholder-frame {
  position: relative;
  background:
    radial-gradient(55% 55% at 50% 45%, rgba(16,42,67,0.5), transparent 72%),
    radial-gradient(30% 30% at 50% 50%, rgba(220,232,239,0.05), transparent 70%),
    linear-gradient(180deg, rgba(16,42,67,0.4), rgba(6,21,37,0.85));
  border: 1px solid rgba(175,198,214,0.16);
  box-shadow: inset 0 0 30px rgba(6,21,37,0.6), 0 0 24px rgba(6,21,37,0.4);
  overflow: hidden;
}
/* Lignes de cadrage (hors-champ) */
.film-thumb::before,
.featured-visual::before,
.project-thumb::before,
.team-photo::before,
.founder-photo::before,
.placeholder-frame::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(90deg, transparent 0, transparent calc(50% - 0.5px), rgba(220,232,239,0.06) 50%, transparent calc(50% + 0.5px), transparent 100%),
    linear-gradient(transparent 0, transparent calc(50% - 0.5px), rgba(220,232,239,0.06) 50%, transparent calc(50% + 0.5px), transparent 100%);
}
/* Minuscule point lumineux (le point de rencontre) */
.film-thumb::after,
.featured-visual::after,
.project-thumb::after,
.team-photo::after,
.founder-photo::after,
.placeholder-frame::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--logo-blue);
  box-shadow: 0 0 12px var(--logo-blue), 0 0 30px rgba(65,105,225,0.5);
  transform: translate(-50%, -50%);
  opacity: 0.8;
}

/* ============================================================
   Showreel : lecteur 16/9 dominant, cadre cinématographique,
   métadonnées sobres.
   ============================================================ */
.showreel-page .page-hero { padding-bottom: clamp(2rem, 4vw, 3rem); }
.showreel-stage {
  position: relative;
  aspect-ratio: 16/9;
  width: 100%;
  background: #02080e;
  border: 1px solid rgba(175,198,214,0.22);
  box-shadow: 0 0 0 1px rgba(6,21,37,0.8) inset,
              0 0 60px rgba(6,21,37,0.6),
              0 0 40px rgba(220,232,239,0.06);
  overflow: hidden;
}
/* Cadre cinématographique : bandes fines haut/bas */
.showreel-stage::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 3;
  background:
    linear-gradient(180deg, rgba(6,21,37,0.5), transparent 6%, transparent 94%, rgba(6,21,37,0.5)),
    linear-gradient(90deg, rgba(6,21,37,0.4), transparent 4%, transparent 96%, rgba(6,21,37,0.4));
}
.showreel-stage .vimeo {
  position: absolute;
  inset: 0;
  z-index: 1;
}
.showreel-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.5rem 2rem;
  margin-top: 1.5rem;
  padding-top: 1.25rem;
  border-top: 1px solid rgba(175,198,214,0.14);
  color: var(--color-mist);
  font-size: 0.78rem;
  letter-spacing: 0.08em;
}
.showreel-meta .meta-label {
  font-size: 0.6rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--color-gold);
  opacity: 0.8;
}

/* ============================================================
   Media card (miniatures / vignettes éditoriales)
   ============================================================ */
.media-card {
  position: relative;
  border: 1px solid rgba(175,198,214,0.18);
  border-radius: 2px;
  background: linear-gradient(180deg, rgba(16,42,67,0.3), rgba(6,21,37,0.55));
  overflow: hidden;
  transition: border-color var(--dur-comp) var(--ease-out),
              box-shadow var(--dur-comp) var(--ease-out);
}
.media-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 6%;
  right: 6%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(220,232,239,0.4), transparent);
  opacity: 0.5;
  pointer-events: none;
}
.media-card:hover {
  border-color: rgba(220,232,239,0.45);
  box-shadow: 0 0 30px rgba(220,232,239,0.10);
}
.media-card .media-thumb {
  position: relative;
  aspect-ratio: 16/10;
  background:
    radial-gradient(55% 55% at 50% 45%, rgba(16,42,67,0.5), transparent 72%),
    linear-gradient(180deg, rgba(16,42,67,0.4), rgba(6,21,37,0.85));
  overflow: hidden;
}
.media-card .media-thumb::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--color-light);
  box-shadow: 0 0 12px var(--color-light);
  transform: translate(-50%, -50%);
  opacity: 0.7;
}
.media-card .media-body {
  padding: 1.1rem 1.25rem 1.25rem;
}
.media-card .media-num {
  display: block;
  font-family: var(--font-sans);
  font-size: 0.6rem;
  letter-spacing: 0.18em;
  color: var(--color-gold);
  opacity: 0.75;
  margin-bottom: 0.4rem;
}
.media-card h3 {
  font-size: 1.2rem;
  line-height: 1.15;
}
.media-card .media-meta {
  margin-top: 0.4rem;
  color: var(--color-mist);
  font-size: 0.78rem;
}

/* ============================================================
   Formulaire premium, contrasté, focus très visible
   ============================================================ */
.contact-form .form-field label {
  color: var(--color-mist);
  font-size: 0.7rem;
  letter-spacing: 0.16em;
}
.form-field input,
.form-field textarea {
  background: rgba(6,21,37,0.6);
  border: 1px solid rgba(175,198,214,0.28);
  border-radius: 2px;
  color: var(--color-ivory);
  padding: 0.9rem 1.1rem;
  transition: border-color var(--dur-comp) var(--ease-out),
              box-shadow var(--dur-comp) var(--ease-out),
              background var(--dur-comp) var(--ease-out);
}
.form-field input::placeholder,
.form-field textarea::placeholder {
  color: rgba(175,198,214,0.5);
}
.form-field input:hover,
.form-field textarea:hover {
  border-color: rgba(220,232,239,0.45);
}
.form-field input:focus,
.form-field textarea:focus {
  outline: none;
  border-color: var(--color-light);
  background: rgba(6,21,37,0.8);
  box-shadow: 0 0 0 1px rgba(220,232,239,0.4),
              0 0 24px rgba(220,232,239,0.12);
}

/* ============================================================
   CTA cosmique : profondeur et halo renforcés
   ============================================================ */
.cta-encounter {
  background:
    radial-gradient(50% 45% at 50% 50%, rgba(16,42,67,0.6), transparent 70%),
    radial-gradient(30% 30% at 50% 50%, rgba(65,105,225,0.10), transparent 70%),
    radial-gradient(20% 20% at 50% 50%, rgba(245,235,220,0.05), transparent 70%),
    #061525;
}
.encounter-title {
  text-shadow: 0 0 50px rgba(65,105,225,0.25), 0 0 90px rgba(245,235,220,0.12);
}

/* ============================================================
   Footer : profondeur et halo
   ============================================================ */
.site-footer {
  background:
    radial-gradient(50% 40% at 50% 0%, rgba(16,42,67,0.5), transparent 70%),
    radial-gradient(30% 30% at 80% 100%, rgba(65,105,225,0.08), transparent 70%),
    radial-gradient(20% 20% at 12% 100%, rgba(245,235,220,0.04), transparent 70%),
    #04101c;
}
.footer-nav a {
  display: inline-flex;
  align-items: baseline;
  gap: 0.5rem;
}
.footer-nav a::before {
  content: attr(data-index);
  font-family: var(--font-sans);
  font-size: 0.5rem;
  letter-spacing: 0.1em;
  color: var(--color-gold);
  opacity: 0.6;
}

/* ---------- Lien social désactivé (LinkedIn en attente) ---------- */
.social-link.is-disabled {
  opacity: 0.45;
  cursor: not-allowed;
  pointer-events: none;
  border-color: rgba(175,198,214,0.12);
}
.social-link.is-disabled:hover {
  transform: none;
  box-shadow: none;
  border-color: rgba(175,198,214,0.12);
}

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width: 1023px) {
  .page-hero::after { right: clamp(1rem, 4vw, 2.5rem); }
  .page-title { font-size: clamp(2.4rem, 7vw, 3.6rem); }
  .showreel-stage { aspect-ratio: 16/9; }
  .film-grid--3, .film-grid--4 { grid-template-columns: repeat(2, 1fr); }
  .program-grid { grid-template-columns: repeat(2, 1fr); }
  .team-grid, .founders-grid, .regard-grid { grid-template-columns: repeat(2, 1fr); }
  .contact-grid { grid-template-columns: 1fr; }
  .sensib-grid { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
  .page-hero { padding-block: 3.5rem 2.5rem; }
  .page-hero::after { display: none; }
  .page-title { font-size: clamp(2.1rem, 11vw, 2.9rem); }
  .page-intro { font-size: 0.98rem; }
  .film-grid, .film-grid--3, .film-grid--4 { grid-template-columns: 1fr; }
  .formation-facts { grid-template-columns: repeat(2, 1fr); }
  .program-grid, .team-grid, .founders-grid, .regard-grid { grid-template-columns: 1fr; }
  .form-row { grid-template-columns: 1fr; }
  .partner-box { flex-direction: column; text-align: center; }
  .sensib-thumbs { grid-template-columns: repeat(2, 1fr); }
  .sensib-cta { flex-direction: column; text-align: center; }
  .showreel-meta { gap: 0.4rem 1.25rem; }
}

/* ============================================================
   Réduction de mouvement : tout est figé, rien ne bouge
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  html.js .reveal {
    opacity: 1;
    transform: none;
    clip-path: none;
    transition: none;
  }
  .film-card, .team-card, .founder-card, .regard-item,
  .partner-box, .sensib-cta, .media-card,
  .form-field input, .form-field textarea {
    transition: none;
  }
}

/* ---------- Ajustements d'intégration vérifiés ---------- */
.nav-index { color: var(--color-gold); font: 400 .52rem/1 var(--font-sans); letter-spacing: .12em; opacity: .7; }
.desktop-nav a::before, .mobile-nav a::before { display: none; }
.desktop-nav { gap: clamp(.55rem, 1.25vw, 1.15rem); }
.desktop-nav a { gap: .3rem; font-size: .6rem; white-space: nowrap; }
.header-inner { max-width: 1440px; }
.social-link.is-disabled { cursor: default; }
.contact-form .btn {
  border-color: var(--color-ivory);
  background: var(--color-ivory);
  color: var(--color-night);
  box-shadow: 0 0 24px rgba(220,232,239,.08);
}
.contact-form .btn:hover, .contact-form .btn:focus-visible {
  background: var(--color-light);
  border-color: var(--color-light);
  box-shadow: 0 0 30px rgba(220,232,239,.18);
}
.contact-form .form-field input, .contact-form .form-field textarea { border-color: rgba(175,198,214,.38); }

/* Un .vimeo utilisé directement comme miniature garde sa place dans la grille. */
.film-thumb.vimeo, .featured-visual.vimeo { position: relative; inset: auto; display: flex; }
/* L'iframe chargée au clic couvre TOUT l'encadré (cover), sans bandes noires,
   quel que soit le ratio de l'encadré (2.5:1 teaser, 1.6:1 mobile, 16:9...).
   NB : le lecteur Vimeo letterboxe si l'iframe n'est pas en 16:9 → on dimensionne
   l'iframe en 16:9 couvrant le conteneur (max largeur/hauteur via cqw/cqh),
   centré et rogné par overflow hidden. */
.film-thumb.vimeo, .featured-visual.vimeo, .sensib-thumb[data-vimeo-id] { container-type: size; overflow: hidden; }
.film-thumb.vimeo iframe, .featured-visual.vimeo iframe, .sensib-thumb[data-vimeo-id] iframe {
  position: absolute; left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  width: max(100%, calc(100cqh * 16 / 9));
  height: max(100%, calc(100cqw * 9 / 16));
  border: 0;
  z-index: 4;
}
.film-thumb.vimeo::before, .film-thumb.vimeo::after { pointer-events: none; }
.film-thumb.vimeo svg, .showreel-stage svg { width: 22px; height: 22px; fill: currentColor; }

/* Orbite galactique : anneaux concentriques, noyau luminescent, champ d'étoiles
   et ceinture d'Orion (trois étoiles alignées). Uniquement des dégradés : aucun
   asset, aucun média inventé. Le cadrage et le noyau se pilotent par variables,
   ce qui permet de garder une scène généreuse sur ordinateur et un cadrage
   resserré sur mobile sans dupliquer la composition. */
.page-orbit {
  --scene-width: min(90vw, 1480px);
  --scene-right: -13vw;
  --scene-opacity: 1;
  --core-x: 50%;
  --core-y: 50%;
  position: absolute; right: var(--scene-right); top: 50%;
  width: var(--scene-width); aspect-ratio: 1.72;
  border: 1px solid rgba(220,232,239,.3); border-radius: 50%;
  transform: translateY(-50%) rotate(-7deg);
  opacity: var(--scene-opacity);
  background:
    /* Noyau luminescent (le « cercle au milieu ») */
    radial-gradient(circle at var(--core-x) var(--core-y), rgba(243,240,233,.95) 0%, rgba(243,240,233,.55) 1%, rgba(216,171,118,.3) 2.4%, rgba(65,105,225,.22) 7%, rgba(16,42,67,.18) 17%, transparent 36%),
    /* Halo diffus derrière la ceinture d'Orion */
    radial-gradient(13% 11% at 35.5% 40.5%, rgba(220,232,239,.16), transparent 72%),
    /* Nébuleuse : bleu profond + bleu royal */
    radial-gradient(44% 34% at 54% 50%, rgba(16,42,67,.5), transparent 74%),
    radial-gradient(28% 22% at 50% 47%, rgba(65,105,225,.16), transparent 76%),
    /* Ceinture d'Orion : trois étoiles alignées, juste à côté du noyau */
    radial-gradient(4.6px 4.6px at 32.5% 43%, rgba(255,255,255,1) 32%, transparent 72%),
    radial-gradient(3.8px 3.8px at 35.5% 40.5%, rgba(255,255,255,1) 32%, transparent 72%),
    radial-gradient(4.6px 4.6px at 38.5% 38%, rgba(255,255,255,1) 32%, transparent 72%),
    /* Champ d'étoiles */
    radial-gradient(1.1px 1.1px at 14% 62%, rgba(220,232,239,.66) 50%, transparent 60%),
    radial-gradient(1.1px 1.1px at 19% 78%, rgba(220,232,239,.5) 50%, transparent 60%),
    radial-gradient(1.3px 1.3px at 22% 44%, rgba(220,232,239,.58) 50%, transparent 60%),
    radial-gradient(1px 1px at 31% 66%, rgba(220,232,239,.46) 50%, transparent 60%),
    radial-gradient(1.3px 1.3px at 38% 33%, rgba(220,232,239,.6) 50%, transparent 60%),
    radial-gradient(1px 1px at 46% 72%, rgba(220,232,239,.42) 50%, transparent 60%),
    radial-gradient(1.2px 1.2px at 57% 28%, rgba(220,232,239,.54) 50%, transparent 60%),
    radial-gradient(1px 1px at 64% 60%, rgba(220,232,239,.4) 50%, transparent 60%),
    radial-gradient(1.3px 1.3px at 73% 36%, rgba(220,232,239,.5) 50%, transparent 60%),
    radial-gradient(1px 1px at 81% 68%, rgba(220,232,239,.4) 50%, transparent 60%),
    radial-gradient(1.4px 1.4px at 89% 30%, rgba(220,232,239,.46) 50%, transparent 60%),
    radial-gradient(1px 1px at 95% 58%, rgba(220,232,239,.38) 50%, transparent 60%);
  box-shadow: inset 0 0 130px rgba(220,232,239,.05), 0 0 110px rgba(220,232,239,.07);
  pointer-events: none;
}
.page-orbit::before { content: ""; position: absolute; inset: 10%; border: 1px solid rgba(220,232,239,.15); border-radius: 50%; }
.page-orbit::after { content: ""; position: absolute; inset: 25%; border: 1px solid rgba(220,232,239,.09); border-radius: 50%; }

/* Accueil : Voie lactée abstraite, flare horizontal et profondeur renforcée. */
.home-page .hero { background: radial-gradient(ellipse 10% 42% at 66% 49%, rgba(243,240,233,.11), transparent 68%), radial-gradient(ellipse 38% 13% at 66% 49%, rgba(220,232,239,.12), transparent 72%), radial-gradient(ellipse 64% 24% at 63% 51%, rgba(175,198,214,.075), transparent 75%), radial-gradient(ellipse 50% 32% at 60% 56%, rgba(216,171,118,.065), transparent 68%), radial-gradient(ellipse 75% 56% at 55% 38%, rgba(16,42,67,.68), transparent 74%), var(--color-night); }
.home-page .hero::after { content: ""; position: absolute; inset: 15% -20% 8% 28%; pointer-events: none; opacity: .48; background: radial-gradient(1px 1px at 8% 38%, rgba(243,240,233,.75) 50%, transparent 60%), radial-gradient(1.5px 1.5px at 27% 61%, rgba(220,232,239,.65) 50%, transparent 60%), radial-gradient(1px 1px at 46% 31%, rgba(243,240,233,.6) 50%, transparent 60%), radial-gradient(1px 1px at 65% 70%, rgba(220,232,239,.7) 50%, transparent 60%), radial-gradient(1.5px 1.5px at 82% 43%, rgba(243,240,233,.7) 50%, transparent 60%), radial-gradient(1px 1px at 94% 58%, rgba(220,232,239,.5) 50%, transparent 60%); transform: rotate(-12deg); }
.identity, .featured, .universes, .inprogress { background-color: #04101c; background-image: radial-gradient(70% 60% at 50% 0%, rgba(16,42,67,.32), transparent 72%); }
/* Profondeur des bandes : chute de lumière verticale + poussière d'étoiles discrète + halo bleu royal du logo */
.identity::before, .featured::before, .universes::before, .inprogress::before { content: ""; position: absolute; inset: 0; pointer-events: none; background:
  linear-gradient(180deg, rgba(220,232,239,.03), transparent 22%),
  radial-gradient(30% 30% at 50% 0%, rgba(65,105,225,.06), transparent 70%),
  radial-gradient(1px 1px at 14% 30%, rgba(220,232,239,.3) 50%,transparent 55%),
  radial-gradient(1px 1px at 38% 62%, rgba(220,232,239,.22) 50%,transparent 55%),
  radial-gradient(1px 1px at 66% 24%, rgba(220,232,239,.26) 50%,transparent 55%),
  radial-gradient(1px 1px at 88% 70%, rgba(220,232,239,.2) 50%,transparent 55%); }
.featured-visual, .project-thumb, .placeholder-frame { background-color: #02080e; background-image: linear-gradient(120deg, transparent 38%, rgba(220,232,239,.035) 50%, transparent 62%), radial-gradient(60% 70% at 50% 50%, rgba(16,42,67,.38), transparent 72%); }
.showreel-body { padding-top: 0; }
.showreel-stage { z-index: 5; }
.showreel-stage .vimeo { background-size: cover; background-position: center; }

@media (max-width: 1023px) {
  .mobile-nav { gap: .55rem; padding-block: 6rem 2rem; }
  .mobile-nav a { width: min(100%, 520px); justify-content: flex-start; font-size: clamp(1.18rem, 4.2vw, 1.7rem); }
  .mobile-nav .nav-index { width: 2.2rem; flex: 0 0 2.2rem; }
  .page-orbit { --scene-width: 96vw; --scene-right: -30vw; --scene-opacity: .72; --core-x: 32%; --core-y: 44%; }
}
@media (max-width: 640px) {
  .page-orbit { --scene-width: 124vw; --scene-right: -52vw; --scene-opacity: .6; --core-x: 30%; --core-y: 42%; }
  .home-page .hero::after { inset-inline: 10% -70%; opacity: .35; }
  .showreel-stage { width: calc(100% + 1rem); margin-left: -.5rem; }
}

/* ============================================================
   Bandeau Showreel — tout en haut du site (au-dessus du header)
   ============================================================ */
.showreel-banner {
  position: relative;
  z-index: 70;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .8rem;
  min-height: 44px;
  padding: .5rem 1rem;
  cursor: pointer;
  background:
    radial-gradient(60% 120% at 50% 0%, rgba(16,42,67,.55), transparent 70%),
    linear-gradient(180deg, rgba(6,21,37,.98), rgba(6,21,37,.92));
  border-bottom: 1px solid rgba(175,198,214,.14);
  overflow: hidden;
  transition: background var(--dur-comp) var(--ease-out);
}
/* Reflet lumineux sur le bord supérieur */
.showreel-banner::before {
  content: "";
  position: absolute;
  top: 0; left: 10%; right: 10%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(220,232,239,.55), transparent);
  opacity: .7;
}
/* Halo doré discret au survol */
.showreel-banner::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(40% 100% at 50% 0%, rgba(216,171,118,.10), transparent 70%);
  opacity: 0;
  transition: opacity var(--dur-comp) var(--ease-out);
}
.showreel-banner:hover, .showreel-banner:focus-visible {
  background:
    radial-gradient(60% 120% at 50% 0%, rgba(16,42,67,.7), transparent 70%),
    linear-gradient(180deg, rgba(6,21,37,.98), rgba(6,21,37,.92));
}
.showreel-banner:hover::after, .showreel-banner:focus-visible::after { opacity: 1; }
.showreel-banner__play {
  position: relative;
  z-index: 1;
  width: 26px; height: 26px;
  display: grid; place-items: center;
  border: 1px solid rgba(216,171,118,.7);
  border-radius: 50%;
  color: var(--color-gold);
  transition: background var(--dur-comp), color var(--dur-comp), box-shadow var(--dur-comp);
}
.showreel-banner:hover .showreel-banner__play, .showreel-banner:focus-visible .showreel-banner__play {
  background: var(--color-gold);
  color: var(--color-night);
  box-shadow: 0 0 18px rgba(216,171,118,.45);
}
.showreel-banner__label {
  position: relative;
  z-index: 1;
  color: var(--color-ivory);
  font-size: .66rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  font-weight: 500;
}
.showreel-banner__hint {
  position: relative;
  z-index: 1;
  color: rgba(175,198,214,.6);
  font-size: .58rem;
  letter-spacing: .14em;
  text-transform: uppercase;
}
/* L'iframe chargée au clic occupe tout le bandeau */
.showreel-banner iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  z-index: 2;
}
@media (max-width: 640px) {
  .showreel-banner__hint { display: none; }
  .showreel-banner { min-height: 40px; }
}

/* ============================================================
   Finition vidéo : miniatures plus vivantes + surbrillance
   ============================================================ */
.film-thumb.vimeo,
.sensib-thumb[data-vimeo-id],
.sensib-player .vimeo,
.showreel-stage .vimeo {
  filter: saturate(.9) contrast(1.05) brightness(1);
  background-position: center 42%;
  box-shadow: inset 0 0 0 1px rgba(220,232,239,.08);
  transition: filter .55s var(--ease-out), transform .55s var(--ease-out), box-shadow .55s var(--ease-out);
}
.film-thumb.vimeo::after,
.sensib-player .vimeo::after,
.showreel-stage .vimeo::after {
  background:
    linear-gradient(180deg, rgba(6,21,37,.03), rgba(6,21,37,.28)),
    radial-gradient(55% 70% at 50% 40%, transparent 45%, rgba(6,21,37,.18));
}
.film-thumb.vimeo::before,
.sensib-player .vimeo::before,
.showreel-stage .vimeo::before {
  content: "";
  position: absolute;
  inset: -35% auto -35% -45%;
  z-index: 2;
  width: 35%;
  pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(220,232,239,.2), transparent);
  transform: skewX(-14deg);
  opacity: 0;
  transition: left .75s var(--ease-out), opacity .3s var(--ease-out);
}
.film-card:hover .film-thumb.vimeo,
.sensib-player:hover .vimeo,
.showreel-stage:hover .vimeo {
  filter: saturate(.95) contrast(1.06) brightness(1.09);
  box-shadow: inset 0 0 0 1px rgba(220,232,239,.28), 0 0 34px rgba(175,198,214,.14);
}
.film-card:hover .film-thumb.vimeo::before,
.sensib-player:hover .vimeo::before,
.showreel-stage:hover .vimeo::before {
  left: 120%;
  opacity: 1;
}
.film-card--video {
  background: linear-gradient(155deg, rgba(16,42,67,.32), rgba(4,16,28,.82));
  box-shadow: 0 18px 60px rgba(0,0,0,.16);
}
.film-card--video:hover { box-shadow: 0 24px 70px rgba(0,0,0,.32), 0 0 34px rgba(175,198,214,.08); }
.film-card--video .film-thumb { aspect-ratio: 16/9; background-repeat: no-repeat; }
.vimeo--editorial {
  isolation: isolate;
  background:
    radial-gradient(circle at 76% 28%, rgba(220,232,239,.16), transparent 24%),
    radial-gradient(ellipse at 24% 78%, rgba(16,42,67,.95), transparent 64%),
    linear-gradient(135deg, #02080e, #102a43 58%, #061525);
}
.vimeo--editorial::after { background: radial-gradient(ellipse at 70% 35%, rgba(220,232,239,.08), transparent 45%), linear-gradient(120deg, transparent, rgba(6,21,37,.38)); }
.vimeo--editorial.vimeo--travel { background: radial-gradient(circle at 72% 28%, rgba(216,171,118,.18), transparent 22%), radial-gradient(ellipse at 22% 75%, rgba(16,42,67,.96), transparent 62%), linear-gradient(145deg, #02080e, #102a43 60%, #061525); }
.editorial-poster__title { position: absolute; left: 1.5rem; bottom: 1.35rem; z-index: 1; width: 62%; color: rgba(243,240,233,.86); font: 300 clamp(1.2rem,2.1vw,2rem)/1.05 var(--font-serif); text-shadow: 0 0 24px rgba(220,232,239,.18); }
.vimeo--editorial .sensib-play { position: absolute; right: 1.5rem; top: 1.5rem; }
.film-card:has(.vimeo--editorial:not(.vimeo--travel)) > h3 { display: none; }
.vimeo--travel .editorial-poster__title { display: none; }

/* Mutualité : composition éditoriale équilibrée avec la seule vidéo réelle. */
.sensib-single { display: grid; grid-template-columns: minmax(0,1.65fr) minmax(230px,.65fr); gap: clamp(2rem,5vw,5rem); align-items: center; }
.sensib-single .sensib-player { margin-bottom: 0; }
.sensib-single__info { position: relative; min-height: 250px; display: flex; flex-direction: column; justify-content: center; padding: 2rem 0 2rem 2rem; border-left: 1px solid rgba(175,198,214,.24); }
.sensib-single__info h3 { margin: 1rem 0 .8rem; color: var(--color-ivory); font: 300 clamp(2rem,3.5vw,3.4rem)/1.02 var(--font-serif); }
.sensib-single__duration { color: rgba(243,240,233,.62); font-size: .65rem; letter-spacing: .2em; }
.sensib-single__line { width: 72%; height: 1px; margin-top: 2rem; background: linear-gradient(90deg, rgba(220,232,239,.55), transparent); box-shadow: 0 0 10px rgba(220,232,239,.15); }

/* Passerelle vers le troisième univers Films. */
.film-category--gateway { padding-bottom: 1rem; }
.film-category--gateway > .eyebrow { margin-bottom: 1.25rem; }
.film-gateway { position: relative; min-height: 360px; display: grid; grid-template-columns: 1.25fr .75fr; overflow: hidden; border: 1px solid rgba(175,198,214,.22); background: #02080e; box-shadow: 0 25px 80px rgba(0,0,0,.28); }
.film-gateway::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(90deg, transparent 35%, rgba(6,21,37,.3) 58%, rgba(6,21,37,.92) 78%); }
.film-gateway__media { display: grid; grid-template-columns: 1.1fr .9fr; grid-template-rows: 1fr 1fr; overflow: hidden; filter: saturate(.78) contrast(1.08) brightness(.9); transition: transform 1.1s var(--ease-out), filter .7s var(--ease-out); }
.film-gateway__media i { display: block; min-width: 0; min-height: 0; background-size: cover; background-position: center; }
.film-gateway__media i:first-child { grid-row: 1 / span 2; }
.film-gateway__media i:nth-child(2) { background-position: center 35%; }
.film-gateway__copy { position: relative; z-index: 2; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; padding: clamp(2rem,5vw,4rem); margin-left: -28%; }
.film-gateway__index { color: var(--color-gold); font-size: .62rem; letter-spacing: .2em; }
.film-gateway__copy strong { margin: 1rem 0 2rem; color: var(--color-ivory); font: 300 clamp(2.1rem,4vw,4rem)/1.02 var(--font-serif); }
.film-gateway:hover .film-gateway__media { transform: scale(1.025); filter: saturate(1) contrast(1.06) brightness(1.02); }

/* Catalogue corporate : respiration entre les familles. */
.corporate-catalogue .film-category { padding-block: clamp(1rem,3vw,2rem); }
.corporate-catalogue .category-title { margin-bottom: clamp(2rem,4vw,3.5rem); }
.travel-feature { width: min(100%, 980px); }
.travel-feature .film-card { display: grid; grid-template-columns: 1.6fr .7fr; }
.travel-feature .film-card h3, .travel-feature .film-card .mist { grid-column: 2; align-self: end; }
.travel-feature .film-thumb { grid-row: 1 / span 2; }

/* Navigation : le menu complet passe au hamburger avant de se tasser. */
@media (max-width: 1299px) {
  .desktop-nav { display: none; }
  .nav-toggle { display: block; position: relative; z-index: 62; }
  .header-inner { min-height: 82px; }
  .mobile-nav { z-index: 58; }
}
@media (max-width: 1023px) {
  .footer-top { grid-template-columns: 1fr 1.25fr; gap: 3rem; }
  .footer-contact { grid-column: 1 / -1; padding-top: 1rem; }
}
@media (max-width: 720px) {
  .sensib-single { grid-template-columns: 1fr; gap: 1.5rem; }
  .sensib-single__info { min-height: auto; padding: 1.5rem 0 1rem 1.25rem; }
  .film-gateway { min-height: 460px; grid-template-columns: 1fr; }
  .film-gateway::after { background: linear-gradient(180deg, transparent 25%, rgba(6,21,37,.36) 54%, rgba(6,21,37,.98) 78%); }
  .film-gateway__media { min-height: 280px; background-image: linear-gradient(180deg, transparent 55%, #02080e), var(--gateway-image); }
  .film-gateway__copy { margin: -22% 0 0; padding: 1.5rem; }
  .film-gateway__copy strong { font-size: clamp(2rem,10vw,3rem); }
  .travel-feature .film-card { display: block; }
  .footer-top { grid-template-columns: 1fr; gap: 2.5rem; }
  .footer-contact { grid-column: auto; padding-top: 0; }
  .footer-nav { column-gap: 1rem; row-gap: .7rem; }
  .footer-nav a { font-size: .66rem; }
}

/* ============================================================
   Pages internes — ordinateur : la scène cosmique prend l'espace
   ------------------------------------------------------------
   Sur grand écran, le hero s'ouvre (hauteur + air) et sert d'écrin
   à l'anneau galactique ; le titre reste au-dessus. Sur mobile les
   proportions existantes sont conservées telles quelles.
   ============================================================ */
@media (min-width: 1024px) {
  .page-hero:has(.page-orbit) {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    display: flex;
    align-items: center;
    /* Plancher : 64 vh, mais jamais moins de 576 px. Sur un portable 1366x768
       (64 vh = 491 px), l'en-tête de Contact — qui porte une ligne de plus —
       dépassait encore les autres ; à 576 px de plancher les huit pages
       internes gardent la même hauteur sur toutes les tailles d'écran. */
    min-height: max(min(64vh, 700px), 36rem);
    /* Remplissage resserré : l'en-tête de Contact porte une ligne de plus que
       les autres (l'amorce « 01 Premier plan »). À 86 px de remplissage il
       dépassait la hauteur commune ; à 63 px il tient, donc les huit pages
       internes ont exactement la même hauteur d'en-tête sur ordinateur. */
    padding-block: clamp(2.5rem, 4.4vw, 4.5rem);
  }
  .page-hero:has(.page-orbit) > .container { position: relative; z-index: 2; }
  /* Le titre garde sa lisibilité sans assombrir la scène. */
  .page-hero:has(.page-orbit) .page-title {
    text-shadow: 0 2px 30px rgba(2,8,15,.55), 0 0 70px rgba(2,8,15,.32);
  }
  /* Titre long, en deux phrases : sur grand écran il reçoit une mesure plus large
     et tient en trois lignes au lieu de quatre. Sans cela son en-tête montait à
     637 px quand toutes les autres pages restaient à 576. La classe n'est posée
     que sur la page concernée : les autres titres gardent leur mesure. */
  .page-hero .page-title--long { max-width: 26ch; }
}

/* ---------- Pendant la lecture : aucune retouche sur le film ---------- */
/* Les vignettes sont légèrement désaturées pour tenir dans l'identité nuit,
   mais ce filtre s'appliquait aussi à la vidéo en cours de lecture : le film
   était servi plus terne qu'il ne l'est. On le coupe dès que le lecteur est en
   place, quel que soit le conteneur (et cela évite un filtre sur l'ancêtre de
   l'iframe, qui gêne le plein écran sur certains navigateurs). */
.vimeo.est-en-lecture,
.sensib-thumb.est-en-lecture[data-vimeo-id],
.sensib-player .vimeo.est-en-lecture,
.showreel-stage .vimeo.est-en-lecture,
.film-thumb.vimeo.est-en-lecture,
.featured-visual.vimeo.est-en-lecture,
.vimeo.est-en-lecture:hover,
.sensib-thumb.est-en-lecture[data-vimeo-id]:hover,
.sensib-player .vimeo.est-en-lecture:hover {
  filter: none;
  box-shadow: none;
  transition: none;   /* le film doit être net dès la première image, pas au bout de 600 ms */
}

/* Le temps que le lecteur se pose : le curseur l'annonce, l'icône s'efface. */
.vimeo.est-en-lecture:not(:has(iframe)),
.sensib-thumb.est-en-lecture:not(:has(iframe)) {
  cursor: progress;
}
.vimeo.est-en-lecture:not(:has(iframe))::before,
.vimeo.est-en-lecture:not(:has(iframe))::after,
.sensib-thumb.est-en-lecture:not(:has(iframe)) > span {
  opacity: 0.25;
  transition: opacity 0.2s ease;
}