/**
 * =================================================================
 * STYLES AMÉLIORÉS POUR LA PAGE DE CRÉATION DE DEMANDE
 * =================================================================
 */
 body {
    min-height: 100vh; /* Le body prend au minimum 100% de la hauteur de l'écran */
}

.new-request-page {
    padding-top: 2rem;
    padding-bottom: 3rem;
    max-width: 1600px !important;
}

.new-request-page .request-category {
    margin-bottom: 3rem;
}

.new-request-page .category-header {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    padding: 1.25rem;
    background-color: #ffffff;
    border: 1px solid var(--bs-border-color);
    border-radius: var(--bs-border-radius);
    margin-bottom: 1.5rem;
}

.new-request-page .category-icon {
    font-size: 1.75rem;
    color: var(--bs-primary);
}

.new-request-page .category-title {
    font-size: 1.25rem;
    font-weight: 600;
    margin: 0;
}

.new-request-page .category-subtitle {
    font-size: 0.9rem;
    color: #6c757d;
    margin: 0;
    margin-top: 0.25rem;
}

.request-card {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    background-color: #ffffff;
    padding: 1.5rem 2rem;
    border: 1px solid var(--bs-border-color);
    border-radius: var(--bs-border-radius);
    height: 100%;
    cursor: pointer;
    transition: all 0.2s ease-in-out;
}

.request-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 25px rgba(var(--bs-primary-rgb), 0.1);
    border-color: rgba(var(--bs-primary-rgb), 0.3);
}

.request-card .card-icon-wrapper {
    font-size: 2.5rem;
    color: var(--bs-primary);
    flex-shrink: 0;
}

.request-card .card-content {
    flex-grow: 1;
}

.request-card .card-title {
    font-size: 1.1rem;
    font-weight: 600;
    margin-bottom: 0.5rem;
}

.request-card .card-description {
    font-size: 0.875rem;
    color: #6c757d;
    line-height: 1.5;
}

.request-card .card-arrow {
    font-size: 1.25rem;
    color: #ced4da; /* Gris clair */
    transition: transform 0.2s ease, color 0.2s ease;
}

.request-card:hover .card-arrow {
    transform: translateX(5px);
    color: var(--bs-primary);
}

/*
 * ===============================================================
 * Style pour les Cartes d'Information Modernes
 * ===============================================================
 */
.guidance-cards {
    margin-bottom: 2.5rem;
}

.info-card {
    background-color: #ffffff;
    padding: 1rem;
    border-radius: var(--bs-border-radius);
    border: 1px solid var(--bs-border-color);
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
    gap: 1rem; /* Espace entre l'icône et le texte */
    height: 100%;
}

/* La bordure latérale colorée */
.info-card-info {
    border-left: 5px solid var(--bs-info);
}
.info-card-warning {
    border-left: 5px solid var(--bs-warning);
}

/* L'icône */
.info-card i {
    font-size: 1.5rem;
    margin-top: 0.1rem; /* Petit ajustement pour l'alignement vertical */
}
.info-card-info i {
    color: var(--bs-info);
}
.info-card-warning i {
    color: var(--bs-warning);
}

/* Le texte */
.info-card strong {
    font-weight: 600;
}
.info-card p {
    font-size: 0.875rem;
    color: #6c757d;
}
.info-card .alert-link {
    font-weight: 600;
    text-decoration: none;
}

/* On retire le fond du header de catégorie pour un look plus intégré */
.new-request-page .category-header {
    background-color: transparent;
    border: none;
    padding: 0;
    margin-bottom: 1.5rem;
    border-bottom: 1px solid var(--bs-border-color);
    padding-bottom: 1rem;
}

/* On rend le titre de la catégorie plus imposant */
.new-request-page .category-title {
    font-size: 1.5rem;
}

/* On donne plus de "vie" à la carte au survol */
.request-card:hover {
    transform: translateY(-5px) scale(1.02);
    box-shadow: 0 10px 30px rgba(var(--bs-primary-rgb), 0.15); /* Ombre plus prononcée */
    border-color: rgba(var(--bs-primary-rgb), 0.4);
}

/* On fait réagir la flèche plus distinctement */
.request-card .card-arrow {
    opacity: 0.5; /* Flèche discrète par défaut */
    transition: all 0.3s ease;
}
.request-card:hover .card-arrow {
    opacity: 1;
    transform: translateX(5px);
    color: var(--bs-primary);
}

/*
 * ===============================================================
 * En-tête de Page Épuré et Moderne
 * ===============================================================
 */

/* Conteneur pour l'en-tête de page */
.page-header-section {
    padding: 2.5rem 0; /* Espace vertical généreux */
    margin-bottom: 2rem; /* Espace avant le début du contenu */
    border-bottom: 1px solid var(--bs-border-color); 
    max-width: 1600px;
    margin: auto;/* Ligne de séparation subtile */
}

/* Titre principal de la page */
.page-header-section h1 {
    font-size: 2rem; /* Plus grand pour plus d'impact */
    font-weight: 700;
    margin: 0;
}

/* Sous-titre descriptif */
.page-header-section .lead {
    font-size: 1.1rem;
    margin-top: 0.5rem;
    margin-bottom: 0;
}

/*
 * ===============================================================
 * Canva
 * ===============================================================
 */


#formOffcanvas {
    --bs-offcanvas-bg: var(--bs-body-bg);
    --bs-offcanvas-border-color: var(--bs-border-color);
    width: 40vw !important;
    max-width: 1400px !important
}

.offcanvas-header,
#formOffcanvas .offcanvas-header {
    flex-shrink: 0;
}

.offcanvas#formOffcanvas {
    background-color: #fff !important;
}

#formOffcanvasBody {
    flex-grow: 1 !important;
    padding: 0;
    display: flex;
    min-height: 0;
    justify-content: center;
}


#formOffcanvasBody > .row {
    flex-grow: 1;
    margin: 0;
    min-height: 0;
    flex-wrap: nowrap;
}

/* 5. Le reste des styles pour les colonnes internes (pas besoin de changer) */
.offcanvas-main-content {
    flex: 2;
    min-width: 0;
    display: flex;
    flex-direction: column;
    border-right: 1px solid var(--bs-border-color);
}

/* --- STYLES POUR LE FORMULAIRE DE RÉPONSE DANS L'OFFCANVAS --- */
/* Conteneur global du formulaire */
#offcanvas-reply-container {
    background-color: #ffffff;
    box-shadow: 0 -2px 10px rgba(99, 115, 129, 0.08);
}

/* On retire le titre "Ajouter une réponse" de la balise <label> pour le styliser séparément */
#new-request-form .form-label.fw-bold {
    font-size: 0.8rem;
    color: var(--bs-body-color);
    margin-bottom: 1rem;
}

#new-request-form .btn-filter-custom {
    font-size: 0.8rem;
}

/* Style général pour les champs de formulaire */
#new-request-form .form-control {
    background-color: var(--bs-tertiary-bg); /* Fond gris très clair */
    border: 1px solid var(--bs-border-color);
    font-size: 0.7rem;
    padding: 0.75rem;
    transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
}

#new-request-form .form-control::placeholder {
    color: #99a5b5;
}

#new-request-form .form-control:focus {
    background-color: #ffffff;
    border-color: rgba(var(--bs-primary-rgb), 0.5);
    box-shadow: 0 0 0 3px rgba(var(--bs-primary-rgb), 0.15);
}

/* Style spécifique pour le champ d'upload de fichier */
#new-request-form input[type="file"].form-control {
    color: #6c757d;
}

/* Style du bouton d'envoi principal */
#new-request-form .btn-primary {
    --bs-btn-bg: var(--bs-primary);
    --bs-btn-border-color: var(--bs-primary);
    --bs-btn-hover-bg: #044a56; /* Une version légèrement plus foncée de votre couleur primaire */
    --bs-btn-hover-border-color: #044a56;
    --bs-btn-active-bg: #033842;
    --bs-btn-active-border-color: #033842;
    --bs-btn-focus-shadow-rgb: var(--bs-primary-rgb);
    
    font-weight: 600;
    padding: 0.6rem 1.2rem;
}

/**
 * =================================================================
 * STYLE MODERNE POUR LES FORMULAIRES DANS L'OFFCANVAS
 * =================================================================
 */

/* On donne un peu d'air au corps du formulaire */
#formOffcanvasBody {
    padding: 1.5rem;
}

/* Style des labels (titres de champ) */
#formOffcanvasBody .form-label {
    font-weight: 600;
    margin-bottom: 0.75rem;
}

/* Style général pour les champs de formulaire (input, textarea, select) */
#formOffcanvasBody .form-control,
#formOffcanvasBody .form-select,
.select2-selection {
    background-color: var(--bs-tertiary-bg); /* Fond gris très clair */
    border: 2px solid transparent; /* Bordure transparente par défaut */
    font-size: 0.7rem;
    padding: 0.75rem 1rem;
    border-radius: var(--bs-border-radius);
    transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
}

#formOffcanvasBody .form-control::placeholder {
    color: #99a5b5;
}

/* Effet au focus : bordure colorée et ombre subtile */
#formOffcanvasBody .form-control:focus,
#formOffcanvasBody .form-select:focus,
.select2-selection{
    background-color: #ffffff;
    border-color: rgba(var(--bs-primary-rgb), 0.5);
    box-shadow: 0 0 0 3px rgba(var(--bs-primary-rgb), 0.1);
}

/* Style du bouton d'envoi pour correspondre au thème */
#new-request-form .btn-primary {
    --bs-btn-bg: var(--bs-primary);
    --bs-btn-border-color: var(--bs-primary);
    --bs-btn-hover-bg: #044a56;
    --bs-btn-hover-border-color: #044a56;
    --bs-btn-active-bg: #033842;
    --bs-btn-active-border-color: #033842;
    --bs-btn-focus-shadow-rgb: var(--bs-primary-rgb);
    font-weight: 600;
    padding: 0.75rem 1.5rem;
    font-size: 0.9rem;
}

 /* =================================================================
 * MISE EN PAGE FINALE POUR L'OFFCANVAS DE FORMULAIRE
 * =================================================================
 */

/* Le corps de l'offcanvas : aligné en haut par défaut, avec du padding */
#formOffcanvasBody {
    padding: 1.5rem;
    display: block; /* On revient à un affichage normal */
}

/* État de chargement : on active Flexbox SEULEMENT pour centrer le spinner */
#formOffcanvasBody.is-loading {
    display: flex;
    justify-content: center;
    align-items: center;
}

/* En-tête informatif à l'intérieur du formulaire */
#new-request-form .form-header {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    background-color: var(--bs-tertiary-bg);
    padding: 1.25rem;
    border-radius: var(--bs-border-radius);
    margin-bottom: 2rem;
    border: 1px solid var(--bs-border-color);
}

#new-request-form .form-header i {
    font-size: 1rem;
    color: var(--bs-primary);
    margin-top: 0.25rem;
}

#new-request-form .form-header h3 {
    font-size: 1rem;
    font-weight: 600;
    margin: 0 0 0.25rem 0;
}

#new-request-form .form-header p {
    font-size: 0.8rem;
    color: #6c757d;
    margin: 0;
    line-height: 1.5;
}


/* On garde les styles améliorés pour les champs et le bouton */
#new-request-form .form-label {
    font-weight: 600;
    margin-bottom: 0.75rem;
}

#new-request-form .form-control,
#new-request-form .form-select {
    background-color: var(--bs-tertiary-bg);
    border: 2px solid var(--bs-tertiary-bg); /* Bordure de la même couleur */
    font-size: 0.7rem;
    padding: 0.75rem 1rem;
    border-radius: var(--bs-border-radius);
    transition: all .15s ease-in-out;
}

/*
 * ===============================================================
 * Style pour la liste des tickets en cours dans le formulaire
 * ===============================================================
 */
.current-tickets-title {
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--bs-body-color);
    margin-bottom: 0.75rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--bs-border-color);
}

.current-tickets-list {
    list-style: none;
    padding-left: 0;
    font-size: 0.7rem;
}

.ticket-item {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.5rem 0;
}

.ticket-item-status {
    flex-shrink: 0;
}
.ticket-item-status .status-label.small {
    padding: 2px 8px;
    font-size: 10px;
}

.ticket-item-subject {
    flex-grow: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.ticket-item-subject a {
    text-decoration: none;
    font-weight: 500;
    color: var(--bs-primary);
}

.ticket-item-date {
    flex-shrink: 0;
    color: #6c757d;
    font-style: italic;
}

/* Conteneur principal qui cache le select original */
.custom-multi-select-wrapper {
    position: relative;
}

/* Le select original : on le rend invisible mais focusable */
.custom-multi-select-source {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%; /* Il prend toute la place du conteneur */
    opacity: 0; /* Complètement transparent */
    pointer-events: none; /* Ne capture pas les clics de la souris */
    z-index: 1; /* S'assure qu'il n'interfère pas (même si transparent) */
}

/* Zone où les tags sélectionnés apparaissent */
.custom-multi-select-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    padding: 0.75rem;
    background-color: var(--bs-tertiary-bg);
    border: 2px solid var(--bs-tertiary-bg);
    border-radius: var(--bs-border-radius);
    margin-bottom: 0.75rem;
    min-height: 50px;
}

/* Style d'un tag individuel */
.custom-tag {
    display: inline-flex;
    align-items: center;
    padding: 0.3rem 0.75rem;
    font-size: 0.8rem;
    font-weight: 500;
    color: var(--bs-primary);
    background-color: rgba(var(--bs-primary-rgb), 0.1);
    border: 1px solid rgba(var(--bs-primary-rgb), 0.2);
    border-radius: var(--bs-border-radius-pill);
}

/* La croix pour supprimer un tag */
.custom-tag .remove-tag {
    margin-left: 0.75rem;
    cursor: pointer;
    font-weight: 600;
    font-size: 1.1rem;
    line-height: 1;
    opacity: 0.6;
    transition: opacity 0.15s ease;
}
.custom-tag .remove-tag:hover {
    opacity: 1;
}

/* Style du menu déroulant pour ajouter des items */
.custom-multi-select-dropdown .dropdown-menu {
    max-height: 250px;
    overflow-y: auto;
    width: 100%;
}

/* =================================================================
   PERSONNALISATION DÉFINITIVE DE SELECT2 POUR LE THÈME DU FORMULAIRE
   ================================================================= */

/* 1. Conteneur principal : Assurer la responsivité (100% de la largeur)
--------------------------------------------------------------------- */
.select2-container--bootstrap-5 {
    width: 100% !important; /* Force la prise de toute la largeur disponible */
    font-size: 0.7rem; /* Correspond à votre .form-select */
}

/* 2. Champ principal (fermé) : État normal
   On copie EXACTEMENT les styles de vos .form-select
--------------------------------------------------------------------- */
.select2-container--bootstrap-5 .select2-selection {
    display: flex;
    align-items: center;
    width: 100%;
    height: auto;
    padding: 0.75rem 1rem !important;
    background-color: var(--bs-tertiary-bg) !important;
    border: none !important;
    border-radius: var(--bs-border-radius) !important;
    transition: all .15s ease-in-out !important;
    min-height: calc(1.5em + .75rem + 15px) !important;
    box-shadow: none !important;
}

.select2-search__field {
    margin: 0;
}

.select2-search__field:focus {
    box-shadow: none !important;
    border-color:#044a56 !important;
}
/* 3. Champ principal (fermé) : État Focus ou Ouvert
   On copie EXACTEMENT les styles de votre :focus
--------------------------------------------------------------------- */
.select2-container--bootstrap-5.select2-container--focus .select2-selection,
.select2-container--bootstrap-5.select2-container--open .select2-selection {
    background-color: #ffffff;
    border-color: rgba(var(--bs-primary-rgb), 0.5) !important; /* !important pour outrepasser les styles de Select2 */
}

/* 4. Le menu déroulant (ouvert)
   On lui donne un style cohérent avec le reste
--------------------------------------------------------------------- */
.select2-dropdown {
    background-color: #ffffff;
    border: 0px !important;
    border-radius: var(--bs-border-radius);
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
    font-size: 0.7rem !important;
}

#formOffcanvasBody .form-select option:hover {
    background-color: #044a56a8 !important; /* Utilise la couleur primaire de votre thème */
    color: white;                        /* Texte blanc pour un contraste parfait */
}

#formOffcanvasBody .form-select option:checked {
    background-color: #044a56; /* Un fond légèrement coloré */
    color: white;
    font-weight: 600;            /* En gras pour la distinguer */
}

.select2-dropdown .select2-results__options .select2-results__option.select2-results__option--selected, .select2-container--bootstrap-5 .select2-dropdown .select2-results__options .select2-results__option[aria-selected=true]:not(.select2-results__option--highlighted) {
 background-color: #044a56 !important;
}
/* 5. Le champ de recherche à l'intérieur du menu déroulant}
   On le style comme un de vos .form-control
--------------------------------------------------------------------- */
.select2-search--dropdown .select2-search__field {
    font-size: 0.8rem !important;
    padding: 0.75rem 1rem !important;
    background-color: var(--bs-tertiary-bg) !important;
    border: 2px solid var(--bs-tertiary-bg) !important;
    border-radius: var(--bs-border-radius) !important;
    margin: 0.5rem !important; /* Un peu d'air autour du champ */
    width: calc(100% - 1rem) !important; /* Prend toute la largeur moins les marges */
}
.select2-search--dropdown .select2-search__field:focus {
    outline: none;
    background-color: #ffffff;
    border-color: rgba(var(--bs-primary-rgb), 0.5);
    box-shadow: 0 0 0 3px rgba(var(--bs-primary-rgb), 0.1);
}

/* 6. Les options dans la liste
--------------------------------------------------------------------- */
.select2-results__option {
    padding: 0.75rem 1rem !important; /* Mêmes paddings pour un bon alignement */
    font-size: 0.8rem !important;
}
.select2-results__option--highlighted {
    background-color: var(--bs-primary);
    color: white;
}
.select2-results__option[aria-selected=true] {
    background-color: var(--bs-tertiary-bg);
    color: var(--bs-body-color);
    font-weight: 600;
}


/* =================================================================== */
/* V4 : CARTES STRUCTURÉES - ÉQUILIBRE ENTRE SOBRIÉTÉ ET VISIBILITÉ    */
/* =================================================================== */

/* --- 1. Style de Base : La Carte Structurée --- */
.request-card {
    display: flex;
    align-items: stretch; /* Essentiel pour que les deux colonnes aient la même hauteur */
    padding: 0; /* On retire le padding global pour le gérer en interne */
    background-color: #ffffff;
    border: 1px solid #E5E9F2;
    border-radius: 10px; /* Bords légèrement plus arrondis */
    box-shadow: 0 2px 8px rgba(99, 115, 129, 0.08);
    transition: all 0.2s ease-in-out;
    cursor: pointer;
    text-align: left;
    overflow: hidden;
    position: relative;/* Crucial pour que les arrondis s'appliquent aux enfants */
}

/* --- 2. La Bande d'Icône Colorée (Partie Gauche) --- */
.request-card .card-icon-wrapper {
    width: 90px;
    flex-shrink: 0; /* Empêche la bande de se rétrécir */
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 0;
    transition: background-color 0.2s ease;
}

.request-card .card-icon-wrapper i {
    font-size: 28px;
    color: #ffffff; /* L'icône sera toujours blanche pour un contraste parfait */
}

/* --- 3. La Zone de Contenu (Partie Droite) --- */
/* On doit cibler le conteneur du texte. L'élément .card-content est parfait. */
.request-card .card-content {
    flex-grow: 1;
    padding: 1.5rem 1.75rem;
    position: relative; /* Pour positionner la flèche */
}

.request-card .card-title {
    font-size: 1.15rem;
    font-weight: 600;
    margin: 0 0 0.35rem 0;
    color: #212529;
    transition: color 0.2s ease;
}

.request-card .card-description {
    font-size: 0.9rem;
    margin: 0;
    color: #6c757d;
}

/* --- 4. La Flèche d'Action --- */
.request-card .card-arrow {
    position: absolute;
    top: 50%;
    right: 1.75rem;
    transform: translateY(-50%);
    font-size: 1.2rem;
    color: #adb5bd;
    transition: transform 0.2s ease, color 0.2s ease;
}

/* --- 5. Effet de Survol Raffiné --- */
.request-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 6px 20px rgba(99, 115, 129, 0.12);
    border-color: #d1d9e4;
}

.request-card:hover .card-arrow {
    transform: translateY(-50%) translateX(5px);
}

/* --- 6. Assignation des Couleurs par Type --- */

/* Type: Incident -> Couleur Orange/Warning */
.request-card[data-form-title="Déclarer un incident"] .card-icon-wrapper {
    background-color: var(--bs-warning);
}
.request-card[data-form-title="Déclarer un incident"]:hover .card-title {
    color: var(--bs-warning);
}
.request-card[data-form-title="Déclarer un incident"]:hover .card-arrow {
    color: var(--bs-warning);
}

/* Type: Question -> Couleur Bleue/Info */
.request-card[data-form-title="Demande générale"] .card-icon-wrapper {
    background-color: var(--bs-info);
}
.request-card[data-form-title="Demande générale"]:hover .card-title {
    color: var(--bs-info);
}
.request-card[data-form-title="Demande générale"]:hover .card-arrow {
    color: var(--bs-info);
}

/* Type: Intervention -> Couleur Primaire/Principale */
.request-card[data-form-title="Dépannage SAV"] .card-icon-wrapper {
    background-color: var(--bs-primary);
}
.request-card[data-form-title="Dépannage SAV"]:hover .card-title {
    color: var(--bs-primary);
}
.request-card[data-form-title="Dépannage SAV"]:hover .card-arrow {
    color: var(--bs-primary);
}

.mobile-header-controls {
    display: none; /* Caché par défaut sur PC */
    padding: 10px 15px;
    background-color: #fff;
    border-bottom: 1px solid #f0f0f0;
    position: sticky;
    top: 0;
    z-index: 1050; /* Au-dessus du contenu */
}

/* ==========================================================================
   CSS MOBILE UNIFIÉ (OFFCANVAS + FILTRES + TABLEAU)
   ========================================================================== */

@media screen and (max-width: 768px) {

    /* --- 1. OFFCANVAS (FORMULAIRE) --- */
    
    /* Force l'Offcanvas à prendre tout l'écran */
    #formOffcanvas, 
    #ticketOffcanvas {
        width: 100% !important;
        max-width: 100vw !important;
        border-left: none !important;
        top: 0 !important;
        bottom: 0 !important;
        height: 100% !important;
    }

    /* Corps du formulaire : Scrollable et padding adapté */
    #formOffcanvasBody,
    #offcanvasTicketBody {
        display: block !important;
        padding: 15px !important;
        overflow-y: auto !important; /* Scroll vertical */
        height: calc(100% - 60px) !important; /* Laisse de la place pour le header */
        -webkit-overflow-scrolling: touch;
    }

    /* Grille interne (Row) : Une seule colonne */
    #formOffcanvasBody > .row,
    #offcanvasTicketBody > .row {
        margin: 0 !important;
        width: 100% !important;
        display: block !important;
    }
    
    .col-lg-9, .col-lg-3, .offcanvas-main-content, .offcanvas-sidebar {
        width: 100% !important;
        display: block !important;
        padding: 0 !important;
        border: none !important;
    }

    /* Empêche le zoom sur iPhone (Input size 16px) */
    #new-request-form .form-control,
    #new-request-form .form-select,
    .select2-container--bootstrap-5 .select2-selection {
        font-size: 16px !important; 
    }

    /* Safe Area en bas pour le bouton d'envoi */
    #offcanvas-reply-container,
    .btn-submit-reply {
        padding-bottom: calc(1rem + env(safe-area-inset-bottom)) !important;
        margin-bottom: 20px !important;
    }

    /* Cache le widget Zendesk (Chat) quand le formulaire est ouvert */
    .offcanvas.show ~ iframe#launcher {
        display: none !important; 
    }


    /* --- 2. HEADER DU CANVA (BOUTON RETOUR) --- */
    
    .mobile-header-controls {
        display: flex !important; /* Affiche la barre blanche */
        align-items: center;
        justify-content: flex-start;
        height: 50px;
        padding: 0 15px;
        border-bottom: 1px solid #eee;
        background: #fff;
    }

    .btn-mobile-back {
        background: transparent;
        border: none;
        font-size: 16px;
        font-weight: 600;
        display: flex;
        align-items: center;
        gap: 8px;
        color: #333;
    }


    /* --- 3. FILTRES (BOTTOM SHEET) --- */
    
    /* Transforme les menus déroulants en panneaux bas */
    .filter-dropdown-menu,
    #toolbar-left .dropdown .dropdown-menu {
        position: fixed !important;
        top: auto !important;
        bottom: 0 !important;
        left: 0 !important;
        right: 0 !important;
        width: 100% !important;
        max-height: 60vh !important;
        z-index: 2147483647 !important;
        margin: 0 !important;
        padding: 20px 0 !important;
        
        border-radius: 20px 20px 0 0 !important;
        border: none !important;
        background-color: #fff !important;
        box-shadow: 0 -10px 40px rgba(0,0,0,0.3) !important;
        
        transform: none !important; /* Annule le positionnement JS */
        
        overflow-y: auto !important;
        display: none; /* Caché par défaut */
    }

    /* Affiche le menu quand la classe .show est présente */
    .filter-dropdown-menu.show,
    #toolbar-left .dropdown-menu.show {
        display: block !important;
        animation: slideUp 0.3s ease-out;
    }

    @keyframes slideUp {
        from { transform: translateY(100%); }
        to { transform: translateY(0); }
    }

    /* Barre grise en haut du panneau pour "tirer" */
    .filter-dropdown-menu::before,
    #toolbar-left .dropdown-menu::before {
        content: '';
        display: block;
        width: 40px;
        height: 5px;
        background-color: #e0e0e0;
        border-radius: 3px;
        margin: -10px auto 15px auto;
    }

    /* Items du menu plus gros pour le doigt */
    .filter-dropdown-menu .dropdown-item,
    #toolbar-left .dropdown-item {
        padding: 15px 20px !important;
        font-size: 16px !important;
        border-bottom: 1px solid #f8f9fa;
    }
}