/* ===========================================================================
 * Léo Factures — feuille de style du parcours.
 *
 * Reprise fidèle de la maquette « Ecran Support » : les valeurs en dur (58px
 * de hauteur de champ, 19px de corps de texte…) viennent directement de la
 * maquette et sont volontairement conservées telles quelles. Les couleurs et
 * les ombres passent par les tokens du design system quand ils correspondent.
 * ======================================================================== */

*,
*::before,
*::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  min-height: 100dvh;
  background: var(--surface-alt);
  color: #1f2937;
  font-family: var(--font-family);
}

a { color: var(--leo-blue-dark); }
a:hover { color: #1543c2; }

.app {
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
}

.spacer { flex: 1; }

.stack { display: flex; flex-direction: column; }
.stack--10 { gap: 10px; }
.stack--14 { gap: 14px; }
.stack--16 { gap: 16px; }

/* --- En-tête ------------------------------------------------------------ */

.app__head {
  background: var(--surface);
  box-shadow: 0 2px 8px rgba(0, 0, 0, .06);
  position: relative;
  z-index: 1;
}

/* Gouttiere commune : tout ce qui porte .shell s'aligne sur le meme bord,
   pour que le titre de l'accueil tombe exactement sous le logo. */
.shell {
  width: 100%;
  max-width: 1120px;
  margin: 0 auto;
  padding-left: 20px;
  padding-right: 20px;
}

.app__head-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-top: 16px;
  padding-bottom: 16px;
}

.brand { display: flex; align-items: center; gap: 12px; }
.brand__group { width: 52px; height: 52px; border-radius: 10px; display: block; }
.brand__divider { width: 1px; height: 32px; background: var(--border-color); }
.brand__units { display: flex; align-items: center; gap: 6px; }
.brand__units img { width: 34px; height: 34px; border-radius: 7px; display: block; }

.step-pill {
  font-size: 14px;
  font-weight: 600;
  padding: 6px 12px;
  border-radius: var(--radius-pill);
  background: var(--leo-blue-light);
  color: var(--leo-blue-dark);
  white-space: nowrap;
}

/* --- Écrans ------------------------------------------------------------- */

.screen { flex: 1; display: flex; flex-direction: column; }
.screen[hidden] { display: none; }

/* Accueil et confirmation : la maquette ne les cadre qu'en 390 px. Sur grand
   ecran on borne la colonne de lecture a 560 px, mais alignee a gauche sur la
   gouttiere commune — et non centree, sinon le titre decroche du logo. */
.screen--accueil,
.screen--done {
  gap: 28px;
  padding-top: 36px;
  padding-bottom: 28px;
}

.screen--done { gap: 24px; padding-top: 40px; }

.screen--accueil > *,
.screen--done > * { width: 100%; max-width: 560px; }

/* Accueil : l'icône et le titre sur une seule ligne, icône à gauche. */
.hero {
  display: flex;
  align-items: center;
  gap: 16px;
}
.hero .tile { flex: none; }
.hero .title-hero { min-width: 0; }

.tile {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  border-radius: 16px;
  background: var(--leo-blue-light);
  color: var(--leo-blue);
}
.tile--lg i { font-size: 34px; }
/* Confirmation : la coche dans une pastille ronde, centrée, qui s'anime à
   l'arrivée sur l'écran. La classe .is-in est posée par app.js au moment de
   l'affichage — sans elle l'animation se jouerait pendant que l'écran est
   encore masqué, et on ne verrait rien. */
.tile--done {
  position: relative;
  align-self: center;
  width: 96px;
  height: 96px;
  border-radius: var(--radius-pill);
  background: var(--success-light);
  color: #047857;
}
.tile--done i { font-size: 52px; display: inline-block; }

.tile--done.is-in { animation: doneTile .45s cubic-bezier(.34, 1.56, .64, 1) both; }
.tile--done.is-in i { animation: doneCheck .4s .22s cubic-bezier(.34, 1.56, .64, 1) both; }
/* Onde qui s'échappe de la pastille, une seule fois. */
.tile--done.is-in::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  border: 2px solid var(--success);
  animation: doneRing 1s .28s ease-out both;
}

@keyframes doneTile {
  from { transform: scale(.4); opacity: 0; }
  to   { transform: scale(1);  opacity: 1; }
}
@keyframes doneCheck {
  from { transform: scale(.3) rotate(-12deg); opacity: 0; }
  to   { transform: scale(1)   rotate(0);     opacity: 1; }
}
@keyframes doneRing {
  from { transform: scale(1);   opacity: .5; }
  to   { transform: scale(1.6); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .tile--done.is-in,
  .tile--done.is-in i { animation: none; }
  .tile--done.is-in::after { content: none; }
}

.title-hero {
  margin: 0;
  font-size: 32px;
  line-height: 1.15;
  font-weight: 700;
  text-wrap: pretty;
}

.lede {
  margin: 0;
  font-size: 19px;
  line-height: 1.55;
  color: #374151;
  text-wrap: pretty;
}

.notice {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px;
  border-radius: var(--radius-md);
  background: var(--leo-blue-light);
  font-size: 17px;
  line-height: 1.4;
}
.notice__icon {
  flex: none;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: #d6e6ff;
  color: var(--leo-blue);
  display: flex;
  align-items: center;
  justify-content: center;
}
.notice__icon i { font-size: 22px; }

.counter-help {
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-size: 16px;
  color: var(--text-subtle);
  text-align: center;
}
.counter-help i { font-size: 20px; }

/* --- Bouton principal (LeoButton variant primary, taille parcours) ------- */

.btn-xl {
  width: 100%;
  height: 60px;
  border: 0;
  border-radius: var(--radius-md);
  background: var(--primary);
  color: var(--text-btn-color);
  font-family: inherit;
  font-size: 20px;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  cursor: pointer;
  transition: background .15s ease;
}
.btn-xl:hover { background: var(--primary-dark); }
.btn-xl:active { background: #1543c2; }
.btn-xl:disabled { opacity: .6; cursor: progress; }
/* L'icône est posée après le libellé dans le DOM mais s'affiche à droite. */
.btn-xl--icon { flex-direction: row-reverse; }
.btn-xl i { font-size: 24px; }

/* --- Formulaire --------------------------------------------------------- */

.screen--form {
  padding-top: 14px;
  padding-bottom: 24px;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 24px;
  align-items: start;
}

.form-col {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
}

.form-intro {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 6px 4px 8px;
}
.title-page { margin: 0; font-size: 28px; line-height: 1.2; font-weight: 700; }
.subtitle { margin: 0; font-size: 17px; line-height: 1.45; color: var(--text-subtle); }

.summary {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  border-radius: var(--radius-md);
  background: var(--error-light);
  border: 2px solid var(--error);
  font-size: 17px;
  font-weight: 600;
  line-height: 1.35;
  color: #7f1d1d;
}
.summary[hidden] { display: none; }
.summary:focus { outline: none; }
.summary__icon {
  flex: none;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: #fecaca;
  color: #b91c1c;
  display: flex;
  align-items: center;
  justify-content: center;
}
.summary__icon i { font-size: 24px; }

.card {
  background: var(--surface);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  padding: 20px 16px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  box-shadow: var(--shadow-sm);
}

.card__head { display: flex; align-items: center; gap: 12px; }
.card__num {
  width: 34px;
  height: 34px;
  border-radius: var(--radius-pill);
  background: var(--primary);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 17px;
  font-weight: 700;
}
.card__title { margin: 0; font-size: 20px; font-weight: 600; }

/* --- Champs ------------------------------------------------------------- */

.field { display: flex; flex-direction: column; gap: 10px; }
.field[hidden] { display: none; }

.field__label { font-size: 18px; font-weight: 600; }
.field__label-note { font-weight: 400; color: var(--text-subtle); }
.field__label-note[hidden] { display: none; }
.field__hint { margin: 0; font-size: 16px; color: var(--text-subtle); line-height: 1.4; }
.field__note { margin: 0; font-size: 16px; font-weight: 500; line-height: 1.4; color: var(--text-subtle); }

.field__error {
  margin: 0;
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.35;
  color: #b91c1c;
}
.field__error[hidden] { display: none; }
.field__error i { font-size: 20px; flex: none; }

.input {
  width: 100%;
  height: 58px;
  padding: 0 16px;
  font-family: inherit;
  font-size: 19px;
  color: #1f2937;
  border-radius: var(--radius-md);
  background: var(--surface);
  border: 1.5px solid var(--text-disabled);
  transition: border-color .12s ease, box-shadow .12s ease;
}
.input::placeholder { color: var(--text-disabled); }
.input:focus {
  outline: none;
  border-color: var(--leo-blue) !important;
  box-shadow: 0 0 0 4px rgba(44, 117, 255, .15);
}
.input--code { font-size: 21px; font-weight: 500; letter-spacing: .08em; }
.input--siret { font-size: 20px; font-weight: 500; letter-spacing: .06em; padding-right: 52px; }

/* États portés par JS, calqués sur les bordures de la maquette */
.input.is-error { border: 2px solid var(--error); }
.input.is-active { border: 1.5px solid var(--leo-blue); }
.input.is-valid { border: 2px solid var(--success); }

.input-wrap { position: relative; }
.input-wrap__icon {
  position: absolute;
  right: 16px;
  top: 17px;
  font-size: 24px;
  pointer-events: none;
}

.link-btn {
  align-self: flex-start;
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 0;
  border: 0;
  background: none;
  font-family: inherit;
  font-size: 17px;
  font-weight: 500;
  color: var(--leo-blue-dark);
  cursor: pointer;
}
.link-btn i { font-size: 22px; }

/* --- Aide « où trouver mon numéro de compte » ---------------------------- */

.help-panel {
  background: var(--leo-blue-light);
  border-radius: var(--radius-lg);
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.help-panel[hidden] { display: none; }
.help-panel__text { margin: 0; font-size: 16px; line-height: 1.45; color: #1f2937; }

.invoice {
  background: var(--surface);
  border: 1px solid #d1d5db;
  border-radius: var(--radius-xs);
  padding: 12px 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  box-shadow: var(--shadow-sm);
  font-family: Arial, sans-serif;
  color: #111;
}
.invoice__title { font-size: 14px; font-weight: 700; }
.invoice__grid {
  display: grid;
  grid-template-columns: 1.25fr .95fr 1.05fr;
  border: 1px solid #6b7280;
}
.invoice__cell { display: flex; flex-direction: column; border-right: 1px solid #6b7280; }
.invoice__cell:last-child { border-right: 0; }
.invoice__ch {
  background: #e5e7eb;
  font-size: 8.5px;
  font-weight: 700;
  text-align: center;
  padding: 4px 2px;
  border-bottom: 1px solid #6b7280;
}
.invoice__cv { font-size: 9.5px; font-weight: 700; text-align: center; padding: 5px 2px; }
/* La cellule « Compte client » est celle qu'on veut faire repérer. */
.invoice__cell--hl {
  position: relative;
  z-index: 1;
  box-shadow: 0 0 0 3px var(--leo-blue);
  border-radius: 2px;
  background: var(--surface);
  border-right: 0;
}
.invoice__cv--hl { font-size: 11px; padding: 4px 2px; }

/* --- Professionnel / Particulier ---------------------------------------- */

.picker { display: grid; grid-template-columns: 1fr; gap: 10px; }

.pick {
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: 76px;
  padding: 12px 14px;
  border-radius: 10px;
  cursor: pointer;
  text-align: left;
  color: #1f2937;
  font-family: inherit;
  border: 2px solid var(--border-color);
  background: var(--surface);
  transition: border-color .12s ease, background .12s ease;
}
.pick[aria-checked="true"] {
  border-color: var(--leo-blue);
  background: rgba(44, 117, 255, .06);
}
.pick__icon {
  flex: none;
  width: 48px;
  height: 48px;
  border-radius: 10px;
  background: var(--leo-blue-light);
  color: var(--leo-blue);
  display: flex;
  align-items: center;
  justify-content: center;
}
.pick__icon i { font-size: 26px; }
.pick__labels { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.pick__name { font-size: 19px; font-weight: 600; }
.pick__desc { font-size: 15px; color: var(--text-subtle); }
.pick__check {
  flex: none;
  width: 26px;
  height: 26px;
  border-radius: var(--radius-pill);
  background: var(--leo-blue);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
}
.pick:not([aria-checked="true"]) .pick__check { display: none; }

/* Jauge des 14 chiffres du SIRET */
.bars { display: flex; gap: 4px; }
.bars span { flex: 1; height: 6px; border-radius: 4px; background: var(--border-color); }

/* --- E-mail ou courrier ------------------------------------------------- */

.or {
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--text-subtle);
  font-size: 15px;
}
.or span { flex: 1; height: 1px; background: var(--border-color); }

.postal {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 16px;
  border-radius: 10px;
  cursor: pointer;
  text-align: left;
  font-family: inherit;
  font-size: 18px;
  font-weight: 500;
  line-height: 1.4;
  color: #1f2937;
  border: 2px solid var(--border-color);
  background: var(--surface-alt);
  transition: border-color .12s ease, background .12s ease;
}
.postal[aria-checked="true"] {
  border-color: var(--leo-blue);
  background: rgba(44, 117, 255, .06);
}
.postal__box {
  flex: none;
  width: 28px;
  height: 28px;
  border-radius: 5px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  font-weight: 700;
  color: #fff;
  border: 2px solid var(--text-subtle);
  background: var(--surface);
}
.postal[aria-checked="true"] .postal__box {
  border-color: var(--leo-blue);
  background: var(--leo-blue);
}
.postal[aria-checked="true"] .postal__box::after { content: "✓"; }

/* --- Progression et navigation entre les étapes ------------------------- */

.step[hidden] { display: none; }

.stepper {
  list-style: none;
  display: flex;
  margin: 0;
  padding: 4px 0 2px;
}
.stepper__item {
  position: relative;
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  text-align: center;
}
/* Le trait relie le centre de l'étape précédente au centre de celle-ci. */
.stepper__item + .stepper__item::before {
  content: "";
  position: absolute;
  top: 15px;
  left: -50%;
  right: 50%;
  height: 2px;
  background: var(--border-color);
}
.stepper__item--done::before,
.stepper__item--current::before { background: var(--leo-blue); }

.stepper__badge {
  position: relative;
  z-index: 1;
  width: 32px;
  height: 32px;
  border-radius: var(--radius-pill);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  font-weight: 700;
  background: var(--surface);
  color: var(--text-disabled);
  border: 2px solid var(--border-color);
  transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.stepper__item--current .stepper__badge {
  background: var(--leo-blue);
  border-color: var(--leo-blue);
  color: #fff;
}
.stepper__item--done .stepper__badge {
  background: var(--success);
  border-color: var(--success);
  color: #fff;
}
.stepper__label {
  font-size: 12.5px;
  line-height: 1.25;
  color: var(--text-subtle);
}
.stepper__item--current .stepper__label { color: #1f2937; font-weight: 600; }

.nav { display: flex; align-items: stretch; gap: 10px; padding-top: 6px; }
.nav .btn-xl { flex: 1; }

.btn-back {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex: none;
  height: 60px;
  padding: 0 18px;
  border: 2px solid var(--border-color);
  border-radius: var(--radius-md);
  background: var(--surface);
  font-family: inherit;
  font-size: 18px;
  font-weight: 600;
  color: var(--text-subtle);
  cursor: pointer;
  transition: border-color .15s ease, color .15s ease;
}
.btn-back:hover { border-color: var(--text-disabled); color: #1f2937; }
.btn-back[hidden] { display: none; }
/* Une seule icône dans le jeu : on retourne la flèche pour le retour. */
.btn-back i { font-size: 22px; transform: rotate(180deg); }

/* --- Colonne latérale (desktop) ----------------------------------------- */

.side { display: none; }

/* --- Chargement --------------------------------------------------------- */

.screen--loading {
  padding: 40px 24px;
  align-items: center;
  justify-content: center;
  gap: 28px;
  text-align: center;
}
.spinner {
  width: 64px;
  height: 64px;
  border-radius: var(--radius-pill);
  border: 6px solid var(--leo-blue-light);
  border-top-color: var(--leo-blue);
  animation: leoSpin 1s linear infinite;
}
@keyframes leoSpin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .spinner { animation-duration: 2.4s; }
}
.title-loading { margin: 0; font-size: 26px; line-height: 1.2; font-weight: 700; }
.loading-text { margin: 0; font-size: 18px; line-height: 1.5; color: var(--text-subtle); }

/* --- Confirmation ------------------------------------------------------- */

.recap {
  background: var(--surface);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  padding: 6px 16px;
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
}
.recap__row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid var(--divider-color);
  font-size: 16px;
}
.recap__row:last-child { border-bottom: 0; }
.recap__row--stacked { flex-direction: column; gap: 4px; }
.recap__key { color: var(--text-subtle); }
.recap__val { font-weight: 600; }
.recap__val--right { text-align: right; }
.recap__val--break { word-break: break-word; }

.close-hint { margin: 0; font-size: 16px; color: var(--text-subtle); text-align: center; }

/* ===========================================================================
 * Desktop — variante 1280 px de la maquette
 * ======================================================================== */

@media (min-width: 980px) {
  .screen--form {
    padding-top: 32px;
    padding-bottom: 48px;
    grid-template-columns: minmax(0, 1fr) 340px;
  }

  .picker { grid-template-columns: 1fr 1fr; }

  .nav { max-width: 420px; }

  /* Sur grand écran la progression vit dans la colonne de droite. */
  .stepper { display: none; }

  .counter-help--mobile { display: none; }

  .side {
    position: sticky;
    top: 24px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding-top: 86px;
  }
  .side__card {
    background: var(--surface);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 14px;
    box-shadow: var(--shadow-sm);
  }
  .side__step { display: flex; align-items: center; gap: 12px; font-size: 17px; font-weight: 600; }
  .side__step--todo { opacity: .6; }
  .side__badge {
    width: 28px;
    height: 28px;
    border-radius: var(--radius-pill);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: 700;
    color: #fff;
  }
  .side__step--done .side__badge { background: var(--success); }
  .side__step--current .side__badge { background: var(--leo-blue); }
  .side__step--todo .side__badge { background: var(--surface-table-header); color: var(--text-subtle); }

  .side__card--help { flex-direction: row; gap: 14px; }
  .side__help-icon {
    flex: none;
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: var(--surface-table-header);
    color: var(--text-subtle);
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .side__help-icon i { font-size: 22px; }
  .side__help-text { display: flex; flex-direction: column; gap: 4px; font-size: 16px; line-height: 1.45; color: var(--text-subtle); }
  .side__help-title { font-size: 17px; font-weight: 600; color: #1f2937; }
}