/* ============================================================
   ph_manager - Popups de connexion / inscription / recovery
   ============================================================
   Refonte "moderne neutre" :
    - Modal centre, overlay assombri (rgba)
    - Card blanche avec ombres douces et coin arrondi 16px
    - Formulaire vertical lisible (dt/dd empiles, plus de float)
    - Boutons primaires colores, secondaires neutres
    - Focus accessibles (anneau cle CSS variable)

   Les variables CSS sont definies dans connector_front.css.
   Avec un fallback inline ici au cas ou ce fichier serait
   charge sans connector_front (defense en profondeur).
   ============================================================ */

/* Couleur legacy preservee pour compat ascendante */
:root {
    --couleurClient: var(--phm-accent, #6366f1);
    --couleurClientText: var(--phm-text-on-accent, #fff);
}

/* ============================================================
   Top info : alignement utilisateur deconnecte
   ============================================================ */
#top_info > li.unlogged {
    display: flex;
    align-items: center;
    gap: 6px;
}

#top_info > li.unlogged span.shopname {
    padding: 0 var(--phm-space-1, 4px);
    font-weight: 500;
}

a#profile_menu_top {
    display: flex;
    align-items: center;
    gap: var(--phm-space-2, 8px);
    text-decoration: none;
}

/* ============================================================
   Overlay modal
   ============================================================ */
.popup_container {
    position: fixed;
    inset: 0;
    z-index: 50000;
    width: 100%;
    height: 100%;
    overflow: auto;
    background: var(--phm-overlay, rgba(15, 23, 42, 0.55));
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
    display: none;
    padding: var(--phm-space-6, 24px);
}

/* ============================================================
   Sprites d'icones (heritage du theme)
   ============================================================ */
.main_icons.hide_popup {
    cursor: pointer;
    transition: transform var(--phm-transition, 180ms ease);
}

.main_icons.hide_popup:hover {
    transform: scale(1.1);
}

.main_icons::before {
    content: "";
    width: 16px;
    height: 16px;
    display: inline-block;
    background: url(../img/icons/main_icons_sprite.png) no-repeat -5px -5px / 260px auto;
    vertical-align: middle;
}

.main_icons.delete::before,
.main_icons.hide_popup::before,
.main_icons.prune::before,
.main_icons.remove_button::before {
    background-position: -57px -187px;
}

.main_icons.permissions::before,
.main_icons.login::before {
    background-position: -109px -161px;
}

/* Bouton fermer absolu pour ne pas casser le titre */
.main_icons.hide_popup {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 32px;
    height: 32px;
    border-radius: var(--phm-radius-full, 9999px);
    background: var(--phm-surface-hover, #f3f4f6);
    border: 1px solid var(--phm-border, #e5e7eb);
    display: flex;
    align-items: center;
    justify-content: center;
}

.main_icons.hide_popup:hover {
    background: var(--phm-surface, #fff);
    border-color: var(--phm-border-hover, #d1d5db);
}

/* ============================================================
   Recover password : initialement masque
   ============================================================ */
#recoverPassword {
    display: none;
}

/* ============================================================
   Fenetre popup (card)
   ============================================================ */
.popup_window,
.agreement_popup_window {
    position: relative;
    z-index: 99;
    margin: var(--phm-space-8, 32px) auto;
    padding: 0;
    background: var(--phm-surface, #ffffff);
    border: 1px solid var(--phm-border, #e5e7eb);
    border-radius: var(--phm-radius-lg, 16px);
    box-shadow: var(--phm-shadow-xl, 0 20px 40px -10px rgba(15, 23, 42, 0.15), 0 8px 16px -4px rgba(15, 23, 42, 0.06));
    overflow: hidden;
    animation: phm-popup-in 220ms cubic-bezier(0.16, 1, 0.3, 1);
}

.popup_window {
    width: 100%;
    max-width: 460px;
}

.agreement_popup_window {
    width: 100%;
    max-width: 720px;
}

@keyframes phm-popup-in {
    from { opacity: 0; transform: translateY(8px) scale(0.98); }
    to   { opacity: 1; transform: translateY(0)   scale(1); }
}

/* ============================================================
   Entete de la popup
   ============================================================ */
.popup_heading {
    position: relative;
    /* Padding-right elargi pour reserver l'espace du bouton fermer en absolute,
       sans quoi le titre passait sous le X et etait tronque. */
    padding: var(--phm-space-5, 20px) calc(var(--phm-space-6, 24px) + 32px) var(--phm-space-5, 20px) var(--phm-space-6, 24px);
    background: var(--phm-surface, #ffffff);
    border-bottom: 1px solid var(--phm-border, #e5e7eb);
    color: var(--phm-text, #111827);
    font-size: 1.125rem;
    font-weight: 600;
    line-height: 1.4;
    align-items: center;
    gap: var(--phm-space-3, 12px);
    text-align: left;
}

/* Le bouton fermer (hide_popup) est en absolute et NE participe PAS au
   flex layout du titre. On le rappelle explicitement ici pour gagner
   contre toute regle .catbg qui pourrait le float: right. */
.popup_heading .main_icons.hide_popup {
    position: absolute;
    top: 12px;
    right: 12px;
    float: none;
}

/* Le span.main_icons.login dans le heading prend une accent doux */
.popup_heading .main_icons.login {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    background: var(--phm-accent-soft, #eef2ff);
    color: var(--phm-accent, #6366f1);
    border-radius: var(--phm-radius-md, 10px);
}

/* ============================================================
   Contenu de la popup
   ============================================================ */
.popup_content,
.agreement_popup_content {
    color: var(--phm-text, #111827);
    line-height: 1.55;
    padding: var(--phm-space-6, 24px);
    background: var(--phm-surface, #ffffff);
    max-height: calc(100vh - 200px);
    overflow: auto;
}

/* Scrollbar minimaliste pour le contenu */
.popup_content::-webkit-scrollbar,
.agreement_popup_content::-webkit-scrollbar {
    width: 8px;
}

.popup_content::-webkit-scrollbar-thumb,
.agreement_popup_content::-webkit-scrollbar-thumb {
    background: var(--phm-border, #e5e7eb);
    border-radius: var(--phm-radius-full, 9999px);
}

.popup_content::-webkit-scrollbar-thumb:hover,
.agreement_popup_content::-webkit-scrollbar-thumb:hover {
    background: var(--phm-border-hover, #d1d5db);
}

/* ============================================================
   Formulaire de login (dt / dd empiles, plus de float)
   ============================================================ */
.popup_content .login,
.login {
    width: 100%;
    max-width: 100%;
    margin: 0 auto;
}

.login dl {
    display: flex;
    flex-direction: column;
    gap: var(--phm-space-4, 16px);
    margin: 0;
    padding: 0;
    overflow: visible;
}

.login dt {
    display: block;
    width: 100%;
    margin: 0 0 6px;
    padding: 0;
    text-align: left;
    font-weight: 500;
    font-size: 0.875rem;
    color: var(--phm-text, #111827);
    clear: none;
    float: none;
}

.login dd {
    display: block;
    width: 100%;
    margin: 0;
    padding: 0;
    text-align: left;
    float: none;
}

/* Inputs */
.login input[type="email"],
.login input[type="text"],
.login input[type="password"] {
    width: 100%;
    padding: 10px var(--phm-space-3, 12px);
    background: var(--phm-surface, #ffffff);
    color: var(--phm-text, #111827);
    border: 1px solid var(--phm-border, #e5e7eb);
    border-radius: var(--phm-radius-sm, 6px);
    font-size: 0.95rem;
    transition: border-color var(--phm-transition, 180ms ease),
                box-shadow   var(--phm-transition, 180ms ease);
}

.login input[type="email"]:focus,
.login input[type="text"]:focus,
.login input[type="password"]:focus {
    outline: none;
    border-color: var(--phm-border-focus, #6366f1);
    box-shadow: 0 0 0 3px var(--phm-accent-soft, #eef2ff);
}

/* Input group (oeil pour password) */
.login .input-group.flex {
    display: flex;
    align-items: stretch;
}

.login .input-group.flex input {
    flex: 1;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    border-right: 0;
}

.login .input-group.flex .group-addon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    background: var(--phm-surface-alt, #f9fafb);
    color: var(--phm-text-muted, #6b7280);
    border: 1px solid var(--phm-border, #e5e7eb);
    border-top-right-radius: var(--phm-radius-sm, 6px);
    border-bottom-right-radius: var(--phm-radius-sm, 6px);
    cursor: pointer;
    transition: background var(--phm-transition, 180ms ease);
}

.login .input-group.flex .group-addon:hover {
    background: var(--phm-surface-hover, #f3f4f6);
    color: var(--phm-text, #111827);
}

/* Paragraphes */
.login p {
    text-align: center;
    margin: var(--phm-space-5, 20px) 0 0;
}

/* Bouton de submit (input type=submit class=button) */
.login input.button,
.button {
    display: inline-block;
    padding: 10px var(--phm-space-6, 24px);
    background: var(--phm-accent, #6366f1);
    color: var(--phm-text-on-accent, #ffffff);
    border: 1px solid var(--phm-accent, #6366f1);
    border-radius: var(--phm-radius-sm, 6px);
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
    transition: all var(--phm-transition, 180ms ease);
}

.login input.button:hover,
.button:hover {
    background: var(--phm-accent-hover, #4f46e5);
    border-color: var(--phm-accent-hover, #4f46e5);
    transform: translateY(-1px);
    box-shadow: var(--phm-shadow-md, 0 4px 6px -1px rgba(15, 23, 42, 0.07));
}

.login input.button:active {
    transform: translateY(0);
    box-shadow: var(--phm-shadow-sm, 0 1px 3px rgba(15, 23, 42, 0.08));
}

#ajaxSubmitLogin {
    display: inline-block;
}

/* ============================================================
   Liens auxiliaires
   ============================================================ */
.smalltext {
    text-align: center;
    margin: var(--phm-space-3, 12px) 0 0;
    font-size: 0.875rem;
}

a.lost_password,
.smalltext a {
    color: var(--phm-text-muted, #6b7280);
    text-decoration: none;
    transition: color var(--phm-transition, 180ms ease);
}

a.lost_password:hover,
.smalltext a:hover {
    color: var(--phm-accent, #6366f1);
    text-decoration: underline;
}

.centertext,
.centercol {
    margin: 0 auto;
    text-align: center;
    font-size: 0.9rem;
    color: var(--phm-text-muted, #6b7280);
}

.centertext a {
    color: var(--phm-accent, #6366f1);
    text-decoration: none;
    font-weight: 500;
}

.centertext a:hover {
    text-decoration: underline;
}

/* ============================================================
   Separateur horizontal modernise
   ============================================================ */
hr {
    border: 0;
    height: 1px;
    margin: var(--phm-space-5, 20px) 0;
    background: var(--phm-border, #e5e7eb);
    box-shadow: none;
}

/* ============================================================
   Reponse AJAX (ajaxLogin, ajaxPassword, ajaxMessage)
   ============================================================ */
#ajaxLogin,
#ajaxPassword,
#ajaxMessage {
    text-align: center;
    font-size: 0.9rem;
    color: var(--phm-text-muted, #6b7280);
    min-height: 0;
}

#ajaxLogin:not(:empty),
#ajaxPassword:not(:empty),
#ajaxMessage:not(:empty) {
    margin-bottom: var(--phm-space-4, 16px);
    padding: var(--phm-space-3, 12px);
    background: var(--phm-danger-soft, #fef2f2);
    color: var(--phm-danger, #ef4444);
    border-radius: var(--phm-radius-sm, 6px);
    border-left: 3px solid var(--phm-danger, #ef4444);
    text-align: left;
}

#ajaxPassword.reponse {
    background: var(--phm-success-soft, #ecfdf5);
    color: var(--phm-success, #10b981);
    border-left-color: var(--phm-success, #10b981);
}

/* ============================================================
   Avatar uploader (page inscription)
   ============================================================ */
#member_avatar_dragBox {
    max-width: 200px;
    margin: var(--phm-space-2, 8px) auto;
    padding: var(--phm-space-4, 16px);
    background: var(--phm-surface-alt, #f9fafb);
    border: 2px dashed var(--phm-border, #e5e7eb);
    border-radius: var(--phm-radius-md, 10px);
    text-align: center;
    transition: border-color var(--phm-transition, 180ms ease),
                background var(--phm-transition, 180ms ease);
}

#member_avatar_dragBox:hover {
    border-color: var(--phm-accent, #6366f1);
    background: var(--phm-accent-soft, #eef2ff);
}

#member_avatar_dragBox .imageuploadify-container img.avatar {
    max-width: 120px;
    width: 100%;
    height: auto;
    border-radius: var(--phm-radius-full, 9999px);
    object-fit: cover;
    aspect-ratio: 1 / 1;
}

/* ============================================================
   Formulaire d'inscription (multi-step in authentication.tpl)
   ============================================================ */
.register_form {
    display: flex;
    flex-direction: column;
    gap: var(--phm-space-3, 12px);
    margin: 0 0 var(--phm-space-4, 16px);
    padding: 0;
}

.register_form dt {
    margin: 0;
    padding: 0;
    font-weight: 500;
    font-size: 0.875rem;
    color: var(--phm-text, #111827);
    text-align: left;
    width: 100%;
    float: none;
    clear: none;
}

.register_form dt strong {
    font-weight: 500;
}

.register_form dd {
    margin: 0;
    padding: 0;
    width: 100%;
    float: none;
    text-align: left;
}

.register_form input[type="text"],
.register_form input[type="email"],
.register_form input[type="password"],
.register_form input[type="date"],
.register_form input[type="tel"] {
    width: 100%;
    padding: 10px var(--phm-space-3, 12px);
    background: var(--phm-surface, #ffffff);
    color: var(--phm-text, #111827);
    border: 1px solid var(--phm-border, #e5e7eb);
    border-radius: var(--phm-radius-sm, 6px);
    font-size: 0.95rem;
    transition: border-color var(--phm-transition, 180ms ease),
                box-shadow   var(--phm-transition, 180ms ease);
}

.register_form input:focus,
.register_form select:focus {
    outline: none;
    border-color: var(--phm-border-focus, #6366f1);
    box-shadow: 0 0 0 3px var(--phm-accent-soft, #eef2ff);
}

.register_form select {
    width: 100%;
    padding: 10px var(--phm-space-3, 12px);
    background: var(--phm-surface, #ffffff);
    color: var(--phm-text, #111827);
    border: 1px solid var(--phm-border, #e5e7eb);
    border-radius: var(--phm-radius-sm, 6px);
    font-size: 0.95rem;
    cursor: pointer;
}

/* Message d'erreur sous un input */
.userErreur,
.userError {
    font-size: 0.85rem;
    color: var(--phm-danger, #ef4444);
    margin-top: 4px;
    min-height: 0;
}

/* Bouton d'envoi */
#confirm_buttons {
    margin-top: var(--phm-space-6, 24px);
    text-align: center;
}

#submitNewMember,
#submitNewCustomer {
    padding: 12px var(--phm-space-8, 32px);
    background: var(--phm-accent, #6366f1);
    color: var(--phm-text-on-accent, #ffffff);
    border: none;
    border-radius: var(--phm-radius-md, 10px);
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
    transition: all var(--phm-transition, 180ms ease);
    box-shadow: var(--phm-shadow-sm, 0 1px 3px rgba(15, 23, 42, 0.08));
}

#submitNewMember:hover,
#submitNewCustomer:hover {
    background: var(--phm-accent-hover, #4f46e5);
    transform: translateY(-1px);
    box-shadow: var(--phm-shadow-md, 0 4px 6px -1px rgba(15, 23, 42, 0.07));
}

/* Suggestion de mot de passe */
#suggest_password {
    margin-top: 6px;
    padding: var(--phm-space-2, 8px) var(--phm-space-3, 12px);
    background: var(--phm-accent-soft, #eef2ff);
    color: var(--phm-text, #111827);
    border-radius: var(--phm-radius-sm, 6px);
    font-size: 0.85rem;
}

#suggest_password a,
#dataPassword a {
    color: var(--phm-accent, #6366f1);
    font-weight: 500;
    text-decoration: none;
}

#suggest_password a:hover,
#dataPassword a:hover {
    text-decoration: underline;
}

/* ============================================================
   Etats d'erreur / succes sur les inputs
   ============================================================ */
.has-error {
    border-color: var(--phm-danger, #ef4444) !important;
    background: var(--phm-danger-soft, #fef2f2) !important;
}

.has-success {
    border-color: var(--phm-success, #10b981) !important;
    background: var(--phm-success-soft, #ecfdf5) !important;
}

.invalid_input {
    border-color: var(--phm-danger, #ef4444) !important;
}

/* ============================================================
   Roundframe (legacy wrapper du form)
   ============================================================ */
.roundframe.noup {
    margin: 0;
    padding: 0;
    background: transparent;
    border: 0;
}

.roundframe.noup fieldset {
    border: 0;
    padding: 20px;
    margin: 0;
}

/* ============================================================
   Responsive
   ==================================================

/* ============================================================
   Override DevNailAlliance : neutraliser le gradient violet
   global du theme (color.css) qui contamine popups + headings.
   On garde le violet comme couleur d'accent (boutons, focus),
   mais les surfaces restent blanches.
   ============================================================ */

.popup_window,
.agreement_popup_window,
.popup_content,
.agreement_popup_content {
    background: #ffffff !important;
    background-image: none !important;
    color: var(--phm-text, #111827);
}

.popup_heading,
.catbg.popup_heading {
    background: #ffffff !important;
    background-image: none !important;
    color: var(--phm-text, #111827) !important;
}

/* Le titre dans le heading doit rester sombre, pas blanc */
.popup_heading,
.popup_heading * {
    color: var(--phm-text, #111827);
}

/* L'icone de la pilule reste en accent */
.popup_heading .main_icons.login {
    background: var(--phm-accent-soft, #fbf2fa);
    color: var(--phm-accent, #761B71);
}

/* Les labels du formulaire */
.login dt,
.register_form dt {
    color: var(--phm-text, #111827);
}

/* Les inputs : fond blanc explicite */
.login input[type="text"],
.login input[type="email"],
.login input[type="password"],
.register_form input,
.register_form select {
    background: #ffffff !important;
    color: var(--phm-text, #111827);
}

/* Le bouton primaire passe en violet de la marque */
.login input.button,
.button,
#submitNewMember,
#submitNewCustomer,
#ajaxSubmitLogin {
    background: var(--phm-accent, #761B71) !important;
    color: #ffffff !important;
    border-color: var(--phm-accent, #761B71) !important;
}

.login input.button:hover,
.button:hover,
#submitNewMember:hover,
#submitNewCustomer:hover {
    background: var(--phm-accent-hover, #5e1559) !important;
    border-color: var(--phm-accent-hover, #5e1559) !important;
}

/* Bouton fermer : pilule discrete grise (le sprite reste un X rouge) */
.popup_heading .main_icons.hide_popup {
    background: var(--phm-surface-hover, #f3f4f6) !important;
    background-image: none !important;
}

/* ============================================================================
   INSCRIPTION CLIENT - MISE EN PAGE EN GRILLE
   ============================================================================
   Ce bloc ne remplace rien : il s'ajoute. Les regles historiques
   `.register_form` (plus haut dans ce fichier) restent en place et continuent
   de servir `new_user_form.tpl`, qui n'a pas ete refondu. Le nouveau gabarit
   `authentication.tpl` n'utilise plus `<dl class="register_form">` du tout,
   donc les deux jeux de regles ne se croisent jamais.

   ⚠️ POURQUOI L'ANCIENNE MISE EN PAGE NE POUVAIT PAS MARCHER

   `.register_form { display:flex; flex-direction:column; gap:12px }` posait le
   meme ecart de 12 px entre une etiquette et SON champ qu'entre deux champs
   sans rapport. La loi de proximite jouait alors contre le formulaire : l'oeil
   n'avait plus aucun moyen d'apparier « Votre prenom » avec la case du
   dessous. Ici, 6 px a l'interieur d'un couple, 16 px entre deux couples : le
   rapport de 1 a 2,7 suffit a rendre l'appariement evident sans une seule
   bordure supplementaire.
   ============================================================================ */

/* -- La carte ------------------------------------------------------------- */

/* Vingt champs sur deux colonnes ne tiennent pas dans 720 px sans que chaque
   champ devienne une fente. On elargit, uniquement pour l'inscription. */
#start_registration.agreement_popup_window {
    max-width: 960px;
}

/* -- Le corps du formulaire ---------------------------------------------- */

.ph-reg-intro {
    margin: 0 0 var(--phm-space-5, 20px);
    font-size: 0.85rem;
    color: var(--phm-text-muted, #6b7280);
}

.ph-reg-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--phm-space-6, 24px) var(--phm-space-8, 32px);
    align-items: start;
}

.ph-reg-column {
    display: flex;
    flex-direction: column;
    gap: var(--phm-space-6, 24px);
    min-width: 0;
}

/* Un bloc = un <fieldset> avec sa <legend>. Le regroupement n'est pas
   decoratif : RGAA 11.5 demande que des champs de meme nature soient
   regroupes, et 11.6 que le regroupement porte une legende. Les <h4> qui
   servaient de titres ne remplissaient ni l'un ni l'autre. */
.ph-reg-block {
    min-width: 0;
    margin: 0;
    padding: var(--phm-space-4, 16px) var(--phm-space-5, 20px) var(--phm-space-5, 20px);
    border: 1px solid var(--phm-border, #e5e7eb);
    border-radius: var(--phm-radius-md, 10px);
    background: var(--phm-surface, #ffffff);
}

.ph-reg-block > legend {
    padding: 0 var(--phm-space-2, 8px);
    margin-left: calc(var(--phm-space-2, 8px) * -1);
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--phm-accent, #761B71);
}

.ph-reg-rows {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--phm-space-4, 16px);
}

/* -- Le couple etiquette / champ ----------------------------------------- */

.ph-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
}

.ph-field--full {
    grid-column: 1 / -1;
}

.ph-field .ph-label,
.ph-field > label {
    font-size: 0.8rem;
    font-weight: 600;
    line-height: 1.3;
    color: var(--phm-text, #111827);
}

/* L'asterisque des champs obligatoires. `abbr[title]` porte l'intitule
   « Obligatoire » : le marqueur n'est pas qu'une couleur ni qu'un signe. */
.ph-reg .ph-req {
    color: var(--phm-danger, #ef4444);
    text-decoration: none;
    border: 0;
    font-weight: 700;
}

/* ⚠️ LES CHAMPS SONT STYLES PAR TYPE, JAMAIS PAR CLASSE.

   `connector.js` appelle `$('#password').removeClass()` SANS ARGUMENT sur
   #password, #password_re, #new_email et #new_nickname - ce qui efface la
   TOTALITE de leurs classes, y compris celles qu'on leur poserait ici. Toute
   mise en page accrochee a une classe sur ces quatre champs disparaitrait a
   la premiere validation. */
.ph-reg input[type="text"],
.ph-reg input[type="email"],
.ph-reg input[type="password"],
.ph-reg input[type="date"],
.ph-reg input[type="tel"],
.ph-reg input[type="url"],
.ph-reg select {
    width: 100%;
    box-sizing: border-box;
    padding: 9px var(--phm-space-3, 12px);
    background: var(--phm-surface, #ffffff);
    color: var(--phm-text, #111827);
    border: 1px solid var(--phm-border, #e5e7eb);
    border-radius: var(--phm-radius-sm, 6px);
    font-size: 0.92rem;
    font-family: inherit;
    line-height: 1.4;
    transition: border-color var(--phm-transition, 180ms ease),
                box-shadow   var(--phm-transition, 180ms ease);
}

.ph-reg input:focus-visible,
.ph-reg select:focus-visible,
.ph-reg .ui-selectmenu-button:focus-visible,
.ph-reg #member_avatar_dragBox:focus-visible {
    outline: 2px solid var(--phm-accent, #761B71);
    outline-offset: 2px;
    border-color: var(--phm-accent, #761B71);
}

/* `:user-invalid` et NON `:invalid` : le second colorerait en rouge tous les
   champs obligatoires des l'ouverture, avant la moindre saisie - exactement
   ce que faisait la classe `invalid_input` posee en dur sur les deux mots de
   passe. `:user-invalid` n'entre en jeu qu'apres interaction. */
.ph-reg input:user-invalid {
    border-color: var(--phm-danger, #ef4444);
}

/* -- Les listes deroulantes (jQuery UI selectmenu) ------------------------ */

/* ⚠️ `connector.js` fait `$('#genderRegistration').selectmenu({width: 200})`
   et pareil pour `#country` : le <select> reel est masque et remplace par un
   bouton de 200 px en dur. Sans cette regle, « Civilite » et « Pays » restent
   deux fentes de 200 px au milieu de champs pleine largeur - c'est ce que
   montrent les captures avant refonte. */
.ph-reg .ui-selectmenu-button {
    width: 100% !important;
    box-sizing: border-box;
    padding: 9px var(--phm-space-3, 12px);
    background: var(--phm-surface, #ffffff);
    border: 1px solid var(--phm-border, #e5e7eb);
    border-radius: var(--phm-radius-sm, 6px);
    font-size: 0.92rem;
    line-height: 1.4;
    color: var(--phm-text, #111827);
}

.ph-reg .ui-selectmenu-button .ui-selectmenu-text {
    margin-right: var(--phm-space-5, 20px);
    line-height: 1.4;
}

/* -- L'avatar ------------------------------------------------------------- */

/* L'ancien bloc occupait un carre de 200 px en tete de colonne : un champ
   facultatif, decoratif, en position d'ouverture, qui repoussait le prenom
   sous la ligne de flottaison. Il devient une pastille sur une seule ligne.

   Les selecteurs sont ancres sur l'ID parce que les regles historiques
   (#member_avatar_dragBox, plus haut) le sont aussi : une simple classe
   perdrait l'arbitrage de specificite. */
.ph-field--avatar {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--phm-space-3, 12px);
}

.ph-field--avatar > .ph-label {
    flex: 0 0 100%;
}

/* imageuploadify masque l'input lui-meme (`$(self).hide()`). On le masque
   aussi en CSS pour eviter qu'il n'apparaisse une fraction de seconde avant
   l'initialisation du script. */
.ph-field--avatar input[type="file"] {
    display: none;
}

#member_avatar_dragBox.ph-avatar-box {
    display: inline-flex;
    align-items: center;
    gap: var(--phm-space-3, 12px);
    max-width: none;
    width: auto;
    margin: 0;
    padding: 6px var(--phm-space-4, 16px) 6px 6px;
    background: var(--phm-surface-alt, #f9fafb);
    border: 1px dashed var(--phm-border, #e5e7eb);
    border-radius: var(--phm-radius-full, 9999px);
    text-align: left;
    cursor: pointer;
}

#member_avatar_dragBox.ph-avatar-box .imageuploadify-container {
    display: flex;
    flex: 0 0 auto;
}

#member_avatar_dragBox.ph-avatar-box .imageuploadify-container img.avatar {
    width: 48px;
    height: 48px;
    max-width: 48px;
    border-radius: var(--phm-radius-full, 9999px);
    object-fit: cover;
    background: var(--phm-surface, #ffffff);
}

.ph-avatar-hint {
    font-size: 0.85rem;
    color: var(--phm-text-muted, #6b7280);
    white-space: nowrap;
}

/* -- La case a cocher ----------------------------------------------------- */

.ph-field--check {
    flex-direction: row;
    align-items: center;
    gap: var(--phm-space-2, 8px);
}

.ph-field--check input[type="checkbox"] {
    width: 18px;
    height: 18px;
    margin: 0;
    accent-color: var(--phm-accent, #761B71);
    cursor: pointer;
}

.ph-field--check label {
    font-size: 0.88rem;
    font-weight: 400;
    color: var(--phm-text, #111827);
    cursor: pointer;
}

/* -- La barre d'action ---------------------------------------------------- */

/* Le bouton etait en bout de course, sous vingt champs : sur un ecran
   d'ordinateur portable il fallait faire defiler pour decouvrir qu'il
   existait. Il reste desormais colle au bas de la zone de defilement.

   Les marges negatives compensent le padding de `.agreement_popup_content`
   (24 px) pour que la barre aille d'un bord a l'autre de la carte. */
#confirm_buttons.ph-reg-actions {
    position: sticky;
    bottom: calc(var(--phm-space-6, 24px) * -1);
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--phm-space-2, 8px);
    margin: var(--phm-space-6, 24px) calc(var(--phm-space-6, 24px) * -1) calc(var(--phm-space-6, 24px) * -1);
    padding: var(--phm-space-4, 16px) var(--phm-space-6, 24px);
    background: var(--phm-surface, #ffffff);
    border-top: 1px solid var(--phm-border, #e5e7eb);
    text-align: center;
}

/* Mention RGPD : l'information sur l'usage des donnees se donne au moment de
   la collecte, pas dans une page de mentions legales qu'il faut aller
   chercher. */
.ph-reg-legal {
    max-width: 62ch;
    margin: 0;
    font-size: 0.78rem;
    line-height: 1.5;
    color: var(--phm-text-muted, #6b7280);
}

/* -- Responsive ----------------------------------------------------------- */

/* Sous 900 px, deux colonnes de champs deviennent deux fentes. On repasse a
   une colonne pour la grille interieure d'abord, puis pour les blocs. */
@media screen and (max-width: 900px) {
    .ph-reg-grid {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media screen and (max-width: 560px) {
    .ph-reg-rows {
        grid-template-columns: minmax(0, 1fr);
    }

    #start_registration.agreement_popup_window {
        margin: 0;
        border-radius: 0;
    }

    .ph-reg-block {
        padding: var(--phm-space-3, 12px) var(--phm-space-4, 16px) var(--phm-space-4, 16px);
    }
}

/* Respect de la preference systeme : pas d'animation d'ouverture pour qui
   demande a en etre dispense (RGAA / WCAG 2.3.3). */
@media (prefers-reduced-motion: reduce) {
    .popup_window,
    .agreement_popup_window {
        animation: none;
    }

    .ph-reg input,
    .ph-reg select {
        transition: none;
    }
}

/* ============================================================================
   INSCRIPTION - AJUSTEMENTS APRES PREMIERE RELECTURE A L'ECRAN
   ============================================================================ */

/* -- Respiration entre les deux colonnes ---------------------------------- */

/* 32 px de gouttiere pour deux colonnes de champs, c'est ce qu'on met entre
   deux paragraphes : l'oeil ne separait pas les deux ensembles. On passe a
   48 px, et les blocs respirent un peu plus a l'interieur. */
.ph-reg-grid {
    gap: var(--phm-space-6, 24px) 48px;
}

.ph-reg-block {
    padding: var(--phm-space-5, 20px) var(--phm-space-6, 24px) var(--phm-space-6, 24px);
}

.ph-reg-rows {
    gap: var(--phm-space-4, 16px) var(--phm-space-5, 20px);
}

/* L'entete se lit de gauche a droite : pastille, puis titre. Sans cette
   contrainte, une regle `.catbg` du theme global ecarte les deux elements aux
   deux bouts de la barre. */
#start_registration .popup_heading {
    justify-content: flex-start;
}

/* -- Le rouge n'apparait qu'apres une tentative d'envoi -------------------- */

/* ⚠️ `:user-invalid` seul se declenche des qu'un champ obligatoire a ete
   effleure puis quitte : traverser le formulaire au clavier suffisait a
   peindre en rouge des champs que l'on n'avait pas encore eu l'occasion de
   remplir. On attend desormais une vraie tentative d'envoi - c'est
   `connector.js` qui pose `.ph-was-validated` sur le formulaire. */
.ph-reg input:user-invalid {
    border-color: var(--phm-border, #e5e7eb);
}

.ph-reg.ph-was-validated input:user-invalid {
    border-color: var(--phm-danger, #ef4444);
    background: var(--phm-danger-soft, #fef2f2);
}

/* ============================================================================
   MENUS jQuery UI (autocomplete de ville, listes deroulantes)
   ============================================================================
   ⚠️ CES MENUS NE SONT PAS DANS LA MODALE.

   jQuery UI les ajoute a la fin du <body>, hors de `.ph-reg` et hors de
   `.popup_container` : aucun selecteur descendant depuis le formulaire ne peut
   les atteindre. C'est pour cela que les regles ci-dessous ne sont pas
   imbriquees - ce n'est pas un oubli de portee.

   Le fond transparent vient de la meme cause : `jquery-ui.css` (theme
   `css/autoload/`) donne son fond a `.ui-widget-content`, mais il n'est pas
   charge sur ces pages. La liste de villes s'affichait donc en texte nu
   par-dessus le formulaire, illisible.

   Le z-index doit passer devant la modale, qui est a 50000.
   ============================================================================ */

.ui-autocomplete,
.ui-selectmenu-menu .ui-menu {
    position: absolute;
    z-index: 50100;
    box-sizing: border-box;
    max-height: 18rem;
    margin: 2px 0 0;
    padding: 4px;
    overflow-y: auto;
    overflow-x: hidden;
    list-style: none;
    background: var(--phm-surface, #ffffff);
    border: 1px solid var(--phm-border, #e5e7eb);
    border-radius: var(--phm-radius-md, 10px);
    box-shadow: var(--phm-shadow-xl, 0 20px 40px -10px rgba(15, 23, 42, 0.18), 0 8px 16px -4px rgba(15, 23, 42, 0.08));
    font-size: 0.92rem;
    color: var(--phm-text, #111827);
}

.ui-selectmenu-menu {
    z-index: 50100;
}

.ui-autocomplete .ui-menu-item,
.ui-selectmenu-menu .ui-menu .ui-menu-item {
    margin: 0;
    padding: 0;
    list-style: none;
    border: 0;
    background: transparent;
}

.ui-autocomplete .ui-menu-item > div,
.ui-autocomplete .ui-menu-item > a,
.ui-selectmenu-menu .ui-menu .ui-menu-item > div {
    display: block;
    padding: 8px var(--phm-space-3, 12px);
    border-radius: var(--phm-radius-sm, 6px);
    color: var(--phm-text, #111827);
    line-height: 1.35;
    cursor: pointer;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* jQuery UI marque l'element survole ou parcouru au clavier par
   `.ui-state-active` : les deux doivent donner le meme retour visuel, sans
   quoi la navigation au clavier ne montre rien. */
.ui-autocomplete .ui-menu-item > div.ui-state-active,
.ui-autocomplete .ui-menu-item > div:hover,
.ui-selectmenu-menu .ui-menu .ui-menu-item > div.ui-state-active,
.ui-selectmenu-menu .ui-menu .ui-menu-item > div:hover {
    background: var(--phm-accent-soft, #fbf2fa);
    color: var(--phm-accent, #761B71);
    border: 0;
    font-weight: 500;
}

/* Le rendu maison de la liste de villes : `_renderItem` produit
   `<li class="autosearch"><div class="educationList">Ref : … <span>Nom: …</span></div></li>`.
   Le code postal en chiffres tabulaires, la ville en gras : on lit une
   colonne, pas une phrase. */
.ui-autocomplete .educationList {
    display: flex;
    gap: var(--phm-space-2, 8px);
    align-items: baseline;
    font-variant-numeric: tabular-nums;
    color: var(--phm-text-muted, #6b7280);
    font-size: 0.85rem;
}

.ui-autocomplete .educationList span {
    color: var(--phm-text, #111827);
    font-size: 0.92rem;
    font-weight: 500;
}