/* Commun aux robots ES-Protect : coupure tele (reprise de Bornii) et ecran d'attente */
.tele-coupure { position: absolute; inset: 0; z-index: 6; pointer-events: none; opacity: 0; transition: opacity .08s; overflow: hidden; border-radius: inherit }
.tele-coupure.est-actif { opacity: 1 }
.tele-coupure::before { content: ''; position: absolute; inset: 0; z-index: 1;
  background: repeating-linear-gradient(0deg, transparent, transparent 2px, rgba(0,240,255,.07) 2px, rgba(0,240,255,.07) 4px);
  animation: tele-balayage .06s linear infinite }
.tele-coupure::after { content: ''; position: absolute; inset: -50%; width: 200%; height: 200%; z-index: 2;
  background-image: radial-gradient(circle, rgba(255,255,255,.16) 1px, transparent 1px), radial-gradient(circle, rgba(0,240,255,.1) 1px, transparent 1px);
  background-size: 3px 3px, 5px 5px; background-position: 0 0, 2px 2px; animation: tele-grain .04s steps(6) infinite }
@keyframes tele-balayage { from { transform: translateY(0) } to { transform: translateY(4px) } }
@keyframes tele-grain { 0% { transform: translate(0,0) } 16% { transform: translate(-3px,2px) } 33% { transform: translate(2px,-1px) } 50% { transform: translate(-1px,-3px) } 66% { transform: translate(3px,1px) } 83% { transform: translate(-2px,-2px) } 100% { transform: translate(1px,3px) } }
/* 1 : decalage des couleurs */
video.coupure-1 { animation: coupure-rvb .12s steps(3) 3 }
@keyframes coupure-rvb { 0% { filter: none; transform: none } 20% { filter: saturate(2) hue-rotate(15deg) brightness(1.2); transform: translateX(3px) } 40% { filter: saturate(.3) hue-rotate(-10deg); transform: translate(-2px,1px) } 60% { filter: saturate(2.5) hue-rotate(25deg) contrast(1.3); transform: translate(1px,-2px) } 80% { filter: brightness(1.5) hue-rotate(-20deg); transform: translateX(-3px) } 100% { filter: none; transform: none } }
/* 2 : dechirure horizontale */
video.coupure-2 { animation: coupure-dechirure .08s steps(2) 4 }
@keyframes coupure-dechirure { 0% { clip-path: inset(0); transform: none } 25% { clip-path: inset(30% 0 40% 0); transform: translateX(8px); filter: brightness(1.4) } 50% { clip-path: inset(60% 0 10% 0); transform: translateX(-5px); filter: hue-rotate(30deg) } 75% { clip-path: inset(10% 0 70% 0); transform: translateX(4px); filter: saturate(2) } 100% { clip-path: inset(0); transform: none; filter: none } }
/* 3 : flash et zoom */
video.coupure-3 { animation: coupure-flash .3s ease-out 1 }
@keyframes coupure-flash { 0% { filter: brightness(3) saturate(0); transform: scale(1.08) } 30% { filter: brightness(1.8) saturate(.5) hue-rotate(10deg); transform: scale(1.03) } 60% { filter: brightness(1.1) saturate(1.2); transform: scale(1.01) } 100% { filter: none; transform: none } }
/* 4 : flou puis net */
video.coupure-4 { animation: coupure-flou .35s ease-out 1 }
@keyframes coupure-flou { 0% { filter: blur(6px) brightness(1.3) contrast(1.5) } 20% { filter: blur(4px) brightness(1.1) hue-rotate(15deg); transform: translate(2px,-1px) } 50% { filter: blur(2px) saturate(1.5); transform: translate(-1px,1px) } 80% { filter: blur(.5px); transform: none } 100% { filter: none } }
/* 5 : bande VHS */
video.coupure-5 { animation: coupure-vhs .1s steps(2) 3 }
@keyframes coupure-vhs { 0% { filter: none; transform: none } 15% { filter: saturate(1.8) brightness(1.2); transform: translateX(4px) skewX(2deg) } 30% { filter: hue-rotate(20deg) contrast(1.4); transform: translate(-6px,1px) skewX(-3deg) } 50% { filter: saturate(.2) brightness(1.6); transform: translate(2px,-2px) skewX(1deg) } 70% { filter: hue-rotate(-15deg) saturate(2); transform: translateX(-3px) skewX(-2deg) } 85% { filter: brightness(.8) contrast(1.3); transform: translate(5px,1px) skewX(2deg) } 100% { filter: none; transform: none } }

/* ecran d'attente, identique pour tous les robots */
.robot-chargement { position: fixed; inset: 0; z-index: 2000; display: grid; place-items: center; padding: 24px;
  background: rgba(10,12,48,.55); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); animation: robot-fondu .25s }
.robot-chargement[hidden] { display: none }
@keyframes robot-fondu { from { opacity: 0 } }
.robot-chargement__boite { display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; background: #fff; border-radius: 24px;
  padding: 28px 30px 24px; width: min(340px, 100%); box-shadow: 0 30px 70px -20px rgba(0,0,0,.6); font-family: 'Inter', system-ui, sans-serif }
.robot-chargement__boite b { font-size: 1.05rem; color: #14143a } .robot-chargement__boite small { color: #6b6f8f }
.robot-chargement__anneau { position: relative; width: 84px; height: 84px; display: grid; place-items: center; margin-bottom: 10px }
.robot-chargement__anneau::before { content: ''; position: absolute; inset: 0; border-radius: 50%; border: 4px solid #e8e8f8;
  border-top-color: #000091; border-right-color: #7b5cff; animation: robot-tourne .9s linear infinite }
@keyframes robot-tourne { to { transform: rotate(360deg) } }
@media (prefers-reduced-motion: reduce) { .robot-chargement__anneau::before { animation: none } }