/* Feuille de style du bandeau de consentement (Phase 2.75).
 *
 * FICHIER EXTERNE, PAS UN <style> INLINE -- corrige un bogue réel trouvé en
 * vérifiant honnêtement dans un navigateur avec CSP strict activé (pas juste
 * en relisant le code) : consent-banner.js injectait auparavant sa feuille
 * de style via un <style> créé en JS (style.textContent = `...`). Un tel
 * élément est un style INLINE au sens de la CSP -- exactement comme un
 * script inline -- et `style-src` ne contient ni 'unsafe-inline', ni nonce,
 * ni hash. Résultat confirmé par erreur console explicite ("Applying inline
 * style violates ... style-src ...") : la feuille entière était bloquée en
 * silence, le bandeau existait dans le DOM (boutons fonctionnels) mais SANS
 * AUCUN style -- rendu comme du texte brut en fin de page, ce qui explique
 * à la fois "c'est pas stylé" et "je ne vois même pas de bandeau" (les deux
 * symptômes rapportés venaient du même bogue).
 *
 * Une feuille EXTERNE, chargée via <link rel="stylesheet">, est gouvernée
 * par la même directive `style-src` mais comme une RESSOURCE (au même titre
 * qu'un script via <script src>) -- `'self'` (déjà présent, sans
 * modification de csp.js) suffit à l'autoriser, sans nonce ni hash. Voir
 * injectStyles() dans consent-banner.js pour le chargement.
 */

.cmp-banner-overlay { position: fixed; inset: 0; background: rgba(15,17,21,0.35); z-index: 2147483000; display: flex; align-items: flex-end; justify-content: center; }
.cmp-banner-overlay.cmp-banner-panel-mode { align-items: center; }
.cmp-banner-card { background: #fff; color: #1a1d23; width: 100%; max-width: 720px; margin: 0 1rem 1rem; border-radius: 12px; box-shadow: 0 8px 32px rgba(0,0,0,0.25); font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; max-height: 85vh; overflow-y: auto; }
.cmp-banner-body { padding: 1.25rem 1.5rem; }
.cmp-banner-title { margin: 0 0 0.5rem; font-size: 1.05rem; font-weight: 700; }
.cmp-banner-text { margin: 0 0 1rem; font-size: 0.9rem; line-height: 1.5; color: #3a3f4a; }
.cmp-banner-actions { display: flex; flex-wrap: wrap; gap: 0.6rem; }
.cmp-banner-btn { flex: 1 1 auto; min-width: 140px; padding: 0.65rem 1rem; border-radius: 8px; font-size: 0.9rem; font-weight: 600; cursor: pointer; border: 1px solid #c7cbd3; background: #fff; color: #1a1d23; }
.cmp-banner-btn:hover { background: #f2f3f5; }
.cmp-banner-btn-primary { background: #1a1d23; color: #fff; border-color: #1a1d23; }
.cmp-banner-btn-primary:hover { background: #33383f; }
.cmp-banner-link { background: none; border: none; color: #3a3f4a; text-decoration: underline; cursor: pointer; font-size: 0.85rem; padding: 0.4rem 0; }
.cmp-banner-categories { margin: 0.5rem 0 1.25rem; display: flex; flex-direction: column; gap: 0.9rem; }
.cmp-banner-category { border: 1px solid #e2e4e8; border-radius: 8px; padding: 0.75rem 0.9rem; }
.cmp-banner-category-head { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; }
.cmp-banner-category-label { font-weight: 600; font-size: 0.92rem; }
.cmp-banner-category-desc { margin: 0.4rem 0 0; font-size: 0.83rem; color: #565c68; line-height: 1.45; }
.cmp-banner-category-vendors { margin: 0.4rem 0 0; font-size: 0.78rem; color: #565c68; font-style: italic; }
.cmp-banner-category-alwayson { font-size: 0.78rem; color: #565c68; font-style: italic; }
.cmp-banner-switch { position: relative; display: inline-block; width: 40px; height: 22px; flex: none; }
.cmp-banner-switch input { opacity: 0; width: 0; height: 0; }
.cmp-banner-switch-track { position: absolute; inset: 0; background: #c7cbd3; border-radius: 999px; transition: background 0.15s; cursor: pointer; }
.cmp-banner-switch-track::before { content: ""; position: absolute; height: 16px; width: 16px; left: 3px; top: 3px; background: #fff; border-radius: 50%; transition: transform 0.15s; }
.cmp-banner-switch input:checked + .cmp-banner-switch-track { background: #1a1d23; }
.cmp-banner-switch input:checked + .cmp-banner-switch-track::before { transform: translateX(18px); }
.cmp-banner-switch input:disabled + .cmp-banner-switch-track { opacity: 0.55; cursor: not-allowed; }
.cmp-banner-reopen { position: fixed; bottom: 1rem; left: 1rem; z-index: 2147482999; background: #1a1d23; color: #fff; border: none; border-radius: 999px; padding: 0.55rem 0.9rem; font-size: 0.8rem; font-weight: 600; cursor: pointer; box-shadow: 0 2px 10px rgba(0,0,0,0.25); }
.cmp-banner-reopen:hover { background: #33383f; }
.cmp-banner-report-btn { position: fixed; bottom: 1rem; right: 1rem; z-index: 2147482999; background: #fff; color: #3a3f4a; border: 1px solid #c7cbd3; border-radius: 999px; padding: 0.5rem 0.85rem; font-size: 0.75rem; font-weight: 600; cursor: pointer; box-shadow: 0 2px 10px rgba(0,0,0,0.18); }
.cmp-banner-report-btn:hover { background: #f2f3f5; }
.cmp-banner-textarea { width: 100%; min-height: 5rem; padding: 0.6rem; border-radius: 8px; border: 1px solid #c7cbd3; font-family: inherit; font-size: 0.88rem; box-sizing: border-box; margin-bottom: 0.75rem; }
.cmp-banner-select { width: 100%; padding: 0.5rem; border-radius: 8px; border: 1px solid #c7cbd3; font-size: 0.88rem; box-sizing: border-box; margin-bottom: 0.75rem; }
.cmp-banner-radio-row { display: flex; flex-direction: column; gap: 0.4rem; margin-bottom: 0.75rem; font-size: 0.85rem; }
.cmp-banner-radio-row label { display: flex; align-items: flex-start; gap: 0.4rem; }
@media (max-width: 560px) { .cmp-banner-actions { flex-direction: column; } .cmp-banner-btn { min-width: 0; } }