/* ==========================================================================
   MODÈLES DE PAGE FILM — Template 1 et Template 2 (Films Makers > Com'back)
   --------------------------------------------------------------------------
   Maquettes du 16/10 :
     Template 1 (.tpl-film--1) : infos du film a gauche (colonne collante),
       visuels empiles a droite, coins arrondis (facon Salient « Quantum »).
     Template 2 (.tpl-film--2) : pleine page, grand visuel d'ouverture, titre
       large, infos sur 3 colonnes, blocs « libelle a gauche / texte a
       droite », visuels pleine largeur (facon Salient « Layered »).

   Activation : le premier bloc texte de l'article contient le marqueur
   <div class="tpl-film tpl-film--1|2 ...">. Tout est scope via :has() :
   les autres articles ne sont pas touches. Pour creer une page film, le
   client duplique « Template 1 » ou « Template 2 » dans /admin/ et change
   textes et images.

   Structure ciblee : rendu de app.js (.row > .column > .block) ET rendu
   serveur (.cms-row > .cms-col > .cms-block), pour le SEO et l'affichage
   avant chargement du script.
   ========================================================================== */

/* --- Page : fond noir, header transparent, logo blanc ------------------- */
/* Couleurs du theme article (article-default.css) forcees en clair : sans
   cela, le bloc « Explorer aussi » du bas de page restait en #111 sur noir. */
body.cms-front-route--article:has(.tpl-film) {
  --article-text: #f2f2f2;
  --article-text-muted: rgba(242, 242, 242, 0.7);
  --article-border: rgba(255, 255, 255, 0.14);
  background: #000;
  color: #f2f2f2;
}

body.cms-front-route--article:has(.tpl-film) .subcat-nav {
  border-top-color: rgba(255, 255, 255, 0.14);
}

body.cms-front-route--article:has(.tpl-film) .subcat-nav__title {
  color: #fff;
}

body.cms-front-route--article:has(.tpl-film) main a.subcat-nav__item {
  color: #f2f2f2 !important;
}

body.cms-front-route--article:has(.tpl-film) main a.subcat-nav__item:hover {
  color: #c69300 !important;
}

body.cms-front-route--article:has(.tpl-film) #ajax-content-wrap,
body.cms-front-route--article:has(.tpl-film) .container-wrap,
body.cms-front-route--article:has(.tpl-film) main {
  background: #000;
}

body.cms-front-route--article:has(.tpl-film) #header-outer {
  background-color: transparent !important;
  box-shadow: none !important;
}

body.cms-front-route--article:has(.tpl-film) #header-space {
  height: 0 !important;
  min-height: 0 !important;
}

body.cms-front-route--article:has(.tpl-film) #header-outer #logo img {
  filter: brightness(0) invert(1);
}

/* En-tete et couverture du rendu serveur : non utilises par les modeles
   (titre et visuels sont dans le corps). */
body.cms-front-route--article:has(.tpl-film) .cms-article__header,
body.cms-front-route--article:has(.tpl-film) .cms-article__cover {
  display: none;
}

/* --- Typographie commune ------------------------------------------------- */
#article-content:has(.tpl-film) {
  --tpl-ink: #f2f2f2;
  --tpl-muted: #a3a3a3;
  --tpl-radius: 10px;
  color: var(--tpl-ink);
  font-family: 'DM Sans', sans-serif;
}

#article-content:has(.tpl-film) :is(.row, .cms-row) {
  margin: 0;
  padding: 0;
}

#article-content:has(.tpl-film) :is(.column, .cms-col) {
  min-width: 0;
  padding: 0;
}

#article-content:has(.tpl-film) :is(h1, h2, h3) {
  margin: 0;
  padding: 0;
  font-family: 'Playfair Display', Georgia, serif;
  font-weight: 400;
  font-style: normal;
  letter-spacing: -0.01em;
  color: #fff;
  text-transform: none;
}

#article-content:has(.tpl-film) p {
  margin: 0 0 1.15em;
  padding: 0;
  color: var(--tpl-ink);
}

#article-content:has(.tpl-film) p:last-child {
  margin-bottom: 0;
}

#article-content .tpl-label {
  display: block;
  margin-bottom: 0.5em;
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: 0.1em;
  line-height: 1.2;
  text-transform: uppercase;
  color: var(--tpl-muted);
}

#article-content .tpl-value,
#article-content .tpl-text {
  font-size: 15px;
  line-height: 1.7;
  color: var(--tpl-ink);
}

#article-content .tpl-meta {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.75rem 1.5rem;
}

#article-content .tpl-meta__item--full {
  grid-column: 1 / -1;
}

#article-content:has(.tpl-film) img {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  object-fit: cover;
}

/* --- Videos des blocs « Video » : toutes pages projet ---------------------
   app.js remplace la classe du conteneur par « block » : on cible le bloc
   qui contient le lecteur (sinon iframe a 300 x 150, taille par defaut). */
#article-content div.block:has(> iframe),
#article-content .cms-block__embed {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: #000;
}

#article-content div.block:has(> iframe) > iframe,
#article-content .cms-block__embed > iframe {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

#article-content:has(.tpl-film) div.block:has(> iframe) {
  border-radius: var(--tpl-radius);
}

#article-content video.block {
  display: block;
  width: 100%;
}

/* --- Videos (bloc « Video » ou video du projet, film-video.js) ----------- */
#article-content:has(.tpl-film) :is(video, .block-video--embed, .cms-block__embed) {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: var(--tpl-radius);
  overflow: hidden;
  background: #000;
}

#article-content:has(.tpl-film) :is(.block-video--embed, .cms-block__embed) iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

#article-content .tpl-video {
  position: relative;
}

#article-content .tpl-video > :is(video, iframe) {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  border-radius: var(--tpl-radius);
  background: #000;
}

#article-content .tpl-video.is-playing > img {
  visibility: hidden;
}

#article-content .tpl-video__play {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 78px;
  height: 78px;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.6);
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.35);
  transform: translate(-50%, -50%);
  cursor: pointer;
  transition: background 0.2s, transform 0.2s;
}

#article-content .tpl-video__play::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 54%;
  border-style: solid;
  border-width: 12px 0 12px 20px;
  border-color: transparent transparent transparent #fff;
  transform: translate(-50%, -50%);
}

#article-content .tpl-video__play:hover,
#article-content .tpl-video__play:focus-visible {
  background: #c69300;
  transform: translate(-50%, -50%) scale(1.06);
}

/* --- TEMPLATE 1 : infos a gauche, visuels a droite ----------------------- */
#article-content:has(.tpl-film--1) {
  max-width: 1320px;
  margin: 0 auto;
  padding: clamp(110px, 11vw, 160px) clamp(16px, 5vw, 64px) clamp(4rem, 8vw, 7rem);
}

#article-content:has(.tpl-film--1) :is(.row, .cms-row) {
  display: flex;
  align-items: flex-start;
  gap: clamp(24px, 3.5vw, 48px);
}

/* app.js pose flex en ligne sur chaque colonne : !important pour la grille. */
#article-content:has(.tpl-film--1) :is(.row, .cms-row) > :is(.column, .cms-col):first-child {
  flex: 0 0 33% !important;
  position: sticky;
  top: 110px;
  display: flex;
  flex-direction: column;
  gap: 1.9rem;
}

#article-content:has(.tpl-film--1) :is(.row, .cms-row) > :is(.column, .cms-col):last-child {
  flex: 1 1 0 !important;
  display: flex;
  flex-direction: column;
  gap: clamp(14px, 1.6vw, 20px);
}

/* Titre sur une ligne dans la colonne, comme la maquette. */
#article-content:has(.tpl-film--1) :is(h1, h2) {
  font-size: clamp(1.75rem, 2.3vw, 2.5rem);
  line-height: 1.15;
}

#article-content:has(.tpl-film--1) img {
  border-radius: var(--tpl-radius);
}

/* Proportions des visuels de la maquette : 16:9 puis deux bandeaux larges. */
#article-content:has(.tpl-film--1) :is(.column, .cms-col):last-child > :nth-child(1),
#article-content:has(.tpl-film--1) :is(.column, .cms-col):last-child > :nth-child(1) img {
  aspect-ratio: 16 / 9;
}

#article-content:has(.tpl-film--1) :is(.column, .cms-col):last-child > :nth-child(n + 2),
#article-content:has(.tpl-film--1) :is(.column, .cms-col):last-child > :nth-child(n + 2) img {
  aspect-ratio: 2.35 / 1;
}

#article-content:has(.tpl-film--1) .cms-block--image {
  margin: 0;
  overflow: hidden;
  border-radius: var(--tpl-radius);
}

/* --- TEMPLATE 2 : pleine page ------------------------------------------- */
/* Padding du conteneur article (article-default.css) annule : le visuel
   d'ouverture va bord a bord. */
#article-content:has(.tpl-film--2) {
  max-width: none;
  margin: 0;
  padding: 0 0 clamp(4rem, 8vw, 7rem);
}

#article-content:has(.tpl-film--2) :is(.row, .cms-row) {
  display: block;
  max-width: 1320px;
  margin: 0 auto;
  padding-inline: clamp(16px, 5vw, 64px);
}

/* Visuel d'ouverture : bord a bord, sous le header transparent. */
#article-content:has(.tpl-film--2) :is(.row, .cms-row):first-child {
  max-width: none;
  padding-inline: 0;
}

#article-content:has(.tpl-film--2) :is(.row, .cms-row):first-child img {
  height: min(78vh, 56vw);
  min-height: 320px;
  border-radius: 0;
}

#article-content:has(.tpl-film--2) :is(h1, h2) {
  margin: clamp(3rem, 7vw, 6rem) 0 clamp(2.5rem, 5vw, 4.5rem);
  font-size: clamp(2.6rem, 6.6vw, 7rem);
  line-height: 1.02;
}

#article-content .tpl-meta--3 {
  grid-template-columns: repeat(3, 1fr);
  padding-bottom: clamp(2.5rem, 5vw, 4.5rem);
}

#article-content .tpl-split {
  display: grid;
  grid-template-columns: minmax(0, 22%) minmax(0, 1fr);
  gap: clamp(1.5rem, 4vw, 4rem);
  padding-block: clamp(2rem, 4vw, 3.5rem);
}

#article-content .tpl-split .tpl-text {
  max-width: 68ch;
}

/* Visuels intermediaires et de fin : dans la grille, coins arrondis. */
#article-content:has(.tpl-film--2) :is(.row, .cms-row):not(:first-child) img {
  aspect-ratio: 2.4 / 1;
  margin-block: clamp(2.5rem, 6vw, 5.5rem);
  border-radius: var(--tpl-radius);
}

/* --- Responsive ---------------------------------------------------------- */
@media (max-width: 900px) {
  #article-content:has(.tpl-film--1) :is(.row, .cms-row) {
    flex-direction: column;
  }

  #article-content:has(.tpl-film--1) :is(.row, .cms-row) > :is(.column, .cms-col):first-child {
    flex: 1 1 auto !important;
    position: static;
    width: 100%;
  }

  #article-content:has(.tpl-film--1) :is(.row, .cms-row) > :is(.column, .cms-col):last-child {
    width: 100%;
  }

  #article-content .tpl-split {
    grid-template-columns: 1fr;
    gap: 0.6rem;
  }
}

@media (max-width: 560px) {
  #article-content .tpl-meta--3 {
    grid-template-columns: 1fr 1fr;
  }
}