/*
 * Augay TP — styles des sections de la page d'accueil (version éditable par blocs).
 * Réutilise les variables de couleurs, la police Rubik et les classes globales
 * (.container, .cta) définies dans app.css. Le découpage est ici basé sur des
 * classes explicites (et non sur la position des éléments) afin de rester fidèle
 * au design d'origine tout en restant robuste à l'édition dans Gutenberg.
 */

:root {
	--cut: 70px;
	/* Palette définie ici (et non uniquement dans app.css) pour résister à la
	   purge CSS : ces variables sont consommées par theme.css. */
	--grey: #666468;
	--light-grey: #ecebeb;
	--dark-grey: #404041;
	--dark-green: #414c32;
	--green: #455b23;
	--olive-green: #656f48;
	--light-green: #8e9970;
	--yellow: #d9c900;
	--dark-yellow: #c1b03a;
	--blue: #376595;
	--dark-olive: #75705b;
	--tan: #b2aa81;
	--white: #ffffff;
	--black: #000000;
	--whitish: #f7f7f7;
	--orange: #e07b29;
}

/* --- Réinitialisation des marges de blocs WP dans le contenu --- */
/* WordPress encapsule les enfants d'un bloc Groupe dans un .wp-block-group__inner-container.
   On le rend « transparent » pour que nos mises en page flex s'appliquent aux blocs réels. */
.atp-main .wp-block-group > .wp-block-group__inner-container {
	display: contents !important;
}
.atp-main figure.wp-block-image {
	margin: 0;
}
/* Les conteneurs Bootstrap restent centrés horizontalement. */
.atp-main .container {
	margin-left: auto;
	margin-right: auto;
}
.atp-main figure.wp-block-image img {
	display: block;
}
.atp-main ul {
	list-style: none;
	padding-left: 0;
	margin: 0;
}
/* Animations d'entrée (AOS) : translation réduite pour un effet doux et léger.
   !important pour surclasser les sélecteurs à forte spécificité d'AOS. */
[data-aos="fade-up"] {
	transform: translate3d(0, 24px, 0) !important;
}
[data-aos="fade-up"].aos-animate {
	transform: translate3d(0, 0, 0) !important;
}

/* ============================= CTA (bouton pilule) ============================= */
.atp-cta,
.atp-cta a.wp-block-button__link,
a.atp-cta {
	display: inline-flex;
	align-items: center;
	gap: 0.25rem;
	padding: 2px 12px 2px 8px;
	width: fit-content;
	font-family: "Rubik", sans-serif;
	font-weight: 500;
	font-size: 1rem;
	line-height: 2rem;
	background-color: var(--white);
	color: var(--dark-green);
	border-radius: 20px;
	border: 0;
	text-decoration: none;
	transition: filter 0.3s ease;
}
.atp-cta:hover,
a.atp-cta:hover {
	filter: brightness(85%);
}
.atp-cta::before {
	content: "";
	flex: 0 0 auto;
	width: 24px;
	height: 22px;
	background-color: currentColor;
	-webkit-mask: url("../images/common/arrow.svg") no-repeat center / contain;
	mask: url("../images/common/arrow.svg") no-repeat center / contain;
}

/* ============================= À PROPOS ============================= */
.atp-apropos {
	margin-top: 4rem;
	background-position: calc(100% - 60px) calc(100% + 8px);
	background-repeat: no-repeat;
	background-size: 400px;
	background-image: url("../images/common/A-_LYb7Uy.svg");
}
.atp-apropos__grid {
	display: flex;
	flex-direction: column;
	padding-bottom: 4rem;
}
.atp-apropos__text p {
	margin-top: 2rem;
	margin-bottom: 1.5rem;
	text-align: justify;
}
.atp-apropos__media {
	display: flex;
	justify-content: center;
	margin-top: 2rem;
}
.atp-apropos__media img {
	max-width: 400px;
	height: auto;
}
.atp-apropos .atp-cta {
	color: var(--white);
	background-color: var(--dark-grey);
}
.atp-apropos .atp-cta:hover {
	filter: brightness(120%);
}
.atp-apropos__cta {
	margin-top: 1.5rem;
	text-align: center;
}
@media (min-width: 992px) {
	.atp-apropos__grid {
		flex-direction: row;
		padding-top: 6rem;
	}
	.atp-apropos__text {
		flex: 1;
		text-align: end;
		padding-right: 2rem;
	}
	.atp-apropos__media {
		flex: 1;
	}
	.atp-apropos__cta {
		text-align: end;
	}
}

/* ============================= TRAVAUX (terrassement / vrd / fosses) ============================= */
.atp-travaux {
	background-color: var(--light-grey);
	background-position: calc(100% - 60px) calc(100% + 8px);
	background-repeat: no-repeat;
	background-size: 100px;
	background-image: url("../images/common/A-white-765XPOd.svg");
}
@media (min-width: 768px) {
	.atp-travaux {
		background-size: 200px;
	}
}
@media (min-width: 992px) {
	.atp-travaux {
		background-size: 400px;
	}
}

.atp-prestation {
	padding-top: 4rem;
}
.atp-prestation__row {
	display: flex;
	flex-direction: column;
	position: relative;
	align-items: center;
}
.atp-prestation__media,
.atp-prestation__text {
	flex: 1;
	width: 100%;
}
/* Ordre par défaut (mobile) : image, séparateur, puis texte —
   le séparateur reste ainsi entre l'image et le contenu, jamais sur le CTA. */
.atp-prestation__media {
	order: 0;
}
.atp-prestation__sep {
	order: 1;
}
.atp-prestation__text {
	order: 2;
}
.atp-prestation__media img {
	max-width: 100%;
	height: auto;
	display: block;
}
.atp-prestation__body {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	height: 100%;
}
.atp-prestation__body h3 {
	display: flex;
	font-size: 3rem;
	font-weight: 500;
	align-self: center;
	margin-bottom: 1rem;
}
.atp-prestation__body p {
	text-align: justify;
	margin: 0;
}
.atp-prestation__body ul {
	margin: 1rem 0 0;
}
.atp-prestation__body ul li {
	margin-bottom: 0.25rem;
}
.atp-prestation__body ul li:last-child {
	margin-bottom: 0;
}
.atp-prestation__body .atp-prestation__cta {
	margin-top: 1.5rem;
	text-align: center;
	width: 100%;
}
/* Séparateur (icône ronde) */
.atp-prestation__sep {
	display: flex;
	align-self: center;
	z-index: 2;
	margin-top: -50px;
	margin-bottom: 0;
}
.atp-prestation__sep img {
	width: 100px;
	height: auto;
}

@media (min-width: 992px) {
	.atp-prestation__row {
		flex-direction: row;
		align-items: stretch;
	}
	.atp-prestation__sep {
		position: absolute;
		top: 50%;
		left: 50%;
		margin: 0;
		transform: translate(-50%, -50%);
	}
	.atp-prestation__body {
		align-items: start;
	}
	.atp-prestation__body .atp-prestation__cta {
		text-align: left;
	}
}

/* Terrassement : image à gauche (coin coupé haut-gauche), texte à droite, vert foncé */
.atp-prestation--terrassement .atp-prestation__media img {
	clip-path: polygon(var(--cut) 0, 100% 0, 100% 100%, 0 100%, 0 var(--cut));
}
.atp-prestation--terrassement .atp-prestation__body {
	color: var(--dark-green);
}
@media (min-width: 992px) {
	.atp-prestation--terrassement .atp-prestation__body {
		padding-left: 80px;
	}
}

/* VRD : texte à gauche (olive), image à droite (coin coupé haut-droit) */
.atp-prestation--vrd {
	margin-top: 0;
}
@media (min-width: 992px) {
	.atp-prestation--vrd {
		margin-top: 4rem;
	}
	.atp-prestation--vrd .atp-prestation__media {
		order: 2;
	}
	.atp-prestation--vrd .atp-prestation__text {
		order: 0;
	}
	.atp-prestation--vrd .atp-prestation__body {
		align-items: end;
		text-align: right;
		padding-right: 80px;
		padding-left: 0;
	}
	.atp-prestation--vrd .atp-prestation__body p {
		text-align: justify;
	}
	.atp-prestation--vrd .atp-prestation__body .atp-prestation__cta {
		text-align: right;
	}
}
.atp-prestation--vrd .atp-prestation__media img {
	clip-path: polygon(0 0, calc(100% - var(--cut)) 0, 100% var(--cut), 100% 100%, 0 100%);
}
.atp-prestation--vrd .atp-prestation__body {
	color: var(--olive-green);
}

/* Fosses : image à gauche (coin coupé bas-droit), texte à droite, bleu */
.atp-prestation--fosses {
	padding-bottom: 4rem;
}
.atp-prestation--fosses .atp-prestation__media img {
	clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%, 0 100%);
}
.atp-prestation--fosses .atp-prestation__body {
	color: var(--blue);
}
@media (min-width: 992px) {
	.atp-prestation--fosses .atp-prestation__body {
		padding-left: 80px;
	}
}

/* ============================= BANNIÈRE EXTÉRIEUR ============================= */
.atp-exterieur {
	margin-top: 4rem;
	margin-bottom: 4rem;
	text-align: center;
	font-size: 3rem;
	font-weight: 400;
	line-height: 4rem;
	color: var(--grey);
}

/* ============================= AMÉNAGEMENT PAYSAGER ============================= */
.atp-amenagement {
	padding: 0 2rem 3rem;
	background-color: var(--whitish);
}
.atp-amenagement__cover img {
	display: block;
	width: 100%;
	max-height: 750px;
	object-fit: cover;
}
.atp-amenagement__icon {
	display: flex;
	justify-content: center;
	margin-top: -60px;
	position: relative;
	z-index: 2;
}
.atp-amenagement__icon img {
	width: 100px;
	height: auto;
}
.atp-amenagement__content {
	display: flex;
	flex-direction: column;
	padding-top: 2rem;
	padding-bottom: 1rem;
}
.atp-amenagement__content h2 {
	color: var(--dark-yellow);
	text-align: left;
}
.atp-amenagement__col-text p {
	margin-top: 2rem;
	text-align: justify;
}
.atp-amenagement__col-list ul {
	padding-top: 2rem;
}
.atp-amenagement__col-list ul li {
	margin-bottom: 0.25rem;
}
.atp-amenagement .atp-cta {
	color: var(--dark-yellow);
}
.atp-amenagement__cta {
	text-align: center;
}
@media (min-width: 992px) {
	.atp-amenagement__content {
		flex-direction: row;
	}
	.atp-amenagement__col-text {
		flex: 1.2;
	}
	.atp-amenagement__col-list {
		flex: 0.8;
		padding-left: 2rem;
	}
}

/* ============================= AUTRES PRESTATIONS ============================= */
.atp-autres {
	margin-top: 4rem;
	margin-bottom: 4rem;
}
.atp-autres__title {
	margin: 0 0 2rem;
	font-size: 3rem;
	font-weight: 400;
	line-height: 4rem;
	text-align: center;
}
.atp-autres__cards {
	display: flex;
	flex-direction: column;
	margin-top: 0;
	gap: 3rem;
}
.atp-autres__card {
	position: relative;
	display: flex;
	flex: 1;
	clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%, 0 100%);
}
.atp-autres__card::after {
	content: "";
	position: absolute;
	top: 0;
	right: 0;
	height: 22px;
	width: 122px;
	background-color: var(--orange, #e07b29);
}
.atp-autres__card-inner {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: space-between;
	padding-bottom: 1rem;
	width: 100%;
}
.atp-autres__card-inner figure.wp-block-image,
.atp-autres__card-inner figure {
	width: 100%;
	margin: 0;
}
.atp-autres__card-inner img {
	height: 250px;
	width: 100%;
	object-fit: cover;
	display: block;
}
.atp-autres__card-inner h3 {
	margin-top: 1rem;
	color: var(--white);
	text-align: center;
	text-transform: uppercase;
	font-size: 1.5rem;
}
.atp-autres__card-inner p {
	padding: 0 1.5rem;
	color: var(--white);
	text-align: center;
}
.atp-autres__card-inner .atp-prestation__cta,
.atp-autres__card-inner .atp-cta-wrapper {
	display: flex;
	width: 100%;
	padding-left: 1.5rem;
}
.atp-autres__card:nth-child(1) {
	background-color: var(--olive-green);
}
.atp-autres__card:nth-child(1) .atp-cta {
	color: var(--olive-green);
}
.atp-autres__card:nth-child(2) {
	background-color: var(--dark-olive);
}
.atp-autres__card:nth-child(2) .atp-cta {
	color: var(--dark-olive);
}
.atp-autres__card:nth-child(3) {
	background-color: var(--tan);
}
.atp-autres__card:nth-child(3) .atp-cta {
	color: var(--tan);
}
@media (min-width: 992px) {
	.atp-autres__cards {
		flex-direction: row;
		justify-content: center;
	}
}

/* ============================= GALERIE ============================= */
.atp-galerie {
	margin-top: 4rem;
	margin-bottom: 0;
}
.atp-galerie__title {
	margin: 0 0 2rem;
	font-size: 3rem;
	font-weight: 400;
	line-height: 4rem;
	text-align: center;
}
@media (max-width: 575.98px) {
	.atp-galerie__title {
		font-size: 2rem;
		line-height: 2.5rem;
	}
}
/* Disposition « masonry » en colonnes, fidèle à la galerie d'origine. */
.atp-galerie .wp-block-gallery {
	display: block !important;
	column-count: 1;
	column-gap: 1rem !important;
	gap: 1rem !important;
	margin: 0;
}
@media (min-width: 576px) {
	.atp-galerie .wp-block-gallery {
		column-count: 2;
	}
}
@media (min-width: 992px) {
	.atp-galerie .wp-block-gallery {
		column-count: 3;
	}
}
.atp-galerie .wp-block-gallery .wp-block-image {
	display: inline-block !important;
	width: 100% !important;
	max-width: 100% !important;
	flex: none !important;
	margin: 0 0 1rem !important;
	break-inside: avoid;
}
.atp-galerie .wp-block-image img {
	width: 100%;
	height: auto;
	display: block;
}

/* --- Lightbox carousel --- */
.atp-lightbox {
	position: fixed;
	inset: 0;
	z-index: 99999;
	display: none;
	align-items: center;
	justify-content: center;
	background: rgba(0, 0, 0, 0.92);
}
.atp-lightbox.is-open {
	display: flex;
}
.atp-lightbox__stage {
	margin: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	max-width: 90vw;
	max-height: 88vh;
}
.atp-lightbox__stage img {
	max-width: 90vw;
	max-height: 88vh;
	width: auto;
	height: auto;
	object-fit: contain;
	box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
}
.atp-lightbox__close,
.atp-lightbox__nav {
	position: absolute;
	background: none;
	border: 0;
	color: #fff;
	cursor: pointer;
	line-height: 1;
	transition: opacity 0.2s ease;
	opacity: 0.8;
}
.atp-lightbox__close:hover,
.atp-lightbox__nav:hover {
	opacity: 1;
}
.atp-lightbox__close {
	top: 1rem;
	right: 1.5rem;
	font-size: 3rem;
}
.atp-lightbox__nav {
	top: 50%;
	transform: translateY(-50%);
	font-size: 4rem;
	padding: 0 1.25rem;
}
.atp-lightbox__prev {
	left: 0.5rem;
}
.atp-lightbox__next {
	right: 0.5rem;
}
@media (max-width: 575.98px) {
	.atp-lightbox__nav {
		font-size: 2.5rem;
		padding: 0 0.5rem;
	}
	.atp-lightbox__close {
		font-size: 2.25rem;
		right: 1rem;
	}
}

/* ============================= CONTACT ============================= */
.atp-contact {
	padding-top: 4rem;
	color: var(--dark-green);
	background-color: var(--whitish);
}
.atp-contact__inner {
	display: flex;
	flex-direction: column;
	gap: 2rem;
	padding-bottom: 4rem;
	background-position: calc(0% + 60px) calc(100% + 8px);
	background-repeat: no-repeat;
	background-size: 100px;
	background-image: url("../images/common/A-white-765XPOd.svg");
}
@media (min-width: 768px) {
	.atp-contact__inner {
		flex-direction: row;
		background-size: 200px;
	}
}
.atp-contact__info {
	flex: 0 0 auto;
}
.atp-contact__info h2 {
	text-transform: uppercase;
	text-align: left;
}
.atp-contact__info p {
	margin-bottom: 0;
}
.atp-contact__info p em {
	font-weight: 500;
	font-style: normal;
}
.atp-contact__form {
	flex: 1;
}
@media (min-width: 992px) {
	.atp-contact__info {
		flex: 0 0 25%;
	}
}

/* Mise en forme du formulaire Contact Form 7 façon site d'origine */
.atp-contact__form .wpcf7-form .row,
.atp-contact__form form .row {
	display: flex;
	flex-wrap: wrap;
	margin: 0 -0.5rem;
}
.atp-contact__form input,
.atp-contact__form textarea {
	color: var(--black);
	font-weight: 400;
	border-radius: 0;
	border: 1px solid #d8d8d8;
	background-color: var(--white);
	width: 100%;
	padding: 0.5rem 0.75rem;
}
.atp-contact__form input::placeholder,
.atp-contact__form textarea::placeholder {
	color: var(--grey);
}
.atp-contact__form input:focus,
.atp-contact__form textarea:focus {
	outline: 2px solid var(--olive-green);
	outline-offset: 0;
	border-color: var(--olive-green);
}
.atp-contact__form input[type="checkbox"] {
	width: 20px;
	height: 20px;
	border-radius: 0;
	accent-color: var(--black);
}
.atp-contact__form label {
	color: var(--black);
}
#contact .atp-contact__form .wpcf7-submit,
.atp-contact__form .wpcf7-submit,
.atp-contact__form button[type="submit"] {
	display: inline-flex;
	align-items: center;
	gap: 0.25rem;
	padding: 6px 16px 6px 40px;
	width: fit-content;
	font-weight: 500;
	color: var(--white) !important;
	background-color: var(--dark-green);
	background-image: url("../images/common/arrow-white.svg");
	background-repeat: no-repeat;
	background-position: 12px center;
	background-size: 22px auto;
	border: 0 !important;
	border-radius: 20px !important;
	transition: filter 0.3s ease;
	cursor: pointer;
}
/* Case de consentement : interligne resserré pour un texte plus compact. */
.atp-contact__form .wpcf7-acceptance .wpcf7-list-item {
	margin: 0;
}
.atp-contact__form .wpcf7-acceptance label {
	display: inline;
	vertical-align: top;
	line-height: 1.35;
}
.atp-contact__form .wpcf7-spinner {
	margin: 0 0 0 0.5rem;
}
.atp-contact__form .wpcf7-submit:hover,
.atp-contact__form button[type="submit"]:hover {
	filter: brightness(120%);
}
/* Bouton désactivé (pendant l'envoi) : grisé et non cliquable. */
#contact .atp-contact__form .wpcf7-submit:disabled,
.atp-contact__form .wpcf7-submit:disabled,
.atp-contact__form .wpcf7-submit[disabled] {
	background-color: var(--light-grey) !important;
	background-image: url("../images/common/arrow-grey.svg") !important;
	color: var(--grey) !important;
	cursor: not-allowed !important;
	opacity: 0.7;
	filter: none !important;
}

/* Barre du haut : e-mail en texte par défaut, en picto sur mobile. */
.atp-top-mail__icon {
	display: none;
	width: 20px;
	height: 20px;
	vertical-align: middle;
}

/* ============================= MOBILE (< 576px) ============================= */
/* Le design d'origine imposait une largeur minimale de 500px ; on rend la mise
   en page réellement fluide sur petits écrans et on adapte les très grands titres. */
@media (max-width: 575.98px) {
	html {
		overflow-x: hidden;
	}
	body {
		min-width: 0;
		width: 100%;
		overflow-x: hidden;
	}
	.atp-apropos__media img {
		max-width: 100%;
	}
	.atp-apropos h2,
	.atp-amenagement__content h2 {
		font-size: 2rem;
		line-height: 2.5rem;
	}
	.atp-autres__title {
		font-size: 2rem;
		line-height: 2.5rem;
	}
	.atp-prestation__body h3 {
		font-size: 2rem;
	}
	.atp-exterieur {
		font-size: 1.75rem;
		line-height: 2.25rem;
	}

	/* Barre du haut : l'e-mail devient un picto enveloppe. */
	.atp-top-mail__text {
		display: none;
	}
	.atp-top-mail__icon {
		display: inline-block;
	}

	/* Marges latérales réduites sur mobile. */
	.container {
		padding-left: 1.5rem;
		padding-right: 1.5rem;
	}
	.atp-amenagement {
		padding-left: 1.5rem;
		padding-right: 1.5rem;
	}

	/* Bouton du formulaire centré sur mobile (surclasse l'utilitaire Bootstrap .text-end). */
	.atp-contact__form .text-end {
		text-align: center !important;
	}

	/* ----- Pied de page adapté au mobile ----- */
	footer > div.container {
		flex-direction: column;
	}
	footer > div.container > div:nth-child(1) {
		align-items: flex-start;
	}
	footer > div.container > div:nth-child(2) {
		margin-left: 0;
		margin-top: 1.5rem;
	}
	/* Liens téléphone / e-mail : taille réduite et retour à la ligne autorisé. */
	footer > div.container > div:nth-child(2) > div:nth-child(2) > div:nth-child(2) a {
		font-size: 1.15rem;
		line-height: 1.6rem;
		white-space: normal;
		word-break: break-word;
		margin-left: 0;
		margin-top: 0.5rem;
	}
}

/* ============================= MENTIONS LÉGALES ============================= */
#legal-notice,
.atp-legal {
	margin-top: 6rem;
	margin-bottom: 4rem;
}
.atp-legal h1 {
	font-size: 3rem;
	font-weight: 500;
	margin-bottom: 2rem;
}
.atp-legal h2 {
	text-align: left;
	font-size: 1.75rem;
	margin: 2rem 0 1rem;
}
.atp-legal p {
	margin-bottom: 1rem;
}