/*
 * COMPOSANT « Composer mon voyage » — même structure partout (template-parts/form-voyage.php),
 * seul l'habillage change selon --efa-form-voyage--hero / --rail / --rubrique / --page.
 */
.efa-form-voyage{
	background: var(--efa-carte); border-radius: var(--efa-rayon-grand); box-shadow: var(--efa-ombre-forte);
	padding: 22px 24px 24px; position: relative; display: flex; flex-direction: column; gap: 12px; color: var(--efa-encre);
}
/* Ostracon : posé AU-DESSUS de la carte, à cheval sur son bord haut, ne cache aucun libellé (erreur n°20) */
.efa-form-voyage-ostracon{ position: absolute; top: -30px; left: -22px; z-index: 3; max-width: none; white-space: nowrap; padding: 9px 18px 9px 16px; font-size: .8125rem; font-weight: 700; }
.efa-form-voyage:has(.efa-form-voyage-ostracon){ padding-top: 34px; }
.efa-form-voyage-fil{ display: none; }
.efa-form-voyage-etapes{
	display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; list-style: none; margin: 0; padding: 0 0 12px;
	font-family: var(--efa-texte); font-size: .6875rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--efa-doux);
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 12' preserveAspectRatio='none'%3E%3Cpath d='M0 6 Q 50 0 100 6 T 200 6 T 300 6 T 400 6' fill='none' stroke='%235FD8C8' stroke-width='2'/%3E%3C/svg%3E") bottom / 100% 8px no-repeat;
}
.efa-form-voyage-etapes li{ display: flex; align-items: center; gap: 6px; white-space: nowrap; }
.efa-form-voyage-etapes b{ width: 22px; height: 22px; flex-shrink: 0; border-radius: 50%; border: 1.5px solid var(--efa-filet); display: inline-flex; align-items: center; justify-content: center; font-size: .6875rem; color: var(--efa-doux); font-variant-numeric: tabular-nums; }
.efa-form-voyage-etapes li.est-active{ color: var(--efa-accent); }
.efa-form-voyage-etapes li.est-active b{ background: var(--efa-accent); border-color: var(--efa-accent); color: #fff; }
.efa-form-voyage-form{ display: flex; flex-direction: column; gap: 12px; min-height: 0; }
.efa-fv-etape{ border: 0; padding: 0; margin: 0; min-width: 0; }
.efa-fv-etape legend{ font-family: var(--efa-titre); font-weight: 800; font-size: 1.625rem; line-height: 1.05; padding: 0; margin: 0 0 12px; color: var(--efa-encre); }
.efa-fv-sous{ font-family: var(--efa-texte); font-weight: 700; font-size: .75rem; text-transform: uppercase; letter-spacing: .08em; color: var(--efa-doux); margin: 14px 0 8px; }

/* Étape 1 — tuiles photo 2x2 */
.efa-fv-tuiles{ display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.efa-fv-tuile{ position: relative; border-radius: 14px; overflow: hidden; cursor: pointer; outline: 3px solid transparent; outline-offset: -3px; transition: transform .2s ease, outline-color .2s ease; background: var(--efa-eau); }
.efa-fv-tuile:hover{ transform: translateY(-2px); }
.efa-fv-tuile input{ position: absolute; opacity: 0; pointer-events: none; }
.efa-fv-tuile img{ width: 100%; height: auto; aspect-ratio: 16/9; object-fit: cover; transition: transform .35s ease; }
.efa-fv-tuile:hover img{ transform: scale(1.05); }
.efa-fv-tuile span{
	position: absolute; left: 0; right: 0; bottom: 0; padding: 22px 12px 9px; font-size: .875rem; font-weight: 700; line-height: 1.2;
	color: #fff; background: linear-gradient(to top, rgba(12,46,47,.92), rgba(12,46,47,0));
}
.efa-fv-tuile.est-coche, .efa-fv-tuile:focus-within{ outline-color: var(--efa-action); }
.efa-secoue{ animation: efa-secoue .35s ease; }
@keyframes efa-secoue{ 25%{ transform: translateX(-4px); } 75%{ transform: translateX(4px); } }

/* Étape 2/3 — cartouches en choix */
.efa-fv-cartouches{ display: flex; flex-wrap: wrap; gap: 8px; }
.efa-cartouche--bouton{ cursor: pointer; }
.efa-cartouche--bouton.est-choisi{ background: var(--efa-accent); color: #fff; }
.efa-cartouche--bouton.est-choisi::before{ border-color: rgba(255,255,255,.6); }
.efa-cartouche--bouton.est-choisi::after{ background: #fff; }

.efa-fv-compteurs{ display: flex; gap: 20px; }
.efa-fv-compteur{ display: flex; flex-direction: column; gap: 6px; font-size: .8125rem; font-weight: 600; }
.efa-fv-compteur-ctrl{ display: flex; align-items: center; gap: 10px; }
.efa-fv-compteur-ctrl button{ width: 32px; height: 32px; border-radius: 50%; border: 1px solid var(--efa-filet); background: var(--efa-blanc); font-size: 1.125rem; cursor: pointer; }
.efa-fv-compteur-ctrl output{ min-width: 24px; text-align: center; font-family: var(--efa-texte); font-weight: 700; font-variant-numeric: tabular-nums; }

/* Étape 4 */
.efa-fv-ligne{ display: flex; gap: 10px; }
.efa-fv-ligne label{ flex: 1; display: flex; flex-direction: column; gap: 4px; font-size: .75rem; font-weight: 600; color: var(--efa-doux); min-width: 0; }
.efa-fv-ligne input{ padding: 11px 12px; border-radius: 10px; border: 1px solid var(--efa-filet); font-size: .9375rem; font-family: var(--efa-texte); }
.efa-fv-consentement{ display: flex; gap: 8px; align-items: flex-start; font-size: .75rem; color: var(--efa-doux); }
.efa-fv-consentement a{ color: var(--efa-accent); }
.efa-fv-erreur{ color: var(--efa-action); font-size: .8125rem; font-weight: 600; margin: 0; }

.efa-fv-nav{ display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.efa-fv-retour{ background: none; border: 0; color: var(--efa-doux); font-size: .875rem; font-weight: 600; cursor: pointer; padding: 10px 0; font-family: var(--efa-texte); }
.efa-fv-retour:hover{ color: var(--efa-encre); }
.efa-fv-suivant{ margin-left: auto; min-height: 48px; padding: 12px 28px; }
.efa-fv-retour[hidden] + .efa-fv-suivant{ width: 100%; }
.efa-fv-confirmation{ background: var(--efa-eau); color: var(--efa-accent); padding: 12px 16px; border-radius: 12px; font-weight: 600; font-size: .9375rem; }
.efa-fv-cartouches .efa-cartouche--bouton{ min-height: 38px; font-size: .8125rem; padding: 6px 10px; justify-content: center; text-transform: none; letter-spacing: 0; font-weight: 700; }
.efa-fv-cartouches .efa-cartouche--bouton::after{ display: none; }
.efa-fv-cartouches .efa-cartouche--bouton:hover{ background: var(--efa-eau); }
.efa-fv-cartouches .efa-cartouche--bouton.est-choisi{ background: var(--efa-accent); color: #fff; }
.efa-fv-cartouches--mois{ display: grid; grid-template-columns: repeat(6, minmax(0,1fr)); gap: 6px; }
.efa-fv-cartouches--duree{ flex-wrap: nowrap; gap: 6px; }
.efa-fv-cartouches--duree .efa-cartouche--bouton{ flex: 1 1 auto; white-space: nowrap; }
.efa-fv-cartouches--budget{ display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
@media (max-width: 380px){ .efa-fv-cartouches--mois{ grid-template-columns: repeat(4, minmax(0,1fr)); } .efa-fv-cartouches--duree{ flex-wrap: wrap; } }
.efa-fv-ligne input:focus{ outline: 2px solid var(--efa-accent); outline-offset: 1px; }

/* -------- Variante HERO : flottante, bornée, horizontale -------- */
.efa-form-voyage--hero{ width: 440px; }
@media (min-width: 1700px){ .efa-form-voyage--hero{ width: 480px; } }

/* -------- Variante RAIL : verticale, compacte, collante (dans partial-sidebar) -------- */
.efa-form-voyage--rail{ box-shadow: var(--efa-ombre); padding: 18px; border: 1px solid var(--efa-filet); }
.efa-form-voyage--rail .efa-form-voyage-etapes li{ font-size: 0; gap: 0; justify-content: center; }
.efa-form-voyage--rail .efa-fv-cartouches .efa-cartouche{ font-size: .75rem; padding: 5px 6px; }
.efa-form-voyage--rail .efa-fv-cartouches--mois{ grid-template-columns: repeat(4, minmax(0,1fr)); }
.efa-form-voyage--rail .efa-fv-cartouches--duree{ flex-wrap: wrap; }
.efa-form-voyage--rail .efa-fv-tuiles{ grid-template-columns: 1fr 1fr; }
.efa-form-voyage--rail legend{ font-size: 1.375rem; }
.efa-form-voyage--rail .efa-fv-ligne{ flex-direction: column; }

/* -------- Variante RUBRIQUE : carte à cheval sur l'en-tête -------- */
.efa-form-voyage--rubrique{ width: 100%; max-width: 420px; }

/* -------- Variante PAGE : grande, centrée -------- */
.efa-form-voyage--page{ max-width: 760px; margin-inline: auto; padding: 32px 36px 36px; }
.efa-form-voyage--page .efa-fv-etape legend{ font-size: 2rem; }
.efa-form-voyage--page .efa-fv-tuiles{ grid-template-columns: repeat(4, 1fr); }
@media (max-width: 700px){ .efa-form-voyage--page .efa-fv-tuiles{ grid-template-columns: 1fr 1fr; } }

@media (max-width: 480px){
	.efa-fv-ligne{ flex-direction: column; }
	.efa-form-voyage--hero{ width: 100%; }
	.efa-form-voyage{ padding: 18px 16px 18px; }
	.efa-form-voyage:has(.efa-form-voyage-ostracon){ padding-top: 30px; }
	.efa-form-voyage-ostracon{ left: -6px; top: -22px; font-size: .75rem; }
	.efa-form-voyage-etapes{ font-size: .625rem; letter-spacing: .02em; }
	.efa-form-voyage-etapes li{ gap: 4px; }
	.efa-form-voyage-etapes b{ width: 18px; height: 18px; font-size: .625rem; }
	.efa-form-voyage--page{ padding: 24px 16px; }
}

.efa-fv-confirmation__titre{ font-family: var(--efa-titre, inherit); font-size: 1.5rem; font-weight: 800; margin: 0 0 6px; color: var(--efa-accent); }
.efa-fv-confirmation p{ margin: 0; }
.efa-fv-confirmation:focus{ outline: none; }