/* ========================================================================== PERSONNALISATION CSS — tarteaucitron.js ========================================================================== Ne modifiez jamais directement /tarteaucitron/css/tarteaucitron.css : ce fichier sera écrasé à chaque mise à jour de la librairie. À la place : 1. Enregistrez ce fichier, par exemple sous /css/tarteaucitron-custom.css 2. Chargez-le APRÈS le script d'init de tarteaucitron (donc après le bloc tarteaucitron.init({...}) dans votre ) : Le CSS de tarteaucitron étant assez spécifique (IDs + règles inline ajoutées en JS), certains !important sont nécessaires pour prendre le dessus — ce n'est pas un choix esthétique, c'est une contrainte de la librairie. ========================================================================== */ /* ------------------------------------------------------------------------- 1. VARIABLES DE COULEURS — à adapter à votre charte graphique ------------------------------------------------------------------------- */ :root { --tac-bg: #1a1a1a; /* fond du bandeau */ --tac-text: #f5f5f5; /* texte du bandeau */ --tac-accept: #99624a; /* bouton "Tout accepter" */ --tac-accept-hover: #5F4F49; --tac-deny: #5F4F49; /* bouton "Tout refuser" */ --tac-deny-hover: #8f1414; --tac-link: #9cd4ff; /* liens (politique de confidentialité, etc.) */ --tac-radius: 50px; /* arrondi des boutons */ } body { font-family: gotham, sans-serif !important; } /* ------------------------------------------------------------------------- 2. LE BANDEAU PRINCIPAL (niveau 1 — "big alert") ------------------------------------------------------------------------- */ #tarteaucitronRoot #tarteaucitronAlertBig { background: var(--tac-bg) !important; color: var(--tac-text) !important; font-family: gotham, sans-serif !important; font-size: 14px !important; box-shadow: 0 -2px 12px rgba(0, 0, 0, .25) !important; padding: 20px 0px !important; width: 85%; } #tarteaucitronRoot #tarteaucitronDisclaimerAlert { color: var(--tac-text) !important; line-height: 1.5 !important; } #tarteaucitronRoot #tarteaucitronAlertBig a { color: var(--tac-link) !important; text-decoration: underline !important; } /* ------------------------------------------------------------------------- 3. LES BOUTONS PRINCIPAUX (accepter / refuser / personnaliser) ------------------------------------------------------------------------- */ #tarteaucitronRoot .tarteaucitronCTAButton { border-radius: var(--tac-radius) !important; font-weight: 600 !important; padding: 10px 18px !important; border: none !important; transition: background-color .15s ease !important; font-family: gotham, sans-serif !important; } /* Bouton "Tout accepter" */ #tarteaucitronRoot #tarteaucitronPersonalize2, #tarteaucitronRoot .tarteaucitronCTAButton.tarteaucitronAllow { background-color: var(--tac-accept) !important; color: #fff !important; } #tarteaucitronRoot .tarteaucitronCTAButton.tarteaucitronAllow:hover { background-color: var(--tac-accept-hover) !important; } /* Bouton "Tout refuser" — doit rester aussi visible que "Tout accepter" (exigence CNIL : ne réduisez pas son contraste ou sa taille) */ #tarteaucitronRoot #tarteaucitronAllDenied2, #tarteaucitronRoot .tarteaucitronCTAButton.tarteaucitronDeny { background-color: transparent !important; color: var(--tac-text) !important; border: 1px solid #777 !important; } #tarteaucitronRoot .tarteaucitronCTAButton.tarteaucitronDeny:hover { background-color: var(--tac-deny) !important; border-color: var(--tac-deny) !important; color: #fff !important; } /* Bouton "Personnaliser" */ #tarteaucitronRoot #tarteaucitronPersonalize { color: var(--tac-text) !important; text-decoration: underline !important; } #tarteaucitronPrivacyUrl { color: var(--tac-text) !important; opacity: .5; } #tarteaucitronCloseCross { display: none; } /* ------------------------------------------------------------------------- 4. LE PANNEAU DÉTAILLÉ (liste des services / catégories) ------------------------------------------------------------------------- */ #tarteaucitronRoot #tarteaucitron { background: #ffffff !important; font-family: gotham, sans-serif !important; background-color: transparent !important; } #tarteaucitronRoot .tarteaucitronH1, #tarteaucitronRoot .tarteaucitronH2, #tarteaucitronRoot .tarteaucitronH3 { color: #1a1a1a !important; } /* Boutons "Autoriser" / "Bloquer" sur chaque service, dans le panneau détaillé */ #tarteaucitronRoot #tarteaucitronServices .tarteaucitronAllow { background-color: var(--tac-accept) !important; color: #fff !important; border-radius: var(--tac-radius) !important; font-family: gotham, sans-serif !important; font-size: 1em !important; padding-bottom: 10px !important; } #tarteaucitronRoot #tarteaucitronServices .tarteaucitronDeny { background-color: var(--tac-deny) !important; color: #fff !important; border-radius: var(--tac-radius) !important; font-size: 1em !important; padding-bottom: 10px !important; } #tarteaucitronRoot #tarteaucitronAlertBig button, #tarteaucitronRoot #tarteaucitronServices #tarteaucitronMainLineOffset button, #tarteaucitronRoot #tarteaucitronServices .tarteaucitronBorder button { border-radius: var(--tac-radius) !important; } .tarteaucitronCheck::before, .tarteaucitronCross::before { color: var(--tac-text) !important; font-size: 1.4em !important; font-weight: 600; } .tarteaucitronSelfLink { filter: grayscale(1); } #tarteaucitronSaveButton { text-transform: uppercase !important; padding-top: 10px !important; } #tarteaucitronSaveButton:hover { background-color: var(--tac-accept-hover) !important; } /* ------------------------------------------------------------------------- 5. L'ICÔNE FLOTTANTE (pour rouvrir les préférences) ------------------------------------------------------------------------- */ #tarteaucitronRoot #tarteaucitronIcon { background-color: var(--tac-bg) !important; border-radius: 50% !important; box-shadow: 0 1px 6px rgba(0, 0, 0, .3) !important; display: none !important; }