:root {
    /* ─── COULEURS DE BASE ───────────────────────── */
    --couleur-principale:      #f7d57f;
    --couleur-principale-dk:   #f0b319;
    --couleur-secondaire:      #262626;
    --couleur-noir:            #000000;
    --couleur-blanc:           #ffffff;

    /* ─── PALETTE GRIS ───────────────────────────── */
    --couleur-gris-lt:         #f0f0f0; 
    --couleur-gris-sl:         #f2f2f2; 
    --couleur-gris-md:         #cccccc; 
    --couleur-gris-dk:         #7c7c7c; 

    /* ─── RÔLES TYPO ─────────────────────────────── */
    --typo-titre:              var(--couleur-secondaire);
    --typo-sous-titre:         #664B00;
    --typo-corps:              var(--couleur-noir);
    --typo-gras:               var(--couleur-noir);
    --typo-legende:            var(--couleur-gris-dk);
    --typo-menu:               var(--couleur-secondaire);
    --typo-lien:               var(--couleur-secondaire);
    --typo-sur-fond-sombre:    var(--couleur-blanc);

    /* ─── POLICES ────────────────────────────────── */
    --family-titre:            "Roboto-Regular", sans-serif;
    --family-sous-titre:       "Roboto-Regular", sans-serif;
    --family-corps:            "Raleway-regular", sans-serif;

    /* ─── FORMES ───────────────────── */
    --radius-default:          8px;
    --img-ratio:               16 / 9;

    /* ─── ÉCHELLE DE TAILLES ─────────────────────── */
    --font-base:               clamp(1rem, 0.9vw, 1.5rem);
    --taille-font-xs:          calc(var(--font-base) * 0.75);
    --taille-font-sm:          calc(var(--font-base) * 0.875);
    --taille-font-base:        calc(var(--font-base) * 1);
    --taille-font-lg:          calc(var(--font-base) * 1.25);
    --taille-font-xl:          calc(var(--font-base) * 1.5);
    --taille-font-2xl:         calc(var(--font-base) * 2);
    --taille-font-3xl:         calc(var(--font-base) * 2.5);
    --taille-font-4xl:         calc(var(--font-base) * 3);

    /* ─── SURFACES & TEMPLATE ────────────────────── */
    --fond-page:               var(--couleur-blanc);
    --fond-page-alt:           var(--couleur-gris-sl);
    --fond-bandeau:            var(--couleur-secondaire);
    --fond-bouton:             var(--couleur-principale);
    --fond-bouton-hover:       var(--couleur-principale-dk);
    --couleur-puces:           var(--couleur-principale);

    /* ─── BORDURES ───────────────────────────────── */
    --border-strong:           var(--couleur-gris-dk);
    --border-subtle:           rgb(from var(--couleur-secondaire) r g b / 0.08);
    --border-accent:           rgb(from var(--couleur-principale) r g b / 0.1);
    --border-card:             1px solid var(--border-subtle);
    --border-card-hover:       var(--border-accent);

    /* ─── OVERLAYS ───────────────────────────────── */
    --overlay-faint:           rgb(0 0 0 / 0.1);
    --overlay-lt:              rgb(0 0 0 / 0.25);
    --overlay-md:              rgb(0 0 0 / 0.5);
    --overlay-dk:              rgb(0 0 0 / 0.75);
    --overlay-deep:            rgb(0 0 0 / 0.9);

    /* ─── OMBRES ─────────────────────────────────── */
    --shadow-lt:               0 1px 3px var(--overlay-faint), 0 1px 2px var(--overlay-faint);
    --shadow-md:               0 4px 6px var(--overlay-faint), 0 2px 4px var(--overlay-faint);
    --shadow-dk:               0 25px 50px var(--overlay-lt);
    --shadow-card-hover:       var(--shadow-dk);
    --shadow-popup:            0 8px 25px var(--overlay-lt);
    --shadow-modal:            0 8px 30px var(--overlay-md);

    /* ─── DÉGRADÉS & LAYOUT ──────────────────────── */
    --gradient-banniere:       linear-gradient(180deg, transparent, var(--overlay-faint));
    --image-mask:              linear-gradient(135deg, rgb(from var(--couleur-principale) r g b / 0.7) 0%, rgb(from var(--fond-bandeau) r g b / 0.7) 100%);
}

/* ===============================================
   0.2 - Reset & Base
   =============================================== */
html, body { height: 100%; }

body {
    margin: 0;
    font-family: var(--family-corps);
    font-size: var(--font-base);
    line-height: 1.4;
    color: var(--typo-corps);
}

a { 
    transition: color 0.3s ease-out;
    color: var(--typo-lien);
    text-decoration: underline;
}

:is(a:hover, a:focus) { text-decoration: none; }

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

ul { list-style: none; padding: 0; margin: 0; }

:is(ol, ul) li {
    position: relative;
    list-style-position: inside;
}

:is(ul, ol) li::marker {
    color: var(--couleur-puces);
    font-size: var(--font-base);
}

ul li::marker {
    content: "\f054\00a0"; /* Utilisation de Font Awesome pour les puces personnalisées */
    font-family: 'Font Awesome 6 Free';
    font-weight: 700;
}

:is(article, aside, footer, header, main, nav, section) { display: block; }

/* ===============================================
   0.3 - Utilitaires & Layout
   =============================================== */
.main-page { position: relative; display: flow-root; overflow: clip; }
.hide { display: none; }
[data-anim] { opacity: 0; }

.sr-only {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0,0,0,0);
    border: 0;
}

hr.trait {
    height: 1px;
    border: 0;
    background-color: var(--couleur-noir);
    opacity: 0.4;
    margin: 1rem 0;
}

/* ===============================================
   0.4 - Typographie
   =============================================== */
:is(h1, h2, h3, h4, h5, h6, .h1, .h2, .h3) {
    font-family: var(--family-titre);
    color: var(--typo-sous-titre);
    font-weight: 200;
    margin-top: 1.5rem;
    margin-bottom: 1rem;
}

:is(h1, .h1) {
    position: relative;
    margin-bottom: 2rem;
    font-size: var(--taille-font-2xl);
    font-weight: 700;
    color: var(--typo-titre);
    text-align: center;
    text-transform: uppercase;
}

:is(h1, .h1)::before,
.pied .title_footer::before {
    content: "";
    position: absolute;
    bottom: -0.5rem;
    left: 50%;
    width: 2.5rem;
    height: 0.1rem;
    background: var(--fond-bouton);
    transform: translateX(-50%);
}

:is(h2, .h2) { font-size: var(--taille-font-2xl); }

.titre-secondaire {
    position: relative;
    display: block;
    margin: 0;
    padding: 0.75rem 0 0;
    font-size: var(--taille-font-xl);
    font-weight: 200;
    line-height: 1.1;
    color: var(--typo-sous-titre);
}
:is(h3, h4, .h3) { font-size: var(--taille-font-xl); }
h5 { font-size: var(--taille-font-lg); }
h6 { font-size: var(--font-base); }

/* ===============================================
   0.5 - Boutons
   =============================================== */
.bouton,
.main-page input[type="submit"],
.main-page button[type="submit"],
.formulaire .btn-primary {
    display: inline-block;
    float: right;
    margin: 0;
    padding: 0.8rem 1.2rem;
    font-family: var(--family-titre);
    font-size: var(--font-base);
    border-radius: var(--radius-default);
    border: none;
    cursor: pointer;
    text-decoration: none;
    text-align: center;
    transition: color  0.3s cubic-bezier(0.33, 1, 0.68, 1),
                background-color 0.3s cubic-bezier(0.33, 1, 0.68, 1), 
                transform 0.2s ease, 
                box-shadow 0.3s ease;
}

.modal-body .bouton, 
.modal-body input[type="submit"], 
.modal-body button[type="submit"],
.modal-body .btn-primary {
    float: none;
}

.bouton:active { transform: scale(0.98); } /* Feedback tactile via transform */

.bouton-primary,
.main-page input[type="submit"],
.formulaire .btn-primary {
    color: var(--typo-corps);
    background: var(--fond-bouton);
}

.bouton-primary:hover {
    background: var(--fond-bouton-hover);
    box-shadow: 0 0rem 1.5rem rgb(from var(--fond-bouton) r g b / 0.4);
}

.bouton-secondary {
    color: var(--typo-lien);
    background: transparent;
    box-shadow: inset 0 0 0 1px var(--couleur-secondaire);
}

:is(.header, .banner) .bouton-secondary {
    color: var(--typo-sur-fond-sombre);
    box-shadow: inset 0 0 0 1px var(--fond-page);
}

.bouton-secondary:hover {
    color: var(--couleur-principale-dk);
    box-shadow: inset 0 0 0 1px var(--fond-bouton-hover);
}



.callTracker {
    display: grid;
    place-items: center;
}


.callTracker :is(.t_phone, .t_affiche) {
    grid-area: 1 / 1;
    transition: opacity 0.3s ease;
}

.callTracker .t_phone { opacity: 0; visibility: hidden; pointer-events: none; }
.callTracker.active .t_phone { opacity: 1; visibility: visible; pointer-events: auto; }
.callTracker.active .t_affiche { opacity: 0; visibility: hidden; pointer-events: none; }

.cta, .banner-cta {
    display: flex;
    gap: 1rem;
    margin: 1rem 0 0;
}
.cta.center {
    justify-content: center;
}

@media (max-width: 991px) {
    :is(h1, .h1) {
        font-size: var(--taille-font-xl);
        line-height: 1.2;
    }
}