.contact-entete p { max-width: 480px; color: #4a4f4a; margin: 0; }



.contact-corps {
	display: grid;
	grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
	gap: clamp(36px, 6vw, 100px);
	align-items: start;
	padding-bottom: clamp(56px, 8vw, 110px);
}

.champ { margin-bottom: 14px; }

.champ label {
	display: block;
	font-size: .7rem;
	letter-spacing: .18em;
	text-transform: uppercase;
	color: var(--gris);
	margin-bottom: 9px;
}

.champ input,
.champ textarea,
.champ select {
	width: 100%;
	border: 0;
	border-bottom: 1px solid var(--trait);
	background: transparent;
	font-family: var(--texte);
	font-size: 1.02rem;
	font-weight: 300;
	color: var(--encre);
	padding: 9px 0;
	transition: border-color .45s ease;
}

.champ input:focus,
.champ textarea:focus,
.champ select:focus {
	outline: none;
	border-bottom-color: var(--encre);
}

.champ textarea { resize: vertical; }

.contact-duo { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }

.accord {
	display: flex;
	gap: 12px;
	align-items: flex-start;
	font-size: .82rem;
	line-height: 1.5;
	color: var(--gris);
	margin: 6px 0 30px;
}

.accord input { width: auto; margin-top: 5px; }

.bouton {
	position: relative;
	display: inline-block;
	border: 1px solid var(--encre);
	background: none;
	font-family: var(--texte);
	font-weight: 300;
	padding: 15px 40px;
	font-size: .74rem;
	letter-spacing: .2em;
	text-transform: uppercase;
	color: var(--encre);
	cursor: pointer;
	overflow: hidden;
	z-index: 0;
	transition: color .45s ease;
}

.bouton::before {
	content: '';
	position: absolute;
	inset: 0;
	background: var(--encre);
	transform: translateY(101%);
	transition: transform .5s cubic-bezier(.19,1,.22,1);
	z-index: -1;
}

.bouton:hover::before { transform: translateY(0); }
.bouton:hover { color: var(--fond); }

.cote { margin-top: clamp(-40px, -3vw, -14px); }

.cote img {
	width: var(--photo-largeur, 100%);
	height: auto;
	object-fit: cover;
	display: block;
	margin: 0 auto;
}

.cote.format-portrait img { aspect-ratio: 4 / 5; }
.cote.format-haut img { aspect-ratio: 2 / 3; }
.cote.format-carre img { aspect-ratio: 1 / 1; }
.cote.format-paysage img { aspect-ratio: 3 / 2; }
.cote.format-libre img { aspect-ratio: auto; }

.cote.forme-droit img { border-radius: 0; }
.cote.forme-doux img { border-radius: 4px; }
.cote.forme-arrondi img { border-radius: 22px; }
.cote.forme-arche img { border-radius: 50% 50% 6px 6px / 32% 32% 6px 6px; }
.cote.forme-cercle img { border-radius: 50%; }

.cote.cadrage-centre img { object-position: 50% 50%; }
.cote.cadrage-haut img { object-position: 50% 12%; }
.cote.cadrage-tete img { object-position: 50% 25%; }
.cote.cadrage-bas img { object-position: 50% 85%; }
.cote.cadrage-gauche img { object-position: 22% 50%; }
.cote.cadrage-droite img { object-position: 78% 50%; }

.coordonnees { margin-top: 34px; }

.ligne {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 20px;
	padding: 15px 0;
	border-bottom: 1px solid var(--trait);
}

.ligne:first-child { border-top: 1px solid var(--trait); }

.ligne dt {
	font-size: .68rem;
	letter-spacing: .2em;
	text-transform: uppercase;
	color: var(--gris);
	margin: 0;
}

.ligne dd { margin: 0; text-align: right; }

.ligne a {
	position: relative;
	text-decoration: none;
	padding-bottom: 3px;
	transition: color .4s ease;
}

.ligne a::after {
	content: '';
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 1px;
	background: var(--accent);
	transform: scaleX(0);
	transform-origin: right;
	transition: transform .5s cubic-bezier(.19,1,.22,1);
}

.ligne a:hover { color: var(--accent); }
.ligne a:hover::after { transform: scaleX(1); transform-origin: left; }

.apropos { margin-top: 34px; font-size: .95rem; color: #4a4f4a; }

@media (max-width: 899px) {
	.contact-corps { grid-template-columns: 1fr; gap: clamp(40px, 8vw, 60px); }
	.contact-duo { grid-template-columns: 1fr; }
	.cote { order: 0; }
	.cote img { margin-bottom: 26px; }
}

@keyframes monte {
	from { opacity: 0; transform: translateY(22px); }
	to { opacity: 1; transform: none; }
}

body.page-template-page-contact .intro .sur { animation: monte .7s cubic-bezier(.19,1,.22,1) .05s both; }
body.page-template-page-contact .intro h1 { animation: monte .8s cubic-bezier(.19,1,.22,1) .14s both; }
body.page-template-page-contact .intro > p { animation: monte .8s cubic-bezier(.19,1,.22,1) .24s both; }

body.page-template-page-contact .cote img {
	clip-path: inset(0 0 100% 0);
	animation: rideau 1.1s cubic-bezier(.19,1,.22,1) .3s both;
}

@keyframes rideau {
	from { clip-path: inset(0 0 100% 0); }
	to { clip-path: inset(0 0 0 0); }
}

body.page-template-page-contact form .champ,
body.page-template-page-contact form .duo,
body.page-template-page-contact .accord,
body.page-template-page-contact form .bouton {
	animation: monte .7s cubic-bezier(.19,1,.22,1) both;
}

body.page-template-page-contact form > *:nth-child(1) { animation-delay: .3s; }
body.page-template-page-contact form > *:nth-child(2) { animation-delay: .38s; }
body.page-template-page-contact form > *:nth-child(3) { animation-delay: .46s; }
body.page-template-page-contact form > *:nth-child(4) { animation-delay: .54s; }
body.page-template-page-contact form > *:nth-child(5) { animation-delay: .62s; }
body.page-template-page-contact form > *:nth-child(6) { animation-delay: .7s; }

body.page-template-page-contact .ligne { animation: monte .7s cubic-bezier(.19,1,.22,1) both; }
body.page-template-page-contact .ligne:nth-child(1) { animation-delay: .5s; }
body.page-template-page-contact .ligne:nth-child(2) { animation-delay: .58s; }
body.page-template-page-contact .ligne:nth-child(3) { animation-delay: .66s; }
body.page-template-page-contact .ligne:nth-child(4) { animation-delay: .74s; }

body.page-template-page-contact .apropos { animation: monte .7s cubic-bezier(.19,1,.22,1) .82s both; }

.champ {
	position: relative;
}

.champ input,
.champ textarea,
.champ select {
	border-bottom-color: var(--trait);
}

.champ::after {
	content: '';
	position: absolute;
	left: 0;
	bottom: 0;
	height: 1px;
	width: 100%;
	background: var(--encre);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform .55s cubic-bezier(.19,1,.22,1);
	pointer-events: none;
}

.champ:focus-within::after { transform: scaleX(1); }

.champ label {
	transition: color .4s ease;
}

.champ:focus-within label { color: var(--encre); }




.accord input {
	accent-color: var(--encre);
	cursor: pointer;
}

.bouton::after {
	content: '';
	position: absolute;
	left: 50%;
	bottom: 9px;
	width: 0;
	height: 1px;
	background: currentColor;
	transform: translateX(-50%);
	transition: transform .5s cubic-bezier(.19,1,.22,1);
}

.bouton:hover::after { width: 24px; }

@media (prefers-reduced-motion: reduce) {
	body.page-template-page-contact * { animation: none !important; }
	body.page-template-page-contact .cote img { clip-path: none; }
	.champ::after { transition: none; }
}



@media (max-width: 767px) {
	.contact-corps {
		padding-left: var(--marge);
		padding-right: var(--marge);
	}

	.cote { margin-top: 0; }
}


.champ .option {
	font-size: .6rem;
	letter-spacing: .1em;
	color: var(--gris);
	text-transform: none;
	margin-left: 7px;
	opacity: .75;
}

.champ textarea::placeholder,
.champ input::placeholder { color: var(--gris); opacity: .5; }

.delai { margin: 12px 0 0; font-size: .74rem; color: var(--gris); }

.champ-court { max-width: 300px; }

@media (max-width: 599px) { .champ-court { max-width: none; } }


.contact-corps .consentement { margin: 4px 0 18px; font-size: .78rem; }
.contact-corps .champ label { margin-bottom: 6px; }
.contact-corps .champ input,
.contact-corps .champ select { padding-bottom: 8px; }
.contact-corps .champ textarea { padding-bottom: 8px; }