/* ==============================================
   OuViePo - Theme My Login (inscription, connexion, mdp)
   ============================================== */

/* Wrapper principal : centrer et limiter la largeur */
.tml {
    max-width: 440px;
    margin: 0 auto;
    padding: 24px 32px 16px;
    background: var(--blanc, #fff);
    border-radius: 12px;
    border: 1px solid var(--gris-clair, #e8e8e4);
}

/* Labels */
.tml-label {
    display: block;
    font-family: var(--font-headings, sans-serif);
    font-size: 0.9rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 6px;
    color: var(--noir, #1a1a1a);
}

/* Champs de saisie */
.tml-field {
    width: 100%;
    padding: 10px 14px;
    border: 1px solid var(--gris-clair, #e8e8e4);
    border-radius: 8px;
    font-family: var(--font-mono, monospace);
    font-size: 1rem;
    background: var(--blanc, #fff);
    transition: border-color 0.2s;
    box-sizing: border-box;
}

.tml-field:focus {
    outline: none;
    border-color: var(--noir, #1a1a1a);
    box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.08);
}

/* Espacement entre les champs */
.tml .tml-field-wrap {
    margin-bottom: 14px;
}

/* Bouton de soumission */
.tml-button,
.tml [type="submit"] {
    display: block;
    width: 100%;
    padding: 12px;
    background: var(--noir, #1a1a1a);
    color: var(--blanc, #fff);
    border: none;
    border-radius: 8px;
    font-family: var(--font-headings, sans-serif);
    font-size: 1.1rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    cursor: pointer;
    transition: opacity 0.2s;
    margin-top: 4px;
}

.tml-button:hover,
.tml [type="submit"]:hover {
    opacity: 0.85;
}

/* Liens (connexion, inscription, mdp oublie) */
.tml .tml-action-links,
.tml .tml-links,
.tml ul.tml-links {
    list-style: none;
    padding: 0;
    margin: 12px 0 0;
    text-align: center;
    font-family: var(--font-mono, monospace);
    font-size: 0.85rem;
}

.tml .tml-action-links li,
.tml .tml-links li {
    display: inline;
    margin: 0 8px;
}

.tml-action-links a,
.tml-links a {
    color: var(--gris-texte, #999);
    text-decoration: none;
    transition: color 0.2s;
}

.tml-action-links a:hover,
.tml-links a:hover {
    color: var(--noir, #1a1a1a);
}

/* Alertes (erreurs, succes) */
.tml-alerts {
    margin-bottom: 16px;
}

.tml-alerts .tml-alert {
    padding: 12px 16px;
    border-radius: 8px;
    font-size: 0.9rem;
    font-family: var(--font-mono, monospace);
}

.tml-alerts .tml-alert-error {
    background: #fce4ec;
    color: #c62828;
    border: 1px solid #ef9a9a;
}

.tml-alerts .tml-alert-success {
    background: #e8f5e9;
    color: #2e7d32;
    border: 1px solid #a5d6a7;
}

/* Indicateur de force du mot de passe */
#pass-strength-result {
    margin: 6px 0 0;
    padding: 6px 12px;
    border-radius: 6px;
    font-family: var(--font-mono, monospace);
    font-size: 0.85rem;
    text-align: center;
}

/* Description sous le mot de passe : masquee (economie ~110px) */
.tml .description,
.tml p.description {
    display: none;
}

/* Masquer le field-wrap vide qui contenait la description */
.tml .tml-field-wrap:has(.description) {
    display: none;
}

/* Checkbox "Se souvenir de moi" */
.tml-rememberme-wrap {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 16px;
    font-family: var(--font-mono, monospace);
    font-size: 0.9rem;
}

.tml-rememberme-wrap input[type="checkbox"] {
    accent-color: var(--noir, #1a1a1a);
    width: 16px;
    height: 16px;
}

/* Page single (inside-article) : padding compact pour TML */
.tml-action .inside-article {
    padding: clamp(12px, 2vw, 20px) 0 clamp(8px, 1.5vw, 16px);
}

/* Titre de page TML : espacement reduit */
.tml-action .entry-header {
    margin-bottom: 12px;
}

.tml-action .entry-title {
    margin-bottom: 0;
}

/* Pas de sidebar sur les pages TML */
.tml-action .widget-area {
    display: none;
}
.tml-action .site-content {
    display: block;
}

/* Responsive */
@media (max-width: 600px) {
    .tml {
        margin: 0 12px;
        padding: 24px 20px;
    }
}