/*
 Theme Name:   quartz-theme
 Theme URI:
 Description:  Themes Wp for Quartz
 Author:       kps.agency.ia@gmail.com
 Author URI:   https://green-ferret-823398.hostingersite.com
 Template:     hello-elementor
 Version:      1.0
 License:      GNU General Public License v2 or later
 License URI:  http://www.gnu.org/licenses/gpl-2.0.html
*/

/* =========================================================
   GLOBAL
========================================================= */

html {
	scroll-behavior: smooth;
}


/* =========================================================
   BLUSH CAR — POPUP CF7
========================================================= */

/*
 * IMPORTANT :
 * La popup est cachée dès le premier rendu de la page.
 * Cela évite le flash au chargement.
 */

#blushcar-cf7-popup {
	position: fixed !important;
	inset: 0 !important;

	z-index: 999999 !important;

	display: flex !important;
	align-items: center;
	justify-content: center;

	visibility: hidden !important;
	opacity: 0 !important;
	pointer-events: none !important;

	transition:
		opacity 0.25s ease,
		visibility 0.25s ease;
}


/*
 * POPUP OUVERTE
 */

#blushcar-cf7-popup.is-open {
	visibility: visible !important;
	opacity: 1 !important;
	pointer-events: auto !important;
}


/* =========================================================
   OVERLAY
========================================================= */

.blushcar-popup-overlay {
	position: absolute;

	inset: 0;

	width: 100%;
	height: 100%;

	background: rgba(0, 0, 0, 0.65);

	cursor: pointer;
}


/* =========================================================
   BOÎTE DU POPUP
========================================================= */

.blushcar-popup-box {
	position: relative;

	z-index: 2;

	width: 450px;
	max-width: calc(100% - 30px);
	max-height: 90vh;

	overflow-y: auto;

	box-sizing: border-box;

	padding: 48px 44px;

	background: #ffffff;

	border-radius: 18px;

	box-shadow:
		0 20px 60px rgba(0, 0, 0, 0.20);
}


/* =========================================================
   BOUTON FERMER
========================================================= */

.blushcar-popup-close {
	position: absolute !important;

	top: 16px !important;
	right: 18px !important;

	width: 38px !important;
	height: 38px !important;

	margin: 0 !important;
	padding: 0 !important;

	border: 0 !important;
	border-radius: 50% !important;

	background: #ffffff !important;
	color: #222222 !important;

	font-family: Arial, sans-serif !important;
	font-size: 32px !important;
	font-weight: 300 !important;
	line-height: 38px !important;

	cursor: pointer;

	display: flex !important;
	align-items: center;
	justify-content: center;

	box-shadow: none !important;

	transition:
		background-color 0.2s ease,
		color 0.2s ease,
		transform 0.2s ease;
}

.blushcar-popup-close:hover,
.blushcar-popup-close:focus {
	background: #f5f5f5 !important;
	color: #000000 !important;

	transform: rotate(90deg);

	outline: none !important;
}


/* =========================================================
   TITRE
========================================================= */

.blushcar-popup-header {
	margin: 0 0 30px;

	padding-right: 35px;
}

.blushcar-popup-header h2 {
	margin: 0 !important;
	padding: 0 !important;

	color: #9a8977 !important;

	font-size: 32px !important;
	line-height: 1.15 !important;
	font-weight: 600 !important;
}


/* =========================================================
   TEXTE ÉVENTUEL
========================================================= */

.blushcar-popup-header p {
	margin: 12px 0 0;

	color: #666666;

	font-size: 15px;
	line-height: 1.5;
}


/* =========================================================
   CONTACT FORM 7
========================================================= */

.blushcar-popup-form {
	width: 100%;
}

.blushcar-popup-form form {
	width: 100%;
	margin: 0;
	padding: 0;
}

.blushcar-popup-form label {
	display: block;

	width: 100%;

	margin: 0;
	padding: 0;
}


/* =========================================================
   CHAMPS CF7
========================================================= */

.blushcar-popup-form input[type="text"],
.blushcar-popup-form input[type="email"],
.blushcar-popup-form input[type="tel"],
.blushcar-popup-form input[type="url"],
.blushcar-popup-form input[type="number"],
.blushcar-popup-form textarea,
.blushcar-popup-form select {
	display: block;

	width: 100% !important;

	box-sizing: border-box;

	margin: 0 0 14px !important;
	padding: 16px 18px !important;

	min-height: 54px;

	border: 1px solid #d8d8d8 !important;
	border-radius: 10px !important;

	background: #ffffff !important;
	color: #222222 !important;

	font-family: inherit;
	font-size: 16px;

	outline: none;

	box-shadow: none;

	transition:
		border-color 0.2s ease,
		box-shadow 0.2s ease,
		background-color 0.2s ease;
}


/* =========================================================
   PLACEHOLDER
========================================================= */

.blushcar-popup-form input::placeholder,
.blushcar-popup-form textarea::placeholder {
	color: #333333;

	opacity: 1;
}


/* =========================================================
   FOCUS
========================================================= */

.blushcar-popup-form input:focus,
.blushcar-popup-form textarea:focus,
.blushcar-popup-form select:focus {
	border-color: #bda17e !important;

	outline: none !important;

	box-shadow:
		0 0 0 3px rgba(189, 161, 126, 0.12) !important;
}


/* =========================================================
   TEXTAREA
========================================================= */

.blushcar-popup-form textarea {
	min-height: 120px !important;

	resize: vertical;
}


/* =========================================================
   BOUTON ENVOYER
========================================================= */

.blushcar-popup-form input[type="submit"] {
	display: block;

	width: 100% !important;

	min-height: 58px;

	margin: 4px 0 0 !important;
	padding: 15px 25px !important;

	border: 0 !important;
	border-radius: 30px !important;

	background: #d1a875 !important;
	color: #ffffff !important;

	font-family: inherit;
	font-size: 16px;
	font-weight: 700;

	line-height: 1;

	cursor: pointer;

	box-shadow: none !important;

	transition:
		background-color 0.2s ease,
		transform 0.2s ease;
}

.blushcar-popup-form input[type="submit"]:hover {
	background: #bd9362 !important;
	color: #ffffff !important;

	transform: translateY(-1px);
}

.blushcar-popup-form input[type="submit"]:focus {
	background: #d1a875 !important;
	color: #ffffff !important;

	outline: none !important;
}


/* =========================================================
   CF7 — MESSAGES
========================================================= */

.blushcar-popup-form .wpcf7-response-output {
	margin: 15px 0 0 !important;
	padding: 12px !important;

	border-radius: 8px !important;

	font-size: 14px;
	line-height: 1.4;
}


/* =========================================================
   CF7 — ERREURS
========================================================= */

.blushcar-popup-form .wpcf7-not-valid-tip {
	display: block;

	margin-top: -8px;
	margin-bottom: 10px;

	color: #c0392b;

	font-size: 13px;
	line-height: 1.4;
}


/* =========================================================
   CHECKBOX CF7
========================================================= */

.blushcar-popup-form .wpcf7-list-item {
	margin: 0 0 14px;
}

.blushcar-popup-form input[type="checkbox"] {
	width: auto !important;

	min-height: auto;

	margin-right: 6px;
}


/* =========================================================
   LIENS
========================================================= */

.blushcar-popup-form a {
	color: #9a8977;

	text-decoration: underline;
}

.blushcar-popup-form a:hover {
	color: #7d6c5b;
}


/* =========================================================
   SCROLL DE LA POPUP
========================================================= */

.blushcar-popup-box {
	scrollbar-width: thin;

	scrollbar-color:
		#d1a875
		transparent;
}


/* =========================================================
   BLOQUER LE SCROLL DE LA PAGE
========================================================= */

body.blushcar-popup-open {
	overflow: hidden !important;
}


/* =========================================================
   BLOG ARCHIVE
========================================================= */

.blog-archive {
	width: 100%;
	max-width: 960px;

	margin: 0 auto;

	padding: 80px 20px 100px;

	box-sizing: border-box;
}


/* =========================================================
   TITRE DE L'ARCHIVE
========================================================= */

.blog-page-header {
	margin: 0 0 45px;

	display: none;
}

.blog-page-header .entry-title {
	margin: 0;

	font-size: 36px;
	line-height: 1.2;
	font-weight: 700;

	color: #17252a;
}

.blog-page-header .archive-description {
	margin-top: 15px;

	font-size: 16px;
	line-height: 1.7;

	color: #555;
}


/* =========================================================
   GRILLE
========================================================= */

.blog-grid {
	display: grid;

	grid-template-columns:
		repeat(2, minmax(0, 1fr));

	column-gap: 28px;
	row-gap: 58px;

	width: 100%;
}


/* =========================================================
   CARTE ARTICLE
========================================================= */

.blog-card {
	display: flex;

	flex-direction: column;

	min-width: 0;

	margin: 0;
	padding: 0;
}


/* =========================================================
   IMAGE
========================================================= */

.blog-card-image {
	display: block;

	width: 100%;

	margin: 0 0 10px;
	padding: 0;

	overflow: hidden;

	border-radius: 16px;

	line-height: 0;
}

.blog-card-image img {
	display: block;

	width: 100%;
	height: 250px;

	margin: 0;
	padding: 0;

	object-fit: cover;

	border-radius: 16px;

	transition: transform 0.35s ease;
}

.blog-card-image:hover img {
	transform: scale(1.03);
}


/* =========================================================
   CATÉGORIE
========================================================= */

.blog-card-category {
	margin: 0 0 5px;
	padding: 0;

	font-size: 13px;
	line-height: 1.4;
	font-weight: 400;

	color: #26383d;
}


/* =========================================================
   TITRE ARTICLE
========================================================= */

.blog-card-title {
	margin: 0 0 7px;
	padding: 0;

	font-size: 20px;
	line-height: 1.35;
	font-weight: 700;

	color: #17252a;
}

.blog-card-title a {
	color: inherit;

	text-decoration: none;

	font-size: 25px;
	font-weight: 700;

	transition: opacity 0.2s ease;
}

.blog-card-title a:hover {
	opacity: 0.7;
}


/* =========================================================
   EXCERPT
========================================================= */

.blog-card-excerpt {
	margin: 0;
	padding: 0;

	font-size: 14px;
	line-height: 1.7;
	font-weight: 400;

	color: #333;
}

.blog-card-excerpt p {
	margin: 0;
	padding: 0;

	font-size: 18px;
}

.blog-card-excerpt .read-more {
	display: none;
}


/* =========================================================
   PAGINATION
========================================================= */

.blog-pagination {
	display: flex;

	align-items: center;
	justify-content: space-between;

	gap: 30px;

	margin-top: 80px;
	padding-top: 30px;

	border-top: 1px solid #e8e8e8;
}

.blog-pagination a {
	font-size: 14px;
	font-weight: 600;

	color: #17252a;

	text-decoration: none;

	transition: opacity 0.2s ease;
}

.blog-pagination a:hover {
	opacity: 0.65;
}

.blog-pagination .nav-previous,
.blog-pagination .nav-next {
	max-width: 50%;
}

.blog-pagination .nav-next {
	text-align: right;
}


/* =========================================================
   ARTICLES SANS IMAGE
========================================================= */

.blog-card:not(:has(.blog-card-image)) {
	padding-top: 0;
}


/* =========================================================
   TABLETTE
========================================================= */

@media (max-width: 900px) {

	.blog-archive {
		padding: 60px 25px 80px;
	}

	.blog-grid {
		column-gap: 24px;
		row-gap: 50px;
	}

	.blog-card-image img {
		height: 220px;
	}

	.blog-card-title {
		font-size: 19px;
	}
}


/* =========================================================
   MOBILE BLOG
========================================================= */

@media (max-width: 767px) {

	.blog-archive {
		max-width: 100%;

		padding: 45px 20px 60px;
	}

	.blog-page-header {
		margin-bottom: 35px;
	}

	.blog-page-header .entry-title {
		font-size: 30px;
	}

	.blog-grid {
		grid-template-columns: 1fr;

		column-gap: 0;
		row-gap: 45px;
	}

	.blog-card-image {
		margin-bottom: 10px;
	}

	.blog-card-image img {
		width: 100%;
		height: auto;

		aspect-ratio: 1.55 / 1;

		object-fit: cover;
	}

	.blog-card-category {
		font-size: 13px;

		margin-bottom: 5px;
	}

	.blog-card-title {
		font-size: 20px;
		line-height: 1.35;

		margin-bottom: 7px;
	}

	.blog-card-excerpt {
		font-size: 14px;
		line-height: 1.65;
	}

	.blog-pagination {
		flex-direction: column;

		align-items: stretch;

		gap: 15px;

		margin-top: 60px;
	}

	.blog-pagination .nav-previous,
	.blog-pagination .nav-next {
		max-width: 100%;

		text-align: center;
	}
}


/* =========================================================
   PETIT MOBILE
========================================================= */

@media (max-width: 480px) {

	.blog-archive {
		padding-left: 16px;
		padding-right: 16px;
	}

	.blog-card-image img {
		border-radius: 14px;
	}

	.blog-card-title {
		font-size: 19px;
	}
}


/* =========================================================
   SINGLE POST
========================================================= */

.single-post-custom {
	width: 100%;

	margin: 0;
	padding: 0;
}

.single-post-custom {
	width: 100% !important;
	max-width: none !important;

	margin: 0 !important;
	padding: 0 !important;
}

.single-post-hero {
	width: 100vw !important;
	max-width: 100vw !important;

	margin-left: calc(50% - 50vw) !important;
	margin-right: calc(50% - 50vw) !important;
}

.single-post-hero-inner {
	width: 100% !important;

	margin: 0 auto;

	padding: 80px 40px;

	box-sizing: border-box;
}


/* =========================================================
   HERO
========================================================= */

.single-post-hero {
	width: 100%;

	padding: 45px 20px 0;
}

.single-post-hero-inner {
	margin: 0 auto;

	display: grid;

	grid-template-columns: 1fr 1fr;

	align-items: center;

	gap: 58px;
}


/* =========================================================
   IMAGE
========================================================= */

.single-post-image {
	width: 100%;
	height: 350px;

	overflow: hidden;

	border-radius: 22px;
}

.single-post-featured-image {
	display: block;

	width: 100%;
	height: 100%;

	object-fit: cover;
}


/* =========================================================
   INTRO
========================================================= */

.single-post-intro {
	padding: 10px 0;
}

.single-post-category {
	font-size: 15px;
	font-weight: 600;
	line-height: 1.4;

	color: #203635;

	margin-bottom: 12px;
}

.single-post-title {
	margin: 0 0 18px !important;

	font-size: 54px !important;
	font-weight: 700 !important;

	line-height: 1.15 !important;

	color: #203635;

	letter-spacing: -0.5px;
}

.single-post-date {
	font-size: 14px;

	line-height: 1.5;

	color: #286277;
}


/* =========================================================
   CONTENT
========================================================= */

.single-post-content-wrapper {
	width: 100%;
	max-width: 610px;

	margin: 105px auto 0;

	padding: 0 20px;
}

.single-post-content {
	font-size: 16px;

	line-height: 1.6;

	color: #17252c;
}

.single-post-content p {
	margin: 0 0 24px;
}

.single-post-content h2,
.single-post-content h3,
.single-post-content h4 {
	color: #203635;

	margin-top: 35px;
	margin-bottom: 18px;
}

.single-post-content a {
	color: #286277;
}


/* =========================================================
   CTA
========================================================= */

.single-post-cta {
	display: flex;

	justify-content: center;

	margin-top: 72px;
	margin-bottom: 145px;
}

.single-post-button {
	display: inline-flex;

	align-items: center;
	justify-content: center;

	min-width: 260px;
	height: 50px;

	padding: 0 35px;

	background: #d3ab76;

	color: #ffffff !important;

	border-radius: 30px;

	font-size: 17px;
	font-weight: 700;

	line-height: 1;

	text-decoration: none !important;

	box-shadow:
		0 2px 0 rgba(0, 0, 0, 0.18);

	transition:
		background-color 0.2s ease,
		transform 0.2s ease;
}

.single-post-button:hover {
	background: #c59b63;

	color: #ffffff !important;

	transform: translateY(-1px);
}


/* =========================================================
   TAGS / COMMENTS
========================================================= */

.single-post-custom .post-tags {
	display: none;
}

.single-post-custom .comments-area {
	display: none;
}


/* =========================================================
   TABLET SINGLE POST
========================================================= */

@media (max-width: 900px) {

	.single-post-hero-inner {
		grid-template-columns: 1fr;

		gap: 35px;
	}

	.single-post-image {
		height: 360px;
	}

	.single-post-intro {
		padding: 0 10px;
	}

	.single-post-title {
		font-size: 38px !important;
	}

	.single-post-content-wrapper {
		margin-top: 70px;
	}
}


/* =========================================================
   MOBILE SINGLE POST
========================================================= */

@media (max-width: 600px) {

	.single-post-hero {
		padding: 25px 15px 0;
	}

	.single-post-hero-inner {
		gap: 25px;
	}

	.single-post-image {
		height: 260px;

		border-radius: 18px;
	}

	.single-post-category {
		font-size: 14px;

		margin-bottom: 10px;
	}

	.single-post-title {
		font-size: 31px !important;

		line-height: 1.15 !important;
	}

	.single-post-date {
		font-size: 13px;
	}

	.single-post-content-wrapper {
		margin-top: 60px;

		padding: 0 20px;
	}

	.single-post-content {
		font-size: 16px;

		line-height: 1.6;
	}

	.single-post-cta {
		margin-top: 55px;

		margin-bottom: 80px;
	}

	.single-post-button {
		width: 100%;

		max-width: 260px;
	}
}