/* Bandeau de consentement — styles publics. Les couleurs arrivent en variables `--cmp410-*`, posées dans le par cmp_head() à partir de la charte. Les valeurs de repli ci-dessous ne servent qu'au cas où la feuille serait chargée sans elles. ⚠ Visible par défaut : c'est le JavaScript qui masque le bandeau pour un visiteur ayant déjà choisi. Un bandeau masqué en CSS puis retardé par un optimiseur ne se montrerait jamais. ⚠ Aucune police externe : le bandeau s'affiche sur chaque page, une requête de police de plus y serait payée partout. */ #cmp410.cmp410-wrap, .cmp410-wrap { position: relative; z-index: 999999; display: block; font-family: var(--cmp410-font, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif); } /* Le JavaScript pose aria-hidden="true" dès qu'un choix valide existe. */ .cmp410-wrap[aria-hidden="true"] { display: none !important; } /* --------------------------------------------------------------------------- Voile — piloté en CSS pur par l'état du wrap, jamais par du JavaScript. Insensible au cache de page et au retard d'exécution : il suit exactement la visibilité du bandeau. blocking : voile sombre qui bloque l'interaction veil : voile qui laisse cliquer au travers none : pas de voile --------------------------------------------------------------------------- */ .cmp410-overlay { position: fixed; inset: 0; display: none; z-index: 1; background: rgba(var(--cmp410-overlay-rgb, 11, 22, 33), var(--cmp410-overlay-opacity, .52)); } .cmp410-wrap[data-overlay="blocking"][aria-hidden="false"] .cmp410-overlay { display: block; pointer-events: auto; } .cmp410-wrap[data-overlay="veil"][aria-hidden="false"] .cmp410-overlay { display: block; pointer-events: none; } /* --------------------------------------------------------------------------- Bandeau — trois positions au choix. --------------------------------------------------------------------------- */ .cmp410-banner { position: fixed; z-index: 2; background: var(--cmp410-surface, #fff); color: var(--cmp410-text, #0f2233); box-shadow: 0 18px 50px rgba(8, 20, 31, .28); box-sizing: border-box; } .cmp410-banner:focus { outline: none; } /* Carte centrée (défaut) — le taux de décision le plus élevé. */ .cmp410-wrap[data-position="center"] .cmp410-banner { left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(560px, calc(100vw - 32px)); border-radius: var(--cmp410-radius, 14px); padding: 24px 26px 22px; display: flex; flex-direction: column; gap: 14px; } /* Bandeau en bas de page. */ .cmp410-wrap[data-position="footer"] .cmp410-banner { left: 16px; right: 16px; bottom: 16px; margin: 0 auto; max-width: 980px; border-radius: var(--cmp410-radius, 16px); padding: 18px 22px; display: flex; flex-direction: row; align-items: center; justify-content: space-between; gap: 22px; } /* Barre pleine largeur collée en bas. */ .cmp410-wrap[data-position="bar"] .cmp410-banner { left: 0; right: 0; bottom: 0; max-width: none; border-radius: 0; padding: 16px 24px; display: flex; flex-direction: row; align-items: center; justify-content: space-between; gap: 22px; } .cmp410-title { font-weight: 800; font-size: 19px; letter-spacing: -.01em; margin-bottom: 4px; } .cmp410-desc { font-size: 14px; line-height: 1.55; color: var(--cmp410-text, #3c4b57); } .cmp410-links { display: inline; } .cmp410-link { color: var(--cmp410-link, #0a6c86); text-decoration: underline; text-underline-offset: 2px; } .cmp410-link:hover { opacity: .82; } .cmp410-sep { margin: 0 6px; color: var(--cmp410-text-muted, #9aa5af); } /* --------------------------------------------------------------------------- Actions — parité stricte Accepter / Refuser : même gabarit, même poids visuel. « Personnaliser » redescend en lien souligné, secondaire mais à un clic. ⚠ Ne pas donner à « Refuser » un traitement plus discret qu'à « Accepter » : c'est le point que la CNIL regarde en premier, et il fait tomber tout le reste. --------------------------------------------------------------------------- */ .cmp410-actions { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; } .cmp410-actions-pair { display: flex; gap: 10px; } .cmp410-wrap[data-position="center"] .cmp410-actions { justify-content: space-between; padding-top: 14px; margin-top: 2px; border-top: 1px solid var(--cmp410-border, #eceff3); } .cmp410-wrap[data-position="footer"] .cmp410-actions, .cmp410-wrap[data-position="bar"] .cmp410-actions { justify-content: flex-end; } .cmp410-btn { border: 1.5px solid transparent; border-radius: var(--cmp410-radius-btn, 10px); padding: 12px 26px; cursor: pointer; font: inherit; font-weight: 700; font-size: 15px; line-height: 1.2; min-width: 152px; text-align: center; } .cmp410-btn:focus-visible { outline: 3px solid var(--cmp410-accept-bg, #14539c); outline-offset: 2px; } .cmp410-btn-primary { background: var(--cmp410-accept-bg, #31249F); color: var(--cmp410-accept-fg, #fff); border-color: rgba(0, 20, 31, .38); } .cmp410-btn-reject { background: var(--cmp410-reject-bg, #0A246A); color: var(--cmp410-reject-fg, #fff); border-color: var(--cmp410-reject-bg, #0A246A); } .cmp410-btn-link { background: none; border: 0; border-radius: 0; min-width: 0; padding: 6px 0; font-size: 14px; font-weight: 600; color: var(--cmp410-text, #3c4b57); text-decoration: underline; text-underline-offset: 3px; } .cmp410-btn-link:hover { opacity: .8; } /* --------------------------------------------------------------------------- Modale « Préférences » — toujours centrée. --------------------------------------------------------------------------- */ .cmp410-modal { position: fixed; left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(620px, calc(100vw - 32px)); max-height: calc(100vh - 40px); overflow: auto; background: var(--cmp410-surface, #fff); border-radius: var(--cmp410-radius, 14px); box-shadow: 0 24px 60px rgba(8, 20, 31, .34); display: none; color: var(--cmp410-text, #0f2233); z-index: 2; box-sizing: border-box; } .cmp410-modal:focus { outline: none; } .cmp410-modal-header { display: flex; align-items: center; justify-content: space-between; padding: 18px 22px; border-bottom: 1px solid var(--cmp410-border, #eceff3); } .cmp410-modal-title { font-weight: 800; font-size: 17px; } .cmp410-x { border: 1px solid var(--cmp410-border, #d7dde4); background: var(--cmp410-surface, #fff); border-radius: 8px; width: 32px; height: 32px; font-size: 18px; line-height: 1; cursor: pointer; color: var(--cmp410-text-muted, #46545f); } .cmp410-x:hover { opacity: .8; } .cmp410-modal-body { padding: 4px 22px 8px; } .cmp410-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; padding: 16px 0; border-bottom: 1px solid var(--cmp410-border, #f1f4f7); } .cmp410-row:last-child { border-bottom: 0; } .cmp410-row-text { display: flex; flex-direction: column; gap: 3px; } .cmp410-row-title { font-weight: 700; font-size: 14px; } .cmp410-row-desc { font-size: 13px; line-height: 1.5; color: var(--cmp410-text-muted, #5b6874); } .cmp410-row-meta { font-size: 12px; color: var(--cmp410-text-muted, #7d8994); opacity: .85; } .cmp410-toggle input[type="checkbox"] { width: 40px; height: 22px; margin-top: 2px; accent-color: var(--cmp410-accept-bg, #00728f); flex: none; cursor: pointer; } .cmp410-modal-footer { padding: 16px 22px; border-top: 1px solid var(--cmp410-border, #eceff3); display: flex; flex-direction: column; gap: 14px; } .cmp410-modal-actions { display: flex; gap: 10px; justify-content: flex-end; } .cmp410-modal-actions .cmp410-btn { min-width: 168px; } .cmp410-modal-legal { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; font-size: 12px; color: var(--cmp410-text-muted, #6b7885); } /* --------------------------------------------------------------------------- Mobile — la paire Refuser / Accepter reste côte à côte : la parité est aussi une parité de position. « Personnaliser » passe dessous. --------------------------------------------------------------------------- */ @media (max-width: 640px) { .cmp410-wrap[data-position="footer"] .cmp410-banner, .cmp410-wrap[data-position="bar"] .cmp410-banner { flex-direction: column; align-items: stretch; gap: 14px; } .cmp410-wrap[data-position="footer"] .cmp410-banner { left: 8px; right: 8px; bottom: 8px; } .cmp410-actions { flex-direction: column-reverse; align-items: stretch; gap: 10px; } .cmp410-wrap .cmp410-actions { justify-content: initial; border-top: 0; padding-top: 0; } .cmp410-actions-pair { gap: 9px; } .cmp410-actions-pair .cmp410-btn { flex: 1 1 0; min-width: 0; padding: 13px 8px; } .cmp410-btn-link { align-self: center; } .cmp410-modal-actions { flex-direction: column-reverse; } .cmp410-modal-actions .cmp410-btn { width: 100%; min-width: 0; } }