/* CARAVELLI — CONTINUUM MATERIAE
   Identité conceptuelle v1.0, tokens, seuil d'accueil et coutures MPA.
   Le système reste progressif : aucune règle d'introduction n'agit sans
   `html.cm-intro-active`; aucun asset n'est indispensable au contenu. */

/* Namespace public : `cm-*` / `data-cm-*` uniquement. Les valeurs sont la
   transcription exacte du pack 20260823 ; les alias historiques `--cv-*`
   ne sont volontairement pas redéfinis afin d'éviter les collisions. */
:where(.cm-skin, [data-cm-skin="continuum"], .cm-surface) {
  --cm-nero-lacca: #050506;
  --cm-blu-ossidiano: #09121a;
  --cm-verde-palazzo: #071a13;
  --cm-vinaccia-ombra: #250a12;
  --cm-noce-nero: #1e1714;
  --cm-pietra-fumo: #77736e;
  --cm-carrara: #eeeae3;
  --cm-bianco-luce: #f8f7f3;
  --cm-ease: cubic-bezier(.20, .72, .12, 1);
  --cm-ease-standard: cubic-bezier(.3, 0, .18, 1);
  --cm-space: .5rem;
  --cm-gutter: clamp(1.25rem, 4vw, 5rem);
  --cm-display: "Bodoni Moda", Didot, "Bodoni 72", Georgia, serif;
  --cm-interface: Inter, "Helvetica Neue", Arial, sans-serif;
  --cm-reading: "Cormorant Garamond", Georgia, serif;
  --cm-focus: var(--cm-bianco-luce);
  color-scheme: dark;
}

.cm-surface {
  box-sizing: border-box;
  color: var(--cm-carrara);
  background-color: var(--cm-nero-lacca);
  font-family: var(--cv-typo-current-ff, var(--cm-interface));
}

.cm-surface *,
.cm-surface *::before,
.cm-surface *::after { box-sizing: inherit; }

.cm-surface :where(h1, h2, h3, blockquote, .cm-display) {
  font-family: var(--cv-typo-current-ff, var(--cm-display));
  font-weight: var(--cv-typo-current-fw, 400);
  text-wrap: balance;
}

.cm-surface :where(a, button, input, textarea, select):focus-visible,
[data-cm-skin="continuum"] :where(.cm-action, .cm-brand):focus-visible {
  outline: 2px solid var(--cm-focus);
  outline-offset: .35rem;
}

.cm-grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: clamp(.75rem, 1.5vw, 1.5rem);
  inline-size: min(100% - (2 * var(--cm-gutter)), 100rem);
  margin-inline: auto;
}

.cm-chapter {
  position: relative;
  isolation: isolate;
  min-block-size: 100svh;
  overflow: clip;
  padding: clamp(5rem, 11vw, 11rem) var(--cm-gutter);
  background-color: var(--cm-nero-lacca);
  content-visibility: auto;
  contain-intrinsic-block-size: 100svh;
}

.cm-meta {
  font: var(--cv-typo-current-font, 500 clamp(.625rem, .7vw, .75rem)/1.4 var(--cm-interface));
  letter-spacing: var(--cv-typo-current-ls, min(.18em, .18rem));
  text-transform: var(--cv-typo-current-tt, uppercase);
}

/* Les composants de marque utilisent les SVG conceptuels tels que livrés.
   Aucun path n'est redessiné ici. Les classes permettent leur remplacement
   futur sans refactor du DOM. */
.cm-brand {
  --cm-brand-clearspace: clamp(1rem, 4cqi, 3rem);
  display: inline-grid;
  place-items: center;
  gap: clamp(.75rem, 2cqi, 1.5rem);
  max-inline-size: 100%;
  padding: var(--cm-brand-clearspace);
  color: var(--cm-carrara);
  container-type: inline-size;
}

.cm-brand__signum,
.cm-signum {
  display: block;
  inline-size: var(--cm-signum-size, clamp(4.5rem, 11vw, 10rem));
  block-size: auto;
  aspect-ratio: 5 / 6;
  object-fit: contain;
}

.cm-signum {
  background: var(--cm-signum-image, url("/assets/continuum-materiae/brand/cv_signum_editorial_inverse.svg")) center / contain no-repeat;
}

.cm-signum[data-cm-variant="monumental"] {
  --cm-signum-size: clamp(20rem, 34vw, 36rem);
  --cm-signum-image: url("/assets/continuum-materiae/brand/cv_signum_monumental_inverse.svg");
}

.cm-signum[data-cm-variant="micro"] {
  --cm-signum-size: clamp(1.75rem, 3vw, 2.75rem);
  --cm-signum-image: url("/assets/continuum-materiae/brand/cv_signum_micro_inverse.svg");
}

.cm-signum[data-cm-tone="light"] {
  --cm-signum-image: url("/assets/continuum-materiae/brand/cv_signum_editorial.svg");
}

.cm-signum[data-cm-variant="monumental"][data-cm-tone="light"] {
  --cm-signum-image: url("/assets/continuum-materiae/brand/cv_signum_monumental.svg");
}

.cm-signum[data-cm-variant="micro"][data-cm-tone="light"] {
  --cm-signum-image: url("/assets/continuum-materiae/brand/cv_signum_micro.svg");
}

.cm-brand__wordmark,
.cm-wordmark {
  display: block;
  inline-size: min(100%, var(--cm-wordmark-size, 42rem));
  block-size: auto;
  aspect-ratio: 110 / 38;
  object-fit: contain;
}

.cm-wordmark {
  background:
    url("/assets/continuum-materiae/brand/cv_wordmark_lockup.svg") center / contain no-repeat,
    url("/assets/continuum-materiae/brand/cv_wordmark_lockup_fallback_2400.png") center / contain no-repeat;
}

/* Un fichier manquant laisse toujours une couleur et la composition lisible.
   Ces textures sont les placeholders procéduraux identifiés comme tels dans
   le manifeste ; elles ne constituent aucune preuve de chantier. */
.cm-material {
  --cm-material-image: none;
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background-color: var(--cm-material-color, var(--cm-nero-lacca));
  background-image: var(--cm-material-image);
  background-position: center;
  background-size: cover;
}

.cm-material[data-cm-material="nero-lacca"] {
  --cm-material-color: var(--cm-nero-lacca);
  --cm-material-image: url("/assets/continuum-materiae/materials/cv_material_nero_lacca_fallback_2048.jpg");
}

.cm-material[data-cm-material="blu-ossidiano"] {
  --cm-material-color: var(--cm-blu-ossidiano);
  --cm-material-image: url("/assets/continuum-materiae/materials/cv_material_blu_ossidiano_fallback_2048.jpg");
}

.cm-material[data-cm-material="verde-palazzo"] {
  --cm-material-color: var(--cm-verde-palazzo);
  --cm-material-image: url("/assets/continuum-materiae/materials/cv_material_verde_biblioteca_fallback_2048.jpg");
}

.cm-material[data-cm-material="vinaccia-ombra"] {
  --cm-material-color: var(--cm-vinaccia-ombra);
  --cm-material-image: url("/assets/continuum-materiae/materials/cv_material_vinaccia_ombra_fallback_2048.jpg");
}

.cm-material[data-cm-material="noce-nero"] {
  --cm-material-color: var(--cm-noce-nero);
  --cm-material-image: url("/assets/continuum-materiae/materials/cv_material_noce_nero_fallback_2048.jpg");
}

.cm-material[data-cm-material="pietra-fumo"] {
  --cm-material-color: var(--cm-pietra-fumo);
  --cm-material-image: url("/assets/continuum-materiae/materials/cv_material_pietra_fumo_fallback_2048.jpg");
}

.cm-material[data-cm-material="carrara"] {
  --cm-material-color: var(--cm-carrara);
  --cm-material-image: url("/assets/continuum-materiae/materials/cv_material_carrara_fallback_2048.jpg");
  color: var(--cm-nero-lacca);
}

.cm-material[data-cm-material="avorio-gesso"] {
  --cm-material-color: var(--cm-bianco-luce);
  --cm-material-image: url("/assets/continuum-materiae/materials/cv_material_avorio_gesso_fallback_2048.jpg");
  color: var(--cm-nero-lacca);
}

.cm-material::after {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(115deg, rgb(5 5 6 / .72), transparent 52%, rgb(5 5 6 / .48));
}

@view-transition { navigation: auto; }

.cm-threshold {
  position: fixed;
  z-index: 2147483400;
  inset: 0;
  overflow: hidden;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  background: #050506;
  contain: strict;
}

.cm-threshold__material,
.cm-threshold__relief,
.cm-threshold__light {
  position: absolute;
  inset: -4%;
  display: block;
}

.cm-threshold__material {
  background:
    linear-gradient(108deg, rgb(5 5 6 / .9), rgb(30 23 20 / .4) 46%, rgb(7 26 19 / .24) 69%, rgb(5 5 6 / .94));
  filter: contrast(1.08) saturate(.56) brightness(.61);
  transform: scale(1.035);
}

.cm-threshold__relief {
  inset: -9%;
  background:
    repeating-linear-gradient(112deg, transparent 0 3.5rem, rgb(238 234 227 / .11) 3.55rem, transparent 3.62rem),
    radial-gradient(ellipse at 50% 48%, rgb(248 247 243 / .1), transparent 56%);
  opacity: .16;
  filter: brightness(.88) saturate(.42);
  mix-blend-mode: screen;
}

.cm-threshold__light {
  inset: 0;
  background:
    linear-gradient(102deg, transparent 24%, rgb(248 247 243 / .12) 48%, transparent 68%),
    radial-gradient(ellipse at 46% 48%, rgb(238 234 227 / .09), transparent 58%);
  mix-blend-mode: screen;
}

html.cm-from-villa body[data-page="folco"] .cm-threshold,
html.cm-from-folco body[data-terrae-production] .cm-threshold,
html.cm-from-terrae:not(.cm-from-luxury) body[data-page="index"] .cm-threshold {
  visibility: visible;
  opacity: 1;
}

html.cm-from-villa body[data-page="folco"] .cm-threshold {
  background: #050506;
  animation: cmVillaStoneArrival 1180ms cubic-bezier(.3, 0, .18, 1) both;
}

html.cm-from-villa body[data-page="folco"] .cm-threshold__material {
  background:
    linear-gradient(92deg, rgb(5 5 6 / .78), rgb(119 115 110 / .18) 52%, rgb(5 5 6 / .88)),
    url("/assets/continuum-materiae/materials/cv_material_pietra_fumo_fallback_2048.jpg") center / cover;
  filter: grayscale(.78) sepia(.08) contrast(1.15) brightness(.7);
}

html.cm-from-villa body[data-page="folco"] .cm-threshold__relief { opacity: .08; }

html.cm-from-folco body[data-terrae-production] .cm-threshold {
  animation: cmEarthReliefArrival 1260ms cubic-bezier(.22, .61, .24, 1) both;
}

html.cm-from-folco body[data-terrae-production] .cm-threshold__material {
  background:
    linear-gradient(108deg, rgb(5 5 6 / .9), rgb(30 23 20 / .4) 46%, rgb(7 26 19 / .24) 69%, rgb(5 5 6 / .94)),
    url("/assets/continuum-materiae/materials/cv_material_noce_nero_fallback_2048.jpg") center / cover;
  animation: cmEarthBreath 1260ms cubic-bezier(.2, .65, .25, 1) both;
}

html.cm-from-terrae:not(.cm-from-luxury) body[data-page="index"] .cm-threshold {
  background:
    radial-gradient(76% 84% at 72% 42%,rgb(207 224 226 / .24),transparent 70%),
    #11181b;
  animation: cmMaisonApertureArrival 1120ms cubic-bezier(.25, .7, .18, 1) both;
}

html.cm-from-terrae:not(.cm-from-luxury) body[data-page="index"] .cm-threshold__material {
  background:
    linear-gradient(100deg,rgb(17 24 27 / .92),rgb(207 224 226 / .18) 50%,rgb(17 24 27 / .78)),
    url("/assets/palette02/calcite_froide_1024.webp") 72% 46% / min(72vw,1024px) auto no-repeat,
    url("/assets/palette02/albatre_sideral_1024.webp") center / min(86vw,1280px) auto no-repeat,
    #11181b;
  filter:grayscale(.18) saturate(.58) contrast(1.08) brightness(.78);
}

html.cm-from-terrae:not(.cm-from-luxury) body[data-page="index"] .cm-threshold__relief{
  background:
    url("/assets/palette02/brume_albatre_01.png") 72% 42% / min(76vw,1080px) auto no-repeat,
    url("/assets/palette02/vein_reveal_mask.png") 68% 46% / min(70vw,1024px) auto no-repeat;
  opacity:.28;
  mix-blend-mode:screen;
}

html.cm-from-terrae:not(.cm-from-luxury) body[data-page="index"] .cm-threshold__light{
  background:url("/assets/palette02/light_sweep_albatre_cold.png") 70% 44% / min(78vw,1120px) auto no-repeat;
  opacity:.74;
}

.folco-prologue--finishing .folco-prologue__terrae-bridge {
  animation: cmFolcoEarthBridge 1240ms cubic-bezier(.22, .61, .24, 1) both;
}

.folco-prologue--finishing .folco-prologue__terrae-matter {
  animation: cmEarthBreath 1240ms cubic-bezier(.2, .65, .25, 1) both;
}

body[data-continuum-exit="home"] .terrae-experience__veil {
  opacity: 1;
  transform: none;
  transition: opacity 920ms cubic-bezier(.3, 0, .2, 1);
}

body[data-continuum-exit="home"] .terrae-experience__veil-material {
  opacity: .92;
  background:
    linear-gradient(100deg,rgb(17 24 27 / .88),rgb(207 224 226 / .20) 50%,rgb(17 24 27 / .76)),
    url("/assets/palette02/light_sweep_albatre_cold.png") 70% 44% / min(78vw,1120px) auto no-repeat,
    url("/assets/palette02/calcite_froide_1024.webp") 72% 46% / min(72vw,1024px) auto no-repeat,
    #11181b;
}

::view-transition-group(root) { animation-duration: 920ms; }
html.cm-to-folco::view-transition-old(root) { animation: cmOldVillaCut 720ms cubic-bezier(.4, 0, .2, 1) both; }
html.cm-from-villa::view-transition-new(root) { animation: cmNewFolcoCut 920ms cubic-bezier(.18, .75, .2, 1) both; }
html.cm-to-terrae::view-transition-old(root) { animation: cmOldEarthPress 840ms cubic-bezier(.35, 0, .2, 1) both; }
html.cm-from-folco::view-transition-new(root) { animation: cmNewEarthPress 980ms cubic-bezier(.2, .68, .2, 1) both; }
html.cm-to-home::view-transition-old(root) { animation: cmOldMaisonLine 820ms cubic-bezier(.35, 0, .2, 1) both; }
html.cm-from-terrae:not(.cm-from-luxury)::view-transition-new(root) {
  animation:cmNewMaisonLine 1080ms cubic-bezier(.18,.75,.2,1) both;
  -webkit-mask-image:url("/assets/palette02/vein_reveal_mask_alpha.png"),linear-gradient(#000,#000);
  -webkit-mask-position:68% 44%,center;
  -webkit-mask-repeat:no-repeat;
  -webkit-mask-composite:source-in;
  mask-image:url("/assets/palette02/vein_reveal_mask_alpha.png"),linear-gradient(#000,#000);
  mask-position:68% 44%,center;
  mask-repeat:no-repeat;
  mask-composite:intersect;
}

@keyframes cmVillaStoneArrival {
  0%, 22% { opacity: 1; clip-path: inset(0); filter: brightness(.86); }
  54% { opacity: .94; clip-path: inset(0 0 0 0); filter: brightness(1.02); }
  100% { opacity: 0; clip-path: inset(0 0 100% 0); filter: brightness(.82); }
}

@keyframes cmEarthReliefArrival {
  0%, 20% {
    opacity: 1;
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
  }
  72% {
    opacity: .82;
    clip-path: polygon(0 24%, 18% 20%, 37% 27%, 55% 18%, 76% 25%, 100% 21%, 100% 79%, 76% 84%, 55% 76%, 37% 83%, 18% 77%, 0 82%);
  }
  100% {
    opacity: 0;
    clip-path: polygon(0 49%, 18% 46%, 37% 51%, 55% 44%, 76% 50%, 100% 46%, 100% 54%, 76% 58%, 55% 52%, 37% 59%, 18% 54%, 0 57%);
  }
}

@keyframes cmMaisonApertureArrival {
  0%, 20% { opacity: 1; clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); }
  70% { opacity: .9; clip-path: polygon(48.8% 0, 51.2% 0, 54% 100%, 46% 100%); }
  100% { opacity: 0; clip-path: polygon(50% 0, 50% 0, 50% 100%, 50% 100%); }
}

@keyframes cmFolcoEarthBridge {
  0% { opacity: 0; clip-path: inset(44% 0 44% 0); filter: brightness(.72) contrast(1.16); }
  46% { opacity: .82; clip-path: inset(18% 0 18% 0); filter: brightness(.86) contrast(1.1); }
  100% { opacity: 1; clip-path: inset(0); filter: brightness(1) contrast(1); }
}

@keyframes cmEarthBreath {
  from { transform: scale(1.045); filter: contrast(1.14) saturate(.48) brightness(.5); }
  to { transform: scale(1.02); filter: contrast(1.08) saturate(.58) brightness(.61); }
}

@keyframes cmOldVillaCut { to { clip-path: inset(0 0 0 49.4%); filter: brightness(.76) contrast(1.12); } }
@keyframes cmNewFolcoCut { from { clip-path: inset(0 49.4% 0 0); filter: brightness(.76); } }
@keyframes cmOldEarthPress {
  to {
    clip-path: polygon(0 49%, 18% 46%, 37% 51%, 55% 44%, 76% 50%, 100% 46%, 100% 54%, 76% 58%, 55% 52%, 37% 59%, 18% 54%, 0 57%);
    filter: brightness(.62) contrast(1.18);
  }
}
@keyframes cmNewEarthPress {
  from {
    clip-path: polygon(0 49%, 18% 46%, 37% 51%, 55% 44%, 76% 50%, 100% 46%, 100% 54%, 76% 58%, 55% 52%, 37% 59%, 18% 54%, 0 57%);
    filter: brightness(.62) contrast(1.18);
  }
}
@keyframes cmOldMaisonLine { to { clip-path: inset(0 49.6%); filter: brightness(.74); } }
@keyframes cmNewMaisonLine{
  from{clip-path:inset(0 49.6%);filter:brightness(1.38) saturate(.28);-webkit-mask-size:38vmax 38vmax,100% 100%;mask-size:38vmax 38vmax,100% 100%}
  62%{clip-path:inset(0 12%);filter:brightness(1.08) saturate(.68)}
  to{clip-path:inset(0);filter:none;-webkit-mask-size:150vmax 150vmax,100% 100%;mask-size:150vmax 150vmax,100% 100%}
}

@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
  ::view-transition-group(root),
  ::view-transition-old(root),
  ::view-transition-new(root) { animation: none !important; }
  .cm-threshold { display: none !important; }
  .folco-prologue--finishing .folco-prologue__terrae-bridge,
  .folco-prologue--finishing .folco-prologue__terrae-matter {
    animation: none !important;
    transition: none !important;
  }
  body[data-continuum-exit="home"] .terrae-experience__veil { transition: none !important; }
}

/* ──────────────────────────────────────────────────────────────────────────
   SEUIL D'ACCUEIL 20260824
   Contrat DOM : `.cm-home-threshold__identity` contient uniquement les deux
   images de marque. Tout le contenu lisible et le CTA restent dans le DOM
   historique. Sans `cm-intro-active`, ces règles sont inertes.
   ─────────────────────────────────────────────────────────────────────── */
.cm-home-threshold__identity {
  display: none;
}

.cm-home-threshold__identity[hidden] {
  display: none !important;
}

/* Le seuil reste une scène de marque unique : aucun instrument flottant ne
   concurrence le CTA, sur téléphone comme sur grand écran. */
html.cm-intro-active:not(.oc-entree-passee) body[data-page="index"] :is(
  #oc-sound-toggle,
  .oc-sound-toggle,
  #cv-atmosphere-control,
  #aiw,
  #vg-btn
) {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

html.cm-intro-active:not(.oc-entree-passee) {
  --cm-intro-black: #050506;
  --cm-intro-ivory: #eeeae3;
  --cm-intro-white: #f8f7f3;
  --cm-intro-ease: cubic-bezier(.20, .72, .12, 1);
  color-scheme: dark;
  background: var(--cm-intro-black);
}

html.cm-intro-locked,
html.cm-intro-locked body {
  overflow: hidden !important;
  overscroll-behavior: none;
}

html.cm-intro-active:not(.oc-entree-passee) body[data-page="index"] #accueil {
  position: relative;
  isolation: isolate;
  min-block-size: 100svh;
  overflow: hidden;
  color: var(--cm-intro-ivory);
  background: var(--cm-intro-black) !important;
}

html.cm-intro-active:not(.oc-entree-passee) body[data-page="index"] #accueil::before,
html.cm-intro-active:not(.oc-entree-passee) body[data-page="index"] #accueil::after {
  content: "";
  position: absolute;
  inset: -4%;
  pointer-events: none;
}

/* Le poster matériel est un placeholder abstrait déclaré dans le Media Guard.
   Sa couleur de fond reste visible si le JPEG manque ou est non décodable. */
html.cm-intro-active:not(.oc-entree-passee) body[data-page="index"] #accueil::before {
  z-index: 0;
  opacity: 0;
  background-color: var(--cm-intro-black);
  background-image:
    linear-gradient(102deg, rgb(5 5 6 / .94), rgb(5 5 6 / .14) 54%, rgb(5 5 6 / .82)),
    url("/assets/continuum-materiae/materials/cv_material_carrara_fallback_2048.jpg");
  background-position: center;
  background-size: cover;
  filter: grayscale(.88) contrast(1.18) brightness(.46);
  transform: scale(1.035);
  transition: opacity 1.1s var(--cm-intro-ease), transform 3.2s var(--cm-intro-ease);
}

html.cm-intro-active:not(.oc-entree-passee) body[data-page="index"] #accueil::after {
  z-index: 1;
  opacity: 0;
  inset: 0;
  background:
    linear-gradient(105deg, transparent 22%, rgb(248 247 243 / .12) 47%, transparent 68%),
    radial-gradient(ellipse at 54% 45%, rgb(248 247 243 / .1), transparent 54%),
    linear-gradient(180deg, rgb(5 5 6 / .08), rgb(5 5 6 / .68));
  mix-blend-mode: screen;
  transition: opacity 1.1s var(--cm-intro-ease);
}

html.cm-intro-active:not(.oc-entree-passee) body[data-page="index"] :where(#k3h-scene, #oc-maison) {
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: none !important;
}

html.cm-intro-active:not(.oc-entree-passee) body[data-page="index"] .cm-home-threshold__identity {
  position: absolute;
  z-index: 7;
  inset: 50% auto auto 50%;
  display: grid;
  inline-size: min(82vw, 48rem);
  translate: -50% -51%;
  place-items: center;
  gap: clamp(1.4rem, 4vh, 3.25rem);
  padding: clamp(1.5rem, 4vw, 4rem);
  pointer-events: none;
}

html.cm-intro-active:not(.oc-entree-passee) body[data-page="index"] .cm-home-threshold__signum {
  display: block;
  inline-size: clamp(10rem, 22vw, 21rem);
  max-block-size: min(48svh, 31rem);
  block-size: auto;
  aspect-ratio: 5 / 6;
  object-fit: contain;
  opacity: 0;
  clip-path: inset(51% 0 49% 0);
  filter: drop-shadow(0 1.4rem 1.1rem rgb(0 0 0 / .62));
  transform: translate3d(0, .75rem, 0) scale(.985);
  transition:
    opacity .9s var(--cm-intro-ease),
    clip-path 1.2s var(--cm-intro-ease),
    transform 1.2s var(--cm-intro-ease);
}

html.cm-intro-active:not(.oc-entree-passee) body[data-page="index"] .cm-home-threshold__wordmark {
  display: block;
  inline-size: min(100%, 42rem);
  block-size: auto;
  aspect-ratio: 110 / 38;
  object-fit: contain;
  opacity: 0;
  transform: translate3d(0, .7rem, 0);
  transition: opacity .9s var(--cm-intro-ease), transform 1.1s var(--cm-intro-ease);
}

/* L'ancienne copie reste l'autorité sémantique et i18n. Elle est visuellement
   neutralisée pendant le seuil, sans retirer le CTA natif du document. */
html.cm-intro-active:not(.oc-entree-passee) body[data-page="index"] .oc-accueil-in {
  position: absolute !important;
  z-index: 9 !important;
  inset: auto 0 clamp(1.5rem, 4.6vh, 3.75rem) !important;
  display: block !important;
  inline-size: 100% !important;
  padding-inline: max(1.25rem, env(safe-area-inset-left)) max(1.25rem, env(safe-area-inset-right)) !important;
  opacity: 1 !important;
  transform: none !important;
  pointer-events: none !important;
}

html.cm-intro-active:not(.oc-entree-passee) body[data-page="index"] :where(.oc-accueil-nom, .oc-accueil-ligne) {
  position: absolute !important;
  inline-size: 1px !important;
  block-size: 1px !important;
  margin: -1px !important;
  padding: 0 !important;
  overflow: hidden !important;
  clip-path: inset(50%) !important;
  white-space: nowrap !important;
  opacity: 0 !important;
}

html.cm-intro-active:not(.oc-entree-passee) body[data-page="index"] .oc-accueil-entrer {
  box-sizing: border-box;
  display: inline-flex !important;
  align-items: center;
  min-inline-size: min(100%, 16rem);
  min-block-size: 3rem;
  margin: 0 !important;
  padding: .75rem 1rem !important;
  justify-content: center;
  gap: .75rem !important;
  border-block-end: 1px solid rgb(238 234 227 / .38);
  color: var(--cm-intro-ivory) !important;
  opacity: 0 !important;
  transform: translate3d(0, .65rem, 0) !important;
  pointer-events: none !important;
  transition:
    opacity .72s var(--cm-intro-ease),
    transform .9s var(--cm-intro-ease),
    border-color .28s ease !important;
}

html.cm-intro-active:not(.oc-entree-passee) body[data-page="index"] .oc-accueil-entrer__mot {
  color: inherit !important;
  font-family: Inter, "Helvetica Neue", Arial, sans-serif !important;
  font-size: clamp(.625rem, .7vw, .75rem) !important;
  letter-spacing: min(.18em, .18rem) !important;
  background: none !important;
}

html.cm-intro-active:not(.oc-entree-passee) body[data-page="index"] .oc-accueil-entrer__fil {
  inline-size: 2.25rem !important;
  block-size: 1px !important;
  background: currentColor !important;
  animation: none !important;
}

html.cm-intro-active:not(.oc-entree-passee) body[data-page="index"] .oc-accueil-entrer:is(:hover, :focus-visible) {
  border-color: var(--cm-intro-white) !important;
}

html.cm-intro-active:not(.oc-entree-passee) body[data-page="index"] .oc-accueil-entrer:focus-visible {
  outline: 2px solid var(--cm-intro-white) !important;
  outline-offset: .4rem !important;
}

html:is(
  .cm-intro-phase-material,
  .cm-intro-phase-signum,
  .cm-intro-phase-wordmark,
  .cm-intro-phase-gate,
  .cm-intro-phase-waiting,
  .cm-intro-phase-entering,
  .cm-intro-phase-fallback
).cm-intro-active:not(.oc-entree-passee) body[data-page="index"] #accueil::before {
  opacity: .92;
  transform: scale(1);
}

html:is(
  .cm-intro-phase-signum,
  .cm-intro-phase-wordmark,
  .cm-intro-phase-gate,
  .cm-intro-phase-waiting,
  .cm-intro-phase-entering,
  .cm-intro-phase-fallback
).cm-intro-active:not(.oc-entree-passee) body[data-page="index"] #accueil::after {
  opacity: 1;
}

html:is(
  .cm-intro-phase-signum,
  .cm-intro-phase-wordmark,
  .cm-intro-phase-gate,
  .cm-intro-phase-waiting,
  .cm-intro-phase-entering,
  .cm-intro-phase-fallback
).cm-intro-active:not(.oc-entree-passee) body[data-page="index"] .cm-home-threshold__signum {
  opacity: .88;
  clip-path: inset(0);
  transform: none;
}

html:is(
  .cm-intro-phase-wordmark,
  .cm-intro-phase-gate,
  .cm-intro-phase-waiting,
  .cm-intro-phase-entering,
  .cm-intro-phase-fallback
).cm-intro-active:not(.oc-entree-passee) body[data-page="index"] .cm-home-threshold__wordmark {
  opacity: 1;
  transform: none;
}

html:is(
  .cm-intro-phase-gate,
  .cm-intro-phase-waiting,
  .cm-intro-phase-fallback
).cm-intro-active:not(.oc-entree-passee) body[data-page="index"] .oc-accueil-entrer {
  opacity: 1 !important;
  transform: none !important;
  pointer-events: auto !important;
}

html.cm-intro-phase-entering.cm-intro-active:not(.oc-entree-passee) body[data-page="index"] .cm-home-threshold__identity,
html.cm-intro-phase-entering.cm-intro-active:not(.oc-entree-passee) body[data-page="index"] .oc-accueil-in,
html.cm-intro-phase-entering.cm-intro-active:not(.oc-entree-passee) body[data-page="index"] #accueil::before,
html.cm-intro-phase-entering.cm-intro-active:not(.oc-entree-passee) body[data-page="index"] #accueil::after {
  opacity: 0 !important;
  transition-duration: .55s !important;
}

/* Si l'un des deux SVG échoue, le texte i18n déjà validé devient le fallback
   visuel. Aucun verrou, canvas ou téléchargement supplémentaire n'est requis. */
html.cm-intro-brand-fallback.cm-intro-active:not(.oc-entree-passee) body[data-page="index"] .cm-home-threshold__identity {
  display: none;
}

html.cm-intro-brand-fallback.cm-intro-active:not(.oc-entree-passee) body[data-page="index"] .oc-accueil-in {
  inset: 50% 0 auto !important;
  inline-size: min(100%, 48rem) !important;
  margin-inline: auto !important;
  transform: translateY(-50%) !important;
}

html.cm-intro-brand-fallback.cm-intro-active:not(.oc-entree-passee) body[data-page="index"] :where(.oc-accueil-nom, .oc-accueil-ligne) {
  position: static !important;
  inline-size: auto !important;
  block-size: auto !important;
  margin-inline: auto !important;
  padding: 0 !important;
  overflow: visible !important;
  clip-path: none !important;
  white-space: normal !important;
  opacity: 1 !important;
  color: var(--cm-intro-ivory) !important;
  text-shadow: 0 .5rem 1.5rem rgb(0 0 0 / .5) !important;
}

html.cm-intro-brand-fallback.cm-intro-active:not(.oc-entree-passee) body[data-page="index"] .oc-accueil-nom {
  font: 400 clamp(3rem, 10vw, 7.5rem)/.9 "Bodoni Moda", Didot, Georgia, serif !important;
  letter-spacing: .08em !important;
}

html.cm-intro-brand-fallback.cm-intro-active:not(.oc-entree-passee) body[data-page="index"] .oc-accueil-ligne {
  max-inline-size: 34ch !important;
  margin-block-start: 1.5rem !important;
  font: italic 400 clamp(1rem, 1.8vw, 1.35rem)/1.5 "Bodoni Moda", Didot, Georgia, serif !important;
  text-decoration: none !important;
}

html.cm-intro-brand-fallback.cm-intro-active:not(.oc-entree-passee) body[data-page="index"] .oc-accueil-entrer {
  margin-block-start: clamp(1.5rem, 4vh, 2.5rem) !important;
}

/* Motion facultative pour les futurs chapitres : le contenu est visible par
   défaut et n'est masqué que lorsqu'un orchestrateur pose `cm-enhanced`. */
.cm-enhanced .cm-reveal {
  opacity: 0;
  transform: translate3d(0, clamp(.75rem, 2vw, 1.5rem), 0);
  transition: opacity .8s var(--cm-ease), transform 1s var(--cm-ease);
}

.cm-enhanced .cm-reveal:is(.is-visible, [data-cm-state="visible"]) {
  opacity: 1;
  transform: none;
}

@media (max-width: 64rem) {
  .cm-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); }
}

@media (max-width: 47.5rem) {
  .cm-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .cm-chapter { min-block-size: auto; padding-block: clamp(4.5rem, 18vw, 7rem); }
  .cm-signum[data-cm-variant="monumental"] { --cm-signum-size: min(74vw, 22rem); }

  html.cm-intro-active:not(.oc-entree-passee) body[data-page="index"] .cm-home-threshold__identity {
    inline-size: min(90vw, 28rem);
    translate: -50% -57%;
    gap: clamp(.85rem, 2.8vh, 1.4rem);
    padding: 1rem;
  }

  html.cm-intro-active:not(.oc-entree-passee) body[data-page="index"] .cm-home-threshold__signum {
    inline-size: clamp(7.5rem, 35vw, 12rem);
    max-block-size: 34svh;
  }

  html.cm-intro-active:not(.oc-entree-passee) body[data-page="index"] .cm-home-threshold__wordmark {
    inline-size: min(94%, 26rem);
  }

  html.cm-intro-active:not(.oc-entree-passee) body[data-page="index"] .oc-accueil-in {
    inset-block-end: max(1.25rem, env(safe-area-inset-bottom)) !important;
  }
}

@media (max-height: 42rem) and (orientation: landscape) {
  html.cm-intro-active:not(.oc-entree-passee) body[data-page="index"] .cm-home-threshold__identity {
    grid-template-columns: auto minmax(0, 1fr);
    inline-size: min(80vw, 50rem);
    translate: -50% -58%;
    gap: clamp(1rem, 4vw, 3rem);
  }

  html.cm-intro-active:not(.oc-entree-passee) body[data-page="index"] .cm-home-threshold__signum {
    inline-size: min(28svh, 9rem);
  }
}

@media (prefers-reduced-motion: reduce) {
  .cm-enhanced .cm-reveal,
  .cm-enhanced .cm-reveal:is(.is-visible, [data-cm-state="visible"]) {
    opacity: 1;
    transform: none;
    transition: none;
  }

  html.cm-intro-active:not(.oc-entree-passee) body[data-page="index"] #accueil::before,
  html.cm-intro-active:not(.oc-entree-passee) body[data-page="index"] #accueil::after,
  html.cm-intro-active:not(.oc-entree-passee) body[data-page="index"] .cm-home-threshold__signum,
  html.cm-intro-active:not(.oc-entree-passee) body[data-page="index"] .cm-home-threshold__wordmark,
  html.cm-intro-active:not(.oc-entree-passee) body[data-page="index"] .oc-accueil-entrer {
    transition: none !important;
  }

  html.cm-intro-active:not(.oc-entree-passee) body[data-page="index"] #accueil::before { opacity: .92; transform: none; }
  html.cm-intro-active:not(.oc-entree-passee) body[data-page="index"] #accueil::after { opacity: 1; }
  html.cm-intro-active:not(.oc-entree-passee) body[data-page="index"] .cm-home-threshold__signum {
    opacity: .88;
    clip-path: none;
    transform: none;
  }
  html.cm-intro-active:not(.oc-entree-passee) body[data-page="index"] .cm-home-threshold__wordmark {
    opacity: 1;
    transform: none;
  }
  html.cm-intro-active:not(.oc-entree-passee) body[data-page="index"] .oc-accueil-entrer {
    opacity: 1 !important;
    transform: none !important;
    pointer-events: auto !important;
  }
}

@media (forced-colors: active) {
  .cm-material { background-image: none; }
  .cm-home-threshold__identity { display: none !important; }

  html.cm-intro-active:not(.oc-entree-passee) body[data-page="index"] #accueil {
    color: CanvasText;
    background: Canvas !important;
    forced-color-adjust: auto;
  }

  html.cm-intro-active:not(.oc-entree-passee) body[data-page="index"] #accueil::before,
  html.cm-intro-active:not(.oc-entree-passee) body[data-page="index"] #accueil::after { display: none; }

  html.cm-intro-active:not(.oc-entree-passee) body[data-page="index"] .oc-accueil-in {
    inset: 50% 0 auto !important;
    inline-size: min(100%, 48rem) !important;
    margin-inline: auto !important;
    transform: translateY(-50%) !important;
  }

  html.cm-intro-active:not(.oc-entree-passee) body[data-page="index"] :where(.oc-accueil-nom, .oc-accueil-ligne) {
    position: static !important;
    inline-size: auto !important;
    block-size: auto !important;
    margin-inline: auto !important;
    padding: 0 !important;
    overflow: visible !important;
    clip-path: none !important;
    white-space: normal !important;
    opacity: 1 !important;
    color: CanvasText !important;
    text-shadow: none !important;
  }

  html.cm-intro-active:not(.oc-entree-passee) body[data-page="index"] .oc-accueil-nom {
    font-size: clamp(3rem, 10vw, 7.5rem) !important;
  }

  html.cm-intro-active:not(.oc-entree-passee) body[data-page="index"] .oc-accueil-ligne {
    max-inline-size: 34ch !important;
    margin-block-start: 1.5rem !important;
    text-decoration: none !important;
  }

  html.cm-intro-active:not(.oc-entree-passee) body[data-page="index"] .oc-accueil-entrer {
    color: LinkText !important;
    border-color: LinkText !important;
    margin-block-start: 1.5rem !important;
  }
}

@media print {
  .cm-home-threshold__identity,
  .cm-threshold { display: none !important; }
  .cm-chapter { min-block-size: auto; content-visibility: visible; }
}