/**
 * ================================================================
 * FICHIER : theme.css
 * EMPLACEMENT : _theme/theme.css
 * DESCRIPTION : Charte M2B Terrassement v2 (ex-MTP, renommé le 10/11/2026, n° 197) : thème clair par défaut (vert apaisant, bleu ciel, jaune), thème sombre en option (bouton Jour / Nuit)
 * FRAMEWORK : JaxX Framework V2 (Allman, snake_case)
 * ================================================================
 * Sommaire :
 *   1. VARIABLES            6. CARTES METIERS        11. PIED DE PAGE
 *   2. BASE                 7. FAQ                   12. PAGES DE TEXTE (mentions, confidentialité)
 *   3. UTILITAIRES          8. ZONE                  13. VERRE_FUME (règle n° 24)
 *   4. BOUTONS              9. BANDEAU CTA           14. ACCESSIBILITE & RESPONSIVE
 *   5. MENU FIXE & MOBILE  10. VISUELS DE REPLI
 *   15. HERO COMMUN         16. HERO BANNIERE & MOBILE « APPLICATION » (n° 2218, version 3)
 */

/* 1. VARIABLES ===================================================== */
/* 06/11/2026 22:50 (Claude MONSTERJaxX #1, Dialogue n° 2182) : version 2, thème CLAIR par défaut (vert apaisant, bleu ciel, touche de jaune) ;
   thème sombre dans :root[data-theme="dark"] et, sans choix du visiteur (mode « auto »), selon la préférence de son appareil.
   Ancienne charte « chantier » sombre : conservée dans Site/2026 (_theme/theme.css), non modifiée. */
:root
{
    color-scheme: light;
    --couleur_fond: #f5faf6;
    --couleur_fond_alterne: #e9f4ee;
    --couleur_fond_haut: #eaf5ef;
    --couleur_fond_pied: #e3f0e8;
    --couleur_surface: #ffffff;
    --couleur_surface_haute: #f0f8f3;
    --couleur_acier: #8fb09e;
    --couleur_accent: #26794f;
    --couleur_accent_survol: #1c6341;
    --couleur_sur_accent: #ffffff;
    --couleur_lien: #1f6c8f;
    --couleur_beton: #dcebe2;
    --couleur_texte: #34463d;
    --couleur_texte_fort: #14291f;
    --couleur_texte_doux: #5d7468;
    --couleur_bordure: rgba(20, 41, 31, 0.12);
    --couleur_bordure_forte: rgba(20, 41, 31, 0.24);
    --couleur_succes: #2e8b57;
    --couleur_erreur: #c0432e;
    --couleur_info: #2f84b8;
    --couleur_ciel: #6bbbe6;
    --couleur_soleil: #f2c230;

    /* Teintes RVB pour les voiles et reflets : rgba(var(--…), alpha) */
    --accent_rgb: 38, 121, 79;
    --fond_rgb: 245, 250, 246;
    --voile_rgb: 20, 41, 31;
    --ombre_rgb: 28, 60, 44;

    /* Pôles métiers (teintes adaptées au fond clair) */
    --pole_terrassement: #a8743a;
    --pole_demolition: #6d7c8a;
    --pole_bennes: #2f84b8;
    --pole_paysagisme: #2e8b57;
    --pole_entretien: #7f9a2c;

    /* Verre fumé (règle n° 24), version « verre dépoli clair » */
    --fume_fond: rgba(255, 255, 255, 0.66);
    --fume_fond_fort: rgba(255, 255, 255, 0.86);
    --fume_fond_opaque: #ffffff;
    --fume_flou: 14px;
    --fume_saturation: 140%;
    --fume_lumiere: linear-gradient(145deg, rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0.2) 42%, rgba(255, 255, 255, 0) 70%);
    --fume_lisere: rgba(38, 121, 79, 0.18);
    --fume_ombre: 0 18px 42px -22px rgba(var(--ombre_rgb), 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.8);

    /* Typographie et gabarit */
    --police_titre: "Barlow Condensed", "Arial Narrow", Arial, sans-serif;
    --police_texte: "Inter", "Segoe UI", Roboto, Arial, sans-serif;
    /* 07/11/2026 02:10 (Claude Opus 5.5, n° 2218) : police des grands titres (h1 à h4), même famille Barlow en largeur
       « semi condensée », graisse 600 / 700 au lieu de 800 et casse normale : solide et lisible, moins brute, plus rassurante.
       --police_titre (Barlow Condensed) reste pour les étiquettes, menus, boutons et chiffres. */
    --police_titre_principal: "Barlow Semi Condensed", "Barlow Condensed", "Arial Narrow", Arial, sans-serif;
    --rayon_carte: 16px;
    --rayon_bouton: 10px;
    --hauteur_menu: 72px;
    --largeur_max: 1200px;
    --gouttiere: 24px;
    --espace_section: clamp(64px, 9vw, 112px);
    --transition_douce: 220ms cubic-bezier(0.2, 0.7, 0.2, 1);
}


/* Thème sombre : choix explicite du visiteur (bouton Jour / Nuit) */
:root[data-theme="dark"]
{
    color-scheme: dark;
    --couleur_fond: #0f1a16;
    --couleur_fond_alterne: #14221c;
    --couleur_fond_haut: #12211a;
    --couleur_fond_pied: #0b1410;
    --couleur_surface: #19281f;
    --couleur_surface_haute: #213328;
    --couleur_acier: #4d6a5b;
    --couleur_accent: #6fcf97;
    --couleur_accent_survol: #8fe0b0;
    --couleur_sur_accent: #0d1b14;
    --couleur_lien: #7cc4f0;
    --couleur_beton: #e4efe8;
    --couleur_texte: #c4d3ca;
    --couleur_texte_fort: #f1f7f3;
    --couleur_texte_doux: #93a99c;
    --couleur_bordure: rgba(228, 239, 232, 0.12);
    --couleur_bordure_forte: rgba(228, 239, 232, 0.22);
    --couleur_succes: #5fbf84;
    --couleur_erreur: #e0664f;
    --couleur_info: #4a9fcf;
    --couleur_ciel: #7cc4f0;
    --couleur_soleil: #f2c94c;
    --accent_rgb: 111, 207, 151;
    --fond_rgb: 15, 26, 22;
    --voile_rgb: 255, 255, 255;
    --ombre_rgb: 0, 0, 0;
    --pole_terrassement: #c8935a;
    --pole_demolition: #8fa0ad;
    --pole_bennes: #5aaedc;
    --pole_paysagisme: #6fcf97;
    --pole_entretien: #a9c45a;
    --fume_fond: rgba(24, 38, 30, 0.62);
    --fume_fond_fort: rgba(16, 28, 21, 0.84);
    --fume_fond_opaque: #19281f;
    --fume_lumiere: linear-gradient(145deg, rgba(255, 255, 255, 0.075) 0%, rgba(255, 255, 255, 0.015) 42%, rgba(255, 255, 255, 0) 70%);
    --fume_lisere: rgba(255, 255, 255, 0.11);
    --fume_ombre: 0 18px 42px -20px rgba(0, 0, 0, 0.7), inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

/* Mode « auto » (aucun choix enregistré) : préférence de l'appareil */
@media (prefers-color-scheme: dark)
{
    :root:not([data-theme="light"]):not([data-theme="dark"])
    {
        color-scheme: dark;
        --couleur_fond: #0f1a16;
        --couleur_fond_alterne: #14221c;
        --couleur_fond_haut: #12211a;
        --couleur_fond_pied: #0b1410;
        --couleur_surface: #19281f;
        --couleur_surface_haute: #213328;
        --couleur_acier: #4d6a5b;
        --couleur_accent: #6fcf97;
        --couleur_accent_survol: #8fe0b0;
        --couleur_sur_accent: #0d1b14;
        --couleur_lien: #7cc4f0;
        --couleur_beton: #e4efe8;
        --couleur_texte: #c4d3ca;
        --couleur_texte_fort: #f1f7f3;
        --couleur_texte_doux: #93a99c;
        --couleur_bordure: rgba(228, 239, 232, 0.12);
        --couleur_bordure_forte: rgba(228, 239, 232, 0.22);
        --couleur_succes: #5fbf84;
        --couleur_erreur: #e0664f;
        --couleur_info: #4a9fcf;
        --couleur_ciel: #7cc4f0;
        --couleur_soleil: #f2c94c;
        --accent_rgb: 111, 207, 151;
        --fond_rgb: 15, 26, 22;
        --voile_rgb: 255, 255, 255;
        --ombre_rgb: 0, 0, 0;
        --pole_terrassement: #c8935a;
        --pole_demolition: #8fa0ad;
        --pole_bennes: #5aaedc;
        --pole_paysagisme: #6fcf97;
        --pole_entretien: #a9c45a;
        --fume_fond: rgba(24, 38, 30, 0.62);
        --fume_fond_fort: rgba(16, 28, 21, 0.84);
        --fume_fond_opaque: #19281f;
        --fume_lumiere: linear-gradient(145deg, rgba(255, 255, 255, 0.075) 0%, rgba(255, 255, 255, 0.015) 42%, rgba(255, 255, 255, 0) 70%);
        --fume_lisere: rgba(255, 255, 255, 0.11);
        --fume_ombre: 0 18px 42px -20px rgba(0, 0, 0, 0.7), inset 0 1px 0 rgba(255, 255, 255, 0.06);
    }
}

/* 2. BASE ========================================================== */
*,
*::before,
*::after
{
    box-sizing: border-box;
}

html
{
    scroll-behavior: smooth;
    scroll-padding-top: calc(var(--hauteur_menu) + 16px);
    -webkit-text-size-adjust: 100%;
}

body
{
    margin: 0;
    padding-top: var(--hauteur_menu);
    background: var(--couleur_fond);
    color: var(--couleur_texte);
    font-family: var(--police_texte);
    font-size: 1rem;
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}

body.menu_mobile_bloque
{
    overflow: hidden;
}

h1,
h2,
h3,
h4
{
    margin: 0 0 0.5em;
    /* font-family: var(--police_titre); */
    /* font-weight: 700; */
    /* line-height: 1.08; */
    /* letter-spacing: 0.01em; */
    /* 07/11/2026 02:10 (n° 2218) : typographie des titres allégée (Barlow Semi Condensed 600, interligne plus aéré, lignes équilibrées) */
    font-family: var(--police_titre_principal);
    font-weight: 600;
    line-height: 1.12;
    letter-spacing: -0.005em;
    text-wrap: balance;
    color: var(--couleur_texte_fort);
}

h1
{
    /* font-size: clamp(2.4rem, 5.4vw, 4.2rem); */
    /* font-weight: 800; */
    /* text-transform: uppercase; */
    /* 07/11/2026 02:10 (n° 2218) : 700 au lieu de 800, casse normale au lieu des capitales */
    font-size: clamp(2.2rem, 4.6vw, 3.6rem);
    font-weight: 700;
    text-transform: none;
}

h2
{
    /* font-size: clamp(1.9rem, 3.6vw, 2.8rem); */
    /* text-transform: uppercase; */
    /* 07/11/2026 02:10 (n° 2218) : casse normale, taille un peu réduite (le surtitre en capitales garde le côté « chantier ») */
    font-size: clamp(1.8rem, 3.2vw, 2.55rem);
    text-transform: none;
}

h3
{
    font-size: clamp(1.3rem, 2vw, 1.55rem);
}

p
{
    margin: 0 0 1em;
}

a
{
    color: var(--couleur_lien);
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
    transition: color var(--transition_douce);
}

a:hover
{
    color: var(--couleur_accent_survol);
}

img
{
    display: block;
    max-width: 100%;
    height: auto;
}

strong
{
    color: var(--couleur_texte_fort);
}

::selection
{
    background: var(--couleur_accent);
    color: var(--couleur_sur_accent);
}

:focus-visible
{
    outline: 3px solid var(--couleur_accent);
    outline-offset: 3px;
}

.material-symbols-outlined
{
    font-size: 1.25em;
    line-height: 1;
    vertical-align: -0.2em;
    font-variation-settings: "FILL" 0, "wght" 400, "GRAD" 0, "opsz" 24;
    user-select: none;
}

.lien_evitement
{
    position: absolute;
    top: -60px;
    left: 16px;
    z-index: 2000;
    padding: 10px 16px;
    border-radius: var(--rayon_bouton);
    background: var(--couleur_accent);
    color: var(--couleur_sur_accent);
    font-weight: 700;
    text-decoration: none;
}

.lien_evitement:focus
{
    top: 12px;
}

/* 3. UTILITAIRES =================================================== */
.page_largeur_max
{
    width: 100%;
    max-width: calc(var(--largeur_max) + 2 * var(--gouttiere));
    margin: 0 auto;
    padding: 0 var(--gouttiere);
}

.section_standard
{
    padding: var(--espace_section) 0;
}

.section_alternee
{
    background: var(--couleur_fond_alterne);
}

.en_tete_section
{
    max-width: 760px;
    margin: 0 0 40px;
}

.en_tete_section.centre
{
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}

.surtitre
{
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
    font-family: var(--police_titre);
    font-size: 0.98rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--couleur_accent);
}

.chapo_section
{
    font-size: 1.1rem;
    color: var(--couleur_texte);
}

.liste_coches
{
    margin: 0;
    padding: 0;
    list-style: none;
}

.liste_coches li
{
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin: 0 0 8px;
}

.liste_coches .material-symbols-outlined
{
    flex: 0 0 auto;
    margin-top: 3px;
    color: var(--couleur_accent);
}

.lien_fleche
{
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-weight: 600;
    text-decoration: none;
}

.lien_fleche .material-symbols-outlined
{
    transition: transform var(--transition_douce);
}

.lien_fleche:hover .material-symbols-outlined
{
    transform: translateX(4px);
}

.liste_preuves
{
    display: flex;
    flex-wrap: wrap;
    gap: 10px 22px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.liste_preuves li
{
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-weight: 600;
    color: var(--couleur_texte_fort);
}

.liste_preuves .material-symbols-outlined
{
    color: var(--couleur_accent);
}

.texte_masque
{
    position: absolute !important;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

/* 4. BOUTONS ======================================================= */
.bouton
{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 46px;
    padding: 10px 20px;
    border: 2px solid transparent;
    border-radius: var(--rayon_bouton);
    font-family: var(--police_titre);
    font-size: 1.12rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    text-decoration: none;
    line-height: 1.1;
    cursor: pointer;
    transition: background var(--transition_douce), color var(--transition_douce), border-color var(--transition_douce), transform var(--transition_douce), box-shadow var(--transition_douce);
}

.bouton:hover
{
    transform: translateY(-1px);
}

.bouton_primaire
{
    background: var(--couleur_accent);
    color: var(--couleur_sur_accent);
    box-shadow: 0 10px 24px -12px rgba(var(--accent_rgb), 0.7);
}

.bouton_primaire:hover
{
    background: var(--couleur_accent_survol);
    color: var(--couleur_sur_accent);
}

.bouton_contour
{
    border-color: var(--couleur_bordure_forte);
    background: rgba(var(--voile_rgb), 0.03);
    color: var(--couleur_texte_fort);
}

.bouton_contour:hover
{
    border-color: var(--couleur_accent);
    color: var(--couleur_accent);
}

.bouton_large
{
    min-height: 54px;
    padding: 14px 26px;
    font-size: 1.22rem;
}

.bouton_petit
{
    min-height: 38px;
    padding: 6px 14px;
    font-size: 1rem;
}

.bouton .numero_telephone
{
    font-family: var(--police_texte);
    font-size: 0.9em;
    font-weight: 600;
    letter-spacing: 0;
    text-transform: none;
}

/* 5. MENU FIXE & MOBILE ============================================ */
.header_principal
{
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    height: var(--hauteur_menu);
    border-bottom: 1px solid transparent;
    transition: background var(--transition_douce), border-color var(--transition_douce), box-shadow var(--transition_douce);
}

.header_principal.defile
{
    border-bottom-color: var(--fume_lisere);
    box-shadow: 0 12px 30px -18px rgba(var(--ombre_rgb), 0.8);
}

.header_conteneur
{
    display: flex;
    align-items: center;
    gap: 24px;
    height: 100%;
    max-width: calc(var(--largeur_max) + 2 * var(--gouttiere));
    margin: 0 auto;
    padding: 0 var(--gouttiere);
}

.logo_lien
{
    display: inline-flex;
    flex: 0 0 auto;
    color: var(--couleur_texte_fort);
}

.logo_svg
{
    display: block;
    width: auto;
    height: 46px;
}

.navigation_principale
{
    display: flex;
    align-items: center;
    gap: 4px;
    margin-left: auto;
}

.lien_nav
{
    position: relative;
    padding: 8px 12px;
    font-family: var(--police_titre);
    font-size: 1.12rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    text-decoration: none;
    color: var(--couleur_texte_fort);
}

.lien_nav::after
{
    content: "";
    position: absolute;
    left: 12px;
    right: 12px;
    bottom: 2px;
    height: 2px;
    border-radius: 2px;
    background: var(--couleur_accent);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform var(--transition_douce);
}

.lien_nav:hover,
.lien_nav.lien_actif
{
    color: var(--couleur_accent);
}

.lien_nav:hover::after,
.lien_nav.lien_actif::after
{
    transform: scaleX(1);
}

.actions_header
{
    display: flex;
    align-items: center;
    gap: 10px;
}

.bouton_appel_header .numero_telephone
{
    display: none;
}

.bouton_burger_menu
{
    display: none;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 46px;
    height: 46px;
    padding: 0 11px;
    border: 1px solid var(--couleur_bordure_forte);
    border-radius: var(--rayon_bouton);
    background: rgba(var(--voile_rgb), 0.04);
    cursor: pointer;
}

.ligne_burger
{
    display: block;
    height: 2px;
    border-radius: 2px;
    background: var(--couleur_texte_fort);
}

.fond_sombre_menu_mobile
{
    position: fixed;
    inset: 0;
    z-index: 1090;
    background: rgba(var(--ombre_rgb), 0.55);
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--transition_douce), visibility var(--transition_douce);
}

.fond_sombre_menu_mobile.visible
{
    opacity: 1;
    visibility: visible;
}

.tiroir_menu_mobile
{
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 1100;
    display: flex;
    flex-direction: column;
    gap: 20px;
    width: min(380px, 88vw);
    padding: 18px 20px 28px;
    border-radius: var(--rayon_carte) 0 0 var(--rayon_carte);
    overflow-y: auto;
    transform: translateX(105%);
    visibility: hidden;
    transition: transform 320ms cubic-bezier(0.2, 0.7, 0.2, 1), visibility 320ms;
}

.tiroir_menu_mobile.ouvert
{
    transform: translateX(0);
    visibility: visible;
}

.en_tete_tiroir_mobile
{
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: var(--couleur_texte_fort);
}

.logo_lien_mobile
{
    color: var(--couleur_texte_fort);
}

.logo_svg_tiroir
{
    height: 40px;
}

.bouton_fermer_menu_mobile
{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border: 1px solid var(--couleur_bordure_forte);
    border-radius: var(--rayon_bouton);
    background: transparent;
    color: var(--couleur_texte_fort);
    cursor: pointer;
}

.liste_liens_mobile
{
    margin: 0;
    padding: 0;
    list-style: none;
}

.lien_nav_mobile
{
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 6px;
    border-bottom: 1px solid var(--couleur_bordure);
    font-family: var(--police_titre);
    font-size: 1.3rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    text-decoration: none;
    color: var(--couleur_texte_fort);
}

.lien_nav_mobile .material-symbols-outlined:first-child
{
    color: var(--couleur_accent);
}

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

.lien_nav_mobile.lien_actif
{
    color: var(--couleur_accent);
}

.actions_tiroir_mobile
{
    display: grid;
    gap: 10px;
}

.liste_preuves_tiroir
{
    flex-direction: column;
    gap: 10px;
    font-size: 0.95rem;
}

.barre_action_mobile
{
    display: none;
}

/* 6. CARTES METIERS ================================================ */
.grille_metiers
{
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 24px;
}

.carte_metier
{
    position: relative;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border-radius: var(--rayon_carte);
    transition: transform var(--transition_douce), border-color var(--transition_douce);
}

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

.carte_metier::before
{
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 2;
    height: 4px;
    background: var(--couleur_pole, var(--couleur_accent));
}

.visuel_carte_metier
{
    display: block;
    aspect-ratio: 16 / 10;
    overflow: hidden;
}

.visuel_carte_metier .visuel_image,
.visuel_carte_metier .visuel_repli
{
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 600ms cubic-bezier(0.2, 0.7, 0.2, 1);
}

.carte_metier:hover .visuel_image
{
    transform: scale(1.04);
}

.corps_carte_metier
{
    position: relative;
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    padding: 30px 24px 24px;
}

.pastille_pole
{
    position: absolute;
    top: -26px;
    left: 24px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    border: 3px solid var(--couleur_fond);
    border-radius: 14px;
    background: var(--couleur_pole, var(--couleur_accent));
    color: var(--couleur_sur_accent);
    font-size: 1.3rem;
}

.titre_carte_metier
{
    margin-top: 6px;
}

.titre_carte_metier a
{
    color: var(--couleur_texte_fort);
    text-decoration: none;
}

.titre_carte_metier a:hover
{
    color: var(--couleur_accent);
}

.corps_carte_metier .liste_coches
{
    margin-bottom: 18px;
    font-size: 0.95rem;
}

.corps_carte_metier .liste_coches .material-symbols-outlined
{
    color: var(--couleur_pole, var(--couleur_accent));
}

.actions_carte_metier
{
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: auto;
    padding-top: 16px;
    border-top: 1px solid var(--couleur_bordure);
}

.pole_terrassement
{
    --couleur_pole: var(--pole_terrassement);
}

.pole_demolition
{
    --couleur_pole: var(--pole_demolition);
}

.pole_bennes
{
    --couleur_pole: var(--pole_bennes);
}

.pole_paysagisme
{
    --couleur_pole: var(--pole_paysagisme);
}

.pole_entretien
{
    --couleur_pole: var(--pole_entretien);
}

/* 7. FAQ =========================================================== */
.section_faq
{
    padding: var(--espace_section) 0;
}

.liste_faq
{
    display: grid;
    gap: 12px;
    max-width: 920px;
}

.item_faq
{
    border-radius: 14px;
}

.item_faq summary
{
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 18px 22px;
    font-weight: 600;
    color: var(--couleur_texte_fort);
    cursor: pointer;
    list-style: none;
}

.item_faq summary::-webkit-details-marker
{
    display: none;
}

.item_faq summary:hover .question_faq
{
    color: var(--couleur_accent);
}

.chevron_faq
{
    flex: 0 0 auto;
    color: var(--couleur_accent);
    transition: transform var(--transition_douce);
}

.item_faq[open] .chevron_faq
{
    transform: rotate(180deg);
}

.reponse_faq
{
    padding: 0 22px 18px;
}

.reponse_faq p
{
    margin: 0;
}

/* 8. ZONE ========================================================== */
.section_zone
{
    padding: var(--espace_section) 0;
    background: var(--couleur_fond_alterne);
}

.grille_zone
{
    display: grid;
    gap: 40px;
}

.grille_zone.avec_carte
{
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
    align-items: center;
}

.liste_communes
{
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0 0 24px;
    padding: 0;
    list-style: none;
}

.liste_communes li
{
    padding: 6px 12px;
    border: 1px solid var(--couleur_bordure);
    border-radius: 999px;
    background: rgba(var(--voile_rgb), 0.03);
    font-size: 0.92rem;
    color: var(--couleur_texte_fort);
}

.liste_communes .commune_plus
{
    border-style: dashed;
    color: var(--couleur_texte_doux);
}

.carte_horaires
{
    display: inline-flex;
    align-items: center;
    gap: 14px;
    padding: 16px 20px;
    border-radius: 14px;
}

.carte_horaires > .material-symbols-outlined
{
    font-size: 1.8rem;
    color: var(--couleur_accent);
}

.carte_horaires strong,
.carte_horaires span
{
    display: block;
}

.cadre_carte_zone
{
    padding: 10px;
    border-radius: var(--rayon_carte);
}

.carte_zone_intervention
{
    width: 100%;
    aspect-ratio: 4 / 3;
    border-radius: 12px;
    background: radial-gradient(circle at 50% 50%, rgba(var(--accent_rgb), 0.18) 0 28%, transparent 29%), repeating-linear-gradient(0deg, rgba(var(--voile_rgb), 0.04) 0 1px, transparent 1px 32px), repeating-linear-gradient(90deg, rgba(var(--voile_rgb), 0.04) 0 1px, transparent 1px 32px), var(--couleur_surface);
    overflow: hidden;
}

/* .carte_zone_intervention .leaflet-tile-pane
{
    filter: grayscale(1) invert(1) brightness(0.82) contrast(0.92) hue-rotate(180deg);
} */

/* 06/11/2026 22:55 (n° 2198, cartes OpenStreetMap) : tuiles en couleurs naturelles en thème clair ;
   le filtre « carte de nuit » (héritage de la version 1, sombre) n'est appliqué qu'en thème sombre */
:root[data-theme="dark"] .carte_zone_intervention .leaflet-tile-pane
{
    filter: grayscale(1) invert(1) brightness(0.82) contrast(0.92) hue-rotate(180deg);
}

@media (prefers-color-scheme: dark)
{
    :root:not([data-theme="light"]):not([data-theme="dark"]) .carte_zone_intervention .leaflet-tile-pane
    {
        filter: grayscale(1) invert(1) brightness(0.82) contrast(0.92) hue-rotate(180deg);
    }
}

/* .carte_zone_intervention .leaflet-control-attribution */
/* 06/11/2026 23:02 (n° 2198, mention OpenStreetMap illisible en sombre) : la règle de Leaflet
   « .leaflet-container .leaflet-control-attribution » (même spécificité, chargée après) imposait son fond blanc ;
   texte clair du thème sombre sur fond blanc = mention © OpenStreetMap invisible (obligatoire, licence ODbL) */
.carte_zone_intervention.leaflet-container .leaflet-control-attribution
{
    background: rgba(var(--fond_rgb), 0.75);
    color: var(--couleur_texte_doux);
}

/* .carte_zone_intervention .leaflet-control-attribution a */
.carte_zone_intervention.leaflet-container .leaflet-control-attribution a
{
    color: var(--couleur_texte);
}

.legende_carte
{
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 10px 4px 2px;
    font-size: 0.9rem;
    color: var(--couleur_texte_doux);
}

.legende_carte .material-symbols-outlined
{
    color: var(--couleur_accent);
}

/* 9. BANDEAU CTA =================================================== */
.section_bandeau_cta
{
    padding: 0 0 var(--espace_section);
}

.bandeau_cta
{
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    padding: clamp(28px, 4vw, 48px);
    border-radius: var(--rayon_carte);
    background-image: var(--fume_lumiere), radial-gradient(120% 140% at 100% 0%, rgba(var(--accent_rgb), 0.18), transparent 55%);
}

.texte_bandeau_cta h2
{
    margin-bottom: 8px;
}

.texte_bandeau_cta p
{
    margin: 0;
    font-size: 1.08rem;
}

.actions_bandeau_cta
{
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

/* 10. VISUELS DE REPLI ============================================= */
/* Affichés tant que l'illustration n'existe pas dans _theme/images/ */
.visuel_repli
{
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    min-height: 180px;
    overflow: hidden;
    background: radial-gradient(120% 90% at 20% 10%, color-mix(in srgb, var(--couleur_pole, var(--couleur_accent)) 32%, transparent), transparent 60%), linear-gradient(160deg, var(--couleur_surface_haute), var(--couleur_fond));
}

.visuel_repli_strates
{
    position: absolute;
    inset: auto 0 0 0;
    width: 100%;
    height: 62%;
}

.visuel_repli_strates .strate_1
{
    fill: color-mix(in srgb, var(--couleur_pole, var(--couleur_accent)) 30%, var(--couleur_surface));
}

.visuel_repli_strates .strate_2
{
    fill: color-mix(in srgb, var(--couleur_pole, var(--couleur_accent)) 18%, var(--couleur_fond_alterne));
}

.visuel_repli_strates .strate_3
{
    fill: var(--couleur_fond);
    opacity: 0.85;
}

.visuel_repli_icone
{
    position: relative;
    z-index: 1;
    font-size: clamp(3rem, 7vw, 4.6rem);
    color: var(--couleur_pole, var(--couleur_accent));
    opacity: 0.9;
}

@supports not (background: color-mix(in srgb, red 50%, blue))
{
    .visuel_repli
    {
        background: linear-gradient(160deg, var(--couleur_surface_haute), var(--couleur_fond));
    }

    .visuel_repli_strates .strate_1
    {
        fill: var(--couleur_acier);
    }

    .visuel_repli_strates .strate_2
    {
        fill: var(--couleur_surface);
    }
}

/* 11. PIED DE PAGE ================================================= */
.pied_de_page
{
    padding: 64px 0 28px;
    border-top: 1px solid var(--couleur_bordure);
    background: var(--couleur_fond_pied);
    font-size: 0.95rem;
}

.grille_pied_de_page
{
    display: grid;
    grid-template-columns: 1.4fr 1fr 1fr 1.2fr;
    gap: 36px;
}

.logo_lien_pied
{
    display: inline-flex;
    margin-bottom: 14px;
    color: var(--couleur_texte_fort);
}

.logo_svg_pied
{
    height: 44px;
}

.titre_colonne_pied
{
    margin-bottom: 14px;
    font-size: 1.15rem;
    letter-spacing: 0.1em;
    color: var(--couleur_accent);
}

.liste_pied
{
    margin: 0;
    padding: 0;
    list-style: none;
}

.liste_pied li
{
    margin: 0 0 8px;
}

.liste_pied a
{
    color: var(--couleur_texte);
    text-decoration: none;
}

.liste_pied a:hover
{
    color: var(--couleur_accent);
}

.liste_pied_contact li
{
    display: flex;
    align-items: flex-start;
    gap: 10px;
}

.liste_pied_contact .material-symbols-outlined
{
    margin-top: 3px;
    color: var(--couleur_accent);
}

.bas_pied_de_page
{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 8px 24px;
    margin-top: 44px;
    padding-top: 22px;
    border-top: 1px solid var(--couleur_bordure);
    font-size: 0.85rem;
    color: var(--couleur_texte_doux);
}

.bas_pied_de_page p
{
    margin: 0;
}

.bas_pied_de_page a
{
    color: var(--couleur_texte);
}

/* 12. PAGES DE TEXTE (MENTIONS, CONFIDENTIALITE, 404) ============== */
.page_texte
{
    padding: 56px 0 var(--espace_section);
}

.page_texte .fil_ariane
{
    margin-bottom: 18px;
}

.carte_texte
{
    max-width: 880px;
    padding: clamp(24px, 4vw, 48px);
    border-radius: var(--rayon_carte);
}

.carte_texte h1
{
    font-size: clamp(2rem, 4.4vw, 3rem);
}

.carte_texte h2
{
    margin-top: 1.6em;
    font-size: clamp(1.35rem, 2.4vw, 1.7rem);
}

.carte_texte dl
{
    display: grid;
    grid-template-columns: minmax(150px, 220px) 1fr;
    gap: 8px 20px;
    margin: 0 0 1em;
}

.carte_texte dt
{
    font-weight: 600;
    color: var(--couleur_texte_fort);
}

.carte_texte dd
{
    margin: 0;
}

.mention_a_confirmer
{
    display: inline-block;
    padding: 1px 8px;
    border: 1px dashed var(--couleur_accent);
    border-radius: 6px;
    font-size: 0.85em;
    color: var(--couleur_accent);
}

.fil_ariane ol
{
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 8px;
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: 0.9rem;
    color: var(--couleur_texte_doux);
}

.fil_ariane li + li::before
{
    content: "/";
    margin-right: 8px;
    color: var(--couleur_acier);
}

.fil_ariane a
{
    color: var(--couleur_texte);
    text-decoration: none;
}

.fil_ariane a:hover
{
    color: var(--couleur_accent);
}

/* 13. VERRE_FUME (DIRECTIVE N° 24) ================================= */
/* Liste des encadrés : cartes métiers, FAQ, horaires, carte de zone, bandeau CTA, tiroir mobile,
   bandeau cookies, cartes de texte, formulaire de devis, carte du hero, étapes, atouts, prestations, bénéfices. */
.verre_fume,
.verre_fume_barre.defile
{
    border: 1px solid var(--fume_lisere);
    background-color: var(--fume_fond);
    background-image: var(--fume_lumiere);
    -webkit-backdrop-filter: blur(var(--fume_flou)) saturate(var(--fume_saturation));
    backdrop-filter: blur(var(--fume_flou)) saturate(var(--fume_saturation));
    box-shadow: var(--fume_ombre);
}

.verre_fume_barre
{
    background-color: rgba(var(--fond_rgb), 0.55);
    -webkit-backdrop-filter: blur(10px) saturate(130%);
    backdrop-filter: blur(10px) saturate(130%);
}

.verre_fume_barre.defile
{
    border-width: 0 0 1px;
    border-radius: 0;
    background-color: var(--fume_fond_fort);
}

.tiroir_menu_mobile.verre_fume
{
    background-color: var(--fume_fond_fort);
}

/* Repli opaque : navigateur sans backdrop-filter */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)))
{
    .verre_fume,
    .verre_fume_barre,
    .verre_fume_barre.defile,
    .tiroir_menu_mobile.verre_fume
    {
        background-color: var(--fume_fond_opaque);
    }
}

/* Repli opaque : le visiteur demande moins de transparence */
@media (prefers-reduced-transparency: reduce)
{
    .verre_fume,
    .verre_fume_barre,
    .verre_fume_barre.defile,
    .tiroir_menu_mobile.verre_fume
    {
        background-color: var(--fume_fond_opaque);
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
    }
}

/* 14. ACCESSIBILITE & RESPONSIVE =================================== */
@media (prefers-reduced-motion: reduce)
{
    html
    {
        scroll-behavior: auto;
    }

    *,
    *::before,
    *::after
    {
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
    }
}

@media (max-width: 1140px)
{
    .navigation_principale
    {
        display: none;
    }

    .actions_header
    {
        margin-left: auto;
    }

    .bouton_burger_menu
    {
        display: inline-flex;
    }
}

@media (max-width: 960px)
{
    .grille_zone.avec_carte
    {
        grid-template-columns: 1fr;
    }

    .grille_pied_de_page
    {
        grid-template-columns: 1fr 1fr;
    }

    .colonne_marque
    {
        grid-column: 1 / -1;
    }
}

@media (max-width: 767px)
{
    :root
    {
        --hauteur_menu: 64px;
        --gouttiere: 16px;
    }

    body
    {
        padding-bottom: 76px;
    }

    .logo_svg
    {
        height: 38px;
    }

    .header_conteneur
    {
        gap: 10px;
    }

    .bouton_appel_header
    {
        display: none;
    }

    .bouton_devis_header
    {
        min-height: 42px;
        padding: 8px 12px;
        font-size: 1rem;
    }

    .barre_action_mobile
    {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 950;
        display: flex;
        gap: 10px;
        padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
        border-top: 1px solid var(--fume_lisere);
        background: var(--fume_fond_fort);
        -webkit-backdrop-filter: blur(12px);
        backdrop-filter: blur(12px);
    }

    .bouton_barre_mobile
    {
        flex: 1 1 0;
        min-height: 50px;
    }

    .bouton_barre_mobile .numero_telephone
    {
        display: none;
    }

    .grille_metiers
    {
        grid-template-columns: 1fr;
    }

    .carte_texte dl
    {
        grid-template-columns: 1fr;
        gap: 2px;
    }

    .carte_texte dd
    {
        margin-bottom: 10px;
    }
}

@media (max-width: 520px)
{
    .bouton_devis_header .material-symbols-outlined
    {
        display: none;
    }

    .grille_pied_de_page
    {
        grid-template-columns: 1fr;
    }

    .bouton_large
    {
        width: 100%;
    }

    .actions_bandeau_cta
    {
        width: 100%;
    }
}

@media (max-width: 380px)
{
    .logo_svg
    {
        height: 34px;
    }
}

/* 15. HERO COMMUN (ACCUEIL ET PAGES METIERS) ======================= */
.hero
{
    position: relative;
    overflow: hidden;
    isolation: isolate;
    padding: clamp(28px, 5vw, 72px) 0 clamp(64px, 8vw, 112px);
    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%);
}

/* Ruban de chantier en bas du hero */
.hero::after
{
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1;
    height: 6px;
    background: repeating-linear-gradient(135deg, var(--couleur_soleil) 0 14px, var(--couleur_ciel) 14px 28px);
    opacity: 0.85;
}

.hero_motif
{
    position: absolute;
    inset: 0;
    z-index: -1;
    background-image: repeating-linear-gradient(135deg, rgba(var(--voile_rgb), 0.022) 0 2px, rgba(255, 255, 255, 0) 2px 26px);
    -webkit-mask-image: linear-gradient(180deg, #000 0%, rgba(0, 0, 0, 0) 85%);
    mask-image: linear-gradient(180deg, #000 0%, rgba(0, 0, 0, 0) 85%);
    pointer-events: none;
}

.hero_grille
{
    display: grid;
    grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr);
    gap: clamp(32px, 5vw, 64px);
    align-items: center;
}

.hero_texte .fil_ariane
{
    margin-bottom: 18px;
}

.badge_hero
{
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 18px;
    padding: 6px 14px;
    border: 1px solid rgba(var(--accent_rgb), 0.4);
    border-radius: 999px;
    background: rgba(var(--accent_rgb), 0.08);
    font-family: var(--police_titre);
    font-size: 0.95rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--couleur_accent);
}

.hero h1
{
    margin-bottom: 18px;
}

.hero h1 .ville_h1,
.hero h1 .accent_h1
{
    color: var(--couleur_accent);
}

/* Nom de commune jamais coupé au trait d'union (« Grigny-sur- / Rhône ») : classe posée par classe_insecable() */
.mot_insecable
{
    white-space: nowrap;
}

.accroche_hero
{
    max-width: 620px;
    margin-bottom: 26px;
    font-size: clamp(1.05rem, 1.6vw, 1.22rem);
    color: var(--couleur_texte);
}

.actions_hero
{
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 26px;
}

.preuves_hero
{
    padding-top: 22px;
    border-top: 1px solid var(--couleur_bordure);
}

.hero_visuel
{
    position: relative;
}

.cadre_visuel_hero
{
    position: relative;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    border: 1px solid var(--fume_lisere);
    border-radius: 20px;
    box-shadow: 0 30px 60px -30px rgba(var(--ombre_rgb), 0.85);
}

.cadre_visuel_hero::before
{
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 2;
    height: 4px;
    background: var(--couleur_pole, var(--couleur_accent));
}

.cadre_visuel_hero .visuel_image,
.cadre_visuel_hero .visuel_repli
{
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.carte_flottante_hero
{
    position: absolute;
    left: -24px;
    bottom: -24px;
    z-index: 3;
    display: flex;
    align-items: center;
    gap: 12px;
    max-width: 300px;
    padding: 14px 18px;
    border-radius: 14px;
}

.carte_flottante_hero > .material-symbols-outlined
{
    font-size: 30px;
    color: var(--couleur_accent);
}

.carte_flottante_hero strong
{
    display: block;
    font-family: var(--police_titre);
    font-size: 1.15rem;
    letter-spacing: 0.03em;
    text-transform: uppercase;
}

.carte_flottante_hero div span
{
    display: block;
    font-size: 0.88rem;
    color: var(--couleur_texte_doux);
}

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

    .hero_visuel
    {
        max-width: 640px;
    }

    .carte_flottante_hero
    {
        left: 12px;
        bottom: -18px;
    }
}

@media (max-width: 520px)
{
    .actions_hero .bouton
    {
        width: 100%;
    }

    .preuves_hero
    {
        flex-direction: column;
        gap: 8px;
    }
}

/* Très petits écrans (320 px) : H1 du hero un peu réduit pour qu'une commune insécable tienne sur une ligne */
@media (max-width: 359px)
{
    .hero h1
    {
        font-size: 2.05rem;
    }
}

/* BOUTON_THEME (Dialogue n° 2182) : Jour / Nuit / Auto ======================= */
.bouton_theme
{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 1px solid var(--couleur_bordure_forte);
    border-radius: 50%;
    background: var(--fume_fond);
    color: var(--couleur_texte_fort);
    cursor: pointer;
    transition: background 0.2s ease, border-color 0.2s ease;
}

.bouton_theme:hover,
.bouton_theme:focus-visible
{
    border-color: var(--couleur_accent);
    background: var(--fume_fond_fort);
}

/* 16. HERO BANNIERE & MOBILE « APPLICATION » (DIALOGUE N° 2218) ================================== */
/* 07/11/2026 02:10 (Claude Opus 5.5, sous-agent JAXXMEDIACENTER #1, Dialogue anunaqi n° 2218) :
   - ordinateur et tablette : grande photo de fond sur toute la largeur du héros, texte sur la moitié gauche,
     fondu (voile dégradé aux couleurs du thème) entre le texte et la photo, qui reste nette sur la moitié droite ;
   - mobile (767 px et moins) : photo portrait en haut d'écran, puis une « feuille » aux coins arrondis qui remonte
     sur la photo (présentation d'application), barre d'action flottante en verre fumé, listes défilantes au doigt.
   Les règles des sections 14 et 15 restent en place : celles-ci les complètent (spécificité .hero.hero_banniere). */
.hero.hero_banniere
{
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: clamp(540px, calc(100vh - var(--hauteur_menu)), 820px);
    min-height: clamp(540px, calc(100svh - var(--hauteur_menu)), 820px);
    padding: clamp(40px, 6vw, 88px) 0 clamp(48px, 6vw, 84px);
    background: var(--couleur_fond);
}

.hero_banniere .hero_motif
{
    display: none;
}

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

.banniere_hero
{
    display: block;
    width: 100%;
    height: 100%;
}

.hero_banniere .hero_fond .visuel_image,
.hero_banniere .hero_fond .visuel_repli
{
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 70% center;
    animation: entree_banniere_hero 1400ms cubic-bezier(0.2, 0.7, 0.2, 1) both;
}

@keyframes entree_banniere_hero
{
    from
    {
        transform: scale(1.06);
    }

    to
    {
        transform: scale(1);
    }
}

/* Fondu texte / photo : voile aux couleurs du thème (clair ou sombre), plein sous le texte, transparent sur la photo */
.hero_banniere .hero_fond::after
{
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(90deg, rgba(var(--fond_rgb), 0.95) 0%, rgba(var(--fond_rgb), 0.9) 40%, rgba(var(--fond_rgb), 0.55) 52%, rgba(var(--fond_rgb), 0.1) 68%, rgba(var(--fond_rgb), 0) 100%),
        linear-gradient(180deg, rgba(var(--fond_rgb), 0) 70%, rgba(var(--fond_rgb), 0.7) 100%);
    pointer-events: none;
}

.hero_banniere .hero_grille
{
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: center;
}

.hero_banniere .hero_texte
{
    max-width: 600px;
}

.hero.hero_banniere h1
{
    font-size: clamp(2.15rem, 4.1vw, 3.45rem);
}

.hero_banniere .hero_visuel
{
    display: flex;
    align-self: end;
    justify-content: flex-end;
}

.hero_banniere .carte_flottante_hero
{
    position: relative;
    left: auto;
    bottom: auto;
}

/* Tablette (768 à 960 px) : une seule colonne, voile plus couvrant pour garder le texte lisible */
@media (max-width: 960px)
{
    .hero_banniere .hero_fond::after
    {
        background:
            linear-gradient(90deg, rgba(var(--fond_rgb), 0.95) 0%, rgba(var(--fond_rgb), 0.86) 55%, rgba(var(--fond_rgb), 0.45) 100%),
            linear-gradient(180deg, rgba(var(--fond_rgb), 0) 65%, rgba(var(--fond_rgb), 0.8) 100%);
    }

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

    .hero_banniere .hero_visuel
    {
        justify-content: flex-start;
        max-width: none;
    }
}

/* Mobile : présentation d'application */
@media (max-width: 767px)
{
    :root
    {
        --espace_section: clamp(48px, 13vw, 64px);
        --rayon_carte: 20px;
    }

    html
    {
        -webkit-tap-highlight-color: transparent;
    }

    body
    {
        padding-bottom: calc(92px + env(safe-area-inset-bottom));
    }

    .hero.hero_banniere
    {
        display: block;
        min-height: 0;
        padding: 0 0 36px;
        background: var(--couleur_fond);
    }

    /* Photo portrait en haut d'écran */
    .hero_banniere .hero_fond
    {
        position: relative;
        inset: auto;
        z-index: 0;
        height: clamp(280px, 56vh, 520px);
        height: clamp(280px, 56svh, 520px);
    }

    .hero_banniere .hero_fond .visuel_image,
    .hero_banniere .hero_fond .visuel_repli
    {
        object-position: center 45%;
    }

    .hero_banniere .hero_fond::after
    {
        background:
            linear-gradient(180deg, rgba(0, 0, 0, 0.16) 0%, rgba(0, 0, 0, 0) 24%),
            linear-gradient(180deg, rgba(var(--fond_rgb), 0) 64%, rgba(var(--fond_rgb), 0.5) 100%);
    }

    /* Feuille de texte qui remonte sur la photo */
    .hero_banniere .hero_grille
    {
        position: relative;
        z-index: 1;
        gap: 22px;
        margin-top: -34px;
        padding-top: 30px;
        border-radius: 28px 28px 0 0;
        background: var(--couleur_fond);
        box-shadow: 0 -16px 32px -20px rgba(var(--ombre_rgb), 0.5);
    }

    /* Poignée décorative de la feuille */
    .hero_banniere .hero_grille::before
    {
        content: "";
        position: absolute;
        top: 10px;
        left: 50%;
        width: 42px;
        height: 5px;
        border-radius: 999px;
        background: var(--couleur_bordure_forte);
        transform: translateX(-50%);
    }

    .hero_banniere .hero_texte
    {
        max-width: none;
    }

    .hero.hero_banniere h1
    {
        margin-bottom: 14px;
        font-size: clamp(1.9rem, 7.4vw, 2.45rem);
        line-height: 1.1;
    }

    .hero_banniere .badge_hero
    {
        margin-bottom: 14px;
        font-size: 0.86rem;
    }

    .hero_banniere .accroche_hero
    {
        margin-bottom: 20px;
        font-size: 1.02rem;
    }

    .hero_banniere .actions_hero
    {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
        gap: 10px;
        margin-bottom: 20px;
    }

    .hero_banniere .actions_hero .bouton
    {
        width: 100%;
    }

    .hero_banniere .preuves_hero
    {
        padding-top: 16px;
    }

    .hero_banniere .carte_flottante_hero
    {
        width: 100%;
        max-width: none;
    }

    /* Retour tactile façon application */
    .bouton:active,
    .pastille_metier:active,
    .carte_metier:active,
    .lien_nav_mobile:active
    {
        transform: scale(0.97);
    }

    /* Barre d'action flottante en verre fumé (règle n° 24) */
    .barre_action_mobile
    {
        left: 12px;
        right: 12px;
        bottom: calc(10px + env(safe-area-inset-bottom));
        padding: 8px;
        border: 1px solid var(--fume_lisere);
        border-radius: 20px;
        background-color: var(--fume_fond_fort);
        background-image: var(--fume_lumiere);
        -webkit-backdrop-filter: blur(16px) saturate(140%);
        backdrop-filter: blur(16px) saturate(140%);
        box-shadow: var(--fume_ombre), 0 14px 34px -14px rgba(var(--ombre_rgb), 0.55);
    }

    .bouton_barre_mobile
    {
        min-height: 48px;
        border-radius: 14px;
    }

    /* Listes de cartes défilantes au doigt (métiers, bénéfices) : la carte suivante dépasse pour inviter au geste */
    main .section_standard .grille_metiers,
    main .section_standard .grille_benefices
    {
        display: flex;
        gap: 14px;
        margin: 0 calc(-1 * var(--gouttiere));
        padding: 4px var(--gouttiere) 20px;
        overflow-x: auto;
        overscroll-behavior-x: contain;
        scroll-snap-type: x mandatory;
        scroll-padding: 0 var(--gouttiere);
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }

    main .section_standard .grille_metiers::-webkit-scrollbar,
    main .section_standard .grille_benefices::-webkit-scrollbar
    {
        display: none;
    }

    main .section_standard .grille_metiers > *,
    main .section_standard .grille_benefices > *
    {
        flex: 0 0 84%;
        scroll-snap-align: start;
    }

    .en_tete_section
    {
        margin-bottom: 26px;
    }
}

/* Repli opaque de la barre flottante (règle n° 24) */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)))
{
    .barre_action_mobile
    {
        background-color: var(--fume_fond_opaque);
    }
}

@media (prefers-reduced-transparency: reduce)
{
    .barre_action_mobile
    {
        background-color: var(--fume_fond_opaque);
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
    }
}
/* 16. HERO BANNIERE & MOBILE « APPLICATION » ===================================================== */


/* 17. WHATSAPP & LOGO CLIENT (07/11/2026, n° 2227) ================================================ */
/* Vert WhatsApp discret : un seul jeton, adapté au thème sombre ; le reste reprend les variables du thème */
:root
{
    --couleur_whatsapp: #1c8c4a;
    --couleur_whatsapp_fond: rgba(28, 140, 74, 0.1);
}

:root[data-theme="dark"]
{
    --couleur_whatsapp: #4fd98a;
    --couleur_whatsapp_fond: rgba(79, 217, 138, 0.12);
}

@media (prefers-color-scheme: dark)
{
    :root:not([data-theme="light"]):not([data-theme="dark"])
    {
        --couleur_whatsapp: #4fd98a;
        --couleur_whatsapp_fond: rgba(79, 217, 138, 0.12);
    }
}

.bouton_whatsapp
{
    border-color: var(--couleur_whatsapp);
    background: var(--couleur_whatsapp_fond);
    color: var(--couleur_texte_fort);
}

.bouton_whatsapp:hover,
.bouton_whatsapp:focus-visible
{
    border-color: var(--couleur_whatsapp);
    background: var(--couleur_whatsapp);
    color: #ffffff;
}

.bouton_whatsapp .icone_svg_whatsapp
{
    flex: 0 0 auto;
}

.liste_pied_contact .icone_svg_whatsapp
{
    flex: 0 0 auto;
    margin-top: 1px;
}

/* Logo fourni par le client : JPEG sur fond noir, sans transparence, donc présenté dans un cadre arrondi */
.logo_client_lien_pied
{
    display: inline-block;
    margin-bottom: 14px;
}

.logo_client_image
{
    display: block;
    width: 100%;
    height: auto;
    border: 1px solid var(--couleur_bordure_forte);
    border-radius: 14px;
    background: #000000;
    box-shadow: 0 14px 30px -18px rgba(var(--ombre_rgb), 0.6);
}

.logo_client_pied
{
    width: 190px;
    max-width: 100%;
}

.bloc_logo_client
{
    margin: 0 0 18px;
}

.logo_client_mentions
{
    width: 240px;
    max-width: 100%;
}


/* 18. LOGO DU CLIENT, PALETTE DU LOGO & MOBILE IMPECCABLE (07/11/2026, n° 1 JaxXBot MTP) ========== */
/* 07/11/2026 14:10 (Claude Opus 5.5, demande n° 1 du JaxXBot MTP) :
   - palette tirée du logo du client : orange #F5A515 (actions principales, texte sombre), vert #6FAC26 (accents secondaires,
     foncé en #3D7A13 sur fond clair pour rester lisible), noir #050403 (bandeau du menu), argent #EAE9EA, terre #634124 ;
     les anciennes valeurs (vert menthe / forêt / or) restent plus haut dans la section 1, simplement redéfinies ici ;
   - 14 h 25, consigne n° 6 de JaxX : le menu du haut SUIT le thème (plus de bandeau noir forcé) ; logo clair / sombre selon le thème,
     logo sombre dans un cadre noir arrondi en thème clair tant que la version claire (logo_mtp_menu_clair_v1.jpg) n'existe pas ;
     --couleur_bandeau_menu (noir du logo) ne sert plus qu'à ce cadre ;
   - mobile : numéro masqué visuellement dans les boutons « Appeler » (toujours lu par les lecteurs d'écran, toujours dans le lien tel:),
     boutons sur une seule ligne, grille d'actions du héros équilibrée, barre du bas à trois actions, réserve sous la barre,
     cibles tactiles de 44 px, mots longs qui ne débordent plus. */

/* 18.1 Palette : thème clair (par défaut) */
:root
{
    --couleur_fond: #f7f6f3;
    --couleur_fond_alterne: #efede7;
    --couleur_fond_haut: #f3f1ec;
    --couleur_fond_pied: #ebe8e1;
    --couleur_surface: #ffffff;
    --couleur_surface_haute: #f5f3ee;
    --couleur_acier: #a39a8d;
    --couleur_accent: #3d7a13;
    --couleur_accent_survol: #2f6310;
    --couleur_sur_accent: #ffffff;
    --couleur_lien: #3d7a13;
    --couleur_beton: #e7e3da;
    --couleur_texte: #3a3631;
    --couleur_texte_fort: #17140f;
    --couleur_texte_doux: #675f55;
    --couleur_bordure: rgba(23, 20, 15, 0.12);
    --couleur_bordure_forte: rgba(23, 20, 15, 0.24);
    --couleur_succes: #3d7a13;
    --couleur_erreur: #c0432e;
    --couleur_info: #2f84b8;
    --couleur_ciel: #6fac26;
    --couleur_soleil: #f5a515;
    --accent_rgb: 61, 122, 19;
    --fond_rgb: 247, 246, 243;
    --voile_rgb: 23, 20, 15;
    --ombre_rgb: 40, 30, 18;
    --pole_terrassement: #8a5a2b;
    --pole_demolition: #6d7c8a;
    --pole_bennes: #b9770c;
    --pole_paysagisme: #3d7a13;
    --pole_entretien: #5e7f1e;
    --fume_lisere: rgba(99, 65, 36, 0.16);

    /* Nouvelles couleurs de la marque (logo du client) */
    --couleur_action: #f5a515;
    --couleur_action_survol: #e69a0c;
    --couleur_sur_action: #17140f;
    --action_rgb: 245, 165, 21;
    --couleur_bandeau_menu: #050403;
    --couleur_argent: #eae9ea;
    --couleur_terre: #634124;
    --couleur_vert_logo: #6fac26;
    --hauteur_barre_mobile: 0px;
}

/* 18.2 Palette : thème sombre, choix explicite du visiteur */
:root[data-theme="dark"]
{
    --couleur_fond: #0d0c0b;
    --couleur_fond_alterne: #151311;
    --couleur_fond_haut: #12100e;
    --couleur_fond_pied: #080706;
    --couleur_surface: #1a1815;
    --couleur_surface_haute: #23201c;
    --couleur_acier: #4d463d;
    --couleur_accent: #6fac26;
    --couleur_accent_survol: #86c43a;
    --couleur_sur_accent: #0d0c0b;
    --couleur_lien: #8cc63f;
    --couleur_beton: #e7e3da;
    --couleur_texte: #d6d2cc;
    --couleur_texte_fort: #f4f2ee;
    --couleur_texte_doux: #a39c92;
    --couleur_bordure: rgba(234, 233, 234, 0.12);
    --couleur_bordure_forte: rgba(234, 233, 234, 0.22);
    --couleur_succes: #7fbf3a;
    --couleur_erreur: #e0664f;
    --couleur_info: #4a9fcf;
    --couleur_ciel: #6fac26;
    --couleur_soleil: #f5a515;
    --accent_rgb: 111, 172, 38;
    --fond_rgb: 13, 12, 11;
    --voile_rgb: 255, 255, 255;
    --ombre_rgb: 0, 0, 0;
    --pole_terrassement: #c8935a;
    --pole_demolition: #8fa0ad;
    --pole_bennes: #f5a515;
    --pole_paysagisme: #6fac26;
    --pole_entretien: #a9c45a;
    --fume_fond: rgba(30, 27, 23, 0.62);
    --fume_fond_fort: rgba(18, 16, 14, 0.86);
    --fume_fond_opaque: #1a1815;
    --fume_lisere: rgba(255, 255, 255, 0.1);
    --couleur_action_survol: #ffb732;
    --couleur_terre: #a8774a;
}

/* 18.3 Palette : mode « auto », préférence sombre de l'appareil (mêmes valeurs que 18.2) */
@media (prefers-color-scheme: dark)
{
    :root:not([data-theme="light"]):not([data-theme="dark"])
    {
        --couleur_fond: #0d0c0b;
        --couleur_fond_alterne: #151311;
        --couleur_fond_haut: #12100e;
        --couleur_fond_pied: #080706;
        --couleur_surface: #1a1815;
        --couleur_surface_haute: #23201c;
        --couleur_acier: #4d463d;
        --couleur_accent: #6fac26;
        --couleur_accent_survol: #86c43a;
        --couleur_sur_accent: #0d0c0b;
        --couleur_lien: #8cc63f;
        --couleur_beton: #e7e3da;
        --couleur_texte: #d6d2cc;
        --couleur_texte_fort: #f4f2ee;
        --couleur_texte_doux: #a39c92;
        --couleur_bordure: rgba(234, 233, 234, 0.12);
        --couleur_bordure_forte: rgba(234, 233, 234, 0.22);
        --couleur_succes: #7fbf3a;
        --couleur_erreur: #e0664f;
        --couleur_info: #4a9fcf;
        --couleur_ciel: #6fac26;
        --couleur_soleil: #f5a515;
        --accent_rgb: 111, 172, 38;
        --fond_rgb: 13, 12, 11;
        --voile_rgb: 255, 255, 255;
        --ombre_rgb: 0, 0, 0;
        --pole_terrassement: #c8935a;
        --pole_demolition: #8fa0ad;
        --pole_bennes: #f5a515;
        --pole_paysagisme: #6fac26;
        --pole_entretien: #a9c45a;
        --fume_fond: rgba(30, 27, 23, 0.62);
        --fume_fond_fort: rgba(18, 16, 14, 0.86);
        --fume_fond_opaque: #1a1815;
        --fume_lisere: rgba(255, 255, 255, 0.1);
        --couleur_action_survol: #ffb732;
        --couleur_terre: #a8774a;
    }
}

/* 18.4 Actions principales en orange (texte sombre, contraste d'environ 9:1) */
.bouton_primaire
{
    background: var(--couleur_action);
    color: var(--couleur_sur_action);
    box-shadow: 0 10px 24px -12px rgba(var(--action_rgb), 0.75);
}

.bouton_primaire:hover,
.bouton_primaire:focus-visible
{
    background: var(--couleur_action_survol);
    color: var(--couleur_sur_action);
}

/* Ruban « chantier » du bas du héros : orange et vert du logo (consigne n° 6 : jaune orangé et vert) */
.hero::after
{
    background: repeating-linear-gradient(135deg, var(--couleur_action) 0 14px, var(--couleur_vert_logo) 14px 28px);
}

/* Libellés long / court d'un même bouton (le court s'affiche sur petit écran ; l'autre, en display none, sort de l'arbre d'accessibilité) */
.libelle_court
{
    display: none;
}

/* Le numéro de téléphone d'un bouton ne se coupe jamais */
.bouton .numero_telephone
{
    white-space: nowrap;
}

/* 18.5 Menu du haut : il suit le thème (verre fumé clair ou sombre, section 13). Consigne n° 6 de JaxX (14 h 15) :
   plus de bandeau noir forcé. Règle abandonnée, conservée en commentaire :
.header_principal.bandeau_menu_logo,
.header_principal.bandeau_menu_logo.verre_fume_barre,
.header_principal.bandeau_menu_logo.verre_fume_barre.defile
{
    --couleur_texte_fort: #eae9ea;
    --couleur_texte: #d6d2cc;
    --couleur_texte_doux: #a39c92;
    --couleur_accent: #8cc63f;
    --couleur_accent_survol: #a3d65c;
    --couleur_bordure: rgba(234, 233, 234, 0.14);
    --couleur_bordure_forte: rgba(234, 233, 234, 0.26);
    --voile_rgb: 255, 255, 255;
    --fume_fond: rgba(255, 255, 255, 0.06);
    --fume_fond_fort: rgba(255, 255, 255, 0.12);
    background-color: var(--couleur_bandeau_menu);
    background-image: none;
    border-bottom: 1px solid rgba(var(--action_rgb), 0.28);
    color: var(--couleur_texte_fort);
}
*/

/* Liseré orange discret sous le menu une fois la page défilée */
.header_principal.bandeau_menu_logo.defile
{
    border-bottom-color: rgba(var(--action_rgb), 0.35);
}

.header_principal.bandeau_menu_logo .logo_lien
{
    flex: 0 1 auto;
    align-items: center;
    min-width: 0;
}

.header_principal.bandeau_menu_logo .actions_header
{
    flex: 0 0 auto;
}

/* Logo du client (generer_logo_menu, fonctions_site.php) :
   - .logo_menu_double : version claire ET version sombre rendues, une seule visible selon le thème ;
   - .logo_menu_encadre : version claire absente, le logo sombre (fond noir) est présenté dans un cadre noir arrondi en thème clair,
     et sans cadre en thème sombre (fusion « screen » : le noir de l'image laisse voir le fond sombre du menu). */
.logo_menu_image
{
    display: block;
    width: auto;
    height: 52px;
    max-width: 100%;
    object-fit: contain;
}

.logo_menu_double
{
    display: block;
    min-width: 0;
}

/* Thème clair (par défaut) */
.logo_menu_double .logo_menu_sombre
{
    display: none;
}

.logo_menu_encadre
{
    padding: 4px 10px;
    border-radius: 10px;
    background: var(--couleur_bandeau_menu);
    box-shadow: 0 6px 16px -10px rgba(var(--ombre_rgb), 0.6);
}

/* Thème sombre : choix explicite */
:root[data-theme="dark"] .logo_menu_double .logo_menu_clair
{
    display: none;
}

:root[data-theme="dark"] .logo_menu_double .logo_menu_sombre
{
    display: block;
}

:root[data-theme="dark"] .logo_menu_encadre
{
    padding: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    mix-blend-mode: screen;
}

/* Thème sombre : mode « auto » selon l'appareil */
@media (prefers-color-scheme: dark)
{
    :root:not([data-theme="light"]):not([data-theme="dark"]) .logo_menu_double .logo_menu_clair
    {
        display: none;
    }

    :root:not([data-theme="light"]):not([data-theme="dark"]) .logo_menu_double .logo_menu_sombre
    {
        display: block;
    }

    :root:not([data-theme="light"]):not([data-theme="dark"]) .logo_menu_encadre
    {
        padding: 0;
        border-radius: 0;
        background: transparent;
        box-shadow: none;
        mix-blend-mode: screen;
    }
}

.logo_menu_tiroir
{
    height: 40px;
}

/* Charte (design_system) : logo présenté sur le noir du bandeau */
.cadre_logo_design_system
{
    display: inline-flex;
    padding: 16px 20px;
    border-radius: 14px;
    background: var(--couleur_bandeau_menu);
}

.logo_menu_design_system
{
    height: 64px;
}

/* 18.6 Mots longs (e-mail, identifiants) : jamais de débordement horizontal */
.carte_texte,
.liste_pied_contact a,
.recapitulatif_devis dd
{
    overflow-wrap: break-word;
}

/* 18.7 Mobile (767 px et moins) */
@media (max-width: 767px)
{
    :root
    {
        --hauteur_barre_mobile: 70px;
    }

    /* Réserve sous la barre flottante du bas : sa hauteur, son décalage et la zone de sécurité de l'appareil */
    body
    {
        padding-bottom: calc(var(--hauteur_barre_mobile) + 22px + env(safe-area-inset-bottom));
    }

    .logo_menu_image
    {
        height: 40px;
    }

    .logo_menu_tiroir
    {
        height: 38px;
    }

    .logo_menu_encadre
    {
        padding: 3px 8px;
        border-radius: 8px;
    }

    .header_conteneur
    {
        gap: 8px;
    }

    .header_principal.bandeau_menu_logo .actions_header
    {
        gap: 8px;
    }

    .bouton_devis_header
    {
        white-space: nowrap;
    }

    .bouton_burger_menu
    {
        width: 44px;
        height: 44px;
        padding: 0 10px;
    }

    /* Numéro masqué visuellement dans TOUS les boutons (libellé « Appeler » seul) ; il reste lu par les lecteurs d'écran */
    .bouton .numero_telephone
    {
        position: absolute !important;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0 0 0 0);
        clip-path: inset(50%);
        white-space: nowrap;
    }

    /* Héros (accueil et métiers) : « Devis gratuit » pleine largeur, puis Appeler et WhatsApp côte à côte, même hauteur */
    .hero .hero_texte .actions_hero
    {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
    }

    .hero .hero_texte .actions_hero .bouton
    {
        width: 100%;
        min-width: 0;
        min-height: 54px;
        padding: 12px 10px;
        font-size: 1.08rem;
        white-space: nowrap;
    }

    .hero .hero_texte .actions_hero .bouton_primaire
    {
        grid-column: 1 / -1;
        font-size: 1.2rem;
    }

    /* Seulement deux boutons (pas de WhatsApp) : le second prend aussi toute la largeur */
    .hero .hero_texte .actions_hero .bouton:last-child:nth-child(2)
    {
        grid-column: 1 / -1;
    }

    /* Barre du bas : trois actions courtes (icône au-dessus du libellé), une seule ligne */
    .barre_action_mobile
    {
        gap: 6px;
        padding: 7px;
    }

    .barre_action_trois .bouton_barre_mobile
    {
        flex: 1 1 0;
        flex-direction: column;
        gap: 2px;
        min-width: 0;
        min-height: 54px;
        padding: 6px 4px;
        border-radius: 14px;
        font-size: 0.92rem;
        letter-spacing: 0.04em;
        white-space: nowrap;
    }

    .barre_action_trois .bouton_devis_mobile
    {
        flex-grow: 1.3;
    }

    .barre_action_trois .bouton_barre_mobile .material-symbols-outlined
    {
        font-size: 1.4rem;
    }

    .barre_action_trois .bouton_barre_mobile .icone_svg_whatsapp
    {
        width: 22px;
        height: 22px;
    }

    /* Bandeau d'appel de fin de page : libellés sur une ligne */
    .actions_bandeau_cta .bouton
    {
        white-space: nowrap;
    }

    /* Cibles tactiles d'au moins 44 px */
    .bouton_petit
    {
        min-height: 44px;
    }

    .liste_pied li
    {
        margin: 0 0 2px;
    }

    .liste_pied a,
    .bas_pied_de_page a,
    .fil_ariane a
    {
        display: inline-block;
        padding: 10px 0;
    }

    /* Icône centrée sur sa ligne (lignes avec ou sans lien de 44 px) */
    .liste_pied_contact li
    {
        align-items: center;
        min-height: 44px;
    }

    .liste_pied_contact .material-symbols-outlined,
    .liste_pied_contact .icone_svg_whatsapp
    {
        margin-top: 0;
    }

    /* Tiroir : zone de sécurité en bas, boutons sans débordement */
    .tiroir_menu_mobile
    {
        padding-bottom: calc(28px + env(safe-area-inset-bottom));
    }

    .actions_tiroir_mobile .bouton
    {
        text-align: center;
        text-wrap: balance;
    }

    /* Formulaire de devis : boutons d'appel et WhatsApp pleine largeur */
    .intro_devis .bouton_appel_devis
    {
        align-self: stretch;
        text-align: center;
        text-wrap: balance;
    }
}

/* Libellé court « Devis » dans le menu du haut sous 480 px */
@media (max-width: 480px)
{
    .bouton_devis_header .libelle_complet
    {
        display: none;
    }

    .bouton_devis_header .libelle_court
    {
        display: inline;
    }

    .bouton_devis_header
    {
        padding: 8px 12px;
    }
}

/* Libellé court « Devis » dans la barre du bas sous 400 px, en-tête et tiroir resserrés */
@media (max-width: 400px)
{
    .bouton_barre_mobile .libelle_complet
    {
        display: none;
    }

    .bouton_barre_mobile .libelle_court
    {
        display: inline;
    }

    .logo_menu_image
    {
        height: 36px;
    }

    .bouton_theme
    {
        width: 42px;
        height: 42px;
    }

    .tiroir_menu_mobile
    {
        padding-left: 16px;
        padding-right: 16px;
    }

    .actions_tiroir_mobile .bouton_large
    {
        padding: 12px 10px;
        font-size: 1rem;
        letter-spacing: 0.03em;
    }

    .intro_devis .bouton_appel_devis
    {
        font-size: 0.98rem;
        letter-spacing: 0.02em;
    }
}

/* Très petits écrans (moins de 360 px) : le bouton Devis du menu cède sa place (la barre du bas garde « Devis ») */
@media (max-width: 359px)
{
    .bouton_devis_header
    {
        display: none;
    }

    .hero .hero_texte .actions_hero .bouton
    {
        padding: 12px 8px;
        font-size: 1rem;
    }

    .barre_action_trois .bouton_barre_mobile
    {
        font-size: 0.86rem;
        letter-spacing: 0.02em;
    }
}
/* 18. LOGO DU CLIENT, PALETTE DU LOGO & MOBILE IMPECCABLE ========================================= */

/* 19. LOGO CLAIR RECADRÉ : MÊME PRÉSENCE QUE LE LOGO SOMBRE (07/11/2026, contrôle visuel du n° 1 JaxXBot MTP) ==========
   Le PNG clair recadré (logo_mtp_menu_clair_v2.png, 518 x 201, ratio 2,58) est plus haut que le logo sombre (ratio 3,43) : à hauteur égale il
   serait plus étroit. On lui donne donc une hauteur d'environ 1,2 fois celle du logo sombre (52 px, 40 px sous 768 px, 36 px sous 401 px). */
.logo_menu_double .logo_menu_clair
{
    width: auto;
    height: 62px;
}

.logo_menu_double .logo_menu_clair.logo_menu_tiroir
{
    height: 46px;
}

@media (max-width: 767px)
{
    .logo_menu_double .logo_menu_clair
    {
        height: 48px;
    }

    .logo_menu_double .logo_menu_clair.logo_menu_tiroir
    {
        height: 46px;
    }
}

@media (max-width: 400px)
{
    .logo_menu_double .logo_menu_clair
    {
        height: 43px;
    }
}

/* ORPHELINS ======================================================================================
   08/11/2026 (n° 92 JaxXBot MTP, consigne de JaxX) : jamais un mot seul en dernière ligne.
   Les navigateurs qui connaissent « pretty » rééquilibrent la fin des paragraphes ; site.js lie en plus
   les deux derniers mots par une espace insécable (repli pour les autres navigateurs). */
p,
li,
dd,
figcaption,
blockquote
{
    text-wrap: pretty;
}
/* ORPHELINS ====================================================================================== */

/* LOGO DU PIED DE PAGE SELON LE THÈME (08/11/2026, n° 96 JaxXBot MTP) : même logo que le menu (clair / sombre transparent), sans cadre noir */
.logo_client_lien_pied .logo_menu_pied
{
    height: 64px;
    width: auto;
    max-width: 100%;
}

.logo_client_lien_pied .logo_menu_double
{
    display: block;
}

/* n° 125 : logo à l'excavatrice (3:2) dans le pied de page, plus haut que l'ancien logo de menu (64 px) */
.logo_client_lien_pied .logo_menu_pied
{
    height: 130px;
}

/* LOGO M2B DANS LES MENTIONS LÉGALES (10/11/2026, n° 199 JaxXBot MTP : « utiliser le bon logo aussi de partout ») ===========
   generer_logo_menu() remplace l'ancien JPEG MTP sur fond noir (.logo_client_image, conservé) : versions claire / sombre selon le thème,
   sans cadre noir, même taille que le logo du pied de page. */
.bloc_logo_client .logo_menu_double .logo_menu_mentions
{
    width: auto;
    height: 130px;
    max-width: 100%;
}