/*
 * Page de connexion DAMI pour GLPI — la même que celle de DAMI Horizon.
 *
 * Reprise de frontend/style.css (« Écran de connexion »), puis l'habillage du
 * formulaire de GLPI, qui reste le sien : champs Bootstrap (.form-control,
 * .form-select), liste Select2 de la source de connexion, case « se souvenir
 * de moi », alertes. Tout est servi par le plugin : aucune ressource externe.
 */

@font-face { font-family: 'Michroma'; src: url('../polices/michroma.woff2') format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Montserrat'; src: url('../polices/montserrat-regular.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Montserrat'; src: url('../polices/montserrat-italic.woff2') format('woff2'); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: 'Montserrat'; src: url('../polices/montserrat-medium.woff2') format('woff2'); font-weight: 500; font-display: swap; }
@font-face { font-family: 'Montserrat'; src: url('../polices/montserrat-semibold.woff2') format('woff2'); font-weight: 600; font-display: swap; }
@font-face { font-family: 'Montserrat'; src: url('../polices/montserrat-bold.woff2') format('woff2'); font-weight: 700 800; font-display: swap; }

/* Avant que le script ne pose la page : déjà le fond nuit, pas d'éclair blanc. */
body.welcome-anonymous { background: #0e0b14; }

body.dami-connexion {
  margin: 0; background: #0e0b14; color: #f4eef6;
  font-family: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
}
body.dami-connexion #page { display: block; min-height: 100vh; padding: 0; }
body.dami-connexion *, body.dami-connexion *::before, body.dami-connexion *::after { box-sizing: border-box; }

/* --- Écran de connexion ---
   Seule page vue par quelqu'un qui n'est pas encore entré : elle porte la
   marque, d'après le fond d'écran officiel (DESIGN/DAMI/FOND_ECRAN_V2.png).
   Tout est dessiné ici, en SVG et en CSS : le conteneur n'a pas d'accès
   sortant et la CSP interdit toute origine distante. */
.ecran-login {
  --nuit-profond: #0e0b14;
  position: relative; min-height: 100vh; overflow: hidden; isolation: isolate;
  display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(340px, 440px);
  grid-template-rows: auto 1fr auto; column-gap: clamp(2rem, 6vw, 7rem);
  padding: 2.2rem clamp(1.5rem, 6vw, 6rem);
  background: radial-gradient(120% 90% at 15% 10%, #1d1720 0%, var(--nuit-profond) 60%);
  color: #f4eef6;
}
.login-fond { position: absolute; inset: 0; z-index: -1; pointer-events: none; }

/* Le grand D en filigrane, à droite, comme sur le fond d'écran officiel : il se
   dessine d'un trait, puis se remplit à peine. */
.login-monogramme {
  position: absolute; right: -18vw; top: 50%; height: 105vh; width: auto; transform: translateY(-50%);
  overflow: visible;
}
.login-trace {
  fill: rgba(255, 255, 255, 0); stroke: rgba(209, 167, 216, .55); stroke-width: .35;
  stroke-dasharray: 1; stroke-dashoffset: 1;
  animation: tracer 2.4s cubic-bezier(.65, 0, .35, 1) .2s forwards, remplir 1.6s ease-out 2.4s forwards;
}
.login-carre {
  fill: #d1a7d8; opacity: 0; transform-box: fill-box; transform-origin: center;
  filter: drop-shadow(0 0 2px rgba(209, 167, 216, .6));
  animation: poser 1s cubic-bezier(.2, .9, .25, 1.25) 2.2s forwards, respirer 5s ease-in-out 3.4s infinite;
}
.login-lueur {
  position: absolute; right: -18vw; bottom: -30vh; width: 75vw; height: 75vw; border-radius: 50%;
  background: radial-gradient(circle, rgba(107, 64, 154, .55), rgba(107, 64, 154, 0) 62%);
  animation: deriver 14s ease-in-out infinite alternate;
}
/* L'horizon : une ligne fine, et une lumière qui la parcourt. */
.login-horizon {
  position: absolute; left: 0; right: 0; bottom: 16vh; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(209, 167, 216, .35) 20%, rgba(209, 167, 216, .35) 80%, transparent);
  opacity: 0; animation: apparaitre 1.2s ease-out 3s forwards;
}
.login-horizon span {
  position: absolute; top: -1px; left: -20%; width: 20%; height: 3px; border-radius: 3px;
  background: linear-gradient(90deg, transparent, #f1d6f5, transparent);
  box-shadow: 0 0 18px 4px rgba(209, 167, 216, .45);
  animation: balayer 7s ease-in-out 3.4s infinite;
}

.login-marque { grid-column: 1 / -1; position: relative; z-index: 1; }
.login-marque img { height: 46px; width: auto; display: block; }

.login-accroche { grid-column: 1; align-self: center; max-width: 640px; position: relative; z-index: 1;
                  animation: monter-doux .9s ease-out .3s both; }
.login-sur-titre {
  font-family: 'Michroma', 'Montserrat', 'Segoe UI', Arial, sans-serif; font-size: .7rem; letter-spacing: .32em; text-transform: uppercase;
  color: #d1a7d8; margin-bottom: 1.1rem;
}
.login-titre {
  font-family: 'Michroma', 'Montserrat', 'Segoe UI', Arial, sans-serif; font-weight: 400; color: #fff; margin: 0;
  font-size: clamp(2.6rem, 6vw, 5.2rem); line-height: 1; letter-spacing: .02em;
}
.login-titre strong {
  display: block; font-weight: 400; letter-spacing: .08em;
  background: linear-gradient(90deg, #d1a7d8, #f3e3f6 45%, #d1a7d8 70%, #926699);
  background-size: 220% 100%; -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: reflet 6s ease-in-out 2.6s infinite;
}
.login-baseline { margin: 1.1rem 0 .4rem; font-size: 1.15rem; font-weight: 500; color: #efe6f1; }
.login-texte { margin: 0; max-width: 46ch; color: #a99cad; font-size: .95rem; }

.login-metiers { list-style: none; padding: 0; margin: 2.2rem 0 0; display: flex; flex-wrap: wrap; gap: .55rem 1.3rem; }
.login-metiers li {
  display: inline-flex; align-items: center; gap: .5rem; font-family: 'Michroma', 'Montserrat', 'Segoe UI', Arial, sans-serif;
  font-size: .62rem; letter-spacing: .14em; text-transform: uppercase; color: #cfc3d2;
  opacity: 0; animation: apparaitre .5s ease-out forwards; animation-delay: calc(3.2s + var(--i) * 120ms);
}
.login-metiers i { width: 11px; height: 11px; background: var(--couleur); box-shadow: 0 0 12px var(--couleur); }

/* La carte de connexion : verre fumé, liseré mauve en haut. */
.login-carte {
  grid-column: 2; align-self: center; position: relative; z-index: 1;
  padding: 2.2rem 2.1rem 1.8rem; border-radius: 18px;
  background: linear-gradient(180deg, rgba(42, 34, 44, .78), rgba(24, 19, 26, .86));
  border: 1px solid rgba(209, 167, 216, .16);
  box-shadow: 0 30px 80px rgba(0, 0, 0, .45), inset 0 1px 0 rgba(255, 255, 255, .05);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  animation: monter-doux .9s ease-out .6s both;
}
.login-carte::before {
  content: ''; position: absolute; left: 2rem; right: 2rem; top: 0; height: 2px; border-radius: 2px;
  background: linear-gradient(90deg, transparent, #d1a7d8, transparent);
}
.login-carte h2 { font-family: 'Michroma', 'Montserrat', 'Segoe UI', Arial, sans-serif; font-weight: 400; font-size: 1.15rem; letter-spacing: .04em; color: #fff; margin: 0; }
.login-intro { margin: .5rem 0 1.6rem; color: #a99cad; font-size: .85rem; }

.login-saisie { position: relative; display: flex; align-items: center; }
.login-saisie > svg { position: absolute; left: .9rem; width: 16px; height: 16px; color: #8f8293; }
.login-oeil svg { width: 17px; height: 17px; }
.login-oeil { position: absolute; right: .45rem; background: none; border: 0; cursor: pointer;
              color: #8f8293; padding: .45rem; display: flex; }
.login-oeil:hover:not(:disabled) { color: #f8f4f9; background: none; }

.ecran-login button.connexion {
  position: relative; overflow: hidden; width: 100%; margin-top: .7rem; padding: .85rem; border: 0; border-radius: 10px;
  display: flex; align-items: center; justify-content: center; gap: .6rem;
  background: linear-gradient(135deg, #d1a7d8, #b98ac2); color: #221c23; font-size: .95rem; font-weight: 700;
  cursor: pointer; box-shadow: 0 10px 30px rgba(209, 167, 216, .22); transition: transform .15s, box-shadow .15s;
}
.ecran-login button.connexion::after {
  content: ''; position: absolute; top: 0; bottom: 0; width: 40%; left: -60%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .45), transparent);
  transition: left .6s ease;
}
.ecran-login button.connexion:hover:not(:disabled) { transform: translateY(-1px); color: #221c23;
                                                      box-shadow: 0 14px 34px rgba(209, 167, 216, .32); }
.ecran-login button.connexion:hover::after { left: 120%; }
.ecran-login button.connexion:disabled { opacity: .6; cursor: progress; }
.fleche-connexion { width: 18px; height: 18px; transform: scaleX(-1); }

.login-aide { margin-top: 1.1rem; font-size: .75rem; color: #8f8293; text-align: center; }
.login-pied { grid-column: 1 / -1; align-self: end; position: relative; z-index: 1;
              font-size: .7rem; letter-spacing: .08em; color: #6f6372; }

@keyframes tracer { to { stroke-dashoffset: 0; } }
@keyframes remplir { to { fill: rgba(255, 255, 255, .035); stroke: rgba(209, 167, 216, .22); } }
@keyframes poser {
  0% { opacity: 0; transform: translate(-60%, 60%) scale(.4) rotate(-45deg); }
  60% { opacity: .55; }
  100% { opacity: .26; transform: none; }
}
/* En filigrane, comme sur le fond d'écran officiel : le carré se pose franc,
   puis s'efface jusqu'à n'être plus qu'une présence. */
@keyframes respirer { 0%, 100% { opacity: .26; } 50% { opacity: .16; } }
@keyframes deriver { from { transform: translate(0, 0); } to { transform: translate(-6vw, -4vh); } }
@keyframes apparaitre { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes balayer { 0% { left: -20%; } 60%, 100% { left: 110%; } }
@keyframes reflet { 0%, 100% { background-position: 100% 0; } 50% { background-position: 0 0; } }
@keyframes monter-doux { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }

/* Ceux qui ont demandé moins de mouvement voient l'image finale, tout de suite. */
@media (prefers-reduced-motion: reduce) {
  .login-trace { animation: none; stroke-dashoffset: 0; fill: rgba(255, 255, 255, .035); stroke: rgba(209, 167, 216, .22); }
  .login-carre { animation: none; opacity: .26; }
  .login-lueur, .login-horizon span, .login-titre strong { animation: none; }
  .login-horizon, .login-metiers li, .login-accroche, .login-carte { animation: none; opacity: 1; }
}

@media (max-width: 960px) {
  .ecran-login { grid-template-columns: 1fr; grid-template-rows: auto auto auto auto; row-gap: 2rem;
                 padding: 1.6rem 1.25rem; }
  .login-accroche, .login-carte { grid-column: 1; }
  .login-monogramme { right: -45vw; height: 80vh; opacity: .6; }
  .login-titre { font-size: clamp(2.2rem, 11vw, 3.2rem); }
  .login-metiers { margin-top: 1.4rem; }
  .login-carte { padding: 1.7rem 1.4rem; }
}


/* --- Le formulaire de GLPI, dans la carte --- */
.login-contenu .card { background: none; border: 0; box-shadow: none; margin: 0; color: inherit; }
.login-contenu .card-header, .login-contenu .card-body, .login-contenu .row, .login-contenu [class*="col-"] {
  background: none; border: 0; padding: 0; margin: 0; width: 100%; max-width: none; flex: 1 1 100%;
}
/* « Connexion à votre compte » : la carte a déjà son titre. */
.login-contenu form .card-header { display: none; }
.login-contenu .mb-3, .login-contenu .mb-4 { margin-bottom: 1.1rem; }
.login-contenu .form-label, .login-contenu label.form-label {
  display: block; font-size: .78rem; color: #e2d8e5; margin-bottom: .4rem; font-weight: 500;
}
.login-contenu .form-control {
  width: 100%; padding: .78rem 2.7rem; border-radius: 10px; font-size: .92rem; font-family: inherit;
  background: rgba(255, 255, 255, .05); color: #f8f4f9; border: 1px solid rgba(255, 255, 255, .12);
  transition: border-color .15s, box-shadow .15s, background .15s;
}
.login-contenu .form-control::placeholder { color: #8f8293; }
.login-contenu .form-control:hover { border-color: rgba(209, 167, 216, .35); }
.login-contenu .form-control:focus { outline: none; border-color: #d1a7d8; background: rgba(255, 255, 255, .07);
                                     box-shadow: 0 0 0 4px rgba(209, 167, 216, .16); color: #f8f4f9; }
.login-contenu .form-control:-webkit-autofill {
  -webkit-text-fill-color: #f8f4f9; -webkit-box-shadow: 0 0 0 40px #231c26 inset; caret-color: #f8f4f9;
}
.login-contenu .login-oeil { color: #8f8293; }

/* La source de connexion : une liste native, ou Select2 quand GLPI l'a habillée. */
.login-contenu .form-select {
  width: 100%; padding: .7rem .9rem; border-radius: 10px; font-size: .9rem; font-family: inherit;
  background-color: rgba(255, 255, 255, .05); color: #f8f4f9; border: 1px solid rgba(255, 255, 255, .12);
}
.login-contenu .form-select option { color: #221c23; }
.login-contenu .select2-container { width: 100% !important; }
.login-contenu .select2-container .select2-selection--single {
  height: auto; min-height: 44px; padding: .45rem .5rem; border-radius: 10px;
  background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .12);
}
.login-contenu .select2-container .select2-selection__rendered { color: #f8f4f9 !important; line-height: 1.8; }
.login-contenu .select2-container .select2-selection__arrow { height: 100%; }
.login-contenu .select2-container--focus .select2-selection--single,
.login-contenu .select2-container--open .select2-selection--single { border-color: #d1a7d8; }
body.dami-connexion .select2-dropdown { background: #231c26; border-color: rgba(209, 167, 216, .35); color: #f4eef6; }
body.dami-connexion .select2-results__option--highlighted,
body.dami-connexion .select2-results__option[aria-selected=true] { background: rgba(209, 167, 216, .22) !important; color: #fff !important; }

.login-contenu .form-check { display: flex; align-items: center; gap: .55rem; padding: 0; margin: .2rem 0 .4rem; }
.login-contenu .form-check-input {
  position: static; margin: 0; width: 1.05rem; height: 1.05rem; flex: none; float: none;
  background-color: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .25); accent-color: #d1a7d8;
}
.login-contenu .form-check-input:checked { background-color: #b98ac2; border-color: #d1a7d8; }
.login-contenu .form-check-label { font-size: .82rem; color: #cfc3d2; }
.login-contenu .form-footer { margin-top: .4rem; }

.login-contenu button.connexion, .login-contenu .btn-primary {
  position: relative; overflow: hidden; width: 100%; margin: .7rem 0 0; padding: .85rem; border: 0; border-radius: 10px;
  display: flex; align-items: center; justify-content: center; gap: .6rem; font-family: inherit;
  background: linear-gradient(135deg, #d1a7d8, #b98ac2); color: #221c23; font-size: .95rem; font-weight: 700;
  cursor: pointer; box-shadow: 0 10px 30px rgba(209, 167, 216, .22); transition: transform .15s, box-shadow .15s;
}
.login-contenu button.connexion::after {
  content: ''; position: absolute; top: 0; bottom: 0; width: 40%; left: -60%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .45), transparent); transition: left .6s ease;
}
.login-contenu button.connexion:hover, .login-contenu .btn-primary:hover {
  transform: translateY(-1px); color: #221c23; background: linear-gradient(135deg, #d1a7d8, #b98ac2);
  box-shadow: 0 14px 34px rgba(209, 167, 216, .32);
}
.login-contenu button.connexion:hover::after { left: 120%; }

/* Les autres boutons et liens (mot de passe oublié, SSO, retour). */
.login-contenu a { color: #d1a7d8; }
.login-contenu a:hover { color: #f3e3f6; }
.login-contenu .btn:not(.btn-primary) {
  border-radius: 10px; border: 1px solid rgba(209, 167, 216, .35); background: transparent; color: #e2d8e5;
}
.login-contenu h1, .login-contenu h2, .login-contenu h3 { color: #fff; font-family: 'Michroma', 'Montserrat', sans-serif; font-weight: 400; }

/* Les messages de GLPI (identifiant incorrect, session expirée…). */
.login-contenu .alert, body.dami-connexion .toast {
  border-radius: 10px; padding: .75rem .9rem; margin-bottom: 1.1rem; font-size: .85rem;
  background: rgba(188, 25, 16, .16); border: 1px solid rgba(240, 138, 130, .4); color: #f6cbc7;
}
.login-contenu .alert-success, .login-contenu .alert-info {
  background: rgba(75, 166, 149, .14); border-color: rgba(75, 166, 149, .45); color: #cdeee7;
}
.login-pied a { color: inherit; }

/* « ASSISTANCE » compte dix lettres, « HORIZON » sept : le titre est réglé
   pour tenir dans sa colonne, et la colonne ne s'élargit plus pour lui. */
body.dami-connexion .ecran-login { grid-template-columns: minmax(0, 1.15fr) minmax(340px, 440px); }
body.dami-connexion .login-titre { font-size: clamp(2rem, 3.5vw, 4.4rem); }
body.dami-connexion .login-titre strong { letter-spacing: .05em; }
@media (max-width: 960px) {
  body.dami-connexion .ecran-login { grid-template-columns: minmax(0, 1fr); }
  body.dami-connexion .login-titre { font-size: clamp(1.7rem, 8.2vw, 3rem); }
  body.dami-connexion .login-carte { min-width: 0; width: 100%; }
}

/* Le titre, c'est le métier : « ASSISTANCE », dans la couleur que la charte
   lui donne (le vert #00903a de la ligne des métiers). Tel quel il serait
   trop sombre sur le fond nuit : le reflet l'éclaircit vers un vert tendre,
   sans quitter sa teinte. */
body.dami-connexion .login-titre strong {
  background: linear-gradient(90deg, #00903a, #5fd68f 45%, #9ae8b8 60%, #00903a);
  background-size: 220% 100%; -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 0 18px rgba(0, 144, 58, .35));
}

/* --- Le ruban du jour (repris de DAMI Horizon) --- */
.login-jour { margin-top: 2.2rem; min-height: 1px; }
.ruban-jour {
  max-width: 600px; padding: 1rem 1.2rem 1.05rem; border-radius: 14px;
  background: rgba(255, 255, 255, .035); border: 1px solid rgba(209, 167, 216, .14);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  animation: apparaitre .8s ease-out both;
}
.ruban-ligne { display: flex; flex-wrap: wrap; align-items: center; gap: .45rem 1.1rem; font-size: .82rem; color: #cfc3d2; }
.ruban-date { font-family: 'Michroma', 'Montserrat', 'Segoe UI', Arial, sans-serif; font-size: .66rem; letter-spacing: .16em; text-transform: uppercase; color: #d1a7d8; }
.ruban-date::first-letter { text-transform: uppercase; }
.ruban-fete strong { color: #f4eef6; font-weight: 600; }
.ruban-meteo { display: inline-flex; align-items: center; gap: .4rem; }
.ruban-meteo svg { width: 20px; height: 20px; color: #f1d6f5; }
.ruban-meteo strong { color: #fff; font-size: .95rem; font-weight: 700; }
.ruban-lieu { color: #8f8293; font-size: .74rem; }
.ruban-citation {
  margin: .8rem 0 0; padding: .7rem 0 0; border-top: 1px solid rgba(209, 167, 216, .12);
  font-style: italic; font-size: .9rem; line-height: 1.5; color: #e7dcea;
}
.ruban-citation cite {
  display: block; margin-top: .3rem; font-style: normal; font-size: .72rem; letter-spacing: .08em;
  text-transform: uppercase; color: #a99cad;
}
.ruban-citation cite::before { content: '— '; }
@media (max-width: 960px) { .login-jour { margin-top: 1.4rem; } }
@media (prefers-reduced-motion: reduce) { .ruban-jour { animation: none; } }
@media (max-width: 960px) {
  .ruban-meteo { flex-wrap: wrap; }
  .ruban-lieu { flex-basis: 100%; padding-left: 26px; }
}

body.dami-connexion .ruban-citation cite { color: #a99cad; }
/* Le thème de GLPI pose une barre et aligne l'auteur à droite sur tout blockquote. */
body.dami-connexion .ruban-citation { border-left: 0; padding-left: 0; padding-right: 0; margin-left: 0; text-align: left; }
body.dami-connexion .ruban-citation cite { text-align: left; }

/* La taille du titre suit la largeur réelle de sa colonne (unités de
   conteneur) : calée sur la fenêtre, « ASSISTANCE » sortait de la colonne
   sur grand écran (1920 px) et sa fin disparaissait. */
body.dami-connexion .login-accroche { container-type: inline-size; }
@supports (font-size: 1cqi) {
  body.dami-connexion .login-titre { font-size: min(4.4rem, 9cqi); }
  @media (max-width: 960px) { body.dami-connexion .login-titre { font-size: min(3rem, 9cqi); } }
}