/* ============================================================================ Horse Discount — habillage du popup de consentement (tarteaucitron) Popup CENTRE (orientation:"middle") aux couleurs HD. Adapté du montage Rayssaguel (sauvegarde rayssaguel/backups/tarteaucitron_retire_20260724/). Palette HD : vert lime #9EC10A · gris #5A6169 · foncé #3F474A · Poppins ⚠️ SOURCE UNIQUE : l'ancien habillage "barre du bas" (fond #3F474A, texte blanc, 12 regles !important) a ete RETIRE de hd_theme_custom/views/css/hd-custom.css le 2026-07-28 (backup .bak-tacpopup-20260728) — il se battait avec ce fichier. Tout le style du consentement vit ICI desormais. Restent dans hd-custom.css les 2 regles generiques .tarteaucitronAllow/.tarteaucitronDeny (spec. plus faible que les notres, donc sans effet ici). ⚠️ CASCADE : on garde `useExternalCss:false` → la lib injecte SA css au runtime, donc APRES ce fichier. Plusieurs de ses regles ont une specificite EGALE au montage Rayssaguel (ex. `body #tarteaucitronRoot.tarteaucitronSize-middle div#tarteaucitronAlertBig{width:60%}` l.1343, et le scrim blanc l.12 en !important) → a egalite c'est la lib qui gagne (chargee apres). ⟹ On monte d'un cran en ciblant `div#tarteaucitronRoot` / `div#tarteaucitronAlertBig` (un element de plus) plutot que d'empiler des !important. Les !important restants ne servent QUE la ou la lib en met aussi. Pourquoi pas `useExternalCss:true` (montage Rayssaguel) : le HTML HD est cache 31 j par Cloudflare → une page encore en cache charge ce init SANS les css du head.tpl. Avec `false`, ces visiteurs ont au pire le style par defaut de la lib (popup centre, lisible) au lieu d'un popup nu. ============================================================================ */ /* -- Backdrop : la lib met un flou BLANC .25 !important (l.12) → on le fonce. Specificite montee (div#tarteaucitronRoot) car sa regle est a egalite. ---- */ html body div#tarteaucitronRoot.tarteaucitronSize-middle.tarteaucitronBeforeVisible::before, html body.tarteaucitron-modal-open div#tarteaucitronRoot::before { background: rgba(31, 36, 38, .58) !important; backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); opacity: 1 !important; } /* -- La carte du popup ------------------------------------------------------ */ /* Centrage force : la lib pose top/left/bottom/right:0 + margin:auto (l.1343) → on neutralise pour un vrai centrage viewport a toutes largeurs. */ html body div#tarteaucitronRoot.tarteaucitronSize-middle div#tarteaucitronAlertBig { position: fixed !important; top: 50% !important; left: 50% !important; right: auto !important; bottom: auto !important; margin: 0 !important; transform: translate(-50%, -50%) !important; z-index: 100001; /* au-dessus du scrim (::before z-index:100000) */ width: min(93vw, 500px); min-width: 0; /* la lib force min-width:285px */ height: auto; max-height: 92vh; overflow: hidden auto; /* PAS de scroll horizontal (overflow-y:auto seul bascule overflow-x en auto) */ box-sizing: border-box; background: #FFFFFF; color: #3F474A; border: 1px solid #E3E7E9; border-top: 5px solid #9EC10A; /* liseree de marque HD */ border-radius: 16px; box-shadow: 0 26px 70px rgba(0, 0, 0, .45); padding: 30px 30px 24px; text-align: center; font-family: "Poppins", Arial, Helvetica, sans-serif; } /* Layout flex UNIQUEMENT quand le popup est affiche (classe .tarteaucitronBeforeVisible). La lib affiche/masque AlertBig via un style INLINE (display:block/none). Un display:flex simple est donc ecrase (→ ordre DOM = Accepter avant Refuser). Le !important le bat pour activer `order`, MAIS scope a .tarteaucitronBeforeVisible : des que la lib masque (retire cette classe + inline display:none), la regle ne matche plus → le popup se masque bien. */ html body div#tarteaucitronRoot.tarteaucitronSize-middle.tarteaucitronBeforeVisible div#tarteaucitronAlertBig { display: flex !important; flex-wrap: wrap; justify-content: center; align-items: center; gap: 12px 14px; } /* Tous les enfants en border-box + bornes a 100% → aucun debordement horizontal (la lib met du padding + box-sizing:content-box sur le texte et les liens en flex 100%). */ html body div#tarteaucitronRoot.tarteaucitronSize-middle div#tarteaucitronAlertBig > * { box-sizing: border-box; max-width: 100%; } /* Titre de marque. La lib pose deja un ::before (l.1339, `content:var(--tacTitleBanner)` + font-size 35px l.1347) → on le remplace. */ html body div#tarteaucitronRoot.tarteaucitronSize-middle div#tarteaucitronAlertBig::before { /* Titre en texte pur : un emoji (🍪) tombe en carre tofu sur tout poste sans police emoji couleur (verifie : aucune ici) — pas de risque visuel sur un composant legal. Pour le remettre : content:"🍪 Votre confidentialite". */ content: "Votre confidentialité"; flex: 0 0 100%; order: 0; font-family: "Poppins", Arial, Helvetica, sans-serif; font-size: 22px; font-weight: 700; color: #3F474A; margin-bottom: 2px; } /* Texte du bandeau — pleine largeur (la lib force 21px + margin 10/30 l.1345) */ html body div#tarteaucitronRoot.tarteaucitronSize-middle span#tarteaucitronDisclaimerAlert { flex: 0 0 100%; order: 1; font-size: 15px; line-height: 1.5; color: #5A6169; margin: 0 auto 12px; padding: 0; /* neutralise le padding 0 30px de la lib */ max-width: 420px; text-align: center; } /* -- Boutons CTA (base commune) --------------------------------------------- `width:auto` bat le `width:80%` que la lib applique en @media ≤900px. font-size en !important car la lib met `font-size:16px!important` sur .tarteaucitronCTAButton. */ html body div#tarteaucitronRoot.tarteaucitronSize-middle button.tarteaucitronCTAButton { display: inline-block; box-sizing: border-box; width: auto; min-width: 175px; margin: 0; /* l'espacement est gere par le gap du flex */ padding: 13px 24px; font-family: "Poppins", Arial, Helvetica, sans-serif; font-size: 15.5px !important; font-weight: 700; line-height: 1.1; border: 2px solid transparent; border-radius: 10px; cursor: pointer; transition: filter .15s ease, background .15s ease, border-color .15s ease; } /* "Tout refuser" — A GAUCHE, fond blanc + fin liseree gris (outline). ⚖️ CNIL : refuser doit rester AUSSI accessible et lisible qu'accepter — meme hauteur, meme niveau, contraste 6,3:1. On ne le degrade pas visuellement. */ html body div#tarteaucitronRoot.tarteaucitronSize-middle button#tarteaucitronAllDenied2.tarteaucitronDeny { order: 2; min-width: 165px; padding: 13px 22px; /* meme hauteur qu'Accepter */ font-size: 15px !important; background: #FFFFFF; border: 1px solid #5A6169; color: #5A6169; } html body div#tarteaucitronRoot.tarteaucitronSize-middle button#tarteaucitronAllDenied2.tarteaucitronDeny:hover { background: #F2F4F5; border-color: #3F474A; color: #3F474A; } /* "Tout accepter" — A DROITE, vert lime plein, CTA principal. Texte #23292B (pas blanc) : contraste 7,1:1 sur le lime — le blanc tombait a 2,1:1. */ html body div#tarteaucitronRoot.tarteaucitronSize-middle button#tarteaucitronPersonalize2.tarteaucitronAllow { order: 3; min-width: 195px; padding: 14px 26px; font-size: 16px !important; background: #9EC10A; border-color: #9EC10A; color: #23292B; } html body div#tarteaucitronRoot.tarteaucitronSize-middle button#tarteaucitronPersonalize2.tarteaucitronAllow:hover { background: #8FB009; border-color: #8FB009; } /* "Personnaliser" + "Politique de confidentialite" — liens texte sobres */ html body div#tarteaucitronRoot.tarteaucitronSize-middle button#tarteaucitronCloseAlert { order: 4; flex: 0 0 100%; margin: 6px 0 0; } html body div#tarteaucitronRoot.tarteaucitronSize-middle button#tarteaucitronPrivacyUrl { order: 5; flex: 0 0 100%; margin: 0; } html body div#tarteaucitronRoot.tarteaucitronSize-middle button#tarteaucitronCloseAlert, html body div#tarteaucitronRoot.tarteaucitronSize-middle button#tarteaucitronPrivacyUrl { display: inline-block; background: transparent !important; border: 0 !important; color: #5A6169 !important; font-family: "Poppins", Arial, Helvetica, sans-serif; font-size: 13.5px !important; line-height: 1.3; text-decoration: underline; padding: 4px 10px; cursor: pointer; } html body div#tarteaucitronRoot.tarteaucitronSize-middle button#tarteaucitronCloseAlert:hover, html body div#tarteaucitronRoot.tarteaucitronSize-middle button#tarteaucitronPrivacyUrl:hover { color: #3F474A !important; } /* Liens dans le texte (politique de confidentialite) — lime, lisible sur blanc */ html body div#tarteaucitronRoot div#tarteaucitronAlertBig a { color: #6E870A !important; /* lime assombri : 4,6:1 sur blanc (le #9EC10A tombait a 2,1:1) */ text-decoration: underline; } /* -- Panneau detaille "Personnaliser" : accents de marque ------------------- (repris de l'ancien bloc hd-custom.css, contrastes corriges) */ html body div#tarteaucitronRoot div#tarteaucitron .tarteaucitronAllow { background: #9EC10A !important; color: #23292B !important; } html body div#tarteaucitronRoot div#tarteaucitron .tarteaucitronDeny { background: #5A6169 !important; color: #FFFFFF !important; } html body div#tarteaucitronRoot button#tarteaucitronSaveButton { background: #3F474A !important; color: #FFFFFF !important; border-radius: 8px; } html body div#tarteaucitronRoot button#tarteaucitronClosePanel { background: #3F474A !important; color: #FFFFFF !important; } html body div#tarteaucitronRoot span#tarteaucitronDotGreen { background-color: #9EC10A !important; } html body div#tarteaucitronRoot span#tarteaucitronDotYellow { background-color: #C5D96D !important; } /* Bandeau "small" jamais utilise (showAlertSmall:false) — ceinture et bretelles */ html body div#tarteaucitronRoot div#tarteaucitronAlertSmall { display: none !important; } /* -- Mobile : boutons pleine largeur, empiles (Refuser au-dessus d'Accepter) - */ @media screen and (max-width: 600px) { html body div#tarteaucitronRoot.tarteaucitronSize-middle div#tarteaucitronAlertBig { padding: 24px 20px 20px; } html body div#tarteaucitronRoot.tarteaucitronSize-middle button.tarteaucitronCTAButton { flex: 0 0 100%; width: 100%; min-width: 0; } }