/*
Theme Name: nw-theme
Theme URI: https://www.tebayo.com
Author: Tebayo
Description: Thème WordPress moderne avec Bootstrap, React, Webpack, animations, SEO friendly.
Version: 1.0
*/

@font-face {
    font-family: 'Quicksand';
    src: url('assets/fonts/Quicksand-Medium.woff2') format('woff2'),
        url('assets/fonts/Quicksand-Medium.woff') format('woff');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Quicksand';
    src: url('assets/fonts/Quicksand-Regular.woff2') format('woff2'),
        url('assets/fonts/Quicksand-Regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Quicksand';
    src: url('assets/fonts/Quicksand-Light.woff2') format('woff2'),
        url('assets/fonts/Quicksand-Light.woff') format('woff');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Quicksand';
    src: url('assets/fonts/Quicksand-Bold.woff2') format('woff2'),
        url('assets/fonts/Quicksand-Bold.woff') format('woff');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Quicksand';
    src: url('assets/fonts/Quicksand-SemiBold.woff2') format('woff2'),
        url('assets/fonts/Quicksand-SemiBold.woff') format('woff');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Roboto Condensed';
    src: url('assets/fonts/RobotoCondensed-Light.woff2') format('woff2'),
        url('assets/fonts/RobotoCondensed-Light.woff') format('woff');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

html {

    --charte-color-gris-texte: #181818;
    --charte-color-beige-texte: #AFAFAF;
    --charte-color-beige-fond: #D8D8D0;
    --charte-color-gris-principal: #3C4658;
}
body {

    font-size: calc(12px + 0.390625vw)!important;
    line-height: calc(13px + 0.390625vw)!important;
    position: relative;
    width: 100%;
    height: 100%;
    cursor: none;
    font-family: 'Quicksand'!important;
}
strong {
    font-weight: 700!important;
}
.btn-primary {
    --bs-btn-color: #fff;
    --bs-btn-bg: #a6b751!important;
    --bs-btn-border-color: #a6b751!important;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #469153!important;
    --bs-btn-hover-border-color: #469153!important;
    --bs-btn-focus-shadow-rgb: 49,132,253;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #469153!important;
    --bs-btn-active-border-color: #469153!important;
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: #edebec!important;
    --bs-btn-disabled-border-color: #edebec!important;
    --bs-border-radius: 1.6rem!important;
}
.btn:hover {

    cursor: none;
}
.cursor {
    position: fixed;
    top: 0;
    left: 0;
    width: 20px;       /* Taille du cercle */
    height: 20px;
    background-color: #70c622; /* Couleur du cercle */
    border-radius: 50%;        /* Forme ronde */
    pointer-events: none;      /* Ne bloque pas les clics */
    transform: translate(-50%, -50%);
    transition: background-color 0.2s, transform 0.1s;
    z-index: 9999;
}
.page-title {
    color: var(--charte-color-gris-texte);
    text-align: center;
    font-family: "Roboto Condensed";
    font-size: 20px;
    font-style: normal;
    font-weight: 300;
    line-height: 27px;
    letter-spacing: 4px;
    text-transform: uppercase;
}
.page-subtitle {
    color: var(--charte-color-gris-principal);
    text-align: center;
    font-family: "Quicksand";
    font-size: 75px;
    font-style: normal;
    font-weight: 600;
    line-height: 65px;
    letter-spacing: -0.75px;
}
.hidden {
    opacity: 0;
}


.hero-mask {
    overflow: hidden;
    width: 0px;
    height: 319px;
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    border-radius: 20px;
    z-index: 3;
  }
  .hero-image-2 {
    width: 100%;
    height: 100%;
    object-fit: cover;

  }
  .hero-image-1 {
    opacity: 0;
    position: absolute;
    top: 0;
    width:  280px;
    height: 320px;
    object-fit: cover;
    left: 30%;
    transform: translateX(0);
    border-radius: 20px;
    z-index: 1;
  }
  .hero-image-3 {
    opacity: 0;
   position: absolute;
   top: 0;
   width:  280px;
   height: 320px;
   object-fit: cover;
   left: 60%;
   transform: translateX(0); 
   border-radius: 20px;
   z-index: 2;
 }