/* WifiZoneSaaS - couche de mouvement (Standard Yiriwaton v4.0, pilier 6).
 * Ajoutee PAR-DESSUS style.css : aucune logique modifiee. Tout ce qui bouge est
 * dans @media (prefers-reduced-motion: no-preference) - un utilisateur qui reduit
 * les animations voit une interface identique, simplement immobile. */

:root {
  --mo-ease: cubic-bezier(.22, 1, .36, 1);
  --mo-rapide: 150ms;
  --mo-base: 260ms;
  --mo-lent: 520ms;
  --mo-ombre: 0 8px 22px rgba(15, 92, 46, .16);
}

/* --- Accessibilite : focus clavier visible ------------------------------------ */
:focus-visible { outline: 3px solid rgba(26, 122, 64, .4); outline-offset: 2px; border-radius: 6px; }
input:focus { border-color: var(--vert); box-shadow: 0 0 0 3px rgba(26, 122, 64, .15); outline: none; }

/* --- Selecteur de langue : ne recouvre plus le bouton Deconnexion --------------
 * (position fixe en haut a droite, par-dessus l'en-tete) -> pastille en bas. */
#yw-selecteur-langue {
  top: auto !important; bottom: 14px; inset-inline-end: 14px !important;
  background: #fff; padding: 4px; border-radius: 12px; box-shadow: 0 4px 16px rgba(0, 0, 0, .18);
}
#app:has(.entete) { padding-bottom: 64px; }

/* --- Chargement : squelette anime a la place du texte ------------------------- */
.chargement {
  position: relative; min-height: 160px; padding: 0; margin: 12px 0;
  font-size: 0; color: transparent; /* le texte reste lu par les lecteurs d'ecran */
}
.chargement::before {
  content: ''; position: absolute; inset: 0; border-radius: 14px;
  background: linear-gradient(90deg, #e8eeea 25%, #f7faf8 40%, #e8eeea 60%);
  background-size: 300% 100%;
}
/* Attente d'un evenement (ex. routeur qui rapporte) : texte conserve + point qui pulse */
.enrol-attente { padding: 12px 0 2px; color: #666; font-size: 14px; display: flex; align-items: center; gap: 10px; }
.enrol-attente::before { content: ''; width: 9px; height: 9px; border-radius: 50%; background: var(--or); flex: none; }

/* --- Ecran vide : illustration au lieu d'un simple texte ---------------------- */
.vide::before {
  content: ''; display: block; width: 104px; height: 104px; margin: 0 auto 14px;
  background: center / contain no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 120'%3E%3Ccircle cx='60' cy='60' r='54' fill='%23e8f5ee'/%3E%3Cpath d='M26 52a48 48 0 0 1 68 0' fill='none' stroke='%231a7a40' stroke-width='7' stroke-linecap='round' opacity='.35'/%3E%3Cpath d='M38 64a31 31 0 0 1 44 0' fill='none' stroke='%231a7a40' stroke-width='7' stroke-linecap='round' opacity='.6'/%3E%3Cpath d='M50 76a14 14 0 0 1 20 0' fill='none' stroke='%231a7a40' stroke-width='7' stroke-linecap='round'/%3E%3Ccircle cx='60' cy='88' r='6' fill='%23f5a623'/%3E%3C/svg%3E");
}

/* --- Transitions de base (survol / appui) ------------------------------------- */
button, .carte, .badge, .onglets button, input, select, textarea {
  transition: transform var(--mo-rapide) var(--mo-ease), box-shadow var(--mo-base) var(--mo-ease),
              background-color var(--mo-base) ease, color var(--mo-base) ease,
              border-color var(--mo-base) ease, filter var(--mo-rapide) ease;
}
button { cursor: pointer; }
button:disabled { opacity: .6; cursor: not-allowed; }

@media (prefers-reduced-motion: no-preference) {
  /* Squelette : balayage lumineux */
  .chargement::before { animation: mo-balayage 1.5s ease-in-out infinite; }
  .enrol-attente::before { animation: mo-pulse 1.4s ease-in-out infinite; }
  .vide::before { animation: mo-flotte 3.4s ease-in-out infinite; }

  /* Entree de page : les blocs arrivent en cascade (rejoue a chaque changement d'onglet,
   * car le contenu est reconstruit) */
  #contenu > *, #admin-contenu > *, #liste-appareils > *, #admin-liste-routeurs > * {
    animation: mo-entree var(--mo-lent) var(--mo-ease) both;
  }
  #contenu > :nth-child(2), #admin-contenu > :nth-child(2), #liste-appareils > :nth-child(2), #admin-liste-routeurs > :nth-child(2) { animation-delay: 60ms; }
  #contenu > :nth-child(3), #admin-contenu > :nth-child(3), #liste-appareils > :nth-child(3), #admin-liste-routeurs > :nth-child(3) { animation-delay: 120ms; }
  #contenu > :nth-child(4), #admin-contenu > :nth-child(4), #liste-appareils > :nth-child(4), #admin-liste-routeurs > :nth-child(4) { animation-delay: 180ms; }
  #contenu > :nth-child(5), #admin-contenu > :nth-child(5), #liste-appareils > :nth-child(5), #admin-liste-routeurs > :nth-child(5) { animation-delay: 240ms; }
  #contenu > :nth-child(n+6), #admin-contenu > :nth-child(n+6), #liste-appareils > :nth-child(n+6), #admin-liste-routeurs > :nth-child(n+6) { animation-delay: 300ms; }

  .entete { animation: mo-descend var(--mo-lent) var(--mo-ease) both; }
  .carte-login { animation: mo-entree var(--mo-lent) var(--mo-ease) 120ms both; }
  .login-pitch { animation: mo-entree var(--mo-lent) var(--mo-ease) both; }
  .login-mockup { animation: mo-entree var(--mo-lent) var(--mo-ease) 240ms both; }

  /* Retours d'action */
  .message-succes, .message-erreur { animation: mo-glisse var(--mo-base) var(--mo-ease) both; }
  .badge { animation: mo-pop 380ms var(--mo-ease) both; }

  /* Micro-interactions */
  .carte:hover { transform: translateY(-2px); box-shadow: var(--mo-ombre); }
  button:active { transform: scale(.97); }
  button.principal:hover:not(:disabled) { filter: brightness(1.07); transform: translateY(-1px); box-shadow: var(--mo-ombre); }
  button.secondaire:hover:not(:disabled) { transform: translateY(-1px); }
  .onglets button:hover { background: rgba(26, 122, 64, .06); }
  .onglets button.actif { animation: mo-onglet var(--mo-base) var(--mo-ease) both; }
}

/* Utilisateur qui reduit les animations : squelette fixe, tout le reste immobile */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

@keyframes mo-balayage { 0% { background-position: 100% 0; } 100% { background-position: -100% 0; } }
@keyframes mo-pulse { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.6); opacity: .45; } }
@keyframes mo-flotte { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-7px); } }
@keyframes mo-entree { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes mo-descend { from { opacity: 0; transform: translateY(-100%); } to { opacity: 1; transform: none; } }
@keyframes mo-glisse { from { opacity: 0; transform: translateX(-10px); } to { opacity: 1; transform: none; } }
@keyframes mo-pop { 0% { transform: scale(.6); opacity: 0; } 70% { transform: scale(1.08); opacity: 1; } 100% { transform: scale(1); } }
@keyframes mo-onglet { from { transform: translateY(3px); } to { transform: none; } }