/* =============================================================================
   LE BANDEAU DE CONSENTEMENT

   Volontairement dans son propre fichier, comme la Collection : retirer le
   <link> et le <script> suffit à revenir à un site sans bandeau, et la mesure
   de ceux qui ont déjà répondu continue de fonctionner.

   Repris du vocabulaire du site : papier #f8f9fa, filets à 8 % de noir,
   Outfit pour l'interface, rayon 12, élan cubic-bezier(0.34, 1.56, 0.64, 1).

   Ce qu'il ne fait pas, et c'est délibéré : il ne recouvre rien, ne bloque
   rien, n'assombrit pas la page. On peut jouer avec la table sans y répondre —
   dans ce cas rien n'est mesuré, ce qui est la bonne issue par défaut.
   ========================================================================== */

:root {
    --consent-elan: cubic-bezier(0.34, 1.56, 0.64, 1);
}

.consent {
    position: fixed;
    left: 50%;
    bottom: 0;
    z-index: 2500;          /* au-dessus du compteur (2000) et du tiroir (1400) */
    width: min(680px, calc(100vw - 2rem));
    transform: translate(-50%, calc(100% + 1rem));
    display: flex;
    align-items: center;
    gap: 18px;
    padding: 14px 18px;
    background: rgba(255, 255, 255, 0.94);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid var(--border-color, rgba(0, 0, 0, 0.08));
    border-bottom: none;
    border-radius: 12px 12px 0 0;
    box-shadow: 0 -6px 28px rgba(0, 0, 0, 0.09);
    font-family: 'Outfit', system-ui, sans-serif;
    transition: transform 0.5s var(--consent-elan);
}

.consent.est-visible { transform: translate(-50%, 0); }

.consent-texte {
    flex: 1;
    min-width: 0;
    font-size: 0.82rem;
    line-height: 1.5;
    color: var(--text-muted, #666);
}

.consent-texte b {
    display: block;
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--text-main, #1a1a1a);
    margin-bottom: 2px;
}

.consent-actions { display: flex; gap: 8px; flex-shrink: 0; }

/* Les deux boutons ont le MÊME poids visuel : même taille, même graisse, même
   fond. Refuser doit être aussi facile qu'accepter — c'est une exigence, pas
   une élégance, et un « accepter » plus gros suffirait à vicier le
   consentement recueilli. */
.consent-actions button {
    font-family: inherit;
    font-size: 0.8rem;
    font-weight: 600;
    padding: 8px 16px;
    border: 1px solid var(--border-color, rgba(0, 0, 0, 0.12));
    border-radius: 6px;
    background: #fff;
    color: var(--text-main, #1a1a1a);
    cursor: pointer;
    transition: background 0.2s, border-color 0.2s, transform 0.2s;
}

.consent-actions button:hover {
    background: #fafafa;
    border-color: #bbb;
    transform: translateY(-1px);
}

.consent-actions button:focus-visible {
    outline: 2px solid var(--accent-legendary, #d4af37);
    outline-offset: 2px;
}

.consent-lien {
    color: inherit;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.consent-lien:hover { color: var(--text-main, #1a1a1a); }

/* Le compteur de collection est fixé en bas au centre, et le bandeau le
   recouvrait — mesuré : compteur 811-840, bandeau 745-860. On le fait remonter
   au lieu de le masquer : c'est l'indicateur de progression, et il a du sens
   pendant qu'on tire des cartes.

   On agit sur « bottom » et non sur « transform » : le compteur porte déjà un
   translateX(-50%) pour son centrage, et son état débloqué est animé en
   transform. Écraser cette propriété casserait l'un ou l'autre.

   La hauteur vient d'une variable posée par js/consent.js après mesure : le
   bandeau passe sur deux ou trois lignes selon la largeur, une valeur écrite
   en dur serait fausse la moitié du temps. */
body.consent-visible .collection-counter {
    bottom: calc(var(--consent-hauteur, 90px) + 26px);
    transition: bottom 0.5s var(--consent-elan);
}

/* --- Le rappel, une fois le choix fait -----------------------------------
   Le retrait du consentement doit rester possible à tout moment, donc il faut
   une commande permanente. Coin bas-gauche : le compteur est au centre, la
   languette Collection au bord droit, cet angle est libre.
   Minuscule et sans texte au repos : le libellé n'apparaît qu'au survol, et
   l'intitulé accessible le porte en permanence. */
.consent-rappel {
    position: fixed;
    left: 14px;
    bottom: 14px;
    z-index: 2400;
    display: inline-flex;
    align-items: center;
    gap: 0;
    max-width: 30px;
    overflow: hidden;
    padding: 7px;
    background: rgba(255, 255, 255, 0.8);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid var(--border-color, rgba(0, 0, 0, 0.08));
    border-radius: 20px;
    color: #b0b0b0;
    font-family: 'Outfit', system-ui, sans-serif;
    font-size: 0.72rem;
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
    transition: max-width 0.35s var(--consent-elan), color 0.25s, gap 0.35s var(--consent-elan);
}

.consent-rappel:hover,
.consent-rappel:focus-visible {
    max-width: 220px;
    gap: 7px;
    color: var(--text-main, #1a1a1a);
}

.consent-rappel i { font-size: 0.8rem; flex-shrink: 0; }

/* --- Mobile ---------------------------------------------------------------
   En colonne, et les boutons prennent la largeur : à 375 px, deux boutons de
   16 px de padding côte à côte serrent le texte contre le bord. */
@media (max-width: 560px) {
    .consent {
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
        width: 100vw;
        border-radius: 0;
        border-left: none;
        border-right: none;
        padding: 14px 16px calc(14px + env(safe-area-inset-bottom, 0px));
    }
    .consent-actions button { flex: 1; padding: 10px 12px; }
    /* le rappel remonte : sur mobile le compteur de collection occupe le bas */
    .consent-rappel { bottom: 66px; }
}

@media (prefers-reduced-motion: reduce) {
    .consent, .consent-rappel { transition: none; }
}