/*
    ========================================
    SECTION-BENEFITS.CSS
    Auteur                : Renaud
    Création              : 23 novembre 2025
    Dernière modification : 12 décembre 2025
    ========================================
*/
/**
*   @project   DEVENIR-ARTISAN.NET
*   Styles pour la section "Pourquoi choisir cette méthode".
*   Grille de cartes avec icônes.
*
*   @file  css/section-benefits.css
*
*   @see   includes/section-benefits.php
*   @see   css/main-content.css (.container-grid)
*/

/* --- ELEMENT : Grid (Grille Responsive) --- */
.section-benefits__grid {
    /* PLACEMENT */
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 2rem;
    width: 100%;
}

/* --- BLOCK : Benefit Card --- */
.benefit-card {
    /* PLACEMENT */
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 2rem;

    /* VISUEL */
    background-color: var(--color-background-card);
    border: 1px solid var(--color-card-border);
    border-radius: 12px;
    
    /* TEXTE */
    text-align: left;

    /* EFFET */
    transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}

/* ÉTAT : Hover */
.benefit-card:hover {
    /* VISUEL */
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.05);
    border-color: var(--color-blue-060); /* Bordure devient bleue */
    
    /* EFFET */
    transform: translateY(-5px);
}

/* --- ELEMENT : Icon --- */
.benefit-card__icon {
    /* PLACEMENT */
    margin-bottom: 1.5rem;

    /* TEXTE */
    font-size: 3rem;
    line-height: 1;
}

/* --- ELEMENT : Title --- */
.benefit-card__title {
    /* PLACEMENT */
    margin-bottom: 0.75rem;

    /* TEXTE */
    font-family: var(--font-heading-sub); /* Lato Bold */
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--color-headings);
}

/* --- ELEMENT : Text --- */
.benefit-card__text {
    /* PLACEMENT */
    margin: 0;

    /* TEXTE */
    font-family: var(--font-text-body);
    font-size: 1rem;
    line-height: 1.6;
    color: var(--color-text-muted);
}

/* DEBUG */
/*
.benefit-card { border: 1px solid orange; }
*/