/* ===================================================================
 * # SITE HEADER
 * ------------------------------------------------------------------- */

 @font-face {
    font-family: 'MyCustomFont';
    src: 
         url('fonts/DESIGNERRegular.woff2') format('woff2'),
         url('fonts/DESIGNER.otf') format('opentype'),
         url('fonts/DESIGNERRegular.ttf') format('truetype'),
         url('fonts/DESIGNERRegular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
  }
  
  /* --------------------------------------------------------------------
 * Global Styles for Custom Font
 * ------------------------------------------------------------------- */

.writing-effect, .custom-font, .s-header__menu-links a {
    font-family: 'MyCustomFont', sans-serif;
}

.s-header {
    --header-height : 80px; /* Taille du header */
    --logo-width    : 6rem;
    --width-grid-max: calc(var(--width-sixteen-cols) - calc(var(--gutter) * 2));
    --box-shadow    : 0 1px 1px rgba(0, 0, 0, 0.02),
                      0 2px 2px rgba(0, 0, 0, 0.02),
                      0 4px 4px rgba(0, 0, 0, 0.02),
                      0 8px 8px rgba(0, 0, 0, 0.02);
    --box-shadow-2: 0 2px 2px rgba(0, 0, 0, 0.03),
                    0 4px 4px rgba(0, 0, 0, 0.03),
                    0 8px 8px rgba(0, 0, 0, 0.03),
                    0 16px 16px rgba(0, 0, 0, 0.03);
    z-index         : 100;
    background-color: transparent;
    height          : var(--header-height);
    width           : 100%;
    position        : fixed; /* Changer ici pour que le header reste en haut */
    top             : 0;
    left            : 0;
}

.s-header.offset {
    transform          : translateY(-100%);
    transition-property: transform, background-color;
    transition-duration: 0.5s;
}

.s-header.scrolling {
    transform: translateY(0);
}

.s-header.sticky {
    opacity         : 0;
    visibility      : hidden;
    background-color: var(--color-3);
    box-shadow      : var(--box-shadow);
    border          : none;
    border-bottom   : 1px solid rgba(255, 255, 255, 0.03);
    position        : fixed;
    top             : 0;
    left            : 0;
    width           : 100%; /* Assurez-vous que la largeur est de 100% */
}

.s-header.sticky .s-header__inner {
    --width-grid-max: var(--width-default);
    background-color: transparent;
    border          : none;
    box-shadow      : none;
    width           : 100%; /* Assurez-vous que la largeur est de 100% */
}

.s-header.sticky.scrolling {
    opacity   : 1;
    visibility: visible;
}

.s-header__inner {
    height          : var(--header-height);
    align-items     : center;
    justify-content : space-between;
    background-color: var(--color-3);
    border          : 1px solid rgba(255, 255, 255, 0.03);
    padding         : 0 var(--gutter);
    box-shadow      : var(--box-shadow);
    justify-content : center; /* Centrer les éléments horizontalement */
    width           : 100%; /* Assurez-vous que la largeur est de 100% */
    box-sizing       : border-box; /* Inclut les paddings et les bordures dans la largeur totale */
}

.s-header__block {
    z-index : 101;
    position: relative;
}

/* --------------------------------------------------------------------
 * ## logo
 * -------------------------------------------------------------------- */
.s-header__logo {
    z-index    : 3;
    line-height: 1;
    transform  : translate(0.2rem, -0.05em);
}

.s-header__logo a {
    display: block;
    margin : 0;
    padding: 0;
    outline: 0;
    border : none;
}

.s-header__logo img {
    width         : var(--logo-width);
    margin        : 0;
    vertical-align: bottom;
}

/* --------------------------------------------------------------------
 * ## main navigation
 * -------------------------------------------------------------------- */
.s-header__nav {
    margin-left: var(--vspace-1);
}

.s-header__menu-links {
    list-style: none;
    display   : inline-flex;
    flex-flow : row nowrap;
    margin    : 0;
    padding   : 0;
    justify-content: space-between; /* Espacer les éléments du menu uniformément */
    width: 100%; /* Assurer que les liens prennent toute la largeur */
}

.s-header__menu-links li {
    padding-left: 0;
}

.s-header__menu-links a {
    display            : block;
    font-family        : 'MyCustomFont', sans-serif; /* Appliquer la police personnalisée */
    font-weight        : 400;
    font-size          : 1.8rem; /* Taille des lettres du menu */
    line-height        : var(--vspace-1);
    color              : #FFD700;
    padding            : 0 1.2rem;
    transition-property: color, background-color;
}

.s-header__menu-links .current a {
    color: white;
    border-bottom: 2px solid #FFD700; /* Ajout de la bordure inférieure dorée */
}

/* --------------------------------------------------------------------
 * ## mobile menu toggle
 * -------------------------------------------------------------------- */
.s-header__menu-toggle {
    --toggle-block-width: 44px; /* Définit la largeur du bloc du bouton de menu */
    --toggle-line-width : 28px; /* Définit la largeur des lignes du bouton de menu */
    --toggle-line-height: 1px; /* Définit la hauteur des lignes du bouton de menu */
    display             : none; /* Masque le bouton de menu par défaut */
    width               : var(--toggle-block-width); /* Utilise la largeur définie pour le bloc du bouton de menu */
    height              : var(--toggle-block-width); /* Utilise la largeur définie pour la hauteur du bloc du bouton de menu */
    position            : absolute; /* Positionne le bouton de menu de manière absolue */
    top                 : calc((var(--header-height) - var(--toggle-block-width)) / 2); /* Centre verticalement le bouton de menu */
    right               : calc(var(--gutter) * 2 - 0.8rem); /* Positionne le bouton de menu à droite avec un décalage */
    border-radius       : 5px; /* Ajoute un bord arrondi de 5px */
}

.s-header__menu-toggle span {
    display         : block; /* Affiche le span comme un bloc */
    background-color: white; /* Définit la couleur de fond du span */
    width           : var(--toggle-line-width); /* Utilise la largeur définie pour les lignes du bouton de menu */
    height          : var(--toggle-line-height); /* Utilise la hauteur définie pour les lignes du bouton de menu */
    margin-top      : -1px; /* Ajuste la marge supérieure pour aligner les lignes */
    font            : 0/0 a; /* Réinitialise la police pour éviter les effets indésirables */
    text-shadow     : none; /* Désactive l'ombre du texte */
    color           : transparent; /* Rend le texte transparent */
    transition      : all 0.5s; /* Ajoute une transition pour toutes les propriétés */
    position        : absolute; /* Positionne le span de manière absolue */
    right           : calc((var(--toggle-block-width) - var(--toggle-line-width)) / 2); /* Centre horizontalement le span */
    top             : 50%; /* Centre verticalement le span */
    bottom          : auto; /* Réinitialise la position du bas */
    left            : auto; /* Réinitialise la position de gauche */
}

.s-header__menu-toggle span::before,
.s-header__menu-toggle span::after {
    content         : ""; /* Ajoute du contenu vide pour les pseudo-éléments */
    width           : 100%; /* Définit la largeur des pseudo-éléments */
    height          : 100%; /* Définit la hauteur des pseudo-éléments */
    background-color: inherit; /* Hérite de la couleur de fond du span */
    transition      : all 0.5s; /* Ajoute une transition pour toutes les propriétés */
    position        : absolute; /* Positionne les pseudo-éléments de manière absolue */
    left            : 0; /* Aligne les pseudo-éléments à gauche */
}

.s-header__menu-toggle span::before {
    top: -10px; /* Positionne le pseudo-élément avant au-dessus du span */
}

.s-header__menu-toggle span::after {
    bottom: -10px; /* Positionne le pseudo-élément après en dessous du span */
}

/* is clicked
 */
.s-header__menu-toggle.is-clicked span {
    background-color: rgba(255, 255, 255, 0); /* Rend la ligne centrale transparente lorsque le menu est cliqué */
    transition      : all 0.1s; /* Ajoute une transition rapide pour toutes les propriétés */
}

.s-header__menu-toggle.is-clicked span::before,
.s-header__menu-toggle.is-clicked span::after {
    background-color: white; /* Change la couleur des lignes avant et après lorsque le menu est cliqué */
}

.s-header__menu-toggle.is-clicked span::before {
    top      : 0; /* Réinitialise la position du pseudo-élément avant */
    transform: rotate(135deg); /* Fait tourner le pseudo-élément avant de 135 degrés */
}

.s-header__menu-toggle.is-clicked span::after {
    bottom   : 0; /* Réinitialise la position du pseudo-élément après */
    transform: rotate(225deg); /* Fait tourner le pseudo-élément après de 225 degrés */
}

/* -------------------------------------------------------------------
 * responsive:
 * site-header
 * ------------------------------------------------------------------- */
@media screen and (max-width: 900px) {
    .s-header {
        --header-height: 80px; /* Définit la hauteur de l'en-tête pour les écrans de largeur maximale de 900px */
        top            : 0; /* Positionne l'en-tête en haut */
    }

    .s-header.sticky {
        box-shadow: none; /* Supprime l'ombre de la boîte pour l'en-tête collant */
        border    : none; /* Supprime la bordure pour l'en-tête collant */
    }

    .s-header__inner {
        width     : 100%; /* Définit la largeur de l'élément interne de l'en-tête */
        margin    : 0; /* Supprime la marge de l'élément interne de l'en-tête */
        padding   : 0; /* Supprime le remplissage de l'élément interne de l'en-tête */
        border    : none; /* Supprime la bordure de l'élément interne de l'en-tête */
        box-shadow: none; /* Supprime l'ombre de la boîte de l'élément interne de l'en-tête */
    }

    .s-header__block {
        width        : 100%; /* Définit la largeur du bloc de l'en-tête */
        height       : var(--header-height); /* Utilise la hauteur définie pour le bloc de l'en-tête */
        box-shadow   : var(--box-shadow); /* Utilise l'ombre de la boîte définie pour le bloc de l'en-tête */
        border       : none; /* Supprime la bordure du bloc de l'en-tête */
        border-bottom: 1px solid rgba(255, 255, 255, 0.03); /* Ajoute une bordure inférieure au bloc de l'en-tête */
    }

    .s-header__logo {
        position : absolute; /* Positionne le logo de manière absolue */
        left     : calc(var(--gutter) * 2); /* Positionne le logo à gauche avec un décalage */
        top      : 50%; /* Centre verticalement le logo */
        transform: translate(0, -50%); /* Ajuste la position verticale du logo */
    }

    .s-header__nav {
        display         : block; /* Affiche la navigation comme un bloc */
        width           : 100%; /* Définit la largeur de la navigation */
        transform       : scaleY(0); /* Réduit la navigation verticalement */
        transform-origin: center top; /* Définit l'origine de la transformation */
        background-color: var(--color-3); /* Définit la couleur de fond de la navigation */
        box-shadow      : var(--box-shadow-2); /* Utilise l'ombre de la boîte définie pour la navigation */
        border-bottom   : 1px solid rgba(255, 255, 255, 0.03); /* Ajoute une bordure inférieure à la navigation */
        padding-top     : calc(var(--header-height) + var(--vspace-1_25)); /* Ajoute un remplissage en haut de la navigation */
        padding-right   : calc(var(--gutter) * 2); /* Ajoute un remplissage à droite de la navigation */
        padding-left    : calc(var(--gutter) * 2); /* Ajoute un remplissage à gauche de la navigation */
        padding-bottom  : var(--vspace-1_5); /* Ajoute un remplissage en bas de la navigation */
        margin          : 0; /* Supprime la marge de la navigation */
        position        : absolute; /* Positionne la navigation de manière absolue */
        top             : 0; /* Positionne la navigation en haut */
        left            : 0; /* Positionne la navigation à gauche */
    }

    .s-header__menu-links {
        margin    : 0; /* Supprime la marge des liens de menu */
        transform : translateY(-2rem); /* Déplace les liens de menu vers le haut */
        opacity   : 0; /* Rend les liens de menu transparents */
        visibility: hidden; /* Masque les liens de menu */
    }

    .s-header__menu-links a {
        font-size: var(--text-size); /* Définit la taille de la police des liens de menu */
        padding  : var(--vspace-0_25) 0; /* Ajoute un remplissage vertical aux liens de menu */
    }

    .s-header__menu-links {
        display: block; /* Affiche les liens de menu comme un bloc */
    }

    .s-header__contact {
        margin-top: var(--vspace-1_5); /* Ajoute une marge en haut du contact */
    }

    .s-header__contact .btn {
        width : 100%; /* Définit la largeur du bouton de contact */
        margin: 0; /* Supprime la marge du bouton de contact */
    }

    .s-header__menu-toggle {
        display: block; /* Affiche le bouton de menu */
    }

    .menu-is-open .s-header {
        height: auto; /* Ajuste la hauteur de l'en-tête lorsque le menu est ouvert */
    }

    .menu-is-open .s-header__block {
        box-shadow: none; /* Supprime l'ombre de la boîte du bloc de l'en-tête lorsque le menu est ouvert */
    }

    .menu-is-open .s-header__nav {
        transform       : scaleY(1); /* Agrandit la navigation verticalement lorsque le menu est ouvert */
        transition      : transform 0.4s cubic-bezier(0.215, 0.61, 0.355, 1); /* Ajoute une transition pour la transformation */
        transition-delay: 0s; /* Définit le délai de la transition */
    }

    .menu-is-open .s-header__menu-links,
    .menu-is-open .s-header__contact {
        transform       : translateY(0); /* Réinitialise la position verticale des liens de menu et du contact */
        opacity         : 1; /* Rend les liens de menu et le contact visibles */
        visibility      : visible; /* Affiche les liens de menu et le contact */
        transition      : all 0.6s cubic-bezier(0.215, 0.61, 0.355, 1); /* Ajoute une transition pour toutes les propriétés */
        transition-delay: 0.3s; /* Définit le délai de la transition */
    }
}

@media screen and (max-width: 600px) {
    .s-header__logo {
        left: calc(var(--gutter) * 2 + 2vw); /* Ajuste la position du logo pour les écrans de largeur maximale de 600px */
    }

    .s-header__menu-toggle {
        right: calc(var(--gutter) * 2 + 0.4rem); /* Ajuste la position du bouton de menu pour les écrans de largeur maximale de 600px */
    }

    .s-header__nav {
        padding-left : calc(var(--gutter) * 2 + 2.2vw); /* Ajuste le remplissage à gauche de la navigation pour les écrans de largeur maximale de 600px */
        padding-right: calc(var(--gutter) * 2 + 2vw); /* Ajuste le remplissage à droite de la navigation pour les écrans de largeur maximale de 600px */
    }
}

@media screen and (max-width: 400px) {
    .s-header__menu-toggle {
        right: calc(var(--gutter) * 2); /* Ajuste la position du bouton de menu pour les écrans de largeur maximale de 400px */
    }
}

/* Boutons telephone */
.call-button {
    color: gold; /* Couleur du texte */
    border: 1px solid gold; /* Bordure du bouton */
    border-radius: 15px; /* Rayon de bordure arrondie */
    padding: 8px 12px; /* Espace intérieur du bouton */
    text-decoration: none; /* Enlève le soulignement du lien */
    display: inline-block; /* Pour permettre l'ajustement de la taille */
    transition: background-color 0.3s ease; /* Transition fluide pour le survol */
    text-align: center;
}

.call-button:hover {
    background-color: #e0e0e0; /* Couleur de fond au survol */
    color: #000;
}

/* Icône de téléphone */
.call-button i {
    margin-right: 5px; /* Espace entre l'icône et le texte */
}

/* Responsive */
@media screen and (max-width: 768px) {
    .call-button {
        padding: 6px 10px; /* Réduction de l'espace intérieur sur mobile */
        font-size: 14px; /* Réduction de la taille de police */
    }
}


/* Logo Footer */
.footer-logo-section {
    display: flex;
    align-items: center;
}

.footer-logo {
    width: 60px; /* Ajustez la taille du logo selon vos besoins */
    height: auto;
    margin-right: 10px; /* Espace entre le logo et le texte */
}

.footer-logo-section span {
    font-size: 14px; /* Ajustez la taille du texte selon vos besoins */
    color: #333; /* Ajustez la couleur du texte selon vos besoins */
}

.footer-logo-section a {
    color: #007bff; /* Ajustez la couleur des liens selon vos besoins */
    text-decoration: none;
    transition: color 0.3s;
}

.footer-logo-section a:hover {
    color: #0056b3; /* Ajustez la couleur des liens au survol selon vos besoins */
}

.scroll-to-top {
    position: fixed;
    bottom: 10px;
    right: 80px;
    display: flex;
    flex-direction: column;
    align-items: center;
    color: gold;
}

.scroll-to-top a {
    text-decoration: none;
    color: gold;
    font-size: 14px; /* Ajusté pour la taille de l'icône */
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5); /* Ombre pour la flèche */
}

.scroll-to-top span {
    margin-top: 5px;
    font-size: 14px;
}

.smoothscroll {
    transition: opacity 0.3s;
}

.smoothscroll:hover {
    opacity: 0.7;
}

.s-header__menu-links a.current {
    border-bottom: 2px solid yellow;
}