/*
 * PE Brand — compléments que theme.json ne couvre pas.
 * Tokens: vert foncé #114C24, vert #17925A, vert profond #093A24,
 * crème #FFFAE6, jaune #FFE680, anthracite #303235.
 */

/* Ombre douce au survol des boutons (site source: 0 4px 10px + 0 1px 3px). */
.wp-block-button__link:hover,
.wp-element-button:hover {
	box-shadow: 0 4px 10px 0 rgba(50, 50, 93, 0.226), 0 1px 3px 0 rgba(0, 0, 0, 0.08);
}

/* Variante "outline" du bloc bouton: filet vert, fond transparent, filet
   renforcé au survol (site source: inset 1px -> 2px). */
.wp-block-button.is-style-outline .wp-block-button__link {
	background: transparent;
	color: var(--wp--preset--color--pe-dark-green);
	border: 1px solid var(--wp--preset--color--pe-dark-green);
}

.wp-block-button.is-style-outline .wp-block-button__link:hover {
	border-width: 2px;
	/* compense le px ajouté pour éviter le décalage du texte */
	margin: -1px;
	box-shadow: none;
}

/* Liens sur fond vert foncé (en-tête / pied de page): crème -> jaune. */
.pe-on-dark a:where(:not(.wp-element-button)) {
	color: var(--wp--preset--color--pe-cream);
}

.pe-on-dark a:where(:not(.wp-element-button)):hover {
	color: var(--wp--preset--color--pe-yellow);
}

/* ------------------------------------------------------------------ */
/* Contact Form 7 — l'instance adhesion est pilotée par CF7.           */
/* ------------------------------------------------------------------ */

.wpcf7 input[type="text"],
.wpcf7 input[type="email"],
.wpcf7 input[type="tel"],
.wpcf7 input[type="url"],
.wpcf7 input[type="number"],
.wpcf7 input[type="date"],
.wpcf7 select,
.wpcf7 textarea {
	width: 100%;
	max-width: 100%;
	padding: 0.6em 0.8em;
	border: 1px solid #c6cbd1;
	border-radius: 6px;
	background: var(--wp--preset--color--pe-white);
	color: var(--wp--preset--color--pe-charcoal);
	font: inherit;
	box-sizing: border-box;
}

.wpcf7 input:focus,
.wpcf7 select:focus,
.wpcf7 textarea:focus {
	outline: 2px solid var(--wp--preset--color--pe-green);
	outline-offset: 1px;
	border-color: var(--wp--preset--color--pe-green);
}

.wpcf7 input[type="submit"],
.wpcf7 button[type="submit"] {
	display: inline-flex;
	justify-content: center;
	align-items: center;
	padding: 0.7em 1.2em;
	border: none;
	border-radius: 20px;
	background: var(--wp--preset--color--pe-dark-green);
	color: var(--wp--preset--color--pe-cream);
	font-weight: 500;
	font-size: 1.05em;
	cursor: pointer;
	transition: all 0.2s ease-in-out;
}

.wpcf7 input[type="submit"]:hover,
.wpcf7 button[type="submit"]:hover {
	background: var(--wp--preset--color--pe-deep-green);
	box-shadow: 0 4px 10px 0 rgba(50, 50, 93, 0.226), 0 1px 3px 0 rgba(0, 0, 0, 0.08);
}

.wpcf7 .wpcf7-not-valid-tip {
	color: #de2020;
	font-size: 0.875em;
}

.wpcf7 .wpcf7-response-output {
	border-radius: 6px;
	padding: 0.7em 1em;
	margin: 1.5em 0 0;
}

.wpcf7 form.sent .wpcf7-response-output {
	border-color: var(--wp--preset--color--pe-green);
	background: rgba(23, 146, 90, 0.05);
}

.wpcf7 form.invalid .wpcf7-response-output,
.wpcf7 form.failed .wpcf7-response-output {
	border-color: #de2020;
	background: rgba(222, 32, 32, 0.05);
}

/* ------------------------------------------------------------------ */
/* Formulaire d'adhésion multi-étapes — tokens échantillonnés sur le   */
/* formulaire d'origine (spec §2), volontairement distincts de la      */
/* palette du thème: vert #089457, marine #091747, bleu #284FAC.       */
/* ------------------------------------------------------------------ */

.pe-form-card {
	max-width: 600px;
	margin: 2rem auto;
	background: #FFFFFF;
	border: 1px solid #E6E9EE;
	border-radius: 10px;
	padding: 2rem 2.2rem;
}

.pe-form-card h1,
.pe-form-card h2 {
	color: #091747;
	font-size: 1.6rem;
	text-align: center;
}

/* Étapes 1/2/5: titres centrés; libellés de champs bleus et gras. */
.pe-form-card .pe-label,
.pe-form-card label {
	color: #284FAC;
	font-weight: 700;
	display: block;
	margin-bottom: 0.35em;
}

.pe-form-card .pe-required {
	color: #de2020;
}

.pe-form-card .pe-help {
	color: #284FAC;
	font-size: 0.9em;
	font-weight: 400;
	margin: 0.3em 0 0;
}

.pe-form-card .pe-help a,
.pe-form-card a.pe-link {
	color: #168A17;
}

/* Un champ = un bloc séparé par un filet fin. */
.pe-form-card .pe-field {
	padding: 0.9em 0;
	border-bottom: 1px solid #E6E9EE;
}

.pe-form-card .pe-field:last-of-type {
	border-bottom: none;
}

/* --- Barre de progression 1–5 ------------------------------------- */

.pe-steps {
	display: flex;
	list-style: none;
	justify-content: space-between;
	align-items: flex-start;
	margin: 0 0 2rem;
	padding: 0;
	counter-reset: pe-step;
}

.pe-steps li {
	position: relative;
	flex: 1;
	text-align: center;
}

.pe-steps li::before {
	counter-increment: pe-step;
	content: counter(pe-step);
	display: inline-flex;
	justify-content: center;
	align-items: center;
	width: 2.2em;
	height: 2.2em;
	border-radius: 50%;
	border: 2px solid #089457;
	background: #FFFFFF;
	color: #089457;
	font-weight: 700;
}

/* Ligne de liaison verte entre les pastilles. */
.pe-steps li + li::after {
	content: "";
	position: absolute;
	top: 1.1em;
	right: calc(50% + 1.3em);
	left: calc(-50% + 1.3em);
	height: 2px;
	background: #089457;
}

.pe-steps li.is-current::before {
	background: #089457;
	color: #FFFFFF;
}

.pe-steps li.is-done::before {
	content: "\2713";
	background: #089457;
	color: #FFFFFF;
}

/* --- Boutons de navigation ← → (pilule verte) ---------------------- */

.pe-form-card .wpcf7 input[type="submit"],
.pe-form-card .wpcf7 button[type="submit"] {
	background: #089457;
	color: #FFFFFF;
	border-radius: 2em;
	min-width: 4.5em;
}

.pe-form-card .wpcf7 input[type="submit"]:hover,
.pe-form-card .wpcf7 button[type="submit"]:hover {
	background: #06713F;
}

/* Bouton « précédent » du module multi-step. */
.pe-form-card .cf7msm-back,
.pe-form-card input.wpcf7-previous {
	display: inline-flex;
	justify-content: center;
	align-items: center;
	padding: 0.7em 1.2em;
	border: 2px solid #089457;
	border-radius: 2em;
	background: #FFFFFF;
	color: #089457;
	font-weight: 500;
	font-size: 1.05em;
	cursor: pointer;
	margin-right: 0.6em;
}

.pe-form-card .pe-nav {
	display: flex;
	justify-content: center;
	gap: 0.6em;
	margin-top: 1.5rem;
}

/* --- Étape 3: rangées de cases à cocher pleine largeur ------------- */

.pe-choice-rows .wpcf7-checkbox,
.pe-choice-rows .wpcf7-radio {
	display: block;
}

.pe-choice-rows .wpcf7-list-item {
	display: flex;
	flex-direction: row-reverse;
	justify-content: space-between;
	align-items: center;
	gap: 1em;
	margin: 0.45em 0;
	padding: 0.75em 1em;
	background: #F8F8F8;
	border-radius: 6px;
	color: #284FAC;
}

.pe-choice-rows .wpcf7-list-item-label {
	flex: 1 1 auto;
	font-weight: 400;
	color: #284FAC;
}

/* flex-shrink:0 — sinon une étiquette longue (étape 3, « J'adhère avant tout
   pour… ») écrase la puce et la rend ovale, alors que les étiquettes courtes
   restent rondes. */
.pe-choice-rows input[type="checkbox"],
.pe-choice-rows input[type="radio"] {
	flex: 0 0 auto;
	accent-color: #089457;
	width: 1.15em;
	height: 1.15em;
}

/* --- Page de paiement (étape 5): sélecteur + cartes de cotisation -- */

.scf7-toggle-btn {
	font-weight: 600;
}

.scf7-plans {
	display: grid !important;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 1.2em !important;
}

@media (max-width: 560px) {
	.scf7-plans {
		grid-template-columns: 1fr;
	}
}

.scf7-plan-card {
	max-width: none !important;
	border: 1px solid #E6E9EE !important;
}

.scf7-plan-card .scf7-plan-name {
	color: #091747;
	font-size: 1.1rem;
}

.scf7-plan-card .scf7-plan-desc {
	color: #284FAC;
}

.scf7-plan-card .scf7-plan-price {
	color: #091747;
	font-size: 1.5em !important;
	font-weight: 700 !important;
}

.scf7-plan-btn {
	background: #091747 !important;
	border-radius: 2em !important;
	font-weight: 600;
}

.scf7-plan-btn:hover {
	box-shadow: 0 4px 10px 0 rgba(50, 50, 93, 0.226), 0 1px 3px 0 rgba(0, 0, 0, 0.08);
}

/* --- Autosuggest (INSEE entreprise + adresse BAN): habillage marque -- */

.insee-dropdown {
	border-color: #E6E9EE;
	border-radius: 0 0 8px 8px;
}

.insee-dropdown__item strong {
	color: #091747;
}

.insee-dropdown__item span {
	color: #284FAC;
}

.insee-dropdown__item:hover,
.insee-dropdown__item.is-active {
	background: rgba(8, 148, 87, 0.08);
}