/*
 * CARAVELLI — READABILITY GATE
 * Final, isolated guard for every non-home witness/project page.
 * The public index does not load this file.
 */

body[data-page] {
  overflow-x: clip !important;
  min-width: 0;
}

body[data-page] main,
body[data-page] main > *,
body[data-page] section,
body[data-page] .container,
body[data-page] .wrap {
  min-width: 0;
  max-width: 100%;
}

body[data-page] :is(img, video, canvas, svg) {
  max-width: 100%;
}

/* Do not let browser containment turn a whole editorial room into a void. */
@supports (content-visibility: auto) {
  body[data-page] .cv3-room,
  body[data-page] main > section {
    content-visibility: visible !important;
    contain-intrinsic-size: auto !important;
  }
}

/* A reading page must never depend on a reveal callback to become readable. */
body[data-page] main :is(.rv, .ol-reveal, .reveal, [data-reveal]),
body[data-page] main :is(h1, h2, h3, h4, h5, h6, p, li, blockquote, figcaption, label, legend) {
  opacity: 1 !important;
  visibility: visible !important;
}

body[data-page] main :is(.rv, .ol-reveal, .reveal, [data-reveal]) {
  transform: none !important;
  filter: none !important;
}

body[data-page] main .oc-glyph .oc-gc,
body[data-page] main .oc-split .oc-wi {
  opacity: 1 !important;
  transform: none !important;
  filter: none !important;
}

body[data-page] main form :is(label, legend) {
  font-size: var(--cv-typo-current-fs, 11.5px) !important;
  line-height: var(--cv-typo-current-lh, 1.35) !important;
}

body[data-page] main :is(button, .btn) {
  font-size: var(--cv-typo-current-fs, 10.5px) !important;
}

/* Light matter: graphite typography, never Carrara-on-Carrara. */
body[data-page] :is(
  .sec--blanc,
  .sec--creme,
  .cv3-material--carrara,
  .cv3-material--ivory,
  .c12-section--light,
  .c12-end,
  .contact-intake
) :is(
  h1, h2, h3, h4, h5, h6, p, li, dt, dd, blockquote, figcaption,
  label, legend, a:not(.btn), .kicker, .eyebrow, .lead, .body, .display,
  .h2, .stmt, .stmt-q, .stmt-sig2, .dxb-k, .dxb-t, .dxb-n, .dxb-cap,
  .proj-nm, .proj-cat, .proj-loc, .pj-cat, .pj-loc, .c12-kicker,
  .c12-copy, .c12-meta, .c12-caption, .form-note, .form-status
) {
  color: #1c1b18 !important;
  text-shadow: none !important;
}

body[data-page] :is(.sec--blanc, .sec--creme, .cv3-material--carrara, .cv3-material--ivory, .contact-intake)
  :is(input, textarea, select) {
  color: #1c1b18 !important;
  background-color: rgba(255, 255, 255, .72) !important;
  border-color: rgba(28, 27, 24, .32) !important;
  caret-color: #1c1b18 !important;
}

body[data-page] :is(.sec--blanc, .sec--creme, .cv3-material--carrara, .cv3-material--ivory, .contact-intake)
  :is(input, textarea)::placeholder {
  color: rgba(28, 27, 24, .62) !important;
  opacity: 1 !important;
}

/* Dark matter: Carrara typography, never obsidian-on-obsidian. */
body[data-page] :is(
  .sec--noir,
  .folco,
  .cine,
  .cv3-material--smoke,
  .cv3-material--obsidian,
  .cv3-material--glass-dark,
  .ft,
  footer,
  .c12-section--dark
) :is(
  h1, h2, h3, h4, h5, h6, p, li, dt, dd, blockquote, figcaption,
  label, legend, a:not(.btn), .kicker, .eyebrow, .lead, .body, .display,
  .h2, .stmt, .stmt-q, .stmt-sig2, .folco-eyebrow, .folco-name,
  .folco-body, .folco-discretion, .cine-quote,
  .proj-nm, .proj-cat, .proj-loc, .pj-cat, .pj-loc, .c12-kicker,
  .c12-copy, .c12-meta, .c12-caption
) {
  color: #f2efe8 !important;
}

/* K3-B : la plaque signature de la section Folco est un cartel clair
   (fond ivoire). Son nom doit rester encre — il ne doit jamais hériter
   du blanc Carrara forcé pour la section sombre qui l'entoure. */
body[data-page] .folco-plaque .folco-plaque-name {
  color: var(--c-encre) !important;
}

/* Une carte sombre peut appartenir à une section claire. */
body[data-page="about"] .v6-inline-about-35 em {
  color: #d7dad7 !important;
  -webkit-text-fill-color: #d7dad7 !important;
}

/* Les légendes Dubai ont leur propre cartel sombre. */
html body[data-page="dubai-bureaux"] .dxb-ch .dxb-cap {
  color: #f1f4ef !important;
  -webkit-text-fill-color: #f1f4ef !important;
}

body[data-page] :is(.sec--noir, .folco, .cine, .cv3-material--smoke, .cv3-material--obsidian, .ft, footer)
  :is(.kicker, .eyebrow, .folco-eyebrow, .dxb-k, .proj-cat, .pj-cat, .c12-kicker) {
  color: #d7c39a !important;
}

/* Local image protection: never a global veil, only a reading reserve. */
body[data-page] :is(.ph, .dxb-hero, .pj-hero, .c12-hero, .hero) :is(.ph-h1, .hero-title, .pj-h1, .c12-title, .hero-intro, .ph-sub, .hero-sub) {
  position: relative;
  z-index: 8;
  max-width: min(23ch, calc(100vw - 40px));
}

body[data-page] :is(.ph, .dxb-hero, .pj-hero, .c12-hero, .hero) :is(.ph-h1, .hero-title, .pj-h1, .c12-title) {
  color: #f4f0e8 !important;
  text-shadow: 0 2px 28px rgba(0, 0, 0, .48), 0 1px 3px rgba(0, 0, 0, .7) !important;
}

body[data-page] :is(.ph, .dxb-hero, .pj-hero, .c12-hero, .hero) :is(.ph-sub, .hero-sub, .hero-intro, .kicker, .eyebrow) {
  color: rgba(247, 244, 237, .92) !important;
  text-shadow: 0 2px 22px rgba(0, 0, 0, .68) !important;
}

/* Portfolio hero — its eyebrow crosses the brightest part of the sky.
   Protect only these few letters; the photograph remains untouched. */
body[data-page="portfolio"] .ph.v6-inline-portfolio-1 .v6-inline-portfolio-4 {
  display: inline-flex !important;
  width: auto !important;
  max-width: max-content !important;
  padding: .55rem .8rem .5rem !important;
  color: #fffdf8 !important;
  -webkit-text-fill-color: #fffdf8 !important;
  background: linear-gradient(90deg, rgba(5, 8, 10, .72), rgba(5, 8, 10, .42)) !important;
  border-left: 1px solid rgba(224, 205, 164, .9) !important;
  box-shadow: 0 12px 34px rgba(0, 0, 0, .18) !important;
  text-shadow: 0 2px 12px rgba(0, 0, 0, .92) !important;
  backdrop-filter: blur(8px) saturate(110%) !important;
  -webkit-backdrop-filter: blur(8px) saturate(110%) !important;
}

body[data-page="portfolio"] .ph.v6-inline-portfolio-1 .ph-sub {
  width: min(38rem, 100%) !important;
  max-width: min(38rem, 100%) !important;
  padding: .85rem 1rem .95rem !important;
  color: #fffdf8 !important;
  -webkit-text-fill-color: #fffdf8 !important;
  background: linear-gradient(90deg, rgba(5, 8, 10, .7), rgba(5, 8, 10, .3)) !important;
  border-left: 1px solid rgba(224, 205, 164, .78) !important;
  text-shadow: 0 2px 14px rgba(0, 0, 0, .9) !important;
  backdrop-filter: blur(7px) saturate(108%) !important;
  -webkit-backdrop-filter: blur(7px) saturate(108%) !important;
}

/* Portfolio — the Cap-Ferrat copy is placed on a deliberately dark local
   reserve inside an otherwise light section. Keep this exception local so
   the Carrara typography remains readable without dimming the photograph. */
body[data-page="portfolio"] .v6-inline-portfolio-85 :is(p, h3, span, em) {
  color: #f4f1ea !important;
  -webkit-text-fill-color: #f4f1ea !important;
  text-shadow: 0 2px 22px rgba(0, 0, 0, .78) !important;
}

/* Dubai chapters use a twelve-column ceremonial grid. Intrinsic image width
   must not force its narrow portrait columns outside the viewport. */
body[data-page="dubai-bureaux"] .dxb-ch .split > *,
body[data-page="dubai-bureaux"] .dxb-media {
  min-width: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}

body[data-page="dubai-bureaux"] .dxb-cap {
  max-width: 100% !important;
  white-space: normal !important;
  overflow-wrap: break-word !important;
}

@media (min-width: 980px) {
  body[data-page="dubai-bureaux"] .dxb-ch .split > :first-child:not(.dxb-media) {
    grid-column: 1 / span 5 !important;
  }

  body[data-page="dubai-bureaux"] .dxb-ch .split > :last-child.dxb-media {
    grid-column: 7 / -1 !important;
  }

  body[data-page="dubai-bureaux"] .dxb-ch .split > :first-child.dxb-media {
    grid-column: 1 / span 7 !important;
  }

  body[data-page="dubai-bureaux"] .dxb-ch .split > :last-child:not(.dxb-media) {
    grid-column: 8 / -1 !important;
  }
}

/* Remove purely ornamental rails that were visibly crossing copy. */
body[data-page] :is(.cv90-frame, .cv90-progress, .cv90-scroll-cue) {
  display: none !important;
}

/* Prevent artificial black rooms while retaining the cinematic scene itself. */
/* Le rail C12 possède sa hauteur narrative et son sticky ; ne pas les aplatir. */
body.cv3-witness .cv3-room:not(.cv3-hero-stage):not(.cine):not(.c12p--ongoing) {
  min-height: 0 !important;
  padding-block: clamp(76px, 8vw, 132px) !important;
}

body.cv3-witness .cine {
  min-height: clamp(620px, 78svh, 900px) !important;
}

/* The consent decision belongs to the document flow and therefore covers nothing. */
body[data-page] .hc-consent,
body[data-page] .hc-consent--branch {
  position: relative !important;
  inset: auto !important;
  z-index: 20 !important;
  width: 100% !important;
  max-width: none !important;
  min-height: 0 !important;
  max-height: none !important;
  margin: 0 !important;
  padding: 18px clamp(18px, 5vw, 72px) !important;
  transform: none !important;
  opacity: 1 !important;
  overflow: visible !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  gap: 10px 24px !important;
  background: #11110f !important;
  border: 0 !important;
  border-top: 1px solid rgba(235, 229, 216, .2) !important;
  box-shadow: none !important;
}

body[data-page] .hc-consent :is(.hc-consent__titre, .hc-consent__texte, a) {
  color: #f2efe8 !important;
  opacity: 1 !important;
}

body[data-page] .hc-consent__actions {
  align-self: center !important;
}

body[data-page="contact"] #aiw,
body[data-page^="projets-"] #aiw,
body[data-page="caravelli-project"] #aiw {
  display: none !important;
}

/* Contact — la sentence finale est sur Carrara clair. Le moteur atmosphérique
   ne doit jamais lui réinjecter la couleur claire réservée aux scènes sombres. */
body[data-page="contact"] .sig-note {
  box-sizing: border-box;
  padding: clamp(26px, 3vw, 44px) clamp(16px, 5vw, 80px);
  background: #f2efe9;
}

body[data-page="contact"] .sig-note :is(p, em) {
  color: #1b1b19 !important;
  opacity: 1 !important;
  text-shadow: none !important;
}

/* Institutionnel desktop — le premier écran 1440 × 900 doit présenter le
   titre souverain dans son intégralité, sans attendre un premier scroll. */
@media (min-width: 701px) {
  body[data-page="about"] .ph {
    height: calc(100svh - 108px) !important;
    min-height: calc(100svh - 108px) !important;
    padding-block: 0 !important;
    align-items: center !important;
  }

  body[data-page="about"] .ph > .container {
    height: auto !important;
    min-height: 0 !important;
    padding: clamp(42px, 5vh, 66px) 4vw clamp(30px, 4vh, 48px) 0 !important;
  }

  body[data-page="about"] .ph-h1 {
    font-size: var(--cv-typo-current-fs, clamp(70px, 5.7vw, 82px)) !important;
    line-height: var(--cv-typo-current-lh, .94) !important;
  }

  body[data-page="about"] .ph-sub {
    font-size: var(--cv-typo-current-fs, clamp(18px, 1.5vw, 22px)) !important;
    line-height: var(--cv-typo-current-lh, 1.48) !important;
  }
}

/* Douze chantiers — l'orchestrateur peut attribuer la classe narrative
   `cv3-chapter--obsidian` à une chambre dont la DA C12 reste Carrara. La
   matière et la couleur de lecture sont donc verrouillées ensemble. */
body.c12 {
  background: var(--c12-paper) !important;
  color: var(--c12-ink) !important;
}

/* The C12 narrative has deliberate Carrara breathing space between chapters.
   Keep the space, but never expose the orchestrator's obsidian canvas there. */
body.c12 main {
  background: var(--c12-paper) !important;
}

body.c12 :is(.c12__facts, .c12__chapter, .c12__gallery, .c12__delivery, .c12__back) {
  background: var(--c12-paper) !important;
  color: #151616 !important;
}

body.c12[data-page] :is(.c12__facts, .c12__chapter, .c12__gallery, .c12__delivery, .c12__back)
  :is(h2, h3, p, strong, a, figcaption) {
  color: #151616 !important;
  -webkit-text-fill-color: #151616 !important;
  text-shadow: none !important;
}

body.c12[data-page] :is(.c12__facts, .c12__chapter, .c12__gallery, .c12__delivery) > span,
body.c12[data-page] :is(.c12__facts, .c12__chapter, .c12__gallery, .c12__delivery) figcaption span {
  color: #625f59 !important;
  -webkit-text-fill-color: #625f59 !important;
}

body.c12[data-page] :is(.c12__chapter, .c12__gallery) h2 em,
body.c12[data-page] .c12__delivery strong {
  color: #795e34 !important;
  -webkit-text-fill-color: #795e34 !important;
}

body.c12 .c12__statement {
  background: #151616 !important;
  color: #f2f0eb !important;
}

body.c12 .c12__statement :is(p, em, span) {
  color: #f2f0eb !important;
  -webkit-text-fill-color: #f2f0eb !important;
  text-shadow: none !important;
}

/* Historical project chapters are physically Carrara rooms. The runtime may
   classify their narrative rhythm as `smoke`/`obsidian`; that class must not
   invert typography while the chapter background remains white. */
html body[data-page].cv3-family-project .pj-sec {
  background: #f7f5ef !important;
  color: #1c1b18 !important;
}

html body[data-page].cv3-family-project .pj-sec :is(
  h2, h3, p, li, blockquote, figcaption, .pj-sec-t, .body
) {
  color: #1c1b18 !important;
  -webkit-text-fill-color: #1c1b18 !important;
  text-shadow: none !important;
}

html body[data-page].cv3-family-project .pj-sec .pj-sec-n {
  color: #6a6257 !important;
  -webkit-text-fill-color: #6a6257 !important;
}

html body[data-page].cv3-family-project .pj-sec .pj-sec-t em {
  color: #4d3b2a !important;
  -webkit-text-fill-color: #4d3b2a !important;
}

/* The five legacy case studies end with a light previous/next ribbon. Runtime
   chapter labels must not turn those navigation links Carrara-on-Carrara. */
html body:is(
  [data-page="projets-metz"],
  [data-page="projets-neuilly"],
  [data-page="projets-reims"],
  [data-page="projets-saint-cloud"],
  [data-page="projets-tuscany"]
) main > section:last-child:not(.pj-sec) {
  background: #f7f5ef !important;
  color: #1c1b18 !important;
}

html body:is(
  [data-page="projets-metz"],
  [data-page="projets-neuilly"],
  [data-page="projets-reims"],
  [data-page="projets-saint-cloud"],
  [data-page="projets-tuscany"]
) main > section:last-child:not(.pj-sec) a {
  color: #1c1b18 !important;
  -webkit-text-fill-color: #1c1b18 !important;
  text-shadow: none !important;
}

html body:is(
  [data-page="projets-metz"],
  [data-page="projets-neuilly"],
  [data-page="projets-reims"],
  [data-page="projets-saint-cloud"],
  [data-page="projets-tuscany"]
) main > section:not(.pj-sec):not(.ph-full) > .container > a {
  color: #1c1b18 !important;
  -webkit-text-fill-color: #1c1b18 !important;
  text-shadow: none !important;
}

/* Footer is a real final scene, never a clipped caption strip. */
body[data-page] footer,
body[data-page] .ft {
  position: relative;
  z-index: 10;
  min-height: 0 !important;
  overflow: visible !important;
}

@media (max-width: 700px) {
  body[data-page] {
    overflow-x: hidden !important;
  }

  body[data-page] main :is(p, li, blockquote, figcaption, .body, .lead) {
    font-size: var(--cv-typo-current-fs, max(15px, 1rem)) !important;
    line-height: var(--cv-typo-current-lh, 1.58) !important;
    overflow-wrap: break-word;
  }

  body[data-page] main :is(h1, .ph-h1, .pj-h1, .c12-title, .hero-title) {
    max-width: 100% !important;
    font-size: var(--cv-typo-current-fs, clamp(42px, 13vw, 68px)) !important;
    line-height: var(--cv-typo-current-lh, .96) !important;
    overflow-wrap: normal !important;
    hyphens: none !important;
    overflow: visible !important;
  }

  body[data-page] main :is(h2, .h2, .display) {
    max-width: 100% !important;
    font-size: var(--cv-typo-current-fs, clamp(34px, 10vw, 56px)) !important;
    line-height: var(--cv-typo-current-lh, 1) !important;
  }

  body[data-page] :is(button, .btn, input, textarea, select, .ncta) {
    min-height: 44px !important;
  }

  body[data-page] main form :is(label, legend) {
    font-size: var(--cv-typo-current-fs, 13px) !important;
    line-height: var(--cv-typo-current-lh, 1.4) !important;
  }

  body[data-page] main :is(button, .btn) {
    font-size: var(--cv-typo-current-fs, 11px) !important;
    line-height: var(--cv-typo-current-lh, 1.25) !important;
  }

  body[data-page] :is(.container, .wrap, .ph .container, .dxb-hero .container) {
    width: min(calc(100% - 32px), 1160px) !important;
    max-width: calc(100% - 32px) !important;
    margin-inline: auto !important;
    box-sizing: border-box !important;
  }

  body[data-page] main :is(.split, .split--top, .form-grid) {
    grid-template-columns: minmax(0, 1fr) !important;
    width: 100% !important;
  }

  body[data-page] .ph > .container,
  body[data-page] .ph .container {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    justify-content: center !important;
    padding-inline: 0 !important;
  }

  body[data-page] .ph :is(.kicker, .ph-h1, .ph-sub) {
    width: 100% !important;
    max-width: 100% !important;
    margin-inline: 0 !important;
  }

  body[data-page] main :is(.split, .split--top, .form-grid) > *,
  body[data-page] main :is(h1, h2, h3, h4, p, li, blockquote, figcaption) {
    min-width: 0 !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  body.cv3-witness .cv3-room:not(.cv3-hero-stage):not(.cine) {
    padding-block: clamp(58px, 16vw, 88px) !important;
  }

  body[data-page] .hc-consent,
  body[data-page] .hc-consent--branch {
    grid-template-columns: 1fr !important;
    padding: 16px !important;
  }

  body[data-page] .hc-consent__actions {
    width: 100% !important;
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
  }

  body[data-page] .hc-consent__btn {
    width: 100% !important;
    min-width: 0 !important;
    white-space: normal !important;
  }

  body[data-page] :is(.rail, .caravelli-maison-rail) {
    display: none !important;
  }

  /* Contact — le hero est un flex aligné à droite sur grand écran. Sur mobile,
     une largeur en pourcentage du flex-item se résolvait sur sa largeur
     intrinsèque et réduisait le texte à ~187 px. On étire uniquement ce
     contenu, sans modifier la scène ni poser de voile global. */
  body[data-page="contact"] .ph > .container {
    flex: 0 0 calc(100% - 32px) !important;
    width: calc(100% - 32px) !important;
    min-width: 0 !important;
    max-width: calc(100% - 32px) !important;
    margin-inline: 16px !important;
  }

  body[data-page="contact"] .ph :is(.kicker, .ph-h1, .ph-sub) {
    width: 100% !important;
    max-width: 100% !important;
  }

  body[data-page="contact"] .ph-h1 {
    font-size: var(--cv-typo-current-fs, clamp(42px, 12vw, 54px)) !important;
    letter-spacing: var(--cv-typo-current-ls, -.035em) !important;
  }

  body[data-page="contact"] .ph-h1 > span,
  body[data-page="contact"] .ph-h1 > em {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  body[data-page="contact"] .ph-h1 > em {
    font-size: var(--cv-typo-current-fs, .92em) !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  body[data-page] *,
  body[data-page] *::before,
  body[data-page] *::after {
    scroll-behavior: auto !important;
  }
}