/* Voiles réels (Claude, 30/09/2026) — Italia et Champagne seulement, juste avant #galerie-ivoire.
   De vraies prises de vue (voilage traversé par le soleil ; tissu blanc dans le vent), sans calcul ni effet ajouté :
   recadrage et étalonnage faits dans le fichier (Italia chaud et naturel ; Champagne en gris argentique, points noir et
   blanc #0d0d0d / #f7f7f7 de la galerie). Boucle sans saut : fondu enchaîné intégré au fichier, lecture en boucle native.
   Hauteur réservée par la feuille (aucun décalage de mise en page) ; l'affiche est toujours présente sous la vidéo.
   Pilotage : voiles-reel.mjs (approche, hors écran, onglet masqué, garde body[data-tc-cine-paused], mouvement réduit). */
.vr-voile {
  --vr-papier: var(--tc-paper, #f4f0e8); --vr-encre: #122d25; --vr-filet: #263e2e40; --vr-accent: #aa4920; --vr-fond: #d8cfbf;
  --vr-pos: 50% 92%; --vr-pos-mobile: 42% 50%;
  --vr-hauteur: clamp(420px, 62vh, 680px);
  position: relative; isolation: isolate; margin: 0; padding: 0;
  background: var(--vr-papier); color: var(--vr-encre);
  scroll-margin-top: 90px;
}
.vr-voile[data-vr-page="champagne"] {
  --vr-papier: #f7f7f7; --vr-encre: #0d0d0d; --vr-filet: #0d0d0d38; --vr-accent: #0d0d0d; --vr-fond: #c9c9c9;
  --vr-pos: 50% 56%; --vr-pos-mobile: 64% 50%;
}
.vr-voile .vr-cadre {
  position: relative; overflow: hidden; height: var(--vr-hauteur); margin: 0;
  background: var(--vr-fond); contain: layout paint;
}
.vr-voile .vr-cadre > img,
.vr-voile .vr-cadre > video {
  position: absolute; inset: 0; display: block; width: 100%; height: 100%; margin: 0; border: 0;
  object-fit: cover; object-position: var(--vr-pos);
  /* Décor : ni cible de clic, ni « Lire le film » du curseur intelligent, ni menu d'image. */
  pointer-events: none; user-select: none; -webkit-user-select: none;
}
.vr-voile .vr-cadre > video { opacity: 0; transition: opacity 900ms var(--tc-cine-courbe, cubic-bezier(.22, .72, .18, 1)); }
.vr-voile .vr-cadre[data-vr-image="video"] > video { opacity: 1; }
/* Légende de composition et commande, dans la grammaire des galeries ivoire (.iv-caption, .iv-pause). */
.vr-voile .vr-legende {
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  min-height: 44px; padding: 18px var(--tc-gutter, clamp(22px, 5.5vw, 90px)); border-bottom: 1px solid var(--vr-filet);
}
.vr-voile .vr-titre,
.vr-voile .vr-pause { font-family: var(--tc-sans, Arial, sans-serif); font-size: 11px; line-height: 1.5; letter-spacing: .13em; text-transform: uppercase; }
.vr-voile .vr-titre { margin: 0; color: var(--vr-accent); max-width: 46ch; }
.vr-voile .vr-pause {
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  border: 1px solid color-mix(in srgb, var(--vr-encre) 40%, transparent); border-radius: 0;
  background: var(--vr-papier); color: var(--vr-encre);
  padding: 12px 18px; min-height: 44px; min-width: 145px; cursor: pointer;
  transition: background-color .25s ease, color .25s ease;
}
.vr-voile .vr-pause[hidden] { display: none; }
.vr-voile .vr-pause:hover,
.vr-voile .vr-pause:focus-visible { background: var(--vr-encre); color: var(--vr-papier); outline: 2px solid var(--vr-accent); outline-offset: 3px; }
.vr-voile .vr-invisible { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
@media (max-width: 700px) {
  .vr-voile { --vr-hauteur: clamp(300px, 52vh, 520px); --vr-pos: var(--vr-pos-mobile); scroll-margin-top: 76px; }
  @supports (height: 1svh) { .vr-voile { --vr-hauteur: clamp(300px, 52svh, 520px); } }
  .vr-voile .vr-legende { padding: 14px 22px; gap: 16px; }
  .vr-voile .vr-titre { font-size: 9px; letter-spacing: .09em; max-width: 26ch; }
  .vr-voile .vr-pause { min-width: 129px; padding: 10px; font-size: 9px; }
}
/* Mouvement réduit : l'affiche seule (le module ne charge alors aucune vidéo). */
@media (prefers-reduced-motion: reduce) {
  .vr-voile .vr-cadre > video { display: none; }
  .vr-voile .vr-pause { transition: none; }
}
@media (forced-colors: active) {
  .vr-voile { border-block: 1px solid CanvasText; }
  .vr-voile .vr-pause { border-color: ButtonText; }
}
@media print {
  .vr-voile .vr-cadre > video, .vr-voile .vr-pause { display: none; }
  .vr-voile .vr-cadre { height: 60mm; }
}