/**
 * connexion.css
 *
 * Styles du système de connexion vendeur BusyBook.
 *
 * CORRECTIONS v1.3 :
 *  - #4 : Fond bleu-ciel avec accents orange, style professionnel.
 *         La page est enveloppée d'un fond dégradé bleu-ciel → bleu-nuit.
 *         La carte flotte au centre avec ombre portée et bordure orange subtile.
 *  - #1/#3 : Logo img (logo1.png) supporté dans l'en-tête.
 *
 * Mobile-first. Source de vérité = desktop. Les breakpoints découlent du desktop.
 *
 * @package AlibabaNiger
 * @since   1.3.0
 */

/* ═══════════════════════════════════════════════════════════════════════════
   VARIABLES LOCALES (override des variables globales pour ce contexte)
   ═══════════════════════════════════════════════════════════════════════════ */
#ecla-connexion-wrapper {
    --conn-sky       : #e3f2fd;      /* bleu-ciel très clair */
    --conn-sky-mid   : #bbdefb;      /* bleu-ciel moyen */
    --conn-blue      : #1565c0;      /* bleu profond */
    --conn-blue-dark : #0d47a1;      /* bleu foncé titres */
    --conn-orange    : #ff9900;      /* orange BusyBook */
    --conn-orange-dk : #e68800;      /* orange foncé hover */
    --conn-white     : #ffffff;
    --conn-text      : #1a2744;
    --conn-muted     : #546e7a;
    --conn-border    : rgba(21,101,192,0.18);
    --conn-shadow    : 0 8px 40px rgba(13,71,161,0.18);
    --conn-radius    : 16px;
}

/* ═══════════════════════════════════════════════════════════════════════════
   1. WRAPPER PLEINE PAGE — fond bleu-ciel dégradé
   ═══════════════════════════════════════════════════════════════════════════ */

#ecla-connexion-wrapper {
    min-height  : 100vh;
    display     : flex;
    flex-direction : column;
    align-items : center;
    justify-content : center;
    padding     : 20px 12px;
    box-sizing  : border-box;
    font-family : -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
                  Helvetica, Arial, sans-serif;
    color       : var(--conn-text);

    /* Dégradé bleu-ciel + motif subtil */
    background  :
        radial-gradient( ellipse at 70% 0%, rgba(255,153,0,0.10) 0%, transparent 55% ),
        radial-gradient( ellipse at 0% 100%, rgba(21,101,192,0.12) 0%, transparent 55% ),
        linear-gradient( 145deg, var(--conn-sky) 0%, #e8f4fd 40%, #d6eaf8 100% );
    background-attachment : fixed;
}

#ecla-connexion-wrapper *,
#ecla-connexion-wrapper *::before,
#ecla-connexion-wrapper *::after {
    box-sizing : inherit;
}

/* ═══════════════════════════════════════════════════════════════════════════
   2. MESSAGE GLOBAL (succès / erreur)
   ═══════════════════════════════════════════════════════════════════════════ */

.ecla-connexion-msg {
    width         : 100%;
    max-width     : 440px;
    padding       : 12px 16px;
    border-radius : 10px;
    margin-bottom : 14px;
    font-size     : 14px;
    line-height   : 1.5;
    display       : none; /* géré par connexion.js */
}

.ecla-connexion-msg.ecla-msg-success {
    background : #e8f5e9;
    border     : 1px solid #a5d6a7;
    color      : #2e7d32;
}

.ecla-connexion-msg.ecla-msg-error {
    background : #fff3e0;
    border     : 1px solid var(--conn-orange);
    color      : #bf360c;
}

/* ═══════════════════════════════════════════════════════════════════════════
   3. CARTE — conteneur principal du formulaire
   ═══════════════════════════════════════════════════════════════════════════ */

.ecla-connexion-card {
    background    : var(--conn-white);
    border        : 1.5px solid var(--conn-border);
    border-top    : 4px solid var(--conn-orange);   /* accent orange haut */
    border-radius : var(--conn-radius);
    padding       : 32px 24px 28px;
    box-shadow    : var(--conn-shadow);
    width         : 100%;
    max-width     : 440px;
}

/* ═══════════════════════════════════════════════════════════════════════════
   4. EN-TÊTE (logo + titre + sous-titre)
   ═══════════════════════════════════════════════════════════════════════════ */

.ecla-connexion-header {
    text-align    : center;
    margin-bottom : 28px;
}

/* Logo image */
.ecla-connexion-logo-link {
    display       : inline-block;
    margin-bottom : 10px;
    text-decoration : none;
}

.ecla-connexion-logo-img {
    max-height : 60px;
    max-width  : 200px;
    width      : auto;
    height     : auto;
    object-fit : contain;
}

/* Fallback emoji */
.ecla-connexion-logo {
    display       : block;
    font-size     : 42px;
    line-height   : 1;
    margin-bottom : 8px;
}

/* Titre h1 */
.ecla-connexion-header h1,
#ecla-connexion-title {
    color       : var(--conn-blue-dark);
    font-size   : 1.45rem;
    font-weight : 800;
    margin      : 0 0 6px;
    line-height : 1.25;
    letter-spacing : -0.01em;
}

/* Sous-titre */
.ecla-connexion-subtitle {
    color      : var(--conn-muted);
    font-size  : 13.5px;
    margin     : 0;
    line-height: 1.4;
}

/* ═══════════════════════════════════════════════════════════════════════════
   5. GROUPES DE CHAMPS
   ═══════════════════════════════════════════════════════════════════════════ */

.ecla-connexion-card .ecla-form-group {
    margin-bottom : 18px;
}

/* Label */
.ecla-connexion-card .ecla-form-group label {
    display       : flex;
    align-items   : center;
    flex-wrap     : wrap;
    gap           : 4px;
    font-weight   : 600;
    font-size     : 13.5px;
    margin-bottom : 7px;
    color         : var(--conn-blue-dark);
    line-height   : 1.4;
}

/* Astérisque obligatoire */
.ecla-connexion-card .ecla-required {
    color       : var(--conn-orange);
    margin-left : 1px;
}

/* Inputs texte/email/password */
.ecla-connexion-card .ecla-form-group input[type="text"],
.ecla-connexion-card .ecla-form-group input[type="email"],
.ecla-connexion-card .ecla-form-group input[type="password"] {
    display       : block;
    width         : 100%;
    padding       : 11px 14px;
    border        : 1.5px solid #c5d8f0;
    border-radius : 8px;
    font-size     : 15px;
    font-family   : inherit;
    color         : var(--conn-text);
    background    : #f5faff;
    transition    : border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
    appearance    : none;
    -webkit-appearance : none;
}

.ecla-connexion-card .ecla-form-group input:focus {
    outline      : none;
    border-color : var(--conn-orange);
    background   : #fff;
    box-shadow   : 0 0 0 3px rgba(255,153,0,0.18);
}

/* ── Checkbox rester connecté ── */
.ecla-connexion-card .ecla-form-group--checkbox label {
    display     : flex;
    align-items : center;
    gap         : 9px;
    cursor      : pointer;
    font-weight : 400;
    color       : var(--conn-text);
    font-size   : 14px;
    margin      : 0;
}

.ecla-connexion-card .ecla-form-group--checkbox input[type="checkbox"] {
    width        : 18px;
    height       : 18px;
    min-width    : 18px;
    accent-color : var(--conn-orange);
    cursor       : pointer;
    margin       : 0;
    border-radius: 4px;
}

/* Erreurs inline */
.ecla-connexion-card .ecla-field-error {
    color      : #c0392b;
    font-size  : 12px;
    margin     : 4px 0 0;
    min-height : 16px;
    display    : none;
    line-height: 1.4;
}

/* ═══════════════════════════════════════════════════════════════════════════
   6. WRAPPER MOT DE PASSE + TOGGLE
   ═══════════════════════════════════════════════════════════════════════════ */

.ecla-password-wrapper {
    position    : relative;
    display     : flex;
    align-items : stretch;
}

.ecla-password-wrapper input[type="password"],
.ecla-password-wrapper input[type="text"] {
    width         : 100%;
    padding-right : 46px;
}

.ecla-toggle-password {
    position    : absolute;
    right       : 10px;
    top         : 50%;
    transform   : translateY(-50%);
    background  : none;
    border      : none;
    cursor      : pointer;
    font-size   : 17px;
    color       : #90a4ae;
    padding     : 4px;
    line-height : 1;
    transition  : color 0.2s;
    outline     : none;
    flex-shrink : 0;
}

.ecla-toggle-password:hover { color: var(--conn-orange); }
.ecla-toggle-password:focus-visible {
    color         : var(--conn-orange);
    border-radius : 4px;
    outline       : 2px solid var(--conn-orange);
    outline-offset: 2px;
}

/* ═══════════════════════════════════════════════════════════════════════════
   7. LIEN MOT DE PASSE OUBLIÉ
   ═══════════════════════════════════════════════════════════════════════════ */

.ecla-forgot-link {
    margin-left     : auto;
    font-size       : 12px;
    color           : var(--conn-blue);
    text-decoration : none;
    font-weight     : 500;
}

.ecla-forgot-link:hover { text-decoration: underline; color: var(--conn-orange); }

/* ═══════════════════════════════════════════════════════════════════════════
   8. BOUTON SUBMIT — dégradé orange vif
   ═══════════════════════════════════════════════════════════════════════════ */

.ecla-connexion-card .ecla-form-submit {
    margin-top : 6px;
}

#ecla-connexion-submit,
#ecla-connexion-submit-modal {
    display        : block;
    width          : 100%;
    background     : linear-gradient( 135deg, var(--conn-orange) 0%, #ffb733 100% );
    color          : #fff;
    border         : none;
    border-radius  : 10px;
    padding        : 14px 24px;
    font-size      : 16px;
    font-weight    : 700;
    font-family    : inherit;
    cursor         : pointer;
    transition     : background 0.2s ease, transform 0.15s ease, box-shadow 0.2s ease;
    letter-spacing : 0.02em;
    text-align     : center;
    box-shadow     : 0 4px 14px rgba(255,153,0,0.35);
}

#ecla-connexion-submit:hover:not(:disabled),
#ecla-connexion-submit-modal:hover:not(:disabled) {
    background : linear-gradient( 135deg, var(--conn-orange-dk) 0%, var(--conn-orange) 100% );
    transform  : translateY(-2px);
    box-shadow : 0 6px 18px rgba(255,153,0,0.40);
}

#ecla-connexion-submit:active:not(:disabled),
#ecla-connexion-submit-modal:active:not(:disabled) {
    transform  : translateY(0);
    box-shadow : 0 2px 8px rgba(255,153,0,0.25);
}

#ecla-connexion-submit:disabled,
#ecla-connexion-submit[aria-disabled="true"] {
    background : #ccc;
    color      : #666;
    cursor     : not-allowed;
    opacity    : 0.7;
    transform  : none;
    box-shadow : none;
}

/* ═══════════════════════════════════════════════════════════════════════════
   9. PIED DE FORMULAIRE
   ═══════════════════════════════════════════════════════════════════════════ */

.ecla-connexion-footer {
    text-align  : center;
    margin-top  : 20px;
    font-size   : 14px;
    color       : var(--conn-muted);
    padding-top : 16px;
    border-top  : 1px solid #e3f0fd;
}

.ecla-connexion-footer p { margin: 0; }

.ecla-connexion-footer a {
    color           : var(--conn-blue);
    text-decoration : none;
    font-weight     : 700;
}

.ecla-connexion-footer a:hover {
    color           : var(--conn-orange);
    text-decoration : underline;
}

/* ═══════════════════════════════════════════════════════════════════════════
   10. BOUTON COMPTE dans le header marketplace (injecté par connexion.js)
   ═══════════════════════════════════════════════════════════════════════════ */

.ecla-account-btn {
    display         : inline-flex;
    align-items     : center;
    gap             : 5px;
    background      : none;
    border          : 1.5px solid var(--conn-orange);
    border-radius   : 20px;
    padding         : 5px 13px;
    font-size       : 13.5px;
    font-family     : inherit;
    cursor          : pointer;
    white-space     : nowrap;
    transition      : background 0.2s, color 0.2s;
    color           : var(--conn-orange);
    text-decoration : none;
    line-height     : 1.4;
    font-weight     : 600;
}

.ecla-account-btn:hover {
    background : var(--conn-orange);
    color      : #fff;
}

.ecla-account-btn--logged {
    border-color    : var(--conn-blue-dark);
    color           : var(--conn-blue-dark);
    font-weight     : 700;
}

.ecla-account-btn--logged:hover {
    background : var(--conn-blue-dark);
    color      : #fff;
}

/* ═══════════════════════════════════════════════════════════════════════════
   11. MODAL DE CONNEXION (injecté par connexion.js dans la marketplace)
   ═══════════════════════════════════════════════════════════════════════════ */

.ecla-login-modal-overlay .ecla-modal-content { max-width: 440px; }
.ecla-login-modal-content                      { padding: 0; }
.ecla-connexion-modal-inner                    { padding: 28px 24px; }

/* ═══════════════════════════════════════════════════════════════════════════
   12. DARK MODE
   ═══════════════════════════════════════════════════════════════════════════ */

#ecla-marketplace-wrapper.dark-mode .ecla-connexion-card {
    background   : #0d1b2a;
    border-color : rgba(255,153,0,0.25);
    color        : #e0e6f0;
}

#ecla-marketplace-wrapper.dark-mode .ecla-connexion-card .ecla-form-group input {
    background   : #16213e;
    border-color : #263c5c;
    color        : #e0e6f0;
}

#ecla-marketplace-wrapper.dark-mode .ecla-connexion-card .ecla-form-group label,
#ecla-marketplace-wrapper.dark-mode #ecla-connexion-title {
    color : #e0e6f0;
}

/* ═══════════════════════════════════════════════════════════════════════════
   13. GALERIE MODAL — miniatures (CORRECTION #7)
   ═══════════════════════════════════════════════════════════════════════════ */

/* (Galerie dans details-modal.php — styles dans modal.css ou ici en complément) */

.ecla-gallery-main {
    width        : 100%;
    border-radius: 10px;
    overflow     : hidden;
    background   : #f0f4f8;
    text-align   : center;
    margin-bottom: 8px;
}

.ecla-gallery-active-img {
    width        : 100%;
    max-height   : 340px;
    object-fit   : contain;
    border-radius: 10px;
    display      : block;
    transition   : opacity 0.2s ease;
}

.ecla-gallery-thumbs {
    display   : flex;
    gap       : 6px;
    flex-wrap : wrap;
    margin-top: 8px;
}

.ecla-gallery-thumb {
    width        : 64px;
    height       : 64px;
    min-width    : 64px;
    border       : 2px solid #dce8f5;
    border-radius: 7px;
    overflow     : hidden;
    cursor       : pointer;
    padding      : 0;
    background   : #f0f4f8;
    transition   : border-color 0.18s, transform 0.15s;
    flex-shrink  : 0;
}

.ecla-gallery-thumb img {
    width      : 100%;
    height     : 100%;
    object-fit : cover;
    display    : block;
    transition : transform 0.2s;
}

.ecla-gallery-thumb:hover {
    border-color : var(--conn-orange, #ff9900);
    transform    : scale(1.06);
}

.ecla-gallery-thumb.is-active {
    border-color : var(--conn-orange, #ff9900);
    border-width : 2.5px;
    box-shadow   : 0 0 0 2px rgba(255,153,0,0.25);
}

/* ═══════════════════════════════════════════════════════════════════════════
   14. RESPONSIVE MOBILE (≤ 768px)
   ═══════════════════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {

    #ecla-connexion-wrapper {
        padding    : 12px 8px;
        min-height : auto;
        background-attachment : scroll;
    }

    .ecla-connexion-card {
        border-radius : 12px;
        padding       : 24px 16px 20px;
    }

    .ecla-connexion-logo-img { max-height: 48px; }

    .ecla-account-label { display: none; }

    .ecla-login-modal-overlay.ecla-modal-overlay {
        align-items : flex-end;
        padding     : 0;
    }

    .ecla-login-modal-overlay .ecla-modal-content {
        border-radius : 16px 16px 0 0;
        max-height    : 92vh;
        width         : 100%;
        max-width     : 100%;
    }

    .ecla-connexion-modal-inner {
        padding        : 20px 16px;
        padding-bottom : 32px;
    }

    .ecla-gallery-active-img { max-height: 220px; }

    .ecla-gallery-thumb {
        width     : 52px;
        height    : 52px;
        min-width : 52px;
    }
}

/* ═══════════════════════════════════════════════════════════════════════════
   15. RESPONSIVE DESKTOP (≥ 769px)
   ═══════════════════════════════════════════════════════════════════════════ */

@media (min-width: 769px) {

    #ecla-connexion-wrapper  { padding: 40px 0; }

    .ecla-connexion-card {
        padding    : 44px 48px 40px;
        max-width  : 480px;
    }

    #ecla-connexion-submit,
    #ecla-connexion-submit-modal {
        display   : inline-block;
        width     : 100%;
    }

    .ecla-connexion-logo-img { max-height: 70px; }

    .ecla-account-label { display: inline; }

    .ecla-connexion-card .ecla-form-group input {
        padding   : 12px 15px;
        font-size : 15.5px;
    }
}

/* ═══════════════════════════════════════════════════════════════════════════
   16. ACCESSIBILITÉ — prefers-reduced-motion
   ═══════════════════════════════════════════════════════════════════════════ */

@media (prefers-reduced-motion: reduce) {
    #ecla-connexion-submit,
    #ecla-connexion-submit-modal,
    .ecla-toggle-password,
    .ecla-account-btn,
    .ecla-gallery-thumb,
    .ecla-gallery-active-img {
        transition : none;
    }
}