/**
 * ================================================================
 * FICHIER : gabarit_metier.css
 * EMPLACEMENT : _theme/gabarit_metier.css
 * DESCRIPTION : Pages métiers (atterrissage Ads) : hero métier, prestations, bénéfices, métiers associés
 * FRAMEWORK : JaxX Framework V2 (Allman, snake_case)
 * ================================================================
 * Le hero commun (.hero, .hero_grille, .actions_hero...) est dans _theme/theme.css (section 15).
 */

/* HERO METIER ======================================================================================== */
.hero_metier
{
    background:
        radial-gradient(ellipse at 88% 8%, color-mix(in srgb, var(--couleur_pole) 22%, transparent) 0%, rgba(0, 0, 0, 0) 48%),
        linear-gradient(180deg, var(--couleur_fond_haut) 0%, var(--couleur_fond) 100%);
}

@supports not (background: color-mix(in srgb, red 50%, transparent))
{
    .hero_metier
    {
        background:
            radial-gradient(ellipse at 88% 8%, rgba(var(--accent_rgb), 0.14) 0%, rgba(var(--accent_rgb), 0) 46%),
            linear-gradient(180deg, var(--couleur_fond_haut) 0%, var(--couleur_fond) 100%);
    }
}

.hero_metier h1
{
    font-size: clamp(2.1rem, 4.4vw, 3.6rem);
}

.hero_metier .badge_hero
{
    border-color: var(--couleur_pole);
    color: var(--couleur_texte_fort);
}

.hero_metier .badge_hero .material-symbols-outlined
{
    color: var(--couleur_pole);
}
/* HERO METIER ======================================================================================== */

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

.carte_prestation
{
    position: relative;
    padding: 26px 24px 22px;
    border-radius: var(--rayon_carte);
    transition: transform var(--transition_douce), border-color var(--transition_douce);
}

.carte_prestation:hover
{
    transform: translateY(-3px);
    border-color: var(--couleur_pole, var(--couleur_accent));
}

.icone_prestation
{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    margin-bottom: 16px;
    border-radius: 12px;
    background: var(--couleur_pole, var(--couleur_accent));
    color: var(--couleur_sur_accent);
    font-size: 1.25rem;
}

.carte_prestation h3
{
    margin-bottom: 8px;
}

.carte_prestation p
{
    margin: 0;
    font-size: 0.97rem;
}
/* PRESTATIONS ======================================================================================== */

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

.carte_benefice
{
    padding: 24px 22px;
    border-radius: var(--rayon_carte);
}

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

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

.carte_benefice p
{
    margin: 0;
    font-size: 0.95rem;
}
/* BENEFICES ========================================================================================== */

/* METIERS ASSOCIES =================================================================================== */
.section_associes .grille_metiers
{
    grid-template-columns: repeat(3, minmax(0, 1fr));
}
/* METIERS ASSOCIES =================================================================================== */

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

@media (max-width: 960px)
{
    .grille_prestations,
    .section_associes .grille_metiers
    {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 640px)
{
    .grille_prestations,
    .grille_benefices,
    .section_associes .grille_metiers
    {
        grid-template-columns: minmax(0, 1fr);
    }
}
/* RESPONSIVE ========================================================================================= */

/* HERO BANNIERE & MOBILE « APPLICATION » (DIALOGUE N° 2218) ========================================== */
/* 07/11/2026 02:10 (Claude Opus 5.5, sous-agent JAXXMEDIACENTER #1, Dialogue anunaqi n° 2218) :
   le héros des pages métiers utilise la photo du métier en bannière (_theme/theme.css, section 16) ;
   le fond dégradé .hero_metier ci-dessus reste pour la version 2, il est couvert par la photo (.hero.hero_banniere).
   Liseré de la couleur du pôle en haut de la photo, puis prestations en lignes compactes sur mobile. */
.hero_metier.hero_banniere .hero_fond::before
{
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1;
    height: 4px;
    background: var(--couleur_pole, var(--couleur_accent));
}

@media (max-width: 767px)
{
    .carte_prestation
    {
        display: grid;
        grid-template-columns: 44px minmax(0, 1fr);
        column-gap: 14px;
        padding: 18px;
    }

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

    .carte_prestation h3
    {
        margin-bottom: 4px;
        font-size: 1.2rem;
    }
}
/* HERO BANNIERE & MOBILE « APPLICATION » ============================================================= */

/* SECTIONS DIFFERENCIEES PAR METIER ================================================================== */
/* 08/11/2026 (n° 33 JaxXBot MTP) : même principe que la home (n° 27), mais la teinte suit l'activité de la page
   (marron terrassement, gris-bleu démolition, bleu bennes, vert paysagisme, vert olive entretien).
   Variables --fm_* portées par le main de chaque page (via la classe de pôle du hero) ; texte clair sur les fonds sombres. */
main:has(.hero_metier.pole_terrassement)
{
    --fm_clair: #fbf5ee;
    --fm_clair2: #f6ebdd;
    --fm_moyen: #ecd9c3;
    --fm_sombre: #6b4420;
    --fm_tres_sombre: #4e3016;
}

main:has(.hero_metier.pole_demolition)
{
    --fm_clair: #f3f5f7;
    --fm_clair2: #eaeef1;
    --fm_moyen: #d5dce2;
    --fm_sombre: #4f5d6a;
    --fm_tres_sombre: #3a4650;
}

main:has(.hero_metier.pole_bennes)
{
    --fm_clair: #f0f7fb;
    --fm_clair2: #e4f0f8;
    --fm_moyen: #cde5f2;
    --fm_sombre: #1f6590;
    --fm_tres_sombre: #174c6e;
}

main:has(.hero_metier.pole_paysagisme)
{
    --fm_clair: #f1faf4;
    --fm_clair2: #e4f4ea;
    --fm_moyen: #c4e4d1;
    --fm_sombre: #1e5a3c;
    --fm_tres_sombre: #1a4d34;
}

main:has(.hero_metier.pole_entretien)
{
    --fm_clair: #f7f9ee;
    --fm_clair2: #eef3da;
    --fm_moyen: #dde6bd;
    --fm_sombre: #56701a;
    --fm_tres_sombre: #405413;
}

:root[data-theme="dark"] main:has(.hero_metier.pole_terrassement)
{
    --fm_clair: #1a1410;
    --fm_clair2: #211a13;
    --fm_moyen: #2d2218;
    --fm_sombre: #4a3219;
    --fm_tres_sombre: #3a2713;
}

:root[data-theme="dark"] main:has(.hero_metier.pole_demolition)
{
    --fm_clair: #12171b;
    --fm_clair2: #182027;
    --fm_moyen: #222c35;
    --fm_sombre: #35434f;
    --fm_tres_sombre: #2a353f;
}

:root[data-theme="dark"] main:has(.hero_metier.pole_bennes)
{
    --fm_clair: #0e171d;
    --fm_clair2: #132430;
    --fm_moyen: #1a3446;
    --fm_sombre: #1d4c6b;
    --fm_tres_sombre: #16405a;
}

:root[data-theme="dark"] main:has(.hero_metier.pole_paysagisme)
{
    --fm_clair: #0f1a16;
    --fm_clair2: #14241c;
    --fm_moyen: #1a3327;
    --fm_sombre: #214a37;
    --fm_tres_sombre: #1b3d2d;
}

:root[data-theme="dark"] main:has(.hero_metier.pole_entretien)
{
    --fm_clair: #151a0e;
    --fm_clair2: #1c2412;
    --fm_moyen: #2a3519;
    --fm_sombre: #3f5216;
    --fm_tres_sombre: #33430f;
}

@media (prefers-color-scheme: dark)
{
    :root:not([data-theme="light"]):not([data-theme="dark"]) main:has(.hero_metier.pole_terrassement)
    {
        --fm_clair: #1a1410;
        --fm_clair2: #211a13;
        --fm_moyen: #2d2218;
        --fm_sombre: #4a3219;
        --fm_tres_sombre: #3a2713;
    }

    :root:not([data-theme="light"]):not([data-theme="dark"]) main:has(.hero_metier.pole_demolition)
    {
        --fm_clair: #12171b;
        --fm_clair2: #182027;
        --fm_moyen: #222c35;
        --fm_sombre: #35434f;
        --fm_tres_sombre: #2a353f;
    }

    :root:not([data-theme="light"]):not([data-theme="dark"]) main:has(.hero_metier.pole_bennes)
    {
        --fm_clair: #0e171d;
        --fm_clair2: #132430;
        --fm_moyen: #1a3446;
        --fm_sombre: #1d4c6b;
        --fm_tres_sombre: #16405a;
    }

    :root:not([data-theme="light"]):not([data-theme="dark"]) main:has(.hero_metier.pole_paysagisme)
    {
        --fm_clair: #0f1a16;
        --fm_clair2: #14241c;
        --fm_moyen: #1a3327;
        --fm_sombre: #214a37;
        --fm_tres_sombre: #1b3d2d;
    }

    :root:not([data-theme="light"]):not([data-theme="dark"]) main:has(.hero_metier.pole_entretien)
    {
        --fm_clair: #151a0e;
        --fm_clair2: #1c2412;
        --fm_moyen: #2a3519;
        --fm_sombre: #3f5216;
        --fm_tres_sombre: #33430f;
    }

}

main:has(.hero_metier) .section_prestations
{
    background: var(--fm_clair);
}

main:has(.hero_metier) .section_benefices
{
    background: var(--fm_sombre);
}

main:has(.hero_metier) .section_devis
{
    background: var(--fm_moyen);
}

main:has(.hero_metier) .section_faq
{
    background: var(--fm_clair2);
}

main:has(.hero_metier) .section_zone
{
    background: var(--fm_moyen);
}

main:has(.hero_metier) .section_associes
{
    background: var(--fm_clair);
}

main:has(.hero_metier) .section_bandeau_cta
{
    padding-top: var(--espace_section);
    background: var(--fm_tres_sombre);
}

main:has(.hero_metier) .section_benefices .en_tete_section h2,
main:has(.hero_metier) .section_benefices .en_tete_section h3
{
    color: #f1f7f3;
}

main:has(.hero_metier) .section_benefices .en_tete_section p,
main:has(.hero_metier) .section_benefices .en_tete_section .surtitre
{
    color: #e3ece6;
}

/* SECTIONS DIFFERENCIEES PAR METIER ================================================================== */