/* ==========================================================================
   Bandeau d'information sur les traceurs - cas C
   La PEAU passe par des jetons --ck-*, relevés sur les composants réels du site
   (bouton .btn-custom, titres Trend Sans, rayons). Aucune couleur du site n'est
   écrite en dur dans le comportement : changer la charte = changer les jetons.
   ========================================================================== */
:root {
    --ck-fond: #fff;
    --ck-texte: #444;
    --ck-titre: var(--bs-primary, #000);
    --ck-trait: #ececec;
    --ck-rayon: 14px;
    --ck-ombre: 0 10px 40px rgba(0, 0, 0, .13);
    --ck-police-titre: 'Trend Sans', system-ui, sans-serif;
    --ck-titre-taille: 15px;
    --ck-titre-graisse: 700;
    --ck-texte-taille: 14px;
    --ck-apparition-duree: .45s;
    --ck-apparition-courbe: cubic-bezier(.2, .9, .25, 1);
    --ck-carte-largeur: 760px;
    /* Cible tactile : 44 px de haut au doigt. police 12 + 2x15 + 2 bordures = 44. */
    --ck-bouton-remplissage: 15px 26px;
}

.ck-banner {
    position: fixed;
    left: 50%;
    bottom: max(16px, env(safe-area-inset-bottom));
    z-index: 1080;
    width: min(calc(100% - 32px), var(--ck-carte-largeur));
    transform: translate(-50%, calc(100% + 32px));
    opacity: 0;
    transition:
        transform var(--ck-apparition-duree) var(--ck-apparition-courbe),
        opacity calc(var(--ck-apparition-duree) * .72) ease;
}

.ck-banner.is-visible { transform: translate(-50%, 0); opacity: 1; }
.ck-banner[hidden] { display: none; }

.ck-card {
    display: flex;
    align-items: center;
    gap: clamp(16px, 2.4vw, 28px);
    padding: clamp(18px, 2.4vw, 26px);
    background: var(--ck-fond);
    border: 1px solid var(--ck-trait);
    border-radius: var(--ck-rayon);
    box-shadow: var(--ck-ombre);
}

.ck-body { flex: 1 1 auto; min-width: 0; }

.ck-title {
    margin: 0 0 4px;
    font-family: var(--ck-police-titre);
    font-size: var(--ck-titre-taille);
    font-weight: var(--ck-titre-graisse);
    color: var(--ck-titre);
}

.ck-text { margin: 0; font-size: var(--ck-texte-taille); line-height: 1.55; color: var(--ck-texte); }
.ck-link { color: var(--ck-titre); text-decoration: underline; white-space: nowrap; }
.ck-actions { flex: 0 0 auto; }
.ck-banner .ck-accept { padding: var(--ck-bouton-remplissage); white-space: nowrap; }

/* Le plancher de 44 px est TACTILE : à la souris le pointeur est précis au pixel et un
   bouton dimensionné pour le doigt fait lourd. On écrit le cas contraignant en base et on
   allège dans la requête — un appareil tactile ne la remplit jamais, donc il garde ses 44 px. */
@media (hover: hover) and (pointer: fine) {
    :root { --ck-bouton-remplissage: .7rem 1.5rem; }
}

@media (max-width: 640px) {
    .ck-card { flex-direction: column; align-items: stretch; text-align: left; }
    .ck-banner .ck-accept { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
    .ck-banner { transition: opacity .01ms linear; transform: translate(-50%, 0); }
}