/* Ancienne version (carte en bas), gardée pour les pages encore en cache ; remplacée par consentement-fenetre.css le 23/10/2026. */
/* ==========================================================================
   Bandeau et préférences de cookies (templates/components/consentement.html)
   --------------------------------------------------------------------------
   Jetons --cs-* uniquement (charte CLAUDE.md). Boutons : .cs-btn--primary
   pour les trois choix, à poids visuel identique (CNIL : refuser aussi
   simple qu'accepter).
   - Ordinateur : carte en bas à gauche (420 px au plus).
   - Mobile (< 641 px) : panneau bas pleine largeur.
   - La carte remonte au-dessus des barres collantes visibles (barre d'achat
     de /score, etc.) : décalage --cs-consent-dessous posé par
     static/js/consentement.js. Aucune réservation de place dans la page :
     élément fixe, pas de saut de mise en page.
   ========================================================================== */

.cs-consent {
    --cs-consent-dessous: 0px;
    position: fixed;
    /* Centré en bas de l'écran (demande du fondateur, 23/10/2026). */
    left: 0;
    right: 0;
    margin-inline: auto;
    bottom: calc(var(--cs-space-6) + var(--cs-consent-dessous));
    z-index: 1100; /* au-dessus des barres collantes (900-1000), sous les fenêtres modales */
    width: min(640px, calc(100vw - 2 * var(--cs-space-6)));
    padding: var(--cs-space-5);
    background: var(--cs-bg-elevated);
    color: var(--cs-ink);
    border: 1px solid var(--cs-line-strong);
    border-radius: var(--cs-radius-lg);
    box-shadow: var(--cs-shadow-pop);
    font-family: var(--cs-font-body);
    font-size: var(--cs-text-small);
    line-height: var(--cs-leading-normal);
    transition: bottom var(--cs-duration-fast) var(--cs-ease-default);
}
.cs-consent[hidden] { display: none; }
/* Côté droit quand la gauche couvrirait un bouton d'action (placé par le JS). */
.cs-consent--droite { left: 0; right: 0; } /* reste centré : l'ancien décalage à droite ne sert plus */
.cs-consent--entree { animation: cs-consent-entree var(--cs-duration-normal) var(--cs-ease-default) both; }

@keyframes cs-consent-entree {
    from { opacity: 0; transform: translateY(12px); }
    to { opacity: 1; transform: none; }
}

.cs-consent__titre {
    margin: 0 0 var(--cs-space-2);
    font-family: var(--cs-font-display);
    font-size: 1rem;
    font-weight: 700;
    color: var(--cs-ink-deep);
    letter-spacing: var(--cs-tracking-tight);
}
.cs-consent__texte {
    margin: 0 0 var(--cs-space-4);
    color: var(--cs-mute);
    line-height: var(--cs-leading-snug);
}
.cs-consent__lien,
.cs-consent-prefs a {
    color: var(--cs-teal);
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 2px;
}
.cs-consent__lien:hover,
.cs-consent-prefs a:hover { color: var(--cs-teal-deep); }
.cs-consent__lien:focus-visible,
.cs-consent-prefs a:focus-visible {
    outline: 2px solid var(--cs-teal);
    outline-offset: 2px;
    border-radius: 2px;
}

.cs-consent__actions {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--cs-space-2);
}
.cs-consent__btn {
    width: 100%;
    min-height: 44px; /* cible tactile WCAG 2.5.5 */
    padding-left: var(--cs-space-2);
    padding-right: var(--cs-space-2);
    white-space: normal;
    text-align: center;
    line-height: 1.2;
}
/* Anneau de focus bien visible, y compris sur fond teal. */
.cs-consent .cs-btn:focus-visible,
.cs-consent-prefs .cs-btn:focus-visible {
    outline: 3px solid var(--cs-ink-deep);
    outline-offset: 2px;
    box-shadow: none;
}

/* --- Panneau de préférences (<dialog> modal natif) --------------------- */

.cs-consent-prefs {
    margin: auto; /* centré : la remise à zéro globale des marges l'annule sinon */
    width: min(560px, calc(100vw - 2 * var(--cs-space-4)));
    max-height: min(86vh, 760px);
    padding: 0;
    border: 1px solid var(--cs-line-strong);
    border-radius: var(--cs-radius-lg);
    background: var(--cs-bg-elevated);
    color: var(--cs-ink);
    box-shadow: var(--cs-shadow-pop);
    font-family: var(--cs-font-body);
    overflow: auto;
    overscroll-behavior: contain;
}
.cs-consent-prefs::backdrop {
    background: color-mix(in srgb, var(--cs-ink-deep) 55%, transparent);
}
.cs-consent-prefs__corps {
    margin: 0;
    padding: var(--cs-space-6);
}
.cs-consent-prefs__tete {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--cs-space-4);
    margin-bottom: var(--cs-space-2);
}
.cs-consent-prefs__titre {
    margin: 0;
    font-family: var(--cs-font-display);
    font-size: var(--cs-text-h3);
    font-weight: 700;
    color: var(--cs-ink-deep);
    letter-spacing: var(--cs-tracking-tight);
    line-height: var(--cs-leading-tight);
}
/* Titre focalisé par programme à l'ouverture : pas d'anneau parasite. */
.cs-consent-prefs__titre:focus { outline: none; }
.cs-consent-prefs__fermer {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    margin: calc(-1 * var(--cs-space-2)) calc(-1 * var(--cs-space-2)) 0 0;
    border: 1px solid transparent;
    border-radius: var(--cs-radius);
    background: transparent;
    color: var(--cs-mute);
    cursor: pointer;
}
.cs-consent-prefs__fermer:hover { background: var(--cs-bg-subtle); color: var(--cs-ink); }
.cs-consent-prefs__fermer:focus-visible { outline: 3px solid var(--cs-teal); outline-offset: 1px; }
.cs-consent-prefs__intro {
    margin: 0 0 var(--cs-space-4);
    font-size: var(--cs-text-small);
    line-height: var(--cs-leading-relaxed);
    color: var(--cs-mute);
}

.cs-consent-fin {
    padding: var(--cs-space-4) 0;
    border-top: 1px solid var(--cs-line);
}
.cs-consent-fin__ligne {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--cs-space-4);
}
.cs-consent-fin__titre {
    margin: 0;
    font-family: var(--cs-font-display);
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--cs-ink);
    cursor: default;
}
label.cs-consent-fin__titre { cursor: pointer; }
.cs-consent-fin__etat { flex: none; font-size: var(--cs-text-micro); }
.cs-consent-fin__texte {
    margin: var(--cs-space-2) 0 0;
    font-size: var(--cs-text-small);
    line-height: var(--cs-leading-relaxed);
    color: var(--cs-mute);
}
.cs-consent-fin__detail { margin-top: var(--cs-space-2); font-size: var(--cs-text-small); color: var(--cs-mute); }
.cs-consent-fin__detail summary {
    display: inline-flex;
    min-height: 32px;
    align-items: center;
    color: var(--cs-teal);
    font-weight: 600;
    cursor: pointer;
}
.cs-consent-fin__detail summary:focus-visible { outline: 2px solid var(--cs-teal); outline-offset: 2px; border-radius: 2px; }
.cs-consent-fin__detail ul { margin: var(--cs-space-2) 0 0; padding-left: var(--cs-space-5); }
.cs-consent-fin__detail li { margin-bottom: var(--cs-space-1); line-height: var(--cs-leading-normal); }
.cs-consent-fin__detail code { font-family: var(--cs-font-mono); font-size: 0.8125rem; color: var(--cs-ink); }

/* Interrupteur accessible : <input type="checkbox" role="switch">. */
.cs-consent-interrupteur {
    -webkit-appearance: none;
    appearance: none;
    flex: none;
    position: relative;
    width: 48px;
    height: 28px;
    margin: 0;
    border: 1px solid var(--cs-mute);
    border-radius: var(--cs-radius-pill);
    background: var(--cs-line-strong);
    cursor: pointer;
    transition: background var(--cs-duration-fast) var(--cs-ease-default),
                border-color var(--cs-duration-fast) var(--cs-ease-default);
}
.cs-consent-interrupteur::after {
    content: "";
    position: absolute;
    top: 3px;
    left: 3px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--cs-bg-elevated);
    box-shadow: var(--cs-shadow-low);
    transition: transform var(--cs-duration-fast) var(--cs-ease-default);
}
.cs-consent-interrupteur:checked { background: var(--cs-teal); border-color: var(--cs-teal); }
.cs-consent-interrupteur:checked::after { transform: translateX(20px); }
.cs-consent-interrupteur:focus-visible { outline: 3px solid var(--cs-ink-deep); outline-offset: 2px; }

.cs-consent-prefs__pied {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--cs-space-2);
    padding-top: var(--cs-space-4);
    border-top: 1px solid var(--cs-line);
}
.cs-consent-prefs__note {
    margin: var(--cs-space-4) 0 0;
    font-size: var(--cs-text-micro);
    color: var(--cs-mute);
}
.cs-consent-prefs__statut { margin: var(--cs-space-2) 0 0; font-size: var(--cs-text-small); color: var(--cs-teal-deep); }
.cs-consent-prefs__statut:empty { display: none; }

/* Lien « Gérer mes cookies » du pied de page : bouton à l'allure d'un lien. */
.cs-consent-reprise {
    padding: 0;
    border: 0;
    background: none;
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: pointer;
}

/* --- Mobile : panneau bas pleine largeur ------------------------------- */

@media (max-width: 640px) {
    .cs-consent {
        left: 0;
        right: 0;
        bottom: var(--cs-consent-dessous);
        width: auto;
        padding: var(--cs-space-4) var(--cs-space-4) calc(var(--cs-space-4) + env(safe-area-inset-bottom, 0px));
        border-width: 1px 0 0;
        border-radius: var(--cs-radius-lg) var(--cs-radius-lg) 0 0;
    }
    .cs-consent--droite { right: 0; }
    .cs-consent__titre { font-size: 0.9375rem; margin-bottom: var(--cs-space-1); }
    .cs-consent__texte { margin-bottom: var(--cs-space-3); font-size: 0.8125rem; }
    .cs-consent-prefs { width: 100vw; max-width: 100vw; max-height: 92vh; margin: auto 0 0; border-radius: var(--cs-radius-lg) var(--cs-radius-lg) 0 0; }
    .cs-consent-prefs__corps { padding: var(--cs-space-5) var(--cs-space-4) calc(var(--cs-space-5) + env(safe-area-inset-bottom, 0px)); }
    .cs-consent-prefs__pied { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .cs-consent-prefs__pied .cs-consent__btn:last-child { grid-column: 1 / -1; }
}
/* Très petits écrans : deux colonnes, « Personnaliser » sur toute la largeur
   (même style, même hauteur que les deux autres). */
@media (max-width: 419px) {
    .cs-consent__actions { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .cs-consent__btn--perso { grid-column: 1 / -1; }
}

@media (prefers-reduced-motion: reduce) {
    .cs-consent,
    .cs-consent-interrupteur,
    .cs-consent-interrupteur::after { transition: none; }
    .cs-consent--entree { animation: none; }
}

@media print {
    .cs-consent,
    .cs-consent-prefs { display: none !important; }
}