/*
 ██████   █████  ███████ ███████
 ██   ██ ██   ██ ██      ██
 ██████  ███████ ███████ █████
 ██   ██ ██   ██      ██ ██
 ██████  ██   ██ ███████ ███████
*/

:root{
    --body-background:          var(--wp--preset--color--white);
    --header-height:            110px;
    --header-height-xs:         49px;
    --header-items-size:        49px;
    --logo-width-min:           100px;
    --logo-height:              100px;
    --logo-width-max:           280px;
    --block-parallax-min-height:460px;
    --banner-min-height:        80vh;
    --banner-max-height:        80vh;
    --global-gap:               10px;
    --global-radius:            0px;
    --nav-submenu-width:        320px;
    --nav-pannel-bg:            var(--wp--preset--color--brand);
    --error:                   #dc3232;

    /* Ne pas modifier les valeurs en clamp */
    --container-padding-x:      clamp(16px, 3vw, 60px); 
    --logo-width-fluid:         clamp(var(--logo-width-min), 15vw, var(--logo-width-max));
}



/* ============================================================================= 
// Modifier la couleur de fond du site
// ========================================================================== */ 
body{
  background-color:             var(--body-background);
}

/* ============================================================================= 
// Hauteur et taille header
// ========================================================================== */ 
header #barre-menu { min-height: var(--header-height); }
header .site-banner {
    margin-top:     var(--header-height);
    max-height:     var(--banner-max-height);
    min-height:     var(--banner-min-height);
}

/* ============================================================================= 
// Font weight des buttons
// ========================================================================== */ 
.elementor-button span, .elementor-button a, .elementor-button .elementor-button-text,
.card-link.is-style-filled, .card-link.is-style-secondary{
    font-weight:        bold;
}

/* ============================================================================= 
// Taille des boutons dans le header
// ========================================================================== */ 
header .bandeau{
    .header-elements-wrapper {
        .btn, .is-primary, .is-secondary, .social-link, .btn-wrap .btn{
            height:     var(--header-items-size);
            min-width:  var(--header-items-size);
        }
    }
    &.scrolled{
        .header-elements-wrapper {
            .btn, .is-primary, .is-secondary, .social-link, .btn-wrap .btn{
                width:  var(--header-items-size);
            }
        }
    }
    /* Taille de police calculée depuis le configurateur 
    .btn, .is-primary, .is-secondary {
        font-size: calc(var(--btn-default-fz) * 0.8);
    }*/
}

/* ============================================================================= 
// Style des boutons burger
// ========================================================================== */ 
.nav-toggle-open,
.nav-toggle-close {
    color:              var(--b-bg);
    background-color:   var(--b-heading-alt);
    width:              var(--header-items-size);
    height:             var(--header-items-size);

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

    &:hover,
    &:focus {
        background-color: var(--b-heading-alt);
        color:            var(--b-bg);
    }
}

/* ============================================================================= 
// Ordre du contenu dans le header
// ========================================================================== */ 
header #barre-menu {
    .site-navigation-wrapper {
        .site-navigation{           order: 1; }
        .nav-toggle-open{           order: 3; }
        .header-elements-wrapper{   order: 2; }
    }
}

/* ============================================================================= 
//   Navigation header 
//   1. ESPACEMENT — padding, gap, tailles
// ========================================================================== */ 
header {
    .mag-logo-wrap {
        position:    relative;
    }
    #barre-menu {
        justify-content: space-between;
        padding-inline:  var(--container-padding-x);
        gap:             var(--global-gap); 
    }
    #barre-menu .site-navigation-wrapper {
        @media (max-width: 1279px) { gap: var(--global-gap); }
        @media (min-width: 1280px) { gap: var(--space-sm); }

        .header-elements-wrapper { 
            gap: var(--global-gap); 
            .header-cta {
                gap: var(--global-gap); 
            }
        }
    }
    .nav-menu,
    .menu-item > a {
        text-decoration: none;
        font-weight:     400;
        font-family:     var(--font-titles);
        @media (max-width: 919px) {                         font-size: var(--wp--preset--font-size--sm); gap: var(--global-gap); }
        @media (min-width: 920px) and (max-width: 1279px) { font-size: calc(0.8 * var(--wp--preset--font-size--xs)); gap: var(--global-gap); }
        @media (min-width: 1280px) {                        font-size: var(--wp--preset--font-size--xs); gap: var(--space-sm); }
    }
    .sub-menu {
        gap: var(--global-gap);
        .menu-item-has-children & { min-width: var(--nav-submenu-width); }
    }
    .nav-toggle-close {
        position: absolute;
        right:    16px;
        top:      16px;
        z-index:  10;
    }
    #site-navigation.is-open {
        align-items:     center;
        .nav-menu,
        .sub-menu    { gap: var(--global-gap); }

        .menu-item > a {
            font-size: var(--wp--preset--font-size--xs);
            text-align:      center;
            justify-content: center;
        }
    }
}

/* ============================================================================= 
//   Navigation header 
//   2. COULEURS   — couleurs, backgrounds, transitions
// ========================================================================== */ 
header {
    #site-navigation.is-open .sub-menu{
        background: transparent;
    }
    .menu-item {
        &:hover > a,
        &:focus-within > a,
        &:has(.sub-menu:hover) > a {
            color:            var(--b-bg);
            background-color: var(--b-heading-alt);
            transition:       background-color 0.3s ease;
        }
    }
    .sub-menu {
        background-color: var(--b-heading-alt);
        box-shadow:       var(--btn-default-sh);
        .menu-item > a {
            color: var(--b-bg);
            &:hover {
                color:            var(--wp--preset--color--white); /*var(--b-bg);*/
                background-color: var(--wp--preset--color--brand-dark-50);
            }
        }
    }
    #site-navigation.is-open {
        background: var(--nav-pannel-bg);
        color:      var(--b-bg);
        .menu-item:has(.sub-menu:hover) > a { background-color: transparent; }
    }
}

/* ============================================================================= 
// Style du content banner
// ========================================================================== */ 
body header .site-banner {
    .banner-content {
        display:            flex;
        flex-direction:     column;
        justify-content:    center;
        align-items:        flex-start;
        
        @media (max-width: 782px) { 
            width:          calc(100% - (var(--container-padding-x) * 4) - var(--header-items-size));
            padding-left:   0; 
            padding-top:    0;
            padding-right:  0;
            padding-bottom: var(--space-md);
            /*padding:        0 var(--space-md) var(--space-md);*/
            position:       absolute;
            text-align:     center;
            gap:            var(--space-sm);
        }
        @media (min-width: 783px) { 
            padding:        0 var(--space-md);
            position:       absolute;
            text-align:     left;
            gap:            var(--space-sm);
        }

        /* Boutons */
        .diapo-cta-buttons {
            display:   flex;
            flex-wrap: wrap;
            gap:       var(--global-gap);

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

        /* Texte */
        .banner-diapo-text {
            @media (max-width: 782px) { 
                font-size: var(--wp--preset--font-size--sm);
            }
            @media (min-width: 783px) { 
                font-size: var(--wp--preset--font-size--lg);
            }
        }
    }
}

/* ============================================================================= 
// Ajouter un fondu sur le header quand il est en parallax
// ========================================================================== */ 
header .site-banner.has-parallax {
    .image-switcher__item img {
        @media (min-width: 783px) {
            mask-image:         linear-gradient(to bottom, black 75%, transparent 90%);
            -webkit-mask-image: linear-gradient(to bottom, black 75%, transparent 90%);
        }
    }
}

/* ============================================================================= 
// Switcher nav dots
// ========================================================================== */ 
.image-switcher__nav {
    position:        absolute;
    display:         flex;
    justify-content: center;
    padding-block:   1rem;
    width:           100%;
    left:            0;
    bottom:          3vh;
    z-index:         3;
}
.image-switcher__dots {
    gap:        1rem;
}
.image-switcher__dot {
    width:         1rem;
    height:        1rem;
    border-radius: 50%;
}

/* ============================================================================= 
// Padding réseaux sociaux
// ========================================================================== */ 
.header-social-wrap{
    .social-links-wrap {
        justify-content: space-around;
        gap: var(--global-gap);
    }
}
.footer-social-wrap{
    .social-links-wrap {
        gap: var(--global-gap);
        @media (max-width: 782px) {
            justify-content: center;
        }
        @media (min-width: 783px) {
            justify-content: space-around;
        }
    }
}

/* ============================================================================= 
// Mise en page diapo
// ========================================================================== */ 
/* Mise en page du h1, du texte des diapos, et des boutons */
header .site-banner .banner-content {
    h1{
        font-weight:    600;
        font-size:      var(--wp--preset--font-size--lg);
        line-height:    1.6rem;
        font-family:    var(--font-titles);
        span {
            font-family:   var(--font-body);
            font-size:     var(--wp--preset--font-size--lg);
        }
    }
    .banner-title {
        @media (max-width: 782px) { 
            align-items: center;
            text-align:  center;
        }
    }
    .banner-cta {
        margin-top: var(--global-gap);
        @media (max-width: 782px) { 
            justify-content: center;
        }
        @media (min-width: 783px) { 
            justify-content: flex-start;
        }
    }
    .banner-diapo-text,
    .diapo-cta-container{
        @media (max-width: 782px) { 
            margin:0 auto;
        }
    }
}

/* ============================================================================= 
// Logo header
// ========================================================================== */ 
/* Gérer la taille et le resizing des logos dans le header */
header {
    .mag-logo-wrap {
        height:     var(--header-height);
        width:      var(--logo-width-fluid);
    }
    .site-brand-text{
        font-family: var(--font-titles);
        font-size:   var(--wp--preset--font-size--md);
        font-weight: 600;
    }

    .mag-logo-wrap .mag-logo-wrap__default {
        width: var(--logo-width-fluid);
    }

    .mag-logo-wrap .mag-logo-wrap__scroll {
        height:      var(--logo-height);
        padding:     calc(var(--space-md) - var(--space-xs)) 0;

        img {
            width:  auto;
            height: calc(var(--logo-height) - calc(calc(var(--space-md) - var(--space-xs))) * 2);
        }
    }

    .bandeau.is-sticky-header.scrolled {
        .mag-logo-wrap__scroll {
            height:      var(--logo-height);
            img {
                width:  auto;
                height: calc(var(--logo-height) - calc(calc(var(--space-md) - var(--space-xs))) * 2);
            }
        }
    }
}

/* ============================================================================= 
// Mise en page réseaux sociaux header et des boutons CTA
// ========================================================================== */ 
/* Permet l'affichage des réseaux en flottant */
.header-social-wrap{
    position:       absolute;
    padding-top:    calc(var(--header-height) + var(--container-padding-x));
    padding-inline: var(--container-padding-x);
    flex-direction: column;
    top:            0;
    right:          0;
    .social-links-wrap {
        flex-direction: column;
    }
}
/* Permet l'affichage des réseaux à la ligne */
/*
.header-social-wrap{
    height:         var(--header-height);
    flex-direction: column;
    .social-links-wrap {
        flex-direction: row;
    }
}*/
/* Masquer le texte des boutons CTA dans le header sans nuire à l'accessibilité */
/*
.header-cta .btn{
   .btn-text {
        clip: rect(1px, 1px, 1px, 1px);
        position: absolute;
        height: 1px;
        width: 1px;
        overflow: hidden;
    }
}*/

/* ============================================================================= 
// Mise en page HEADER / FOOTER mode BOXED
// ========================================================================== */ 
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-inline: var(--container-padding-x);
        }
    }
    @media (min-width: 920px) {
        margin-top: var(--space-md);
    }
}
body footer.site-footer.is-boxed:not(.dynamic-footer),
.site-footer{
    padding-inline: var(--container-padding-x);
}

/* ============================================================================= 
// Mise en page footer
// ========================================================================== */ 
.site-footer{
    border-top:         solid 4px var(--wp--preset--color--brand-dark-20);
    padding-top:        var(--space-sm);
    padding-bottom:     var(--space-sm);

    @media (max-width: 782px) { text-align: center; }
    @media (min-width: 783px) { text-align: left; }

    /* Logo */
    .footer-brand{
        gap: var(--space-lg);

        @media (max-width: 782px) { 
            display:flex;
            flex-direction: column;
        }
        @media (min-width: 783px) { 
            display:grid; 
            grid-auto-flow: column;
        }

        .mag-logo-text{
            font-family:    var(--font-titles);
            font-size:      var(--space-md);
            font-weight:    600;
            @media (max-width: 782px) { 
                justify-content: center;
            }
        }
        img {
            width:          var(--logo-width-max);
            
            @media (min-width: 783px) {
                width:      var(--logo-width-fluid);
                height:         stretch;
            }
        }
    }

    .footer-section{
        display:         flex;
        flex-direction:  column;
        justify-content: space-around;
        height: stretch;
    }

    /* zone coordonnées */
    .footer-config-wrap{
        align-items: center;
        
        @media (max-width: 782px) { 
            display:flex;
            flex-direction: column;
            row-gap: var(--space-md);
        }
        @media (min-width: 783px) {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
            row-gap: var(--space-xs);
            column-gap: var(--space-md);

            &:not(:has(.footer-social-wrap)),
            &:not(:has(.footer-hours)) {
                grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
                
                &.footer-contact-info{
                    order:1;
                }
                &.footer-hours{
                    order:3;
                }
                &.footer-cta{
                    display:flex;
                    flex-direction: row;
                }
            }

            &:has(.footer-hours) {
                .footer-cta{
                    display:flex;
                    flex-direction: column;
                }
            }

            &:has(.footer-social-wrap),
            &:has(.footer-hours){
                /*grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
                row-gap: var(--space-xs);
                column-gap: var(--space-sm);*/

                &.footer-contact-info{
                    order:1;
                }
                &.footer-hours{
                    order:3;
                }
                &.footer-cta{
                    order:2;
                    display:flex;
                    flex-direction: column;
                }
                &.footer-social-wrap{
                    order:4;
                }
            }
        }

    }

    /* Zone horaires */
    .footer-hours{
        grid-column: span 3;
    }

    /* Zone CTA */
    .footer-cta{
        display:flex;
        flex-direction: row;
        gap: var(--space-sm);
        justify-content: center;
        @media (max-width: 1199px) {
            flex-direction: column;
        }
    }

    /* Zone Adresse */
    .footer-address .footer-icon{
        width:16px;
        height:16px;
        svg {
            width: 16px;
            height: 16px;
        }
        .adress{
            flex:1;
            min-width:0;
        } 
    } 

    /* Zones communes */
    .footer-contact-info,
    .social-links-wrap{
        @media (max-width: 782px) {
            align-items: center;
            text-align: center;
            width: 100%;
        }
        @media (min-width: 783px) {
            justify-content: flex-start;
        }
    }

    /* Zone réseaux */
    .footer-social-wrap {
        display:         flex;
        flex-direction:  column;

        .social-links-wrap {
            flex-direction: row;
        }
        @media (max-width: 782px) {
            justify-content: center;
            align-items: center;
            text-align: center;
            width: 100%;
        }
        @media (min-width: 783px) {
            justify-content: space-around;
            height: stretch;
        }
    }

    /* Zone menu footer */
    .footer-bar{
        padding-top:    var(--space-xs);
        padding-bottom: var(--space-xs);
        .footer-signature {
            justify-content: center;
        }
    }
}

/* ============================================================================= 
// Mise en page bridge
// ========================================================================== */ 
.e-con.has-parallax{ gap:0; 
    .elementor-widget-heading{ text-align: center;
        h2, h2.elementor-heading-title{ text-align: center; margin:0 auto; }
    }
    .e-con{ justify-content: center; }
}
.e-con.has-parallax .e-con.e-child{ flex:none; }

/* ============================================================================= 
// Comportement 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;
    }
}

/* ============================================================================= 
// Formulaire
// ========================================================================== */ 
.wpcf7-form {
    background-color: var(--wp--preset--color--brand-light-90);
    margin:           var(--space-sm) auto;
    padding:          var(--space-md);
    border-radius:    var(--card-radius);
    border-width:     var(--card-border-width, 1px);
    border-style:     var(--card-border-style, solid);
    border-color:     var(--card-border);
    box-shadow:       var(--card-shadow);
    font-family:      var(--font-body);

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

    /* Champs de saisie */
    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(--wp--preset--font-size--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);
    }

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

/* Messages d'erreur */
.wpcf7-not-valid-tip {
    color:       var(--error);
    font-size:   0.9em;
    font-weight: normal;
    display:     block;
    margin-top:  var(--space-xs);
}

/*
 ███████ ████████ ██    ██ ██      ███████ ███████
 ██         ██     ██  ██  ██      ██      ██
 ███████    ██      ████   ██      █████   ███████
      ██    ██       ██    ██      ██           ██
 ███████    ██       ██    ███████ ███████ ███████
*/

/* ============================================================================= 
// Ajouter un boxshadow sur le menu
// ========================================================================== */ 
/* Ajouter un boxshadow sur le menu
header #barre-menu{ box-shadow: var(--btn-default-sh); }
*/
/* Ajouter un boxshadow sur le menu au scroll down */
header .bandeau.is-sticky-header.scrolled #barre-menu{ box-shadow: var(--btn-default-sh); }

/* ============================================================================= 
// Before de la barre de menu
// ========================================================================== */ 
/* Masquer si pas besoin */
.site-header[class*=is-style] {
    &::before {
        background: var(--wp--preset--color--gradiant-1);
        @media (max-width: 782px) { 
            top:    calc(-1 * var(--header-height-xs));
            height: calc(100% + var(--header-height-xs));
        }
        @media (min-width: 783px) { 
            top:    calc(-1 * var(--header-height));
            height: calc(100% + var(--header-height));
        }
    }
    &.is-boxed {
        &::before {
            @media (min-width: 783px) { 
                top:    var(--space-md);
                height: calc(100% + var(--header-height));
            }
        }
    }
}

/* ============================================================================= 
// Taille des pictos dans les cartes
// ========================================================================== */ 
.elementor-widget-tm-flexible-card{
    .tm-card-item.card-structure-editor{
        .card-body {
            img[src$=".svg"] {
                width: 33.33%;
            }
        }
    }
}

/* ============================================================================= 
// Créer une bordure sur le menu en mode header boxed pour l'encapsuler
// ========================================================================== */ 
/*
header.site-header.is-boxed .bandeau.is-sticky-header:not(.scrolled) #barre-menu{
  margin: var(--wp--preset--spacing--10);
  border-radius:var(--block-radius, 0px);
}*/

/* ============================================================================= 
// Override scroll sur style switcher light
// ========================================================================== */ 
/*
header.site-header {
  &.is-style-switcher-light.scrolled {
      background-color: transparent;
  }
}*/

/* =============================================================================
// Créer un dégradé fondu transparent sur l'image de diapo
// ========================================================================== */ 
/*
.site-header #banner .image-switcher img{
  mask-image: linear-gradient(
    to bottom,
    black 75%,
    transparent 90%
  );
  -webkit-mask-image: linear-gradient(
    to bottom,
    black 75%,
    transparent 90%
  );
}*/

/* =============================================================================
// Créer un filtre noir sur l'image de diapo
// ========================================================================== */ 
/*
.image-switcher{
  position:relative;
  &::before {
      content: "";
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      background-color: var(--wp--preset--color--dark);
      opacity: .5;
      z-index: 1;        
  }
}*/


/*
  ██████  ██    ██ ███████ ██████  ██████  ██ ██████  ███████
 ██    ██ ██    ██ ██      ██   ██ ██   ██ ██ ██   ██ ██
 ██    ██ ██    ██ █████   ██████  ██████  ██ ██   ██ █████
 ██    ██  ██  ██  ██      ██   ██ ██   ██ ██ ██   ██ ██
  ██████    ████   ███████ ██   ██ ██   ██ ██ ██████  ███████
*/

/* Mettre les classes override ici */