:root {
    --banner-bg: #2c3e50;
    /* gris très foncé */
    --banner-text: #ffffff;
    --banner-link: #60a5fa;
    --banner-hover-link: #00000;
    /* bleu clair */
    --border: #1f2937;
    --radius: 12px;
    --shadow: 0 10px 30px rgba(0, 0, 0, .25);
    --focus: 2px solid #2563eb;
    --maxw: 920px;

    --brand: #2676AB;
    /* Couleur principale du CTA */
    --brand-hover: #2c3e50;
    --brand-border-hover: #FBA81A;
    --brand-contrast: #ffffff;
    /* Texte sur CTA */
    --muted-fg: #374151;
    /* Texte secondaire/bordures */
    --muted-bg: #f3f4f6;
    /* Fond bouton secondaire */
    --focus-ring: 2px solid #2563eb;

}


/* Boutons */
#bottomBanner button {
    font: inherit;
    cursor: pointer;
    border-radius: .6rem;
    border: 1px solid var(--border);
    padding: .55rem .9rem;
    font-size: 1.5em;
}

#bottomBanner button:focus-visible,
.external-link:focus-visible {
    outline: var(--focus);
    outline-offset: 2px;
}

#bottomBanner button.external-link {
    border: 0px solid var(--border);
    background: none;
    font-size: 1em;
    padding: 0;

}

#bottomBanner.btn-close {
    background: transparent;
    color: #e5e7eb;
    width: 2rem;
    height: 2rem;
    border-radius: .5rem;
    font-size: 1.2rem;
    border: 1px solid #374151;
}

/* Bouton de base */
.btn {
    /*font: inherit; */
    border-radius: .65rem;
    padding: 1rem 1rem;
    border: 1px solid transparent;
    text-decoration: none;
    cursor: pointer;
    transition: filter .15s ease, background-color .15s ease, border-color .15s ease;
}

/* CTA principal : plein et accrocheur */
.btn-primary-cta {
    background: var(--brand);
    color: var(--brand-contrast);
    border-color: var(--brand);
    font-weight: 600;
    box-shadow: 0 6px 14px rgba(37, 99, 235, .25);
}

.btn-primary-cta:hover {
    background: var(--brand-hover);
    border-color: var(--brand-border-hover);
    color: #000;
}

.btn-primary-cta:focus-visible {
    outline: var(--focus-ring);
    outline-offset: 2px;
}

#bottomBanner a {
    margin-bottom: 0px;
}

/* Secondaire : discret (ghost) */
.btn-ghost {
    background: var(--muted-bg);
    color: var(--muted-fg);
    border-color: #e5e7eb;
}

.btn-ghost:hover {
    background: #e7e9ee;
}

/* Bandeau bas de page */
.banner {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    /* collé en bas */
    z-index: 1000;
    display: grid;
    place-items: center;
    padding: 12px;
    pointer-events: none;
    /* évite de bloquer les clics hors contenu */
}

.banner.hidden {
    transform: translateY(10px);
    opacity: 0;
    visibility: hidden;
}

.banner:not(.hidden) {
    transform: translateY(0);
    opacity: 1;
    visibility: visible;
}

@media (prefers-reduced-motion: no-preference) {
    .banner {
        transition: transform .28s ease, opacity .28s ease, visibility .28s linear;
    }
}

.banner-content {
    pointer-events: auto;
    /* rend interactif uniquement le contenu du bandeau */
    background: var(--banner-bg);
    color: var(--banner-text);
    width: min(96vw, var(--maxw));
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    border: 1px solid var(--border);
    padding: 1.4rem 1.5rem;
    display: grid;
    grid-template-columns: 1fr auto;
    gap: .75rem 1rem;
    align-items: center;
}

.banner-text {
    margin: 0;
}

.external-link {
    color: var(--banner-link);
    text-decoration: underline;
}

.external-link:hover {
    text-decoration-thickness: 2px;
}

.banner-actions {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
}




/* Boutons */




/* Bandeau bas */
#bottomBanner.banner {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    display: grid;
    place-items: center;
    padding: 12px;
    z-index: 1000;
    pointer-events: none;
    /* ne bloque pas la page */
    opacity: 0;
    transform: translateY(15px);
    visibility: hidden;
}

.banner.hidden {
    transform: translateY(10px);
    opacity: 0;
    visibility: hidden;
}

.banner:not(.hidden) {
    transform: translateY(0);
    opacity: 1;
    visibility: visible;
}

@media (prefers-reduced-motion: no-preference) {
    .banner {
        transition: transform .28s ease, opacity .28s ease, visibility .28s linear;
    }
}

#bottomBanner.banner-content {
    pointer-events: auto;
    /* interactif uniquement sur le bandeau */
    background: var(--banner-bg);
    color: var(--banner-text);
    width: min(96vw, 900px);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    border: 1px solid var(--border);
    padding: 1rem;
    display: grid;
    gap: 1rem;
    grid-template-columns: 1fr auto;
    align-items: center;
}

/* Animation */
#bottomBanner.banner.show {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    transition: all .28s ease;
}

#bottomBanner a.lien-externe {
    color: white;
    text-decoration: underline;
}

#bottomBanner a.lien-externe:hover {
    color: black;
    text-decoration: none;
}


@media (max-width: 600px) {
    .banner-content {
        grid-template-columns: 1fr;
        /* une seule colonne = texte + boutons en 2 lignes */
        text-align: left;
    }

    .banner-actions {
        justify-content: flex-start;
        /* les boutons s'alignent à gauche */
    }
}


/* Regroupe le texte et les actions en grille */
.banner-content {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 0.75rem 1rem;
    align-items: center;
}

/* Actions : inline-flex pour les boutons */
.banner-actions {
    display: inline-flex;
    align-items: center;
    gap: .6rem;
}



/* Bouton fermer (icône) : le moins proéminent */
.banner-close {
    background: transparent;
    color: #e5e7eb;
    width: 2rem;
    height: 2rem;
    border-radius: .5rem;
    font-size: 1.2rem;
    border: 1px solid #374151;
}

.banner-close:hover {
    background: #1f2937;
}

.banner-close:focus-visible {
    outline: var(--focus-ring);
    outline-offset: 2px;
}

/* Liens dans le texte */
.external-link {
    color: #60a5fa;
    text-decoration: underline;
}

.external-link:hover {
    text-decoration-thickness: 2px;
}

/* ————— Responsive : 2e ligne pour les boutons sur mobile ————— */
@media (max-width: 640px) {
    .banner-content {
        grid-template-columns: 1fr;
        /* texte ligne 1, actions ligne 2 */
    }

    .banner-actions {
        justify-content: stretch;
        width: 100%;
        gap: .5rem;
    }

    /* CTA plein largeur, en premier */
    .btn-primary-cta {
        flex: 1 1 auto;
        text-align: center;
    }

    /* Le bouton "Plus tard" reste plus discret */
    .btn-ghost {
        flex: 0 0 auto;
    }
}