/* ==========================================================================
   Lumans Cookie Consent — override vanilla-cookieconsent v3 avec branding Lumans
   (cream + bordeaux + Cormorant/Louis George Cafe, modal centré compact ~440px)
   ========================================================================== */

#cc-main {
    /* Fond doré chaud Lumans + contenu adapté pour contraste lisible */
    --cc-bg: #c59d53;
    --cc-primary-color: #2a1a08;    /* texte principal : brun très foncé (contraste ~9:1 sur le doré) */
    --cc-secondary-color: #5a3e1a;  /* texte secondaire : brun foncé (contraste ~5:1) */

    /* Bouton primaire : bordeaux foncé, ressort fort sur le doré */
    --cc-btn-primary-bg: #600912;
    --cc-btn-primary-color: #fff;
    --cc-btn-primary-border-color: #600912;
    --cc-btn-primary-hover-bg: #4a0610;
    --cc-btn-primary-hover-color: #fff;
    --cc-btn-primary-hover-border-color: #4a0610;

    /* Bouton secondaire : outlined sombre pour lisibilité sur le doré */
    --cc-btn-secondary-bg: transparent;
    --cc-btn-secondary-color: #2a1a08;
    --cc-btn-secondary-border-color: #2a1a08;
    --cc-btn-secondary-hover-bg: rgba(42, 26, 8, 0.08);
    --cc-btn-secondary-hover-color: #2a1a08;
    --cc-btn-secondary-hover-border-color: #2a1a08;

    /* Toggles */
    --cc-toggle-on-bg: #600912;
    --cc-toggle-off-bg: #8b6e3b;    /* tonalité plus foncée du doré pour le off */
    --cc-toggle-on-knob-bg: #fff;
    --cc-toggle-off-knob-bg: #fff;
    --cc-toggle-readonly-bg: #a88147;
    --cc-toggle-readonly-knob-bg: #c59d53;

    /* Blocs de catégorie : fond crème pour ressortir du doré et garder la lisibilité */
    --cc-cookie-category-block-bg: #f9f5f0;
    --cc-cookie-category-block-border: #a88147;
    --cc-cookie-category-block-hover-bg: #fff;
    --cc-cookie-category-block-hover-border: #600912;
    --cc-cookie-category-expanded-block-bg: #f9f5f0;
    --cc-cookie-category-expanded-block-hover-bg: #fff;

    --cc-separator-border-color: #a88147;

    --cc-font-family: 'Louis George Cafe', 'Helvetica Neue', Arial, sans-serif;
    --cc-font-size: 14px;
    --cc-line-height: 1.5;

    --cc-border-radius: 12px;
    --cc-btn-border-radius: 8px;
    --cc-z-index: 99999;
}

#cc-main .cm__title,
#cc-main .pm__title,
#cc-main .pm__section-title {
    font-family: 'Cormorant Garamond', 'Times New Roman', serif !important;
    font-weight: 700 !important;
    letter-spacing: -0.2px;
}

/* Modal compact centré */
#cc-main .cm--box {
    max-width: 440px !important;
    border: 1px solid #8b6e3b; /* tonalité plus foncée du doré pour le contour */
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.18);
}
#cc-main .cm__body {
    padding: 24px;
}
#cc-main .cm__title {
    font-size: 22px !important;
    margin-bottom: 8px;
    color: #2a1a08; /* brun très foncé pour le titre */
}
#cc-main .cm__desc {
    font-size: 14px;
    color: #3a2510; /* brun foncé lisible sur le doré (contraste ~7:1) */
    line-height: 1.5;
    margin-bottom: 20px;
}
#cc-main .cm__btns {
    gap: 8px;
    flex-wrap: wrap;
}
#cc-main .cm__btn {
    font-weight: 600 !important;
    font-size: 14px !important;
    padding: 10px 16px !important;
    transition: background 0.15s ease, border-color 0.15s ease;
}
#cc-main .cm__btn[data-role="accept-all"] {
    flex: 1 1 100%;
    order: 1;
}
#cc-main .cm__btn[data-role="accept-necessary"] {
    flex: 1;
    order: 2;
}
#cc-main .cm__btn[data-role="show-preferencesModal"] {
    background: transparent !important;
    color: #3a2510 !important;
    border: none !important;
    text-decoration: underline;
    flex: 1;
    order: 3;
    padding: 10px 8px !important;
}
#cc-main .cm__btn[data-role="show-preferencesModal"]:hover {
    color: #600912 !important;
    background: transparent !important;
}

/* Preferences modal */
#cc-main .pm--box {
    max-width: 580px !important;
    border: 1px solid #8b6e3b;
}
#cc-main .pm__header {
    padding: 24px 24px 16px;
}
#cc-main .pm__title {
    font-size: 24px !important;
    color: #2a1a08;
}
#cc-main .pm__body {
    padding: 0 24px;
}
#cc-main .pm__section-title {
    font-size: 16px !important;
    color: #2a1a08;
}
#cc-main .pm__section-desc {
    font-size: 13px;
    color: #3a2510;
}
#cc-main .pm__footer {
    padding: 16px 24px 24px;
    border-top: 1px solid #a88147;
}

/* Lien dans la description (politique de confidentialité) — bordeaux contraste fort sur doré */
#cc-main a.cc__link,
#cc-main .cm__desc a,
#cc-main .pm__section-desc a {
    color: #600912 !important;
    text-decoration: underline;
    font-weight: 600;
}
#cc-main a.cc__link:hover,
#cc-main .cm__desc a:hover,
#cc-main .pm__section-desc a:hover {
    color: #2a1a08 !important;
    text-decoration: none;
}

/* Mobile : pop compacte centrée vraiment au milieu (style popup -10%).
   On force #cc-main à être un overlay flex pleine page qui centre la box. */
@media (max-width: 640px) {
    /* Overlay pleine page pour vraiment centrer la box au milieu */
    #cc-main {
        position: fixed !important;
        inset: 0 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        padding: 20px !important;
        z-index: 99999 !important;
        pointer-events: none; /* l'overlay lui-même ne bloque pas la page */
    }
    #cc-main .cm,
    #cc-main .cm-wrapper,
    #cc-main .cm--box,
    #cc-main .pm,
    #cc-main .pm-wrapper,
    #cc-main .pm--box {
        pointer-events: auto; /* la box reste interactive */
        position: relative !important;
        top: auto !important;
        left: auto !important;
        right: auto !important;
        bottom: auto !important;
        transform: none !important;
        margin: 0 auto !important;
    }
    /* Box compacte : max 320px (taille type popup promo -10%) */
    #cc-main .cm--box {
        width: 100% !important;
        max-width: 320px !important;
    }
    #cc-main .pm--box {
        width: 100% !important;
        max-width: 380px !important;
        max-height: 80vh !important;
        overflow-y: auto !important;
    }
    /* Padding interne réduit pour gagner de la place */
    #cc-main .cm__body {
        padding: 20px !important;
    }
    #cc-main .cm__title {
        font-size: 19px !important;
        margin-bottom: 6px !important;
    }
    #cc-main .cm__desc {
        font-size: 13px !important;
        margin-bottom: 14px !important;
        line-height: 1.4 !important;
    }
    /* Boutons : empilés, plus compacts */
    #cc-main .cm__btns {
        flex-direction: column;
        gap: 6px !important;
    }
    #cc-main .cm__btn {
        width: 100% !important;
        flex: 1 1 100% !important;
        padding: 11px 16px !important;
        font-size: 14px !important;
    }
}