/*
 Theme Name:   Bootscore Child
 Description:  Bootscore Child Theme
 Author:       Bootscore
 Author URI:   https://bootscore.me
 Template:     bootscore
 Version:      6.0.0
 Requires at least: 5.0
 Tested up to: 6.6
 Requires PHP: 7.4
 License: MIT License
 License URI: https://github.com/bootscore/bootscore-child/blob/main/LICENSE
 Text Domain:  bootscore
*/

/* 
All style editing is done via /assets/scss/_bootscore_custom.scss
*/


:root{
    --blanc: #ffffff;
    --orange: #EB8924; 
    --orange-clair:#FFB568;
    --noir-gris:#2B3D4B; 
    --swiper-navigation-size: 11px !important;
    --swiper-navigation-width: 21px;
}
.smooth-shadow{
    box-shadow: rgba(50, 50, 93, 0.25) 0px 2px 5px -1px, rgba(0, 0, 0, 0.3) 0px 1px 3px -1px;
}

a {
    cursor: pointer !important;
}



body {
  font-family: 'Hind Madurai', sans-serif;
}

/* TITRES */
h1, h2, h3, h4, h5, h6 {
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  line-height: 1.2;
  margin: 0 0 0.5em;
}

/* Système d’échelle : base 61px pour h1, avec facteur de 1.25 */

h1 { font-size: clamp(2.5rem, 5vw + 1rem, 3.8125rem); /* ≈ 40px – 61px */ }

h2 { font-size: clamp(2rem, 4vw + 0.5rem, 3.05rem); /* ≈ 32px – 48.8px */ }

h3 { font-size: clamp(1.6rem, 3vw + 0.5rem, 2.44rem); /* ≈ 25.6px – 39px */ }

h4 { font-size: clamp(1.28rem, 2.5vw + 0.3rem, 1.95rem); /* ≈ 20.5px – 31.2px */ }

h5 { font-size: clamp(1.024rem, 2vw + 0.3rem, 1.56rem); /* ≈ 16.4px – 25px */ }

h6 { font-size: clamp(0.819rem, 1.5vw + 0.3rem, 1.25rem); /* ≈ 13px – 20px */ }

/* PARAGRAPHE */
p { font-size: clamp(1rem, 1vw + 0.5rem, 1.125rem); /* ≈ 16px – 18px */ margin-bottom: 1em; }

.titre-page h1 {
	margin:0 !important;
}


.bg-orange{
    background-color: var(--orange) !important;
    color: white !important;
}

.bg-gradient-orange{
     background: linear-gradient( var(--orange), var(--orange-clair));
     color: white;
}

.bg-noir-gris{
    background-color: var(--noir-gris) !important;
    color: white !important;
}

.text-noir-gris{
    color: var(--noir-gris) !important;
}

.text-orange{
    color: var(--orange);
}


.cta{
    padding: 10px  20px;
    border-radius: 100px;
    border: none;
    font-weight: 600;
    transition: all ease .3s;
}

.cta:hover{
    transform: scale(1.03);
}

.cta-noir-gris-bg{
    padding: 10px  20px;
    border-radius: 100px;
    background-color: var(--noir-gris);
    color: var(--blanc);
    border: none;

}

.cta-noir-gris-border{
    padding: 10px  20px;
    border-radius: 100px;
    background-color: transparent;
    border: 1px solid var(--noir-gris);
    color: var(--noir-gris);
}


.cta-orange-bg{
    padding: 10px  20px;
    border-radius: 100px;
    background-color: var(--orange);
    color: var(--blanc);
    border: none;
}

#bootscore-navbar{
    display: flex;
    justify-content: center;
    align-items:center;
}

.nav-link.active{
    font-weight: bold;
    color: var(--noir-gris);
    border-bottom: solid var(--orange) 4px ;
   }

.dropdown-menu{
    border: var(--orange) 1px solid !important;
    margin-top: 2vh;
    --bs-dropdown-link-active-bg: #EB8924 !important;
}
.dropdown-item.active{
    background-color: var(--orange)!important;
}

.sliderValeurs{
    overflow: hidden ;
}


.swiper-wrapper {
    transition-timing-function: linear !important;
}

.icon-circle {
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  color: white;
  font-size: clamp(1rem, 1vw + 0.5rem, 1.5rem); /* adaptatif */
}

hr {
  border: none;
  border-top: 3px double #333;
  color: #333;
  overflow: visible;
  text-align: center;
  height: 5px;
}

hr::after {
  background: #fff;
  content: "§";
  padding: 0 4px;
  position: relative;
  top: -13px;
}

/* ________________________________________ sliderValeurs ________________________________________*/

/* Style pour le carrousel */
.swiper.swiper-valeurs {
    width: 100%;
    overflow: hidden;
    background-color: var(--orange);
    color: var(--blanc);
}

/* Style des slides */
.swiper-valeurs .swiper-slide {
    display: flex;
    align-items: center;
    justify-content: center;
    width: auto;
    min-width: max-content; /* S'assure que le contenu ne soit pas tronqué */
}



/* _________________________________________ sectionTexte ________________________________________*/

.sectionTexte{
    position: relative; 
    z-index: 0;
}

.etape-wrapper {
    background-color: var(--blanc);
    cursor: pointer;
    transition: all 0.3s ease-in-out;
}

.border-orange {
    -webkit-box-shadow: 0px 0px 0px 10px rgba(255,255,255,0.25); 
    box-shadow: 0px 0px 0px 10px rgba(255,255,255,0.25);
}
    
/* ________________________________________ cartes Cliquable ________________________________________*/
.imageVague {
    position: absolute;
    top: -20%;
    left: 30%;
    width: 70%;
    height: auto;
    z-index: 1;
}
.fond-lignes {
    position: absolute;
    top: 0;
    right: 0;
    width: 100%;
    height: 50vh; /* à adapter selon ton image */
    z-index: 10;
    overflow: hidden;
  }
  
  .fond-lignes img {
    width: auto;
    height: 30vh;

    opacity: 1;
  }

.carteCliquable{
    position: relative;
    z-index: 1;
    background: linear-gradient(var(--orange-clair), var(--orange));
}

.hr-separation {
    display: flex;
    align-items: center;
    text-align: center;
    background-color: var(--orange-clair);
}

.hr-separation::before,
.hr-separation::after {
content: "";
flex: 1;
border-top: 2px double var(--blanc);
}

.hr-separation span {
padding: 0 20px;
font-weight: bold;
color: var(--blanc);
border: var(--blanc) 1px solid;
border-radius: 90px;
}

.carteCliquable .card{
    box-shadow: 0px 8px 15px rgba(0, 0, 0, 0.15);
    transform: translateY(0px);
    transition: all ease 0.5s;
}

.carteCliquable .card:hover {
    transform: translateY(-5px);
}

.carteCliquable .lien{
    transition: all ease 0.3s; 
}

.carteCliquable .lien:hover {
background-color: #3b4a55 !important ;
}

/* ________________________________________ section fond Bleu Infos ________________________________________*/

.fondBleuInfos{
    margin-top:10vh; 
    position: relative; 
    background: var(--noir-gris);
    overflow: hidden;
    border-radius: 20px;
    color: white;
}
/* ________________________________________ slider Produits ________________________________________*/



/* Swiper Layout */
.swiper.swiper-produits {
    width: 100%;
    overflow: hidden;
}
.swiper-produits .swiper-slide {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

/* Active image highlight */
.slide-image.active-image {
    border: 2px solid var(--orange);
    border-radius: 10px;
}

/* Texte et liens (masqué sauf sur slide active) */
.text-and-links {
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.1s ease, visibility 0s linear 0.1s;
}
.text-and-links.visible {
    opacity: 1;
    visibility: visible;
    transition: opacity 0.1s ease, visibility 0s linear 0s;
}

    /* Flèches */
.swiper-button-prev,
.swiper-button-next {
    color: var(--orange);
    border: 2px solid var(--orange);
    border-radius: 50%;
    width: 40px;
    height: 40px;
    padding: 10px !important;
    background-color: #fff;
}
.swiper-button-prev:after,
.swiper-button-next:after {
    font-size: 1rem;
}

@media (max-width: 772px) {
    .swiper-button-prev,
	.swiper-button-next {
    display:none;
	}
}


/* Boutons personnalisés */
.sliderProduits .lienUn {
    color: var(--orange); 
    border: 1px solid var(--orange); 
    background-color: var(--blanc);
}
.sliderProduits .lienDeux {
    color: var(--blanc); 
    border: 1px solid var(--orange); 
    background-color: var(--orange);
}

.sliderProduits{
    overflow: hidden;
}


/* Ligne décorative */
.hr-title {
    display: flex;
    align-items: center;
    justify-content: center;
}
.hr-title::before,
.hr-title::after {
    content: "";
    flex: 1;
    border-top: 2px double var(--orange);
    margin: 0 10px;
}

/* ________________________________________ carteInterractive ________________________________________*/



.svg-container {
    width: 100%; /* Ajuste la largeur de l'élément SVG */
    height: auto; /* Garder la proportionnalité de l'élément SVG */
}

.svg-container svg {
    max-width: 100%; /* Ajuste la taille de l'élément SVG */
    height: auto;
}
.fa-map-marker-alt{
    color: var(--blanc);
}

.carteInterractive button{
	border: solid white 1px;
	padding: 5px 20px;
	background-color: transparent;
	color:white;
	margin:5px;
}
.carteInterractive button.active {
	background-color: var(--orange);
	color: white;
	border: solid var(--orange) 1px;
}

/* CF7 */

.wpcf7-submit{
    background-color: var(--orange) !important;
    border: none !important;
}
.wpcf7-submit:hover{
    background-color: white !important;
    color: var(--orange) !important;
    border: 1px solid var(--orange) !important;
}
.parallax-section {
    background-attachment: scroll;
    
}

/* Désactiver l'effet parallax et ajuster l'image sur mobile */
@media only screen and (min-width: 1024px) {
    .parallax-section {
        background-attachment: fixed !important; /* Empêche le comportement fixed sur les mobiles */
        
        background-size: contain; /* Affiche l'image entière sans la couper */
    }
}

/* Footer */

#floating-phone {
    position: fixed;
    right: 1rem;
    bottom: 1rem;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: var(--orange);
	border: 2px solid var(--noir-gris);
    color: #fff;
    font-size: 24px;
    align-items: center;
    justify-content: center;
    overflow: visible;
    box-shadow: 0 4px 14px rgba(0, 0, 0, .25);
    transition: transform .25s ease, background .25s ease;
    z-index: 999;
    cursor: pointer;
}

.top-button{

background-color: var(--blanc) !important;

border: var(--noir-gris) 1px solid;

color: var(--noir-gris) !important;

}



.fa-location-dot {

color: var(--orange);

}



.contactFooter li {

border: var(--noir-gris) 1px solid;

color: var(--noir-gris);

border-radius: 20px;

padding: 10px;

margin: 5px;

}



@media (max-width: 767px) {

	.contactFooter li {
	  font-size: 14px;
	}

	.bootscore-footer-columns {
	  padding-left: 15px;
	  padding-right: 15px;
	}

}


#footer li a {
	color: var(--noir-gris) !important;
	text-decoration: none !important;
}

#footer li a:hover {
	color: var(--orange) !important;
	text-decoration: none !important;
	font-weight: bold;
	transition: top 0.3s ease-in-out;
}