/* ========================================
   STYLES GÉNÉRAUX
   ======================================== */

   .devis-container {
    margin: 15px 0;
}

/* ========================================
   BOUTON PRINCIPAL
   ======================================== */

.btn-devis {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: #1a56db !important;
    color: #ffffff !important;
    border: none !important;
    padding: 14px 32px !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    border-radius: 8px !important;
    cursor: pointer !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    box-shadow: 0 2px 8px rgba(26, 86, 219, 0.25) !important;
    letter-spacing: 0.3px !important;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif !important;
    position: relative !important;
    overflow: hidden !important;
}

.btn-devis::before {
    margin-right: 8px;
}

.btn-devis:hover {
    background: #1e40af !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 20px rgba(26, 86, 219, 0.35) !important;
}

.btn-devis:active {
    transform: translateY(0px) !important;
    box-shadow: 0 2px 8px rgba(26, 86, 219, 0.25) !important;
}

/* Variante du bouton (si besoin d'une autre classe) */
.btn-devis-outline {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: transparent !important;
    color: #1a56db !important;
    border: 2px solid #1a56db !important;
    padding: 12px 30px !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    border-radius: 8px !important;
    cursor: pointer !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif !important;
}

.btn-devis-outline::before {
    margin-right: 8px;
}

.btn-devis-outline:hover {
    background: #1a56db !important;
    color: #ffffff !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 20px rgba(26, 86, 219, 0.25) !important;
}

/* ========================================
   MODALE - VERSION CORRIGÉE
   ======================================== */

/* Empêcher le scroll du body quand la modale est ouverte */
body.modal-open {
    overflow: hidden !important;
    position: fixed !important;
    width: 100% !important;
    height: 100% !important;
    top: 0 !important;
    left: 0 !important;
}

.devis-modal {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100% !important;
    height: 100% !important;
    z-index: 9999999 !important;
    display: none; /* PAS de !important pour que JS puisse le modifier */
    align-items: center !important;
    justify-content: center !important;
    padding: 20px !important;
    box-sizing: border-box !important;
    animation: devisFadeIn 0.3s ease !important;
    background: transparent !important;
}

/* Quand la modale est ouverte via JS */
.devis-modal[style*="display: flex"] {
    display: flex !important;
}

.devis-modal-overlay {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100% !important;
    height: 100% !important;
    background: rgba(0, 0, 0, 0.6) !important;
    backdrop-filter: blur(4px) !important;
    -webkit-backdrop-filter: blur(4px) !important;
    z-index: 9999998 !important;
    cursor: pointer !important;
}

/* ========================================
   CONTENEUR DE LA MODALE - AMÉLIORÉ
   ======================================== */

   .devis-modal-box {
    position: relative !important;
    z-index: 9999999 !important;
    background: #ffffff !important;
    border-radius: 16px !important;
    max-width: 560px !important;
    width: 100% !important;
    max-height: 85vh !important;
    overflow: hidden !important;
    box-shadow: 0 25px 60px rgba(0, 0, 0, 0.3) !important;
    animation: devisSlideUp 0.3s ease !important;
    margin: auto !important;
    display: flex !important;
    flex-direction: column !important;
}

.devis-modal-header {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 24px 28px 20px 28px !important;
    border-bottom: 2px solid #e8ecf1 !important;
    background: #fafbfc !important;
    border-radius: 16px 16px 0 0 !important;
    flex-shrink: 0 !important;
    z-index: 9999999 !important;
    background-color: #fafbfc !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04) !important;
    /* Pour être sûr que le header reste au-dessus */
    position: relative !important;
}

.devis-modal-header h2 {
    margin: 0 !important;
    font-size: 20px !important;
    font-weight: 700 !important;
    color: #1a1a1a !important;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif !important;
}

.devis-modal-close {
    font-size: 30px !important;
    font-weight: 300 !important;
    color: #999 !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
    line-height: 1 !important;
    padding: 0 8px !important;
    background: none !important;
    border: none !important;
    width: 40px !important;
    height: 40px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 50% !important;
    position: relative !important;
    z-index: 9999999 !important; /* Pour rester au-dessus */
}

.devis-modal-close:hover {
    color: #1a56db !important;
    background: rgba(26, 86, 219, 0.1) !important;
    transform: rotate(90deg) !important;
}

/* ========================================
   CORPS DE LA MODALE - CORRIGÉ
   ======================================== */

   .devis-modal-body {
    padding: 24px 28px 28px 28px !important;
    background: #ffffff !important;
    border-radius: 0 0 16px 16px !important;
    flex: 1 !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    position: relative !important;
    z-index: 1 !important;
    scroll-behavior: smooth !important;
    overscroll-behavior: contain !important;
    scrollbar-width: thin !important;
    scrollbar-color: #1a56db #f1f1f1 !important;
}

.devis-modal-body::-webkit-scrollbar {
    width: 6px !important;
}

.devis-modal-body::-webkit-scrollbar-track {
    background: #f1f1f1 !important;
    border-radius: 10px !important;
}

.devis-modal-body::-webkit-scrollbar-thumb {
    background: #1a56db !important;
    border-radius: 10px !important;
}

.devis-modal-body::-webkit-scrollbar-thumb:hover {
    background: #1e40af !important;
}

/* ========================================
   INFOS PROGRAMME
   ======================================== */

.devis-programme-info {
    background: #f0f4ff !important;
    border-radius: 8px !important;
    padding: 14px 16px !important;
    margin-bottom: 24px !important;
    border-left: 4px solid #1a56db !important;
}

.devis-label {
    display: block !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    color: #1a56db !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    margin-bottom: 4px !important;
}

.devis-programme-nom {
    font-size: 15px !important;
    font-weight: 500 !important;
    color: #1a1a1a !important;
    word-break: break-word !important;
}

/* ========================================
   FORMULAIRE
   ======================================== */

.devis-champ {
    margin-bottom: 18px !important;
}

.devis-champ label {
    display: block !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    color: #333 !important;
    margin-bottom: 6px !important;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif !important;
    text-align: left !important; /* AJOUTÉ - alignement à gauche */
}

.devis-required {
    color: #dc2626 !important;
    font-weight: 600 !important;
}

/* Forcer tous les champs à gauche */
.devis-champ input,
.devis-champ textarea {
    width: 100% !important;
    padding: 10px 14px !important;
    border: 2px solid #e2e6ea !important;
    border-radius: 8px !important;
    font-size: 14px !important;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif !important;
    transition: all 0.25s ease !important;
    box-sizing: border-box !important;
    background: #fafbfc !important;
    color: #1a1a1a !important;
    text-align: left !important; /* AJOUTÉ - alignement à gauche */
}

/* Forcer les conteneurs à gauche */
.devis-champ {
    margin-bottom: 18px !important;
    text-align: left !important; /* AJOUTÉ - alignement à gauche */
}

/* Forcer le wrapper du formulaire à gauche */
#devisForm {
    text-align: left !important;
}

.devis-champ input:focus,
.devis-champ textarea:focus {
    outline: none !important;
    border-color: #1a56db !important;
    background: #ffffff !important;
    box-shadow: 0 0 0 4px rgba(26, 86, 219, 0.08) !important;
}

.devis-champ input::placeholder,
.devis-champ textarea::placeholder {
    color: #999 !important;
}

.devis-champ textarea {
    resize: vertical !important;
    min-height: 70px !important;
}

/* ========================================
   BOUTON ENVOI
   ======================================== */

.devis-submit-btn {
    width: 100% !important;
    padding: 14px 20px !important;
    background: #1a56db !important;
    color: #ffffff !important;
    border: none !important;
    border-radius: 8px !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif !important;
    box-shadow: 0 2px 8px rgba(26, 86, 219, 0.25) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    margin-top: 6px !important;
}

.devis-submit-btn:hover:not(:disabled) {
    background: #1e40af !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 20px rgba(26, 86, 219, 0.35) !important;
}

.devis-submit-btn:active:not(:disabled) {
    transform: translateY(0px) !important;
}

.devis-submit-btn:disabled {
    opacity: 0.7 !important;
    cursor: not-allowed !important;
    transform: none !important;
}

.devis-btn-loader {
    display: none !important;
    font-weight: 400 !important;
}

/* ========================================
   MESSAGES
   ======================================== */

.devis-message {
    padding: 12px 16px !important;
    border-radius: 8px !important;
    margin-bottom: 16px !important;
    font-size: 14px !important;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif !important;
    display: none !important;
}

.devis-message.success {
    display: block !important;
    background: #ecfdf5 !important;
    color: #065f46 !important;
    border: 1px solid #a7f3d0 !important;
}

.devis-message.error {
    display: block !important;
    background: #fef2f2 !important;
    color: #991b1b !important;
    border: 1px solid #fca5a5 !important;
}

/* ========================================
   FORCER LE HEADER ET FOOTER SOUS LA MODALE
   ======================================== */

/* Cibler les headers et footers courants */
header#masthead,
footer#colophon,
.site-header,
.site-footer,
.header,
.footer,
#header,
#footer,
header[role="banner"],
footer[role="contentinfo"],
.site-header-main,
.site-branding,
.main-navigation,
.navbar,
.top-bar,
.menu-principal,
.header-container,
.footer-container,
.site-header-inner,
.footer-inner,
.header-main,
.footer-main {
    position: relative !important;
    z-index: 100 !important;
}

/* Si votre header a un z-index élevé, le forcer à être plus bas */
header,
footer,
.header-fixed,
.sticky-header,
.fixed-header,
.navbar-fixed-top,
.navbar-fixed-bottom {
    z-index: 100 !important;
}

/* Forcer la modale au-dessus de TOUT */
.devis-modal {
    z-index: 9999999 !important;
}

.devis-modal-overlay {
    z-index: 9999998 !important;
}

.devis-modal-box {
    z-index: 9999999 !important;
}

/* ========================================
   ANIMATIONS
   ======================================== */

@keyframes devisFadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@keyframes devisSlideUp {
    from {
        opacity: 0;
        transform: translateY(30px) scale(0.95);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* ========================================
   RESPONSIVE
   ======================================== */

@media (max-width: 640px) {
    .devis-modal {
        padding: 12px !important;
    }

    .devis-modal-box {
        max-width: 100% !important;
        border-radius: 12px !important;
        max-height: 90vh !important;
        margin: 10px !important;
    }

    .devis-modal-header {
        padding: 18px 20px 14px 20px !important;
        border-radius: 12px 12px 0 0 !important;
    }

    .devis-modal-header h2 {
        font-size: 18px !important;
    }

    .devis-modal-body {
        padding: 18px 20px 22px 20px !important;
        border-radius: 0 0 12px 12px !important;
    }

    .devis-champ input,
    .devis-champ textarea {
        font-size: 16px !important; /* Empêche le zoom sur iOS */
        padding: 12px 14px !important;
    }

    .btn-devis,
    .btn-devis-outline {
        width: 100% !important;
        justify-content: center !important;
        padding: 16px 20px !important;
        font-size: 15px !important;
    }

    .devis-programme-info {
        padding: 12px 14px !important;
    }

    .devis-programme-nom {
        font-size: 14px !important;
    }
}

@media (max-width: 400px) {
    .devis-modal-box {
        max-height: 92vh !important;
        border-radius: 10px !important;
    }

    .devis-modal-header h2 {
        font-size: 16px !important;
    }

    .devis-modal-header {
        padding: 14px 16px 12px 16px !important;
    }

    .devis-modal-body {
        padding: 14px 16px 18px 16px !important;
    }

    .devis-champ {
        margin-bottom: 14px !important;
    }

    .devis-submit-btn {
        font-size: 15px !important;
        padding: 13px 16px !important;
    }
}

/* ========================================
   FORCER TOUS LES ÉLÉMENTS SOUS LA MODALE DEVIS
   UNIQUEMENT - NE TOUCHE PAS LES AUTRES MODALS
   ======================================== */

/* 1. Tout le contenu du body passe sous la modale quand elle est ouverte */
body.modal-open > *:not(.devis-modal):not(.devis-modal-overlay) {
    z-index: 1 !important;
    position: relative !important;
}

/* 2. Forcer TOUS les éléments enfants du body à passer sous la modale */
/* EXCLURE explicitement les autres modals du site */
body.modal-open *:not(.devis-modal):not(.devis-modal-overlay):not(.devis-modal-box):not(.devis-modal-header):not(.devis-modal-body):not(.devis-modal-close):not(.devis-form *):not(.modal):not(.lightbox):not(.popup):not(.dialog) {
    z-index: 1 !important;
}

/* 3. La modale et ses composants restent au-dessus */
body.modal-open .devis-modal {
    z-index: 9999999 !important;
    position: fixed !important;
    display: flex !important;
}

body.modal-open .devis-modal-overlay {
    z-index: 9999998 !important;
    position: fixed !important;
}

body.modal-open .devis-modal-box {
    z-index: 9999999 !important;
    position: relative !important;
}

body.modal-open .devis-modal-header {
    z-index: 9999999 !important;
    position: sticky !important;
}

body.modal-open .devis-modal-body {
    z-index: 9999999 !important;
    position: relative !important;
}

/* 4. Forcer les images, vidéos, sliders et éléments flottants en dessous */
body.modal-open img,
body.modal-open video,
body.modal-open iframe,
body.modal-open .image,
body.modal-open .slider,
body.modal-open .carousel,
body.modal-open .gallery,
body.modal-open .media,
body.modal-open .wp-block-image,
body.modal-open .wp-block-gallery,
body.modal-open .swiper-wrapper,
body.modal-open .slick-slide,
body.modal-open .owl-item,
body.modal-open .owl-stage,
body.modal-open [class*="slider"],
body.modal-open [class*="carousel"],
body.modal-open [class*="gallery"],
body.modal-open [class*="image"],
body.modal-open [class*="media"],
body.modal-open .has-image,
body.modal-open .background-image,
body.modal-open .parallax,
body.modal-open .lazy-image {
    z-index: 1 !important;
    position: relative !important;
}

/* 5. Forcer spécifiquement les éléments en position fixed ou absolute */
/* EXCLURE les autres modals */
body.modal-open .fixed:not(.modal):not(.lightbox):not(.popup),
body.modal-open .sticky:not(.modal):not(.lightbox):not(.popup),
body.modal-open .absolute:not(.modal):not(.lightbox):not(.popup),
body.modal-open [style*="position: fixed"]:not(.modal):not(.lightbox):not(.popup),
body.modal-open [style*="position: sticky"]:not(.modal):not(.lightbox):not(.popup),
body.modal-open [style*="position: absolute"]:not(.modal):not(.lightbox):not(.popup),
body.modal-open [class*="fixed"]:not(.modal):not(.lightbox):not(.popup),
body.modal-open [class*="sticky"]:not(.modal):not(.lightbox):not(.popup),
body.modal-open [class*="absolute"]:not(.modal):not(.lightbox):not(.popup) {
    z-index: 1 !important;
    position: relative !important;
}

/* 6. Forcer les conteneurs principaux */
body.modal-open .container,
body.modal-open .content,
body.modal-open .main,
body.modal-open .site-content,
body.modal-open .entry-content,
body.modal-open .page-content,
body.modal-open .post-content {
    z-index: 1 !important;
    position: relative !important;
}

/* 7. Forcer les widgets et éléments latéraux */
body.modal-open .widget,
body.modal-open .sidebar,
body.modal-open .side-panel,
body.modal-open .floating-element,
body.modal-open .floating-button,
body.modal-open .chat-button,
body.modal-open .back-to-top,
body.modal-open .scroll-top {
    z-index: 1 !important;
    position: relative !important;
}

/* 8. SUPPRIMÉ - Ne pas toucher aux autres modals du site */

/* 9. Forcer les menus et sous-menus */
body.modal-open .menu,
body.modal-open .sub-menu,
body.modal-open .dropdown,
body.modal-open .dropdown-menu,
body.modal-open .wp-block-navigation,
body.modal-open .wp-block-navigation-submenu {
    z-index: 1 !important;
}

/* 10. Forcer les éléments de header spécifiques */
body.modal-open header,
body.modal-open .header,
body.modal-open #header,
body.modal-open #masthead,
body.modal-open .site-header,
body.modal-open .navbar,
body.modal-open .main-navigation,
body.modal-open .site-header-main,
body.modal-open .header-main,
body.modal-open .header-container,
body.modal-open .fixed-header,
body.modal-open .sticky-header,
body.modal-open .header-fixed,
body.modal-open .header-sticky,
body.modal-open .top-bar,
body.modal-open .menu-principal,
body.modal-open .site-branding,
body.modal-open .logo-container,
body.modal-open .logo,
body.modal-open .menu-toggle,
body.modal-open .nav-menu {
    transform: translateZ(0) !important;
    z-index: 1 !important;
    position: relative !important;
}

/* 11. Spécial pour les éléments avec transform ou perspective */
body.modal-open [style*="transform"],
body.modal-open [style*="perspective"],
body.modal-open [class*="transform"],
body.modal-open .animated,
body.modal-open .transition,
body.modal-open .hover-effect {
    transform: translateZ(0) !important;
    z-index: 1 !important;
    position: relative !important;
}

/* 12. Empêcher les effets de survol pendant la modale */
body.modal-open .hover-effect:hover,
body.modal-open .animated:hover {
    transform: none !important;
    transition: none !important;
}

/* 13. S'assurer que la modale est bien au-dessus des canevas (canvas) */
body.modal-open canvas,
body.modal-open .canvas,
body.modal-open [class*="canvas"],
body.modal-open .webgl,
body.modal-open .threejs,
body.modal-open .particles {
    z-index: 1 !important;
    position: relative !important;
}

/* 14. Forcer les éléments avec z-index très élevé */
/* EXCLURE les autres modals */
body.modal-open [style*="z-index: 999"]:not(.modal):not(.lightbox):not(.popup):not(.dialog),
body.modal-open [style*="z-index: 1000"]:not(.modal):not(.lightbox):not(.popup):not(.dialog),
body.modal-open [style*="z-index: 10000"]:not(.modal):not(.lightbox):not(.popup):not(.dialog),
body.modal-open [style*="z-index: 100000"]:not(.modal):not(.lightbox):not(.popup):not(.dialog) {
    z-index: 1 !important;
    position: relative !important;
}

/* 15. La modale doit être par-dessus TOUT */
body.modal-open .devis-modal {
    z-index: 9999999 !important;
    position: fixed !important;
}

body.modal-open .devis-modal-overlay {
    z-index: 9999998 !important;
    position: fixed !important;
}

body.modal-open .devis-modal-box {
    z-index: 9999999 !important;
    position: relative !important;
}

body.modal-open .devis-modal-header {
    z-index: 9999999 !important;
    position: sticky !important;
}

body.modal-open .devis-modal-body {
    z-index: 9999999 !important;
    position: relative !important;
}

/* 16. Forcer les champs du formulaire à rester interactifs */
body.modal-open .devis-champ input,
body.modal-open .devis-champ textarea,
body.modal-open .devis-submit-btn,
body.modal-open .devis-modal-close,
body.modal-open .devis-programme-info,
body.modal-open .devis-champ label {
    z-index: 9999999 !important;
    position: relative !important;
}

/* 17. AJOUT - Garantir que les autres modals restent fonctionnels */
body.modal-open .modal:not(.devis-modal):not(.devis-modal-overlay):not(.devis-modal-box) {
    z-index: 999999 !important; /* Moins que 9999999 mais plus que le reste */
    position: fixed !important;
}

body.modal-open .lightbox,
body.modal-open .popup,
body.modal-open .dialog {
    z-index: 999998 !important; /* Juste en dessous des autres modals */
}