/* ============================================================
   Ecran d'accueil AURA — composition de Francois (Accueil-BG.svg),
   amenee en fondu rapide.

   Deux partis pris :
   - Le fond est BLANC, en dur. Ce n'est pas un oubli du theme sombre : la
     composition est un trace fin blanc-sur-blanc avec des degrades pastel,
     elle disparaitrait litteralement sur fond anthracite.
   - La scene a EXACTEMENT les proportions du dessin (2154,88 x 1134,22).
     C'est ce qui permet de poser de vrais champs de saisie sur les cadres
     dessines : dans une boite aux memes proportions, un pourcentage tombe au
     pixel pres sur la coordonnee du SVG, quelle que soit la taille de l'ecran.
   ============================================================ */

.accueil-page {
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  background: #FFFFFF;
  font-family: 'Inter', 'SF Pro Display', -apple-system, sans-serif;
  overflow: hidden;
}

.accueil-scene {
  position: relative;
  margin: auto;
  width: min(100vw, calc(100dvh * 2154.88 / 1134.22));
  aspect-ratio: 2154.88 / 1134.22;
  /* Unite de reference pour tout ce qui se pose par-dessus : 1cqw = 1 % de la
     largeur de la scene. Le texte des champs suit donc le dessin quand la
     fenetre change de taille, au lieu de flotter a une taille fixe. */
  container-type: inline-size;
}

.accueil-scene > svg {
  display: block;
  width: 100%;
  height: 100%;
}

/* ---------- Les deux logos, ancres aux bords de l'ECRAN ----------
   Sortis du dessin (voir deploy/preparer-accueil-svg.py) : la composition se
   centre en gardant ses proportions, ses bords ne sont donc jamais ceux de la
   fenetre. Seule une image autonome peut tenir la consigne des 20 px. */

.accueil-logo {
  position: fixed;
  z-index: 2;
}

.accueil-logo--icone {
  top: 20px;
  left: 20px;
  width: clamp(52px, 5vw, 96px);
}

.accueil-logo--signature {
  right: 20px;
  bottom: 20px;
  width: clamp(96px, 9vw, 168px);
}

/* ---------- Les champs, poses sur leurs cadres dessines ----------
   Coordonnees relevees dans le SVG lui-meme :
     cadre USER      x 976,91  y 753,13  l 216,22  h 23,8
     cadre PASSWORD  x 976,91  y 808,31  l 216,22  h 23,8
   converties en pourcentages de 2154,88 x 1134,22. */

.accueil-formulaire {
  position: absolute;
  inset: 0;
  z-index: 1;
}

.accueil-champ {
  position: absolute;
  left: 45.335%;
  width: 10.034%;
  height: 2.098%;
  /* Indispensable ici : sans lui, le rembourrage s'AJOUTE a la largeur et le
     champ deborde de 30 px la pilule dessinee — le texte n'est alors plus
     centre sur son cadre. */
  box-sizing: border-box;
  padding: 0 .8cqw;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: #4A4E63;
  font-family: inherit;
  font-size: .78cqw;
  letter-spacing: .12em;
  text-align: center;
  outline: none;
}

#accueil-user { top: 66.400%; }
#accueil-password { top: 71.266%; }

/* Le cadre dessine ne reagit pas au focus : c'est une image. On rend donc la
   ligne active visible nous-memes, sans quoi on ne saurait pas ou l'on tape. */
.accueil-champ:focus {
  box-shadow: 0 0 0 .12cqw rgba(109, 93, 246, .55);
}

.accueil-valider {
  position: absolute;
  top: 71.266%;
  left: 56.2%;
  height: 2.098%;
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(109, 93, 246, .10);
  color: #6D5DF6;
  cursor: pointer;
  opacity: 0;
  transition: opacity 300ms ease, background 200ms ease;
}

/* Le bouton n'apparait qu'une fois la saisie commencee : au repos, l'ecran
   doit rester exactement la composition de Francois. */
.accueil-formulaire:focus-within .accueil-valider,
.accueil-formulaire.rempli .accueil-valider {
  opacity: 1;
}

.accueil-valider:hover { background: rgba(109, 93, 246, .2); }

.accueil-fleche {
  width: .55cqw;
  height: .55cqw;
  border: solid currentColor;
  border-width: .1cqw .1cqw 0 0;
  transform: rotate(45deg);
  margin-left: -.15cqw;
}

.accueil-erreur {
  position: absolute;
  top: 75.5%;
  left: 0;
  right: 0;
  margin: 0;
  text-align: center;
  font-size: .72cqw;
  letter-spacing: .1em;
  color: #D6455B;
}

/* ---------- L'entree en scene ----------
   Chaque bloc part legerement plus bas et transparent, puis se pose. Les
   retards s'enchainent vite (moins d'une seconde en tout) : c'est une
   respiration, pas une introduction a regarder. */

.aura-bloc,
.accueil-formulaire {
  opacity: 0;
  transform: translateY(14px);
}

.accueil-page.est-entree .aura-bloc,
.accueil-page.est-entree .accueil-formulaire {
  animation: aura-apparition 620ms cubic-bezier(.22, .61, .36, 1) forwards;
}

.accueil-page.est-entree .accueil-logo--icone { animation-delay: 60ms; }
.accueil-page.est-entree #aura-lettres { animation-delay: 180ms; }
.accueil-page.est-entree #aura-connexion,
.accueil-page.est-entree .accueil-formulaire { animation-delay: 480ms; }
.accueil-page.est-entree .accueil-logo--signature { animation-delay: 620ms; }

@keyframes aura-apparition {
  to { opacity: 1; transform: translateY(0); }
}

/* Sur un telephone, la composition (deux fois plus large que haute) devient
   une bande au milieu de l'ecran. C'est assume : l'agrandir pour "remplir"
   coupait le premier A et le dernier, l'icone et la signature — essaye le
   17/08/2026, le resultat ne ressemblait plus a rien. Une composition entiere
   et modeste vaut mieux qu'une composition imposante et amputee.
   Les champs, eux, ne peuvent pas suivre : a cette echelle ils seraient
   illisibles et intapables. Ils passent donc en taille reelle, sous le
   dessin. */
@media (max-aspect-ratio: 1/1) {
  .accueil-formulaire {
    position: fixed;
    inset: auto 0 12vh 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
  }
  .accueil-champ,
  #accueil-user,
  #accueil-password {
    position: static;
    width: min(78vw, 320px);
    height: 44px;
    font-size: 15px;
    background: #FFFFFF;
    border: 1px solid rgba(21, 24, 45, .14);
    box-shadow: 0 2px 10px rgba(28, 31, 46, .08);
  }
  .accueil-valider {
    position: static;
    opacity: 1;
    width: 44px;
    height: 44px;
    aspect-ratio: auto;
  }
  .accueil-fleche { width: 9px; height: 9px; border-width: 2px 2px 0 0; }
  .accueil-erreur { position: static; font-size: 13px; }
  /* Les cadres dessines feraient doublon avec les vrais champs. */
  #aura-connexion { display: none; }
}

/* Mouvement reduit demande par le systeme : on montre l'image, sans le
   ballet. Une animation n'a jamais le droit d'etre la condition d'affichage. */
@media (prefers-reduced-motion: reduce) {
  .aura-bloc,
  .accueil-formulaire { opacity: 1; transform: none; }
  .accueil-page.est-entree .aura-bloc,
  .accueil-page.est-entree .accueil-formulaire { animation: none; }
}