/* =========================================================================
   archangel-system — les ecrans d'avant la session.

   Ce fichier est le reste de xp.css : le chrome a fenetres est parti dans
   _delete\ avec le bureau, mais l'ecran de session et le voile de demarrage
   sont servis AVANT qu'un compte soit connu — donc avant le socle et ses
   preferences. Ils gardent leur mise en page d'epoque jusqu'a leur propre
   refonte ; les deplacer ici, c'est les empecher de mourir avec le bureau.

   Aucune police distante, aucune image distante : Tahoma et Trebuchet MS sont
   sur toute machine Windows, le fond est un degrade CSS. Ces deux ecrans
   s'affichent donc identiquement hors ligne et derriere une CSP stricte.
   ========================================================================= */

:root{
  /* Le repli Luna, fige. Ces ecrans sont servis avant qu'un compte soit connu :
     il n'y a personne dont lire l'ambiance, et il n'y a plus d'ambiances a
     lire — As\Themes est parti dans _delete\ avec le bureau. Ces valeurs ne
     bougent donc plus, jusqu'a la refonte de l'ecran de session.             */
  --chrome-clair:#2a84f0;      /* haut du biseau des barres de titre      */
  --chrome-fonce:#0d55c4;      /* bas, et fond du texte de titre          */
  --chrome-nuit:#1941a5;       /* pied de la barre des tâches             */

  --demarrer-1:#5fbd5f;        /* bouton Démarrer                         */
  --demarrer-2:#3c993c;
  --demarrer-3:#276b27;

  --accent:#3987e5;            /* la teinte qui traverse dans les apps    */

  /* --- Constantes, hors thème ------------------------------------------ */
  --champ:#ffffff;

  --encre:#1b1b17;
  --lien:#0a3d91;

  --sortie:cubic-bezier(.16,1,.3,1);
  --net:cubic-bezier(.65,0,.35,1);

}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:Tahoma,"DejaVu Sans",Verdana,Geneva,sans-serif;
  font-size:11px;
  color:var(--encre);
  overflow:hidden;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
button,input,select,textarea{font-family:inherit;font-size:inherit;color:inherit}
a{color:var(--lien)}
[hidden]{display:none!important}

/* Focus clavier : jamais supprimé, dessiné à la mode XP (pointillé 1px). */
:focus-visible{outline:1px dotted #000;outline-offset:2px}
.sombre :focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:3px}

/* =========================================================================
   1. Écran de session
   ========================================================================= */

.session{
  position:fixed; inset:0;
  display:grid; grid-template-rows:auto 1fr auto;
  background:
    linear-gradient(180deg,var(--chrome-nuit) 0%, var(--chrome-fonce) 22%, var(--chrome-clair) 50%,
                var(--chrome-fonce) 78%, var(--chrome-nuit) 100%);
  color:#fff;
  overflow:auto;
}

/* Les deux filets clairs qui bordent la bande centrale : c'est ce détail,
   plus que le dégradé, qui fait reconnaître l'écran au premier coup d'œil. */
.session::before,
.session::after{
  content:""; position:fixed; left:0; right:0; height:2px;
  background:linear-gradient(90deg,transparent,#f2b52c 12%,#ffd77a 50%,#f2b52c 88%,transparent);
  opacity:.9; pointer-events:none;
}
.session::before{top:18vh}
.session::after{bottom:18vh}

.session-haut{
  padding:22px 34px 0;
  display:flex; align-items:center; gap:10px;
  font-family:"Trebuchet MS",Tahoma,sans-serif;
}
.session-corps{
  display:grid; grid-template-columns:minmax(0,1fr) 2px minmax(0,1.05fr);
  align-items:center; gap:0;
  padding:0 clamp(18px,6vw,90px);
  min-height:0;
}
.session-bas{
  padding:0 34px 20px;
  display:flex; justify-content:space-between; align-items:flex-end; gap:16px;
  font-size:11px; color:#cfe3f7;
}

.session-marque{
  font-family:"Trebuchet MS",Tahoma,sans-serif;
  font-size:clamp(30px,5.2vw,54px);
  font-weight:700; line-height:.92;
  letter-spacing:-.035em;
  text-shadow:0 2px 0 rgba(0,0,0,.28);
  margin:0;
}
.session-marque em{
  font-style:normal; font-weight:400; opacity:.72;
  display:block; font-size:.34em; letter-spacing:.34em; text-transform:uppercase;
  margin-top:.55em; text-shadow:none;
}
.session-consigne{
  font-family:"Trebuchet MS",Tahoma,sans-serif;
  font-size:clamp(15px,1.7vw,20px);
  line-height:1.45; margin:26px 0 0; max-width:26ch;
  text-shadow:0 1px 0 rgba(0,0,0,.25);
}
.session-sep{
  align-self:stretch; margin:8vh 0;
  background:linear-gradient(180deg,transparent,rgba(255,255,255,.55),transparent);
}

.session-panneau{padding:0 0 0 clamp(18px,4vw,54px)}

/* --- saisie -------------------------------------------------------------
   Les regles .comptes / .compte / .compte-vignette / .compte-nom /
   .compte-role sont parties avec la liste de comptes : la page ne nomme plus
   personne, et une feuille garde rarement une regle « au cas ou ».

   .saisie n'est plus masquee par defaut. Elle l'etait parce qu'elle attendait
   qu'on choisisse un compte dans la liste ; il n'y a plus rien a attendre, le
   formulaire EST l'ecran. La classe `on` reste posee dans le balisage : elle
   porte l'animation d'entree, et ne plus la trouver ferait disparaitre le
   panneau chez qui ouvre la page sans JavaScript. */
.saisie{
  margin-top:14px; padding:14px 12px 12px clamp(18px,4vw,54px);
  display:block;
}
.saisie.on{animation:glisse .28s var(--sortie) both}
@keyframes glisse{from{opacity:0;transform:translateY(-6px)}}

/* Le deuxieme intitule -- « Mot de passe » -- respire au-dessus de son champ.
   Sans quoi les deux lignes se collent et se lisent comme un seul bloc. */
.saisie label.apres{margin-top:12px}

/* Champ court, comme à l'origine : un champ pleine largeur sur un écran 24"
   donne l'impression d'attendre une phrase, pas un mot de passe. */
.saisie-ligne{display:flex;align-items:center;gap:8px;max-width:268px}
.saisie label{display:block;font-size:11px;margin-bottom:5px;opacity:.9}
.champ-mdp{
  flex:1 1 auto; min-width:0;
  height:26px; padding:0 8px;
  border:1px solid #7f9db9; border-radius:2px;
  background:var(--champ); color:#000;
  box-shadow:inset 1px 1px 0 rgba(0,0,0,.14);
  font-size:12px; letter-spacing:.08em;
}
.champ-mdp:focus{outline:none;border-color:var(--chrome-clair);box-shadow:inset 1px 1px 0 rgba(0,0,0,.14),0 0 0 2px var(--chrome-clair)}
/* L'espacement des lettres sert a rendre les points d'un mot de passe
   comptables. Sur un nom d'utilisateur il ne fait que deformer le mot. */
#identifiant{letter-spacing:normal}

.fleche{
  flex:none; width:28px;height:28px;border-radius:50%;
  border:1px solid rgba(255,255,255,.6);
  background:radial-gradient(circle at 34% 28%,var(--demarrer-1),var(--demarrer-2) 62%,var(--demarrer-3));
  color:#fff; font-size:14px; line-height:1; cursor:pointer;
  box-shadow:0 2px 5px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.5);
  transition:filter .14s var(--sortie), transform .14s var(--sortie);
}
.fleche:hover{filter:brightness(1.12)}
.fleche:active{transform:translateY(1px)}
.fleche[disabled]{filter:grayscale(.7) brightness(.8);cursor:default}

.aide-mdp{margin:9px 0 0;font-size:11px;opacity:.78;max-width:38ch;line-height:1.5}

.alerte{
  margin-top:10px; padding:7px 10px; max-width:42ch;
  background:rgba(140,20,20,.55);
  border:1px solid rgba(255,190,190,.55); border-radius:3px;
  font-size:11px; line-height:1.5;
  animation:secousse .3s var(--net);
}
.alerte.ok{background:rgba(20,110,40,.5);border-color:rgba(180,255,190,.5)}
.alerte.info{background:rgba(10,40,110,.5);border-color:rgba(190,215,255,.5)}
@keyframes secousse{
  0%,100%{transform:translateX(0)}
  22%{transform:translateX(-5px)}
  58%{transform:translateX(4px)}
  82%{transform:translateX(-2px)}
}

.majuscules{
  display:inline-flex; align-items:center; gap:6px;
  margin-top:8px; padding:4px 8px; border-radius:3px;
  background:rgba(255,214,102,.2); border:1px solid rgba(255,214,102,.5);
  font-size:11px;
}

.session-bas .btn-lien{
  background:none;border:0;color:#dbeaff;cursor:pointer;
  text-decoration:underline;text-underline-offset:2px;padding:2px
}
.session-bas .btn-lien:hover{color:#fff}

/* =========================================================================
   2. Chargement — la barre à trois blocs du démarrage XP
   ========================================================================= */

.demarrage{
  position:fixed; inset:0; z-index:900;
  background:#000; color:#fff;
  display:grid; grid-template-rows:1fr auto 1fr; justify-items:center;
  gap:26px; padding:8vh 20px;
  opacity:0; pointer-events:none;
  transition:opacity .3s var(--sortie);
}
.demarrage.on{opacity:1;pointer-events:auto}
.demarrage-logo{
  align-self:end;
  font-family:"Trebuchet MS",Tahoma,sans-serif;
  font-size:clamp(26px,4.4vw,44px); font-weight:700; letter-spacing:-.03em;
  display:flex; align-items:baseline; gap:12px;
}
.demarrage-logo span{font-weight:400;font-size:.42em;opacity:.62;letter-spacing:.3em;text-transform:uppercase}

.piste{
  width:174px;height:16px;
  border:1px solid #6a6a6a;border-radius:3px;
  background:#0b0b0b; overflow:hidden; position:relative;
  box-shadow:inset 0 1px 2px rgba(0,0,0,.9);
}
.piste i{
  position:absolute; top:2px; width:12px; height:10px; border-radius:2px;
  background:linear-gradient(180deg,#7fc4ff,#1f6fd0 55%,#0b3f8f);
  box-shadow:0 0 5px rgba(80,170,255,.75);
  animation:defile 1.9s linear infinite;
}
.piste i:nth-child(2){animation-delay:.19s}
.piste i:nth-child(3){animation-delay:.38s}
@keyframes defile{
  0%{left:-14px;opacity:0}
  12%{opacity:1}
  76%{opacity:1}
  100%{left:176px;opacity:0}
}
.demarrage-etape{
  align-self:start; min-height:1.4em;
  font-size:12px; color:#b9c6d6; letter-spacing:.02em;
}
.demarrage-passer{
  position:absolute;bottom:22px;right:24px;
  background:none;border:1px solid #444;color:#8b96a4;
  padding:4px 10px;border-radius:3px;cursor:pointer;font-size:11px;
  opacity:0;transition:opacity .3s var(--sortie)
}
.demarrage-passer.on{opacity:1}
.demarrage-passer:hover{color:#dfe7f1;border-color:#6b7686}

/* =========================================================================
   Adaptation aux petits ecrans
   ========================================================================= */

@media (max-width:860px){
  .session-corps{grid-template-columns:1fr;gap:22px;padding:26px 20px}
  .session-sep{display:none}
  .session::before,.session::after{display:none}
  .session-panneau,.saisie{padding-left:0}
  .session-marque{font-size:34px}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
  .piste i{animation:none;left:auto;position:static;display:inline-block;margin:2px}
}