/* Karka — styles propres à templates/pro/register.html.twig (bloc 1).
 * Sortis du gabarit le 11/09/2026 (audit SEO) : servis par AssetMapper avec
 * empreinte et cache long, au lieu d'être réinjectés dans chaque réponse. Le
 * <link> reste à la place exacte de l'ancien <style> : même ordre de cascade. */

/* ── Fil des deux étapes ──────────────────────────────────────────────
   POURQUOI LA COLONNE DE TARIFS A DISPARU — elle occupait 340 px à droite du
   formulaire, et le résultat était illisible : deux cartes de prix hautes
   face à un formulaire long, chacune tirant l'œil de son côté, sans que rien
   ne dise laquelle regarder en premier.

   Le choix de la formule n'a de toute façon RIEN à faire ici : il ne se joue
   qu'après confirmation de l'e-mail, sur `/pro/activation`, qui présente les
   offres avec leur bouton de paiement. Cette page-ci ne fabrique qu'un
   compte. On le dit donc au lieu de le montrer — d'où ce fil d'étapes, qui
   rassure sur ce qui vient ensuite sans encombrer l'écran.

   ⚠ Ne pas y remettre de cartes de prix « pour rassurer » : c'est
   exactement ce qui a été retiré. Le prix est annoncé sous le bouton, en une
   phrase, et présenté en entier à l'étape 2. */
.rg-etapes { display: flex; align-items: center; justify-content: center; gap: 12px;
  margin: 0 0 30px; }
.rg-etape { display: flex; align-items: center; gap: 9px; }
.rg-etape .n { display: flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; border-radius: 8px; font-family: var(--font-mono);
  font-size: 11px; font-weight: 600; background: var(--off); color: var(--ink-35);
  border: 1px solid var(--border); }
.rg-etape .t { font-size: 13px; font-weight: 600; color: var(--ink-35); }
.rg-etape.is-active .n { background: var(--v); color: #fff; border-color: var(--v); }
.rg-etape.is-active .t { color: var(--ink); }
.rg-etapes-lien { width: 40px; height: 1px; background: var(--border); flex-shrink: 0; }

.rg-note { margin-top: 18px; padding: 13px 16px; background: var(--off);
  border: 1px solid var(--border); border-radius: var(--r-md);
  font-size: 12.5px; color: var(--ink-60); line-height: 1.55; text-align: left; }
.rg-note strong { color: var(--v-txt); }

/* Le formulaire : classe plutôt qu'un style en ligne, pour qu'il puisse
   respirer autrement sur un téléphone. */
.rg-form { background: var(--off); border: 1px solid var(--border);
  border-radius: var(--r-xl); padding: 36px; }

/* Deux champs par ligne. Les paires étaient écrites en `style="display:grid;
   grid-template-columns:1fr 1fr"` : sur un écran de 375 px, « Prénom » et
   « Nom » restaient côte à côte dans 150 px chacun, libellés tronqués et
   champs inutilisables. Une classe, pour pouvoir les casser en colonne.
   `gap: 0 16px` : l'écart vertical est déjà porté par `.form-group`. */
.rg-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; }

/* Ligne SIRET : champ + bouton « Rechercher ». `min-width: 0` sinon le champ
   refuse de descendre sous sa largeur intrinsèque et déborde du cadre. */
.rg-siret { display: flex; gap: 12px; align-items: stretch; }
.rg-siret .form-input { flex: 1; min-width: 0; margin-bottom: 0; }

@media (max-width: 940px) {
  /* Une colonne, et le FORMULAIRE d'abord : la page s'appelle « créez votre
     compte », l'action attendue doit être la première chose sous le titre.
     Les tarifs restent juste dessous, avant la validation. */
  /* ⚠ Les libellés RESTENT sur téléphone. Ils avaient été masqués « faute de
     place » : mesuré, le fil complet tient en 327 px sur un écran de 390 —
     il suffit de resserrer. Sans eux il ne restait que « 01 — 02 », deux
     numéros nus qu'on lit comme un ornement, pas comme un parcours. */
  .rg-etapes { gap: 8px; }
  .rg-etape .t { font-size: 11px; }
  .rg-etape .n { width: 23px; height: 23px; font-size: 10px; }
  .rg-etapes-lien { width: 20px; }
}

@media (max-width: 620px) {
  .rg-form { padding: 24px 18px; border-radius: var(--r-lg); }
  .rg-row { grid-template-columns: 1fr; }
  /* Le bouton passe sous le champ : côte à côte, « Rechercher » mangeait la
     moitié de la ligne et le SIRET ne tenait plus. */
  .rg-siret { flex-direction: column; }
  .rg-siret .form-input { margin-bottom: 0; }
  .rg-siret button { width: 100%; padding: 13px 20px !important; }
  /* 16 px : en dessous, Safari iOS zoome à chaque prise de focus et le
     visiteur doit repincer l'écran entre deux champs. */
  .rg-form .form-input { font-size: 16px; }
}