/*
  CARAVELLI COSTRUZIONI
  Couche FINITION V19 — sophistication maison de luxe

  S'ajoute par-dessus bottega-v18 sans rien retirer. Trois registres :
  1. Moteur typographique éditorial (contraste serif, équilibre, chiffres techniques)
  2. Matière & profondeur "satin/mat" (sheen discret, ombres flottantes, vignette)
  3. Micro-interactions raffinées, 100 % CSS (aucun conflit avec le JS existant)

  Références de craft : Bottega Veneta (silence, vert profond), Hermès (cuir),
  Loro Piana (neutres, matière), grammaire "quiet luxury / engineered precision".
*/

/* ─────────────────────────────────────────────────────────────
   1 · MOTEUR TYPOGRAPHIQUE ÉDITORIAL
   Équilibre des titres, ligatures, crénage, chiffres tabulaires.
───────────────────────────────────────────────────────────── */
.display,
.h2,
.hero-h1,
.sf-t,
.proj-nm,
.ph-h1,
.pj-h1,
.merci-h,
.pensee-body-inner h2,
.tsti-q {
  text-wrap: balance;
  font-optical-sizing: auto;
  font-kerning: normal;
  font-feature-settings: "kern" 1, "liga" 1, "dlig" 1, "calt" 1;
  -webkit-font-smoothing: antialiased;
}

.lead,
.body,
p.body,
.hero-sub,
.pensee-body-inner p,
.proj-ovt,
.tsti-a,
.folco-body {
  text-wrap: pretty;
  hanging-punctuation: first allow-end last;
}

/* Chiffres : tabulaires + alignés, esprit "spec" technique */
.fig-v,
.proj-number,
.chapitre-num,
.est-res-t,
.pm-rule,
.tl-d {
  font-feature-settings: "tnum" 1, "lnum" 1, "kern" 1;
  font-variant-numeric: tabular-nums lining-nums;
}

/* Étiquettes capitales : crénage net (la précision se lit) */
.eyebrow,
.kicker,
.proj-cat,
.proj-lc,
.hero-ey,
.sc-t,
.fig-l,
.ba-lbl,
.vg-sub,
.dbloc-l,
.pj-sec-n,
.bc-s {
  font-feature-settings: "kern" 1;
  font-variant: small-caps;
  -webkit-font-smoothing: antialiased;
}

/* ─────────────────────────────────────────────────────────────
   2 · MATIÈRE & PROFONDEUR — satin / mat (Obsidian luxe)
   Un voile de lumière en haut, un assombrissement en pied :
   les surfaces sombres gagnent une densité matte, pas plate.
───────────────────────────────────────────────────────────── */
.sec--noir,
.cine,
.folco,
footer,
.ft,
.est-res,
.hero {
  box-shadow:
    inset 0 90px 140px -110px rgba(242,235,221, .07),
    inset 0 -200px 240px -150px rgba(14,26,20, .55);
}

/* Cartes : ombre douce en couches → flottement maîtrisé */
.proj-iw,
.proj-card,
.proj-c,
.project,
.card,
.tsti,
.est-opt,
.office-card,
.bureau-card,
.ai-pn,
.vg {
  box-shadow:
    0 1px 2px rgba(14,26,20, .04),
    0 10px 26px -14px rgba(14,26,20, .10),
    0 34px 64px -34px rgba(14,26,20, .14) !important;
  transition:
    box-shadow .6s cubic-bezier(.22, .61, .36, 1),
    border-color .6s cubic-bezier(.22, .61, .36, 1),
    transform .6s cubic-bezier(.22, .61, .36, 1);
}
.proj-sl:hover .proj-iw,
.proj-card:hover,
.project:hover,
.card:hover,
.office-card:hover,
.bureau-card:hover {
  box-shadow:
    0 2px 4px rgba(14,26,20, .05),
    0 18px 40px -16px rgba(14,26,20, .14),
    0 56px 100px -40px rgba(14,26,20, .20) !important;
}

/* Filets : hairline ferme et chaude */
.sep,
.list-aside li,
.dbloc,
.pj-sec,
.ft-top,
.ft-bot,
.figs,
.fig,
.ba-labels {
  border-color: rgba(29,52,40, .16);
}

/* ─────────────────────────────────────────────────────────────
   3 · MICRO-INTERACTIONS RAFFINÉES (CSS pur)
   Aucune transformation JS sur ces propriétés → aucun conflit.
───────────────────────────────────────────────────────────── */

/* Images : la matière se révèle au survol (filtre, pas de transform :
   ne lutte pas avec le parallax JS). Easing long, cinématographique. */
.proj-iw img,
.proj-card img,
.fig img,
.sc-photo img,
.dbloc-i img,
.office-card img,
.bureau-card img {
  transition: filter 1.1s cubic-bezier(.22, .61, .36, 1);
  will-change: filter;
}
.proj-sl:hover .proj-iw img,
.proj-card:hover img,
.fig:hover img,
.office-card:hover img,
.bureau-card:hover img {
  filter: saturate(.72) contrast(1.06) brightness(1.02) !important;
}

/* Liens de contenu : soulignement qui se dessine (cognac) */
.body a:not(.btn):not(.ncta),
.lead a:not(.btn):not(.ncta),
.pj-sec a:not(.btn),
.pensee-body-inner a,
.dbloc a {
  background-image: linear-gradient(var(--bt-cognac), var(--bt-cognac));
  background-size: 0% .5px;
  background-position: 0 100%;
  background-repeat: no-repeat;
  text-decoration: none;
  transition: background-size .5s cubic-bezier(.22, .61, .36, 1), color .4s;
  padding-bottom: 1px;
}
.body a:not(.btn):not(.ncta):hover,
.lead a:not(.btn):not(.ncta):hover,
.pj-sec a:not(.btn):hover,
.pensee-body-inner a:hover,
.dbloc a:hover {
  background-size: 100% .5px;
}

/* Curseur custom : anneau plus fin, suivi plus soyeux */
.cur-ring {
  transition: width .4s cubic-bezier(.22, .61, .36, 1),
              height .4s cubic-bezier(.22, .61, .36, 1),
              border-color .4s, opacity .4s;
}

/* CTA : la lettre respire à l'approche (sobre) */
.btn,
.ncta {
  transition: color .45s var(--ease, ease), border-color .45s var(--ease, ease),
              background .45s var(--ease, ease), letter-spacing .45s var(--ease, ease);
}
.btn:hover {
  letter-spacing: .24em;
}

/* ─────────────────────────────────────────────────────────────
   4 · RÉVÉLATION TYPOGRAPHIQUE (pilotée par luxe-v19.js)
   Mot à mot, montée + dé-floutage. État caché posé par JS :
   si le script ne tourne pas, le texte reste visible.
───────────────────────────────────────────────────────────── */
.luxe-split .luxe-w {
  display: inline-block;
  opacity: 0;
  transform: translateY(.5em);
  filter: blur(6px);
  transition:
    opacity .8s cubic-bezier(.22, .61, .36, 1),
    transform .8s cubic-bezier(.22, .61, .36, 1),
    filter .8s cubic-bezier(.22, .61, .36, 1);
  will-change: opacity, transform, filter;
}
.luxe-split.luxe-in .luxe-w {
  opacity: 1;
  transform: translateY(0);
  filter: blur(0);
}

/* ─────────────────────────────────────────────────────────────
   Accessibilité : mouvement réduit → tout devient instantané.
───────────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .proj-iw img, .proj-card img, .fig img, .sc-photo img,
  .dbloc-i img, .office-card img, .bureau-card img,
  .card, .proj-card, .project, .btn, .ncta, .cur-ring,
  .luxe-split .luxe-w {
    transition-duration: .001ms !important;
  }
  .luxe-split .luxe-w {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
  }
}

/* Mobile : on allège les ombres profondes (perf + sobriété) */
@media (max-width: 760px) {
  .proj-iw, .proj-card, .card, .tsti, .office-card, .bureau-card {
    box-shadow:
      0 1px 2px rgba(14,26,20, .04),
      0 14px 30px -18px rgba(14,26,20, .14) !important;
  }
}