/* ────────────────────────────────────────────────────────────────────────────
   Mon petit cookie — Styles personnalisés
   ──────────────────────────────────────────────────────────────────────────── */

/* === Animation : slide depuis le bas === */
@keyframes mpc-slide-up {
    from { opacity: 0; transform: translateY(24px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ─── Base ────────────────────────────────────────────────────────────────── */

div#tarteaucitronServices {
    box-shadow: none !important;
}

#tarteaucitronRoot {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif !important;
    color: var(--mpc-color-text) !important;
    line-height: 1.6 !important;
    -webkit-font-smoothing: antialiased !important;
    -moz-osx-font-smoothing: grayscale !important;
}

/* Overlay — très subtil en mode popup coin (le coin ne bloque pas la page) */
#tarteaucitronBack {
    background: rgba(0, 0, 0, 0.25) !important;
    transition: all 0.3s ease !important;
    z-index: 2147483644 !important;
}

[data-mpc-style="popup"] #tarteaucitronBack {
    background: transparent !important;
    pointer-events: none !important;
}

div#tarteaucitronRoot.tarteaucitronBeforeVisible:before {
    background: black !important;
}

/* ─── Popup principale — card avec en-tête colorée ───────────────────────── */

#tarteaucitronAlertBig {
    background: var(--mpc-color-background) !important;
    border: 1px solid var(--mpc-border-color) !important;
    color: var(--mpc-color-text) !important;
    font-size: 15px !important;
    line-height: 1.6 !important;
}

#tarteaucitronAlertBig :focus {
    outline-color: var(--mpc-color-primary) !important;
    outline-offset: 1px !important;
}

/* En-tête colorée (strip vert lime) */
[data-mpc-style="popup"] #tarteaucitronAlertBig {
    position: fixed !important;
    overflow: hidden !important;
    padding: 28px !important;
    padding-top: 64px !important;
    border-radius: var(--mpc-radius, 20px) !important;
    background: var(--mpc-color-background) !important;
    border: 1px solid var(--mpc-border-color) !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12), 0 2px 8px rgba(0, 0, 0, 0.06) !important;
    color: var(--mpc-color-text) !important;
    z-index: 2147483645 !important;
    animation: mpc-slide-up 0.4s cubic-bezier(0.22, 1, 0.36, 1) both !important;
}

[data-mpc-style="popup"] #tarteaucitronAlertBig::before {
    content: '🍪  Certifié par Mon petit cookie';
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    padding: 14px 22px !important;
    background: var(--mpc-color-accept) !important;
    font-weight: 700 !important;
    font-size: 13px !important;
    letter-spacing: 0.03em !important;
    color: #1a2e05 !important;
    z-index: 1 !important;
    display: block !important;
}

/* Bouton × au-dessus du header coloré */
[data-mpc-style="popup"] #tarteaucitronCloseCross {
    z-index: 2 !important;
    top: 8px !important;
    right: 12px !important;
    width: 30px !important;
    height: 30px !important;
    background: rgba(0, 0, 0, 0.12) !important;
    border: none !important;
    color: #1a2e05 !important;
}

[data-mpc-style="popup"] #tarteaucitronCloseCross:hover {
    background: rgba(0, 0, 0, 0.2) !important;
    transform: scale(1.05) !important;
}

#tarteaucitronCloseCross span {
    color: inherit !important;
}

/* Popup bas gauche */
[data-mpc-style="popup"][data-mpc-position="bottomLeft"] #tarteaucitronAlertBig {
    bottom: 24px !important;
    left: 24px !important;
    right: auto !important;
    top: auto !important;
    transform: none !important;
    max-width: 380px !important;
    width: calc(100vw - 48px) !important;
    min-width: 300px !important;
}

/* Popup bas droite */
[data-mpc-style="popup"][data-mpc-position="bottomRight"] #tarteaucitronAlertBig {
    bottom: 24px !important;
    right: 24px !important;
    left: auto !important;
    top: auto !important;
    transform: none !important;
    max-width: 380px !important;
    width: calc(100vw - 48px) !important;
    min-width: 300px !important;
}

/* Popup centré */
[data-mpc-style="popup"][data-mpc-position="middle"] #tarteaucitronAlertBig {
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    right: auto !important;
    bottom: auto !important;
    max-width: 560px !important;
    width: 90vw !important;
    min-width: 320px !important;
    animation: none !important;
}

#tarteaucitronDisclaimerAlert {
    margin-bottom: 1.25rem !important;
    font-size: 14px !important;
    line-height: 1.7 !important;
    color: var(--mpc-color-text) !important;
    opacity: 0.85 !important;
}

#tarteaucitronPrivacyUrlDialog,
button#tarteaucitronPrivacyUrl {
    color: var(--mpc-color-text) !important;
    font-size: 0.7rem !important;
    opacity: 0.6 !important;
}

#tarteaucitronPrivacyUrlDialog:hover,
button#tarteaucitronPrivacyUrl:hover {
    opacity: 1 !important;
    text-decoration: underline !important;
}

/* Espacement boutons coin */
[data-mpc-style="popup"][data-mpc-position^="bottom"] #tarteaucitronAlertBig #tarteaucitronPersonalize,
[data-mpc-style="popup"][data-mpc-position^="bottom"] #tarteaucitronAlertBig #tarteaucitronPersonalize2,
[data-mpc-style="popup"][data-mpc-position^="bottom"] #tarteaucitronAlertBig #tarteaucitronCloseAlert,
[data-mpc-style="popup"][data-mpc-position^="bottom"] #tarteaucitronAlertBig #tarteaucitronAllDenied2 {
    margin: 4px 2px !important;
}

/* Bouton Personnaliser pleine largeur dans popup coin */
[data-mpc-style="popup"][data-mpc-position="bottomLeft"] #tarteaucitronCloseAlert,
[data-mpc-style="popup"][data-mpc-position="bottomRight"] #tarteaucitronCloseAlert {
    width: 100% !important;
    margin: 10px 0 0 !important;
}

/* Responsive mobile : bottom sheet */
@media screen and (max-width: 510px) {
    [data-mpc-style="popup"][data-mpc-position^="bottom"] #tarteaucitronAlertBig {
        bottom: 0 !important;
        left: 0 !important;
        right: 0 !important;
        max-width: none !important;
        min-width: auto !important;
        width: 100% !important;
        border-radius: var(--mpc-radius, 20px) var(--mpc-radius, 20px) 0 0 !important;
        padding: 24px 20px 32px !important;
        padding-top: 64px !important;
    }

    [data-mpc-style="popup"][data-mpc-position^="bottom"] #tarteaucitronPersonalize,
    [data-mpc-style="popup"][data-mpc-position^="bottom"] #tarteaucitronPersonalize2,
    [data-mpc-style="popup"][data-mpc-position^="bottom"] #tarteaucitronCloseAlert,
    [data-mpc-style="popup"][data-mpc-position^="bottom"] #tarteaucitronAllDenied2 {
        display: block !important;
        width: 100% !important;
        margin: 6px 0 !important;
    }
}

/* ─── Style BAND ──────────────────────────────────────────────────────────── */

[data-mpc-style="band"] #tarteaucitronAlertBig {
    position: fixed !important;
    left: 0 !important;
    right: 0 !important;
    max-width: 100% !important;
    width: 100% !important;
    padding: 15px 40px !important;
    margin: 0 !important;
    border-radius: 0 !important;
    transform: none !important;
    z-index: 2147483647 !important;
    display: flex !important;
    align-items: baseline !important;
    justify-content: center !important;
    text-align: center !important;
    min-height: auto !important;
    overflow: visible !important;
}

[data-mpc-style="band"] #tarteaucitronAlertBig::before {
    display: none !important;
}

[data-mpc-style="band"][data-mpc-orientation="bottom"] #tarteaucitronAlertBig {
    bottom: 0 !important;
    top: auto !important;
}

[data-mpc-style="band"][data-mpc-orientation="top"] #tarteaucitronAlertBig {
    top: 0 !important;
    bottom: auto !important;
}

[data-mpc-style="band"] #tarteaucitronAlertBig #tarteaucitronDisclaimerAlert {
    margin-bottom: 0 !important;
    font-size: 14px !important;
    max-width: 800px !important;
    margin-right: 20px !important;
    opacity: 1 !important;
}

[data-mpc-style="band"] #tarteaucitronAlertBig #tarteaucitronPrivacyUrl {
    margin-left: 15px;
}

[data-mpc-style="band"] #tarteaucitronAlertBig .tarteaucitronCTAButton {
    margin: 0 8px !important;
}

[data-mpc-style="band"] #tarteaucitronCloseCross {
    right: 120px !important;
    top: 30% !important;
    width: 32px !important;
    height: 32px !important;
    background: var(--mpc-color-surface) !important;
    border: 1px solid var(--mpc-border-color) !important;
    color: var(--mpc-color-text) !important;
    z-index: 1 !important;
}

/* ─── Boutons ─────────────────────────────────────────────────────────────── */

#tarteaucitronAlertBig #tarteaucitronPersonalize,
#tarteaucitronAlertBig #tarteaucitronPersonalize2,
#tarteaucitronAlertBig #tarteaucitronCloseAlert,
#tarteaucitronAlertBig #tarteaucitronAllDenied2 {
    padding: 13px 20px !important;
    min-height: 46px !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    letter-spacing: 0.01em !important;
    border-radius: var(--mpc-radius-small, 12px) !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-decoration: none !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    box-sizing: border-box !important;
    min-width: 120px !important;
    text-align: center !important;
    border: none !important;
}

/* Tout accepter — vert lime, texte sombre */
#tarteaucitronAlertBig #tarteaucitronPersonalize,
#tarteaucitronAlertBig #tarteaucitronPersonalize2 {
    background: var(--mpc-color-accept) !important;
    color: #1a2e05 !important;
}

#tarteaucitronAlertBig #tarteaucitronPersonalize:hover,
#tarteaucitronAlertBig #tarteaucitronPersonalize2:hover {
    filter: brightness(0.92) !important;
    transform: translateY(-1px) !important;
}

/* Tout refuser — orange, texte blanc */
#tarteaucitronAlertBig #tarteaucitronAllDenied2 {
    background: var(--mpc-color-denied) !important;
    color: #fff !important;
}

#tarteaucitronAlertBig #tarteaucitronAllDenied2:hover {
    filter: brightness(0.92) !important;
    transform: translateY(-1px) !important;
}

/* Personnaliser — contour bleu pastel */
#tarteaucitronAlertBig #tarteaucitronCloseAlert {
    background: transparent !important;
    color: var(--mpc-color-text) !important;
    border: 2px solid var(--mpc-color-primary) !important;
    opacity: 0.85 !important;
    font-size: 13px !important;
}

#tarteaucitronAlertBig #tarteaucitronCloseAlert:hover {
    background: var(--mpc-color-primary) !important;
    color: var(--mpc-color-text) !important;
    opacity: 1 !important;
    transform: translateY(-1px) !important;
}

/* ─── Panneau de gestion — positionné en coin (même que la popup) ─────────── */

[data-mpc-style="popup"][data-mpc-position="bottomLeft"] #tarteaucitron,
[data-mpc-style="popup"][data-mpc-position="bottomRight"] #tarteaucitron {
    position: fixed !important;
    max-width: 380px !important;
    width: calc(100vw - 48px) !important;
    min-width: 300px !important;
    max-height: 72vh !important;
    bottom: 24px !important;
    top: auto !important;
    margin: 0 !important;
    border-radius: var(--mpc-radius, 20px) !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
    z-index: 2147483647 !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12), 0 2px 8px rgba(0, 0, 0, 0.06) !important;
    animation: mpc-slide-up 0.35s cubic-bezier(0.22, 1, 0.36, 1) both !important;
    background: var(--mpc-color-background) !important;
    border: 1px solid var(--mpc-border-color) !important;
}

[data-mpc-style="popup"][data-mpc-position="bottomLeft"] #tarteaucitron {
    left: 24px !important;
    right: auto !important;
}

[data-mpc-style="popup"][data-mpc-position="bottomRight"] #tarteaucitron {
    right: 24px !important;
    left: auto !important;
}

/* Liste de services : scrollable */
[data-mpc-style="popup"][data-mpc-position="bottomLeft"] #tarteaucitronServices,
[data-mpc-style="popup"][data-mpc-position="bottomRight"] #tarteaucitronServices {
    flex: 1 1 auto !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    padding: 8px 12px !important;
    background: var(--mpc-color-background) !important;
    border-radius: 0 !important;
}

/* Bouton Enregistrer collé en bas */
[data-mpc-style="popup"][data-mpc-position="bottomLeft"] #tarteaucitron #tarteaucitronSaveButton,
[data-mpc-style="popup"][data-mpc-position="bottomRight"] #tarteaucitron #tarteaucitronSaveButton {
    border-radius: 0 0 var(--mpc-radius, 20px) var(--mpc-radius, 20px) !important;
    width: 100% !important;
    margin: 0 !important;
    flex-shrink: 0 !important;
}

/* Mobile : bottom sheet pleine largeur */
@media screen and (max-width: 510px) {
    [data-mpc-style="popup"][data-mpc-position="bottomLeft"] #tarteaucitron,
    [data-mpc-style="popup"][data-mpc-position="bottomRight"] #tarteaucitron {
        bottom: 0 !important;
        left: 0 !important;
        right: 0 !important;
        max-width: none !important;
        min-width: auto !important;
        width: 100% !important;
        max-height: 80vh !important;
        border-radius: var(--mpc-radius, 20px) var(--mpc-radius, 20px) 0 0 !important;
    }
}

/* ─── Panneau de configuration — styles internes ──────────────────────────── */

#tarteaucitron {
    background: var(--mpc-color-background) !important;
    border: none !important;
    border-radius: var(--mpc-radius) !important;
    box-shadow: var(--mpc-shadow-large) !important;
    color: var(--mpc-color-text) !important;
}

#tarteaucitronServices {
    background: var(--mpc-color-background) !important;
    border-radius: var(--mpc-radius) !important;
    box-shadow: none !important;
}

.tarteaucitronLine {
    background: var(--mpc-color-surface) !important;
    border: 1px solid var(--mpc-border-color) !important;
    border-radius: var(--mpc-radius-small) !important;
    margin: 0.5rem 0 !important;
    padding: 1rem !important;
    transition: background 0.15s ease !important;
}

.tarteaucitronLine:hover {
    background: var(--mpc-color-surface-hover) !important;
}

.tarteaucitronH1 {
    font-size: 22px !important;
    font-weight: 700 !important;
    color: var(--mpc-color-text) !important;
    margin-bottom: 0.75rem !important;
    padding: 16px 20px 0 !important;
}

.tarteaucitronH2, .tarteaucitronH3 {
    font-weight: 600 !important;
    font-size: 13px !important;
    color: var(--mpc-color-text) !important;
    margin-bottom: 0.5rem !important;
    text-transform: uppercase !important;
    letter-spacing: 0.04em !important;
    opacity: 0.6 !important;
    padding: 8px 8px 0 !important;
}

.tarteaucitronAllow, .tarteaucitronDeny {
    background: var(--mpc-color-surface) !important;
    border-radius: var(--mpc-radius-small) !important;
    color: var(--mpc-color-text) !important;
    padding: 7px 12px !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    transition: all 0.15s ease !important;
    border: 1px solid var(--mpc-border-color) !important;
}

.tarteaucitronAllow:hover, .tarteaucitronDeny:hover {
    background: var(--mpc-color-surface-hover) !important;
}

.tarteaucitronIsAllowed .tarteaucitronAllow {
    background: var(--mpc-color-accept) !important;
    border-color: var(--mpc-color-accept) !important;
    color: #1a2e05 !important;
}

.tarteaucitronIsDenied .tarteaucitronDeny {
    background: var(--mpc-color-denied) !important;
    border-color: var(--mpc-color-denied) !important;
    color: #fff !important;
}

/* Bouton fermer le panneau (×) */
#tarteaucitronClosePanel {
    background: transparent !important;
    color: var(--mpc-color-text) !important;
    border: none !important;
    border-radius: 50% !important;
    padding: 0 !important;
    font-size: 0 !important;
    transition: all 0.2s ease !important;
    cursor: pointer !important;
    position: absolute !important;
    right: 12px !important;
    top: 12px !important;
    z-index: 10 !important;
    width: 28px !important;
    height: 28px !important;
    min-width: 28px !important;
    min-height: 28px !important;
    max-width: 28px !important;
    max-height: 28px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    opacity: 0.6 !important;
}

#tarteaucitronClosePanel:before {
    content: '×' !important;
    font-size: 20px !important;
    font-weight: bold !important;
    line-height: 1 !important;
    display: flex !important;
    text-indent: 0 !important;
}

#tarteaucitronClosePanel:hover {
    opacity: 1 !important;
    background: var(--mpc-color-surface) !important;
}

/* Bouton Enregistrer */
#tarteaucitronSaveButton {
    background: var(--mpc-color-accept) !important;
    color: #1a2e05 !important;
    border: none !important;
    border-radius: var(--mpc-radius-small) !important;
    padding: 14px 28px !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    width: 100% !important;
}

#tarteaucitronSaveButton:hover {
    filter: brightness(0.92) !important;
}

/* Fonds transparents pour les éléments internes */
#tarteaucitron,
#tarteaucitronServices,
.tarteaucitronLine {
    background: var(--mpc-color-background) !important;
    background-color: var(--mpc-color-background) !important;
}

#tarteaucitron p,
#tarteaucitron div,
#tarteaucitronServices p,
#tarteaucitronServices div,
.tarteaucitronDetailsSupp,
.tarteaucitronDetails,
.tarteaucitronTitle + div,
.tarteaucitronLine p,
#tarteaucitronPrivacyUrlDialog,
.tarteaucitronLine div:not(.tarteaucitronName):not(.tarteaucitronListCookies):not(.tarteaucitronAllow):not(.tarteaucitronDeny) {
    background: transparent !important;
    background-color: transparent !important;
    color: var(--mpc-color-text) !important;
}

.tarteaucitronCheck::before,
.tarteaucitronCross::before {
    color: var(--mpc-color-text) !important;
}

.tarteaucitronIsAllowed .tarteaucitronCheck::before {
    color: #1a2e05 !important;
}

.tarteaucitronIsDenied .tarteaucitronCross::before {
    color: #fff !important;
}

#tarteaucitronAllAllowed:hover {
    background: var(--mpc-color-accept) !important;
    color: #1a2e05 !important;
}

#tarteaucitronAllDenied:hover {
    background: var(--mpc-color-denied) !important;
    color: #fff !important;
}

#tarteaucitronAllAllowed:hover .tarteaucitronCheck::before {
    color: #1a2e05 !important;
}

#tarteaucitronAllDenied:hover .tarteaucitronCross::before {
    color: #fff !important;
}