@charset "utf-8";

/*
===================================================================
    OFFRE EXCEPTIONNELLE — campagne du 01/09 au 31/10/2026
    Bandeau (toutes pages) + modale (accueil desktop).

    Fichier TEMPORAIRE : à supprimer au retrait de l'offre.
    Cf. docs/espritlandes/todo/2026-08-24-retrait-offre-taxe-fonciere.md
===================================================================
*/

/*
    BANDEAU
    Placé dans le flux en tête de <main> : le header est en position fixed
    (en haut sur desktop, en bas sur mobile), on ne le touche donc pas.
    Visible par défaut, retiré par offre.js si le visiteur l'a déjà fermé.

    Fond beige et non vert : le header est lui aussi en --primary-main, un
    bandeau vert s'y fondrait au lieu d'attirer l'œil — ce qui est tout
    l'objet d'une campagne radio et presse qui renvoie vers le site.
*/
.offre-banner {
    position: relative;
    background-color: var(--focus-main);
    color: var(--primary-x-dark);
    padding: var(--space-2) var(--space-5) var(--space-2) var(--space-3);
    text-align: center;
    font-size: 0.875rem;
    line-height: 1.4;
}

.offre-banner[hidden] {
    display: none;
}

.offre-banner-text {
    display: block;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    font-weight: 700;
    color: var(--primary-x-dark);
}

/*
    base.css pose « a, a:link, a:visited { color: var(--primary-main) } ».
    Sa spécificité (0,1,1) dépasse celle d'une simple classe : nos liens
    doivent reprendre la main avec les mêmes pseudo-classes, sans quoi ils
    s'affichent en vert, quasi invisible sur ces fonds contrastés.
*/
.offre-banner-link,
.offre-banner-link:link,
.offre-banner-link:visited {
    display: inline-block;
    margin-top: var(--space-1);
    color: var(--primary-x-dark);
    text-decoration: underline;
    text-underline-offset: 3px;
    font-weight: 600;
}

.offre-banner-link:hover,
.offre-banner-link:focus,
.offre-banner-link:focus-visible {
    color: var(--primary-main);
}

.offre-banner-close {
    position: absolute;
    top: 50%;
    right: var(--space-2);
    transform: translateY(-50%);
    background: none;
    border: 0;
    padding: var(--space-1) var(--space-2);
    line-height: 1;
    font-size: 1.25rem;
    color: var(--primary-x-dark);
    cursor: pointer;
}

.offre-banner-close:hover,
.offre-banner-close:focus-visible {
    color: var(--primary-main);
}

/*
    Bouton clair sur fond sombre (modale + page offre). Bootstrap pose sa
    couleur via .btn, de spécificité (0,1,0) : elle perd elle aussi contre
    a:link. D'où cette classe dédiée plutôt qu'un .btn-outline-light.
*/
.btn-offre-clair,
.btn-offre-clair:link,
.btn-offre-clair:visited {
    color: var(--focus-x-light);
    background-color: transparent;
    border: 1px solid var(--focus-light);
}

.btn-offre-clair:hover,
.btn-offre-clair:active,
.btn-offre-clair:focus,
.btn-offre-clair:focus-visible {
    color: var(--primary-x-dark);
    background-color: var(--focus-x-light);
    border-color: var(--focus-x-light);
}

/*
    MODALE (accueil, desktop uniquement)
    Ouverte par offre.js, une seule fois par visiteur.
*/
.offre-modal .modal-content {
    background-color: var(--primary-main);
    color: var(--focus-x-light);
    border: 0;
    border-radius: var(--radius-md);
}

.offre-modal .modal-body {
    padding: var(--space-5);
    text-align: center;
}

.offre-modal .offre-modal-title {
    color: var(--focus-main);
    text-transform: uppercase;
    font-size: clamp(1.375rem, 2vw, 1.75rem);
    line-height: 1.2;
    margin-bottom: var(--space-2);
}

.offre-modal .offre-modal-subtitle {
    color: var(--focus-x-light);
    font-size: 1.125rem;
    margin-bottom: var(--space-4);
}

.offre-modal .offre-modal-list {
    list-style: none;
    padding: 0;
    margin: 0 0 var(--space-4);
    text-align: left;
    display: inline-block;
}

.offre-modal .offre-modal-list li {
    position: relative;
    padding-left: 1.5rem;
    margin-bottom: var(--space-2);
}

.offre-modal .offre-modal-list li::before {
    content: "\2713";
    position: absolute;
    left: 0;
    color: var(--focus-main);
    font-weight: 700;
}

.offre-modal .offre-modal-dates {
    display: block;
    color: var(--focus-light);
    font-size: 0.9375rem;
    margin-bottom: var(--space-4);
}

.offre-modal .offre-modal-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    justify-content: center;
}

.offre-modal .btn-close {
    filter: invert(1) grayscale(100%) brightness(200%);
    opacity: 0.8;
}

/*
    PAGE OFFRE
    Encart des conditions, aux couleurs de la charte.
*/
.offre-conditions {
    background-color: var(--primary-main);
    color: var(--focus-x-light);
    border-radius: var(--radius-md);
    padding: var(--space-5);
}

.offre-conditions h3 {
    color: var(--focus-main);
    text-transform: uppercase;
    font-size: 1.125rem;
    letter-spacing: 0.02em;
    margin-bottom: var(--space-3);
}

.offre-conditions ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.offre-conditions li {
    position: relative;
    padding-left: 1.75rem;
    margin-bottom: var(--space-2);
}

.offre-conditions li::before {
    content: "\2713";
    position: absolute;
    left: 0;
    color: var(--focus-main);
    font-weight: 700;
}

.offre-conditions li:last-child {
    margin-bottom: 0;
}

/*
===================================================================
    Small devices (landscape phones, 576px and up)
===================================================================
*/
@media (min-width: 576px) {

    .offre-banner {
        font-size: 0.9375rem;
    }

    .offre-banner-link {
        margin-top: 0;
        margin-left: var(--space-2);
    }

    .offre-banner-text {
        display: inline;
    }
}