/** * Correctifs au CSS de tarteaucitron.js — art-mella.com/blog * * Auteur : Olivier OSWALD (administrateur du site, pas propriétaire) * Projet : Modernisation de l'infrastructure WordPress art-mella.com * Documentation : dossier de projet local, docs/bascule-cookie-consent-cookieyes-2026-09-01.md * * Ce fichier n'est PAS un composant tiers : correctifs écrits pour ce chantier, * chargés APRÈS le CSS d'origine de tarteaucitron (voir am-cookie-consent.php). * * 14 septembre 2026 — retour terrain d'Olivier : * * 1. Boutons Accepter/Refuser à moitié cachés sur la catégorie « APIs » du panneau. * Cause identifiée dans le CSS d'origine (tarteaucitron.css) : .tarteaucitronName * et .tarteaucitronAsk sont mis en page par `float` (gauche/droite), dans un * conteneur .tarteaucitronLine en `overflow:hidden`. Cette technique ne s'adapte * pas de façon fiable à un texte de description sur plusieurs lignes — la * description de la catégorie APIs est la plus longue des quatre catégories. * Remplacé par une mise en page flexible, qui grandit avec son contenu au lieu * de le découper. Les !important sont nécessaires : le CSS de tarteaucitron * n'est pas chargé par WordPress mais injecté en JS à l'exécution (voir la note * dans am-cookie-consent.php) — son ordre d'arrivée dans le document n'est pas * garanti par rapport à celui-ci. * * Confirmé visuellement par Olivier le 14 septembre 2026 : correctif efficace. * * 1bis. Effet de bord du correctif ci-dessus, découvert le même jour : le message * « Ce site n'utilise aucun cookie nécessitant votre consentement » restait * affiché alors que 3 services sont bien rattachés. Cause : ce message vit dans * un
  • que * tarteaucitron masque lui-même en JS (style en ligne display:none) dès qu'un * service est ajouté au panneau (tarteaucitron.js:1223) — mais mon display:flex * !important ci-dessus s'appliquait aussi à CETTE ligne et l'emportait sur son * style en ligne sans !important, la rendant visible malgré tarteaucitron. * Exclu explicitement avec :not(), pour laisser tarteaucitron gérer normalement * ce cas précis (le message doit pouvoir réapparaître si un jour plus aucun * service n'est rattaché). */ /** * 0. Panneau affiché en fin de page sur mobile — signalé par Olivier le 16 * septembre 2026. Suite de l'investigation, deux temps : * * Premier essai (retiré ici) : forcer position:fixed !important sur * #tarteaucitronRoot ET #tarteaucitron, par prudence défensive, sans cause * certaine. N'a pas réglé Firefox Android (toujours en fin de page) et a * vraisemblablement AGGRAVÉ Chrome Android (bannière visible mais en * transparence, boutons non cliquables, apparaît/disparaît au scroll) : * position:fixed sur #tarteaucitronRoot lui fait créer son PROPRE contexte * d'empilement (règle spécifique à position:fixed, même sans z-index — * absolute ne le fait pas dans les mêmes conditions), ce qui change la façon * dont le z-index énorme de #tarteaucitron (2147483647) se compare aux autres * éléments de la page — cohérent avec un clic intercepté par autre chose. * Retiré : #tarteaucitronRoot retrouve son position:absolute d'origine. * * Cause vérifiée dans le CSS MOBILE natif de tarteaucitron (pas supposée) : * sa propre media query (max-width:767px) fixe SIMULTANÉMENT top:0, bottom:0 * ET height:100% !important sur #tarteaucitron — une déclaration * surcontrainte (avoir top + bottom + height en même temps sur un élément * positionné n'a pas de résolution unique selon la spec CSS), dont le * résultat concret PEUT différer d'un moteur à l'autre. Cohérent avec * Firefox et Chrome Android affichant deux symptômes différents pour le * même CSS. Résolu en abandonnant `bottom` au profit de `top` + `height` * seuls, qui définissent la boîte sans ambiguïté. * * ⚠️ Toujours pas de navigateur mobile réel ici pour vérifier — à confirmer * sur le téléphone d'Olivier après dépôt. */ @media screen and (max-width: 767px) { #tarteaucitron { bottom: auto !important; } } #tarteaucitron #tarteaucitronServices .tarteaucitronLine:not(#tarteaucitronNoServicesTitle) { overflow: visible !important; display: flex !important; flex-wrap: wrap !important; align-items: center !important; } #tarteaucitron #tarteaucitronServices .tarteaucitronLine .tarteaucitronName { float: none !important; width: auto !important; flex: 1 1 260px !important; } #tarteaucitron #tarteaucitronServices .tarteaucitronLine .tarteaucitronAsk { float: none !important; flex: 0 0 auto !important; } /** * 2. Message affiché à la place d'une vidéo YouTube bloquée (voir am_youtube.fallback * dans am-cookie-consent.php). Sobre, cohérent avec le jaune de tarteaucitron * (#fbd600) pour le bouton d'action, sans rien copier de son CSS interne. */ .am-tac-notice { background: #f5f5f5; border: 1px dashed #999999; border-radius: 6px; box-sizing: border-box; color: #333333; font-size: 14px; min-height: 180px; padding: 24px; text-align: center; } .am-tac-notice p { margin: 0 0 12px; } .am-tac-notice .tarteaucitronAllow { background: #FFE44C; /* jaune éclairci, cohérent avec le panneau — 15/09/2026 */ border: 0; border-radius: 4px; color: #000000; cursor: pointer; display: inline-block; font-size: 14px; padding: 8px 16px; } /** * 3. Centrage du titre visible du panneau — 15 septembre 2026, demande d'Olivier. * Ne pas confondre avec #tac_title (tarteaucitron.js:581/925) : celui-là porte * class="tac_visually-hidden", invisible par conception, réservé aux lecteurs * d'écran (aria-labelledby). Le titre RÉELLEMENT affiché est .tarteaucitronH1 * dans #tarteaucitronMainLineOffset (tarteaucitron.js:598) — c'est celui-ci. */ #tarteaucitron #tarteaucitronMainLineOffset { justify-content: center !important; } #tarteaucitron #tarteaucitronMainLineOffset .tarteaucitronName { flex: 1 1 100% !important; text-align: center !important; } /** * 4. Message affiché sur un formulaire dont la soumission est bloquée faute de * consentement reCAPTCHA (voir l'interception dans am-cookie-consent.php, * 15 septembre 2026). Même famille visuelle que .am-tac-notice, mais posé à * l'intérieur d'un
    existant plutôt qu'à la place d'un élément retiré. */ .am-tac-form-notice { background: #f5f5f5; border: 1px dashed #999999; border-radius: 6px; box-sizing: border-box; color: #333333; font-size: 14px; margin-top: 12px; padding: 16px 20px; text-align: center; } .am-tac-form-notice p { margin: 0 0 10px; } .am-tac-form-notice .tarteaucitronAllow { background: #FFE44C; /* jaune éclairci, cohérent avec le panneau — 15/09/2026 */ border: 0; border-radius: 4px; color: #000000; cursor: pointer; display: inline-block; font-size: 14px; padding: 8px 16px; } /** * 5. Habillage « dans l'esprit du site », 15 septembre 2026 — demande d'Olivier * (« un peu plus joueur », catégories plus lisibles, distinctes des libellés de * cookies). Couleurs et police reprises du thème RÉEL du site — lues dans le CSS * que Thrive génère sur la page d'accueil (variables --tcb-color-*, pas * inventées) : * - violet principal #7B5F9E (--tcb-color-0 — couleur des h1/h2 du site) * - orange d'accent #FF7C00 (--tcb-color-1) * - lavande #AE8DD7 (--tcb-color-4) * - lavande pâle #DAD6E0 (--tcb-color-7, fond doux) * Police d'en-tête : « Fredericka the Great » — la police manuscrite/BD que le * site utilise déjà pour TOUS ses propres titres (déjà chargée par Thrive sur * chaque page, aucun ajout de police nécessaire). * * Catégories vs libellés de service : tarteaucitron utilise la MÊME classe * (.tarteaucitronH3) pour le titre de catégorie ET le nom de chaque service — * vérifié dans le code source, pas supposé. Seul l'attribut aria-level diffère * (3 pour une catégorie, 4 pour un service) : c'est le seul sélecteur fiable * pour les distinguer visuellement, d'où son usage ci-dessous plutôt qu'une * classe. * * ⚠️ Pas de navigateur ici pour vérifier le rendu — à confirmer visuellement, * comme le reste des correctifs de ce fichier. * * Retours d'Olivier après premier essai (15 septembre 2026), appliqués ici : * les boutons jaunes d'origine de tarteaucitron conviennent mieux (cohérence * avec l'icône flottante — retirés, l'orange/violet ci-dessous) ; le halo violet * autour du panneau retiré ; l'icône flottante rétablie à son état d'origine * (pas de fond ajouté) ; seul le titre principal passe en Fredericka the Great, * avec un texte simplifié (« Gestion des cookies » — voir am-cookie-consent.php, * tarteaucitronCustomText). Les titres de catégorie, eux, gardent l'habillage * manuscrit/violet — non concernés par ce retour. */ /* Titre de CATÉGORIE (aria-level="3") — grand, manuscrit, couleur de marque : le vrai repère visuel qui manquait. */ #tarteaucitron .tarteaucitronH3[aria-level="3"] { font-family: "Fredericka the Great", cursive !important; font-size: 23px !important; font-weight: 400 !important; color: #7B5F9E !important; letter-spacing: 0.3px; } /* Nom de SERVICE / libellé de cookie (aria-level="4") — sobre, pour ne jamais se confondre avec un titre de catégorie. */ #tarteaucitron .tarteaucitronH3[aria-level="4"] { font-family: Muli, sans-serif !important; font-size: 15px !important; font-weight: 700 !important; color: #3b3b3b !important; } /* Description de catégorie, sous le titre manuscrit. */ #tarteaucitron #tarteaucitronServices .tarteaucitronMainLine .tarteaucitronName > span:not(.tarteaucitronH1), #tarteaucitron #tarteaucitronServices li.tarteaucitronLine:not(.tarteaucitronMainLine) > .tarteaucitronName > span:not(.tarteaucitronH3) { font-family: Muli, sans-serif; color: #6b6b6b; } /* Titre principal du panneau — texte simplifié en « Gestion des cookies » via tarteaucitronCustomText (voir am-cookie-consent.php), même police manuscrite que les titres de catégorie. Couleur non touchée : pas demandé, on laisse celle de tarteaucitron (généralement blanc sur son bandeau coloré). */ #tarteaucitron #tarteaucitronMainLineOffset .tarteaucitronH1 { font-family: "Fredericka the Great", cursive !important; font-size: 29px !important; /* 23px des catégories + 6px, demande du 15/09/2026 (+3px initial, +3px du 15/09/2026 en deux temps) */ color: #7B5F9E !important; /* même violet que les titres de catégorie, demande du 15/09/2026 */ } /* Lien « Politique de confidentialité » sous forme de bouton jaune, comme les autres boutons du panneau — demande du 15 septembre 2026. Deux id possibles selon l'endroit où tarteaucitron le rend (tarteaucitron.js:601-606 et 723-727) : celui du dialogue (dans le panneau) et celui du bandeau initial — les deux stylés à l'identique par prudence, sans savoir lequel Olivier voyait. */ #tarteaucitron #tarteaucitronPrivacyUrlDialog, #tarteaucitron #tarteaucitronPrivacyUrl { background: #FFE44C !important; border: 0 !important; border-radius: 4px !important; color: #000000 !important; cursor: pointer; display: inline-block !important; font-family: Muli, sans-serif !important; font-weight: 700 !important; padding: 8px 16px !important; text-decoration: none !important; } /* Contrôle « Tout déplier / Tout replier », inséré en JS juste avant la liste des catégories (voir am-cookie-consent.php, amTacToggleAllCategories) — demande du 15 septembre 2026. Même icône que les flèches de catégorie individuelles (.tarteaucitronPlus, glyphe ✛ de tarteaucitron.css), pour rester cohérent. */ .am-tac-toggle-all { background: none; border: 0; color: #7B5F9E; cursor: pointer; display: block; font-family: Muli, sans-serif; font-size: 14px; font-weight: 700; margin: 4px 20px 0; padding: 4px 0; text-align: left; } .am-tac-toggle-all:hover { text-decoration: underline; } /* Jaune plus clair sur tous les boutons/éléments jaunes du panneau — demande du 15 septembre 2026. Couleur choisie à partir de l'icône flottante tarteaucitron elle-même : décodage du PNG intégré en base64 dans tarteaucitron.min.js (élément de #tarteaucitronManager), qui ne contient que deux jaunes — #FFD900 (texte « TARTE AU CITRON ») et #CFD300 (ombre portée) — sans réel jaune pâle. #FFD900 éclairci de 30% vers le blanc donne #FFE44C, choisi avec Olivier pour rester dans le même esprit chromatique tout en étant nettement plus clair que le jaune natif de tarteaucitron (#fbd600). Sélecteurs couvrant tous les endroits où ce jaune natif apparaît (vérifiés dans tarteaucitron.css) : boutons Accepter/Refuser, bouton d'action du bandeau initial, bordure de ligne sélectionnée, indicateurs "tout accepter/tout refuser". */ #tarteaucitronRoot .tarteaucitronAllow, #tarteaucitronRoot .tarteaucitronDeny, #tarteaucitron #tarteaucitronServices .tarteaucitronLine .tarteaucitronAsk .tarteaucitronAllow, #tarteaucitron #tarteaucitronServices .tarteaucitronLine .tarteaucitronAsk .tarteaucitronDeny, #tarteaucitron #tarteaucitronServices #tarteaucitronServices_mandatory .tarteaucitronLine button.tarteaucitronAllow, #tarteaucitron #tarteaucitronServices .tarteaucitronLine.tarteaucitronIsAllowed .tarteaucitronAllow, #tarteaucitron #tarteaucitronServices .tarteaucitronLine.tarteaucitronIsDenied .tarteaucitronDeny, #tarteaucitronAlertBig #tarteaucitronPersonalize, #tarteaucitronAlertBig #tarteaucitronPersonalize2, #tarteaucitronAlertBig #tarteaucitronCloseAlert, .tarteaucitronCTAButton, .tarteaucitron-magic-block button, .tac_activate .tarteaucitronAllow, .tac_activate .tac_float .tarteaucitronAllow { background-color: #FFE44C !important; } /* Corrigé le 15 septembre 2026 (signalé par Olivier : fond jaune envahissant tout le haut du panneau) : #tarteaucitronMainLineOffset — la ligne d'en-tête, titre + "Préférences pour tous les services" — porte AUSSI .tarteaucitronLine et .tarteaucitronIsAllowed/IsDenied (reflet de l'état global "tout accepter/refuser", vérifié dans le DOM réel). Le CSS natif de tarteaucitron ne met qu'une bordure sur ce sélecteur, jamais un fond — c'est justement ce qui manquait ici : mettre un fond revient à colorer toute la ligne d'en-tête, pas seulement une ligne de catégorie. D'où le :not() pour l'exclure explicitement. */ #tarteaucitron #tarteaucitronServices .tarteaucitronLine.tarteaucitronIsAllowed:not(#tarteaucitronMainLineOffset), #tarteaucitron #tarteaucitronServices .tarteaucitronLine.tarteaucitronIsDenied:not(#tarteaucitronMainLineOffset) { border-color: #FFE44C !important; } #tarteaucitron #tarteaucitronServices #tarteaucitronAllAllowed.tarteaucitronIsSelected, #tarteaucitron #tarteaucitronServices #tarteaucitronAllDenied.tarteaucitronIsSelected, #tarteaucitron #tarteaucitronServices #tarteaucitronAllDenied2.tarteaucitronIsSelected { background-color: #FFE44C !important; } /* Indentation des lignes de cookie/service SOUS le titre de leur catégorie — décalage d'une tabulation, pour que la hiérarchie catégorie → cookies soit visible d'un coup d'œil, pas seulement par la police. Chaque catégorie construit sa propre