:root {
--color-primary: #5DA322;
--color-primary-light: #6BEF24;
--color-primary-50: #F0F9E6;
--color-primary-600: #4D8320;
--color-primary-700: #4D8320;
--couleur_message_echec: #F93F57;
}

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

.bg-primary {
background-color: var(--color-primary);
}

.hover\:bg-primary-700:hover {
background-color: var(--color-primary-700);
}

.text-primary-light {
color: var(--color-primary-light);
}

.bg-primary-50 {
background-color: var(--color-primary-50);
}

/* HEADER */
header{
border: none;
background-color: #FFF;
border-bottom: solid 1px #f7f7f7;
opacity: 0.97;
}

.menu{
display: none;
}

.menu_mobile{
display: none;
}

/* CONNEXION */

.echec_requette{
border: none;
border-radius: 8px;
float: left;
width: 100%;
margin: 0;
padding: 10px;
color: var(--couleur_message_echec);
background-color: rgba(255, 37, 89, 0.1);
display: block;
float: left;
text-align: left;
line-height: 18px;
font-size: 15px;
animation: shakeX .9s;
margin-bottom: 10px;
cursor: pointer;
}

.echec_requette i{
margin: 0;
padding: 10px;
color: var(--couleur_message_echec);
font-size: 20px;
}

.succes_requette{
border: solid 1px rgba(107, 239, 36, 0.1);
border-radius: 8px;
float: left;
width: 100%;
margin: 0;
padding: 10px;
color: var(--color-primary);
/*background-color: var(--couleur_message_succes);*/
background-color: rgba(107, 239, 36, 0.1);
display: block;
float: left;
line-height: 18px;
text-align: left;
font-size: 15px;
animation: shakeX .9s;
margin-bottom: 10px;
}

.succes_requette i{
margin: 0;
padding: 10px;
color: var(--color-primary);
font-size: 18px;
}

.succes_abonnement{
position: fixed;
top: auto;
left: 42%;
right: auto;
bottom: 20px;
margin: 0;
padding: 15px;
padding-left: 20px;
padding-right: 20px;
border-radius: 10px;
color: #fff;
background-color: #4D8320;
line-height: 32px;
animation: pulse 0.5s;
box-shadow: 0px 0px 76px 6px rgba(0,0,0,0.1);
}

.echec_abonnement{
position: fixed;
top: auto;
left: 44%;
right: auto;
bottom: 20px;
margin: 0;
padding: 15px;
padding-left: 20px;
padding-right: 20px;
border-radius: 10px;
color: #fff;
background-color: #f55c5c;
line-height: 32px;
animation: pulse 0.5s;
box-shadow: 0px 0px 76px 6px rgba(0,0,0,0.1);
}

.succes_abonnement i, .echec_abonnement i{
margin: 0;
padding: 5px;
margin-right: 15px;
font-size: 25px;
color: #FFF;
float: left;
}

/* CONSENTEMENT */

.shadow{
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
/*backdrop-filter: blur(10px);*/ /* Effet de flou */
background-color: rgba(0, 0, 0, 0.6); /* Couche sombre */
z-index: 50; /* S'assurer que c'est au-dessus de tout */
display: flex;
align-items: center; /* Centre verticalement le contenu */
justify-content: center;
animation: pulse 0.5s;
overflow-y: auto; 
}

.shadow .contenu{
position: relative;
bottom: 0;
margin: 0;
height: 100%;
max-width: 600px;
margin-left: auto;
margin-right: auto;
}

.shadow .consentement{
margin: 0;
padding: 30px;
border-radius: 8px;
max-width: 600px;
background-color: white;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
margin-top: 2%;
z-index: 50;
}

.consentement .fermer{
margin: 0;
padding: 0;
font-size: 20px;
float: right;
color: #4e4f51;
margin-left: auto;
margin-right: 0;
cursor: pointer;
}

.consentement h3{
margin: 0;
padding: 0;
font-weight: 600;
font-size: 20px;
color: #2f3033;
margin-top: 1%;
margin-bottom: 2%;
}

.consentement h4{
margin: 0;
padding: 0;
font-weight: 600;
color: #2f3033;
margin-top: 1%;
margin-bottom: 1%;
}

.consentement ul{
margin: 0;
padding: 0;
color: #4f555d;
margin-top: 2%;
margin-bottom: 5%;
}

.consentement ul li::before{
content: "•"; /* Point ou autre symbole */
color: #4f555d;
margin-right: 8px; /* Espace entre le point et le texte */
}

.consentement .champ{
margin: 0;
padding: 0;
width: 220px;
margin-left: auto;
margin-right: 0;
}

.consentement .champ button{
margin: 0;
padding: 10px;
padding-left: 20px;
padding-right: 20px;
border-radius: 10px;
margin-left: 3%;
cursor: pointer;
}

.refuser{
color: #4f555d;
background-color: none;
}

.refuser:hover{
color: #616263;
background-color: none;
}

.accepter{
color: #FFF;
background-color: var(--color-primary);
}

.accepter:hover{
color: #FFF;
background-color: var(--color-primary-700);
}

.ouvrir_consentement{
border: solid 1px #E3EBF3;
position: fixed;
right: 30px;
bottom: 30px;
margin: 0;
padding: 15px;
border-radius: 40px;
height: 60px;
width: 60px;
color: #2f3033;
color: var(--color-primary);
text-align: center;
font-size: 20px;
background-color: #FFF;
box-shadow: 0px 0px 26px -4px rgba(0,0,0,0.1);
cursor: pointer;
}

/* PRICING */

.plan{
border: solid 3px var(--color-primary);
}

input[type="range"]::-webkit-slider-thumb{
-webkit-appearance: none; /* Désactiver le style par défaut */
height: 20px;
width: 20px;
background: var(--color-primary); /* Couleur du curseur */
border-radius: 50%; /* Forme circulaire */
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3); /* Ombre */
cursor: pointer; /* Pointer */
transition: transform 0.2s ease-in-out; /* Animation */
}

/* FOOTER */

.reseaux_sociaux{
font-size: 25px;
float: left;
margin-right: 5%;
}

/* CONTACT */
textarea {
display: block;
width: 100%;
font-size: 0.875rem; /* Text small */
font-weight: 500; /* Font-medium */
color: #374151; /* Text-gray-700 */
margin-bottom: 0.5rem; /* mb-2 */
padding: 0.5rem 0.75rem; /* Spacing pour un confort utilisateur */
outline: 1px solid #d1d5db; /* Border-gray-300 */
border-radius: 0.375rem; /* Rounded-md */
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05); /* Shadow-sm */
transition: border-color 0.3s, box-shadow 0.3s;
background-color: white;
}

/* Focus effect */
textarea:focus {
outline: solid 2px black; /* Indigo-500 */
border: transparent; /* Border-gray-300 */
}

/* AVIS CLIENTS */

/* Conteneur des notes */
.rating-container {
display: flex;
gap: 8px; /* Espacement entre les boutons */
justify-content: space-between;
align-items: center;
}

/* Boutons radio cachés */
.rating-container input[type="radio"] {
display: none;
}
  
/* Style des labels */
.rating-container label {
border: 1px solid #d1d5db; /* Border-gray-300 */
width: 40px;
height: 40px;
display: flex;
justify-content: center;
align-items: center;
font-size: 0.875rem; /* Texte petit */
font-weight: bold;
color: #374151; /* Text-gray-700 */
border-radius: 50%; /* Boutons ronds */
cursor: pointer;
transition: background-color 0.3s, transform 0.2s;
}

/* Effet au survol */
.rating-container label:hover {
color: #FFF; /* Text-gray-700 */
background-color: #6BEF24; /* Vert clair */
transform: scale(1.1); /* Légère mise en avant */
}

/* Style lorsque sélectionné */
.rating-container input[type="radio"]:checked + label {
color: #FFF; /* Text-gray-700 */
background-color: var(--color-primary); /* Vert clair */
/*box-shadow: 0 0 5px #6BEF24, 0 0 15px rgba(107, 239, 36, 0.6); /* Glow */
}

select {
display: block;
width: 100%;
font-size: 0.875rem; /* Text small */
font-weight: 500; /* Font-medium */
color: #374151; /* Text-gray-700 */
margin-bottom: 0.5rem; /* mb-2 */
padding: 0.5rem 0.75rem; /* Espacement interne */
border-radius: 0.375rem; /* Coins arrondis */
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05); /* Shadow-sm */
outline: 1px solid #d1d5db; /* Border-gray-300 */
background-color: white;
transition: border-color 0.3s, box-shadow 0.3s; /* Effet de transition */
appearance: none; /* Retire l'apparence native (selon les navigateurs) */
}

/* Focus effect */
select:focus {
outline: solid 2px black; /* Indigo-500 */
border: transparent; /* Border-gray-300 */
}

/* Option style (facultatif) */
select option {
font-weight: normal;
color: #374151; /* Texte gris */
background-color: white; /* Fond blanc */
}

/* Optionnel : Styling de l'input */
.datepicker {
width: 100%;
padding: 0.5rem 0.75rem;
font-size: 0.875rem; /* Texte petit */
font-weight: 500;
color: #374151; /* Gris foncé */
outline: 1px solid #d1d5db; /* Border-gray-300 */
border-radius: 0.375rem; /* Coins arrondis */
background-color: white;
transition: border-color 0.3s, box-shadow 0.3s;
}
.datepicker:focus {
outline: solid 2px black; /* Indigo-500 */
border: transparent; /* Border-gray-300 */
}

/* Personnalisation Flatpickr */
.flatpickr-calendar {
background-color: #ffffff; /* Fond blanc */
border: 1px solid #266763; /* Bordure verte */
border-radius: 8px; /* Coins arrondis */
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2); /* Légère ombre */
}

.flatpickr-day {
font-weight: bold;
color: #374151; /* Texte gris foncé */
border-radius: 4px; /* Coins légèrement arrondis */
transition: background-color 0.3s, color 0.3s;
}

.flatpickr-day:hover {
background-color: #6BEF24; /* Vert clair */
color: #ffffff; /* Texte blanc */
}

.flatpickr-day.selected {
background-color: #266763; /* Vert foncé */
color: #ffffff; /* Texte blanc */
}

.flatpickr-time input {
background-color: #ffffff; /* Fond blanc */
border: 1px solid #266763; /* Bordure verte */
color: #374151; /* Texte gris foncé */
border-radius: 4px;
}

.flatpickr-time input:focus {
border-color: #6BEF24; /* Bordure verte claire */
}

.flatpickr-confirm {
background-color: #266763; /* Fond bouton */
color: #ffffff; /* Texte blanc */
border-radius: 4px;
padding: 5px 10px;
}

.flatpickr-confirm:hover {
background-color: #6BEF24; /* Fond bouton au survol */
}

@media only screen and (max-width: 641px )
{

.shadow .contenu{
position: relative;
bottom: 0;
margin: 0;
height: 100%;
max-width: 90%;
margin-left: auto;
margin-right: auto;
}

.shadow .consentement{
margin: 0;
padding: 30px;
border-radius: 8px;
max-width: 100%;
background-color: white;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
margin-top: 2%;
z-index: 50;
}

}

@media only screen and (max-width: 767px )
{

.menu{
margin: 0;
padding: 20px;
height: 100%;
font-size: 20px;
display: block;
float: left;
}

.menu_mobile{
position: fixed;
top: 71px;
margin: 0;
padding: 20px;
width: 100%;
background-color: #FFF;
border-bottom: solid 2px #f7f7f7;
opacity: 0.97;
text-align: center;
z-index: 50;
}

.menu_mobile ul li{
height: 50px;
}

.logo{
height: 100%;
animation: pulse 0.5s;
margin-top: 2px;
margin-left: auto;
margin-right: 0;
}

}