/**
 * besoins.css — Section Besoins
 */

/* -------------------------
   Section
------------------------- */
.section-besoins {
    position: relative;
    background-color: var(--color-bg);
    padding-block: var(--section-padding-y);
}

/* -------------------------
   Inner layout — mobile : colonne
------------------------- */
.section-besoins__inner {
    position: relative;
    z-index: var(--z-above); /* > shapes d'outils (var(--z-base) = 1) */
    display: flex;
    flex-direction: column; /* Empile le titre et la grille */
    gap: var(--space-xl);
    align-items: center;    /* CENTRE horizontalement tout le bloc inner */
    width: 100%;
    max-width: var(--container-max-width-xl);
    margin: auto;
    padding-inline: var(--section-padding-x);
}

.section-besoins__content{
    margin:auto;
    width:100%;
    }



/* -------------------------
   Titre
------------------------- */
.section-besoins__title {
    font-family: var(--font-primary);
    font-size: var(--font-size-5xl);
    font-weight: var(--font-weight-black);
    line-height: var(--line-height-tight);
    text-transform: uppercase;
}

/* -------------------------
   Grille — mobile : 1 colonne
------------------------- */
.section-besoins__grid {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: repeat(4, auto);
    width: 100%;
    margin: auto;
}

/* -------------------------
   Carte
------------------------- */
.section-besoins__card {
    border-radius: var(--radius-md);
    padding: var(--space-md);
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
}

.section-besoins__card-title {
    font-family: var(--font-primary);
    font-size: var(--font-size-5xl);
    font-weight: var(--font-weight-black);
    line-height: var(--line-height-tight);
}

.section-besoins__card-subtitle {
    font-family: var(--font-secondary);
    font-size: var(--font-size-base);
    line-height: var(--line-height-normal);
    opacity: 0.8;
}

/* -------------------------
   Modificateurs couleur
------------------------- */
.section-besoins__card--gris,
.section-besoins__card--gris .section-besoins__card-title {
    background-color: var(--color-gray-light);
    color: var(--color-blue) ;
}

/* Carte LIME -> Texte BLEU */
.section-besoins__card--lime,
.section-besoins__card--lime .section-besoins__card-title {
    background-color: var(--color-lime);
    color: var(--color-blue);
}

/* Carte NOIRE -> Texte LIME */
.section-besoins__card--noir,
.section-besoins__card--noir .section-besoins__card-title {
    background-color: var(--color-black);
    color: var(--color-lime) ;
}




/* Carte BLEUE -> Texte LIME */
.section-besoins__card--bleu,
.section-besoins__card--bleu .section-besoins__card-title {
    background-color: var(--color-blue);
    color: var(--color-lime) ;

}

/* Effet empilement des cartes  */
.section-besoins__card--lime{
    translate: 0 -10px;
}
.section-besoins__card--noir{
    translate: 0 -20px;
}
.section-besoins__card--bleu{
    translate: 0 -30px;
}


/* -------------------------
   Tablette 768px
------------------------- */
@media (min-width: 768px) {
    .section-besoins__content {
        display: flex;
        flex-direction: row;
    }

    .section-besoins__title {
        font-size: var(--font-size-7xl);
    }
}

/* -------------------------
   Desktop 1024px
------------------------- */
@media (min-width: 1024px) {
    .section-besoins__title {
        font-size: var(--font-size-10xl);
    }

}