/* Ostéobio, habillage du consentement tarteaucitron : popin centree partout, SAUF bandeau bas de page sans overlay sur les pages legales (rgpd, mentions-legales - liste PHP dans inc/tarteaucitron.php), exigence CNIL pour garder la politique de confidentialite lisible et scrollable avant tout choix. Textes et couleurs communs aux deux modes ; seules les regles de mise en page sont scopees par orientation (classe .tarteaucitronSize-middle ou .tarteaucitronSize-bottom posee automatiquement par tarteaucitron.js sur #tarteaucitronRoot selon le parametre orientation). Voir DECISIONS.md pour le detail. */ /* Overlay sombre a 50% sur le contenu : uniquement en mode popin (.tarteaucitronSize-middle) et sur le panneau detaille (ouvert via "Personnaliser", quel que soit le mode). Le bandeau bas de page (.tarteaucitronSize-bottom) n'a volontairement aucun overlay - c'est ce qui garde le contenu de la page entierement lisible et scrollable. Specificite : tarteaucitron.js reinjecte sa PROPRE feuille de style dynamiquement en fin de pendant son load() interne (comportement inconditionnel, meme avec useExternalCss:false) - notre feuille arrive donc AVANT la sienne dans le DOM au moment du rendu final malgre l'ordre de dependance wp_enqueue_style. On neutralise ce probleme d'ordre de cascade en donnant a ces regles une specificite strictement superieure (ajout d'un selecteur [id] redondant) plutot que de compter sur l'ordre des . */ html body #tarteaucitronRoot[id].tarteaucitronSize-middle.tarteaucitronBeforeVisible::before, html body.tarteaucitron-modal-open div#tarteaucitronRoot[id]::before { background: rgba(10, 22, 40, 0.5) !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; } /* Panneau de detail (backdrop separe #tarteaucitronBack) : meme teinte, dans les deux modes. */ #tarteaucitronBack { background-color: #0A1628 !important; opacity: 0.5 !important; } /* ── Textes et couleurs communs (popin et bandeau) ────────────────── */ /* Titre visible. Ajoute en CSS plutot que via lang.title pour ne pas modifier le titre du panneau detaille, qui partage la meme cle (voir osteobio-tarteaucitron-init.js). */ #tarteaucitronAlertBig #tarteaucitronDisclaimerAlert::before { content: "Cookies et confidentialité"; display: block; font-weight: 700; font-size: 19px; color: #0A1628; margin-bottom: 12px; } #tarteaucitronAlertBig, #tarteaucitronAlertBig #tarteaucitronDisclaimerAlert { color: #0A1628 !important; } #tarteaucitronAlertBig strong { color: #0A1628 !important; } #tarteaucitronAlertBig #tarteaucitronPrivacyUrl, #tarteaucitronAlertBig #tarteaucitronPrivacyUrlDialog, #tarteaucitronAlertBig a { color: #0A1628 !important; text-decoration: underline; } /* "Tout accepter" : bouton plein jaune, texte navy gras - commun aux deux modes, seules la largeur/position different plus bas. */ #tarteaucitronRoot button#tarteaucitronPersonalize2.tarteaucitronCTAButton.tarteaucitronAllow { background-color: #F5C04C !important; color: #0A1628 !important; border: 1px solid #F5C04C !important; font-weight: 700 !important; font-size: 16px !important; padding: 14px 28px !important; border-radius: 8px !important; text-align: center !important; box-sizing: border-box !important; } /* "Continuer sans accepter" : refus au premier niveau, un clic, parfaitement lisible mais visuellement plus discret (lien souligne) - commun aux deux modes. */ #tarteaucitronRoot button#tarteaucitronAllDenied2.tarteaucitronCTAButton.tarteaucitronDeny { background-color: transparent !important; color: #0A1628 !important; border: none !important; text-decoration: underline !important; font-weight: 400 !important; font-size: 14px !important; padding: 8px !important; text-align: center !important; box-sizing: border-box !important; } /* "Personnaliser" : bouton tertiaire discret, ouvre le panneau detaille par service - commun aux deux modes. */ #tarteaucitronRoot button#tarteaucitronCloseAlert { color: #0A1628 !important; border: 1px solid #0A1628 !important; background-color: transparent !important; font-size: 13px !important; padding: 8px 16px !important; border-radius: 8px !important; box-sizing: border-box !important; text-align: center !important; } /* ── Mode popin centree (toutes les pages sauf legales) ───────────── */ /* Fond blanc, radius, largeur max 520px desktop, marges sur mobile. */ #tarteaucitronRoot.tarteaucitronSize-middle #tarteaucitronAlertBig { background-color: #ffffff !important; color: #0A1628 !important; border-radius: 16px !important; max-width: 520px !important; width: calc(100% - 40px) !important; padding: 32px !important; font-family: inherit !important; box-sizing: border-box !important; } @media (max-width: 600px) { #tarteaucitronRoot.tarteaucitronSize-middle #tarteaucitronAlertBig { width: calc(100% - 24px) !important; max-width: none !important; padding: 24px !important; } } /* Boutons empiles pleine largeur, hierarchie visuelle par ordre d'apparition (accepter dominant en haut, refuser discret, personnaliser tertiaire en bas). */ .tarteaucitronSize-middle button#tarteaucitronPersonalize2.tarteaucitronCTAButton.tarteaucitronAllow { width: 100% !important; display: block !important; margin: 20px 0 14px !important; } .tarteaucitronSize-middle button#tarteaucitronAllDenied2.tarteaucitronCTAButton.tarteaucitronDeny { width: 100% !important; display: block !important; margin: 0 0 12px !important; } .tarteaucitronSize-middle button#tarteaucitronCloseAlert { width: 100% !important; display: block !important; } /* ── Mode bandeau non bloquant (pages legales : rgpd, mentions-legales) ── Bandeau epais fixe en bas de l'ecran, fond blanc, ombre portee vers le haut, sans overlay (cf regle overlay plus haut, non scopee a ce mode). Contenu aligne sur la largeur max du site (variable --container-max du theme, cf assets/css/main.css) via un padding horizontal calcule plutot qu'un wrapper interne (tarteaucitron ne fournit pas de wrapper dans son HTML genere). Titre/message a gauche, boutons a droite sur desktop ; tout empile en colonne sur mobile, hauteur plafonnee a 40% du viewport avec defilement interne si besoin. ────────────────────── */ #tarteaucitronRoot.tarteaucitronSize-bottom #tarteaucitronAlertBig { background-color: #ffffff !important; color: #0A1628 !important; box-shadow: 0 -8px 28px rgba(10, 22, 40, 0.18) !important; border-top: 1px solid rgba(10, 22, 40, 0.08) !important; width: 100% !important; max-width: none !important; box-sizing: border-box !important; font-family: inherit !important; padding-top: 24px !important; padding-bottom: 24px !important; padding-left: max(24px, calc((100% - 1200px) / 2)) !important; padding-right: max(24px, calc((100% - 1200px) / 2)) !important; display: flex !important; flex-wrap: wrap !important; align-items: center !important; gap: 14px 24px !important; } .tarteaucitronSize-bottom #tarteaucitronAlertBig #tarteaucitronDisclaimerAlert { /* Le CSS vendor (tarteaucitron.min.css) met ce span en display:inline-flex pour les orientations bottom/top (contre display:block pour middle) - sans cette surcharge, le titre (::before) et le texte du message se retrouvent cote a cote au lieu de s'empiler, la propriete flex du parent s'appliquant a ses propres enfants (::before + noeud texte) au lieu du comportement de bloc attendu. */ display: block !important; flex: 1 1 320px !important; margin: 0 !important; } .tarteaucitronSize-bottom #tarteaucitronAlertBig #tarteaucitronDisclaimerAlert::before { margin-bottom: 6px !important; } /* Cluster des boutons a droite : marge automatique a gauche du premier bouton pour pousser tout le groupe (accepter + refuser + personnaliser + lien politique) a droite, sans wrapper HTML disponible. */ .tarteaucitronSize-bottom button#tarteaucitronPersonalize2.tarteaucitronCTAButton.tarteaucitronAllow { margin: 0 0 0 auto !important; white-space: nowrap; } .tarteaucitronSize-bottom button#tarteaucitronAllDenied2.tarteaucitronCTAButton.tarteaucitronDeny, .tarteaucitronSize-bottom button#tarteaucitronCloseAlert { margin: 0 !important; white-space: nowrap; } @media (max-width: 780px) { #tarteaucitronRoot.tarteaucitronSize-bottom #tarteaucitronAlertBig { /* flex-wrap:nowrap est indispensable ici : avec flex-direction column ET une max-height contrainte, un flex-wrap:wrap (herite de la regle desktop ci-dessus) ferait deborder le contenu en NOUVELLE COLONNE a droite (perpendiculaire a l'axe principal en mode colonne) plutot qu'en defilement vertical - d'ou le defilement interne (overflow-y) plutot qu'un wrap. */ flex-direction: column !important; flex-wrap: nowrap !important; align-items: stretch !important; max-height: 40vh !important; overflow-y: auto !important; padding: 20px !important; gap: 10px !important; } .tarteaucitronSize-bottom button#tarteaucitronPersonalize2.tarteaucitronCTAButton.tarteaucitronAllow, .tarteaucitronSize-bottom button#tarteaucitronAllDenied2.tarteaucitronCTAButton.tarteaucitronDeny, .tarteaucitronSize-bottom button#tarteaucitronCloseAlert { margin: 0 !important; width: 100% !important; white-space: normal; } }