/**
 * Pages villes A Ciel Ouvert.
 *
 * Ne style que ce qui est a l'interieur de .ndv : l'en-tete, le pied de page et
 * la mise en page generale restent entierement geres par Avada. Les couleurs
 * reprennent celles du site.
 */

.ndv,
.ndv-formulaire {
	/* Le cyan est celui du bandeau d'en-tete du site, releve sur le rendu. */
	--ndv-cyan: #0bbbef;
	--ndv-cyan-fonce: #09a3d1;
	--ndv-bleu: #1b6ba8;
	--ndv-bleu-fonce: #14527f;
	--ndv-texte: #2c2c2c;
	--ndv-gris: #666;
	--ndv-fond: #f5f7f9;
	--ndv-bord: #e3e8ec;
	--ndv-etoile: #f5a623;
}

.ndv {
	max-width: 1140px;
	margin: 0 auto;
	color: var(--ndv-texte);
	line-height: 1.65;
}

.ndv p {
	margin-bottom: 12px;
	color: #3c3c3c;
}

/* ----- Fil d'ariane ----- */

.ndv-fil {
	padding: 12px 24px 0;
	font-size: 0.8rem;
	color: var(--ndv-gris);
}

.ndv-fil a {
	color: var(--ndv-gris);
	text-decoration: none;
}

.ndv-fil a:hover {
	color: var(--ndv-bleu);
}

/* ----- En-tete de page ----- */

.ndv-hero {
	padding: 28px 24px 8px;
}

.ndv-hero h1 {
	font-size: 2.1rem;
	line-height: 1.2;
	font-weight: 800;
	margin-bottom: 10px;
}

.ndv-promesse {
	font-size: 1.12rem;
	color: var(--ndv-gris);
	margin-bottom: 18px;
}

.ndv-reperes {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-bottom: 8px;
}

.ndv-repere {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	background: var(--ndv-fond);
	border: 1px solid var(--ndv-bord);
	padding: 7px 14px;
	border-radius: 30px;
	font-size: 0.85rem;
	color: var(--ndv-texte);
}

.ndv-etoile,
.ndv-etoiles {
	color: var(--ndv-etoile);
	letter-spacing: 1px;
}

.ndv-cta {
	display: inline-block;
	margin-top: 16px;
	background: var(--ndv-cyan);
	color: #fff;
	text-decoration: none;
	padding: 13px 30px;
	border-radius: 4px;
	font-weight: 700;
	font-size: 0.97rem;
}

.ndv-cta:hover,
.ndv-cta:focus {
	background: var(--ndv-cyan-fonce);
	color: #fff;
}

/* ----- Sections ----- */

.ndv-section {
	padding: 34px 24px;
}

.ndv-section + .ndv-section {
	border-top: 1px solid var(--ndv-bord);
}

.ndv-section h2 {
	font-size: 1.55rem;
	font-weight: 700;
	margin-bottom: 16px;
	line-height: 1.3;
}

.ndv-ancrage p:first-child {
	font-size: 1.03rem;
}

/* ----- Mention de source ----- */

.ndv .ndv-source {
	margin-top: 14px;
	font-size: 0.8rem;
	color: var(--ndv-gris);
	line-height: 1.5;
}

.ndv .ndv-source a {
	color: var(--ndv-gris);
}

/* ----- Prestations ----- */

.ndv-services {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 18px;
	margin-top: 6px;
}

.ndv-service {
	display: flex;
	gap: 16px;
	padding: 20px;
	border: 1px solid var(--ndv-bord);
	border-radius: 8px;
	background: #fff;
}

.ndv-service-icone {
	flex: 0 0 56px;
	width: 56px;
	height: 56px;
	object-fit: contain;
}

.ndv-service h3 {
	font-size: 1.03rem;
	margin: 0 0 4px;
}

.ndv-service h3 a {
	color: var(--ndv-cyan);
	text-decoration: none;
}

.ndv-service h3 a:hover {
	text-decoration: underline;
}

.ndv-service p {
	font-size: 0.88rem;
	color: var(--ndv-gris);
	margin: 0;
}

/* ----- Avis ----- */

.ndv-avis-detail {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 18px;
}

.ndv-avis {
	border: 1px solid var(--ndv-bord);
	border-radius: 10px;
	padding: 20px;
	margin: 0;
	background: #fff;
}

.ndv-avis figcaption {
	display: flex;
	align-items: baseline;
	flex-wrap: wrap;
	gap: 10px;
	margin-bottom: 10px;
}

.ndv-avis-nom {
	font-weight: 700;
	font-size: 0.94rem;
}

.ndv-avis-source {
	margin-left: auto;
	font-size: 0.75rem;
	color: var(--ndv-gris);
}

/*
 * Avada habille les citations d'un aplat de couleur vive, illisible ici.
 * On revient a une citation sobre, dans la carte qui la contient deja.
 */
.ndv .ndv-avis blockquote {
	font-size: 0.9rem;
	color: #444;
	font-style: italic;
	line-height: 1.6;
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	background-color: transparent;
	box-shadow: none;
	text-shadow: none;
	quotes: none;
}

.ndv .ndv-avis blockquote p {
	margin: 0;
	color: inherit;
	background: none;
	font-size: inherit;
}

.ndv-avis blockquote::before {
	content: "\00ab\00a0";
	color: #b9c4cc;
}

.ndv-avis blockquote::after {
	content: "\00a0\00bb";
	color: #b9c4cc;
}

.ndv-avis-compact {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 14px;
	margin-top: 18px;
}

.ndv-avis-bref {
	background: var(--ndv-fond);
	border: 1px solid var(--ndv-bord);
	border-radius: 8px;
	padding: 16px;
}

.ndv-avis-bref p {
	font-size: 0.81rem;
	color: #4a4a4a;
	line-height: 1.55;
	margin: 0;
}

.ndv-avis-bref .ndv-avis-nom {
	font-size: 0.84rem;
	margin-bottom: 2px;
}

.ndv-avis-bref .ndv-etoiles {
	font-size: 0.75rem;
	margin-bottom: 8px;
}

/* ----- Rappel du devis ----- */

/*
 * Le message a gauche, l'action a droite, sur une seule ligne. Une bande
 * centree laissait un grand vide sous le bouton et n'avait aucune hierarchie.
 */
.ndv-rappel {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 24px 32px;
	background: var(--ndv-bleu-fonce);
	color: #fff;
	padding: 26px 30px;
	margin: 0 24px;
	border-radius: 10px;
}

.ndv-rappel-texte {
	flex: 1 1 340px;
}

.ndv .ndv-rappel-titre {
	color: #fff;
	font-size: 1.25rem;
	font-weight: 700;
	line-height: 1.3;
	margin: 0 0 5px;
}

.ndv .ndv-rappel-detail {
	color: rgba(255, 255, 255, 0.82);
	font-size: 0.9rem;
	line-height: 1.5;
	margin: 0;
}

.ndv-cta-clair {
	flex: 0 0 auto;
	background: var(--ndv-cyan);
	margin-top: 0;
	white-space: nowrap;
}

.ndv-cta-clair:hover,
.ndv-cta-clair:focus {
	background: #1f93c4;
}

/* ----- Questions frequentes ----- */

.ndv-faq {
	border: 1px solid var(--ndv-bord);
	border-radius: 8px;
	margin-bottom: 12px;
	overflow: hidden;
}

.ndv-faq summary {
	cursor: pointer;
	padding: 15px 20px;
	font-weight: 650;
	font-size: 0.97rem;
	background: var(--ndv-fond);
	list-style: none;
	position: relative;
}

.ndv-faq summary::-webkit-details-marker {
	display: none;
}

.ndv-faq summary::after {
	content: "+";
	position: absolute;
	right: 20px;
	color: var(--ndv-bleu);
	font-size: 1.2rem;
}

.ndv-faq[open] summary::after {
	content: "\2013";
}

.ndv-faq-reponse {
	padding: 14px 20px;
	font-size: 0.92rem;
}

.ndv-faq-reponse p:last-child {
	margin-bottom: 0;
}

.ndv-faq-liens {
	margin-top: 18px;
	font-size: 0.92rem;
}

/* ----- Communes voisines ----- */

.ndv-voisines {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.ndv-voisines li {
	margin: 0;
}

.ndv-voisines a,
.ndv-voisines span {
	display: inline-block;
	background: var(--ndv-fond);
	border: 1px solid var(--ndv-bord);
	color: var(--ndv-bleu);
	text-decoration: none;
	padding: 8px 15px;
	border-radius: 30px;
	font-size: 0.85rem;
}

.ndv-voisines a:hover {
	background: #eaf2f8;
}

.ndv-voisines small {
	color: var(--ndv-gris);
	margin-left: 5px;
}

/*
 * Selecteur double a dessein : Avada applique ses propres marges aux
 * paragraphes de la zone de contenu, avec une specificite superieure.
 */
.ndv .ndv-remontee {
	margin-top: 30px;
	font-size: 0.92rem;
}

/* ----- Formulaire de devis ----- */

.ndv-formulaire {
	background: var(--ndv-fond);
	padding: 44px 24px 54px;
	margin-top: 34px;

	/*
	 * L'en-tete du site reste affiche au defilement. Sans cette reserve, un
	 * clic sur un bouton "devis" pose le haut du formulaire sous le bandeau,
	 * et le titre disparait. La valeur couvre la hauteur de l'en-tete plus une
	 * marge de confort.
	 */
	scroll-margin-top: 130px;
}

.ndv-formulaire > h2 {
	max-width: 980px;
	margin: 0 auto 26px;
	text-align: center;
	font-size: 1.55rem;
	font-weight: 700;
	color: var(--ndv-texte);
}

.ndv-formulaire .fusion-form {
	max-width: 980px;
	margin: 0 auto;
}

/* ----- Adaptation aux petits ecrans ----- */

@media (max-width: 900px) {

	.ndv-services,
	.ndv-avis-detail {
		grid-template-columns: 1fr;
	}

	.ndv-avis-compact {
		grid-template-columns: 1fr 1fr;
	}

	.ndv-hero h1 {
		font-size: 1.7rem;
	}

	.ndv-rappel {
		padding: 24px;
	}

	.ndv-rappel .ndv-cta-clair {
		width: 100%;
		text-align: center;
	}
}

@media (max-width: 480px) {

	.ndv-avis-compact {
		grid-template-columns: 1fr;
	}

	.ndv-avis-source {
		margin-left: 0;
	}
}