/**
 * Contact Form 7 — Design system commun aux formulaires « Contact » et « Adhésion ».
 *
 * Calé sur la maquette Figma du formulaire d'adhésion (valeurs Tailwind
 * traduites en CSS). Tout est préfixé par .wpcf7-form (wrapper généré par CF7)
 * pour éviter toute collision. Le focus et le bouton réutilisent la couleur
 * primaire du thème (magenta #b00261) exposée par theme.json.
 *
 * @package TCG
 */

/* -------------------------------------------------------------------------
 * Tokens locaux (équivalents des couleurs Tailwind de la maquette)
 * ---------------------------------------------------------------------- */
.wpcf7-form {
	--cf7-border: #e5e7eb;          /* gray-200  : bordure des champs */
	--cf7-label: #374151;           /* gray-700  : libellés */
	--cf7-title: #1f2937;           /* gray-800  : titres de section */
	--cf7-muted: #4b5563;           /* gray-600  : hints, âge */
	--cf7-primary: var( --wp--preset--color--primary );   /* #b00261 */
	/* Survol du bouton : identique au bouton par défaut du thème (theme.json). */
	--cf7-primary-dark: color-mix( in srgb, var( --wp--preset--color--primary ) 90%, #000 );
	--cf7-error: #ef4444;           /* red-500 */
	--cf7-avs-bg: #eff6ff;          /* blue-50 */
	--cf7-avs-border: #bfdbfe;      /* blue-200 */
	--cf7-avs-rule: #93c5fd;        /* blue-300 */
	--cf7-rep-bg: #fffbeb;          /* amber-50 */
	--cf7-rep-border: #fde68a;      /* amber-200 */
	--cf7-rep-rule: #fcd34d;        /* amber-300 */

	max-width: 56rem;               /* max-w-4xl : largeur de lecture, centrée */
	margin-inline: auto;
}

/* Tous les éléments du formulaire incluent padding + bordure dans leur largeur
   (sinon les champs en width:100% débordent de leur colonne). */
.wpcf7-form,
.wpcf7-form *,
.wpcf7-form *::before,
.wpcf7-form *::after {
	box-sizing: border-box;
}

/* CF7 enrobe automatiquement les champs dans des <p> : on neutralise leurs
   marges, l'espacement vertical est géré par .cf7-field-group / les grilles. */
.wpcf7-form p {
	margin: 0;
}

/* -------------------------------------------------------------------------
 * Structure : groupes de champs, grilles responsives, espacements
 * ---------------------------------------------------------------------- */
.wpcf7-form .cf7-field-group {
	display: flex;
	flex-direction: column;
	gap: 0.25rem;                   /* écart label → champ */
	margin-block-end: 0.5rem;       /* écart vertical entre champs (réduit) */
}

.wpcf7-form .cf7-grid-2 .cf7-field-group,
.wpcf7-form .cf7-grid-3 .cf7-field-group {
	margin-block-end: 0;            /* l'espacement est porté par la grille */
}

.wpcf7-form .cf7-grid-2,
.wpcf7-form .cf7-grid-3 {
	display: grid;
	grid-template-columns: 1fr;     /* mobile : 1 colonne */
	gap: 0.5rem;                    /* écart vertical/horizontal réduit */
	margin-block-end: 0.5rem;
}

@media (min-width: 768px) {
	.wpcf7-form .cf7-grid-2 {
		grid-template-columns: repeat( 2, 1fr );   /* md:grid-cols-2 */
	}
	.wpcf7-form .cf7-grid-3 {
		grid-template-columns: repeat( 3, 1fr );   /* md:grid-cols-3 (adresse) */
	}
}

/* -------------------------------------------------------------------------
 * Labels & annotations
 * ---------------------------------------------------------------------- */
.wpcf7-form label {
	font-size: var( --wp--preset--font-size--small );   /* token « Petit » du thème */
	color: var( --cf7-label );
	line-height: 1.3;
}

.wpcf7-form .cf7-required {
	color: var( --cf7-error );      /* astérisque rouge (red-500) */
}

.wpcf7-form .cf7-hint {
	margin: 0 0 0.25rem;
	font-size: var( --wp--preset--font-size--small );
	color: var( --cf7-muted );
}

/* Âge calculé affiché sous la date de naissance. */
.wpcf7-form .cf7-age-display {
	font-size: var( --wp--preset--font-size--small );
	color: var( --cf7-muted );
	min-height: 1em;
}

/* -------------------------------------------------------------------------
 * Champs : inputs / selects en « pilule », textarea arrondi
 * ---------------------------------------------------------------------- */
.wpcf7-form .wpcf7-text,
.wpcf7-form .wpcf7-email,
.wpcf7-form .wpcf7-tel,
.wpcf7-form .wpcf7-date,
.wpcf7-form .wpcf7-number,
.wpcf7-form .wpcf7-select,
.wpcf7-form .wpcf7-textarea {
	width: 100%;
	padding: 8px 12px;              /* px-3 py-2 */
	background-color: #fff;
	border: 1px solid var( --cf7-border );
	color: var( --wp--preset--color--contrast );
	font-family: inherit;
	font-size: var( --wp--preset--font-size--medium );   /* token « Normal » (corps) */
	line-height: 1.4;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
	-webkit-appearance: none;
	appearance: none;
}

.wpcf7-form .wpcf7-text,
.wpcf7-form .wpcf7-email,
.wpcf7-form .wpcf7-tel,
.wpcf7-form .wpcf7-date,
.wpcf7-form .wpcf7-number,
.wpcf7-form .wpcf7-select {
	border-radius: 9999px;          /* rounded-full */
}

.wpcf7-form .wpcf7-textarea {
	border-radius: 12px;
	min-height: 9rem;
	resize: vertical;
}

/* Flèche personnalisée pour les <select> (appearance neutralisée). */
.wpcf7-form .wpcf7-select {
	background-image: url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%23374151' d='M6 8 0 2l1.4-1.4L6 5.2 10.6.6 12 2z'/%3E%3C/svg%3E" );
	background-repeat: no-repeat;
	background-position: right 14px center;
	padding-right: 36px;
	cursor: pointer;
}

.wpcf7-form ::placeholder {
	font-size: var( --wp--preset--font-size--small );
	color: color-mix( in srgb, var( --wp--preset--color--contrast ) 40%, transparent );
}

/*
 * Champs date & select « non renseignés » : leur texte par défaut (format de
 * date vide, option « Sélectionner… ») reprend l'aspect du placeholder des
 * autres champs — même taille (« Petit ») et même couleur (contrast 40 %).
 * La classe `tcg-cf7-empty` est posée/retirée par assets/js/cf7-fields.js selon
 * que le champ est renseigné ou non ; une fois rempli, le champ retrouve le
 * corps normal (contrast plein, taille « Normal »).
 */
.wpcf7-form .wpcf7-select.tcg-cf7-empty,
.wpcf7-form .wpcf7-date.tcg-cf7-empty {
	font-size: var( --wp--preset--font-size--small );
	color: color-mix( in srgb, var( --wp--preset--color--contrast ) 40%, transparent );
}

/* WebKit : le texte-format d'une <input type="date"> vide passe par ce pseudo. */
.wpcf7-form .wpcf7-date.tcg-cf7-empty::-webkit-datetime-edit {
	color: color-mix( in srgb, var( --wp--preset--color--contrast ) 40%, transparent );
}

/* Focus : anneau couleur primaire du thème (magenta) + bordure transparente. */
.wpcf7-form .wpcf7-text:focus,
.wpcf7-form .wpcf7-email:focus,
.wpcf7-form .wpcf7-tel:focus,
.wpcf7-form .wpcf7-date:focus,
.wpcf7-form .wpcf7-number:focus,
.wpcf7-form .wpcf7-select:focus,
.wpcf7-form .wpcf7-textarea:focus {
	outline: none;
	border-color: transparent;      /* focus:border-transparent */
	box-shadow: 0 0 0 2px var( --cf7-primary );   /* focus:ring-2 (magenta) */
}

/* -------------------------------------------------------------------------
 * Sections (formulaire d'adhésion)
 * ---------------------------------------------------------------------- */
.wpcf7-form .cf7-section {
	margin-block-end: 1rem;         /* space-y-4 entre sections */
}

.wpcf7-form .cf7-section > h2 {
	margin: 0 0 0.75rem;
	padding-block-end: 0.375rem;    /* pb-1.5 */
	/* Force Inter en casse normale : la maquette n'utilise pas la police de
	   titre du thème (Heavitas, en capitales) pour les sections du formulaire. */
	font-family: var( --wp--preset--font-family--inter );
	font-size: var( --wp--preset--font-size--medium );   /* token « Normal » */
	font-weight: 700;               /* font-bold */
	line-height: 1.4;
	text-transform: none;
	letter-spacing: normal;
	color: var( --cf7-title );
	border-block-end: 1px solid var( --cf7-border );   /* border-b fin */
}

/* « Badge » d'âge et « (optionnel) » : intégrés au titre comme du texte simple
   (la maquette les affiche en toutes lettres, même graisse que le titre). */
.wpcf7-form .cf7-section > h2 .cf7-badge-age,
.wpcf7-form .cf7-section > h2 .cf7-optional {
	font: inherit;
	color: inherit;
	background: none;
	padding: 0;
	margin: 0;
	text-transform: none;
	letter-spacing: normal;
	border-radius: 0;
}

/* Parenthèses autour du badge d'âge (le texte source n'en contient pas). */
.wpcf7-form .cf7-badge-age::before { content: "("; }
.wpcf7-form .cf7-badge-age::after  { content: ")"; }

/* Section AVS (moins de 21 ans) : encadré bleu très clair. */
.wpcf7-form .cf7-section-avs {
	padding: 0.75rem;               /* p-3 */
	border-radius: 0.5rem;          /* rounded-lg */
	background-color: var( --cf7-avs-bg );
	border: 2px solid var( --cf7-avs-border );   /* border-2 */
}
.wpcf7-form .cf7-section-avs > h2 {
	border-block-end-color: var( --cf7-avs-rule );   /* border-blue-300 */
}

/* Section représentant légal (moins de 18 ans) : encadré ambre très clair. */
.wpcf7-form .cf7-section-representant {
	padding: 0.75rem;
	border-radius: 0.5rem;
	background-color: var( --cf7-rep-bg );
	border: 2px solid var( --cf7-rep-border );
}
.wpcf7-form .cf7-section-representant > h2 {
	border-block-end-color: var( --cf7-rep-rule );   /* border-amber-300 */
}

/* Sections conditionnelles : masquées par défaut, révélées par le JS. */
.wpcf7-form .cf7-section-avs,
.wpcf7-form .cf7-section-representant {
	display: none;
}
.wpcf7-form .cf7-section-avs.is-visible,
.wpcf7-form .cf7-section-representant.is-visible {
	display: block;
	animation: cf7-reveal 0.2s ease;
}

@keyframes cf7-reveal {
	from { opacity: 0; transform: translateY( -6px ); }
	to   { opacity: 1; transform: translateY( 0 ); }
}

/* -------------------------------------------------------------------------
 * Bouton submit : reprend le design du bouton par défaut du thème (theme.json),
 * en largeur automatique.
 * ---------------------------------------------------------------------- */
.wpcf7-form .cf7-submit-wrap,
.wpcf7-form p:has( > .wpcf7-submit ) {
	margin-block-start: 2rem;       /* respiration au-dessus du bouton */
}

.wpcf7-form .wpcf7-submit {
	display: inline-block;
	width: auto;                    /* largeur naturelle (bouton par défaut) */
	padding: 0.5em 1.2em;       /* padding du bouton du thème */
	border: none;
	border-radius: 100px;           /* radius du bouton du thème */
	background-color: var( --cf7-primary );
	color: var( --wp--preset--color--base );
	font-family: inherit;
	font-size: inherit;             /* hérite du corps, comme le bouton du thème */
	font-weight: inherit;
	line-height: inherit;
	text-align: center;
	cursor: pointer;
	transition: background-color 0.15s ease;
}

.wpcf7-form .wpcf7-submit:hover,
.wpcf7-form .wpcf7-submit:focus-visible {
	background-color: var( --cf7-primary-dark );   /* #8a014d */
}

.wpcf7-form .wpcf7-submit:disabled {
	opacity: 0.6;
	cursor: not-allowed;
}

/* -------------------------------------------------------------------------
 * Erreurs de validation CF7
 * ---------------------------------------------------------------------- */
.wpcf7-form .wpcf7-not-valid-tip {
	display: block;
	margin-block-start: 0.25rem;    /* mt-1 */
	color: var( --cf7-error );
	font-size: var( --wp--preset--font-size--small );
}

.wpcf7-form .wpcf7-not-valid {
	border-color: var( --cf7-error ) !important;
}

.wpcf7-form .wpcf7-not-valid:focus {
	box-shadow: 0 0 0 2px var( --cf7-error );
}

/* Réponse globale du formulaire (succès / erreur). */
.wpcf7-form .wpcf7-response-output {
	margin: 1rem 0 0;
	padding: 0.75rem 1rem;
	border-radius: 0.5rem;
	font-size: var( --wp--preset--font-size--small );
}

.wpcf7-form.sent .wpcf7-response-output {
	border: 1px solid var( --wp--preset--color--secondary );
	background-color: color-mix( in srgb, var( --wp--preset--color--secondary ) 12%, #fff );
}

.wpcf7-form.invalid .wpcf7-response-output,
.wpcf7-form.unaccepted .wpcf7-response-output,
.wpcf7-form.failed .wpcf7-response-output {
	border: 1px solid var( --cf7-error );
	background-color: color-mix( in srgb, var( --cf7-error ) 8%, #fff );
	color: var( --cf7-error );
}

.wpcf7-form .wpcf7-spinner {
	margin-inline-start: 0.5rem;
}

/* -------------------------------------------------------------------------
 * Page de confirmation d'adhésion (récap minimal — QR géré séparément)
 * ---------------------------------------------------------------------- */
.tcg-confirmation {
	text-align: left;
}

.tcg-confirmation__check {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 64px;
	height: 64px;
	margin-block-end: 1rem;
	border-radius: 9999px;
	background-color: color-mix( in srgb, var( --wp--preset--color--secondary ) 18%, #fff );
	color: var( --wp--preset--color--secondary );
	font-size: 2rem;
	line-height: 1;
}

.tcg-confirmation__name {
	font-weight: 700;
	color: var( --wp--preset--color--primary );
}