/* Personnalisation Tarteaucitron.js - Thème MairesetCitoyens.fr */
/* UI Professionnelle - Simple et Épurée */

/* Couleurs du thème :
   - Bleu turquoise principal : #0099bb
   - Bleu foncé : #101932
   - Gris clair : #f5f7fa
*/

/* =============================================
   RESET ET BASE
   ============================================= */
#tarteaucitronRoot * {
    box-sizing: border-box !important;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !important;
}

/* =============================================
   BANDEAU DE CONSENTEMENT INITIAL (en bas)
   ============================================= */
#tarteaucitronAlertBig {
    background-color: #fff !important;
    border-top: 3px solid #0099bb !important;
    box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.12) !important;
    padding: 24px 32px !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 24px !important;
}

#tarteaucitronDisclaimerAlert {
    color: #101932 !important;
    font-size: 15px !important;
    line-height: 1.6 !important;
    max-width: 600px !important;
    text-align: left !important;
}

/* Conteneur des boutons du bandeau */
#tarteaucitronAlertBig .tarteaucitronAlertBigBottom {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 12px !important;
    justify-content: center !important;
}

/* Boutons du bandeau - style de base */
#tarteaucitronAlertBig button {
    border: none !important;
    border-radius: 8px !important;
    padding: 12px 24px !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
}

/* Bouton "Personnaliser" */
#tarteaucitronAlertBig #tarteaucitronPersonalize {
    background-color: #f5f7fa !important;
    color: #101932 !important;
    border: 1px solid #e1e5eb !important;
}

#tarteaucitronAlertBig #tarteaucitronPersonalize:hover {
    background-color: #e1e5eb !important;
}

/* Bouton "Tout accepter" bandeau */
#tarteaucitronAlertBig #tarteaucitronPersonalize2 {
    background-color: #0099bb !important;
    color: #fff !important;
}

#tarteaucitronAlertBig #tarteaucitronPersonalize2:hover {
    background-color: #007a99 !important;
}

/* Bouton "Tout refuser" bandeau */
#tarteaucitronAlertBig #tarteaucitronAllDenied2 {
    background-color: #fff !important;
    color: #101932 !important;
    border: 1px solid #101932 !important;
}

#tarteaucitronAlertBig #tarteaucitronAllDenied2:hover {
    background-color: #101932 !important;
    color: #fff !important;
}


/* =============================================
   BACKDROP / OVERLAY
   ============================================= */
#tarteaucitronBack {
    background-color: rgba(16, 25, 50, 0.5) !important;
    backdrop-filter: blur(4px) !important;
}

/* =============================================
   MODALE PRINCIPALE
   ============================================= */
#tarteaucitron {
    position: fixed !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    background-color: #fff !important;
    border: none !important;
    border-radius: 16px !important;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.2) !important;
    max-width: 480px !important;
    width: 92% !important;
    max-height: 90vh !important;
    overflow: hidden !important;
    flex-direction: column !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* =============================================
   EN-TÊTE DE LA MODALE
   ============================================= */
#tarteaucitronMainLineOffset {
    background-color: #fff !important;
    padding: 32px 28px 24px !important;
    position: relative !important;
    border-bottom: 1px solid #e1e5eb !important;
}

#tarteaucitronMainLineOffset.tarteaucitronLine.tarteaucitronMainLine {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    padding: 32px 28px 24px !important;
    background: #fff !important;
}

/* Titre principal */
#tarteaucitronMainLineOffset .tarteaucitronH1 {
    display: block !important;
    color: #101932 !important;
    font-size: 22px !important;
    font-weight: 700 !important;
    margin: 0 0 16px 0 !important;
    padding: 0 !important;
    text-align: left !important;
    order: 1 !important;
    width: 100% !important;
}

/* Zone d'information */
#tarteaucitronInfo,
#tarteaucitronMainLineOffset #tarteaucitronInfo {
    background-color: #f5f7fa !important;
    border: none !important;
    border-radius: 10px !important;
    margin: 0 0 20px 0 !important;
    padding: 16px !important;
    color: #4a5568 !important;
    font-size: 14px !important;
    line-height: 1.6 !important;
    text-align: left !important;
    order: 2 !important;
    width: 100% !important;
}

#tarteaucitronMainLineOffset #tarteaucitronInfo p {
    margin: 0 !important;
    color: #4a5568 !important;
    text-align: left !important;
}

#tarteaucitronMainLineOffset #tarteaucitronInfo br {
    display: none !important;
}

/* Lien politique de confidentialité */
#tarteaucitronPrivacyUrlDialog,
#tarteaucitronMainLineOffset #tarteaucitronPrivacyUrlDialog {
    background: none !important;
    border: none !important;
    color: #0099bb !important;
    text-decoration: none !important;
    cursor: pointer !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    padding: 0 !important;
    margin-top: 12px !important;
    display: inline-block !important;
}

#tarteaucitronPrivacyUrlDialog:hover,
#tarteaucitronMainLineOffset #tarteaucitronPrivacyUrlDialog:hover {
    text-decoration: underline !important;
}

/* Cacher éléments inutiles de l'en-tête */
#tarteaucitronMainLineOffset .tarteaucitronName,
#tarteaucitronMainLineOffset .tarteaucitronAsk,
#tarteaucitronMainLineOffset #tarteaucitronScrollbarAdjust,
.tarteaucitronMainLine .tarteaucitronH3,
#tarteaucitronAllAllowed,
#tarteaucitronAllDenied {
    display: none !important;
}

/* =============================================
   BOUTON FERMER
   ============================================= */
#tarteaucitronClosePanel {
    position: absolute !important;
    top: 16px !important;
    right: 16px !important;
    background-color: #f5f7fa !important;
    color: #4a5568 !important;
    border: none !important;
    font-size: 0 !important;
    font-weight: 400 !important;
    width: 36px !important;
    height: 36px !important;
    padding: 0 !important;
    cursor: pointer !important;
    border-radius: 50% !important;
    z-index: 100 !important;
    transition: all 0.2s ease !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    line-height: 1 !important;
}

#tarteaucitronClosePanel::before {
    content: "\00D7" !important;
    font-size: 24px !important;
    line-height: 1 !important;
    color: #4a5568 !important;
}

#tarteaucitronClosePanel:hover {
    background-color: #e1e5eb !important;
}

#tarteaucitronClosePanel:hover::before {
    color: #101932 !important;
}

/* =============================================
   ZONE DES SERVICES
   ============================================= */
#tarteaucitronServices {
    background-color: #fff !important;
    max-height: none !important;
    overflow: visible !important;
    padding: 0 !important;
    flex: 1 !important;
    display: flex !important;
    flex-direction: column !important;
}

#tarteaucitronServices .tarteaucitronBorder {
    flex: 1 !important;
    overflow-y: auto !important;
    max-height: 45vh !important;
    display: block !important;
    background: #fff !important;
    width: 100% !important;
}

/* Cacher éléments superflus */
#tarteaucitronServices .tarteaucitronDetails,
#tarteaucitron .tarteaucitronH2 {
    display: none !important;
}

/* Titres de catégories (analytics, etc.) */
#tarteaucitronServices .tarteaucitronTitle {
    background-color: #f5f7fa !important;
    color: #101932 !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    padding: 12px 28px !important;
    margin: 0 !important;
    border-bottom: 1px solid #e1e5eb !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
}

#tarteaucitronServices .tarteaucitronTitle button {
    background: none !important;
    border: none !important;
    color: #0099bb !important;
    font-size: 14px !important;
    cursor: pointer !important;
    padding: 0 !important;
}

/* Liste des services */
#tarteaucitronServices .tarteaucitronBorder > ul,
#tarteaucitronServices .tarteaucitronBorder > ul > li {
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
}

/* =============================================
   SERVICE INDIVIDUEL (Google Analytics)
   ============================================= */
#tarteaucitronServices .tarteaucitronLine {
    background-color: #fff !important;
    border-bottom: 1px solid #e1e5eb !important;
    padding: 20px 28px !important;
    margin: 0 !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 20px !important;
}

#tarteaucitronServices .tarteaucitronLine:last-child {
    border-bottom: none !important;
}

#tarteaucitronServices .tarteaucitronLine:hover {
    background-color: #fafbfc !important;
}

/* Nom du service */
#tarteaucitronServices .tarteaucitronLine .tarteaucitronName {
    flex: 1 !important;
    text-align: left !important;
}

#tarteaucitronServices .tarteaucitronLine .tarteaucitronH3 {
    color: #101932 !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    margin: 0 0 4px 0 !important;
    display: block !important;
    text-align: left !important;
}

#tarteaucitronServices .tarteaucitronLine .tarteaucitronStatusInfo {
    font-size: 13px !important;
    color: #718096 !important;
    margin-bottom: 6px !important;
    text-align: left !important;
    display: block !important;
}

/* Liens "En savoir plus" */
#tarteaucitronServices .tarteaucitronLine .tarteaucitronReadmoreInfo,
#tarteaucitronServices .tarteaucitronLine .tarteaucitronReadmoreOfficial {
    color: #0099bb !important;
    font-size: 12px !important;
    text-decoration: none !important;
    font-weight: 500 !important;
}

#tarteaucitronServices .tarteaucitronLine .tarteaucitronReadmoreInfo:hover,
#tarteaucitronServices .tarteaucitronLine .tarteaucitronReadmoreOfficial:hover {
    text-decoration: underline !important;
}

#tarteaucitronServices .tarteaucitronLine .tarteaucitronReadmoreSeparator {
    color: #cbd5e0 !important;
    font-size: 12px !important;
    margin: 0 6px !important;
}

/* Description des cookies obligatoires */
.tarteaucitronLine .tarteaucitronH4 {
    color: #718096 !important;
    font-size: 13px !important;
    font-weight: 400 !important;
    margin: 0 !important;
    line-height: 1.5 !important;
    text-align: left !important;
}

/* =============================================
   SWITCH TOGGLE MODERNE
   ============================================= */
#tarteaucitronServices .tarteaucitronLine .tarteaucitronAsk {
    position: relative !important;
    width: 52px !important;
    height: 28px !important;
    flex-shrink: 0 !important;
    display: block !important;
}

/* Cacher les boutons originaux */
#tarteaucitronServices .tarteaucitronLine .tarteaucitronAllow,
#tarteaucitronServices .tarteaucitronLine .tarteaucitronDeny {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    font-size: 0 !important;
    color: transparent !important;
    cursor: pointer !important;
    border-radius: 14px !important;
    transition: all 0.3s ease !important;
    background-color: transparent !important;
}

#tarteaucitronServices .tarteaucitronLine .tarteaucitronAllow {
    z-index: 2 !important;
}

#tarteaucitronServices .tarteaucitronLine .tarteaucitronDeny {
    z-index: 1 !important;
}

/* Track du switch */
#tarteaucitronServices .tarteaucitronLine .tarteaucitronAsk::before {
    content: "" !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 52px !important;
    height: 28px !important;
    background-color: #cbd5e0 !important;
    border-radius: 14px !important;
    transition: all 0.3s ease !important;
    z-index: 0 !important;
}

/* Knob du switch */
#tarteaucitronServices .tarteaucitronLine .tarteaucitronAsk::after {
    content: "" !important;
    position: absolute !important;
    top: 2px !important;
    left: 2px !important;
    width: 24px !important;
    height: 24px !important;
    background-color: #fff !important;
    border-radius: 50% !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15) !important;
    transition: all 0.3s ease !important;
    z-index: 3 !important;
    pointer-events: none !important;
}

/* État OFF */
#tarteaucitronServices .tarteaucitronLine.tarteaucitronIsDenied .tarteaucitronAsk::before {
    background-color: #cbd5e0 !important;
}

#tarteaucitronServices .tarteaucitronLine.tarteaucitronIsDenied .tarteaucitronAsk::after {
    left: 2px !important;
}

/* État ON */
#tarteaucitronServices .tarteaucitronLine.tarteaucitronIsAllowed .tarteaucitronAsk::before {
    background-color: #0099bb !important;
}

#tarteaucitronServices .tarteaucitronLine.tarteaucitronIsAllowed .tarteaucitronAsk::after {
    left: 26px !important;
}

/* Cacher les icônes */
#tarteaucitronServices .tarteaucitronCheck,
#tarteaucitronServices .tarteaucitronCross,
.tarteaucitronCheck,
.tarteaucitronCross {
    display: none !important;
}

/* État disabled */
#tarteaucitronServices .tarteaucitronLine .tarteaucitronAllow[disabled],
#tarteaucitronServices .tarteaucitronLine .tarteaucitronDeny[disabled] {
    cursor: not-allowed !important;
}

#tarteaucitronServices .tarteaucitronLine .tarteaucitronAsk:has(.tarteaucitronAllow[disabled])::before {
    background-color: #0099bb !important;
    opacity: 0.5 !important;
}

#tarteaucitronServices .tarteaucitronLine .tarteaucitronAsk:has(.tarteaucitronAllow[disabled])::after {
    left: 26px !important;
}

/* =============================================
   BOUTON ENREGISTRER
   ============================================= */
#tarteaucitronSave {
    background-color: #fff !important;
    padding: 20px 28px 28px !important;
    text-align: center !important;
    border-top: 1px solid #e1e5eb !important;
}

#tarteaucitronSaveButton {
    background-color: #0099bb !important;
    color: #fff !important;
    border: none !important;
    border-radius: 10px !important;
    padding: 14px 32px !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    width: 100% !important;
    max-width: 280px !important;
}

#tarteaucitronSaveButton:hover {
    background-color: #007a99 !important;
    box-shadow: 0 4px 12px rgba(0, 153, 187, 0.25) !important;
}

/* =============================================
   LIENS GÉNÉRAUX
   ============================================= */
#tarteaucitron a {
    color: #0099bb !important;
    text-decoration: none !important;
}

#tarteaucitron a:hover {
    text-decoration: underline !important;
}

/* =============================================
   SCROLLBAR PERSONNALISÉE
   ============================================= */
#tarteaucitronServices .tarteaucitronBorder::-webkit-scrollbar {
    width: 6px !important;
}

#tarteaucitronServices .tarteaucitronBorder::-webkit-scrollbar-track {
    background: #f5f7fa !important;
}

#tarteaucitronServices .tarteaucitronBorder::-webkit-scrollbar-thumb {
    background: #cbd5e0 !important;
    border-radius: 3px !important;
}

#tarteaucitronServices .tarteaucitronBorder::-webkit-scrollbar-thumb:hover {
    background: #0099bb !important;
}

/* =============================================
   ÉLÉMENTS MASQUÉS
   ============================================= */
#tarteaucitronPremium {
    display: none !important;
}

#tarteaucitronRoot #tac_title,
#tarteaucitronRoot .tac_visually-hidden {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

/* Fix direction du texte */
#tarteaucitronRoot,
#tarteaucitronRoot *,
#tarteaucitron,
#tarteaucitron * {
    writing-mode: horizontal-tb !important;
    text-orientation: mixed !important;
}

/* Liste des services */
#tarteaucitronServices ul {
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Message "Ce site n'utilise aucun cookie..." */
#tarteaucitronServices_mandatory .tarteaucitronLine:only-child,
#tarteaucitronNoServicesTitle {
    text-align: left !important;
    padding: 20px 28px !important;
    color: #718096 !important;
    font-size: 14px !important;
}

/* Cacher le message redondant en bas */
#tarteaucitron .tarteaucitronBorder > div:last-child:not(.tarteaucitronLine) {
    display: none !important;
}

/* Fix pour services_mandatory - cookies obligatoires */
#tarteaucitronServices_mandatory {
    display: block !important;
}

#tarteaucitronServices_mandatory .tarteaucitronLine {
    border-bottom: none !important;
}

/* =============================================
   RESPONSIVE
   ============================================= */
@media (max-width: 600px) {
    #tarteaucitron {
        max-width: 100% !important;
        width: 100% !important;
        max-height: 100vh !important;
        border-radius: 0 !important;
        top: 0 !important;
        left: 0 !important;
        transform: none !important;
    }

    #tarteaucitronMainLineOffset,
    #tarteaucitronMainLineOffset.tarteaucitronLine.tarteaucitronMainLine {
        padding: 28px 20px 20px !important;
    }

    #tarteaucitronMainLineOffset .tarteaucitronH1 {
        font-size: 20px !important;
    }

    #tarteaucitronServices .tarteaucitronBorder {
        max-height: calc(100vh - 280px) !important;
    }

    #tarteaucitronServices .tarteaucitronLine {
        padding: 16px 20px !important;
        flex-wrap: wrap !important;
    }

    #tarteaucitronServices .tarteaucitronLine .tarteaucitronName {
        width: 100% !important;
        margin-bottom: 12px !important;
    }

    #tarteaucitronServices .tarteaucitronLine .tarteaucitronAsk {
        margin-left: auto !important;
    }

    #tarteaucitronSave {
        padding: 16px 20px 24px !important;
    }

    #tarteaucitronSaveButton {
        max-width: none !important;
    }

    #tarteaucitronAlertBig {
        padding: 20px 16px !important;
        flex-direction: column !important;
        gap: 16px !important;
    }

    #tarteaucitronDisclaimerAlert {
        font-size: 14px !important;
    }
}