/* ============================================================
   INSERT - Styles page d'inscription
   /assets/css/inscription.css
   ============================================================ */

/* ── Mise en page générale ─────────────────────────────────── */

.inscription-wrap {
    display        : flex;
    flex-direction : column;
    align-items    : center;
    padding        : 48px 24px 64px;
}

.inscription-carte {
    background    : var(--fond-carte);
    border        : 1px solid var(--bordure-nette);
    border-radius : var(--rayon-carte);
    box-shadow    : var(--ombre-carte);
    padding       : 40px 40px;
    width         : 100%;
    max-width     : 560px;
}

.inscription-titre {
    text-align  : center;
    margin      : 0 0 6px;
    font-family : var(--police-titre);
    font-size   : 1.7rem;
    color       : var(--texte-principal);
}

.inscription-sous-titre {
    text-align : center;
    color      : var(--texte-doux);
    margin     : 0 0 32px;
    font-size  : 15px;
}

/* ── Blocs fieldset ────────────────────────────────────────── */

.form-bloc {
    border        : 1px solid var(--bordure-nette);
    border-radius : var(--rayon);
    padding       : 20px 24px 16px;
    margin-bottom : 24px;
}

.form-bloc-titre {
    font-family : var(--police-titre);
    font-size   : 0.95rem;
    font-weight : 600;
    color       : var(--vert-primaire);
    padding     : 0 6px;
    margin-left : -6px;
}

/* ── Groupes de champs ─────────────────────────────────────── */

.form-groupe {
    display       : flex;
    flex-direction: column;
    margin-bottom : 16px;
}

.form-groupe:last-child {
    margin-bottom : 0;
}

.form-ligne-2 {
    display               : grid;
    grid-template-columns : 1fr 1fr;
    gap                   : 16px;
}

.form-label {
    font-size     : 0.88rem;
    font-weight   : 600;
    color         : var(--texte-secondaire);
    margin-bottom : 5px;
}

.form-requis {
    color       : var(--couleur-erreur);
    margin-left : 2px;
}

.form-input {
    border        : 1px solid var(--bordure-nette);
    border-radius : var(--rayon);
    padding       : 9px 12px;
    font-family   : var(--police-corps);
    font-size     : 0.97rem;
    color         : var(--texte-principal);
    background    : var(--fond-carte);
    transition    : border-color var(--transition), box-shadow var(--transition);
    outline       : none;
    width         : 100%;
    box-sizing    : border-box;
}

.form-input:focus {
    border-color : var(--bordure-focus);
    box-shadow   : 0 0 0 3px rgba(44, 110, 53, 0.12);
}

.form-input::placeholder {
    color : var(--texte-doux);
}

select.form-input {
    cursor : pointer;
}

.form-aide {
    font-size  : 0.82rem;
    color      : var(--texte-doux);
    margin     : 5px 0 0;
}

.form-aide a {
    color : var(--vert-primaire);
}

/* ── Bouton principal ──────────────────────────────────────── */

.btn-large {
    width      : 100%;
    padding    : 13px;
    font-size  : 1rem;
    margin-top : 8px;
}

/* ── Message alerte ────────────────────────────────────────── */

.alerte {
    border-radius : var(--rayon);
    padding       : 11px 14px;
    font-size     : 0.9rem;
    margin-bottom : 20px;
    line-height   : 1.45;
}

.alerte.cache {
    display : none;
}

.alerte-succes {
    background : #eaf6eb;
    border     : 1px solid #a8d5ab;
    color      : #1e5c24;
}

.alerte-erreur {
    background : #fdecea;
    border     : 1px solid #f1a9a0;
    color      : #922b21;
}

.alerte-info {
    background : #eaf3fb;
    border     : 1px solid #a9cce3;
    color      : #1a5276;
}

/* ── Lien retour connexion ─────────────────────────────────── */

.inscription-liens {
    margin-top : 24px;
    text-align : center;
    font-size  : 14px;
    color      : var(--texte-doux);
    gap        : 6px;
    display    : flex;
    justify-content : center;
    align-items     : center;
}

.inscription-liens a {
    color : var(--vert-primaire);
    font-weight : 600;
}

/* ── Responsive ────────────────────────────────────────────── */

@media (max-width: 560px) {
    .inscription-carte {
        padding : 28px 20px;
    }

    .form-ligne-2 {
        grid-template-columns : 1fr;
    }
}

/* ── Autocomplétion villes ─────────────────────────────────── */

.villes-suggestions {
    position         : absolute;
    top              : 100%;
    left             : 0;
    right            : 0;
    background       : var(--fond-carte);
    border           : 1px solid var(--bordure-nette);
    border-top       : none;
    border-radius    : 0 0 var(--rayon) var(--rayon);
    box-shadow       : var(--ombre-carte);
    list-style       : none;
    margin           : 0;
    padding          : 0;
    z-index          : 100;
    max-height       : 220px;
    overflow-y       : auto;
}

.villes-suggestion-item {
    padding    : 8px 12px;
    font-size  : 0.92rem;
    color      : var(--texte-principal);
    cursor     : pointer;
    transition : background var(--transition);
}

.villes-suggestion-item:hover {
    background : var(--vert-clair);
    color      : var(--vert-primaire);
}

/* ── Œil mot de passe ──────────────────────────────────────── */

.form-input-oeil {
    position : relative;
    display  : flex;
    align-items : center;
}

.form-input-oeil .form-input {
    padding-right : 42px;
}

.btn-oeil {
    position   : absolute;
    right      : 10px;
    background : none;
    border     : none;
    cursor     : pointer;
    padding    : 4px;
    color      : var(--texte-doux);
    display    : flex;
    align-items: center;
    transition : color var(--transition);
}

.btn-oeil:hover {
    color : var(--vert-primaire);
}

.btn-oeil svg {
    width  : 18px;
    height : 18px;
    display: block;
}

/* ── Champ file logo ───────────────────────────────────────── */

input[type="file"].form-input {
    padding    : 7px 10px;
    cursor     : pointer;
    color      : var(--texte-secondaire);
}

.form-aide-inline {
    font-size  : 0.82rem;
    color      : var(--texte-doux);
    font-weight: 400;
    margin-left: 4px;
}

/* icone-oeil-barre masquée par défaut — JS bascule les deux */
.icone-oeil-barre {
    display : none;
}