/* Réalisatrice : décor fourni dans la première zone uniquement.
   Les couleurs du cadre et d'Autres projets sont volontairement identiques. */
.director-section { --director-panel: #0F1E2E; color: #FAF9F4; background: var(--director-panel); }
.director-featured { background: url('../images/realisatrice/Background-realisatrice.png') center top / cover no-repeat; padding: 3.1vw 0 4vw; }
.director-heading { width: 80%; margin: 0 auto; }
.director-title { color: #9F8F71; margin: 0; font: 500 4.08vw/1.15 "Bodoni Moda", serif; font-optical-sizing: none; font-variation-settings: "opsz" 36; letter-spacing: normal; }
/* Séparateur explicite pour conserver un trait lisible aux petites tailles. */
.director-title-separator { font-family: Georgia, serif; font-weight: 400; }
.director-introduction { margin: 2.2vw 0 2.3vw; font: 300 2.1vw/1.25 "bebas-neue-pro", sans-serif; }
.director-films { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 4.8vw; row-gap: 3.2vw; width: 80%; margin: 0 auto; padding: 2.3vw 5.1vw 3vw; background: var(--director-panel); }
.director-film { min-width: 0; text-align: center; }
.director-poster { height: 27.8vw; display: grid; place-items: center; }
.director-poster img { width: 100%; height: 100%; min-height: 0; object-fit: contain; display: block; }
.director-film h3 { margin: .65vw 0 .55vw; font: 500 2.1vw/1.15 "Bodoni Moda", serif; font-optical-sizing: none; font-variation-settings: "opsz" 36; }
.director-film-notes { margin: 0; font: 300 1.45vw/1.25 "bebas-neue-pro", sans-serif; }
.director-other-projects { padding: 2.8vw 3.3% 3.8vw; background: var(--director-panel); border-top: 1px solid rgb(159 143 113 / 12%); }
.director-other-projects > h3 { margin: 0 0 2vw; color: #9F8F71; font: 500 2.65vw/1.2 "Bodoni Moda", serif; font-optical-sizing: none; font-variation-settings: "opsz" 36; }
.project-carousel { display: grid; grid-template-columns: minmax(0, 1fr) 48px; gap: 1.5vw; align-items: center; }
.project-track { display: flex; gap: 1.4vw; min-width: 0; overflow-x: auto; overflow-y: hidden; padding: 3px 0 12px; scroll-snap-type: x mandatory; scrollbar-width: thin; scrollbar-color: #9F8F71 transparent; overscroll-behavior-x: contain; }
.project-thumbnail { position: relative; flex: 0 0 auto; height: 10.9vw; margin: 0; scroll-snap-align: start; }
.project-thumbnail img { display: block; width: auto; height: 100%; object-fit: contain; }
.project-controls:not([hidden]) { display: flex; flex-direction: column; align-items: center; gap: 5px; }
.project-controls [data-carousel-next] { order: -1; }
.project-controls button { display: grid; place-items: center; width: 48px; height: 44px; padding: 4px; border: 0; background: transparent; color: #9F8F71; cursor: pointer; }
.project-controls button:disabled { visibility: hidden; }
.project-controls svg { width: 40px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.05; stroke-linecap: round; stroke-linejoin: round; }
.project-controls button:focus-visible, .project-track:focus-visible { outline: 1px solid #F0E8DA; outline-offset: 4px; }
@media (max-width: 767px) {
  /* Deux colonnes et trois rangées : les affiches restent entières et lisibles. */
  .director-featured { padding: 7vw 0 8vw; background-position: 67% top; }
  .director-heading { width: 90%; }
  .director-title { font-size: 8.96vw; line-height: 1.12; }
  .director-introduction { margin: 5vw 0 6vw; font-size: 5.1vw; line-height: 1.24; }
  .director-films { width: 92%; padding: 5vw 4vw 6vw; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 4vw; row-gap: 7vw; }
  .director-poster { height: 55vw; }
  .director-film h3 { margin: 2vw 0 1.6vw; font-size: 4.6vw; line-height: 1.15; }
  .director-film-notes { font-size: 3.9vw; line-height: 1.2; }
  .director-other-projects { padding: 7vw 0 7vw; }
  .director-other-projects > h3 { margin: 0 5vw 4vw; font-size: 6.6vw; }
  .project-carousel { display: block; }
  .project-track { gap: 4vw; padding: 3px 5vw 12px; scroll-padding-inline: 5vw; }
  .project-thumbnail { height: 34vw; }
  .project-controls:not([hidden]) { flex-direction: row; justify-content: center; gap: 25px; margin-top: 2vw; }
  .project-controls [data-carousel-next] { order: 0; }
}

@media (min-width: 768px) {
  .project-track::after { content: ""; flex: 0 0 12px; }
  .project-thumbnail:last-of-type { scroll-snap-align: end; scroll-margin-right: 12px; }
}

.director-title { width:fit-content; max-width:80%; }
.director-title-first,.director-title-second { display:block; }
.director-title-second { margin-left:25%; }