/* Start custom CSS for page-settings */body {
    overflow-x: clip !important;
}

/* ========================================================
   DESIGN PREMIUM "PORTAIL PRO" - CONNEXION, INSCRIPTION & MDP V5
   ======================================================== */

/* 1. FOND DU SITE : On force un blanc pur pour éviter les bandes colorées */
body#authentication, body#registration, body#password {
    background-color: #ffffff !important; /* On remet à blanc */
    background-image: none !important;    /* On supprime le dégradé rose/bleu qui dépasse */
}

/* 2. L'ASSOMBRISSEMENT (Overlay 85% noir + Flou élégant) */
body#authentication #wrapper, body#registration #wrapper, body#password #wrapper {
    background: rgba(5, 8, 15, 0.85) !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
    min-height: calc(100vh - 100px); 
    
    /* ⭐️ AJOUT DE LA MARGE POUR ABAISSER LE BLOC NOIR ⭐️ */
    margin-top: 30px !important; 
    
    padding-top: 40px !important; /* Réduit un peu le padding pour compenser la marge */
    padding-bottom: 60px !important;
}

/* 3. LE GRAND NETTOYAGE (Supprime les boites blanches du thème) */
body#authentication #main, body#registration #main,
body#authentication .page-content, body#registration .page-content, body#password .page-content, body#password #content,
body#authentication .card, body#registration .card, body#password .card,
body#authentication .container, body#registration .container, body#password .container {
    background: transparent !important;
    box-shadow: none !important;
    border: none !important;
    padding: 0 !important;
    margin: 0 auto !important;
}
/* ⭐️ CORRECTION ALIGNEMENT : On détruit l'en-tête invisible de la page contact qui poussait le formulaire vers le bas ⭐️ */
body#authentication .page-header, body#registration .page-header, body#password .page-header, body#contact .page-header { 
    display: none !important; 
    margin: 0 !important;
    padding: 0 !important;
    height: 0 !important;
}

/* 4. LA CARTE (Englobe les formulaires et inclut maintenant le bouton retour) */
body#authentication #content, body#registration #content, body#password #main {
    background: rgba(255, 255, 255, 0.05) !important;
    backdrop-filter: blur(24px) !important;
    -webkit-backdrop-filter: blur(24px) !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    border-radius: 24px !important;
    padding: 50px 45px !important;
    max-width: 500px !important;
    margin: 0 auto !important;
    box-shadow: 0 30px 60px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(255,255,255,0.1) !important;
    position: relative !important;
}

/* Pour l'inscription, la carte est légèrement élargie */
body#registration #content { max-width: 580px !important; }

/* Badge VIP Holographique */
body#authentication #content::before, body#registration #content::before, body#password #main::before {
    content: 'PORTAIL SÉCURISÉ';
    position: absolute;
    top: -12px;
    left: 50%;
    transform: translateX(-50%);
    background: linear-gradient(135deg, #155CAE 0%, #4da6ff 100%);
    color: #fff;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 2px;
    padding: 6px 20px;
    border-radius: 50px;
    box-shadow: 0 5px 15px rgba(21, 92, 174, 0.4);
}

/* 5. CHAMPS À 100% DE LARGEUR */
body#authentication .form-group, body#registration .form-group, body#password .form-group {
    display: flex !important;
    flex-direction: column !important;
    margin-bottom: 18px !important; /* ⭐️ Réduit (avant 25px) */
}
body#authentication .form-group > div, body#registration .form-group > div, body#password .form-group > div {
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 !important;
}

/* 6. TEXTES (Labels au-dessus des champs) */
body#authentication .form-control-label, body#registration .form-control-label, body#password .form-control-label {
    width: 100% !important;
    text-align: left !important;
    color: #cfd6e0 !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    margin-bottom: 5px !important; /* ⭐️ Réduit (avant 8px) */
    padding: 0 !important;
}

/* Textes d'instruction (ex: page mot de passe oublié) */
body#password #main p, body#password .send-renew-password-link {
    color: #cfd6e0 !important;
    font-size: 13px !important;
    line-height: 1.6 !important;
    margin-bottom: 20px !important; /* ⭐️ Réduit (avant 25px) */
    text-align: center !important;
}

/* 7. ZONES DE SAISIE */
body#authentication .form-control, body#registration .form-control, body#password .form-control {
    background: rgba(0, 0, 0, 0.4) !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    color: #ffffff !important;
    border-radius: 12px !important;
    padding: 12px 20px !important; /* ⭐️ Hauteur réduite (avant 15px) */
    width: 100% !important;
    height: auto !important;
    font-size: 15px !important;
    transition: all 0.3s ease !important;
}
body#authentication .form-control:focus, body#registration .form-control:focus, body#password .form-control:focus {
    border-color: #F36523 !important;
    box-shadow: 0 0 0 3px rgba(243, 101, 35, 0.15) !important;
    background: rgba(0, 0, 0, 0.6) !important;
    outline: none !important;
}

/* Selecteurs d'inscription */
body#registration select.form-control { color: #fff !important; }
body#registration select.form-control option { background: #0B1120 !important; color: #fff !important; }

/* 8. BOUTON "AFFICHER" LE MOT DE PASSE */
body#authentication .input-group, body#registration .input-group {
    display: flex !important;
    width: 100% !important;
}
body#authentication .input-group .form-control, body#registration .input-group .form-control {
    border-radius: 12px 0 0 12px !important;
}
body#authentication .input-group-btn button[data-action="show-password"],
body#registration .input-group-btn button[data-action="show-password"] {
    background: rgba(255, 255, 255, 0.08) !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    border-left: none !important;
    color: #ffffff !important;
    border-radius: 0 12px 12px 0 !important;
    padding: 0 20px !important;
    font-size: 11px !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
    transition: all 0.3s ease !important;
}
body#authentication .input-group-btn button[data-action="show-password"]:hover,
body#registration .input-group-btn button[data-action="show-password"]:hover {
    background: rgba(255, 255, 255, 0.15) !important;
}

/* 9. BOUTONS RADIOS ET CHECKBOX (Inscription) */
body#registration .radio-inline { display: inline-block !important; color: #cfd6e0 !important; margin-right: 20px !important; font-size: 14px !important; }
body#registration .custom-checkbox { display: flex !important; align-items: flex-start !important; margin-top: 10px !important; }
body#registration .custom-checkbox label { color: #cfd6e0 !important; font-size: 12px !important; line-height: 1.5 !important; text-align: left !important; }
body#registration .custom-checkbox a { color: #4da6ff !important; font-weight: 600 !important; }

/* 10. MOT DE PASSE OUBLIÉ (Lien page connexion) */
body#authentication .forgot-password {
    text-align: right !important;
    margin-top: -8px !important;
    margin-bottom: 20px !important; /* ⭐️ Réduit (avant 30px) */
}
body#authentication .forgot-password a {
    color: #4da6ff !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    text-decoration: none !important;
    transition: all 0.3s ease !important;
}
body#authentication .forgot-password a:hover {
    color: #ffffff !important;
    text-shadow: 0 0 10px rgba(77, 166, 255, 0.5);
}


/* ========================================================
   11. BOUTONS PRINCIPAUX ORANGE (Connexion / Inscription / MDP) 
   ======================================================== */

body#password button.hidden-sm-up,
body#password button.hidden-md-up,
body#password button[type="submit"]:nth-of-type(2),
body#password .form-control-submit:nth-of-type(2) {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    height: 0 !important;
    width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Dans le bloc 11, modifiez le bouton principal : */
body#authentication #submit-login,
body#registration .form-control-submit,
body#password button[type="submit"]:first-of-type {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    text-align: center !important;
    background: linear-gradient(135deg, #F36523 0%, #d54c0e 100%) !important;
    border: none !important;
    border-radius: 50px !important;
    color: #ffffff !important;
    font-size: 15px !important;
    font-weight: 800 !important;
    padding: 13px 30px !important; /* ⭐️ Hauteur réduite (avant 16px) */
    width: 100% !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
    box-shadow: 0 10px 20px rgba(243, 101, 35, 0.3) !important;
    transition: all 0.3s ease !important;
    margin-bottom: 10px !important;
    margin-top: 10px !important; /* ⭐️ Réduit (avant 15px) */
}

body#password button[type="submit"]:first-of-type {
    font-size: 11px !important;
    letter-spacing: 0.5px !important;
    white-space: normal !important;
}

body#authentication #submit-login:hover,
body#registration .form-control-submit:hover,
body#password button[type="submit"]:first-of-type:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 15px 30px rgba(243, 101, 35, 0.5) !important;
}


/* ========================================================
   12. BOUTONS SECONDAIRES GRIS (Créer un compte / Retour)
   ======================================================== */

body#authentication .no-account,
body#registration .text-sm-center,
body#password .page-footer {
    text-align: center !important;
    margin-top: 15px !important;
    padding-top: 15px !important;
    border-top: 1px solid rgba(255, 255, 255, 0.1) !important;
}

body#authentication .no-account a,
body#registration .text-sm-center a {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    text-align: center !important;
    color: #ffffff !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    text-decoration: none !important;
    background: rgba(255, 255, 255, 0.08) !important; 
    padding: 12px 25px !important;
    border-radius: 50px !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    transition: all 0.3s ease !important;
    width: 100% !important;
}

body#password #back-to-login {
    display: inline-flex !important; 
    justify-content: center !important;
    align-items: center !important;
    text-align: center !important;
    color: #ffffff !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    text-decoration: none !important;
    background: rgba(255, 255, 255, 0.08) !important; 
    padding: 12px 35px !important;
    border-radius: 50px !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    transition: all 0.3s ease !important;
    width: auto !important;
    margin: 0 auto !important;
}

body#authentication .no-account a:hover,
body#registration .text-sm-center a:hover,
body#password #back-to-login:hover {
    background: #155CAE !important;
    border-color: #4da6ff !important;
    box-shadow: 0 5px 20px rgba(21, 92, 174, 0.4) !important;
}

body#password #back-to-login i { display: none !important; }
body#password #back-to-login span { margin: 0 !important; font-weight: 700 !important; }

@media (max-width: 768px) {
    body#authentication #content, body#registration #content, body#password #main {
        padding: 40px 25px 30px !important;
        margin: 20px 15px !important;
        width: auto !important;
        border-radius: 16px !important;
    }
}

/* ========================================================
   13. CORRECTION DES CASES À COCHER (VISIBILITÉ)
   ======================================================== */

body#registration .custom-checkbox input[type="checkbox"] + span {
    border: 2px solid rgba(255, 255, 255, 0.2) !important;
    background: rgba(0, 0, 0, 0.4) !important;
    border-radius: 4px !important;
    width: 20px !important;
    height: 20px !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    transition: all 0.2s ease !important;
    margin-right: 12px !important;
}

body#registration .custom-checkbox input[type="checkbox"]:checked + span {
    background: #F36523 !important;
    border-color: #F36523 !important;
    box-shadow: 0 0 10px rgba(243, 101, 35, 0.4) !important;
}

body#registration .custom-checkbox input[type="checkbox"] + span i,
body#registration .custom-checkbox input[type="checkbox"] + span .checkbox-checked {
    color: transparent !important;
    font-size: 16px !important;
    transition: all 0.2s ease !important;
}

body#registration .custom-checkbox input[type="checkbox"]:checked + span i,
body#registration .custom-checkbox input[type="checkbox"]:checked + span .checkbox-checked {
    color: #ffffff !important;
    display: block !important;
}

body#registration .form-control-comment {
    display: none !important;
}


/* ========================================================
   DESIGN PREMIUM - PAGE CONTACT "DARK TECH" V6 (FINALE)
   ======================================================== */

/* 1. FOND DE PAGE GLOBAL ET COMPRESSION VERTICALE */
body#contact {
    background: #ffffff !important;
}
body#contact #wrapper {
    background: #0f131a !important;
    background-image: radial-gradient(circle at top, #1a2233 0%, #0a0d12 100%) !important;
    padding: 30px 0 40px !important;
    margin-top: 30px !important;
}

/* 2. LE DESTRUCTEUR DE BOÎTES BLANCHES ET DE MARGES FANTÔMES */
body#contact .container,
body#contact #content-wrapper,
body#contact #main,
body#contact #content,
body#contact .page-content,
body#contact .page-content > .row,
body#contact .page-content > div,
body#contact .card,
body#contact .card-block,
body#contact .contact-layout {
    background: transparent !important;
    background-color: transparent !important;
    box-shadow: none !important;
    border: none !important;
}

/* ⭐️ Destruction stricte des marges invisibles qui décalent le bloc droit vers le bas ⭐️ */
body#contact #left-column,
body#contact .ceilingo-contact-info,
body#contact #content-wrapper,
body#contact .ceilingo-contact-form > #main,
body#contact .ceilingo-contact-form .page-content {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

/* 3. RECONSTRUCTION DES DEUX PANNEAUX (Verre dépoli) */
body#contact .contact-rich,
body#contact .contact-form {
    background: rgba(255, 255, 255, 0.03) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
    border-radius: 16px !important;
    padding: 25px 35px !important;
    box-shadow: 0 20px 40px rgba(0,0,0,0.3) !important;
    margin-top: 0 !important;
    margin-bottom: 30px !important;
}

/* 4. TYPOGRAPHIE ET TITRES */
body#contact h1, body#contact h2, body#contact h3, body#contact h4,
body#contact .h1, body#contact .h3,
body#contact .contact-rich h4,
body#contact .text-uppercase {
    color: #ffffff !important;
    font-family: 'Montserrat', sans-serif !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    border-bottom: none !important;
    margin-bottom: 25px !important;
    background: transparent !important;
}

/* 5. PANNEAU GAUCHE (Infos) */
body#contact .contact-rich { color: #ffffff !important; }
body#contact .contact-rich .icon { color: #4da6ff !important; font-size: 2rem !important; margin-bottom: 15px !important; display: inline-block !important; }
body#contact .contact-rich hr { border-top: 1px solid rgba(255,255,255,0.1) !important; margin: 25px 0 !important; }

body#contact .contact-rich .data,
body#contact .contact-rich p {
    color: #ffffff !important; 
    line-height: 1.6 !important;
}

body#contact .contact-rich .data a { color: #F36523 !important; font-weight: 600 !important; font-size: 1rem !important; }
body#contact .contact-rich .data a:hover { color: #ffffff !important; }

/* 6. LABELS DU FORMULAIRE */
body#contact .form-group label,
body#contact .form-control-label {
    color: #cfd6e0 !important;
    font-weight: 600 !important;
    font-size: 0.95rem !important;
    padding-top: 0 !important;
    text-align: left !important;
    margin-bottom: 4px !important;
}

/* 7. CHAMPS DE SAISIE */
body#contact .form-control {
    background-color: rgba(255, 255, 255, 0.05) !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    color: #ffffff !important;
    border-radius: 8px !important;
    padding: 8px 15px !important;
    transition: all 0.3s ease !important;
    width: 100% !important;
}
body#contact .form-control:focus {
    border-color: #F36523 !important;
    background-color: rgba(255, 255, 255, 0.1) !important;
    box-shadow: 0 0 15px rgba(243, 101, 35, 0.2) !important;
    outline: none !important;
}
body#contact .form-control::placeholder { color: #6b7280 !important; }

body#contact textarea.form-control {
    height: 90px !important; 
    min-height: 90px !important;
}

body#contact select.form-control { color: #ffffff !important; }
body#contact select.form-control option { background-color: #0f131a !important; color: #ffffff !important; }

body#contact .contact-form .btn:not([type="submit"]) {
    background: #155CAE !important;
    color: #ffffff !important;
    border: none !important;
    border-radius: 4px !important;
    font-weight: 600 !important;
    padding: 8px 15px !important;
}
body#contact span.custom-file-label { color: #9ca3af !important; font-style: italic !important; }
body#contact .form-control-comment { color: #6b7280 !important; display: none !important; }

/* 8. GROS BOUTON ENVOYER */
body#contact footer.form-footer {
    text-align: right !important;
    margin-top: 15px !important;
    padding-top: 0 !important;
    border-top: none !important;
}
body#contact .btn-primary[type="submit"], body#contact input[name="submitMessage"] {
    background: linear-gradient(135deg, #F36523 0%, #d54c0e 100%) !important;
    color: #ffffff !important;
    border: none !important;
    border-radius: 50px !important;
    padding: 14px 45px !important;
    font-weight: 800 !important;
    font-size: 1rem !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    transition: all 0.3s ease !important;
    box-shadow: 0 5px 15px rgba(243, 101, 35, 0.3) !important;
    cursor: pointer !important;
}
body#contact .btn-primary[type="submit"]:hover, body#contact input[name="submitMessage"]:hover {
    transform: translateY(-3px) !important;
    box-shadow: 0 8px 25px rgba(243, 101, 35, 0.5) !important;
}

/* ========================================================
   9. CENTRAGE PARFAIT ET ALIGNEMENT HAUT (PC)
   ======================================================== */
@media (min-width: 992px) {
    body#contact #wrapper .container {
        max-width: 1200px !important;
        width: 100% !important;
        margin-left: auto !important;
        margin-right: auto !important;
        padding-left: 15px !important;
        padding-right: 15px !important;
    }

    body#contact #wrapper > .container > .row {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        gap: 40px !important;
        align-items: flex-start !important;
        justify-content: center !important;
        margin: 0 auto !important;
    }

    body#contact #left-column {
        flex: 0 0 380px !important;
        width: 380px !important;
        max-width: 380px !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    body#contact #content-wrapper {
        flex: 0 0 700px !important;
        width: 700px !important;
        max-width: 700px !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    /* Alignement haut strict des deux panneaux vitrés */
    body#contact .contact-rich,
    body#contact .contact-form {
        margin-top: 0 !important;
        margin-bottom: 0 !important;
    }

    /* Supprime tout padding/margin hérité sur les wrappers internes */
    body#contact #content-wrapper #content,
    body#contact #content-wrapper #main,
    body#contact #content-wrapper .page-content {
        margin-top: 0 !important;
        padding-top: 0 !important;
    }

    body#contact .contact-form h3:first-child,
    body#contact .contact-form .h3:first-child,
    body#contact .contact-form h4:first-child {
        margin-top: 0 !important;
        padding-top: 0 !important;
    }
}

/* ========================================================
   10. CORRECTION DU FORMULAIRE (TITRES AU-DESSUS)
   ======================================================== */
body#contact .form-group {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    width: 100% !important;
    margin-bottom: 12px !important;
}

body#contact .form-group .form-control-label {
    width: 100% !important;
    text-align: left !important;
}

body#contact .form-group > div {
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 !important;
}

/* ========================================================
   11. TEXTES ET ICÔNES DÉTENDUS (PANNEAU GAUCHE)
   ======================================================== */
body#contact .contact-rich .block {
    display: flex !important;
    align-items: flex-start !important;
    margin-bottom: 20px !important;
    width: 100% !important;
}

body#contact .contact-rich .icon {
    flex: 0 0 40px !important;
    width: 40px !important;
    display: block !important;
}

body#contact .contact-rich .data {
    flex: 1 1 auto !important;
    width: calc(100% - 40px) !important;
    display: block !important;
    white-space: normal !important;
}

body#contact .contact-rich .data a {
    white-space: nowrap !important;
}

/* ========================================================
   12. FORMATAGE STRICT DE L'E-MAIL (SOUS LE TEXTE)
   ======================================================== */

/* Force le dernier bloc (e-mail) à passer à la ligne */
body#contact .contact-rich .block:last-child {
    flex-wrap: wrap !important;
}

/* Lien e-mail : qu'il soit dans .data OU enfant direct de .block */
body#contact .contact-rich .block:last-child > a,
body#contact .contact-rich .block:last-child .data a {
    display: block !important;
    width: 100% !important;
    padding-left: 40px !important;
    margin-top: -10px !important;
    font-size: 1rem !important;
    white-space: nowrap !important;
    text-align: left !important;
}
body#contact .contact-rich .block:last-child > a:hover,
body#contact .contact-rich .block:last-child .data a:hover {
    color: #ffffff !important;
    text-shadow: 0 0 10px rgba(243, 101, 35, 0.5) !important;
    transition: all 0.3s ease !important;
}



/* ========================================================
   DESIGN PREMIUM - TABLEAU DE BORD "MON COMPTE" (COMPACT)
   ======================================================== */

/* 1. FOND SOMBRE GLOBAL (Compression Haut/Bas) */
body#my-account { 
    background-color: transparent !important; 
}
body#my-account #wrapper {
    background: #0f131a !important;
    background-image: radial-gradient(circle at top, #1a2233 0%, #0a0d12 100%) !important;
    margin-top: 30px !important; /* ⭐️ AJOUT : Descend le fond noir de 30px */
    padding-top: 45px !important; 
    padding-bottom: 30px !important; 
    min-height: calc(100vh - 100px) !important;
}

/* 2. DESTRUCTEUR DE BOÎTES BLANCHES */
body#my-account .container, 
body#my-account #content-wrapper, 
body#my-account #main, 
body#my-account .page-content {
    background: transparent !important;
    box-shadow: none !important;
    border: none !important;
    padding-top: 0 !important;
}

/* 3. LE TITRE "VOTRE COMPTE" (Affiné) */
body#my-account .page-header h1 {
    color: #ffffff !important;
    font-family: 'Montserrat', sans-serif !important;
    font-weight: 800 !important;
    text-align: center !important;
    font-size: 2rem !important; /* ⭐️ Réduit (avant 2.5rem) */
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
    border-bottom: none !important;
    margin-bottom: 25px !important; /* ⭐️ Réduit (avant 50px) */
}

/* 4. LA GRILLE DES BOUTONS (Resserrée) */
body#my-account .page-content > .row,
body#my-account .links {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 15px !important; /* ⭐️ Réduit (avant 25px) */
    justify-content: center !important;
    margin: 0 auto !important;
    max-width: 1100px !important;
}

body#my-account .page-content a.col-lg-4,
body#my-account .page-content a.col-md-6,
body#my-account .links a {
    flex: 1 1 250px !important;
    max-width: 320px !important;
    margin: 0 !important;
    padding: 0 !important;
    text-decoration: none !important;
}

/* 5. DESIGN DES CARTES (Glassmorphism compressé) */
body#my-account .link-item,
body#my-account .links a span {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    background: rgba(255, 255, 255, 0.03) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
    border-radius: 12px !important;
    padding: 20px 15px !important; /* ⭐️ Grandement réduit (avant 40px 20px) */
    color: #ffffff !important;
    font-size: 0.9rem !important; /* ⭐️ Affiné */
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    text-align: center !important;
    transition: all 0.3s ease !important;
    box-shadow: 0 5px 15px rgba(0,0,0,0.2) !important;
    height: 100% !important;
}

/* 6. STYLE DES ICÔNES (Plus discrètes) */
body#my-account .link-item i,
body#my-account .links a i {
    font-size: 2.2rem !important; /* ⭐️ Réduit (avant 3rem) */
    color: #4da6ff !important; 
    margin-bottom: 12px !important; /* ⭐️ Réduit (avant 20px) */
    transition: all 0.3s ease !important;
    display: block !important;
}

/* 7. EFFET AU SURVOL */
body#my-account .link-item:hover,
body#my-account .links a:hover span {
    transform: translateY(-3px) !important;
    background: rgba(255, 255, 255, 0.08) !important;
    border-color: #F36523 !important;
    box-shadow: 0 10px 25px rgba(243, 101, 35, 0.3) !important;
    color: #F36523 !important;
}
body#my-account .link-item:hover i,
body#my-account .links a:hover i {
    color: #F36523 !important;
    transform: scale(1.1) !important;
}

/* 8. LE BOUTON DÉCONNEXION (Remonté) */
body#my-account .page-footer,
body#my-account .text-sm-center {
    margin-top: 25px !important; /* ⭐️ Remonté (avant 50px) */
    text-align: center !important;
}

body#my-account .page-footer a,
body#my-account .text-sm-center a {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 10px 30px !important; /* ⭐️ Affiné */
    border-radius: 50px !important;
    background: transparent !important;
    color: #ffffff !important;
    border: 1px solid rgba(255, 255, 255, 0.3) !important;
    font-weight: 600 !important;
    font-size: 0.9rem !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    text-decoration: none !important;
    transition: all 0.3s ease !important;
}

body#my-account .page-footer a:hover,
body#my-account .text-sm-center a:hover {
    background: rgba(255, 255, 255, 0.1) !important;
    border-color: #ffffff !important;
}


/* ========================================================
   PAGE ERREUR 403 PREMIUM (ACCÈS RESTREINT)
   ======================================================== */

/* 1. L'ÉRADICATEUR (Nettoie la page et centre le bloc) */
#wrapper:has(#premium-403-error) {
    background: #000000 !important;
    background-image: radial-gradient(circle at center, rgba(243, 101, 35, 0.1) 0%, rgba(0,0,0,1) 70%) !important;
    margin-top: 30px !important;
    padding: 0 !important;
    min-height: calc(100vh - 100px) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* On masque les alertes roses disgracieuses de PrestaShop */
#wrapper:has(#premium-403-error) .alert-danger,
#wrapper:has(#premium-403-error) .alert-warning {
    display: none !important;
}

/* Transparence des boîtes natives */
#wrapper:has(#premium-403-error) .container, 
#wrapper:has(#premium-403-error) #content-wrapper, 
#wrapper:has(#premium-403-error) #main {
    background: transparent !important;
    box-shadow: none !important;
    border: none !important;
    padding: 0 !important;
    margin: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
}

/* 2. LE CONTENEUR DU MESSAGE D'ERREUR */
#premium-403-error {
    text-align: center !important;
    width: 100% !important;
    max-width: 650px !important;
    margin: 0 auto !important;
    padding: 20px !important;
}

/* 3. LA PLAQUE DE VERRE DÉPOLI */
.error-glass-panel {
    background: rgba(15, 20, 28, 0.6) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
    border-radius: 30px !important;
    padding: 60px 40px !important;
    box-shadow: 0 30px 60px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255,255,255,0.1) !important;
    position: relative !important;
    overflow: hidden !important;
}

/* 4. TYPOGRAPHIE ET ICÔNES */
.error-glass-panel .error-icon {
    font-size: 80px !important;
    color: #F36523 !important;
    margin-bottom: 20px !important;
    text-shadow: 0 0 20px rgba(243, 101, 35, 0.4) !important;
}

.error-glass-panel .error-code {
    font-size: 6rem !important;
    font-family: 'Montserrat', sans-serif !important;
    font-weight: 900 !important;
    color: #ffffff !important;
    line-height: 1 !important;
    margin-bottom: 10px !important;
    letter-spacing: -2px !important;
    border: none !important;
}

.error-glass-panel .error-title {
    font-size: 2rem !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
    color: #ffffff !important;
    margin-bottom: 20px !important;
    border: none !important;
}

.error-glass-panel .error-desc {
    color: #cfd6e0 !important;
    font-size: 1.15rem !important;
    line-height: 1.6 !important;
    margin-bottom: 40px !important;
}

/* 5. BOUTONS D'ACTION */
#premium-403-error .error-actions {
    display: flex !important;
    gap: 20px !important;
    justify-content: center !important;
    flex-wrap: wrap !important;
}

#premium-403-error .btn-premium-orange, 
#premium-403-error .btn-premium-grey {
    padding: 16px 35px !important;
    border-radius: 50px !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
    text-decoration: none !important;
    transition: all 0.3s ease !important;
    font-size: 0.95rem !important;
}

#premium-403-error .btn-premium-orange {
    background: linear-gradient(135deg, #F36523 0%, #d54c0e 100%) !important;
    color: #ffffff !important;
    box-shadow: 0 10px 20px rgba(243, 101, 35, 0.3) !important;
}

#premium-403-error .btn-premium-orange:hover {
    transform: translateY(-3px) !important;
    box-shadow: 0 15px 30px rgba(243, 101, 35, 0.5) !important;
}

#premium-403-error .btn-premium-grey {
    background: rgba(255, 255, 255, 0.08) !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    color: #ffffff !important;
}

#premium-403-error .btn-premium-grey:hover {
    background: rgba(255, 255, 255, 0.15) !important;
    transform: translateY(-3px) !important;
}

/* 6. RESPONSIVE MOBILE */
@media (max-width: 768px) {
    #wrapper:has(#premium-403-error) { padding-top: 20px !important; margin-top: 0 !important; }
    .error-glass-panel { padding: 40px 25px !important; border-radius: 20px !important; }
    .error-glass-panel .error-code { font-size: 4.5rem !important; }
    .error-glass-panel .error-title { font-size: 1.5rem !important; }
    .error-glass-panel .error-desc { font-size: 1rem !important; margin-bottom: 30px !important; }
    #premium-403-error .error-actions { flex-direction: column !important; gap: 15px !important; }
    #premium-403-error .btn-premium-orange, 
    #premium-403-error .btn-premium-grey { width: 100% !important; text-align: center !important; }
}




/* ========================================================
   CORRECTION MOBILE - BADGE "PORTAIL SÉCURISÉ" (BLINDAGE v2)
   ======================================================== */
@media (max-width: 768px) {
    /* 1. Remonter le bloc noir contre le menu */
    body#authentication #wrapper, body#registration #wrapper, body#password #wrapper {
        margin-top: 0 !important;
        padding-top: 16px !important;
        padding-bottom: 10px !important;
        min-height: auto !important;
    }
  body#password #content button,
    body#password #content input[type="submit"],
    body#password #content .form-control-submit,
    body#password #main button,
    body#password #main .renew-password button {
        margin-top: 15px !important;
    }
 body#password #content .page-footer,
    body#password #content .forgot-password,
    body#password #main .page-footer,
    body#password #main a[href*="login"],
    body#password #main a[href*="authentication"] {
        padding-top: 25px !important;
        margin-bottom: 10px !important;
    }
 
 body#authentication .form-group label,
    body#authentication .form-control-label,
    body#registration .form-group label,
    body#registration .form-control-label,
    body#password .form-group label,
    body#password .form-control-label {
        margin-left: 10px !important;
        padding-left: 0 !important;
    }
 
 
 body#authentication .form-group,
    body#registration .form-group,
    body#password .form-group {
        padding-left: 10px !important;
        padding-right: 10px !important;
    }
   /* 2. Carte plus compacte */
    body#authentication #content, body#registration #content, body#password #main {
        padding: 35px 15px 15px !important;
        margin: 8px 10px !important;
        width: auto !important;
        border-radius: 16px !important;
    }
    /* 3. Badge PORTAIL SÉCURISÉ */
    body#authentication #content::before, 
    body#registration #content::before, 
    body#password #main::before {
        white-space: nowrap !important;
        word-break: keep-all !important;
        overflow-wrap: normal !important;
        width: auto !important;
        min-width: max-content !important;
        max-width: none !important;
        box-sizing: content-box !important;
        display: inline-block !important;
        font-size: 15px !important;
        padding: 9px 27px !important;
        letter-spacing: 1.5px !important;
        line-height: 1 !important;
        height: auto !important;
        left: 50% !important;
        transform: translateX(-50%) !important;
        right: auto !important;
        top: -10px !important;
    }
/* 4. Champs resserrés */
    body#authentication .form-control, body#registration .form-control, body#password .form-control {
        padding: 12px 14px !important;
        font-size: 14px !important;
    }
    body#authentication .form-group, body#registration .form-group, body#password .form-group {
        margin-bottom: 8px !important;
    }
    body#authentication label, body#registration label, body#password label {
        margin-bottom: 3px !important;
        font-size: 13px !important;
    }
  /* 5. Bouton CONNEXION compact */
    body#authentication #submit-login,
    body#registration .form-control-submit,
    body#password button[type="submit"]:first-of-type {
        padding: 10px 20px !important;
        font-size: 13px !important;
        margin-top: 3px !important;
        margin-bottom: 3px !important;
    }
    /* 6. Zones secondaires resserrées */
    body#authentication .no-account,
    body#registration .text-sm-center,
    body#password .page-footer {
        margin-top: 6px !important;
        padding-top: 6px !important;
    }
    body#authentication .no-account a,
    body#registration .text-sm-center a {
        padding: 8px 15px !important;
        font-size: 13px !important;
    }
body#authentication .forgot-password {
        margin-top: -3px !important;
        margin-bottom: 5px !important;
        font-size: 12px !important;
    }

    body#authentication #content .no-account {
        padding-top: 16px !important;
    }
}/* End custom CSS */