/* ==========================================================================
   Bandeau de consentement (public/assets/js/consent-analytics.js)
   Fichier local : aucune source tierce dans la CSP. Préfixe .pec- pour ne
   rien hériter des feuilles du site ni de celles de Swipe.

   Deux thèmes, repris des feuilles existantes :
     .pec--site   PromethEUs, toujours sombre (assets/css/style.css : --bg-surface,
                  --primary #3b82f6, boutons .btn-primary) ;
     .pec--swipe  Swipe (analyses/position-politique.css : --surface, --text,
                  --accent ; bouton .pill-btn.primary = encre sur papier).
                  Sombre si le jeu pose html.dark, ou si le système est sombre
                  sur les pages qui ne règlent pas le thème (.pec--auto).

   Refuser et Accepter partagent exactement la même classe : même taille,
   même couleur, même place (exigence CNIL d'égalité des choix).
   ========================================================================== */
.pec {
    position: fixed;
    z-index: 2147483000;
    left: max(16px, env(safe-area-inset-left));
    right: max(16px, env(safe-area-inset-right));
    bottom: max(16px, env(safe-area-inset-bottom));
    margin: 0 auto;
    max-width: 540px;
    max-height: calc(100vh - 32px);
    max-height: calc(100dvh - 32px);
    overflow: auto;
    overscroll-behavior: contain;
    box-sizing: border-box;
    padding: 20px 20px 14px;
    border: 1px solid var(--pec-line);
    border-radius: 16px;
    background: var(--pec-bg);
    color: var(--pec-fg);
    box-shadow: 0 18px 48px rgba(0, 0, 0, .32);
    font-family: inherit;
    font-size: 15px;
    font-weight: 400;
    line-height: 1.5;
    text-align: left;
    animation: pec-in .28s cubic-bezier(.19, 1, .22, 1);
}
.pec[hidden] { display: none; }
.pec *, .pec *::before, .pec *::after { box-sizing: border-box; }

/* --- PromethEUs (toujours sombre) --- */
.pec--site {
    --pec-bg: #0f172a;
    --pec-fg: #f8fafc;
    --pec-muted: #94a3b8;
    --pec-line: rgba(255, 255, 255, .10);
    --pec-panel: #1e293b;
    --pec-accent: #3b82f6;
    --pec-btn-bg: #3b82f6;
    --pec-btn-fg: #ffffff;
    --pec-btn-hover: #2563eb;
    --pec-off: #334155;
    --pec-focus: #93c5fd;
    font-family: 'Outfit', system-ui, -apple-system, sans-serif;
}

/* --- Swipe : clair --- */
.pec--swipe {
    --pec-bg: #ffffff;
    --pec-fg: #111111;
    --pec-muted: #6b6b73;
    --pec-line: #e5e5ea;
    --pec-panel: #f3f3f6;
    --pec-accent: #2f6bff;
    --pec-btn-bg: #111111;
    --pec-btn-fg: #ffffff;
    --pec-btn-hover: #2a2a30;
    --pec-off: #d4d4da;
    --pec-focus: #2f6bff;
    font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", sans-serif;
    box-shadow: 0 18px 48px rgba(17, 17, 20, .18);
}
/* --- Swipe : sombre --- */
html.dark .pec--swipe {
    --pec-bg: #1b1b20;
    --pec-fg: #f2f2f5;
    --pec-muted: #a0a0aa;
    --pec-line: #30303a;
    --pec-panel: #24242b;
    --pec-accent: #6b93ff;
    --pec-btn-bg: #f2f2f5;
    --pec-btn-fg: #111111;
    --pec-btn-hover: #ffffff;
    --pec-off: #3a3a44;
    --pec-focus: #6b93ff;
    box-shadow: 0 18px 48px rgba(0, 0, 0, .5);
}
@media (prefers-color-scheme: dark) {
    .pec--swipe.pec--auto {
        --pec-bg: #1b1b20;
        --pec-fg: #f2f2f5;
        --pec-muted: #a0a0aa;
        --pec-line: #30303a;
        --pec-panel: #24242b;
        --pec-accent: #6b93ff;
        --pec-btn-bg: #f2f2f5;
        --pec-btn-fg: #111111;
        --pec-btn-hover: #ffffff;
        --pec-off: #3a3a44;
        --pec-focus: #6b93ff;
        box-shadow: 0 18px 48px rgba(0, 0, 0, .5);
    }
}

/* --- En-tête : pictogramme seul, coloré --- */
.pec-head {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 8px;
}
.pec-head svg {
    flex: none;
    width: 28px;
    height: 28px;
}
.pec-ic-line {
    fill: none;
    stroke: var(--pec-accent);
    stroke-width: 1.7;
    stroke-linejoin: round;
}
.pec-ic-dot { fill: var(--pec-accent); }
.pec-title {
    margin: 0;
    font-size: 17px;
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: 0;
    color: var(--pec-fg);
    outline: none;
}

/* --- Texte --- */
.pec-body {
    margin: 0 0 12px;
    font-size: 14px;
    color: var(--pec-muted);
}
.pec-link {
    appearance: none;
    display: inline;
    margin: 0;
    padding: 0;
    border: 0;
    background: none;
    color: var(--pec-fg);
    font: inherit;
    font-weight: 600;
    text-decoration: underline;
    text-decoration-color: var(--pec-accent);
    text-decoration-thickness: 2px;
    text-underline-offset: 3px;
    cursor: pointer;
}
.pec-link:hover { color: var(--pec-accent); }

/* --- Personnalisation --- */
.pec-details { margin: 0 0 14px; }
.pec-summary {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 2px 0;
    font-size: 14px;
    font-weight: 600;
    color: var(--pec-fg);
    list-style: none;
    cursor: pointer;
}
.pec-summary::-webkit-details-marker { display: none; }
.pec-summary::after,
.pec-what-sum::after {
    content: "";
    width: 7px;
    height: 7px;
    border-right: 1.8px solid currentColor;
    border-bottom: 1.8px solid currentColor;
    transform: translateY(-2px) rotate(45deg);
    transition: transform .2s ease;
}
.pec-details[open] > .pec-summary::after,
.pec-what[open] > .pec-what-sum::after { transform: translateY(1px) rotate(-135deg); }

.pec-rows {
    margin-top: 10px;
    border: 1px solid var(--pec-line);
    border-radius: 12px;
    background: var(--pec-panel);
    overflow: hidden;
}
.pec-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    border-top: 1px solid var(--pec-line);
}
.pec-row:first-child { border-top: 0; }
.pec-row-text {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
}
.pec-row-label {
    font-size: 14px;
    font-weight: 600;
    color: var(--pec-fg);
}
.pec-row-desc {
    margin-top: 1px;
    font-size: 12.5px;
    line-height: 1.4;
    color: var(--pec-muted);
}
.pec-always {
    flex: none;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--pec-muted);
}

/* Interrupteur : vraie case à cocher (clavier, lecteurs d'écran), habillée. */
.pec-switch {
    position: relative;
    flex: none;
    width: 42px;
    height: 24px;
    cursor: pointer;
}
.pec-switch input {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    opacity: 0;
    cursor: pointer;
}
.pec-track {
    position: absolute;
    inset: 0;
    border-radius: 999px;
    background: var(--pec-off);
    transition: background .18s ease;
    pointer-events: none;
}
.pec-track::after {
    content: "";
    position: absolute;
    top: 3px;
    left: 3px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #ffffff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .3);
    transition: transform .18s ease;
}
.pec-switch input:checked + .pec-track { background: var(--pec-accent); }
.pec-switch input:checked + .pec-track::after { transform: translateX(18px); }
.pec-switch input:focus-visible + .pec-track { outline: 3px solid var(--pec-focus); outline-offset: 2px; }

/* Ce qui est mesuré (sous la ligne Google Analytics) */
.pec-what {
    padding: 0 14px 10px;
}
.pec-what-sum {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 600;
    color: var(--pec-accent);
    list-style: none;
    cursor: pointer;
}
.pec-what-sum::-webkit-details-marker { display: none; }
.pec-list {
    margin: 8px 0 0;
    padding: 0 0 0 18px;
}
.pec-list li {
    margin: 0 0 4px;
    font-size: 13px;
    color: var(--pec-muted);
}
.pec-list li::marker { color: var(--pec-accent); }
.pec-never {
    margin: 6px 0 0;
    font-size: 13px;
    font-weight: 600;
    color: var(--pec-fg);
}

/* --- Boutons : strictement identiques --- */
.pec-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}
.pec-btn {
    appearance: none;
    margin: 0;
    min-height: 46px;
    padding: 12px 16px;
    border: 0;
    border-radius: 999px;
    background: var(--pec-btn-bg);
    color: var(--pec-btn-fg);
    font: inherit;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.2;
    cursor: pointer;
    transition: background .15s ease, transform .12s ease;
}
.pec-btn:hover { background: var(--pec-btn-hover); }
.pec-btn:active { transform: scale(.98); }
.pec-save {
    appearance: none;
    display: block;
    width: 100%;
    margin: 10px 0 0;
    min-height: 44px;
    padding: 10px 16px;
    border: 1px solid var(--pec-line);
    border-radius: 999px;
    background: transparent;
    color: var(--pec-fg);
    font: inherit;
    font-size: 14.5px;
    font-weight: 600;
    cursor: pointer;
}
.pec-save[hidden] { display: none; }
.pec-save:hover { background: var(--pec-panel); }

.pec-foot {
    margin: 10px 0 0;
    text-align: center;
    font-size: 12.5px;
}
.pec-more {
    color: var(--pec-muted);
    text-decoration: underline;
    text-underline-offset: 2px;
}
.pec-more:hover { color: var(--pec-fg); }

.pec-btn:focus-visible,
.pec-save:focus-visible,
.pec-link:focus-visible,
.pec-more:focus-visible,
.pec-summary:focus-visible,
.pec-what-sum:focus-visible,
.pec-title:focus-visible {
    outline: 3px solid var(--pec-focus);
    outline-offset: 2px;
}

@media (max-width: 420px) {
    .pec { padding: 18px 16px 12px; border-radius: 14px; }
}

@keyframes pec-in {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
    .pec { animation: none; }
    .pec-btn, .pec-track, .pec-track::after, .pec-summary::after, .pec-what-sum::after { transition: none; }
}