/* =====================================================================
   LE STUDIO™ — LCCA  ·  maison.css
   Composants « La Maison » — couche haute couture éditoriale.
   À charger APRÈS base-tokens.css sur chaque page du funnel.
   Matière (cire + papier), silence, autorité. Theme-agnostic :
   fonctionne sur fond crème (CL / Micro) et fond noir (BR).
   ===================================================================== */

/* — Raffinements globaux — */
::selection { background: var(--carmin); color: var(--creme); }
.section-title { font-size: var(--fs-h2); line-height: 1.12; max-width: 22ch; }
.section-title em { font-style: italic; color: var(--carmin); }
.bg-noir .section-title em, .bg-carmin .section-title em { color: var(--creme); }

/* ── NAV (barre fixe, verre dépoli sombre) ────────────────────────── */
.nav { position: fixed; inset: 0 0 auto 0; z-index: 100; background: rgba(17,7,3,0.92);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border-bottom: 1px solid var(--creme-08); }
.nav__inner { display: flex; align-items: center; justify-content: space-between; padding: var(--space-2xs) 0; }
.nav__logo img { height: 26px; }
.nav__cta { font-family: var(--ff-body); font-weight: var(--fw-med); font-size: var(--fs-caption);
  letter-spacing: var(--ls-caps); text-transform: uppercase; color: var(--creme);
  border: 1px solid var(--creme-40); padding: 0.65em 1.4em; border-radius: var(--radius-btn);
  transition: border-color 0.25s, background-color 0.25s; }
.nav__cta:hover { border-color: var(--carmin); background: var(--carmin); }

/* ── MATIÈRE PAPIER (fond crème texturé) ──────────────────────────── */
.paper { position: relative; background: var(--creme); }
.paper::before { content: ''; position: absolute; inset: 0;
  background: url(assets/textures/bg-texture-creme.png) center/620px repeat;
  opacity: 0.55; mix-blend-mode: multiply; pointer-events: none; z-index: 0; }
.paper > * { position: relative; z-index: 1; }

/* ── CHAPITRE (numérotation éditoriale I · II · III) ──────────────── */
.chapter { display: flex; align-items: baseline; gap: var(--space-sm); margin-bottom: var(--space-md); }
.chapter__no { font-family: var(--ff-display); font-style: italic; font-weight: var(--fw-light);
  font-size: var(--fs-h3); color: var(--carmin); line-height: 1; }
.chapter__label { font-family: var(--ff-body); font-weight: var(--fw-med); font-size: var(--fs-eyebrow);
  letter-spacing: var(--ls-wide); text-transform: uppercase; color: var(--noir-40); }
.chapter__rule { flex: 1; height: 1px; background: var(--noir-12); align-self: center; }
.bg-noir .chapter__no, .bg-carmin .chapter__no { color: var(--carmin); }
.bg-noir .chapter__label, .bg-carmin .chapter__label { color: var(--creme-40); }
.bg-noir .chapter__rule, .bg-carmin .chapter__rule { background: var(--creme-08); }
.bg-carmin .chapter__no { color: var(--creme); }
.bg-carmin .chapter__label { color: var(--creme-55); }
.bg-carmin .chapter__rule { background: var(--creme-15); }

/* ── SCEAU DE CIRE (signature de maison) ──────────────────────────── */
.seal { display: block; filter: drop-shadow(0 8px 22px rgba(0,0,0,0.35)); }
.seal--hero { position: absolute; z-index: 2; right: clamp(1rem, 5vw, 5rem); bottom: clamp(1.5rem, 5vh, 4rem);
  width: clamp(88px, 12vw, 150px); transform: rotate(-6deg); filter: drop-shadow(0 8px 22px rgba(0,0,0,0.5)); }
@media (max-width: 820px) { .seal--hero { width: 82px; opacity: 0.85; } }

/* ── PULL-QUOTE (silence / manifeste, pleine largeur) ─────────────── */
.pull { text-align: center; }
.pull.bg-carmin { background: var(--carmin); color: var(--creme); }
.pull.bg-noir { background: var(--noir); color: var(--creme); }
.pull__inner { display: grid; justify-items: center; gap: var(--space-md); }
.pull__mark { font-family: var(--ff-display); font-size: 4rem; line-height: 0.4; height: 0.5em; color: var(--creme-40); }
.pull.bg-noir .pull__mark { color: var(--carmin); }
.pull__q { font-family: var(--ff-display); font-style: italic; font-weight: var(--fw-light);
  font-size: var(--fs-h1); line-height: 1.2; max-width: 20ch; color: currentColor; }
.pull__q b { font-weight: var(--fw-semi); font-style: normal; }
.pull__attr { font-family: var(--ff-body); font-weight: var(--fw-med); font-size: var(--fs-caption);
  letter-spacing: var(--ls-wide); text-transform: uppercase; color: var(--creme-70); }
.pull.bg-noir .pull__attr { color: var(--carmin); }

/* ── POUR QUI / PAS POUR QUI ──────────────────────────────────────── */
.for-who__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: var(--space-lg); margin-top: var(--space-sm); }
.for-who__col h3 { font-family: var(--ff-display); font-size: var(--fs-h3); font-style: italic; font-weight: var(--fw-semi); margin-bottom: var(--space-sm); }
.for-who__col--no h3 { color: var(--noir-40); }
.for-who__list { list-style: none; display: flex; flex-direction: column; gap: 1.15em; }
.for-who__list li { padding-left: 1.5em; position: relative; font-size: var(--fs-body); line-height: 1.6; }
.for-who__list li strong { font-weight: var(--fw-semi); }
.for-who__col--yes li::before { content: ''; position: absolute; left: 0; top: 0.5em; width: 8px; height: 8px; background: var(--carmin); transform: rotate(45deg); }
.for-who__col--no li { color: var(--noir-55); }
.for-who__col--no li::before { content: '—'; position: absolute; left: 0; top: 0; color: var(--noir-40); }

/* ── TIMELINE PROCESSUS (phases numérotées) ───────────────────────── */
.arc__intro { color: var(--noir-70); font-size: var(--fs-lg); font-weight: var(--fw-light);
  font-family: var(--ff-display); font-style: italic; max-width: 46ch; margin-bottom: var(--space-lg); }
.bg-noir .arc__intro { color: var(--creme-70); }
.phase { display: grid; grid-template-columns: minmax(auto, 1.4fr) 3fr; gap: var(--space-md);
  padding: var(--space-md) 0; border-top: 1px solid var(--noir-12); align-items: start; }
.phase:last-child { border-bottom: 1px solid var(--noir-12); }
.bg-noir .phase { border-top-color: var(--creme-08); }
.bg-noir .phase:last-child { border-bottom-color: var(--creme-08); }
.phase__num { font-family: var(--ff-display); font-size: clamp(2.5rem, 5vw, 3.75rem); font-weight: var(--fw-light);
  color: var(--carmin); line-height: 0.85; }
.phase__label { font-size: var(--fs-caption); letter-spacing: var(--ls-caps); text-transform: uppercase; color: var(--noir-40); display: block; margin-top: 0.6em; }
.bg-noir .phase__label { color: var(--creme-40); }
.phase__title { font-family: var(--ff-display); font-size: var(--fs-h3); font-weight: var(--fw-semi); color: var(--noir); margin-bottom: 0.5em; line-height: 1.2; }
.bg-noir .phase__title { color: var(--creme); }
.phase__text { font-size: var(--fs-body); color: var(--noir-70); line-height: 1.7; max-width: 60ch; }
.bg-noir .phase__text { color: var(--creme-70); }
@media (max-width: 680px) { .phase { grid-template-columns: 1fr; gap: var(--space-2xs); } .phase__label { margin-top: 0.2em; } }

/* ── CE QUE C'EST / PAS ───────────────────────────────────────────── */
.comparison__list { display: flex; flex-direction: column; margin-top: var(--space-sm); }
.comparison__row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-lg); padding: var(--space-md) 0; border-bottom: 1px solid var(--noir-12); align-items: baseline; }
.comparison__row:first-child { border-top: 1px solid var(--noir-12); }
.comparison__is { font-size: var(--fs-lg); color: var(--noir); font-weight: var(--fw-light); line-height: 1.5; }
.comparison__is b { color: var(--carmin); font-weight: var(--fw-semi); font-family: var(--ff-display); font-style: italic; }
.comparison__not { font-size: var(--fs-body); color: var(--noir-40); font-style: italic; line-height: 1.6; }
@media (max-width: 620px) { .comparison__row { grid-template-columns: 1fr; gap: 0.5em; } }

/* ── RÉSULTATS (filet carmin en tête) ─────────────────────────────── */
.results__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: var(--space-lg); margin-top: var(--space-sm); }
.result { padding-top: var(--space-sm); border-top: 2px solid var(--carmin); }
.result__label { font-family: var(--ff-body); font-weight: var(--fw-med); font-size: var(--fs-caption); letter-spacing: var(--ls-caps); text-transform: uppercase; color: var(--carmin); margin-bottom: 0.9em; }
.result__title { font-family: var(--ff-display); font-weight: var(--fw-semi); font-size: var(--fs-h3); color: var(--noir); line-height: 1.2; margin-bottom: 0.4em; }
.bg-noir .result__title { color: var(--creme); }
.result__text { font-size: var(--fs-body); color: var(--noir-70); line-height: 1.75; }
.result__text em { font-style: italic; color: var(--noir); font-family: var(--ff-display); }

/* ── LA PERSONNE (portrait éditorial plein cadre) ─────────────────── */
.proof { background: var(--noir); color: var(--creme); overflow: hidden; }
.proof__grid { display: grid; grid-template-columns: 0.92fr 1.08fr; gap: 0; align-items: stretch; min-height: 72vh; }
.proof__photo { position: relative; }
.proof__photo img { width: 100%; height: 100%; object-fit: cover; object-position: center 20%; filter: grayscale(100%) contrast(1.02); }
.proof__photo::after { content: ''; position: absolute; inset: 0; box-shadow: inset -60px 0 60px -40px rgba(17,7,3,0.9); }
.proof__body { padding: clamp(2rem, 5vw, 5rem); display: flex; flex-direction: column; justify-content: center; }
.proof__body .chapter__no { color: var(--carmin); }
.proof__body .chapter__label { color: var(--creme-40); }
.proof__body .chapter__rule { background: var(--creme-08); }
.proof__title { font-family: var(--ff-display); font-size: var(--fs-h2); color: var(--creme); line-height: 1.12; margin-bottom: var(--space-sm); }
.proof__title em { font-style: italic; color: var(--carmin); }
.proof__text p { font-size: var(--fs-body); font-weight: var(--fw-light); line-height: 1.75; color: var(--creme-70); }
.proof__text p + p { margin-top: 1em; }
.proof__sign { margin-top: var(--space-md); }
.proof__sign img { height: 52px; opacity: 0.95; }
@media (max-width: 820px) { .proof__grid { grid-template-columns: 1fr; min-height: 0; } .proof__photo { aspect-ratio: 4/5; max-height: 60vh; } .proof__photo::after { box-shadow: inset 0 -60px 60px -40px rgba(17,7,3,0.9); } }

/* ── CTA (invitation, sceau centré) ───────────────────────────────── */
.cta { background: var(--noir); text-align: center; position: relative; overflow: hidden; }
.cta::after { content: ''; position: absolute; bottom: -40%; left: 50%; transform: translateX(-50%); width: 90vw; height: 60vw; background: radial-gradient(circle, rgba(167,0,24,0.12) 0%, transparent 60%); pointer-events: none; }
.cta__inner { position: relative; z-index: 2; display: grid; justify-items: center; gap: var(--space-sm); }
.cta__seal { width: clamp(96px, 13vw, 156px); margin-bottom: var(--space-xs); filter: drop-shadow(0 10px 26px rgba(0,0,0,0.55)); }
.cta__eyebrow { font-family: var(--ff-body); font-weight: var(--fw-med); font-size: var(--fs-eyebrow); letter-spacing: var(--ls-wide); text-transform: uppercase; color: var(--carmin); }
.cta__title { font-family: var(--ff-display); font-size: var(--fs-h1); font-weight: var(--fw-h2); color: var(--creme); line-height: 1.14; letter-spacing: var(--ls-tight); max-width: 20ch; }
.cta__title em { color: var(--carmin); font-style: italic; }
.cta__sub { color: var(--creme-70); max-width: 58ch; font-size: var(--fs-body); line-height: 1.75; font-weight: var(--fw-light); }
.cta .btn--primary { margin-top: var(--space-2xs); }

/* ── FOOTER ───────────────────────────────────────────────────────── */
.footer { background: var(--noir); border-top: 1px solid var(--creme-08); color: var(--creme-40); padding: var(--space-lg) 0; text-align: center; font-size: var(--fs-caption); letter-spacing: 0.03em; }
.footer img { height: 22px; margin: 0 auto var(--space-sm); opacity: 0.8; }
.footer a { color: var(--creme-70); }
.footer a:hover { color: var(--carmin); }
.footer__sep { color: var(--creme-15); margin: 0 0.5em; }

/* ── FORMULAIRE (champs haute couture, filet fin) ─────────────────── */
.field { display: grid; gap: 0.5em; margin-bottom: var(--space-sm); }
.field label { font-family: var(--ff-body); font-weight: var(--fw-med); font-size: var(--fs-caption); letter-spacing: var(--ls-caps); text-transform: uppercase; color: var(--noir-70); }
.field input, .field textarea, .field select { font-family: var(--ff-body); font-size: var(--fs-body); font-weight: var(--fw-light); color: var(--noir); background: transparent; border: none; border-bottom: 1px solid var(--noir-12); padding: 0.6em 0; transition: border-color 0.2s; }
.field input:focus, .field textarea:focus, .field select:focus { outline: none; border-bottom-color: var(--carmin); }
.field textarea { resize: vertical; min-height: 4em; }
.field ::placeholder { color: var(--noir-40); font-style: italic; }

/* ── FILIGRANE (sceau gaufré en profondeur) — finition Da Vinci ────
   Le watermark d'autorité derrière les moments forts. Le document scellé
   porte l'empreinte même en creux, ton sur ton, avant la cire. ──────── */
.pull { position: relative; overflow: hidden; min-height: min(84vh, 720px); display: flex; align-items: center; justify-content: center; }
.pull__inner { position: relative; z-index: 1; }
.pull::before {
  content: ''; position: absolute; inset: 0; margin: auto;
  width: min(56vw, 420px); height: min(56vw, 420px);
  background: url(assets/logos/sceau-creme.svg) center/contain no-repeat;
  opacity: 0.06; pointer-events: none; z-index: 0;
}
.cta__inner { position: relative; z-index: 2; }

/* ── Micro — nuance « première marche » : même étoffe, plus d'air ──── */
.t-micro .seal--hero { width: clamp(74px, 9vw, 116px); opacity: 0.92; }
.t-micro .paper::before { opacity: 0.4; }
.t-micro .pull__q { font-weight: var(--fw-light); }

/* ── Corrections DA v2.2 (héritées par les pages secondaires) ──────── */
/* Plus de chiffres romains : on garde le label + le filet */
.chapter__no { display: none !important; }
/* Contraste remonté sur « ce que ce n'est pas » */
.comparison__not { color: var(--noir-70); }
.bg-noir .comparison__not, .arc .comparison__not { color: var(--creme-55); }
/* Signature agrandie et lisible */
.proof__sign img { height: 84px; }