/* Habillage – Compagnie de Phalsbourg (surcharge de self-service-password.css) */
:root {
  --accent: #2563eb;
  --accent-dark: #1d4ed8;
  --accent-soft: rgba(37, 99, 235, .10);
  --text: #1f2933;
  --muted: #6b7785;
  --border: #e4e8ee;
}

html, body {
  padding-top: 0;
  font-size: 15px;
  color: var(--text);
  background:
    radial-gradient(1100px 500px at 15% -10%, #dfe8fb 0%, transparent 60%),
    radial-gradient(900px 500px at 110% 110%, #e6eef9 0%, transparent 55%),
    #f5f7fa;
}
body { min-height: 100vh; display: flex; align-items: center; }
body > .container { max-width: 440px; padding: 32px 16px; }

/* Carte */
.card {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 16px;
  box-shadow: 0 1px 2px rgba(16,24,40,.04), 0 12px 32px rgba(16,24,40,.08) !important;
  overflow: hidden;
  animation: ssp-in .35s ease-out both;
}
.card::before {
  content: "";
  display: block;
  height: 4px;
  background: linear-gradient(90deg, var(--accent), #60a5fa);
}
.card-body { padding: 36px 32px 30px; }
@keyframes ssp-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .card { animation: none; } }

/* En-tête */
.title.alert {
  background: none; border: 0; box-shadow: none !important;
  padding: 0; margin-bottom: 6px; text-align: center !important;
}
.title h1 {
  font-size: 1.3rem; font-weight: 650; letter-spacing: .01em;
  color: var(--text); margin: 0;
}

/* Messages */
.alert { box-shadow: none !important; border-radius: 10px; font-size: .9rem; }
/* Texte d'aide (icône cercle) : sous-titre centré et discret */
.result.alert-warning:has(.fa-exclamation-circle) {
  background: transparent; border: 0; color: var(--muted);
  padding: 0 4px 22px; text-align: center; line-height: 1.45;
}
.result.alert-warning:has(.fa-exclamation-circle) > i { display: none; }
/* Résultats (succès, erreurs, champs manquants) */
.result.alert-success { background: #ecfdf3; border: 1px solid #b7ebcd; color: #116b3c; }
.result.alert-danger  { background: #fef2f2; border: 1px solid #f7caca; color: #a12828; }
.result.alert-warning:not(:has(.fa-exclamation-circle)) { background: #fffaeb; border: 1px solid #f5dfa3; color: #8a5a00; }

/* Formulaire : libellés au-dessus des champs */
.alert-info { background: none; border: 0; padding: 0; margin: 0; }
form .row { flex-direction: column; margin-bottom: 16px !important; }
form .row > [class*="col-sm-"] { width: 100%; max-width: 100%; margin-left: 0; text-align: left !important; }
form .col-form-label { font-size: .84rem; font-weight: 550; color: #3e4c59; padding: 0 0 6px; }
.input-group-text:has(.fa-user), .input-group-text:has(.fa-lock) { display: none; }
.form-control {
  padding: 11px 13px; border: 1px solid #d3d9e1; background: #fafbfc;
  border-radius: 10px !important;
  transition: border-color .15s, box-shadow .15s, background-color .15s;
}
.form-control:hover { border-color: #b9c2ce; }
.form-control:focus { background: #fff; border-color: var(--accent); box-shadow: 0 0 0 4px var(--accent-soft); }
.form-control::placeholder { color: transparent; }
.input-group:has(.password-toggle-icon) > .form-control { border-top-right-radius: 0 !important; border-bottom-right-radius: 0 !important; }
.password-toggle-icon { border-radius: 0 10px 10px 0 !important; background: #fafbfc; border-color: #d3d9e1; color: var(--muted); }

/* Bouton */
form .row:last-child { margin: 24px 0 0 !important; }
form .btn-success {
  width: 100%; padding: 12px; border: 0; border-radius: 10px;
  font-weight: 600; letter-spacing: .01em;
  background: linear-gradient(180deg, #3172f0, var(--accent));
  box-shadow: 0 6px 16px rgba(37,99,235,.25);
  transition: transform .12s, box-shadow .12s, background .12s;
}
form .btn-success:hover { background: linear-gradient(180deg, var(--accent), var(--accent-dark)); transform: translateY(-1px); box-shadow: 0 8px 20px rgba(37,99,235,.30); }
form .btn-success:active { transform: none; box-shadow: 0 3px 10px rgba(37,99,235,.25); }
form .btn-success:focus-visible { outline: 3px solid var(--accent-soft); outline-offset: 2px; }
form .btn-success i { display: none; }

/* Mention discrète sous la carte */
body > .container::after {
  content: "Service informatique · Compagnie de Phalsbourg";
  display: block; text-align: center; margin-top: 18px;
  font-size: .78rem; color: #98a2ae;
}

/* Mobile */
@media (max-width: 480px) {
  .card-body { padding: 28px 20px 24px; }
}

/* Logo Compagnie de Phalsbourg : en tête de carte, au-dessus du formulaire */
.card-body { display: flex; flex-direction: column; }
.card-body > a:has(> img.logo) { order: -1; align-self: center; }
img.logo {
  width: 168px; height: auto; margin: 0 auto 18px !important;
  /* PNG à fond transparent (source : plaisir-rugby-club.net, page partenaire) */
}
/* Le nom figure déjà dans le logo : titre gardé pour l'onglet et les lecteurs d'écran, masqué à l'écran */
.title.alert { margin-bottom: 0; }
.title h1 {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}
.result.alert-warning:has(.fa-exclamation-circle) { padding-top: 4px; }

/* Règles du mot de passe + jauge de robustesse */
.ppolicy.alert {
  background: #f7f9fc; border: 1px solid var(--border); color: #3e4c59;
  font-size: .84rem; padding: 12px 14px; margin-bottom: 18px;
}
.ppolicy .fa-ul { margin: 6px 0 0 1.6em; padding: 0; }
.ppolicy li { margin: 3px 0; }
.ppolicy .fa-li { color: var(--muted); }
#entropybar {
  height: 6px; margin-top: 6px; border-radius: 999px; background: #e4e8ee;
}
#entropybar > div { font-size: 0; border-radius: 999px; transition: width .25s ease; }
#entropybar-msg { font-size: .8rem; padding: 6px 10px; margin: 6px 0 0; background: #fff; border-color: var(--border); }

/* Œil afficher / masquer */
.password-toggle-icon { cursor: pointer; }
.password-toggle-icon:hover { color: var(--accent); }

/* Captcha : image + bouton rafraîchir, puis champ */
form .captcha {
  display: flex; align-items: center; gap: 10px; padding-bottom: 8px !important;
}
form .captcha img { border-radius: 8px; border: 1px solid var(--border); height: 44px; width: auto; }
#captcha-refresh {
  margin-left: 0 !important; cursor: pointer; color: var(--muted);
  width: 34px; height: 34px; display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%; transition: background .15s, color .15s;
}
#captcha-refresh:hover { background: var(--accent-soft); color: var(--accent); }
.input-group-text:has(.fa-check-circle) { display: none; }
#captchaphrase::placeholder { color: #98a2ae; }
.input-group:has(#captchaphrase) > .form-control { border-radius: 10px !important; }

/* Captcha recentré, sans débordement */
form .row:has(.captcha) { align-items: stretch; }
form .captcha {
  justify-content: center; flex-wrap: nowrap;
  width: 100% !important; max-width: 100% !important; min-width: 0;
  padding: 0 0 10px !important; overflow: hidden;
}
form .captcha img {
  display: block; height: 44px; width: auto;
  max-width: calc(100% - 44px); object-fit: contain;
}
#captcha-refresh { flex: 0 0 34px; }
form .row:has(.captcha) > .col-sm-8 { padding-left: calc(var(--bs-gutter-x) * .5); padding-right: calc(var(--bs-gutter-x) * .5); }
#captchaphrase { text-align: center; letter-spacing: .08em; }