*{box-sizing:border-box}
:root{--ink:#252441;--purple:#7951c8;--purple2:#9a74ef;--lav:#eee8ff;--line:#cbbcf5;--yellow:#ffe46a}
body{margin:0;min-height:100dvh;display:grid;place-items:center;background:#e9e1ff;background-image:radial-gradient(circle at 8% 20%,rgba(151,116,239,.16) 0 120px,transparent 121px),radial-gradient(circle at 95% 12%,rgba(151,116,239,.15) 0 150px,transparent 151px),radial-gradient(circle at 93% 82%,rgba(151,116,239,.12) 0 135px,transparent 136px);font:16px/1.55 'Segoe UI',Arial,sans-serif;color:var(--ink);padding:28px}
main{position:relative;width:100%;max-width:650px;background:rgba(255,255,255,.97);border:1px solid #d8cff0;border-radius:30px;box-shadow:0 18px 55px rgba(61,43,112,.18);padding:48px 56px 34px}
.login-date{position:absolute;top:24px;right:30px;color:#7055b8;font-size:13px;font-weight:650;text-transform:capitalize}
.identity-head{text-align:center;margin-top:8px}.login-logo{display:block;margin:0 auto 16px;width:92px;height:92px}.tag{margin:0;font-size:12px;letter-spacing:1.3px;font-weight:850;color:var(--ink)}
h1{text-align:center;font-size:48px;line-height:1.08;letter-spacing:-1.8px;margin:32px 0 20px;color:#11133e}h1 span{color:var(--purple)}.intro{text-align:center;margin:0 0 24px;font-size:17px}
label{display:block;font-weight:750;margin-top:24px;margin-bottom:8px;font-size:17px}
input{width:100%;font:inherit;font-size:20px;color:#17173d;border-radius:15px;padding:16px 18px;border:2px solid var(--line);background:linear-gradient(90deg,#f1ecff,#e8e0ff);box-shadow:inset 0 1px 0 rgba(255,255,255,.8)}
input::placeholder{font-size:16px;color:#82779c}input:focus-visible,button:focus-visible{outline:3px solid var(--purple);outline-offset:3px}
button{width:100%;font:inherit;border-radius:15px;padding:15px 20px;border:2px solid #6840bd;margin-top:22px;background:linear-gradient(90deg,#b89af6,#cbb6ff);color:#17133d;box-shadow:0 6px 0 #3a2b69,0 10px 20px rgba(75,48,135,.16);font-size:19px;font-weight:800;cursor:pointer;display:flex;align-items:center;justify-content:center;position:relative}
button strong{position:absolute;right:22px;font-size:30px;line-height:1}button:hover{filter:brightness(1.02);transform:translateY(-1px)}button:disabled{opacity:.65;cursor:wait;transform:none}
#login-message{text-align:center;font-size:14px;line-height:1.6;margin:28px 0 0}.small{text-align:center;font-size:14px;line-height:1.7;color:#795bc4;margin:18px 0 0}.small span:first-child{font-size:15px}.login-signature{display:flex;align-items:center;justify-content:center;gap:18px;margin:28px auto 3px;max-width:310px;color:#8057dc}.login-signature span{height:1px;background:#cbbcf5;flex:1}.login-signature b{font-size:18px}.motto{text-align:center;margin:0;color:#7c59d3;font-size:11px;font-weight:850;letter-spacing:4px}
@media(max-width:600px){body{padding:16px}main{padding:70px 24px 28px;border-radius:24px}.login-date{top:20px;right:22px;font-size:12px}.login-logo{width:80px;height:80px}h1{font-size:37px}.intro{font-size:15px}label{font-size:16px}input{font-size:18px;padding:14px 16px}.tag{font-size:10px;letter-spacing:1px}.motto{letter-spacing:2.5px}}

/* ===== Écran PIN : ambiance BD du QG ===== */
body.pin-page{
  background:#eee8ff url('qg-bd-background.png') center center / cover no-repeat fixed;
}
body.pin-page main{
  max-width:650px;
}
body.pin-page .identity-head{
  text-align:center;
  margin-top:0;
}
body.pin-page .login-logo{
  display:block;
  margin:0 auto 8px;
  width:76px;
  height:76px;
}
body.pin-page .tag{
  text-align:center;
  margin:0;
}
body.pin-page .pin-intro{
  text-align:center;
  margin:18px 0 8px;
}
body.pin-page .pin-help{
  text-align:center;
  font-size:13px;
  line-height:1.65;
  color:#795bc4;
  margin:20px 0 0;
}
body.pin-page .pin-help span{display:block}
@media(max-width:600px){
  body.pin-page{background-attachment:scroll;background-position:center top}
}

/* ===== Fond BD commun : connexion + PIN ===== */
body,
body.pin-page{
  background:#eee8ff url('qg-bd-background.png') center center / cover no-repeat fixed;
}
/* Voile clair pour obtenir l'effet doux ~70 % tout en gardant la carte très lisible */
body::before{
  content:"";
  position:fixed;
  inset:0;
  background:rgba(255,255,255,.28);
  pointer-events:none;
  z-index:0;
}
body > main{z-index:1}
@media(max-width:600px){body,body.pin-page{background-attachment:scroll;background-position:center top}}


/* =========================================================
   CORRECTION FINALE — PIN + CHANGEMENT DE MOT DE PASSE
   La page de connexion classique reste inchangée.
   ========================================================= */

/* Même décor BD sur les deux écrans secondaires */
body.pin-page,
body.password-page{
  background:#eee8ff url('qg-bd-background.png') center center / cover no-repeat fixed;
}

/* Voile blanc à 30 % : le décor reste visible à environ 70 % */
body.pin-page::before,
body.password-page::before{
  content:"";
  position:fixed;
  inset:0;
  background:rgba(255,255,255,.30);
  pointer-events:none;
  z-index:0;
}

body.pin-page > main,
body.password-page > main{
  position:relative;
  z-index:1;
  width:100%;
  max-width:650px;
  background:rgba(255,255,255,.97);
  border:1px solid #d8cff0;
  border-radius:30px;
  box-shadow:0 18px 55px rgba(61,43,112,.18);
  padding:42px 56px 34px;
}

/* Logo et libellé parfaitement centrés */
body.pin-page .identity-head,
body.password-page .identity-head{
  text-align:center;
  margin:0 0 24px;
}
body.pin-page .login-logo,
body.password-page .login-logo{
  display:block;
  width:76px;
  height:76px;
  margin:0 auto 8px;
}
body.pin-page .tag,
body.password-page .tag{
  text-align:center;
  margin:0;
  font-size:12px;
  letter-spacing:1.3px;
  font-weight:850;
  color:var(--ink);
}

/* PIN */
body.pin-page h1{
  margin:24px 0 18px;
}
body.pin-page .pin-intro{
  text-align:center;
  margin:0 0 18px;
}
body.pin-page .pin-help{
  text-align:center;
  font-size:13px;
  line-height:1.65;
  color:#795bc4;
  margin:22px 0 0;
}
body.pin-page .pin-help span{
  display:block;
}

/* Changement de mot de passe */
body.password-page h1{
  margin:24px 0 18px;
  font-size:44px;
}
body.password-page .identity-head + h1 + p{
  text-align:center;
  margin:0 0 22px;
}
body.password-page #message{
  text-align:center;
  font-size:14px;
  line-height:1.6;
  margin:20px 0 0;
}

/* Neutralise tout ancien pseudo-élément qui pourrait créer un effet fantôme */
body.pin-page main::before,
body.pin-page main::after,
body.password-page main::before,
body.password-page main::after{
  content:none !important;
  display:none !important;
}

@media(max-width:600px){
  body.pin-page,
  body.password-page{
    background-attachment:scroll;
    background-position:center top;
  }
  body.pin-page > main,
  body.password-page > main{
    padding:34px 24px 28px;
    border-radius:24px;
  }
  body.password-page h1{
    font-size:36px;
  }
}

/* =========================================================
   MOBILE V2 — connexion plus compacte, fond BD bien visible
   Uniquement téléphone. Aucun changement sur ordinateur.
   ========================================================= */
@media(max-width:600px){
  body,
  body.pin-page,
  body.password-page{
    min-height:100dvh;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:18px 14px;
    background:#eee8ff url('qg-bd-background.png') center center / cover no-repeat fixed !important;
  }
  body::before,
  body.pin-page::before,
  body.password-page::before{
    background:rgba(255,255,255,.12) !important;
  }

  body > main,
  body.pin-page > main,
  body.password-page > main{
    width:min(100%,390px);
    max-width:390px;
    padding:22px 20px 18px !important;
    border-radius:20px;
    background:rgba(255,255,255,.91);
    box-shadow:0 12px 35px rgba(61,43,112,.20);
  }

  .login-date{
    position:static;
    margin:0 0 6px;
    text-align:right;
    font-size:10px;
  }
  .identity-head{margin:0 0 8px !important}
  .login-logo,
  body.pin-page .login-logo,
  body.password-page .login-logo{
    width:52px !important;
    height:52px !important;
    margin:0 auto 5px !important;
  }
  .tag,
  body.pin-page .tag,
  body.password-page .tag{
    font-size:8px !important;
    letter-spacing:.75px !important;
  }

  h1,
  body.pin-page h1,
  body.password-page h1{
    margin:12px 0 8px !important;
    font-size:27px !important;
    line-height:1.03;
    letter-spacing:-.9px;
  }
  .intro,
  body.pin-page .pin-intro,
  body.password-page .identity-head + h1 + p{
    margin:0 0 10px !important;
    font-size:12px !important;
    line-height:1.35;
  }
  label{
    margin:10px 0 4px;
    font-size:12px;
  }
  input{
    min-height:42px;
    padding:9px 11px;
    border-radius:10px;
    font-size:15px;
  }
  input::placeholder{font-size:12px}
  button{
    min-height:42px;
    margin-top:12px;
    padding:9px 12px;
    border-radius:10px;
    font-size:14px;
    box-shadow:0 4px 0 #3a2b69,0 7px 14px rgba(75,48,135,.13);
  }
  button strong{right:14px;font-size:22px}
  #login-message{margin:12px 0 0;font-size:11px}
  .small{margin:10px 0 0;font-size:10px;line-height:1.45}
  .small span:first-child{font-size:11px}
  .login-signature{margin:12px auto 2px;max-width:220px}
  .login-signature b{font-size:13px}
  .motto{font-size:8px;letter-spacing:2px}

  body.pin-page .pin-help{
    margin:12px 0 0;
    font-size:10px;
    line-height:1.45;
  }
}

/* =========================================================
   FOND BD SPÉCIAL TÉLÉPHONE — CONNEXION + CODE PIN
   Uniquement sur écran <= 600px. Version ordinateur inchangée.
   ========================================================= */
@media (max-width:600px) {
  body,
  body.pin-page {
    min-height:100dvh !important;
    background-image:url('qg-bd-background-mobile.png') !important;
    background-size:cover !important;
    background-position:center center !important;
    background-repeat:no-repeat !important;
    background-attachment:scroll !important;
  }

  body::before,
  body.pin-page::before {
    background:rgba(255,255,255,.08) !important;
  }

  body:not(.password-page) > main {
    max-width:390px !important;
    margin:auto !important;
    padding:20px 19px 17px !important;
    border-radius:20px !important;
    background:rgba(255,255,255,.88) !important;
    backdrop-filter:blur(2px);
    -webkit-backdrop-filter:blur(2px);
  }

  body:not(.password-page) .login-logo {
    width:52px !important;
    height:52px !important;
    margin-bottom:5px !important;
  }

  body:not(.password-page) h1 {
    margin:10px 0 8px !important;
    font-size:27px !important;
    line-height:1.06 !important;
  }

  body:not(.password-page) .intro {
    margin-bottom:9px !important;
    font-size:12px !important;
    line-height:1.38 !important;
  }

  body:not(.password-page) label {
    margin-top:9px !important;
    margin-bottom:4px !important;
    font-size:12px !important;
  }

  body:not(.password-page) input {
    padding:9px 11px !important;
    font-size:15px !important;
  }

  body:not(.password-page) button {
    margin-top:11px !important;
    padding:10px 12px !important;
    font-size:14px !important;
  }

  body:not(.password-page) .small {
    margin-top:8px !important;
    font-size:10px !important;
  }
}

/* =========================================================
   NOUVELLE ICÔNE QG + FUSÉE — CONNEXION / PIN / MOT DE PASSE
   Logo centré et agrandi
   ========================================================= */
.identity-head {
  display:flex !important;
  flex-direction:column !important;
  align-items:center !important;
  justify-content:center !important;
  text-align:center !important;
}

.identity-head .login-logo,
.login-logo {
  display:block !important;
  width:118px !important;
  height:118px !important;
  object-fit:contain !important;
  margin:0 auto 10px !important;
}

.identity-head .managed,
.managed {
  text-align:center !important;
}

@media (max-width:600px) {
  .identity-head .login-logo,
  .login-logo {
    width:92px !important;
    height:92px !important;
    margin:0 auto 7px !important;
  }
}

/* =========================================================
   IDENTITÉ QG FINALE — LOGO FUSÉE
   Connexion + PIN + changement de mot de passe
   ========================================================= */
.identity-head,
body.pin-page .identity-head,
body.password-page .identity-head {
  width:100% !important;
  display:flex !important;
  flex-direction:column !important;
  align-items:center !important;
  justify-content:center !important;
  text-align:center !important;
}

.login-logo,
.identity-head .login-logo,
body.pin-page .login-logo,
body.password-page .login-logo {
  display:block !important;
  width:150px !important;
  height:150px !important;
  max-width:none !important;
  object-fit:contain !important;
  margin:0 auto 12px !important;
}

.managed,
.identity-head .managed,
body.pin-page .managed,
body.password-page .managed {
  display:block !important;
  width:100% !important;
  margin:0 auto 14px !important;
  text-align:center !important;
}

@media (max-width:600px) {
  .login-logo,
  .identity-head .login-logo,
  body.pin-page .login-logo,
  body.password-page .login-logo {
    width:110px !important;
    height:110px !important;
    margin:0 auto 8px !important;
  }

  .managed,
  .identity-head .managed,
  body.pin-page .managed,
  body.password-page .managed {
    text-align:center !important;
    margin:0 auto 10px !important;
  }
}

/* =========================================================
   CORRECTION FINALE CIBLÉE
   ========================================================= */

/* LOGIN — identifiant et mot de passe réellement centrés */
#login-form #username,
#login-form #password,
#login-form #confirmation {
  display:block !important;
  box-sizing:border-box !important;
  width:100% !important;
  text-align:center !important;
  text-align-last:center !important;
  text-indent:0 !important;
  padding-left:0 !important;
  padding-right:0 !important;
  direction:ltr !important;
}

/* Neutralise toute ancienne fusée emoji/couleur ajoutée par CSS */
#login-form #send::before,
#login-form #send::after,
body.pin-page button::before,
body.pin-page button::after {
  content:none !important;
  display:none !important;
}

/* Boutons centrés ; la fusée noire est déjà dans le HTML */
#login-form #send,
body.pin-page button {
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  gap:10px !important;
  text-align:center !important;
}

/* Force en noir la fusée SVG/CSS incluse dans le HTML */
#login-form #send > span,
body.pin-page button > span {
  background:#111111 !important;
  background-color:#111111 !important;
  color:#111111 !important;
}

/* Téléphone : mêmes règles, sans exception */
@media(max-width:600px){
  #login-form #username,
  #login-form #password,
  #login-form #confirmation {
    text-align:center !important;
    text-align-last:center !important;
    text-indent:0 !important;
    padding-left:0 !important;
    padding-right:0 !important;
  }
}