/* Formulaire de contact EN (25) / ES (24) — voir inc/formulaire-contact.php. Tout dépend de html.album-form. */
.album-form :is(.fluent_form_25, .fluent_form_24) {
	--afc-bleu: #153e75; --afc-orange: #f39718; --afc-vert: #22a855; --afc-rouge: #e5484d; --afc-fond: #f3f5f9;
}

/* Barre de progression */
.album-form .afc-progres { margin: 0 0 22px; padding: 4px 4px 0; }
.album-form .afc-etapes { display: flex; justify-content: space-between; gap: 8px; margin-bottom: 10px; }
.album-form .afc-etape { display: flex; align-items: center; gap: 8px; font: 700 12px/1.2 Poppins, sans-serif; text-transform: uppercase; letter-spacing: .04em; color: #9aa6b8; transition: color .3s; }
.album-form .afc-etape b { display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--afc-fond); color: #9aa6b8; font-size: 12px; flex: none; transition: background .3s, color .3s; }
.album-form .afc-etape.afc-active { color: var(--afc-bleu); }
.album-form .afc-etape.afc-active b { background: var(--afc-orange); color: #fff; box-shadow: 0 0 0 3px rgba(243, 151, 24, .25); }
.album-form .afc-etape.afc-faite b { background: var(--afc-vert); color: #fff; }
.album-form .afc-barre { height: 6px; border-radius: 6px; background: var(--afc-fond); overflow: hidden; }
.album-form .afc-barre i { display: block; height: 100%; width: 33%; border-radius: inherit; background: linear-gradient(90deg, var(--afc-orange), #ffb44d); transition: width .5s cubic-bezier(.22, 1, .36, 1); }
@media (max-width: 480px) { .album-form .afc-etape span { display: none; } }

/* Passage d'une étape à l'autre */
.album-form :is(.fluent_form_25, .fluent_form_24) .fluentform-step.active { animation: afc-etape .45s cubic-bezier(.22, 1, .36, 1); }
.album-form :is(.fluent_form_25, .fluent_form_24) .fluentform-step.active.afc-retour { animation-name: afc-etape-retour; }
@keyframes afc-etape { from { opacity: 0; transform: translateX(30px); } }
@keyframes afc-etape-retour { from { opacity: 0; transform: translateX(-30px); } }

/* Moins de défilement : libellés plus petits, questions resserrées, questions courtes sur 2 colonnes */
.album-form :is(.fluent_form_25, .fluent_form_24) .ff-el-input--label label {
	font: 800 13px/1.3 Poppins, sans-serif !important; text-transform: uppercase; letter-spacing: .04em; color: var(--afc-bleu);
}
.album-form :is(.fluent_form_25, .fluent_form_24) .ff-el-input--label { margin-bottom: 6px !important; }
.album-form :is(.fluent_form_25, .fluent_form_24) .ff-el-group { margin-bottom: 16px !important; }
.album-form :is(.fluent_form_25, .fluent_form_24) .fluentform-step.active { display: grid !important; grid-template-columns: 1fr 1fr; column-gap: 20px; align-items: start; }
.album-form :is(.fluent_form_25, .fluent_form_24) .fluentform-step > :is(.ff-t-container, .step-nav, .ff_submit_btn_wrapper, .ff-el-tc, .ff-el-section-break, .ff-custom_html),
.album-form :is(.fluent_form_25, .fluent_form_24) .fluentform-step > .ff-el-group:has(textarea, .afc-cartes, [class*="fcal"], input[type="checkbox"], input[name="input_text_6"], input[name="input_text_3"]) { grid-column: 1 / -1; }
@media (max-width: 600px) {
	.album-form :is(.fluent_form_25, .fluent_form_24) .fluentform-step.active { grid-template-columns: 1fr; }
}

/* Champs */
.album-form :is(.fluent_form_25, .fluent_form_24) .ff-el-input--label label { transition: color .2s; }
.album-form :is(.fluent_form_25, .fluent_form_24) .ff-el-group:focus-within .ff-el-input--label label { color: var(--afc-orange); }
.album-form :is(.fluent_form_25, .fluent_form_24) .ff-el-form-control {
	border: 2px solid transparent !important; border-radius: 12px !important; background-color: var(--afc-fond) !important;
	padding: 12px 40px 12px 14px !important; min-height: 48px; font-size: 15px;
	transition: border-color .2s, box-shadow .2s, background-color .2s;
}
.album-form :is(.fluent_form_25, .fluent_form_24) textarea.ff-el-form-control { min-height: 110px; }
.album-form :is(.fluent_form_25, .fluent_form_24) .ff-el-form-control:hover { background-color: #eceff5 !important; }
.album-form :is(.fluent_form_25, .fluent_form_24) .ff-el-form-control:focus {
	border-color: var(--afc-orange) !important; background-color: #fff !important; box-shadow: 0 0 0 4px rgba(243, 151, 24, .18) !important; outline: none;
}
.album-form :is(.fluent_form_25, .fluent_form_24) .ff-el-form-control::placeholder { color: #a3adbd; opacity: 1; }
/* Champ valide : coche verte */
.album-form :is(.fluent_form_25, .fluent_form_24) .afc-ok .ff-el-form-control:not(select):not(textarea) {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='11' fill='%2322a855'/%3E%3Cpath d='M7 12.5l3.2 3.2L17 9' fill='none' stroke='%23fff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
	background-repeat: no-repeat !important; background-position: right 12px center !important; background-size: 20px !important;
	animation: afc-ok .35s cubic-bezier(.34, 1.56, .64, 1);
}
@keyframes afc-ok { 50% { background-size: 26px; } }
/* Erreur : bord rouge + petite secousse */
.album-form :is(.fluent_form_25, .fluent_form_24) .ff-el-is-error .ff-el-form-control { border-color: var(--afc-rouge) !important; background-color: #fff5f5 !important; }
.album-form :is(.fluent_form_25, .fluent_form_24) .ff-el-is-error { animation: afc-secousse .4s; }
.album-form :is(.fluent_form_25, .fluent_form_24) .ff-el-is-error .error { color: var(--afc-rouge); font-size: 13px; margin-top: 6px; }
@keyframes afc-secousse { 20%, 60% { transform: translateX(-6px); } 40%, 80% { transform: translateX(6px); } }

/* Type d'organisation : cartes */
.album-form .afc-cartes { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
@media (max-width: 600px) { .album-form .afc-cartes { grid-template-columns: repeat(2, 1fr); } }
/* Sports : cartes plus compactes, toutes sur une rangée si la place le permet */
.album-form .afc-cartes.afc-sports { grid-template-columns: repeat(auto-fit, minmax(68px, 1fr)); gap: 6px; }
.album-form .afc-sports .afc-carte { padding: 10px 3px; gap: 6px; font-size: 11px; line-height: 1.15; }
.album-form .afc-sports .afc-carte svg { width: 24px; height: 24px; }
@media (max-width: 600px) { .album-form .afc-cartes.afc-sports { grid-template-columns: repeat(4, 1fr); } }
.album-form .afc-carte {
	display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 14px 8px; cursor: pointer;
	border: 2px solid transparent; border-radius: 14px; background: var(--afc-fond); color: var(--afc-bleu);
	font: 700 13px/1.2 Poppins, sans-serif; text-align: center;
	transition: transform .2s, border-color .2s, background .2s, box-shadow .2s;
}
.album-form .afc-carte svg { width: 30px; height: 30px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; transition: transform .3s cubic-bezier(.34, 1.56, .64, 1); }
.album-form .afc-carte:hover { transform: translateY(-3px); background: #fff; box-shadow: 0 8px 20px rgba(21, 62, 117, .12); }
.album-form .afc-carte:hover svg { transform: scale(1.12) rotate(-4deg); }
.album-form .afc-carte:focus-visible { outline: none; border-color: var(--afc-orange); }
.album-form .afc-carte[aria-checked="true"] { border-color: var(--afc-orange); background: #fff7ec; color: var(--afc-bleu); box-shadow: 0 6px 16px rgba(243, 151, 24, .25); }
.album-form .afc-carte[aria-checked="true"] svg { color: var(--afc-orange); transform: scale(1.12); }
.album-form .afc-select-cache { position: absolute !important; width: 1px !important; height: 1px !important; opacity: 0 !important; pointer-events: none !important; }

/* Case à cocher des conditions */
.album-form :is(.fluent_form_25, .fluent_form_24) .ff-el-tc label { font-size: 12px; line-height: 1.5; color: #6b778a; }
.album-form :is(.fluent_form_25, .fluent_form_24) input[type="checkbox"] { accent-color: var(--afc-orange); width: 18px; height: 18px; }

/* Boutons : même style que « Book a call » (fond orange, texte bleu, surlignage bleu au survol) */
.album-form :is(.fluent_form_25, .fluent_form_24) :is(.ff-btn-next, .ff-btn-submit) {
	border: 0 !important; border-radius: 15px !important; background: #f39718 !important; color: #153e75 !important;
	padding: 12px 24px !important; font: 800 14px Poppins, sans-serif !important; text-transform: uppercase; box-shadow: none !important;
	transition: transform .2s;
}
.album-form :is(.fluent_form_25, .fluent_form_24) :is(.ff-btn-next, .ff-btn-submit):active { transform: scale(.97); }
.album-form :is(.fluent_form_25, .fluent_form_24) .afc-texte { position: relative; display: inline-block; z-index: 0; transition: color .35s ease; }
.album-form :is(.fluent_form_25, .fluent_form_24) .afc-texte::before {
	content: ""; position: absolute; z-index: -1; top: 4%; bottom: -6px; left: -6px; right: -10px;
	background: #153e75; border-radius: 3px 8px 4px 7px; transform: scaleX(0) rotate(-.8deg); transform-origin: left center; transition: transform .35s ease;
}
.album-form :is(.fluent_form_25, .fluent_form_24) :is(.ff-btn-next, .ff-btn-submit):hover .afc-texte { color: #f39718; }
.album-form :is(.fluent_form_25, .fluent_form_24) :is(.ff-btn-next, .ff-btn-submit):hover .afc-texte::before { transform: scaleX(1) rotate(-.8deg); }
.album-form :is(.fluent_form_25, .fluent_form_24) .ff-btn-prev {
	border: 0 !important; background: transparent !important; color: #6b778a !important; box-shadow: none !important;
	font: 700 13px Poppins, sans-serif !important; text-transform: uppercase; padding: 12px 10px !important;
}
.album-form :is(.fluent_form_25, .fluent_form_24) .ff-btn-prev::before { content: "← "; }
.album-form :is(.fluent_form_25, .fluent_form_24) .ff-btn-prev:hover { color: #153e75 !important; }
/* Envoi en cours */
.album-form :is(.fluent_form_25, .fluent_form_24) .ff-btn-submit:disabled { opacity: 1 !important; position: relative; }
.album-form :is(.fluent_form_25, .fluent_form_24) .ff-btn-submit:disabled .afc-texte { visibility: hidden; }
.album-form :is(.fluent_form_25, .fluent_form_24) .ff-btn-submit:disabled::after {
	content: ""; position: absolute; left: calc(50% - 11px); top: calc(50% - 11px); width: 22px; height: 22px; border-radius: 50%;
	border: 3px solid rgba(21, 62, 117, .3); border-top-color: #153e75; animation: afc-tourne .7s linear infinite;
}
@keyframes afc-tourne { to { transform: rotate(360deg); } }

/* Confirmation : message qui apparaît + pluie de vignettes */
.album-form .afc-succes { position: relative; }
.album-form .afc-succes .ff-message-success {
	border: 0 !important; border-radius: 16px; background: #effaf3 !important; color: var(--afc-bleu) !important;
	padding: 26px 22px 22px 70px !important; font: 600 15px/1.5 Poppins, sans-serif; position: relative;
	animation: afc-pop .5s cubic-bezier(.34, 1.56, .64, 1);
}
.album-form .afc-succes .ff-message-success::before {
	content: ""; position: absolute; left: 22px; top: 24px; width: 34px; height: 34px;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='11' fill='%2322a855'/%3E%3Cpath d='M7 12.5l3.2 3.2L17 9' fill='none' stroke='%23fff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
}
@keyframes afc-pop { from { opacity: 0; transform: scale(.9) translateY(10px); } }
.album-form .afc-vignette-vol {
	position: absolute; left: 50%; top: 40%; width: 18px; height: 24px; border-radius: 3px; pointer-events: none; z-index: 5;
	border: 2px solid #fff; box-shadow: 0 2px 6px rgba(0, 0, 0, .2);
	animation: afc-vol 1.3s cubic-bezier(.2, .7, .3, 1) forwards;
}
@keyframes afc-vol {
	0% { opacity: 0; transform: translate(-50%, -50%) scale(.4); }
	15% { opacity: 1; }
	100% { opacity: 0; transform: translate(calc(-50% + var(--x)), calc(-50% + var(--y))) rotate(var(--r)) scale(1); }
}

@media (prefers-reduced-motion: reduce) {
	.album-form :is(.fluent_form_25, .fluent_form_24) *, .album-form .afc-succes * { animation: none !important; transition: none !important; }
	.album-form .afc-vignette-vol { display: none; }
}

/* Menus déroulants au design du site (liste personnalisée, menu natif caché) */
.album-form .afc-liste { position: relative; }
.album-form :is(.fluent_form_25, .fluent_form_24) .afc-liste-bouton {
	display: block; width: 100%; text-align: left; cursor: pointer; font-family: Poppins, sans-serif; color: #153e75 !important; line-height: 1.5;
	white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-transform: none; letter-spacing: 0;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23153e75' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") !important;
	background-repeat: no-repeat !important; background-position: right 14px center !important; background-size: 18px !important;
}
.album-form :is(.fluent_form_25, .fluent_form_24) .afc-liste-bouton.afc-liste-vide { color: #a3adbd !important; }
.album-form :is(.fluent_form_25, .fluent_form_24) .afc-ouvert .afc-liste-bouton {
	border-color: var(--afc-orange) !important; background-color: #fff !important; box-shadow: 0 0 0 4px rgba(243, 151, 24, .18) !important;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23f39718' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 15l6-6 6 6'/%3E%3C/svg%3E") !important;
}
.album-form .afc-liste-panneau {
	position: absolute; z-index: 50; top: calc(100% + 8px); left: 0; right: 0; padding: 6px; background: #fff; border-radius: 14px;
	box-shadow: 0 14px 34px rgba(21, 62, 117, .22); opacity: 0; visibility: hidden; transform: translateY(-6px);
	transition: opacity .18s ease, transform .18s ease, visibility 0s linear .18s;
}
.album-form .afc-haut .afc-liste-panneau { top: auto; bottom: calc(100% + 8px); transform: translateY(6px); }
.album-form .afc-ouvert .afc-liste-panneau { opacity: 1; visibility: visible; transform: none; transition: opacity .18s ease, transform .18s ease; }
.album-form .afc-liste-recherche {
	width: 100%; margin: 0 0 6px; padding: 9px 12px !important; border: 2px solid #eef2f8 !important; border-radius: 10px !important;
	font: 14px Poppins, sans-serif; color: #153e75; background: #f6f8fb !important; outline: none;
}
.album-form .afc-liste-recherche:focus { border-color: var(--afc-orange) !important; background: #fff !important; }
.album-form .afc-liste-panneau ul { list-style: none; margin: 0; padding: 0; max-height: 240px; overflow-y: auto; overscroll-behavior: contain; }
.album-form .afc-liste-panneau li {
	position: relative; padding: 9px 34px 9px 12px; border-radius: 9px; cursor: pointer; font: 500 14px/1.35 Poppins, sans-serif; color: #153e75; transition: background .12s;
}
.album-form .afc-liste-panneau li.afc-actif, .album-form .afc-liste-panneau li:hover { background: #eef2f8; }
.album-form .afc-liste-panneau li[aria-selected="true"] { color: var(--afc-orange); font-weight: 600; }
.album-form .afc-liste-panneau li[aria-selected="true"]::after {
	content: ""; position: absolute; right: 12px; top: 50%; width: 12px; height: 7px; margin-top: -6px;
	border: solid currentColor; border-width: 0 0 2.5px 2.5px; transform: rotate(-45deg);
}
@media (prefers-reduced-motion: reduce) { .album-form .afc-liste-panneau { transition: none; } }
/* La liste ouverte ne doit pas être coupée par le cadre des étapes */
.album-form :is(.fluent_form_25, .fluent_form_24) :is(.ff-step-container, .fluentform-step.active):has(.afc-ouvert) { overflow: visible !important; }
/* Bloc à 2 colonnes dont la droite est vide (école EN, classe posée en JS) : la gauche prend toute la largeur, champs sur 2 colonnes */
.album-form :is(.fluent_form_25, .fluent_form_24) .afc-une-colonne > .afc-cellule-vide { display: none !important; }
.album-form :is(.fluent_form_25, .fluent_form_24) .afc-une-colonne > .ff-t-cell:not(.afc-cellule-vide) {
	flex: 1 1 100% !important; max-width: 100% !important; width: 100% !important; display: grid; grid-template-columns: 1fr 1fr; column-gap: 20px; align-items: start;
}
.album-form :is(.fluent_form_25, .fluent_form_24) .ff-t-cell > .ff-el-group:has(input[name="input_text_3"]) { grid-column: 1 / -1; }
@media (max-width: 600px) {
	.album-form :is(.fluent_form_25, .fluent_form_24) .afc-une-colonne > .ff-t-cell { grid-template-columns: 1fr; }
}
