/* ==========================
   Mise en page "Film" (scope .film-page)
   ========================== */

/* Variables locales */
.film-page {
  --page-max-w: 1400px;
  --page-pad: 16px;
  --film-gap: 16px;
  --film-radius: 12px;
  --film-border: 1px solid var(--bordure, #e6e6e6);
  --film-bg: color-mix(in oklch, var(--fond, #f7f8fa) 92%, white);
  --topbar-h: var(--topbar-h, 64px);      /* hauteur barre/menu si définie ailleurs */
  --film-header-h: 120px;                 /* recalée dynamiquement par JS si besoin */
}

/* Conteneur principal */
.film-page {
  max-width: var(--page-max-w);
  margin-inline: auto;
  padding: var(--page-pad);
  display: grid;
  grid-template-rows: auto 1fr auto;      /* titre + zone 2 colonnes + notes bas */
  gap: 16px;
  box-sizing: border-box;
  min-height: calc(100vh - var(--topbar-h));
}

/* Titre */
.film-page .film-header h1 {
  margin: 0;
  font-size: clamp(1.4rem, 1vw + 1rem, 2rem);
  font-family: "EB Garamond", serif;
}

/* ====== Grille 1/4 - 3/4 ====== */
.film-page .film-layout {
  display: grid;
  grid-template-columns: 1fr 3fr;         /* 1/4 – 3/4 */
  gap: var(--film-gap);
  align-items: stretch;
}

.film-page .film-left,
.film-page .film-right {
  border: var(--film-border);
  border-radius: var(--film-radius);
  background: var(--film-bg);
  overflow: hidden;
  min-height: 260px;
  box-shadow: 0 .5px 1px rgba(0,0,0,.05), 0 4px 16px rgba(0,0,0,.06);
}

/* Colonne gauche */
.film-page .film-left { display: flex; flex-direction: column; }

.film-page .film-left-body {
  padding: 16px 18px;
  display: grid;
  grid-template-rows: auto 1fr;
  gap: 12px;
  flex: 1 1 auto;
  overflow: auto;
}

.film-page .film-subtitle { margin: 0; font-weight: 600; font-size: clamp(1.05rem, .6vw + .85rem, 1.25rem); }
.film-page .film-text { margin: 0; color: #444; line-height: 1.55; }

/* Vignettes */
.film-page .film-left-thumbs {
  padding: 12px 12px 14px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.film-page .film-thumb {
  border: var(--film-border);
  border-radius: 10px;
  background: #eee;
  overflow: hidden;
  aspect-ratio: 1 / 1;
  position: relative;
}

.film-page .film-thumb img {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover; display: block;
}

/* Colonne droite : vidéo */
.film-page .film-right { display: block; }

.film-page .video-card {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  max-height: calc(100vh - var(--topbar-h) - var(--film-header-h) - var(--film-gap));
  background: #000; overflow: hidden;
}

.film-page .video-poster,
.film-page .video-el {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: contain;
  display: block; background: #000;
}

.film-page .video-play {
  position: absolute; inset: 0;
  display: grid; place-items: center;
  cursor: pointer; user-select: none;
}
.film-page .video-play .btn {
  border: 1px solid #ddd; background: rgba(255,255,255,.85);
  padding: .6rem .9rem; border-radius: 999px; font-weight: 600; text-decoration: none;
  backdrop-filter: blur(2px);
}
.film-page .video-play .btn::before { content: "▶"; margin-right: .5rem; font-size: .95em; }

/* Bloc notes bas */
.film-page .film-notes {
  border: var(--film-border);
  border-radius: var(--film-radius);
  background: var(--film-bg);
  padding: 16px 18px;
  color: #444; line-height: 1.55;
  box-shadow: 0 .5px 1px rgba(0,0,0,.05), 0 4px 16px rgba(0,0,0,.06);
}
.film-page .film-notes h3 {
  margin: 0 0 8px 0;
  font-family: "EB Garamond", serif;
  font-size: clamp(1.1rem, .6vw + .9rem, 1.35rem);
}

/* Responsive */
@media (max-width: 900px){
  .film-page { padding: 12px; min-height: auto; }
  .film-page .film-layout { grid-template-columns: 1fr; }
  .film-page .video-card { max-height: none; aspect-ratio: 16/9; }
  .film-page .film-left-thumbs { grid-template-columns: 1fr 1fr; }
}

/* Vignettes bord réduit */
.film-page .film-left-thumbs { padding: 6px 6px 8px; gap: 8px; }
.film-page .film-left-thumbs figure { margin: 0; }
.film-page .film-left-thumbs .film-thumb { border: 1px solid var(--bordure, #e6e6e6); border-radius: 10px; aspect-ratio: 1/1; overflow: hidden; }
.film-page .film-left-thumbs .film-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Desktop: colonnes de même hauteur */
@media (min-width: 901px){
  .film-page { --film-max-h: calc(100vh - var(--topbar-h) - var(--film-header-h) - var(--film-gap)); }
  .film-page .film-left, .film-page .film-right { max-height: var(--film-max-h); }
  .film-page .film-left { overflow: hidden; }
  .film-page .film-right { display: grid; }
  .film-page .film-right .video-card { height: 100%; max-height: var(--film-max-h); }
}

/* Raccourcis visuels */
.film-page .film-left-body { padding-top: 8px; padding-bottom: 12px; }
.film-page .film-title { margin: 4px 0 6px; line-height: 1.2; }
.film-page .film-text + .film-text { margin-top: 8px; }
.film-page .film-left-thumbs { padding: 6px 8px 8px; gap: 8px; }
.film-page .film-left-thumbs .film-thumb { aspect-ratio: 3 / 4; } /* portraits plus hauts ? à ajuster si besoin */

/* Variante : une seule vignette horizontale */
.film-left-thumbs.thumbs-1 {
  grid-template-columns: 1fr;      /* 1 colonne */
  gap: 8px;
  padding: 6px 8px 8px;            /* bordures fines comme avant */
}

/* Rectangle plus large que haut (ajuste si tu veux) */
.film-left-thumbs.thumbs-1 .film-thumb {
  aspect-ratio: 16 / 10;           /* ou 16/9, ou 3/2 */
}

/* Pour une carte : ne pas rogner → contenir et coller en bas */
.film-left-thumbs.thumbs-1 .film-thumb.map img {
  object-fit: contain;              /* on voit toute la carte */
  object-position: bottom center;   /* posée “en bas du rectangle” */
  background: #f7f7f7;              /* fond neutre autour si besoin */
}

/* ==========================
   Cartouche de titre (page film)
   ========================== */
.film-page .film-header{
  position: relative;
  padding: 16px 18px;
  border-radius: var(--film-radius, 12px);
  border: 1px solid color-mix(in srgb, #6b4f1d 18%, #fff);
  background: linear-gradient(180deg,
              color-mix(in srgb, #f7e7c6 85%, #fff) 0%,
              #f3dfb9 100%);
  box-shadow: 0 1px 2px rgba(0,0,0,.06), 0 8px 24px rgba(0,0,0,.08);
}

/* Petite barre verticale à gauche */
.film-page .film-header::before{
  content:"";
  position:absolute;
  inset: 0 auto 0 0;
  width: 6px;
  border-radius: 12px 0 0 12px;
  background: linear-gradient(180deg, #8c5c25, #c08a3d);
}

/* Titre lisible (garde ta famille EB Garamond) */
.film-page .film-header .page-title{
  /* ta règle existante gère déjà la taille & la police */
  color: #3a2a12;
}

/* Mode sombre */
@media (prefers-color-scheme: dark){
  .film-page .film-header{
    border-color: color-mix(in srgb, #cfa565 25%, #000);
    background: linear-gradient(180deg, #2a2216, #241e14);
  }
  .film-page .film-header::before{
    background: linear-gradient(180deg, #c08a3d, #8c5c25);
  }
  .film-page .film-header .page-title{ color: #f5eadb; }
}

.film-page .film-header{
  display: flex;
  align-items: center;   /* centre verticalement */
  justify-content: center; /* centre horizontalement */
  text-align: center;    /* utile si retour à la ligne */
}
.film-page .film-header .page-title{ margin: 0; }

/* ===== Bouton "Sommaire Concours de la Résistance" ===== */
.cnrd-sum-cta {
  display: flex;
  justify-content: center;
  margin: 8px auto 12px;       /* espace vertical réduit (avant/footer) */
  padding: 0 12px;
}

.cnrd-btn {
  --btn-bg: #055A7F;           /* bleu doux "bleuté" */
  background: var(--btn-bg);
  color: #fff;
  text-decoration: none;
  display: inline-block;
  padding: 10px 16px;          /* un peu plus compact aussi */
  border-radius: 10px;
  border: 1px solid rgba(0,0,0,.08);
  box-shadow: 0 4px 14px rgba(0,0,0,.08);
  font-weight: 600;
  letter-spacing: .2px;
  text-align: center;
  line-height: 1.2;
  transition: transform .2s ease, box-shadow .2s ease, filter .2s ease;
}

.cnrd-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 18px rgba(0,0,0,.12);
  filter: brightness(1.04);
}

.cnrd-btn:focus-visible {
  outline: 3px solid #1d4ed8;
  outline-offset: 3px;
}

@media (max-width: 560px) {
  .cnrd-btn { width: 100%; }
}
`
/* ===== Notes complémentaires : texte plus lisible ===== */
.film-notes {
  /* limite la longueur des lignes et centre le bloc */
  max-width: min(72ch, 96vw);
  margin: 14px auto 0;
}

.film-notes h3 {
  font-size: clamp(1.2rem, 0.6vw + 1rem, 1.5rem);
  line-height: 1.25;
  margin: 0 0 8px;
}

.film-notes p {
  font-size: clamp(1.05rem, 0.35vw + 0.95rem, 1.18rem); /* + ~10–15% */
  line-height: 1.65;                                     /* air entre les lignes */
  margin: 0 0 10px;
}