/* COULEURS */
:root {
  --color1: #F1E9E1;
  --color2: #D04413;
  --color3: #252221;
  --color4: #8A9977;
  --color5: #A48F7A;
  --color6: #8D4931;
  --color7: #101820;
}

.color2 { 
	color:var(--color2) !important; 
}
.color3 { 
	color:var(--color3) !important; 
}

/* LOADING SCREEN */
#loading-screen {
	position: fixed;
	top: 0;
	left: 0;
	width: 100vw;
	height: 100vh;
	background-color:var(--color3);
	display: flex;
	justify-content: center;
	align-items: center;
	z-index: 9999;
	font-size: 4rem;
	font-weight: bold;
	transition: opacity 0.2s ease;
}
#loading-screen.fade-out {
	opacity: 0;
	pointer-events: none;
}

#loading-screen img {
	opacity: 0;
	transform: scale(0.8);
	animation: fadeInZoom 2s ease forwards;
	width:100%;
	max-width:250px;
}

@keyframes fadeInZoom {
	0% {
	opacity: 0;
	transform: scale(0.8);
	}
	100% {
	opacity: 1;
	transform: scale(1);
	}
}
	
/* DRAPEAU */
#drapeau  {
	margin:auto;
	height:5px;
	width:210px;
}
#drapeau-bleu {
	float:left;
	background-color:#2f1cad;
	width:70px;
	height:5px;
}
#drapeau-blanc {
	float:left;
	width:70px;
	height:5px;
}
#drapeau-rouge {
	float:left;
	background-color:#eb1111;
	width:70px;
	height:5px;
}

/* POLICES */
.montserrat-extrabold {
  font-family: "Montserrat", sans-serif;
  font-optical-sizing: auto;
  font-weight: 800;
  font-style: normal;
}

.montserrat-light {
  font-family: "Montserrat", sans-serif;
  font-optical-sizing: auto;
  font-weight: 300;
  font-style: normal;
}
.montserrat-medium {
  font-family: "Montserrat", sans-serif;
  font-optical-sizing: auto;
  font-weight: 500;
  font-style: normal;
}
.montserrat-regular {
  font-family: "Montserrat", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
}
.montserrat-bold {
  font-family: "Montserrat", sans-serif;
  font-optical-sizing: auto;
  font-weight: 700;
  font-style: normal;
}

/* SLIDER HAUT */
 @media (max-width: 768px) {
   #bloc-haut {
	margin:0;
	padding:0;
	width:100%;
	--bs-gutter-x:0;
   }
}

#slide1-btnprev {
	background-color:#262221;border-radius:50%;width:50px;height:50px;padding-top:8px;padding-right:7px;
}

#slide1-btnnext {
	background-color:#262221;border-radius:50%;width:50px;height:50px;padding-top:8px;padding-left:4px;
}



.overlay-image {
    position: absolute;
    top: 20px; /* Distance par rapport au haut du carousel */
    left: 50%;
    transform: translateX(-50%); /* Centre horizontalement */
    width: 100%; /* Ajuste la taille selon besoin */
    max-width:250px;
	z-index: 10; /* S'assure que l'image reste au-dessus */
    pointer-events: none; /* Empêche l'image d'interférer avec les clics */
}

/* GENERAL */
h2 { 
	color:var(--color2); 
}

/* BLOC PRIX */
#bloc-prix {
	background-color:var(--color1);
}
#prix-barre {
	color:var(--color5); 
	text-decoration:line-through;
}
#prix {
	color:var(--color2); 
}
#reduction {
	background-color:var(--color2);
	border-color:var(--color2);
}

.radio-container {
	gap: 15px;
}

#radio1,#radio2,#radio3,#radio4 {
	width:1px;
	-moz-opacity:0;
	filter:alpha(opacity:0);
	opacity:0;
	outline:none;
}

#bouton-add {
	background-color:var(--color2);
	border-color:var(--color2);
	color:white;
}

.badge-taille {
	cursor:pointer;
}
.taille-actif {
	background-color:var(--color2);
	border-color:var(--color2);
	color:white;
}
.taille-inactif {
	background-color:var(--color1);
	border:1px solid var(--color2);
	color:var(--color3);
}

/* Styles des labels ronds */
.radio-label {
	width: 30px;
	height: 30px;
	border-radius: 50%;
	border: 2px solid transparent;
	cursor: pointer;
	transition: all 0.3s;
}

/* Couleurs différentes */
#radio1 + label { background: var(--color4); } 
#radio2 + label { background: var(--color5); }
#radio3 + label { background: var(--color6); }
#radio4 + label { background: var(--color7); }

/* Bordure noire quand sélectionné */
input[type="radio"]:checked + label {
	border: 2px solid black;
	box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
}

/* Effet de survol */
.radio-label:hover {
	transform: scale(1.1);
	opacity: 0.9;
}


/* AVIS */
#avis-wrapper { 
	background-color:var(--color2);
	height:300px;
	border-radius:10px;
}

#slider2 {
	
}

#nobla-design, #nobla-materiaux {
	background-color:var(--color1);
}

/* REASSURANCE */
.circle {
    width: 100px;
    height: 100px;
    background-color: var(--color1); /* Couleur de fond */
    border-radius: 50%; /* Rend le cercle parfait */
    display: flex; /* Active le centrage */
    align-items: center; /* Centre verticalement */
    justify-content: center; /* Centre horizontalement */
    overflow: hidden; /* Cache les parties dépassant du cercle */
}

.circle img {
    width: 70%; /* Ajuste la taille de l'image */
    height: auto; /* Garde les proportions */
}

/* FOOTER */
footer { 
	background-color:var(--color3);
	min-height:350px;
}
#footer-logo { 
	width:50%; 
	max-width:300px; 
}

#stickyContainer {
	position: fixed;
	bottom: 0px;
	left: 50%;
	transform: translateX(-50%);
	z-index: 1000;
	height:80px;
	background-color:white;
	text-align:center;
	border-top:1px solid var(--color2);
	padding-top:10px;
}
#bouton-add { 
	cursor:pointer;
	min-width:300px;
	padding-top:20px;
	padding-bottom:20px;
}

/* MODALS */
.btn-fermer { 
	background-color:var(--color2);
	border-color:var(--color2);
}
.btn-fermer:hover { 
	background-color:var(--color2);
	border-color:var(--color2);
}

/* FAQ */
#faq {
	background-color:var(--color1);
	border-radius:10px;
}
.accordion, .accordion-item, .accordion-header, .accordion-button {
	background-color:var(--color1);
}