/**
 * Formulaire de bulletin d'adhésion.
 *
 * Reprend les jetons de la charte, déjà déclarés par CGT Publications
 * (--cgt-a-rouge, --cgt-a-noir, --cgt-a-titre, --cgt-a-corps). Les valeurs de
 * repli permettent au formulaire d'être posé sur une page où cette feuille
 * n'est pas chargée.
 *
 * @package CGT_Adhesion
 */

.cgt-adhesion {
	--cgt-ad-rouge: var( --cgt-a-rouge, #ed0a30 );
	--cgt-ad-noir: var( --cgt-a-noir, #212529 );
	--cgt-ad-jaune: var( --cgt-a-jaune, #fad90b );
	--cgt-ad-titre: var( --cgt-a-titre, "Boldonse", "Mona Sans", "Helvetica Neue", Arial, sans-serif );
	--cgt-ad-corps: var( --cgt-a-corps, "Mona Sans", "Helvetica Neue", Arial, sans-serif );

	--cgt-ad-trait: #d9dbde;
	--cgt-ad-gris: #6c757d;
	--cgt-ad-erreur: #b3261e;
	--cgt-ad-succes: #1d6b3a;

	/* Rayon des champs et du bouton dans la charte. */
	--cgt-ad-rayon: 8px;
	/* Écart entre colonnes. */
	--cgt-ad-gap: 24px;
	/* Écart entre deux blocs de premier niveau : groupes, captcha, bouton. */
	--cgt-ad-bloc: 28px;

	width: 100%;
	font-family: var( --cgt-ad-corps );
}

/* ---------------------------------------------------------------------
 * Groupes et grille
 * ------------------------------------------------------------------ */

/*
 * Les marges verticales du thème sur les fieldset et les paragraphes
 * s'ajoutent aux nôtres et creusent des trous : on les remet à plat, puis
 * un seul écart sépare les blocs de premier niveau.
 */
.cgt-adhesion__form > * {
	margin-top: 0 !important;
}

.cgt-adhesion__groupe {
	margin: 0 0 var( --cgt-ad-bloc ) !important;
	padding: 0 !important;
	border: 0;
}

/*
 * Titre de section, calqué sur .cgt-article__h2 du gabarit d'article :
 * Boldonse, capitales, noir, sans fond. Le pavé noir de la charte a été
 * écarté ici — sa forme est celle d'un bouton, et un titre non cliquable
 * ne doit pas emprunter l'apparence d'une commande.
 *
 * Un seul trait : le filet rouge sous le libellé. Une bordure basse sur
 * toute la largeur viendrait le doubler.
 */
.cgt-adhesion__legende {
	display: block;
	width: 100%;
	margin: 0 0 22px;
	padding: 0;
	border: 0;
	color: var( --cgt-ad-noir );
	font-family: var( --cgt-ad-titre );
	font-size: 16px;
	font-weight: 400;
	line-height: normal;
	letter-spacing: 0;
	text-transform: uppercase;
}

/*
 * Le filet rouge épouse la largeur du texte, ce que ::after ne saurait
 * faire sur une <legend> : d'où le trait posé sous le libellé lui-même.
 */
.cgt-adhesion__legende span {
	display: inline-block;
	padding-bottom: 8px;
	box-shadow: inset 0 -3px 0 0 var( --cgt-ad-rouge );
}

@media ( max-width: 782px ) {

	.cgt-adhesion__legende {
		font-size: 14px;
	}
}

/*
 * Deux colonnes égales, qui n'en font plus qu'une sous 782 px. Le seuil
 * correspond à celui de la barre d'administration WordPress, déjà utilisé
 * par le thème : les ruptures du site restent alignées.
 *
 * L'espacement vertical est porté par `gap` et non par une marge basse sur
 * les champs : une marge laisse toujours un blanc sous la dernière rangée,
 * qui s'ajoute à celle du groupe et creuse un trou.
 */
.cgt-adhesion__grille {
	display: grid;
	grid-template-columns: repeat( 2, minmax( 0, 1fr ) );
	gap: 20px var( --cgt-ad-gap );
	align-items: start;
}

/* Champs dont la valeur attendue est longue, et groupes de boutons radio,
   qui se lisent mal sur une demi-largeur. */
.cgt-adhesion__champ--large,
.cgt-adhesion__champ--radio {
	grid-column: 1 / -1;
}

@media ( max-width: 782px ) {

	.cgt-adhesion__grille {
		grid-template-columns: 1fr;
		gap: 20px;
	}

	.cgt-adhesion__champ--large,
	.cgt-adhesion__champ--radio {
		grid-column: auto;
	}
}

/* ---------------------------------------------------------------------
 * Champs
 * ------------------------------------------------------------------ */

.cgt-adhesion__champ {
	min-width: 0; /* sans quoi un champ large déborde de sa colonne */
	margin: 0;
}

.cgt-adhesion__champ label {
	display: block;
	margin-bottom: 6px;
	color: var( --cgt-ad-noir );
	font-size: 14px;
	font-weight: 600;
	line-height: 1.5;
}

/*
 * Le thème repeint bordure, ombre et contour des champs au focus, ce qui
 * empile ses anneaux sur les nôtres. On reprend la main une fois pour
 * toutes ici plutôt que de compenser règle par règle.
 */
.cgt-adhesion input,
.cgt-adhesion button,
.cgt-adhesion select,
.cgt-adhesion textarea {
	box-shadow: none !important;
	transition: none !important;
}

/*
 * Les sélecteurs de champ texte sont énumérés un à un : un simple `input`
 * attraperait aussi les cases et les boutons radio, qui n'ont ni bordure
 * ni remplissage à eux.
 */
.cgt-adhesion__champ select,
.cgt-adhesion__champ input[type="text"],
.cgt-adhesion__champ input[type="email"],
.cgt-adhesion__champ input[type="tel"],
.cgt-adhesion__champ input[type="date"],
.cgt-adhesion__champ input[type="number"] {
	box-sizing: border-box;
	width: 100%;
	/* Gabarit du champ de recherche de la charte : 12 px en haut et en bas,
	   20 px sur les côtés, rayon 8 px. */
	padding: 12px 20px;
	border: 1px solid var( --cgt-ad-trait );
	border-radius: var( --cgt-ad-rayon );
	background: #fff;
	color: var( --cgt-ad-noir );
	font-family: var( --cgt-ad-corps );
	/* 16 px minimum : en deçà, Safari sur iPhone zoome à la mise au point. */
	font-size: 16px;
	font-weight: 300;
	line-height: 1.5;
	outline: none;
}

.cgt-adhesion__champ input::placeholder {
	color: var( --cgt-ad-gris );
}

/*
 * Un seul anneau au focus : bordure noire et contour jaune, la paire
 * retenue par la charte pour la variante sombre du bouton. Le !important
 * écarte la bordure rouge que le thème applique de son côté.
 */
.cgt-adhesion__champ select:focus,
.cgt-adhesion__champ input[type="text"]:focus,
.cgt-adhesion__champ input[type="email"]:focus,
.cgt-adhesion__champ input[type="tel"]:focus,
.cgt-adhesion__champ input[type="date"]:focus,
.cgt-adhesion__champ input[type="number"]:focus {
	border-color: var( --cgt-ad-noir ) !important;
	outline: 2px solid var( --cgt-ad-jaune ) !important;
	outline-offset: 1px;
}

/* Un champ en erreur garde sa bordure rouge au focus : l'information
   prime sur l'uniformité. */
.cgt-adhesion__champ.est-en-erreur input:focus,
.cgt-adhesion__champ.est-en-erreur select:focus {
	border-color: var( --cgt-ad-erreur ) !important;
}

.cgt-adhesion ::selection {
	background: var( --cgt-ad-jaune );
	color: var( --cgt-ad-noir );
}

.cgt-adhesion__champ--iban input {
	font-family: Menlo, Consolas, monospace;
	letter-spacing: 0.08em;
}

.cgt-adhesion__requis {
	margin-left: 2px;
	color: var( --cgt-ad-rouge );
}

.cgt-adhesion__aide {
	margin: 6px 0 0;
	color: var( --cgt-ad-gris );
	font-size: 13px;
	font-weight: 300;
	line-height: 1.5;
}

/* Boutons radio */

.cgt-adhesion__radios {
	margin: 0;
	padding: 0;
	border: 0;
}

.cgt-adhesion__radios legend {
	margin-bottom: 8px;
	padding: 0;
	color: var( --cgt-ad-noir );
	font-size: 14px;
	font-weight: 600;
}

.cgt-adhesion__radio {
	display: inline-flex;
	gap: 8px;
	align-items: center;
	/* Marge basse généreuse : les étiquettes passent à la ligne sur mobile
	   et ne doivent pas se coller. */
	margin: 0 24px 10px 0;
	font-size: 15px;
	font-weight: 300;
}

/*
 * Cases et boutons radio : on rend la main au navigateur. Le thème les
 * remplace parfois par ses propres pastilles, d'où le retour explicite à
 * l'apparence native, seul accent-color venant de la charte.
 */
.cgt-adhesion__radio input,
.cgt-adhesion__champ--case input {
	flex: 0 0 auto;
	width: 18px;
	height: 18px;
	margin: 0;
	padding: 0;
	border: 0 !important;
	background: none !important;
	-webkit-appearance: auto;
	appearance: auto;
	accent-color: var( --cgt-ad-rouge );
}

/*
 * Le contour épouse la forme du contrôle — rond pour un radio, carré pour
 * une case. Sans ces rayons, un anneau rectangulaire cerne la pastille,
 * ce qui ne ressemble à rien.
 */
.cgt-adhesion__radio input {
	border-radius: 50%;
}

.cgt-adhesion__champ--case input {
	border-radius: 3px;
}

/* focus-visible seulement : un clic à la souris n'a pas à laisser un
   anneau derrière lui, contrairement à une tabulation. */
.cgt-adhesion__radio input:focus,
.cgt-adhesion__champ--case input:focus {
	outline: none !important;
}

.cgt-adhesion__radio input:focus-visible,
.cgt-adhesion__champ--case input:focus-visible {
	outline: 2px solid var( --cgt-ad-jaune ) !important;
	outline-offset: 3px;
}

.cgt-adhesion__champ--case label {
	display: flex;
	gap: 12px;
	align-items: flex-start;
	font-size: 15px;
	font-weight: 300;
	line-height: 1.5;
}

/* ---------------------------------------------------------------------
 * Erreurs
 * ------------------------------------------------------------------ */

.cgt-adhesion__erreur {
	margin: 6px 0 0;
	color: var( --cgt-ad-erreur );
	font-size: 13px;
	font-weight: 600;
	line-height: 1.4;
}

.cgt-adhesion__champ.est-en-erreur input,
.cgt-adhesion__champ.est-en-erreur select {
	border-color: var( --cgt-ad-erreur );
	/* La couleur ne porte pas seule l'information : le message sous le champ
	   reste la source principale. */
	background: #fdf3f2;
}

/* ---------------------------------------------------------------------
 * Message d'issue
 * ------------------------------------------------------------------ */

.cgt-adhesion__message {
	margin: 0 0 var( --cgt-ad-bloc );
	padding: 18px 22px;
	border-left: 4px solid;
	border-radius: var( --cgt-ad-rayon );
	font-size: 15px;
	font-weight: 300;
	line-height: 1.5;
}

.cgt-adhesion__message p {
	margin: 0;
}

.cgt-adhesion__message--erreur {
	border-color: var( --cgt-ad-rouge );
	background: #fdf3f2;
	color: #7a1a15;
}

.cgt-adhesion__message--succes {
	border-color: var( --cgt-ad-succes );
	background: #f1f8f3;
	color: #14512b;
}

.cgt-adhesion__suivi {
	margin-top: 12px !important;
	color: var( --cgt-ad-gris );
	font-size: 13px;
}

/* ---------------------------------------------------------------------
 * Bouton rouge de la charte (Figma 39:219)
 * ------------------------------------------------------------------ */

/*
 * Salient cible les boutons d'envoi par `.container-wrap button[type="submit"]`
 * et leur impose `padding: 16px !important` et `border-radius: 0 !important`,
 * plus un fond gris depuis `button[type="submit"]`. Il faut donc à la fois
 * une spécificité supérieure — d'où le sélecteur doublé — et !important sur
 * les seules propriétés que le thème revendique.
 */
.cgt-adhesion .cgt-adhesion__bouton {
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	width: auto;
	/* Gabarit du composant : 20 px sur les côtés, 10 px en haut et en bas.
	   La hauteur minimale de 44 px lui donne une cible tactile correcte sans
	   changer son allure au clavier. */
	min-height: 44px;
	padding: 10px 20px !important;
	border: 0 !important;
	border-radius: var( --cgt-ad-rayon ) !important;
	background: var( --cgt-ad-rouge ) !important;
	background-color: var( --cgt-ad-rouge ) !important;
	color: #fff !important;
	font-family: var( --cgt-ad-corps ) !important;
	font-size: 14px !important;
	font-weight: 800 !important;
	line-height: normal !important;
	text-transform: uppercase !important;
	text-decoration: none !important;
	cursor: pointer;
	/* Le bloc de neutralisation coupe les transitions du thème : on remet
	   la nôtre, plus courte que les 450 ms de Salient. */
	transition: background-color 0.15s ease, filter 0.15s ease !important;
}

/*
 * La seconde variante du composant — fond noir et halo jaune — sert d'état
 * survolé et actif. C'est le seul autre traitement prévu pour ce bouton dans
 * la charte. Le thème repeint aussi le survol, d'où le !important.
 */
.cgt-adhesion .cgt-adhesion__bouton:hover:not( :disabled ),
.cgt-adhesion .cgt-adhesion__bouton:focus-visible {
	background: var( --cgt-ad-noir ) !important;
	background-color: var( --cgt-ad-noir ) !important;
	filter: drop-shadow( 0 2px 1px rgba( 250, 217, 11, 0.25 ) );
	color: #fff !important;
}

.cgt-adhesion .cgt-adhesion__bouton:focus {
	outline: none !important;
}

.cgt-adhesion .cgt-adhesion__bouton:focus-visible {
	outline: 2px solid var( --cgt-ad-jaune ) !important;
	outline-offset: 2px;
}

.cgt-adhesion .cgt-adhesion__bouton:disabled {
	opacity: 0.55;
	cursor: progress;
}

.cgt-adhesion__note {
	margin: 14px 0 0;
	color: var( --cgt-ad-gris );
	font-size: 13px;
	font-weight: 300;
	line-height: 1.5;
}

/* Piège à robots : hors de l'écran plutôt que display:none, que certains
   robots savent détecter. */
.cgt-adhesion__piege {
	position: absolute !important;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

@media ( max-width: 782px ) {

	.cgt-adhesion .cgt-adhesion__bouton {
		width: 100% !important;
	}
}

/* ---------------------------------------------------------------------
 * Captcha
 * ------------------------------------------------------------------ */

/*
 * Le widget du fournisseur a ses propres dimensions, qu'on ne cherche pas
 * à contraindre : le redimensionner casse son rendu dans une iframe.
 */
.cgt-adhesion__captcha {
	margin: 0 0 var( --cgt-ad-bloc ) !important;
}

@media ( max-width: 782px ) {

	/* Sous 320 px de large le widget déborde : on le laisse défiler plutôt
	   que rogner le bouton de validation. */
	.cgt-adhesion__captcha {
		overflow-x: auto;
	}
}