/* CATEGORY TITLES */
.category-title {
  width: 100%;
  padding: 80px 0;
  background: #050505;
  display: flex;
  justify-content: center;
  align-items: center;
}

.category-title h1 {
  font-size: clamp(2.4rem, 4vw, 4rem);
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: #ffffff;
  opacity: 0;
  animation: fadeTravaux 1.4s ease forwards;
}

/* Filet statique, pas un cadre : reprend l'accent du rôle sous le nom dans le
   hero (#d87a3c) plutôt que le #ff7a00 réservé aux états interactifs — ce
   trait ne réagit à rien, il n'a donc pas sa place dans cette seconde teinte. */
.category-title h1::after {
  content: '';
  display: block;
  width: 56px;
  height: 2px;
  margin: 26px auto 0;
  background: #d87a3c;
}

@keyframes fadeTravaux {
  0% { opacity: 0; transform: translateY(25px); }
  100% { opacity: 1; transform: translateY(0); }
}

/* PROJECTS */
#list-narratif,
#list-clip,
#list-pub {
  position: relative;
  padding-top: 0px;
  background: #050505;
  overflow-x: hidden;
}

.project {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0px 80px;
  gap: 60px;
  margin-bottom: 40px;
}

.project.left .gallery-wrapper { order: 1; }
.project.left .project-info   { order: 2; }

.project.right .gallery-wrapper { order: 2; }
.project.right .project-info    { order: 1; }

.project-info {
  flex: 0.8;
  max-width: 480px;
}

.project-info h2 {
  font-size: 2.4rem;
  margin-bottom: 20px;
}

/* Le titre est un lien vers la page dédiée du projet (deep-link partageable).
   Il reste sobre : c'est .project-link qui porte l'appel à l'action. */
.project-permalink {
  /* `inline-block` et non l'inline par défaut. Ce n'est pas cosmétique.

     Quand le titre contient un séparateur, title_html() place dans ce lien
     trois <span> en `display: block`. Un élément inline contenant des blocs
     oblige le navigateur à fragmenter la ligne en blocs anonymes, et WebKit
     repeint mal ces fragments : le titre disparaît par moments puis revient
     de lui-même. Chrome n'est pas affecté.

     Les deux seuls projets concernés sont « Des instants qui comptent —
     Couple » et « — Grand-père », les seuls dont le titre porte un
     séparateur — et ce sont exactement les deux titres où le défaut a été
     observé sur Safari.

     `inline-block` s'ajuste au contenu comme le faisait l'inline : la zone
     survolable et le centrage sur mobile ne changent pas. */
  display: inline-block;
  color: inherit;
  text-decoration: none;
  transition: opacity 0.2s ease;
}

.project-permalink:hover,
.project-permalink:focus-visible {
  opacity: 0.7;
}

/* ── Bloc d'actions ──
   La fiche technique dit ce qu'est le projet, la description le raconte, ce
   bloc dit où aller. Les deux liens sont empilés au lieu d'être dispersés de
   part et d'autre de la description. */
.project-actions {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 13px;
  margin-top: 26px;
}

/* Sortis de la fiche technique, les liens partagent la même typographie —
   seule la couleur distingue la destination : orange = on quitte le site. */
.project-actions .clip-link {
  font-size: 0.78rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.project-actions .project-link {
  margin-top: 0;
}

/* ── Appel à l'action vers la page projet ──
   Visible au repos : un lien qui ne se signale qu'au survol n'existe pas pour
   qui ne survole jamais. Majuscules + interlettrage + flèche suffisent ; pas de
   filet, la convention du site est que ce qui signale un lien c'est la couleur
   (cf. .clip-link), et un soulignement alourdirait le bloc pour rien. */
.project-link {
  display: inline-flex;
  align-items: baseline;
  gap: 12px;
  margin-top: 26px;
  color: #ffffff;
  text-decoration: none;
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  opacity: 0.85;
  transition: opacity 0.35s ease, color 0.35s ease;
}

.project-link-arrow {
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Survol n'importe où dans le projet : l'appel à l'action se réveille. On
   découvre donc l'interaction en approchant, pas en visant juste. */
.project:hover .project-link {
  opacity: 1;
}

.project:hover .project-link-arrow {
  transform: translateX(4px);
}

.project-link:hover,
.project-link:focus-visible {
  opacity: 1;
  color: #ff7a00;
}

/* Même anneau de focus que sur les images de la mosaïque, plutôt que celui du
   navigateur qui jure avec le reste. */
.project-link:focus-visible {
  outline: 2px solid #ff7a00;
  outline-offset: 6px;
}

.project-link:hover .project-link-arrow,
.project-link:focus-visible .project-link-arrow {
  transform: translateX(9px);
}

.project-info ul {
  list-style: none;
  margin-bottom: 20px;
  opacity: 0.85;
}

.project-info li {
  margin-bottom: 6px;
}

.project-info .description {
  line-height: 1.7;
  opacity: 0.9;
}

/* LIEN YOUTUBE */

.clip-link {
  color: #ff7a00;          /* ton orange */
  text-decoration: none;
  font-weight: 500;
  opacity: 0.85;
  transition: opacity .2s, color .2s;
}

.clip-link:hover,
.clip-link:focus-visible {
  opacity: 1;
  color: #ffa64d;          /* orange plus clair au hover (optionnel) */
}

.clip-link .icon {
  font-size: 0.85em;
  margin-left: 4px;
  color: inherit;          /* la flèche prend la même couleur que le texte */
}

/* ============================================
   PAGE PROJET (projects/<slug>/)
   Titre + fiche centrés, puis mosaïque pleine largeur.
   Pas de scroll horizontal ici : la page est dédiée, autant occuper l'écran.
   ============================================ */
.project-page {
  background: #050505;
  min-height: 100vh;
  padding: clamp(90px, 12vh, 150px) clamp(20px, 4vw, 64px) 0;
  overflow-x: hidden;
}

/* ── En-tête centré ── */
.project-header {
  max-width: 720px;
  margin: 0 auto clamp(40px, 6vh, 72px);
  text-align: center;
}

.project-eyebrow {
  font-size: 0.78rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  opacity: 0.45;
  margin-bottom: 18px;
}

.project-header h1 {
  font-size: clamp(2.1rem, 4.2vw, 3.4rem);
  line-height: 1.15;
  margin-bottom: 24px;
}

.project-synopsis {
  font-size: clamp(1rem, 1.25vw, 1.1rem);
  line-height: 1.75;
  opacity: 0.85;
  margin-bottom: 28px;
}

.project-credits {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px 22px;
  font-size: 0.92rem;
  opacity: 0.75;
}

.project-credits li {
  margin: 0;
}

.project-credits strong {
  font-weight: 500;
  opacity: 0.55;
  margin-right: 6px;
}

/* Le <li> qui porte le lien vidéo dans la fiche technique : passe à la ligne
   seul, sous les crédits. Le style du lien lui-même est sur .clip-link. */
.project-credits .credits-link {
  flex-basis: 100%;
  margin-top: 10px;
  opacity: 1;
}

/* ── Mosaïque ── */
.mosaic {
  display: grid;
  grid-auto-flow: dense;
  gap: clamp(10px, 1vw, 18px);
  max-width: 1800px;
  margin: 0 auto;
}

.mosaic--cols-2 { grid-template-columns: repeat(2, 1fr); }
.mosaic--cols-3 { grid-template-columns: repeat(3, 1fr); }

.mosaic-item {
  margin: 0;
  border-radius: 8px;
  overflow: hidden;
  background: #0d0d0d;
  aspect-ratio: var(--ratio);   /* dimensions réelles du JPEG -> zéro CLS */
  z-index: 1;
  transition: box-shadow 0.45s ease;
}

/* Une panoramique isolée au milieu de plans plus carrés prend deux colonnes. */
.mosaic--cols-3 .mosaic-item--wide { grid-column: span 2; }

/* Survol : le cadre bascule et se détache. Les transformations elles-mêmes sont
   pilotées image par image dans js/mosaic.js (inertie), pas en CSS — une
   transition ici entrerait en conflit avec la boucle d'animation. */
.mosaic-item.is-tilting {
  z-index: 2;
  box-shadow: 0 22px 45px -22px rgba(0, 0, 0, 0.85);
}

/* L'image entière est un bouton : clic et focus clavier, sans habillage. */
.mosaic-open {
  display: block;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  background: none;
  cursor: zoom-in;
}

.mosaic-open:focus-visible {
  outline: 2px solid #ff7a00;
  outline-offset: -4px;
}

.mosaic-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  opacity: 0;
  transition: opacity 0.9s ease-out;
}

.mosaic-item img.loaded {
  opacity: 1;
}

/* Vignette masquée pendant que sa version agrandie est ouverte : sans ça, on
   verrait la même image à deux endroits durant le trajet. */
.mosaic-item.is-open {
  visibility: hidden;
}

/* ── Retour ── */
.project-back {
  display: flex;
  justify-content: center;
  padding: clamp(48px, 7vh, 90px) 0;
}

.project-back a {
  color: #ffffff;
  text-decoration: none;
  font-size: 0.95rem;
  letter-spacing: 0.08em;
  opacity: 0.6;
  transition: opacity 0.2s ease;
}

.project-back a:hover {
  opacity: 1;
}

@media (max-width: 1100px) {
  .mosaic--cols-3 { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 700px) {
  .project-page {
    padding-top: 96px;
  }

  .mosaic--cols-2,
  .mosaic--cols-3 {
    grid-template-columns: 1fr;
  }

  .mosaic--cols-3 .mosaic-item--wide {
    grid-column: auto;
  }

  .project-credits {
    flex-direction: column;
    align-items: center;
    gap: 6px;
  }
}

/* ============================================
   LIGHTBOX
   L'image cliquée vient au centre au premier plan, le reste de la mosaïque
   passe derrière un voile. Piloté par js/lightbox.js.
   ============================================ */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 200;
}

.lightbox-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(4, 4, 4, 0.78);
  opacity: 0;
  transition: opacity 0.42s ease;
}

.lightbox.is-visible .lightbox-backdrop {
  opacity: 1;
}

.lightbox-stage {
  position: absolute;
  overflow: hidden;
  border-radius: 8px;
  box-shadow: 0 40px 90px -40px rgba(0, 0, 0, 0.95);
  will-change: transform;
}

.lightbox-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  transition: opacity 0.16s ease;
}

/* Passage d'une image à l'autre aux flèches : fondu, pas de trajet */
.lightbox-stage.is-swapping .lightbox-img {
  opacity: 0;
}

.lightbox-close {
  position: absolute;
  top: clamp(14px, 2.5vh, 28px);
  right: clamp(14px, 2.5vw, 32px);
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.06);
  color: #ffffff;
  font-size: 1.05rem;
  line-height: 1;
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.42s ease, background 0.2s ease;
}

.lightbox.is-visible .lightbox-close {
  opacity: 0.55;
}

.lightbox.is-visible .lightbox-close:hover,
.lightbox.is-visible .lightbox-close:focus-visible {
  opacity: 1;
  background: rgba(255, 255, 255, 0.14);
}

/* Défilement bloqué pendant l'ouverture. `scrollbar-gutter: stable` sur <html>
   (base.css) évite le décalage de mise en page au moment du blocage. */
.lightbox-open,
.lightbox-open body {
  overflow: hidden;
}

/* ============================================
   MENTIONS DE PROJETS DANS LE TEXTE RÉDACTIONNEL
   Écrites `[[slug|Libellé]]` dans build/templates/, résolues par build.py :
   lien vers la page du projet si elle existe, simple mise en valeur sinon.
   ============================================ */
.mention {
  font-style: italic;
  font-weight: 600;
}

.mention-link {
  color: inherit;
  text-decoration: none;
  transition: color 0.25s ease;
}

.mention-link:hover,
.mention-link:focus-visible {
  color: #ff7a00;
}

.mention-link:focus-visible {
  outline: 2px solid #ff7a00;
  outline-offset: 3px;
  border-radius: 2px;
}