/* ============================================================ TARTEAUCITRON AUX COULEURS DU SITE (18/07/2026, demande Nicolas) ------------------------------------------------------------ Surcharges du CSS par défaut (tarteaucitron/css/tarteaucitron.css) avec la charte de theme-moderne.css : variables --m-* (fallbacks en dur au cas où), Inter, cartes sombres, rouge #e5484d, radius 10-12px. CHARGÉ APRÈS tarteaucitron.css dans le header (+ useExternalCss:true dans l'init pour que la lib ne ré-injecte pas son CSS après nous). !important nécessaires : tarteaucitron.css utilise des doubles ids. ?v= à BUMPER à chaque modif (cache CSS 7 j du .htaccess). ============================================================ */ /* ---------- police héritée du site partout ---------- */ #tarteaucitronRoot, #tarteaucitronRoot * { /* 05/08/2026 : repli aux memes metriques (fonts/polices-locales.css). La modale est le PREMIER bloc visible au chargement — c est elle qu on voit sur la pellicule de PageSpeed — donc sa police compte autant que le reste. */ font-family: 'Inter', 'Inter repli', system-ui, -apple-system, 'Segoe UI', Arial, sans-serif !important; } /* ---------- L'EN-TÊTE DE LA MODALE : LE « B », PLUS D'EMOJIS ---------- 26/07/2026 (Nicolas : « enlève les icônes cookies, elles sont moches, mets le B à la place des deux »). La lib affiche « ☝ 🍪 » en haut de la fenêtre : ce n'est PAS du HTML, c'est le contenu du pseudo-élément #tarteaucitronAlertBig::before, alimenté par la variable CSS --tacTitleBanner que tarteaucitron.js pose sur (l.548-551) à partir de tarteaucitron.lang.middleBarHead. On ne peut donc pas le retirer du DOM : on écrase le pseudo-élément. ⚠ On vide le content ('' ) et on peint l'image en BACKGROUND plutôt que content:url(...) : avec content:url() l'image sort à sa taille NATIVE et ne se redimensionne pas de façon fiable. En fond, on maîtrise taille et centrage. ⚠ CHEMIN RELATIF À LA FEUILLE (css/), pas à la page : le ne s'applique PAS aux url() du CSS -> « ../image/ ». Vrai en local comme en prod, css/ et image/ étant tous deux à la racine du site. Fichier 96x96 pour un affichage 46 px (net en écran retina), recadré et réduit depuis image/bestforfait-b-transparent.png (1024x1024, 20 Ko) ; jumeau .png.webp servi automatiquement par le .htaccess (gain 42 %). */ #tarteaucitronRoot.tarteaucitronSize-middle #tarteaucitronAlertBig::before, #tarteaucitronRoot.tarteaucitronSize-popup #tarteaucitronAlertBig::before { content: "" !important; display: block !important; width: 46px !important; height: 46px !important; margin: 0 auto 4px auto !important; background: url("../image/bestforfait-b-96.png") no-repeat center center !important; background-size: contain !important; } /* ---------- LE BANDEAU (bas depuis le 10/08/2026, centré avant) ---------- */ #tarteaucitronRoot #tarteaucitronAlertBig { background: var(--m-card, #2a2a32) !important; color: var(--m-txt, #f0f0f0) !important; border: 1px solid var(--m-line, #3a3a44) !important; border-radius: 12px !important; box-shadow: 0 14px 40px -14px rgba(0, 0, 0, .55) !important; padding: 26px 28px !important; } /* ⚠ 10/08/2026 — LE BANDEAU DÉBORDAIT DE 58 px À DROITE en mode « bottom ». Mesuré au navigateur à 1440 px : élément à left:0 / right:0, donc largeur calculée 1425 px, PLUS nos 56 px de padding et 2 px de bordures = 1483 px de boîte. Soit right:-58px, avec le lien « Politique de confidentialité » qui sortait de l'écran. La faute n'est pas dans la lib : c'est NOTRE padding ci-dessus, posé quand le bandeau était une modale centrée à largeur contrainte — là, le débordement ne se voyait pas. Corrigé en border-box, et seulement pour les modes pleine largeur : la modale centrée garde son calcul d'origine, on ne touche pas à ce qui marchait. */ #tarteaucitronRoot.tarteaucitronSize-bottom #tarteaucitronAlertBig, #tarteaucitronRoot.tarteaucitronSize-top #tarteaucitronAlertBig { box-sizing: border-box !important; } #tarteaucitronRoot #tarteaucitronDisclaimerAlert { color: var(--m-txt, #f0f0f0) !important; font-size: 15px !important; line-height: 1.5 !important; } /* voile derrière la modale : un peu plus sombre, cohérent au thème */ #tarteaucitronRoot #tarteaucitronBack { background: #000 !important; opacity: .65 !important; } /* ============================================================ 🔴 LE LOGO ET LE MENU PASSAIENT PAR-DESSUS LA MODALE (bug signalé par Nicolas le 26/07/2026, capture à l'appui) ------------------------------------------------------------ En mode "orientation":"middle" (notre init), le voile flouté n'est PAS #tarteaucitronBack (il reste display:none) : c'est le PSEUDO-ÉLÉMENT ::before de #tarteaucitronRoot, posé à z-index:100000 par tarteaucitron.css (l.20 et l.1342). Or le site monte plus haut que ça : #logo -> z-index 999999 (theme-moderne.css l.82) nav -> z-index 200000 (css.css l.33) #tarteaucitronRoot n'ayant pas de z-index propre (auto), il ne crée AUCUN contexte d'empilement : les trois valeurs se comparent donc dans le MÊME contexte, et 999999 > 200000 > 100000. Résultat : la bannière, le logo et la barre de menu restaient nets et cliquables au-dessus du flou. ➜ On remonte le voile au-dessus de tout le site. Il reste SOUS #tarteaucitronAlertBig (2147483645) et sous le panneau « Personnaliser » (2147483647), qui doivent rester lisibles. ⚠ Ne pas « corriger » en baissant #logo ou nav : le menu fixé au scroll doit garder ses valeurs hautes face au contenu de page. ============================================================ */ html body.tarteaucitron-modal-open div#tarteaucitronRoot::before, html body div#tarteaucitronRoot.tarteaucitronSize-middle.tarteaucitronBeforeVisible::before, html body .tarteaucitronSize-middle.tarteaucitronBeforeVisible::before { z-index: 2147483000 !important; } /* ----- les 2 CTA : MÊME taille/forme (exigence CNIL : refus aussi facile qu'accepter) — accepter en rouge plein, refuser en carte bordée, tous deux au même niveau ----- */ #tarteaucitronRoot .tarteaucitronCTAButton { border-radius: var(--m-radius, 10px) !important; padding: 11px 22px !important; font-size: 14px !important; font-weight: 600 !important; margin: 12px 6px 0 6px !important; transition: background .15s ease, border-color .15s ease !important; } #tarteaucitronRoot #tarteaucitronPersonalize2 { background: var(--m-red, #e5484d) !important; color: #fff !important; border: 1px solid var(--m-red, #e5484d) !important; } #tarteaucitronRoot #tarteaucitronPersonalize2:hover, #tarteaucitronRoot #tarteaucitronPersonalize2:focus { background: var(--m-red2, #c0393e) !important; border-color: var(--m-red2, #c0393e) !important; } #tarteaucitronRoot #tarteaucitronAllDenied2 { background: var(--m-bg, #1c1c22) !important; color: var(--m-txt, #f0f0f0) !important; border: 1px solid var(--m-txt-3, #8888a0) !important; } #tarteaucitronRoot #tarteaucitronAllDenied2:hover, #tarteaucitronRoot #tarteaucitronAllDenied2:focus { border-color: var(--m-txt, #f0f0f0) !important; background: var(--m-line, #3a3a44) !important; } /* ----- « Personnaliser » + « Politique de confidentialité » : actions secondaires, discrètes sous les CTA ----- */ #tarteaucitronRoot #tarteaucitronCloseAlert, #tarteaucitronRoot #tarteaucitronPrivacyUrl { background: transparent !important; color: var(--m-txt-2, #c0c0c8) !important; border: none !important; text-decoration: underline !important; text-underline-offset: 3px !important; font-size: 13px !important; margin: 14px 8px 0 8px !important; padding: 4px 2px !important; } /* CENTRAGE de « Politique de confidentialité » (26/07/2026, retour Nicolas). tarteaucitron.css met CE bouton-là en display:block (les 3 CTA au-dessus sont en inline-block, donc centrés par le text-align:center de la modale). Un bloc ne suit pas text-align : il occupait toute la largeur et son texte partait à GAUCHE, seul élément de travers de la fenêtre. Largeur ramenée au contenu + marges auto = vraiment centré, sans toucher aux autres boutons. */ #tarteaucitronRoot #tarteaucitronAlertBig #tarteaucitronPrivacyUrl { display: block !important; width: -moz-fit-content !important; width: fit-content !important; max-width: 100% !important; margin: 14px auto 0 auto !important; text-align: center !important; } #tarteaucitronRoot #tarteaucitronCloseAlert:hover, #tarteaucitronRoot #tarteaucitronPrivacyUrl:hover { color: var(--m-red-soft, #f07478) !important; } /* ---------- LE PANNEAU « PERSONNALISER » ---------- */ #tarteaucitronRoot #tarteaucitron { background: transparent !important; } #tarteaucitronRoot #tarteaucitron #tarteaucitronClosePanel { background: var(--m-red, #e5484d) !important; color: #fff !important; border-radius: 12px 12px 0 0 !important; border: 0 !important; font-weight: 600 !important; } #tarteaucitronRoot #tarteaucitron #tarteaucitronMainLineOffset, #tarteaucitronRoot #tarteaucitron #tarteaucitronServices { background: var(--m-bg, #1c1c22) !important; border: 1px solid var(--m-line, #3a3a44) !important; } #tarteaucitronRoot #tarteaucitron #tarteaucitronServices { border-radius: 0 0 12px 12px !important; box-shadow: 0 14px 40px -14px rgba(0, 0, 0, .55) !important; } /* bandeau titre « Préférences pour tous les services » */ #tarteaucitronRoot #tarteaucitron .tarteaucitronMainLine { background: var(--m-card, #2a2a32) !important; border-color: var(--m-line, #3a3a44) !important; } #tarteaucitronRoot #tarteaucitron .tarteaucitronH1, #tarteaucitronRoot #tarteaucitron .tarteaucitronH2 { color: var(--m-txt, #f0f0f0) !important; } /* lignes de services et titres de catégories */ #tarteaucitronRoot #tarteaucitron .tarteaucitronTitle button, #tarteaucitronRoot #tarteaucitron .tarteaucitronTitle .asCatToggleBtn, #tarteaucitronRoot #tarteaucitron .catToggleBtn { background: var(--m-card, #2a2a32) !important; color: var(--m-txt, #f0f0f0) !important; border-radius: 8px !important; } #tarteaucitronRoot #tarteaucitron #tarteaucitronInfo, #tarteaucitronRoot #tarteaucitron .tarteaucitronInfoBox { background: var(--m-card, #2a2a32) !important; color: var(--m-txt-2, #c0c0c8) !important; border-color: var(--m-line, #3a3a44) !important; } #tarteaucitronRoot #tarteaucitron .tarteaucitronLine { background: var(--m-card, #2a2a32) !important; border-left: 0 !important; } #tarteaucitronRoot #tarteaucitron .tarteaucitronLine .tarteaucitronH3 { color: var(--m-txt, #f0f0f0) !important; } #tarteaucitronRoot #tarteaucitron .tarteaucitronListCookies, #tarteaucitronRoot #tarteaucitron .tarteaucitronCookiesList, #tarteaucitronRoot #tarteaucitron .tarteaucitronHidden { background: var(--m-bg, #1c1c22) !important; color: var(--m-txt-2, #c0c0c8) !important; } /* ----- boutons Autoriser / Interdire du panneau : voir la section « LISIBILITÉ » en fin de fichier (refonte 18/07 soir : les boutons jaunes d'usine + textes #333 étaient illisibles sur nos fonds). ----- */ #tarteaucitronRoot #tarteaucitron .tarteaucitronAllow, #tarteaucitronRoot #tarteaucitron .tarteaucitronDeny { border-radius: 8px !important; font-weight: 600 !important; } /* ---------- ICÔNE FLOTTANTE (rouvrir ses choix) ---------- même langage visuel que les pastilles sociales du menu (.soc-ic : carte sombre, bordure, hover rouge) */ #tarteaucitronRoot #tarteaucitronIcon { background: var(--m-card, #2a2a32) !important; border: 1.5px solid var(--m-line, #3a3a44) !important; border-radius: var(--m-radius, 10px) !important; transition: border-color .15s ease, transform .15s ease !important; } #tarteaucitronRoot #tarteaucitronIcon:hover { border-color: var(--m-red, #e5484d) !important; transform: translateY(-1px); } #tarteaucitronRoot #tarteaucitronIcon #tarteaucitronManager { background: transparent !important; padding: 6px !important; } /* CADENAS ROUGE (18/07, Nicolas) : le PNG jaune d'usine est masqué et remplacé par un cadenas dessiné au ROUGE du site (--m-red) via mask-image (SVG data-URI monochrome → recoloré par background-color, donc suit le thème). */ #tarteaucitronRoot #tarteaucitronIcon #tarteaucitronManager img { display: none !important; } #tarteaucitronRoot #tarteaucitronIcon #tarteaucitronManager { width: 50px !important; height: 50px !important; box-sizing: border-box !important; background-color: var(--m-red, #e5484d) !important; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 1a5 5 0 0 0-5 5v3H6a2 2 0 0 0-2 2v9a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-9a2 2 0 0 0-2-2h-1V6a5 5 0 0 0-5-5zm3 8H9V6a3 3 0 0 1 6 0v3z'/%3E%3C/svg%3E") no-repeat center; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 1a5 5 0 0 0-5 5v3H6a2 2 0 0 0-2 2v9a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-9a2 2 0 0 0-2-2h-1V6a5 5 0 0 0-5-5zm3 8H9V6a3 3 0 0 1 6 0v3z'/%3E%3C/svg%3E") no-repeat center; -webkit-mask-size: 30px 30px !important; mask-size: 30px 30px !important; } /* ---------- petite fenêtre « alerte » éventuelle + divers ---------- */ #tarteaucitronRoot #tarteaucitronAlertSmall { background: var(--m-card, #2a2a32) !important; border-radius: var(--m-radius, 10px) !important; } #tarteaucitronRoot .tarteaucitronCheck, #tarteaucitronRoot .tarteaucitronCross { filter: none !important; } /* ============================================================ LISIBILITÉ (18/07 au soir, retour Nicolas : textes gris foncé illisibles + boutons jaunes d'usine) ------------------------------------------------------------ Le CSS par défaut fait hériter color:#333 à presque tout le panneau et laisse les CTA jaunes à texte noir. Ici : BASE claire pour TOUT (les deux fenêtres), puis ré-affirmation des accents. L'ordre compte : ces règles sont en FIN de fichier exprès. ============================================================ */ /* 1) base : tout texte en gris clair du thème */ #tarteaucitronRoot #tarteaucitron, #tarteaucitronRoot #tarteaucitron *, #tarteaucitronRoot #tarteaucitronAlertBig, #tarteaucitronRoot #tarteaucitronAlertBig * { color: var(--m-txt-2, #c0c0c8) !important; } /* 2) titres, noms de services et texte principal : blanc franc */ #tarteaucitronRoot #tarteaucitron .tarteaucitronH1, #tarteaucitronRoot #tarteaucitron .tarteaucitronH2, #tarteaucitronRoot #tarteaucitron .tarteaucitronH3, #tarteaucitronRoot #tarteaucitron .tarteaucitronName b, #tarteaucitronRoot #tarteaucitron .tarteaucitronTitle button, #tarteaucitronRoot #tarteaucitron .tarteaucitronTitle .asCatToggleBtn, #tarteaucitronRoot #tarteaucitron .catToggleBtn, #tarteaucitronRoot #tarteaucitron #tarteaucitronClosePanel, #tarteaucitronRoot #tarteaucitronDisclaimerAlert { color: var(--m-txt, #f0f0f0) !important; } /* 3) boutons d'ACTION (Autoriser / Tout accepter / Enregistrer) : rouge du site, texte BLANC — cohérents avec la modale */ #tarteaucitronRoot #tarteaucitron .tarteaucitronAllow, #tarteaucitronRoot #tarteaucitron .tarteaucitronAllow span, #tarteaucitronRoot #tarteaucitronSaveButton { background: var(--m-red, #e5484d) !important; color: #fff !important; border: 1px solid var(--m-red, #e5484d) !important; } #tarteaucitronRoot #tarteaucitron .tarteaucitronAllow:hover, #tarteaucitronRoot #tarteaucitronSaveButton:hover { background: var(--m-red2, #c0393e) !important; border-color: var(--m-red2, #c0393e) !important; } /* le span interne ne doit pas repeindre un fond par-dessus */ #tarteaucitronRoot #tarteaucitron .tarteaucitronAllow span { background: transparent !important; border: none !important; } /* 4) boutons Interdire / Tout refuser du panneau : carte sombre bordée, texte blanc — même langage que « Tout refuser » modale */ #tarteaucitronRoot #tarteaucitron .tarteaucitronDeny, #tarteaucitronRoot #tarteaucitron .tarteaucitronDeny span { background: var(--m-bg, #1c1c22) !important; color: var(--m-txt, #f0f0f0) !important; border: 1px solid var(--m-txt-3, #8888a0) !important; } #tarteaucitronRoot #tarteaucitron .tarteaucitronDeny span { background: transparent !important; border: none !important; } #tarteaucitronRoot #tarteaucitron .tarteaucitronDeny:hover { background: var(--m-line, #3a3a44) !important; border-color: var(--m-txt, #f0f0f0) !important; } /* état sélectionné « interdit » : liseré rouge discret */ #tarteaucitronRoot #tarteaucitron .tarteaucitronIsSelected.tarteaucitronDeny { border-color: var(--m-red, #e5484d) !important; } /* 5) barre du bas « Enregistrer » : blanche par défaut -> carte sombre */ #tarteaucitronRoot #tarteaucitron #tarteaucitronSave { background: var(--m-card, #2a2a32) !important; border-top: 1px solid var(--m-line, #3a3a44) !important; } /* 6) liens « En savoir plus » / « Voir le site officiel » + statut */ #tarteaucitronRoot #tarteaucitron .tarteaucitronReadmoreInfo, #tarteaucitronRoot #tarteaucitron .tarteaucitronReadmoreOfficial { color: var(--m-txt-2, #c0c0c8) !important; text-decoration: underline !important; text-underline-offset: 3px !important; } #tarteaucitronRoot #tarteaucitron .tarteaucitronReadmoreInfo:hover, #tarteaucitronRoot #tarteaucitron .tarteaucitronReadmoreOfficial:hover { color: var(--m-red-soft, #f07478) !important; } /* 7) bouton « Politique de confidentialité » DU PANNEAU (fond blanc d'usine) : même style discret que celui de la modale */ #tarteaucitronRoot #tarteaucitron #tarteaucitronPrivacyUrlDialog { background: transparent !important; color: var(--m-txt, #f0f0f0) !important; border: 1px solid var(--m-txt-3, #8888a0) !important; border-radius: 8px !important; } #tarteaucitronRoot #tarteaucitron #tarteaucitronPrivacyUrlDialog:hover { border-color: var(--m-red, #e5484d) !important; } /* 8) ré-affirmation des CTA de la MODALE après la base clair (la règle « 1) » repeignait leur blanc en gris clair — cascade à égalité de spécificité = le dernier gagne, donc ceci reste EN FIN de fichier) */ #tarteaucitronRoot #tarteaucitronAlertBig #tarteaucitronPersonalize2, #tarteaucitronRoot #tarteaucitronAlertBig #tarteaucitronPersonalize2 * { color: #fff !important; } #tarteaucitronRoot #tarteaucitronAlertBig #tarteaucitronAllDenied2, #tarteaucitronRoot #tarteaucitronAlertBig #tarteaucitronAllDenied2 * { color: var(--m-txt, #f0f0f0) !important; }