/* ==========================================================================
   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; /* hérité du placement en bas, sans effet ici */
    position: fixed;
    inset: 0;
    z-index: 1100; /* au-dessus des barres collantes (900-1000), sous les fenêtres modales */
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--cs-space-4);
    background: color-mix(in srgb, var(--cs-ink) 45%, transparent);
    -webkit-backdrop-filter: blur(3px);
    backdrop-filter: blur(3px);
    font-family: var(--cs-font-body);
    color: var(--cs-ink);
}
.cs-consent__carte {
    display: grid;
    grid-template-columns: 240px minmax(0, 1fr);
    width: min(760px, 100%);
    max-height: calc(100dvh - 2 * var(--cs-space-4));
    overflow: auto;
    background: var(--cs-bg-elevated);
    border-radius: var(--cs-radius-lg);
    box-shadow: var(--cs-shadow-pop);
}
.cs-consent__carte:focus { outline: none; }
.cs-consent__photo {
    position: relative;
    background: url("/static/img/hero-bg.jpg") 30% center / cover no-repeat;
}
.cs-consent__photo::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent 40%, color-mix(in srgb, var(--cs-teal-deep) 70%, transparent));
}
.cs-consent__corps { position: relative; padding: var(--cs-space-6) var(--cs-space-8, 32px) var(--cs-space-6); }
.cs-consent__sans {
    position: absolute;
    top: var(--cs-space-4);
    right: var(--cs-space-6);
    padding: var(--cs-space-1) 0;
    background: none;
    border: 0;
    font: inherit;
    font-size: var(--cs-text-small);
    color: var(--cs-mute);
    text-decoration: underline;
    text-underline-offset: 3px;
    cursor: pointer;
}
.cs-consent__sans:hover { color: var(--cs-ink); }
.cs-consent__sans:focus-visible { outline: 3px solid var(--cs-teal); outline-offset: 2px; border-radius: 2px; }
.cs-consent__marque {
    display: flex;
    align-items: center;
    gap: var(--cs-space-2);
    margin: var(--cs-space-1) 0 var(--cs-space-4);
    font-family: var(--cs-font-display);
    font-size: 1.375rem;
    color: var(--cs-teal-deep);
}
.cs-consent__marque b { font-weight: 800; }
.cs-consent__titre {
    margin: 0 0 var(--cs-space-2);
    font-family: var(--cs-font-display);
    font-size: 1.5rem;
    line-height: 1.2;
    letter-spacing: -0.01em;
    color: var(--cs-ink);
}
.cs-consent__texte { margin: 0 0 var(--cs-space-4); font-size: 0.9375rem; line-height: var(--cs-leading-normal); }
.cs-consent__engagements {
    display: flex;
    flex-wrap: wrap;
    gap: var(--cs-space-2);
    margin: 0 0 var(--cs-space-4);
    padding: 0;
    list-style: none;
}
.cs-consent__engagements li {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    border-radius: 999px;
    background: var(--cs-teal-soft);
    color: var(--cs-teal-deep);
    font-size: 0.8125rem;
    font-weight: 600;
}
.cs-consent__engagements svg { width: 15px; height: 15px; stroke: currentColor; fill: none; stroke-width: 2.2; }
.cs-consent__finalites { margin: 0 0 var(--cs-space-5); font-size: 0.8125rem; line-height: 1.5; color: var(--cs-mute); }
.cs-consent[hidden] { display: none; }
html.cs-consent-ouvert { overflow: hidden; }
/* Côté droit quand la gauche couvrirait un bouton d'action (placé par le JS). */
.cs-consent--entree .cs-consent__carte { 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__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 { padding: var(--cs-space-3); }
    .cs-consent__carte { grid-template-columns: 1fr; max-height: calc(100dvh - 2 * var(--cs-space-3)); }
    .cs-consent__photo { height: 96px; }
    .cs-consent__corps { padding: var(--cs-space-5) var(--cs-space-5) calc(var(--cs-space-5) + env(safe-area-inset-bottom, 0px)); }
    .cs-consent__sans { position: static; display: block; margin: 0 0 var(--cs-space-2) auto; }
    .cs-consent__marque { margin-top: 0; }
    .cs-consent__titre { font-size: 1.3125rem; }
    .cs-consent__texte { font-size: 0.875rem; }
    .cs-consent__actions { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .cs-consent__btn--oui { grid-column: 1 / -1; order: -1; }
    .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). */


/* Petits écrans en hauteur : la photo cède la place aux boutons. */
@media (max-width: 640px) and (max-height: 760px) {
    .cs-consent__photo { display: none; }
    .cs-consent__corps { padding-top: var(--cs-space-4); }
    .cs-consent__marque { margin-bottom: var(--cs-space-3); }
    .cs-consent__engagements { gap: 6px; margin-bottom: var(--cs-space-3); }
    .cs-consent__finalites { margin-bottom: var(--cs-space-4); }
}

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

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