/* Fond animé du portail auth.mog-app.ch.
   Servi par Caddy comme fichier statique — autorisé par `style-src 'self'`,
   donc la CSP d'Authelia n'est pas modifiée d'un caractère.

   POUR RETIRER LE FOND : supprimer la directive `replace` du Caddyfile et
   recharger Caddy. Ni Authelia, ni son image, ni ses comptes ne sont touchés. */

/* MUI (CssBaseline) peint le fond sur `body` à l'exécution, sans !important :
   on le rend transparent et la couleur de base remonte sur `html`, ce qui
   laisse le SVG s'intercaler entre les deux. */
html { background-color: #ffffff; }
body { background: transparent !important; }

/* ── MODE CLAIR (défaut) ──────────────────────────────────────────────────
   Teintes plus profondes et un peu plus opaques : les tons pensés pour un fond
   noir s'évanouissent sur du blanc. Sans ça, le fond est quasi invisible en
   clair — c'est ce qui manquait. */
.mog-s1{stop-color:rgba(109, 40, 217, .55)}
.mog-s2{stop-color:rgba(8, 145, 178, .55)}
.mog-s3{stop-color:rgba(29, 78, 216, .55)}

/* ── MODE SOMBRE ──────────────────────────────────────────────────────────
   Sans choix explicite, on suit le système — comme le portail lui-même. */
@media (prefers-color-scheme: dark) {
  html { background-color: #0a0a0a; }
  .mog-s1{stop-color:rgba(124, 58, 237, .5)}
  .mog-s2{stop-color:rgba(34, 211, 238, .5)}
  .mog-s3{stop-color:rgba(37, 99, 235, .5)}
}

/* ── CHOIX EXPLICITE (le bouton) ──────────────────────────────────────────
   Ces sélecteurs sont plus spécifiques que les règles ci-dessus, media query
   comprise : dès que mog-theme.js pose l'attribut, le choix de la personne
   l'emporte sur le réglage système, dans les deux sens. */
html[data-mog-theme="light"] { background-color: #ffffff; }
html[data-mog-theme="light"] .mog-s1{stop-color:rgba(109, 40, 217, .55)}
html[data-mog-theme="light"] .mog-s2{stop-color:rgba(8, 145, 178, .55)}
html[data-mog-theme="light"] .mog-s3{stop-color:rgba(29, 78, 216, .55)}
html[data-mog-theme="dark"] { background-color: #0a0a0a; }
html[data-mog-theme="dark"] .mog-s1{stop-color:rgba(124, 58, 237, .5)}
html[data-mog-theme="dark"] .mog-s2{stop-color:rgba(34, 211, 238, .5)}
html[data-mog-theme="dark"] .mog-s3{stop-color:rgba(37, 99, 235, .5)}

/* ── LE BOUTON ────────────────────────────────────────────────────────────
   En haut à gauche : le sélecteur de langue d'Authelia occupe déjà le coin
   droit, et se superposer à lui rendrait l'un des deux inutilisable. */
.mog-theme-toggle {
  position: fixed;
  top: 14px;
  left: 14px;
  z-index: 2;              /* au-dessus de #root (1), donc jamais sous le portail */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  padding: 0;
  border-radius: 50%;
  cursor: pointer;
  color: #334155;
  background: rgba(255, 255, 255, .72);
  border: 1px solid rgba(15, 23, 42, .14);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition: color .15s, border-color .15s, background-color .15s;
}
.mog-theme-toggle:hover { border-color: rgba(37, 99, 235, .55); color: #1d4ed8; }
.mog-theme-toggle:focus-visible { outline: 2px solid #2563eb; outline-offset: 2px; }

@media (prefers-color-scheme: dark) {
  .mog-theme-toggle {
    color: #cbd5e1;
    background: rgba(23, 23, 23, .6);
    border-color: rgba(255, 255, 255, .16);
  }
  .mog-theme-toggle:hover { border-color: rgba(34, 211, 238, .6); color: #22d3ee; }
}
html[data-mog-theme="light"] .mog-theme-toggle {
  color: #334155;
  background: rgba(255, 255, 255, .72);
  border-color: rgba(15, 23, 42, .14);
}
html[data-mog-theme="dark"] .mog-theme-toggle {
  color: #cbd5e1;
  background: rgba(23, 23, 23, .6);
  border-color: rgba(255, 255, 255, .16);
}

.mog-bg {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;   /* ne doit jamais intercepter un clic du formulaire */

  /* AUCUNE ANIMATION D'OPACITÉ ICI, ET C'EST DÉLIBÉRÉ.
     L'opacité de ce conteneur n'est jamais animée : elle vaut 1, point.

     Historique de la panne du 2026-08-13, à ne pas rejouer. Ce fichier a porté
     `animation: …Appear 1.2s ease-out both`, dont la première image est
     `opacity: 0` — un simple fondu d'entrée. Résultat en production : fond
     INVISIBLE, sans la moindre erreur en console.

     Deux mécanismes, et le second est le piège :
       1. `fill-mode: both` épingle l'élément sur la première image tant que
          l'animation n'a pas démarré ;
       2. retirer le fill-mode NE SUFFIT PAS — tant que l'animation est *active*,
          même gelée à t=0, c'est sa première image qui s'applique. Or une
          animation ne progresse pas dans un onglet d'arrière-plan ni dans une
          page qui ne compose pas d'images.

     La règle qui en découle : **un élément ne doit jamais dépendre d'une
     animation pour être visible.** Une animation embellit, elle ne révèle pas.
     Le fondu d'entrée a été supprimé ; les tracés, eux, restent animés — leur
     animation ne touche QUE `transform`, jamais l'opacité, donc le pire cas est
     un fond immobile, jamais un fond absent. */
  opacity: 1;
}
.mog-bg svg { width: 100%; height: 100%; display: block; }

/* `position:relative` est indispensable : sans elle, z-index n'a aucun effet
   sur un élément statique et le portail passerait sous le fond. */
#root { position: relative; z-index: 1; }

/* Trois cadences : c'est ce décalage qui donne la profondeur.
   Ces règles portent sur les trois GROUPES, jamais sur les 37 tracés — voir le
   commentaire de svg_fragment() : 37 éléments animés = jusqu'à 37 calques de
   composition, et des éléments qui disparaissent sous pression mémoire GPU. */
.mog-p { animation-iteration-count: infinite; animation-timing-function: ease-in-out; }
.mog-primary{animation-name:mogFloatPrimary;animation-duration:8s}
.mog-secondary{animation-name:mogFloatSecondary;animation-duration:6s}
.mog-accent{animation-name:mogFloatAccent;animation-duration:4s}
@keyframes mogFloatPrimary{0%,100%{transform:translateY(0)}50%{transform:translateY(-15px)}}
@keyframes mogFloatSecondary{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
@keyframes mogFloatAccent{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}

/* Un fond qui bouge sans arrêt derrière un champ de mot de passe gêne
   réellement certaines personnes. Le réglage système fait foi. */
@media (prefers-reduced-motion: reduce) {
  .mog-p { animation: none; }
}