/* ===================================================
   IS PHOTO — Isabelle Schmitt · Photographe-Auteur
   Direction artistique : noir dominant / rouge / blanc
   Référence fidèle : www.isphoto.fr — V2 montée en gamme
   =================================================== */

/* ---------- VARIABLES ---------- */
:root {
  /* Palette ISPHOTO */
  --blanc:          #FFFFFF;
  --noir:           #0A0A0A;
  --noir-alt:       #111111;
  --noir-card:      #141414;
  --gris-clair:     rgba(255,255,255,0.07);
  --gris-moyen:     rgba(255,255,255,0.45);
  --gris-leger:     rgba(255,255,255,0.28);
  --rouge:          #CC1414;
  --rouge-fonce:    #A80F0F;
  --rouge-hover:    #E01818;
  --rouge-cadre:    rgba(139, 12, 12, 0.55);

  /* Typographie — Combo A · Galerie internationale */
  --font-script: 'Great Vibes', 'Dancing Script', cursive;
  --font-serif:  'Cormorant Garamond', 'Didot', 'Playfair Display', Georgia, serif;
  --font-sc:     'Cormorant SC', 'Cormorant Garamond', Georgia, serif;
  --font-sans:   'Manrope', 'Inter', 'Helvetica Neue', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono:   'JetBrains Mono', ui-monospace, 'SFMono-Regular', monospace;

  /* Couleurs typographiques */
  --color-text-1: rgba(255,255,255,0.92);
  --color-text-2: rgba(255,255,255,0.62);
  --color-text-3: rgba(255,255,255,0.42);
  --color-text-4: rgba(255,255,255,0.28);

  /* Espacements */
  --space-xs:  0.5rem;
  --space-sm:  1rem;
  --space-md:  2rem;
  --space-lg:  3.2rem;
  --space-xl:  5.5rem;
  --space-xxl: 7.5rem;

  /* Easings */
  --ease-out:     cubic-bezier(0.16, 1, 0.3, 1);
  --ease-curtain: cubic-bezier(0.85, 0, 0.15, 1);
  --ease-breathe: cubic-bezier(0.45, 0, 0.55, 1);

  /* Durées */
  --t-fast:   0.3s;
  --t-medium: 0.6s;
  --t-slow:   1.0s;

  /* Layout */
  --container-max:    1440px;
  --container-narrow: 1100px;
  --nav-height:       52px;
}

/* ---------- RESET ---------- */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
img  { max-width: 100%; height: auto; display: block; }
button { background: none; border: none; cursor: pointer; font: inherit; color: inherit; }
ul, ol { list-style: none; }
a { color: inherit; text-decoration: none; }

/* Cadre signature rouge autour du site */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  border: 5px solid var(--rouge-cadre);
  pointer-events: none;
  z-index: 9999;
}

body {
  background: var(--noir);
  color: var(--blanc);
  font-family: var(--font-sans);
  font-weight: 300;
  font-size: 16px;
  line-height: 1.7;
  letter-spacing: 0.01em;
  overflow-x: hidden;
  min-height: 100vh;
}

/* ---------- TYPOGRAPHIE ---------- */
/* Titres principaux en ROUGE — signature ISPHOTO */
h1 {
  font-family: var(--font-serif);
  font-weight: 300;
  letter-spacing: -0.015em;
  line-height: 1.08;
  color: var(--rouge);
  font-size: clamp(2.2rem, 4vw, 3.4rem);
}

h2 {
  font-family: var(--font-serif);
  font-weight: 300;
  letter-spacing: -0.012em;
  line-height: 1.12;
  color: var(--rouge);
  font-size: clamp(1.6rem, 2.6vw, 2.4rem);
}

/* h3, h4, h5 restent neutres (sous-titres / catégories) */
h3 {
  font-family: var(--font-serif);
  font-weight: 300;
  letter-spacing: 0;
  line-height: 1.2;
  color: var(--color-text-1);
  font-size: 1.1rem;
}

h4 {
  font-family: var(--font-sc), var(--font-serif);
  font-weight: 400;
  letter-spacing: 0.2em;
  line-height: 1.3;
  color: var(--color-text-1);
  font-size: 0.82rem;
  text-transform: uppercase;
}

h5 {
  font-family: var(--font-sans);
  font-weight: 400;
  letter-spacing: 0.18em;
  line-height: 1.4;
  color: var(--color-text-2);
  font-size: 0.74rem;
  text-transform: uppercase;
}

/* em dans les titres rouges → blanc italique */
h1 em, h2 em {
  color: var(--color-text-1);
  font-style: italic;
}

.eyebrow {
  font-family: var(--font-sans);
  font-size: 0.68rem;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--rouge);
  font-weight: 400;
  margin-bottom: var(--space-md);
  display: inline-block;
}

p {
  font-size: 0.94rem;
  line-height: 1.75;
  color: var(--color-text-2);
  max-width: 65ch;
  letter-spacing: 0.005em;
}

p.lead {
  font-family: var(--font-serif);
  font-size: 1.05rem;
  font-weight: 300;
  line-height: 1.55;
  color: var(--color-text-1);
  letter-spacing: -0.005em;
  font-style: italic;
}

em, .italic { font-style: italic; color: var(--rouge); }
strong { font-weight: 500; color: var(--blanc); }

::selection { background: var(--rouge); color: var(--blanc); }

/* ---------- LAYOUT ---------- */
.container {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--space-md);
  position: relative;
  z-index: 2;
}
.container-narrow {
  max-width: var(--container-narrow);
  margin: 0 auto;
  padding: 0 var(--space-md);
  position: relative;
  z-index: 2;
}

section { padding: 9rem 0; position: relative; }

/* Sections cumulatives ajustées (opening + hero conservent leur hauteur propre) */
.cinematic-opening, .hero { padding: 0; }

@media (max-width: 768px) {
  section { padding: 5.5rem 0; }
  .container, .container-narrow { padding: 0 var(--space-sm); }
}

/* ---------- NAVIGATION — bande noire premium fixe ---------- */
.nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 50;
  height: 92px;
  display: flex;
  align-items: center;
  background: rgba(10,10,10,0.86);
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  border-bottom: 1px solid rgba(255,255,255,0.04);
  transition: background 0.5s var(--ease-out),
              height 0.5s var(--ease-out),
              border-color 0.5s var(--ease-out);
}

.nav.scrolled {
  height: 68px;
  background: rgba(10,10,10,0.96);
  border-bottom: 1px solid rgba(204,20,20,0.18);
}

.nav-inner {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 0.8rem 0 0.4rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* Brand : logo + signature texte couture
   Aligné franchement à gauche (padding 0), ensemble plus compact. */
.nav-brand {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  text-decoration: none;
  flex-shrink: 0;
  margin-right: auto;
  padding-left: 0;
  transition: opacity var(--t-fast) var(--ease-out);
}
.nav-brand:hover { opacity: 0.88; }

/* Logo : taille réduite, présence signature photographe-auteur */
.nav-logo-mark {
  position: relative;
  width: 72px;
  height: 72px;
  flex-shrink: 0;
  display: block;
  transition: width 0.5s var(--ease-out), height 0.5s var(--ease-out);
}

.nav.scrolled .nav-logo-mark {
  width: 56px;
  height: 56px;
}

.nav-logo-mark .logo-base {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

/* Bloc texte aligné verticalement avec le logo, compact
   gap réduit car la signature manuscrite a déjà des extensions visuelles */
.nav-brand-text {
  display: flex;
  flex-direction: column;
  gap: 0.05rem;
  line-height: 1;
  justify-content: center;
}

/* "Isabelle Schmitt" — Great Vibes, signature manuscrite calligraphique
   Réduit pour cohérence avec logo plus compact. Rouge profond. */
.nav-brand-name {
  font-family: 'Great Vibes', 'Allura', 'Pinyon Script', 'Cormorant Garamond', cursive;
  font-weight: 400;
  font-style: normal;
  font-size: 1.72rem;
  color: #b51212;
  letter-spacing: 0.005em;
  text-transform: none;
  line-height: 0.95;
  transform: translateY(-1px);
}

.nav.scrolled .nav-brand-name {
  font-size: 1.45rem;
}

/* "Capture the Moment" — sous le nom, finesse couture */
.nav-brand-tagline {
  font-family: 'Cormorant Garamond', 'Italiana', Georgia, serif;
  font-weight: 300;
  font-style: italic;
  font-size: 0.66rem;
  color: rgba(255,255,255,0.68);
  letter-spacing: 0.18em;
  text-transform: none;
  line-height: 1;
  margin-top: 0.05rem;
}

@media (max-width: 768px) {
  .nav-brand-text { display: none; }
}

/* Flash dot — superposé à la zone du point du "i" du logo */
.logo-flash-dot {
  position: absolute;
  top: 22%;
  left: 47%;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: #FFFFFF;
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, -50%);
  box-shadow: 0 0 0 0 rgba(255,255,255,0.9),
              0 0 0 0 rgba(204,20,20,0.6);
}

/* (Anciennes règles fallback retirées — elles imposaient text-transform: uppercase
   et font-family générique sur le parent .nav-brand, ce qui contaminait
   l'enseigne "Isabelle Schmitt".) */

/* Menu principal — esprit galerie / maison de couture
   Quasi-effacé au repos, plus discret que le logo et la signature.
   Décalé à droite pour éviter tout chevauchement avec la signature. */
.nav-links {
  display: flex;
  gap: 1.5rem;
  align-items: center;
  margin-left: auto;
  margin-right: 1.2rem;
  padding-left: 2rem;
}

.nav-links a {
  font-family: var(--font-sans);
  font-size: 0.5rem;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.78);
  font-weight: 300;
  position: relative;
  padding: 0.3rem 0;
  white-space: nowrap;
  transition: color 0.6s var(--ease-out), letter-spacing 0.6s var(--ease-out);
}

.nav-links a:hover,
.nav-links a.is-active {
  color: #FFFFFF;
  letter-spacing: 0.38em;
}

.nav-links a.is-active::after {
  content: '';
  position: absolute;
  left: 0; right: 0;
  bottom: -5px;
  height: 0.5px;
  background: var(--rouge);
  opacity: 0.85;
}

.nav-links a:not(.is-active)::after {
  content: '';
  position: absolute;
  left: 50%; right: 50%;
  bottom: -5px;
  height: 0.5px;
  background: var(--rouge);
  opacity: 0;
  transition: left 0.6s var(--ease-out),
              right 0.6s var(--ease-out),
              opacity 0.6s var(--ease-out);
}

.nav-links a:not(.is-active):hover::after {
  left: 0; right: 0;
  opacity: 0.7;
}

/* Cluster utilitaire à droite — ordre : fonds privé · DIMA · edge (social + langue) */
.nav-utility {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  flex-shrink: 0;
}

/* Bouton accès privé fonds d'œuvres — compact deux lignes, esprit clé d'or hôtel */
.nav-private-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.4rem 0.75rem 0.4rem 0.6rem;
  border: 0.5px solid rgba(255,255,255,0.18);
  background: transparent;
  font-family: var(--font-sans);
  text-decoration: none;
  white-space: nowrap;
  transition: background 0.4s var(--ease-out),
              border-color 0.4s var(--ease-out);
}

.nav-private-btn svg {
  color: var(--rouge);
  flex-shrink: 0;
  opacity: 0.85;
}

.nav-private-stack {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.18rem;
  line-height: 1;
}

/* Lignes 1 et 2 : MÊME typo que les onglets nav-links a — cohérence header */
.nav-private-line1,
.nav-private-line2 {
  font-family: var(--font-sans);
  font-size: 0.5rem;
  font-weight: 300;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  line-height: 1;
}

.nav-private-line1 {
  color: var(--rouge);
}

.nav-private-line2 {
  color: rgba(255,255,255,0.78);
}

.nav-private-btn:hover {
  background: rgba(204,20,20,0.07);
  border-color: rgba(204,20,20,0.5);
}

/* Edge — extrême droite : social + sépare + langue, ultra-discrets */
.nav-edge {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  padding-left: 0.4rem;
  flex-shrink: 0;
}

.nav-edge-sep {
  display: inline-block;
  width: 0.5px;
  height: 14px;
  background: rgba(255,255,255,0.16);
}

/* Réseaux sociaux — édition affinée */
.nav-social {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.nav-social-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  color: rgba(255,255,255,0.5);
  text-decoration: none;
  transition: color 0.4s var(--ease-out);
}

.nav-social-link:hover {
  color: var(--rouge);
}

/* Sélecteur de langue FR · EN — édition affinée */
.nav-lang {
  display: flex;
  align-items: center;
  gap: 0.28rem;
}

.nav-lang-btn {
  background: transparent;
  border: none;
  font-family: var(--font-sans);
  font-size: 0.5rem;
  font-weight: 300;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.45);
  cursor: pointer;
  padding: 0;
  transition: color 0.4s var(--ease-out);
}

.nav-lang-btn:hover { color: rgba(255,255,255,0.92); }

.nav-lang-btn.is-active {
  color: var(--rouge);
  font-weight: 400;
}

.nav-lang-sep {
  color: rgba(255,255,255,0.22);
  font-size: 0.55rem;
}

@media (max-width: 1280px) {
  .nav-private-line1,
  .nav-private-line2 { font-size: 0.46rem; letter-spacing: 0.3em; }
}

@media (max-width: 1100px) {
  .nav-edge { display: none; }
}

@media (max-width: 980px) {
  .nav-private-btn { display: none; }
}

/* Bouton DIMA — séparé, externe, discret luxe (ajusté à la finesse du menu) */
.nav-dima-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.42rem 0.85rem;
  border: 0.5px solid rgba(204,20,20,0.42);
  font-family: var(--font-sans);
  font-size: 0.5rem;
  font-weight: 300;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--rouge);
  text-decoration: none;
  white-space: nowrap;
  transition: background 0.4s var(--ease-out),
              color 0.4s var(--ease-out),
              border-color 0.4s var(--ease-out);
}

.nav-dima-btn:hover {
  background: var(--rouge);
  color: var(--blanc);
  border-color: var(--rouge);
}

.dima-arrow {
  font-size: 0.78rem;
  display: inline-block;
  transform: translateY(-1px);
  transition: transform 0.3s var(--ease-out);
}

.nav-dima-btn:hover .dima-arrow {
  transform: translate(2px, -3px);
}

@media (max-width: 1100px) {
  .nav-dima-btn .dima-text { display: none; }
  .nav-dima-btn { padding: 0.5rem 0.7rem; gap: 0; }
}

/* ============================================================
   Switch langue FR / EN — discret, place apres les reseaux sociaux
   Style premium aligne sur la DA — JetBrains Mono, lettre-spacing aere
   ============================================================ */
.nav-lang-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-family: 'JetBrains Mono', 'Manrope', sans-serif;
  font-size: 0.6rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  font-weight: 400;
  line-height: 1;
  margin-left: 0.4rem;
}
.nav-lang-toggle a {
  color: rgba(255,255,255,0.45);
  text-decoration: none;
  transition: color 0.35s ease;
  padding: 0.2rem 0.1rem;
}
.nav-lang-toggle a:hover { color: rgba(255,255,255,0.85); }
.nav-lang-toggle a.is-active { color: #fff; font-weight: 600; }
.nav-lang-toggle .lang-sep { color: rgba(255,255,255,0.25); font-weight: 300; }

.nav.scrolled .nav-lang-toggle a { color: rgba(20,20,20,0.5); }
.nav.scrolled .nav-lang-toggle a:hover { color: rgba(20,20,20,0.9); }
.nav.scrolled .nav-lang-toggle a.is-active { color: #0A0A0A; }
.nav.scrolled .nav-lang-toggle .lang-sep { color: rgba(20,20,20,0.3); }

@media (max-width: 768px) {
  .nav-lang-toggle { margin-left: 0.25rem; font-size: 0.55rem; gap: 0.35rem; }
}

.nav-toggle {
  display: none;
  font-size: 1.5rem;
  color: var(--blanc);
  z-index: 51;
}

@media (max-width: 968px) {
  .nav-links {
    position: fixed;
    top: 0; right: -100%;
    width: 80%; max-width: 340px;
    height: 100vh;
    background: #111111;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    padding: 4rem 2rem;
    gap: 1.2rem;
    transition: right var(--t-medium) var(--ease-out);
    border-left: 1px solid rgba(204,20,20,0.2);
    box-shadow: -8px 0 40px rgba(0,0,0,0.6);
  }
  .nav-links a { color: rgba(255,255,255,0.7) !important; }
  .nav-links.open { right: 0; }
  .nav-toggle { display: block; }
  .btn-nav-cta { width: 100%; text-align: center; }
}

/* ---------- BOUTONS — couture luxe, esprit Apple / galerie ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.75rem 1.7rem;
  font-family: var(--font-sans);
  font-size: 0.62rem;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  font-weight: 300;
  cursor: pointer;
  transition: all 0.5s var(--ease-out);
  border: 0.5px solid currentColor;
  white-space: nowrap;
}

.btn-rouge {
  background: var(--rouge);
  color: var(--blanc);
  border-color: var(--rouge);
}
.btn-rouge:hover {
  background: var(--rouge-fonce);
  border-color: var(--rouge-fonce);
  letter-spacing: 0.36em;
}

.btn-outline {
  background: transparent;
  color: var(--blanc);
  border: 0.5px solid rgba(255,255,255,0.4);
}
.btn-outline:hover {
  background: rgba(255,255,255,0.04);
  border-color: rgba(255,255,255,0.85);
  letter-spacing: 0.36em;
}

.btn-outline-light {
  background: transparent;
  color: rgba(255,255,255,0.85);
  border: 0.5px solid rgba(255,255,255,0.3);
}
.btn-outline-light:hover {
  background: rgba(255,255,255,0.04);
  border-color: rgba(255,255,255,0.78);
  color: var(--blanc);
  letter-spacing: 0.36em;
}

.btn-outline-dark {
  background: transparent;
  color: rgba(255,255,255,0.78);
  border: 0.5px solid rgba(255,255,255,0.2);
}
.btn-outline-dark:hover {
  border-color: var(--rouge);
  color: var(--rouge);
  letter-spacing: 0.36em;
}

.cta-group {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  margin-top: var(--space-md);
}

.cta-group--center {
  justify-content: center;
  margin-top: 2.4rem;
}

/* Signature curatoriale a droite du CTA — bio editorial */
.cta-signature {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 0.92rem;
  color: rgba(255,255,255,0.55);
  line-height: 1.55;
  max-width: 36ch;
  align-self: center;
  letter-spacing: 0.01em;
  flex: 1 1 280px;
}

/* Bloc 4 stats — wrap doux sur tablette/mobile */
@media (max-width: 900px) {
  .bio-stats { flex-wrap: wrap; gap: 1.4rem 2rem; }
}

@media (max-width: 600px) {
  .cta-signature { max-width: 100%; font-size: 0.86rem; line-height: 1.5; margin-top: 0.4rem; }
}

@media (max-width: 480px) {
  .cta-group { flex-direction: column; }
  .btn { width: 100%; }
  .cta-signature { text-align: center; }
}

/* =====================================================
   CINEMATIC CURTAIN TRANSITION
   Fichier : curtain.js — conservé intact
   ===================================================== */

.curtain-stage {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: #0A0A0A;
}

.curtain-image-layer {
  position: absolute;
  inset: 0;
}

.curtain-img {
  position: absolute;
  inset: 0;
  background-color: #1A1A1A;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  opacity: 0;
  transform: scale(1);
  transition: opacity 0.05s linear;
  will-change: transform, opacity;
}

.curtain-img.active {
  opacity: 1;
  animation: curtain-breathe 4s var(--ease-breathe) forwards;
}

@keyframes curtain-breathe {
  0%   { transform: scale(1); }
  60%  { transform: scale(1.04); }
  100% { transform: scale(1.025); }
}

.curtain-blade {
  position: absolute;
  top: 0; bottom: 0;
  width: 50.5%;
  background: #0A0A0A;
  z-index: 5;
  pointer-events: none;
}
.curtain-blade-left  { left: 0;  transform: translateX(-101%); }
.curtain-blade-right { right: 0; transform: translateX(101%);  }

.curtain-stage.closing .curtain-blade-left  { animation: blade-close-left  0.8s var(--ease-curtain) forwards; }
.curtain-stage.closing .curtain-blade-right { animation: blade-close-right 0.8s var(--ease-curtain) forwards; }
@keyframes blade-close-left  { to { transform: translateX(0); } }
@keyframes blade-close-right { to { transform: translateX(0); } }

.curtain-stage.opening .curtain-blade-left  { animation: blade-open-left  0.8s var(--ease-curtain) forwards; }
.curtain-stage.opening .curtain-blade-right { animation: blade-open-right 0.8s var(--ease-curtain) forwards; }
@keyframes blade-open-left  { from { transform: translateX(0); } to { transform: translateX(-101%); } }
@keyframes blade-open-right { from { transform: translateX(0); } to { transform: translateX(101%);  } }

/* Variante obturateur horizontal */
.curtain-stage.variant-shutter .curtain-blade { width: 100%; height: 50.5%; top: auto; bottom: auto; left: 0; right: 0; }
.curtain-stage.variant-shutter .curtain-blade-left  { top: 0;    transform: translateY(-101%); }
.curtain-stage.variant-shutter .curtain-blade-right { bottom: 0; transform: translateY(101%);  }
.curtain-stage.variant-shutter.closing .curtain-blade-left  { animation: shutter-close-top 0.8s var(--ease-curtain) forwards; }
.curtain-stage.variant-shutter.closing .curtain-blade-right { animation: shutter-close-bot 0.8s var(--ease-curtain) forwards; }
.curtain-stage.variant-shutter.opening .curtain-blade-left  { animation: shutter-open-top  0.8s var(--ease-curtain) forwards; }
.curtain-stage.variant-shutter.opening .curtain-blade-right { animation: shutter-open-bot  0.8s var(--ease-curtain) forwards; }
@keyframes shutter-close-top { to   { transform: translateY(0);     } }
@keyframes shutter-close-bot { to   { transform: translateY(0);     } }
@keyframes shutter-open-top  { from { transform: translateY(0); } to { transform: translateY(-101%); } }
@keyframes shutter-open-bot  { from { transform: translateY(0); } to { transform: translateY(101%);  } }

/* Variante iris */
.curtain-stage.variant-iris .curtain-blade { display: none; }
.curtain-stage.variant-iris .curtain-image-layer {
  -webkit-mask: radial-gradient(circle at center, black 100%, transparent 100%);
          mask: radial-gradient(circle at center, black 100%, transparent 100%);
}
.curtain-stage.variant-iris.closing .curtain-image-layer { animation: iris-close 0.8s var(--ease-curtain) forwards; }
.curtain-stage.variant-iris.opening .curtain-image-layer { animation: iris-open  0.8s var(--ease-curtain) forwards; }
@keyframes iris-close {
  from { -webkit-mask: radial-gradient(circle at center, black 100%, transparent 100%); mask: radial-gradient(circle at center, black 100%, transparent 100%); }
  to   { -webkit-mask: radial-gradient(circle at center, black 0%,   transparent 0%);   mask: radial-gradient(circle at center, black 0%,   transparent 0%);   }
}
@keyframes iris-open {
  from { -webkit-mask: radial-gradient(circle at center, black 0%,   transparent 0%);   mask: radial-gradient(circle at center, black 0%,   transparent 0%);   }
  to   { -webkit-mask: radial-gradient(circle at center, black 100%, transparent 100%); mask: radial-gradient(circle at center, black 100%, transparent 100%); }
}

@media (prefers-reduced-motion: reduce) {
  .curtain-img.active { animation: none; transform: scale(1); }
  .curtain-stage.closing .curtain-blade,
  .curtain-stage.opening .curtain-blade { animation: none !important; }
  .curtain-img { transition: opacity 0.4s linear; }
}

/* =====================================================
   CINEMATIC OPENING · scène noire immersive
   Phrases monumentales qui sortent de la profondeur
   Esprit keynote Apple / opening cinéma luxe
   ===================================================== */

.cinematic-opening {
  position: relative;
  width: 100%;
  height: 72vh;
  min-height: 600px;
  background: #000;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  perspective: 2200px;
  perspective-origin: 50% 50%;
  /* Respect de la nav fixed sur le dessus + respiration luxe */
  padding-top: 92px;
}

/* Respiration rouge profonde — pulsation lente */
.opening-pulse {
  position: absolute;
  inset: -8%;
  background:
    radial-gradient(ellipse 55% 38% at 50% 50%, rgba(180,18,18,0.10) 0%, transparent 62%),
    radial-gradient(ellipse 80% 60% at 50% 55%, rgba(120,8,8,0.05) 0%, transparent 72%);
  pointer-events: none;
  animation: opening-pulse 6.5s ease-in-out infinite alternate;
  filter: blur(2px);
}

@keyframes opening-pulse {
  0%   { opacity: 0.55; transform: scale(0.97); }
  100% { opacity: 1.00; transform: scale(1.04); }
}

/* Grain cinéma — bruit subtil */
.opening-grain {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.42;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.92' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 0.55 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  background-size: 240px 240px;
  animation: grain-shift 1.6s steps(6) infinite;
}

@keyframes grain-shift {
  0%   { transform: translate(0, 0); }
  20%  { transform: translate(-3%, 1%); }
  40%  { transform: translate(2%, -2%); }
  60%  { transform: translate(-1%, 3%); }
  80%  { transform: translate(3%, 1%); }
  100% { transform: translate(0, 0); }
}

/* Stage cumulative — frames empilées, composition hiérarchisée */
.opening-stage {
  position: relative;
  width: 100%;
  max-width: 1200px;
  padding: 0 var(--space-md);
  text-align: center;
  transform-style: preserve-3d;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.6rem;
}

.opening-credential-stack {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.55rem;
  margin-top: 0.4rem;
  transform-style: preserve-3d;
}

/* Frames de credentials — Cormorant Italic 300, éditorial cinéma */
.opening-frame {
  position: relative;
  text-align: center;
  line-height: 1.35;
  opacity: 0;
  will-change: opacity, transform, filter;
  transform-style: preserve-3d;
}

.opening-frame--credential {
  font-family: 'Cormorant Garamond', 'Didot', Georgia, serif;
  font-size: clamp(1rem, 1.65vw, 1.35rem);
  letter-spacing: 0.04em;
  text-transform: none;
  color: rgba(255,255,255,0.82);
  font-weight: 300;
  font-style: italic;
  text-shadow:
    0 0 28px rgba(0,0,0,0.92),
    0 0 56px rgba(180,18,18,0.10);
}

.frame-sep {
  color: rgba(180,18,18,0.85);
  margin: 0 0.45em;
  font-style: normal;
  font-family: 'Cormorant Garamond', Georgia, serif;
}

/* Isabelle Schmitt — centerpiece signature à la plume
   Great Vibes : calligraphie élégante. Plus respirant, légèrement plus bas.
   Animation : respiration cinématographique très subtile (luxe). */
.opening-frame--name {
  font-family: 'Great Vibes', 'Allura', 'Pinyon Script', 'Cormorant Garamond', cursive;
  font-weight: 400;
  font-style: normal;
  font-size: clamp(3.2rem, 8.6vw, 7.6rem);
  letter-spacing: 0.005em;
  text-transform: none;
  color: #b51212;
  line-height: 1;
  margin-top: 1.4rem;
  margin-bottom: 1rem;
  padding: 0.2em 0;
  text-shadow:
    0 0 38px rgba(0,0,0,0.92),
    0 0 90px rgba(180,18,18,0.42),
    0 0 24px rgba(196,20,20,0.20);
}

/* Animation subtile cinématographique : respiration luxe.
   Active une fois la phrase posée — micro-pulsation imperceptible. */
.opening-frame--name.is-settled {
  animation: opening-name-breath 7.2s ease-in-out 0.6s infinite;
}

@keyframes opening-name-breath {
  0%   { letter-spacing: 0.005em; filter: drop-shadow(0 0 24px rgba(180,18,18,0.22)); }
  50%  { letter-spacing: 0.012em; filter: drop-shadow(0 0 32px rgba(180,18,18,0.32)); }
  100% { letter-spacing: 0.005em; filter: drop-shadow(0 0 24px rgba(180,18,18,0.22)); }
}

/* Scroll cue à la fin de l'opening — RETIRÉ de la composition.
   Conservé en display:none pour ne pas casser les anciens caches. */
.opening-scroll {
  display: none !important;
}
.opening-scroll-disabled-orig {
  position: absolute;
  left: 50%;
  bottom: 3rem;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.7rem;
  opacity: 0;
  pointer-events: none;
  z-index: 5;
}

.opening-scroll-line {
  width: 1px;
  height: 32px;
  background: linear-gradient(to bottom, transparent, rgba(255,255,255,0.5));
  position: relative;
  overflow: hidden;
}

.opening-scroll-line::after {
  content: '';
  position: absolute;
  top: -32px;
  left: 0;
  width: 1px;
  height: 32px;
  background: rgba(255,255,255,0.85);
  animation: opening-scroll-pulse 2.4s ease-in-out infinite;
}

@keyframes opening-scroll-pulse {
  0%   { top: -32px; }
  60%  { top: 32px; }
  100% { top: 32px; }
}

.opening-scroll-text {
  font-family: var(--font-sans);
  font-size: 0.6rem;
  font-weight: 300;
  letter-spacing: 0.42em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.42);
}

/* Reduced motion : composition complète visible */
@media (prefers-reduced-motion: reduce) {
  .opening-frame { opacity: 1; }
  .opening-scroll { opacity: 1; }
}

/* Responsive */
@media (max-width: 768px) {
  .cinematic-opening {
    height: 60vh;
    min-height: 480px;
  }
  .opening-stage { gap: 1.2rem; padding: 0 var(--space-sm); }
  .opening-credential-stack { gap: 0.45rem; }
  .opening-frame--name {
    font-size: clamp(1.8rem, 8.5vw, 2.6rem);
    letter-spacing: 0.005em;
  }
  .opening-frame--credential {
    font-size: clamp(0.78rem, 2.6vw, 0.95rem);
    letter-spacing: 0.03em;
  }
  .opening-scroll { bottom: 1.4rem; }
}

@media (max-width: 480px) {
  .opening-frame--name {
    font-size: clamp(1.6rem, 8.8vw, 2.1rem);
    letter-spacing: 0.005em;
  }
  .opening-frame--credential {
    font-size: 0.78rem;
    letter-spacing: 0.025em;
  }
  .frame-sep { margin: 0 0.3em; }
}

/* =====================================================
   HERO — Cinematic plein écran immersif
   UNE photo plein écran à la fois · zoom lent · curtain
   Overlay typographique : nom + tagline + disciplines
   ===================================================== */

.hero {
  position: relative;
  height: 100vh;
  min-height: 680px;
  width: 100%;
  overflow: hidden;
  background: var(--noir);
}

.hero .curtain-stage {
  position: absolute;
  inset: 0;
  z-index: 1;
}

/* Léger zoom lent — effet cinéma — sur l'image active */
.hero-zoom {
  animation: hero-slow-zoom 14s ease-in-out infinite alternate;
  transform-origin: center center;
}

@keyframes hero-slow-zoom {
  0%   { transform: scale(1.00); }
  100% { transform: scale(1.06); }
}

/* Voile dégradé pour lisibilité — noir cinéma plus profond */
.hero-veil-gradient {
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
  background:
    linear-gradient(105deg, rgba(0,0,0,0.78) 0%, rgba(0,0,0,0.42) 50%, rgba(0,0,0,0.28) 100%),
    linear-gradient(180deg, rgba(0,0,0,0.45) 0%, transparent 35%, rgba(0,0,0,0.72) 100%),
    radial-gradient(ellipse 90% 70% at 50% 50%, transparent 30%, rgba(0,0,0,0.4) 100%);
}

/* Hero : fond plus profond avec respiration rouge subtile */
.hero {
  background: #050505;
}
.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  background:
    radial-gradient(ellipse 90% 60% at 50% 60%, rgba(180,18,18,0.04) 0%, transparent 70%);
  pointer-events: none;
}

/* ----- OVERLAY TYPOGRAPHIQUE ----- */
.hero-overlay {
  position: absolute;
  inset: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding: 0 var(--space-md);
  pointer-events: none;
}

.hero-overlay-inner {
  max-width: var(--container-max);
  width: 100%;
  margin: 0 auto;
  padding-left: 1rem;
}

.hero-title {
  font-family: var(--font-serif);
  font-weight: 300;
  line-height: 0.95;
  margin: 0 0 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.hero-title-name {
  display: block;
  font-family: 'Great Vibes', 'Allura', 'Pinyon Script', 'Cormorant Garamond', cursive;
  font-weight: 400;
  font-style: normal;
  font-size: clamp(3.4rem, 7.4vw, 7rem);
  letter-spacing: 0.005em;
  text-transform: none;
  color: var(--rouge);
  line-height: 1.05;
  padding: 0.1em 0;
  text-shadow: 0 2px 30px rgba(0,0,0,0.6);
  opacity: 0;
  transform: translateX(-40px);
  filter: blur(6px);
}

.hero-title-tagline {
  display: block;
  font-style: italic;
  font-weight: 300;
  font-size: clamp(1.2rem, 2.4vw, 2rem);
  letter-spacing: 0.04em;
  color: var(--blanc);
  text-shadow: 0 1px 18px rgba(0,0,0,0.55);
  opacity: 0;
  transform: translateX(-32px);
  filter: blur(5px);
}

.hero-disciplines {
  font-family: var(--font-sans);
  font-weight: 300;
  font-size: clamp(0.7rem, 0.95vw, 0.85rem);
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.78);
  margin: 0.6rem 0 0;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.7rem 0.85rem;
  opacity: 0;
  transform: translateX(-26px);
  text-shadow: 0 1px 12px rgba(0,0,0,0.6);
  max-width: 100%;
}

.hero-dot {
  color: var(--rouge);
  font-size: 1.05em;
  line-height: 1;
}

@media (max-width: 768px) {
  .hero-overlay-inner { padding-left: 0; }
  .hero-disciplines { font-size: 0.66rem; gap: 0.4rem 0.6rem; }
}

/* ----- SCROLL CUE ----- */
.hero-scroll {
  position: absolute;
  left: 50%;
  bottom: 2.4rem;
  transform: translateX(-50%);
  z-index: 7;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.8rem;
  pointer-events: none;
  opacity: 0;
}

.hero-scroll-text {
  font-family: var(--font-sans);
  font-weight: 300;
  font-size: 0.62rem;
  letter-spacing: 0.42em;
  text-transform: uppercase;
  color: var(--color-text-3);
}

.hero-scroll-line {
  width: 1px;
  height: 38px;
  background: linear-gradient(to bottom, rgba(255,255,255,0.42), transparent);
  position: relative;
  overflow: hidden;
}
.hero-scroll-line::after {
  content: '';
  position: absolute;
  top: -38px; left: 0;
  width: 1px; height: 38px;
  background: rgba(255,255,255,0.85);
  animation: scroll-pulse 2.6s ease-in-out infinite;
}
@keyframes scroll-pulse {
  0%   { top: -38px; }
  60%  { top: 38px; }
  100% { top: 38px; }
}

/* ----- RESPONSIVE ----- */
@media (max-width: 768px) {
  .hero { min-height: 580px; }
  .hero-overlay { padding: 0 var(--space-sm); }
  .hero-scroll { display: none; }
}

/* =====================================================
   FRISE DISTINCTIONS — ligne TEXTE éditoriale défilante
   Esprit galerie internationale / institution culturelle
   ===================================================== */

.signature-band {
  background: var(--noir);
  border-top: none;
  border-bottom: 0.5px solid rgba(255,255,255,0.06);
  padding: 0.9rem 0 1.1rem;
  margin-top: 0;
  overflow: hidden;
}

.signature-text-marquee {
  position: relative;
  width: 100%;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to right,
    transparent 0,
    #000 100px,
    #000 calc(100% - 100px),
    transparent 100%);
          mask-image: linear-gradient(to right,
    transparent 0,
    #000 100px,
    #000 calc(100% - 100px),
    transparent 100%);
}

.signature-text-track {
  display: flex;
  width: max-content;
  animation: signature-text-scroll 70s linear infinite;
  will-change: transform;
}

.signature-text-marquee:hover .signature-text-track {
  animation-play-state: paused;
}

.signature-text-set {
  display: flex;
  align-items: center;
  gap: 1.6rem;
  padding-right: 1.6rem;
  flex-shrink: 0;
}

.sig-item {
  font-family: 'Cormorant Garamond', 'Italiana', Georgia, serif;
  font-style: italic;
  font-weight: 300;
  font-size: 1.18rem;
  letter-spacing: 0.04em;
  color: rgba(255,255,255,0.78);
  white-space: nowrap;
  flex-shrink: 0;
  transition: color 0.5s var(--ease-out);
}

.sig-item:hover {
  color: var(--blanc);
}

.sig-dot {
  color: rgba(204,20,20,0.7);
  font-size: 0.5rem;
  font-weight: 400;
  flex-shrink: 0;
  transform: translateY(-1px);
}

@keyframes signature-text-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

@media (prefers-reduced-motion: reduce) {
  .signature-text-track { animation: none; }
}

@media (max-width: 700px) {
  .signature-band { padding: 1.2rem 0; }
  .sig-item { font-size: 1rem; }
}

/* (Ancien système signature-frise photos — code obsolète conservé inerte) */

.signature-frise-marquee {
  position: relative;
  width: 100%;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to right,
    transparent 0,
    #000 100px,
    #000 calc(100% - 100px),
    transparent 100%);
          mask-image: linear-gradient(to right,
    transparent 0,
    #000 100px,
    #000 calc(100% - 100px),
    transparent 100%);
}

.signature-frise-track {
  display: flex;
  width: max-content;
  animation: signature-frise-scroll 80s linear infinite;
  will-change: transform;
}

.signature-frise-marquee:hover .signature-frise-track {
  animation-play-state: paused;
}

.signature-frise-set {
  display: flex;
  align-items: center;
  gap: 2px;
  padding-right: 2px;
  flex-shrink: 0;
}

/* Plaque distinction — codes DIMA exacts
   Bordure ultra-fine var(--line), hover rouge subtil, esprit cellule galerie */
.distinction-tile {
  flex: 0 0 280px;
  margin: 0;
  position: relative;
  overflow: hidden;
  background: rgba(255,255,255,0.012);
  aspect-ratio: 1/1;
  cursor: zoom-in;
  border: 1px solid rgba(200,208,217,0.08);
  transition: all 0.5s var(--ease-out);
}

.distinction-tile:hover {
  background: rgba(204,20,20,0.03);
  border-color: rgba(204,20,20,0.18);
  transform: translateY(-1px);
}

.distinction-tile img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  filter: brightness(0.5) contrast(1.05) grayscale(35%);
  transition: filter 0.9s var(--ease-out), transform 1.8s var(--ease-out);
}

.distinction-tile:hover img {
  filter: brightness(0.62) contrast(1.08) grayscale(15%);
  transform: scale(1.03);
}

.distinction-tile::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(0,0,0,0.4) 0%, rgba(0,0,0,0.2) 30%, rgba(0,0,0,0.85) 100%);
  pointer-events: none;
}

.distinction-tile figcaption {
  position: absolute;
  inset: auto 0 0 0;
  z-index: 2;
  padding: 1.2rem 1.3rem 1.2rem;
  display: flex;
  flex-direction: column;
  gap: 0.32rem;
  pointer-events: none;
}

.dist-period {
  font-family: var(--font-sans);
  font-size: 0.5rem;
  font-weight: 400;
  letter-spacing: 0.36em;
  text-transform: uppercase;
  color: var(--rouge);
}

.dist-label {
  font-family: 'Italiana', 'Cormorant Garamond', Georgia, serif;
  font-weight: 400;
  font-size: 1.14rem;
  letter-spacing: 0.02em;
  color: rgba(255,255,255,0.96);
  line-height: 1.2;
  text-shadow: 0 1px 14px rgba(0,0,0,0.55);
}

.dist-context {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-style: italic;
  font-size: 0.84rem;
  font-weight: 300;
  color: rgba(255,255,255,0.7);
  letter-spacing: 0.005em;
  line-height: 1.4;
}

@keyframes signature-frise-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

@media (prefers-reduced-motion: reduce) {
  .signature-frise-track { animation: none; }
}

@media (max-width: 700px) {
  .signature-band { padding: 3rem 0; }
  .distinction-tile { flex: 0 0 220px; }
  .dist-label { font-size: 1rem; }
  .dist-context { font-size: 0.76rem; }
}

/* =====================================================
   INTRO — citation / tagline
   ===================================================== */

.intro {
  padding: var(--space-xl) 0;
  text-align: center;
  background: var(--noir-alt);
  border-top: 1px solid rgba(255,255,255,0.05);
  border-bottom: 1px solid rgba(255,255,255,0.05);
}

.intro-text {
  font-family: var(--font-serif);
  font-size: clamp(1.6rem, 3.5vw, 2.8rem);
  font-weight: 300;
  line-height: 1.45;
  color: rgba(255,255,255,0.9);
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  max-width: none;
}

.intro-text span:nth-child(2) { color: rgba(255,255,255,0.5); }
.intro-text .italic { color: var(--rouge); font-style: italic; }

/* =====================================================
   BIOGRAPHIE
   ===================================================== */

.bio {
  padding: var(--space-xxl) 0;
  background: var(--noir);
}

.bio-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 5rem;
  align-items: center;
}

.bio-portrait {
  position: relative;
}

.bio-portrait img {
  width: 100%;
  aspect-ratio: 4/5;
  object-fit: cover;
  object-position: center top;
  filter: grayscale(15%);
}

/* Cadre rouge décalé portrait */
.bio-portrait::after {
  content: '';
  position: absolute;
  bottom: -1.5rem;
  right: -1.5rem;
  width: 60%;
  height: 60%;
  border: 1px solid rgba(204,20,20,0.4);
  z-index: -1;
}

.bio-content .eyebrow { margin-bottom: 1rem; }

.bio-content h2 {
  font-size: clamp(2rem, 3.5vw, 3rem);
  font-weight: 300;
  margin-bottom: 1.5rem;
  line-height: 1.15;
}

.bio-content p { max-width: 56ch; margin-bottom: 1.2rem; }

.bio-stats {
  display: flex;
  gap: 2.5rem;
  margin-top: 2rem;
  padding-top: 2rem;
  border-top: 1px solid rgba(255,255,255,0.07);
}

.bio-stat-num {
  font-family: var(--font-serif);
  font-size: 2.4rem;
  font-weight: 300;
  color: var(--rouge);
  line-height: 1;
  display: block;
}

.bio-stat-label {
  font-family: var(--font-sans);
  font-size: 0.72rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.38);
  margin-top: 0.3rem;
  display: block;
}

@media (max-width: 900px) {
  .bio-inner { grid-template-columns: 1fr; gap: 3rem; }
  .bio-portrait::after { display: none; }
}

/* =====================================================
   BIOGRAPHIE ÉDITORIALE — version forte avec image verticale
   + bandeau reportage institutionnel défilant
   ===================================================== */

.bio--editorial {
  background: var(--noir);
  padding: 4.5rem 0 4rem;
  color: var(--blanc);
}

.bio-editorial-grid {
  display: grid;
  grid-template-columns: minmax(360px, 0.85fr) 1fr;
  gap: 4.5rem;
  align-items: stretch;
  margin-bottom: 5rem;
}

/* Image hero verticale (Éclair NY) — pleine hauteur, signature couture */
.bio-hero-image {
  position: relative;
  align-self: stretch;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: 620px;
  overflow: hidden;
  background: #000;
}

.bio-hero-image img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  filter: contrast(1.03) saturate(0.95);
  transition: transform 1.6s var(--ease-out), filter 1.6s var(--ease-out);
}

.bio-hero-image::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, transparent 55%, rgba(0,0,0,0.65) 100%),
    linear-gradient(180deg, rgba(0,0,0,0.18) 0%, transparent 30%);
  z-index: 1;
  pointer-events: none;
}

.bio-hero-image::after {
  content: '';
  position: absolute;
  bottom: 1.4rem;
  left: 1.4rem;
  width: 32px;
  height: 1px;
  background: var(--rouge);
  z-index: 2;
}

.bio-hero-image:hover img {
  transform: scale(1.025);
  filter: contrast(1.06) saturate(1);
}

.bio-hero-credit {
  position: relative;
  z-index: 2;
  padding: 1.4rem 1.4rem 1.4rem 4rem;
  font-family: var(--font-sans);
  font-size: 0.68rem;
  font-weight: 300;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.78);
}

/* Colonne texte */
.bio--editorial .bio-content {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.bio--editorial .bio-content h2 {
  font-family: var(--font-serif);
  font-size: clamp(2.2rem, 3.6vw, 3.2rem);
  font-weight: 300;
  margin-bottom: 1.6rem;
  line-height: 1.12;
  color: var(--blanc);
}

.bio--editorial .bio-content h2 em {
  color: var(--rouge);
  font-style: italic;
  font-weight: 300;
}

.bio--editorial .bio-content p {
  color: rgba(255,255,255,0.78);
  max-width: 56ch;
  margin-bottom: 1.2rem;
  font-size: 1.02rem;
  line-height: 1.7;
}

.bio--editorial .bio-content strong {
  color: var(--blanc);
  font-weight: 400;
}

/* Bandeau reportage institutionnel — défilement horizontal premium */
.bio-reportage {
  margin-top: 3rem;
  padding-top: 3rem;
  border-top: 1px solid rgba(255,255,255,0.08);
}

.bio-reportage-label {
  display: block;
  font-family: var(--font-sans);
  font-size: 0.7rem;
  font-weight: 300;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.5);
  margin-bottom: 1.6rem;
}

.bio-reportage-track {
  display: flex;
  gap: 1.4rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding: 0.5rem 0 1.5rem;
  scrollbar-width: thin;
  scrollbar-color: rgba(204,20,20,0.4) rgba(255,255,255,0.05);
  -webkit-overflow-scrolling: touch;
}

.bio-reportage-track::-webkit-scrollbar {
  height: 4px;
}
.bio-reportage-track::-webkit-scrollbar-track {
  background: rgba(255,255,255,0.05);
}
.bio-reportage-track::-webkit-scrollbar-thumb {
  background: rgba(204,20,20,0.5);
}

.bio-reportage-card {
  flex: 0 0 320px;
  margin: 0;
  scroll-snap-align: start;
  position: relative;
  overflow: hidden;
  background: #0F0F0F;
  transition: transform 0.6s var(--ease-out);
}

.bio-reportage-card img {
  width: 100%;
  height: 220px;
  object-fit: cover;
  object-position: center;
  display: block;
  filter: grayscale(28%) contrast(1.02);
  transition: filter 0.7s var(--ease-out), transform 1.2s var(--ease-out);
}

.bio-reportage-card:hover img {
  filter: grayscale(0%) contrast(1.06);
  transform: scale(1.03);
}

.bio-reportage-card figcaption {
  padding: 0.85rem 1rem 1.1rem;
  font-family: var(--font-sans);
  font-size: 0.72rem;
  font-weight: 300;
  letter-spacing: 0.12em;
  color: rgba(255,255,255,0.7);
  line-height: 1.4;
  border-bottom: 0.5px solid rgba(204,20,20,0.35);
}

@media (max-width: 900px) {
  .bio-editorial-grid {
    grid-template-columns: 1fr;
    gap: 2.5rem;
  }
  .bio-hero-image { min-height: 480px; }
  .bio-reportage-card { flex: 0 0 280px; }
}

/* =====================================================
   DOMAINES — 4 piliers
   ===================================================== */

.domaines {
  padding: var(--space-xxl) 0;
  background: var(--noir-alt);
}

.domaines-header {
  text-align: center;
  margin-bottom: var(--space-lg);
}

.domaines-header h2 {
  font-size: clamp(2rem, 4vw, 3.2rem);
  font-weight: 300;
  margin-bottom: 1rem;
}

.domaines-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  border-top: 1px solid rgba(255,255,255,0.06);
  border-bottom: 1px solid rgba(255,255,255,0.06);
  background: var(--noir-card);
}

.domaine {
  padding: 2.5rem 2rem 3rem;
  border-right: 1px solid rgba(255,255,255,0.06);
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
  min-height: 300px;
  transition: background var(--t-fast) var(--ease-out);
}
.domaine:last-child { border-right: none; }
.domaine:hover { background: #1a1a1a; }

.domaine-num {
  font-family: var(--font-serif);
  font-style: italic;
  color: var(--rouge);
  font-size: 0.9rem;
  letter-spacing: 0.12em;
  margin-bottom: 1.2rem;
}

.domaine h3 {
  font-size: 1.45rem;
  font-weight: 400;
  margin-bottom: 0.9rem;
  line-height: 1.2;
  color: var(--blanc);
}

.domaine p {
  font-size: 0.93rem;
  color: rgba(255,255,255,0.48);
  flex-grow: 1;
  max-width: none;
}

.domaine-link {
  margin-top: 1.5rem;
  font-family: var(--font-sans);
  font-size: 0.7rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--rouge);
  display: inline-block;
  transition: letter-spacing var(--t-medium) var(--ease-out);
}
.domaine:hover .domaine-link { letter-spacing: 0.3em; }

@media (max-width: 968px) {
  .domaines-grid { grid-template-columns: repeat(2, 1fr); }
  .domaine:nth-child(2) { border-right: none; }
  .domaine:nth-child(1),
  .domaine:nth-child(2) { border-bottom: 1px solid rgba(255,255,255,0.06); }
}
@media (max-width: 600px) {
  .domaines-grid { grid-template-columns: 1fr; }
  .domaine { border-right: none; border-bottom: 1px solid rgba(255,255,255,0.06); min-height: 0; }
  .domaine:last-child { border-bottom: none; }
}

/* =====================================================
   EXPOSITIONS — section
   ===================================================== */

.expositions {
  padding: 5rem 0 4rem;
  background: var(--noir);
}

.expo-header {
  text-align: center;
  max-width: 760px;
  margin: 0 auto var(--space-xl);
}

.expo-header .eyebrow {
  display: block;
  color: var(--rouge);
  font-family: var(--font-sans);
  font-size: 0.7rem;
  font-weight: 300;
  letter-spacing: 0.36em;
  text-transform: uppercase;
  margin-bottom: 1.2rem;
  text-align: center;
}

.expo-header h2 {
  font-family: var(--font-serif);
  font-size: clamp(2.4rem, 4.4vw, 3.6rem);
  font-weight: 300;
  line-height: 1.12;
  letter-spacing: -0.005em;
  color: var(--blanc);
  margin: 0 auto;
  text-align: center;
}

.expo-header h2 em {
  color: var(--rouge);
  font-style: italic;
}

.expo-header h2::after {
  content: '';
  display: block;
  width: 32px;
  height: 0.5px;
  background: var(--rouge);
  margin: 1.6rem auto 0;
  opacity: 0.85;
}

.expo-list {
  display: flex;
  flex-direction: column;
  border-top: 1px solid rgba(255,255,255,0.07);
}

.expo-item {
  display: grid;
  grid-template-columns: 130px 1fr auto;
  align-items: baseline;
  gap: 2rem;
  padding: 1.1rem 0;
  border-bottom: 0.5px solid rgba(255,255,255,0.05);
  transition: all var(--t-fast) var(--ease-out);
}
.expo-item:hover {
  background: var(--noir-alt);
  margin: 0 -1rem;
  padding-left: 1rem;
  padding-right: 1rem;
}

.expo-year {
  font-family: var(--font-serif);
  font-size: 0.85rem;
  color: var(--rouge);
  letter-spacing: 0.08em;
  font-style: italic;
}

.expo-name {
  font-family: var(--font-serif);
  font-size: 1.25rem;
  font-weight: 300;
  color: var(--blanc);
}

.expo-name span {
  display: block;
  font-family: var(--font-sans);
  font-size: 0.8rem;
  font-weight: 300;
  color: rgba(255,255,255,0.38);
  letter-spacing: 0.05em;
  margin-top: 0.2rem;
  font-style: normal;
}

.expo-lieu {
  font-family: var(--font-sans);
  font-size: 0.75rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.25);
  white-space: nowrap;
}

@media (max-width: 640px) {
  .expo-item { grid-template-columns: 60px 1fr; }
  .expo-lieu { display: none; }
}

/* =====================================================
   PARTENAIRES
   ===================================================== */

.partenaires {
  padding: 5rem 0 4.5rem;
  background:
    radial-gradient(ellipse 80% 100% at 50% 0%, rgba(255,255,255,0.025) 0%, transparent 70%),
    var(--noir-alt);
  border-top: 0.5px solid rgba(255,255,255,0.06);
  border-bottom: 0.5px solid rgba(255,255,255,0.06);
}

.partenaires-label {
  text-align: center;
  font-family: 'Italiana', 'Cormorant Garamond', 'Didot', Georgia, serif;
  font-style: normal;
  font-weight: 400;
  font-size: clamp(1.5rem, 2.4vw, 2rem);
  letter-spacing: 0.06em;
  text-transform: none;
  color: rgba(255,255,255,0.96);
  margin: 0 auto 2.8rem;
  position: relative;
  display: block;
  width: 100%;
  max-width: 100%;
}

.partenaires-label-aside {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-style: italic;
  font-weight: 300;
  font-size: 0.72em;
  color: var(--rouge);
  letter-spacing: 0.04em;
  margin-left: 0.4em;
}

.partenaires-label::before {
  content: '';
  display: block;
  width: 32px;
  height: 0.5px;
  background: var(--rouge);
  margin: 0 auto 1.2rem;
  opacity: 0.85;
}

.partenaires-label::after {
  content: '';
  display: block;
  width: 32px;
  height: 0.5px;
  background: var(--rouge);
  margin: 1.2rem auto 0;
  opacity: 0.85;
}

/* Marquee horizontal — défilement infini, lent et élégant */
.partenaires-marquee {
  position: relative;
  width: 100%;
  overflow: hidden;
  margin-top: 0.8rem;
  padding: 2rem 0 2.5rem;
  -webkit-mask-image: linear-gradient(to right,
    transparent 0,
    #000 120px,
    #000 calc(100% - 120px),
    transparent 100%);
          mask-image: linear-gradient(to right,
    transparent 0,
    #000 120px,
    #000 calc(100% - 120px),
    transparent 100%);
}

.partenaires-track {
  display: flex;
  width: max-content;
  animation: partenaires-scroll 60s linear infinite;
  will-change: transform;
}

.partenaires-marquee:hover .partenaires-track {
  animation-play-state: paused;
}

.partenaires-set {
  display: flex;
  align-items: center;
  gap: 5rem;
  padding-right: 5rem;
  flex-shrink: 0;
}

/* Logos COULEUR — pas d'inversion. Plaque blanche subtile pour homogénéité.
   Esprit institution / musée / grande maison culturelle. */
.partenaires-set img {
  height: 72px;
  width: auto;
  max-width: 200px;
  object-fit: contain;
  background: rgba(255,255,255,0.96);
  padding: 0.7rem 1.15rem;
  border-radius: 2px;
  box-shadow:
    0 1px 0 rgba(255,255,255,0.1),
    0 8px 28px rgba(0,0,0,0.35);
  filter: contrast(1.02);
  opacity: 0.94;
  transition: opacity 0.6s var(--ease-out), transform 0.6s var(--ease-out), box-shadow 0.6s var(--ease-out);
  flex-shrink: 0;
}

.partenaires-set img:hover {
  opacity: 1;
  transform: translateY(-2px);
  box-shadow:
    0 1px 0 rgba(255,255,255,0.2),
    0 12px 36px rgba(204,20,20,0.18);
}

.partenaires-text {
  font-family: 'Cormorant Garamond', 'Italiana', Georgia, serif;
  font-style: italic;
  font-size: 1.4rem;
  font-weight: 300;
  color: rgba(255,255,255,0.62);
  letter-spacing: 0.04em;
  white-space: nowrap;
  flex-shrink: 0;
  padding: 0 0.4rem;
  transition: color 0.6s var(--ease-out);
}

.partenaires-text:hover { color: rgba(255,255,255,0.95); }

@keyframes partenaires-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

@media (max-width: 600px) {
  .partenaires-set { gap: 2.5rem; padding-right: 2.5rem; }
  .partenaires-set img { height: 32px; }
  .partenaires-text { font-size: 1rem; }
}

/* =====================================================
   CTA CONTACT / PARTENARIAT
   ===================================================== */

.cta-contact {
  padding: var(--space-xxl) 0;
  text-align: center;
  background: var(--noir);
  position: relative;
  overflow: hidden;
}

/* Accent lumineux derrière le CTA */
.cta-contact::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 600px;
  height: 300px;
  background: radial-gradient(ellipse at center, rgba(204,20,20,0.06) 0%, transparent 70%);
  pointer-events: none;
}

.cta-contact-content {
  max-width: 640px;
  margin: 0 auto;
  position: relative;
  z-index: 1;
}

.cta-contact h2 {
  font-size: clamp(2.2rem, 4.5vw, 3.6rem);
  font-weight: 300;
  margin-bottom: 1.4rem;
  color: var(--blanc);
}

.cta-contact p.lead {
  margin: 0 auto 2.5rem;
  color: rgba(255,255,255,0.55);
}

.cta-contact .cta-group { justify-content: center; }

/* =====================================================
   FOOTER
   ===================================================== */

.footer {
  background: #080808;
  color: rgba(255,255,255,0.45);
  padding: var(--space-lg) 0 var(--space-md);
  position: relative;
  z-index: 2;
  border-top: 1px solid rgba(204,20,20,0.15);
}

.footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 3rem;
  margin-bottom: var(--space-md);
  padding-bottom: var(--space-md);
  border-bottom: 1px solid rgba(255,255,255,0.05);
}

@media (max-width: 768px) { .footer-grid { grid-template-columns: 1fr 1fr; gap: 2rem; } }
@media (max-width: 480px) { .footer-grid { grid-template-columns: 1fr; } }

.footer-logo {
  height: 44px;
  width: auto;
  margin-bottom: 1rem;
  filter: brightness(0) invert(1);
  opacity: 0.7;
}

.footer-tagline {
  font-size: 0.88rem;
  color: rgba(255,255,255,0.3);
  font-style: italic;
  font-family: var(--font-serif);
  max-width: 32ch;
  line-height: 1.5;
}

.footer h5 {
  font-family: var(--font-sans);
  font-size: 0.68rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.22);
  margin-bottom: 1.2rem;
  font-weight: 500;
}

.footer ul li { margin-bottom: 0.6rem; }

.footer ul a {
  color: rgba(255,255,255,0.38);
  font-size: 0.85rem;
  letter-spacing: 0.03em;
  transition: color var(--t-fast) var(--ease-out);
}
.footer ul a:hover { color: var(--rouge); }

.footer-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.7rem;
  color: rgba(255,255,255,0.32);
  letter-spacing: 0.08em;
  flex-wrap: wrap;
  gap: 1rem;
}

.footer-legal-links {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  flex-wrap: wrap;
}

.footer-legal-links a {
  color: rgba(255,255,255,0.55);
  text-decoration: none;
  transition: color 0.4s var(--ease-out);
}

.footer-legal-links a:hover { color: var(--rouge); }

.footer-sep {
  color: rgba(204,20,20,0.5);
}

/* =====================================================
   LOGO — états contrôlés par GSAP (motion.js)
   ===================================================== */

/* Fallback : si JS désactivé, overlay hero + opening immédiatement visibles */
html:not(.js) .hero-title-name,
html:not(.js) .hero-disciplines,
html:not(.js) .hero-scroll,
html:not(.js) .opening-frame,
html:not(.js) .opening-scroll {
  opacity: 1;
  transform: none;
  filter: none;
}

/* =====================================================
   TITRES — état initial pour animation au scroll
   ===================================================== */

/* Masque de ligne pour les titres h2 animés */
.title-masked {
  overflow: hidden;
  display: block;
}

/* =====================================================
   SCROLL REVEAL (GSAP / graceful degradation)
   ===================================================== */

.js .reveal { opacity: 0; }
.js .intro-text span { opacity: 0; }
.js .partenaires-marquee { opacity: 0; }

/* =====================================================
   ACCESSIBILITY
   ===================================================== */

:focus-visible {
  outline: 2px solid var(--rouge);
  outline-offset: 4px;
}

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}

/* =====================================================
   SECTION ÉDITORIALE — Photography & Digital Art
   ===================================================== */

.section-editorial {
  padding: var(--space-xxl) 0;
  background: var(--noir);
  border-top: 1px solid rgba(255,255,255,0.06);
}

.section-editorial--reverse .editorial-inner {
  flex-direction: row-reverse;
}

.editorial-inner {
  display: flex;
  gap: 6rem;
  align-items: center;
}

.editorial-text {
  flex: 1;
  max-width: 560px;
}

.editorial-text h2 {
  font-size: clamp(2.2rem, 4vw, 3.4rem);
  margin-bottom: var(--space-md);
  line-height: 1.1;
}

.editorial-text .lead {
  margin-bottom: var(--space-md);
}

.editorial-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin-bottom: var(--space-md);
}

.editorial-tags li {
  font-family: var(--font-sans);
  font-size: 0.68rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--rouge);
  border: 1px solid rgba(204,20,20,0.35);
  padding: 0.3rem 0.85rem;
  border-radius: 2px;
}

.editorial-visual {
  flex: 1;
  max-width: 520px;
}

.editorial-image-frame {
  position: relative;
  aspect-ratio: 4/3;
  overflow: hidden;
}

.editorial-image-frame::before {
  content: '';
  position: absolute;
  inset: -12px -12px auto auto;
  width: 60px; height: 60px;
  border-top: 2px solid var(--rouge);
  border-right: 2px solid var(--rouge);
  z-index: 2;
}

.editorial-image-frame::after {
  content: '';
  position: absolute;
  inset: auto auto -12px -12px;
  width: 60px; height: 60px;
  border-bottom: 2px solid rgba(204,20,20,0.4);
  border-left: 2px solid rgba(204,20,20,0.4);
  z-index: 2;
}

.editorial-image-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.8s var(--ease-out);
}

.editorial-image-frame:hover img { transform: scale(1.04); }

.editorial-image-frame--dark::before,
.editorial-image-frame--dark::after {
  opacity: 0.5;
}

/* =====================================================
   INSTITUTIONS & COMMANDES V2 — galerie défilante prestige
   Header centré + bande horizontale qui glisse au scroll
   Esprit générique cinéma luxe / archives institutionnelles
   ===================================================== */

.section-institutionnel-v2 {
  position: relative;
  background: #050505;
  color: var(--blanc);
  padding: 5rem 0 4rem;
  overflow: hidden;
}

.section-institutionnel-v2::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 60% 40% at 50% 30%, rgba(180,18,18,0.06) 0%, transparent 65%);
  pointer-events: none;
}

.institutionnel-v2-header {
  text-align: center;
  margin-bottom: 4.5rem;
  position: relative;
  z-index: 1;
}

.institutionnel-v2-header .eyebrow {
  display: block;
  color: var(--rouge);
  font-family: var(--font-sans);
  font-size: 0.7rem;
  font-weight: 300;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  margin-bottom: 1rem;
}

.institutionnel-v2-header h2 {
  font-family: var(--font-serif);
  font-size: clamp(2.4rem, 4.4vw, 3.8rem);
  font-weight: 300;
  line-height: 1.12;
  margin: 0 auto 1.5rem;
  color: var(--blanc);
}

.institutionnel-v2-header h2 em {
  color: var(--rouge);
  font-style: italic;
}

.institutionnel-v2-header .lead {
  color: rgba(255,255,255,0.78);
  font-size: 1.02rem;
  line-height: 1.8;
  max-width: 62rem;
  margin: 0 auto;
}

/* Pellicule auto-défilante — exactement le système Fonds d'œuvres
   4 visuels carrés visibles, défilement auto très lent, pause au hover */
.institutionnel-pellicule {
  position: relative;
  width: 100%;
  overflow: hidden;
  padding: 1rem 0 2.8rem;
  margin-bottom: 1rem;
  -webkit-mask-image: linear-gradient(to right,
    transparent 0,
    #000 140px,
    #000 calc(100% - 140px),
    transparent 100%);
          mask-image: linear-gradient(to right,
    transparent 0,
    #000 140px,
    #000 calc(100% - 140px),
    transparent 100%);
}

.institutionnel-pellicule-track {
  display: flex;
  width: max-content;
  animation: institutionnel-pellicule-scroll 95s linear infinite;
  will-change: transform;
}

.institutionnel-pellicule:hover .institutionnel-pellicule-track {
  animation-play-state: paused;
}

.institutionnel-pellicule-set {
  display: flex;
  align-items: center;
  gap: 1.4rem;
  padding-right: 1.4rem;
  flex-shrink: 0;
}

.institutionnel-frame {
  flex: 0 0 calc((100vw - 7rem) / 5);
  max-width: 280px;
  min-width: 180px;
  margin: 0;
  position: relative;
  overflow: hidden;
  background: #0A0A0A;
  aspect-ratio: 1/1;
  cursor: zoom-in;
  border: 0.5px solid rgba(255,255,255,0.06);
  transition: transform 0.9s var(--ease-out), border-color 0.5s var(--ease-out);
}

.institutionnel-frame:hover {
  border-color: rgba(204,20,20,0.5);
  transform: translateY(-3px);
}

.institutionnel-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  filter: brightness(0.86) contrast(1.06) grayscale(35%);
  transition: transform 1.8s var(--ease-out), filter 1s var(--ease-out);
}

.institutionnel-frame:hover img {
  transform: scale(1.04);
  filter: brightness(1) contrast(1.08) grayscale(0%);
}

.institutionnel-frame::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 55%, rgba(0,0,0,0.88) 100%);
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.85s var(--ease-out);
}

.institutionnel-frame:hover::after { opacity: 1; }

.institutionnel-frame figcaption {
  position: absolute;
  bottom: 1.2rem;
  left: 1.4rem;
  right: 1.4rem;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  pointer-events: none;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.85s var(--ease-out), transform 0.85s var(--ease-out);
}

.institutionnel-frame:hover figcaption {
  opacity: 1;
  transform: translateY(0);
}

.frame-year {
  font-family: var(--font-sans);
  font-size: 0.46rem;
  font-weight: 400;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: var(--rouge);
  text-shadow: 0 1px 8px rgba(0,0,0,0.7);
}

.frame-title {
  font-family: 'Italiana', 'Cormorant Garamond', Georgia, serif;
  font-weight: 400;
  font-size: 1rem;
  letter-spacing: 0.02em;
  color: rgba(255,255,255,0.96);
  text-shadow: 0 1px 12px rgba(0,0,0,0.7);
  line-height: 1.2;
}

.frame-context {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-style: italic;
  font-size: 0.74rem;
  font-weight: 300;
  color: rgba(255,255,255,0.78);
  text-shadow: 0 1px 8px rgba(0,0,0,0.7);
  line-height: 1.4;
}

@keyframes institutionnel-pellicule-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

@media (prefers-reduced-motion: reduce) {
  .institutionnel-pellicule-track { animation: none; }
}

@media (max-width: 1100px) {
  .institutionnel-frame { flex: 0 0 calc((100vw - 5rem) / 4); }
}

@media (max-width: 700px) {
  .institutionnel-frame { flex: 0 0 calc((100vw - 3rem) / 2); }
  .institutionnel-pellicule-set { gap: 0.85rem; padding-right: 0.85rem; }
}

/* === Anciens styles institutionnel-track conservés inertes (legacy) === */
.institutionnel-track-wrap {
  position: relative;
  width: 100%;
  padding: 1rem 0 2.5rem;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to right,
    transparent 0,
    #000 80px,
    #000 calc(100% - 80px),
    transparent 100%);
          mask-image: linear-gradient(to right,
    transparent 0,
    #000 80px,
    #000 calc(100% - 80px),
    transparent 100%);
}

.institutionnel-track {
  display: flex;
  gap: 2px;
  padding: 0 6vw 1.5rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: thin;
  scrollbar-color: rgba(204,20,20,0.35) rgba(255,255,255,0.03);
  -webkit-overflow-scrolling: touch;
}

.institutionnel-track::-webkit-scrollbar { height: 4px; }
.institutionnel-track::-webkit-scrollbar-track { background: rgba(255,255,255,0.04); }
.institutionnel-track::-webkit-scrollbar-thumb { background: rgba(204,20,20,0.5); }

/* Plaque éditoriale — esprit DIMA, ultra-fine, éthérée */
.institutionnel-plate {
  flex: 0 0 200px;
  scroll-snap-align: start;
  margin: 0;
  display: flex;
  flex-direction: column;
  background: transparent;
  cursor: zoom-in;
  transition: transform 0.9s var(--ease-out);
}

.institutionnel-plate:hover {
  transform: translateY(-2px);
}

.institutionnel-plate-img {
  position: relative;
  width: 100%;
  aspect-ratio: 1/1;
  overflow: hidden;
  background: rgba(255,255,255,0.012);
  border: 1px solid rgba(200,208,217,0.08);
  transition: all 0.5s var(--ease-out);
}

.institutionnel-plate:hover .institutionnel-plate-img {
  background: rgba(204,20,20,0.03);
  border-color: rgba(204,20,20,0.18);
}

.institutionnel-plate-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  filter: brightness(0.82) contrast(1.05) grayscale(45%);
  transition: transform 1.8s var(--ease-out), filter 1s var(--ease-out);
}

.institutionnel-plate:hover .institutionnel-plate-img img {
  transform: scale(1.025);
  filter: brightness(1) contrast(1.08) grayscale(0%);
}

.institutionnel-plate-img::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 75%, rgba(0,0,0,0.35) 100%);
  pointer-events: none;
}

.institutionnel-plate figcaption {
  display: flex;
  flex-direction: column;
  gap: 0.18rem;
  padding: 0.7rem 0.1rem 0;
}

.plate-year {
  font-family: var(--font-sans);
  font-size: 0.46rem;
  font-weight: 400;
  letter-spacing: 0.36em;
  text-transform: uppercase;
  color: var(--rouge);
}

.plate-title {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  font-size: 0.84rem;
  color: rgba(255,255,255,0.92);
  line-height: 1.3;
}

.plate-context {
  font-family: var(--font-sans);
  font-size: 0.5rem;
  font-weight: 300;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.45);
  line-height: 1.5;
}

.institutionnel-v2-cta {
  text-align: center;
  margin-top: 3rem;
}

@media (max-width: 700px) {
  .institutionnel-plate { flex: 0 0 168px; }
  .institutionnel-track { padding: 0 4vw 1.5rem; gap: 0.7rem; }
}

/* === Anciens styles institutionnel-grid (DÉPRÉCIÉS — gardés inertes au cas où) === */
.section-institutionnel {
  position: relative;
  background: #050505;
  color: var(--blanc);
  padding: var(--space-xxl) 0;
  overflow: hidden;
}

/* Image de fond très assombrie en grand-plan diffus (Chirac UNESCO) */
.institutionnel-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
}

.institutionnel-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  filter: blur(28px) brightness(0.32) grayscale(60%) contrast(1.05);
  transform: scale(1.08);
  opacity: 0.55;
}

.institutionnel-veil {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(180deg, rgba(5,5,5,0.92) 0%, rgba(5,5,5,0.78) 40%, rgba(5,5,5,0.94) 100%),
    radial-gradient(ellipse 80% 60% at 50% 50%, transparent 0%, rgba(0,0,0,0.5) 100%);
  pointer-events: none;
}

.institutionnel-inner {
  position: relative;
  z-index: 2;
}

/* Header — centré, monumental éditorial */
.institutionnel-header {
  max-width: 800px;
  margin: 0 auto 4.5rem;
  text-align: center;
}

.institutionnel-header .eyebrow {
  color: var(--rouge);
  font-family: var(--font-sans);
  font-size: 0.7rem;
  font-weight: 300;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  display: block;
  margin-bottom: 1rem;
}

.institutionnel-header h2 {
  font-family: var(--font-serif);
  font-size: clamp(2.4rem, 4.6vw, 4rem);
  font-weight: 300;
  line-height: 1.1;
  margin: 0 auto 1.5rem;
  color: var(--blanc);
}

.institutionnel-header h2 em {
  color: var(--rouge);
  font-style: italic;
}

.institutionnel-header .lead {
  color: rgba(255,255,255,0.8);
  font-size: 1.04rem;
  line-height: 1.7;
  max-width: 64ch;
  margin: 0 auto;
}

/* Scène éditoriale : 6 plans en composition cinématographique
   (1 lead grand format + 2 mid moyens + 3 side plus petits) */
.institutionnel-scene {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  grid-template-areas:
    "lead lead lead lead mid1 mid1"
    "lead lead lead lead mid1 mid1"
    "lead lead lead lead mid2 mid2"
    "side1 side1 side2 side2 side3 side3";
  gap: 1.2rem;
  margin-bottom: 4rem;
}

.institutionnel-plan {
  position: relative;
  margin: 0;
  overflow: hidden;
  background: #0A0A0A;
  cursor: zoom-in;
}

.institutionnel-plan--lead { grid-area: lead; aspect-ratio: 4/5; }
.institutionnel-plan--mid:nth-of-type(2) { grid-area: mid1; aspect-ratio: 4/3; }
.institutionnel-plan--mid:nth-of-type(3) { grid-area: mid2; aspect-ratio: 4/3; }
.institutionnel-plan--side:nth-of-type(4) { grid-area: side1; aspect-ratio: 3/2; }
.institutionnel-plan--side:nth-of-type(5) { grid-area: side2; aspect-ratio: 3/2; }
.institutionnel-plan--side:nth-of-type(6) { grid-area: side3; aspect-ratio: 3/2; }

.institutionnel-plan img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  filter: brightness(0.88) contrast(1.06) grayscale(18%);
  transition: transform 1.6s var(--ease-out), filter 0.8s var(--ease-out);
}

.institutionnel-plan::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 50%, rgba(0,0,0,0.85) 100%);
  pointer-events: none;
  opacity: 0.95;
  transition: opacity 0.5s var(--ease-out);
}

.institutionnel-plan:hover img {
  transform: scale(1.04);
  filter: brightness(1) contrast(1.08) grayscale(0%);
}

.institutionnel-plan figcaption {
  position: absolute;
  left: 1.4rem;
  bottom: 1.2rem;
  right: 1.4rem;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  pointer-events: none;
}

.plan-year {
  font-family: var(--font-sans);
  font-size: 0.6rem;
  font-weight: 300;
  letter-spacing: 0.36em;
  text-transform: uppercase;
  color: var(--rouge);
}

.plan-title {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  font-size: 1.15rem;
  color: rgba(255,255,255,0.96);
  text-shadow: 0 1px 10px rgba(0,0,0,0.7);
  line-height: 1.2;
}

.institutionnel-plan--lead .plan-title { font-size: 1.5rem; }

.plan-context {
  font-family: var(--font-sans);
  font-size: 0.66rem;
  font-weight: 300;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.7);
}

.institutionnel-cta {
  text-align: center;
}

@media (max-width: 1100px) {
  .institutionnel-scene {
    grid-template-columns: repeat(2, 1fr);
    grid-template-areas:
      "lead lead"
      "mid1 mid2"
      "side1 side2"
      "side3 side3";
  }
  .institutionnel-plan--lead { aspect-ratio: 4/3; }
}

@media (max-width: 700px) {
  .institutionnel-scene {
    grid-template-columns: 1fr;
    grid-template-areas:
      "lead"
      "mid1"
      "mid2"
      "side1"
      "side2"
      "side3";
  }
  .institutionnel-plan--lead,
  .institutionnel-plan--mid,
  .institutionnel-plan--side { aspect-ratio: 3/2; }
}

/* =====================================================
   PHOTOGRAPHIE ÉDITORIALE — 2 colonnes texte + diaporama
   Texte à gauche, curtain encadré à droite (format portrait)
   ===================================================== */

.section-photo-editorial {
  background: var(--noir);
  color: var(--blanc);
  padding: 4.5rem 0;
}

.photo-editorial-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 5rem;
  align-items: center;
}

.photo-editorial-text {
  max-width: 540px;
}

.photo-editorial-text .eyebrow {
  display: block;
  color: var(--rouge);
  font-family: var(--font-sans);
  font-size: 0.7rem;
  font-weight: 300;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  margin-bottom: 1rem;
}

.photo-editorial-text h2 {
  font-family: var(--font-serif);
  font-size: clamp(2.4rem, 4.4vw, 3.6rem);
  font-weight: 300;
  line-height: 1.1;
  margin: 0 0 1.6rem;
  color: var(--blanc);
}

.photo-editorial-text h2 em {
  color: var(--rouge);
  font-style: italic;
}

.photo-editorial-text .lead {
  font-size: 1.04rem;
  line-height: 1.75;
  color: rgba(255,255,255,0.78);
  max-width: 56ch;
  margin: 0 0 1.8rem;
}

.photo-editorial-tags {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 0.6rem;
  padding: 0;
  margin: 0 0 2.2rem;
}

.photo-editorial-tags li {
  font-family: var(--font-sans);
  font-size: 0.66rem;
  font-weight: 300;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.7);
  padding: 0.42rem 0.85rem;
  border: 0.5px solid rgba(255,255,255,0.16);
}

/* Cadre du diaporama — format portrait éditorial fort
   Ratio 2/3 vertical photographie d'auteure premium */
.photo-editorial-visual {
  position: relative;
  width: 100%;
  max-width: 480px;
  margin-left: auto;
}

.photo-editorial-frame {
  position: relative;
  width: 100%;
  aspect-ratio: 2/3;
  overflow: hidden;
  background: #0A0A0A;
  /* Filet rouge en bas — signature couture */
  border-bottom: 0.5px solid rgba(204,20,20,0.5);
}

.photo-editorial-frame::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 75%, rgba(0,0,0,0.4) 100%);
  pointer-events: none;
  z-index: 6;
}

.photo-editorial-frame .curtain-img {
  filter: brightness(0.94) contrast(1.05);
  background-position: center !important;
}

/* Copyright en overlay sur l'image — centré en bas, esprit signature couture */
.photo-editorial-copyright {
  position: absolute;
  bottom: 1rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 8;
  font-family: var(--font-sans);
  font-size: 0.5rem;
  font-weight: 300;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.65);
  text-shadow: 0 1px 8px rgba(0,0,0,0.7);
  white-space: nowrap;
  pointer-events: none;
  text-align: center;
}

@media (max-width: 900px) {
  .photo-editorial-grid {
    grid-template-columns: 1fr;
    gap: 2.4rem;
  }
  .photo-editorial-visual { max-width: 100%; margin: 0 auto; }
  .photo-editorial-frame { aspect-ratio: 3/4; max-width: 380px; margin: 0 auto; }
  .photo-editorial-copyright { font-size: 0.46rem; bottom: 0.7rem; }
}

/* =====================================================
   ART DIGITAL — Motion design en boucle
   Vidéo principale plein écran + triptyque vidéo
   ===================================================== */

.section-art-digital {
  background: #050505;
  color: var(--blanc);
  padding: 0;
  position: relative;
  overflow: hidden;
}

.section-art-digital::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 60% 40% at 30% 50%, rgba(180,18,18,0.06) 0%, transparent 60%),
    radial-gradient(ellipse 60% 40% at 80% 30%, rgba(180,18,18,0.04) 0%, transparent 60%);
  pointer-events: none;
  z-index: 0;
}

.art-digital-grid {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
}

/* Vidéo principale : mandala plein écran avec overlay texte */
.art-digital-feature {
  position: relative;
  width: 100%;
  min-height: 100vh;
  display: flex;
  align-items: center;
  overflow: hidden;
  background: #000;
}

.art-digital-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  filter: brightness(0.7) contrast(1.05);
  z-index: 0;
}

.art-digital-feature::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(0,0,0,0.78) 0%, rgba(0,0,0,0.55) 40%, transparent 70%),
    linear-gradient(180deg, transparent 70%, rgba(0,0,0,0.6) 100%);
  z-index: 1;
  pointer-events: none;
}

/* Copyright discret à droite du motion design */
.art-digital-copyright {
  position: absolute;
  bottom: 1.4rem;
  right: 1.4rem;
  z-index: 3;
  font-family: var(--font-sans);
  font-size: 0.56rem;
  font-weight: 300;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.55);
  text-shadow: 0 1px 6px rgba(0,0,0,0.6);
  white-space: nowrap;
}

@media (max-width: 700px) {
  .art-digital-copyright { bottom: 1rem; right: 1rem; font-size: 0.5rem; letter-spacing: 0.22em; }
}

.art-digital-feature-overlay {
  position: relative;
  z-index: 2;
  max-width: 600px;
  padding: 0 var(--space-md);
  margin-left: max(4vw, var(--space-md));
}

.art-digital-feature-overlay .eyebrow {
  color: var(--rouge);
  font-family: var(--font-sans);
  font-size: 0.7rem;
  font-weight: 300;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  display: block;
  margin-bottom: 1rem;
}

.art-digital-feature-overlay h2 {
  font-family: var(--font-serif);
  font-size: clamp(2.4rem, 4.4vw, 4rem);
  font-weight: 300;
  line-height: 1.1;
  margin-bottom: 1.5rem;
  color: var(--blanc);
}

.art-digital-feature-overlay h2 em {
  color: var(--rouge);
  font-style: italic;
}

.art-digital-feature-overlay p {
  color: rgba(255,255,255,0.84);
  font-size: 1.04rem;
  line-height: 1.7;
  margin-bottom: 1.6rem;
  max-width: 56ch;
}

.art-digital-tags {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 0.6rem;
  padding: 0;
  margin: 0 0 2rem;
}

.art-digital-tags li {
  font-family: var(--font-sans);
  font-size: 0.66rem;
  font-weight: 300;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.7);
  padding: 0.42rem 0.85rem;
  border: 0.5px solid rgba(255,255,255,0.18);
}

/* Triptyque : 3 boucles vidéo côte à côte */
.art-digital-triptyque {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  background: #000;
}

.art-digital-loop {
  position: relative;
  margin: 0;
  overflow: hidden;
  aspect-ratio: 9/16;
  background: #0A0A0A;
  border-right: 1px solid rgba(255,255,255,0.04);
}

.art-digital-loop:last-child { border-right: none; }

.art-digital-loop video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  filter: brightness(0.92) contrast(1.05);
  transition: filter 0.6s var(--ease-out);
}

.art-digital-loop:hover video {
  filter: brightness(1.05) contrast(1.08);
}

.art-digital-loop::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 60%, rgba(0,0,0,0.7) 100%);
  pointer-events: none;
}

.art-digital-loop figcaption {
  position: absolute;
  left: 1.2rem;
  bottom: 1.2rem;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}

.art-digital-loop figcaption span {
  font-family: var(--font-sans);
  font-weight: 300;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  text-shadow: 0 1px 8px rgba(0,0,0,0.7);
}

.art-digital-loop figcaption span:first-child {
  font-size: 0.78rem;
  color: rgba(255,255,255,0.95);
}

.art-digital-loop figcaption span:last-child {
  font-size: 0.6rem;
  color: var(--rouge);
  letter-spacing: 0.32em;
}

@media (max-width: 900px) {
  .art-digital-feature { min-height: 70vh; }
  .art-digital-feature-overlay { margin-left: 1.4rem; padding-right: 1.4rem; }
  .art-digital-triptyque { grid-template-columns: 1fr; }
  .art-digital-loop { aspect-ratio: 16/9; border-right: none; border-bottom: 1px solid rgba(255,255,255,0.04); }
}

/* =====================================================
   SYSTEM DESIGN — IS Visual System™
   ===================================================== */

.section-system {
  padding: var(--space-xxl) 0;
  background: var(--noir-alt);
  border-top: 1px solid rgba(255,255,255,0.06);
}

.system-header {
  max-width: 680px;
  margin: 0 auto var(--space-lg);
  text-align: center;
}

.system-header h2 {
  font-size: clamp(2.2rem, 4vw, 3.2rem);
  margin-bottom: var(--space-md);
}

.system-header .lead { max-width: 100%; }

.system-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2px;
  margin-bottom: var(--space-lg);
}

.system-item {
  background: var(--noir-card);
  padding: var(--space-lg) var(--space-md);
  border: 1px solid rgba(255,255,255,0.05);
  transition: border-color var(--t-medium) var(--ease-out),
              background var(--t-medium) var(--ease-out);
}

.system-item:hover {
  border-color: rgba(204,20,20,0.3);
  background: rgba(204,20,20,0.04);
}

.system-number {
  font-family: var(--font-serif);
  font-size: 3rem;
  color: rgba(204,20,20,0.18);
  display: block;
  margin-bottom: var(--space-md);
  line-height: 1;
}

.system-item h3 {
  font-family: var(--font-sans);
  font-size: 0.8rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--blanc);
  margin-bottom: 0.75rem;
}

.system-item p {
  font-size: 0.88rem;
  color: rgba(255,255,255,0.5);
  max-width: none;
  line-height: 1.6;
}

.system-cta { text-align: center; }

/* =====================================================
   FONDS D'ŒUVRES — Collections & Licensing
   ===================================================== */

.section-fonds {
  padding: var(--space-xxl) 0;
  background: var(--noir);
  border-top: 1px solid rgba(255,255,255,0.06);
}

.fonds-inner {
  display: flex;
  gap: 6rem;
  align-items: center;
}

.fonds-text { flex: 1; max-width: 520px; }

.fonds-text h2 {
  font-size: clamp(2.2rem, 4vw, 3.4rem);
  margin-bottom: var(--space-md);
}

.fonds-stats {
  display: flex;
  gap: var(--space-lg);
  margin: var(--space-lg) 0;
  padding: var(--space-md) 0;
  border-top: 1px solid rgba(255,255,255,0.08);
  border-bottom: 1px solid rgba(255,255,255,0.08);
}

.fonds-stat-num {
  display: block;
  font-family: var(--font-serif);
  font-size: 2.4rem;
  color: var(--rouge);
  line-height: 1;
  margin-bottom: 0.3rem;
}

.fonds-stat-num sup {
  font-size: 1.2rem;
  vertical-align: super;
}

.fonds-stat-label {
  display: block;
  font-size: 0.68rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.4);
}

.fonds-visual {
  flex: 1;
  max-width: 480px;
}

.fonds-image-stack {
  position: relative;
  height: 420px;
}

.fonds-card {
  position: absolute;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,0.08);
}

.fonds-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.fonds-card--back {
  inset: 0 0 10% 10%;
  opacity: 0.45;
}

.fonds-card--front {
  inset: 10% 10% 0 0;
  box-shadow: 0 30px 80px rgba(0,0,0,0.6);
}

.fonds-card-label {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  padding: 0.75rem 1rem;
  background: rgba(0,0,0,0.75);
  backdrop-filter: blur(8px);
}

.fonds-card-label span {
  font-family: var(--font-sans);
  font-size: 0.65rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.6);
}

/* =====================================================
   FONDS D'ŒUVRES — Galerie défilante premium
   Sensation collection privée / acquisition
   ===================================================== */

.section-fonds-gallery {
  background: linear-gradient(180deg, #0A0A0A 0%, #050505 100%);
  color: var(--blanc);
  padding: 5rem 0 4.5rem;
  position: relative;
  overflow: hidden;
}

.section-fonds-gallery::before {
  content: '';
  position: absolute;
  top: 0; left: 50%;
  width: 60%;
  max-width: 600px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(204,20,20,0.4), transparent);
  transform: translateX(-50%);
}

.fonds-header {
  display: grid;
  grid-template-columns: minmax(400px, 1.2fr) auto;
  gap: 4rem;
  align-items: end;
  margin-bottom: 4rem;
}

.fonds-header h2 {
  font-family: var(--font-serif);
  font-size: clamp(2.4rem, 4.4vw, 3.8rem);
  font-weight: 300;
  line-height: 1.1;
  margin: 1rem 0 1.5rem;
  color: var(--blanc);
}

.fonds-header h2 em {
  color: var(--rouge);
  font-style: italic;
}

.fonds-header .lead {
  font-size: 1.04rem;
  line-height: 1.7;
  color: rgba(255,255,255,0.78);
  max-width: 60ch;
}

.fonds-header .fonds-stats {
  display: flex;
  gap: 2.5rem;
  flex-shrink: 0;
}

.fonds-stat {
  display: flex;
  flex-direction: column;
  text-align: left;
}

.fonds-stat-num {
  font-family: var(--font-serif);
  font-size: 2.6rem;
  font-weight: 300;
  color: var(--rouge);
  line-height: 1;
}

.fonds-stat-num sup { font-size: 0.5em; }

.fonds-stat-label {
  font-family: var(--font-sans);
  font-size: 0.66rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.5);
  margin-top: 0.5rem;
}

/* Galerie pellicule cinéma — défilement automatique infini
   4 visuels carrés visibles, marquee linéaire 90 s, pause au hover.
   Esprit négatif / pellicule / collection privée qui avance. */
.fonds-pellicule {
  position: relative;
  width: 100%;
  overflow: hidden;
  padding: 1rem 0 2.8rem;
  margin-bottom: 1rem;
  -webkit-mask-image: linear-gradient(to right,
    transparent 0,
    #000 140px,
    #000 calc(100% - 140px),
    transparent 100%);
          mask-image: linear-gradient(to right,
    transparent 0,
    #000 140px,
    #000 calc(100% - 140px),
    transparent 100%);
}

.fonds-pellicule-track {
  display: flex;
  width: max-content;
  animation: fonds-pellicule-scroll 90s linear infinite;
  will-change: transform;
}

.fonds-pellicule:hover .fonds-pellicule-track {
  animation-play-state: paused;
}

.fonds-pellicule-set {
  display: flex;
  align-items: center;
  gap: 1.4rem;
  padding-right: 1.4rem;
  flex-shrink: 0;
}

/* Cadre pellicule — carré cinéma 1/1 */
.fonds-frame {
  flex: 0 0 calc((100vw - 5rem) / 4);
  max-width: 360px;
  min-width: 220px;
  margin: 0;
  position: relative;
  overflow: hidden;
  background: #0A0A0A;
  aspect-ratio: 1/1;
  cursor: zoom-in;
  border: 0.5px solid rgba(255,255,255,0.06);
  transition: transform 0.9s var(--ease-out), border-color 0.5s var(--ease-out);
}

.fonds-frame:hover {
  border-color: rgba(204,20,20,0.5);
  transform: translateY(-3px);
}

.fonds-frame img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  display: block;
  background: radial-gradient(ellipse at center, #0F0F0F 0%, #050505 100%);
  padding: 0.4rem;
  filter: brightness(0.95) contrast(1.06);
  transition: transform 1.8s var(--ease-out), filter 1s var(--ease-out);
}

.fonds-frame:hover img {
  transform: scale(1.04);
  filter: brightness(1.05) contrast(1.08);
}

.fonds-frame::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 55%, rgba(0,0,0,0.88) 100%);
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.85s var(--ease-out);
}

.fonds-frame:hover::after { opacity: 1; }

.fonds-frame figcaption {
  position: absolute;
  bottom: 1.2rem;
  left: 1.4rem;
  right: 1.4rem;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  pointer-events: none;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.85s var(--ease-out), transform 0.85s var(--ease-out);
}

.fonds-frame:hover figcaption {
  opacity: 1;
  transform: translateY(0);
}

.frame-title {
  font-family: 'Italiana', 'Cormorant Garamond', Georgia, serif;
  font-weight: 400;
  font-size: 1.2rem;
  letter-spacing: 0.02em;
  color: rgba(255,255,255,0.96);
  text-shadow: 0 1px 12px rgba(0,0,0,0.7);
  line-height: 1.2;
}

.frame-edition {
  font-family: var(--font-sans);
  font-size: 0.56rem;
  font-weight: 300;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--rouge);
  text-shadow: 0 1px 8px rgba(0,0,0,0.7);
}

@keyframes fonds-pellicule-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

@media (prefers-reduced-motion: reduce) {
  .fonds-pellicule-track { animation: none; }
}

@media (max-width: 1100px) {
  .fonds-frame { flex: 0 0 calc((100vw - 4rem) / 3); }
}

@media (max-width: 700px) {
  .fonds-frame { flex: 0 0 calc((100vw - 3rem) / 2); }
  .fonds-pellicule-set { gap: 0.85rem; padding-right: 0.85rem; }
}

.fonds-cta {
  display: flex;
  justify-content: center;
  gap: 1rem;
  flex-wrap: wrap;
  margin-top: 1.5rem;
}

@media (max-width: 900px) {
  .fonds-header {
    grid-template-columns: 1fr;
    gap: 2rem;
  }
}

/* =====================================================
   INSTITUTIONS — Réseau institutionnel
   ===================================================== */

.section-institutions {
  padding: var(--space-xxl) 0;
  background: var(--noir-alt);
  border-top: 1px solid rgba(255,255,255,0.06);
}

.institutions-header {
  max-width: 680px;
  margin: 0 auto var(--space-lg);
  text-align: center;
}

.institutions-header h2 {
  font-size: clamp(2.2rem, 4vw, 3.2rem);
  margin-bottom: var(--space-md);
}

.institutions-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-md);
}

.institution-item {
  text-align: center;
  padding: var(--space-lg) var(--space-md);
  background: var(--noir-card);
  border: 1px solid rgba(255,255,255,0.05);
  transition: border-color var(--t-medium) var(--ease-out);
}

.institution-item:hover { border-color: rgba(204,20,20,0.25); }

.institution-icon {
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto var(--space-md);
}

.institution-icon img {
  max-height: 48px;
  max-width: 120px;
  object-fit: contain;
  filter: brightness(0) invert(1);
  opacity: 0.7;
  transition: opacity var(--t-fast);
}

.institution-item:hover .institution-icon img { opacity: 1; }

.institution-text-logo {
  font-family: var(--font-serif);
  font-size: 1.15rem;
  letter-spacing: 0.1em;
  color: rgba(255,255,255,0.5);
  text-align: center;
  line-height: 1.2;
  text-transform: uppercase;
}

.institution-item h4 {
  font-family: var(--font-sans);
  font-size: 0.72rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--blanc);
  margin-bottom: 0.5rem;
}

.institution-item p {
  font-size: 0.82rem;
  color: rgba(255,255,255,0.45);
  line-height: 1.5;
  max-width: none;
}

/* =====================================================
   INSTITUTIONS V2 — version harmonisée + carrousel défilant
   ===================================================== */

.section-institutions--v2 {
  padding: 5rem 0;
  background: linear-gradient(180deg, #0A0A0A 0%, #050505 100%);
  border-top: 0.5px solid rgba(255,255,255,0.06);
}

.section-institutions--v2 .institutions-header {
  max-width: 760px;
  margin: 0 auto 4rem;
  text-align: center;
}

.section-institutions--v2 .institutions-header .eyebrow {
  display: block;
  color: var(--rouge);
  font-family: var(--font-sans);
  font-size: 0.7rem;
  font-weight: 300;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  margin-bottom: 1rem;
  text-align: center;
}

.section-institutions--v2 .institutions-header h2 {
  font-family: var(--font-serif);
  font-size: clamp(2.4rem, 4.4vw, 3.6rem);
  font-weight: 300;
  line-height: 1.1;
  margin: 0 auto 1.5rem;
  color: var(--blanc);
  text-align: center;
}

.section-institutions--v2 .institutions-header h2 em {
  color: var(--rouge);
  font-style: italic;
}

.section-institutions--v2 .institutions-header .lead {
  color: rgba(255,255,255,0.78);
  font-size: 1rem;
  line-height: 1.7;
  max-width: 64ch;
  margin: 0 auto;
  text-align: center;
}

/* Carrousel défilant horizontalement — scroll-snap premium */
.institutions-track {
  display: flex;
  gap: 1.4rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding: 1rem 4vw 2.5rem;
  scrollbar-width: thin;
  scrollbar-color: rgba(204,20,20,0.5) rgba(255,255,255,0.05);
  -webkit-overflow-scrolling: touch;
}

.institutions-track::-webkit-scrollbar { height: 4px; }
.institutions-track::-webkit-scrollbar-track { background: rgba(255,255,255,0.05); }
.institutions-track::-webkit-scrollbar-thumb { background: rgba(204,20,20,0.55); }

/* Carte institution harmonisée (toutes identiques visuellement) */
.institution-card {
  flex: 0 0 320px;
  scroll-snap-align: start;
  margin: 0;
  padding: 2.4rem 1.8rem 2rem;
  background: rgba(15,15,15,0.85);
  border: 0.5px solid rgba(255,255,255,0.08);
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  transition: border-color 0.5s var(--ease-out),
              background 0.5s var(--ease-out),
              transform 0.6s var(--ease-out);
}

.institution-card:hover {
  border-color: rgba(204,20,20,0.45);
  background: rgba(20,12,12,0.92);
  transform: translateY(-3px);
}

.institution-card-icon {
  width: 110px;
  height: 110px;
  margin: 0 auto 1.4rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 0.5px solid rgba(204,20,20,0.3);
  border-radius: 50%;
  background: rgba(204,20,20,0.04);
  flex-shrink: 0;
}

.institution-card .institution-text-logo {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  font-size: 0.92rem;
  letter-spacing: 0.06em;
  color: rgba(255,255,255,0.78);
  text-align: center;
  line-height: 1.2;
  text-transform: none;
}

.institution-card h4 {
  font-family: var(--font-sans);
  font-size: 0.72rem;
  font-weight: 400;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--blanc);
  margin: 0 0 0.4rem;
  line-height: 1.3;
}

.institution-card-period {
  display: block;
  font-family: var(--font-sans);
  font-size: 0.6rem;
  font-weight: 300;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--rouge);
  margin-bottom: 1rem;
}

.institution-card p {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 0.92rem;
  line-height: 1.6;
  color: rgba(255,255,255,0.72);
  max-width: none;
  margin: 0;
}

@media (max-width: 700px) {
  .institution-card { flex: 0 0 280px; }
}

/* =====================================================
   RESPONSIVE — nouvelles sections
   ===================================================== */

@media (max-width: 900px) {
  .editorial-inner,
  .section-editorial--reverse .editorial-inner,
  .fonds-inner {
    flex-direction: column;
    gap: var(--space-lg);
  }
  .editorial-text,
  .editorial-visual,
  .fonds-text,
  .fonds-visual {
    max-width: 100%;
  }
  .system-grid,
  .institutions-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .fonds-image-stack { height: 280px; }
}

@media (max-width: 580px) {
  .system-grid,
  .institutions-grid {
    grid-template-columns: 1fr;
  }
  .fonds-stats { flex-direction: column; gap: var(--space-md); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

/* =====================================================
   HERO V3 VALIDÉ — Officiel · propagé site-wide
   Migration depuis le <style> inline d'index-v3.html (validation Isabelle)
   Concerne : .cinematic-opening · .opening-frame--name
              .opening-frame--credential strong
              .opening-patrimoine · .opening-patrimoine-line
   ===================================================== */

/* — Section cinematic-opening : aération éditoriale luxe.
     height auto + min-height permettent au contenu de respirer
     sans être coupé par overflow:hidden. */
.cinematic-opening {
  height: auto;
  min-height: 95vh;
  padding-top: 77px;
  padding-bottom: 5.5rem;
}

/* — Signature « Isabelle Schmitt » : taille réduite, plus respirante.
     Police Great Vibes, couleur rouge, animation respiration : INCHANGÉES. */
.opening-frame--name {
  font-size: clamp(2.6rem, 7vw, 6rem);
  margin-top: 3.8rem;
}

/* — DIGITAL IS MY ART : alignement éditorial Cormorant italic, letter-spacing serré. */
.opening-frame--credential strong {
  font-family: 'Cormorant Garamond', 'Didot', Georgia, serif;
  font-style: italic;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 1em;
  color: rgba(255, 255, 255, 0.95);
  padding-left: 0.25em;
}

/* — Bloc patrimoine : signalétique d'expertise institutionnelle.
     Positionné après les 6 credentials, séparé par un fin filet rouge. */
.opening-patrimoine {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  margin-top: 1.8rem;
  padding-top: 1.4rem;
  position: relative;
}
.opening-patrimoine::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 80px;
  height: 1px;
  background: rgba(180, 18, 18, 0.45);
}
.opening-patrimoine-line {
  font-family: 'Cormorant Garamond', 'Didot', Georgia, serif;
  font-style: italic;
  font-weight: 300;
  text-align: center;
  line-height: 1.5;
  text-shadow: 0 0 24px rgba(0, 0, 0, 0.85);
}
/* Lignes patrimoine — duo éditorial cohérent : même typo, même taille, même esprit */
.opening-patrimoine-line--primary,
.opening-patrimoine-line--secondary {
  font-size: clamp(1.05rem, 1.45vw, 1.25rem);
  letter-spacing: 0.05em;
  color: rgba(180, 18, 18, 0.88);
  font-weight: 400;
}

@media (max-width: 900px) {
  .opening-frame--name { margin-top: 3rem; }
  .cinematic-opening { min-height: 88vh; padding-top: 62px; padding-bottom: 4rem; }
}
@media (max-width: 768px) {
  .opening-frame--name { font-size: clamp(2.2rem, 9vw, 3.4rem); margin-top: 2.4rem; }
  .cinematic-opening { min-height: auto; padding-top: 55px; padding-bottom: 3rem; }
  .opening-patrimoine { margin-top: 1.4rem; padding-top: 1.1rem; gap: 0.4rem; }
  .opening-patrimoine::before { width: 60px; }
  .opening-patrimoine-line--primary,
  .opening-patrimoine-line--secondary {
    font-size: clamp(0.92rem, 3vw, 1.05rem);
    letter-spacing: 0.04em;
  }
}