/** * Tarteaucitron — Theme InspiraBloom (palette swap défensif) * * Tarteaucitron utilise `html body #tarteaucitronRoot ...` comme préfixe et * `!important` à de nombreux endroits. Pour gagner systématiquement la cascade, * on préfixe toutes nos règles avec `html body` (spécificité égale, déclaré après). * * Approche : * - Variables CSS light + dark. * - Source du dark mode = attribut `html[data-theme="dark"]` posé par * `js/theme-toggle.js` (synchrone, dans , suit localStorage ou prefers-color-scheme). * On évite `@media (prefers-color-scheme: dark)` pour rester aligné avec le toggle utilisateur. * - Override universel des `color` et des `background-color` blancs/jaunes natifs. * - Hiérarchie visuelle 3 tiers : Allow/Deny (outline lavande, symétriques), * Personnaliser (ghost, tertiaire), Politique de confidentialité (text-link). * * On ne touche PAS au contenu ni à la structure DOM. */ /* ───────────────────────────── Variables — light mode ────────────────────── */ :root { --tac-bg: #FAF9F7; --tac-bg-elevated: #FFFFFF; --tac-text: #2D2D2D; --tac-text-muted: #6B6B6B; --tac-text-on-accent: #FFFFFF; --tac-accent: #B8A9C9; --tac-accent-hover: #A89AB8; --tac-accent-soft: #E8E0F0; --tac-border: rgba(45, 45, 45, 0.10); --tac-border-strong: rgba(45, 45, 45, 0.18); --tac-overlay: rgba(45, 45, 45, 0.45); --tac-shadow: 0 -18px 40px -20px rgba(45, 45, 45, 0.18); --tac-ghost-hover: rgba(45, 45, 45, 0.05); --tac-font-ui: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; } /* ───────────────────────────── Variables — dark mode ─────────────────────── */ /* Tokens alignés sur la palette dark de la home (cf. index.html : body #1A1A1D, .concept #252530, .footer #111114). */ html[data-theme="dark"] { --tac-bg: #1A1A1D; --tac-bg-elevated: #252530; --tac-text: #F5F5F5; --tac-text-muted: #B0B0B0; --tac-text-on-accent: #1A1A1D; --tac-accent: #C4B5D9; --tac-accent-hover: #D4C5E9; --tac-accent-soft: rgba(196, 181, 217, 0.18); --tac-border: rgba(255, 255, 255, 0.12); --tac-border-strong: rgba(255, 255, 255, 0.22); --tac-overlay: rgba(0, 0, 0, 0.6); --tac-shadow: 0 -18px 40px -20px rgba(0, 0, 0, 0.55); --tac-ghost-hover: rgba(255, 255, 255, 0.06); } /* ════════════════════════════════════════════════════════════════════════════ */ /* RESET universel des couleurs */ /* Force la color partout dans Tarteaucitron, pour écraser les natifs. */ /* ════════════════════════════════════════════════════════════════════════════ */ html body #tarteaucitronRoot, html body #tarteaucitronRoot *, html body #tarteaucitronRoot *::before, html body #tarteaucitronRoot *::after { color: var(--tac-text) !important; border-color: var(--tac-border) !important; font-family: var(--tac-font-ui) !important; } /* ════════════════════════════════════════════════════════════════════════════ */ /* BACKGROUNDS — backdrop modale uniquement */ /* ════════════════════════════════════════════════════════════════════════════ */ html body #tarteaucitronRoot #tarteaucitronBack { background: var(--tac-overlay) !important; } /* Sections cliquables ("+ Cookies obligatoires" etc.) */ html body #tarteaucitronRoot #tarteaucitron .tarteaucitronTitle, html body #tarteaucitronRoot #tarteaucitron .tarteaucitronTitle button, html body #tarteaucitronRoot #tarteaucitron #tarteaucitronServices .tarteaucitronTitle button, html body #tarteaucitronRoot .catToggleBtn { color: var(--tac-text) !important; border-color: var(--tac-border) !important; } /* Texte status courant / séparateur — Tarteaucitron force color: #333 !important */ html body #tarteaucitronRoot .tarteaucitronName .tacCurrentStatus, html body #tarteaucitronRoot .tarteaucitronName .tarteaucitronReadmoreSeparator { color: var(--tac-text-muted) !important; } /* ════════════════════════════════════════════════════════════════════════════ */ /* HIÉRARCHIE 3 TIERS */ /* Tier 1 : Tout accepter / Tout refuser → outline lavande, symétriques (CNIL) */ /* Tier 2 : Personnaliser → ghost button (pas de bordure visible, hover bg) */ /* Tier 3 : Politique de confidentialité → text-link informationnel */ /* ════════════════════════════════════════════════════════════════════════════ */ /* ────────────── Tier 1 : Allow / Deny (symétrie CNIL stricte) ────────────── */ html body #tarteaucitronRoot button#tarteaucitronPersonalize2, html body #tarteaucitronRoot button#tarteaucitronAllAllowed, html body #tarteaucitronRoot button#tarteaucitronAllAllowed2, html body #tarteaucitronRoot button#tarteaucitronAllDenied, html body #tarteaucitronRoot button#tarteaucitronAllDenied2, html body #tarteaucitronRoot button.tarteaucitronCTAButton { background: transparent !important; color: var(--tac-text) !important; border: 1.5px solid var(--tac-accent) !important; border-radius: 999px !important; padding: 11px 26px !important; font-size: 14px !important; font-weight: 500 !important; letter-spacing: 0.01em !important; text-transform: none !important; cursor: pointer !important; transition: background 200ms cubic-bezier(0.22, 1, 0.36, 1), color 200ms cubic-bezier(0.22, 1, 0.36, 1), transform 150ms cubic-bezier(0.22, 1, 0.36, 1) !important; box-shadow: none !important; min-width: 148px !important; } html body #tarteaucitronRoot button#tarteaucitronPersonalize2:hover, html body #tarteaucitronRoot button#tarteaucitronAllAllowed:hover, html body #tarteaucitronRoot button#tarteaucitronAllAllowed2:hover, html body #tarteaucitronRoot button#tarteaucitronAllDenied:hover, html body #tarteaucitronRoot button#tarteaucitronAllDenied2:hover, html body #tarteaucitronRoot button.tarteaucitronCTAButton:hover { background: var(--tac-accent) !important; color: var(--tac-text-on-accent) !important; border-color: var(--tac-accent) !important; transform: translateY(-1px) !important; } html body #tarteaucitronRoot button:focus-visible { outline: 2px solid var(--tac-accent) !important; outline-offset: 3px !important; } /* ────────────── Tier 2 : Personnaliser (ghost button) ────────────────────── */ /* `#tarteaucitronCloseAlert` est le bouton "Personnaliser" qui ouvre la modale. Ghost button : pas de bordure visible au repos, légère bg au hover. */ html body #tarteaucitronRoot button#tarteaucitronCloseAlert { background: transparent !important; color: var(--tac-text-muted) !important; border: 1.5px solid transparent !important; border-radius: 999px !important; padding: 11px 22px !important; font-size: 14px !important; font-weight: 500 !important; text-transform: none !important; min-width: auto !important; cursor: pointer !important; transition: background 200ms cubic-bezier(0.22, 1, 0.36, 1), color 200ms cubic-bezier(0.22, 1, 0.36, 1) !important; box-shadow: none !important; } html body #tarteaucitronRoot button#tarteaucitronCloseAlert:hover { background: var(--tac-ghost-hover) !important; color: var(--tac-text) !important; border-color: transparent !important; transform: none !important; } /* ────────────── Tier 3 : Politique de confidentialité (text-link) ────────── */ html body #tarteaucitronRoot button#tarteaucitronPrivacyUrl, html body #tarteaucitronRoot button#tarteaucitronPrivacyUrlDialog { background: transparent !important; color: var(--tac-text-muted) !important; border: none !important; border-radius: 0 !important; padding: 6px 4px !important; font-size: 13px !important; font-weight: 400 !important; text-decoration: none !important; text-underline-offset: 4px !important; text-decoration-thickness: 1px !important; min-width: auto !important; cursor: pointer !important; transition: color 200ms cubic-bezier(0.22, 1, 0.36, 1), text-decoration-color 200ms cubic-bezier(0.22, 1, 0.36, 1) !important; box-shadow: none !important; } html body #tarteaucitronRoot button#tarteaucitronPrivacyUrl:hover, html body #tarteaucitronRoot button#tarteaucitronPrivacyUrlDialog:hover { background: transparent !important; color: var(--tac-accent) !important; text-decoration: underline !important; text-decoration-color: var(--tac-accent) !important; } /* ════════════════════════════════════════════════════════════════════════════ */ /* MODALE — Toggles individuels "Autoriser" / "Interdire" (per-service) */ /* Pills outline, compactes pour cohabiter dans la liste de services. */ /* ════════════════════════════════════════════════════════════════════════════ */ html body #tarteaucitronRoot #tarteaucitronServices .tarteaucitronLine .tarteaucitronAllow, html body #tarteaucitronRoot #tarteaucitronServices .tarteaucitronLine .tarteaucitronDeny, html body #tarteaucitronRoot .tarteaucitronAllow, html body #tarteaucitronRoot .tarteaucitronDeny { background: transparent !important; color: var(--tac-text) !important; border: 1.5px solid var(--tac-border-strong) !important; border-radius: 999px !important; padding: 8px 18px !important; font-family: var(--tac-font-ui) !important; font-size: 13px !important; font-weight: 500 !important; cursor: pointer !important; transition: background 200ms cubic-bezier(0.22, 1, 0.36, 1), border-color 200ms cubic-bezier(0.22, 1, 0.36, 1), color 200ms cubic-bezier(0.22, 1, 0.36, 1) !important; } html body #tarteaucitronRoot .tarteaucitronAllow:hover, html body #tarteaucitronRoot .tarteaucitronDeny:hover { border-color: var(--tac-accent) !important; background: var(--tac-accent-soft) !important; color: var(--tac-text) !important; } html body #tarteaucitronRoot .tarteaucitronAllow:disabled, html body #tarteaucitronRoot .tarteaucitronDeny:disabled { opacity: 0.4 !important; cursor: not-allowed !important; } /* État ACTIVÉ : "Autoriser" lavande pleine */ html body #tarteaucitronRoot .tarteaucitronIsAllowed .tarteaucitronAllow { background: var(--tac-accent) !important; color: var(--tac-text-on-accent) !important; border-color: var(--tac-accent) !important; } /* État REFUSÉ : "Interdire" sombre */ html body #tarteaucitronRoot .tarteaucitronIsDenied .tarteaucitronDeny { background: var(--tac-text) !important; color: var(--tac-bg-elevated) !important; border-color: var(--tac-text) !important; } /* ────────────── Bouton "Enregistrer" en footer modale ────────────────────── */ html body #tarteaucitronRoot button#tarteaucitronSaveButton { background: var(--tac-accent) !important; color: var(--tac-text-on-accent) !important; border: 1px solid var(--tac-accent) !important; border-radius: 999px !important; padding: 11px 26px !important; font-size: 14px !important; font-weight: 500 !important; cursor: pointer !important; transition: background 200ms cubic-bezier(0.22, 1, 0.36, 1) !important; } html body #tarteaucitronRoot button#tarteaucitronSaveButton:hover { background: var(--tac-accent-hover) !important; border-color: var(--tac-accent-hover) !important; } /* ────────────── Bouton "X" / "Fermer" modale ─────────────────────────────── */ /* Cercle 40px en haut-droite de la modale. Texte "Fermer" remplacé par un glyphe × via ::after (Tarteaucitron impose le label texte côté JS). z-index > services : le close et services sont siblings de #tarteaucitron ; services paint après dans l'ordre DOM, donc le couvrirait sans z-index. */ html body #tarteaucitronRoot #tarteaucitron #tarteaucitronClosePanel { position: absolute !important; top: 16px !important; right: 16px !important; z-index: 2 !important; background: transparent !important; color: var(--tac-text-muted) !important; border: 1px solid var(--tac-border) !important; border-radius: 999px !important; width: 40px !important; height: 40px !important; padding: 0 !important; font-size: 0 !important; line-height: 1 !important; cursor: pointer !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; transition: background 200ms cubic-bezier(0.22, 1, 0.36, 1), border-color 200ms cubic-bezier(0.22, 1, 0.36, 1), color 200ms cubic-bezier(0.22, 1, 0.36, 1) !important; } html body #tarteaucitronRoot #tarteaucitron #tarteaucitronClosePanel::after { content: "×" !important; font-family: var(--tac-font-ui) !important; font-size: 22px !important; font-weight: 400 !important; line-height: 1 !important; color: inherit !important; } html body #tarteaucitronRoot #tarteaucitron #tarteaucitronClosePanel:hover { background: var(--tac-ghost-hover) !important; border-color: var(--tac-border-strong) !important; color: var(--tac-text) !important; } /* ════════════════════════════════════════════════════════════════════════════ */ /* LIENS */ /* ════════════════════════════════════════════════════════════════════════════ */ html body #tarteaucitronRoot a { color: var(--tac-accent-hover) !important; } html body #tarteaucitronRoot a:hover { color: var(--tac-accent) !important; } /* ════════════════════════════════════════════════════════════════════════════ */ /* ÉLÉMENTS D'ÉTAT — sprite Tarteaucitron natif (check/cross/plus) */ /* Le sprite SVG natif n'est pas chargé dans notre vendor : on masque */ /* totalement ces spans pour ne pas afficher de carrés vides ☐ devant les */ /* labels. La hiérarchie visuelle (allow lavande / deny sombre) suffit pour */ /* l'état actif ; pas besoin d'icône cosmétique avant le texte. */ /* ════════════════════════════════════════════════════════════════════════════ */ html body #tarteaucitronRoot .tarteaucitronCheck, html body #tarteaucitronRoot .tarteaucitronCross, html body #tarteaucitronRoot .tarteaucitronPlus { display: none !important; } /* ════════════════════════════════════════════════════════════════════════════ */ /* BANNIÈRE INITIALE */ /* Layout = flex + wrap : pas de débordement viewport, stack propre <900px. */ /* ════════════════════════════════════════════════════════════════════════════ */ html body #tarteaucitronRoot #tarteaucitronAlertBig { background: var(--tac-bg-elevated) !important; color: var(--tac-text) !important; border-top: 1px solid var(--tac-border) !important; box-shadow: var(--tac-shadow) !important; padding: 18px clamp(16px, 4vw, 48px) !important; font-family: var(--tac-font-ui) !important; box-sizing: border-box !important; width: 100% !important; display: flex !important; flex-wrap: wrap !important; align-items: center !important; justify-content: flex-end !important; gap: 12px 14px !important; } /* Disclaimer prend tout l'espace restant, jusqu'à 280px en wrap */ html body #tarteaucitronRoot #tarteaucitronAlertBig #tarteaucitronDisclaimerAlert, html body #tarteaucitronRoot #tarteaucitronAlertBig #tarteaucitronDisclaimerAlert strong { color: var(--tac-text) !important; font-size: 14px !important; line-height: 1.5 !important; } html body #tarteaucitronRoot #tarteaucitronAlertBig #tarteaucitronDisclaimerAlert { flex: 1 1 280px !important; min-width: 0 !important; display: inline-flex !important; align-items: center !important; } /* Empêche les boutons de se rétrécir au point d'illisibilité */ html body #tarteaucitronRoot #tarteaucitronAlertBig > button { flex: 0 0 auto !important; } /* ════════════════════════════════════════════════════════════════════════════ */ /* BANNIÈRE ↔ MODALE : exclusion mutuelle */ /* Quand la modale "Personnaliser" est ouverte, on masque la bannière sticky */ /* bottom pour ne pas qu'elle dépasse derrière le backdrop. Le toggle de la */ /* classe `tac-modal-open` est fait en JS via MutationObserver dans */ /* `js/tarteaucitron-init.js` (compat Safari < 15.4 et Firefox < 121 sans */ /* :has()). */ /* ════════════════════════════════════════════════════════════════════════════ */ /* Double filet : - `tac-modal-open` est posée par notre JS (init.js, MutationObserver) ; - `tarteaucitron-modal-open-noscroll` est posée par Tarteaucitron natif. L'un OU l'autre déclenche le hide → marche même si le JS init n'est pas chargé / load order différent. */ html.tac-modal-open body #tarteaucitronRoot #tarteaucitronAlertBig, html.tarteaucitron-modal-open-noscroll body #tarteaucitronRoot #tarteaucitronAlertBig { display: none !important; } /* ════════════════════════════════════════════════════════════════════════════ */ /* MODALE — STRUCTURE & TYPOGRAPHIE */ /* La modale "Personnaliser" applique la triade typo du design system : */ /* - H1 titre principal → Playfair Display 700 (title 28px) */ /* - H2 section → label uppercase Poppins 600 tracked lavande */ /* - H3 service → Playfair Display 700 (title 22px) */ /* - body / disclaimer → Lora 18px line-height 1.7 */ /* Container : rounded 28px (md), padding généreux, shadow ondulation. */ /* ════════════════════════════════════════════════════════════════════════════ */ /* Backdrop déjà géré plus haut via --tac-overlay. Renforcer pour modale. */ html body #tarteaucitronRoot #tarteaucitronBack { background: var(--tac-overlay) !important; backdrop-filter: blur(2px) !important; -webkit-backdrop-filter: blur(2px) !important; } /* ────────────── Container de la modale ───────────────────────────────────── */ /* Tarteaucitron natif pose `position: fixed; left: 50%; margin: 0 auto 0 -430px; width: 860px; display: none;` (centrage pour 860px). Notre modale fait 540px max → le margin-left:-430px la décale à gauche. On reprend la main avec transform. CRITIQUE : on ne touche pas au `display` quand la modale est fermée, sinon notre `display: flex !important` la rend visible au chargement (override le `display: none` natif). On scope donc le display à l'état ouvert (inline `display: block` posé par Tarteaucitron au clic Personnaliser). */ html body #tarteaucitronRoot #tarteaucitron { background: var(--tac-bg-elevated) !important; border-radius: 24px !important; border: 1px solid var(--tac-border) !important; box-shadow: 0 24px 60px -24px rgba(45, 45, 45, 0.30), 0 12px 40px rgba(184, 169, 201, 0.18) !important; font-family: var(--tac-font-ui) !important; overflow: hidden !important; position: fixed !important; left: 50% !important; margin: 0 !important; transform: translateX(-50%) !important; width: calc(100% - 32px) !important; max-width: 540px !important; max-height: min(85vh, 700px) !important; flex-direction: column !important; /* display: pas de override global. Voir la règle scope ci-dessous. */ } /* Display flex UNIQUEMENT quand la modale est ouverte (Tarteaucitron pose `display: block` inline au clic Personnaliser). Sinon le natif `display: none` reste effectif → modale cachée au chargement. */ html body #tarteaucitronRoot #tarteaucitron[style*="display: block"] { display: flex !important; } html[data-theme="dark"] body #tarteaucitronRoot #tarteaucitron { box-shadow: 0 24px 60px -24px rgba(0, 0, 0, 0.65), 0 12px 40px rgba(196, 181, 217, 0.12) !important; } /* Tarteaucitron pose `height: XXXpx; overflow-x: auto;` inline sur #tarteaucitronServices (calcul JS basé sur window.innerHeight). On reprend la main : le flex parent gère la hauteur, services prend tout l'espace restant + scroll Y interne. */ html body #tarteaucitronRoot #tarteaucitron #tarteaucitronServices { padding: 32px 32px 16px !important; height: auto !important; flex: 1 1 auto !important; min-height: 0 !important; overflow-x: hidden !important; overflow-y: auto !important; scrollbar-width: thin !important; scrollbar-color: var(--tac-border-strong) transparent !important; /* Tarteaucitron natif pose `box-shadow: 0 40px 60px #545454` sur ce conteneur → halo gris de 60px de blur visible derrière la modale (cause directe du "blanc et gris" rapporté 2026-05-17). Neutralisé. */ box-shadow: none !important; margin-top: 0 !important; border-radius: 0 !important; } html body #tarteaucitronRoot #tarteaucitron #tarteaucitronServices::-webkit-scrollbar { width: 6px !important; } html body #tarteaucitronRoot #tarteaucitron #tarteaucitronServices::-webkit-scrollbar-thumb { background: var(--tac-border-strong) !important; border-radius: 999px !important; } /* Padding mobile plus tendu */ @media (max-width: 640px) { html body #tarteaucitronRoot #tarteaucitron { border-radius: 20px !important; width: calc(100% - 16px) !important; } html body #tarteaucitronRoot #tarteaucitron #tarteaucitronServices { padding: 32px 24px 20px !important; } html body #tarteaucitronRoot #tarteaucitron #tarteaucitronClosePanel { top: 10px !important; right: 10px !important; } } /* ────────────── Heading principal H1 — "Panneau de gestion des cookies" ──── */ html body #tarteaucitronRoot #tarteaucitron .tarteaucitronH1 { display: block !important; font-family: var(--tac-font-display, 'Playfair Display', 'Times New Roman', serif) !important; font-size: 22px !important; font-weight: 700 !important; line-height: 1.3 !important; letter-spacing: normal !important; text-align: left !important; text-transform: none !important; color: var(--tac-text) !important; margin: 0 56px 14px 0 !important; /* margin-right 56px = espace pour le bouton X en absolute */ } /* ────────────── Intro disclaimer (#tarteaucitronInfo) ────────────────────── */ html body #tarteaucitronRoot #tarteaucitron #tarteaucitronInfo { margin: 0 0 18px !important; padding: 0 !important; text-align: left !important; width: 100% !important; } html body #tarteaucitronRoot #tarteaucitron #tarteaucitronInfo p { font-family: 'Lora', Georgia, serif !important; font-size: 15px !important; font-weight: 400 !important; line-height: 1.6 !important; color: var(--tac-text-muted) !important; max-width: none !important; margin: 0 0 12px !important; text-align: left !important; } /* Les
que Tarteaucitron met entre le disclaimer et le lien Privacy sont visuellement inutiles avec notre marge structurée. Les neutraliser. */ html body #tarteaucitronRoot #tarteaucitron #tarteaucitronInfo br { display: none !important; } /* ────────────── MINIMALISME : masquer les labels redondants ─────────────── */ /* Le kicker "Préférences pour tous les services" duplique l'intention de la modale (qui EST l'écran des préférences). On le masque pour alléger. */ html body #tarteaucitronRoot #tarteaucitron .tarteaucitronH2 { display: none !important; } /* ────────────── Wrapper .tarteaucitronMainLine = bloc supérieur ──────────── */ /* C'est le wrapper qui contient le titre H1 + intro + Allow/Deny. On le laisse en block (flux normal vertical) avec une bordure-bottom pour séparer du catalogue de services qui suit. */ html body #tarteaucitronRoot #tarteaucitron .tarteaucitronMainLine { display: block !important; padding: 0 0 24px !important; border-bottom: 1px solid var(--tac-border) !important; margin: 0 0 8px !important; } /* La rangée Allow/Deny dans le bloc supérieur : flex inline aligné à gauche. `.tarteaucitronAsk` est le conteneur direct des boutons "Tout accepter / Tout refuser". Tarteaucitron natif lui pose `float: right; margin: 7px 15px 0; text-align: right` (ligne 750 de tarteaucitron.css) → on neutralise pour l'aligner à gauche. */ html body #tarteaucitronRoot #tarteaucitron .tarteaucitronMainLine .tarteaucitronAsk { display: flex !important; flex-direction: row !important; flex-wrap: wrap !important; justify-content: flex-start !important; align-items: center !important; gap: 10px !important; margin: 16px 0 0 !important; float: none !important; text-align: left !important; width: auto !important; } /* Dans la modale, on retire le min-width 148px imposé aux CTA pour que les boutons soient compacts (ils héritent sinon de la règle banner qui veut des boutons larges pour le visuel sticky bottom). Cohérence avec les Autoriser/Interdire per-service. */ html body #tarteaucitronRoot #tarteaucitron button#tarteaucitronAllAllowed, html body #tarteaucitronRoot #tarteaucitron button#tarteaucitronAllDenied, html body #tarteaucitronRoot #tarteaucitron button.tarteaucitronCTAButton { min-width: 0 !important; } html body #tarteaucitronRoot #tarteaucitron .tarteaucitronMainLine .tarteaucitronName { display: none !important; } html body #tarteaucitronRoot #tarteaucitron .tarteaucitronMainLine .tarteaucitronAsk { display: inline-flex !important; gap: 10px !important; flex: 0 0 auto !important; } html body #tarteaucitronRoot #tarteaucitron #tarteaucitronMainLineOffset { display: block !important; } /* ────────────── Sections du catalogue ("Cookies obligatoires", "Mesure…") ── */ /* Tarteaucitron natif force `background: #fff` sur .tarteaucitronBorder et .tarteaucitronLine, ce qui rend le texte blanc invisible en dark mode. On force tous les backgrounds inner à transparent — le seul fond visible est celui de #tarteaucitron (--tac-bg-elevated). */ html body #tarteaucitronRoot #tarteaucitron .tarteaucitronBorder, html body #tarteaucitronRoot #tarteaucitron .tarteaucitronBorder .tarteaucitronLine, html body #tarteaucitronRoot #tarteaucitron .tarteaucitronMainLine, html body #tarteaucitronRoot #tarteaucitron .tarteaucitronName, html body #tarteaucitronRoot #tarteaucitron .tarteaucitronAsk, html body #tarteaucitronRoot #tarteaucitron #tarteaucitronInfo, html body #tarteaucitronRoot #tarteaucitron #tarteaucitronInfo p, html body #tarteaucitronRoot #tarteaucitron ul, html body #tarteaucitronRoot #tarteaucitron li { background: transparent !important; background-color: transparent !important; } html body #tarteaucitronRoot #tarteaucitron .tarteaucitronBorder { border: none !important; padding: 0 !important; margin: 0 !important; } html body #tarteaucitronRoot #tarteaucitron ul, html body #tarteaucitronRoot #tarteaucitron li { list-style: none !important; padding: 0 !important; margin: 0 !important; } /* Titre de catégorie ("+ Cookies obligatoires" / "+ Mesure d'audience") Masqué pour alléger : avec 1-2 services seulement, les regrouper par catégorie ajoute du bruit sans valeur. On présente une liste plate. */ html body #tarteaucitronRoot #tarteaucitron .tarteaucitronTitle { display: none !important; } /* Section "Cookies obligatoires" entière (Tarteaucitron rend la mention informative). Masquée — l'info est déjà dans le disclaimer + Privacy Policy. */ html body #tarteaucitronRoot #tarteaucitron li#tarteaucitronServicesTitle_mandatory { display: none !important; } /* Ligne service : stack vertical pour cohérence d'alignement. Texte à gauche, boutons Allow/Deny centrés → même axe que la rangée globale "Tout accepter / Tout refuser". Un seul rythme visuel. */ html body #tarteaucitronRoot #tarteaucitron .tarteaucitronBorder .tarteaucitronLine { display: flex !important; flex-direction: column !important; align-items: stretch !important; gap: 14px !important; padding: 18px 0 !important; border-bottom: 1px solid var(--tac-border) !important; margin: 0 !important; } html body #tarteaucitronRoot #tarteaucitron .tarteaucitronBorder .tarteaucitronLine:last-child { border-bottom: none !important; } html body #tarteaucitronRoot #tarteaucitron .tarteaucitronBorder .tarteaucitronLine .tarteaucitronName { flex: 0 0 auto !important; text-align: left !important; min-width: 0 !important; } /* Asks (Autoriser / Interdire) : groupe aligné à gauche sous le titre. Tarteaucitron natif pose `float: right; margin: 7px 15px 0; text-align: right` à neutraliser. width: max-content empêche le stretch du parent flex column (align-items: stretch sinon étire à 100%). */ html body #tarteaucitronRoot #tarteaucitron .tarteaucitronBorder .tarteaucitronLine .tarteaucitronAsk { display: flex !important; flex-direction: row !important; gap: 10px !important; flex: 0 0 auto !important; width: max-content !important; max-width: 100% !important; align-self: flex-start !important; float: none !important; margin: 0 !important; text-align: left !important; } /* Tarteaucitron rend un orphelin "Ce site n'utilise aucun cookie nécessitant votre consentement" via #tarteaucitronNoServicesTitle. Il est marqué `display: none` inline mais notre flex le révèle. On force le hide. NB : ne PAS hider `li.tarteaucitronHidden` qui est posé par Tarteaucitron sur les sections accordion à l'init mais qui doit redevenir visible. */ html body #tarteaucitronRoot #tarteaucitron #tarteaucitronNoServicesTitle { display: none !important; } /* La section Mesure d'audience (analytic) hérite de la classe `tarteaucitronHidden` à l'init alors qu'elle a un service réel (GA4). Forcer son display + celui de ses children gtagLine pour qu'elle apparaisse comme les autres sections. */ html body #tarteaucitronRoot #tarteaucitron li#tarteaucitronServicesTitle_analytic, html body #tarteaucitronRoot #tarteaucitron li#gtagLine { display: list-item !important; } /* gtagLine : force flex column comme les autres .tarteaucitronLine */ html body #tarteaucitronRoot #tarteaucitron li#gtagLine.tarteaucitronLine { display: flex !important; flex-direction: column !important; align-items: stretch !important; } /* ────────────── Service titre H3 — "Google Analytics (GA4)" ──────────────── */ html body #tarteaucitronRoot #tarteaucitron .tarteaucitronH3 { display: block !important; font-family: var(--tac-font-display, 'Playfair Display', 'Times New Roman', serif) !important; font-size: 20px !important; font-weight: 700 !important; line-height: 1.3 !important; color: var(--tac-text) !important; margin: 0 0 6px !important; text-align: left !important; letter-spacing: normal !important; text-transform: none !important; } /* Description sous le H3 (cookies obligatoires : phrase explicative) */ html body #tarteaucitronRoot #tarteaucitron .tarteaucitronListCookies { display: block !important; font-family: 'Lora', Georgia, serif !important; font-size: 14px !important; font-weight: 400 !important; line-height: 1.6 !important; color: var(--tac-text-muted) !important; margin: 4px 0 0 !important; } /* Les liens "En savoir plus" / "Voir le site officiel" sous chaque service */ html body #tarteaucitronRoot #tarteaucitron .tarteaucitronName a { font-family: var(--tac-font-ui) !important; font-size: 12px !important; font-weight: 500 !important; color: var(--tac-text-muted) !important; text-decoration: none !important; border-bottom: 1px solid var(--tac-border-strong) !important; padding-bottom: 1px !important; transition: color 200ms cubic-bezier(0.22, 1, 0.36, 1), border-color 200ms cubic-bezier(0.22, 1, 0.36, 1) !important; } html body #tarteaucitronRoot #tarteaucitron .tarteaucitronName a:hover { color: var(--tac-accent) !important; border-color: var(--tac-accent) !important; } /* "Cookies obligatoires" : le H3 est utilisé pour la phrase d'explication (Tarteaucitron met l'explication dans un H3, ce qui est sémantiquement discutable mais hors de notre contrôle). On le re-rabaisse en body Lora. */ html body #tarteaucitronRoot #tarteaucitron #tarteaucitronServices_mandatory .tarteaucitronH3 { font-family: 'Lora', Georgia, serif !important; font-size: 14px !important; font-weight: 400 !important; line-height: 1.6 !important; color: var(--tac-text-muted) !important; } /* Le bouton "Autoriser" disabled de la section obligatoire = visible mais inactif */ html body #tarteaucitronRoot #tarteaucitron #tarteaucitronServices_mandatory .tarteaucitronAllow[disabled] { background: var(--tac-accent-soft) !important; border-color: var(--tac-accent-soft) !important; color: var(--tac-text-muted) !important; opacity: 1 !important; } /* ────────────── Footer "Enregistrer" — déjà stylé en btn-primary plus haut ─ */ /* La règle pill solide lavande pour #tarteaucitronSaveButton est posée plus haut (voir "Bouton Enregistrer"). On positionne ici son placement dans la modale + neutralise le `background: #fff` que Tarteaucitron met sur le wrapper #tarteaucitronSave (invisible en light, visible en dark). */ html body #tarteaucitronRoot #tarteaucitron #tarteaucitronSave { background: transparent !important; background-color: transparent !important; padding: 20px 0 8px !important; text-align: left !important; } html body #tarteaucitronRoot #tarteaucitron #tarteaucitronSaveButton { display: inline-block !important; margin: 0 !important; } /* @prefers-reduced-motion : neutralise transform/transition */ @media (prefers-reduced-motion: reduce) { html body #tarteaucitronRoot button#tarteaucitronAllAllowed:hover, html body #tarteaucitronRoot button#tarteaucitronAllAllowed2:hover, html body #tarteaucitronRoot button#tarteaucitronAllDenied:hover, html body #tarteaucitronRoot button#tarteaucitronAllDenied2:hover, html body #tarteaucitronRoot button.tarteaucitronCTAButton:hover { transform: none !important; } html body #tarteaucitronRoot * { transition: none !important; } } /* Crédit "Tarte au Citron" supprimé via `removeCredit: true` dans l'init. */