:root {
  color-scheme: light;
  /* opacité du fond blanc derrière le menu fixe : valeur validée (90%) */
  --nav-bg-alpha: 0.9;
}

* {
  box-sizing: border-box;
}

html, body {
  margin: 0;
  padding: 0;
  width: 100%;
  background: #f4f3f1;
  font-family: 'Poppins', -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
}

/* seule la page du mur infini bloque le scroll du document : le pan se
   fait à la main, pas via la molette de la page */
body.wall-page {
  height: 100%;
  overflow: hidden;
  overscroll-behavior: none;
}

/* ---- menu fixe (nom + navigation) -------------------------------------- */

.site-nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 30;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 28px 20px 40px;
  pointer-events: none;
}

/* bandeau blanc derrière le menu (sur le mur comme sur les pages de
   contenu) : un fond clair uniforme, plus proche de la référence
   etchegaray.fr que l'ancien voile dégradé sombre. */
.site-nav::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(255, 255, 255, var(--nav-bg-alpha));
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.06);
  pointer-events: none;
  z-index: -1;
}

.site-nav a {
  pointer-events: auto;
  color: #1a1a1a;
  text-decoration: none;
}

.site-nav__name {
  font-family: 'Poppins', -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
  font-size: clamp(22px, 2.4vw, 36px);
  font-weight: 500;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  white-space: nowrap;
}

.site-nav__links {
  display: flex;
  align-items: center;
  gap: 20px;
}

.site-nav__links a {
  font-family: 'Poppins', -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
  font-size: 16px;
  font-weight: 300;
  letter-spacing: normal;
  text-transform: none;
  position: relative;
}

/* liens texte (Portfolio / Coulisses / Contact) uniquement — pas les icônes
   sociales juste en dessous, où une barre sous un pictogramme ferait plus
   bizarre qu'utile (elles gardent un simple fondu d'opacité, cf. plus bas).
   padding-bottom : accueille le trait sans pousser le reste de la ligne.
   Choisi après comparaison de dix méthodes de survol (variante "4 — lettres
   espacées") : les lettres s'écartent légèrement au survol, pas de gras. */
.site-nav__links a:not(.site-nav__icon) {
  padding-bottom: 4px;
  transition: letter-spacing 0.3s ease;
}

/* trait fin, en fondu (pas de glissement) sous le lien survolé */
.site-nav__links a:not(.site-nav__icon)::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: currentColor;
  opacity: 0;
  transition: opacity 0.3s ease;
}

/* page courante : le même trait, mais affiché en permanence, pas seulement
   au survol — sans lui, cliquer sur "Portfolio" en étant déjà sur cette
   page ne change rien à l'écran et peut donner l'impression que le lien ne
   fonctionne pas. Le trait fixe indique tout de suite où l'on se trouve. */
.site-nav__links a.is-current::after {
  opacity: 1;
}

.site-nav__links a:not(.site-nav__icon):hover {
  letter-spacing: 0.04em;
}

.site-nav__links a:not(.site-nav__icon):hover::after {
  opacity: 1;
}

.site-nav__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  opacity: 1;
  transition: opacity 0.2s ease;
}

.site-nav__icon:hover {
  opacity: 0.55;
}

.site-nav__icon svg {
  width: 19px;
  height: 19px;
  display: block;
}

/* numéro de version, discret, pendant la construction du site — voir
   BUILD_VERSION dans nav.js ; à retirer une fois le site jugé terminé */
.site-nav__version {
  font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
  font-size: 10px;
  color: rgba(26, 26, 26, 0.28);
  pointer-events: none;
  user-select: none;
  margin-left: -6px;
}

/* TEMPORAIRE (demande Benjamin) : icônes Instagram/LinkedIn et indicateur
   de version masqués via visibility (pas display:none, pour pouvoir les
   remettre facilement plus tard sans toucher au reste de la mise en page) */
.site-nav__icon,
.site-nav__version {
  visibility: hidden;
}

/* bouton hamburger : caché sur desktop, affiché uniquement sous le seuil
   mobile (voir media query plus bas) */
.site-nav__toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: flex-end;
  gap: 5px;
  width: 26px;
  height: 26px;
  background: none;
  border: none;
  padding: 0;
  pointer-events: auto;
  cursor: pointer;
  /* doit rester cliquable par-dessus le panneau plein écran quand le menu
     est ouvert (le panneau est un sibling qui le suit dans le DOM) */
  position: relative;
  z-index: 2;
}

.site-nav__toggle span {
  display: block;
  width: 100%;
  height: 1.5px;
  background: #1a1a1a;
  transition: transform 0.2s ease, opacity 0.2s ease, width 0.2s ease;
}

.site-nav__toggle span:nth-child(2) {
  width: 70%;
}

.site-nav__toggle[aria-expanded="true"] span {
  width: 100%;
}

.site-nav__toggle[aria-expanded="true"] span:nth-child(1) {
  transform: translateY(6.5px) rotate(45deg);
}

.site-nav__toggle[aria-expanded="true"] span:nth-child(2) {
  opacity: 0;
}

.site-nav__toggle[aria-expanded="true"] span:nth-child(3) {
  transform: translateY(-6.5px) rotate(-45deg);
}

/* standard mobile : le nom + un bouton hamburger sur une seule ligne, les
   liens se replient dans un panneau déroulant plein écran affiché au clic.
   Le second cas de la liste (orientation paysage + hauteur <= 640px) couvre
   un téléphone tourné à l'horizontale : sans lui, un iPhone en paysage a une
   LARGEUR > 640px et retombait sur le menu "bureau" complet — trop grand,
   trop haut, alors que c'est toujours un téléphone tenu en main. Même seuil
   (640) que la détection mobile du mur d'images (voir MOBILE_BREAKPOINT
   dans app.js), pour rester cohérent. */
@media (max-width: 640px), (orientation: landscape) and (max-height: 640px) {
  .site-nav {
    padding: 16px 18px;
  }
  .site-nav__name {
    font-size: 17px;
  }
  .site-nav__toggle {
    display: flex;
  }
  .site-nav__links {
    position: fixed;
    inset: 0;
    z-index: 1;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 26px;
    background: #f4f3f1;
    padding: 0 32px;
    opacity: 0;
    transform: translateY(-8px);
    pointer-events: none;
    transition: opacity 0.2s ease, transform 0.2s ease;
  }
  .site-nav__links.is-open {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
  }
  /* le conteneur couvre tout l'écran même fermé (pour l'animation) : il
     faut désactiver le clic sur ses liens tant qu'il n'est pas ouvert,
     sinon ils resteraient cliquables par-dessus le mur en dessous */
  .site-nav__links a {
    pointer-events: none;
    font-size: 20px;
  }
  .site-nav__links.is-open a {
    pointer-events: auto;
  }
  .site-nav__icon svg {
    width: 22px;
    height: 22px;
  }
}

/* ---- pages de contenu (à propos / contact) ------------------------------ */

.page {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 140px 28px 80px;
}

.page__content {
  max-width: 620px;
  width: 100%;
  color: #1a1a1a;
}

/* variante 2 colonnes (page Contact) : une petite image à gauche, le texte
   à droite — conteneur élargi pour laisser respirer les deux colonnes sans
   compresser le texte. */
.page__content--split {
  max-width: 880px;
  display: flex;
  align-items: flex-start;
  gap: 48px;
}

/* spécificité volontairement supérieure à ".page__content figure" (qui a
   sa propre marge de 40px 0, pensée pour une figure pleine largeur) afin
   que cette marge par défaut ne l'emporte pas ici */
.page__content--split .page__portrait {
  flex: 0 0 260px;
  margin: 6px 0 0;
}

.page__portrait img {
  width: 100%;
  height: auto;
  display: block;
}

.page__text {
  flex: 1 1 auto;
  min-width: 0;
}

@media (max-width: 640px) {
  .page__content--split {
    flex-direction: column;
    gap: 28px;
  }
  /* photo retirée en mobile uniquement : le texte prend toute la largeur,
     sans la colonne image qui n'apporte pas grand-chose sur petit écran */
  .page__content--split .page__portrait {
    display: none;
  }
}

.page__eyebrow {
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  opacity: 0.55;
  margin: 0 0 18px;
}

.page__content h1 {
  font-size: clamp(26px, 4vw, 34px);
  font-weight: 500;
  letter-spacing: 0.01em;
  margin: 0 0 28px;
}

.page__content figure {
  margin: 40px 0;
}

.page__content figure img {
  width: 100%;
  height: auto;
  display: block;
}

.page__content figcaption {
  margin-top: 10px;
  font-size: 12px;
  letter-spacing: 0.03em;
  color: #999;
}

/* grand nom en couverture (page À propos) : capitales très grandes sur
   fond blanc, sans image derrière */
.page--cover .page__content {
  max-width: 900px;
}

.page__name {
  font-size: clamp(48px, 9vw, 120px);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.01em;
  line-height: 0.98;
  margin: 0 0 40px;
}

/* nom sur une seule ligne (page Contact) : la taille vient déjà de la règle
   .page__content h1 ci-dessus (plus spécifique que .page__name), il ne
   reste qu'à empêcher le retour à la ligne */
.page__name--oneline {
  white-space: nowrap;
}

.page__content p {
  font-size: 16px;
  line-height: 1.55;
  margin: 0 0 20px;
  color: #333;
}

/* phrase d'intro balisée en h2 pour le SEO/GEO (À propos et Visuels IA ;
   Evoluderm n'en a pas, son h1 est suivi directement d'un sous-titre en
   .coulisses__case-subtitle) : mêmes valeurs que .page__content p ci-dessus,
   afin que le changement de balise sémantique n'ait aucun effet visuel. */
.page__content h2.page__lead {
  font-size: 16px;
  font-weight: 400;
  line-height: 1.55;
  margin: 0 0 20px;
  color: #333;
}

/* mots mis en avant dans le texte courant (marques, noms de collaborateurs,
   informations clés) : poids 600 déjà chargé (Poppins), plutôt qu'un gras
   synthétique par le navigateur */
.page__content p strong,
.coulisses__credits strong {
  font-weight: 600;
  color: #1a1a1a;
}

/* nuance plus discrète (titres de magazine, phrase de conclusion) —
   italique synthétisé par le navigateur, déjà utilisé ailleurs sur le site
   (voir .page__label-suffix) */
.page__content p em {
  font-style: italic;
  font-weight: inherit;
}

/* césure discrète entre deux paragraphes qui changent de registre (ex :
   Coulisses passe du « Benjamin Etchegaray est... » institutionnel au
   « je »  plus personnel) : un simple petit trait centré, sans rien
   annoncer ni expliquer, juste assez pour marquer une respiration */
.page__divider {
  width: 28px;
  height: 1px;
  margin: 4px auto 32px;
  border: none;
  background: rgba(26, 26, 26, 0.25);
}

/* aligné à gauche, dans l'axe du texte, plutôt que centré */
.page__divider--left {
  margin-left: 0;
  margin-right: auto;
}

.page__links {
  /* la phrase juste au-dessus a déjà sa propre marge basse (.page__content
     p) : un margin-top généreux ici s'additionnait à elle et créait un
     grand blanc qui se lisait comme une ligne vide */
  margin-top: 8px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* pas de soulignement : les champs se lisent déjà comme des coordonnées de
   contact (email, téléphone), l'underline n'apportait rien de plus qu'un
   effet graphique — un simple changement d'opacité au survol suffit,
   cohérent avec le reste du menu du site */
.page__links a {
  display: flex;
  align-items: center;
  gap: 10px;
  color: #1a1a1a;
  text-decoration: none;
  font-size: 15px;
  transition: opacity 0.2s ease;
}

/* petite vignette minimaliste devant chaque champ (email, téléphone) :
   même langage graphique que les icônes Instagram/LinkedIn du menu (trait
   fin, noir, sans remplissage) */
.page__link-icon {
  width: 17px;
  height: 17px;
  flex: none;
}

.page__links a:hover {
  opacity: 0.55;
}

/* libellé "Studio photo / vidéo" : simplement en noir et gras */
.page__content .page__label {
  font-weight: 700;
  color: #1a1a1a;
  margin: 0 0 8px;
}

/* ", sur rendez-vous" accolé au libellé : italique fin (light) pour se
   détacher nettement du gras du libellé principal */
.page__content .page__label-suffix {
  font-style: italic;
  font-weight: 300;
  color: #555;
}

/* adresse du studio : même vignette (pin) et même alignement que les champs
   email/téléphone plus bas, pour que toute la colonne d'icônes se lise
   comme une seule liste cohérente. align-items: flex-start plutôt que
   center car le texte fait deux lignes (rue puis ville) */
.page__address-row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  color: #1a1a1a;
  font-size: 15px;
}

.page__address-row .page__link-icon {
  margin-top: 2px;
}

/* nouvelle section dans le flux de la page (ex : bloc studio sous les liens
   de contact) : une vraie respiration au-dessus, pour qu'elle se lise comme
   une section à part plutôt que comme une suite du bloc précédent. Réutilise
   .page__eyebrow comme étiquette, cohérent avec l'en-tête de page. */
.page__section {
  margin-top: 64px;
}

.page__section .page__eyebrow {
  margin-bottom: 10px;
}

/* ---- page Coulisses : menu latéral + sous-pages ------------------------- */

/* le contenu peut être plus long qu'un écran (surtout la sous-page
   Evoluderm) : on part du haut plutôt que de centrer verticalement comme
   les autres pages, sinon un long contenu démarre en plein milieu de
   l'écran au premier affichage */
.page--coulisses {
  align-items: flex-start;
}

.coulisses__layout {
  width: 100%;
  max-width: 1040px;
  margin: 0 auto;
  display: flex;
  align-items: flex-start;
  gap: 64px;
}

.coulisses__sidebar {
  flex: 0 0 168px;
  position: sticky;
  top: 160px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.coulisses__sidebar-link {
  all: unset;
  box-sizing: border-box;
  cursor: pointer;
  font-family: 'Poppins', -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
  font-size: 15px;
  font-weight: 300;
  color: #1a1a1a;
  padding: 8px 0 8px 16px;
  border-left: 1px solid rgba(26, 26, 26, 0.15);
  opacity: 0.65;
  transition: opacity 0.2s ease, font-weight 0.2s ease, border-color 0.2s ease;
}

.coulisses__sidebar-link:hover {
  opacity: 1;
}

.coulisses__sidebar-link.is-active {
  font-weight: 600;
  opacity: 1;
  border-left-color: #1a1a1a;
}

.coulisses__panels {
  flex: 1 1 auto;
  min-width: 0;
}

.coulisses__panel {
  opacity: 0;
  transition: opacity 0.35s ease;
}

.coulisses__panel.is-visible {
  opacity: 1;
}

.coulisses__panel .page__content {
  max-width: 700px;
}

/* variante deux colonnes de la sous-page "En studio" : même esprit que
   .page__content--split (page Contact), mais déclarée à part pour ne pas
   hériter de son max-width pensé pour un .page__content à elle seule */
.coulisses__split {
  display: flex;
  align-items: flex-start;
  gap: 40px;
}

/* colonne de gauche : peut contenir plusieurs photos empilées (ex : la
   loge maquillage puis le plateau de prise de vue), plutôt qu'une seule —
   c'est elle qui porte désormais la largeur fixe et le décalage vertical
   d'origine, les figures à l'intérieur s'empilent simplement */
.coulisses__split-media {
  flex: 0 0 240px;
  display: flex;
  flex-direction: column;
  gap: 28px;
  margin-top: 6px;
}

.coulisses__split-media .page__portrait {
  margin: 0;
}

.coulisses__split .page__text {
  flex: 1 1 auto;
  min-width: 0;
}

/* galerie deux images côte à côte (ex : version retenue / piste explorée) */
.coulisses__gallery {
  display: flex;
  gap: 20px;
  margin: 40px 0;
}

.coulisses__gallery figure {
  flex: 1 1 0;
  margin: 0;
  min-width: 0;
}

.coulisses__gallery img {
  width: 100%;
  height: auto;
  display: block;
  cursor: zoom-in;
}

/* galerie "Visuel assisté par IA" : simple grille 2 colonnes, les visuels
   s'enchaînent les uns après les autres sans légende — le lightbox existant
   (assets/js/coulisses.js) est réutilisé pour l'agrandissement au clic. */
.coulisses__ia-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin-top: 8px;
}

.coulisses__ia-grid img {
  width: 100%;
  height: auto;
  display: block;
  cursor: zoom-in;
}

@media (max-width: 640px) {
  .coulisses__ia-grid {
    gap: 10px;
  }
}

/* ---- agrandissement au clic (galerie Evoluderm) -------------------------
   voir assets/js/coulisses.js ; réservé aux deux photos de la galerie,
   pas à la vidéo ni au reste de la page. */
.has-lightbox {
  overflow: hidden;
}

.lightbox {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 48px;
  background: rgba(12, 12, 12, 0.92);
  cursor: zoom-out;
  animation: lightbox-fade 0.2s ease;
}

.lightbox[hidden] {
  display: none;
}

@keyframes lightbox-fade {
  from { opacity: 0; }
  to { opacity: 1; }
}

.lightbox__img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.5);
}

.lightbox__close {
  all: unset;
  position: fixed;
  top: 20px;
  right: 24px;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  line-height: 1;
  color: #fff;
  opacity: 0.75;
  cursor: pointer;
  transition: opacity 0.2s ease;
}

.lightbox__close:hover,
.lightbox__close:focus-visible {
  opacity: 1;
}

@media (max-width: 640px) {
  .lightbox {
    padding: 24px;
  }
}

.coulisses__video video {
  width: 100%;
  height: auto;
  display: block;
  background: #000;
}

.coulisses__credits {
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: 15px;
  line-height: 1.7;
  color: #333;
}

.coulisses__credits li {
  padding-left: 0;
}

.page__name--case {
  font-size: clamp(32px, 5vw, 52px);
}

/* réduit l'espace sous le h1 quand un sous-titre (.coulisses__case-subtitle)
   suit immédiatement, pour que les deux lignes se lisent comme un seul bloc
   titre + sous-titre. Sélecteur "h1.page__name--tight" volontairement aussi
   spécifique que .page__content h1 (qui fixe déjà margin-bottom: 28px) afin
   de bien la remplacer. */
.page__content h1.page__name--tight {
  margin-bottom: 6px;
}

/* sous-titre du cas client (ex : "Page beauté du magazine Voici"), sous le
   nom de la marque en h1 : hiérarchie clairement plus basse, donc pas de
   capitales ni de graisse marquée, contrairement au h1 au-dessus. */
.coulisses__case-subtitle {
  font-size: 15px;
  font-weight: 400;
  letter-spacing: 0.01em;
  text-transform: none;
  color: #666;
  margin: 0 0 28px;
}

/* sous-titre de chaque projet du cas client (ex : "Nature, rose & vert",
   "Le Petit Prince") : distinct du h1 de la page, mais assez marqué pour
   annoncer clairement le début d'un nouveau projet dans le flux du texte */
.coulisses__subtitle {
  font-size: 21px;
  font-weight: 500;
  letter-spacing: 0.005em;
  color: #1a1a1a;
  margin: 48px 0 16px;
}

/* texte justifié plutôt qu'aligné à gauche, sur les trois pages Coulisses
   (À propos, Evoluderm, Visuels IA) : un bloc de texte plus dense et plus
   "éditorial". text-align-last: left évite que la toute dernière ligne de
   chaque paragraphe (souvent courte) soit étirée bizarrement. Pas de
   césure (hyphens: none) : sur demande de Benjamin, pour ne plus couper
   les mots en fin de ligne, quitte à ce que la justification laisse
   parfois des espaces un peu plus marqués entre les mots. */
.page--editorial .page__content p,
.page--editorial .page__content h2.page__lead {
  text-align: justify;
  text-align-last: left;
  hyphens: none;
}

@media (max-width: 640px) {
  .coulisses__layout {
    flex-direction: column;
    gap: 32px;
  }
  .coulisses__sidebar {
    position: static;
    flex-direction: row;
    gap: 22px;
    /* la valeur desktop (flex: 0 0 168px) fixait une largeur de colonne :
       une fois le menu principal repassé en ligne (flex-direction: row) au
       lieu d'une colonne verticale, ce même 168px s'appliquait à la hauteur
       de la barre et créait un grand vide sous "En studio / Evoluderm" */
    flex: none;
  }
  .coulisses__sidebar-link {
    padding: 0 0 6px;
    border-left: none;
    border-bottom: 1px solid rgba(26, 26, 26, 0.15);
  }
  .coulisses__sidebar-link.is-active {
    border-left-color: transparent;
    border-bottom-color: #1a1a1a;
  }
  .coulisses__gallery {
    flex-direction: column;
    gap: 24px;
  }
}

/* la colonne "En studio" (photos + texte côte à côte, .coulisses__split) a
   besoin d'un seuil plus large que le reste de la page mobile : entre 641px
   et environ 960px, la colonne photo (240px fixe) et la colonne texte se
   partagent un espace encore insuffisant, si bien que le texte se retrouve
   compressé sur quelques mots par ligne — illisible, alors même que le
   reste de la mise en page (menu, galerie Evoluderm) tient très bien à ces
   largeurs. On fait donc basculer cette colonne en mode empilé (comme sur
   mobile, photos en petit format après le texte) sur toute cette plage
   intermédiaire, pas seulement en dessous de 640px. */
@media (max-width: 959px) {
  .coulisses__split {
    flex-direction: column;
    gap: 24px;
  }
  .coulisses__split .page__text {
    order: 1;
  }
  .coulisses__split-media {
    order: 2;
    display: flex;
    flex-direction: row;
    gap: 14px;
    margin-top: 8px;
    max-width: 420px;
  }
  .coulisses__split-media .page__portrait {
    flex: 1 1 0;
    min-width: 0;
  }
  .coulisses__split-media .page__portrait figcaption {
    font-size: 11px;
  }
}

.wall {
  position: fixed;
  inset: 0;
  overflow: hidden;
  cursor: grab;
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
  background: #f4f3f1;
}

.wall.dragging {
  cursor: grabbing;
}

.world {
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  height: 0;
  will-change: transform;
}

.tile {
  position: absolute;
  overflow: hidden;
  background: #e7e5e1;
}

.tile img,
.tile video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  -webkit-user-drag: none;
  pointer-events: none;
}

/* iOS Safari affiche parfois, de son propre chef, un gros triangle de
   lecture par-dessus une vidéo en pause (ex : autoplay bloqué un instant),
   même sans l'attribut "controls" — ce triangle n'a jamais de fonction ici
   (pointer-events: none plus haut) mais reste visible et fait tache. On le
   masque explicitement via les pseudo-éléments internes de WebKit. */
.tile video::-webkit-media-controls,
.tile video::-webkit-media-controls-start-playback-button,
.tile video::-webkit-media-controls-play-button {
  display: none !important;
  -webkit-appearance: none;
}

/* seules les images se dévoilent en fondu : le poster d'une vidéo doit
   rester visible immédiatement, même si la lecture met du temps à démarrer
   (ou échoue), pour ne jamais laisser une case vide */
.tile img {
  opacity: 0;
  transition: opacity 0.5s ease;
}

.tile img.loaded {
  opacity: 1;
}

/* ---- bascule de langue FR | EN (pages Coulisses et Contact) -------------
   Chaque bloc traduit existe deux fois dans le HTML, une version par
   langue, marquée data-i18n="fr" / data-i18n="en" : plus robuste qu'un
   remplacement de texte en JS, ça préserve les mises en forme (gras,
   italique) propres à chaque langue sans les reconstruire. L'attribut
   data-lang sur <html> (posé avant même le CSS, voir le script inline dans
   le <head>) décide laquelle des deux s'affiche. */
:root[data-lang="fr"] [data-i18n="en"] {
  display: none !important;
}
:root[data-lang="en"] [data-i18n="fr"] {
  display: none !important;
}
/* les blocs EN portent l'attribut HTML natif "hidden" par défaut (pour un
   rendu correct même sans JS/CSS) : quand on bascule en anglais il faut
   explicitement les repasser en display: block pour l'emporter sur la
   feuille de style du navigateur ([hidden] { display: none }). Tous les
   blocs traduits sont des éléments de type bloc (p, h2, figcaption, ul). */
:root[data-lang="en"] [data-i18n="en"] {
  display: block !important;
}
/* exception : dans le menu (nav principal et sous-menu Coulisses), le texte
   traduit est un <span> en ligne dans un lien/bouton, pas un bloc autonome
   — la règle générale ci-dessus le casserait en le passant en display:block */
:root[data-lang="en"] .site-nav__links [data-i18n="en"],
:root[data-lang="en"] .coulisses__sidebar-link [data-i18n="en"] {
  display: inline !important;
}

.lang-switch {
  position: fixed;
  top: 112px;
  right: 28px;
  z-index: 5;
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: 'Poppins', -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
  font-size: 12px;
  letter-spacing: 0.06em;
}

/* le bouton flotte en permanence par-dessus le texte au scroll (position:
   fixed) : tant que la fenêtre n'est pas assez large pour que la colonne de
   texte (max-width du bloc Coulisses : 1040px + le rembourrage de .page)
   laisse un espace vide à droite pour l'accueillir, un fond lui donne une
   lisibilité constante plutôt qu'un chevauchement ambigu avec le texte
   dessous. Au-delà de ce seuil (grand écran), le texte n'atteint jamais le
   bouton : le fond n'est plus utile, style discret comme au survol du menu.
   Le seuil est en largeur, pas en orientation : un iPhone à l'horizontale
   reste trop étroit pour laisser cet espace, donc garde le fond. */
@media (max-width: 1100px) {
  .lang-switch {
    background: rgba(245, 244, 241, 0.92);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    padding: 7px 12px;
    border-radius: 20px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
  }
}

.lang-switch__btn {
  all: unset;
  cursor: pointer;
  color: #1a1a1a;
  opacity: 0.4;
  padding-bottom: 2px;
  border-bottom: 1px solid transparent;
  transition: opacity 0.2s ease, border-color 0.2s ease;
}

.lang-switch__btn:hover {
  opacity: 0.75;
}

.lang-switch__btn.is-active {
  opacity: 1;
  border-bottom-color: #1a1a1a;
}

.lang-switch__sep {
  opacity: 0.3;
  font-size: 11px;
}


/* ---- espace Coulisses : grille d'articles (hub + "a lire aussi") ------- */
.coulisses__index {
  margin-top: 64px;
}

.coulisses__index-title {
  font-size: 22px;
  font-weight: 500;
  letter-spacing: 0.01em;
  margin: 0 0 28px;
}

.coulisses__index-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 32px;
}

.coulisses__index--compact .coulisses__index-grid {
  grid-template-columns: repeat(auto-fit, minmax(160px, 220px));
}

.coulisses__index-card {
  display: block;
  text-decoration: none;
  color: inherit;
}

.coulisses__index-card figure {
  margin: 0 0 14px;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border-radius: 2px;
  background: #e8e6e1;
}

.coulisses__index-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.4s ease;
}

.coulisses__index-card:hover img {
  transform: scale(1.03);
}

.coulisses__index-card-eyebrow {
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  opacity: 0.55;
  margin: 0 0 6px;
}

.coulisses__index-card h3 {
  font-size: 18px;
  font-weight: 500;
  margin: 0 0 8px;
}

.coulisses__index-card p {
  font-size: 14px;
  color: #555;
  margin: 0;
  line-height: 1.5;
}