/* ══════════════════════════════════════════════════════════════════════
   Écran de chargement — le tout premier écran de l'application.

   Il est servi par le document lui-même (layouts/master.blade.php,
   auth/login.blade.php, auth/passwords/*.blade.php) et couvre les
   secondes pendant lesquelles le bundle d'entrée se télécharge. C'est,
   littéralement, le premier contact visuel avec FiaVia : il doit être
   soigné, pas seulement fonctionnel.

   ── Pourquoi une grille et non trois blocs en `position: absolute` ──

   L'ancienne version empilait le logo et l'anneau en absolu, chacun avec
   son `top` et son `left` en pourcentage. Deux conséquences :

   1. Tout élément AJOUTÉ au conteneur (le message d'attente de
      PERF-01, par exemple) restait dans le flux normal et atterrissait
      donc dans le coin supérieur gauche de l'écran — ce qui se lit comme
      un bug d'affichage, exactement au moment où l'utilisateur se
      demande déjà si la page est morte.
   2. Les décalages étaient faux : `left: calc(50% - 50px)` pour une
      boîte de 80 px, `calc(50% - 70px)` pour une boîte de 120 px. Le
      bloc entier était posé 10 px à gauche du centre réel.

   La grille règle les deux : le logo et l'anneau partagent la MÊME
   cellule (ligne 1) donc restent concentriques sans un seul pixel codé
   en dur, et tout ce qui vient ensuite (nom de l'instance, barre de
   progression, message d'attente) s'empile naturellement dessous.

   ── Pourquoi une hauteur réservée sur la dernière ligne ──

   Le message d'attente apparaît à la huitième seconde. S'il poussait la
   mise en page à ce moment-là, le logo sauterait sous les yeux de
   l'utilisateur. La ligne 4 réserve donc sa place d'avance : rien ne
   bouge quand le texte s'affiche, et l'espace vide place le logo
   légèrement au-dessus du centre géométrique — là où l'œil l'attend.
   ══════════════════════════════════════════════════════════════════════ */

:root {
  --fv-load-green: #10b50c;
  --fv-load-blue: #2563eb;
  --fv-load-ink: #0f172a;
  --fv-load-muted: #5b6676;
}

.loading_wrap {
  position: absolute;
  width: 100%;
  height: 100%;
  overflow: hidden;
  box-sizing: border-box;
  padding: 24px;

  display: grid;
  grid-template-columns: minmax(0, 1fr);
  /* 1 : logo + anneau — 2 : nom de l'instance — 3 : barre — 4 : message.
     Aucun `gap` : chaque élément porte sa propre marge, pour qu'une ligne
     vide (le nom est absent du chargeur interne du POS) ne laisse pas de
     trou. */
  grid-template-rows: auto auto auto minmax(96px, auto);
  justify-items: center;
  align-content: center;

  background-color: #ffffff;
  background-image:
    radial-gradient(900px 520px at 50% -12%, rgba(37, 99, 235, 0.08), rgba(37, 99, 235, 0) 62%),
    radial-gradient(680px 460px at 50% 112%, rgba(16, 181, 12, 0.08), rgba(16, 181, 12, 0) 64%);

  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ── Ligne 1 · le logo ───────────────────────────────────────────── */

.loader_logo {
  grid-row: 1;
  grid-column: 1;
  place-self: center;
  position: relative;
  height: 64px;
  width: 64px;
  animation: fv-load-breathe 3.4s ease-in-out infinite;
  -webkit-animation: fv-load-breathe 3.4s ease-in-out infinite;
}

/* Halo laiteux : détache le logo du dégradé de fond sans ombre portée
   visible. Pas de `z-index` négatif — `.loading_wrap` ne crée pas de
   contexte d'empilement, le halo passerait DERRIÈRE son propre fond. */
.loader_logo::before {
  content: "";
  position: absolute;
  top: -26px;
  right: -26px;
  bottom: -26px;
  left: -26px;
  border-radius: 50%;
  background: radial-gradient(circle,
    rgba(255, 255, 255, 0.95) 38%,
    rgba(255, 255, 255, 0) 72%);
}

.loader_logo img {
  position: relative; /* passe au-dessus du halo, sans z-index */
  display: block;
  height: 100%;
  width: 100%;
  object-fit: contain;
  filter: drop-shadow(0 6px 14px rgba(15, 23, 42, 0.14));
}

/* ── Ligne 1 · l'anneau, concentrique au logo ────────────────────── */

.loading {
  grid-row: 1;
  grid-column: 1;
  place-self: center;
  position: relative;
  box-sizing: border-box;
  width: 128px;
  height: 128px;
  border-radius: 50%;
  border: 2px solid rgba(37, 99, 235, 0.13);
  border-top-color: var(--fv-load-green);
  border-right-color: rgba(37, 99, 235, 0.55);
  animation: fv-load-spin 1.15s cubic-bezier(0.62, 0.16, 0.36, 0.84) infinite;
  -webkit-animation: fv-load-spin 1.15s cubic-bezier(0.62, 0.16, 0.36, 0.84) infinite;
}

/* Second arc, plus lent et en sens inverse : donne de la profondeur sans
   ajouter un seul nœud au document. */
.loading::before {
  content: "";
  position: absolute;
  top: 11px;
  right: 11px;
  bottom: 11px;
  left: 11px;
  border-radius: 50%;
  border: 2px solid transparent;
  border-bottom-color: rgba(16, 181, 12, 0.42);
  border-left-color: rgba(37, 99, 235, 0.26);
  animation: fv-load-spin-rev 2.4s linear infinite;
  -webkit-animation: fv-load-spin-rev 2.4s linear infinite;
}

/* ── Ligne 2 · nom de l'instance ─────────────────────────────────── */

.loading_brand {
  grid-row: 2;
  grid-column: 1;
  margin: 26px 0 0;
  max-width: 100%;
  text-align: center;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: 0.32em;
  /* L'interlettrage ajoute un blanc APRÈS la dernière lettre : le
     retrait compense, sinon le mot est décentré vers la gauche. */
  text-indent: 0.32em;
  text-transform: uppercase;
  color: var(--fv-load-ink);
  opacity: 0.82;
  animation: fv-load-rise 0.7s 0.1s ease both;
  -webkit-animation: fv-load-rise 0.7s 0.1s ease both;
}

/* ── Ligne 3 · barre de progression indéterminée ─────────────────── */

.loading_wrap::after {
  content: "";
  grid-row: 3;
  grid-column: 1;
  width: 200px;
  max-width: 60vw;
  height: 3px;
  margin-top: 26px;
  border-radius: 999px;
  background-color: rgba(15, 23, 42, 0.07);
  background-image: linear-gradient(90deg,
    rgba(16, 181, 12, 0) 0%,
    var(--fv-load-green) 42%,
    var(--fv-load-blue) 72%,
    rgba(37, 99, 235, 0) 100%);
  background-repeat: no-repeat;
  background-size: 48% 100%;
  animation: fv-load-sweep 1.6s cubic-bezier(0.55, 0.1, 0.45, 0.9) infinite;
  -webkit-animation: fv-load-sweep 1.6s cubic-bezier(0.55, 0.1, 0.45, 0.9) infinite;
}

/* ── Ligne 4 · message d'attente (PERF-01) ───────────────────────── */

/* Volontairement sans `display` : l'attribut `hidden` doit continuer à
   masquer le bloc tant que le minuteur ne l'a pas révélé. */
.loading_wrap .loading_hint {
  grid-row: 4;
  grid-column: 1;
  margin-top: 26px;
  max-width: 440px;
  padding: 0 16px;
  box-sizing: border-box;
  text-align: center;
  animation: fv-load-rise 0.5s ease both;
  -webkit-animation: fv-load-rise 0.5s ease both;
}

.loading_wrap .loading_hint p {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.65;
  color: var(--fv-load-muted);
}

.loading_wrap .loading_hint button {
  margin-top: 16px;
  padding: 10px 22px;
  border: 0;
  border-radius: 10px;
  background-image: linear-gradient(135deg, #3b82f6, #1d4ed8);
  color: #ffffff;
  font-family: inherit;
  font-size: 13.5px;
  font-weight: 600;
  cursor: pointer;
  box-shadow: 0 6px 16px rgba(37, 99, 235, 0.28);
  transition: transform 0.15s ease, box-shadow 0.15s ease, filter 0.15s ease;
}

.loading_wrap .loading_hint button:hover {
  transform: translateY(-1px);
  filter: brightness(1.06);
  box-shadow: 0 10px 22px rgba(37, 99, 235, 0.34);
}

.loading_wrap .loading_hint button:active {
  transform: translateY(0);
  box-shadow: 0 4px 10px rgba(37, 99, 235, 0.26);
}

.loading_wrap .loading_hint button:focus-visible {
  outline: 2px solid var(--fv-load-blue);
  outline-offset: 3px;
}

/* ── Animations ──────────────────────────────────────────────────── */

@keyframes fv-load-spin {
  to { transform: rotate(360deg); }
}

@-webkit-keyframes fv-load-spin {
  to { -webkit-transform: rotate(360deg); }
}

@keyframes fv-load-spin-rev {
  to { transform: rotate(-360deg); }
}

@-webkit-keyframes fv-load-spin-rev {
  to { -webkit-transform: rotate(-360deg); }
}

@keyframes fv-load-breathe {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.055); }
}

@-webkit-keyframes fv-load-breathe {
  0%, 100% { -webkit-transform: scale(1); }
  50%      { -webkit-transform: scale(1.055); }
}

@keyframes fv-load-sweep {
  0%   { background-position: -55% 0; }
  100% { background-position: 155% 0; }
}

@-webkit-keyframes fv-load-sweep {
  0%   { background-position: -55% 0; }
  100% { background-position: 155% 0; }
}

@keyframes fv-load-rise {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

@-webkit-keyframes fv-load-rise {
  from { opacity: 0; -webkit-transform: translateY(8px); }
  to   { opacity: 1; -webkit-transform: translateY(0); }
}

/* ── Adaptations ─────────────────────────────────────────────────── */

/* Écrans bas (tablette de caisse en paysage, moniteur client) : le bloc
   complet ne doit jamais être rogné par `overflow: hidden`. */
@media (max-height: 560px) {
  .loading_wrap {
    grid-template-rows: auto auto auto minmax(64px, auto);
  }
  .loading { width: 92px; height: 92px; }
  .loading::before { top: 8px; right: 8px; bottom: 8px; left: 8px; }
  .loader_logo { height: 46px; width: 46px; }
  .loader_logo::before { top: -18px; right: -18px; bottom: -18px; left: -18px; }
  .loading_brand { margin-top: 18px; font-size: 13px; }
  .loading_wrap::after { margin-top: 18px; }
  .loading_wrap .loading_hint { margin-top: 18px; }
}

/* Mouvement réduit : on ralentit, on ne supprime pas. Un chargeur figé
   ne dit plus rien — c'est précisément le défaut que PERF-01 corrige. */
@media (prefers-reduced-motion: reduce) {
  .loader_logo,
  .loading::before {
    animation: none;
    -webkit-animation: none;
  }
  .loading {
    animation-duration: 2.4s;
    -webkit-animation-duration: 2.4s;
    animation-timing-function: linear;
    -webkit-animation-timing-function: linear;
  }
  .loading_wrap::after {
    animation-duration: 2.8s;
    -webkit-animation-duration: 2.8s;
    animation-timing-function: linear;
    -webkit-animation-timing-function: linear;
  }
  .loading_brand,
  .loading_wrap .loading_hint {
    animation: none;
    -webkit-animation: none;
    opacity: 1;
  }
}