/* ======================================== Consentement : bandeau cookies, barre legale, cases d'inscription, modale de politique ======================================== ⚠️ THEME SOMBRE Ce fichier est charge sur des pages qui n'heritent PAS de base.html (index.html, partenaires.html), lesquelles gerent un mode sombre par `prefers-color-scheme` ET par un attribut `data-theme` sur . tokens.css ne definit que des couleurs claires : on redefinit donc ici nos propres variables locales, et on les surcharge dans les deux cas. Sans ca, le bandeau s'affiche en blanc sur une page noire. */ :root { --cc-surface: #ffffff; --cc-surface-2: #f4f7f9; --cc-text: #1B2A38; --cc-muted: #51677A; --cc-border: rgba(27, 42, 56, 0.14); --cc-accent: #5FAAD9; --cc-accent-hover: #4A8FB8; --cc-shadow: 0 16px 48px rgba(27, 42, 56, 0.18); } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --cc-surface: #152633; --cc-surface-2: #1B303F; --cc-text: #EAF2F7; --cc-muted: #A3B8C8; --cc-border: rgba(234, 242, 247, 0.16); --cc-shadow: 0 16px 48px rgba(0, 0, 0, 0.55); } } :root[data-theme="dark"] { --cc-surface: #152633; --cc-surface-2: #1B303F; --cc-text: #EAF2F7; --cc-muted: #A3B8C8; --cc-border: rgba(234, 242, 247, 0.16); --cc-shadow: 0 16px 48px rgba(0, 0, 0, 0.55); } /* ======================================== Bandeau cookies — carte compacte en bas a gauche ======================================== */ .cookie-card { position: fixed; left: 1.25rem; bottom: 1.25rem; z-index: 9000; width: min(26rem, calc(100vw - 2.5rem)); background: var(--cc-surface); color: var(--cc-text); border: 1px solid var(--cc-border); border-radius: 1rem; box-shadow: var(--cc-shadow); padding: 1.15rem 1.25rem 1.1rem; font-size: 0.875rem; line-height: 1.55; animation: cc-rise 0.28s cubic-bezier(0.2, 0.8, 0.3, 1); } .cookie-card.is-hidden { display: none; } @keyframes cc-rise { from { opacity: 0; transform: translateY(0.75rem); } to { opacity: 1; transform: translateY(0); } } @media (prefers-reduced-motion: reduce) { .cookie-card { animation: none; } } .cookie-card__head { display: flex; align-items: center; gap: 0.55rem; margin-bottom: 0.5rem; } .cookie-card__icon { font-size: 1.15rem; line-height: 1; } .cookie-card__title { margin: 0; font-size: 0.95rem; font-weight: 700; color: var(--cc-text); } .cookie-card__text { margin: 0 0 0.9rem; color: var(--cc-muted); } .cookie-card__text a { color: var(--cc-accent); text-decoration: underline; text-underline-offset: 2px; } /* --- Boutons --- */ .cookie-card__actions { display: grid; grid-template-columns: 1fr 1fr; gap: 0.55rem; } .cookie-btn { font: inherit; font-size: 0.875rem; font-weight: 600; padding: 0.6rem 0.5rem; border-radius: 0.6rem; cursor: pointer; text-align: center; transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease; } .cookie-btn.is-hidden { display: none; } /* ⚠️ RGPD — PARITE DES BOUTONS, NE PAS DIFFERENCIER. "Tout refuser" et "Tout accepter" partagent volontairement cette classe : meme taille, meme graisse, meme contraste, meme placement. La Cour supreme autrichienne a juge en 2025 qu'un "Accepter" colore face a un "Refuser" gris viole l'exigence de parite, et la CNIL a inflige 150 M€ a Google sur ce terrain. Si quelqu'un demande un jour de "mettre en avant" l'acceptation, la reponse est non : ca invaliderait tous les consentements recueillis. */ .cookie-btn--choice { background: var(--cc-accent); color: #ffffff; border: 1px solid var(--cc-accent); } .cookie-btn--choice:hover { background: var(--cc-accent-hover); border-color: var(--cc-accent-hover); } .cookie-btn--choice:focus-visible { outline: 2px solid var(--cc-text); outline-offset: 2px; } /* Bouton secondaire, en dessous et sur toute la largeur : il n'ouvre que le detail, il ne constitue pas un choix concurrent des deux precedents. */ .cookie-card__more { grid-column: 1 / -1; background: transparent; color: var(--cc-muted); border: 1px solid transparent; font: inherit; font-size: 0.82rem; padding: 0.4rem; cursor: pointer; border-radius: 0.5rem; text-decoration: underline; text-underline-offset: 2px; } .cookie-card__more:hover { color: var(--cc-text); background: var(--cc-surface-2); text-decoration: none; } /* --- Panneau de personnalisation --- */ .cookie-card__prefs { margin: 0.25rem 0 0.9rem; padding: 0.75rem 0.85rem; background: var(--cc-surface-2); border-radius: 0.7rem; } .cookie-pref { display: flex; gap: 0.6rem; align-items: flex-start; padding: 0.45rem 0; font-size: 0.82rem; line-height: 1.45; cursor: pointer; color: var(--cc-text); } .cookie-pref + .cookie-pref { border-top: 1px solid var(--cc-border); } .cookie-pref input { margin-top: 0.15rem; flex: none; width: 0.95rem; height: 0.95rem; accent-color: var(--cc-accent); } .cookie-pref strong { display: block; font-size: 0.85rem; } .cookie-pref span > span { color: var(--cc-muted); } .cookie-pref--locked { cursor: default; } .cookie-pref--locked strong::after { content: "toujours actifs"; float: right; font-weight: 500; font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--cc-muted); } @media (max-width: 480px) { .cookie-card { left: 0.6rem; right: 0.6rem; bottom: 0.6rem; width: auto; } } /* ======================================== Barre legale, en bas de chaque page ======================================== */ .legal-bar { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.35rem 1.25rem; padding: 1.5rem 1rem 2rem; font-size: 0.85rem; } .legal-bar a, .legal-bar__link { color: var(--cc-muted); text-decoration: none; border-bottom: 1px solid transparent; } .legal-bar a:hover, .legal-bar__link:hover { color: var(--cc-accent); border-bottom-color: currentColor; } /* Declencheur "Gerer mes cookies" : un