/* =================================
   VARIABLES ET BASE
   ================================= */
:root{
	--color-sapin: #0f3d2e;
	--color-sapin-light: #14543f;
	--text: #1f2937;
	--muted: #6b7280;
	--border: #e5e7eb;
	--bg: #fafbfb;
	--shadow: 0 8px 24px rgba(17,24,39,.06);
	--shadow-lg: 0 20px 40px rgba(17,24,39,.12);
}

html, body{
	background: var(--bg);
	color: var(--text);
	font-size: 18px;
}

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

.hide {
	display: none;
}

[id]{
	scroll-margin-top: 90px;
}

/* =================================
   BOUTONS
   ================================= */
.btn-sapin{
	background: var(--color-sapin);
	border-color: var(--color-sapin);
	color: #fff;
	border-radius: 999px;
	padding: .85rem 1.5rem;
	font-weight: 650;
	font-size: 1.1rem;
	box-shadow: 0 4px 12px rgba(15,61,46,.2);
}
.btn-sapin:hover{
	background: var(--color-sapin-light);
	border-color: var(--color-sapin-light);
	color: #fff;
}

.btn-outline-sapin{
	border-color: var(--color-sapin);
	color: var(--color-sapin);
	border-radius: 999px;
	padding: .85rem 1.5rem;
	font-weight: 650;
	font-size: 1.1rem;
	border-width: 2px;
}
.btn-outline-sapin:hover{
	background: var(--color-sapin);
	color: #fff;
}

.btn-link-sapin{
	border-color: transparent;
	color: var(--color-sapin);
	border-radius: 999px;
	/*padding: .85rem 1.5rem;*/
	font-weight: 650;
	font-size: 1.1rem;
	border-width: 2px;
	padding: .85rem 0;
}
.btn-link-sapin:hover{
	color: #262626;
}

/* =================================
   NAVIGATION
   ================================= */
/* Navigation sticky (apparaît au scroll) */
.sticky-nav{
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 999;
	background: rgba(255,255,255,.94);
	backdrop-filter: blur(10px);
	border-bottom: 1px solid var(--border);
	transform: translateY(-110%);
	transition: transform .25s ease;
}

.sticky-nav.show{
	transform: translateY(0);
}

.sticky-nav .navbar-brand{
	color: var(--color-sapin) !important;
	font-weight: 800;
	letter-spacing: .2px;
	font-size: 1.15rem;
	display: flex;
	align-items: center;
	gap: .6rem;
}

.sticky-nav .navbar-brand img{
	height: 48px;
	width: 48px;
	border-radius: 10px;
	object-fit: cover;
}

.sticky-nav .navbar-brand .logoMark{
	width: 28px;
	height: 28px;
	border-radius: 10px;
	background: rgba(15,61,46,.12);
	border: 1px solid rgba(15,61,46,.18);
	display: flex;
	align-items: center;
	justify-content: center;
	font-weight: 900;
	color: var(--color-sapin);
}

.sticky-nav .nav-link{
	color: var(--text) !important;
	font-weight: 650;
	font-size: 1.05rem;
}

.sticky-nav .nav-link:hover{
	color: var(--color-sapin) !important;
}

/* =================================
   HERO / BANNIERE
   ================================= */
.hero{
	position: relative;
	min-height: 52vh;
	display: flex;
	align-items: center;
	overflow: hidden;
	border-bottom: 1px solid var(--border);
}

.hero::before{
	content: "";
	position: absolute;
	inset: 0;
	background:
			linear-gradient(90deg, rgba(255,255,255,.85) 0%, rgba(255,255,255,.65) 44%, rgba(255,255,255,.25) 72%, rgba(255,255,255,.1) 100%),
			var(--hero-image) center center/cover no-repeat;
	transform: scale(1.02);
}

.hero > .container{
	position: relative;
	z-index: 1;
}

body:not(.is-sticky) .hero h1{
	font-size: clamp(3rem, 4.5vw, 4rem);
	line-height: 1.1;
}

/* Logo hero aligné avec le texte */
.hero-logo-corner{
	position: relative;
	z-index: 3;
	margin-bottom: 1.5rem;
	margin-left: 4rem;
}

.hero-logo-corner img{
	width: 16vh;
}

/* Titre marque "Les clés du Capcir" */
.brand-title{
	font-family: 'Montserrat', sans-serif;
	font-size: 2.75rem;
	font-weight: bold;
	color: #0f3d2e;
	text-shadow: 0 2px 8px rgba(0,0,0,.2);
	/*font-style: italic;*/
	letter-spacing: 0.5px;
}

/* Hero content avec padding left */
.hero-content{
	/*padding-left: 6rem;*/
}

/* Navigation intégrée dans le hero */
.hero-nav{
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	z-index: 2;
	padding: 18px 0;
	background: linear-gradient(180deg, rgba(15,61,46,.6) 0%, transparent 100%);
}

.hero-nav .nav-link{
	color: #e8f4f1;
	font-weight: 700;
	font-size: 1.25rem;
	text-shadow: 0 1px 2px rgba(0,0,0,.3);
}

.hero-nav .nav-link:hover{
	color: #fff;
	text-decoration: underline;
	text-underline-offset: 6px;
}

.hero-nav .brand{
	color: #fff;
	font-weight: 800;
	letter-spacing: .2px;
	text-decoration: none;
	display: flex;
	align-items: center;
	gap: .8rem;
	text-shadow: 0 2px 8px rgba(0,0,0,.4);
}

.hero-nav .brand img{
	width: 50px;
	height: 50px;
	border-radius: 12px;
	object-fit: cover;
	box-shadow: 0 2px 8px rgba(0,0,0,.3);
}

.hero-nav .brand .logoMark{
	width: 28px;
	height: 28px;
	border-radius: 10px;
	background: rgba(255,255,255,.18);
	border: 1px solid rgba(255,255,255,.28);
	display: flex;
	align-items: center;
	justify-content: center;
	font-weight: 900;
}

.hero-nav .btn-ghost{
	border: 2px solid #e8f4f1;
	color: #e8f4f1;
	border-radius: 999px;
	padding: .75rem 1.4rem;
	font-size: 1.25rem;
	font-weight: 700;
	background: rgba(255,255,255,.15);
	backdrop-filter: blur(12px);
	text-shadow: 0 1px 2px rgba(0,0,0,.3);
	text-decoration: none !important;
}

.hero-nav .btn-ghost:hover{
	background: rgba(255,255,255,.25);
	border-color: #e8f4f1;
	color: #e8f4f1;
	text-decoration: none !important;
}

/* Hamburger menu mobile */
.hero-nav .navbar-toggler{
	border: 2px solid #e8f4f1;
	background: rgba(255,255,255,.15);
	backdrop-filter: blur(12px);
	padding: .5rem .75rem;
}

.hero-nav .navbar-toggler-icon{
	background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(232, 244, 241, 1)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
	width: 24px;
	height: 24px;
}

.hero-nav .navbar-collapse{
	background: rgba(15,61,46,.95);
	backdrop-filter: blur(12px);
	margin-top: 1rem;
	border-radius: 12px;
	padding: 0 1rem;
}

.hero-nav .navbar-collapse .nav-link{
	padding: .75rem 1rem;
	text-align: center;
}

/* =================================
   SERVICES
   ================================= */
.service-card{
	background: #fff;
	border-radius: 18px;
	padding: 36px 20px;
	text-align: center;
	box-shadow: var(--shadow);
	border: 1px solid var(--border);
	transition: all 0.3s ease;
	height: 100%;
}

.service-card:hover{
	transform: scale(1.05);
}

.service-box{
	display: flex;
	flex-direction: column;
	gap: 18px;
	align-items: center;
	justify-content: center;
	font-size: 1.05rem;
}

.service-box .service-icon{
	width: 90px;
	height: 90px;
	border-radius: 50%;
	background: linear-gradient(135deg, var(--color-sapin) 0%, var(--color-sapin-light) 100%);
	display: flex;
	align-items: center;
	justify-content: center;
	color: #fff;
	box-shadow: 0 8px 24px rgba(15,61,46,.25);
}

.service-box .service-icon i{
	font-size: 40px;
}

/* =================================
   SECTIONS ET TITRES
   ================================= */
section{
	margin: 50px 0;
}

.section-title{
	font-weight: 850;
	letter-spacing: .2px;
	font-size: 2rem;
	margin-bottom: 0;
	color: var(--color-sapin);
}

/* =================================
   LISTINGS / CARTES BIENS
   ================================= */
.listing{
	border: 1px solid var(--border);
	border-radius: 18px;
	overflow: hidden;
	background: #fff;
	box-shadow: var(--shadow);
	height: 100%;
	display: flex;
	flex-direction: column;
}

.listing img{
	width: 100%;
	height: 220px;
	object-fit: cover;
	transition: transform 0.3s ease;
}

.listing-image-placeholder{
	width: 100%;
	height: 220px;
}

.listing:hover img{
	transform: scale(1.1);
}

.listing .body {
	padding: 22px;
	font-size: 1.05rem;
	display: flex;
	flex-direction: column;
	flex: 1;
	position: relative;
}

.listing .body .d-flex.gap-2 {
	margin-top: auto;
}

.listing .btn-sm{
	padding: .5rem 1rem;
	font-size: 0.95rem;
}

.prix {
	color: var(--color-sapin);
	font-weight: bold;
	font-size: 1.25rem;
}
.prix.prix-right {
	position: absolute;
	right: 22px;
	top: 22px;
}

/* Colonnes Ventes & Locations */
.biens-row{
	--bs-gutter-x: 2rem;
}

.vente-col{
	background: linear-gradient(135deg, var(--color-sapin) 0%, #1a6849 100%);
	border-radius: 24px;
	padding: 40px 36px;
	box-shadow: 0 12px 32px rgba(15,61,46,.25);
}

.vente-col .section-title{
	color: #fff !important;
}

.vente-col .listing{
	border: 1px solid rgba(255,255,255,.15);
	background: rgba(255,255,255,.95);
}

.vente-col .btn-outline-sapin{
	border-color: var(--color-sapin) !important;
	color: var(--color-sapin) !important;
	background: #fff !important;
}

.vente-col .btn-outline-sapin:hover{
	background: var(--color-sapin) !important;
	color: #fff !important;
}

.vente-col .btn-details{
	color: var(--color-sapin) !important;
	background: #fff !important;
}

.vente-col .link-voir-tout{
	color: #fff;
	font-weight: 800;
}

.location-col{
	background: transparent;
	border: 2px solid var(--border);
	border-radius: 24px;
	padding: 40px 36px;
}

.location-col .link-voir-tout{
	color: var(--color-sapin);
	font-weight: 800;
}

/* =================================
   FORMULAIRE DE CONTACT
   ================================= */
.section-contact .form-control,
.section-contact .form-select{
	border-radius: 12px;
	padding: .75rem 1rem;
	font-size: 1.05rem;
	border: 2px solid var(--border);
	transition: all 0.3s ease;
}

.section-contact .form-control:focus,
.section-contact .form-select:focus{
	border-color: var(--color-sapin);
	box-shadow: 0 0 0 3px rgba(15,61,46,.1);
}

.contact-form-container{
	box-shadow: var(--shadow);
	max-width: 900px;
	margin: 0 auto;
}

/* =================================
   FOOTER
   ================================= */
footer{
	background: linear-gradient(135deg, #0f3d2e 0%, #14543f 100%);
	padding: 30px 0 15px 0;
	color: #fff;
}

footer h5,
footer h6{
	color: #fff !important;
	font-weight: 800;
	margin-bottom: 1.5rem;
}

footer .text-muted{
	color: rgba(255,255,255,.8) !important;
}

footer a{
	color: rgba(255,255,255,.9);
	transition: color 0.3s ease;
}

footer a:hover{
	color: #fff;
}

footer .footer-social-icon{
	display: inline-block;
	color: rgba(255,255,255,.8);
	transition: all 0.3s ease;
}

footer .footer-social-icon:hover{
	color: #fff;
	transform: scale(1.1);
}

footer .footer-social-icon i{
	font-size: 32px;
}

footer .footer-contact-item{
	/*display: flex;*/
	align-items: center;
	gap: 10px;
	margin-bottom: 12px;
	color: rgba(255,255,255,.9);
}

footer .footer-contact-item i{
	font-size: 18px;
	width: 24px;
}

footer a.link-underlined {
	margin: 0 10px;
	text-decoration: underline;
	text-underline-offset: 2px;
}

footer .border-top{
	border-top: 1px solid rgba(255,255,255,.2) !important;
	padding-top: 20px;
	margin-top: 20px;
}

.footer-logo{
	height: 70px;
	margin-bottom: 5px;
}

.footer-heading-alt{
	color: var(--color-sapin);
}

/* =================================
   MODAL DÉTAIL BIEN
   ================================= */
.modal-body {
	position: relative;
}

.modal-body .prix.prix-right {
	position: absolute;
	right: 0;
	top: 0;
	padding: 1rem 1.5rem;
	background: linear-gradient(135deg, var(--color-sapin) 0%, #1a6849 100%);
	color: white;
	border-radius: 0 0 0 12px;
	font-size: 1.5rem;
	font-weight: 700;
	box-shadow: 0 4px 12px rgba(15, 61, 46, 0.3);
}

.detail-info-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	gap: 1.5rem;
	padding-top: 1rem;
}

.detail-info-item {
	display: flex;
	align-items: flex-start;
	gap: 1rem;
	padding: 1rem;
	background: var(--bg);
	border-radius: 12px;
	border: 1px solid var(--border);
}

.detail-info-item i {
	font-size: 1.5rem;
	margin-top: 0.25rem;
}

.detail-info-label {
	font-size: 0.85rem;
	color: #6c757d;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	font-weight: 600;
	margin-bottom: 0.25rem;
}

.detail-info-value {
	font-size: 1.1rem;
	font-weight: 600;
	color: #212529;
}

.detail-description {
	padding: 1.5rem;
	background: var(--bg);
	border-radius: 12px;
	border: 1px solid var(--border);
}

.detail-description h6 {
	text-transform: uppercase;
	letter-spacing: 0.5px;
	font-weight: 600;
	font-size: 0.85rem;
}

.detail-description p {
	margin-bottom: 0;
	line-height: 1.7;
	color: #495057;
}

/* =================================
   RESPONSIVE / MEDIA QUERIES
   ================================= */
@media (max-width: 991.98px) {
	/* Hero mobile */
	.hero-logo-corner{
		top: 20px;
		left: 20px;
	}
	/* Logo hero en position absolute */
	.hero-logo-corner{
		position: absolute;
		top: 40px;
		left: 40px;
		z-index: 3;
		margin-left: 0;
	}
	.hero-logo-corner img{
		width: 80px;
		height: 80px;
	}


	.hero-content{
		padding-left: 0;
		padding-top: 2rem;
	}

	.brand-title{
		font-size: 1.75rem;
	}

	body:not(.is-sticky) .hero h1{
		font-size: clamp(1.75rem, 7vw, 2.5rem);
	}

	/* Sections spacing */
	section{
		margin: 20px 0;
	}
}

@media (max-width: 767.98px) {
	/* Footer mobile - centrer tout */
	footer .row > div{
		text-align: center !important;
	}

	footer .d-flex.flex-column{
		align-items: center;
	}

	.footer-logo{
		height: 60px;
	}

	/* Copyright et liens sur mobile */
	footer .border-top .d-flex{
		flex-direction: column !important;
		align-items: center !important;
		justify-content: center !important;
		text-align: center !important;
		gap: 0 !important;
	}

	/* Boutons hero - meilleure disposition mobile */
	.hero .d-flex.flex-wrap{
		justify-content: center;
	}

	.btn-sapin,
	.btn-outline-sapin{
		font-size: 1rem;
		padding: .75rem 1.25rem;
	}

	/* Services - espacement réduit */
	.service-card{
		padding: 24px 16px;
	}

	.service-box .service-icon{
		width: 70px;
		height: 70px;
	}

	.service-box .service-icon i{
		font-size: 32px;
	}

	.vente-col, .location-col {
		padding: 20px 20px;
	}

	.hero-content {
		text-align: center;
	}
}

@media (max-width: 575.98px) {
	/* Hero très petit mobile */
	.hero{
		min-height: 60vh;
	}

	.brand-title{
		font-size: 1.5rem;
	}

	/* Navigation hero - ajustements */
	.hero-nav .btn-ghost{
		padding: .6rem 1rem;
		font-size: 1rem;
	}

	/* Textes plus petits */
	html, body{
		font-size: 16px;
	}

	.section-title{
		font-size: 1.5rem;
	}
}

/* =================================
   ADMINISTRATION
   ================================= */

/* Menu admin uniquement */
.navbar-dark {
	background: var(--color-sapin);
}

.btn-sapin {
	background: var(--color-sapin);
	color: white;
	border: none;
}

.btn-sapin:hover {
	background: var(--color-sapin-light);
	color: white;
}

.stat-card {
	border-left: 4px solid var(--color-sapin);
}

.bien-card {
	transition: transform 0.2s;
	cursor: pointer;
}

.bien-card:hover {
	transform: translateY(-2px);
	box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

.bien-image {
	width: 100%;
	height: 150px;
	object-fit: cover;
	border-radius: 8px 8px 0 0;
}

.badge-vente {
	background: #0d6efd;
}

.badge-location {
	background: #198754;
}

.image-preview {
	position: relative;
	display: inline-block;
	margin: 5px;
}

.image-preview img {
	width: 100px;
	height: 100px;
	object-fit: cover;
	border-radius: 4px;
}

.image-preview .btn-remove {
	position: absolute;
	top: -8px;
	right: -8px;
	width: 24px;
	height: 24px;
	padding: 0;
	border-radius: 50%;
}

/* Zone de drag & drop pour les images */
.image-dropzone {
	border: 2px dashed #ccc;
	border-radius: 8px;
	padding: 2rem;
	text-align: center;
	background: #f8f9fa;
	transition: all 0.3s ease;
	cursor: pointer;
}

.image-dropzone:hover {
	border-color: #0d6efd;
	background: #e7f1ff;
}

.image-dropzone.dragover {
	border-color: #0d6efd;
	background: #e7f1ff;
	transform: scale(1.02);
}

/* Container pour l'aperçu des images */
.image-preview-container {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-top: 1rem;
}

.image-preview-container .preview-item {
	position: relative;
	width: 120px;
	height: 120px;
	border: 2px solid #dee2e6;
	border-radius: 8px;
	overflow: hidden;
	background: #fff;
}

.image-preview-container .preview-item img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.image-preview-container .preview-item .remove-preview {
	position: absolute;
	top: 5px;
	right: 5px;
	width: 28px;
	height: 28px;
	padding: 0;
	border-radius: 50%;
	background: rgba(220, 53, 69, 0.9);
	border: 2px solid white;
	color: white;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	transition: all 0.2s;
}

.image-preview-container .preview-item .remove-preview:hover {
	background: #dc3545;
	transform: scale(1.1);
}
/* =================================
   MODAL DÉTAILS BIEN
   ================================= */
#modalDetailBien .carousel-item img {
	background: #000;
}

#modalDetailBien .carousel-control-prev,
#modalDetailBien .carousel-control-next {
	background: rgba(0,0,0,0.3);
	width: 50px;
	height: 50px;
	border-radius: 50%;
	top: 50%;
	transform: translateY(-50%);
}

.thumbnails-container {
	display: flex;
	gap: 10px;
	overflow-x: auto;
	padding: 10px 0;
}

.thumbnails-container .thumbnail {
	flex-shrink: 0;
	width: 100px;
	height: 80px;
	border: 3px solid transparent;
	border-radius: 8px;
	overflow: hidden;
	cursor: pointer;
	transition: all 0.3s ease;
}

.thumbnails-container .thumbnail:hover {
	border-color: var(--color-sapin-light);
	transform: scale(1.05);
}

.thumbnails-container .thumbnail.active {
	border-color: var(--color-sapin);
}

.thumbnails-container .thumbnail img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Bien inactif dans la modal */
/* Styles génériques pour les biens inactifs */
.bien-inactif {
	background: repeating-linear-gradient(
		45deg,
		#ffffff,
		#ffffff 10px,
		#f0f0f0 10px,
		#f0f0f0 20px
	);
}

.bien-inactif .modal-header,
.bien-inactif .modal-body,
.bien-inactif .modal-footer,
.bien-inactif .card-body {
	background: transparent;
}

.bien-inactif img {
	filter: grayscale(50%);
	opacity: 0.7;
}

/* Menu sticky toujours visible sur pages autres que index */
.sticky-nav.always-visible {
	opacity: 1 !important;
	transform: translateY(0) !important;
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

/* Hero pages vente/location */
.page-hero {
	padding: 50px 0 40px;
	position: relative;
	overflow: hidden;
	background-image: url('images/home.webp');
	background-size: cover;
	background-position: center 15%;
	/*background-attachment: fixed;*/
}

.page-hero::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: rgba(15, 61, 46, 0.75);
	z-index: 0;
}

.page-hero-vente::before {
	background: linear-gradient(135deg, rgba(15, 61, 46, 0.8) 0%, rgba(20, 84, 63, 0.7) 100%);
}

.page-hero-location::before {
	background: linear-gradient(135deg, rgba(20, 84, 63, 0.8) 0%, rgba(15, 61, 46, 0.7) 100%);
}

.page-hero > .container {
	position: relative;
	z-index: 1;
}

.page-hero-icon {
	font-size: 3rem;
	color: rgba(255, 255, 255, 0.9);
	animation: fadeInDown 0.6s ease-out;
}

.page-hero-title {
	font-size: 2.5rem;
	font-weight: 700;
	color: #fff;
	margin-bottom: 0;
	animation: fadeInUp 0.6s ease-out;
	text-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
}

@keyframes fadeInDown {
	from {
		opacity: 0;
		transform: translateY(-20px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

@keyframes fadeInUp {
	from {
		opacity: 0;
		transform: translateY(20px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

@keyframes fadeIn {
	from {
		opacity: 0;
	}
	to {
		opacity: 1;
	}
}

@media (max-width: 768px) {
	.page-hero {
		padding: 40px 0 30px;
	}

	.page-hero-icon {
		font-size: 2.5rem;
	}

	.page-hero-title {
		font-size: 1.75rem;
	}
}

/* Titre sur l'image des listings */
.listing-image-container {
	position: relative;
	overflow: hidden;
}

.listing-image-overlay {
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	background: linear-gradient(to top, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0.5) 60%, transparent 100%);
	padding: 20px 15px 15px;
}

.listing-image-title {
	color: white;
	font-weight: 700;
	font-size: 1.4rem;
	margin: 0;
	text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
	line-height: 1.3;
}

.listing:hover .listing-image-overlay {
	background: linear-gradient(to top, rgba(15, 61, 46, 0.9) 0%, rgba(15, 61, 46, 0.6) 60%, transparent 100%);
}