/* Homepage: the original portrait, a restrained Immersion banner. */
/* ══════════ BANDEAU IMMERSION ══════════
   Le terracotta reste la couleur d'identification, mais il cesse d'etre
   un aplat : un degrade vertical tres court lui donne une epaisseur de
   matiere, une bloom chaude tombe du haut comme une lumiere rasante, et
   deux filets internes — ivoire en haut, brun en bas — tiennent la bande
   comme une piece posee sur la page. Le texte passe en ivoire chaud ; le
   navy disparait du bandeau. Aucun badge : la date se signale par un
   filet sous la ligne, rien de plus. */
.immersion-banner{
  position:relative;z-index:51;
  color:rgba(255,244,238,.88);
  background:
    radial-gradient(150% 320% at 50% -155%,rgba(255,236,221,.28),rgba(255,236,221,.08) 46%,transparent 68%),
    linear-gradient(178deg,#CF8060 0%,#C9775A 38%,#BA6849 78%,#AD5B3B 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,240,229,.40),
    inset 0 -1px 0 rgba(70,26,12,.34),
    0 12px 30px -22px rgba(122,52,31,.85);
}
.immersion-banner__link{min-height:44px;display:flex;align-items:center;justify-content:center;gap:clamp(18px,3vw,44px);padding-block:7px;font-size:.79rem;line-height:1.4}
.immersion-banner__copy{display:flex;align-items:baseline;gap:16px}
.immersion-banner__copy strong{
  font-size:.68rem;font-weight:600;letter-spacing:.15em;text-transform:uppercase;
  color:#FFF7F2;text-shadow:0 1px 1px rgba(96,38,20,.22);
}
/* le filet qui separe le mot-signal de la phrase : une hairline, pas un point */
.immersion-banner__copy>span{
  color:inherit;padding-left:16px;margin-left:-16px;
  border-left:1px solid rgba(255,236,224,.34);
  text-shadow:0 1px 1px rgba(96,38,20,.20);
}
.immersion-banner__deadline,.immersion-banner__places{white-space:nowrap}
.immersion-banner__deadline{color:#FFF7F2}
.immersion-banner__deadline time{
  font-weight:600;
  text-decoration:underline;text-decoration-thickness:1px;
  text-underline-offset:3px;text-decoration-color:rgba(255,236,222,.5);
}
.immersion-banner__places{color:rgba(255,244,238,.72)}
/* CTA verre : un contour ivoire translucide, pas un bouton plein */
.immersion-banner__cta{
  white-space:nowrap;font-weight:500;color:#FFF7F2;
  padding:.34rem .82rem;border-radius:999px;
  border:1px solid rgba(255,238,227,.46);
  background:rgba(255,241,232,.11);
  box-shadow:inset 0 1px 0 rgba(255,246,239,.30);
  -webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);
  transition:background .38s,border-color .38s,box-shadow .38s;
}
.immersion-banner__cta span{display:inline-block;margin-left:6px;transition:transform .45s cubic-bezier(.2,.8,.2,1)}
.immersion-banner__link:hover .immersion-banner__cta{
  background:rgba(255,243,235,.2);border-color:rgba(255,246,239,.82);
  box-shadow:inset 0 1px 0 rgba(255,250,246,.44),0 6px 16px -10px rgba(66,22,8,.6);
}
.immersion-banner__link:hover .immersion-banner__cta span{transform:translate(3px,-3px)}
.immersion-banner__link:focus-visible{outline:2px solid #FFF7F2;outline-offset:-4px}
.film--natural .film__stage{container-type:inline-size;background:#0B1D33}
.film--natural .film__poster{left:auto;right:0;width:56.25%;object-fit:cover;object-position:50% 50%;transform:none;filter:contrast(1.12) brightness(1.055) sepia(.14) saturate(1.34)}

/* ══════════ ETALONNAGE « WARM EDITORIAL » DE LA VIGNETTE ══════════
   Le fichier source n'est pas touche : tout se joue dans deux calques
   poses au-dessus de l'image, a l'interieur du cadre, et limites a la
   moitie droite ou vit la photo. Grammaire photo, pas filtre : les tons
   moyens — visage, mains, poignets — recoivent une lumiere chaude en
   soft-light ; le fond clair est refroidi vers le navy Samatsa puis
   assombri sur les bords, ce qui detache le sujet et supprime le gris.
   L'image reste quasi-monochrome ; la chaleur ne touche pas les noirs. */
.film--natural .film__stage{isolation:isolate}

/* calque 1 — la lumiere chaude sur le sujet */
.film--natural .film__scrim::before{
  content:"";position:absolute;inset:0 0 0 43.75%;pointer-events:none;
  background:
    radial-gradient(60% 50% at 55% 30%,rgba(234,184,146,.46),rgba(234,184,146,.18) 58%,rgba(234,184,146,.06) 80%),
    radial-gradient(46% 34% at 50% 57%,rgba(231,181,143,.26),transparent 74%),
    radial-gradient(96% 86% at 68% 42%,rgba(201,119,90,.08),transparent 72%);
  mix-blend-mode:soft-light;
}
/* calque 2 — la profondeur : fond refroidi, bords assombris */
/* calque 3 — l'ivoire chaud dans les hautes lumieres
   Un multiply avec un ivoire tres clair : le blanc clinique du studio
   devient un ivoire chaud, les noirs du pull ne bougent pas (noir x
   quoi que ce soit reste noir) et la dominante bleue de la zone photo
   recule. Pose en dernier sur le cadre, mais borne a la moitie droite :
   le bloc titre, le bouton play et la duree, tous a gauche, n'en
   recoivent rien. */
.film--natural .film__frame::after{
  content:"";position:absolute;inset:0 0 0 43.75%;pointer-events:none;
  /* blanc pur a gauche = multiply neutre : la jonction avec le navy
     reste propre, la chaleur ne demarre qu'une fois sur la photo */
  background:
    linear-gradient(90deg,#FFFFFF 0%,rgba(255,255,255,.55) 16%,rgba(255,255,255,0) 30%),
    radial-gradient(104% 94% at 58% 30%,#F7F1E9 0%,#F3E9DF 44%,#EFE0D2 100%);
  mix-blend-mode:multiply;
}

.film--natural .film__scrim::after{
  content:"";position:absolute;inset:0 0 0 43.75%;pointer-events:none;
  background:
    radial-gradient(88% 80% at 54% 38%,transparent 40%,rgba(22,31,42,.24) 78%,rgba(16,24,34,.50) 100%),
    linear-gradient(202deg,rgba(34,52,72,.24) 0%,rgba(34,52,72,.06) 34%,transparent 58%);
}
.film--natural .film__frame:hover .film__poster{transform:none}
.film--natural .film__scrim{background:linear-gradient(90deg,#0B1D33 0%,#0B1D33 44%,rgba(11,29,51,.55) 51%,transparent 65%);opacity:1}
.film--natural .film__title{position:absolute;top:20%;left:4%;width:38%;color:#F3F1ED;font-family:var(--serif);font-weight:400;font-size:clamp(24px,7cqw,48px);line-height:1.06;letter-spacing:-.025em;text-align:center}
.film--natural .film__cta{left:23%;bottom:17%;transform:translateX(-50%);gap:clamp(7px,1.7cqw,12px);white-space:nowrap}
.film--natural .film__btn{width:clamp(36px,9.5cqw,58px)}
.film--natural .film__lead{font-size:clamp(10px,2.05cqw,14px);letter-spacing:0}
.film--natural .film__time{font-size:clamp(9px,1.8cqw,11px);color:rgba(243,241,237,.72)}
.film--natural .play__ring{fill:rgba(243,241,237,.04);stroke:rgba(243,241,237,.8)}
.film--natural .film__frame:hover .play__ring,.film--natural .film__frame:focus-visible .play__ring{fill:#F3F1ED}
@media(max-width:760px){
 .immersion-banner__link{min-height:56px;display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:16px;row-gap:4px;font-size:.78rem;padding-block:10px}
 .immersion-banner__copy{display:contents}
 .immersion-banner__copy strong{grid-column:1;grid-row:1;font-size:.65rem;margin:0}
 .immersion-banner__copy>span{grid-column:1/-1;grid-row:2;line-height:1.5;padding-left:0;margin-left:0;border-left:0}
 .immersion-banner__cta{grid-column:2;grid-row:1;justify-self:end;font-size:.72rem;padding:.22rem .68rem}
}