/* Maeva Boujot — design system (refonte 2026). Source : maquette, porté tel quel. */

/* ============================ 4. MISE EN PAGE ========================== */
.container {
    width: 100%;
    max-width: var(--container);
    margin-inline: auto;
    padding-inline: var(--gutter);
}

.container--narrow {
    max-width: var(--container-narrow);
}

.section {
    padding-block: var(--space-2xl);
}

.section--tight {
    padding-block: var(--space-xl);
}

.section--cream {
    background: var(--cream);
}

.section--white {
    background: var(--white);
}

.section--beige {
    background: var(--beige);
}

/* Le beige est le fond le plus exigeant : --terracotta y tombe à 4,07:1 et
   --sage à 3,86:1. On bascule sur les variantes foncées. */
.section--beige .eyebrow {
    color: var(--terracotta-deep);
}

.section--beige .tile svg,
.section--beige .callout svg {
    color: var(--forest);
}

/* Section verte — le fond de marque #576F54 */
.section--green {
    background: var(--green);
    color: var(--white);
}

.section--green h2,
.section--green h3,
.section--green h4 {
    color: var(--white);
}

.section--green .lede {
    color: rgb(255 255 255 / 92%);
}

/* --sand (#c4b59d) ne tient que 2,74:1 sur le vert : on prend le crème,
   qui passe AA à 4,86:1. Même raison pour tous les textes atténués ci-dessous :
   en dessous de 90 % d'opacité on repasse sous le seuil. */
.section--green .eyebrow {
    color: var(--cream);
}

/* :not(.btn) est indispensable — sans lui, cette règle (spécificité 0,1,1)
   écrase la couleur de .btn--on-dark (0,1,0) et donne du texte blanc sur un
   bouton blanc. */
.section--green a:not(.btn) {
    color: var(--white);
}

.section--green .small,
.section--green .muted {
    color: rgb(255 255 255 / 92%);
}

.section--green .card .small,
.section--green .card .muted {
    color: var(--muted);
}

/* Les cartes posées sur le vert restent claires : on ne relit pas du texte
   vert sur du vert. */

/* La carte redéfinit sa propre couleur de texte : sans ça, ses <li> héritent
   du blanc de la section et deviennent illisibles sur le fond crème. */
.section--green .card {
    background: var(--cream);
    border-color: rgb(255 255 255 / 18%);
    color: var(--ink);
}

.section--green .card h3 {
    color: var(--forest-dark);
}

.section--green .card p {
    color: var(--muted);
}

/* Le tarif reste en vert foncé : la règle ci-dessus est plus spécifique
   que .price, il faut la reprendre explicitement. */
.section--green .card .price {
    color: var(--forest-dark);
}

/* :not(.btn) pour la même raison : sinon un bouton plein posé dans une carte
   se retrouve avec du texte vert sur fond vert. */
.section--green .card a:not(.btn) {
    color: var(--forest);
}

.section__head {
    max-width: 56rem;
    margin-bottom: var(--space-xl);
}

.section__head--center {
    margin-inline: auto;
    text-align: center;
}

.grid {
    display: grid;
    gap: var(--space-m);
}

.grid--2 {
    grid-template-columns: repeat(2, 1fr);
}

.grid--3 {
    grid-template-columns: repeat(3, 1fr);
}

.grid--4 {
    grid-template-columns: repeat(4, 1fr);
}

@media (width <= 62rem) {
    .grid--3,
    .grid--4 {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (width <= 40rem) {
    .grid--2,
    .grid--3,
    .grid--4 {
        grid-template-columns: 1fr;
    }
}

.split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-xl);
    align-items: center;
}

@media (width <= 56rem) {
    .split {
        grid-template-columns: 1fr;
        gap: var(--space-l);
    }
}