/* ─────────────────────────────────────────────
   STYLE V10 — COUCHE MAISON
   Inspirations directes : Hermès (narratif), Bottega (silence radical),
   Loro Piana (matière), Cucinelli (éditorial), Margiela (intellectuel),
   Saint Laurent (cinéma), Studio KO (silence), Pawson (vide), Van Duysen (lumière).
   Charge APRES style-v9.css. Strictement additif.
───────────────────────────────────────────── */


/* ───────── 1. CITATIONS EDITORIALES FLOTTANTES ─────────
   Style Cucinelli / Hermès : citation d'architecte qui apparaît au
   scroll à un moment précis, en italique très légère, presque transparente. */

.editorial-pull {
  position: relative;
  margin: clamp(80px, 9vw, 140px) auto;
  padding: 0 clamp(20px, 6vw, 80px);
  max-width: 980px;
  text-align: center;
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 1.8s cubic-bezier(.22,.61,.36,1),
              transform 1.8s cubic-bezier(.22,.61,.36,1);
}
.editorial-pull.is-in {
  opacity: 1;
  transform: translateY(0);
}

.editorial-pull blockquote {
  font-family: 'Cormorant Garamond', 'EB Garamond', serif;
  font-style: italic;
  font-weight: 300;
  font-size: clamp(22px, 2.6vw, 36px);
  line-height: 1.42;
  letter-spacing: -.2px;
  color: rgba(40, 36, 30, .82);
  margin: 0 0 28px;
  /* Hanging punctuation à la Pawson */
  hanging-punctuation: first last;
  text-indent: -.34em;
}
.editorial-pull blockquote::before {
  content: '«';
  position: relative;
  top: .12em;
  margin-right: .2em;
  font-size: 1.05em;
  color: rgba(140, 110, 72, .55);
  font-style: normal;
}
.editorial-pull blockquote::after {
  content: '»';
  position: relative;
  top: .12em;
  margin-left: .15em;
  font-size: 1.05em;
  color: rgba(140, 110, 72, .55);
  font-style: normal;
}

.editorial-pull figcaption {
  font-family: 'Tenor Sans', sans-serif;
  font-size: 9.5px;
  letter-spacing: 5px;
  text-transform: uppercase;
  color: rgba(40, 36, 30, .42);
  position: relative;
  display: inline-block;
}
.editorial-pull figcaption::before {
  content: '';
  display: block;
  width: 28px;
  height: .5px;
  background: rgba(140, 110, 72, .55);
  margin: 0 auto 14px;
}

/* En section noire, on inverse */
.sec--noir .editorial-pull blockquote { color: rgba(247,243,234,.85); }
.sec--noir .editorial-pull figcaption { color: rgba(247,243,234,.42); }
.sec--noir .editorial-pull blockquote::before,
.sec--noir .editorial-pull blockquote::after { color: rgba(184, 159, 110, .65); }

@media (max-width: 768px) {
  .editorial-pull { margin: 64px auto; padding: 0 24px; }
  .editorial-pull blockquote { font-size: 22px; }
}


/* ───────── 2. CARTOUCHE MATIERES (Loro Piana) ─────────
   Petit cartouche de matières pour chaque image de projet.
   Style museum-label : matière unique, palette discrète. */

.materiaux {
  display: inline-block;
  margin-top: 14px;
  padding: 0;
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: 12.5px;
  font-weight: 400;
  letter-spacing: .3px;
  line-height: 1.5;
  color: rgba(40, 36, 30, .52);
}
.materiaux::before {
  content: '— ';
  color: rgba(140, 110, 72, .65);
  font-style: normal;
}
.sec--noir .materiaux { color: rgba(245, 241, 232, .55); }
.sec--noir .materiaux::before { color: rgba(184, 159, 110, .72); }


/* ───────── 3. NUMEROTATION DE PROJET (Hermès / musée) ─────────
   Chaque carte projet reçoit un numéro romain "N°" en or désaturé.
   Esthétique de catalogue d'exposition. */

.proj-number {
  position: absolute;
  top: 18px;
  left: 18px;
  z-index: 3;
  font-family: 'EB Garamond', 'Cormorant Garamond', serif;
  font-size: 14px;
  letter-spacing: 2.5px;
  color: rgba(247, 243, 234, .82);
  text-shadow: 0 1px 8px rgba(20, 18, 14, .35);
  pointer-events: none;
  font-weight: 400;
}
.proj-number small {
  font-size: 9px;
  letter-spacing: 3px;
  text-transform: uppercase;
  font-family: 'Tenor Sans', sans-serif;
  display: block;
  margin-bottom: 2px;
  color: rgba(184, 159, 110, .82);
}


/* ───────── 4. SLOW HOVER ZOOM IMAGES (Hermès) ─────────
   Sur toutes les images de projets, un zoom 1.024 sur 4 secondes.
   Imperceptible mais ressenti — sensation de "regard prolongé". */

.proj-i img,
.proj-c img,
.proj-card img,
[class*="proj"] > img,
[class*="proj-grid"] img {
  transition: transform 4s cubic-bezier(.22,.61,.36,1),
              filter 2.4s cubic-bezier(.22,.61,.36,1) !important;
  transform-origin: center;
  will-change: transform;
}
.proj-i:hover img,
.proj-c:hover img,
.proj-card:hover img,
[class*="proj"]:hover > img {
  transform: scale(1.024);
}


/* ───────── 5. FILET VERTICAL EDITORIAL (Pawson / Margiela) ─────────
   Un fil d'or désaturé extrêmement fin descend en bord-gauche
   sur les sections crème uniquement. Référence : reliure de livre,
   coupe de page imprimée. */

.sec--creme {
  position: relative;
}
.sec--creme::before {
  content: '';
  position: absolute;
  left: clamp(20px, 4vw, 56px);
  top: clamp(60px, 8vw, 120px);
  bottom: clamp(60px, 8vw, 120px);
  width: .5px;
  background: linear-gradient(180deg,
    rgba(184, 159, 110, 0) 0%,
    rgba(184, 159, 110, .42) 22%,
    rgba(184, 159, 110, .42) 78%,
    rgba(184, 159, 110, 0) 100%);
  pointer-events: none;
  z-index: 0;
}
@media (max-width: 768px) {
  .sec--creme::before { display: none; }
}


/* ───────── 6. SIGNATURE DE PAGE (Bottom-of-page) ─────────
   Chaque page finit sur une signature éditoriale,
   juste avant le footer. Référence : colophon de livre. */

.colophon {
  display: block;
  text-align: center;
  padding: 68px 24px 28px;
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: 13px;
  letter-spacing: .6px;
  color: rgba(40, 36, 30, .32);
  line-height: 1.6;
}
.colophon-mark {
  display: inline-block;
  margin: 0 14px;
  font-family: 'EB Garamond', serif;
  color: rgba(140, 110, 72, .58);
  font-style: normal;
}
.colophon em {
  color: rgba(140, 110, 72, .65);
}

/* En page sombre, on inverse */
.sec--noir + .colophon,
.cine + .colophon {
  background: linear-gradient(180deg, rgba(20,18,14,.0) 0%, rgba(247,243,234,1) 70%);
}


/* ───────── 7. PAGE TRANSITION (Saint Laurent / cinéma) ─────────
   Voile noir qui apparaît avant navigation, disparaît à l'arrivée.
   Sensation : changement de plan cinéma. */

.page-veil {
  position: fixed;
  inset: 0;
  z-index: 99999;
  background: #14120e;
  opacity: 0;
  pointer-events: none;
  transition: opacity .85s cubic-bezier(.55, 0, .55, 1);
}
.page-veil.is-out {
  opacity: 1;
  pointer-events: auto;
}
.page-veil.is-in {
  opacity: 0;
  pointer-events: none;
}

/* Au load initial, voile à 1 puis fade-out */
.page-veil.entering {
  opacity: 1;
  transition: none;
}

@media (prefers-reduced-motion: reduce) {
  .page-veil { display: none !important; }
}


/* ───────── 8. CINE — DESATURATION RENFORCEE AU SCROLL ─────────
   Quand on quitte la section cinéma en scrollant, la vidéo passe
   complètement en N&B. Référence : Saint Laurent, esthétique noir. */

.cine-bg {
  filter: grayscale(var(--cine-bw, .42)) contrast(1.06) brightness(.92) saturate(.88) !important;
  transition: filter 1.6s cubic-bezier(.22,.61,.36,1),
              opacity 2.4s cubic-bezier(.22,.61,.36,1),
              transform 22s linear !important;
}


/* ───────── 9. CITATION DE TRANSITION (transition entre sections) ─────────
   Petite barre dorée + initiales C·C — référence subtile à la marque. */

.transition-mark {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  padding: clamp(40px, 6vw, 80px) 24px;
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 1.6s cubic-bezier(.22,.61,.36,1),
              transform 1.6s cubic-bezier(.22,.61,.36,1);
}
.transition-mark.is-in {
  opacity: 1;
  transform: translateY(0);
}
.transition-mark::before,
.transition-mark::after {
  content: '';
  width: 56px;
  height: .5px;
  background: rgba(140, 110, 72, .42);
}
.transition-mark span {
  font-family: 'EB Garamond', serif;
  font-style: italic;
  font-size: 13px;
  letter-spacing: 3px;
  color: rgba(140, 110, 72, .65);
}


/* ───────── 10. TYPOGRAPHIE — RAFFINEMENTS PAWSON ─────────
   Hanging punctuation, optical kerning, ligatures historiques. */

.display,
.ph-h1,
.lead,
.editorial-pull blockquote,
.cine-quote blockquote {
  hanging-punctuation: first allow-end last;
  font-feature-settings: "liga" 1, "dlig" 1, "hlig" 1, "kern" 1;
  font-variant-ligatures: common-ligatures discretionary-ligatures historical-ligatures;
}

/* Optical sizing si disponible (Cormorant le supporte) */
.display, .ph-h1 {
  font-optical-sizing: auto;
}


/* ───────── 11. SLOW SCROLL CHOREOGRAPHY ─────────
   Les éléments .rv reçoivent un timing plus généreux + un easing
   plus posé. Sensation : ballet. */

.rv {
  transition-duration: 1.4s !important;
  transition-timing-function: cubic-bezier(.22,.61,.36,1) !important;
}
.rv.d1 { transition-delay: .12s !important; }
.rv.d2 { transition-delay: .24s !important; }
.rv.d3 { transition-delay: .36s !important; }
.rv.d4 { transition-delay: .48s !important; }


/* ───────── 12. CITATIONS COULEUR — POUR PAGES PROJETS ─────────
   En haut de chaque page projet, une citation typographique
   à la Margiela : déstructurée, intellectuelle, élitiste. */

.proj-citation {
  display: block;
  text-align: center;
  padding: 80px 24px 0;
  margin: 0 auto;
  max-width: 720px;
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-weight: 300;
  font-size: clamp(18px, 1.8vw, 22px);
  line-height: 1.55;
  color: rgba(247, 243, 234, .82);
  letter-spacing: .3px;
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 2s cubic-bezier(.22,.61,.36,1),
              transform 2s cubic-bezier(.22,.61,.36,1);
}
.proj-citation.is-in {
  opacity: 1;
  transform: translateY(0);
}
.proj-citation strong {
  font-weight: 400;
  font-style: normal;
  color: rgba(184, 159, 110, .9);
  display: inline-block;
  font-size: .8em;
  letter-spacing: 4px;
  text-transform: uppercase;
  margin-bottom: 18px;
}


/* ───────── 13. AMBIANCE BUTTON — STYLE ENRICHI ─────────
   Plus respectueux de la sobriété ultra-luxe. */

.amb-trigger {
  background: rgba(247, 243, 234, .04) !important;
  border: .5px solid rgba(184, 159, 110, .25) !important;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  transition: background .8s cubic-bezier(.22,.61,.36,1),
              border-color .8s cubic-bezier(.22,.61,.36,1) !important;
}
.amb-trigger:hover {
  background: rgba(184, 159, 110, .08) !important;
  border-color: rgba(184, 159, 110, .55) !important;
}


/* ───────── 14. NAV — STYLE PAWSON DESKTOP ─────────
   Réduit l'épaisseur des liens, accroît l'espacement. */

@media (min-width: 769px) {
  .nl {
    font-weight: 300 !important;
    letter-spacing: 4px !important;
    transition: color .6s cubic-bezier(.22,.61,.36,1) !important;
  }
  .nl::after {
    transition: width .6s cubic-bezier(.22,.61,.36,1) !important;
  }
}


/* ───────── 15. SECTIONS NOIRES — DENSIFICATION ─────────
   Les sections sombres reçoivent un effet "page imprimée"
   très subtil (texture grain plus fine). */

.sec--noir {
  position: relative;
}
.sec--noir::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='nw'><feTurbulence type='fractalNoise' baseFrequency='1.2' numOctaves='2'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 .42 0'/></filter><rect width='100%25' height='100%25' filter='url(%23nw)'/></svg>");
  background-size: 180px 180px;
  opacity: .024;
  mix-blend-mode: screen;
}


/* ───────── 16. CITATION EN BANDE NARRATIVE ─────────
   Bandes éditoriales pleine largeur, fond ivoire profond,
   citation centrée — référence Hermès / Cucinelli. */

.bande-edito {
  position: relative;
  padding: clamp(80px, 11vw, 160px) clamp(20px, 6vw, 100px);
  background: #1a1814;
  color: rgba(247, 243, 234, .9);
  text-align: center;
  overflow: hidden;
}
.bande-edito::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 1px;
  height: 60%;
  background: linear-gradient(180deg,
    rgba(184, 159, 110, 0),
    rgba(184, 159, 110, .4),
    rgba(184, 159, 110, 0));
  pointer-events: none;
  opacity: .6;
}
.bande-edito-q {
  font-family: 'Cormorant Garamond', serif;
  font-weight: 300;
  font-style: italic;
  font-size: clamp(24px, 3vw, 42px);
  line-height: 1.3;
  letter-spacing: -.3px;
  max-width: 880px;
  margin: 0 auto 32px;
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 2s cubic-bezier(.22,.61,.36,1),
              transform 2s cubic-bezier(.22,.61,.36,1);
}
.bande-edito.is-in .bande-edito-q {
  opacity: 1;
  transform: translateY(0);
}
.bande-edito-a {
  font-family: 'Tenor Sans', sans-serif;
  font-size: 9.5px;
  letter-spacing: 4.5px;
  text-transform: uppercase;
  color: rgba(184, 159, 110, .72);
  opacity: 0;
  transition: opacity 2s cubic-bezier(.22,.61,.36,1) .4s;
}
.bande-edito.is-in .bande-edito-a {
  opacity: 1;
}