/* Scènes de la V6 (T16, 31/10/2026 : une composition par section, v5-scenes.js) : mémoire n° 4 « Strates du temps »
   (volumes CSS 3D), humain n° 14 (v5-humain-3d.js) et son repli n° 11. Matière : verre. Coordonnées d'atelier 520 × 420.
   Le ResizeObserver du cadre stable adapte uniformément les volumes CSS 3D. */
.v5-scenes .scene { min-width: 0; align-self: center; grid-column: 2; grid-row: 1; }
.v5-scenes .scene-texte { grid-column: 1; grid-row: 1 / 3; }
.v5-scenes[data-section="memoire"] .scene { grid-column: 1; }
.v5-scenes[data-section="memoire"] .scene-texte { grid-column: 2; }
.v5-scenes .conteneur--scene { row-gap: 12px; }
.v5-stage { width: 100%; aspect-ratio: 26 / 21; position: relative; isolation: isolate; overflow: clip; }
.v5-model { position: absolute; width: 520px; height: 420px; transform-origin: top left; transform: scale(var(--v5-scale,1)); perspective: 1000px; }
.v5-model > svg { width: 520px; height: 420px; position: absolute; inset: 0; overflow: visible; }
.v5-volume { transform-style: preserve-3d; position: absolute; }
.v5-face { position: absolute; box-sizing: border-box; border: 1.5px solid #6e88c7; backface-visibility: visible; background: linear-gradient(135deg,#d8f8ffb8,#7776ff2e 50%,#c34bee4d); box-shadow: inset 0 0 24px #ffffff5c, 0 12px 24px #313d7e12; }
.v5-face b,.v5-face span { color: #263e6c; font-size: 14px; font-weight: 600; }
.v5-face i { display: block; width: 70%; height: 3px; margin: 12px auto; background: #6883bb66; }
.v5-strates { left: 117px; top: 100px; transform: rotateX(52deg) rotateY(0deg) rotateZ(-28deg); width: 290px; height: 220px; animation: v5-camera-strates 22s ease-in-out infinite; }
.strate { width: 290px; height: 220px; border-radius: 10px; background: linear-gradient(135deg,#d9f6ff7a,#8c8dec33); box-shadow: 0 6px 0 #767aca44; padding: 17px; }
.strate span { font-size: 22px; }.strate i { margin: 28px 0; }
.strate-0 { transform: translateZ(-75px); }.strate-1 { transform: translateZ(-48px); }.strate-2 { transform: translateZ(-22px); }.strate-3 { transform: translateZ(5px); }.strate-4 { transform: translateZ(32px); }.strate-5 { transform: translateZ(58px); }.strate-6 { transform: translateZ(85px); }
.v5-fragment { width: 142px; height: 116px; left: 75px; top: 54px; background: #eff5ff; padding: 17px; transform: translateZ(176px) translateX(35px); animation: v5-fragment 22s ease-in-out infinite; }
@keyframes v5-camera-strates {
  0%,18.1818%,100% { transform: rotateX(52deg) rotateY(0deg) rotateZ(-28deg); }
  36.3636% { transform: rotateX(62deg) rotateY(-12deg) rotateZ(-24deg); }
  59.0909%,72.7273% { transform: rotateX(36deg) rotateY(20deg) rotateZ(-20deg); }
  90.9091% { transform: rotateX(48deg) rotateY(-18deg) rotateZ(-32deg); }
}
@keyframes v5-fragment {
  0%,18.1818%,90.9091%,100% { transform: translateZ(88px) translateX(0); }
  36.3636% { transform: translateZ(118px) translateX(0); }
  59.0909%,72.7273% { transform: translateZ(176px) translateX(35px); }
}
/* Les sept plaques (2021 à 2027, ajout de 2027 demandé par Anthony le 30/10) se déploient, puis se referment
   successivement sans délai CSS. */
.strate-0 { animation: v5-strate-0 22s ease-in-out infinite; }
.strate-1 { animation: v5-strate-1 22s ease-in-out infinite; }
.strate-2 { animation: v5-strate-2 22s ease-in-out infinite; }
.strate-3 { animation: v5-strate-3 22s ease-in-out infinite; }
.strate-4 { animation: v5-strate-4 22s ease-in-out infinite; }
.strate-5 { animation: v5-strate-5 22s ease-in-out infinite; }
.strate-6 { animation: v5-strate-6 22s ease-in-out infinite; }
@keyframes v5-strate-0 { 0%,18.1818%,78%,100% { transform: translateZ(-75px); } 36.3636%,72.7273% { transform: translateZ(-95px); } }
@keyframes v5-strate-1 { 0%,18.1818%,80.5%,100% { transform: translateZ(-48px); } 36.3636%,72.7273% { transform: translateZ(-62px); } }
@keyframes v5-strate-2 { 0%,18.1818%,83%,100% { transform: translateZ(-22px); } 36.3636%,72.7273% { transform: translateZ(-28px); } }
@keyframes v5-strate-3 { 0%,18.1818%,85.5%,100% { transform: translateZ(5px); } 36.3636%,72.7273% { transform: translateZ(5px); } }
@keyframes v5-strate-4 { 0%,18.1818%,88%,100% { transform: translateZ(32px); } 36.3636%,72.7273% { transform: translateZ(38px); } }
@keyframes v5-strate-5 { 0%,18.1818%,90.5%,100% { transform: translateZ(58px); } 36.3636%,72.7273% { transform: translateZ(72px); } }
@keyframes v5-strate-6 { 0%,18.1818%,93%,100% { transform: translateZ(85px); } 36.3636%,72.7273% { transform: translateZ(105px); } }
/* La matière reste transparente ; les inscriptions ne montrent jamais leur revers. */
.v5-strates :is(b,span,em) { backface-visibility: hidden; }
.v5-paused * { animation-play-state: paused !important; }
/* Humain n° 11 « L'empreinte singulière » (repli de la scène 3D n° 14) : une gravure de verre stratifiée. */
.v5-empreinte-couche { transform-origin: 260px 210px; }
.v5-empreinte-couche.couche-0 { animation: v5-gravure-fond 14s ease-in-out infinite; }
.v5-empreinte-couche.couche-1 { animation: v5-gravure-milieu 14s ease-in-out infinite; }
.v5-empreinte-couche.couche-2 { animation: v5-gravure-face 14s ease-in-out infinite; }
@keyframes v5-gravure-fond { 0%,100% { transform: translate(-17px,14px); } 50% { transform: translate(-25px,18px); } }
@keyframes v5-gravure-milieu { 0%,100% { transform: translate(-8px,7px); } 50% { transform: translate(-3px,2px); } }
@keyframes v5-gravure-face { 0%,100% { transform: translate(0,0); } 50% { transform: translate(9px,-5px); } }
.v5-empreinte-reflet { animation: v5-gravure-eclat 14s ease-in-out infinite; }
@keyframes v5-gravure-eclat { 0%,100% { opacity: .3; transform: translate(0,0); } 50% { opacity: 1; transform: translate(9px,-5px); } }
.v5-reduced * { animation: none !important; stroke-dashoffset: 0 !important; }
@media(prefers-reduced-motion:reduce) { .v5-stage * { animation: none !important; stroke-dashoffset: 0 !important; } }
@media(max-width:999px) {
  .v5-scenes[data-section] .scene, .v5-scenes[data-section] .scene-texte { grid-column: 1; grid-row: auto; }
  .v5-scenes[data-section] .scene-texte { grid-row: 1; }
  .v5-scenes[data-section] .scene { grid-row: 2; margin-top: 12px; }
}
/* Humain 14 « Les particules qui racontent » (v5-humain-3d.js) : le canevas 3D déborde un peu de la scène pour laisser
   respirer la galaxie et les outils ; il laisse passer les clics. Le débordement horizontal est rogné par la section
   (30-a-propos.css). Le dessin n° 11 posé dessous reste visible
   tant que le module n'a pas pris la scène (attribut data-v5-particules absent : module bloqué ou absent) et revient
   en repli (pas de WebGL 2, fichier manquant, délai dépassé, shader refusé, contexte perdu) ; à l'impression aussi. */
.scene--humain { position: relative; }
.v5-3d { position: absolute; inset: -14% -16%; pointer-events: none; z-index: 1; }
.v5-3d canvas { display: block; width: 100%; height: 100%; }
.scene[data-v5-particules]:not([data-v5-particules="repli"]) .v5-humain-14 .v5-model,
.scene[data-v5-particules="repli"] .v5-3d { display: none; }
@media(max-width:767px) { .v5-3d { inset: -6% -4%; } }
@media print {
  .v5-3d { display: none; }
  .scene[data-v5-particules] .v5-humain-14 .v5-model { display: block; }
}