/* ==========================================================================
   DIAGONES — habillage du formulaire Contact Form 7
   Le balisage à coller dans CF7 se trouve dans docs/contact-form-7.txt.
   ========================================================================== */

.dg-form .wpcf7-form {
	display: grid;
	grid-template-columns: repeat(3, 280px);
	gap: 7px 87px;
	align-items: start;
	margin-left: 74px;
}

.dg-champ { display: flex; flex-direction: column; gap: 6px; }

.dg-champ > label,
.dg-profils__label,
.dg-profils h3 {
	font-family: var(--wp--preset--font-family--texte);
	font-weight: 700;
	font-size: var(--wp--preset--font-size--base);
	line-height: 1.45;
}

.dg-form input[type="text"],
.dg-form input[type="email"],
.dg-form input[type="tel"],
.dg-form textarea {
	width: 100%;
	border: 0;
	border-bottom: 1.4px solid var(--wp--preset--color--encre);
	background: transparent;
	padding: 2px 2px 6px;
	font-family: var(--wp--preset--font-family--texte);
	font-size: var(--wp--preset--font-size--base);
	color: var(--wp--preset--color--encre);
	border-radius: 0;
	outline: none;
}
.dg-form input:focus,
.dg-form textarea:focus { border-bottom-color: var(--wp--preset--color--or); }
.dg-form textarea { resize: vertical; min-height: 112px; }
.dg-form .wpcf7-form-control-wrap { display: block; }

/* Colonne « Votre message », qui occupe deux rangées */
.dg-champ-message { grid-column: 3; grid-row: 1 / span 2; }

/* Bloc « Vous êtes : » */
.dg-profils {
	grid-column: 1 / span 2;
	display: grid;
	grid-template-columns: 121px 216px 1fr;
	gap: 10px;
	align-items: start;
}
.dg-profils h3 { margin: 0 0 12px; text-transform: none; color: inherit; }
.dg-profils .wpcf7-checkbox { display: flex; flex-direction: column; }
.dg-profils .wpcf7-list-item { margin: 0; }
.dg-profils .wpcf7-list-item label {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	cursor: pointer;
	font-weight: 400;
	line-height: 1.24;
}
.dg-form input[type="checkbox"] {
	appearance: none;
	-webkit-appearance: none;
	width: 14px;
	height: 14px;
	flex: 0 0 auto;
	border: 1.4px solid var(--wp--preset--color--encre);
	background: var(--wp--preset--color--blanc);
	border-radius: 0;
	cursor: pointer;
}
.dg-form input[type="checkbox"]:checked {
	background: var(--wp--preset--color--or);
	border-color: var(--wp--preset--color--or);
}

/* Bouton d’envoi */
.dg-form .wpcf7-submit {
	grid-column: 3;
	justify-self: start;
	align-self: start;
	margin-top: 86px;
	border: 0;
	cursor: pointer;
	background: var(--wp--preset--color--or-clair);
	color: var(--wp--preset--color--blanc);
	font-family: var(--wp--preset--font-family--texte);
	font-weight: 800;
	font-size: var(--wp--preset--font-size--xs);
	letter-spacing: .02em;
	text-transform: uppercase;
	line-height: 1;
	padding: 15px 32px;
	border-radius: 999px;
	transition: transform .18s ease, background-color .18s ease;
}
.dg-form .wpcf7-submit:hover {
	background: var(--wp--preset--color--or);
	transform: translateY(-2px);
}

/* Messages de CF7 */
.dg-form .wpcf7-response-output {
	grid-column: 1 / -1;
	margin: 24px 0 0;
	border-width: 1.4px;
	border-radius: 8px;
	padding: 12px 16px;
	font-size: var(--wp--preset--font-size--xs);
}
.dg-form .wpcf7-not-valid-tip {
	color: #b3261e;
	font-size: 14px;
	margin-top: 4px;
}
.dg-form .wpcf7-spinner { margin: 0 0 0 12px; }

.dg-form__avertissement {
	border: 1.4px dashed var(--wp--preset--color--or);
	border-radius: 8px;
	padding: 16px 20px;
	color: var(--wp--preset--color--or);
	font-weight: 700;
}

/* Responsive */
@media (max-width: 1320px) {
	.dg-form .wpcf7-form { margin-left: 0; grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 1120px) {
	.dg-form .wpcf7-form { grid-template-columns: 1fr 1fr; }
	.dg-champ-message { grid-column: 1 / -1; grid-row: auto; }
	.dg-profils { grid-column: 1 / -1; }
	.dg-form .wpcf7-submit { grid-column: 1; margin-top: 8px; }
}
@media (max-width: 860px) {
	.dg-form .wpcf7-form { grid-template-columns: 1fr; gap: 26px; }
	.dg-profils { grid-template-columns: 1fr; gap: 18px; }
}


/* ==========================================================================
   Formulaire court de la page « être rappelé »
   ========================================================================== */
.dg-form-rappel .wpcf7-form {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 320px));
	gap: 26px 56px;
	align-items: start;
	margin-left: 0;
	max-width: 760px;
}
.dg-form-rappel .dg-champ-large { grid-column: 1 / -1; }
.dg-form-rappel select {
	width: 100%;
	border: 0;
	border-bottom: 1.4px solid var(--wp--preset--color--encre);
	background: transparent;
	padding: 2px 2px 6px;
	font-family: var(--wp--preset--font-family--texte);
	font-size: var(--wp--preset--font-size--base);
	color: var(--wp--preset--color--encre);
	border-radius: 0;
	outline: none;
}
.dg-form-rappel select:focus { border-bottom-color: var(--wp--preset--color--or); }
.dg-form-rappel textarea { min-height: 96px; }
.dg-form-rappel .wpcf7-submit {
	grid-column: 1;
	justify-self: start;
	margin-top: 10px;
	background: var(--wp--preset--color--noir);
}
.dg-form-rappel .wpcf7-submit:hover { background: var(--wp--preset--color--encre-noire); }
.dg-form-rappel .wpcf7-response-output { grid-column: 1 / -1; }

@media (max-width: 860px) {
	.dg-form-rappel .wpcf7-form { grid-template-columns: 1fr; gap: 22px; }
}