/*
 * Polices du site pavlesavic.fr
 *
 * Pavlé possède la licence Commercial Type pour 3 variantes
 * Neue Haas Grotesk Round (Thin / Roman / Bold). Ces fichiers sont
 * dans /fonts/ et sont déjà déclarés dans style.css sous les noms
 * NHG-35Thin, NHG-55Roman, NHG-75Bold.
 *
 * Pour les variantes "Display" (NHGD_*) que la licence ne couvre pas,
 * on fallback sur Inter (Google Fonts, gratuite, dessinée comme alternative
 * directe à Neue Haas Grotesk).
 *
 * Inter sert aussi de fallback cyrillique car Commercial Type ne fournit
 * que les glyphes latins dans les fichiers Web.
 */

/* === Fallback Inter pour les NHGD Display non licenciées === */
@font-face { font-family: 'NHGD_Ult_Th';     src: local('Inter Thin'),       local('Inter-Thin');             font-weight: 100; font-display: swap; }
@font-face { font-family: 'NHGD_Ult_Th_It';  src: local('Inter Thin Italic'), local('Inter-ThinItalic');       font-weight: 100; font-style: italic; font-display: swap; }
@font-face { font-family: 'NHGD_Th';         src: local('Inter ExtraLight'), local('Inter-ExtraLight');       font-weight: 200; font-display: swap; }
@font-face { font-family: 'NHGD_Th_It';      src: local('Inter ExtraLight Italic'), local('Inter-ExtraLightItalic'); font-weight: 200; font-style: italic; font-display: swap; }
@font-face { font-family: 'NHGD_XtraLt';     src: local('Inter Light'),      local('Inter-Light');             font-weight: 300; font-display: swap; }
@font-face { font-family: 'NHGD_XtraLt_It';  src: local('Inter Light Italic'), local('Inter-LightItalic');     font-weight: 300; font-style: italic; font-display: swap; }
@font-face { font-family: 'NHGD_Lt';         src: local('Inter Light'),      local('Inter-Light');             font-weight: 300; font-display: swap; }
@font-face { font-family: 'NHGD_Lt_It';      src: local('Inter Light Italic'), local('Inter-LightItalic');     font-weight: 300; font-style: italic; font-display: swap; }
@font-face { font-family: 'NHGD_Reg';        src: local('Inter Regular'),    local('Inter-Regular');           font-weight: 400; font-display: swap; }
@font-face { font-family: 'NHGD_Regular';    src: local('Inter Regular'),    local('Inter-Regular');           font-weight: 400; font-display: swap; }
@font-face { font-family: 'NHGD_Italic';     src: local('Inter Italic'),     local('Inter-Italic');            font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: 'NHGD_Medium';     src: local('Inter Medium'),     local('Inter-Medium');            font-weight: 500; font-display: swap; }
@font-face { font-family: 'NHGD_Medium_It';  src: local('Inter Medium Italic'), local('Inter-MediumItalic');   font-weight: 500; font-style: italic; font-display: swap; }
@font-face { font-family: 'NHGD_Bold';       src: local('Inter Bold'),       local('Inter-Bold');              font-weight: 700; font-display: swap; }
@font-face { font-family: 'NHGD_Bold_It';    src: local('Inter Bold Italic'), local('Inter-BoldItalic');       font-weight: 700; font-style: italic; font-display: swap; }
@font-face { font-family: 'NHGD_Bold_Italic'; src: local('Inter Bold Italic'), local('Inter-BoldItalic');      font-weight: 700; font-style: italic; font-display: swap; }
@font-face { font-family: 'NHGD_Blk';        src: local('Inter Black'),      local('Inter-Black');             font-weight: 900; font-display: swap; }
@font-face { font-family: 'NHGD_Blk_It';     src: local('Inter Black Italic'), local('Inter-BlackItalic');     font-weight: 900; font-style: italic; font-display: swap; }

/*
 * NOTE: les @font-face pour NHG-35Thin, NHG-55Roman, NHG-75Bold étaient
 * définis dans style.css avec l'ordre EOT → WOFF → WOFF2.
 * On les redéfinit ici pour : 1) prioriser WOFF2 (30% plus léger),
 * 2) ajouter font-display: swap (rendu texte immédiat avec fallback système
 * puis remplacement dès que la police est chargée — évite le FOIT invisible).
 * Les déclarations ci-dessous écrasent celles de style.css (chargé avant).
 */
@font-face {
  font-family: 'NHG-35Thin';
  src: url('/fonts/NeueHaasGrotDispRound-35Thin-Web.woff2') format('woff2'),
       url('/fonts/NeueHaasGrotDispRound-35Thin-Web.woff') format('woff');
  font-display: swap;
}
@font-face {
  font-family: 'NHG-55Roman';
  src: url('/fonts/NeueHaasGrotTextRound-55Roman-Web.woff2') format('woff2'),
       url('/fonts/NeueHaasGrotTextRound-55Roman-Web.woff') format('woff');
  font-display: swap;
}
@font-face {
  font-family: 'NHG-75Bold';
  src: url('/fonts/NeueHaasGrotTextRound-75Bold-Web.woff2') format('woff2'),
       url('/fonts/NeueHaasGrotTextRound-75Bold-Web.woff') format('woff');
  font-display: swap;
}

/*
 * Logo bilingue PAVLE SAVIC / ПАВЛЕ САВИЧ
 *
 * Rendu en SVG inline avec textLength="150" + lengthAdjust="spacingAndGlyphs"
 * pour garantir que les 2 lignes ont EXACTEMENT la même largeur.
 * La même font-size garantit la même hauteur.
 *
 *   ligne 1 : PAVLE SAVIC en NHG-75Bold (vraie police licenciée de Pavlé)
 *   ligne 2 : ПАВЛЕ САВИЧ en Inter Bold (Inter a le jeu cyrillique
 *             que la licence Round-Web ne couvre pas)
 */
/* Remove focus outline on nav links */
.navbar-whatthefilm a:focus,
.navbar-whatthefilm a:active,
.navbar-whatthefilm .navbar-nav > li > a:focus,
.navbar-whatthefilm .navbar-nav > li > a:active {
  outline: none !important;
  box-shadow: none !important;
}

/* Navbar : fondu in/out au scroll (override du top:-Xpx d'origine) */
.navbar-fixed-top {
  top: 0 !important;
  transition: opacity .5s ease, transform .35s ease;
  opacity: 1;
  transform: translateY(0);
}
.navbar-fixed-top.navbar-hidden {
  opacity: 0;
  transform: translateY(-10px);
  pointer-events: none;
}
/* Vidéo principale en lecture : UI auto-cachée après 1.5s d'inactivité souris
   (navbar + gros bouton Play + barre de contrôles + curseur).
   Fondu rapide 0.3s dans les deux sens. */
body.video-playing .navbar-fixed-top,
body.video-playing #play-showreel,
body.video-playing .wtf-video-controls {
  transition: opacity .3s ease;
}
body.video-ui-hidden-1 .navbar-fixed-top,
body.video-ui-hidden-1 #play-showreel,
body.video-ui-hidden-1 .wtf-video-controls {
  opacity: 0 !important;
  pointer-events: none;
}

/* Mobile : réduire le padding vertical (60px par défaut = navbar de 201px) */
@media (max-width: 767px) {
  .navbar-fixed-top {
    padding: 18px 0 !important;
  }
  /* Cartes solo horizontales : forcer le 16:9 (sinon elles sont trop carrées) */
  .video-container.small-container,
  .video-container.small-container .video-layer,
  .video-container.small-container .image-background {
    aspect-ratio: 16 / 9 !important;
    height: auto !important;
  }
  .video-container.small-container video {
    aspect-ratio: 16 / 9 !important;
    height: auto !important;
    width: 100% !important;
    object-fit: cover;
  }
  /* Menu mobile : FR/EN à la même taille que les autres liens */
  #wtf-mobile-navigation .overlay-content > a {
    font-size: 26px !important;
  }
}

/* =========================================================================
   HOME iPhone — 3 fixes d'affichage cartes (singles + collections)
   =========================================================================

   Problèmes corrigés :

   1. Au tap sur une carte "single", le titre disparait (text-indent:100%
      sur hover de .title-block.small). Sur touch, le hover s'active au
      moment du tap, ce qui cache le texte quelques ms avant la navigation
      → effet de "flash" désagréable.

   2. Sur les cartes "collection", la liste des épisodes (.summary) est
      en display:none par défaut, révélée via JS au hover. Sur iPhone,
      on ne voit donc QUE le label "COLLECTION" + le titre principal,
      les épisodes (ex: "The DJ / Cami Layé Okun", "The Cook / ..."...)
      restent invisibles.

   3. Tailles de texte hétérogènes : singles à 11.9px, collections à
      14-15px. On uniformise sur iPhone pour un rendu cohérent. */
@media (max-width: 767px) {
  /* --- 1. Singles : titre toujours visible, même au tap ----------------- */
  .title-block.small:hover,
  .title-block.small:focus {
    text-indent: 0 !important;
    white-space: normal !important;
    overflow: visible !important;
  }
  .title-block.small,
  .title-block.large {
    opacity: 1 !important;
  }

  /* --- 2. Collections : structure mobile identique au Mac ----------------

     Hiérarchie verticale de haut en bas :
       1. COLLECTION  (label existant, déjà en haut via .video-cover .category)
       2. Liste des épisodes (left-align, centrée verticalement dans l'espace
          entre le label et le titre du bas)
       3. Nom de la collection  (ex. "Lancôme / Terre de roses") — repoussé
          en bas de carte.

     Les épisodes sont alignés à gauche (pas centrés) avec un padding gauche
     identique au padding droit pour que le bloc garde l'air d'une liste
     propre. */
  .video-cover .summary {
    display: flex !important;
    opacity: 1 !important;
    position: absolute !important;
    left: 0 !important;
    right: 0 !important;
    top: 0 !important;
    bottom: 0 !important;
    width: 100% !important;
    height: 100% !important;
    margin: 0 !important;
    /* top 85px = sous le label COLLECTION (12% de 520 ≈ 62 + respiration 23).
       bottom 115px = au-dessus du titre de collection (bottom:22 + hauteur
       titre ~75px + respiration). */
    padding: 85px 28px 115px !important;
    flex-direction: column;
    /* Centre la liste verticalement entre label et titre de collection */
    justify-content: center;
    align-items: flex-start;
    /* Voile sombre léger et homogène pour garantir la lisibilité du texte
       blanc quelle que soit la photo de fond. */
    background: rgba(0, 0, 0, 0.32);
    pointer-events: auto;
  }
  .video-cover .summary ul {
    display: block !important;
    width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
    text-align: left !important;
  }
  .video-cover .summary ul li.episode {
    list-style: none !important;
    margin: 0 0 12px 0 !important;
    padding: 0 !important;
    opacity: 1 !important;
    text-align: left !important;
  }
  .video-cover .summary ul li.episode:last-child {
    margin-bottom: 0 !important;
  }
  .video-cover .summary ul li.episode a {
    color: #fff;
    text-decoration: none;
  }
  /* Sous-titre "EPISODE 1 / THE DJ" — NHG-35Thin 11px uppercase, letterspaced */
  .video-cover .summary ul li.episode span {
    display: block !important;
    font-family: 'NHG-35Thin', 'Inter', sans-serif !important;
    font-size: 11px !important;
    font-weight: 400;
    letter-spacing: 1.6px;
    opacity: 0.75;
    line-height: 1.2;
    text-transform: uppercase;
  }
  /* Titre "Cami Layé Okun" — NHG-55Roman 19px bold, pour garder la présence
     typo du Mac sans déborder même à 6 épisodes (Eminente). */
  .video-cover .summary ul li.episode span.title {
    font-family: 'NHG-55Roman', 'Inter', sans-serif !important;
    font-size: 19px !important;
    font-weight: 700;
    letter-spacing: 0.2px;
    opacity: 1;
    text-transform: none;
    margin-top: 2px;
    line-height: 1.15;
  }
  /* Nom de collection — repoussé EN BAS de la carte (miroir structure Mac).
     Occupe la bande basse avec un léger dégradé pour garantir la lisibilité
     si l'image est claire à cet endroit. */
  .video-container:has(.video-cover .summary) .title-block.large {
    top: auto !important;
    bottom: 22px !important;
    z-index: 11 !important;
    padding: 0 22px !important;
    text-align: center !important;
  }
  .video-container:has(.video-cover .summary) .title-block.large .title {
    font-size: 28px !important;
    line-height: 1.1 !important;
  }
  .video-container:has(.video-cover .summary) .title-block.large > span:not(.title) {
    font-size: 13px !important;
    opacity: 0.85;
    margin-top: 2px;
    display: inline-block;
  }

  /* --- 3. Tailles de texte cartes — on reprend le feeling desktop ---------
     Desktop : title 30px / subtitle 13px (à 555px de large).
     iPhone (~327px de large) : on descend à 26px/13px pour garder la
     présence typographique sans déborder. */
  .title-block.small .title {
    font-size: 26px !important;
    font-weight: 400;
    line-height: 1.1 !important;
  }
  .title-block.small .title-container > span:not(.title) {
    font-size: 13px !important;
    opacity: 0.9;
    margin-top: 4px;
    display: inline-block;
  }
  /* Label catégorie "COLLECTION" — conservé en petit, c'est un tag. */
  .video-cover .category span {
    font-size: 11px !important;
    letter-spacing: 2.5px;
  }
  /* Remonte le label à la même proportion que le desktop (12% au lieu de 16%
     hérité de la règle @media max-width:991px de style.css). */
  .video-container .video-cover .category {
    top: 12% !important;
  }
}

/* =========================================================================
   Header mobile — logo + burger alignés sur les bords de la grille cartons
   =========================================================================
   Les cartons .video-container sont positionnés à x:15 (Bootstrap
   .container padding 15px + .row margin -15px + .col padding 15px = 15px
   du bord du viewport). On aligne le logo et le burger sur ces mêmes 15px
   pour que tout s'inscrive dans la même colonne verticale, quel que soit
   le contenu. */
@media (max-width: 767px) {
  nav.navbar-whatthefilm > .container {
    padding-left: 15px !important;
    padding-right: 15px !important;
  }
  /* Bootstrap ajoute margin-left:-15px à .navbar-header et margin-left:36px
     à .navbar-brand — on les neutralise pour coller le logo au bord interne
     du container (donc x:15). */
  .navbar-whatthefilm .navbar-header {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
  .navbar-whatthefilm .navbar-brand.background-logo {
    margin-left: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  /* Le SVG du logo est rendu au viewBox — pas de changement de hauteur
     nécessaire, l'ajustement se fait sur les marges du <a> parent. */
}

/* =========================================================================
   Titre de section pages projet — "Projets sélectionnés / Selected projects"
   =========================================================================
   Placé au-dessus du bloc related-projects (after making-of / credits),
   en typographie fine uppercase pour ne pas voler la vedette aux cartes,
   mais assez présent pour cadrer la section. */
.selected-projects-label {
  text-align: center;
  padding: 0;
  margin: 0 0 40px;
  /* Vit dans .more-details-container > .container, donc hérite déjà du
     container Bootstrap — pas besoin de padding horizontal ici. */
}
.selected-projects-label span {
  font-family: 'NHG-35Thin', 'Inter', sans-serif;
  font-size: 12px;
  font-weight: 300;
  letter-spacing: 3.5px;
  text-transform: uppercase;
  color: #fff;
  opacity: 0.55;
  display: inline-flex;
  align-items: center;
  gap: 16px;
}
.selected-projects-label span::before,
.selected-projects-label span::after {
  content: "";
  display: block;
  width: 32px;
  height: 1px;
  background-color: currentColor;
  opacity: 0.7;
}
@media (max-width: 767px) {
  .selected-projects-label {
    margin: 0 0 28px;
  }
  .selected-projects-label span {
    font-size: 11px;
    letter-spacing: 3px;
    gap: 12px;
  }
  .selected-projects-label span::before,
  .selected-projects-label span::after {
    width: 24px;
  }
}

/* Language switcher — dropdown au hover desktop.
   Par défaut : on affiche la langue COURANTE. Au hover, l'autre langue
   apparaît en dessous, cliquable pour switcher. */
.navbar-whatthefilm .lang-switch-wrapper {
  position: relative;
}
.navbar-whatthefilm .lang-switch-wrapper > .lang-current {
  display: inline-block;
  font-family: 'NHG-35Thin', 'Inter', sans-serif;
  /* Taille volontairement plus petite que le reste du nav (18px) :
     FR/EN sont un sous-élément du menu, pas un bouton principal. */
  font-size: 14px;
  letter-spacing: 1.5px;
  opacity: .7;
  transition: opacity .25s ease;
  cursor: default;
  /* padding-top ajusté pour que la baseline de FR tombe au même
     niveau que Travaux / Journal / À propos. padding horizontal 0
     pour que FR et EN soient alignés sur la même colonne X. */
  padding: 17px 0 10px;
  line-height: 20px;
  color: #fff;
}
.navbar-whatthefilm .lang-switch-wrapper:hover > .lang-current {
  opacity: 1;
}
.navbar-whatthefilm .lang-dropdown {
  position: absolute;
  /* Collé au bas de .lang-current (qui inclut déjà 8px de padding-bottom
     visuel). Combiné avec padding-top:0 sur le <a>, gap final ~8px. */
  top: 100%;
  left: 0;
  right: 0;
  margin: 0;
  padding: 0;
  list-style: none;
  opacity: 0;
  pointer-events: none;
  transform: translateY(-6px);
  transition: opacity .25s ease, transform .25s ease;
  background: rgba(0,0,0,.85);
  z-index: 30;
}
.navbar-whatthefilm .lang-switch-wrapper:hover .lang-dropdown,
.navbar-whatthefilm .lang-switch-wrapper:focus-within .lang-dropdown {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}
.navbar-whatthefilm .lang-dropdown a {
  display: block;
  /* padding horizontal 0 + text-align left = EN pile sous FR (pas de
     décalage latéral). padding vertical minimal pour rapprocher. */
  padding: 0 0 6px;
  font-family: 'NHG-35Thin', 'Inter', sans-serif;
  /* Même taille que .lang-current → FR et EN visuellement identiques. */
  font-size: 14px;
  letter-spacing: 1.5px;
  color: #fff;
  opacity: .7;
  text-align: left;
  transition: opacity .25s ease;
  text-decoration: none;
}
.navbar-whatthefilm .lang-dropdown a:hover {
  opacity: 1;
  text-decoration: none;
}

/* Nav items resserrés — matchait la photo de référence WTF fond bleu
   (Work/Talent/About serrés). L'ancienne valeur était 30px = 60px entre
   deux items du milieu, trop aéré. */
.navbar-whatthefilm .nav > li:not(:first-child):not(:last-child) {
  margin: 0 14px !important;
}
#wtf-mobile-navigation .overlay-content a[hreflang] {
  opacity: .6;
  font-size: 0.7em;
  margin-top: 10px;
}

.navbar-whatthefilm .background-logo,
.background-logo {
  background-image: none !important;
  width: auto !important;
  display: inline-flex !important;
  align-items: center;
  justify-content: flex-start;
  padding: 0 0 0 15px;
  height: 80px;
  text-decoration: none;
}
.background-logo .logo-svg {
  display: block;
  width: 140px;
  height: 80px;
  overflow: visible;
}
.navbar-whatthefilm .background-logo:hover,
.navbar-whatthefilm .background-logo:focus,
.background-logo:hover,
.background-logo:focus {
  text-decoration: none;
}

/* About page — TOUT visible sans scroll (header→footer) sur toutes les tailles,
   y compris iPhone portrait. Layout flex column : nav compacte + about flex-grow
   + CTA + footer tiennent dans 100dvh. */
.about-container {
  margin-bottom: 0 !important;
}
.about-container .about-img {
  background-position: center 55% !important;
}
.about-container .about-img .img-layer {
  height: 110vh !important;
}
.about-container .pavle-description .description-right {
  margin-top: 12vh !important;
}

/* Sur toutes les tailles : layout flex column, plein écran sans scroll */
body.page-about {
  display: flex;
  flex-direction: column;
  min-height: 100dvh;
  max-height: 100dvh;
  overflow: hidden;
}
body.page-about .about-container {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
}
body.page-about .about-container .about-img {
  flex: 1 1 auto;
  min-height: 0;
  height: auto !important;
  padding: 0;
}
body.page-about .about-container .about-img .img-layer {
  height: 100% !important;
  min-height: 0;
}
body.page-about .about-container .pavle-description .description-right {
  margin-top: 8vh !important;
}
body.page-about .about-cta-section { flex: 0 0 auto; }
body.page-about footer.not-fixed { flex: 0 0 auto; }
body.page-about .about-cta-block { min-height: 160px !important; }

/* Mobile : navbar en overlay transparent par-dessus la photo (au lieu de
   prendre 100px du flux). L'image commence donc en y=0 et a toute la place. */
@media (max-width: 767px) {
  body.page-about .navbar-fixed-top {
    position: fixed !important;
    top: 0;
    left: 0;
    right: 0;
    background: transparent !important;
    padding: 10px 0 !important;
    z-index: 100;
  }
  body.page-about .about-cta-block { min-height: 80px !important; }
  body.page-about .about-cta-title { font-size: 20px; margin-bottom: 3px; }
  body.page-about .about-cta-sub { font-size: 11px; }
  body.page-about .about-container .pavle-description .description-right {
    margin-top: 120px !important;
    padding-left: 20px;
    padding-right: 20px;
  }
  /* Lisibilité du texte sur la photo mobile : la photo est contrastée
     au milieu (visage/veste claire) → le texte blanc devient illisible.
     Solution : léger dégradé noir assombri sur la zone où vit le texte
     (haut de la photo, sous la navbar). Dégradé uniquement mobile, pour
     ne pas toucher le rendu desktop. */
  body.page-about .about-container .about-img {
    position: relative;
  }
  body.page-about .about-container .about-img::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(180deg,
      rgba(0, 0, 0, 0.65) 0%,
      rgba(0, 0, 0, 0.55) 40%,
      rgba(0, 0, 0, 0.35) 70%,
      rgba(0, 0, 0, 0) 100%);
    pointer-events: none;
    z-index: 1;
  }
  body.page-about .about-container .about-img .img-layer {
    position: relative;
    z-index: 2;
  }
  /* Renfort : ombre portée forte sur chaque ligne de texte pour
     garantir la lisibilité même là où le dégradé est faible
     (visage/veste claire du sujet qui passe sous le texte). */
  body.page-about .about-container .description-right p {
    text-shadow:
      0 0 8px rgba(0, 0, 0, 0.9),
      0 1px 3px rgba(0, 0, 0, 1);
  }
  /* Footer : copyright + icônes sociales sur la même ligne, texte réduit */
  body.page-about footer .copyright { padding: 14px 0 !important; }
  body.page-about footer .copyright .row {
    display: flex;
    align-items: center;
    margin: 0;
  }
  body.page-about footer .copyright .row > .col-md-6 {
    flex: 1 1 50%;
    width: 50%;
    padding: 0 15px;
    font-size: 11px;
  }
  body.page-about footer .copyright .row > .col-md-6.text-right {
    text-align: right;
  }
  body.page-about .footer-social { margin-left: 10px; }
  body.page-about .footer-social svg { width: 18px; height: 18px; }
}

/* About — 2 big CTA buttons (Contact + Instagram) */
.about-cta-section {
  background: #0b0b0b;
  padding: 0;
}
.about-cta-row {
  display: flex;
  width: 100%;
}
.about-cta-block {
  flex: 1 1 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 240px;
  text-decoration: none !important;
  transition: background .3s ease;
}
.about-cta-block:first-child {
  background: #1a1a1a;
}
.about-cta-block:last-child {
  background: #141414;
}
.about-cta-block:hover {
  background: #252525 !important;
}
.about-cta-title {
  display: block;
  font-family: 'NHG-55Roman', 'Inter', sans-serif;
  font-size: 28px;
  color: #fff;
  letter-spacing: 3px;
  text-transform: uppercase;
  margin-bottom: 4px;
  line-height: 1;
}
.about-cta-sub {
  display: block;
  font-family: 'NHG-35Thin', 'Inter', sans-serif;
  font-size: 12px;
  color: #999;
  letter-spacing: 1px;
  line-height: 1;
}
@media (max-width: 767px) {
  .about-cta-row {
    flex-direction: column;
  }
  .about-cta-block {
    min-height: 160px;
  }
}

/* Hero projet — règles unifiées poster ET vidéo :
   Section toujours en ratio 16:9, pleine largeur, plafonnée à 100dvh.
   — Viewport plus carré que 16:9 (ex. 1400×900) : hauteur = width × 9/16,
     section plus courte que le viewport, credits peek en dessous.
   — Viewport plus plat que 16:9 (ex. 2560×1080) : max-height plafonne à
     100dvh, la section garde la pleine largeur. Le poster (background cover)
     et la vidéo (object-fit cover) remplissent sans bandes noires.
   — 100dvh (dynamic viewport) au lieu de 100vh : sur Safari mobile la
     barre d'URL fait que 100vh dépasse la zone visible. 100dvh suit la
     zone réellement visible. */
#work-details .section {
  width: 100%;
  aspect-ratio: 16 / 9;
  max-height: 100dvh;
  overflow: hidden;
  position: relative;
}
#work-details .section #videoPreview {
  position: absolute !important;
  top: 0;
  left: 0;
  width: 100% !important;
  height: 100% !important;
  background-size: cover !important;
  background-position: center center !important;
}
#work-details .section video#video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* Barre de contrôles : z-index pour rester au-dessus du poster/vidéo,
   et visibilité forcée après clic play (gérée en JS via opacity inline). */
.wtf-video-controls {
  z-index: 20;
}
.wtf-video-controls .mute-btn {
  height: 15px;
  width: 20px;
  border: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M3 9v6h4l5 5V4L7 9H3z'/%3E%3Cpath d='M16.5 12c0-1.77-1.02-3.29-2.5-4.03v8.05c1.48-.73 2.5-2.25 2.5-4.02z'/%3E%3Cpath d='M19 12c0 2.68-1.4 5.05-3.5 6.4v2.15c3.17-1.53 5.5-4.77 5.5-8.55s-2.33-7.02-5.5-8.55v2.15C17.6 6.95 19 9.32 19 12z'/%3E%3C/svg%3E") center/contain no-repeat;
  cursor: pointer;
  padding-top: 2px;
}
.wtf-video-controls .mute-btn.is-muted {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M3 9v6h4l5 5V4L7 9H3z'/%3E%3Cpath d='M16.5 12c0-1.77-1.02-3.29-2.5-4.03v2.21l2.45 2.45c.03-.2.05-.41.05-.63z' opacity='.5'/%3E%3Cline x1='18' y1='6' x2='6' y2='18' stroke='white' stroke-width='2'/%3E%3C/svg%3E");
}
/* Bouton plein écran : 4 coins en équerre (remplace le PNG manquant) */
.wtf-video-controls .full-screen {
  height: 15px;
  width: 20px;
  border: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='square'%3E%3Cpolyline points='4,9 4,4 9,4'/%3E%3Cpolyline points='20,9 20,4 15,4'/%3E%3Cpolyline points='4,15 4,20 9,20'/%3E%3Cpolyline points='20,15 20,20 15,20'/%3E%3C/svg%3E") center/contain no-repeat !important;
  cursor: pointer;
  padding-top: 2px;
}

/* Related projects navigation — 2 horizontal left + 1 vertical right */
.more-details-container {
  background: #0b0b0b;
  padding: 20px 0 90px;
  height: auto !important;
}
.more-details-container h3 {
  color: #787878;
  font-family: 'NHG-35Thin', 'Inter', sans-serif;
  font-size: 14px;
  letter-spacing: 2px;
  text-transform: uppercase;
  text-align: center;
  margin-bottom: 30px;
}
.more-details-container .video-container {
  margin-bottom: 0;
}
/* Flex row so both columns match height */
.related-row {
  display: flex;
  flex-wrap: wrap;
}
/* Left: 2 horizontal cards stacked with gap, natural 300px height from style.css */
.related-col-left {
  display: flex;
  flex-direction: column;
  gap: 30px;
}
/* Right: 1 vertical collection card stretching full column height */
.related-col-right {
  display: flex;
  flex-direction: column;
}
.related-col-right .video-container {
  flex: 1;
  margin-bottom: 0;
}
/* Mobile : empile tout et espace les cartes.
   Sur mobile, les cartes .small-container utilisent aspect-ratio: 16/9 (cf. règle
   plus haut, max-width: 767px). Le bug : quand .related-row reste display: flex
   (flex-direction: column) et que .related-col-left contient des enfants en
   aspect-ratio, le navigateur ne résout pas correctement la taille du flex-item
   col-left (il reste bloqué à ~30px) → col-right chevauche les cartes.
   Solution : sur mobile on n'a de toute façon plus 2 colonnes côte à côte,
   donc on neutralise TOUT le flex (row + cols) et on retombe en flow block
   classique où aspect-ratio se résout normalement. */
@media (max-width: 991px) {
  .related-row {
    display: block;
  }
  .related-col-left,
  .related-col-right {
    display: block;
  }
  .related-col-left .video-container,
  .related-col-right .video-container {
    margin-bottom: 30px;
  }
  .related-col-left .video-container:last-child,
  .related-col-right .video-container:last-child {
    margin-bottom: 0;
  }
  /* Gap de 30px entre la colonne gauche (2 cartes) et la colonne droite
     (Deliveroo) — reproduit l'ancien gap flex sans casser le sizing. */
  .related-col-left {
    margin-bottom: 30px;
  }
}

/* Collection side navigation (prev/next within a collection, circular) */
.collection-side-nav {
  pointer-events: none;
}
.collection-nav-prev,
.collection-nav-next {
  position: fixed;
  top: 50%;
  z-index: 40;
  pointer-events: auto;
  display: none;
  align-items: center;
  gap: 10px;
  font-family: 'NHG-35Thin', 'Inter', sans-serif;
  font-size: 11px;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: #fff;
  text-decoration: none !important;
  white-space: nowrap;
  writing-mode: vertical-rl;
  padding: 12px 14px;
  max-height: 70vh;
}
.collection-nav-prev {
  left: 0;
  transform: translateY(-50%) rotate(180deg);
  transform-origin: center center;
}
.collection-nav-next {
  right: 0;
  transform: translateY(-50%);
}
.collection-nav-prev .collection-nav-label,
.collection-nav-next .collection-nav-label {
  opacity: .65;
  transition: opacity .25s ease;
  overflow: hidden;
  text-overflow: ellipsis;
  max-height: 60vh;
}
.collection-nav-prev .collection-nav-arrow,
.collection-nav-next .collection-nav-arrow {
  opacity: .5;
  transition: opacity .25s ease;
  font-size: 12px;
}
.collection-nav-prev:hover .collection-nav-label,
.collection-nav-next:hover .collection-nav-label,
.collection-nav-prev:hover .collection-nav-arrow,
.collection-nav-next:hover .collection-nav-arrow {
  opacity: 1;
  color: #fff;
}
body.show-collection-nav .collection-nav-prev,
body.show-collection-nav .collection-nav-next {
  display: flex;
}
@media (max-width: 991px) {
  /* Masquer sur mobile — les "related projects" en bas suffisent */
  .collection-side-nav {
    display: none;
  }
}

/* Credits overlay modal */
#credits-modal {
  position: fixed;
  padding: 0;
  margin: 0;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  /* 0.9 → on devine ~10% du contenu derrière à travers le flou */
  background: rgba(11, 11, 11, 0.9);
  z-index: -50000;
  /* Curseur = même croix SVG diagonale que la version statique mobile.
     Clic n'importe où => ferme. */
  cursor: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'><rect x='10.75' y='2' width='2.5' height='20' rx='1' fill='white' transform='rotate(45 12 12)'/><rect x='10.75' y='2' width='2.5' height='20' rx='1' fill='white' transform='rotate(-45 12 12)'/></svg>") 12 12, pointer;
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  /* Scroll vertical si la liste déborde (mobile / beaucoup de noms) */
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
}
/* Quand le modal crédits est ouvert : page figée, plus de scroll
   ni d'interactions sur le contenu derrière (iOS compris).
   Mais on autorise le scroll DANS le modal lui-même. */
body.credits-open,
html.credits-open {
  overflow: hidden !important;
  touch-action: none;
}
body.credits-open #credits-modal {
  touch-action: auto; /* le modal reste scrollable au touch (iOS) */
}
#credits-modal .row {
  /* Flexbox = centrage vertical + horizontal du bloc crédits.
     min-height: 100vh → centrage même quand le contenu est court.
     Si le contenu dépasse 100vh, align-items bascule en start
     côté mobile (media query ci-dessous) et #credits-modal scrolle. */
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  margin: 0;
  padding: 80px 24px;
  box-sizing: border-box;
}
#credits-modal .modal-content {
  /* Override Bootstrap .modal-content qui met un fond blanc + bordure */
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  width: 100%;
  max-width: 720px;
  /* Grille 4 col desktop / 2 col tablet / 1 col mobile.
     Résout l'effet "escalier" des colonnes Bootstrap float quand un
     label gris fait 2 lignes : avec grid + align-items:start toutes
     les cellules d'une même rangée démarrent à la même hauteur. */
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px 20px;
  align-items: start;
}
#credits-modal .artist {
  /* Neutralise les floats et widths Bootstrap (col-md-3 / col-sm-2 /
     col-xs-12) qui cassent le grid. Le gap du grid gère l'espacement. */
  float: none !important;
  width: auto !important;
  padding: 0;
}
@media (max-width: 991px) {
  #credits-modal .modal-content {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 580px) {
  #credits-modal .modal-content {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 767px) {
  #credits-modal .row {
    /* Sur mobile : alignement top pour que la liste scrolle
       naturellement de haut en bas quand il y a beaucoup de noms. */
    align-items: flex-start;
    padding: 60px 20px 80px;
  }
}
#credits-modal span.role {
  display: block;
  color: #787878;
}
#credits-modal span.name {
  display: block;
  color: #fff;
}
/* Desktop : pas de × statique, le curseur crosshair suffit.
   Mobile : on affiche une × SVG diagonale en haut-droit du bloc crédits
   (même DA que le bouton Pause sur la vidéo principale). */
#credits-modal .modal-content {
  position: relative;
}
#work-details .presentation #credits-modal .close-animatedModal,
#credits-modal .close-animatedModal {
  display: none !important;
}
@media (max-width: 767px) {
  #work-details .presentation #credits-modal .close-animatedModal,
  #credits-modal .close-animatedModal {
    display: block !important;
    position: absolute !important;
    top: -52px !important;
    right: 0 !important;
    bottom: auto !important;
    left: auto !important;
    padding: 0 !important;
    width: 32px;
    height: 32px;
    cursor: pointer;
    z-index: 2;
  }
  #credits-modal .close-animatedModal svg {
    width: 100%;
    height: 100%;
    display: block;
  }
}
#more-artists {
  cursor: pointer;
  padding-top: 20px;
  display: block;
}
#more-artists:hover {
  color: #fff;
}

/* Reduce excess black space above footer */
footer.not-fixed .footer {
  padding: 30px 0 !important;
  text-align: center !important;
}
footer .copyright {
  padding: 25px 0 !important;
}
/* Réduire le vide entre la dernière carte et le footer sur la home + page Travaux
   (par défaut, body .wtf-container a margin-bottom: 345px) */
body.page-home .wtf-container,
body.page-work .wtf-container {
  margin-bottom: 40px !important;
}
/* Social icons in footer */
.footer-social {
  display: inline-block;
  color: #fff;
  margin-left: 12px;
  transition: opacity .3s ease;
}
.footer-social:first-child {
  margin-left: 0;
}
.footer-social:hover {
  opacity: .6;
}
.footer-social svg {
  vertical-align: -5px;
}

/* =========================================================================
   Footer mobile (< 768px) — copyright + icônes sociales sur une ligne
   =========================================================================
   Avant : les 2 cols Bootstrap se stackaient (copyright au-dessus, icônes
   en dessous), mal alignées, collées au bord du screen (padding 15px),
   icônes collées entre elles. Sur iPhone, les icônes étaient quasi au
   ras du bord bas du viewport — pas pratique au doigt.

   Fix : flex row, space-between, padding latéral plus généreux, gap
   entre les 2 icônes, et padding-bottom augmenté pour les remonter.

   Note : les règles pour body.page-about (lignes 345-361) sont plus
   spécifiques et continueront d'overrider pour cette page, comportement
   voulu car la page About a ses propres contraintes de hauteur. */
@media (max-width: 767px) {
  footer .copyright {
    padding: 20px 0 32px !important;
  }
  footer .copyright .container {
    padding-left: 24px !important;
    padding-right: 24px !important;
  }
  footer .copyright .row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-left: 0;
    margin-right: 0;
  }
  footer .copyright .row > .col-lg-6,
  footer .copyright .row > .col-md-6 {
    width: auto;
    float: none;
    padding-left: 0;
    padding-right: 0;
  }
  footer .copyright .row > .col-lg-6.text-right,
  footer .copyright .row > .col-md-6.text-right {
    display: flex;
    align-items: center;
    gap: 22px;
  }
  .footer-social {
    padding: 4px;
    margin-left: 0 !important;
  }
}

/* ------------------------------------------------------------------
   A11y — focus visible uniquement au clavier (pas au clic souris),
   pour les boutons du player vidéo et autres contrôles custom.
   ------------------------------------------------------------------ */
.wtf-video-controls button:focus,
.play-showreel .button:focus,
.wtf-video-switcher button:focus,
#more-artists:focus {
  outline: none;
}
.wtf-video-controls button:focus-visible,
.play-showreel .button:focus-visible,
.wtf-video-switcher button:focus-visible,
#more-artists:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 3px;
  border-radius: 2px;
}
.wtf-video-controls .fake-seek-bar:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 2px;
}

/* ------------------------------------------------------------------
   prefers-reduced-motion — désactive les previews vidéo au survol
   des cartes (le JS a déjà un garde-fou pour les devices tactiles).
   On garde l'image de couverture statique + on neutralise les
   transitions d'opacité les plus marquées.
   ------------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  .video-container video {
    display: none !important;
  }
  .video-container .image-background,
  .video-container .title-block {
    opacity: 1 !important;
    transition: none !important;
  }
  .video-container .summary {
    transition: none !important;
  }
  /* Garde la croix et les interactions essentielles fluides, mais
     coupe les longues animations d'entrée/sortie. */
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

/* =========================================================================
   Grands écrans (MacBook 16" Retina, iMac 27", moniteurs 4K)
   =========================================================================
   Bootstrap 3 cap le .container à 1170px à partir de 1200px de viewport.
   Sur un 27" (2560×1440), ça laisse ~700px de vide de chaque côté, et les
   cartes de la grille paraissent minuscules perdues au milieu de l'écran.
   Palier progressif pour ne pas sacrifier la lisibilité du texte sur les
   paliers intermédiaires. */

/* ≥ 1600px : MacBook Pro 16" Retina, iMac 4K désactivé */
@media (min-width: 1600px) {
  .container { width: 1440px !important; }
}

/* ≥ 1920px : écrans Full HD desktop */
@media (min-width: 1920px) {
  .container { width: 1600px !important; }
}

/* ≥ 2400px : iMac 27" 5K (rendu 2560px effectifs), moniteurs 4K natifs */
@media (min-width: 2400px) {
  .container { width: 1800px !important; }
}

/* =========================================================================
   Menu mobile : overlay 100% opaque + label "Menu" masqué quand ouvert
   =========================================================================
   Avant : l'overlay était rgba(0,0,0,0.95), on voyait le contenu de la
   page à travers (sur Pass Culture/Porsche les cartes colorées traversaient
   le menu). + le label "Menu" de la navbar restait affiché par-dessus la
   croix ×, on voyait "Menu ×" superposés dans le coin haut-droit. */
#wtf-mobile-navigation.overlay {
  background-color: #000 !important;
}

/* Cache le label "Menu" quand l'overlay est ouvert. :has() est supporté
   par tous les navigateurs actuels (Safari 15.4+, Chrome 105+, Firefox 121+).
   !important nécessaire car .menu-button a une règle opacity:1 quelque part
   avec sélecteur équivalent ou plus spécifique. */
body:has(#wtf-mobile-navigation.visible) .menu-button {
  opacity: 0 !important;
  pointer-events: none;
  visibility: hidden;
}

/* =========================================================================
   Bouton menu mobile — icône burger minimaliste (3 lignes fines)
   =========================================================================
   On remplace le texte « Menu » par 3 lignes blanches de 1px d'épaisseur,
   22px de large, espacées de 6px. L'épaisseur de 1px colle avec la typo
   fine du logo (Inter weight 400) et le reste de la DA du site (bordures
   fines, lignes de séparation subtiles).

   Technique : le texte « Menu » reste dans le DOM (accessibilité + référence
   JavaScript), on le rend invisible avec font-size:0 + color:transparent.
   Les 3 lignes sont dessinées avec un seul ::before + box-shadow (pas besoin
   de 3 pseudo-éléments, un seul suffit avec 2 ombres portées décalées).

   Zone de touche : 44×44px minimum (recommandation Apple HIG pour pouvoir
   tapper précisément avec le doigt). */
@media (max-width: 767px) {
  #menu-button.menu-button {
    font-size: 0 !important;
    color: transparent !important;
    line-height: 0 !important;
    width: 48px !important;
    height: 54px !important;
    padding: 0 !important;
    position: relative;
    display: inline-block !important;
  }
  /* Burger lignes : 28×2px avec 8px de gap entre les lignes (écart de
     16px sur toute la hauteur). Lignes plus épaisses + plus larges pour
     mieux répondre à la taille du logo à côté. */
  #menu-button.menu-button::before {
    content: "";
    position: absolute;
    top: 50%;
    right: 8px;
    width: 28px;
    height: 2px;
    background-color: #fff;
    transform: translateY(-50%);
    box-shadow: 0 -8px 0 #fff, 0 8px 0 #fff;
    transition: background-color 0.2s ease, box-shadow 0.2s ease;
  }
  #menu-button.menu-button:hover::before,
  #menu-button.menu-button:focus-visible::before {
    background-color: rgba(255, 255, 255, 0.65);
    box-shadow:
      0 -8px 0 rgba(255, 255, 255, 0.65),
      0 8px 0 rgba(255, 255, 255, 0.65);
  }
}

/* =========================================================================
   Crédits — 2 colonnes sur iPhone étroit (< 480px)
   =========================================================================
   Par défaut les crédits passent en col-xs-4 (3 colonnes) sous 768px.
   Problème : noms longs (« Téléphone Maison », « Angelo Marquès ») qui
   wrappent sur 2 lignes dans 125px de largeur, ça devient cramé et
   illisible sur iPhone SE / iPhone 12 mini / iPhone portrait standard.
   Solution : forcer 2 colonnes (col-xs-6 équivalent) en dessous de 480px. */
@media (max-width: 479px) {
  .artist-container .artist.col-xs-4 {
    width: 50%;
  }
}

/* =========================================================================
   Bouton "Lecture / Play" — correction déformation iPhone
   =========================================================================
   Le bouton original (#work-details .play-showreel .button) est un rectangle
   noir avec le texte « Lecture / Play ». Sur mobile, style.css lui applique
   width:70% ce qui le rend trop allongé sur les petits iPhones (aspect
   5:1 qui ressemble à une barre). On remet une largeur auto + min/max
   raisonnables pour garder un bon rapport largeur/hauteur sur mobile.

   Le !important est nécessaire car #work-details .play-showreel .button
   a une spécificité plus forte que notre override sans !important. */
@media (max-width: 767px) {
  #work-details .play-showreel .button,
  #play-showreel {
    width: auto !important;
    min-width: 140px !important;
    max-width: 220px !important;
    padding: 0 24px !important;
    line-height: 46px !important;
    font-size: 14px !important;
    letter-spacing: 1px;
  }
}

/* =========================================================================
   Navbar iPad portrait (768-991px) — resserrer les items
   =========================================================================
   À cette largeur, Bootstrap 3 applique margin:15px aux <a> du menu, ce
   qui crée un écart visuel d'environ 58px entre chaque item (15+14+14+15).
   Sur iPad portrait, ça donne l'impression que les items sont perdus/étalés
   dans la navbar plutôt que groupés.
   On réduit le margin des <a> à 8px ici → écart visuel ~44px, plus compact
   sans coller les items. */
@media (min-width: 768px) and (max-width: 991px) {
  .navbar-whatthefilm .nav > li > a {
    margin-left: 8px !important;
    margin-right: 8px !important;
  }
  .navbar-whatthefilm .nav > li:not(:first-child):not(:last-child) {
    margin: 0 6px !important;
  }
}

/* =========================================================================
   Footer page À propos — aligner avec les CTA pleine largeur au-dessus
   =========================================================================
   Les CTA CONTACT + ME SUIVRE occupent 100% de la largeur du viewport
   (0 → fin). Mais le footer utilise .container (1170px, centré), donc
   le « © Pavlé Savic 2026 » à gauche et les icônes à droite sont indentés
   de ~135px par rapport aux blocs au-dessus. Désalignement visuel.
   Fix : sur la page À propos, forcer le container du footer à être
   full-width avec une padding latérale équivalente au padding des CTA
   blocks au-dessus (0, ou ~15px pour respirer). */
body.page-about footer.not-fixed .copyright > .container {
  width: 100% !important;
  max-width: 100% !important;
  padding-left: 30px;
  padding-right: 30px;
}