/* === SDIS - Modern Glass Theme (custom) === */
:root{
  --text: rgba(255,255,255,.92);
  --muted: rgba(255,255,255,.68);

  --glass: rgba(10,10,12,.45);
  --glass-strong: rgba(10,10,12,.62);
  --stroke: rgba(255,255,255,.14);

  --primary: #22c55e;
  --primary-hover: #16a34a;

  --radius: 18px;
}

/* Background overlay (garde ton image existante) */
body{
  color: var(--text);
}
body::before{
  content:"";
  position:fixed;
  inset:0;
  background: linear-gradient(180deg, rgba(0,0,0,.55), rgba(0,0,0,.70));
  pointer-events:none;
  z-index:0;
}
#container, .container, .wrapper, body > div{
  position:relative;
  z-index:1;
}

/* Top menu / navbar -> noir transparent */
.navbar, .topbar, #menu, .menu, .header, header{
  background: rgba(0,0,0,.45) !important;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(255,255,255,.10) !important;
}

/* Card principale */
#content, .content, .panel, .card, .form-container, .box, .well{
  background: var(--glass) !important;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid var(--stroke) !important;
  border-radius: var(--radius) !important;
  box-shadow: 0 18px 50px rgba(0,0,0,.35) !important;
}

/* Alerts */
.alert, .message, .info, .warning, .success{
  border-radius: 14px !important;
  border: 1px solid rgba(255,255,255,.12) !important;
  background: rgba(0,0,0,.25) !important;
  color: var(--text) !important;
}

/* Inputs */
input[type="text"], input[type="email"], input[type="password"], select, textarea{
  background: rgba(0,0,0,.35) !important;
  border: 1px solid rgba(255,255,255,.14) !important;
  color: var(--text) !important;
  border-radius: 14px !important;
  padding: 10px 12px !important;
}
input::placeholder{ color: rgba(255,255,255,.45) !important; }
input:focus, select:focus, textarea:focus{
  border-color: rgba(255,255,255,.26) !important;
  box-shadow: 0 0 0 4px rgba(255,255,255,.06) !important;
  outline: none !important;
}

/* Buttons */
button, input[type="submit"], .btn{
  border-radius: 14px !important;
  font-weight: 700 !important;
}
button.btn-primary, .btn-primary, input[type="submit"]{
  background: var(--primary) !important;
  border: 1px solid rgba(0,0,0,.12) !important;
  color: #07140b !important;
}
button.btn-primary:hover, .btn-primary:hover, input[type="submit"]:hover{
  background: var(--primary-hover) !important;
}

/* Captcha image */
img.captcha, #captcha, .captcha img{
  border-radius: 12px !important;
  border: 1px solid rgba(255,255,255,.14) !important;
}

/* === Navbar / menu SSPR (Bootstrap) === */
.navbar,
.navbar-default,
.navbar-inverse{
  background: rgba(0,0,0,.45) !important;
  border: 1px solid rgba(255,255,255,.10) !important;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.navbar .navbar-brand,
.navbar-nav > li > a{
  color: rgba(255,255,255,.78) !important;
}

.navbar-nav > li > a:hover,
.navbar-nav > li.active > a,
.navbar-nav > li > a:focus{
  color: rgba(255,255,255,.95) !important;
  background: rgba(255,255,255,.08) !important;
  border-radius: 999px;
}

.navbar-toggle{
  border-color: rgba(255,255,255,.20) !important;
}
.navbar-toggle .icon-bar{
  background: rgba(255,255,255,.85) !important;
}

/* Petits arrondis + espacement */
.navbar-nav > li > a{
  margin: 6px 4px;
  padding: 8px 12px !important;
}

/* Icônes */
.navbar i, .navbar .fa{
  opacity: .9;
}

/* === PATCH SSPR/Bootstrap : centrage + carte glass propre === */

/* centre la zone principale */
.container{
  max-width: 980px !important;
  width: 100% !important;
}

/* évite le contenu collé au bord */
body{ padding-top: 14px; }

/* typiquement SSPR met tout dans un gros bloc (jumbotron/panel/well) */
.jumbotron, .panel, .well, .thumbnail, .card, .box{
  background: rgba(10,10,12,.45) !important;
  border: 1px solid rgba(255,255,255,.14) !important;
  border-radius: 18px !important;
  box-shadow: 0 18px 50px rgba(0,0,0,.35) !important;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

/* réduit les énormes bandes/hauteurs */
.jumbotron{
  padding: 22px 22px !important;
  margin-top: 18px !important;
}

/* titre plus clean */
h1, h2, h3{
  color: rgba(255,255,255,.92) !important;
  text-shadow: 0 1px 10px rgba(0,0,0,.35);
}

/* Form bootstrap */
.form-control{
  background: rgba(0,0,0,.35) !important;
  border: 1px solid rgba(255,255,255,.14) !important;
  color: rgba(255,255,255,.92) !important;
  border-radius: 14px !important;
  height: auto !important;
  padding: 10px 12px !important;
}
.form-control:focus{
  border-color: rgba(255,255,255,.26) !important;
  box-shadow: 0 0 0 4px rgba(255,255,255,.06) !important;
}

/* Bouton envoyer en vert moderne */
.btn, .btn-default, .btn-primary{
  border-radius: 14px !important;
  font-weight: 700 !important;
}
.btn-primary{
  background: #22c55e !important;
  border-color: rgba(0,0,0,.12) !important;
  color: #07140b !important;
}
.btn-primary:hover{
  background: #16a34a !important;
}

/* Captcha align */
img[alt*="captcha" i], img.captcha{
  border-radius: 12px !important;
  border: 1px solid rgba(255,255,255,.14) !important;
  background: rgba(0,0,0,.25) !important;
}

/* Alertes Bootstrap */
.alert{
  background: rgba(0,0,0,.25) !important;
  border: 1px solid rgba(255,255,255,.12) !important;
  border-radius: 14px !important;
  color: rgba(255,255,255,.92) !important;
}
.alert-danger{ border-color: rgba(239,68,68,.35) !important; }
.alert-warning{ border-color: rgba(245,158,11,.35) !important; }
.alert-success{ border-color: rgba(34,197,94,.35) !important; }
.alert-info{ border-color: rgba(59,130,246,.35) !important; }

/* Navbar noir transparent + pills */
.navbar{
  background: rgba(0,0,0,.45) !important;
  border: 1px solid rgba(255,255,255,.10) !important;
  border-radius: 16px !important;
  margin-top: 10px !important;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.navbar-nav > li > a{
  color: rgba(255,255,255,.78) !important;
  margin: 6px 4px !important;
  padding: 8px 12px !important;
  border-radius: 999px !important;
}
.navbar-nav > li > a:hover,
.navbar-nav > li.active > a{
  color: rgba(255,255,255,.95) !important;
  background: rgba(255,255,255,.08) !important;
}

/* === CENTER FIX (Bootstrap 3 floats) === */

/* Centre le container global */
.container, .container-fluid{
  margin-left: auto !important;
  margin-right: auto !important;
}

/* Si le contenu est dans une colonne Bootstrap (float:left), on la recentre */
.col-xs-12, .col-sm-12, .col-md-12, .col-lg-12,
.col-xs-10, .col-sm-10, .col-md-10, .col-lg-10,
.col-xs-8,  .col-sm-8,  .col-md-8,  .col-lg-8,
.col-xs-6,  .col-sm-6,  .col-md-6,  .col-lg-6,
.col-xs-5,  .col-sm-5,  .col-md-5,  .col-lg-5,
.col-xs-4,  .col-sm-4,  .col-md-4,  .col-lg-4{
  float: none !important;          /* <-- important */
  margin-left: auto !important;
  margin-right: auto !important;
}

/* On limite la largeur du “bloc principal” et on le centre */
.jumbotron, .panel, .well, #content, .content{
  max-width: 980px !important;
  margin: 28px auto !important;
}

/* Si jamais c'est un tableau ou un form wrapper qui fixe la largeur */
table, form{
  max-width: 980px;
}

/* Un peu d'air vertical */
body{
  padding-top: 16px !important;
}


/* === Background SDIS (ABSOLU) === */
html, body{
  background-image:
    linear-gradient(180deg, rgba(0,0,0,.55), rgba(0,0,0,.70)),
    url("/images/bg/bg.jpg") !important;
  background-size: cover !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
  background-attachment: fixed !important;
}

/* === Force background on wrappers (au cas où) === */
#wrap, .wrap, #container, .container-fluid{
  background: transparent !important;
}

/* === Overlay plus doux + vignette === */
body::before{
  background:
    radial-gradient(circle at 30% 20%, rgba(0,0,0,.20), rgba(0,0,0,.55)),
    linear-gradient(180deg, rgba(0,0,0,.15), rgba(0,0,0,.35)) !important;
}

/* === NO GLOBAL DARK OVERLAY === */
body::before{
  background: none !important;
}

/* === Background image (no dark filter) === */
html, body{
  background: url("/images/bg/bg.jpg") center/cover no-repeat fixed !important;
}

/* === Replace default logo (palm tree) by SDIS logo === */
/* SSPR met souvent le logo dans un <img> dans un header/brand.
   On cible large : les images dans la zone d'entête qui sont carrées et visibles. */

img[src*="logo"], img[src*="palm"], img[alt*="logo" i]{
  /* si ça casse ailleurs, on affinera après */
}

#logo, .logo, .brand-logo, .ssp-logo, .header img{
  /* on ne force pas ici */
}

/* Cas fréquent : le palmier est le premier <img> du contenu */
.jumbotron img:first-of-type,
.panel img:first-of-type,
.well img:first-of-type{
  content: url("/images/custom/logo_sdis72.png") !important;
  width: 110px !important;
  height: auto !important;
  border-radius: 14px !important;
  background: rgba(0,0,0,.25) !important;
  padding: 10px !important;
  border: 1px solid rgba(255,255,255,.14) !important;
}

/* === Fix logo sizes === */
img.logo{
  display: block !important;
  max-width: 180px !important;   /* ajuste si besoin */
  width: 180px !important;
  height: auto !important;
  margin: 16px auto !important;
  padding: 10px !important;
  background: rgba(0,0,0,.20) !important;
  border: 1px solid rgba(255,255,255,.14) !important;
  border-radius: 14px !important;
}

img.menu-logo{
  max-height: 34px !important;
  height: 34px !important;
  width: auto !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
}

/* === Spacing + nicer blocks === */

/* Plus d'air dans la carte principale */
.jumbotron, .panel, .well, #content, .content{
  padding: 28px 28px !important;
}

/* Titre + logo mieux séparés */
h1, h2{
  margin-bottom: 18px !important;
}
img.logo{
  margin: 8px auto 18px auto !important;
}

/* Alertes : plus jolies, moins "cadres" */
.alert{
  padding: 14px 16px !important;
  margin: 12px 0 14px 0 !important;
  border-radius: 16px !important;
  border: 1px solid rgba(255,255,255,.14) !important;
  background: rgba(0,0,0,.20) !important;
}

/* Désactive les bordures orange trop agressives si Bootstrap les force */
.alert-warning, .alert-danger, .alert-info, .alert-success{
  box-shadow: none !important;
}
.alert-warning{ border-color: rgba(245,158,11,.30) !important; }
.alert-danger{  border-color: rgba(239,68,68,.30) !important; }
.alert-info{    border-color: rgba(59,130,246,.28) !important; }
.alert-success{ border-color: rgba(34,197,94,.28) !important; }

/* Espacement des champs */
.form-group{
  margin-bottom: 14px !important;
}
label{
  margin-bottom: 6px !important;
  color: rgba(255,255,255,.70) !important;
}

/* Champs plus "modern" */
.form-control{
  border-radius: 14px !important;
}

/* Bouton : un peu d'air */
.btn-primary, input[type="submit"]{
  margin-top: 10px !important;
  padding: 10px 16px !important;
}

/* Captcha : plus respirant */
.captcha{
  margin-top: 10px !important;
}

/* Sépare visuellement les alertes du formulaire */
.alert + form,
.alert + .form,
.alert + .row{
  margin-top: 16px !important;
}

/* Le formulaire : un bloc distinct légèrement plus opaque */
form{
  margin-top: 14px !important;
  padding: 16px !important;
  border-radius: 16px !important;
  background: rgba(0,0,0,.18) !important;
  border: 1px solid rgba(255,255,255,.10) !important;
}

/* Sépare visuellement les alertes du formulaire */
.alert + form,
.alert + .form,
.alert + .row{
  margin-top: 16px !important;
}

/* Le formulaire : un bloc distinct légèrement plus opaque */
form{
  margin-top: 14px !important;
  padding: 16px !important;
  border-radius: 16px !important;
  background: rgba(0,0,0,.18) !important;
  border: 1px solid rgba(255,255,255,.10) !important;
}

/* === REMOVE COLORED FRAMES (alerts) === */
.alert,
.alert-danger,
.alert-warning,
.alert-info,
.alert-success{
  border: 0 !important;                 /* supprime cadres colorés */
  box-shadow: none !important;
  outline: none !important;

  background: rgba(0,0,0,.18) !important;  /* bloc sobre */
  color: rgba(255,255,255,.88) !important;
  border-radius: 16px !important;
}

/* si Bootstrap ajoute une barre à gauche */
.alert::before{ content: none !important; }

/* supprime traits/encadrements parasites */
hr, fieldset{
  border: 0 !important;
}
legend{
  border: 0 !important;
}

/* parfois SSPR met un "panel" coloré */
.panel-heading{
  border: 0 !important;
  background: rgba(0,0,0,.18) !important;
}

/* === Center + reduce "Gestion du mot de passe" header bar === */
.navbar{
  max-width: 980px !important;     /* largeur du cadre */
  margin: 14px auto 18px auto !important;
  padding: 6px 10px !important;    /* hauteur */
  border-radius: 16px !important;
}

/* Réduit la zone du titre */
.navbar-brand{
  padding: 6px 10px !important;
  height: auto !important;
  font-size: 22px !important;
  line-height: 1.2 !important;
}

/* Si le titre est dans .navbar-header */
.navbar-header{
  float: none !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;  /* centre le texte */
}

/* Si la navbar contient un container interne, on évite qu'il "repousse" */
.navbar .container, .navbar .container-fluid{
  width: 100% !important;
  margin: 0 auto !important;
  padding: 0 !important;
}

/* === Bootstrap 5 navbar: center + reduce width === */

/* Le wrapper de menu.tpl commence par <div class="container"> */
div.container > div.navbar{
  max-width: 980px !important;
  margin: 14px auto 18px auto !important;
  padding: 6px 10px !important;
  border-radius: 16px !important;

  background: rgba(0,0,0,.45) !important;
  border: 1px solid rgba(255,255,255,.10) !important;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

/* On empêche container-fluid d'étirer/ajouter du padding */
div.container > div.navbar > .container-fluid{
  padding-left: 10px !important;
  padding-right: 10px !important;
}

/* Centre le brand (logo + titre) */
.navbar-brand{
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;
  margin: 0 auto !important;        /* centre dans la navbar */
  padding: 6px 10px !important;
  font-size: 22px !important;
  line-height: 1.2 !important;
  color: rgba(255,255,255,.92) !important;
}

/* Logo du menu */
.menu-logo{
  max-height: 34px !important;
  height: 34px !important;
  width: auto !important;
  margin: 0 !important;
}

/* Menu items en pills + un peu d'air */
.navbar .nav-link{
  color: rgba(255,255,255,.78) !important;
  margin: 6px 4px !important;
  padding: 8px 12px !important;
  border-radius: 999px !important;
}
.navbar .nav-link:hover,
.navbar .nav-link.active{
  color: rgba(255,255,255,.95) !important;
  background: rgba(255,255,255,.08) !important;
}

/* Toggler (mobile) */
.navbar-toggler{
  border-color: rgba(255,255,255,.20) !important;
}
.navbar-toggler-icon{
  filter: invert(1) opacity(.9); /* icône visible sur fond sombre */
}

/* === MAIN CARD: center + smaller === */
.jumbotron, .panel, .well, #content, .content{
  max-width: 900px !important;     /* <-- réduit la taille */
  width: 100% !important;
  margin: 24px auto !important;    /* <-- centre */
  padding: 22px 22px !important;   /* <-- moins épais */
}

/* Le titre "Gestion du mot de passe" : un peu plus compact */
.jumbotron h1, .panel h1, .well h1, #content h1, .content h1{
  font-size: 28px !important;
  margin: 6px 0 14px 0 !important;
}

/* === MAIN CARD (SSPR Bootstrap 5): center + smaller === */
.card{
  max-width: 900px !important;
  width: 100% !important;
  margin: 26px auto !important;
  border-radius: 18px !important;
  background: rgba(10,10,12,.35) !important;
  border: 1px solid rgba(255,255,255,.12) !important;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

/* plus d'air dans la card */
.card-body{
  padding: 22px 22px !important;
}

/* === Title bar "Gestion du mot de passe" === */
.title.alert{
  max-width: 900px !important;
  margin: 0 auto 16px auto !important;
  padding: 14px 16px !important;
  border-radius: 16px !important;

  background: rgba(0,0,0,.22) !important;
  border: 0 !important;         /* plus de cadre */
  box-shadow: none !important;
}

.title.alert h1{
  font-size: 28px !important;
  margin: 0 !important;
  color: rgba(255,255,255,.92) !important;
}

/* === Put logo ABOVE the title === */
.card.card-success.shadow > .card-body{
  display: flex !important;
  flex-direction: column !important;
}

/* Logo en premier */
.card.card-success.shadow > .card-body img.logo{
  order: 1 !important;
  margin: 10px auto 14px auto !important;
}

/* Titre en second */
.card.card-success.shadow > .card-body .title{
  order: 2 !important;
}

/* Le reste après */
.card.card-success.shadow > .card-body .result,
.card.card-success.shadow > .card-body form,
.card.card-success.shadow > .card-body .alert{
  order: 3 !important;
}
.title.alert{ text-align: center !important; }

/* === Modern system font (no external download) === */
:root{
  --font-sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial,
               "Noto Sans", "Liberation Sans", sans-serif;
}
html, body, button, input, select, textarea{
  font-family: var(--font-sans) !important;
  font-weight: 400 !important;
  letter-spacing: .2px;
}

h1, h2, .navbar-brand{
  font-weight: 600 !important;
  letter-spacing: .3px;
}

/* === Center form fields (Identifiant / Mail / Envoyer) === */

/* Centre les lignes du formulaire */
form .row{
  justify-content: center !important;
}

/* Limite et centre les champs */
form .form-control,
form .input-group{
  max-width: 420px;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* Centre les labels */
form label,
.form-label{
  text-align: center !important;
  width: 100%;
}

/* Bouton Envoyer centré */
form button[type="submit"],
form .btn{
  display: block !important;
  margin: 18px auto 0 auto !important;
  padding: 10px 26px !important;
  border-radius: 999px !important;
}

/* Mobile : un peu plus large */
@media (max-width: 576px){
  form .form-control,
  form .input-group{
    max-width: 100%;
  }
}

/* === SENDTOKEN: layout propre (labels au-dessus + champs full width) === */
/* sendtoken.tpl est inclus dans index.tpl -> on cible via action=sendtoken dans l'URL */
body[action="sendtoken"] .row.mb-3,
body .sendtoken .row.mb-3 {}

/* Fallback plus robuste: on cible directement #login/#mail + leurs parents */
#login, #mail{
  max-width: 100% !important;
  width: 100% !important;
}

/* Met la colonne champ en pleine largeur (au lieu du col-sm-8 à droite) */
#login, #mail{
  display: block !important;
  margin: 0 auto !important;
}

/* Les input-group doivent prendre toute la largeur */
#login.form-control,
#mail.form-control{
  width: 100% !important;
}

/* Labels au-dessus, alignés à gauche, propre */
#login, #mail{
  text-align: left !important;
}

/* Force les labels de ces deux champs à être au-dessus */
#login{
  /* rien */
}
#login, #mail{
  /* rien */
}

/* On restructure visuellement: on met les labels en bloc et on masque la mise en colonne bootstrap */
#login{
  /* rien */
}


/* ===== ALIGNEMENT PRO IDENTIFIANT / MAIL ===== */

/* Largeur unique du formulaire */
.card form{
  max-width: 100%;
  margin: 0 auto;
}

/* Chaque ligne de champ devient une colonne verticale */
.card form .row.mb-3{
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  margin-bottom: 18px !important;
}

/* Labels au-dessus, alignés à gauche */
.card form .row.mb-3 > .col-sm-4{
  width: 100% !important;
  text-align: left !important;
  padding: 0 0 6px 0 !important;
  font-weight: 500;
  opacity: .9;
}

/* Zone champ */
.card form .row.mb-3 > .col-sm-8{
  width: 100% !important;
  padding: 0 !important;
}

/* Champs pleine largeur, identiques */
.card form .form-control{
  width: 100% !important;
  max-width: 100% !important;
  height: 44px;
  border-radius: 999px !important;
}

/* Texte "Format attendu" sous le champ, aligné */
.card form small.form-text{
  display: block;
  margin-top: 6px;
  font-size: 0.85rem;
  opacity: .8;
}

/* Bouton envoyer centré */
.card form button[type="submit"],
.card form input[type="submit"],
.card form .btn{
  display: block !important;
  margin: 26px auto 0 auto !important;
  min-width: 200px;
  height: 46px;
  border-radius: 999px !important;
  font-weight: 600;
}

/* === FORCE ALIGNEMENT (login/mail) sans dépendre de col-sm === */
#login, #mail{
  display:block !important;
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 auto !important;
}

/* Centre le conteneur input-group si présent */
#login.closest-input-group,
#mail.closest-input-group{
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 auto !important;
}

/* input-group : même largeur, centré */
.input-group:has(#login),
.input-group:has(#mail){
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 auto !important;
}

/* Labels du login/mail centrés sur la même largeur */
label[for="login"],
label[for="mail"]{
  display:block !important;
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 auto 6px auto !important;
  text-align:left !important;
}

/* Le "Format attendu" sous le champ, aligné à gauche */
small.form-text.text-muted{
  display:block !important;
  width: 100% !important;
  max-width: 100% !important;
  margin: 6px auto 0 auto !important;
  text-align:left !important;
}

/* Bouton envoyer centré */
button[type="submit"], input[type="submit"]{
  display:block !important;
  margin: 22px auto 0 auto !important;
  min-width: 200px !important;
}


/* =========================================================
   FIX LAYOUT: plus de chevauchement + plus de scroll horizontal
   ========================================================= */

/* 1) Stop le scroll horizontal (élément trop large) */
html, body{
  overflow-x: hidden !important;
}

/* 2) Formulaire: on le centre sans largeur fixe */
.card form{
  width: 100% !important;
  max-width: 620px !important;   /* tu peux mettre 560/600/680 */
  margin: 0 auto !important;
}

/* 3) Chaque ligne = colonne (label au-dessus du champ) */
.card form .row.mb-3{
  display: block !important;     /* on neutralise flex bootstrap ici */
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* Neutralise les col-sm-* qui créent des décalages */
.card form .row.mb-3 > [class*="col-"]{
  width: 100% !important;
  max-width: 100% !important;
  flex: 0 0 100% !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* 4) Labels propres */
.card form .col-form-label{
  text-align: left !important;
  padding: 0 0 6px 0 !important;
}

/* 5) Input-group: pleine largeur */
.card form .input-group{
  width: 100% !important;
}

/* 6) Inputs: pas de largeur fixe (sinon scroll) */
#login, #mail, #captchaphrase{
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
}

/* 7) Texte “format attendu” sous le champ */
.card form small.form-text{
  display: block !important;
  margin: 6px 0 0 0 !important;
  text-align: left !important;
}

/* 8) hCaptcha / Cloudflare: centré sans déborder */
.h-captcha,
.cf-turnstile{
  display: flex !important;
  justify-content: center !important;
  width: 100% !important;
  margin: 14px 0 !important;
}

/* 9) Bouton envoyer centré */
.card form button[type="submit"],
.card form input[type="submit"],
.card form .btn{
  display: inline-flex !important;
  justify-content: center !important;
  align-items: center !important;
  margin: 18px auto 0 auto !important;
}


/* === Captcha centré sans débordement === */
.h-captcha,
.cf-turnstile{
  display: flex !important;
  justify-content: center !important;
  width: 100% !important;
  margin: 14px 0 !important;
}

/* ===== HOTFIX LAYOUT (ciblé) ===== */

/* évite les barres de défilement horizontales */
html, body{
  overflow-x: hidden !important;
}
*, *::before, *::after{
  box-sizing: border-box !important;
}

/* On NE touche plus toutes les cards : on neutralise l'ancien style global */
.card{
  max-width: none !important;
  margin: 0 !important;
  border-radius: initial !important;
  background: initial !important;
  border: initial !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* On cible UNIQUEMENT la carte principale (celle de index.tpl) */
.card.card-success{
  width: min(920px, calc(100% - 32px)) !important;
  margin: 24px auto !important;
  border-radius: 18px !important;

  background: rgba(10,10,12,.35) !important;
  border: 1px solid rgba(255,255,255,.12) !important;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  overflow: hidden !important;
}

/* padding interne */
.card.card-success > .card-body{
  padding: 22px !important;
}

/* Form : centrée + largeur cohérente */
.card.card-success form{
  max-width: 560px !important;
  margin: 0 auto !important;
}

/* champs pleine largeur */
.card.card-success form .form-control{
  width: 100% !important;
  max-width: 100% !important;
}

/* bouton centré */
.card.card-success form .btn,
.card.card-success form button[type="submit"],
.card.card-success form input[type="submit"]{
  display: block !important;
  margin: 22px auto 0 auto !important;
  min-width: 220px !important;
}

/* captcha centré + pas de dépassement */
.h-captcha, .cf-turnstile{
  display: flex !important;
  justify-content: center !important;
  width: 100% !important;
  max-width: 100% !important;
  overflow: hidden !important;
  margin: 14px 0 !important;
}


/* ===== FIX overflow + alignement (Bootstrap row gutters) ===== */
.card .row{
  margin-left: 0 !important;
  margin-right: 0 !important;
}

.card .row > [class*="col-"]{
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* Tous les champs (login/mail/newpassword/confirmpassword...) même largeur */
.card form .form-control,
.card form .input-group{
  width: 100% !important;
  max-width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* sécurité : si un élément déborde malgré tout */
html, body{
  overflow-x: hidden;
}

/* ===== UNIFORMISATION ESPACE LABEL / CHAMP ===== */

/* Tous les groupes de champs : même espace vertical */
.card form .row.mb-3{
  gap: 10px !important;
}

/* Labels : pas de marge parasite */
.card form .row.mb-3 label{
  margin-bottom: 0 !important;
}

/* Champs : position uniforme */
.card form .form-control{
  margin-top: 0 !important;
}

/* Texte "Format attendu" : espace maîtrisé */
.card form small.form-text{
  margin-top: 6px !important;
}

/* Champs sans small.form-text (nouveau mdp / confirmation) */
.card form .row.mb-3:not(:has(small.form-text)){
  padding-bottom: 12px;
}


/* ===== FIX ESPACE UNIFORME (sans :has) ===== */
/* Objectif: même écart label -> champ pour Nouveau mot de passe / Confirmation */

/* On garantit que les champs mdp ont une marge haute identique */
#newpassword,
#confirmpassword,
#oldpassword{
  margin-top: 10px !important;   /* ajuste 8/10/12 si besoin */
}

/* Et on évite que bootstrap rajoute/retire des marges bizarres */
.card.card-success form label{
  margin-bottom: 0 !important;
}