/* =========================================================================
   Cookies management - surcharge front
   Le thème Toolza force un style global sur tous les .modal (header orange,
   footer, etc.) via !important. On le neutralise ici uniquement pour les deux
   modals cookies, en reproduisant la maquette d'origine avec la charte MCB.
   ========================================================================= */

.ckmodal {
    color: #2b542c;
}

/* ----- Header : fond blanc, titre sombre à gauche, lien "Continuer sans
   accepter" à droite (et non un bandeau orange) ----- */
#cookie_management_modal .modal-header,
#cookie_management_detail_modal .modal-header {
    background-color: #ffffff !important;
    color: #212529 !important;
    border-bottom: 1px solid #dee2e6 !important;
    padding: 16px 24px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
}

#cookie_management_modal .modal-header .modal-title,
#cookie_management_detail_modal .modal-header .modal-title {
    color: #212529 !important;
    font-weight: 700;
    float: none !important;
    order: 1;
}

/* Le bouton "Continuer sans accepter" : rendu comme un simple lien souligné */
#cookie_management_modal .modal-header #btn_refuse_all,
#cookie_management_detail_modal .modal-header #btn_refuse_all {
    background: transparent !important;
    border: none !important;
    color: #212529 !important;
    text-decoration: underline !important;
    box-shadow: none !important;
    padding: 0 !important;
    float: none !important;
    order: 2;
    font-weight: 400;
}

#cookie_management_modal .modal-header #btn_refuse_all:hover,
#cookie_management_detail_modal .modal-header #btn_refuse_all:hover {
    color: #E94E1B !important;
}

/* ----- Corps ----- */
#cookie_management_modal .modal-body,
#cookie_management_detail_modal .modal-body {
    padding: 24px !important;
    overflow-x: hidden !important;
}

#cookie_management_detail_modal .modal-body {
    max-height: 65vh;
    overflow-y: auto;
}

/* Marge sous le bloc de texte d'introduction (avant la 1re carte) */
#cookie_management_detail_modal .modal-body > .row:first-child {
    margin-bottom: 20px !important;
}

/* Liens dans le texte à la charte MCB */
#cookie_management_modal .modal-body a.text-primary,
#cookie_management_detail_modal .modal-body a.text-primary,
#cookie_management_detail_modal .modal-body a[data-toggle="collapse"] {
    color: #E94E1B !important;
}

/* Empêche les .row internes de déborder du modal (marges négatives Bootstrap) */
#cookie_management_modal .modal-body > .row,
#cookie_management_detail_modal .modal-body > .row,
#cookie_management_detail_modal .cookies_block {
    margin-left: 0 !important;
    margin-right: 0 !important;
}

/* Colonnes du corps alignées sur le padding du modal (pas de gouttière) */
#cookie_management_modal .modal-body > .row > [class*="col-"] {
    padding-left: 0 !important;
    padding-right: 0 !important;
}

/* ----- Cartes de catégories ----- */
#cookie_management_detail_modal .card {
    border: 1px solid #e0e0e0 !important;
    border-left-width: 6px !important;
    border-left-style: solid !important;
    border-radius: 6px !important;
    box-shadow: none !important;
}

/* Padding interne des cartes (le contenu ne doit pas coller à la bordure) */
#cookie_management_detail_modal .card .card-body {
    padding: 16px 20px !important;
}

/* Colonnes alignées sur le bord interne de la carte (pas de double gouttière) */
#cookie_management_detail_modal .card-body [class*="col-"] {
    padding-left: 0 !important;
    padding-right: 0 !important;
}

#cookie_management_detail_modal .card-body > .row {
    margin: 0 !important;
}

/* Ligne "titre + case à cocher" : titre à gauche, case alignée à droite */
#cookie_management_detail_modal .card-body .col-12 > .row {
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    margin: 0 !important;
}

#cookie_management_detail_modal .card-body .col-9 {
    flex: 1 1 auto !important;
    max-width: 100% !important;
    padding-left: 0 !important;
}

#cookie_management_detail_modal .card-body .col-3 {
    flex: 0 0 auto !important;
    width: auto !important;
    padding-right: 0 !important;
}

/* La case "Nécessaire" (Toujours actifs) garde son texte muet à droite */
#cookie_management_detail_modal .card.necessary .card-body .d-flex {
    gap: 12px;
}

#cookie_management_detail_modal .card.necessary {
    border-left-color: #f1aeb5 !important;
}

#cookie_management_detail_modal .card.recommended {
    border-left-color: #ffda6a !important;
}

#cookie_management_detail_modal .card.optional {
    border-left-color: #75b798 !important;
}

/* Texte des cartes en sombre (le thème colore l'héritage par défaut) */
#cookie_management_detail_modal .card .card-body,
#cookie_management_detail_modal .card .card-body h5,
#cookie_management_detail_modal .card .card-body label,
#cookie_management_detail_modal .card .card-body div,
#cookie_management_detail_modal .card .card-body p {
    color: #212529 !important;
}

/* Label de catégorie (Nécessaire / Recommandé / Optionel) en gris */
#cookie_management_detail_modal .card .card-body h6.font_s {
    color: #6c757d !important;
    text-transform: capitalize;
    font-size: 0.85rem;
    margin-bottom: 0.5rem;
}

/* Titre de la catégorie : un peu d'espace avant la description */
#cookie_management_detail_modal .card .card-body h5 {
    margin-bottom: 6px !important;
}

/* Léger espace avant le bloc des sous-cookies / "Tout afficher" */
#cookie_management_detail_modal .card .card-body .col-12.mt-3 {
    margin-top: 12px !important;
}

/* Petit espace entre les sous-cookies et le lien "Tout afficher" */
#cookie_management_detail_modal [id^="collapse_"].collapse {
    margin-bottom: 8px !important;
}

/* Annule les marges négatives des .row à l'intérieur du collapse
   (sinon les sous-cookies débordent à gauche de la carte) */
#cookie_management_detail_modal [id^="collapse_"] .row {
    margin-left: 0 !important;
    margin-right: 0 !important;
}

/* Lien "Tout afficher" reste à la charte MCB, collé au texte au-dessus */
#cookie_management_detail_modal .card .card-body a[data-toggle="collapse"] {
    color: #E94E1B !important;
    margin-top: 0 !important;
    display: inline-block;
}

/* Sous-cookies (Google Ads, Mouseflow…) : nom en gras, description dessous */
#cookie_management_detail_modal [id^="collapse_"] .bold {
    font-weight: 700 !important;
}

/* Espacement serré entre les sous-cookies */
#cookie_management_detail_modal [id^="collapse_"] > .row > .col-12 {
    margin-bottom: 6px;
}

#cookie_management_detail_modal [id^="collapse_"] > .row > .col-12:last-child {
    margin-bottom: 0;
}

/* Interligne resserré dans les descriptions */
#cookie_management_detail_modal .card .card-body label,
#cookie_management_detail_modal .card .card-body p {
    line-height: 1.35 !important;
}

/* Cases à cocher alignées sur la première ligne du texte (pas centrées) */
#cookie_management_detail_modal .card-body .col-12 > .row {
    align-items: flex-start !important;
}

#cookie_management_detail_modal .card-body .col-3 {
    padding-top: 2px !important;
}

/* Cases à cocher */
#cookie_management_detail_modal .cb_select_all,
#cookie_management_detail_modal .cb_select_unit {
    width: 18px;
    height: 18px;
    cursor: pointer;
    accent-color: #E94E1B;
}

/* ----- Footer / pieds de modal ----- */
#cookie_management_modal .border-top,
#cookie_management_detail_modal .border-top {
    padding: 16px 24px !important;
    text-align: right !important;
}

#cookie_management_modal .border-top .text-right,
#cookie_management_detail_modal .border-top .text-right {
    text-align: right !important;
    display: flex !important;
    justify-content: flex-end !important;
    gap: 10px !important;
}

/* "Tout accepter" : vert (action positive), conforme à la maquette */
#cookie_management_modal #btn_accept_all,
#cookie_management_detail_modal #btn_accept_all {
    background-color: #28a745 !important;
    border-color: #28a745 !important;
    color: #ffffff !important;
}

/* "Gestion des cookies" / "Enregistrer" : gris secondaire */
#cookie_management_modal #btn_manage_cookies,
#cookie_management_detail_modal #btn_save_cookies_configuration {
    background-color: #ffffff !important;
    border: 1px solid #ced4da !important;
    color: #212529 !important;
}

#cookie_management_modal #btn_manage_cookies:hover,
#cookie_management_detail_modal #btn_save_cookies_configuration:hover {
    background-color: #f1f1f1 !important;
}

/* =========================================================================
   Responsive mobile (< 576px) : l'en-tête passait en flex-row, le titre
   (classe .h2) était comprimé par le lien "Continuer sans accepter" à droite
   et se cassait mot par mot. On empile en colonne : titre pleine largeur
   (police réduite) puis le lien en dessous. Le pied peut s'enrouler.
   ========================================================================= */
@media (max-width: 575.98px) {

    #cookie_management_modal .modal-header,
    #cookie_management_detail_modal .modal-header {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 8px !important;
        padding: 16px !important;
    }

    #cookie_management_modal .modal-header .modal-title,
    #cookie_management_detail_modal .modal-header .modal-title {
        font-size: 1.4rem !important;
        line-height: 1.25 !important;
        width: 100% !important;
    }

    #cookie_management_modal .modal-header #btn_refuse_all,
    #cookie_management_detail_modal .modal-header #btn_refuse_all {
        white-space: normal !important;
        text-align: left !important;
    }

    #cookie_management_modal .modal-body,
    #cookie_management_detail_modal .modal-body {
        padding: 16px !important;
    }

    /* Pied : un bouton par ligne, pleine largeur, dans les DEUX modales
       (uniforme quel que soit le libellé — sinon les boutons courts type
       "Enregistrer" tenaient à deux sur une ligne alors que "Gestion des
       cookies" passait seul). */
    #cookie_management_modal .border-top .text-right,
    #cookie_management_detail_modal .border-top .text-right {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 8px !important;
    }

    #cookie_management_modal .border-top .btn,
    #cookie_management_detail_modal .border-top .btn {
        width: 100% !important;
        margin: 0 !important;
    }
}