/* Dramaturgie ciné des intérieurs : jetons communs, fondus enchaînés par matière de page, respiration avant la page
   suivante, gestes des lettres. Teintes de page : --dv-air et --dv-material (direction-visuelle.css de Codex). */
@property --tc-iris { syntax: '<percentage>'; inherits: false; initial-value: 0%; }

body.tc-direction-20260928 {
  /* Jetons partagés (harmonisation-cine.css, 29/09) ; mêmes valeurs qu'avant : courbe ciné, fondu = ralenti minéral. */
  --tc-cine-courbe: var(--tc-ease-cine, cubic-bezier(.22,.72,.18,1));
  --tc-cine-entree: 1100ms;
  --tc-cine-fondu: var(--tc-dur-mineral, 1400ms);
  --tc-cine-respiration: 900ms;
}

/* ---- Lettres : le titre complet reste lu d'un bloc ; les lettres animées sont un décor provisoire. ---- */
.tc-lettres-lu { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.tc-lettres-decor .tc-mot { display: inline-block; white-space: nowrap; }
.tc-lettres-decor .tc-lettre { display: inline-block; will-change: transform, opacity, filter; }

/* ---- Fondus enchaînés : le voile couvre un chapitre qui n'est pas encore à l'écran, puis se dissout à son entrée. ---- */
.tc-fondu {
  --tc-fondu-trait: color-mix(in srgb, var(--dv-air, #d4c6aa) 55%, transparent);
  position: absolute; inset: 0; z-index: 6; pointer-events: none; opacity: 0;
  background-color: var(--tc-fondu-fond, #000);
}
.tc-fondu.tc-fondu-sur-clair { --tc-fondu-trait: #15130f40; }
.tc-fondu.tc-fondu-attente { opacity: .94; }
.tc-fondu.tc-fondu-joue { animation: var(--tc-fondu-geste, tc-fondu-sobre) var(--tc-cine-fondu) var(--tc-cine-courbe) both; }
/* T27 (29/09) : les gestes « carte » et « brume » agrandissent le voile (scale 1,08–1,12) au-delà de son chapitre, ce qui créait un
   débordement horizontal transitoire (~1 s) sur Italia. Pendant le geste, le chapitre rogne horizontalement (clip : pas de
   conteneur de défilement, sticky et absolus intacts) ; le voile est retiré du DOM à la fin, la règle cesse alors de s'appliquer. */
body.tc-direction-20260928 :has(> .tc-fondu.tc-fondu-joue) { overflow-x: clip; }

/* La Maison — poussière d'archives : un grain qui s'élève et se dissipe. */
body[data-tc-transition="poussiere"] .tc-fondu {
  --tc-fondu-geste: tc-fondu-poussiere;
  background-image:
    radial-gradient(circle, var(--tc-fondu-trait) 0 1px, transparent 1.6px),
    radial-gradient(circle, var(--tc-fondu-trait) 0 .8px, transparent 1.3px);
  background-size: 9px 9px, 13px 13px; background-position: 0 0, 4px 6px;
}
/* Les terres — carte : un quadrillage de relevé s'aligne, puis s'efface devant le chapitre. */
body[data-tc-transition="carte"] .tc-fondu {
  --tc-fondu-geste: tc-fondu-carte;
  background-image:
    repeating-linear-gradient(90deg, var(--tc-fondu-trait) 0 1px, transparent 1px 56px),
    repeating-linear-gradient(0deg, var(--tc-fondu-trait) 0 1px, transparent 1px 56px);
}
/* Italia — brume dorée : un air chaud qui se lève. */
body[data-tc-transition="brume"] .tc-fondu {
  --tc-fondu-geste: tc-fondu-brume;
  background-image:
    radial-gradient(ellipse 60% 50% at 30% 62%, color-mix(in srgb, var(--dv-air, #d8b68e) 42%, transparent), transparent 70%),
    radial-gradient(ellipse 55% 45% at 74% 32%, color-mix(in srgb, var(--dv-air, #d8b68e) 30%, transparent), transparent 70%);
}
/* Champagne — craie : un voile blanc cassé, fin, qui se dépose. */
body[data-tc-transition="craie"] .tc-fondu {
  --tc-fondu-geste: tc-fondu-craie;
  background-image:
    radial-gradient(circle, #f4f7f3a6 0 .7px, transparent 1.2px),
    linear-gradient(color-mix(in srgb, var(--dv-air, #d8e6df) 22%, transparent), color-mix(in srgb, var(--dv-air, #d8e6df) 22%, transparent));
  background-size: 6px 6px, auto;
}
/* Notre métier — iris : du détail au paysage, l'ouverture s'élargit depuis le centre. */
body[data-tc-transition="iris"] .tc-fondu {
  --tc-fondu-geste: tc-fondu-iris;
  -webkit-mask-image: radial-gradient(circle at 50% 50%, transparent var(--tc-iris), #000 calc(var(--tc-iris) + 1.5%));
  mask-image: radial-gradient(circle at 50% 50%, transparent var(--tc-iris), #000 calc(var(--tc-iris) + 1.5%));
}
/* Relations — sobre : un simple fondu, la page la plus calme. */
body[data-tc-transition="sobre"] .tc-fondu { --tc-fondu-geste: tc-fondu-sobre; }
body[data-tc-transition="sobre"] { --tc-cine-fondu: 800ms; }

@keyframes tc-fondu-sobre { from { opacity: .94; } to { opacity: 0; } }
@keyframes tc-fondu-poussiere { from { opacity: .94; background-position: 0 0, 4px 6px; } 55% { opacity: .5; } to { opacity: 0; background-position: 0 -26px, 4px -30px; } }
@keyframes tc-fondu-carte { from { opacity: .94; background-size: auto; transform: scale(1.08); } 45% { opacity: .7; transform: scale(1); } to { opacity: 0; transform: scale(1); } }
@keyframes tc-fondu-brume { from { opacity: .94; transform: scale(1); } 60% { opacity: .45; } to { opacity: 0; transform: scale(1.12) translateY(-2%); } }
@keyframes tc-fondu-craie { from { opacity: .94; filter: brightness(1.15); } to { opacity: 0; filter: brightness(1); } }
@keyframes tc-fondu-iris { from { opacity: 1; --tc-iris: 0%; } 85% { opacity: 1; } to { opacity: 0; --tc-iris: 150%; } }

/* ---- Respiration : deux bandes de cinéma se referment sur la page suivante, puis se rouvrent. ---- */
.tc-cine-bande { position: fixed; left: 0; right: 0; height: 0; z-index: 40; pointer-events: none; background: #000; transition: height var(--tc-cine-respiration, 900ms) var(--tc-cine-courbe, ease); }
.tc-cine-bande-haut { top: 0; box-shadow: 0 1px 0 #f4f0e814; }
.tc-cine-bande-bas { bottom: 0; box-shadow: 0 -1px 0 #f4f0e814; }
body.tc-respiration .tc-cine-bande { height: 5.5vh; }

@media (prefers-reduced-motion: reduce), (prefers-contrast: more), (forced-colors: active), print {
  .tc-fondu, .tc-cine-bande { display: none !important; }
}

/* ---- Passage entre pages (Claude, 29/09/2026) : brume minérale AU-DESSUS de la View Transition native, qui reste entière.
   Au clic sur un lien de page (jamais au changement de langue), le document sortant pose un calque vide nommé « tc-brume »
   (navigation-cinematique.mjs). Le document arrivant reçoit alors un groupe ::view-transition-group(tc-brume) : la brume monte
   sur l'ancienne page pendant sa fermeture (0–650 ms), puis se dissipe sur la nouvelle (650–1300 ms). Dégradés CSS seulement,
   teintes de la page qui arrive ; aucune image, aucun script dans le document arrivant, navigation jamais retardée. ---- */
@property --tc-brume-p { syntax: '<percentage>'; inherits: false; initial-value: 0%; }
:root { --tc-brume-air: #abc9bc; --tc-brume-material: #143b31; }
html:has(body.page-la-maison) { --tc-brume-air: #d4c6aa; --tc-brume-material: #38342b; }
html:has(body.page-italia) { --tc-brume-air: #d8b68e; --tc-brume-material: #494128; }
html:has(body.page-champagne) { --tc-brume-air: #d8e6df; --tc-brume-material: #263c3c; }
html:has(body.page-notre-metier) { --tc-brume-air: #c0cab8; --tc-brume-material: #19352e; }
html:has(body.page-relations) { --tc-brume-air: #d4caba; --tc-brume-material: #30332b; }

.tc-passage-brume { position: fixed; inset: 0; z-index: 2147483000; pointer-events: none; view-transition-name: tc-brume; }
/* La matière de la brume : grain minéral fin sur un voile plus dense en bas, plus aérien en haut ; le masque la fait monter. */
.tc-passage-brume-visible, ::view-transition-group(tc-brume) {
  --tc-brume-p: 0%;
  background:
    radial-gradient(circle, color-mix(in srgb, var(--tc-brume-air) 30%, transparent) 0 .8px, transparent 1.4px) 0 0 / 9px 9px,
    radial-gradient(circle, color-mix(in srgb, var(--tc-brume-air) 22%, transparent) 0 .6px, transparent 1.2px) 4px 6px / 13px 13px,
    radial-gradient(ellipse 70% 45% at 50% 100%, color-mix(in srgb, var(--tc-brume-air) 34%, transparent), transparent 70%),
    linear-gradient(to top, color-mix(in srgb, var(--tc-brume-material) 84%, transparent), color-mix(in srgb, var(--tc-brume-air) 60%, transparent) 55%, color-mix(in srgb, var(--tc-brume-air) 16%, transparent));
  -webkit-mask-image: linear-gradient(to top, #000 calc(var(--tc-brume-p) - 45%), transparent var(--tc-brume-p));
  mask-image: linear-gradient(to top, #000 calc(var(--tc-brume-p) - 45%), transparent var(--tc-brume-p));
}
/* Sans View Transitions entre documents : la montée joue dans le document sortant, pendant le chargement. */
.tc-passage-brume-visible { animation: tc-brume-monte var(--tc-dur-passage, 650ms) var(--tc-ease-cine, ease-out) both; }
/* Avec : le groupe nommé joue dans le document arrivant ; la capture (vide) de l'ancien calque n'est pas montrée. */
::view-transition-group(tc-brume) { animation: tc-brume-passage calc(var(--tc-dur-passage, 650ms) * 2) var(--tc-ease-mineral, ease-out) both; mix-blend-mode: normal; }
::view-transition-image-pair(tc-brume), ::view-transition-old(tc-brume) { animation: none; opacity: 0; }
@keyframes tc-brume-monte { from { --tc-brume-p: 0%; opacity: 0; } 30% { opacity: 1; } to { --tc-brume-p: 165%; opacity: 1; } }
@keyframes tc-brume-passage {
  0% { --tc-brume-p: 0%; opacity: 0; translate: 0 0; }
  12% { opacity: 1; }
  50% { --tc-brume-p: 165%; opacity: 1; translate: 0 0; }
  100% { --tc-brume-p: 165%; opacity: 0; translate: 0 -7%; }
}
html:has(.tc-scene[data-motion=paused])::view-transition-group(tc-brume) { animation: none !important; visibility: hidden; }
@media (prefers-reduced-motion: reduce), (prefers-contrast: more), (forced-colors: active), print {
  .tc-passage-brume { display: none !important; }
  ::view-transition-group(tc-brume) { animation: none !important; visibility: hidden; }
}