/**
 * ================================================================
 * FICHIER : Home.css
 * EMPLACEMENT : pages/Home/Home.css
 * DESCRIPTION : Accueil : hero publicitaire, carte des métiers du hero, chiffres clés, méthode, atouts
 * FRAMEWORK : JaxX Framework V2 (Allman, snake_case)
 * ================================================================
 * Le hero commun (.hero, .hero_grille, .actions_hero...) est dans _theme/theme.css (section 15).
 */

/* HERO ACCUEIL ======================================================================================= */
.hero_accueil
{
    padding-top: clamp(40px, 7vw, 96px);
}

.hero_accueil h1
{
    font-size: clamp(2.3rem, 4.9vw, 3.9rem);
}

.hero_fond
{
    position: absolute;
    inset: 0;
    z-index: -2;
}

.hero_fond .visuel_image
{
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 60%;
}

/* Voile sombre pour garantir la lisibilité du texte sur la photo */
.hero_fond::after
{
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(90deg, rgba(var(--fond_rgb), 0.94) 0%, rgba(var(--fond_rgb), 0.78) 48%, rgba(var(--fond_rgb), 0.45) 100%),
        linear-gradient(180deg, rgba(var(--fond_rgb), 0) 60%, var(--couleur_fond) 100%);
}

.carte_hero_metiers
{
    padding: 24px;
    border-radius: 20px;
}

.titre_carte_hero
{
    margin: 0 0 14px;
    font-family: var(--police_titre);
    font-size: 1.45rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: var(--couleur_texte_fort);
}

.pastilles_metiers
{
    display: grid;
    gap: 10px;
    margin: 0 0 16px;
    padding: 0;
    list-style: none;
}

.pastille_metier
{
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 10px 14px 10px 10px;
    border: 1px solid var(--couleur_bordure);
    border-radius: 14px;
    background: rgba(var(--voile_rgb), 0.03);
    color: var(--couleur_texte_fort);
    text-decoration: none;
    transition: border-color var(--transition_douce), background var(--transition_douce), transform var(--transition_douce);
}

.pastille_metier:hover,
.pastille_metier:focus-visible
{
    border-color: var(--couleur_pole, var(--couleur_accent));
    background: rgba(var(--voile_rgb), 0.06);
    color: var(--couleur_texte_fort);
    transform: translateX(3px);
}

.icone_pastille
{
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: var(--couleur_pole, var(--couleur_accent));
    color: var(--couleur_sur_accent);
}

.texte_pastille
{
    display: flex;
    flex-direction: column;
    min-width: 0;
    line-height: 1.25;
}

.texte_pastille strong
{
    font-family: var(--police_titre);
    font-size: 1.15rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.texte_pastille small
{
    overflow: hidden;
    font-size: 0.84rem;
    color: var(--couleur_texte_doux);
    white-space: nowrap;
    text-overflow: ellipsis;
}

.chevron_pastille
{
    margin-left: auto;
    color: var(--couleur_texte_doux);
}

.note_carte_hero
{
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    font-size: 0.92rem;
    font-weight: 600;
    color: var(--couleur_texte);
}

.note_carte_hero .material-symbols-outlined
{
    color: var(--couleur_accent);
}
/* HERO ACCUEIL ======================================================================================= */

/* CHIFFRES CLES ====================================================================================== */
.bande_chiffres
{
    padding: 34px 0;
    border-bottom: 1px solid var(--couleur_bordure);
    background: var(--couleur_fond);
}

.liste_chiffres
{
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 20px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.chiffre_cle
{
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding-left: 18px;
    border-left: 3px solid var(--couleur_accent);
}

.chiffre_cle strong
{
    font-family: var(--police_titre);
    font-size: clamp(2rem, 3.4vw, 2.8rem);
    font-weight: 800;
    line-height: 1;
    color: var(--couleur_texte_fort);
}

.chiffre_cle span
{
    font-size: 0.92rem;
    color: var(--couleur_texte_doux);
}
/* CHIFFRES CLES ====================================================================================== */

/* METHODE ============================================================================================ */
.grille_etapes
{
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 22px;
    margin: 0;
    padding: 0;
    list-style: none;
    counter-reset: none;
}

.carte_etape
{
    position: relative;
    padding: 30px 26px 26px;
    border-radius: var(--rayon_carte);
}

.numero_etape
{
    position: absolute;
    top: 14px;
    right: 20px;
    font-family: var(--police_titre);
    font-size: 4rem;
    font-weight: 800;
    line-height: 1;
    color: rgba(var(--accent_rgb), 0.16);
}

.icone_etape
{
    display: block;
    margin-bottom: 14px;
    font-size: 2.2rem;
    color: var(--couleur_accent);
}

.carte_etape p
{
    margin: 0;
}

.action_methode
{
    display: flex;
    justify-content: center;
    margin-top: 36px;
}
/* METHODE ============================================================================================ */

/* ATOUTS ============================================================================================= */
.grille_atouts
{
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 20px;
}

.carte_atout
{
    padding: 26px 22px;
    border-radius: var(--rayon_carte);
}

.icone_atout
{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 50px;
    height: 50px;
    margin-bottom: 16px;
    border: 1px solid rgba(var(--accent_rgb), 0.4);
    border-radius: 12px;
    background: rgba(var(--accent_rgb), 0.08);
    color: var(--couleur_accent);
}

.carte_atout h3
{
    margin-bottom: 8px;
    font-size: 1.3rem;
}

.carte_atout p
{
    margin: 0;
    font-size: 0.95rem;
}
/* Savoir-faire : 3 cartes, même gabarit que les atouts */
.grille_savoir_faire
{
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

/* ATOUTS ============================================================================================= */

/* RESPONSIVE ========================================================================================= */
@media (max-width: 1140px)
{
    .grille_atouts,
    .grille_savoir_faire
    {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 960px)
{
    .hero_fond::after
    {
        background: linear-gradient(180deg, rgba(var(--fond_rgb), 0.82) 0%, rgba(var(--fond_rgb), 0.9) 55%, var(--couleur_fond) 100%);
    }

    .grille_etapes
    {
        grid-template-columns: minmax(0, 1fr);
    }

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

@media (max-width: 640px)
{
    .grille_atouts,
    .grille_savoir_faire
    {
        grid-template-columns: minmax(0, 1fr);
    }

    .carte_hero_metiers
    {
        padding: 18px;
    }
}
/* RESPONSIVE ========================================================================================= */

/* HERO BANNIERE : BANDEAU DES METIERS (DIALOGUE N° 2218) ============================================ */
/* 07/11/2026 02:10 (Claude Opus 5.5, sous-agent JAXXMEDIACENTER #1, Dialogue anunaqi n° 2218) :
   la carte « Quel est votre projet ? » quitte la moitié droite du héros (qui montre désormais la photo en bannière)
   et devient un bandeau en verre fumé en bas du héros : 5 pastilles en ligne sur ordinateur, défilement horizontal au doigt sur mobile.
   La photo, son voile et le fondu sont dans _theme/theme.css (section 16) : les règles .hero_fond ci-dessus sont neutralisées
   par la spécificité .hero_banniere .hero_fond (gardées pour la version 2). */
.bandeau_projets_hero
{
    position: relative;
    z-index: 1;
    margin-top: clamp(28px, 4vw, 52px);
}

.carte_hero_ligne
{
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 14px 24px;
    padding: 18px 20px;
}

.carte_hero_ligne .titre_carte_hero
{
    grid-column: 1;
    grid-row: 1;
    margin: 0;
    font-family: var(--police_titre_principal);
    font-size: 1.35rem;
    font-weight: 600;
    letter-spacing: 0;
    text-transform: none;
}

.carte_hero_ligne .note_carte_hero
{
    grid-column: 2;
    grid-row: 1;
    justify-self: end;
}

.carte_hero_ligne .pastilles_metiers
{
    grid-column: 1 / -1;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    margin: 0;
}

.carte_hero_ligne .pastille_metier
{
    gap: 10px;
    height: 100%;
    padding: 8px 10px 8px 8px;
}

.carte_hero_ligne .pastille_metier:hover,
.carte_hero_ligne .pastille_metier:focus-visible
{
    transform: translateY(-2px);
}

.carte_hero_ligne .icone_pastille
{
    width: 40px;
    height: 40px;
}

.carte_hero_ligne .texte_pastille strong
{
    font-size: 1.05rem;
}

.carte_hero_ligne .texte_pastille small
{
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    white-space: normal;
    line-height: 1.3;
}

.carte_hero_ligne .chevron_pastille
{
    display: none;
}

@media (max-width: 1140px)
{
    .carte_hero_ligne .pastilles_metiers
    {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

/* Mobile : pastilles en tuiles défilantes, façon application */
@media (max-width: 767px)
{
    .bandeau_projets_hero
    {
        margin-top: 24px;
    }

    .carte_hero_ligne
    {
        grid-template-columns: minmax(0, 1fr);
        gap: 12px;
        padding: 16px 0 14px;
        border-radius: 22px;
    }

    .carte_hero_ligne .titre_carte_hero,
    .carte_hero_ligne .note_carte_hero
    {
        grid-column: 1;
        grid-row: auto;
        justify-self: start;
        padding: 0 16px;
    }

    .carte_hero_ligne .pastilles_metiers
    {
        display: flex;
        gap: 10px;
        padding: 2px 16px 4px;
        overflow-x: auto;
        overscroll-behavior-x: contain;
        scroll-snap-type: x mandatory;
        scroll-padding: 0 16px;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }

    .carte_hero_ligne .pastilles_metiers::-webkit-scrollbar
    {
        display: none;
    }

    .carte_hero_ligne .pastilles_metiers > li
    {
        flex: 0 0 auto;
        scroll-snap-align: start;
    }

    .carte_hero_ligne .pastille_metier
    {
        flex-direction: column;
        align-items: flex-start;
        width: 128px;
        padding: 12px;
    }

    .carte_hero_ligne .pastille_metier:hover,
    .carte_hero_ligne .pastille_metier:focus-visible
    {
        transform: none;
    }

    .carte_hero_ligne .texte_pastille small
    {
        display: none;
    }

    /* Atouts et savoir-faire : lignes compactes (icône à gauche) */
    .carte_atout
    {
        display: grid;
        grid-template-columns: 44px minmax(0, 1fr);
        column-gap: 14px;
        padding: 18px;
    }

    .carte_atout .icone_atout
    {
        grid-row: span 2;
        width: 44px;
        height: 44px;
        margin: 0;
    }

    .carte_atout h3
    {
        margin-bottom: 4px;
        font-size: 1.2rem;
    }
}
/* HERO BANNIERE : BANDEAU DES METIERS ================================================================ */

/* MOBILE IMPECCABLE (07/11/2026, N° 1 JAXXBOT MTP) =================================================== */
/* 07/11/2026 14:10 (Claude Opus 5.5, n° 1 JaxXBot MTP) : tuiles « Quel est votre projet ? » un peu plus larges
   (128 px trop justes pour « TERRASSEMENT » en capitales), nom du métier jamais coupé ni débordant ;
   chiffres clés : bordure orange du logo. Les règles ci-dessus restent en place, celles-ci les complètent. */
.chiffre_cle
{
    border-left-color: var(--couleur_action, var(--couleur_accent));
}

@media (max-width: 767px)
{
    .carte_hero_ligne .pastille_metier
    {
        width: 138px;
        min-height: 92px;
    }

    .carte_hero_ligne .texte_pastille
    {
        max-width: 100%;
    }

    .carte_hero_ligne .texte_pastille strong
    {
        font-size: 1rem;
        letter-spacing: 0.02em;
        overflow-wrap: anywhere;
    }
}
/* MOBILE IMPECCABLE ================================================================================== */

/* SECTIONS DIFFERENCIEES ============================================================================= */
/* 08/11/2026 (n° 27 JaxXBot MTP) : fonds de sections plus tranchés, en nuances de vert ; texte clair sur les fonds sombres.
   Variables propres à la home, dérivées de la charte verte du site (aucune couleur d'un autre projet). */
:root
{
    --fond_sec_chiffres: #1e5a3c;
    --fond_sec_metiers: #f1faf4;
    --fond_sec_methode: #c4e4d1;
    --fond_sec_atouts: #f6fbf8;
    --fond_sec_savoir: #2b7050;
    --fond_sec_zone: #d3ebdd;
    --fond_sec_devis: #eaf6ee;
    --fond_sec_faq: #cfe8d9;
    --fond_sec_cta: #1a4d34;
    --texte_sur_fond_sombre: #f1f7f3;
    --texte_doux_sur_fond_sombre: #cfe3d7;
}

:root[data-theme="dark"]
{
    --fond_sec_chiffres: #214a37;
    --fond_sec_metiers: #0f1a16;
    --fond_sec_methode: #1a3327;
    --fond_sec_atouts: #12211a;
    --fond_sec_savoir: #244d3a;
    --fond_sec_zone: #162b21;
    --fond_sec_devis: #0f1a16;
    --fond_sec_faq: #1c372a;
    --fond_sec_cta: #214a37;
}

@media (prefers-color-scheme: dark)
{
    :root:not([data-theme="light"]):not([data-theme="dark"])
    {
        --fond_sec_chiffres: #214a37;
        --fond_sec_metiers: #0f1a16;
        --fond_sec_methode: #1a3327;
        --fond_sec_atouts: #12211a;
        --fond_sec_savoir: #244d3a;
        --fond_sec_zone: #162b21;
        --fond_sec_devis: #0f1a16;
        --fond_sec_faq: #1c372a;
        --fond_sec_cta: #214a37;
    }
}

main .bande_chiffres
{
    background: var(--fond_sec_chiffres);
    border-bottom: 0;
}

main .bande_chiffres .chiffre_cle strong
{
    color: var(--texte_sur_fond_sombre);
}

main .bande_chiffres .chiffre_cle span
{
    color: var(--texte_doux_sur_fond_sombre);
}

main .section_metiers
{
    background: var(--fond_sec_metiers);
}

main .section_methode
{
    background: var(--fond_sec_methode);
}

main .section_atouts
{
    background: var(--fond_sec_atouts);
}

main .section_savoir_faire
{
    background: var(--fond_sec_savoir);
}

main .section_savoir_faire .en_tete_section h2,
main .section_savoir_faire .en_tete_section h3
{
    color: var(--texte_sur_fond_sombre);
}

main .section_savoir_faire .en_tete_section p
{
    color: var(--texte_doux_sur_fond_sombre);
}

main .section_zone
{
    background: var(--fond_sec_zone);
}

main .section_devis
{
    background: var(--fond_sec_devis);
}

main .section_faq
{
    background: var(--fond_sec_faq);
}

main .section_bandeau_cta
{
    padding-top: var(--espace_section);
    background: var(--fond_sec_cta);
}
/* SECTIONS DIFFERENCIEES ============================================================================= */

/* CTA DU HERO SUR UNE LIGNE ========================================================================== */
/* 08/11/2026 (n° 27 JaxXBot MTP) : les trois boutons (Devis gratuit, Appeler, WhatsApp) restent sur une seule ligne, du bureau au mobile */
main .hero .hero_texte .actions_hero
{
    display: flex;
    flex-wrap: nowrap;
    gap: 10px;
}

main .hero .hero_texte .actions_hero .bouton
{
    /* flex: 1 1 0; */
    flex: 1 1 auto;
    width: auto;
    min-width: 0;
    padding: 12px 10px;
    font-size: clamp(0.92rem, 1.4vw, 1.1rem);
    white-space: nowrap;
}

@media (max-width: 767px)
{
    main .hero .hero_texte .actions_hero
    {
        gap: 6px;
    }

    main .hero .hero_texte .actions_hero .bouton
    {
        padding: 10px 4px;
        gap: 4px;
        font-size: 0.86rem;
    }

    main .hero .hero_texte .actions_hero .bouton svg,
    main .hero .hero_texte .actions_hero .bouton .icone
    {
        width: 16px;
        height: 16px;
    }
}
/* CTA DU HERO SUR UNE LIGNE ========================================================================== */