/* ─────────────────────────────────────────────
   STYLE V12 — STRUCTURES ÉDITORIALES MAISON
   - Section Folco (transmission, demi-page portrait)
   - Page La Pensée (manifeste italique 600 mots)
   - Section Regards (citations réelles d'architectes)
   Strictement additif. Charge APRES style-v11.css.
───────────────────────────────────────────── */


/* ───────── 1. SECTION FOLCO — TRANSMISSION ─────────
   Demi-page portrait noir et blanc + 200 mots à la 1ère personne.
   Inspiration : Cucinelli (page Solomeo), Studio KO (Karl & Olivier). */

.folco {
  position: relative;
  background: #faf6ec;
  padding: clamp(80px, 10vw, 160px) 0;
}

.folco-grid {
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: clamp(40px, 6vw, 100px);
  align-items: center;
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 clamp(20px, 4vw, 60px);
}

.folco-portrait {
  position: relative;
  aspect-ratio: 4/5;
  background: #2a2622;
  overflow: hidden;
}
.folco-portrait img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  filter: grayscale(1) contrast(1.04) brightness(.92);
  transition: transform 6s cubic-bezier(.22,.61,.36,1);
}
.folco:hover .folco-portrait img {
  transform: scale(1.02);
}
.folco-portrait::after {
  content: '';
  position: absolute;
  inset: 0;
  border: .5px solid rgba(184, 159, 110, .25);
  pointer-events: none;
}

/* Plaque de musée sous le portrait */
.folco-plaque {
  margin-top: 18px;
  font-family: 'Tenor Sans', sans-serif;
  font-size: 9px;
  letter-spacing: 4.5px;
  text-transform: uppercase;
  color: rgba(40, 36, 30, .42);
  line-height: 1.6;
}
.folco-plaque-name {
  display: block;
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: 14px;
  letter-spacing: .8px;
  text-transform: none;
  color: rgba(40, 36, 30, .82);
  margin-bottom: 4px;
}

.folco-text {
  display: block;
}
.folco-eyebrow {
  font-family: 'Tenor Sans', sans-serif;
  font-size: 9.5px;
  letter-spacing: 4.5px;
  text-transform: uppercase;
  color: rgba(140, 110, 72, .82);
  display: block;
  margin-bottom: 22px;
}
.folco-eyebrow::before {
  content: '— ';
  margin-right: 6px;
}
.folco-name {
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(36px, 4.5vw, 60px);
  font-weight: 300;
  line-height: 1.05;
  letter-spacing: -.5px;
  color: rgba(28, 26, 22, .92);
  margin: 0 0 32px;
}
.folco-name em {
  font-style: italic;
  color: rgba(140, 110, 72, .82);
  font-weight: 300;
}
.folco-body {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-weight: 400;
  font-size: 19px;
  line-height: 1.65;
  color: rgba(40, 36, 30, .82);
  max-width: 560px;
}
.folco-body p {
  margin: 0 0 18px;
}
.folco-body p:last-child {
  margin-bottom: 0;
}
.folco-signature {
  display: block;
  margin-top: 36px;
  padding-top: 22px;
  border-top: .5px solid rgba(184, 159, 110, .28);
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: 14px;
  color: rgba(140, 110, 72, .85);
  letter-spacing: .4px;
}
.folco-signature small {
  display: inline-block;
  margin-left: 14px;
  font-family: 'Tenor Sans', sans-serif;
  font-style: normal;
  font-size: 9px;
  letter-spacing: 3.5px;
  text-transform: uppercase;
  color: rgba(40, 36, 30, .42);
}

@media (max-width: 768px) {
  .folco-grid {
    grid-template-columns: 1fr;
    gap: 36px;
  }
  .folco-portrait {
    aspect-ratio: 4/5;
    max-width: 320px;
  }
  .folco-body {
    font-size: 17px;
    max-width: none;
  }
}


/* ───────── 2. SILHOUETTE — SIGNATURE DELIBEREE ─────────
   Une silhouette pleine, pas un trait. Pas un visage, pas un avatar.
   Une présence évoquée, comme l'ombre d'un homme noble dans la
   lumière du soir. Référence : silhouettes de Hermès dans ses
   campagnes éditoriales, profils d'ombre des couvertures Cucinelli. */

.folco-portrait.is-placeholder {
  background:
    radial-gradient(ellipse at 50% 35%, #2a2622 0%, #16140f 100%);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  position: relative;
  overflow: hidden;
}


/* ───────── VIDÉO FONDATEUR ─────────
   Quand une vidéo est présente, elle remplit le cadre par-dessus
   la silhouette CSS (qui sert de fallback / poster pendant chargement).
   La vidéo est en N&B, autoplay muet, en boucle.
   Au-dessus restent : le cadre or, l'inscription F·C·MCMXLVIII, et
   un voile dégradé en bas pour assurer la lisibilité de l'inscription. */

.folco-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 30%;     /* met la silhouette du marcheur dans le centre vertical */
  z-index: 1;
  display: block;
  /* Renforcement N&B + contraste pour cohérence avec la palette */
  filter: grayscale(1) contrast(1.06) brightness(.94);
  /* Apparition douce après chargement */
  opacity: 0;
  animation: folcoVideoIn 1.6s cubic-bezier(.22,.61,.36,1) .6s forwards;
}

@keyframes folcoVideoIn {
  0%   { opacity: 0; }
  100% { opacity: 1; }
}

/* Quand la vidéo est présente, on plonge la silhouette CSS encore plus
   en background (visible uniquement si la vidéo échoue à charger). */
.folco-portrait--has-video .folco-silhouette {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  z-index: 0;     /* sous la vidéo */
}
.folco-portrait--has-video .folco-silhouette svg {
  width: 56%;
  height: 78%;
}

/* Voile en haut + bas pour assurer la lisibilité du cadre or et de
   l'inscription F·C·MCMXLVIII par-dessus la vidéo.
   Spécificité élevée pour override le ::before du cadre intérieur. */
.folco-portrait.is-placeholder.folco-portrait--has-video::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg,
      rgba(20, 18, 14, .55) 0%,
      rgba(20, 18, 14, 0)   18%,
      rgba(20, 18, 14, 0)   72%,
      rgba(20, 18, 14, .65) 100%);
  z-index: 2;
  pointer-events: none;
  border: none;
}

/* Quand la vidéo joue, le cadre intérieur or désaturé se déplace
   en outline pour ne pas fragmenter la lecture de la vidéo. */
.folco-portrait--has-video {
  outline: .5px solid rgba(184, 159, 110, .12);
  outline-offset: -24px;
}

/* Si l'utilisateur préfère le mouvement réduit, pas de vidéo */
@media (prefers-reduced-motion: reduce) {
  .folco-video {
    display: none;
  }
}

/* Cadre intérieur très subtil — comme un encadrement de lithographie */
.folco-portrait.is-placeholder::before {
  content: '';
  position: absolute;
  inset: 24px;
  border: .5px solid rgba(184, 159, 110, .12);
  pointer-events: none;
  z-index: 1;
}

/* La silhouette : pleine forme noire dégradée vers le bas du cadre.
   C'est une SILHOUETTE — pas un trait. Comme une figure tournée vers
   la lumière, dont on ne voit que le contour sombre. */
.folco-silhouette {
  position: relative;
  width: 56%;
  height: 78%;
  z-index: 2;
  display: block;
}
.folco-silhouette svg {
  width: 100%;
  height: 100%;
  display: block;
  filter:
    drop-shadow(0 4px 24px rgba(0, 0, 0, .55))
    drop-shadow(0 0 1px rgba(184, 159, 110, .35));
}

/* Inscription discrète en HAUT du cadre — comme une légende
   gravée au-dessus d'une figure, dans la lumière. Plus lisible
   que le bas qui est occupé par l'ombre du marcheur. */
.folco-portrait.is-placeholder::after {
  content: 'F · C  ·  ᴍᴄᴍxʟᴠɪɪɪ';
  position: absolute;
  top: 26px;
  left: 0;
  right: 0;
  text-align: center;
  font-family: 'EB Garamond', 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: 10px;
  letter-spacing: 3px;
  color: rgba(184, 159, 110, .55);
  text-transform: none;
  pointer-events: none;
  z-index: 3;
}

/* Quand la vidéo joue, le voile haut renforce la lisibilité
   et l'or désaturé de l'inscription tire un peu vers le clair */
.folco-portrait.is-placeholder.folco-portrait--has-video::after {
  color: rgba(247, 243, 234, .68);
  text-shadow: 0 1px 4px rgba(0, 0, 0, .65);
  letter-spacing: 3.5px;
}

.folco-portrait.is-placeholder img { display: none; }


/* Phrase éditoriale sous la plaque : transforme l'absence en
   revendication discrète. */

.folco-discretion {
  display: block;
  margin-top: 22px;
  padding-top: 16px;
  border-top: .5px solid rgba(184, 159, 110, .18);
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: 12.5px;
  line-height: 1.55;
  color: rgba(40, 36, 30, .42);
  letter-spacing: .3px;
  max-width: 280px;
}


/* ───────── 3. PAGE LA PENSEE — MANIFESTE ─────────
   Layout d'un livre rare ouvert : marges généreuses, italique,
   600 mots à la première personne. */

.pensee-hero {
  min-height: 60vh;
  padding: 140px 24px 100px;
  background: #faf6ec;
  position: relative;
  z-index: 1;
}
.pensee-hero-inner {
  max-width: 760px;
  width: 100%;
  margin: 0 auto;
  text-align: center;
  position: relative;
  z-index: 2;
}
.pensee-eyebrow {
  font-family: 'Tenor Sans', sans-serif;
  font-size: 9.5px;
  letter-spacing: 5px;
  text-transform: uppercase;
  color: rgba(140, 110, 72, .82);
  display: block;
  margin-bottom: 32px;
}
.pensee-eyebrow::before,
.pensee-eyebrow::after {
  content: '—';
  margin: 0 14px;
  color: rgba(184, 159, 110, .55);
}
.pensee-h1 {
  font-family: 'Cormorant Garamond', serif;
  font-weight: 300;
  font-size: clamp(40px, 5vw, 72px);
  line-height: 1.05;
  letter-spacing: -.5px;
  color: rgba(28, 26, 22, .92);
  margin: 0 0 36px;
  word-wrap: break-word;
  overflow-wrap: break-word;
}
.pensee-h1 em {
  font-style: italic;
  color: rgba(140, 110, 72, .82);
  display: block;
}
.pensee-intro {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: 21px;
  font-weight: 300;
  line-height: 1.55;
  color: rgba(40, 36, 30, .68);
  max-width: 640px;
  margin: 0 auto;
}

.pensee-body {
  background: #faf6ec;
  padding: 60px 24px clamp(80px, 10vw, 140px);
}
.pensee-body-inner {
  max-width: 720px;
  margin: 0 auto;
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: 19.5px;
  font-weight: 400;
  line-height: 1.7;
  color: rgba(28, 26, 22, .88);
}
.pensee-body-inner p {
  margin: 0 0 26px;
  text-indent: 1.4em;
}
.pensee-body-inner p:first-child {
  text-indent: 0;
}
.pensee-body-inner p:first-child::first-letter {
  font-family: 'EB Garamond', 'Cormorant Garamond', serif;
  font-size: 4.4em;
  line-height: .85;
  font-weight: 400;
  font-style: normal;
  float: left;
  margin: .12em .14em -.05em 0;
  padding-top: .04em;
  padding-bottom: .04em;
  color: rgba(40, 36, 30, .88);
  border-bottom: .5px solid rgba(184, 159, 110, .32);
  text-shadow:
    0 -.5px 0 rgba(255, 252, 244, .55),
    0  1px  0 rgba(20, 18, 14, .15),
    0  2px  3px rgba(20, 18, 14, .08);
}
.pensee-body-inner h2 {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-weight: 300;
  font-size: 26px;
  letter-spacing: -.2px;
  color: rgba(140, 110, 72, .92);
  text-align: center;
  margin: 56px 0 32px;
  padding-top: 28px;
}
.pensee-body-inner h2::before {
  content: '';
  display: block;
  width: 28px;
  height: .5px;
  margin: 0 auto 28px;
  background: rgba(184, 159, 110, .55);
}
.pensee-signature {
  text-align: center;
  margin-top: 60px;
  padding-top: 36px;
  border-top: .5px solid rgba(184, 159, 110, .28);
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: 16px;
  color: rgba(140, 110, 72, .85);
  letter-spacing: .4px;
}
.pensee-signature::before {
  content: '— ';
}
.pensee-signature small {
  display: block;
  margin-top: 6px;
  font-family: 'Tenor Sans', sans-serif;
  font-style: normal;
  font-size: 8.5px;
  letter-spacing: 3.5px;
  text-transform: uppercase;
  color: rgba(40, 36, 30, .42);
}

@media (max-width: 768px) {
  .pensee-h1 { font-size: 44px; }
  .pensee-body-inner { font-size: 17.5px; line-height: 1.7; }
  .pensee-body-inner p:first-child::first-letter { font-size: 3.6em; }
}


/* ───────── 4. SECTION REGARDS — CITATIONS RÉELLES ─────────
   En bas d'index uniquement, juste avant le footer.
   Très discrète, sans logos, sans attribution fictive.
   Inspiration : ce que fait Cucinelli avec ses citations philosophiques. */

.regards {
  position: relative;
  padding: clamp(80px, 10vw, 140px) 0 clamp(60px, 7vw, 100px);
  background: #faf6ec;
}
.regards-inner {
  max-width: 1080px;
  margin: 0 auto;
  padding: 0 clamp(24px, 4vw, 60px);
}
.regards-eyebrow {
  font-family: 'Tenor Sans', sans-serif;
  font-size: 9px;
  letter-spacing: 5px;
  text-transform: uppercase;
  color: rgba(140, 110, 72, .68);
  display: block;
  margin-bottom: 14px;
}
.regards-eyebrow::before {
  content: '— ';
}
.regards-title {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-weight: 300;
  font-size: clamp(28px, 3.4vw, 42px);
  letter-spacing: -.3px;
  color: rgba(40, 36, 30, .82);
  margin: 0 0 60px;
  max-width: 540px;
}

.regards-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(40px, 5vw, 72px) clamp(60px, 8vw, 120px);
  margin-top: 24px;
}

.regards-item {
  position: relative;
  padding-left: 24px;
  border-left: .5px solid rgba(184, 159, 110, .28);
}
.regards-quote {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-weight: 300;
  font-size: 17px;
  line-height: 1.55;
  color: rgba(40, 36, 30, .72);
  margin: 0 0 14px;
}
.regards-source {
  font-family: 'Tenor Sans', sans-serif;
  font-size: 8.5px;
  letter-spacing: 3.2px;
  text-transform: uppercase;
  color: rgba(140, 110, 72, .65);
  font-style: normal;
}
.regards-source-detail {
  display: block;
  margin-top: 4px;
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: 11px;
  letter-spacing: .4px;
  text-transform: none;
  color: rgba(40, 36, 30, .42);
}

@media (max-width: 768px) {
  .regards-grid { grid-template-columns: 1fr; gap: 36px; }
  .regards-quote { font-size: 16px; }
}


/* ───────── 5. NAV — AJOUT LIEN PENSÉE ─────────
   Style identique aux autres .nl */
.nl[href*="pensee"] { /* hérite simplement de .nl, pas besoin d'override */ }


/* ───────── PENSEE — BANDE CINEMA MEDITATIVE ─────────
   Insérée entre le HERO et le manifeste. Bande horizontale pleine
   largeur, hauteur cinéma, vidéo en object-fit cover (la silhouette
   floue se centre naturellement). Voile haut/bas pour fondu. */

.pensee-cine {
  position: relative;
  width: 100%;
  height: clamp(420px, 62vh, 720px);
  background: #0a0907;
  overflow: hidden;
  margin: 0;
  z-index: 1;
}

.pensee-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 35%;
  display: block;
  /* Désaturation discrète + contraste pour s'aligner avec la palette
     ivoire/encre. Conserve un peu de chaleur des lumières rouges
     d'arrière-plan, pour ne pas être totalement N&B. */
  filter: grayscale(.65) contrast(1.08) brightness(.94) saturate(.92);
  opacity: 0;
  animation: penseeVideoIn 1.8s cubic-bezier(.22,.61,.36,1) .4s forwards;
}

@keyframes penseeVideoIn {
  0%   { opacity: 0; transform: scale(1.04); }
  100% { opacity: 1; transform: scale(1); }
}

/* Voile dégradé en haut + bas, pour fondu avec les sections claires
   au-dessus et en dessous. */
.pensee-cine-veil {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg,
      rgba(250, 246, 236, .96) 0%,
      rgba(250, 246, 236, 0)   18%,
      rgba(250, 246, 236, 0)   78%,
      rgba(250, 246, 236, .92) 100%);
  pointer-events: none;
  z-index: 2;
}

@media (prefers-reduced-motion: reduce) {
  .pensee-video {
    display: none;
  }
}

@media (max-width: 768px) {
  .pensee-cine {
    height: clamp(360px, 56vh, 540px);
  }
}


/* ───────── PENSEE — SIGNATURE ANONYME ─────────
   La page ne porte plus de nom propre. Juste la Maison comme
   entité, son lieu de fondation et son année. Discipline Margiela. */

.pensee-signature--house {
  text-align: center;
  margin-top: 60px;
  padding-top: 36px;
  border-top: .5px solid rgba(184, 159, 110, .28);
}
.pensee-signature--house span:first-child {
  display: block;
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: 18px;
  font-weight: 300;
  letter-spacing: .8px;
  color: rgba(140, 110, 72, .85);
  margin: 0;
}
.pensee-signature--house::before {
  content: none;
}
.pensee-signature--house small {
  display: block;
  margin-top: 8px;
  font-family: 'Tenor Sans', sans-serif;
  font-style: normal;
  font-size: 9px;
  letter-spacing: 4px;
  text-transform: uppercase;
  color: rgba(40, 36, 30, .42);
}