/* ══════════════════════════════════════════════════════════════
   STYLES.CSS

   PARTIE 1 — PARAMÉTRAGES DE BASE
     Mécanique du thème : resets, structure, calculs, comportements.
     Ne dépend pas du projet. À ne pas modifier d'un site à l'autre.

     1.1  Variables de base
     1.2  Resets Elementor
     1.3  Structure générale
     1.4  Raccords des blocs « boxed » (border-radius)
     1.5  Header : barre de menu, logo, bannière
     1.6  Image switcher
     1.7  Module partenaires
     1.8  Grilles Elementor (responsive)
     1.9  Décorations (mécanique du masque)
     1.10 Compteurs animés
     1.11 Formulaires (messages)
     1.12 Animation au scroll
     1.13 Classes utilitaires

   PARTIE 2 — PARAMÉTRAGES PERSONNALISÉS
     Identité du projet : valeurs, couleurs, typo, alignements.
     C'est ici qu'on intervient pour adapter le thème à un site.

     2.1  Variables du projet
     2.2  Général
     2.3  Header
     2.4  Bannière
     2.5  Top banner
     2.6  Signature
     2.7  Footer
     2.8  Image switcher
     2.9  Module partenaires
     2.10 Blocs
     2.11 Formulaires
     2.12 Compteurs animés

   Convention : les sous-sections portent le même nom dans les deux
   parties (ex. « Header » en 1.5 et 2.3) pour retrouver facilement
   la mécanique et la personnalisation d'un même composant.
══════════════════════════════════════════════════════════════ */

/* ── Breakpoints reference ───────────────────────────────
   xs   480px   sm   600px   md   782px   lg    920px
   xl  1226px  xxl  1380px  max  1546px  2xl  1920px
──────────────────────────────────────────────────────── */



/* ██████████████████████████████████████████████████████████████
   PARTIE 1 — PARAMÉTRAGES DE BASE
██████████████████████████████████████████████████████████████ */


/* ─────────────────────────────────────────────────────
   1.1 Variables de base — ne jamais modifier
──────────────────────────────────────────────────────── */
:root {
    --container-padding-x:  clamp(16px, 3vw, 60px);
    --error:                #dc3232;

    /* Échelle typo : presets WP × ratio défini en 2.1 */
    --fz-xs:   calc(var(--fz-ratio, 1) * var(--wp--preset--font-size--xs));
    --fz-sm:   calc(var(--fz-ratio, 1) * var(--wp--preset--font-size--sm));
    --fz-md:   calc(var(--fz-ratio, 1) * var(--wp--preset--font-size--md));
    --fz-lg:   calc(var(--fz-ratio, 1) * var(--wp--preset--font-size--lg));
    --fz-xl:   calc(var(--fz-ratio, 1) * var(--wp--preset--font-size--xl));
    --fz-xxl:  calc(var(--fz-ratio, 1) * var(--wp--preset--font-size--xxl));

    /* Largeur fluide du logo, bornée par les valeurs de 2.1 */
    --logo-width-fluid: clamp(var(--logo-width-min), 15vw, var(--logo-width-max));
}


/* ─────────────────────────────────────────────────────
   1.2 Resets Elementor
──────────────────────────────────────────────────────── */
header#site-header.site-header {
    padding: 0;
}

body a {
    color: unset;
}

/* ⚠ Ce sélecteur ne cible rien : <body> n'est jamais descendant d'un <div>.
   Conservé à l'identique pour ne pas changer le rendu actuel. */
div:not(#elementor-editor-wrapper) body:not(.elementor-editor-active) {
    :is(button, [type="button"], [type="submit"]),
    .e-con[class*="is-style"] :is(button, [type="button"], [type="submit"]) {
        color:  inherit;
        border: 1px solid currentcolor;
    }
}


/* ─────────────────────────────────────────────────────
   1.3 Structure générale
──────────────────────────────────────────────────────── */
html, body { overflow-x: clip; }
body {
    background-color: var(--body-background);
}

main {
    margin:         0 auto;
    padding-inline: 0;

    @media (max-width: 782px) {
        padding-inline: var(--container-padding-x);
    }
}


/* ─────────────────────────────────────────────────────
   1.4 Raccords des blocs « boxed »
   Quand deux blocs boxed se touchent, on supprime l'arrondi
   sur leur bord commun.
──────────────────────────────────────────────────────── */

/* Top banner ↔ menu / bannière */
.site-topbar.is-boxed {
    border-bottom-left-radius:  0;
    border-bottom-right-radius: 0;
}

body:has(.site-topbar),
body.has-topbar {
    .bandeau.is-sticky-header.is-boxed {
        border-radius: 0;
    }

    #banner.is-boxed {
        &,
        & :is(.image-switcher, .image-switcher__item) {
            border-top-left-radius:  0;
            border-top-right-radius: 0;
        }
    }
}

.bandeau.is-sticky-header.is-boxed #barre-menu{
    padding-inline:0;
}


/* Footer ↔ signature */
body:has(.signature.is-boxed),
body.has-signature {
    .site-footer.is-boxed {
        border-bottom-left-radius:  0;
        border-bottom-right-radius: 0;
    }

    .signature.is-boxed {
        border-top-left-radius:  0;
        border-top-right-radius: 0;
    }
}


/* ─────────────────────────────────────────────────────
   Resets importants
──────────────────────────────────────────────────────── */
img:is([sizes=auto i],[sizes^="auto," i]){contain-intrinsic-size:3000px 1500px}

/* ─────────────────────────────────────────────────────
   1.5 Header : barre de menu, logo, bannière
──────────────────────────────────────────────────────── */

/* Fond dégradé (pseudo-élément) étendu sous la barre de menu.
   La couleur est définie en 2.3. */
.site-header[class*="is-style"] {
    &::before {
        --_offset: var(--header-height);
        top:    calc(-1 * var(--_offset));
        height: calc(100% + var(--_offset));

        @media (max-width: 782px) {
            --_offset: var(--header-height-xs);
        }
    }

    &.is-boxed::before {
        @media (min-width: 783px) {
            top: var(--space-md);
        }
    }
}

/* Alignement du texte dans la banner */
body header .site-banner {
    @media (min-width: 783px) {
        align-items: center;
        /*align-items:    stretch;*/
    }
}


/* Header boxed : marges intérieures alignées sur le conteneur */
body header#site-header.site-header.is-boxed {
    @media (min-width: 783px) {
        .banner-content,
        .image-switcher__nav{
            padding-inline: var(--container-padding-x);
        }
        #barre-menu {
            padding-left: 0;
            padding-right:var(--container-padding-x);
        }
    }

    @media (min-width: 920px) {
        margin-top: var(--space-md);
    }
}

/* Changer le look du menu */
#site-navigation #menu-header {
    @media (min-width: 783px) {
        min-height: var(--header-height);
    }

    li, a{
        background-color:transparent;
        @media (min-width: 783px) {
            min-height: var(--header-height);
        }
        display: flex;
        align-items: center;
    }
    li{
        a span.nav-link-text{
            border-bottom:solid 3px transparent;
        }
        &:hover{
            --b-nav-hover: var(--b-nav);

            a span.nav-link-text{
                border-bottom:solid 3px var(--wp--preset--color--brand);
            }
        }
    }
}

/* Barre de menu */
.bandeau {
    .hm-logo-wrap {
        position: relative;
    }

    #barre-menu {
        padding-right:  var(--container-padding-x);
        justify-content: space-between;
    }

    &.scrolled #barre-menu {
        @media (max-width: 919px) {
            justify-content: space-between;
        }
    }

    .menu-item-has-children .sub-menu {
        min-width: var(--nav-submenu-width);
    }
}

header #barre-menu .site-navigation-wrapper .header-elements-wrapper .header-cta {
    column-gap: calc(var(--wp--custom--block-spacing--grid-gap-column) / 3);
}

/* Boutons d'ouverture / fermeture du menu mobile */
.nav-toggle-open,
.nav-toggle-close {
    width:  var(--header-items-size);
    height: var(--header-items-size);
}

header {
    #barre-menu {
        min-height: var(--header-height);
    }

    .site-banner {
        margin-top: calc(var(--header-height) - 0px);
    }

    .btn,
    .social-link {
        min-height: var(--header-items-size);
    }

    /* ── Lien du logo ───────────────────────────────────────────────
       Le <a> englobe tout .hm-logo-wrap, dont les logos débordent (et
       sont décalés par translateY) : sa boîte ne correspond pas à la
       position réelle du logo. On désactive donc le clic sur la boîte du
       lien et on le réactive uniquement sur les logos — un clic sur le
       logo remonte au <a> parent et déclenche bien la navigation. */
    .custom-logo-link {
        display:        block;
        pointer-events: none;

        :is(.hm-logo-wrap__default, .hm-logo-wrap__scroll) :is(svg, img) {
            pointer-events: auto;
            cursor:         pointer;
        }

        /* Contour de focus clavier reporté sur le logo, pour la même raison */
        &:focus-visible {
            outline: none;

            :is(.hm-logo-wrap__default, .hm-logo-wrap__scroll) :is(svg, img) {
                outline:        2px solid currentcolor;
                outline-offset: 4px;
            }
        }
    }

    .hm-logo-wrap {
        min-height: var(--header-height);

        @media (min-width: 1226px) {
            min-width: var(--logo-width-fluid);
        }
    }

    /* ── Logo principal ─────────────────────────────────────────────
       Piloté par la LARGEUR : le conteneur fixe la largeur, le logo la
       remplit et sa hauteur découle du ratio (viewBox pour le sprite SVG,
       dimensions intrinsèques pour une image WebP/PNG). */
    .hm-logo-wrap__default {
        /*transform:   translateY(33%);*/
        width:       var(--logo-width-fluid);
        display:     block;     /* <span> : nécessaire pour que width et transform s'appliquent */
        flex-shrink: 0;         /* ne pas laisser un parent flex l'écraser */

        svg,
        img {
            display: block;     /* supprime l'espace de ligne sous le logo */
            width:   100%;
            height:  auto;
        }
    }

    /* ── Logo alternatif (scroll) ───────────────────────────────────
       Piloté par la HAUTEUR : hauteur calculée depuis les variables
       plutôt qu'un height: 100%, qui ne fonctionne que si le parent
       DIRECT a une hauteur définie (un <a> intermédiaire suffit à le
       casser → hauteur auto → logo sans taille). La largeur découle du
       ratio. */
    .hm-logo-wrap__scroll {
        --scroll-padding:     calc(var(--space-md) - var(--space-xs));
        --scroll-logo-height: calc(var(--header-height) - 2 * var(--scroll-padding));

        box-sizing:  border-box;
        height:      var(--header-height);
        padding:     var(--scroll-padding) 0;
        flex-shrink: 0;
    }

    .hm-logo--scroll,
    .hm-logo-wrap__scroll :is(svg, img) {
        display:    block;
        height:     var(--header-items-size);
        max-height: var(--scroll-logo-height);
        width:      auto;

        /* Si le conteneur est plus étroit que le logo (mobile), le logo
           rétrécit au lieu de déborder, sans se déformer : le SVG garde
           son ratio (preserveAspectRatio), l'image via object-fit. */
        max-width:  100%;
        object-fit: contain;
    }

    /* Header sticky : on évite que le logo s'écrase trop en largeur */
    .bandeau.is-sticky-header .hm-logo-wrap__scroll {
        @media (min-width: 783px) {
            min-width: calc(2 * var(--header-height));
        }
    }

    .bandeau.is-sticky-header.scrolled .hm-logo-wrap__scroll {
        @media (max-width: 782px) {
            width: fit-content;
        }
    }

    .bandeau.is-sticky-header:not(.scrolled) .hm-logo-wrap__scroll {
        @media (max-width: 782px) {
            width: calc(1.4 * var(--header-height));
        }
    }
}

/* Contenu de la bannière : positionnement */
body header .site-banner .banner-content {
    position:        absolute;
    display:         flex;
    flex-direction:  column;
    justify-content: center;
    align-items:     flex-start;

    @media (max-width: 782px) {
        width:   100%;
        padding: 0 var(--space-md) var(--space-md);
    }

    .diapo-cta-buttons {
        display:   flex;
        flex-wrap: wrap;

        .btn {
            display:         flex;
            justify-content: center;
        }
    }
}


/* ─────────────────────────────────────────────────────
   1.6 Image switcher
──────────────────────────────────────────────────────── */
.image-switcher__nav {
    position:        absolute;
    display:         flex;
    justify-content: center;
    padding-block:   1rem;
    width:           100%;
    left:            0;
    bottom:          3vh;
    z-index:         3;
}


/* ─────────────────────────────────────────────────────
   1.7 Module partenaires
   Une colonne par logo, ajustée selon le nombre (data-count).
──────────────────────────────────────────────────────── */
header.site-header {
    .hm-partenaires-list .hm-partenaires-inner {
        display:               grid;
        grid-template-columns: repeat(var(--hm-partenaires-count), minmax(0, 1fr));
        align-items:           stretch;
        overflow:              hidden; /* coupe les séparateurs qui dépassent sur les bords (cf. 2.9) */
    }

    .hm-partenaires-inner .hm-partenaire-item {
        width: auto; /* la cellule prend toute la largeur de sa colonne */
    }

    /* ── Réglages selon le nombre de logos ── */
    .hm-partenaires-list[data-count="1"] .hm-partenaires-inner {
        grid-template-columns: 1fr;
        justify-items:         center;
    }

    /* Beaucoup de logos : retour à la ligne automatique plutôt que N colonnes */
    .hm-partenaires-list:is([data-count="7"], [data-count="8"], [data-count="9"]) .hm-partenaires-inner {
        grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    }

    /* ── Responsive (après les règles par nombre, pour passer devant) ── */

    /* Petit écran intermédiaire : 2 lignes pour les nombres pairs */
    @media (min-width: 480px) and (max-width: 599px) {
        .hm-partenaires-list[data-count="4"] .hm-partenaires-inner { grid-template-columns: repeat(2, minmax(0, 1fr)); }
        .hm-partenaires-list[data-count="6"] .hm-partenaires-inner { grid-template-columns: repeat(3, minmax(0, 1fr)); }
        .hm-partenaires-list[data-count="8"] .hm-partenaires-inner { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    }

    /* Mobile : 2 colonnes, quel que soit le nombre de logos */
    @media (max-width: 479px) {
        .hm-partenaires-list[data-count] .hm-partenaires-inner {
            grid-template-columns: repeat(2, minmax(0, 1fr));
        }
    }
}

.hm-partenaires-list {
  --hm-partenaires-gap-x: 3rem;
  --hm-partenaires-gap-y: 2rem;
  --hm-partenaires-logo-h: 60px;
}


/* ─────────────────────────────────────────────────────
   1.8 Grilles Elementor (responsive)
──────────────────────────────────────────────────────── */
@media (max-width: 900px) {
    body:not(header, footer) .e-grid.e-con-boxed > .e-con-inner {
        grid-template-columns: 1fr;
    }

    .e-con-full.e-flex:has(.elementor-widget-button) {
        flex-wrap: wrap;
    }

    .e-grid:has(.elementor-widget-tm-accordion-card),
    .e-con.e-flex:has(.elementor-widget-tm-accordion-card) {
        align-items: start;
    }
}


/* ─────────────────────────────────────────────────────
   1.9 Décorations (mécanique du masque)
   Positions et offsets définis par bloc en 2.10 via
   --deco-mask-position et --deco-offset.
──────────────────────────────────────────────────────── */
.deco:not(.img-broken) {
    position: relative;
    overflow: visible;

    /* Masque de l'image */
    img {
        mask-image:     var(--img-deco), linear-gradient(black, black);
        mask-repeat:    no-repeat, repeat;
        mask-size:      var(--img-deco-width) var(--img-deco-height), cover;
        mask-position:  var(--deco-mask-position), center;
        mask-composite: exclude;
    }

    /* Élément décoratif */
    &::after {
        content:          "";
        position:         absolute;
        top:              0;
        z-index:          -1;
        background-image: var(--img-deco);
        height:           var(--img-deco-height);
        width:            var(--img-deco-width);
        fill:             var(--wp--preset--color--accent-1);
    }
}

/* Exception : image sans décoration */
.img-broken {
    &::after,
    & img::after {
        display: none;
    }
}


/* ─────────────────────────────────────────────────────
   1.10 Compteurs animés
   Nombre de colonnes défini en 2.12.
──────────────────────────────────────────────────────── */
.cpt-grid {
    --_cols: var(--cpt-cols);

    display:         flex;
    justify-content: space-between;
    flex-wrap:       wrap;
    row-gap:         var(--grid-gap-row, var(--wp--style--block-gap, 1.5rem));
    column-gap:      var(--grid-gap-column, var(--wp--style--block-gap, 1.5rem));

    @media (max-width: 1024px) { --_cols: var(--cpt-cols-tab); }
    @media (max-width: 640px)  { --_cols: var(--cpt-cols-mob); }
}

.cpt-item {
    flex:       0 0 calc((100% - (var(--_cols) - 1) * var(--cpt-gap)) / var(--_cols));
    min-width:  0;
    text-align: center;
}


/* ─────────────────────────────────────────────────────
   1.11 Formulaires (messages)
──────────────────────────────────────────────────────── */
.wpcf7-not-valid-tip {
    display:     block;
    margin-top:  var(--space-xs);
    color:       var(--error);
    font-size:   0.9em;
    font-weight: normal;
}

.wpcf7-response-output {
    &::before{
        display:none!important;
    }
    color:            var(--wp--preset--color--text) !important;
    background-color: transparent !important;
    border:           none !important;
}


/* ─────────────────────────────────────────────────────
   1.12 Animation au scroll
──────────────────────────────────────────────────────── */
.reveal-on-scroll {
    opacity:    0;
    transform:  translateY(100px);
    transition: opacity 0.6s ease-out 0.3s, transform 0.6s ease-out 0.3s;

    &.is-revealed {
        opacity:   1;
        transform: none;
    }

    @media (prefers-reduced-motion: reduce) {
        transition: none;
        opacity:    1;
        transform:  none;
    }
}


/* ─────────────────────────────────────────────────────
   1.13 Classes utilitaires
──────────────────────────────────────────────────────── */

/* .bb : bordure basse sur des accordéons sans cadre */
.elementor-widget-tm-accordion-card.bb:not(:only-child, :last-child) {
    --card-border-style: solid;
    --card-border-width: 1px;

    border-bottom: var(--card-border-width, 1px) var(--card-border-style, solid) var(--acc-border);
}



/* ██████████████████████████████████████████████████████████████
   PARTIE 2 — PARAMÉTRAGES PERSONNALISÉS
██████████████████████████████████████████████████████████████ */


/* ─────────────────────────────────────────────────────
   2.1 Variables du projet
──────────────────────────────────────────────────────── */
:root {
    /* Typographie : ratio appliqué aux presets WP (cf. 1.1) */
    --fz-ratio:                     0.9;

    /* Général */
    --body-background:              var(--wp--preset--color--white);
    --btn-picto-gap:                calc(var(--space-xs) / 2);
    --global-radius:                0px;

    /* Boutons */
    --btn-default-height:           52px;

    /* Top banner */
    --topbanner-min-height:         44px;
    --topbanner-max-height:         var(--topbanner-min-height);
    --topbanner-img-height:         20px;

    /* Sous-menu */
    --nav-submenu-width:            320px;
    --nav-pannel-bg:                var(--wp--preset--color--brand);

    /* Header : hauteur des éléments */
    --header-height:                110px;
    --header-height-xs:             49px;
    --header-items-size:            49px;

    /* Logo */
    --logo-width-min:               100px;
    --logo-width-max:               150px;
    --logo-height:                  100px;
    --logo-content:                 150px;

    /* Bannière (image switcher) */
    --banner-xs-min-height:         60vh;
    --banner-xs-max-height:         60vh;
    --banner-min-height:            80vh;
    --banner-max-height:            80vh;

    /* Footer */
    --footer-btn-min-width:         178px;
    --footer-btn-icon-size:         16px;
    --footer-logo-width:            300px;

    /* Signature */
    --eco-badge-light-background:   var(--wp--preset--color--brand);
    --eco-badge-dark-background:    var(--wp--preset--color--dark);

    /* Blocs */
    --block-min-height:             650px;
    --block-parallax-height:        500px;

    --motif: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8'%3F%3E%3Csvg xmlns='http://www.w3.org/2000/svg' version='1.1' viewBox='0 0 301.677 76.69'%3E%3C!-- Generator: Adobe Illustrator 30.8.2, SVG Export Plug-In . SVG Version: 2.1.4 Build 7) --%3E%3Cpath fill='none' stroke='%231d1d1b' stroke-miterlimit='10' stroke-width='.25px' d='M.499,23.672s1.976,26.259,11.294,27.953c9.318,1.694,9.882-12.988,15.247-12.988,6.776,0,7.906,32.188,18.635,32.188S62.616,1.649,75.04.52s11.587,47.051,17.652,50.772c6.065,3.722,7.618-15.761,11.995-15.761,3.671,0,4.659,8.753,8.612,8.753,3.106,0,4.659-17.223,10.024-17.223,6.646,0,6.065,22.023,12.847,22.023,5.224,0,4.941-22.871,9.6-22.871,4.043,0,3.953,13.271,7.482,13.271,4.518,0,3.671-21.176,8.612-21.176,5.647,0,4.316,35.294,10.306,35.294,4.094,0,7.482-16.518,11.987-16.518,6.93,0,7.354,38.823,15.966,38.823,8.047,0,12.995-48.683,16.941-63.529,2.965-11.153,9.882-15.529,13.412,1.976,3.803,18.864,8.471,61.835,20.188,61.835,11.294,0,9.459-35.294,20.894-35.294,6.635,0,10.024,10.871,17.506,4.659,6.497-5.394,12.141-21.882,12.141-21.882'/%3E%3C/svg%3E");
    --deco: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8'%3F%3E%3Csvg xmlns='http://www.w3.org/2000/svg' version='1.1' viewBox='0 0 173.987 111.021'%3E%3C!-- Generator: Adobe Illustrator 30.8.2, SVG Export Plug-In . SVG Version: 2.1.4 Build 7) --%3E%3Cpath fill='%231d1d1b' d='M52.89,33.703c-1.091,0-1.974.888-1.974,1.982v39.65c0,1.095.884,1.982,1.974,1.982s1.975-.888,1.975-1.982v-39.65c0-1.095-.884-1.982-1.975-1.982ZM62.763,3.965c-1.091,0-1.975.888-1.975,1.982v99.125c0,1.095.884,1.982,1.975,1.982s1.975-.888,1.975-1.982V5.948c0-1.095-.884-1.982-1.975-1.982ZM72.637,17.842c-1.091,0-1.975.888-1.975,1.983v71.37c0,1.095.884,1.983,1.975,1.983s1.975-.888,1.975-1.983V19.825c0-1.095-.884-1.983-1.975-1.983ZM82.51,0c-1.091,0-1.975.888-1.975,1.983v107.055c0,1.095.884,1.983,1.975,1.983s1.975-.888,1.975-1.983V1.983c0-1.095-.884-1.983-1.975-1.983ZM92.383,17.842c-1.091,0-1.974.888-1.974,1.983v71.37c0,1.095.884,1.983,1.974,1.983s1.975-.888,1.975-1.983V19.825c0-1.095-.884-1.983-1.975-1.983ZM102.257,3.965c-1.091,0-1.975.888-1.975,1.982v99.125c0,1.095.884,1.982,1.975,1.982s1.975-.888,1.975-1.982V5.948c0-1.095-.884-1.982-1.975-1.982ZM112.771,31.72c-1.091,0-1.974.888-1.974,1.983v43.615c0,1.095.884,1.983,1.974,1.983s1.975-.888,1.975-1.983v-43.615c0-1.095-.884-1.983-1.975-1.983ZM122.644,11.895c-1.09,0-1.974.888-1.974,1.983v83.265c0,1.095.884,1.983,1.974,1.983s1.975-.888,1.975-1.983V13.878c0-1.095-.884-1.983-1.975-1.983ZM132.518,19.825c-1.091,0-1.974.888-1.974,1.982v67.405c0,1.095.884,1.982,1.974,1.982s1.975-.888,1.975-1.982V21.808c0-1.095-.884-1.982-1.975-1.982ZM142.391,35.685c-1.091,0-1.975.888-1.975,1.982v35.685c0,1.095.884,1.982,1.975,1.982s1.975-.888,1.975-1.982v-35.685c0-1.095-.884-1.982-1.975-1.982ZM152.265,27.755c-1.091,0-1.974.888-1.974,1.983v51.545c0,1.095.884,1.983,1.974,1.983s1.975-.888,1.975-1.983V29.738c0-1.095-.884-1.983-1.975-1.983ZM162.138,39.65c-1.091,0-1.975.888-1.975,1.982v27.755c0,1.095.884,1.982,1.975,1.982s1.975-.888,1.975-1.982v-27.755c0-1.095-.884-1.982-1.975-1.982ZM172.012,47.58c-1.09,0-1.974.888-1.974,1.983v11.895c0,1.095.884,1.983,1.974,1.983s1.975-.888,1.975-1.983v-11.895c0-1.095-.884-1.983-1.975-1.983ZM1.975,47.58c-1.091,0-1.975.888-1.975,1.983v11.895c0,1.095.884,1.983,1.975,1.983s1.975-.888,1.975-1.983v-11.895c0-1.095-.884-1.983-1.975-1.983ZM11.848,39.65c-1.09,0-1.975.888-1.975,1.982v27.755c0,1.095.884,1.982,1.975,1.982s1.975-.888,1.975-1.982v-27.755c0-1.095-.884-1.982-1.975-1.982ZM21.721,27.755c-1.091,0-1.975.888-1.975,1.983v51.545c0,1.095.884,1.983,1.975,1.983s1.975-.888,1.975-1.983V29.738c0-1.095-.884-1.983-1.975-1.983ZM31.595,35.685c-1.091,0-1.975.888-1.975,1.982v35.685c0,1.095.884,1.982,1.975,1.982s1.975-.888,1.975-1.982v-35.685c0-1.095-.884-1.982-1.975-1.982ZM41.469,19.825c-1.091,0-1.975.888-1.975,1.982v67.405c0,1.095.884,1.982,1.975,1.982s1.975-.888,1.975-1.982V21.808c0-1.095-.884-1.982-1.975-1.982Z'/%3E%3C/svg%3E"); 
    --fiche : url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' version='1.1' viewBox='0 0 1348.642 1497.85'%3E%3Cpath d='M1259.308 1225.129s-75.112-6.615-157.018 54.386c-83.063 61.863-108.772 142.105-76.316 178.947s126.316 35.965 218.421-36.842 91.228-134.211 81.579-157.018-38.596-32.456-38.596-32.456l8.065-9.021s-8.471-3.106-18.918-4.8-13.553-1.412-13.553-1.412z' fill='none' stroke='%23000' stroke-miterlimit='10' stroke-width='3px'/%3E%3Cpath d='M1126.032 1250.514c-30.932 18.485-75.67 52.518-103.341 92.612s-28.8 66.07-28.8 85.27 9.318 43.482 29.647 54.494 50.259 16.659 91.765 11.576 103.623-33.035 149.364-74.541 73.129-78.494 81.035-124.235-17.506-77.929-57.6-83.576-91.2-3.953-162.07 38.4Z' fill='none' stroke='%23000' stroke-miterlimit='10' stroke-width='3px'/%3E%3Cpath d='M1030.973 1358.184s4.141 9.035 12.424 13.176 29.022 3.356 39.529-14.306c8.847-14.871 1.129-25.412-4.894-33.129-5.011-6.42-10.541-14.306-10.541-14.306' fill='none' stroke='%23000' stroke-miterlimit='10' stroke-width='3px'/%3E%3Cpath d='M1087.067 1346.325s20.329 29.176 27.106 39.529 27.859 22.212 44.8 8.471 7.153-31.623-2.824-45.553-50.07-72.094-50.07-72.094M1168.196 1242.608s23.718 34.635 34.259 48 28.423 16.753 42.353 6.212c12.114-9.168 11.482-27.106 2.259-39.906-9.224-12.8-21.835-29.741-21.835-29.741M1287.378 1232.147l-6.429-13.445M1003.491 1464.255l-237.176-368.47s-18.635-15.247-19.482-46.588 23.718-60.141 30.494-63.529 15.247 4.235 26.259 21.176 179.576 271.058 179.576 271.058l-5.929 8.471S805.28 1024.632 796.81 1012.774s-12.424-6.588-19.576.188-15.926 29.749-16.565 46.682c-.753 19.953 5.647 36.141 5.647 36.141' fill='none' stroke='%23000' stroke-miterlimit='10' stroke-width='3px'/%3E%3Cpath d='M747.868 1061.903s-16.941-10.918-25.6-36.894-3.012-59.482 26.353-102.023 79.435-94.87 146.823-113.317 96-10.541 112.941-4.141 35.765 21.459 47.059 38.4 279.341 394.164 279.341 394.164' fill='none' stroke='%23000' stroke-miterlimit='10' stroke-width='3px'/%3E%3Cpath d='M1075.773 1186.138s27.38-16.933 54.965-27.482c30.023-11.482 51.2-14.682 51.2-14.682s-54.588-74.165-64.376-86.588-31.247-27.482-69.647-13.553-40.659 38.776-29.365 57.6 57.223 84.706 57.223 84.706Z' fill='none' stroke='%23000' stroke-miterlimit='10' stroke-width='3px'/%3E%3Cpath d='m1171.396 1146.608-20.706-27.106s-47.812 4.894-95.247 37.271M1155.961 1109.338s-57.976 5.271-105.412 39.906M1115.867 1165.808l-23.153-29.929' fill='none' stroke='%23000' stroke-miterlimit='10' stroke-width='3px'/%3E%3Cpath d='m1037.938 1217.761-10.165 8.471s-172.8-260.329-185.788-281.788 8.723-47.546 26.541-62.682c17.506-14.871 73.223-40.847 105.6-39.529 36.151 1.471 54.212 17.506 65.506 32.188s192.564 270.494 192.564 270.494l-10.729.565s-181.742-259.928-190.305-270.494c-14.494-17.882-28.935-22.266-52.141-21.647-28.235.753-60.235 12.612-91.859 34.635-25.212 17.558-30.494 28.235-33.882 36.706s1.129 15.247 10.729 29.365 173.929 263.717 173.929 263.717Z' fill='none' stroke='%23000' stroke-miterlimit='10' stroke-width='3px'/%3E%3Cpath d='M732.997 1047.22s-18.071-6.212-35.012-41.223 1.694-86.4 44.612-141.741 115.764-90.353 170.541-98.823 94.87 2.259 116.894 26.541 19.2 42.353 19.2 42.353' fill='none' stroke='%23000' stroke-miterlimit='10' stroke-width='3px'/%3E%3Cpath d='M697.985 1005.997S569.232 753.009 560.197 736.068s-7.341-53.647 11.859-88.659 56.47-74.541 110.117-96 85.835-17.506 106.164-12.988 38.4 21.459 54.776 39.529 186.917 214.023 186.917 214.023' fill='none' stroke='%23000' stroke-miterlimit='10' stroke-width='3px'/%3E%3Cpath d='M574.315 763.174s-6.776-10.729-6.776-25.412 2.824-20.894 2.824-20.894l114.07 215.717s-9.6 18.635 2.259 50.823' fill='none' stroke='%23000' stroke-miterlimit='10' stroke-width='3px'/%3E%3Cpath d='M570.362 754.703s13.553 26.541 36.706 31.059M588.997 668.303 708.15 874.42s12.424-18.071 27.106-35.576 21.459-25.976 21.459-25.976L632.48 618.61l26.541 88.659 79.059 128.188M685.562 582.468l134.964 188.611s24.847-12.424 38.4-17.506 33.882-10.165 33.882-10.165L745.985 559.314l10.729 77.929 88.094 122.541M835.209 570.045l-33.882-10.729L958.88 741.151s26.541 1.129 42.918 18.071' fill='none' stroke='%23000' stroke-miterlimit='10' stroke-width='3px'/%3E%3Cpath d='M554.55 702.186s5.647-55.906-22.588-123.106-57.6-127.059-57.6-127.059l17.506-45.741 51.388-36.141 48 1.129s74.541 85.27 110.682 111.247 77.365 49.694 98.259 59.294' fill='none' stroke='%23000' stroke-miterlimit='10' stroke-width='3px'/%3E%3Cpath d='M491.868 406.28s60.988 104.47 74.541 133.835 15.812 50.823 9.6 74.541M543.256 370.139s82.447 101.082 97.694 120.282 37.271 29.365 63.247 33.318M479.445 436.21s-83.576-118.588-221.364-227.011S.575 51.081.575 51.081M559.633 370.704S452.339 228.398 357.469 158.375C262.598 88.352 168.857 33.01 92.057 1.387' fill='none' stroke='%23000' stroke-miterlimit='10' stroke-width='3px'/%3E%3C/svg%3E");
}


/* ─────────────────────────────────────────────────────
   2.2 Général
──────────────────────────────────────────────────────── */

/* Boutons Elementor et cartes */
.elementor-button :is(span, a, .elementor-button-text),
.card-link:is(.is-style-filled, .is-style-secondary) {
    font-weight: 800;
}

/* Boutons Elementor et cartes */
.elementor{
    :is(.elementor-button), .social-link, .btn, :is(.wpcf7-response-output), :is(.wpcf7-submit) {
        --btn-default-fz: calc(0.9 * var(--wp--preset--font-size--xs));
        font-size: var(--btn-default-fz)!important;
    }
}

/* Logo dans les conteneurs Elementor */
.e-con.e-grid > .e-con-inner:has(.logo img) {
    padding-block: 0;
}

.e-con.e-parent .logo {
    width:            var(--logo-content);
    height:           var(--logo-content);
    align-items:      center;
    align-content:    center;
    margin:           0 auto;
    background-color: var(--wp--preset--color--accent-1-light-40);

    img {
        border-radius:    0;
        background-color: transparent;
        padding:          var(--space-sm);
    }
}


/* ─────────────────────────────────────────────────────
   2.3 Header
──────────────────────────────────────────────────────── */

/* Couleur du fond (positionnement en 1.5) */
.site-header[class*="is-style"]::before {
    background: var(--wp--preset--color--white);
}

/* Ombre au scroll */
header .bandeau.is-sticky-header.scrolled {
    box-shadow: var(--btn-default-sh);
}

/* Nom du site en texte */
header .site-brand-text {
    font-family: var(--font-titles);
    font-size:   var(--wp--preset--font-size--md);
    font-weight: 600;
}

/* Pas de pictos sur les boutons du header */
.header-elements-wrapper .header-cta .btn-wrap .btn {
    &::before,
    &::after {
        display: none;
    }
}

/* Boutons d'ouverture / fermeture du menu mobile */
.nav-toggle-open{
    &,
    &:hover,
    &:focus {
        color:            var(--b-bg);
        background-color: var(--b-nav);
    }

    > svg {
        fill:   var(--b-bg);
        stroke: var(--b-bg);
    }
}

.nav-toggle-close{
    &,
    &:hover,
    &:focus {
        color:            var(--b-bg);
        background-color: var(--b-nav);
    }

    > svg {
        fill:   var(--b-text);
        stroke: var(--b-text);
    }
}

.nav-toggle-close svg line{
    --b-nav-hover: var(--wp--preset--color--white);
    stroke: var(--b-nav-hover);
}


/* ── Breakpoints reference ───────────────────────────────
   xs   480px   sm   600px   md   782px   lg    920px
   xl  1226px  xxl  1380px  max  1546px  2xl  1920px
──────────────────────────────────────────────────────── */

/* Menu */
.bandeau {
    .nav-menu,
    .menu-item > a {
        text-decoration: none;
        font-weight:     600;
        font-family:     var(--font-titles);
        font-size:       var(--fz-sm);
    
        @media (min-width: 768px){
            font-size: var(--fz-xs);
        }
        
        @media (min-width: 768px) and (max-width: 920px) {
            gap: var(--global-gap);
        }

        @media (min-width: 921px) and (max-width: 1225px){
            gap: var(--space-xs);
        }

        @media (min-width: 1226px) and (max-width: 1919px){
            gap:var(--space-md);
        }

        @media (min-width: 1920px) {
            gap:var(--space-md);
        }
    }

    #site-navigation.is-open {
        align-items: center;

        .menu-item > a {
            font-size:       var(--fz-md);
            text-align:      center;
            justify-content: center;
            font-weight: 800;
        }
    }
}

/* Pictos réseaux sociaux */
.header-social-wrap {
    flex-direction: column;

    .social-links-wrap {
        flex-direction:  row;
        justify-content: space-around;
    }
}


/* ─────────────────────────────────────────────────────
   2.4 Bannière
──────────────────────────────────────────────────────── */
header .site-banner {
    min-height: var(--banner-min-height);

    @media (min-width: 1380px) {
        min-height: calc(var(--banner-max-height) - 6vh);
    }

    @media (min-width: 1546px) {
        min-height: calc(var(--banner-max-height) * 0.75);
    }

    /* Fondu bas de l'image en parallaxe */
    &.has-parallax .image-switcher__item img {
        @media (min-width: 783px) {
            -webkit-mask-image: linear-gradient(to bottom, black 75%, transparent 90%);
                    mask-image: linear-gradient(to bottom, black 75%, transparent 90%);
        }
    }
}

body header .site-banner .banner-content {
    @media (max-width: 782px) {
        text-align: center;
    }

    h1 {
        font-family: var(--font-titles);
        font-weight: 800;
        line-height: normal;

        @media (max-width: 480px) {
            font-size:   var(--fz-lg);
        }
        @media (min-width: 481px) {
            font-size:   var(--fz-xl);
        }
        span {
            font-family: var(--font-body);
            font-size:   var(--fz-sm);
            font-weight: 800;
            line-height: 3rem;
        }
    }

    .banner-title {
        align-items: center;
        text-align:  center;
    }

    .banner-cta {
        margin-top:      var(--global-gap);
        justify-content: flex-start;

        @media (max-width: 782px) {
            justify-content: center;
        }
    }

    .banner-diapo-text {
        font-size: var(--fz-sm);
    }

    .banner-diapo-text,
    .diapo-cta-container {
        margin: 0 auto;
    }

    .diapo-cta-container {
        padding-top: var(--space-xs);
    }

    .diapo-cta-buttons {
        justify-content: center;
    }
}


/* ─────────────────────────────────────────────────────
   2.5 Top banner
──────────────────────────────────────────────────────── */
.site-topbar-inner {
    justify-content: flex-end;
    gap:             var(--space-xs);
}


/* ─────────────────────────────────────────────────────
   2.6 Signature
──────────────────────────────────────────────────────── */
.eco-badge-container-light {
    background-color: var(--body-background);
}

.eco-badge-dark {
    background-color: var(--eco-badge-dark-background);
    border:           1px solid var(--eco-badge-dark-background);
    box-shadow:       0 0 15px rgb(128 182 233 / 10%);
}


/* ─────────────────────────────────────────────────────
   2.7 Footer
   Espacements, typographie, logo, alignements.
   La structure (grille, responsive) est dans footer.scss.
   Convention : valeur desktop par défaut, surcharge en dessous de 920px.
──────────────────────────────────────────────────────── */

/* ── Espacements ────────────────────────────────────── */
.site-footer,
body footer.site-footer.is-boxed {
    padding: var(--container-padding-x);

    @media (max-width: 782px) {
        padding-top: var(--space-xl);
    }
}

footer.site-footer{
    @media (max-width: 480px) {
        padding: 0;
    }
    .footer-brand{
        padding-bottom: var(--container-padding-x);

        @media (max-width: 480px) {
            max-width:var(--content-narrow);
            margin:0 auto;
        }

    }
    .footer-cell:nth-child(1),
    .footer-cell:nth-child(2),
    .footer-cell:nth-child(3){
        padding-top: var(--container-padding-x);
        padding-bottom: var(--container-padding-x);
    }
    .footer-cell:nth-child(3){
        .footer-contact-info{
            padding-top: var(--container-padding-x);
        }
    }
}



/* ── Alignements ────────────────────────────────────── */
.site-footer :is(h3, p) {
    text-align: left;

    @media (max-width: 920px) {
        text-align: center;
    }
}

.footer-section {
    align-items: flex-start;

    @media (max-width: 920px) {
        align-items: center;
    }
}

.footer-address,
.footer-tel,
.footer-email,
.social-links-wrap {
    justify-content: flex-start;

    @media (max-width: 920px) {
        justify-content: center;
    }
}

.footer-tel .btn-wrap {
    @media (max-width: 920px) {
        text-align: center;
    }
}

.footer-signature {
    justify-content: center;
}

/* ── Typographie ────────────────────────────────────── */
.footer-title:not(.footer-cta) {
    font-size: var(--fz-md);
    font-weight: 800;
}

.footer-section.footer-cta{
    .footer-title {
        font-size: var(--fz-lg);
        font-weight: 800;
    }
}

.site-footer p,
.footer-address .adress,
.footer-tel a,
.footer-email a {
    font-size: var(--fz-xs);

    @media (max-width: 920px) {
        justify-content: center;
    }
}

/* ── Boutons ────────────────────────────────────────── */
.footer-cta .btn,
.footer-tel .btn-wrap .btn {
    min-width: var(--footer-btn-min-width);
}

.footer-cta .btn-wrap a{
    min-width:220px;
}

/* ── Logo ───────────────────────────────────────────── */
.site-footer img {
    height: auto;
    width:  var(--logo-width-fluid);

    @media (max-width: 920px) {
        margin: 0 auto;
        width:  var(--logo-width-max);
    }
}

.footer-logo {
    :is(img, svg) {
        max-width: var(--footer-logo-width);
    }

    svg {
        width:  100%;
        height: 100%;
    }
}

/* Logo texte de secours */
.site-footer .hm-logo-text {
    font-family:     var(--font-titles);
    font-size:       var(--fz-lg);
    font-weight:     600;
    justify-content: center;
}

/* ── Adresse ────────────────────────────────────────── */
.footer-address .footer-icon {
    margin-top: 6px;

    @media (max-width: 782px) {
        left: calc(-1 * var(--space-sm));
    }
}


/* ─────────────────────────────────────────────────────
   2.8 Image switcher
──────────────────────────────────────────────────────── */
.image-switcher__dots {
    gap: 1rem;
}

.image-switcher__dot {
    width:         1rem;
    height:        1rem;
    border-radius: 50%;
}


/* ─────────────────────────────────────────────────────
   2.9 Module partenaires
──────────────────────────────────────────────────────── */
header.site-header .hm-partenaires-inner .hm-partenaire-item {
    /* Séparateurs : trait à gauche + trait au-dessus de chaque logo.
       Ceux du bord gauche et de la 1re ligne sortent de la grille
       et sont coupés par l'overflow: hidden (cf. 1.7). */
    box-shadow: -1px 0 0 var(--b-border), 0 -1px 0 var(--b-border);

    @media (max-width: 479px) {
        padding: var(--space-lg);
    }

    @media (min-width: 920px) {
        padding: var(--space-sm);
    }
}

footer .hm-partenaires-inner {
    justify-content: space-around;
}


/* ─────────────────────────────────────────────────────
   2.10 Blocs
──────────────────────────────────────────────────────── */
.text-left,
.text-right {
    min-height: var(--block-min-height);
}

/* Image de fond des blocs (hors styles prédéfinis) */
.bg:not([class*="is-style"]) {
    @media (min-width: 783px) {
        &::before {
            content:             var(--background-overlay);
            background-image:    var(--block-bg);
            background-repeat:   no-repeat;
            background-position: top;
            opacity:             0.6;
        }
    }

    &.text-left::before  { background-position: 60%; }
    &.text-right::before { background-position: 40%; }
}

/* Décorations : décalage de l'élément décoratif (mécanique en 1.9) */
.deco {
    @media (max-width: 1380px) { --deco-offset: calc(-1 * var(--space-sm)); }
    @media (min-width: 1440px) { --deco-offset: calc(-1 * var(--space-lg)); }
}

/* Décorations : bloc texte à droite */
.text-right .deco {
    --deco-mask-position: 240% 160%;

    @media (min-width: 1226px) { --deco-mask-position: 180% 160%; }
    @media (min-width: 2560px) { --deco-mask-position: 120% 160%; }

    &::after {
        left:      var(--deco-offset);
        transform: rotate(-25deg);
    }
}

/* Décorations : bloc texte à gauche */
.text-left .deco {
    --deco-mask-position: -100% 220%;

    @media (min-width: 1226px) { --deco-mask-position: -120% 220%; }

    &::after {
        right:     var(--deco-offset);
        transform: rotate(-185deg);
    }
}


/* ─────────────────────────────────────────────────────
   2.11 Formulaires
──────────────────────────────────────────────────────── */
.wpcf7-form {
    margin:           var(--space-sm) auto;
    padding:          var(--space-md);
    background-color: var(--wp--preset--color--dark-light-90);
    border-radius:    var(--card-radius);
    box-shadow:       var(--card-shadow);
    font-family:      var(--font-body);
    max-width:         600px;

    label {
        display:       block;
        margin-bottom: var(--space-sm);
        font-weight:   600;
        color:         var(--wp--preset--color--text);
    }

    :is(input[type="text"], input[type="email"], input[type="tel"], select, textarea) {
        padding:          var(--space-xs) var(--space-sm);
        margin-top:       calc(var(--space-xs) / 2);
        min-height:       var(--space-md);
        font-size:        var(--fz-xs);
        border:           1px solid var(--wp--preset--color--text);
        border-radius:    var(--global-radius);
        background-color: var(--wp--preset--color--white);

        &:focus {
            border-color: var(--wp--preset--color--black);
        }
    }

    textarea {
        max-height: var(--space-xl);
    }

    input[type="submit"] {
        width:      100%;
        cursor:     pointer;
        transition: background-color 0.3s ease,
                    outline 0.2s ease,
                    box-shadow 0.2s ease;
    }
}


/* ─────────────────────────────────────────────────────
   2.12 Compteurs animés
──────────────────────────────────────────────────────── */
.cpt-grid {
    --cpt-cols:     4;
    --cpt-cols-tab: 2;
    --cpt-cols-mob: 1;
}

.cpt-value {
    font-size:            var(--fz-xxl);
    font-weight:          700;
    line-height:          1.1;
    font-variant-numeric: tabular-nums;
}

.cpt-label {
    margin-top: 0.5rem;
}

/* ██████████████████████████████████████████████████████████████
   PARTIE 3 — LANDING PAGE
██████████████████████████████████████████████████████████████ */

body.page-template-templateslanding-php{
    footer .hm-footer-stacked{
        .footer-title,
        .footer-address{
            text-align: center;
        }
    }
}

/* ██████████████████████████████████████████████████████████████
   PARTIE 4 — PERSO
██████████████████████████████████████████████████████████████ */

/* ==========================================================================
   Titres
   ========================================================================== */
h2,
h2.elementor-heading-title {
    font-size: calc(0.9 * var(--fz-lg));
}

:is(h2, h3, h4, h5, h6),
:is(h2, h3, h4, h5, h6).elementor-heading-title {
    font-weight: 900;
    line-height: 1.2;
}

/* Déco sous les titres */
.elementor-widget-heading.title h2 {
    position: relative;

    &::before {
        content: "";
        position: absolute;
        bottom: calc(-1 * var(--space-md));
        width: 44px;
        height: 30px;
        background-image: var(--deco);
        background-repeat: no-repeat;
    }
}

.elementor-element:is(.is-style-light, .is-style-dark) .elementor-widget-heading.title h2::before {
    filter: var(--filter-brand);
}

#legal h2 {
    font-size: var(--fz-md);
}


/* ==========================================================================
   Bandeau
   ========================================================================== */
.image-switcher__item {
    position: relative;
    overflow: hidden;

    &::before {
        content: "";
        position: absolute;
        inset: -25%;
        z-index: 1;
        background: var(--motif) repeat center / 2000px auto; /* ← la taille du motif */
        transform: rotate(-12deg);
        filter: brightness(100);
        opacity: .5;
        pointer-events: none;
    }
    &::after {
        content: "";
        position: absolute;
        inset: 0; /* nécessaire pour que le pseudo-élément couvre le parent */
        z-index: 1;
        background:
            linear-gradient(to bottom, transparent 75%, var(--wp--preset--color--brand));
        opacity: .5;
        pointer-events: none;
    }
}

@media (min-width: 920px) {
    body.home #banner .banner-content {
        padding-bottom: var(--space-xl);
    }
}

body.page.page-id-64 header .site-banner {
    min-height: calc(var(--banner-min-height) / 2);
}


/* ==========================================================================
   Header / logo / menu
   ========================================================================== */
@media (min-width: 783px) {
    header .menu-item > a {
        padding: 0;
    }
}

.bandeau.is-style-light:not(.scrolled) .site-logo-wrapper {

    /*
    .hm-logo-wrap {
        background-color: var(--wp--preset--color--black);
    }

    @media (min-width: 920px) {
        .hm-logo-wrap__default {
            --hm-filter-brand: invert(100%);
            filter: var(--hm-filter-brand);
        }
    }*/

    @media (max-width: 919px) {
        .hm-logo-wrap {
            width: var(--header-height);
        }
        .hm-logo-wrap__scroll {
            /* --hm-filter-dark: invert(100%);
            filter: var(--hm-filter-dark);*/

            .hm-sprite-icon {
                width: var(--header-height);
            }
        }
    }
}

body.is-recolor-global .site-header .bandeau.is-style-light .hm-logo-wrap svg.hm-logo, 
body.is-recolor-global .site-header .bandeau.is-style-light .hm-logo-wrap img[src$=".svg"], 
body.is-recolor-global .site-header .bandeau.is-style-light.scrolled .hm-logo-wrap svg.hm-logo, 
body.is-recolor-global .site-header .bandeau.is-style-light.scrolled .hm-logo-wrap img[src$=".svg"] {
    filter: var(--hm-filter-dark);
}

/* Logo inversé une fois scrollé */
header .bandeau.is-sticky-header.scrolled .hm-logo-wrap.has-scroll-logo .hm-logo-wrap__scroll,
.bandeau.is-style-dark.scrolled .site-logo-wrapper .hm-logo-wrap__default {
    --hm-filter-brand: invert(100%);
    filter: var(--hm-filter-brand);
}

header .bandeau.is-sticky-header.scrolled .hm-logo-wrap.has-scroll-logo .hm-logo-wrap__scroll .hm-sprite-icon {
    width: var(--header-height);
}

.bandeau.is-style-dark.scrolled .site-logo-wrapper {
    background-color: transparent;
}

/* Burger en dark scrollé (couvre aussi .is-boxed) */
.bandeau.is-sticky-header.scrolled.is-style-dark {
    .nav-toggle-open,
    .nav-toggle-close {
        &,
        &:hover,
        &:focus {
            color: var(--b-nav);
        }
    }

    .nav-toggle-open svg line {
        --b-nav-hover: var(--wp--preset--color--white);
        stroke: var(--b-nav-hover);
    }
}

@media (min-width: 919px) {
    .bandeau.is-sticky-header #barre-menu {
        margin: 0 auto;
        padding-left: 0;
    }

    .bandeau.is-sticky-header.is-boxed #barre-menu {
        max-width: var(--content-narrow-lg);
    }

    header #barre-menu .site-navigation-wrapper {
        --column-gap: var(--space-md);
        width: 100%;
        min-height: var(--header-height);

        #site-navigation {
            display: flex;
            justify-content: center;
        }
    }
}

@media (max-width: 781px) {
    body:not(.has-topbar) header#site-header :is(.bandeau.is-sticky-header, .bandeau.is-sticky-header.is-boxed) {
        padding-block: 0;
        min-width: 100%;

        #barre-menu {
            padding-right: var(--_padding-block);
        }
    }
}


/* ==========================================================================
   Sections
   ========================================================================== */
#prestation {
    --b-bg: var(--wp--preset--color--transparent);
    margin-top: calc(-1.5 * var(--space-xl));

    @media (min-width: 920px) {
        margin-top: calc(-1.5 * var(--space-xxl));
    }

    .e-con-inner {
        padding-bottom: 0;
    }
    .elementor-widget-container {
        width: 100%;
    }
    .tm-card-item{
        h2{
            font-size:var(--fz-md);
        }
    }
}

#ligne-prestation .e-con-inner {
    padding-block-end: calc(var(--_padding-block) / 2);
}
#ligne-prestation-2 .e-con-inner {
    padding-block-start: calc(var(--_padding-block) / 2);
}



#services{
    .tm-card-item{
        h3{
            font-size:var(--fz-sm);
        }
    }
    @media (min-width: 768px) {
        .order-1 { order: 1; }
        .order-2 { order: 2; }
        .order-3 { order: 3; }
    }
}

#formulaire {
    margin: 0 auto;
}

/* Fond du bloc */
main .is-style-light {
    background-image: var(--fiche);
    background-repeat: no-repeat;
    background-position: calc(-1 * var(--space-sm));
    background-size: 20%;

    @media (max-width: 478px) {
        background-size: 50%;
    }
}

/* Dégradés radiaux (bloc dark + footer light) */
.is-style-dark.has-radial-gradient,
.site-footer.is-style-light {
    position: relative;
    margin: 0;
    background: radial-gradient(circle at center, var(--rg-from) 0%, var(--rg-to) 100%);
    background-attachment: fixed;
}

.is-style-dark.has-radial-gradient {
    --rg-from: var(--wp--preset--color--dark-light-10);
    --rg-to: var(--wp--preset--color--black);

    &::before {
        content: "";
        position: absolute;
        inset: 0;
        background-image: var(--motif);
        background-attachment: fixed;
        background-size: cover;
    }
}

.site-footer.is-style-light {
    --rg-from: var(--wp--preset--color--white);
    --rg-to: var(--wp--preset--color--dark-light-80);
}

[class*=w-].elementor-element.elementor-widget.is-fit {
    &,
    & > * {
        height: stretch;
    }
}

.social-float {
    --padding-social-float: var(--space-lg);
}


/* ==========================================================================
   Cartes
   ========================================================================== */
body:is(.elementor-editor-active) :is(.elementor-section-wrap.ui-sortable),
body {
    .card-theme-auto.card-frame-none {
        --card-bg: transparent;
        background-color: var(--card-bg);
    }
}

.is-style-dark .tm-card-item.card-theme-dark.card-frame-framed {
    --card-border-width: 1px;
    --card-border-style: solid;
    --card-border: var(--wp--preset--color--dark-light-10);
}

.card-theme-dark  { --card-icon-filter: var(--hm-dark-svg-filter, var(--hm-filter-light)); }
.card-theme-brand { --card-icon-filter: var(--hm-brand-svg-filter, var(--hm-filter-light)); }

.is-stretch .elementor-widget-container .tm-card-item {
    width: 100%;
}

.elementor-widget-tm-flexible-card{
    &.center{
        .card-title{
            text-align: center;
        }
    }
}

.tm-card-item {
    .card-link.is-style-simple {
        --card-btn-bg: var(--card-color);
    }

    &.card-frame-none h3 {
        font-size: var(--fz-sm);
    }
}

/* Picto des boutons */
body.has-picto-global .tm-card-item .card-link:not(.is-style-simple) {
    &::before {
        --card-btn-picto-current: var(--wp--preset--color--white);
        z-index: 1;
        margin-inline: 10px;
    }

    &::after {
        content: "";
        display: block;
        position: absolute;
        left: 10px;
        z-index: 0;
        width: 30px;
        height: 30px;
        margin-right: 5px;
        border-radius: 4px;
        background-color: var(--wp--preset--color--black);
    }
}

/* Carte dark encadrée : survol */
.tm-card-item.card-theme-dark.card-frame-framed {
    transition: background-color 0.3s ease;

    &:hover {
        --card-bg: var(--wp--preset--color--brand);
    }

    .card-link:hover {
        --card-btn-bg-hover: var(--wp--preset--color--black);
        --card-btn-text-hover: var(--wp--preset--color--white);

        &::after  { background-color: var(--wp--preset--color--brand); }
        &::before { background-color: var(--wp--preset--color--black); }
    }
}

/* Ombres */
.e-con :is(.card-shadow-medium .tm-card-item.card-frame-framed, .elementor-widget-image) {
    --sh-medium: 15px 15px 50px 24px rgba(0, 0, 0, 0.15);
    box-shadow: var(--sh-medium);
}

:is(#ligne-prestation, #ligne-prestation-2) :is(.card-shadow-medium .tm-card-item.card-frame-framed, .elementor-widget-image) {
    --sh-medium: 10px 10px 20px 20px rgba(0, 0, 0, 0.15);
}


/* ==========================================================================
   Footer
   ========================================================================== */
.site-footer {
    padding-bottom: 0;
}

@media (min-width: 919px) {
    .site-footer {
        padding-inline: 0;
    }
}

.footer-layout {
    align-items: center;
}

/* Empilement sur petits écrans */
@container footer (max-width: 37.5rem) {
    .footer-layout.hm-footer-custom[data-cols="2"] {
        grid-template-columns: 1fr;
    }
}

.footer-cell {
    height: 100%;
}

.footer-section {
    --grid-gap-column: 0;
    row-gap: var(--grid-gap-column);

    &.footer-cta {
        --grid-gap-column: var(--space-xs);

        /* sur mobile, les boutons s'empilent si la place manque */
        @media (max-width: 480px) {
            grid-template-columns: 1fr;
        }
    }
}

.footer-logo {
    margin-top: calc(var(--_padding-block) * -1);
    /*background-color: var(--wp--preset--color--black);*/
}

.footer-brand .hm-logo {
    --b-svg-fill: var(--wp--preset--color--brand);
    margin: 0 auto;
}


.footer-hours .footer-title {
    text-align: center;
}

/*
.footer-hours {
    margin:0 auto;
}*/

.footer-hours-content {
    display: flex;
    flex-direction: row;
    
    gap: var(--grid-gap-column);

    @media (max-width: 767px) {
        justify-content: center;
        align-items: center;
        text-align: center;
    }

    @media (min-width: 768px) {
        justify-content: space-evenly;
    }
    
    .hm-sprite-icon {
        filter: saturate(0);
    }
}

.footer-bar {
    background-color: var(--wp--preset--color--brand);

    nav#footer-navigation a {
        --b-nav: var(--wp--preset--color--white);
        color: var(--b-nav);
    }
}

/* Corrections à faire sur hamstify */
.tm-bridge .bridge-title{
    --b-heading: var(--card-heading);
    color: var(--card-heading);
}

/* ─────────────────────────────────────────────────────────────────────
   Carte flexible — picto « Médiathèque » : agrandissement + légende au survol
   Classes posées par TM_Flexible_Card_Widget::render_picto_image() :
     .card-image.has-zoom          → lien .card-image-zoom (visionneuse Elementor)
     .card-image.has-hover-caption → .card-image-caption en filigrane
     .card-image-frame             → repère de positionnement (taille de l'image)
   ───────────────────────────────────────────────────────────────────── */

.tm-card-item .card-image .card-image-frame {
    position: relative;
    display: inline-block;   /* la légende épouse l'image, pas toute la largeur */
    max-width: 100%;
    vertical-align: top;
    border-radius: inherit;
    overflow: hidden;
    line-height: 0;          /* pas d'espace sous l'image */
    border-radius: var(--image-radius);
}
.tm-card-item .card-image .card-image-frame img {
    display: block;
    max-width: 100%;
    height: auto;
}

/* — Agrandissement au clic */
.tm-card-item .card-image .card-image-zoom {
    display: block;
    cursor: zoom-in;
    color: inherit;
}
.tm-card-item .card-image .card-image-zoom img {
    transition: transform .25s ease;
}
.tm-card-item .card-image .card-image-zoom:hover img,
.tm-card-item .card-image .card-image-zoom:focus-visible img {
    transform: scale(1.03);
}
.tm-card-item .card-image .card-image-zoom:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: -4px;
}

/* — Légende en filigrane */
.tm-card-item .card-image .card-image-caption {
    position: absolute;
    inset: auto 0 0 0;
    padding: 2.5em 1em .75em;
    background: linear-gradient(to top, rgba(0, 0, 0, .75) 0%, rgba(0, 0, 0, .45) 60%, rgba(0, 0, 0, 0) 100%);
    color: #fff;
    font-size: .875rem;
    line-height: 1.4;
    text-align: left;
    opacity: 0;
    transform: translateY(.5rem);
    transition: opacity .25s ease, transform .25s ease;
    pointer-events: none;    /* le clic passe au lien d'agrandissement */
}
.tm-card-item .card-image .card-image-frame:hover .card-image-caption,
.tm-card-item .card-image .card-image-frame:focus-within .card-image-caption {
    opacity: 1;
    transform: none;
}

/* Écrans tactiles : pas de survol → légende toujours visible. */
@media (hover: none) {
    .tm-card-item .card-image .card-image-caption {
        opacity: 1;
        transform: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .tm-card-item .card-image .card-image-caption,
    .tm-card-item .card-image .card-image-zoom img {
        transition: opacity .25s ease;
        transform: none !important;
    }
}


.hm-partenaire-logo{
    scale:1.5;
}