/* En-tête */
.entete {
    background: var(--fond-surface);
    border-bottom: 1px solid var(--filet);
}

.entete__cadre {
    max-width: var(--largeur-contenu);
    margin: 0 auto;
    padding: var(--espace-3) var(--espace-4);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--espace-4);
}

.entete__marque {
    display: inline-flex;
}

.entete__marque img {
    display: block;
    height: 2.2rem;
    width: auto;
}

/* Pied */
.pied {
    border-top: 1px solid var(--filet);
    color: var(--encre-douce);
    font-size: var(--taille-xs);
}

.pied__cadre {
    max-width: var(--largeur-contenu);
    margin: 0 auto;
    padding: var(--espace-6) var(--espace-4);
}

.pied p {
    margin: 0;
}

/* Annonce (accueil, erreurs) */
.annonce {
    max-width: var(--largeur-texte);
    margin-inline: auto;
    background: var(--fond-surface);
    border: 1px solid var(--filet);
    border-radius: var(--rayon-l);
    box-shadow: var(--ombre);
    padding: clamp(var(--espace-6), 5vw, var(--espace-12));
}

.surtitre {
    margin: 0 0 var(--espace-3);
    color: var(--accent);
    font-size: var(--taille-xs);
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.annonce__titre {
    font-size: var(--taille-xl);
}

.annonce__texte {
    color: var(--encre-douce);
    font-size: var(--taille-l);
    max-width: 38rem;
}

/* Liste d'atouts */
.atouts {
    list-style: none;
    margin: var(--espace-8) 0;
    padding: 0;
    display: grid;
    gap: var(--espace-3);
}

.atouts__element {
    display: flex;
    align-items: center;
    gap: var(--espace-3);
}

.atouts__element .fa-solid {
    color: var(--accent);
}

/* Encarts */
.encart {
    display: flex;
    align-items: flex-start;
    gap: var(--espace-3);
    margin: 0;
    padding: var(--espace-3) var(--espace-4);
    border-radius: var(--rayon);
    font-size: var(--taille-s);
}

.encart .fa-solid {
    margin-top: 0.2em;
}

.encart--info {
    background: var(--info-fond);
    color: var(--info-encre);
}

/* Boutons */
.bouton {
    display: inline-flex;
    align-items: center;
    gap: var(--espace-2);
    min-height: 2.75rem;
    padding: var(--espace-2) var(--espace-6);
    border: 0;
    border-radius: var(--rayon);
    background: var(--accent);
    color: var(--sur-accent);
    font: inherit;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
}

.bouton:hover {
    background: var(--accent-survol);
    color: var(--sur-accent);
}