/* ===========================================================================
   AEC TaskPlan — écran de connexion
   ===========================================================================*/

:root {
  --vert:        #1D6F42;
  --vert-fonce:  #145731;
  --dore:        #E2AA03;
  --encre:       #15202A;
  --encre-douce: #4A5A68;
  --gris:        #8A96A2;
  --trait:       #DDE3E9;
  --champ:       #F7F9FA;
  --rouge:       #B02A2A;
  --rouge-fond:  #FDEDED;
}

*, *::before, *::after { box-sizing: border-box; }

body.login-body {
  margin: 0;
  padding: 24px;
  min-height: 100vh;
  font-family: 'Outfit', 'Segoe UI', 'Roboto', sans-serif;
  color: var(--encre);
  /* Le dégradé d'origine était bleu ciel : générique, et étranger à une marque
     verte et or. Celui-ci reste dans les verts du cabinet et bouge lentement —
     45 secondes — derrière un écran où l'on cherche surtout à taper deux champs. */
  background: linear-gradient(135deg, #0E3A23, #1D6F42, #10462A, #143F28);
  background-size: 300% 300%;
  animation: gradientBG 45s ease-in-out infinite;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ============================================================== le fond animé
   Une vue de planning plutôt qu'un décor abstrait : la grille défile vers la
   gauche — le temps qui passe —, des tâches viennent s'y poser une à une, et le
   trait doré du jour balaie l'écran. Le produit se raconte avant même la
   connexion.

   Aucune image, aucun script : trois couches CSS. Et rien n'est animé sauf
   `transform` et `opacity`, les deux seules propriétés que le navigateur confie
   au GPU — le reste (largeur, position, couleur) forcerait un recalcul de mise
   en page à chaque image, et ferait ramer les postes du cabinet.
   ---------------------------------------------------------------------------*/
.fond-planning {
  position: fixed;
  inset: 0;
  overflow: hidden;
  pointer-events: none;   /* le décor ne doit jamais voler un clic au formulaire */
  z-index: 0;
}

/* --- la grille, qui défile --------------------------------------------- */
.fond-planning::before {
  content: "";
  position: absolute;
  /* Débordement volontaire : la grille glisse d'exactement une colonne, donc
     il faut de la matière au-delà des bords pour que la boucle soit invisible. */
  inset: -10% -10% -10% -10%;
  background-image:
    repeating-linear-gradient(90deg, rgba(255,255,255,.07) 0 1px, transparent 1px 68px),
    repeating-linear-gradient( 0deg, rgba(255,255,255,.05) 0 1px, transparent 1px 46px);
  animation: defilerGrille 24s linear infinite;
}

/* --- les tâches qui se posent ------------------------------------------ */
.fond-planning .bloc {
  position: absolute;
  height: 14px;
  border-radius: 4px;
  transform-origin: left center;
  transform: scaleX(0);
  background: rgba(255, 255, 255, .13);
  animation: poserTache 14s ease-in-out infinite;
}
/* Des largeurs et des hauteurs irrégulières : un planning réel n'aligne pas
   des barres identiques. Les retards d'entrée évitent le clignotement collectif. */
.fond-planning .bloc:nth-of-type(1) { top: 22%; left:  8%; width: 190px; animation-delay:  0s; }
.fond-planning .bloc:nth-of-type(2) { top: 34%; left: 26%; width: 120px; animation-delay:  2.5s;
                                      background: rgba(226, 170, 3, .30); }
.fond-planning .bloc:nth-of-type(3) { top: 48%; left: 62%; width: 240px; animation-delay:  5s; }
.fond-planning .bloc:nth-of-type(4) { top: 61%; left: 14%; width: 150px; animation-delay:  7.5s;
                                      background: rgba(226, 170, 3, .22); }
.fond-planning .bloc:nth-of-type(5) { top: 74%; left: 70%; width: 175px; animation-delay: 10s; }
.fond-planning .bloc:nth-of-type(6) { top: 15%; left: 74%; width: 105px; animation-delay: 12s; }

/* --- le trait du jour --------------------------------------------------- */
.fond-planning .jour {
  position: absolute;
  top: 0;
  bottom: 0;
  left: -2px;
  width: 2px;
  background: linear-gradient(180deg,
              rgba(226,170,3,0) 0%, rgba(226,170,3,.55) 25%,
              rgba(226,170,3,.55) 75%, rgba(226,170,3,0) 100%);
  box-shadow: 0 0 22px 3px rgba(226, 170, 3, .30);
  animation: balayerJour 19s ease-in-out infinite;
}

/* --- le voile ----------------------------------------------------------- */
/* Dernier élément, donc peint au-dessus du reste : il éteint le décor au centre
   pour que la carte blanche se détache et que rien ne bouge derrière les champs. */
.fond-planning .voile {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 60% 55% at 50% 50%,
              rgba(14, 58, 35, .82) 0%, rgba(14, 58, 35, .35) 55%, rgba(14, 58, 35, 0) 100%);
}

@keyframes defilerGrille {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-68px, -46px, 0); }  /* un pas de grille exactement */
}

@keyframes poserTache {
  0%          { transform: scaleX(0); opacity: 0; }
  6%          { opacity: 1; }
  26%, 62%    { transform: scaleX(1); opacity: 1; }
  82%, 100%   { transform: scaleX(1); opacity: 0; }
}

@keyframes balayerJour {
  0%        { transform: translateX(0); opacity: 0; }
  8%        { opacity: 1; }
  88%       { opacity: 1; }
  100%      { transform: translateX(100vw); opacity: 0; }
}

/* ---------------------------------------------------------------- la carte */
.login-container {
  /* Au-dessus du décor, qui est en position fixe derrière toute la page. */
  position: relative;
  z-index: 1;
  background-color: #ffffff;
  padding: 40px 34px 32px;
  border-radius: 16px;
  box-shadow: 0 18px 40px rgba(21, 32, 42, 0.22);
  width: 100%;
  max-width: 400px;
  animation: fadeInUp 0.6s ease-out;
  /* Un filet doré rappelle la marque sans qu'on ait à poser le logo deux fois. */
  border-top: 3px solid var(--dore);
}

.login-form {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.login-form .sous-titre {
  margin: 0 0 6px;
  font-size: 13px;
  color: var(--gris);
  text-align: center;
}

/* ------------------------------------------------------------- les champs */
.champ { display: flex; flex-direction: column; gap: 7px; }

.champ label {
  font-size: 13px;
  font-weight: 500;
  color: var(--encre-douce);
}

/* Les champs occupaient 90 % de la largeur quand le bouton en occupait 100 % :
   rien n'était aligné. Ils partagent désormais la même largeur, et
   box-sizing empêche le rembourrage de la faire déborder. */
.login-form input {
  width: 100%;
  padding: 13px 15px;
  border: 1px solid var(--trait);
  border-radius: 9px;
  font-family: inherit;
  font-size: 15px;
  color: var(--encre);
  background-color: var(--champ);
  transition: border-color .18s ease, box-shadow .18s ease, background-color .18s ease;
}

.login-form input::placeholder { color: #A9B4BE; }

.login-form input:hover { border-color: #C4CDD5; }

.login-form input:focus {
  border-color: var(--vert);
  outline: none;
  background-color: #fff;
  box-shadow: 0 0 0 3px rgba(29, 111, 66, 0.16);
}

/* Le remplissage automatique de Chrome repeint le champ en jaune, ce qui
   casse la carte. On lui impose le fond du formulaire. */
.login-form input:-webkit-autofill,
.login-form input:-webkit-autofill:hover,
.login-form input:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--encre);
  -webkit-box-shadow: 0 0 0 40px #ffffff inset;
  transition: background-color 9999s ease-in-out 0s;
}

/* --------------------------------------------------- afficher le mot de passe */
.champ-mdp { position: relative; display: flex; }
.champ-mdp input { padding-right: 46px; }

.voir-mdp {
  position: absolute;
  right: 4px;
  top: 50%;
  transform: translateY(-50%);
  width: 38px;
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 8px;
  background: transparent;
  color: var(--gris);
  font-size: 15px;
  cursor: pointer;
  transition: color .15s ease, background-color .15s ease;
}

.voir-mdp:hover { color: var(--encre-douce); background: #EDF1F4; }

.voir-mdp:focus-visible {
  outline: 2px solid var(--vert);
  outline-offset: 1px;
  color: var(--encre-douce);
}

/* ------------------------------------------------------- indice majuscule */
.indice {
  margin: 0;
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12.5px;
  color: #9A6B00;
}

.indice[hidden] { display: none; }

/* --------------------------------------------------------------- le bouton */
.login-form .valider {
  width: 100%;
  padding: 14px;
  margin-top: 4px;
  border: none;
  border-radius: 9px;
  /* Le vert de l'identité, à la place du turquoise sans rapport avec elle. */
  background: var(--vert);
  color: #fff;
  font-family: inherit;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: .01em;
  cursor: pointer;
  transition: background-color .18s ease, transform .08s ease;
}

.login-form .valider:hover { background: var(--vert-fonce); }
.login-form .valider:active { transform: translateY(1px); }

.login-form .valider:focus-visible {
  outline: 3px solid rgba(29, 111, 66, 0.35);
  outline-offset: 2px;
}

/* Pendant l'envoi : le bouton dit ce qui se passe et refuse un second clic. */
.login-form .valider:disabled {
  background: #6E9A81;
  cursor: progress;
}

/* --------------------------------------------------------------- l'erreur */
.alerte {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 14px;
  border-radius: 9px;
  background: var(--rouge-fond);
  border-left: 3px solid var(--rouge);
  color: var(--rouge);
  font-size: 14px;
  line-height: 1.45;
  text-align: left;
}

.alerte i { margin-top: 2px; flex: none; }

/* ------------------------------------------------------------------ pied */
.pied {
  margin: 2px 0 0;
  font-size: 12.5px;
  color: var(--gris);
  text-align: center;
}

/* ------------------------------------------------------------ animations */
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes gradientBG {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* Un fond qui bouge en permanence gêne certaines personnes, et le système
   d'exploitation permet de le dire. On l'écoute. */
@media (prefers-reduced-motion: reduce) {
  body.login-body { animation: none; }
  .login-container { animation: none; }
  /* Le décor reste, mais figé : la grille et les tâches sont posées, plus rien
     ne bouge. Certains utilisateurs demandent cela au système parce que le
     mouvement leur donne la nausée ou détourne leur attention — le respecter
     n'est pas une option de confort. */
  .fond-planning::before,
  .fond-planning .jour { animation: none; }
  .fond-planning .jour { opacity: .55; transform: translateX(38vw); }
  .fond-planning .bloc { animation: none; transform: scaleX(1); opacity: 1; }
  .login-form input,
  .login-form .valider,
  .voir-mdp { transition: none; }
}

/* ------------------------------------------------------------ petit écran */
@media screen and (max-width: 480px) {
  body.login-body { padding: 16px; }
  .login-container { padding: 32px 22px 26px; }
}