/* ==========================================================================
   NOÉ CHARTON — SPORT FILMMAKER
   Palette / typo / espacements centralisés ici : c'est le premier endroit
   à modifier pour ajuster l'identité de marque.

   Thème sombre neutre : jamais de noir/blanc purs. Fond entre #121212 et
   #1E1E1E, texte entre #E0E0E0 et #F0F0F0 (contraste ~12-15:1).
   ========================================================================== */

:root {
  /* Couleurs de base — fond sombre neutre, texte gris clair */
  --color-bg: #171717;
  --color-bg-alt: #1e1e1e;
  --color-text: #f0f0f0;
  --color-text-dim: #e0e0e0;

  --color-yellow: #e0bc4e;
  --color-yellow-soft: #ebd08a;
  --color-blue: #5682de;
  --color-blue-light: #749ae7;
  --color-blue-soft: #23293b;

  --color-border: rgba(240, 240, 240, 0.14);

  /* Scrim du hero — même base neutre que le reste du site, pas de teinte bleutée */
  --color-scrim: #121212;

  /* Typo */
  --font-display: 'Anton', 'Archivo Narrow', sans-serif;
  --font-serif: 'Playfair Display', 'Didot', 'Times New Roman', serif;
  --font-body: 'Archivo', 'Helvetica Neue', Arial, sans-serif;

  /* Rythme */
  --gutter: clamp(20px, 5vw, 72px);
  --section-pad-y: clamp(64px, 9vw, 120px);

  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  /* Texture de fond : ondes sonores, tuile SVG qui se raccorde à l'identique
     horizontalement et verticalement. Opacité portée par le SVG lui-même. */
  background-color: var(--color-bg);
  background-image: url("../assets/images/texture-waves.svg");
  background-repeat: repeat;
  background-size: 760px 480px;
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
img, video { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, p { margin: 0; }
ul { list-style: none; margin: 0; padding: 0; }
section { padding: var(--section-pad-y) var(--gutter); }
/* display: flex/grid écrase le [hidden] du navigateur : on le rétablit. */
[hidden] { display: none !important; }

/* ---------- Utilitaires ---------- */
.accent { color: var(--color-blue); }

.btn {
  display: inline-block;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  cursor: pointer;
  border: none;
  font-family: var(--font-body);
}
.btn--pill {
  padding: 16px 30px;
  border-radius: 999px;
  background: var(--color-blue);
  color: var(--color-text);
  transition: background 0.3s var(--ease-out), transform 0.3s var(--ease-out);
}
.btn--pill:hover {
  background: var(--color-blue-light);
  transform: translateY(-2px);
}
.btn--ghost {
  background: transparent;
  border: 1px solid var(--color-border);
  color: var(--color-text);
}
.btn--ghost:hover {
  background: rgba(86, 130, 222, 0.14);
  border-color: var(--color-blue);
}

.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.8s var(--ease-out), transform 0.8s var(--ease-out);
}
.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.section-heading {
  margin-bottom: 48px;
}
.section-heading.center {
  text-align: center;
  max-width: 640px;
  margin-left: auto;
  margin-right: auto;
}
.eyebrow {
  display: block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-yellow);
  margin-bottom: 14px;
}
.section-title {
  font-family: var(--font-display);
  text-transform: uppercase;
  font-size: clamp(30px, 5vw, 54px);
  line-height: 1.02;
  letter-spacing: -0.01em;
}
.section-sub {
  margin-top: 14px;
  font-size: 15px;
  color: var(--color-text-dim);
}

/* ---------- Header / Nav ---------- */
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 26px var(--gutter);
  background: transparent;
  transition: background 0.35s var(--ease-out), padding 0.35s var(--ease-out), border-color 0.35s var(--ease-out);
  border-bottom: 1px solid transparent;
}
.site-header.is-scrolled {
  padding-top: 16px;
  padding-bottom: 16px;
  background: rgba(23, 23, 23, 0.92);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--color-border);
}

.logo {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-body);
  font-weight: 300;
  font-size: 17px;
  letter-spacing: 0.08em;
  color: var(--color-text);
}
.logo__img {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  object-fit: cover;
  border: 1px solid var(--color-border);
}

.main-nav {
  display: flex;
  align-items: center;
  gap: 36px;
}
.main-nav a {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-text);
}
.main-nav a:hover { color: var(--color-yellow); }

.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 32px;
  height: 32px;
  background: none;
  border: none;
  cursor: pointer;
}
.nav-toggle span {
  display: block;
  width: 100%;
  height: 2px;
  background: var(--color-text);
}

@media (max-width: 860px) {
  .main-nav {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--color-bg-alt);
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 28px;
    padding: 24px var(--gutter) 32px;
    transform: translateY(-100%);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s var(--ease-out), transform 0.3s var(--ease-out);
  }
  .main-nav.is-open {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
  }
  .main-nav a { font-size: 20px; }
  .nav-toggle { display: flex; z-index: 101; }
}

/* ---------- Hero ---------- */
.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  padding: 120px var(--gutter) 60px;
}
.hero__media {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.hero__video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.hero__scrim {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 60% 45% at 50% 52%, rgba(18, 18, 18, 0.55) 0%, rgba(18, 18, 18, 0) 100%),
    linear-gradient(180deg, rgba(18, 18, 18, 0) 30%, rgba(18, 18, 18, 0.6) 68%, rgba(18, 18, 18, 0.95) 100%),
    linear-gradient(90deg, rgba(18, 18, 18, 0.65) 0%, rgba(18, 18, 18, 0) 28%, rgba(18, 18, 18, 0) 72%, rgba(18, 18, 18, 0.65) 100%);
}

.hero__content {
  position: relative;
  z-index: 1;
  max-width: 760px;
  text-align: center;
}
/* Titre cinéma : serif italique à fort contraste, halo lumineux (et non
   une ombre portée) pour détacher le texte de la vidéo. */
.hero__title {
  position: relative;
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  line-height: 1.04;
  letter-spacing: -0.005em;
  margin: 0 0 22px;
  color: var(--color-text);
  text-shadow:
    0 0 22px rgba(240, 240, 240, 0.32),
    0 0 58px rgba(240, 240, 240, 0.16);
}
.hero__title .line {
  position: relative;
  display: block;
  font-size: clamp(42px, 7.6vw, 86px);
}
.line--accent { color: var(--color-yellow); }

.hero__desc {
  max-width: 520px;
  margin: 0 auto 34px;
  font-size: clamp(15px, 1.5vw, 18px);
  font-weight: 600;
  letter-spacing: 0.005em;
  color: var(--color-text);
  line-height: 1.55;
  text-shadow: 0 0 20px rgba(240, 240, 240, 0.22);
}

/* ---------- Problème avant le book ---------- */
.problem {
  text-align: center;
}
.problem__text {
  max-width: 620px;
  margin: 0 auto;
  font-size: 16px;
  line-height: 1.75;
  color: var(--color-text-dim);
}

/* ---------- Réalisations ---------- */
.work__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 32px;
  max-width: 1200px;
  margin: 0 auto;
}
@media (min-width: 780px) {
  .work__grid { grid-template-columns: repeat(3, 1fr); }
}

.project {
  position: relative;
  display: block;
  border-radius: 12px;
  overflow: hidden;
}
.project__media {
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: var(--color-bg-alt);
}
.project__media video,
.project__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1);
  transition: transform 0.6s var(--ease-out);
}
.project:hover .project__media video,
.project:hover .project__media img {
  transform: scale(1.06);
}

.project__overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 22px;
  background: linear-gradient(180deg, rgba(18, 18, 18, 0) 45%, rgba(18, 18, 18, 0.92) 100%);
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.35s var(--ease-out), transform 0.35s var(--ease-out);
}
.project:hover .project__overlay,
.project:focus-within .project__overlay {
  opacity: 1;
  transform: translateY(0);
}

/* Sans survol possible (mobile/tactile) ou en affichage une colonne, le
   texte du projet reste affiché en permanence : sinon il serait invisible. */
@media (hover: none), (max-width: 779px) {
  .project__overlay {
    opacity: 1;
    transform: none;
  }
}

.project__tag {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(240, 240, 240, 0.75);
}
.project__title {
  font-family: var(--font-display);
  font-size: 26px;
  text-transform: uppercase;
  color: var(--color-text);
  margin-top: 6px;
}
.project__link {
  display: inline-block;
  margin-top: 10px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: rgba(240, 240, 240, 0.75);
  width: fit-content;
}

.work__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px;
  margin-top: 48px;
}

/* Mobile : les boutons collent au bas de l'écran pendant qu'on fait défiler
   les projets (accessibles dès la première vignette), puis reprennent leur
   place en fin de section grâce au sticky, borné par la boîte de .work. */
@media (max-width: 779px) {
  .work__actions {
    position: sticky;
    bottom: 20px;
    z-index: 5;
    gap: 10px;
  }
  .work__actions .btn--pill {
    padding: 14px 24px;
    box-shadow: 0 10px 28px rgba(18, 18, 18, 0.55);
  }
  .work__actions .btn--ghost {
    background: rgba(23, 23, 23, 0.82);
    backdrop-filter: blur(8px);
  }
}

/* ---------- En-tête page archive + filtres ---------- */
/* En-tête volontairement compact : les projets doivent être visibles
   dès l'arrivée sur la page, sans scroller. */
.archive-head {
  max-width: 1200px;
  margin: 0 auto;
  padding-top: 92px;
  padding-bottom: 0;
}
.archive-head .project-back { margin-bottom: 18px; }

.archive-head__row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
}
.archive-head__titles .eyebrow { margin-bottom: 6px; }
.archive-head__title {
  font-family: var(--font-display);
  text-transform: uppercase;
  font-size: clamp(26px, 3.4vw, 40px);
  line-height: 1;
}

.archive-head__tools {
  display: flex;
  align-items: center;
  gap: 14px;
}

.filters-toggle {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 10px 18px;
  border-radius: 999px;
  border: 1px solid var(--color-border);
  background: transparent;
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: border-color 0.25s var(--ease-out), background 0.25s var(--ease-out);
}
.filters-toggle:hover { border-color: var(--color-yellow); }
.filters-toggle[aria-expanded="true"] {
  border-color: var(--color-text-dim);
  background: var(--color-bg-alt);
}
.filters-toggle__chevron {
  width: 7px;
  height: 7px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
  transition: transform 0.25s var(--ease-out);
}
.filters-toggle[aria-expanded="true"] .filters-toggle__chevron {
  transform: translateY(1px) rotate(-135deg);
}
.filters-toggle__badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 999px;
  background: var(--color-blue);
  color: var(--color-text);
  font-size: 11px;
  font-weight: 700;
}

/* Panneau déroulant : replié par défaut (attribut hidden). */
.filters {
  max-width: 1200px;
  margin: 18px auto 0;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  border: 1px solid var(--color-border);
  border-radius: 12px;
  background: var(--color-bg-alt);
  animation: filters-drop 0.28s var(--ease-out);
}
@keyframes filters-drop {
  from { opacity: 0; transform: translateY(-8px); }
  to { opacity: 1; transform: translateY(0); }
}

.filters__row {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
@media (min-width: 780px) {
  .filters__row {
    flex-direction: row;
    align-items: center;
    gap: 18px;
  }
}

.filters__label {
  flex-shrink: 0;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-yellow);
  min-width: 62px;
}

.filters__chips {
  display: flex;
  flex-wrap: nowrap;
  gap: 8px;
  overflow-x: auto;
  padding-bottom: 4px;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.filters__chips::-webkit-scrollbar { display: none; }
@media (min-width: 780px) {
  .filters__chips {
    flex-wrap: wrap;
    overflow-x: visible;
    padding-bottom: 0;
  }
}

.filter-chip {
  flex-shrink: 0;
  padding: 8px 16px;
  border-radius: 999px;
  border: 1px solid var(--color-border);
  background: transparent;
  color: var(--color-text-dim);
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 500;
  white-space: nowrap;
  cursor: pointer;
  transition: border-color 0.25s var(--ease-out), background 0.25s var(--ease-out),
    color 0.25s var(--ease-out), opacity 0.25s var(--ease-out);
}
.filter-chip[data-count]::after {
  content: attr(data-count);
  margin-left: 7px;
  font-size: 11px;
  font-weight: 700;
  opacity: 0.55;
}
.filter-chip:hover:not(:disabled):not(.is-active) {
  border-color: var(--color-yellow);
  color: var(--color-text);
}
.filter-chip.is-active {
  background: var(--color-blue);
  border-color: var(--color-blue);
  color: var(--color-text);
  font-weight: 600;
}
.filter-chip:disabled {
  opacity: 0.3;
  cursor: not-allowed;
}

.filters__footer {
  display: flex;
  align-items: center;
  gap: 16px;
}
.filters__footer:empty { display: none; }
.filters__count {
  font-size: 13px;
  color: rgba(240, 240, 240, 0.5);
  white-space: nowrap;
}
.filters__reset {
  border: none;
  background: none;
  padding: 0;
  font-family: var(--font-body);
  font-size: 13px;
  color: var(--color-yellow);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}
.filters__reset:hover { color: var(--color-blue); }

.filters__empty {
  max-width: 1200px;
  margin: 0 auto 40px;
  font-size: 15px;
  color: var(--color-text-dim);
}

.project.is-filtered-out { display: none; }

/* La grille remonte juste sous l'en-tête compact. */
.archive-head + .work { padding-top: 28px; }

@media (max-width: 560px) {
  .archive-head__row { align-items: flex-start; }
  .archive-head__tools { width: 100%; justify-content: space-between; }
}

/* ---------- About ---------- */
.about {
  display: grid;
  grid-template-columns: 1fr;
  gap: 40px;
  border-top: 1px solid var(--color-border);
}
.about__media {
  max-width: 300px;
  margin: 0 auto;
}
.about__media img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: 12px;
  background: var(--color-bg-alt);
}

/* Texte "à propos" : centré, une seule police, pas de hiérarchie de taille. */
.about__content {
  text-align: left;
}
.about__text {
  max-width: 52ch;
  margin: 22px 0 0;
  font-size: 17px;
  line-height: 1.75;
  color: var(--color-text-dim);
  text-align: justify;
  /* Le texte justifié a besoin de la coupure de mots pour éviter de grands
     espaces blancs sur une colonne de cette largeur. */
  hyphens: auto;
}
.about__text:first-of-type {
  margin-top: 6px;
}
.about__text strong {
  font-weight: 600;
  color: var(--color-text);
}

@media (min-width: 860px) {
  /* Colonnes de largeur bornée + justify-content : le duo photo/texte est
     centré dans la page, sans que le filet du haut cesse d'être pleine
     largeur (ce qui arriverait avec un max-width sur la section). */
  .about {
    grid-template-columns: 300px minmax(0, 520px);
    justify-content: center;
    align-items: center;
    gap: 56px;
  }
}

/* ---------- Comment ça marche ---------- */
.steps {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
  max-width: 1100px;
  margin: 0 auto;
}
@media (min-width: 620px) {
  .steps { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 960px) {
  .steps { grid-template-columns: repeat(3, 1fr); }
}

/* Tout le contenu est visible en permanence : au survol la carte se remplit
   de bleu en fondu, rien ne bouge ni ne se retourne. */
.step {
  padding: 30px 28px 34px;
  border-radius: 16px;
  background: var(--color-bg-alt);
  border: 1px solid var(--color-border);
  transition: background 0.4s var(--ease-out), border-color 0.4s var(--ease-out);
}
.step:hover {
  background: var(--color-blue);
  border-color: var(--color-blue);
}

.step__num {
  display: block;
  font-family: var(--font-display);
  font-size: 44px;
  line-height: 1;
  color: var(--color-blue);
  margin-bottom: 18px;
  transition: color 0.4s var(--ease-out);
}
.step__title {
  font-family: var(--font-display);
  font-size: 21px;
  text-transform: uppercase;
  letter-spacing: 0.01em;
  color: var(--color-text);
  margin-bottom: 12px;
  transition: color 0.4s var(--ease-out);
}
.step__text {
  font-size: 14.5px;
  line-height: 1.68;
  color: var(--color-text-dim);
  transition: color 0.4s var(--ease-out);
}

.step:hover .step__num { color: var(--color-bg); }
.step:hover .step__title,
.step:hover .step__text { color: #ffffff; }

/* ---------- Pourquoi ça compte ---------- */
.why__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 28px;
  max-width: 900px;
  margin: 0 auto;
}
@media (min-width: 780px) {
  .why__grid { grid-template-columns: repeat(2, 1fr); gap: 48px; }
}
.why__item {
  padding-top: 20px;
  border-top: 2px solid var(--color-blue);
}
.why__title {
  font-family: var(--font-display);
  font-size: 24px;
  letter-spacing: 0.01em;
  margin-bottom: 12px;
}
.why__text {
  font-size: 15px;
  line-height: 1.7;
  color: var(--color-text-dim);
}

.why__cta {
  display: block;
  width: fit-content;
  margin: 48px auto 0;
}

.targets {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  max-width: 1000px;
  margin: 56px auto 0;
}
@media (min-width: 780px) {
  .targets { grid-template-columns: repeat(3, 1fr); }
}
.target {
  padding: 22px 24px;
  border-radius: 14px;
  background: var(--color-bg-alt);
  border: 1px solid var(--color-border);
}
.target__title {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-yellow);
  margin-bottom: 10px;
}
.target__text {
  font-size: 14.5px;
  line-height: 1.65;
  color: var(--color-text-dim);
}

/* ---------- FAQ ---------- */
.faq__list {
  max-width: 720px;
  margin: 0 auto;
}
.faq-item {
  border-bottom: 1px solid var(--color-border);
  padding: 20px 0;
}
.faq-item summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  font-size: 15px;
  font-weight: 700;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: '+';
  font-family: var(--font-display);
  font-size: 20px;
  color: var(--color-blue);
  flex-shrink: 0;
}
.faq-item[open] summary::after { content: '−'; }
.faq-item p {
  margin-top: 14px;
  font-size: 14px;
  line-height: 1.7;
  color: var(--color-text-dim);
}

/* ---------- Contact ---------- */
.contact__mail {
  display: inline-block;
  margin-top: 18px;
  font-size: clamp(17px, 2vw, 22px);
  font-weight: 600;
  color: var(--color-yellow);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 5px;
  text-decoration-color: rgba(224, 188, 78, 0.4);
  transition: color 0.25s var(--ease-out), text-decoration-color 0.25s var(--ease-out);
}
.contact__mail:hover {
  color: var(--color-yellow-soft);
  text-decoration-color: var(--color-yellow-soft);
}
.contact__form {
  max-width: 680px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.form-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
}
@media (min-width: 620px) {
  .form-row { grid-template-columns: 1fr 1fr; }
}
.form-field {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.form-field label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--color-yellow);
}
.form-field input,
.form-field select,
.form-field textarea {
  font-family: var(--font-body);
  font-size: 14px;
  padding: 13px 14px;
  border: 1px solid var(--color-border);
  border-radius: 8px;
  background: var(--color-bg-alt);
  color: var(--color-text);
}
.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus {
  outline: none;
  border-color: var(--color-blue);
}
.contact__form .btn { align-self: center; margin-top: 8px; }

/* ---------- Footer ---------- */
.site-footer {
  display: flex;
  flex-wrap: wrap;
  gap: 32px;
  justify-content: space-between;
  padding: 40px var(--gutter);
  border-top: 1px solid var(--color-border);
  font-size: 13px;
  color: var(--color-text);
}
.site-footer__col {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.site-footer__logo {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 14px;
}
.site-footer__social {
  flex-direction: row;
  align-items: center;
  gap: 18px;
}
.social-icon {
  width: 22px;
  height: 22px;
  display: block;
  transition: transform 0.25s var(--ease-out);
}
.site-footer__social a:hover .social-icon {
  transform: translateY(-2px);
}
.site-footer a:hover { color: var(--color-blue); }

/* ---------- Page projet ---------- */
.project-hero {
  padding-top: 96px;
}
.project-hero video {
  width: 100%;
  max-height: 82vh;
  object-fit: cover;
  border-radius: 12px;
  background: var(--color-bg-alt);
}

/* Façade cliquable pour une vidéo hébergée sur YouTube (voir madere.html) :
   juste une image + bouton play tant qu'on n'a pas cliqué, l'iframe lourd de
   YouTube n'est injecté qu'à ce moment (voir initYoutubeFacade). */
.yt-facade {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  max-height: 82vh;
  border-radius: 12px;
  overflow: hidden;
  background: var(--color-bg-alt);
  cursor: pointer;
}
.yt-facade img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.yt-facade__play {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.yt-facade__play svg {
  width: 34px;
  height: 34px;
  margin-left: 4px;
  color: var(--color-text);
}
.yt-facade__play::before {
  content: "";
  position: absolute;
  width: 82px;
  height: 82px;
  border-radius: 50%;
  background: rgba(23, 23, 23, 0.55);
  border: 2px solid rgba(240, 240, 240, 0.85);
  transition: transform 0.25s var(--ease-out), background 0.25s var(--ease-out);
}
.yt-facade:hover .yt-facade__play::before {
  transform: scale(1.08);
  background: var(--color-blue);
}
.yt-facade iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.project-intro {
  max-width: 720px;
  margin: 32px auto 0;
  text-align: center;
}
.project-intro__tag {
  display: block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-yellow);
  margin-bottom: 12px;
}
.project-intro__title {
  font-family: var(--font-display);
  text-transform: uppercase;
  font-size: clamp(32px, 6vw, 60px);
  line-height: 1;
}
.project-intro__text {
  margin-top: 18px;
  font-size: 15px;
  line-height: 1.7;
  color: var(--color-text-dim);
}

.project-back {
  display: inline-block;
  margin-bottom: 24px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-text-dim);
}
.project-back:hover { color: var(--color-blue); }

.project-secondary-video {
  max-width: 900px;
  margin: 0 auto;
}
.project-secondary-video video {
  width: 100%;
  border-radius: 12px;
  background: var(--color-bg-alt);
}
.project-secondary-video__label {
  display: block;
  margin: 0 auto 14px;
  max-width: 900px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-yellow);
}

/* ---------- Grille vidéos verticales (BBRC) ---------- */
.bbrc-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
  max-width: 900px;
  margin: 0 auto;
}
@media (min-width: 480px) {
  .bbrc-grid { grid-template-columns: repeat(3, 1fr); }
}

.bbrc-item {
  position: relative;
  aspect-ratio: 9 / 16;
  border-radius: 12px;
  overflow: hidden;
  background: var(--color-bg-alt);
}
.bbrc-item video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.bbrc-item--placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  background: #232323;
}
.bbrc-item__placeholder-content {
  text-align: center;
}
.bbrc-item__label {
  display: block;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-text-dim);
  opacity: 0.5;
  margin-bottom: 8px;
}
.bbrc-item__date {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(20px, 4vw, 28px);
  color: var(--color-text-dim);
  opacity: 0.7;
}

.bbrc-item__info {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 14px;
  background: linear-gradient(180deg, rgba(18, 18, 18, 0.85) 0%, rgba(18, 18, 18, 0) 45%);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s var(--ease-out);
}
.bbrc-item:hover .bbrc-item__info {
  opacity: 1;
}
.bbrc-item__info-date {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-yellow);
}
.bbrc-item__info-title {
  margin-top: 4px;
  font-family: var(--font-display);
  font-size: 14px;
  line-height: 1.2;
  text-transform: uppercase;
  color: var(--color-text);
}

/* ---------- Galerie photo + lightbox ---------- */
.gallery {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  max-width: 1200px;
  margin: 0 auto;
}
@media (min-width: 620px) {
  .gallery { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 960px) {
  .gallery { grid-template-columns: repeat(4, 1fr); }
}
.gallery-item {
  display: block;
  aspect-ratio: 4 / 5;
  border-radius: 8px;
  overflow: hidden;
  cursor: zoom-in;
  border: none;
  padding: 0;
  background: var(--color-bg-alt);
}
.gallery-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s var(--ease-out);
}
.gallery-item:hover img { transform: scale(1.05); }

.lightbox {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(18, 18, 18, 0.96);
}
.lightbox[hidden] { display: none; }

.lightbox__img {
  max-width: min(90vw, 1100px);
  max-height: 86vh;
  object-fit: contain;
  border-radius: 4px;
}

.lightbox__close,
.lightbox__prev,
.lightbox__next {
  position: absolute;
  background: rgba(240, 240, 240, 0.08);
  border: 1px solid var(--color-border);
  color: var(--color-text);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  font-size: 20px;
  transition: background 0.25s var(--ease-out);
}
.lightbox__close:hover,
.lightbox__prev:hover,
.lightbox__next:hover {
  background: rgba(240, 240, 240, 0.18);
}
.lightbox__close {
  top: 24px;
  right: 24px;
  width: 42px;
  height: 42px;
}
.lightbox__prev,
.lightbox__next {
  top: 50%;
  transform: translateY(-50%);
  width: 52px;
  height: 52px;
}
.lightbox__prev { left: 16px; }
.lightbox__next { right: 16px; }
.lightbox__counter {
  position: absolute;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 12px;
  letter-spacing: 0.06em;
  color: var(--color-text-dim);
}

@media (max-width: 620px) {
  .lightbox__prev { left: 6px; }
  .lightbox__next { right: 6px; }
  .lightbox__prev, .lightbox__next { width: 42px; height: 42px; font-size: 16px; }
}

/* ---------- Page mentions légales ---------- */
.legal {
  padding-top: 110px;
}
.legal__intro {
  max-width: 720px;
  margin: 0 auto 8px;
  text-align: center;
}
.legal__content {
  max-width: 680px;
  margin: 0 auto;
}
.legal__content h2 {
  font-family: var(--font-display);
  font-size: 20px;
  letter-spacing: 0.01em;
  color: var(--color-text);
  margin: 44px 0 14px;
}
.legal__content h2:first-child { margin-top: 0; }
.legal__content p {
  font-size: 15px;
  line-height: 1.75;
  color: var(--color-text-dim);
  margin-bottom: 12px;
}
.legal__content a {
  color: var(--color-blue);
  text-decoration: underline;
  text-decoration-color: rgba(86, 130, 222, 0.4);
  text-underline-offset: 3px;
}
.legal__content a:hover { text-decoration-color: var(--color-blue); }
.legal__content ul {
  margin: 0 0 12px;
  padding-left: 20px;
  list-style: disc;
}
.legal__content li {
  font-size: 15px;
  line-height: 1.75;
  color: var(--color-text-dim);
  margin-bottom: 4px;
}
.legal__todo {
  display: inline;
  padding: 1px 7px;
  border-radius: 5px;
  background: rgba(224, 188, 78, 0.16);
  color: var(--color-yellow);
  font-weight: 600;
  font-size: 13.5px;
}