/* ========================================================================== consent.css — bandeau de consentement cookies (GA4), voir assets/js/consent.js Meme langage que la barre de navigation (appnav.css) : carte blanche, coins 14 px, ombre douce, Inter / Outfit, encre #0e104b, accent #191d88. Daltonisme (Remi) : aucun etat ne repose sur la seule teinte ; les deux choix sont deux boutons de meme taille, libelles explicites. ========================================================================== */ .mcons { position: fixed; z-index: 1100; left: 16px; bottom: 16px; width: min(420px, calc(100vw - 32px)); font-family: var(--tg-body-font-family, 'Inter', sans-serif); transition: opacity .2s ease, transform .2s ease; } .mcons[hidden] { display: none; } .mcons.is-out { opacity: 0; transform: translateY(8px); } .mcons__card { background: #fff; color: #0e104b; border: 1px solid #e8e4ee; border-radius: 14px; box-shadow: 0 12px 34px rgba(14, 16, 75, .16); padding: 16px 16px 14px; } .mcons__head { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; } .mcons__ico { font-family: 'Material Symbols Rounded', 'Material Icons'; font-size: 22px; line-height: 1; font-weight: 400; font-style: normal; -webkit-font-feature-settings: 'liga'; font-feature-settings: 'liga'; display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 50%; background: var(--tg-theme-primary-50, #ecf6fa); color: #191d88; overflow: hidden; white-space: nowrap; /* tant que la police d'icones charge, le mot « cookie » ne deborde pas */ } .mcons__title { margin: 0; font-family: var(--tg-heading-font-family, 'Outfit', sans-serif); font-size: 16px; font-weight: 700; color: #0e104b; } .mcons__text { margin: 0 0 14px; font-size: 13.5px; line-height: 1.5; color: #4a4c7a; } .mcons__text strong { color: #0e104b; font-weight: 600; } .mcons__text a { color: #191d88; font-weight: 600; text-decoration: underline; text-underline-offset: 2px; } .mcons__actions { display: flex; gap: 8px; } .mcons__btn { flex: 1 1 0; min-height: 44px; padding: 10px 12px; border-radius: 10px; cursor: pointer; font-family: inherit; font-size: 14px; font-weight: 600; line-height: 1.2; } .mcons__btn--ghost { background: #fff; color: #0e104b; border: 1.5px solid #cfc9db; } .mcons__btn--ghost:hover { border-color: #0e104b; background: #faf9fc; } .mcons__btn--main { background: #191d88; color: #fff; border: 1.5px solid #191d88; } .mcons__btn--main:hover { background: #0e104b; border-color: #0e104b; } .mcons__btn:focus-visible { outline: 3px solid #0e104b; outline-offset: 2px; } /* Choix en cours (reouverture depuis « Cookie settings ») : coche + bordure epaisse, pas une teinte. */ .mcons__btn[aria-pressed="true"] { border-width: 3px; font-weight: 800; } .mcons__btn[aria-pressed="true"]::before { content: "\2713\00a0"; } /* Mobile : pleine largeur, au-dessus de la barre d'onglets si elle existe. */ @media (max-width: 575.98px) { .mcons { left: 10px; right: 10px; bottom: calc(10px + env(safe-area-inset-bottom, 0px)); width: auto; } } @media (max-width: 991.98px) { .mcons--tabbar { bottom: calc(var(--mnav-bar-h, 56px) + 10px + env(safe-area-inset-bottom, 0px)); } } /* Mode sombre (color-modes.js pose data-bs-theme="dark" sur ). */ [data-bs-theme="dark"] .mcons__card { background: #16183a; border-color: #2c2f5e; color: #eceaf7; } [data-bs-theme="dark"] .mcons__title, [data-bs-theme="dark"] .mcons__text strong { color: #fff; } [data-bs-theme="dark"] .mcons__text { color: #c9c7e3; } [data-bs-theme="dark"] .mcons__text a { color: #b9b6ff; } [data-bs-theme="dark"] .mcons__ico { background: #2c2f5e; color: #fff; } [data-bs-theme="dark"] .mcons__btn--ghost { background: transparent; color: #fff; border-color: #56598f; } [data-bs-theme="dark"] .mcons__btn--main { background: #fff; color: #0e104b; border-color: #fff; }