/** * Om Karyann — Tarteaucitron custom theme * Harmonise la CMP (bandeau cookies) avec la charte Mauve & Or antique. * Created : 2026-06-19 (agent LEGAL) * Updated : 2026-06-29 — refonte palette (tokens theme.json) + style complet du * mini-bandeau "alertSmall" (barre d'état, badge nombre, icône flottante). * * Couleurs : on pointe les presets WordPress (--wp--preset--color--*), avec un * fallback hex de sécurité car la CMP peut s'injecter très tôt dans le . * Source unique de vérité = theme.json. Ne jamais hardcoder une teinte « inventée ». */ /* ──────────────────────────────────────────────── * 1. GRAND BANDEAU (alertBig) — premier passage * ──────────────────────────────────────────────── */ #tarteaucitronRoot div#tarteaucitronAlertBig { background: var(--wp--preset--color--earth-dark, #2C1F2D) !important; color: var(--wp--preset--color--linen-bg, #FBF7F2) !important; border-top: 3px solid var(--wp--preset--color--gold-accent, #A07D58) !important; font-family: var(--wp--preset--font-family--nunito, system-ui, sans-serif) !important; padding: 20px 24px !important; box-shadow: 0 -4px 24px rgba(0, 0, 0, 0.18) !important; max-width: 100% !important; left: 0 !important; right: 0 !important; bottom: 0 !important; border-radius: 0 !important; } #tarteaucitronRoot #tarteaucitronDisclaimerAlert { font-size: 0.95rem !important; line-height: 1.6 !important; color: var(--wp--preset--color--linen-bg, #FBF7F2) !important; } #tarteaucitronRoot #tarteaucitronDisclaimerAlert a { color: var(--wp--preset--color--gold-light, #F5E8D5) !important; text-decoration: underline !important; } /* ──────────────────────────────────────────────── * 2. BOUTONS (accepter / refuser / personnaliser) * ──────────────────────────────────────────────── */ #tarteaucitronRoot button#tarteaucitronPersonalize, #tarteaucitronRoot button#tarteaucitronCloseAlert, #tarteaucitronRoot button#tarteaucitronAllDenied2, #tarteaucitronRoot button.tarteaucitronAllow, #tarteaucitronRoot button.tarteaucitronDeny { font-family: var(--wp--preset--font-family--nunito, system-ui, sans-serif) !important; font-weight: 600 !important; border-radius: 4px !important; padding: 10px 18px !important; letter-spacing: 0.02em !important; border: 0 !important; cursor: pointer !important; transition: filter .15s ease; } /* Action principale : fond doré, texte aubergine */ #tarteaucitronRoot button#tarteaucitronPersonalize, #tarteaucitronRoot button.tarteaucitronAllow { background: var(--wp--preset--color--gold-accent, #A07D58) !important; color: var(--wp--preset--color--earth-dark, #2C1F2D) !important; } /* Action secondaire : contour clair sur fond sombre */ #tarteaucitronRoot button#tarteaucitronAllDenied2, #tarteaucitronRoot button#tarteaucitronCloseAlert, #tarteaucitronRoot button.tarteaucitronDeny { background: transparent !important; color: var(--wp--preset--color--linen-bg, #FBF7F2) !important; border: 1px solid var(--wp--preset--color--linen-bg, #FBF7F2) !important; } #tarteaucitronRoot button:hover { filter: brightness(1.08); } /* ──────────────────────────────────────────────── * 3. PANNEAU MODAL (réglages détaillés) * ──────────────────────────────────────────────── */ #tarteaucitronRoot #tarteaucitron { border-radius: 8px !important; overflow: hidden; font-family: var(--wp--preset--font-family--nunito, system-ui, sans-serif) !important; } #tarteaucitronRoot #tarteaucitronServices, #tarteaucitronRoot #tarteaucitronInfo, #tarteaucitronRoot #tarteaucitronMainLineOffset { background: var(--wp--preset--color--linen-bg, #FBF7F2) !important; color: var(--wp--preset--color--earth-dark, #2C1F2D) !important; } #tarteaucitronRoot div.tarteaucitronH1, #tarteaucitronRoot #tarteaucitronTitle, #tarteaucitronRoot .tarteaucitronH2, #tarteaucitronRoot .tarteaucitronH3 { color: var(--wp--preset--color--earth-dark, #2C1F2D) !important; } /* ════════════════════════════════════════════════ * 4. MINI-BANDEAU "alertSmall" (bas droite, après choix) * + icône flottante + barre d'état + badge nombre. * C'est ce bloc qui manquait : la barre verte par défaut * et le badge gris juraient avec la charte. * ════════════════════════════════════════════════ */ /* Conteneur du mini-bandeau */ #tarteaucitronRoot #tarteaucitronAlertSmall { background: var(--wp--preset--color--earth-dark, #2C1F2D) !important; border: 1px solid var(--wp--preset--color--gold-accent, #A07D58) !important; border-right: 0 !important; border-bottom: 0 !important; border-radius: 8px 0 0 0 !important; overflow: hidden; box-shadow: 0 -2px 18px rgba(0, 0, 0, 0.22) !important; font-family: var(--wp--preset--font-family--nunito, system-ui, sans-serif) !important; } /* Bouton texte "Gestion des services" */ #tarteaucitronRoot #tarteaucitronAlertSmall #tarteaucitronManager { color: var(--wp--preset--color--gold-light, #F5E8D5) !important; font-family: var(--wp--preset--font-family--nunito, system-ui, sans-serif) !important; font-size: 0.8rem !important; font-weight: 600 !important; letter-spacing: 0.02em !important; padding: 10px 14px !important; } #tarteaucitronRoot #tarteaucitronAlertSmall #tarteaucitronManager:hover { background: rgba(245, 232, 213, 0.08) !important; } /* Piste de la barre d'état (était grise par défaut) */ #tarteaucitronRoot #tarteaucitronAlertSmall #tarteaucitronManager #tarteaucitronDot { background-color: rgba(245, 232, 213, 0.22) !important; border-radius: 3px !important; height: 6px !important; margin-top: 7px !important; } /* Segments d'état — repalettés Mauve & Or (étaient vert/jaune/rouge crus). accepté → or | partiel → or clair | refusé → rosé profond */ #tarteaucitronRoot #tarteaucitronAlertSmall #tarteaucitronManager #tarteaucitronDot #tarteaucitronDotGreen { background-color: var(--wp--preset--color--gold-accent, #A07D58) !important; } #tarteaucitronRoot #tarteaucitronAlertSmall #tarteaucitronManager #tarteaucitronDot #tarteaucitronDotYellow { background-color: var(--wp--preset--color--gold-light, #F5E8D5) !important; } #tarteaucitronRoot #tarteaucitronAlertSmall #tarteaucitronManager #tarteaucitronDot #tarteaucitronDotRed { background-color: var(--wp--preset--color--terra-deep, #8E5A6C) !important; } /* Badge nombre de cookies (le "9" gris) */ #tarteaucitronRoot #tarteaucitronAlertSmall #tarteaucitronCookiesNumber { background: rgba(160, 125, 88, 0.18) !important; color: var(--wp--preset--color--gold-light, #F5E8D5) !important; font-family: var(--wp--preset--font-family--nunito, system-ui, sans-serif) !important; font-size: 1.2rem !important; font-weight: 700 !important; padding: 6px 12px !important; border-left: 1px solid rgba(160, 125, 88, 0.35) !important; } #tarteaucitronRoot #tarteaucitronAlertSmall #tarteaucitronCookiesNumber:hover { background: rgba(160, 125, 88, 0.30) !important; } /* Barre de progression fine (#tarteaucitronPercentage, sommet de page) */ #tarteaucitronRoot #tarteaucitronPercentage { background: var(--wp--preset--color--gold-accent, #A07D58) !important; box-shadow: 0 0 2px rgba(255, 255, 255, 0.6), 0 1px 2px rgba(44, 31, 45, 0.4) !important; } /* ──────────────────────────────────────────────── * 5. ICÔNE FLOTTANTE "Gérer mes cookies" (showIcon) * ──────────────────────────────────────────────── */ #tarteaucitronRoot #tarteaucitronIcon #tarteaucitronManager { background: var(--wp--preset--color--earth-dark, #2C1F2D) !important; border: 1px solid var(--wp--preset--color--gold-accent, #A07D58) !important; border-radius: 8px 8px 0 0 !important; padding: 8px 10px !important; box-shadow: 0 -2px 14px rgba(0, 0, 0, 0.2) !important; } #tarteaucitronRoot #tarteaucitronIcon #tarteaucitronManager img { width: 30px !important; height: 30px !important; } /* Lien footer "Gérer mes cookies" (shortcode) — inchangé, repaletté */ .omk-cookies-manager, #tarteaucitron-cookies-manager { color: var(--wp--preset--color--gold-accent, #A07D58) !important; cursor: pointer; } /* ──────────────────────────────────────────────── * 6. MOBILE * ──────────────────────────────────────────────── */ @media (max-width: 640px) { #tarteaucitronRoot div#tarteaucitronAlertBig { padding: 16px !important; } #tarteaucitronRoot button#tarteaucitronPersonalize, #tarteaucitronRoot button#tarteaucitronAllDenied2, #tarteaucitronRoot button#tarteaucitronCloseAlert { display: block !important; width: 100% !important; margin: 6px 0 !important; } }