/* ==========================================================================
   Espace adhérent : page d'inscription, page de validation du compte
   S'ajoute à adh_login.css (mêmes couleurs, même fond, même pied de page).
   Toutes les règles sont limitées à #adherent et préfixées « adh-insc- ».

   Sommaire :
   1. Carte et en-tête
   2. Formulaire : pavés, lignes, champs
   3. Règles du mot de passe
   4. Code de sécurité et CGU
   5. Bouton
   6. Pages de résultat (e-mail envoyé, compte activé)
   7. Petits écrans
   ========================================================================== */


/* --------------------------------------------------------------------------
   1. CARTE ET EN-TÊTE
   -------------------------------------------------------------------------- */

#adherent .adh-insc-bloc {
	width: 100%;
	max-width: 760px;
}

#adherent .adh-insc-bloc.adh-insc-bloc-etroit {
	max-width: 520px;
}

#adherent .adh-insc-carte {
	width: 100%;
	overflow: hidden;
	border-radius: 18px;
	background: #ffffff;
	box-shadow: 0 24px 56px rgba(2, 30, 50, .22), 0 4px 14px rgba(2, 30, 50, .12);
}

/* Bandeau bleu nuit : logo à gauche, titre à droite */
#adherent .adh-insc-entete {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	padding: 16px 34px;
	background:
		linear-gradient(135deg, rgba(255, 255, 255, 0) 64%, rgba(120, 205, 235, .10) 64%, rgba(120, 205, 235, .10) 80%, rgba(255, 255, 255, 0) 80%),
		linear-gradient(135deg, rgba(255, 255, 255, 0) 86%, rgba(120, 205, 235, .06) 86%),
		linear-gradient(155deg, #074666 0%, #03304c 38%, #02273e 70%, #011e31 100%);
	border-bottom: 4px solid #12a8be;
}

#adherent .adh-insc-entete-logo {
	display: block;
	width: 78px;
	height: auto;
	-ms-flex: 0 0 auto;
	flex: 0 0 auto;
}

#adherent .adh-insc-entete-textes {
	margin-left: 26px;
}

#adherent .adh-insc-titre {
	margin: 0 0 12px 0;
	font-size: 24px;
	font-weight: 700;
	line-height: 1.25;
	color: #0d3b5c;
}

#adherent .adh-insc-titre.adh-insc-titre-entete {
	margin: 0;
	font-size: 28px;
	letter-spacing: .3px;
	color: #ffffff;
}

#adherent .adh-insc-accroche {
	margin: 6px 0 0 0;
	font-size: 14px;
	color: #9fe3ee;
}


/* --------------------------------------------------------------------------
   2. FORMULAIRE : PAVÉS, LIGNES, CHAMPS
   -------------------------------------------------------------------------- */

#adherent .adh-insc-form {
	margin: 0;
	padding: 2px 34px 22px 34px;
}

/* Champ piège : hors de l'écran, jamais vu ni atteint au clavier */
#adherent .adh-insc-piege {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* Message général (rouge), masqué tant qu'il est vide */
#adherent .adh-insc-message {
	display: none;
	margin: 18px 0 0 0;
	padding: 11px 14px;
	border: 1px solid #f1c4c2;
	border-radius: 9px;
	background: #fdf1f0;
	font-size: 14px;
	font-weight: 700;
	color: #c9302c;
}

#adherent .adh-insc-message.adh-insc-message-visible {
	display: block;
}

#adherent .adh-insc-pave-titre {
	margin: 16px 0 10px 0;
	padding: 0 0 6px 0;
	border-bottom: 1px solid #dcebf2;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 1.2px;
	text-transform: uppercase;
	color: #0a6d86;
}

/* Une ligne de champs : les colonnes se partagent la largeur */
#adherent .adh-insc-ligne {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	margin: 0 -8px;
}

#adherent .adh-insc-col {
	-ms-flex: 1 1 0px;
	flex: 1 1 0px;
	min-width: 0;
	padding: 0 8px;
}

/* Colonnes de largeur inégale (SIRET + nom, CP + ville) */
#adherent .adh-insc-col.adh-insc-col-1 {
	-ms-flex: 1 1 0px;
	flex: 1 1 0px;
}

#adherent .adh-insc-col.adh-insc-col-2 {
	-ms-flex: 2 1 0px;
	flex: 2 1 0px;
}

#adherent .adh-insc-libelle {
	display: block;
	margin: 0 0 3px 0;
	font-size: 13px;
	font-weight: 600;
	color: #0d3b5c;
}

#adherent .adh-insc-etoile {
	color: #d9534f;
	font-weight: 700;
}

#adherent .adh-insc-saisie {
	display: block;
	width: 100%;
	height: 38px;
	margin: 0;
	padding: 0 12px;
	border: 1px solid #cfe4ee;
	border-radius: 9px;
	background: #ffffff;
	font-family: inherit;
	font-size: 15px;
	color: #0d3b5c;
	outline: none;
	-webkit-transition: border-color .2s ease, box-shadow .2s ease;
	transition: border-color .2s ease, box-shadow .2s ease;
}

/* Texte d'exemple d'un champ vide */
#adherent .adh-insc-saisie::-webkit-input-placeholder { color: #9aa9b4; }
#adherent .adh-insc-saisie::-moz-placeholder { color: #9aa9b4; opacity: 1; }
#adherent .adh-insc-saisie:-ms-input-placeholder { color: #9aa9b4; }
#adherent .adh-insc-saisie::placeholder { color: #9aa9b4; }

#adherent .adh-insc-saisie:focus {
	border-color: #12a8be;
	box-shadow: 0 0 0 4px rgba(18, 168, 190, .16);
}

#adherent .adh-insc-saisie.adh-insc-saisie-erreur {
	border-color: #d9534f;
	box-shadow: 0 0 0 4px rgba(217, 83, 79, .12);
}

/* Phrase d'explication en haut d'un formulaire court (mot de passe oublié) */
#adherent .adh-insc-intro {
	margin: 18px 0 14px 0;
	font-size: 15px;
	line-height: 1.55;
	color: #3d5567;
}

/* Message d'erreur sous un champ. Sa hauteur minimale fait l'espace entre
   deux lignes de champs : c'est elle (avec la hauteur des champs, 38 px) qui
   règle la hauteur du formulaire. Un message d'erreur agrandit sa ligne. */
#adherent .adh-insc-erreur {
	min-height: 8px;
	margin: 2px 0 3px 0;
	font-size: 12px;
	line-height: 1.35;
	color: #c9302c;
}

/* Texte d'aide et message sous le SIRET : remontés contre le champ */
#adherent .adh-insc-aide,
#adherent .adh-insc-info {
	margin: -4px 0 6px 0;
	font-size: 12px;
	line-height: 1.35;
	color: #6d8494;
}

#adherent .adh-insc-info:empty {
	display: none;
}

#adherent .adh-insc-info.adh-insc-info-succes {
	color: #1e8a4c;
}

#adherent .adh-insc-info.adh-insc-info-erreur {
	color: #c9302c;
}


/* --------------------------------------------------------------------------
   3. RÈGLES DU MOT DE PASSE
   -------------------------------------------------------------------------- */

#adherent .adh-insc-regles {
	margin: 2px 0 0 0;
	padding: 8px 16px;
	list-style: none;
	border: 1px solid #dcebf2;
	border-radius: 9px;
	background: #f6fbfd;
	overflow: hidden;
}

#adherent .adh-insc-regles li {
	float: left;
	width: 50%;
	margin: 1px 0;
	padding: 0 0 0 22px;
	position: relative;
	font-size: 13px;
	line-height: 1.5;
	color: #6d8494;
}

/* Pastille : grise tant que la règle n'est pas respectée */
#adherent .adh-insc-regles li:before {
	content: "";
	position: absolute;
	left: 2px;
	top: 5px;
	width: 10px;
	height: 10px;
	border: 1px solid #b9cdd8;
	border-radius: 50%;
	background: #ffffff;
}

#adherent .adh-insc-regles li.adh-insc-regle-ok {
	color: #1e8a4c;
	font-weight: 600;
}

#adherent .adh-insc-regles li.adh-insc-regle-ok:before {
	border-color: #1e8a4c;
	background: #1e8a4c;
}


/* --------------------------------------------------------------------------
   4. CODE DE SÉCURITÉ ET CGU
   -------------------------------------------------------------------------- */

#adherent .adh-insc-captcha {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: end;
	-ms-flex-align: end;
	align-items: flex-end;
}

#adherent .adh-insc-captcha-image {
	display: block;
	-ms-flex: 0 0 auto;
	flex: 0 0 auto;
	width: 170px;
	height: 52px;
	border: 1px solid #cfe4ee;
	border-radius: 9px;
}

#adherent .adh-insc-captcha-nouveau {
	-ms-flex: 0 0 auto;
	flex: 0 0 auto;
	margin: 0 16px 0 10px;
	padding: 0;
	border: none;
	background: none;
	cursor: pointer;
	font-family: inherit;
	font-size: 13px;
	line-height: 52px;
	color: #0a6d86;
	text-decoration: underline;
}

#adherent .adh-insc-captcha-nouveau:hover {
	color: #12a8be;
}

#adherent .adh-insc-captcha-saisie {
	width: 190px;
}

#adherent .adh-insc-captcha-saisie .adh-insc-saisie {
	letter-spacing: 3px;
	text-transform: uppercase;
}

#adherent .adh-insc-cgu {
	margin: 8px 0 0 0;
	font-size: 14px;
	line-height: 1.45;
	color: #3d5567;
}

#adherent .adh-insc-cgu input {
	width: 17px;
	height: 17px;
	margin: 0 8px 0 0;
	vertical-align: -3px;
	cursor: pointer;
}

#adherent .adh-insc-cgu label {
	cursor: pointer;
}

#adherent .adh-insc-cgu a {
	color: #0a6d86;
	font-weight: 600;
}

#adherent .adh-insc-legende {
	margin: 10px 0 0 0;
	text-align: center;
	font-size: 12px;
	color: #6d8494;
}


/* --------------------------------------------------------------------------
   5. BOUTON
   -------------------------------------------------------------------------- */

#adherent .adh-insc-bouton {
	display: block;
	width: 100%;
	height: 46px;
	margin: 10px 0 0 0;
	padding: 0 26px;
	border: none;
	border-radius: 23px;
	cursor: pointer;
	font-family: inherit;
	font-size: 15px;
	font-weight: 700;
	letter-spacing: 1.5px;
	text-transform: uppercase;
	color: #ffffff;
	background: linear-gradient(90deg, #017c98 0%, #12a8be 55%, #21c9dc 100%);
	box-shadow: 0 8px 20px rgba(1, 124, 152, .32);
	-webkit-transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
	transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
}

#adherent .adh-insc-bouton:hover {
	-webkit-filter: brightness(1.06);
	filter: brightness(1.06);
	-webkit-transform: translateY(-2px);
	transform: translateY(-2px);
	box-shadow: 0 12px 26px rgba(1, 124, 152, .42);
}

#adherent .adh-insc-bouton:focus {
	outline: none;
	box-shadow: 0 0 0 4px rgba(18, 168, 190, .30), 0 8px 20px rgba(1, 124, 152, .32);
}

#adherent .adh-insc-bouton[disabled] {
	cursor: default;
	opacity: .7;
	-webkit-transform: none;
	transform: none;
}

/* Le même bouton, sous la forme d'un lien (pages de résultat) */
#adherent a.adh-insc-bouton.adh-insc-bouton-lien {
	display: inline-block;
	width: auto;
	line-height: 46px;
	text-decoration: none;
}

#adherent .adh-insc-lien-secondaire {
	display: block;
	margin-top: 16px;
	font-size: 13px;
	color: #0a6d86;
}


/* --------------------------------------------------------------------------
   6. PAGES DE RÉSULTAT (E-MAIL ENVOYÉ, COMPTE ACTIVÉ, LIEN INVALIDE)
   -------------------------------------------------------------------------- */

#adherent .adh-insc-bloc-etroit .adh-insc-entete {
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	justify-content: center;
}

#adherent .adh-insc-resultat {
	padding: 34px 38px 34px 38px;
	text-align: center;
}

#adherent .adh-insc-resultat p {
	margin: 0;
}

/* Rond coloré avec une icône */
#adherent .adh-insc-pastille {
	width: 62px;
	height: 62px;
	margin: 0 auto 18px auto;
	border-radius: 50%;
	line-height: 62px;
	text-align: center;
}

#adherent .adh-insc-pastille svg {
	width: 30px;
	height: 30px;
	vertical-align: middle;
	fill: #ffffff;
}

#adherent .adh-insc-pastille.adh-insc-pastille-succes {
	background: #21b36a;
}

#adherent .adh-insc-pastille.adh-insc-pastille-erreur {
	background: #d9534f;
}

#adherent .adh-insc-resultat .adh-insc-texte {
	margin: 0 0 14px 0;
	font-size: 15px;
	line-height: 1.6;
	color: #3d5567;
}

#adherent .adh-insc-resultat .adh-insc-texte.adh-insc-texte-discret {
	font-size: 13px;
	color: #8496a3;
}

/* Renvoi de l'e-mail de validation : question et bouton en forme de lien */
#adherent .adh-insc-renvoi {
	margin: 22px 0 0 0;
	padding: 16px 0 0 0;
	border-top: 1px solid #e3ebf0;
	font-size: 13px;
	color: #6d8494;
}

#adherent .adh-insc-renvoi-bouton {
	margin: 0 0 0 4px;
	padding: 0;
	border: none;
	background: none;
	cursor: pointer;
	font-family: inherit;
	font-size: 13px;
	font-weight: 700;
	color: #0a6d86;
	text-decoration: underline;
}

#adherent .adh-insc-renvoi-bouton:hover {
	color: #12a8be;
}

/* Le même, quand c'est un lien (« Refaire une demande », mot de passe oublié) */
#adherent .adh-insc-renvoi .adh-insc-renvoi-lien {
	margin: 0 0 0 4px;
	font-weight: 700;
	color: #0a6d86;
	text-decoration: underline;
}

#adherent .adh-insc-renvoi .adh-insc-renvoi-lien:hover {
	color: #12a8be;
}

/* Résultat d'un renvoi : vert, ou rouge en cas de refus */
#adherent .adh-insc-resultat .adh-insc-renvoi-info {
	margin: 0 0 16px 0;
	padding: 10px 14px;
	border: 1px solid #bfe6cf;
	border-radius: 9px;
	background: #effaf3;
	font-size: 13px;
	line-height: 1.45;
	color: #1e8a4c;
}

#adherent .adh-insc-resultat .adh-insc-renvoi-info.adh-insc-renvoi-info-erreur {
	border-color: #f1c4c2;
	background: #fdf1f0;
	color: #c9302c;
}


/* --------------------------------------------------------------------------
   6 bis. FORMULAIRE POSÉ SUR LA PAGE (classe adh-insc-bloc-page)
   Présentation choisie par ADH_INSCRIPTION_PRESENTATION_PAGE dans
   inscription.php. La carte perd son ombre et son bandeau bleu nuit : le
   titre est écrit sur la page, et les champs sont dans un simple contour
   arrondi. Sans la classe, la présentation d'origine (parties 1 et 2) revient.
   -------------------------------------------------------------------------- */

#adherent .adh-insc-bloc.adh-insc-bloc-page {
	max-width: 920px;
}

#adherent .adh-insc-bloc-page .adh-insc-carte {
	overflow: visible;
	border-radius: 0;
	background: none;
	box-shadow: none;
}

/* Le titre, centré, directement sur la page */
#adherent .adh-insc-bloc-page .adh-insc-entete {
	display: block;
	padding: 0 0 22px 0;
	border-bottom: none;
	background: none;
	text-align: center;
}

#adherent .adh-insc-bloc-page .adh-insc-entete-textes {
	margin-left: 0;
}

#adherent .adh-insc-bloc-page .adh-insc-titre.adh-insc-titre-entete {
	font-size: 30px;
	letter-spacing: 0;
	color: #0d3b5c;
}

#adherent .adh-insc-bloc-page .adh-insc-accroche {
	color: #5b7083;
}

/* Le contour arrondi autour des champs */
#adherent .adh-insc-bloc-page .adh-insc-form {
	padding: 10px 34px 26px 34px;
	border: 1px solid #dbe5ec;
	border-radius: 16px;
	background: #ffffff;
}

/* Pages de résultat (e-mail envoyé, compte activé, lien invalide) : la largeur
   étroite est gardée, le même contour entoure le message */
#adherent .adh-insc-bloc.adh-insc-bloc-etroit.adh-insc-bloc-page {
	max-width: 560px;
}

#adherent .adh-insc-bloc-page .adh-insc-resultat {
	border: 1px solid #dbe5ec;
	border-radius: 16px;
	background: #ffffff;
}

/* Le bouton ne prend plus toute la largeur : il est centré */
#adherent .adh-insc-bloc-page .adh-insc-form .adh-insc-bouton {
	width: auto;
	min-width: 300px;
	margin: 16px auto 0 auto;
}


/* --------------------------------------------------------------------------
   7. PETITS ÉCRANS
   -------------------------------------------------------------------------- */

@media screen and (max-width: 640px) {
	#adherent .adh-insc-bloc-page .adh-insc-entete {
		padding: 0 0 16px 0;
	}

	#adherent .adh-insc-bloc-page .adh-insc-titre.adh-insc-titre-entete {
		font-size: 24px;
	}

	#adherent .adh-insc-bloc-page .adh-insc-form {
		padding: 6px 18px 22px 18px;
	}

	#adherent .adh-insc-bloc-page .adh-insc-form .adh-insc-bouton {
		width: 100%;
		min-width: 0;
	}

	#adherent .adh-insc-entete {
		padding: 18px 20px;
	}

	#adherent .adh-insc-entete-logo {
		width: 68px;
	}

	#adherent .adh-insc-entete-textes {
		margin-left: 16px;
	}

	#adherent .adh-insc-titre.adh-insc-titre-entete {
		font-size: 22px;
	}

	#adherent .adh-insc-form {
		padding: 4px 18px 22px 18px;
	}

	/* Un champ par ligne */
	#adherent .adh-insc-ligne {
		display: block;
		margin: 0;
	}

	#adherent .adh-insc-col {
		padding: 0;
	}

	#adherent .adh-insc-regles li {
		float: none;
		width: auto;
	}

	/* L'image et « Autre code » sur une ligne, la saisie dessous */
	#adherent .adh-insc-captcha {
		-ms-flex-wrap: wrap;
		flex-wrap: wrap;
	}

	#adherent .adh-insc-captcha-saisie {
		width: 100%;
		margin-top: 10px;
	}

	#adherent .adh-insc-resultat {
		padding: 28px 20px;
	}
}