/* Styles généraux */
html {
    scroll-behavior: smooth;
}

body, html {
    height: 100%;
    width: 100%;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
	background-color: #f9f9f9;
}

.icon {
  width: 24px;
  height: 24px;
  vertical-align: middle;
  margin-right: 6px;
}



header {
    position: fixed;
	width: 100%;
    box-sizing: border-box;
	top: 0;
    left: 0;
	background-color: #f0f0f0;
	z-index: 1000; /* Pour qu'il passe au-dessus des autres éléments */
}


/* Bloc full-screen avec l'image de fond */
.full-screen {
    position: relative;
    width: 100%;  /* S'assurer qu'il prend toute la largeur */
    height: 100vh; /* 100% de la hauteur de la fenêtre */
    background-image: url('../pictures/background2.webp');
    background-size: cover;
    background-position: center;
    display: flex;
    justify-content: center;
    align-items: center;
    color: white;
    text-align: center;
    box-sizing: border-box; /* S'assure que les padding et marges ne font pas déborder le bloc */
}

/* Conteneur de texte dans le bloc full-screen */
.text-container {
    position: relative;  /* Pour assurer que le texte est correctement placé au centre */
    z-index: 1; /* Pour que le texte reste au-dessus de l'image */
}

.text-container h1 {
    margin: 0;
}

.sous-titre {
    font-weight: 600; /* ou bold */
    font-size: 1.1em;
    margin-top: 0.5em;
}

.nom {
	display: block;
    font-size: 3rem; /* Taille du nom */
	font-family: 'Yrsa', serif;  /* Ou 'Rasa' selon le choix */
    font-weight: 400;
	letter-spacing: 2px;
}

.title {
	display: block;
    font-size: 2rem; /* Taille de "KINESITHERAPEUTE" */
	font-family: 'Gowun Dodum', sans-serif;
    font-weight: 400;
    margin: 0;
    letter-spacing: 2px; /* Espacement pour l’élégance */
}

.lignenom {
    display: block;
}

.button-like {
    display: inline-block;
    padding: 8px 20px;
	font-family: 'Noto Sans Display', sans-serif;
    background-color: #f4f1e1; /* Fond blanc cassé */
    border: 2px solid #ccc; /* Bordure légère */
    border-radius: 25px; /* Bords arrondis */
    font-size: 0.8rem;
    text-align: center;
    cursor: pointer;
    transition: all 0.3s ease; /* Transition douce pour le changement */
    margin-top: 100px; /* Ajoute de l'espace au-dessus du bouton */
	color: black;
}

.button-like:hover {
    transform: scale(1.1); /* Agrandir légèrement au survol */
    background-color: #e0dbcb; /* Changer la couleur du fond au survol */
}

.about p{
	text-align: justify;
}

.card {
  display: flex;
  align-items: center; /* Centre verticalement les enfants de .card */
  gap: 1rem;
}

.vcard {
  height: 140px;
  width: auto;
}

.coordonnees {
  display: flex;
  flex-direction: column;
  justify-content: center; /* Centre verticalement le contenu dans .coordonnees */
  height: 100%; /* Prend toute la hauteur disponible dans .card */
}

.rubriques {
    background-color: #f9f9f9;
    padding-left: 15px;
	padding-top:10px;
	margin: auto;
	max-width: 1000px;
	font-family: Heebo, sans-serif;
	font-size: 1.1rem;
	line-height: 1.6;
	color: #606060;
}

.rubriques h2 {
    font-family: 'Asap', sans-serif;
	text-align: center;
	padding-top: 8px;
	font-weight: 500;
	color: #404040;
}

.rubriques h1 {
    font-family: 'Asap', sans-serif;
	text-align: center;
	padding-top: 8px;
	font-weight: 500;
	color: #404040;
}

.rubriques h3 {
	text-align: center;
	font-weight: 500;
	color: #404040;
}

.rubriques p{
	padding-right: 15px;
}

.footer {
    background-color: #f0f0f0; /* Même teinte grise */
    color: #2C3E50; /* Texte blanc */
    text-align: center;
    padding: 10px 0; /* Espacement vertical */
    font-size: 0.9rem; /* Taille de texte légèrement réduite */
    width: 100%;
	font-family: Heebo, sans-serif;
	display: flex;
}

.footer p {
    margin-left: 10px;
}

.contact {
	margin-top: 10px;
}
   
.contact i {
	color: #1abc9c; /* Couleur verte ou autre pour les icônes */
    margin-right: 10px; /* Espacement entre l’icône et le texte */
    font-size: 1.2rem; /* Taille des icônes */
    vertical-align: middle; /* Aligne les icônes avec le texte */
}

.contact p {
    display: flex; /* Alignement des icônes et du texte en ligne */
    align-items: center; /* Centre verticalement l’icône et le texte */
    justify-content: left; /* Centre tout le contenu horizontalement */
    margin: 5px 0;
}

a{
  color: #541529;
  text-decoration: none;
  font-weight: 500;
  font-size: 1rem;
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
  transition: color 0.3s ease;
}

a:hover,
a:focus,
a:active {
  color: #7a1d3b; /* Une teinte plus claire pour signaler l'interaction */
  outline: none;
}

#special {
	text-align: left;
}

.hamburger{
	display: none;
	margin : 0px;
	padding: 10px;
}

#menu-toggle {
	display: inline-block;
	width: 30px;
	height: 30px;
	background-image: url("../pictures/hamburger2.png");
	background-size: cover;
	border: none;
}


/* Menu principal */
.menu {
	display: block;
	margin: 0px;
    width: 100%;
    padding: 10px 0;
	background-color: #f0f0f0;
    border-bottom: 2px solid #ddd;
    font-family: 'Noto Sans Display', sans-serif;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);

}
.localisation{
    display: grid;
	padding-right: 10px;
    grid-template-columns: 1fr 1fr 1fr; /* Deux colonnes égales */
    gap: 20px;
}
.adresse{
    text-align: center;
	border: 0px gray solid;
}

.menu ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: center;
    gap: 15px;
}

.menu ul li a {
    text-decoration: none;
    font-size: 1.1rem;
    font-weight: normal;
    color: #2C3E50;
    transition: color 0.3s ease;
}

.menu ul li a:hover {
    color: #9B2D20;
}

.menu li:not(:first-child) {
    border-left: 1px solid black;
    padding-left: 15px;
}

.adresse p{
	margin: 0px;
}

@media (max-width: 576px) {
    .full-screen {
        background-image: url('../pictures/background2-mobile.webp'); /* version redimensionnée */
    }
   .hamburger {
        display: block;
    }
	
	.card {
		flex-direction: column;
	}
	
	.vcard {
		width: 140px;
		height: auto;
	}	
	
	.menu {
		display: none;
	}
	
	.menu ul {
        flex-direction: column;
        background-color: #f0f0f0;
        position: absolute;
        left: 0;
        width: 100%;
        text-align: center;
        padding: 10px 0;

    }

    .menu ul li {
        padding: 10px 0;
    }
	
	.menu li:not(:first-child) {
    border-left: 0px;
	}
	
	.rubriques h2{
		text-align: center;
	}
	
	.rubriques p{
		text-align: center;
	}
	
	.coordonnees{
		margin: 0 auto;
		width: fit-content;
	}
	
	.localisation {
        grid-template-columns: 1fr;
    }
}


.status {
	max-width: 500px;
	margin: auto;
	padding: 15px;
	border-radius: 8px;
}
.alerte {
	background-color: #fdecea;
}
.valide {
    background-color: #d5f5e3;
}
form {
    max-width: 500px;
    margin: auto;
}
label {
    display: block;
    margin-bottom: 5px;
    font-weight: bold;
}
input, textarea {
    width: 100%;
    padding: 10px;
    margin-bottom: 15px;
    border: 1px solid #ccc;
    border-radius: 5px;
}
.checkbox-container {
    display: flex;
    align-items: center;
    margin-bottom: 15px;
}
.checkbox-container input[type="checkbox"] {
    margin: 0 10px 0 0;
    width: auto;
}
.checkbox-container label {
    margin: 0;
    font-weight: normal;
}