/**
 * Contact : particuliers et entreprises (bloc cdz/demande).
 *
 * Même vocabulaire que le formulaire de contact, dont la feuille est chargée
 * avant celle-ci : papier, encre, céladon, un seul rouge, les rayons du
 * thème. Les champs texte reprennent ses classes ; ce fichier n'ajoute que ce
 * qu'il n'a pas : les cartes de profil, les étapes, les puces de choix.
 *
 * Le geste de la page : le sceau cinabre qui se pose sur le profil choisi,
 * le même mouvement que le cachet des dates sur les pages atelier.
 *
 * Sans script : :has() lit le profil coché, affiche la demande et retire le
 * nom de structure pour un particulier. Sans :has(), tout reste visible, et
 * le serveur ignore la structure d'un particulier.
 */

.cdz-demande {
	--cdz-papier: var( --wp--preset--color--papier, #fbfaf7 );
	--cdz-papier-creux: var( --wp--preset--color--papier-creux, #f2efe9 );
	--cdz-encre: var( --wp--preset--color--encre, #23211e );
	--cdz-encre-doux: var( --wp--preset--color--encre-doux, #6c6660 );
	--cdz-celadon: var( --wp--preset--color--celadon, #e4ebe4 );
	--cdz-celadon-trait: var( --wp--preset--color--celadon-trait, #b9c9bc );
	--cdz-cinabre: var( --wp--preset--color--cinabre, #a6332a );
	--cdz-lavis: var( --cdz-celadon );
	--cdz-rayon: var( --wp--custom--rayon, 6px );
	--cdz-rayon-bouton: var( --wp--custom--rayon-bouton, 4px );

	scroll-margin-top: calc( var( --hauteur-entete, 4.75rem ) + 1.25rem );
	color: var( --cdz-encre );
}

@supports ( background: color-mix( in srgb, red, blue ) ) {
	.cdz-demande {
		--cdz-lavis: color-mix( in srgb, var( --cdz-celadon ) 55%, var( --cdz-papier ) );
	}
}

/* Le thème ne règle pas box-sizing : sans cette ligne, le rembourrage
   s'ajoute aux hauteurs et largeurs (puces de 62 px au lieu de 44). */
.cdz-demande,
.cdz-demande *,
.cdz-demande *::before,
.cdz-demande *::after {
	box-sizing: border-box;
}

.cdz-demande .cdz-lecteur {
	position: absolute !important;
	width: 1px !important;
	height: 1px !important;
	padding: 0 !important;
	margin: -1px !important;
	overflow: hidden !important;
	white-space: nowrap !important;
	border: 0 !important;
	clip-path: inset( 50% ) !important;
}

.cdz-requis {
	color: var( --cdz-cinabre );
}

.cdz-facultatif {
	font-weight: 400;
	color: var( --cdz-encre-doux );
}

/* --- Profil : trois cartes, un sceau chacune ----------------------------- */

.cdz-profil {
	min-width: 0;
	margin: 0;
	padding: 0;
	border: 0;
}

.cdz-profil > legend {
	padding: 0;
	margin-bottom: 1.1rem;
	font-family: var( --wp--preset--font-family--titre, serif );
	font-size: clamp( 1.4rem, 1.25rem + 0.6vw, 1.65rem );
	font-weight: 600;
	line-height: 1.25;
}

.cdz-profil > .cdz-contact__erreur {
	margin: -0.4rem 0 0.9rem;
}

.cdz-profil__choix {
	display: grid;
	gap: 0.75rem;
}

/* Trois de front seulement quand chacune a la place de respirer. */
@media ( min-width: 48em ) {
	.cdz-profil__choix {
		grid-template-columns: repeat( 3, minmax( 0, 1fr ) );
	}
}

.cdz-profil__option {
	position: relative;
	display: block;
	cursor: pointer;
}

/* Le bouton (radio ou case) reste dans la page, pour le clavier et les
   lecteurs d'écran ; c'est la carte, ou la puce, qui le montre. */
.cdz-profil__option input,
.cdz-puce input {
	position: absolute;
	top: 0;
	left: 0;
	width: 1px;
	height: 1px;
	margin: 0;
	opacity: 0;
}

.cdz-profil__carte {
	display: grid;
	grid-template-columns: auto minmax( 0, 1fr );
	grid-template-rows: auto 1fr;
	gap: 0.3rem 1rem;
	align-items: start;
	height: 100%;
	padding: 1rem 1.1rem 1.15rem;
	background: var( --cdz-papier );
	border: 1px solid var( --cdz-celadon-trait );
	border-radius: var( --cdz-rayon );
	transition: border-color 120ms ease, background-color 120ms ease;
}

.cdz-profil__sceau {
	display: flex;
	flex-direction: column;
	grid-row: 1 / span 2;
	align-items: center;
	justify-content: center;
	width: 2.5rem;
	height: 3.6rem;
	font-family: var( --police-cjk, serif );
	font-size: 1.1rem;
	font-weight: 600;
	line-height: 1.12;
	color: var( --cdz-celadon-trait );
	border: 1.5px solid currentColor;
	border-radius: 2px;
}

.cdz-profil__nom {
	font-family: var( --wp--preset--font-family--titre, serif );
	font-size: 1.25rem;
	font-weight: 600;
	line-height: 1.2;
}

.cdz-profil__aide {
	font-size: 0.875rem;
	line-height: 1.4;
	color: var( --cdz-encre-doux );
}

.cdz-profil__option:hover .cdz-profil__carte {
	border-color: var( --cdz-encre );
}

.cdz-profil__option input:checked + .cdz-profil__carte {
	background: var( --cdz-lavis );
	border-color: var( --cdz-encre );
	box-shadow: inset 0 0 0 1px var( --cdz-encre );
}

.cdz-profil__option input:checked + .cdz-profil__carte .cdz-profil__sceau {
	color: var( --cdz-papier );
	background: var( --cdz-cinabre );
	border-color: var( --cdz-cinabre );
	animation: cdz-demande-sceau 480ms cubic-bezier( 0.2, 0.9, 0.25, 1.15 ) both;
}

.cdz-profil__option input:focus-visible + .cdz-profil__carte,
.cdz-puce input:focus-visible + span {
	outline: 2px solid var( --cdz-cinabre );
	outline-offset: 2px;
}

@keyframes cdz-demande-sceau {
	0% {
		opacity: 0;
		transform: scale( 1.6 ) rotate( -8deg );
	}

	60% {
		opacity: 1;
	}

	100% {
		opacity: 1;
		transform: none;
	}
}

/* --- La demande, une fois le profil choisi ------------------------------- */

.cdz-demande__invite {
	display: none;
	margin: 1.5rem 0 0;
	padding: 1rem 1.25rem;
	font-size: 0.9375rem;
	color: var( --cdz-encre-doux );
	background: var( --cdz-papier-creux );
	border-radius: var( --cdz-rayon );
}

.cdz-demande__panneau {
	margin-top: 2.75rem;
}

@supports selector( :has( * ) ) {
	.cdz-demande:not( :has( .cdz-profil input:checked ) ) .cdz-demande__invite {
		display: block;
	}

	.cdz-demande:not( :has( .cdz-profil input:checked ) ) .cdz-demande__panneau,
	.cdz-demande:has( .cdz-profil input[value="particulier"]:checked ) .cdz-champ--structure {
		display: none;
	}

	/* Une erreur ou une confirmation reste visible, même sans profil coché
	   (adresse fabriquée à la main, robot) : on ne cache jamais une réponse. */
	.cdz-demande:not( :has( .cdz-profil input:checked ) ) .cdz-demande__panneau:has( .cdz-contact__bilan, .cdz-contact__merci ) {
		display: block;
	}

	.cdz-demande__panneau {
		animation: cdz-demande-apparition 220ms ease-out both;
	}
}

@keyframes cdz-demande-apparition {
	from {
		opacity: 0;
		transform: translateY( 0.4rem );
	}

	to {
		opacity: 1;
		transform: none;
	}
}

/* --- Demande : quatre étapes --------------------------------------------- */

.cdz-projet {
	margin: 0;
}

.cdz-projet__legende {
	margin: 0 0 0.25rem;
	font-size: 0.875rem;
	color: var( --cdz-encre-doux );
}

/* Venu d'une page atelier : l'atelier concerné, en tête de la demande. */
.cdz-projet__atelier {
	margin: 0.75rem 0 0;
	padding: 0.8rem 1rem;
	background: var( --cdz-lavis );
	border-radius: var( --cdz-rayon );
}

.cdz-projet__atelier a {
	font-weight: 600;
	color: inherit;
	text-underline-offset: 0.2em;
}

.cdz-projet > .cdz-contact__bilan {
	margin: 0.75rem 0 0.5rem;
}

.cdz-etape {
	position: relative;
	padding-top: 2.25rem;
}

.cdz-etape + .cdz-etape {
	margin-top: 2.75rem;
	border-top: 1px solid var( --cdz-celadon-trait );
}

.cdz-etape__titre {
	position: relative;
	display: flex;
	gap: 0.85rem;
	align-items: center;
	margin: 0 0 1.5rem;
	font-family: var( --wp--preset--font-family--titre, serif );
	font-size: clamp( 1.4rem, 1.25rem + 0.6vw, 1.7rem );
	line-height: 1.2;
	letter-spacing: normal;
}

/* Le numéro de l'étape, dans un sceau au trait. */
.cdz-etape__num {
	display: grid;
	flex: none;
	place-items: center;
	width: 2.2rem;
	height: 2.2rem;
	font-family: var( --wp--preset--font-family--titre, serif );
	font-size: 1.2rem;
	font-weight: 500;
	font-variant-numeric: lining-nums;
	line-height: 1;
	color: var( --cdz-cinabre );
	border: 1.5px solid currentColor;
	border-radius: 2px;
}

/* Grand écran : le numéro passe dans la marge, comme une note. */
@media ( min-width: 64em ) {
	.cdz-etape__num {
		position: absolute;
		top: 50%;
		left: -3.6rem;
		transform: translateY( -50% );
	}
}

.cdz-etape > * + * {
	margin-top: 1.75rem;
}

.cdz-etape > .cdz-etape__titre + * {
	margin-top: 0;
}

/* --- Questions à choix ---------------------------------------------------- */

/* Pas de « margin » ici : l'espacement vient de « .cdz-etape > * + * »,
   qu'une déclaration de même poids placée plus bas annulerait. */
.cdz-question {
	min-width: 0;
	padding: 0;
	border: 0;
}

.cdz-question > legend {
	padding: 0;
	margin-bottom: 0.7rem;
	font-size: 0.9375rem;
	font-weight: 600;
	line-height: 1.35;
}

.cdz-projet .cdz-contact__champ label {
	font-size: 0.9375rem;
}

.cdz-question__aide {
	display: block;
	margin: -0.3rem 0 0.75rem;
	font-size: 0.875rem;
	line-height: 1.45;
	color: var( --cdz-encre-doux );
}

.cdz-contact__champ .cdz-question__aide {
	margin: -0.2rem 0 0.1rem;
}

.cdz-question > .cdz-contact__erreur {
	margin: -0.25rem 0 0.75rem;
}

.cdz-puces {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
}

.cdz-puce {
	position: relative;
	display: inline-flex;
}

.cdz-puce > span {
	display: inline-flex;
	gap: 0.6rem;
	align-items: center;
	min-height: 2.75rem;
	padding: 0.5rem 0.95rem 0.5rem 0.8rem;
	font-size: 0.9375rem;
	line-height: 1.3;
	cursor: pointer;
	background: var( --cdz-papier );
	border: 1px solid var( --cdz-celadon-trait );
	border-radius: var( --cdz-rayon-bouton );
	transition: border-color 120ms ease, background-color 120ms ease;
}

/* Le témoin : carré pour « plusieurs choix », rond pour « un seul ». */
.cdz-puce > span::before {
	content: "";
	flex: none;
	width: 0.75rem;
	height: 0.75rem;
	border: 1.5px solid var( --cdz-encre-doux );
	border-radius: 1px;
}

.cdz-puce input[type="radio"] + span::before {
	border-radius: 50%;
}

.cdz-puce:hover > span {
	border-color: var( --cdz-encre );
}

.cdz-puce input:checked + span {
	background: var( --cdz-lavis );
	border-color: var( --cdz-encre );
}

.cdz-puce input:checked + span::before {
	background: var( --cdz-cinabre );
	border-color: var( --cdz-cinabre );
}

.cdz-puce input[type="radio"]:checked + span::before {
	box-shadow: inset 0 0 0 2px var( --cdz-lavis );
}

/* --- Date ou période ----------------------------------------------------- */

.cdz-date {
	display: grid;
	gap: 0.6rem 1rem;
	align-items: end;
}

@media ( min-width: 40em ) {
	.cdz-date {
		grid-template-columns: minmax( 0, 1fr ) auto minmax( 0, 1fr );
	}
}

.cdz-date__ou {
	margin: 0;
	font-family: var( --wp--preset--font-family--titre, serif );
	font-style: italic;
	line-height: 1;
	color: var( --cdz-encre-doux );
}

@media ( min-width: 40em ) {
	.cdz-date__ou {
		padding-bottom: 1.05rem;
	}
}

/* Les deux champs côte à côte ont la même hauteur : sinon leurs filets
   d'encre ne s'alignent pas (le champ date est plus bas de 2 px). */
.cdz-date .cdz-contact__champ input {
	height: 3.2rem;
}

.cdz-projet .cdz-contact__champ input::placeholder {
	color: var( --cdz-encre-doux );
	opacity: 1;
}

/* --- Adresse : seulement quand le lieu en demande une -------------------- */

.cdz-etape > .cdz-adresse {
	margin-top: 1rem;
}

@supports selector( :has( * ) ) {
	.cdz-adresse {
		display: none;
	}

	.cdz-projet:has( input[name="cdz_lieu"]:is( [value="locaux"], [value="domicile"], [value="partenaire"] ):checked ) .cdz-adresse {
		display: flex;
		animation: cdz-demande-apparition 180ms ease-out both;
	}
}

@media ( min-width: 40em ) {
	.cdz-adresse input,
	.cdz-champ--demi input {
		max-width: calc( 50% - 0.75rem );
	}
}

/* --- Envoi --------------------------------------------------------------- */

.cdz-projet .cdz-contact__pied {
	align-items: flex-end;
}

.cdz-projet .cdz-contact__mention {
	max-width: 52ch;
}

.cdz-demande__autre {
	color: inherit;
	text-underline-offset: 0.2em;
}

@media ( prefers-reduced-motion: reduce ) {
	.cdz-profil__option input:checked + .cdz-profil__carte .cdz-profil__sceau,
	.cdz-demande__panneau,
	.cdz-adresse {
		animation: none !important;
	}

	.cdz-profil__carte,
	.cdz-puce > span {
		transition: none;
	}
}