:root {
  --cv-atmo-solar: .72;
  --cv-atmo-cloud: .22;
  --cv-atmo-rain: 0;
  --cv-atmo-snow: 0;
  --cv-atmo-wind: .14;
  --cv-atmo-humidity: .45;
  --cv-atmo-fog: .08;
  --cv-atmo-caustic: .18;
  --cv-atmo-carrara: .76;
  --cv-atmo-glass: .18;
  --cv-atmo-dust: .14;
  --cv-atmo-warmth: .04;
  --cv-atmo-radiance: .72;
  --cv-atmo-depth: .42;
  --cv-atmo-wind-x: 8px;
  --cv-atmo-wind-y: -2px;
  --cv-atmo-light-x: 68%;
  --cv-atmo-light-y: 22%;
  --cv-atmo-control-lift: 0px;
  --cv-atmo-ivory: 242 239 232;
  --cv-atmo-platinum: 190 196 201;
  --cv-atmo-obsidian: 5 7 9;
  --cv-atmo-calcite: 215 220 219;
  --cv-atmo-type-shadow-dark: 0 2px 20px rgb(0 0 0 / .42);
  --cv-atmo-type-shadow-light: 0 1px 0 rgb(255 255 255 / .62), 0 8px 22px rgb(18 22 26 / .12);
}

/* Aucun effet ne s'applique tant que le module n'a pas posé cette classe. */
body.cv-atmo-active:not([data-page="index"]):not([data-page="folco"]):not([data-page^="terrae"]):not([data-terrae-state]):not([data-terrae-production]):not([data-terrae-map-state]):not([data-terrae-root-state]):not([data-terrae-season-state]):not([data-terrae-territories-state]) {
  isolation: isolate;
  background-color: rgb(var(--cv-atmo-obsidian));
  background-image:
    radial-gradient(
      110% 78% at var(--cv-atmo-light-x) var(--cv-atmo-light-y),
      rgb(var(--cv-atmo-ivory) / calc(.08 * var(--cv-atmo-radiance))) 0,
      transparent 56%
    ),
    linear-gradient(
      145deg,
      rgb(var(--cv-atmo-calcite) / calc(.025 + .06 * var(--cv-atmo-cloud))),
      transparent 48%
    );
}

/* Le champ est inséré en premier dans body et demeure sous les enfants du site. */
#cv-atmosphere-field {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  contain: strict;
  opacity: 1;
  transition: opacity 900ms cubic-bezier(.22, 1, .36, 1);
}

/* Ne jamais réécrire le positionnement des instruments directs (navigation,
   consentement, Concierge, son). Le champ fixe est déjà dans un contexte
   négatif et la hiérarchie propre à chaque page reste l'autorité. */
#cv-atmosphere-field {
  z-index: -1;
}

body[data-page="index"] #cv-atmosphere-field,
body.cv-atmo-paused #cv-atmosphere-field {
  opacity: 0 !important;
}

/* Plan météo canonique commun au parcours entier. Typographie, commandes,
   œuvres et archives sont soustraites à chaque cadrage. */
#cv-atmosphere-editorial {
  position: fixed;
  inset: 0;
  z-index: 30;
  width: 100%;
  height: 100%;
  pointer-events: none;
  contain: strict;
}

body.cv-atmo-paused #cv-atmosphere-editorial,
body.oc-consent-open #cv-atmosphere-editorial,
body.cv-salon-open #cv-atmosphere-editorial,
body.nopen #cv-atmosphere-editorial,
body.menu-open #cv-atmosphere-editorial {
  visibility: hidden;
}

.cv-atmo-light,
.cv-atmo-fog,
.cv-atmo-dust,
.cv-atmo-glass {
  position: absolute;
  inset: -18%;
  pointer-events: none;
  will-change: transform, opacity;
}

.cv-atmo-light {
  background:
    radial-gradient(
      ellipse at var(--cv-atmo-light-x) var(--cv-atmo-light-y),
      rgb(var(--cv-atmo-ivory) / calc(.14 * var(--cv-atmo-radiance))) 0,
      rgb(var(--cv-atmo-platinum) / calc(.055 * var(--cv-atmo-caustic))) 24%,
      transparent 63%
    ),
    conic-gradient(
      from 112deg at 72% 18%,
      transparent 0 14%,
      rgb(var(--cv-atmo-platinum) / calc(.035 * var(--cv-atmo-caustic))) 18%,
      transparent 23% 100%
    );
  filter: blur(calc(16px + 12px * var(--cv-atmo-cloud)));
  opacity: calc(.48 + .28 * var(--cv-atmo-solar));
  transform: translate3d(calc(var(--cv-atmo-wind-x) * .2), calc(var(--cv-atmo-wind-y) * .2), 0);
  animation: cv-atmo-breathe 16s cubic-bezier(.4, 0, .2, 1) infinite alternate;
}

.cv-atmo-fog {
  inset: -24%;
  background:
    radial-gradient(ellipse at 17% 58%, rgb(var(--cv-atmo-calcite) / .16), transparent 54%),
    radial-gradient(ellipse at 83% 44%, rgb(var(--cv-atmo-platinum) / .12), transparent 52%);
  filter: blur(54px);
  opacity: calc(.02 + .33 * var(--cv-atmo-fog));
  transform: translate3d(var(--cv-atmo-wind-x), var(--cv-atmo-wind-y), 0) scale(1.05);
  animation: cv-atmo-drift calc(30s - 8s * var(--cv-atmo-wind)) ease-in-out infinite alternate;
}

.cv-atmo-dust {
  background-image:
    radial-gradient(circle at 9% 21%, rgb(var(--cv-atmo-ivory) / .42) 0 .55px, transparent .9px),
    radial-gradient(circle at 34% 78%, rgb(var(--cv-atmo-platinum) / .35) 0 .6px, transparent 1px),
    radial-gradient(circle at 67% 32%, rgb(var(--cv-atmo-ivory) / .34) 0 .45px, transparent .85px),
    radial-gradient(circle at 88% 67%, rgb(var(--cv-atmo-calcite) / .3) 0 .5px, transparent .9px);
  background-size: 97px 89px, 131px 113px, 149px 127px, 181px 157px;
  opacity: calc(.025 + .2 * var(--cv-atmo-dust));
  transform: translate3d(calc(var(--cv-atmo-wind-x) * .55), calc(var(--cv-atmo-wind-y) * .55), 0);
  animation: cv-atmo-advection calc(42s - 12s * var(--cv-atmo-wind)) linear infinite;
}

/* Final visual gate — weather must be felt through light, temperature and
   polish, not through a decorative field of white dots. The earlier dust layer
   read as artificial snow on Luxury, Pensée and Chantiers; it is therefore
   disabled globally. Rain/snow/fog remain expressed by fog, glass and surface
   shadows below the content. */
body.cv-atmo-active .cv-atmo-dust {
  opacity: 0 !important;
  background-image: none !important;
  animation: none !important;
}

body[data-cv-weather="rain"] .cv-atmo-glass,
body[data-cv-weather="storm"] .cv-atmo-glass {
  opacity: calc(.16 + .32 * var(--cv-atmo-rain));
  filter: blur(calc(1.5px + 2px * var(--cv-atmo-rain)));
}

body[data-cv-weather="snow"] .cv-atmo-fog {
  opacity: calc(.04 + .18 * var(--cv-atmo-snow));
  filter: blur(68px);
}

@media (max-width: 760px), (pointer: coarse) {
  body.cv-atmo-active .cv-atmo-dust {
    display: none !important;
  }
}

.cv-atmo-glass {
  inset: -8%;
  background:
    linear-gradient(
      104deg,
      transparent 0 28%,
      rgb(var(--cv-atmo-platinum) / calc(.018 + .075 * var(--cv-atmo-glass))) 35%,
      transparent 43% 68%,
      rgb(var(--cv-atmo-ivory) / calc(.012 + .045 * var(--cv-atmo-rain))) 72%,
      transparent 78%
    );
  filter: blur(calc(1px + 3px * var(--cv-atmo-rain)));
  opacity: calc(.18 + .42 * var(--cv-atmo-glass));
  transform: translate3d(0, calc(var(--cv-atmo-rain) * 4px), 0);
  animation: cv-atmo-glass-pass 24s cubic-bezier(.22, 1, .36, 1) infinite;
}

/*
 * Surface opt-in. L'inset-shadow et le background sont peints derrière le
 * contenu propre de l'élément : aucune couche ne peut passer devant le texte.
 */
[data-cv-atmosphere-surface] {
  --cv-atmo-surface-light: calc(.025 + .075 * var(--cv-atmo-radiance));
  background-color: rgb(var(--cv-atmo-obsidian) / .94);
  background-image:
    radial-gradient(
      95% 88% at var(--cv-atmo-light-x) var(--cv-atmo-light-y),
      rgb(var(--cv-atmo-ivory) / var(--cv-atmo-surface-light)),
      transparent 58%
    ),
    linear-gradient(
      118deg,
      rgb(var(--cv-atmo-platinum) / calc(.018 + .04 * var(--cv-atmo-glass))),
      transparent 36% 74%,
      rgb(var(--cv-atmo-calcite) / calc(.012 + .035 * var(--cv-atmo-humidity)))
    );
  box-shadow:
    inset 0 1px rgb(var(--cv-atmo-platinum) / calc(.05 + .11 * var(--cv-atmo-caustic))),
    inset 0 -42px 90px rgb(var(--cv-atmo-obsidian) / calc(.22 + .2 * var(--cv-atmo-depth)));
}

[data-cv-atmosphere-surface="carrara"] {
  color-scheme: light;
  background-color: rgb(var(--cv-atmo-ivory));
  background-image:
    radial-gradient(
      120% 90% at var(--cv-atmo-light-x) var(--cv-atmo-light-y),
      rgb(255 255 255 / calc(.16 + .16 * var(--cv-atmo-carrara))),
      transparent 58%
    ),
    linear-gradient(
      112deg,
      rgb(103 113 121 / calc(.025 + .025 * var(--cv-atmo-humidity))),
      transparent 28% 70%,
      rgb(130 138 145 / calc(.02 + .03 * var(--cv-atmo-cloud)))
    );
  box-shadow:
    inset 0 1px rgb(255 255 255 / .72),
    inset 0 -36px 90px rgb(54 61 66 / calc(.025 + .035 * var(--cv-atmo-cloud)));
}

/* Les ombres suivent la température et la profondeur sans jamais devenir un
   voile. Elles ne concernent que les titres éditoriaux, pas les paragraphes. */
body.cv-atmo-active [data-cv-atmosphere-surface="obsidian"] :is(h1, h2, .display, .display-title, .cv3-display),
body.cv-atmo-active .cv3-hero-stage :is(h1, h2, .display, .display-title, .cv3-display) {
  text-shadow: var(--cv-atmo-type-shadow-dark);
}

body.cv-atmo-active [data-cv-atmosphere-surface="carrara"] :is(h1, h2, .display, .display-title, .cv3-display) {
  text-shadow: var(--cv-atmo-type-shadow-light);
}

body[data-cv-thermal="hot"] [data-cv-atmosphere-surface] {
  --cv-atmo-ivory: 246 238 224;
  --cv-atmo-platinum: 207 192 170;
}

body[data-cv-thermal="cold"] [data-cv-atmosphere-surface] {
  --cv-atmo-ivory: 236 241 242;
  --cv-atmo-platinum: 179 192 201;
}

/* L'humidité est un poli du verre, jamais une pluie dessinée devant la page. */
body[data-cv-weather="rain"] [data-cv-atmosphere-surface],
body[data-cv-weather="storm"] [data-cv-atmosphere-surface],
body[data-cv-weather="fog"] [data-cv-atmosphere-surface] {
  box-shadow:
    inset 0 1px rgb(var(--cv-atmo-platinum) / calc(.12 + .12 * var(--cv-atmo-rain))),
    inset 0 0 80px rgb(var(--cv-atmo-calcite) / calc(.025 + .07 * var(--cv-atmo-humidity))),
    inset 0 -48px 100px rgb(var(--cv-atmo-obsidian) / calc(.22 + .18 * var(--cv-atmo-depth)));
}

body[data-cv-weather="snow"] [data-cv-atmosphere-surface] {
  box-shadow:
    inset 0 1px rgb(255 255 255 / calc(.24 + .18 * var(--cv-atmo-snow))),
    inset 0 0 92px rgb(var(--cv-atmo-calcite) / calc(.05 + .09 * var(--cv-atmo-snow))),
    inset 0 -44px 100px rgb(var(--cv-atmo-obsidian) / calc(.18 + .14 * var(--cv-atmo-depth)));
}

body[data-cv-phase="golden-hour"] [data-cv-atmosphere-surface],
body[data-cv-phase="sunset"] [data-cv-atmosphere-surface] {
  --cv-atmo-ivory: 245 235 220;
  --cv-atmo-platinum: 204 191 173;
}

body[data-cv-phase="night"] [data-cv-atmosphere-surface],
body[data-cv-phase="deep-night"] [data-cv-atmosphere-surface] {
  --cv-atmo-obsidian: 3 5 7;
  --cv-atmo-ivory: 234 229 219;
  --cv-atmo-platinum: 174 184 191;
}

/* Contrôle compact : aucun grand widget, aucune plaque météo. */
#cv-atmosphere-control {
  position: fixed;
  top: calc(var(--cv-atmo-safe-top, 82px) + env(safe-area-inset-top));
  right: max(16px, calc(env(safe-area-inset-right) + 16px));
  z-index: 620;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 44px;
  align-items: center;
  gap: 10px;
  width: min(320px, calc(100vw - 32px));
  min-height: 48px;
  padding: 5px 5px 5px 15px;
  color: rgb(239 236 229);
  background:
    linear-gradient(112deg, rgb(22 25 28 / .94), rgb(6 8 10 / .97)),
    rgb(6 8 10 / .96);
  border: 1px solid rgb(var(--cv-atmo-platinum) / .34);
  border-radius: 2px;
  box-shadow:
    0 18px 54px rgb(0 0 0 / .24),
    inset 0 1px rgb(255 255 255 / .055);
  backdrop-filter: blur(16px) saturate(.76);
  -webkit-backdrop-filter: blur(16px) saturate(.76);
  transform: translate3d(0, var(--cv-atmo-control-lift), 0);
  transition:
    width 600ms cubic-bezier(.22, 1, .36, 1),
    opacity 450ms ease,
    transform 600ms cubic-bezier(.22, 1, .36, 1),
    border-color 450ms ease;
}

body.cv-atmo-control-hidden #cv-atmosphere-control {
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
}

                                                                             
                                                                             
                                 
html:not(.oc-entree-en-cours):not(.oc-entree-passee) body[data-page="index"] #accueil #oc-maison {
  filter: contrast(1.10) saturate(.78) brightness(.95);
}

body[data-page="index"] #accueil #oc-maison::after {
  content: "";
  position: absolute;
  inset: -10%;
  z-index: 2;
  pointer-events: none;
  background:
    radial-gradient(58% 76% at var(--cv-atmo-light-x) var(--cv-atmo-light-y), rgb(255 252 244 / calc(.04 + .16 * var(--cv-atmo-radiance))), transparent 66%),
    linear-gradient(104deg, transparent 0 42%, rgb(var(--cv-atmo-platinum) / calc(.018 + .10 * var(--cv-atmo-glass))) 49%, transparent 57% 100%);
  mix-blend-mode: soft-light;
  opacity: calc(.22 + .42 * var(--cv-atmo-radiance));
}

html:not(.oc-entree-en-cours):not(.oc-entree-passee) body[data-page="index"]:is([data-cv-weather="rain"], [data-cv-weather="storm"]) #accueil #oc-maison,
html:not(.oc-entree-en-cours):not(.oc-entree-passee) body[data-page="index"][data-cv-weather="fog"] #accueil #oc-maison {
  filter: contrast(1.10) saturate(.72) brightness(.90);
}

html:not(.oc-entree-en-cours):not(.oc-entree-passee) body[data-page="index"][data-cv-weather="snow"] #accueil #oc-maison {
  filter: contrast(1.08) saturate(.66) brightness(.93);
}

body[data-page="index"][data-cv-weather="rain"] #accueil #oc-maison::after {
  background:
    repeating-linear-gradient(112deg, transparent 0 30px, rgb(91 111 121 / .24) 31px, rgb(228 234 234 / .14) 32px, transparent 33px 72px),
    repeating-linear-gradient(112deg, transparent 0 58px, rgb(247 248 245 / .21) 59px, rgb(105 123 131 / .14) 60px, transparent 61px 126px),
    linear-gradient(106deg, transparent 0 27%, rgb(222 229 231 / .17) 31%, transparent 37% 61%, rgb(248 246 240 / .12) 66%, transparent 71%),
    radial-gradient(72% 82% at var(--cv-atmo-light-x) var(--cv-atmo-light-y), rgb(207 217 220 / .18), transparent 68%);
  background-size: 156px 228px, 248px 344px, 100% 100%, 100% 100%;
  mix-blend-mode: multiply;
  opacity: calc(.36 + .42 * var(--cv-atmo-rain));
  animation: cv-atmo-rain-trace calc(3s - .9s * var(--cv-atmo-rain)) linear infinite;
}

/* Orage : même pluie physique, plus dense et irrégulière. L'éclair demeure
   une respiration de matière très lente, jamais un flash stroboscopique. */
body[data-page="index"][data-cv-weather="storm"] #accueil #oc-maison::after {
  background:
    repeating-linear-gradient(111deg, transparent 0 23px, rgb(67 85 96 / .31) 24px, rgb(227 235 237 / .18) 25px, transparent 27px 58px),
    repeating-linear-gradient(113deg, transparent 0 43px, rgb(244 247 246 / .23) 44px, rgb(92 108 117 / .19) 46px, transparent 48px 102px),
    radial-gradient(58% 68% at 74% 26%, rgb(226 234 235 / .22), transparent 72%),
    linear-gradient(118deg, rgb(18 27 34 / .18), transparent 56%);
  background-size: 132px 204px, 218px 318px, 100% 100%, 100% 100%;
  mix-blend-mode: multiply;
  opacity: calc(.44 + .38 * var(--cv-atmo-rain));
  animation:
    cv-atmo-storm-trace calc(2.2s - .5s * var(--cv-atmo-rain)) linear infinite,
    cv-atmo-storm-light 8.8s ease-in-out infinite;
}

/* Neige : la condition reste portée par la lumière et la matière. Les points
   blancs décoratifs sont supprimés pour éviter l'effet filtre. */
body[data-page="index"][data-cv-weather="snow"] #accueil #oc-maison::after {
  content:none;
  display:none;
  opacity:0;
  animation:none;
}

body[data-page="index"][data-cv-weather="fog"] #accueil #oc-maison::after,
body[data-page="index"][data-cv-weather="cloudy"] #accueil #oc-maison::after {
  background:
    radial-gradient(82% 76% at 34% 54%, rgb(226 230 229 / .28), transparent 69%),
    radial-gradient(66% 82% at 78% 42%, rgb(182 190 193 / .16), transparent 72%);
  mix-blend-mode: screen;
  opacity: calc(.28 + .46 * var(--cv-atmo-fog));
}

html:not(.oc-entree-en-cours):not(.oc-entree-passee) body[data-page="index"]:is([data-cv-phase="golden-hour"], [data-cv-phase="sunset"]) #accueil #oc-maison {
  filter: contrast(1.10) saturate(.93) brightness(.93) sepia(.04);
}

body[data-page="index"]:is([data-cv-phase="golden-hour"], [data-cv-phase="sunset"]) #accueil #oc-maison::after {
  background: radial-gradient(72% 86% at 78% 34%, rgb(205 173 116 / .24), transparent 67%);
  mix-blend-mode: soft-light;
  opacity: .72;
}

/* Chaleur sèche : un miroitement lent sur la sculpture seulement. Le texte
   reste hors de ce host et ne subit ni filtre ni déplacement. */
body[data-page="index"][data-cv-thermal="hot"][data-cv-weather="clear"] #accueil #oc-maison::after {
  background:
    radial-gradient(66% 82% at 76% 32%, rgb(220 190 137 / .24), transparent 67%),
    repeating-linear-gradient(92deg, transparent 0 42px, rgb(255 244 218 / .035) 44px, transparent 47px 96px);
  background-size: 100% 100%, 220px 100%;
  mix-blend-mode: soft-light;
  opacity: .74;
  animation: cv-atmo-heat-shimmer 7.5s ease-in-out infinite alternate;
}

html:not(.oc-entree-en-cours):not(.oc-entree-passee) body[data-page="index"]:is([data-cv-phase="night"], [data-cv-phase="deep-night"], [data-cv-phase="blue-hour"]) #accueil #oc-maison {
  filter: contrast(1.14) saturate(.68) brightness(.80);
}

body[data-page="index"]:is([data-cv-phase="night"], [data-cv-phase="deep-night"], [data-cv-phase="blue-hour"]) #accueil #oc-maison::after {
  background:
    radial-gradient(60% 82% at 72% 28%, rgb(184 197 205 / .18), transparent 68%),
    linear-gradient(115deg, rgb(12 18 23 / .18), transparent 58%);
  mix-blend-mode: multiply;
  opacity: .62;
}

#cv-atmosphere-control.cv-atmo-control--left {
  right: auto;
  left: max(16px, calc(env(safe-area-inset-left) + 16px));
}

.cv-atmo-place {
  min-width: 0;
}

.cv-atmo-place strong,
.cv-atmo-place span {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cv-atmo-place strong {
  color: rgb(244 241 234);
  font-size: var(--cv-typo-current-fs, 11px);
  font-weight: var(--cv-typo-current-fw, 520);
  line-height: var(--cv-typo-current-lh, 1.25);
  letter-spacing: var(--cv-typo-current-ls, .16em);
  text-transform: var(--cv-typo-current-tt, uppercase);
}

.cv-atmo-place span {
  margin-top: 3px;
  color: rgb(204 207 207);
  font-size: var(--cv-typo-current-fs, 10px);
  line-height: var(--cv-typo-current-lh, 1.3);
  letter-spacing: var(--cv-typo-current-ls, .08em);
}

.cv-atmo-sound {
  display: inline-grid;
  place-items: center;
  width: 44px;
  height: 44px;
  min-width: 44px;
  min-height: 44px;
  margin: 0;
  padding: 0;
  color: rgb(232 229 222);
  background: rgb(255 255 255 / .025);
  border: 1px solid rgb(var(--cv-atmo-platinum) / .28);
  border-radius: 1px;
  cursor: pointer;
  transition:
    color 280ms ease,
    background-color 280ms ease,
    border-color 280ms ease,
    transform 280ms cubic-bezier(.22, 1, .36, 1);
}

.cv-atmo-sound:hover,
.cv-atmo-sound:focus-visible,
.cv-atmo-sound[aria-pressed="true"] {
  color: rgb(255 253 247);
  background: rgb(var(--cv-atmo-platinum) / .11);
  border-color: rgb(var(--cv-atmo-platinum) / .56);
  outline: none;
}

.cv-atmo-sound:focus-visible {
  box-shadow: 0 0 0 3px rgb(7 9 11), 0 0 0 5px rgb(var(--cv-atmo-platinum) / .74);
}

.cv-atmo-sound svg {
  width: 19px;
  height: 19px;
  overflow: visible;
}

.cv-atmo-sound-wave {
  opacity: .34;
  transform-origin: center;
}

.cv-atmo-sound[aria-pressed="true"] .cv-atmo-sound-wave {
  opacity: .9;
  animation: cv-atmo-wave 1.8s ease-in-out infinite alternate;
}

#cv-atmosphere-control.cv-atmo-control--compact {
  width: min(248px, calc(100vw - 32px));
}

#cv-atmosphere-control.cv-atmo-control--display-only {
  grid-template-columns: minmax(0, 1fr);
  width: min(214px, calc(100vw - 32px));
  min-height: 46px;
  padding: 8px 14px;
}

#cv-atmosphere-control.cv-atmo-control--settled {
  grid-template-columns: 44px;
  width: 44px;
  padding: 1px;
}

#cv-atmosphere-control.cv-atmo-control--settled .cv-atmo-place {
  display: none;
}

#cv-atmosphere-control.cv-atmo-control--display-only.cv-atmo-control--settled {
  visibility: hidden;
  width: 1px;
  min-height: 1px;
  padding: 0;
  opacity: 0;
  pointer-events: none;
}

/* Home, après ENTRER seulement : l'instrument attend dans la gouttière.
   Le texte reste dans l'arbre accessible, le panneau n'est ouvert que par
   le bouton existant. Le portail K3 et le menu mobile ne sont pas ciblés. */
@media (min-width:761px) {
  html.oc-seuil-passe.oc-entree-passee body[data-page="index"] #cv-atmosphere-control {
    position:fixed;
    top:auto !important;
    left:auto !important;
    right:4px !important;
    bottom:112px !important;
    display:block !important;
    box-sizing:border-box;
    width:40px !important;
    min-width:40px !important;
    max-width:40px !important;
    min-height:40px !important;
    padding:0 !important;
    opacity:1 !important;
    visibility:visible !important;
    pointer-events:auto !important;
    transform:none !important;
  }
  html.oc-seuil-passe.oc-entree-passee body[data-page="index"] #cv-atmosphere-control .cv-atmo-instrument {
    display:block !important;
  }
  html.oc-seuil-passe.oc-entree-passee body[data-page="index"] #cv-atmosphere-control:not(.cv-atmo-control--expanded) .cv-atmo-toggle {
    display:grid;
    grid-template-columns:1fr;
    place-items:center;
    min-height:38px;
    padding:0;
    gap:0;
  }
  html.oc-seuil-passe.oc-entree-passee body[data-page="index"] #cv-atmosphere-control:not(.cv-atmo-control--expanded) .cv-atmo-place {
    position:absolute;
    display:block !important;
    width:1px;
    height:1px;
    margin:-1px;
    padding:0;
    overflow:hidden;
    clip-path:inset(50%);
    white-space:nowrap;
  }
  html.oc-seuil-passe.oc-entree-passee body[data-page="index"] #cv-atmosphere-control:not(.cv-atmo-control--expanded) .cv-atmo-indicator {
    display:none;
  }
  html.oc-seuil-passe.oc-entree-passee body[data-page="index"] #cv-atmosphere-control .cv-atmo-glyph {
    width:20px;
    height:20px;
    margin:0;
    align-self:center;
    opacity:1;
  }
  html.oc-seuil-passe.oc-entree-passee body[data-page="index"] #cv-atmosphere-control.cv-atmo-control--expanded {
    width:258px !important;
    max-width:258px !important;
    max-height:calc(100dvh - 152px);
    overflow:auto;
  }
  html.oc-seuil-passe.oc-entree-passee body[data-page="index"] #cv-atmosphere-control .cv-atmo-toggle:focus-visible {
    outline:2px solid currentColor;
    outline-offset:-3px;
  }
  html.oc-seuil-passe.oc-entree-passee body[data-page="index"].cv-atmo-control-hidden #cv-atmosphere-control {
    visibility:hidden !important;
    pointer-events:none !important;
  }
}

@keyframes cv-atmo-breathe {
  from { transform: translate3d(calc(var(--cv-atmo-wind-x) * -.12), calc(var(--cv-atmo-wind-y) * -.1), 0) scale(.985); }
  to { transform: translate3d(calc(var(--cv-atmo-wind-x) * .2), calc(var(--cv-atmo-wind-y) * .18), 0) scale(1.02); }
}

@keyframes cv-atmo-drift {
  from { transform: translate3d(calc(var(--cv-atmo-wind-x) * -1), calc(var(--cv-atmo-wind-y) * -.4), 0) scale(1.03); }
  to { transform: translate3d(var(--cv-atmo-wind-x), var(--cv-atmo-wind-y), 0) scale(1.08); }
}

@keyframes cv-atmo-advection {
  from { background-position: 0 0, 0 0, 0 0, 0 0; }
  to { background-position: 97px -89px, 131px -113px, 149px -127px, 181px -157px; }
}

@keyframes cv-atmo-glass-pass {
  0%, 34% { transform: translate3d(-3%, 0, 0); opacity: calc(.12 + .24 * var(--cv-atmo-glass)); }
  62%, 100% { transform: translate3d(3%, calc(var(--cv-atmo-rain) * 4px), 0); opacity: calc(.18 + .42 * var(--cv-atmo-glass)); }
}

@keyframes cv-atmo-rain-trace {
  from { background-position: 0 -260px, 31px -420px, 0 0, 0 0; }
  to { background-position: -112px 260px, -164px 420px, 0 0, 0 0; }
}

@keyframes cv-atmo-storm-trace {
  from { background-position: 0 -244px, 39px -382px, 0 0, 0 0; }
  to { background-position: -126px 244px, -188px 382px, 0 0, 0 0; }
}

@keyframes cv-atmo-storm-light {
  0%, 70%, 100% { filter: brightness(.94); }
  82% { filter: brightness(1.08); }
}

@keyframes cv-atmo-snow-drift {
  from { background-position: 0 -88px, 31px -137px, 0 0; }
  to { background-position: 54px 176px, -36px 274px, 0 0; }
}

@keyframes cv-atmo-heat-shimmer {
  from { background-position: 0 0, -42px 0; transform: translate3d(-.35%, -.15%, 0) scale(1.002); }
  to { background-position: 0 0, 42px 0; transform: translate3d(.35%, .15%, 0) scale(1.006); }
}

@keyframes cv-atmo-wave {
  from { transform: scale(.92); opacity: .46; }
  to { transform: scale(1.08); opacity: .94; }
}

@media (max-width: 760px), (hover: none) and (pointer: coarse) {
  #cv-atmosphere-field {
    opacity: .72;
  }

  .cv-atmo-fog {
    filter: blur(36px);
  }

  .cv-atmo-dust {
    opacity: calc(.015 + .12 * var(--cv-atmo-dust));
    background-size: 131px 119px, 173px 151px, 197px 181px, 239px 211px;
  }

  #cv-atmosphere-control {
    top: calc(142px + env(safe-area-inset-top) + var(--cv-atmo-mobile-lift, 0px));
    right: auto;
    bottom: auto;
    left: auto;
    right: max(14px, calc(env(safe-area-inset-right) + 14px));
    width: min(280px, calc(100vw - 28px));
    min-height: 48px;
    padding-left: 13px;
  }

  #cv-atmosphere-control.cv-atmo-control--compact {
    width: min(228px, calc(100vw - 28px));
  }

  #cv-atmosphere-control.cv-atmo-control--settled {
    width: 44px;
  }

  /* Hors K3, l'instrument rejoint le flux de la navigation sur téléphone.
     Il ne flotte donc plus sur un titre, une légende ou un formulaire. */
  /* Les pages sans menu gardent un intervalle libre sous leur en-tête.
     Le résumé d'arrivée ne recouvre plus breadcrumb ou kicker à 174px. */
  body:not([data-page="index"]) #cv-atmosphere-control:not(.cv-atmo-control--in-menu) {
    top: calc(110px + env(safe-area-inset-top));
  }

  #cv-atmosphere-control.cv-atmo-control--in-menu,
  #cv-atmosphere-control.cv-atmo-control--in-menu.cv-atmo-control--settled {
    position: relative;
    inset: auto;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    width: min(272px, 100%);
    min-height: 48px;
    margin: 16px auto 12px;
    padding: 8px 12px;
    opacity: 1;
    visibility: hidden;
    pointer-events: none;
    transform: none;
    box-shadow: none;
  }

  body.nopen #snav #cv-atmosphere-control.cv-atmo-control--in-menu,
  body.menu-open #mobile-menu #cv-atmosphere-control.cv-atmo-control--in-menu {
    visibility: visible;
    pointer-events: auto;
  }

  #cv-atmosphere-control.cv-atmo-control--in-menu.cv-atmo-control--settled .cv-atmo-instrument {
    display: block;
  }

  #cv-atmosphere-control.cv-atmo-control--in-menu.cv-atmo-control--settled .cv-atmo-place {
    display: flex;
  }

  body[data-page="index"][data-cv-weather="rain"] #accueil #oc-maison::after {
    opacity: calc(.34 + .38 * var(--cv-atmo-rain));
    animation-duration: 3.25s;
  }

  body[data-page="index"][data-cv-weather="storm"] #accueil #oc-maison::after {
    opacity: calc(.38 + .34 * var(--cv-atmo-rain));
    animation-duration: 2.65s, 10.5s;
  }

  body[data-page="index"][data-cv-weather="snow"] #accueil #oc-maison::after {
    display:none;
    opacity:0;
    animation:none;
  }
}

@media (max-width: 420px) {
  #cv-atmosphere-control {
    grid-template-columns: minmax(0, 1fr) 44px;
    gap: 7px;
  }

  .cv-atmo-place strong { font-size: var(--cv-typo-current-fs, 10px); }
  .cv-atmo-place span { font-size: var(--cv-typo-current-fs, 9px); }
}

/* Tiers de qualité : même dramaturgie, coût progressivement abaissé. */
html[data-cv-atmo-quality="mid"] .cv-atmo-dust {
  opacity: calc(.018 + .13 * var(--cv-atmo-dust));
}

html[data-cv-atmo-quality="eco"] #cv-atmosphere-field {
  opacity: .58;
}

html[data-cv-atmo-quality="eco"] .cv-atmo-dust,
html[data-cv-atmo-quality="eco"] .cv-atmo-glass {
  display: none;
}

html[data-cv-atmo-quality="eco"] .cv-atmo-fog {
  filter: blur(28px);
  animation: none;
}

html[data-cv-atmo-quality="eco"] .cv-atmo-light,
html[data-cv-atmo-quality="eco"] body[data-page="index"] #accueil #oc-maison::after {
  animation: none !important;
  will-change: auto;
}

/* Le moteur historique cachait le même bouton avant puis après 280 px de
   lecture. L'atmosphère rétablit cette commande unique seulement une fois le
   choix de confidentialité effectué. Aucun son ne démarre sans ce geste. */
body.cv-atmo-active .oc-sound-toggle {
  opacity: .88 !important;
  visibility: visible !important;
  pointer-events: auto !important;
  transform: none !important;
}

body.cv-atmo-active .oc-sound-toggle:is(:hover, :focus-visible, .is-on) {
  opacity: 1 !important;
}

@media (prefers-reduced-motion: reduce) {
  .cv-atmo-light,
  .cv-atmo-fog,
  .cv-atmo-dust,
  .cv-atmo-glass,
  .cv-atmo-sound-wave,
  body[data-page="index"] #accueil #oc-maison::after {
    animation: none !important;
  }

  #cv-atmosphere-field,
  #cv-atmosphere-editorial,
  #cv-atmosphere-control,
  .cv-atmo-sound {
    transition-duration: 1ms !important;
  }
}

@media print {
  #cv-atmosphere-field,
  #cv-atmosphere-editorial,
  #cv-atmosphere-control,
  .oc-sound-toggle {
    display: none !important;
  }
}

/* ══════════════════════════════════════════════════════════════════════
   FINITION PANNEAU — « instrumentation horlogère »
   Obsidian fumé + Carrara + hairline Platinum + micro-reflet Bronze
   Florentine. État compact : ville / condition / phase sur lignes nettes,
   jamais de concaténation. État ouvert : deux colonnes label·valeur
   alignées. Aucune donnée touchée — présentation seule.
   ══════════════════════════════════════════════════════════════════════ */

/* Micro-reflet Bronze Florentine : un filet chaud naît sur l'arête haute. */
#cv-atmosphere-control::after {
  content: "";
  position: absolute;
  top: 0;
  left: 16%;
  right: 16%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgb(201 174 124 / .52), transparent);
  pointer-events: none;
}

#cv-atmosphere-control .cv-atmo-instrument {
  min-width: 0;
  display: block;
}

/* Le bouton ne garde aucune trace du style natif : c'est la lunette de
   l'instrument, pas un bouton système. */
#cv-atmosphere-control .cv-atmo-toggle {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 18px;
  align-items: center;
  gap: 9px;
  width: 100%;
  margin: 0;
  padding: 4px 2px 4px 0;
  font: var(--cv-typo-current-font, inherit);
  color: inherit;
  text-align: left;
  background: none;
  border: 0;
  border-radius: 1px;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
}

#cv-atmosphere-control .cv-atmo-toggle:focus-visible {
  outline: 1px solid rgb(var(--cv-atmo-platinum) / .72);
  outline-offset: 3px;
}

/* Phase + heure : leur propre ligne, petites capitales espacées. */
#cv-atmosphere-control .cv-atmo-extra {
  display: block;
  margin-top: 3px;
  font-style: var(--cv-typo-current-fst, normal);
  font-size: var(--cv-typo-current-fs, 8.5px);
  font-weight: var(--cv-typo-current-fw, 500);
  line-height: var(--cv-typo-current-lh, 1.3);
  letter-spacing: var(--cv-typo-current-ls, .22em);
  text-transform: var(--cv-typo-current-tt, uppercase);
  color: rgb(var(--cv-atmo-platinum) / .84);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Résumé une ligne : réservé au mobile, masqué ailleurs. */
#cv-atmosphere-control .cv-atmo-mobile-summary {
  display: none;
}

/* Indicateur « + » : pastille fine qui devient « × » à l'ouverture. */
#cv-atmosphere-control .cv-atmo-indicator {
  display: grid;
  place-items: center;
  width: 18px;
  height: 18px;
  font-size: var(--cv-typo-current-fs, 12px);
  font-weight: var(--cv-typo-current-fw, 300);
  line-height: var(--cv-typo-current-lh, 1);
  color: rgb(var(--cv-atmo-platinum) / .92);
  border: 1px solid rgb(var(--cv-atmo-platinum) / .34);
  border-radius: 50%;
  transition:
    transform 450ms cubic-bezier(.22, 1, .36, 1),
    border-color 300ms ease,
    color 300ms ease;
}

#cv-atmosphere-control .cv-atmo-toggle:hover .cv-atmo-indicator,
#cv-atmosphere-control.cv-atmo-control--expanded .cv-atmo-indicator {
  border-color: rgb(201 174 124 / .58);
  color: rgb(224 204 164);
}

#cv-atmosphere-control.cv-atmo-control--expanded .cv-atmo-indicator {
  transform: rotate(45deg);
}

/* État ouvert : deux colonnes label · valeur, chiffres tabulaires. */
#cv-atmosphere-control .cv-atmo-details {
  display: none;
  margin-top: 7px;
  padding-top: 9px;
  border-top: 1px solid rgb(var(--cv-atmo-platinum) / .22);
}

#cv-atmosphere-control.cv-atmo-control--expanded {
  width: min(258px, calc(100vw - 32px));
}

#cv-atmosphere-control.cv-atmo-control--expanded .cv-atmo-details {
  display: grid;
  gap: 5px;
}

#cv-atmosphere-control .cv-atmo-detail-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: baseline;
  gap: 14px;
}

#cv-atmosphere-control .cv-atmo-detail-row > span {
  font-size: var(--cv-typo-current-fs, 8px);
  font-weight: var(--cv-typo-current-fw, 500);
  letter-spacing: var(--cv-typo-current-ls, .2em);
  text-transform: var(--cv-typo-current-tt, uppercase);
  color: rgb(var(--cv-atmo-platinum) / .66);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#cv-atmosphere-control .cv-atmo-detail-row > strong {
  font-size: var(--cv-typo-current-fs, 10.5px);
  font-weight: var(--cv-typo-current-fw, 500);
  letter-spacing: var(--cv-typo-current-ls, .04em);
  color: rgb(238 235 228);
  font-variant-numeric: tabular-nums;
  text-align: right;
  white-space: nowrap;
}

#cv-atmosphere-control .cv-atmo-detail-region > strong {
  letter-spacing: var(--cv-typo-current-ls, .14em);
  color: rgb(224 204 164 / .92);
}

#cv-atmosphere-control .cv-atmo-geolocate {
  width: 100%;
  min-height: 32px;
  margin-top: 5px;
  padding: 0 10px;
  border: 1px solid rgb(var(--cv-atmo-platinum) / .34);
  border-radius: 1px;
  color: rgb(238 235 228);
  background: rgb(var(--cv-atmo-platinum) / .055);
  font: var(--cv-typo-current-font, 600 8px/1 "Inter", system-ui, sans-serif);
  letter-spacing: var(--cv-typo-current-ls, .14em);
  text-transform: var(--cv-typo-current-tt, uppercase);
  cursor: pointer;
}

#cv-atmosphere-control .cv-atmo-geolocate:hover,
#cv-atmosphere-control .cv-atmo-geolocate:focus-visible {
  border-color: rgb(224 204 164 / .68);
  outline: 0;
}

#cv-atmosphere-control .cv-atmo-geolocate:disabled {
  opacity: .52;
  cursor: wait;
}

#cv-atmosphere-control .cv-atmo-geo-note {
  display: block;
  margin: 0;
  color: rgb(var(--cv-atmo-platinum) / .66);
  font: var(--cv-typo-current-font, 500 7px/1.45 "Inter", system-ui, sans-serif);
  letter-spacing: var(--cv-typo-current-ls, .06em);
}

/* Mode settled : seule la commande son demeure, l'instrument se retire
   entièrement (le mode display-only a sa règle historique plus haut). */
#cv-atmosphere-control.cv-atmo-control--settled .cv-atmo-instrument {
  display: none;
}

/* Mobile : une seule ligne — ville + résumé, la phase détaillée se retire. */
@media (max-width: 760px), (hover: none) and (pointer: coarse) {
  #cv-atmosphere-control .cv-atmo-toggle {
    padding: 3px 2px 3px 0;
  }

  #cv-atmosphere-control .cv-atmo-place {
    display: flex;
    align-items: baseline;
    min-width: 0;
  }

  /* Le résumé mobile du moteur porte déjà « VILLE · 17° · CONDITION » :
     la ville ne s'affiche qu'une fois, sur cette ligne unique. */
  #cv-atmosphere-control .cv-atmo-place strong {
    display: none;
  }

  #cv-atmosphere-control .cv-atmo-place span,
  #cv-atmosphere-control .cv-atmo-extra {
    display: none;
  }

  #cv-atmosphere-control .cv-atmo-mobile-summary {
    display: block;
    flex: 1 1 auto;
    min-width: 0;
    margin: 0;
    font-size: var(--cv-typo-current-fs, 9px);
    font-weight: var(--cv-typo-current-fw, 500);
    letter-spacing: var(--cv-typo-current-ls, .05em);
    color: rgb(204 207 207);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  #cv-atmosphere-control.cv-atmo-control--expanded {
    width: min(272px, calc(100vw - 28px));
  }
}

/* ══════════════════════════════════════════════════════════════════════
   GLYPHE MÉTÉO — dessin à traits fins, animations lentes, accent bronze
   pour le soleil et la lune. Le glyphe vit dans la lunette de
   l'instrument, à gauche du texte. Aucune animation sous reduced-motion.
   ══════════════════════════════════════════════════════════════════════ */

#cv-atmosphere-control .cv-atmo-toggle {
  grid-template-columns: 24px minmax(0, 1fr) 18px;
}

#cv-atmosphere-control .cv-atmo-glyph {
  display: block;
  width: 22px;
  height: 22px;
  align-self: center;
  color: rgb(var(--cv-atmo-platinum) / .92);
}

#cv-atmosphere-control .cv-atmo-glyph svg {
  display: block;
  width: 100%;
  height: 100%;
}

#cv-atmosphere-control .cv-g-accent {
  stroke: rgb(201 174 124 / .94);
}

.cv-g-rays {
  transform-origin: 12px 12px;
  animation: cv-g-spin 46s linear infinite;
}

.cv-g-orbit {
  transform-origin: 12px 12px;
  animation: cv-g-spin 14s linear infinite;
}

@keyframes cv-g-spin {
  to { transform: rotate(360deg); }
}

.cv-g-rain path {
  animation: cv-g-drop 1.9s linear infinite;
}

.cv-g-rain path:nth-child(2) { animation-delay: .55s; }
.cv-g-rain path:nth-child(3) { animation-delay: 1.1s; }

@keyframes cv-g-drop {
  0% { transform: translateY(-1.4px); opacity: 0; }
  30% { opacity: .95; }
  100% { transform: translateY(2.6px); opacity: 0; }
}

.cv-g-bolt {
  animation: cv-g-bolt 7.5s ease-in-out infinite;
}

@keyframes cv-g-bolt {
  0%, 86%, 100% { opacity: .4; }
  89% { opacity: 1; }
  92% { opacity: .45; }
  94.5% { opacity: .95; }
}

.cv-g-flake {
  transform-origin: 12px 12px;
  animation: cv-g-flake 9s ease-in-out infinite alternate;
}

@keyframes cv-g-flake {
  from { transform: translate3d(-.7px, .5px, 0) rotate(-5deg); }
  to { transform: translate3d(.7px, -.5px, 0) rotate(5deg); }
}

.cv-g-wind path {
  stroke-dasharray: 26 30;
  animation: cv-g-wind 5.5s linear infinite;
}

@keyframes cv-g-wind {
  to { stroke-dashoffset: -56; }
}

.cv-g-fog path {
  animation: cv-g-fog 6.5s ease-in-out infinite alternate;
}

.cv-g-fog path:nth-child(2) { animation-delay: 1.4s; }

@keyframes cv-g-fog {
  from { transform: translateX(-1.1px); opacity: .5; }
  to { transform: translateX(1.1px); opacity: .92; }
}

@media (max-width: 760px), (hover: none) and (pointer: coarse) {
  #cv-atmosphere-control .cv-atmo-toggle {
    grid-template-columns: 20px minmax(0, 1fr) 18px;
  }

  #cv-atmosphere-control .cv-atmo-glyph {
    width: 18px;
    height: 18px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .cv-g-rays,
  .cv-g-orbit,
  .cv-g-rain path,
  .cv-g-bolt,
  .cv-g-flake,
  .cv-g-wind path,
  .cv-g-fog path {
    animation: none !important;
  }
}

/* ==========================================================================
   BRUMES COUTURE — PALETTE 02 (Albâtre Sidéral / Malachite Nocturne)
   --------------------------------------------------------------------------
   Quatre familles d'assets seulement, montées par l'orchestrateur v3 sur des
   hôtes déjà en position:relative. Aucun canvas, aucun WebGL, aucun RAF : le
   mouvement est une animation CSS de transform + opacity que l'orchestrateur
   met en pause hors viewport et onglet caché via .cv-mist--live.

   Aucune couleur n'est déclarée ici : la teinte provient exclusivement des
   WebP autorisés et les masques sont purement alpha. La palette chargée reste
   donc la seule autorité chromatique.
   ========================================================================== */

.cv-mist {
  position: absolute;
  left: 0;
  right: 0;
  pointer-events: none;
  overflow: hidden;
  contain: layout paint style;
  /* Réglages par défaut ; chaque zone les redéfinit. */
  --cv-mist-min: .025;
  --cv-mist-avg: .05;
  --cv-mist-max: .075;
  --cv-mist-cycle: 20s;
  --cv-mist-delay: 0s;
  --cv-mist-x: 2%;
  --cv-mist-y: 10px;
  --cv-mist-scale: 1.02;
  --cv-mist-static: .03;
}

.cv-mist__veil {
  position: absolute;
  inset: -6% -4%;
  display: block;
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: cover;
  opacity: var(--cv-mist-static);
  will-change: transform, opacity;
  transform: translate3d(0, 0, 0);
  animation-name: none;
  animation-duration: var(--cv-mist-cycle);
  animation-delay: var(--cv-mist-delay);
  animation-timing-function: cubic-bezier(.42, 0, .38, 1);
  animation-iteration-count: infinite;
  animation-play-state: paused;
}

/* L'orchestrateur ne libère l'animation que lorsque la scène est réellement
   visible et l'onglet actif. Hors de ces deux conditions la couche reste une
   image fixe : pas de travail de composition inutile. */
.cv-mist--live .cv-mist__veil {
  animation-play-state: running;
}

/* --- Assets autorisés ---------------------------------------------------- */
.cv-mist--albatre .cv-mist__veil { background-image: url("/assets/palette02/albatre_mist_low_1280x720.webp"); }
.cv-mist--calcite .cv-mist__veil { background-image: url("/assets/palette02/calcite_vapor_1280x720.webp"); }
.cv-mist--jade    .cv-mist__veil { background-image: url("/assets/palette02/jade_vapor_1280x720.webp"); }
.cv-mist--malachite .cv-mist__veil { background-image: url("/assets/palette02/malachite_smoke_low_1280x720.webp"); }

/* --- Trois dérives asymétriques, jamais synchronisées -------------------- */
@keyframes cv-mist-drift-1 {
  0%   { opacity: var(--cv-mist-min); transform: translate3d(calc(var(--cv-mist-x) * -.55), var(--cv-mist-y), 0) scale(1.004); }
  37%  { opacity: var(--cv-mist-max); transform: translate3d(calc(var(--cv-mist-x) * .34), calc(var(--cv-mist-y) * -.42), 0) scale(var(--cv-mist-scale)); }
  68%  { opacity: var(--cv-mist-avg); transform: translate3d(var(--cv-mist-x), calc(var(--cv-mist-y) * .28), 0) scale(1.009); }
  100% { opacity: var(--cv-mist-min); transform: translate3d(calc(var(--cv-mist-x) * -.55), var(--cv-mist-y), 0) scale(1.004); }
}

@keyframes cv-mist-drift-2 {
  0%   { opacity: var(--cv-mist-avg); transform: translate3d(var(--cv-mist-x), calc(var(--cv-mist-y) * -.36), 0) scale(1.011); }
  29%  { opacity: var(--cv-mist-min); transform: translate3d(calc(var(--cv-mist-x) * .12), var(--cv-mist-y), 0) scale(1.003); }
  61%  { opacity: var(--cv-mist-max); transform: translate3d(calc(var(--cv-mist-x) * -.78), calc(var(--cv-mist-y) * -.18), 0) scale(var(--cv-mist-scale)); }
  100% { opacity: var(--cv-mist-avg); transform: translate3d(var(--cv-mist-x), calc(var(--cv-mist-y) * -.36), 0) scale(1.011); }
}

@keyframes cv-mist-drift-3 {
  0%   { opacity: var(--cv-mist-min); transform: translate3d(calc(var(--cv-mist-x) * .82), calc(var(--cv-mist-y) * .55), 0) scale(1.006); }
  44%  { opacity: var(--cv-mist-avg); transform: translate3d(calc(var(--cv-mist-x) * -.36), calc(var(--cv-mist-y) * -.62), 0) scale(1.013); }
  76%  { opacity: var(--cv-mist-max); transform: translate3d(calc(var(--cv-mist-x) * -.9), calc(var(--cv-mist-y) * .12), 0) scale(var(--cv-mist-scale)); }
  100% { opacity: var(--cv-mist-min); transform: translate3d(calc(var(--cv-mist-x) * .82), calc(var(--cv-mist-y) * .55), 0) scale(1.006); }
}

/* ========================= A — HOME / HERO CINÉMA ========================= */
/* La brume n'occupe que la partie basse du hero et reste sous le corps
   éditorial (.hero-body, z-index 12). Le cinéma demeure la matière
   principale. Les WebP possèdent déjà un alpha très léger : ces opacités
   préservent leur dessin sans le rendre une seconde fois imperceptible. */
.cv-mist--hero {
  top: 54%;
  bottom: 0;
  z-index: 5;
  --cv-mist-min: .60;
  --cv-mist-avg: .80;
  --cv-mist-max: 1;
  --cv-mist-cycle: 20s;
  --cv-mist-x: 2%;
  --cv-mist-y: 10px;
  --cv-mist-scale: 1.02;
  --cv-mist-static: .80;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 34%, #000 82%, transparent 100%);
          mask-image: linear-gradient(to bottom, transparent 0%, #000 34%, #000 82%, transparent 100%);
}

.cv-mist--hero .cv-mist__veil { animation-name: cv-mist-drift-1; }

/* ==================== B — CARRARE → MANIFESTE (calcite) =================== */
/* Brume Maison la plus visible. Deux hôtes verticalement disjoints : la
   vapeur paraît naître de la pierre puis rejoindre le Manifeste. Les sections
   ne se recouvrant jamais, aucun pixel ne reçoit deux couches. */
.cv-mist--carrara,
.cv-mist--manifesto {
  --cv-mist-min: .70;
  --cv-mist-avg: .90;
  --cv-mist-max: 1;
  --cv-mist-cycle: 22s;
  --cv-mist-x: 2.5%;
  --cv-mist-y: 14px;
  --cv-mist-scale: 1.018;
  --cv-mist-static: .90;
}

.cv-mist--carrara {
  top: 42%;
  bottom: 0;
  z-index: 1;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 40%, #000 100%);
          mask-image: linear-gradient(to bottom, transparent 0%, #000 40%, #000 100%);
}

.cv-mist--manifesto {
  top: 0;
  bottom: 26%;
  z-index: 2;
  --cv-mist-delay: -7s;
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 52%, transparent 100%);
          mask-image: linear-gradient(to bottom, #000 0%, #000 52%, transparent 100%);
}

.cv-mist--carrara .cv-mist__veil { animation-name: cv-mist-drift-2; }
.cv-mist--manifesto .cv-mist__veil { animation-name: cv-mist-drift-2; }

/* ============ C — TRANSMISSION → TRIPTYQUE → PORTALE (albâtre) ============ */
/* Toujours derrière le Triptyque, les signatures et les logos : z-index 0/1
   place la couche au-dessus du seul fond de section. Aucune bande blanche :
   les masques laissent les jointures Albâtre → Malachite intactes. */
.cv-mist--transmission,
.cv-mist--triptyque,
.cv-mist--portale-teaser {
  --cv-mist-min: .48;
  --cv-mist-avg: .68;
  --cv-mist-max: .88;
  --cv-mist-cycle: 28s;
  --cv-mist-x: 1.8%;
  --cv-mist-y: 9px;
  --cv-mist-scale: 1.014;
  --cv-mist-static: .70;
}

.cv-mist--transmission {
  top: 30%;
  bottom: 0;
  z-index: 0;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 38%, #000 100%);
          mask-image: linear-gradient(to bottom, transparent 0%, #000 38%, #000 100%);
}

.cv-mist--triptyque {
  top: 0;
  bottom: 0;
  z-index: 0;
  --cv-mist-delay: -11s;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 22%, #000 78%, transparent 100%);
          mask-image: linear-gradient(to bottom, transparent 0%, #000 22%, #000 78%, transparent 100%);
}

.cv-mist--portale-teaser {
  top: 0;
  bottom: 34%;
  z-index: 1;
  --cv-mist-delay: -19s;
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 44%, transparent 100%);
          mask-image: linear-gradient(to bottom, #000 0%, #000 44%, transparent 100%);
}

.cv-mist--transmission .cv-mist__veil { animation-name: cv-mist-drift-3; }
.cv-mist--triptyque .cv-mist__veil { animation-name: cv-mist-drift-1; }
.cv-mist--portale-teaser .cv-mist__veil { animation-name: cv-mist-drift-2; }

/* ========================= D — PORTALE (Malachite) ======================== */
/* Deux couches au maximum, de durées premières entre elles et décalées : le
   jade et la fumée basse ne repassent jamais par la même phase. Elles restent
   sous .hero-content (8), le formulaire de recherche (9) et l'UI vidéo (10). */
.cv-mist--jade-hero,
.cv-mist--malachite-hero {
  top: 0;
  bottom: 0;
  z-index: 3;
}

.cv-mist--jade-hero {
  --cv-mist-min: .70;
  --cv-mist-avg: .86;
  --cv-mist-max: 1;
  --cv-mist-cycle: 31s;
  --cv-mist-x: 1.9%;
  --cv-mist-y: 10px;
  --cv-mist-scale: 1.016;
  --cv-mist-static: .95;
  /* Le jade s'éclaire sur Malachite sans recolorer le média sous-jacent. */
  mix-blend-mode: screen;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 28%, #000 84%, transparent 100%);
          mask-image: linear-gradient(to bottom, transparent 0%, #000 28%, #000 84%, transparent 100%);
}

.cv-mist--malachite-hero {
  --cv-mist-min: .52;
  --cv-mist-avg: .74;
  --cv-mist-max: .94;
  --cv-mist-cycle: 37s;
  --cv-mist-delay: -13s;
  --cv-mist-x: 1.4%;
  --cv-mist-y: 7px;
  --cv-mist-scale: 1.012;
  --cv-mist-static: .70;
  mix-blend-mode: screen;
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 46%, transparent 92%);
          mask-image: linear-gradient(to bottom, #000 0%, #000 46%, transparent 92%);
}

.cv-mist--jade-hero .cv-mist__veil { animation-name: cv-mist-drift-1; }
.cv-mist--malachite-hero .cv-mist__veil { animation-name: cv-mist-drift-3; }

/* Reprise de géométrie hors accueil.
   caravelli-arxiv8-effects.css normalise tout enfant direct de chapitre en
   position:relative / z-index:2, ce qui aplatirait la brume à 0×0. La couche
   n'est pas un bloc éditorial : elle reprend sa géométrie avec la même
   spécificité, cette feuille étant chargée après l'effet arxiv8. Aucun
   !important n'est introduit. */
body.cv3-nonhome .cv3-chapter > .cv-mist {
  position: absolute;
  left: 0;
  right: 0;
}

body.cv3-nonhome .cv3-chapter > .cv-mist--jade-hero,
body.cv3-nonhome .cv3-chapter > .cv-mist--malachite-hero {
  top: 0;
  bottom: 0;
  z-index: 3;
}

/* ===================== E — PIED DE PAGE (une seule couche) ================ */
/* Une couche unique, la plus lente et la plus faible du site. Elle est montée
   sur le pied de page seul : aucune brume n'entre dans « Entrer en relation »
   ni dans aucun formulaire. z-index -1 la maintient sous tout le contenu de
   flux, au-dessus du seul fond du pied de page. */
.cv-mist--footer,
.cv-mist--footer-portale {
  top: 0;
  bottom: 0;
  z-index: -1;
  --cv-mist-min: .35;
  --cv-mist-avg: .50;
  --cv-mist-max: .65;
  --cv-mist-x: 1.2%;
  --cv-mist-y: 6px;
  --cv-mist-scale: 1.01;
  --cv-mist-static: .50;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 30%, #000 100%);
          mask-image: linear-gradient(to bottom, transparent 0%, #000 30%, #000 100%);
}

.cv-mist--footer { --cv-mist-cycle: 39s; }
.cv-mist--footer-portale { --cv-mist-cycle: 41s; --cv-mist-delay: -17s; }

/* Garde-fou d'hôte : tous les hôtes visés sont déjà en position:relative, la
   déclaration est donc un no-op qui protège d'une régression future. Le pied
   de page Portale, lui, n'isolait pas son contexte d'empilement : sans cela un
   z-index négatif s'échapperait derrière le fond de page. */
.cv-mist-host { position: relative; }
footer.site-footer.cv-mist-host { isolation: isolate; }

.cv-mist--footer .cv-mist__veil { animation-name: cv-mist-drift-2; }
.cv-mist--footer-portale .cv-mist__veil { animation-name: cv-mist-drift-3; }

/* ------------------------- Mobile & pointeur grossier -------------------- */
/* Aucune séquence de frames nulle part. Sur mobile la Maison passe en image
   fixe ; seul le Portale conserve une couche lente unique, et uniquement si
   l'orchestrateur a mesuré au moins 55 fps sur l'appareil (html.cv-mist-mobile-motion). */
@media (max-width: 760px), (hover: none) and (pointer: coarse) {
  .cv-mist__veil {
    animation-name: none !important;
    animation-play-state: paused !important;
    opacity: var(--cv-mist-static);
    transform: none;
    will-change: auto;
  }

  .cv-mist--hero { --cv-mist-static: .80; }
  .cv-mist--carrara,
  .cv-mist--manifesto { --cv-mist-static: .90; }
  .cv-mist--transmission,
  .cv-mist--triptyque,
  .cv-mist--portale-teaser { --cv-mist-static: .70; }
  .cv-mist--footer,
  .cv-mist--footer-portale { --cv-mist-static: .50; }

  /* Portale : une seule couche sur mobile. La fumée basse est retirée. */
  .cv-mist--malachite-hero { display: none; }
  .cv-mist--jade-hero { --cv-mist-static: .95; }

  /* La couche jade ne reprend son mouvement que sur mesure favorable. */
  html.cv-mist-mobile-motion .cv-mist--jade-hero.cv-mist--live .cv-mist__veil {
    animation-name: cv-mist-drift-1 !important;
    animation-play-state: running !important;
    will-change: transform, opacity;
  }
}

/* --------------------------- Mouvement réduit ---------------------------- */
/* Aucun drift permanent : la brume devient une matière strictement immobile. */
@media (prefers-reduced-motion: reduce) {
  .cv-mist__veil,
  html.cv-mist-mobile-motion .cv-mist--jade-hero.cv-mist--live .cv-mist__veil {
    animation: none !important;
    transform: none !important;
    opacity: var(--cv-mist-static) !important;
    will-change: auto !important;
  }
}

/* L'impression ne porte aucune brume. */
@media print {
  .cv-mist { display: none !important; }
}