/** * Tarteaucitron — styles aux couleurs d'Objectif Nature * ------------------------------------------------------ * REPRISE DE GALIS (même structure, mêmes sélecteurs), à la demande d'Alexandre le 2026-10-08 ; * seule la charte change. Surcharge le CSS par défaut de tarteaucitron, injecté par son JS * depuis le CDN. Fichier dédié : ne pas fusionner dans common.css. * * Charte (common.css) : noir #0e0e0e, jaune #f4b721 (survol #e0a510), crème #fbf9f0, * Inter pour le texte et les boutons, Instrument Serif pour les titres. Les boutons reprennent * la PILULE du site (`.btn`, rayon 40px) plutôt que les angles droits de Galis. * Les valeurs sont écrites en dur ET en variables propres : la feuille ne dépend pas de l'ordre * de chargement de common.css. * * Les `!important` et la spécificité à rallonge (#tarteaucitronRoot + #id + button) ne sont pas * de la coquetterie : la feuille de tarteaucitron est chargée APRÈS celle-ci (injectée par le JS * en pied de page) et cible ses éléments par identifiant. */ :root { --tac-noir: #0e0e0e; --tac-blanc: #ffffff; --tac-creme: #fbf9f0; --tac-jaune: #f4b721; --tac-jaune-d: #e0a510; --tac-bordure: rgba(255, 255, 255, 0.35); --tac-sans: "Inter", -apple-system, sans-serif; --tac-serif: "Instrument Serif", Georgia, serif; } /* =========================== Bandeau principal =========================== */ #tarteaucitronRoot #tarteaucitronAlertBig { background: var(--tac-noir) !important; box-shadow: 0 -4px 24px rgba(0, 0, 0, 0.45) !important; font-family: var(--tac-sans) !important; padding: 22px 30px !important; } #tarteaucitronRoot #tarteaucitronAlertBig #tarteaucitronDisclaimerAlert { color: var(--tac-blanc) !important; font-family: var(--tac-sans) !important; font-size: 15px !important; font-weight: 400 !important; line-height: 1.6 !important; } /* =========================== Boutons du bandeau — la pilule du site =========================== */ #tarteaucitronRoot button { font-family: var(--tac-sans) !important; font-weight: 600 !important; letter-spacing: 0.02em !important; border-radius: 40px !important; cursor: pointer !important; transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease !important; } /* Deux règles identiques plutôt qu'une : la liste des cinq boutons en un seul sélecteur dépasse 300 caractères, seuil au-delà duquel le contrôle des commentaires CSS la prendrait pour de la prose avalée par un commentaire mal fermé. */ #tarteaucitronRoot #tarteaucitronAlertBig button#tarteaucitronPersonalize2, #tarteaucitronRoot #tarteaucitronAlertBig button#tarteaucitronAllDenied2, #tarteaucitronRoot #tarteaucitronAlertBig button#tarteaucitronCloseAlert { font-size: 14px !important; padding: 11px 22px !important; margin: 4px !important; } #tarteaucitronRoot #tarteaucitronAlertBig button#tarteaucitronPersonalize, #tarteaucitronRoot #tarteaucitronAlertBig button#tarteaucitronPrivacyUrl { font-size: 14px !important; padding: 11px 22px !important; margin: 4px !important; } /* Tout accepter — bouton primaire jaune, comme `.btn--primary` */ #tarteaucitronRoot #tarteaucitronPersonalize2 { background: var(--tac-jaune) !important; color: var(--tac-noir) !important; border: 1px solid var(--tac-jaune) !important; } #tarteaucitronRoot #tarteaucitronPersonalize2:hover { background: var(--tac-jaune-d) !important; border-color: var(--tac-jaune-d) !important; } /* Personnaliser / Tout refuser / Politique de confidentialité — boutons secondaires */ #tarteaucitronRoot #tarteaucitronCloseAlert, #tarteaucitronRoot #tarteaucitronPersonalize, #tarteaucitronRoot #tarteaucitronAllDenied2, #tarteaucitronRoot #tarteaucitronAlertBig button#tarteaucitronPrivacyUrl { display: inline-block !important; background: transparent !important; color: var(--tac-blanc) !important; border: 1px solid var(--tac-bordure) !important; text-decoration: none !important; } #tarteaucitronRoot #tarteaucitronCloseAlert:hover, #tarteaucitronRoot #tarteaucitronPersonalize:hover, #tarteaucitronRoot #tarteaucitronAllDenied2:hover, #tarteaucitronRoot #tarteaucitronAlertBig button#tarteaucitronPrivacyUrl:hover { border-color: var(--tac-jaune) !important; color: var(--tac-jaune) !important; } /* =========================== Panneau de gestion des services =========================== */ #tarteaucitronRoot #tarteaucitron { font-family: var(--tac-sans) !important; border-radius: 16px !important; overflow: hidden !important; } #tarteaucitronRoot #tarteaucitronBack { background: rgba(10, 10, 10, 0.78) !important; } #tarteaucitronRoot .tarteaucitronH1, #tarteaucitronRoot .tarteaucitronH2 { font-family: var(--tac-serif) !important; font-weight: 400 !important; letter-spacing: -0.01em !important; } #tarteaucitronRoot .tarteaucitronH3 { font-family: var(--tac-sans) !important; font-weight: 600 !important; } #tarteaucitronRoot #tarteaucitronServices .tarteaucitronMainLine, #tarteaucitronRoot #tarteaucitronServices .tarteaucitronTitle { background: var(--tac-noir) !important; } #tarteaucitronRoot #tarteaucitronServices .tarteaucitronLine { background: var(--tac-creme) !important; } /* Boutons Autoriser / Refuser du panneau */ #tarteaucitronRoot .tarteaucitronAllow { background: var(--tac-jaune) !important; color: var(--tac-noir) !important; border: none !important; } #tarteaucitronRoot .tarteaucitronDeny { background: var(--tac-noir) !important; color: var(--tac-blanc) !important; border: none !important; } /* État actif d'un service : liseré plutôt que le vert par défaut */ #tarteaucitronRoot .tarteaucitronIsAllowed .tarteaucitronAllow { box-shadow: inset 0 0 0 2px var(--tac-noir) !important; } #tarteaucitronRoot .tarteaucitronIsDenied .tarteaucitronDeny { box-shadow: inset 0 0 0 2px var(--tac-jaune) !important; } /* Logo tarteaucitron — masqué dans le panneau uniquement */ #tarteaucitronRoot #tarteaucitron img[src^="data:image/png;base64"] { display: none !important; } /* =========================== Z-index =========================== Les fenêtres de formulaire (.opt-overlay) et la visionneuse de galerie (.gal-lb) montent à 99998 : le bandeau cookies doit rester au-dessus de tout. =========================== */ #tarteaucitronRoot { z-index: 1000000 !important; position: relative; } #tarteaucitronRoot #tarteaucitronBack { z-index: 1000000 !important; } #tarteaucitronRoot #tarteaucitron { z-index: 1000001 !important; } #tarteaucitronRoot #tarteaucitronAlertBig, #tarteaucitronRoot #tarteaucitronAlertSmall { z-index: 1000002 !important; } /* =========================== Responsive =========================== */ @media (max-width: 768px) { #tarteaucitronRoot #tarteaucitronAlertBig { padding: 16px !important; box-sizing: border-box !important; max-width: 100vw !important; overflow: hidden !important; } #tarteaucitronRoot #tarteaucitronAlertBig #tarteaucitronDisclaimerAlert { font-size: 14px !important; margin-bottom: 12px !important; } /* Boutons empilés, pleine largeur. ⚠️ Les cinq boutons sont NOMMÉS par leur identifiant : les règles d'écran large ci-dessus les nomment aussi, et un sélecteur générique (… button) perdait contre elles — le dernier bouton gardait d'autres marges que ses voisins. */ #tarteaucitronRoot #tarteaucitronAlertBig button#tarteaucitronPersonalize2, #tarteaucitronRoot #tarteaucitronAlertBig button#tarteaucitronAllDenied2, #tarteaucitronRoot #tarteaucitronAlertBig button#tarteaucitronCloseAlert { display: block !important; width: 100% !important; box-sizing: border-box !important; margin: 6px 0 !important; text-align: center !important; font-size: 14px !important; padding: 13px 14px !important; } /* même règle, coupée en deux : cf. la note sur les 300 caractères plus haut */ #tarteaucitronRoot #tarteaucitronAlertBig button#tarteaucitronPersonalize, #tarteaucitronRoot #tarteaucitronAlertBig button#tarteaucitronPrivacyUrl { display: block !important; width: 100% !important; box-sizing: border-box !important; margin: 6px 0 !important; text-align: center !important; font-size: 14px !important; padding: 13px 14px !important; } }