/* ──────────────────────────────────────────────────────────────────────────
   Formulaire.org — composants du produit « Aides d'urgence »
   Préfixe `fo-`. Réutilise les jetons de la DA V3 (style.css) : --papier
   --champ --encre --encre-2 --filet --anis --anis-pale --anis-fonce, plus
   les alias de compatibilité (--purple, --lavender…). Ce fichier n'en
   définit aucun.

   Trois familles :
     · fo-simu      le parcours (une question à la fois, progression)
     · fo-resultat  ce qu'on obtient, dont la partie tenue derrière l'e-mail
     · fo-cta       les appels à l'action semés dans le site
   ────────────────────────────────────────────────────────────────────────── */

/* ═══ 1. LE PARCOURS ═══════════════════════════════════════════════════════ */

.fo-simu {
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: 20px;
	box-shadow: 0 20px 60px rgba(56, 44, 71, .07);
	overflow: hidden;
	max-width: 760px;
	margin-inline: auto;
}

.fo-simu__tete {
	padding: 22px 24px 18px;
	border-bottom: 1px solid var(--line);
	background: var(--soft);
}

.fo-simu__etape {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
	flex-wrap: wrap;
	font-size: 14px;
	color: var(--muted);
	margin-bottom: 10px;
}

.fo-simu__etape strong { color: var(--ink); font-weight: 600; }

/* La jauge : la seule animation du parcours, et elle dit quelque chose de vrai. */
.fo-jauge {
	height: 8px;
	border-radius: 999px;
	background: var(--champ);
	border: 1.5px solid var(--encre);
	overflow: hidden;
}

.fo-jauge__barre {
	height: 100%;
	width: 0;
	border-radius: 999px;
	background: var(--anis);
	transition: width .45s cubic-bezier(.22, .9, .3, 1);
}

.fo-simu__corps { padding: 28px 24px 26px; }

.fo-simu__q {
	font-size: clamp(22px, 2.6vw, 30px);
	font-weight: 600;
	line-height: 1.18;
	letter-spacing: -.035em;
	margin: 0 0 6px;
}

.fo-simu__aide {
	font-size: 15px;
	color: var(--muted);
	margin: 0 0 20px;
	max-width: 58ch;
}

/* Les réponses : des cibles larges, jamais des radios minuscules. */
.fo-choix {
	display: grid;
	gap: 10px;
	grid-template-columns: 1fr;
}

@media (min-width: 620px) {
	.fo-choix--deux { grid-template-columns: 1fr 1fr; }
}

.fo-choix__item {
	display: flex;
	align-items: center;
	gap: 12px;
	width: 100%;
	text-align: left;
	padding: 15px 17px;
	border: 1.5px solid var(--line);
	border-radius: 13px;
	background: var(--surface);
	color: inherit;
	font-size: 16px;
	line-height: 1.35;
	cursor: pointer;
	transition: border-color .16s, background .16s, transform .16s;
}

.fo-choix__item:hover {
	border-color: var(--purple);
	background: var(--soft);
}

.fo-choix__item:active { transform: scale(.995); }

.fo-choix__item.est-actif {
	border-color: var(--encre);
	border-width: 2px;
	background: var(--anis-pale);
	box-shadow: 0 3px 0 var(--encre);
}

.fo-choix__puce {
	flex: 0 0 auto;
	width: 26px;
	height: 26px;
	border-radius: 50%;
	border: 1.5px solid var(--line);
	display: grid;
	place-items: center;
	font-size: 13px;
	font-weight: 600;
	color: var(--muted);
	background: var(--bg);
}

.fo-choix__item.est-actif .fo-choix__puce {
	border-color: var(--anis);
	background: var(--anis);
	color: var(--encre);
}

.fo-choix__texte { flex: 1 1 auto; min-width: 0; }
.fo-choix__note { display: block; font-size: 13.5px; color: var(--muted); margin-top: 2px; }

.fo-simu__pied {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	flex-wrap: wrap;
	margin-top: 22px;
	padding-top: 18px;
	border-top: 1px solid var(--line);
}

.fo-retour {
	background: none;
	border: 0;
	padding: 8px 2px;
	font-size: 15px;
	color: var(--muted);
	cursor: pointer;
	text-decoration: underline;
	text-underline-offset: 3px;
}

.fo-retour:hover { color: var(--ink); }

/* Le champ département : une saisie, pas une liste de 101 entrées. */
.fo-champ {
	display: block;
	width: 100%;
	max-width: 320px;
	padding: 14px 16px;
	border: 1.5px solid var(--line);
	border-radius: 13px;
	background: var(--surface);
	color: inherit;
	font-size: 17px;
}

.fo-champ:focus { border-color: var(--encre); outline: 3px solid var(--anis); outline-offset: 2px; }

/* ═══ 2. LE RÉSULTAT ═══════════════════════════════════════════════════════ */

.fo-resultat__tete { margin-bottom: 22px; }

.fo-resultat__montant {
	font-family: var(--font-titre);
	font-size: clamp(40px, 5vw, 72px);
	font-weight: 800;
	letter-spacing: -.03em;
	line-height: 1.05;
	color: var(--encre);
	display: block;
}

.fo-resultat__legende {
	font-size: 15px;
	color: var(--muted);
	margin-top: 6px;
	max-width: 56ch;
}

.fo-aide {
	border: 1px solid var(--line);
	border-radius: 15px;
	background: var(--surface);
	padding: 18px 20px;
	margin-bottom: 12px;
	break-inside: avoid;
}

.fo-aide__haut {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 14px;
	flex-wrap: wrap;
	margin-bottom: 6px;
}

.fo-aide__nom { font-size: 19px; font-weight: 600; letter-spacing: -.02em; }

.fo-aide__montant {
	font-family: var(--font-titre);
	font-weight: 700;
	white-space: nowrap;
	color: var(--anis-fonce);
	font-variant-numeric: tabular-nums;
}

.fo-aide__organisme { font-size: 14px; color: var(--muted); }
.fo-aide__corps { font-size: 16px; line-height: 1.6; margin-top: 10px; }
.fo-aide__corps p { margin: 0 0 8px; }

.fo-etiquette {
	display: inline-block;
	font-size: 12.5px;
	font-weight: 600;
	letter-spacing: .02em;
	padding: 4px 10px;
	border-radius: 999px;
	background: var(--anis-pale);
	color: var(--anis-fonce);
}

.fo-etiquette--local { background: transparent; border: 1.5px solid var(--anis-fonce); color: var(--anis-fonce); }

/* Ce qui est tenu derrière l'e-mail : lisible comme forme, illisible comme texte.
   Jamais un contenu réel masqué en CSS — le HTML ne le contient pas. */
.fo-flou {
	position: relative;
	border: 1px dashed var(--line);
	border-radius: 15px;
	padding: 20px;
	overflow: hidden;
}

.fo-flou__fantome > * {
	filter: blur(5px);
	user-select: none;
	pointer-events: none;
}

.fo-flou__voile {
	position: absolute;
	inset: auto 0 0;
	padding: 26px 20px 20px;
	background: linear-gradient(to bottom, transparent, var(--surface) 42%);
	text-align: center;
}

/* Vitrine de l'accueil (retour Tiah 22/09) : un aperçu doit donner envie, pas
   flouter. Contrairement à .fo-flou (le vrai palier « payant » du parcours,
   réponses masquées derrière l'e-mail), .fo-teaser ne cache aucun contenu —
   il annonce juste un compte net, sans texte fantôme ni filtre flou. */
.fo-teaser {
	display: flex;
	align-items: center;
	gap: 16px;
	border: 1px solid var(--line);
	border-radius: 15px;
	padding: 18px 20px;
	background: var(--soft);
	margin-top: 4px;
}

.fo-teaser__peigne {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	border-radius: 12px;
	background: var(--anis);
	color: var(--encre);
}

.fo-teaser__nombre {
	flex: 0 0 auto;
	font-family: var(--font-titre);
	font-weight: 800;
	font-size: 34px;
	color: var(--encre);
	line-height: 1;
}

.fo-teaser__texte {
	margin: 0;
	font-size: 14.5px;
	line-height: 1.5;
	color: var(--muted);
}

.fo-teaser__texte strong { color: var(--ink); }

@media (max-width: 480px) {
	.fo-teaser { flex-wrap: wrap; }
	.fo-teaser__texte { flex-basis: 100%; }
}

/* ═══ 3. CAPTURE ET APPELS À L'ACTION ══════════════════════════════════════ */

.fo-capture {
	border-radius: var(--r-l);
	padding: 28px 24px;
	background: var(--encre);
	color: var(--papier);
}

.fo-capture h2, .fo-capture h3 { color: var(--papier); margin: 0 0 8px; }
.fo-capture p { color: var(--sur-nuit-2); margin: 0 0 16px; max-width: 54ch; }

.fo-capture__ligne {
	display: flex;
	gap: 10px;
	flex-wrap: wrap;
	max-width: 520px;
}

.fo-capture__ligne .fo-champ {
	flex: 1 1 220px;
	max-width: none;
	border-color: transparent;
}

.fo-capture__mention {
	font-size: 13px;
	color: var(--sur-nuit-2);
	margin: 12px 0 0;
	max-width: 54ch;
}

/* .fo-bouton, .fo-bouton--grand, .fo-bouton--fin : la règle de fond (couleur,
   bord, ombre « touche de clavier ») vit désormais dans style.css §5 (DA V3),
   commune à tout le site. Ce fichier ne garde que les réglages du composant
   PRODUIT qui n'ont pas leur place ailleurs. */

/* L'encart semé dans les articles : discret, jamais une bannière publicitaire. */
.fo-encart {
	background: var(--anis-pale);
	border-radius: var(--r-m);
	padding: 20px 22px;
	margin: 30px 0;
}

.fo-encart__titre { font-size: 19px; font-weight: 600; margin: 0 0 6px; letter-spacing: -.02em; }
.fo-encart p { margin: 0 0 14px; font-size: 16px; max-width: 58ch; }

/* La barre qui suit : n'apparaît qu'une fois l'article entamé, jamais d'emblée.
   DA V3 §7.2 : bande fine 52px, fond encre, texte papier, bouton anis. */
.fo-barre {
	position: fixed;
	inset: auto 0 0;
	z-index: 60;
	display: none;
	align-items: center;
	justify-content: space-between;
	gap: 14px;
	min-height: 52px;
	padding: 9px 16px calc(9px + env(safe-area-inset-bottom));
	background: var(--encre);
	color: var(--papier);
	border-top: 0;
	box-shadow: 0 -8px 30px rgba(25, 26, 20, .18);
}

.fo-barre.est-visible { display: flex; }
.fo-barre__texte { font-size: 15px; line-height: 1.3; min-width: 0; color: var(--papier); }
.fo-barre__texte strong { display: block; font-weight: 600; color: var(--papier); }
.fo-barre__texte span { color: var(--sur-nuit-2); font-size: 13.5px; }
.fo-barre .fo-bouton { flex: 0 0 auto; padding: 9px 16px; font-size: 15px; }

/* Le thème pose une barre de navigation basse jusqu'à 960px (DA V3 §7.2) :
   les deux ne peuvent pas occuper le même bord. Celle du produit s'efface. */
@media (max-width: 960px) {
	.fo-barre { bottom: calc(64px + env(safe-area-inset-bottom)); }
}

/* ═══ 4. LA PAGE DE VENTE ══════════════════════════════════════════════════ */

/* .fo-prix* et .fo-liste-nette* : la couleur, le rayon et l'icône « case qui
   se coche » vivent désormais dans style.css §13 (DA V3, commun au site).
   .fo-prix__mention reste ici (composant produit pur). */
.fo-prix__mention { font-size: 15px; color: var(--encre-2); }

/* La case de renonciation : exigée avant tout paiement d'un contenu remis
   immédiatement (art. L.221-28, 13° du code de la consommation). */
.fo-renonciation {
	display: flex;
	gap: 12px;
	align-items: flex-start;
	padding: 16px 18px;
	border: 1.5px solid var(--filet);
	border-radius: var(--r-m);
	background: var(--anis-pale);
	margin: 18px 0;
	font-size: 15px;
	line-height: 1.5;
	max-width: 62ch;
}

.fo-renonciation input { margin-top: 3px; width: 20px; height: 20px; flex: 0 0 auto; }

.fo-erreur { color: var(--refus); font-size: 15px; margin: 10px 0 0; min-height: 1.4em; }

/* ═══ 5. IMPRESSION ════════════════════════════════════════════════════════ */

@media print {
	.fo-barre, .fo-capture, .fo-encart, .fo-simu__pied, .fo-retour { display: none !important; }
	.fo-aide { border-color: #999; box-shadow: none; }
	.fo-flou { display: none !important; }
}

@media (prefers-reduced-motion: reduce) {
	.fo-jauge__barre, .fo-choix__item, .fo-bouton { transition: none; }
}

/* ═══ 6. LE BOUTON D'EN-TÊTE ═══════════════════════════════════════════════
   Un sas de service a une action permanente sous la main. Elle s'efface sous
   1040 px : le menu déroulant la reprend en pleine largeur, mieux placée. */
.fo-bouton--entete { padding: 10px 18px; font-size: 15px; white-space: nowrap; }
@media (max-width: 1040px) { .fo-bouton--entete { display: none; } }

/* ═══ 7. LA VITRINE DU PREMIER ÉCRAN ═══════════════════════════════════════
   Montre le résultat, pas une photo d'illustration : trois dispositifs réels
   qui se posent l'un après l'autre. Les montants viennent du jeu de données,
   la mise en scène est ici. */
.fo-vitrine {
	background: var(--champ);
	border: 2px solid var(--encre);
	border-radius: var(--r-l);
	padding: 20px;
	box-shadow: var(--ombre-2);
	max-width: 400px;
	margin-inline: auto;
}

.fo-vitrine__tete { margin-bottom: 16px; }

.fo-vitrine__etape {
	display: block;
	font-size: 12.5px;
	font-weight: 600;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--muted);
	margin-bottom: 8px;
}

.fo-vitrine__jauge {
	height: 6px;
	border-radius: 999px;
	background: var(--lavender);
	overflow: hidden;
}

.fo-vitrine__jauge span {
	display: block;
	height: 100%;
	width: 0;
	border-radius: 999px;
	background: var(--anis-fonce);
	animation: fo-remplir 1.1s .2s cubic-bezier(.22, .9, .3, 1) forwards;
}

@keyframes fo-remplir { to { width: 100%; } }

.fo-vitrine__carte {
	display: grid;
	gap: 2px;
	padding: 13px 15px;
	border: 1px solid var(--line);
	border-radius: 13px;
	margin-bottom: 9px;
	background: var(--bg);
	opacity: 0;
	transform: translateY(10px);
	animation: fo-poser .5s cubic-bezier(.22, .9, .3, 1) forwards;
	animation-delay: calc(.55s + var(--rang) * .28s);
}

@keyframes fo-poser { to { opacity: 1; transform: none; } }

.fo-vitrine__nom { font-size: 15px; font-weight: 600; line-height: 1.25; color: var(--ink); }
.fo-vitrine__org { font-size: 12.5px; color: var(--muted); }

.fo-vitrine__montant {
	font-family: var(--font-titre);
	font-size: 17px;
	font-weight: 700;
	color: var(--anis-fonce);
	font-variant-numeric: tabular-nums;
	margin-top: 4px;
}

.fo-vitrine__puce {
	justify-self: start;
	margin-top: 6px;
	font-size: 11.5px;
	font-weight: 600;
	padding: 3px 9px;
	border-radius: 999px;
	background: var(--anis-pale);
	color: var(--anis-fonce);
}

.fo-vitrine__pied {
	margin: 12px 0 0;
	font-size: 12px;
	color: var(--muted);
	text-align: center;
	font-style: italic;
}

/* Une animation qui se rejoue à chaque défilement fatigue : elle se joue une
   fois, et pas du tout pour qui a demandé moins de mouvement. */
@media (prefers-reduced-motion: reduce) {
	.fo-vitrine__carte { opacity: 1; transform: none; animation: none; }
	.fo-vitrine__jauge span { width: 100%; animation: none; }
}

/* Ce que le département change : le guichet nommé, le règlement local quand on
   l'a relevé. Distingué du reste pour qu'on voie tout de suite ce qui est
   propre à SON territoire. */
.fo-local {
	margin: 10px 0 0;
	padding: 11px 14px;
	background: var(--anis-pale);
	border-radius: var(--r-m);
	font-size: 15px;
	line-height: 1.55;
	overflow-wrap: break-word;
}
.fo-local a { text-decoration: underline; text-underline-offset: 2px; }