/* ═══════════════════════════════════════════════════════════════════════════
   Le wizard « Commencer », ce que site.css ne dit pas (2026-09-21) :
   les marches qui se succèdent, la jauge qui se remplit, le champ téléphone
   avec son indicatif, les erreurs qui se disent. Chargé par commencer.html
   seulement, après site.css.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── La scène : les marches se superposent le temps d une transition. Remplissage `backwards`, jamais `both` : `both` garde le dernier photogramme (filter blur(0px), matrice identité), chacun crée un contexte d empilement, et la liste des pays passait SOUS le plan 3D du dossier ── */
.wizard .scene { position: relative; }
.wizard .marche.vue { display: block; animation: none; }
.wizard .marche.vue > *, .wizard .marche.vue > [data-variante]:not([hidden]) > * { animation: marche-enfant .55s var(--sortie) backwards; }
.wizard .marche.vue > *:nth-child(2), .wizard .marche.vue > [data-variante]:not([hidden]) > *:nth-child(2) { animation-delay: 60ms; }
.wizard .marche.vue > *:nth-child(3), .wizard .marche.vue > [data-variante]:not([hidden]) > *:nth-child(3) { animation-delay: 120ms; }
.wizard .marche.vue > *:nth-child(4), .wizard .marche.vue > [data-variante]:not([hidden]) > *:nth-child(4) { animation-delay: 180ms; }
.wizard .marche.vue > *:nth-child(n+5), .wizard .marche.vue > [data-variante]:not([hidden]) > *:nth-child(n+5) { animation-delay: 240ms; }
.wizard .marche.vue > [data-variante] { animation: none; }
.wizard .marche.sort { display: block; position: absolute; inset: 0 0 auto 0; pointer-events: none; animation: marche-sortie .26s ease-in both; }
.wizard[data-sens="arriere"] .marche.vue > *, .wizard[data-sens="arriere"] .marche.vue > [data-variante]:not([hidden]) > * { animation-name: marche-enfant-arriere; }
.wizard[data-sens="arriere"] .marche.sort { animation-name: marche-sortie-arriere; }
@keyframes marche-enfant { from { opacity: 0; transform: translateX(28px); filter: blur(6px); } to { opacity: 1; transform: none; filter: none; } }
@keyframes marche-enfant-arriere { from { opacity: 0; transform: translateX(-28px); filter: blur(6px); } to { opacity: 1; transform: none; filter: none; } }
@keyframes marche-sortie { to { opacity: 0; transform: translateX(-32px); filter: blur(6px); } }
@keyframes marche-sortie-arriere { to { opacity: 0; transform: translateX(32px); filter: blur(6px); } }

/* ── La jauge : chaque marche franchie se remplit de gauche à droite ── */
.wizard .marches i { position: relative; overflow: hidden; }
.wizard .marches i.faite { background: var(--cacao-100); }
.wizard .marches i::after { content: ""; position: absolute; inset: 0; border-radius: 2px; background: var(--ocre-500); transform: scaleX(0); transform-origin: left; transition: transform .55s var(--sortie); }
.wizard .marches i.faite::after { transform: scaleX(1); }
.wizard [data-etiquette].change { animation: etiquette-entre .4s var(--sortie) both; }
@keyframes etiquette-entre { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* ── Le dossier : une valeur qui arrive se pose en ocre, puis reprend l'encre ── */
.wizard .dossier .ligne.neuve span:last-child { animation: valeur-posee .7s var(--sortie) both; }
@keyframes valeur-posee { from { opacity: 0; transform: translateX(10px); color: var(--ocre-700); } 55% { color: var(--ocre-700); } to { opacity: 1; transform: none; color: var(--cacao-800); } }

/* ── Les erreurs : le champ rougit et se secoue, la phrase dit quoi faire ── */
.wizard .champ.erreur:focus { box-shadow: 0 0 0 3px rgba(162,58,46,.18); border-color: var(--danger-encre); }
.wizard .champ.secoue { animation: secoue .4s ease-out; }
@keyframes secoue { 20% { transform: translateX(-5px); } 45% { transform: translateX(4px); } 70% { transform: translateX(-2px); } }
.wizard .aide .lien { font: inherit; color: var(--ocre-700); font-weight: 500; text-decoration: underline; text-underline-offset: 3px; background: none; border: 0; padding: 0; cursor: pointer; }
.wizard .aide .lien:hover { color: var(--cacao-800); }

/* ── Le téléphone : l'indicatif du pays, puis le numéro. Le même champ que PhoneField dans l'app ── */
.tel { position: relative; }
.tel .tel-ligne { display: flex; gap: 8px; align-items: stretch; }
.tel .tel-ligne .champ { flex: 1; min-width: 0; font-variant-numeric: tabular-nums; }
.tel-pays { flex: none; display: inline-flex; align-items: center; gap: 8px; padding: 10px 10px 10px 12px; border-radius: 8px; border: 1px solid var(--cacao-200); background: var(--carte); color: var(--cacao-800); font: inherit; font-size: 15px; font-variant-numeric: tabular-nums; cursor: pointer; transition: border-color .15s ease, box-shadow .15s ease; }
.tel-pays:hover { border-color: var(--cacao-400); }
.tel-pays:focus-visible, .tel-pays[aria-expanded="true"] { outline: none; border-color: var(--ocre-500); box-shadow: 0 0 0 3px rgba(237,135,37,.25); }
.tel-pays .drapeau, .tel-liste .drapeau { width: 20px; height: 14px; border-radius: 2px; object-fit: cover; box-shadow: 0 0 0 1px rgba(0,0,0,.1); flex: none; }
.tel-pays .chevron { width: 14px; height: 14px; color: var(--cacao-500); transition: transform .25s var(--sortie); }
.tel-pays[aria-expanded="true"] .chevron { transform: rotate(180deg); }
.tel-liste { position: absolute; left: 0; top: calc(100% - 22px); z-index: 30; width: min(360px, 100%); background: var(--carte); border: 1px solid var(--hairline); border-radius: 12px; box-shadow: var(--ombre-xl); padding: 8px; animation: liste-entre .22s var(--sortie) both; }
.tel-liste .tel-cherche { display: block; width: 100%; padding: 9px 12px; border-radius: 8px; border: 1px solid var(--cacao-200); background: var(--creme); color: var(--cacao-800); font: inherit; font-size: 14px; }
.tel-liste .tel-cherche:focus { outline: none; border-color: var(--ocre-500); box-shadow: 0 0 0 3px rgba(237,135,37,.25); }
.tel-liste ul { list-style: none; margin: 6px 0 0; padding: 0; max-height: 264px; overflow-y: auto; overscroll-behavior: contain; }
.tel-liste li { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 8px; font-size: 14px; color: var(--cacao-800); cursor: pointer; }
.tel-liste li .nom { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tel-liste li .dial { color: var(--cacao-500); font-variant-numeric: tabular-nums; }
.tel-liste li[aria-selected="true"], .tel-liste li:hover { background: var(--creme-bande); }
.tel-liste li.choisi { color: var(--ocre-700); font-weight: 500; }
.tel-liste li.choisi .dial { color: var(--ocre-700); }
.tel-liste .vide { padding: 14px 10px; font-size: 14px; color: var(--cacao-500); }
.tel .tel-aide { min-height: 20px; }
.tel .tel-aide b { font-weight: 500; color: var(--cacao-700); font-variant-numeric: tabular-nums; }
@keyframes liste-entre { from { opacity: 0; transform: translateY(-6px) scale(.98); } to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
  .wizard .marche.vue > *, .wizard .marche.vue > [data-variante]:not([hidden]) > *, .wizard .marche.sort, .wizard [data-etiquette].change, .wizard .dossier .ligne.neuve span:last-child, .wizard .champ.secoue, .tel-liste { animation: none; }
  .wizard .marche.sort { display: none; }
  .wizard .marches i::after { transition: none; }
}