/* =============================================================================
   kw-ds-auth.css — connexion et inscription au nouveau design (lots AUTH1 et AUTH2, 12/10/2026)
   Fenêtres #modalLogin et #modalRegister, ouvertes par les boutons « Se connecter » et « Créer un compte » du
   nouvel en-tête : elles gardaient l'habillage de custom.css (police Inter, en-tête en dégradé, grand rond d'icône,
   bouton en dégradé) et héritaient du titre de 44 px du socle.
   Habillage SEULEMENT : aucun champ, nom de champ, script ni envoi de formulaire n'est modifié.
   Tout est limité à body.kw-ds et aux deux fenêtres (la fenêtre de choix du tunnel n'est pas concernée).
   Les « !important » répondent à ceux de custom.css (mode sombre, marge haute de 150 px, remplissage automatique).
   Police des titres : custom.css impose « Inter !important » à tous les h1–h6 du site, nouvelles pages comprises ;
   les titres des fenêtres suivent donc le reste du site tant que ce point n'est pas tranché.
   ============================================================================= */

/* ── Fenêtre ── */
.kw-ds #modalLogin .kw-modal-login-dialog, .kw-ds #modalRegister .kw-modal-reg-dialog { margin-top: max(24px, 9vh) !important; margin-bottom: 24px !important; }
.kw-ds #modalLogin .kw-modal-login-dialog { max-width: 440px; }
.kw-ds #modalRegister .kw-modal-reg-dialog { max-width: 540px; }
.kw-ds #modalLogin .modal-content, .kw-ds #modalRegister .modal-content { background: var(--surface); color: var(--texte); border: 1px solid var(--filet); border-radius: var(--r3);
  box-shadow: var(--c-ombre-dlg); overflow: hidden; font-family: var(--corps); }
.kw-ds #modalLogin .kw-modal-close-btn, .kw-ds #modalRegister .kw-modal-close-btn { top: 14px; right: 14px; width: 40px; height: 40px; border-radius: var(--r1); background: transparent; color: var(--gris); font-size: 15px; }
.kw-ds #modalLogin .kw-modal-close-btn:hover, .kw-ds #modalRegister .kw-modal-close-btn:hover { background: var(--surface-2); color: var(--encre); }
.kw-ds.kw-rtl #modalLogin .kw-modal-close-btn, .kw-ds.kw-rtl #modalRegister .kw-modal-close-btn { right: auto; left: 14px; }

/* ── En-tête : un titre et une ligne, alignés à gauche ── */
.kw-ds #modalLogin .kw-modal-login-header, .kw-ds #modalRegister .kw-modal-reg-header { padding: 26px 28px 6px; background: none; border: 0; text-align: start; }
.kw-ds #modalLogin .kw-modal-login-icon, .kw-ds #modalRegister .kw-modal-login-icon { display: none; }
.kw-ds #modalLogin .kw-modal-login-title, .kw-ds #modalRegister .kw-modal-login-title { margin: 0 0 4px; padding-inline-end: 44px; font: 800 26px/1.15 var(--titre); font-stretch: 108%; letter-spacing: -.02em; color: var(--encre); }
.kw-ds #modalLogin .kw-modal-login-sub, .kw-ds #modalRegister .kw-modal-login-sub { margin: 0; font-size: 15px; color: var(--gris); }
.kw-ds #modalLogin .kw-modal-login-body { padding: 18px 28px 24px; background: none; }
.kw-ds #modalRegister .kw-modal-reg-body { padding: 14px 28px 4px; background: none; }

/* ── Champs ── */
.kw-ds #modalLogin .kw-form-group, .kw-ds #modalRegister .kw-form-group { margin-bottom: 14px; }
.kw-ds #modalLogin .kw-form-label, .kw-ds #modalRegister .kw-form-label { margin-bottom: 6px; font: 600 14px var(--corps); color: var(--encre) !important; }
.kw-ds #modalLogin .kw-form-label-row { margin-bottom: 6px; }
.kw-ds #modalLogin .kw-form-label-row .kw-form-label { margin-bottom: 0; }
.kw-ds #modalLogin .kw-forgot-link { font: 600 14px var(--corps); color: var(--bleu); }
.kw-ds #modalLogin .kw-forgot-link:hover { color: var(--bleu); text-decoration: underline; }
.kw-ds #modalLogin .kw-input-wrap, .kw-ds #modalRegister .kw-input-wrap { background: none !important; border: 0; }
.kw-ds #modalLogin .kw-input, .kw-ds #modalRegister .kw-input { height: 48px; padding-block: 0; padding-inline-end: 44px; border: 1px solid var(--filet-fort) !important; border-radius: var(--r1);
  background: var(--surface) !important; color: var(--encre) !important; font: 500 16px var(--corps); box-shadow: none !important; transition: border-color .15s; }
/* Remplissage du côté de l'icône : seulement quand le champ suit une icône (le téléphone garde les 92 px
   que lui donne le sélecteur d'indicatif, sinon « +221 » recouvre le numéro). */
.kw-ds #modalLogin .kw-input-icon ~ .kw-input, .kw-ds #modalRegister .kw-input-icon ~ .kw-input { padding-inline-start: 42px; }
.kw-ds #modalRegister select.kw-input { height: 48px; padding-inline-end: 36px !important; }
.kw-ds #modalRegister .selected-dial-code { color: var(--encre); }
.kw-ds #modalLogin .kw-input::placeholder, .kw-ds #modalRegister .kw-input::placeholder { color: var(--gris) !important; opacity: .75; font-weight: 400; }
/* Focus : le contour orange du socle (custom.css l'impose à tous les champs) ; la bordure passe à l'encre. */
.kw-ds #modalLogin .kw-input:focus, .kw-ds #modalRegister .kw-input:focus { border-color: var(--encre) !important; background: var(--surface) !important; box-shadow: none !important; }
.kw-ds #modalLogin .kw-input:focus-visible, .kw-ds #modalRegister .kw-input:focus-visible { outline: 3px solid var(--orange) !important; outline-offset: 1px; }
.kw-ds #modalLogin .kw-input:-webkit-autofill, .kw-ds #modalRegister .kw-input:-webkit-autofill { -webkit-box-shadow: 0 0 0 40px var(--surface) inset !important; -webkit-text-fill-color: var(--encre) !important; }
.kw-ds #modalLogin .kw-input-icon, .kw-ds #modalRegister .kw-input-icon { left: 14px; color: var(--gris) !important; font-size: 15px; }
.kw-ds #modalLogin .kw-input-wrap:focus-within .kw-input-icon, .kw-ds #modalRegister .kw-input-wrap:focus-within .kw-input-icon { color: var(--encre) !important; }
.kw-ds #modalLogin .kw-pw-toggle, .kw-ds #modalRegister .kw-pw-toggle { right: 4px; color: var(--gris) !important; border-radius: var(--r1); }
.kw-ds #modalLogin .kw-pw-toggle:hover, .kw-ds #modalRegister .kw-pw-toggle:hover { color: var(--encre) !important; }
.kw-ds #modalRegister .kw-select-arrow { color: var(--gris); }
.kw-ds #modalRegister .kw-required { color: var(--erreur); }
.kw-ds #modalLogin .kw-form-group.is-valid .kw-input, .kw-ds #modalRegister .kw-form-group.is-valid .kw-input { border-color: var(--ok) !important; background: var(--surface) !important; }
.kw-ds #modalLogin .kw-form-group.is-valid .kw-input-icon, .kw-ds #modalRegister .kw-form-group.is-valid .kw-input-icon { color: var(--ok) !important; }
.kw-ds #modalLogin .kw-form-group.is-invalid .kw-input, .kw-ds #modalRegister .kw-form-group.is-invalid .kw-input { border-color: var(--erreur) !important; background: var(--surface) !important; }
.kw-ds #modalLogin .kw-form-group.is-invalid .kw-input-icon, .kw-ds #modalRegister .kw-form-group.is-invalid .kw-input-icon { color: var(--erreur) !important; }
/* Arabe : icône du champ à droite, bouton « afficher » à gauche. */
.kw-ds.kw-rtl #modalLogin .kw-input-icon, .kw-ds.kw-rtl #modalRegister .kw-input-icon { left: auto; right: 14px; }
.kw-ds.kw-rtl #modalLogin .kw-pw-toggle, .kw-ds.kw-rtl #modalRegister .kw-pw-toggle { right: auto; left: 4px; }

/* ── Cases à cocher, verrouillage des majuscules, force du mot de passe ── */
.kw-ds #modalLogin .kw-form-options { margin-bottom: 14px !important; }
.kw-ds #modalLogin .kw-custom-check, .kw-ds #modalRegister .kw-custom-check { font: 500 15px var(--corps); color: var(--texte) !important; }
.kw-ds #modalLogin .kw-form-options label, .kw-ds #modalRegister .kw-form-options label { color: var(--texte) !important; }
.kw-ds #modalLogin .kw-custom-check input[type="checkbox"], .kw-ds #modalRegister .kw-custom-check input[type="checkbox"] { border: 1px solid var(--filet-fort); border-radius: 5px; background: var(--surface); }
.kw-ds #modalLogin .kw-custom-check input[type="checkbox"]:checked, .kw-ds #modalRegister .kw-custom-check input[type="checkbox"]:checked { background: var(--bleu); border-color: var(--bleu); }
.kw-ds #modalLogin .kw-custom-check input[type="checkbox"]:checked::after, .kw-ds #modalRegister .kw-custom-check input[type="checkbox"]:checked::after { left: 5px; top: 1px; border-color: var(--surface); }
.kw-ds #modalLogin .kw-custom-check input[type="checkbox"]:focus-visible, .kw-ds #modalRegister .kw-custom-check input[type="checkbox"]:focus-visible { outline: 3px solid var(--orange); outline-offset: 2px; box-shadow: none; }
.kw-ds #modalRegister .kw-tos-link { color: var(--bleu) !important; font-weight: 600; }
.kw-ds #modalLogin .kw-capslock { background: var(--orange-doux); border: 1px solid var(--orange); border-radius: var(--r1); color: var(--orange-texte); font: 600 13.5px var(--corps); }
.kw-ds #modalLogin .kw-capslock i { color: var(--orange-texte); }
.kw-ds #modalRegister .kw-modal-strength-bar { background: var(--surface-2); }
.kw-ds #modalRegister .kw-modal-strength-label { font-size: 13px; }
.kw-ds #modalRegister .kw-pw-match { font-size: 13.5px; }
.kw-ds #modalRegister .kw-pw-match.match { color: var(--ok); }
.kw-ds #modalRegister .kw-pw-match.nomatch { color: var(--erreur); }

/* ── Boutons ── */
.kw-ds #modalLogin .kw-btn-login, .kw-ds #modalRegister .kw-btn-login, .kw-ds #modalRegister .kw-mstep-btn-next { min-height: 48px; padding: 0 20px; margin-bottom: 0; border: 0; border-radius: var(--r1);
  background: var(--orange); color: var(--sur-orange); font: 600 16px var(--corps); letter-spacing: 0; box-shadow: none; transform: none; transition: background-color .15s; }
.kw-ds #modalLogin .kw-btn-login:hover, .kw-ds #modalRegister .kw-btn-login:hover, .kw-ds #modalRegister .kw-mstep-btn-next:hover { background: var(--orange-fonce); box-shadow: none; transform: none; }
.kw-ds #modalLogin .kw-btn-login[disabled], .kw-ds #modalRegister .kw-btn-login[disabled], .kw-ds #modalLogin .kw-btn-login[aria-busy="true"], .kw-ds #modalRegister .kw-btn-login[aria-busy="true"] { background: var(--orange); opacity: .6; }
.kw-ds #modalRegister .kw-mstep-btn-prev { min-height: 48px; padding: 0 18px; border: 1px solid var(--filet-fort); border-radius: var(--r1); background: var(--surface); color: var(--encre); font: 600 15px var(--corps); }
.kw-ds #modalRegister .kw-mstep-btn-prev:hover { background: var(--surface); border-color: var(--encre); color: var(--encre); }
.kw-ds #modalLogin .kw-login-security { margin: 14px 0 0 !important; padding: 0; background: none !important; border: 0; justify-content: flex-start; text-align: start; font: 500 13.5px var(--corps); color: var(--gris) !important; }
.kw-ds #modalLogin .kw-login-security i { color: var(--ok); }
.kw-ds #modalLogin .kw-modal-login-footer { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--filet); text-align: start; font-size: 15px; color: var(--gris); }
.kw-ds #modalRegister .kw-modal-login-footer { margin: 0; padding: 14px 28px 22px; background: none; border-top: 0; text-align: start; font-size: 15px; color: var(--gris); }
.kw-ds #modalLogin .kw-modal-login-footer a, .kw-ds #modalRegister .kw-modal-login-footer a { color: var(--bleu); font-weight: 600; }
.kw-ds #modalLogin .kw-modal-login-footer a:hover, .kw-ds #modalRegister .kw-modal-login-footer a:hover { color: var(--bleu); text-decoration: underline; }

/* ── Inscription : les trois étapes ── */
.kw-ds #modalRegister .kw-mstep-progress { justify-content: flex-start; padding: 12px 28px 10px; background: none; }
.kw-ds #modalRegister .kw-mstep { flex-direction: row; gap: 8px; }
.kw-ds #modalRegister .kw-mstep-circle { width: 28px; height: 28px; border: 0; background: var(--surface-2); color: var(--gris); font: 700 13px var(--corps); box-shadow: none; }
.kw-ds #modalRegister .kw-mstep-label { font: 500 14px var(--corps); color: var(--gris); }
.kw-ds #modalRegister .kw-mstep-active .kw-mstep-circle { background: var(--encre); color: var(--surface); box-shadow: none; }
.kw-ds #modalRegister .kw-mstep-active .kw-mstep-label { color: var(--encre); font-weight: 600; }
/* Étape terminée : la coche seule (custom.css l'ajoute en ::before, à côté du chiffre). */
.kw-ds #modalRegister .kw-mstep-done .kw-mstep-circle { background: var(--ok); color: var(--surface); font-size: 0; }
.kw-ds #modalRegister .kw-mstep-done .kw-mstep-circle::before { font-size: 12px; }
.kw-ds #modalRegister .kw-mstep-done .kw-mstep-label { color: var(--ok); }
.kw-ds #modalRegister .kw-mstep-line { max-width: 44px; margin: 0 10px; background: var(--filet-fort); }
.kw-ds #modalRegister .kw-mstep-line-done { background: var(--ok); }
.kw-ds #modalRegister .kw-mstep-nav { padding: 10px 28px 4px; background: none; }

@media (prefers-reduced-motion: reduce) {
  .kw-ds #modalLogin .kw-input, .kw-ds #modalRegister .kw-input, .kw-ds #modalLogin .kw-btn-login, .kw-ds #modalRegister .kw-btn-login, .kw-ds #modalRegister .kw-mstep-panel { transition: none; animation: none; }
}
@media (max-width: 575px) {
  .kw-ds #modalLogin .kw-modal-login-dialog, .kw-ds #modalRegister .kw-modal-reg-dialog { margin: 12px !important; max-width: none; }
  .kw-ds #modalLogin .kw-modal-login-header, .kw-ds #modalRegister .kw-modal-reg-header { padding: 22px 18px 4px; }
  .kw-ds #modalLogin .kw-modal-login-title, .kw-ds #modalRegister .kw-modal-login-title { font-size: 23px; }
  .kw-ds #modalLogin .kw-modal-login-body { padding: 16px 18px 20px; }
  .kw-ds #modalRegister .kw-modal-reg-body { padding: 12px 18px 4px; }
  .kw-ds #modalRegister .kw-mstep-progress { padding: 10px 18px 8px; }
  .kw-ds #modalRegister .kw-mstep-label { display: none; }
  .kw-ds #modalRegister .kw-mstep-active .kw-mstep-label { display: inline; }
  .kw-ds #modalRegister .kw-mstep-nav { padding: 8px 18px 4px; }
  .kw-ds #modalRegister .kw-modal-login-footer { padding: 12px 18px 18px; }
}

/* =============================================================================
   Lot AUTH2 (12/10/2026) — PAGES de connexion (index.php?rp=/login), d'inscription (register.php) et de mot de passe
   oublié. Même coquille .kw-login-wrapper : un panneau de marque sombre (logo, slogan, illustration, halos) et le
   formulaire. Au nouveau design : le panneau de marque disparaît — l'en-tête porte déjà le logo — et le formulaire
   devient une carte centrée, habillée comme les fenêtres. Habillage SEULEMENT : aucun champ ni script modifié.
   ============================================================================= */

/* ── Champs : mêmes règles que les fenêtres (reprises par maj_css.py, ne pas les éditer ici) ── */
.kw-ds .kw-login-wrapper .kw-form-group { margin-bottom: 14px; }
.kw-ds .kw-login-wrapper .kw-form-label { margin-bottom: 6px; font: 600 14px var(--corps); color: var(--encre) !important; }
.kw-ds .kw-login-wrapper .kw-form-label-row { margin-bottom: 6px; }
.kw-ds .kw-login-wrapper .kw-form-label-row .kw-form-label { margin-bottom: 0; }
.kw-ds .kw-login-wrapper .kw-forgot-link { font: 600 14px var(--corps); color: var(--bleu); }
.kw-ds .kw-login-wrapper .kw-forgot-link:hover { color: var(--bleu); text-decoration: underline; }
.kw-ds .kw-login-wrapper .kw-input-wrap { background: none !important; border: 0; }
.kw-ds .kw-login-wrapper .kw-input { height: 48px; padding-block: 0; padding-inline-end: 44px; border: 1px solid var(--filet-fort) !important; border-radius: var(--r1); background: var(--surface) !important; color: var(--encre) !important; font: 500 16px var(--corps); box-shadow: none !important; transition: border-color .15s; }
.kw-ds .kw-login-wrapper .kw-input-icon ~ .kw-input { padding-inline-start: 42px; }
.kw-ds .kw-login-wrapper select.kw-input { height: 48px; padding-inline-end: 36px !important; }
.kw-ds .kw-login-wrapper .selected-dial-code { color: var(--encre); }
.kw-ds .kw-login-wrapper .kw-input::placeholder { color: var(--gris) !important; opacity: .75; font-weight: 400; }
.kw-ds .kw-login-wrapper .kw-input:focus { border-color: var(--encre) !important; background: var(--surface) !important; box-shadow: none !important; }
.kw-ds .kw-login-wrapper .kw-input:focus-visible { outline: 3px solid var(--orange) !important; outline-offset: 1px; }
.kw-ds .kw-login-wrapper .kw-input:-webkit-autofill { -webkit-box-shadow: 0 0 0 40px var(--surface) inset !important; -webkit-text-fill-color: var(--encre) !important; }
.kw-ds .kw-login-wrapper .kw-input-icon { left: 14px; color: var(--gris) !important; font-size: 15px; }
.kw-ds .kw-login-wrapper .kw-input-wrap:focus-within .kw-input-icon { color: var(--encre) !important; }
.kw-ds .kw-login-wrapper .kw-pw-toggle { right: 4px; color: var(--gris) !important; border-radius: var(--r1); }
.kw-ds .kw-login-wrapper .kw-pw-toggle:hover { color: var(--encre) !important; }
.kw-ds .kw-login-wrapper .kw-select-arrow { color: var(--gris); }
.kw-ds .kw-login-wrapper .kw-required { color: var(--erreur); }
.kw-ds .kw-login-wrapper .kw-form-group.is-valid .kw-input { border-color: var(--ok) !important; background: var(--surface) !important; }
.kw-ds .kw-login-wrapper .kw-form-group.is-valid .kw-input-icon { color: var(--ok) !important; }
.kw-ds .kw-login-wrapper .kw-form-group.is-invalid .kw-input { border-color: var(--erreur) !important; background: var(--surface) !important; }
.kw-ds .kw-login-wrapper .kw-form-group.is-invalid .kw-input-icon { color: var(--erreur) !important; }
.kw-ds.kw-rtl .kw-login-wrapper .kw-input-icon { left: auto; right: 14px; }
.kw-ds.kw-rtl .kw-login-wrapper .kw-pw-toggle { right: auto; left: 4px; }
.kw-ds .kw-login-wrapper .kw-form-options { margin-bottom: 14px !important; }
.kw-ds .kw-login-wrapper .kw-custom-check { font: 500 15px var(--corps); color: var(--texte) !important; }
.kw-ds .kw-login-wrapper .kw-form-options label { color: var(--texte) !important; }
.kw-ds .kw-login-wrapper .kw-custom-check input[type="checkbox"] { border: 1px solid var(--filet-fort); border-radius: 5px; background: var(--surface); }
.kw-ds .kw-login-wrapper .kw-custom-check input[type="checkbox"]:checked { background: var(--bleu); border-color: var(--bleu); }
.kw-ds .kw-login-wrapper .kw-custom-check input[type="checkbox"]:checked::after { left: 5px; top: 1px; border-color: var(--surface); }
.kw-ds .kw-login-wrapper .kw-custom-check input[type="checkbox"]:focus-visible { outline: 3px solid var(--orange); outline-offset: 2px; box-shadow: none; }
.kw-ds .kw-login-wrapper .kw-tos-link { color: var(--bleu) !important; font-weight: 600; }
.kw-ds .kw-login-wrapper .kw-capslock { background: var(--orange-doux); border: 1px solid var(--orange); border-radius: var(--r1); color: var(--orange-texte); font: 600 13.5px var(--corps); }
.kw-ds .kw-login-wrapper .kw-capslock i { color: var(--orange-texte); }
.kw-ds .kw-login-wrapper .kw-pw-match { font-size: 13.5px; }
.kw-ds .kw-login-wrapper .kw-pw-match.match { color: var(--ok); }
.kw-ds .kw-login-wrapper .kw-pw-match.nomatch { color: var(--erreur); }
.kw-ds .kw-login-wrapper .kw-btn-login { min-height: 48px; padding: 0 20px; margin-bottom: 0; border: 0; border-radius: var(--r1); background: var(--orange); color: var(--sur-orange); font: 600 16px var(--corps); letter-spacing: 0; box-shadow: none; transform: none; transition: background-color .15s; }
.kw-ds .kw-login-wrapper .kw-btn-login:hover { background: var(--orange-fonce); box-shadow: none; transform: none; }
.kw-ds .kw-login-wrapper .kw-btn-login[disabled], .kw-ds .kw-login-wrapper .kw-btn-login[aria-busy="true"] { background: var(--orange); opacity: .6; }
.kw-ds .kw-login-wrapper .kw-login-security { margin: 14px 0 0 !important; padding: 0; background: none !important; border: 0; justify-content: flex-start; text-align: start; font: 500 13.5px var(--corps); color: var(--gris) !important; }
.kw-ds .kw-login-wrapper .kw-login-security i { color: var(--ok); }

/* ── Mise en page ── */
.kw-ds #main-body:has(.kw-login-wrapper) { padding: 0; margin: 0; background: var(--fond); }
/* !important : custom.css impose « .container { padding: 15px !important } » sous 480 px. */
.kw-ds #main-body:has(.kw-login-wrapper) > .container { max-width: none; width: 100%; padding: 0 !important; margin: 0; }
.kw-ds #main-body:has(.kw-login-wrapper) .primary-content { padding: 0; }
body.kw-ds:has(.kw-login-wrapper) .master-breadcrumb { display: none; }
.kw-ds .kw-login-wrapper { display: block; min-height: 0; margin: 0; padding: 44px 16px 80px; background: var(--fond); border-radius: 0; box-shadow: none; overflow: visible; font-family: var(--corps); }
.kw-ds .kw-login-brand { display: none; }
.kw-ds .kw-login-form-panel { display: block; max-width: 460px; margin: 0 auto; padding: 28px; background: var(--surface) !important; border: 1px solid var(--filet); border-radius: var(--r3); box-shadow: var(--ombre); }
.kw-ds .kw-login-form-panel.kw-register-panel { max-width: 720px; overflow: visible; }
.kw-ds .kw-login-form-inner, .kw-ds .kw-login-form-inner.kw-register-inner { width: 100%; max-width: none; padding: 0; background: none !important; }

/* ── En-tête du formulaire : un titre et une ligne ── */
.kw-ds .kw-login-form-header { margin: 0 0 20px; text-align: start; }
.kw-ds .kw-login-wave-icon, .kw-ds .kw-pwr-icon { display: none; }
.kw-ds .kw-login-title, .kw-ds .kw-pwr-title, .kw-ds .kw-pwr-success-title { margin: 0 0 4px; font: 800 26px/1.15 var(--titre); font-stretch: 108%; letter-spacing: -.02em; color: var(--encre) !important; }
.kw-ds .kw-login-subtitle, .kw-ds .kw-pwr-sub, .kw-ds .kw-pwr-success-text { margin: 0; font-size: 15.5px; line-height: 1.55; color: var(--gris) !important; }
.kw-ds .kw-pwr-sub strong { color: var(--encre); }
.kw-ds .kw-pwr-head { margin: 0 0 20px; }

/* ── Pied du formulaire ── */
.kw-ds .kw-login-footer, .kw-ds .kw-pwr-foot { margin-top: 18px; padding-top: 16px; background: none !important; border-top: 1px solid var(--filet) !important; text-align: start; }
.kw-ds .kw-login-footer p { margin: 0; font-size: 15px; color: var(--gris) !important; }
.kw-ds .kw-register-link, .kw-ds .kw-login-footer a, .kw-ds .kw-pwr-help a, .kw-ds .kw-pwr-success-text a { color: var(--bleu); font-weight: 600; text-decoration: none; }
.kw-ds .kw-register-link:hover, .kw-ds .kw-login-footer a:hover, .kw-ds .kw-pwr-help a:hover { color: var(--bleu); text-decoration: underline; }
/* Badges « Wave / carte » du pied : l'en-tête et le pied du site portent déjà les logos de paiement. */
.kw-ds .kw-login-payment-icons { display: none; }
.kw-ds .kw-login-form-panel a:focus-visible, .kw-ds .kw-login-form-panel button:focus-visible { outline: 3px solid var(--orange); outline-offset: 2px; border-radius: var(--r1); }

/* ── Inscription : groupes de champs ── */
.kw-ds .kw-rg-group { margin: 0 0 18px; padding: 0 0 8px; border-bottom: 1px solid var(--filet) !important; }
.kw-ds .kw-rg-group:last-of-type { border-bottom: 0 !important; margin-bottom: 0; }
.kw-ds .kw-rg-group-label { display: flex; align-items: center; gap: 8px; margin: 0 0 12px; font: 600 15px var(--corps); letter-spacing: 0; text-transform: none; color: var(--encre) !important; }
.kw-ds .kw-rg-group-label > i { width: auto; height: auto; margin: 0 !important; background: none !important; border-radius: 0; color: var(--bleu); font-size: 14px; }
.kw-ds .kw-optional { color: var(--gris); font-weight: 400; }
.kw-ds .kw-register-tos { margin: 14px 0; padding: 0; background: none !important; border: 0; border-radius: 0; }
.kw-ds .kw-register-optin { margin: 12px 0; color: var(--texte) !important; }
.kw-ds .kw-login-wrapper .kw-register-form .kw-form-group { margin-bottom: 12px; }
.kw-ds .kw-login-wrapper select.kw-input, .kw-ds .kw-login-wrapper select.form-control { height: 48px; }
/* Les listes « Région » (14 régions du Sénégal, #kwRegionSN) et « départements / États » (#stateselect, posée par
   StatesDropdown.js de WHMCS pour 13 pays) arrivent par script, sans la flèche des listes Pays et Devise : chevron dessiné ici. */
.kw-ds .kw-login-wrapper select[name="kwRegionSN"], .kw-ds .kw-login-wrapper #kwRegionSN, .kw-ds .kw-login-wrapper #stateselect { -webkit-appearance: none; appearance: none; padding-inline-end: 38px !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%237a839c' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important; background-position: right 14px center !important; }
.kw-ds.kw-rtl .kw-login-wrapper select[name="kwRegionSN"], .kw-ds.kw-rtl .kw-login-wrapper #kwRegionSN, .kw-ds.kw-rtl .kw-login-wrapper #stateselect { background-position: left 14px center !important; }
/* Liste des départements / États (lot FENETRES) : les noms sont longs (« Alpes-de-Haute-Provence ») ; elle prend la ligne
   entière, la ville et le code postal se partagent la précédente. */
@media (min-width: 576px) {
  .kw-ds .kw-login-wrapper .row:has(> #kwColState #stateselect) > #kwColCity { flex: 0 0 66.6667%; max-width: 66.6667%; }
  .kw-ds .kw-login-wrapper .row:has(> #kwColState #stateselect) > #kwColPostcode { flex: 0 0 33.3333%; max-width: 33.3333%; }
  .kw-ds .kw-login-wrapper .row:has(> #kwColState #stateselect) > #kwColState { flex: 0 0 100%; max-width: 100%; }
}
.kw-ds .kw-login-wrapper .form-control:not(.kw-input) { height: 48px; border: 1px solid var(--filet-fort); border-radius: var(--r1); background: var(--surface); color: var(--encre); font: 500 16px var(--corps); box-shadow: none; }
.kw-ds .kw-login-wrapper .progress { height: 6px; border-radius: 6px; background: var(--surface-2); box-shadow: none; }
.kw-ds .kw-login-wrapper .alert { border-radius: var(--r1); font-size: 15px; }
.kw-ds .kw-login-wrapper .kw-strength-label { color: var(--gris) !important; }

/* ── Mot de passe oublié : la progression en trois barres remplace la liste du panneau de marque ── */
.kw-ds .kw-pwr-steps-mobile { display: flex; margin: 0 0 20px; }
.kw-ds .kw-pwr-mstep { background: var(--surface-2); }
.kw-ds .kw-pwr-mstep.is-done, .kw-ds .kw-pwr-mstep.is-current { background: var(--encre); }
.kw-ds .kw-pwr-mstep-text { display: inline; font: 600 13.5px var(--corps); color: var(--gris); }
.kw-ds .kw-pwr-req, .kw-ds .kw-pwr-hint, .kw-ds .kw-pwr-question { background: var(--surface-2) !important; border: 1px solid var(--filet) !important; border-radius: var(--r1); color: var(--texte) !important; }
.kw-ds .kw-pwr-question { border-inline-start: 3px solid var(--orange) !important; font-weight: 600; color: var(--encre) !important; }
.kw-ds .kw-pwr-req-title, .kw-ds .kw-pwr-strength-label { color: var(--gris) !important; }
.kw-ds .kw-pwr-req li { color: var(--gris); }
.kw-ds .kw-pwr-req li i { background: var(--filet-fort) !important; color: var(--surface); }
.kw-ds .kw-pwr-req li.is-met { color: var(--ok); }
.kw-ds .kw-pwr-req li.is-met i { background: var(--ok) !important; }
.kw-ds .kw-pwr-req-tag { color: var(--orange-texte); background: var(--orange-doux); }
.kw-ds .kw-pwr-hint i { color: var(--bleu); }
.kw-ds .kw-pwr-match { color: var(--ok); }
.kw-ds .kw-pwr-error { background: var(--surface) !important; border: 1px solid var(--erreur) !important; border-radius: var(--r1); color: var(--erreur) !important; }
.kw-ds .kw-pwr-back { color: var(--gris); font-weight: 600; }
.kw-ds .kw-pwr-back:hover { color: var(--encre); }
.kw-ds .kw-pwr-help { color: var(--gris); }
.kw-ds .kw-pwr-success { text-align: start; }
.kw-ds .kw-pwr-success-icon { margin: 0 0 16px; width: 52px; height: 52px; background: var(--ok-doux); color: var(--ok); font-size: 22px; animation: none; }
.kw-ds .kw-pwr-success-icon--sent { background: var(--bleu-doux); color: var(--bleu); }
.kw-ds .kw-pwr-strength #passwordStrengthBar, .kw-ds .kw-pwr-strength .progress { background: var(--surface-2) !important; }

@media (max-width: 767px) {
  /* !important : custom.css impose « section { padding: 2rem 0 !important } » sous 768 px. */
  .kw-ds #main-body:has(.kw-login-wrapper) { padding: 0 !important; }
}
@media (max-width: 575px) {
  .kw-ds .kw-login-wrapper { padding: 20px 12px 56px; }
  .kw-ds .kw-login-form-panel { padding: 20px 16px; }
  .kw-ds .kw-login-title, .kw-ds .kw-pwr-title, .kw-ds .kw-pwr-success-title { font-size: 23px; }
}