/*
    ==========================================================
    PROJECT : DEVENIR-ARTISAN.NET
    FILE    : card-benefit.css
    AUTH    : Renaud
    CREATED : 21 décembre 2025
    UPDATED : 21 décembre 2025
    ==========================================================
*/

/**
*   @project        DEVENIR-ARTISAN.NET
*   @description    Style unitaire de la carte "Bénéfice" (Argumentaire).
*                   Gère l'affichage de l'icône, du titre et de la description
*                   avec un effet de survol interactif.
*
*   @file           css/card-benefit.css
*   @see            includes/card-benefit.php
*   @see            css/colors-semantic.css
*   @see            css/fonts-semantic.css
*/

/* --- BLOCK : Card Benefit --- */
.card-benefit {
    /* PLACEMENT */
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 2.5rem 2rem;

    /* VISUEL */
    background-color: var(--color-background-card);
    border: 1px solid var(--color-card-border);
    border-radius: 12px;
    
    /* EFFET */
    transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}

/* ÉTAT : Hover */
.card-benefit:hover {
    /* VISUEL */
    border-color: var(--color-blue-060);
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.06);
    
    /* EFFET */
    transform: translateY(-5px);
}

/* --- ELEMENT : Icon --- */
.card-benefit__icon {
    /* PLACEMENT */
    margin-bottom: 1.5rem;

    /* TEXTE */
    font-size: 3rem;
    line-height: 1;
    
    /* EMPECHER LA SELECTION (Si emoji) */
    user-select: none;
}

/* --- ELEMENT : Title --- */
.card-benefit__title {
    /* PLACEMENT */
    margin-bottom: 1rem;

    /* TEXTE */
    font-family: var(--font-heading-sub); /* Souvent Lato Bold */
    font-size: 1.35rem;
    font-weight: 700;
    line-height: 1.3;
    color: var(--color-headings);
}

/* --- ELEMENT : Text --- */
.card-benefit__text {
    /* PLACEMENT */
    margin: 0;

    /* TEXTE */
    font-family: var(--font-text-body);
    font-size: 1rem;
    line-height: 1.6;
    color: var(--color-text-muted);
}

/* 
   ==========================================================================
   DEBUG
   ========================================================================== 
*/
/*
.card-benefit        { border: 1px solid orange; }
.card-benefit__icon  { border: 1px solid red; }
.card-benefit__title { border: 1px solid blue; }
*/