/* rodriguepoclet.fr — installation d'Orbit Cache dans le gestionnaire de modules (décorative), partiel
   templates/partials/visuel-installation.php. Chargée sur l'accueil (carte Modules) et sur le catalogue /modules.
   Maquette : docs/maquettes/animations/PiliersEssai3.dc.html. Le cadre (hauteur, bordure, arrondi) est donné par la
   page : .pilier__visuel sur l'accueil, .carte-module__anime sur le catalogue. */

/* Visuel de la carte Modules : installation d'Orbit Cache (même maquette). L'état sans animation est l'état final ;
   le curseur est placé par rapport au bord droit, là où sont le bouton et l'interrupteur quelle que soit la largeur.
   Chaque ligne reste sur une ligne (points de suspension sur une carte étroite) : le bouton et l'interrupteur ne
   bougent pas en hauteur et « Vos pages en 7 ms » reste dans le cadre. */
.installation { position: relative; background: var(--blanc); font-size: 13px; }
.installation__fil { height: 30px; display: flex; align-items: center; gap: 6px; padding: 0 14px; border-bottom: 1px solid var(--trait-doux); background: #F0EEE8; color: var(--gris); font-size: 11.5px; }
.installation__fil span { flex-shrink: 0; }
.installation__fil strong { min-width: 0; overflow: hidden; color: var(--encre); font-weight: 600; white-space: nowrap; text-overflow: ellipsis; }
.installation__corps { display: flex; flex-direction: column; gap: 12px; padding: 14px; }
.installation__module { display: flex; align-items: center; gap: 10px; }
.installation__icone { width: 36px; height: 36px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; border-radius: 10px; background: var(--nuit); color: var(--orange); }
.installation__nom { display: flex; flex-direction: column; min-width: 0; }
.installation__nom strong { overflow: hidden; font-size: 14px; white-space: nowrap; text-overflow: ellipsis; }
.installation__nom span { overflow: hidden; color: var(--gris); font-size: 11.5px; white-space: nowrap; text-overflow: ellipsis; }
.installation__bouton { position: relative; width: 104px; height: 32px; flex-shrink: 0; margin-left: auto; overflow: hidden; border-radius: 16px; background: #E4EFD9; font-size: 12.5px; font-weight: 600; }
.installation__jauge { position: absolute; top: 0; bottom: 0; left: 0; width: 0; background: rgba(245, 146, 29, .35); }
.installation__etat { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; opacity: 0; }
.installation__etat--installer { color: var(--sur-nuit); }
.installation__etat--en-cours { color: var(--encre); }
.installation__etat--installe { color: #1F6B3A; opacity: 1; }
.installation__reglage { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 12px; border-radius: 10px; background: var(--fond); font-weight: 600; }
.installation__reglage > span:first-child { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.installation__interrupteur { position: relative; width: 38px; height: 22px; flex-shrink: 0; border-radius: 11px; background: var(--orange); }
.installation__interrupteur::after { content: ''; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: var(--blanc); translate: 16px 0; }
.installation__resultat { display: inline-flex; align-items: center; gap: 6px; color: var(--orange-texte); font: 700 16px/1.2 var(--police-titre); white-space: nowrap; }
.installation__resultat svg { color: var(--orange); }
.installation__curseur { position: absolute; top: 170px; right: 140px; width: 22px; height: 22px; opacity: 0; pointer-events: none; }

@keyframes installation-installer { 0%, 17% { opacity: 1; } 17.1%, 100% { opacity: 0; } }
@keyframes installation-en-cours { 0%, 17% { opacity: 0; } 17.1%, 39% { opacity: 1; } 39.1%, 100% { opacity: 0; } }
@keyframes installation-installe { 0%, 39% { opacity: 0; } 39.1%, 100% { opacity: 1; } }
@keyframes installation-jauge { 0%, 17% { width: 0; } 39% { width: 100%; } 39.1%, 100% { width: 0; } }
@keyframes installation-bouton { 0%, 17% { background-color: var(--nuit); } 17.1%, 39% { background-color: var(--sable); } 39.1%, 100% { background-color: #E4EFD9; } }
@keyframes installation-reglage { 0%, 39% { opacity: .35; } 42%, 100% { opacity: 1; } }
@keyframes installation-interrupteur { 0%, 48% { background-color: var(--trait); } 50%, 100% { background-color: var(--orange); } }
@keyframes installation-bascule { 0%, 48% { translate: 0 0; } 50%, 100% { translate: 16px 0; } }
@keyframes installation-resultat { 0%, 55% { opacity: 0; } 60%, 100% { opacity: 1; } }
@keyframes installation-curseur {
  0% { top: 170px; right: 140px; opacity: 0; }
  4% { top: 170px; right: 140px; opacity: 1; }
  16%, 40% { top: 60px; right: 47px; }
  48% { top: 111px; right: 26px; }
  54% { top: 111px; right: 26px; opacity: 1; }
  58%, 100% { top: 111px; right: 26px; opacity: 0; }
}

@media (prefers-reduced-motion: no-preference) {
  .installation__etat--installer { animation: installation-installer 7.5s infinite; }
  .installation__etat--en-cours { animation: installation-en-cours 7.5s infinite; }
  .installation__etat--installe { animation: installation-installe 7.5s infinite; }
  .installation__jauge { animation: installation-jauge 7.5s linear infinite; }
  .installation__bouton { animation: installation-bouton 7.5s infinite; }
  .installation__reglage { animation: installation-reglage 7.5s infinite; }
  .installation__interrupteur { animation: installation-interrupteur 7.5s infinite; }
  .installation__interrupteur::after { animation: installation-bascule 7.5s infinite; }
  .installation__resultat { animation: installation-resultat 7.5s infinite; }
  .installation__curseur { animation: installation-curseur 7.5s ease-in-out infinite; }
}