/* ============================================================
   EBEN & OR — styles partagés des sections 02 / 03 / 04 / 05+
   S'appuie sur tokens.css (variables, .grain, .hair-rule)
   Cormorant Garamond pour les titres, Fraunces réservé au mot-pivot.
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;1,300;1,400&display=swap');

:root{ --cormorant:"Cormorant Garamond", Georgia, serif; }

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

/* eyebrow mono + index de section */
.sec-eyebrow{ font-family:var(--mono); font-weight:400; font-size:11px;
  letter-spacing:.3em; text-transform:uppercase; color:var(--or);
  display:inline-flex; align-items:center; gap:14px; }
.sec-eyebrow .ix{ color:var(--paper-faint); letter-spacing:.2em; }
.sec-eyebrow .ln{ width:34px; height:1px; background:var(--hair); display:inline-block; }

/* gros chiffre fantôme (registre éditorial) */
.idx-ghost{ font-family:var(--cormorant); font-weight:300; line-height:.8;
  color:transparent; -webkit-text-stroke:1px rgba(236,228,212,.14);
  letter-spacing:-.02em; }

/* titres — Cormorant Garamond, mot-pivot en Fraunces italique */
.sec-title{ font-family:var(--cormorant); font-weight:400; letter-spacing:-.005em;
  line-height:1.06; color:var(--paper); margin:0; text-wrap:balance; }
.sec-title em{ font-family:var(--serif); font-style:italic; font-weight:400; color:var(--or-bright); }

/* corps de texte — Cormorant (Fraunces réservé au pivot) */
.lede{ font-family:var(--cormorant); font-weight:500; color:var(--paper-soft);
  line-height:1.55; margin:0; text-wrap:pretty; }
.lede strong{ color:var(--paper); font-weight:600; }

/* citation / signature */
.quote{ font-family:var(--cormorant); font-style:italic; font-weight:500;
  color:var(--paper); line-height:1.4; margin:0; text-wrap:balance; }
.quote em{ font-family:var(--serif); color:var(--or-bright); font-style:italic; font-weight:400; }

/* petit label mono */
.mono-tag{ font-family:var(--mono); font-size:11px; letter-spacing:.16em;
  text-transform:uppercase; color:var(--paper-soft);
  display:inline-flex; align-items:center; gap:9px; }
.mono-tag .sw{ width:8px; height:8px; border-radius:50%; background:var(--or-bright);
  box-shadow:0 0 7px rgba(240,214,149,.7); flex:0 0 auto; }

/* image en panneau */
.pane{ position:relative; overflow:hidden; background:var(--noir-2); }
.pane img{ width:100%; height:100%; object-fit:cover; display:block; }
.pane .cap{ position:absolute; left:16px; bottom:14px; z-index:3;
  text-shadow:0 1px 8px rgba(0,0,0,.7); }

/* portrait gradé pour l'écrin (duotone chaud sombre) */
.portrait img{ filter:grayscale(.72) sepia(.18) brightness(.82) contrast(1.06); }
.portrait .grade{ position:absolute; inset:0; mix-blend-mode:multiply;
  background:linear-gradient(180deg, rgba(28,22,14,.25), rgba(12,11,9,.55)); }

/* cadre doré qui se dessine (réutilisable) */
.gframe{ position:absolute; inset:0; pointer-events:none; z-index:4; }
.gframe .ln{ position:absolute; background:var(--or); box-shadow:0 0 10px rgba(240,214,149,0); }
.gframe .t{ top:0; left:0; height:1px; width:100%; transform:scaleX(0); transform-origin:left;
  background:linear-gradient(90deg,var(--or-bright),var(--or) 70%,transparent);
  transition:transform 1.4s cubic-bezier(.22,1,.36,1) .4s, box-shadow 1.4s ease .4s; }
.gframe .l{ top:0; left:0; width:1px; height:100%; transform:scaleY(0); transform-origin:top;
  background:linear-gradient(180deg,var(--or-bright),var(--or) 70%,transparent);
  transition:transform 1.4s cubic-bezier(.22,1,.36,1) .55s, box-shadow 1.4s ease .55s; }
.lit .gframe .t{ transform:scaleX(1); box-shadow:0 0 12px rgba(240,214,149,.5); }
.lit .gframe .l{ transform:scaleY(1); box-shadow:0 0 12px rgba(240,214,149,.5); }

/* halo doux sur une matière */
.mhalo{ position:absolute; border-radius:50%; pointer-events:none; filter:blur(16px);
  opacity:0; transition:opacity 2s ease .7s;
  background:radial-gradient(circle, rgba(240,214,149,.5) 0%, rgba(198,162,83,.16) 42%, transparent 72%); }
.lit .mhalo{ opacity:1; }

/* révélation douce du contenu */
.rise{ opacity:0; transform:translateY(16px); transition:opacity 1s ease, transform 1.1s cubic-bezier(.22,1,.36,1); }
.lit .rise{ opacity:1; transform:none; }
.rise.d1{ transition-delay:.12s; } .rise.d2{ transition-delay:.24s; }
.rise.d3{ transition-delay:.36s; } .rise.d4{ transition-delay:.48s; }

@media (prefers-reduced-motion:reduce){
  .gframe .t{ transform:scaleX(1); } .gframe .l{ transform:scaleY(1); }
  .mhalo{ opacity:1; } .rise{ opacity:1; transform:none; }
}