/* =====================================================================
   Formulaire d'inscription E-Learning (Fluent Forms n8) aux couleurs de ctab.tn.

   Ecrite ici, et non dans les reglages du formulaire : cette version de Fluent
   Forms n'expose pas de champ « CSS personnalisee » dans ses reglages, et son
   styleur visuel ne permet pas de reprendre notre echelle au pixel. La feuille
   est mise en file uniquement sur cette page, avec une version tiree de la date
   du fichier : le cache suit donc chaque modification.

   Tout est porte par .fluent_form_8 : aucun autre formulaire du site n'est
   touche. Proprietes logiques partout, la page existe aussi en arabe.
   02/09/2026
   ===================================================================== */

.fluent_form_8 {
	--el-vert: #6E9F33;
	--el-vert-fonce: #3F6731;
	--el-vert-vif: #54B435;
	--el-texte: #3C434A;
	--el-gris: #6b7280;
	--el-bord: #e5e9e0;
	--el-doux: #F2F6EC;
	--el-rouge: #a4262c;

	box-sizing: border-box;
	inline-size: min(760px, 100%);
	margin-inline: auto;
	padding: clamp(20px, 4vw, 40px);
	background: #fff;
	border: 1px solid var(--el-bord);
	border-radius: 20px;
	box-shadow: 0 24px 60px -30px rgba(63, 103, 49, .28);
	color: var(--el-texte);
}
.fluent_form_8 *, .fluent_form_8 *::before, .fluent_form_8 *::after { box-sizing: border-box; }

/* ---- Libelles ---- */
.fluent_form_8 .ff-el-input--label label {
	margin-block-end: 6px;
	font-size: .9rem;
	font-weight: 600;
	color: var(--el-texte);
}
.fluent_form_8 .ff-el-is-required.asterisk-right label::after,
.fluent_form_8 .ff-el-input--label.ff-el-is-required label::after { color: var(--el-rouge); }

/* ---- Champs : l'echelle etablie sur les autres pages ---- */
form.fluent_form_8 input.ff-el-form-control,
form.fluent_form_8 select.ff-el-form-control,
form.fluent_form_8 textarea.ff-el-form-control {
	inline-size: 100%;
	min-block-size: 48px;
	padding: 0 14px;
	border: 1.5px solid var(--el-bord);
	border-radius: 12px;
	background: #fbfcf9;
	color: var(--el-texte);
	font-size: 1rem;
	line-height: 1.4;
	text-transform: none;
	box-shadow: none;
	transition: border-color .2s, box-shadow .2s, background-color .2s;
}
.fluent_form_8 textarea.ff-el-form-control { min-block-size: 132px; padding-block: 12px; }
form.fluent_form_8 input.ff-el-form-control:focus,
form.fluent_form_8 select.ff-el-form-control:focus,
form.fluent_form_8 textarea.ff-el-form-control:focus {
	outline: none;
	border-color: var(--el-vert);
	background: #fff;
	box-shadow: 0 0 0 4px rgba(110, 159, 51, .15);
}
.fluent_form_8 .ff-el-form-control::placeholder { color: #9aa39a; opacity: 1; text-transform: none; }

/* ---- Liste deroulante : le natif est conserve (Fluent Forms valide dessus),
       on lui retire seulement l'habillage du systeme et on pose notre chevron. ---- */
form.fluent_form_8 select.ff-el-form-control {
	appearance: none;
	-webkit-appearance: none;
	padding-inline-end: 44px;
	background-image: url("data:image/svg+xml,%3Csvg xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22 viewBox%3D%220 0 24 24%22 fill%3D%22none%22 stroke%3D%22%233F6731%22 stroke-width%3D%222.2%22 stroke-linecap%3D%22round%22 stroke-linejoin%3D%22round%22%3E%3Cpath d%3D%22m6 9 6 6 6-6%22%2F%3E%3C%2Fsvg%3E");
	background-repeat: no-repeat;
	background-position: right 14px center;
	background-size: 18px 18px;
	cursor: pointer;
}
.fluent_form_8 select.ff-el-form-control:dir(rtl) { background-position: left 14px center; }

/* ---- Choix radio ---- */
.fluent_form_8 .ff-el-form-check { margin-block-end: 6px; }
.fluent_form_8 .ff-el-form-check-label {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-block-size: 44px;
	font-size: .95rem;
	cursor: pointer;
}
.fluent_form_8 .ff-el-form-check-input { accent-color: var(--el-vert); inline-size: 18px; block-size: 18px; margin: 0; }

/* ---- Champ telephone international ---- */
.fluent_form_8 .iti { inline-size: 100%; }
.fluent_form_8 .iti__selected-country { border-start-start-radius: 12px; border-end-start-radius: 12px; }
.fluent_form_8 .iti__dropdown-content {
	/* le panneau des pays doit rester dans la page, y compris sur un petit ecran */
	max-inline-size: min(340px, calc(100vw - 32px));
	border-radius: 12px;
	border-color: var(--el-bord);
	box-shadow: 0 18px 40px -18px rgba(60, 67, 74, .35);
}
.fluent_form_8 .iti__search-input { min-block-size: 44px; padding-inline: 12px; }

/* ---- Bouton d'envoi : le composant du projet ---- */
.fluent_form_8 .ff_submit_btn_wrapper { margin-block-start: 6px; }
form.fluent_form_8 .ff-btn-submit:not(.ff_btn_no_style) {
	position: relative;
	overflow: hidden;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	inline-size: 100%;
	min-block-size: 48px;
	padding: 14px 24px;
	border: 0;
	border-radius: 10px;
	background: linear-gradient(135deg, #6E9F33 0%, #54B435 100%);
	color: #fff;
	font-size: 16px;
	font-weight: 700;
	line-height: 1.2;
	cursor: pointer;
	box-shadow: 0 6px 18px rgba(110, 159, 51, .32);
	transition: transform .18s, box-shadow .18s;
}
.fluent_form_8 .ff-btn-submit:hover,
.fluent_form_8 .ff-btn-submit:focus-visible {
	color: #fff;
	transform: translateY(-1px);
	box-shadow: 0 10px 24px rgba(110, 159, 51, .38);
}
.fluent_form_8 .ff-btn-submit:active { transform: none; }

/* Balayage lumineux au survol, comme sur les autres boutons du site.
   inset-inline-start et non left : en arabe le reflet doit traverser dans
   l'autre sens, et une valeur physique gonflerait la largeur de defilement. */
.fluent_form_8 .ff-btn-submit::after {
	content: "";
	position: absolute;
	inset-block-start: 0;
	inset-inline-start: -60%;
	inline-size: 40%;
	block-size: 100%;
	background: linear-gradient(100deg, transparent 0%, rgba(255, 255, 255, .35) 50%, transparent 100%);
	transform: skewX(-18deg);
	pointer-events: none;
}
.fluent_form_8 .ff-btn-submit:hover::after { animation: ctab-el-brillance .7s ease; }
@keyframes ctab-el-brillance {
	from { inset-inline-start: -60%; }
	to { inset-inline-start: 120%; }
}

/* ---- Messages ---- */
.fluent_form_8 .ff-el-form-check-label,
.fluent_form_8 .ff-el-help-message { color: var(--el-gris); }
.fluent_form_8 .error, .fluent_form_8 .text-danger { color: var(--el-rouge); font-size: .9rem; }

/* ---- Adaptations ---- */
@media (max-width: 620px) {
	.fluent_form_8 { padding: 18px 14px; border-radius: 16px; }
	form.fluent_form_8 input.ff-el-form-control,
form.fluent_form_8 select.ff-el-form-control,
form.fluent_form_8 textarea.ff-el-form-control { min-block-size: 46px; }
}
@media (prefers-reduced-motion: reduce) {
	form.fluent_form_8 .ff-btn-submit:not(.ff_btn_no_style) { transition: none; }
	.fluent_form_8 .ff-btn-submit::after { animation: none; }
}

/* =====================================================================
   Liste deroulante du projet, adaptee au site public.

   Les regles du composant d'administration ont d'abord ete recopiees telles
   quelles, mais elles ne suffisent pas ici : sur le site public, Astra et
   Elementor habillent TOUS les <button> (fond vert, coins a 2 px, largeur
   ajustee au contenu). Le panneau s'affichait donc en blocs verts decales.
   Ce bloc reprend donc l'identite du composant — memes classes, memes
   couleurs — en reaffirmant ce que le theme ecrase. 02/09/2026
   ===================================================================== */
form.fluent_form_8 .ctab-ui__deroulante {
	position: relative;
}

form.fluent_form_8 .ctab-ui__deroulante-bouton {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	inline-size: 100%;
	min-block-size: 48px;
	margin: 0;
	padding: 0 14px;
	border: 1.5px solid var(--el-bord);
	border-radius: 12px;
	background: #fbfcf9;
	color: var(--el-texte);
	font: inherit;
	font-size: 1rem;
	text-align: start;
	text-transform: none;
	box-shadow: none;
	cursor: pointer;
}
form.fluent_form_8 .ctab-ui__deroulante-bouton:hover {
	border-color: var(--el-vert);
	background: #fff;
	color: var(--el-texte);
}
form.fluent_form_8 .ctab-ui__deroulante-bouton:focus-visible {
	outline: none;
	border-color: var(--el-vert);
	background: #fff;
	box-shadow: 0 0 0 4px rgba(110, 159, 51, .15);
}

form.fluent_form_8 .ctab-ui__deroulante-valeur {
	flex: 1 1 auto;
	min-inline-size: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* Chevron dessine en CSS : deux traits, donc rien a telecharger. */
form.fluent_form_8 .ctab-ui__deroulante-chevron {
	flex: none;
	inline-size: 10px;
	block-size: 10px;
	margin-block-start: -4px;
	border-inline-end: 2px solid var(--el-vert-fonce);
	border-block-end: 2px solid var(--el-vert-fonce);
	rotate: 45deg;
	transition: rotate .2s;
}
form.fluent_form_8 .ctab-ui__deroulante.is-ouverte .ctab-ui__deroulante-chevron {
	margin-block-start: 4px;
	rotate: -135deg;
}

form.fluent_form_8 .ctab-ui__deroulante-panneau {
	position: absolute;
	inset-inline: 0;
	inset-block-start: calc(100% + 6px);
	z-index: 20;
	max-block-size: min(320px, 50vh);
	overflow-y: auto;
	padding: 6px;
	border: 1px solid var(--el-bord);
	border-radius: 12px;
	background: #fff;
	box-shadow: 0 18px 40px -18px rgba(60, 67, 74, .35);
}

form.fluent_form_8 .ctab-ui__deroulante-option {
	display: block;
	inline-size: 100%;
	min-block-size: 44px;
	margin: 0;
	padding: 10px 12px;
	border: 0;
	border-radius: 8px;
	background: transparent;
	color: var(--el-texte);
	font: inherit;
	font-size: .95rem;
	line-height: 1.35;
	text-align: start;
	text-transform: none;
	box-shadow: none;
	cursor: pointer;
}
form.fluent_form_8 .ctab-ui__deroulante-option:hover,
form.fluent_form_8 .ctab-ui__deroulante-option:focus-visible {
	outline: none;
	background: var(--el-doux);
	color: var(--el-vert-fonce);
}

/* L'option retenue : vert plein sur texte blanc, comme dans l'administration. */
form.fluent_form_8 .ctab-ui__deroulante-option.is-actif,
form.fluent_form_8 .ctab-ui__deroulante-option.is-actif:hover {
	background: linear-gradient(135deg, var(--el-vert) 0%, var(--el-vert-vif) 100%);
	color: #fff;
}

/* Une fois le composant en place, le select natif est masque : sans cela les
   deux controles se superposent. display:none plutot qu'un masquage visuel :
   l'element reste envoye avec le formulaire (contrairement a disabled), et il
   n'est pas annonce deux fois par les lecteurs d'ecran, puisque c'est le bouton
   du composant qui porte desormais les roles listbox et option. 02/09/2026 */
form.fluent_form_8 .ctab-ui__deroulante select[data-ctab-habille] {
	display: none;
}

/* =====================================================================
   Liste des pays du champ telephone, aux couleurs du projet.

   Le sprite est pose DIRECTEMENT ici, sans passer par la variable
   --iti-path-flags-1x du plugin : dans la liste deroulante elle ne resolvait
   pas, alors qu'elle fonctionnait pour le drapeau du champ. Une image en dur
   est insensible a cette difference. La grille logique reste 3904 x 12, celle
   que la feuille du plugin attend. 02/09/2026
   ===================================================================== */
.iti__flag {
	background-image: url("/wp-content/plugins/fluentformpro/public/libs/intl-tel-input/img/flags@2x.png");
}

/* Le panneau : meme carte que notre liste deroulante. */
form.fluent_form_8 .iti__dropdown-content {
	padding: 6px;
	border: 1px solid var(--el-bord);
	border-radius: 12px;
	background: #fff;
	box-shadow: 0 18px 40px -18px rgba(60, 67, 74, .35);
}

/* Champ de recherche : l'echelle des autres champs, en plus compact. */
form.fluent_form_8 .iti__search-input {
	inline-size: calc(100% - 4px);
	min-block-size: 44px;
	margin: 2px 2px 6px;
	padding: 0 12px;
	border: 1.5px solid var(--el-bord);
	border-radius: 10px;
	background: #fbfcf9;
	font-size: .95rem;
}
form.fluent_form_8 .iti__search-input:focus {
	outline: none;
	border-color: var(--el-vert);
	background: #fff;
	box-shadow: 0 0 0 4px rgba(110, 159, 51, .15);
}

/* Une ligne de pays = une option de notre liste deroulante. */
form.fluent_form_8 .iti__country {
	display: flex;
	align-items: center;
	gap: 10px;
	min-block-size: 44px;
	margin-inline: 2px;
	padding: 8px 10px;
	border-radius: 8px;
	color: var(--el-texte);
	font-size: .95rem;
}
form.fluent_form_8 .iti__country:hover,
form.fluent_form_8 .iti__country.iti__highlight {
	background: var(--el-doux);
	color: var(--el-vert-fonce);
}

/* Le pays retenu : vert plein sur texte blanc, comme l'option active ailleurs. */
form.fluent_form_8 .iti__country.iti__active,
form.fluent_form_8 .iti__country.iti__active:hover {
	background: linear-gradient(135deg, var(--el-vert) 0%, var(--el-vert-vif) 100%);
	color: #fff;
}
form.fluent_form_8 .iti__dial-code { color: var(--el-gris); }
form.fluent_form_8 .iti__country.iti__active .iti__dial-code { color: rgba(255, 255, 255, .82); }

/* Le bouton du pays, a gauche du champ. */
form.fluent_form_8 .iti__selected-country {
	min-block-size: 46px;
	padding-inline: 10px;
	border-start-start-radius: 12px;
	border-end-start-radius: 12px;
	background: transparent;
}
form.fluent_form_8 .iti__selected-country:hover { background: var(--el-doux); }

/* Les choix radio faisaient 24 px de haut : sous le minimum confortable au doigt. */
form.fluent_form_8 .ff-el-form-check {
	display: flex;
	align-items: center;
	min-block-size: 44px;
}

/* La liste des pays est un <ul> : le navigateur lui applique 40 px
   d'indentation par defaut, ce qui creusait un grand vide a gauche des
   drapeaux — mesure a 49 px du bord du panneau. 02/09/2026 */
form.fluent_form_8 .iti__country-list {
	margin: 0;
	padding: 0;
	list-style: none;
}

/* Le theme met une majuscule a chaque mot des indications de saisie :
   « Rechercher Un Pays » au lieu de « Rechercher un pays ». 02/09/2026 */
form.fluent_form_8 .iti__search-input { text-transform: none; }

/* La capitalisation vient d'une regle sur ::placeholder, pseudo-element
   distinct du champ : la neutraliser sur l'input ne suffisait pas. 02/09/2026 */
form.fluent_form_8 .iti__search-input::placeholder {
	text-transform: none;
	color: #9aa39a;
	opacity: 1;
}