/*Couleurs du site*/
:root {
	--primary-green : #4a6345 ; /*Vert foncé*/
	--light-green : #D4DFC0 ; /*Vert clair*/
	--dark-grey : #333 ; /*Gris foncé*/
	--bg-grey : #f9f9f9 ; /*Fond gris très clair*/
}

* {
	margin : 0 ;
	padding : 0 ;
	box-sizing : border-box ;
}

body {
	font-family : 'Montserrat', sans-serif ;
	width : 100% ;
	overflow-x : hidden ;
	color : black ;
}

/*Pour les liens*/
a {
	text-decoration : none ;
	color : black ;
}

/*Pour le Header et le Menu*/
header {
	background-color : var(--light-green) ;
	height : 120px ;
	width : 100% ;
	display : flex ;
	justify-content : center ;
	align-items : center ;
	position : relative ;
	padding : 0 20px ;
}

.header-logo {
	position : absolute ;
	left : 20px ;
	top : 50% ;
	transform : translateY(-50%);
	z-index : 10 ;
}

.header-logo img {
	display : block ;
	width : 100px ;
	height : 100px ;
	object-fit : contain ;
}

nav ul {
	list-style : none ;
	display : flex ;
	gap : 40px ;
	margin-left : 250px ;
}

nav ul li a {
	font-weight : 700 ;
	font-size : 16px ;
	text-transform : uppercase ;
	transition : color 0.3s ;
}

nav ul li a:hover {
	color : var(--primary-green);
	text-decoration : underline ;
}

/*Mise en page communes aux pages du site*/
/*Conteneurs*/
.lo-page-conteneur,
.fa-page-conteneur,
.env-page-conteneur,
.ct-page-conteneur {
	width : 100%;
	max-width : 1200px ;
	margin : 40px auto ;
	padding : 0 20px ;
	box-sizing : border-box ;
}

/*Titres*/
.lo-page-titre,
.fa-page-titre,
.env-page-titre,
.ct-page-titre {
	text-align : center ;
	color : var(--primary-green);
	font-size : 2.5rem ;
	margin-bottom : 50px ;
	text-transform : uppercase ;
	display : block ;
	width : 100% ;
	position : relative ;
}

/*Trait décoratif sous les titres*/
.lo-page-titre::after,
.fa-page-titre::after,
.env-page-titre::after,
.ct-page-titre::after {
	content : "" ;
	display : block ;
	width : 90px ;
	height : 3px ;
	background-color : var(--light-green) ;
	margin : 15px auto 0 auto  ;
}

/*Sous-titres*/
.ct-form-section h2,
.env-info-wrapper h2,
.fa-norms-conteneur h2,
.fa-table-section h2,
.lo-description-detaillee h2 {
	color : var(--primary-green) ;
	margin-bottom : 20px ;
	font-size : 1.8rem ;
}

/*Pour la page "Accueil"*/
.ac-hero-section {
	height : 70vh ;
	width : 100% ;
	background-image : url('../Images/logement.webp') ;
	background-size : cover ;
	background-position : center ;
	background-repeat : no-repeat ;
	display : flex ;
	justify-content : center ;
	align-items : flex-start ;
	padding-top : 50px ;
}

.ac-hero-contenu h1 {
	color : black ;
	font-size : 3rem ;
	text-transform : uppercase ;
	text-align : center ;
	font-weight : 700 ;
	text-shadow : 0px 4px 10px rgba(0,0,0,0.6) ;
}

.ac-intro-section {
	padding : 60px 20px ;
	background-color : white ;
}

.ac-intro-conteneur {
	max-width : 1100px ;
	margin : 0 auto ;
	display : grid ;
	grid-template-columns : 1fr 1fr ;
	gap : 60px ;
}

.ac-intro-col h2 {
	color : var(--primary-green) ;
	margin-bottom : 20px ;
	font-size : 1.5rem ;
	border-bottom : 3px solid var(--light-green) ;
	display : inline-block ;
	padding-bottom : 5px ;
}

.ac-intro-col {
	font-size : 1.1rem ;
	line-height : 1.8 ;
	color : var(--dark-grey) ;
	text-align : justify ;
}

/*Pour la page "Logement"*/
.lo-top-presentation {
	display : grid ;
	grid-template-columns : 60% 35% ;
	justify-content : space-between ;
	margin-bottom : 80px ;
}

/*Carrousel*/
.lo-css-slider {
	width : 100% ;
	height : 400px ;
	border-radius : 15px ;
	overflow : hidden ;
	position : relative ;
	box-shadow : 0 10px 20px rgba(0,0,0,0.1) ;
}

.lo-css-slider input { 
	display : none ;
}

.lo-slides-track {
	width : 700% ; /*700% car 7 images*/
	height : 100% ;
	display : flex ;
	transition : margin-left 0.6s ease-in-out ;
}

.lo-slide {
	width : 14.28% ; /*100% divisé par 7 car 7 images*/
	position : relative ;
	height : 100% ;
}

.lo-slide img {
	width : 100% ;
	height : 100% ;
	object-fit : cover ;
	display : block ;
}

.lo-slide-caption {
	position : absolute ;
	bottom : 20px ;
	left : 20px ;
	background : rgba(255, 255, 255, 0.9) ;
	padding : 8px 15px ;
	border-radius : 20px ;
	font-size : 0.9rem ;
	font-weight : bold ;
	color : var(--primary-green) ;
}

#radio1:checked ~ .lo-slides-track { margin-left: 0; }
#radio2:checked ~ .lo-slides-track { margin-left: -100%; }
#radio3:checked ~ .lo-slides-track { margin-left: -200%; }
#radio4:checked ~ .lo-slides-track { margin-left: -300%; }
#radio5:checked ~ .lo-slides-track { margin-left: -400%; }
#radio6:checked ~ .lo-slides-track { margin-left: -500%; }
#radio7:checked ~ .lo-slides-track { margin-left: -600%; }

.lo-navigation-points {
	position : absolute ;
	bottom : 15px ;
	left : 50% ;
	transform : translateX(-50%) ;
	display : flex ;
	gap : 10px ;
}

.lo-nav-btn {
	width : 12px ;
	height : 12px ;
	border : 2px solid #fff ;
	border-radius : 50% ;
	cursor : pointer ;
	transition : 0.3s ;
	background : transparent ;
	box-shadow : 0 2px 5px rgba(0,0,0,0.3) ;
}

.lo-nav-btn:hover { 
	background : rgba(255,255,255,0.5) ;
}

#radio1:checked ~ .lo-navigation-points .lo-nav-btn[for="radio1"],
#radio2:checked ~ .lo-navigation-points .lo-nav-btn[for="radio2"],
#radio3:checked ~ .lo-navigation-points .lo-nav-btn[for="radio3"],
#radio4:checked ~ .lo-navigation-points .lo-nav-btn[for="radio4"],
#radio5:checked ~ .lo-navigation-points .lo-nav-btn[for="radio5"],
#radio6:checked ~ .lo-navigation-points .lo-nav-btn[for="radio6"],
#radio7:checked ~ .lo-navigation-points .lo-nav-btn[for="radio7"] {
	border-color : var(--primary-green) ;
	background-color : var(--primary-green) ;
}

/*Blocs détails*/
.lo-caracteristique-block {
	background-color : var(--bg-grey) ;
	padding : 30px ;
	border-radius : 15px ;
	border-left : 10px solid var(--light-green) ;
	height : fit-content ;
}

.lo-caracteristique-liste { 
	list-style : none ;
}

.lo-caracteristique-liste li {
	padding : 12px 0 ;
	border-bottom : 1px solid #eee ;
	font-size : 1.1rem ;
	display : flex ;
	justify-content : space-between ;
}

.lo-prix {
	margin-top : 30px ;
	background-color : var(--primary-green) ;
	color : white ;
	padding : 20px ;
	text-align : center ;
	border-radius : 8px ;
}

.lo-prix-valeur {
	display : block ;
	font-size : 2rem ;
	font-weight : bold ;
}

.lo-description-detaillee { 
	margin-top : 50px ;
}

.lo-description-detaillee h2 { 
	text-align : center ;
	width : 100% ;
	margin-bottom : 30px ;
}

.lo-piece-carte {
	background : white ;
	padding : 25px ;
	border : 1px solid #eee ;
	border-radius : 8px ;
	box-shadow : 0 2px 5px rgba(0,0,0,0.05) ;
	transition : transform 0.3s, box-shadow 0.3s ;
}

.lo-piece-carte:hover {
	transform : translateY(-5px) ;
	box-shadow : 0 10px 15px rgba(0,0,0,0.1) ;
}

.lo-piece-carte h3 {
	margin-bottom : 15px ;
	font-size : 1.3rem ;
	border-bottom : 2px solid var(--light-green) ;
	display : inline-block ;
	padding-bottom : 5px ;
}

.lo-piece-carte p {
	font-size : 1rem ;
	line-height : 1.6 ;
	color : #444 ;
	text-align : justify ;
}

/*Pour la page "Focus Accessibilité"*/
.fa-plan-section {
	display : grid ;
	grid-template-columns : 1fr 1fr ;
	gap : 50px ;
	margin-bottom : 80px ;
	align-items : center ;
}

.fa-plan-conteneur {
	background : white ;
	padding : 10px ;
	border : 1px solid #eee ;
	box-shadow : 0 5px 15px rgba(0,0,0,0.05) ;
	border-radius : 8px ;
}

.fa-plan-conteneur img {
	width : 100% ;
	height : auto ;
	display : block ;
	filter : contrast(1.1) ;
}

.fa-plan-description {
	text-align : center ;
	font-size : 0.85rem ;
	color : #888 ;
	margin-top : 10px ;
	font-style : italic ;
}

.fa-intro-normes {
	margin-bottom : 25px ;
	color : #555 ;
	font-size : 1.1rem ;
}

.fa-normes-liste { 
	list-style : none ;
}

.fa-normes-liste li {
	margin-bottom : 20px ;
	padding-left : 35px ;
	position : relative ;
	line-height : 1.5 ;
}

.fa-normes-liste li::before {
	content : "✔" ;
	position : absolute ;
	left : 0 ;
	top : 0 ;
	color : white ;
	background-color : var(--primary-green) ;
	width : 25px ;
	height : 25px ;
	border-radius : 50% ;
	text-align : center ;
	line-height : 25px ;
	font-size : 0.8rem ;
}

.fa-tableau-section h2 {
	border-left : 5px solid var(--light-green) ;
	padding-left : 15px ;
}

.fa-pmr-tableau {
	width : 100% ;
	background-color : white ;
	box-shadow : 0 0 20px rgba(0, 0, 0, 0.05) ;
	font-size : 1rem ;
}

.fa-pmr-tableau thead tr {
	background-color : var(--primary-green) ;
	color : white ;
	text-align : left ;
}

.fa-pmr-tableau th, .fa-pmr-tableau td { 
	padding : 15px 20px ;
}

.fa-pmr-tableau tbody tr { 
	border-bottom : 1px solid #dddddd ;
}

.fa-pmr-tableau tbody tr:nth-of-type(even) { 
	background-color : #f3f3f3 ;
}

.fa-pmr-tableau tbody tr:hover { 
	background-color : #e8f5e9 ;
}

.fa-status-ok {
	color : #2e7d32 ;
	background-color : #e8f5e9 ;
	padding : 5px 10px ;
	border-radius : 15px ;
	font-size : 0.85rem ;
	font-weight : bold ;
	white-space : nowrap ;
}

.fa-tableau-note {
	font-size : 0.85rem ;
	color : #777 ;
	margin-top : 10px ;
	text-align : right ;
}

/*Pour la page "Environnement"*/
.env-top-section {
	display : grid ;
	grid-template-columns : 1fr 1fr ;
	gap : 50px ;
	margin-bottom : 80px ;
	align-items : start ;
}

.env-map-wrapper {
	background : white ;
	padding : 10px ;
	border : 1px solid #eee ;
	border-radius : 10px ;
	box-shadow : 0 5px 15px rgba(0,0,0,0.08) ;
	text-align : center ;
}

.env-map-wrapper img {
	width : 100% ;
	height : auto ;
	border-radius : 5px ;
	display : block ;
}

.env-map-legende {
	display : block ;
	margin-top : 10px ;
	font-size : 0.9rem ;
	color : #666 ;
	font-style : italic ;
}

.env-intro {
	font-size : 1rem ;
	color : var(--dark-grey) ;
	margin-bottom : 25px ;
	line-height : 1.6 ;
}

.env-gallerie-section h2 {
	text-align : center ;
	margin-bottom : 40px ;
	color : var(--primary-green) ;
	font-size : 1.8rem ;
}

.env-gallerie-grid {
	display : grid ;
	grid-template-columns : repeat(3, 1fr) ;
	gap : 30px ;
}

.env-gallerie-item { 
	text-align : center ;
}

.env-img-conteneur {
	width : 100% ;
	height : 250px ;
	overflow : hidden ;
	border-radius : 10px ;
	box-shadow : 0 5px 10px rgba(0,0,0,0.1) ;
	margin-bottom : 15px ;
	transition : transform 0.3s ease ;
}

.env-img-conteneur:hover { 
	transform : translateY(-5px) ;
}

.env-img-conteneur img {
	width : 100% ;
	height : 100% ;
	object-fit : cover ;
}

.env-description {
	font-size : 1rem ;
	color : #555 ;
	font-weight : 600 ;
}

/*Pour la page "Contact"*/
.ct-contenu-grid {
	display : grid ;
	grid-template-columns : 1.8fr 1fr ;
	gap : 50px ;
	align-items : start ;
}

.ct-form-section {
	background : white ;
	padding : 30px ;
	border-radius : 10px ;
	box-shadow : 0 5px 20px rgba(0,0,0,0.05) ;
	border : 1px solid #eee ;
}

.ct-form-section h2 {
	border-bottom : 2px solid var(--light-green) ;
	display : inline-block ;
	padding-bottom : 5px ;
}

.ct-form-ligne {
	display : grid ;
	grid-template-columns : 1fr 1fr ;
	gap : 20px ;
}

.ct-form-groupe { 
	margin-bottom : 20px ;
}

.ct-form-groupe label {
	display : block ;
	margin-bottom : 8px ;
	font-weight : bold ;
	color : var(--dark-grey) ;
}

.ct-form-groupe input,
.ct-form-groupe textarea {
	width : 100% ;
	padding : 12px ;
	border : 1px solid #ddd ;
	border-radius : 5px ;
	font-family : 'Montserrat', sans-serif ;
	font-size : 1rem ;
	transition : border-color 0.3s ;
}

.ct-form-groupe input:focus,
.ct-form-groupe textarea:focus {
	border-color : var(--primary-green) ;
	outline : none ;
	background-color : #fcfcfc ;
}

.ct-envoyer-btn {
	background-color : var(--primary-green) ;
	color : white ;
	border : none ;
	padding : 15px 30px ;
	font-size : 1rem ;
	font-weight : bold ;
	text-transform : uppercase ;
	border-radius : 5px ;
	cursor : pointer ;
	width : 100% ;
	transition : background 0.3s ;
}

.ct-envoyer-btn:hover { 
	background-color : #3b5037 ;
}

.ct-info-section {
	display : flex ;
	flex-direction : column ;
	gap : 30px ;
}

.ct-carte-proprietaire {
	background-color : var(--bg-grey) ;
	padding : 30px ;
	border-radius : 10px ;
	border-left : 5px solid var(--primary-green) ;
}

.ct-carte-proprietaire h3 {
	margin-bottom : 20px ;
	color : var(--dark-grey) ;
	font-size : 1.2rem ;
}

.ct-proprietaire-nom {
	font-size : 1.5rem ;
	font-weight : bold ;
	color : var(--primary-green) ;
	margin-bottom : 15px ;
}

.ct-contact-item {
	font-size : 1.1rem ;
	margin-bottom : 10px ;
	display : flex ;
	align-items : center ;
	gap : 10px ;
}

.ct-redirection-block {
	background-color : var(--light-green) ;
	padding : 30px ;
	border-radius : 10px ;
	text-align : center ;
}

.ct-redirection-block p {
	margin-bottom : 15px ;
	font-weight : bold ;
	color : #333 ;
}

.ct-redirection-btn {
	display : inline-block ;
	background-color : white ;
	color : var(--primary-green) ;
	padding : 15px 20px ;
	border-radius : 5px ;
	border : 2px solid white ;
	transition : 0.3s ;
	line-height : 1.4 ;
	font-weight : bold ;
}

.ct-redirection-btn:hover {
	background-color : transparent ;
	color : black ;
	border-color : black ;
}

/*Pour le Footer*/
footer {
	background-color : var(--light-green) ;
	color : black ;
	text-align : center ;
	padding : 50px 20px 20px 20px ;
	margin-top : 50px ;
}

.cta-texte {
	font-size : 1.2rem ;
	font-weight : 700 ;
}

.footer-cta {
	display : flex ;
	flex-direction : column ;
	align-items : center ;
	gap : 20px ;
}

.btn-noir {
	display : inline-block ;
	background-color : black ;
	color : white ;
	text-decoration : none ;
	padding : 15px 20px ;
	border-radius : 5px ;
	font-weight : 700 ;
	text-transform : uppercase ;
	border : 2px solid black ;
	transition : 0.3s ;
}

.btn-noir:hover {
	background-color : white ;
	color : black ;
	cursor : pointer ;
}

.footer-credits {
	margin-top : 40px ;
	font-size : 0.8rem ;
	opacity : 0.8 ;
}