/* ════════════════════════════════════════
   KOCOON — Page Connexion (/connexion/)
   Widget : elementor-widget-login (Elementor Pro)
   Ciblage : body.page-connexion
   ════════════════════════════════════════ */

/* ══════════════════════════════════════
   1) CONTENEUR DU WIDGET — Boîte avec ombre
   ══════════════════════════════════════ */

body.page-connexion .elementor-widget-login .elementor-widget-container {
    background: #fff !important;
    border: 1px solid var(--k-border) !important;
    border-radius: 16px !important;
    padding: 36px 32px !important;
    box-shadow: 0 8px 32px rgba(44, 44, 44, 0.10) !important;
    box-sizing: border-box !important;
}

/* ══════════════════════════════════════
   2) TITRE "Connexion" (heading widget)
   ══════════════════════════════════════ */

body.page-connexion .elementor-widget-heading .elementor-heading-title {
    text-align: center !important;
    font-size: 22px !important;
    font-weight: 500 !important;
    color: var(--k-noir) !important;
    margin-bottom: 12px !important;
}

/* ══════════════════════════════════════
   3) LABELS
   ══════════════════════════════════════ */

body.page-connexion .elementor-login .elementor-field-label {
    font-size: 12px !important;
    color: var(--k-gris) !important;
    font-weight: 400 !important;
    margin-bottom: 5px !important;
    display: block !important;
}

/* ══════════════════════════════════════
   4) INPUTS texte / password
   ══════════════════════════════════════ */

body.page-connexion .elementor-login .elementor-field.elementor-field-textual,
body.page-connexion .elementor-login input[type="text"],
body.page-connexion .elementor-login input[type="password"],
body.page-connexion .elementor-login input[type="email"] {
    background: var(--k-beige-2) !important;
    border: 1px solid var(--k-border) !important;
    border-radius: 8px !important;
    color: var(--k-noir) !important;
    font-size: 13px !important;
    padding: 10px 14px !important;
    width: 100% !important;
    box-sizing: border-box !important;
    box-shadow: none !important;
    height: auto !important;
    min-height: 42px !important;
    transition: border-color 0.2s !important;
}

body.page-connexion .elementor-login .elementor-field.elementor-field-textual:focus,
body.page-connexion .elementor-login input[type="text"]:focus,
body.page-connexion .elementor-login input[type="password"]:focus {
    border-color: var(--k-ocre) !important;
    outline: none !important;
    box-shadow: none !important;
}

/* ══════════════════════════════════════
   5) CASE À COCHER "Se souvenir de moi"
   ══════════════════════════════════════ */

body.page-connexion .elementor-login .elementor-field-type-checkbox label {
    font-size: 12px !important;
    color: var(--k-gris) !important;
    font-weight: 400 !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    cursor: pointer !important;
}

body.page-connexion .elementor-login input[type="checkbox"] {
    accent-color: var(--k-ocre) !important;
    width: auto !important;
    min-height: auto !important;
    height: auto !important;
    flex-shrink: 0 !important;
}

/* ══════════════════════════════════════
   6) BOUTON "Connexion"
   ══════════════════════════════════════ */

body.page-connexion .elementor-login .elementor-button {
    background: var(--k-noir) !important;
    background-color: var(--k-noir) !important;
    color: var(--k-beige-2) !important;
    border: none !important;
    border-radius: 20px !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    padding: 13px 24px !important;
    width: 100% !important;
    text-align: center !important;
    cursor: pointer !important;
    transition: background 0.2s ease !important;
    box-sizing: border-box !important;
    letter-spacing: 0.3px !important;
    display: block !important;
}

body.page-connexion .elementor-login .elementor-button:hover {
    background: var(--k-ocre) !important;
    background-color: var(--k-ocre) !important;
    color: #fff !important;
}

body.page-connexion .elementor-login .elementor-button-text {
    color: inherit !important;
    font-size: 13px !important;
}

/* ══════════════════════════════════════
   7) LIENS "Mot de passe perdu" & "S'inscrire"
   ══════════════════════════════════════ */

body.page-connexion .elementor-login .elementor-lost-password,
body.page-connexion .elementor-login .elementor-register {
    color: var(--k-ocre) !important;
    font-size: 12px !important;
    text-decoration: none !important;
    transition: color 0.15s !important;
}

body.page-connexion .elementor-login .elementor-lost-password:hover,
body.page-connexion .elementor-login .elementor-register:hover {
    color: var(--k-noir) !important;
    text-decoration: underline !important;
}

/* Séparateur " | " entre les liens */
body.page-connexion .elementor-login .elementor-login-separator {
    color: var(--k-border) !important;
    margin: 0 6px !important;
    font-size: 12px !important;
}

/* ══════════════════════════════════════
   8) ESPACEMENT DES GROUPES
   ══════════════════════════════════════ */

body.page-connexion .elementor-login .elementor-field-group {
    margin-bottom: 14px !important;
    padding: 0 !important;
    float: none !important;
    width: 100% !important;
}

body.page-connexion .elementor-login .elementor-field-type-submit {
    margin-bottom: 8px !important;
}

/* ══════════════════════════════════════
   9) MOBILE (<768px)
   ══════════════════════════════════════ */

@media (max-width: 767px) {
    body.page-connexion .elementor-widget-login .elementor-widget-container {
        padding: 28px 20px !important;
    }
}
/* ════════════════════════════════════════
   ONGLETS CONNEXION — Style Kocoon
   Cible : Elementor Nested Tabs de la page /connexion/
   ════════════════════════════════════════ */

/* Barre des onglets */
.elementor-widget-n-tabs .e-n-tabs-heading {
    display: flex !important;
    border-bottom: 1px solid var(--k-border) !important;
    margin-bottom: 28px !important;
    background: transparent !important;
    gap: 0 !important;
    padding: 0 !important;
}

/* Chaque onglet */
.elementor-widget-n-tabs .e-n-tab-title {
    font-size: 13px !important;
    font-weight: 400 !important;
    font-family: inherit !important;
    color: var(--k-gris-clair) !important;
    padding: 10px 24px 10px 0 !important;
    cursor: pointer !important;
    background: transparent !important;
    border: none !important;
    border-bottom: 2px solid transparent !important;
    margin-bottom: -1px !important;
    transition: color 0.2s ease, border-color 0.2s ease !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    outline: none !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
}

/* Onglet actif */
.elementor-widget-n-tabs .e-n-tab-title[aria-selected="true"] {
    color: var(--k-noir) !important;
    font-weight: 500 !important;
    border-bottom: 2px solid var(--k-ocre) !important;
}

/* Hover sur onglet inactif */
.elementor-widget-n-tabs .e-n-tab-title:hover:not([aria-selected="true"]) {
    color: var(--k-noir) !important;
}

/* Focus clavier (accessibilité) */
.elementor-widget-n-tabs .e-n-tab-title:focus-visible {
    outline: none !important;
    border-bottom: 2px solid var(--k-ocre) !important;
    color: var(--k-noir) !important;
}

/* Texte interne du bouton */
.elementor-widget-n-tabs .e-n-tab-title .e-n-tab-title-text {
    font-size: 13px !important;
    font-weight: inherit !important;
    color: inherit !important;
}

/* Icône éventuelle dans les onglets */
.elementor-widget-n-tabs .e-n-tab-title .e-n-tab-icon {
    display: none !important;
}