/* Tunnel d'inscription BRO (Inscription V1, 18/09) — 5 étapes sur une page, panneaux
   affichés/masqués. Valeurs copiées telles quelles depuis "Inscription V1 - source
   autonome.html", jamais redevinées.

   Cette feuille vient EN PLUS de preconnexion.css, jamais à sa place : les deux écrans
   partagent la même coque sombre, le même bloc de marque, les mêmes champs et le même
   bouton primaire. Tout ce qui est commun (.pc-page, .pc-shell, .pc-dots, .pc-input,
   .pc-pwd-*, .pc-field-err, .pc-divider, .pc-provider-*) est réutilisé tel quel — d'où
   l'absence de doublon ici. On ne touche pas à preconnexion.css : l'écran Connexion est
   livré et vérifié, et une retouche partagée le remettrait en jeu pour rien. Les rares
   écarts de la maquette Inscription sur la coque sont donc des modificateurs (--signup).
*/

/* `hidden` doit vraiment cacher. La règle du navigateur (`[hidden] { display: none }`) a une
   spécificité de 0,0,1 : n'importe quelle classe posant `display: flex` ou `grid` la bat, et
   l'élément reste visible. Sans cette ligne, les quatre messages d'erreur de l'étape 1
   (.pc-field-err, .ins-err-card) s'affichent tous en permanence, et le bouton retour apparaît
   dès l'étape 1. C'est la seule règle `!important` de la feuille, et elle est là pour ça. */
.ins-page [hidden] { display: none !important; }

/* --- Coque : mêmes primitives que la connexion, trois écarts mesurés dans la maquette ---
   (1) le contenu part du haut au lieu d'être centré : le tunnel est long, l'étape 3 fait
   plus d'un écran ; (2) gap 24px au lieu de 36 ; (3) halo un peu plus discret (0.16 contre
   0.18) et trame de points sur 300px au lieu de 320. */
.pc-shell--signup {
  justify-content: flex-start;
  gap: 24px;
  padding: clamp(20px, 3vw, 36px) clamp(16px, 3vw, 40px) clamp(28px, 4vw, 48px);
  background: radial-gradient(62% 40% at 50% -4%, rgba(226, 241, 99, 0.16), rgba(20, 20, 20, 0) 72%), #141414;
}
.pc-shell--signup .pc-dots { height: 300px; }

/* 580px partout, SAUF à l'étape des formules : 1000px (Inscription V3, `colW`). Les trois
   formules y sont côte à côte, à égalité — c'est la maquette qui fait autorité (MESSAGE 39),
   et elle revient sur l'empilement du MESSAGE 9. */
.ins-col {
  position: relative;
  width: 100%;
  max-width: var(--ins-col-max, 580px);
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-inline: auto;
}
.ins-col--panels { gap: 24px; }
.ins-page[data-step="3"] { --ins-col-max: 1000px; }


/* --- En-tête de progression --- */
.ins-topbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.ins-back {
  width: 44px; height: 44px; border: 1px solid #2e2f27; border-radius: 999px;
  background: transparent; cursor: pointer; display: grid; place-items: center; color: #ffffff;
  flex: 0 0 auto;
}
.ins-back:hover { background: #1c1c1c; }
.ins-back .material-symbols-rounded { font-size: 21px; line-height: 1; }
/* À l'étape 1 il n'y a pas de retour : le logo (MESSAGE 62 §3, .pc-logo) prend sa place, pour que la
   ligne garde son équilibre et que la marque apparaisse au moins une fois dans le tunnel. */
.ins-bybro { display: flex; align-items: center; gap: 5px; }
/* Sur un téléphone, le logo du bandeau (203 px de large à 28 px de haut) laisse la place au nom de l'étape. */
@media (max-width: 420px) { .ins-bybro .pc-logo { height: 22px; } }
.ins-by { font-family: 'DM Mono', ui-monospace, monospace; font-size: 10px; letter-spacing: 0.04em; color: #a8ada0; }
.ins-stepname {
  font-family: 'DM Mono', ui-monospace, monospace; font-size: 11px; letter-spacing: 0.06em;
  text-transform: uppercase; color: #cfd2c6; text-align: right;
}
.ins-bars { display: flex; gap: 5px; }
.ins-bar { flex: 1 1 0; min-width: 0; height: 5px; border-radius: 999px; background: #2e2f27; }
.ins-bar--on { background: #e2f163; }

/* --- Panneaux d'étape --- */
.ins-panel { display: flex; flex-direction: column; gap: 24px; animation: broFlyIn 200ms cubic-bezier(0.2, 0.8, 0.2, 1) both; }
.ins-panel[hidden] { display: none; }
.ins-panel--center { align-items: center; }
.ins-head { display: flex; flex-direction: column; gap: 10px; }
.ins-panel--center .ins-head { align-items: center; }
.ins-h2 {
  margin: 0; font-family: Poppins, sans-serif; font-weight: 700; font-size: clamp(28px, 3.2vw, 38px);
  line-height: 1.04; letter-spacing: -0.035em; color: #ffffff; text-wrap: pretty;
}
.ins-panel--center .ins-h2 { text-align: center; }
.ins-sub { margin: 0; font-size: 15px; line-height: 1.45; color: #cfd2c6; max-width: 44ch; text-wrap: pretty; }
.ins-sub--w46 { max-width: 46ch; }
.ins-sub--w48 { max-width: 48ch; }
.ins-sub--w56 { max-width: 56ch; }
.ins-panel--center .ins-sub { text-align: center; max-width: 40ch; }

.ins-fields { display: flex; flex-direction: column; gap: 14px; }
.ins-field { display: flex; flex-direction: column; gap: 7px; }
.ins-field-label, .ins-group-label {
  font-family: Poppins, sans-serif; font-weight: 500; font-size: 13px; color: #cfd2c6;
}
.ins-group { display: flex; flex-direction: column; gap: 9px; }
.ins-hint { font-family: 'DM Mono', ui-monospace, monospace; font-size: 11px; line-height: 1.6; color: #a8ada0; }

/* --- Bouton primaire ---
   Volontairement distinct de .pc-submit : celui de la connexion porte `border: 1px solid
   #e2f163`, invisible sur fond lime mais qui trahirait l'état inerte (#232323) des étapes 3
   et 4. Ici la bordure suit le fond. */
.ins-cta {
  display: flex; align-items: center; justify-content: center; gap: 9px; min-height: 54px;
  border: none; border-radius: 999px; background: #e2f163; color: #14150f; cursor: pointer;
  font-family: Poppins, sans-serif; font-weight: 600; font-size: 16px; width: 100%;
  text-decoration: none;
}
.ins-cta:hover { background: #eaf68b; color: #14150f; }
.ins-cta .material-symbols-rounded { font-size: 20px; line-height: 1; }
/* Inerte tant qu'aucune formule n'est choisie (étape 3) ou que l'engagement n'est pas coché
   (étape 4). Pas `disabled` : le bouton reste focalisable et annonce pourquoi il ne fait
   rien (aria-disabled), au lieu de disparaître des tabulations. */
.ins-cta[aria-disabled="true"] { background: #232323; color: #a8ada0; cursor: default; }
.ins-cta[aria-disabled="true"]:hover { background: #232323; color: #a8ada0; }
.ins-cta--inline { width: auto; align-self: flex-start; padding: 0 22px; }

.ins-legal { margin: 0; font-size: 13px; line-height: 1.45; color: #a8ada0; }
.ins-legal a, .ins-inline-link {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 6px; margin: 0 -6px; border-radius: 12px;
}
.ins-fine {
  margin: 0; display: flex; align-items: flex-start; gap: 9px;
  font-family: 'DM Mono', ui-monospace, monospace; font-size: 11px; line-height: 1.6; color: #a8ada0;
}
.ins-fine .material-symbols-rounded { font-size: 16px; line-height: 1.4; }

/* --- Étape 1 : fournisseurs --- */
.ins-providers { display: flex; flex-wrap: wrap; gap: 10px; }
.ins-provider-btn {
  flex: 1 1 180px; min-width: 0; display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  min-height: 50px; border: 1px solid #2e2f27; border-radius: 999px; background: transparent; cursor: pointer;
  font-family: Poppins, sans-serif; font-weight: 500; font-size: 14px; color: #ffffff; text-decoration: none;
}
.ins-provider-btn:hover { background: #1c1c1c; color: #ffffff; }
.ins-provider-btn img { width: 18px; height: 18px; }

/* Bloc "email déjà utilisé" : le seul des quatre états de l'étape 1 qui n'est pas une ligne
   de texte mais un encart avec sa sortie (brief §6). Pas de rouge, jamais. */
.ins-err-card { display: flex; flex-direction: column; gap: 6px; background: #232323; border-radius: 16px; padding: 12px 14px; }
.ins-err-card-row { display: flex; align-items: flex-start; gap: 9px; font-size: 14px; line-height: 1.45; color: #cfd2c6; }
.ins-err-card-row .material-symbols-rounded { font-size: 19px; line-height: 1.2; color: #e2f163; }
.ins-err-card-link {
  align-self: flex-start; min-height: 44px; display: inline-flex; align-items: center;
  padding: 0 12px; margin-left: -12px; border-radius: 999px; font-size: 14px; font-weight: 500;
}
.ins-err-card-link:hover { background: #2e2f27; }

/* --- Étape 2 : secteur en pastilles, ton éditorial en cartes --- */
.ins-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.ins-chip {
  min-height: 44px; padding: 0 16px; border: 1px solid #2e2f27; border-radius: 999px; cursor: pointer;
  font-family: Poppins, sans-serif; font-weight: 500; font-size: 14px; background: transparent; color: #ffffff;
}
.ins-chip:hover { background: #1c1c1c; }
.ins-chip[aria-checked="true"] { background: #e2f163; border-color: #e2f163; color: #14150f; }

.ins-tones { display: flex; flex-direction: column; gap: 10px; }
.ins-tone {
  display: flex; align-items: flex-start; gap: 12px; text-align: left; padding: 15px;
  border: 1px solid #2e2f27; border-radius: 20px; cursor: pointer; background: #1c1c1c;
}
.ins-tone .material-symbols-rounded { font-size: 22px; line-height: 1.1; color: #e2f163; }
.ins-tone-col { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.ins-tone-name { font-family: Poppins, sans-serif; font-weight: 600; font-size: 16px; color: #ffffff; }
.ins-tone-sample { font-size: 14px; line-height: 1.45; color: #cfd2c6; }
.ins-tone[aria-checked="true"] { background: #e2f163; border-color: #e2f163; }
.ins-tone[aria-checked="true"] .material-symbols-rounded,
.ins-tone[aria-checked="true"] .ins-tone-name,
.ins-tone[aria-checked="true"] .ins-tone-sample { color: #14150f; }

/* --- Étape 3 : nos formules (Inscription V3 l. 251-381, MESSAGE 39) ---
   D'abord ce qui est commun, en deux volets reliés par la même matière première ; ensuite
   l'interrupteur de rythme et les trois cartes, à égalité, côte à côte. */
.ins-panel--formules { gap: 22px; }
.ins-overline {
  font-family: 'DM Mono', ui-monospace, monospace; font-size: 10px; letter-spacing: 0.08em;
  text-transform: uppercase; color: #e2f163;
}
.ins-overline--muted { color: #a8ada0; }
.ins-overline--pad { padding-bottom: 10px; }
.ins-volets-bloc { display: flex; flex-direction: column; }
.ins-volets { display: flex; gap: 14px; flex-wrap: wrap; align-items: stretch; }
.ins-volet {
  flex: 1 1 300px; min-width: 0; display: flex; flex-direction: column; gap: 14px;
  background: #1c1c1c; border: 1px solid #2e2f27; border-radius: 24px; padding: 22px;
}
.ins-volet-head { display: flex; align-items: center; gap: 12px; }
.ins-volet-icon {
  flex: 0 0 auto; width: 44px; height: 44px; border-radius: 15px; background: #e2f163; color: #14150f;
  display: grid; place-items: center; font-size: 22px;
}
.ins-volet-col { display: flex; flex-direction: column; gap: 3px; }
.ins-volet-titre { font-family: Poppins, sans-serif; font-weight: 700; font-size: 26px; line-height: 1; letter-spacing: 0.02em; color: #ffffff; }
.ins-volet-sous { font-size: 14px; color: #cfd2c6; }
.ins-volet-rule { height: 1px; background: #2e2f27; }
.ins-volet-lignes { display: flex; flex-direction: column; gap: 11px; }
.ins-volet-ligne {
  display: flex; align-items: flex-start; gap: 10px; font-size: 15px; font-weight: 500;
  line-height: 1.45; color: #ffffff; text-wrap: pretty;
}
.ins-volet-ligne .material-symbols-rounded { font-size: 19px; line-height: 1.25; color: #e2f163; }
.ins-bientot {
  font-family: 'DM Mono', ui-monospace, monospace; font-size: 10px; letter-spacing: 0.06em;
  text-transform: uppercase; padding: 2px 7px; border-radius: 999px; background: #2e2f27;
  color: #e2f163; white-space: nowrap;
}
/* Les deux traits lime qui descendent des volets vers le bandeau. */
.ins-volets-traits { display: flex; justify-content: space-around; height: 18px; }
.ins-volets-traits span { width: 3px; background: #e2f163; }
.ins-matiere {
  display: flex; flex-direction: column; gap: 12px; background: #e2f163; border-radius: 24px;
  padding: 18px 20px; color: #14150f;
}
.ins-matiere-tete { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.ins-matiere-titre {
  font-family: Poppins, sans-serif; font-weight: 700; font-size: clamp(19px, 2.1vw, 23px);
  line-height: 1.15; letter-spacing: -0.025em;
}
.ins-matiere-sous { font-size: 14px; font-weight: 500; color: #3c4034; }
.ins-matiere-ligne { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.ins-matiere-source {
  padding: 8px 13px; border-radius: 999px; background: #14150f; color: #ffffff;
  font-size: 13.5px; font-weight: 600;
}
.ins-matiere-fleche { font-size: 20px; color: #14150f; }
.ins-matiere-sortie {
  display: flex; align-items: center; gap: 6px; padding: 7px 12px 7px 8px; border-radius: 999px;
  background: #ffffff; color: #14150f; font-size: 13.5px; font-weight: 600;
}
.ins-matiere-tag {
  font-family: 'DM Mono', ui-monospace, monospace; font-size: 9.5px; letter-spacing: 0.08em;
  padding: 3px 7px; border-radius: 999px; background: #14150f; color: #e2f163;
}
.ins-matiere-et { font-family: 'DM Mono', ui-monospace, monospace; font-size: 12px; color: #3c4034; }

.ins-formules-barre { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.ins-rythme { display: flex; gap: 4px; padding: 4px; border-radius: 999px; background: #1c1c1c; border: 1px solid #2e2f27; }
.ins-rythme-btn {
  display: flex; align-items: center; gap: 7px; min-height: 44px; padding: 0 16px; border: none;
  border-radius: 999px; cursor: pointer; font-family: Poppins, sans-serif; font-weight: 600;
  font-size: 14px; background: transparent; color: #ffffff;
}
.ins-rythme-tag {
  font-family: 'DM Mono', ui-monospace, monospace; font-size: 10px; padding: 3px 7px;
  border-radius: 999px; background: #2e2f27; color: #e2f163;
}
.ins-rythme-btn[aria-checked="true"] { background: #e2f163; color: #14150f; }
.ins-rythme-btn[aria-checked="true"] .ins-rythme-tag { background: #14150f; }

/* `min(100%, 250px)` et pas `250px` : sans le `min()`, la piste garde 250px dans un
   conteneur plus étroit et la page scrolle latéralement au téléphone. */
.ins-plans { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr)); gap: 12px; }
.ins-plan {
  display: flex; flex-direction: column; align-items: stretch; gap: 12px; min-width: 0; text-align: left;
  padding: 20px; border: 1px solid #2e2f27; border-radius: 24px; cursor: pointer; background: #1c1c1c;
}
.ins-plan-top { display: flex; align-items: center; gap: 10px; }
.ins-plan-mark { width: 22px; height: 22px; border-radius: 999px; border: 1.5px dashed #3c4034; flex: 0 0 auto; display: grid; place-items: center; box-sizing: border-box; }
.ins-plan-mark .material-symbols-rounded { font-size: 16px; line-height: 1; color: #e2f163; display: none; }
.ins-plan-dispo {
  margin-left: auto; font-family: 'DM Mono', ui-monospace, monospace; font-size: 10px;
  letter-spacing: 0.06em; text-transform: uppercase; padding: 4px 8px; border-radius: 999px;
  background: #2e2f27; color: #cfd2c6;
}
.ins-plan-dispo--ouverte { background: #2e3a17; color: #e2f163; }
.ins-plan-name { font-family: Poppins, sans-serif; font-weight: 700; font-size: 20px; line-height: 1.1; letter-spacing: -0.02em; color: #ffffff; }
.ins-plan-price-row { display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; }
.ins-plan-price { font-family: Poppins, sans-serif; font-weight: 700; font-size: 34px; line-height: 1; letter-spacing: -0.035em; color: #ffffff; }
.ins-plan-per { font-family: 'DM Mono', ui-monospace, monospace; font-size: 12px; color: #a8ada0; }
/* « soit 3 780 € HT par an », en petit sous le prix du mois (réponse de Cyril du 23/09). Vide en
   mensuel : l'emplacement disparaît au lieu de laisser un trou. */
.ins-plan-par-an { margin-top: -6px; font-family: 'DM Mono', ui-monospace, monospace; font-size: 12px; color: #a8ada0; }
.ins-plan-par-an:empty { display: none; }
/* L'engagement et la remise annuelle sortent du micro-type : un engagement de 12 mois ne peut
   pas être dans la plus petite typo de la carte. */
.ins-plan-terms { display: flex; flex-direction: column; gap: 5px; font-size: 13.5px; line-height: 1.45; color: #cfd2c6; }
.ins-plan-term { display: flex; align-items: center; gap: 7px; }
.ins-plan-term .material-symbols-rounded { font-size: 16px; }
.ins-plan-rule { height: 1px; background: #2e2f27; }
.ins-plan-plus {
  font-family: 'DM Mono', ui-monospace, monospace; font-size: 10px; letter-spacing: 0.08em;
  text-transform: uppercase; color: #e2f163;
}
.ins-plan-feats { display: flex; flex-direction: column; gap: 8px; }
.ins-plan-feat { display: flex; align-items: flex-start; gap: 9px; font-size: 14px; line-height: 1.4; color: #cfd2c6; }
.ins-plan-feat .material-symbols-rounded { font-size: 18px; line-height: 1.25; color: #e2f163; }
.ins-plan-soon { margin-top: auto; font-size: 12.5px; line-height: 1.45; color: #a8ada0; text-wrap: pretty; }

.ins-plan[aria-checked="true"] { background: #e2f163; border-color: #e2f163; }
.ins-plan[aria-checked="true"] .ins-plan-mark { border: none; background: #14150f; }
.ins-plan[aria-checked="true"] .ins-plan-mark .material-symbols-rounded { display: block; }
.ins-plan[aria-checked="true"] .ins-plan-dispo { background: rgba(20, 21, 15, 0.12); color: #14150f; }
.ins-plan[aria-checked="true"] .ins-plan-dispo--ouverte { background: #14150f; color: #e2f163; }
.ins-plan[aria-checked="true"] .ins-plan-name,
.ins-plan[aria-checked="true"] .ins-plan-price,
.ins-plan[aria-checked="true"] .ins-plan-terms,
.ins-plan[aria-checked="true"] .ins-plan-feat,
.ins-plan[aria-checked="true"] .ins-plan-feat .material-symbols-rounded { color: #14150f; }
.ins-plan[aria-checked="true"] .ins-plan-per,
.ins-plan[aria-checked="true"] .ins-plan-par-an,
.ins-plan[aria-checked="true"] .ins-plan-plus,
.ins-plan[aria-checked="true"] .ins-plan-soon { color: #3c4034; }
.ins-plan[aria-checked="true"] .ins-plan-rule { background: rgba(20, 21, 15, 0.22); }

.ins-plan-footer { display: flex; flex-direction: column; gap: 10px; }
.ins-taxline { font-family: 'DM Mono', ui-monospace, monospace; font-size: 11px; line-height: 1.6; color: #cfd2c6; }

/* --- Étapes 4 et 5 : récapitulatif chiffré ligne par ligne ---
   Le fond #2e2f27 du conteneur ne se voit que dans les 1px de gap entre les lignes : c'est
   le filet, pas une bordure de carte. */
.ins-recap { display: flex; flex-direction: column; gap: 1px; background: #2e2f27; border-radius: 20px; overflow: hidden; }
.ins-recap-row {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px;
  background: #1c1c1c; padding: 13px 16px;
}
.ins-recap-k {
  font-family: 'DM Mono', ui-monospace, monospace; font-size: 10px; letter-spacing: 0.06em;
  text-transform: uppercase; color: #a8ada0;
}
.ins-recap-v { font-family: Poppins, sans-serif; font-weight: 500; font-size: 15px; color: #ffffff; text-align: right; }

.ins-reassure { display: flex; flex-direction: column; gap: 11px; background: #1c1c1c; border-radius: 22px; padding: 17px; }
.ins-reassure-list { display: flex; flex-direction: column; gap: 7px; }
.ins-reassure-line { display: flex; align-items: flex-start; gap: 9px; font-size: 14px; line-height: 1.45; color: #ffffff; }
.ins-reassure-line .material-symbols-rounded { font-size: 18px; line-height: 1.3; color: #e2f163; }

.ins-pay-row { display: flex; flex-wrap: wrap; gap: 10px; }
.ins-pay-row .ins-field { flex: 1 1 140px; min-width: 0; }
.ins-mono-input { font-family: 'DM Mono', ui-monospace, monospace; }

/* Emplacements des champs carte quand Stripe est branché. Le <span> garde la boîte dessinée
   par .pc-input — même hauteur, même rayon, même bordure — et Stripe y monte son iframe. Le
   visiteur ne voit aucune différence entre les deux rendus ; c'était la condition pour ne pas
   redessiner l'écran.
   Les classes .StripeElement--* sont posées par Stripe sur ce conteneur : c'est par elles que
   le focus et l'erreur reprennent la charte, sans rouge, comme partout ailleurs. */
.ins-stripe-slot { display: flex; align-items: center; }
.ins-stripe-slot > * { width: 100%; }
.ins-stripe-slot.StripeElement--focus { border-color: #e2f163; background: #1f1f1f; }
.ins-stripe-slot.StripeElement--invalid { border-color: #e2f163; }

/* Case d'engagement : bloque le paiement sur Standard et Premium tant qu'elle n'est pas
   cochée. Vrai <input type="checkbox"> masqué visuellement, pour garder le clavier et les
   lecteurs d'écran ; la pastille est le rendu. */
.ins-engage {
  display: flex; align-items: flex-start; gap: 11px; text-align: left; min-height: 44px;
  margin-left: -8px; padding: 8px; border: none; border-radius: 16px; background: none; cursor: pointer;
  position: relative;
}
.ins-engage:hover { background: #1c1c1c; }
.ins-engage input { position: absolute; opacity: 0; width: 21px; height: 21px; margin: 0; cursor: pointer; }
.ins-engage-box {
  width: 21px; height: 21px; border-radius: 7px; background: #1c1c1c; box-shadow: inset 0 0 0 1px #3c4034;
  display: grid; place-items: center; flex: 0 0 auto; margin-top: 1px;
}
.ins-engage-box .material-symbols-rounded { font-size: 15px; line-height: 1; color: #14150f; display: none; }
.ins-engage input:checked ~ .ins-engage-box { background: #e2f163; box-shadow: none; }
.ins-engage input:checked ~ .ins-engage-box .material-symbols-rounded { display: block; }
.ins-engage-label { font-size: 14px; line-height: 1.45; color: #cfd2c6; }
.ins-engage input:checked ~ .ins-engage-label { color: #ffffff; }

/* --- Étape 5 --- */
/* Le carré du logo client a été retiré le 20/09 : l'écran affiche la marque de bro
   (.pc-mark, dans preconnexion.css). Les deux règles qui vivaient ici dépendaient de
   @keyframes broGlow, supprimée en même temps. */
.ins-panel--center .ins-recap,
.ins-panel--center .ins-reassure,
.ins-panel--center .ins-cta { width: 100%; }
.ins-next-list { display: flex; flex-direction: column; gap: 8px; }

/* Brique manquante : tant qu'aucun prestataire de paiement n'est configuré, l'étape 4 le
   dit au lieu de faire semblant d'encaisser. Même traitement que les autres messages du
   produit — bloc #232323, icône lime, aucun rouge. */
.ins-alert { display: flex; gap: 11px; align-items: flex-start; background: #232323; border-radius: 18px; padding: 14px; }
.ins-alert .material-symbols-rounded { font-size: 21px; line-height: 1.2; color: #e2f163; flex-shrink: 0; }
.ins-alert-body { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.ins-alert-title { font-family: Poppins, sans-serif; font-weight: 500; font-size: 15px; color: #ffffff; }
.ins-alert-text { font-size: 14px; line-height: 1.45; color: #cfd2c6; }

/* ═══ V2 du tunnel (MESSAGE 9 et 10) ════════════════════════════════════════════════════ */

/* --- Étape 1 : « Vous avez déjà un accès ? » ---
   Un bloc cliquable pleine largeur, placé AVANT les boutons Google/Microsoft. Il ne prévient
   pas d'une erreur de navigation : il prévient de la création d'un second espace payant à
   côté de celui de sa propre organisation. D'où la taille — une demi-phrase en pied de page
   ne se lit pas. */
.ins-already {
  display: flex; align-items: center; gap: 13px; width: 100%; box-sizing: border-box;
  padding: 14px 16px; border: 1px solid #3c4034; border-radius: 20px; background: #1c1c1c; color: #ffffff;
}
.ins-already:hover { background: #232323; border-color: #e2f163; color: #ffffff; }
.ins-already > .material-symbols-rounded {
  flex: 0 0 auto; width: 40px; height: 40px; border-radius: 14px; background: #232323;
  display: grid; place-items: center; font-size: 21px; color: #e2f163;
}
.ins-already-col { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.ins-already-title { font-family: Poppins, sans-serif; font-weight: 600; font-size: 15px; color: #ffffff; }
.ins-already-text { font-size: 14px; line-height: 1.45; color: #cfd2c6; text-wrap: pretty; }
.ins-already-go { flex: 0 0 auto; font-size: 22px; color: #e2f163; }

/* --- Étape 1, variante « compte externe » ---
   La carte d'identité de ce que le fournisseur a confirmé, puis l'encart qui dit ce qu'il n'a
   PAS donné. Le second compte autant que le premier : sans lui, la demande de SIRET à l'étape
   facturation passerait pour une redondance. */
.ins-identity {
  display: flex; align-items: center; gap: 13px; width: 100%; box-sizing: border-box;
  padding: 16px; border: 1px solid #2e2f27; border-radius: 22px; background: #1c1c1c;
}
.ins-identity-avatar {
  flex: 0 0 auto; width: 48px; height: 48px; border-radius: 16px; background: #e2f163;
  display: grid; place-items: center;
  font-family: Poppins, sans-serif; font-weight: 700; font-size: 16px; letter-spacing: -0.02em; color: #14150f;
}
.ins-identity-col { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.ins-identity-name { font-family: Poppins, sans-serif; font-weight: 600; font-size: 16px; color: #ffffff; }
.ins-identity-mail { font-size: 14px; color: #cfd2c6; overflow-wrap: anywhere; }
.ins-identity-badge {
  flex: 0 0 auto; display: inline-flex; align-items: center; gap: 5px; min-height: 28px; padding: 0 10px;
  border-radius: 999px; background: #232323;
  font-family: 'DM Mono', ui-monospace, monospace; font-size: 11px; color: #e2f163;
}
.ins-identity-badge .material-symbols-rounded { font-size: 15px; line-height: 1; }

.ins-given {
  display: flex; flex-direction: column; gap: 10px; width: 100%; box-sizing: border-box;
  padding: 16px; border-radius: 22px; background: #1c1c1c;
}
.ins-given-line { display: flex; align-items: flex-start; gap: 10px; font-size: 14px; line-height: 1.45; color: #cfd2c6; }
.ins-given-line .material-symbols-rounded { flex: 0 0 auto; font-size: 19px; line-height: 1.3; color: #e2f163; }

.ins-cta-block { display: flex; flex-direction: column; gap: 12px; }
.ins-other-mail {
  align-self: center; display: inline-flex; align-items: center; min-height: 44px; padding: 0 12px;
  border-radius: 999px; font-size: 14px; font-weight: 500; color: #e2f163;
}
.ins-other-mail:hover { background: #1c1c1c; color: #ffffff; }

/* Le logo Google, en SVG dans la page plutôt que chargé depuis un domaine externe. */
.ins-g-logo { width: 18px; height: 18px; flex: 0 0 auto; }

/* --- Étape 4 : facturation ---
   La pastille « facultatif » / « obligatoire ». Le passage au lime est le SEUL marqueur de
   l'obligation : pas d'astérisque rouge, il n'y a pas de rouge dans ce produit. */
.ins-tag {
  display: inline-flex; align-items: center; min-height: 18px; padding: 0 7px; margin-left: 6px;
  border-radius: 999px; background: #232323;
  font-family: 'DM Mono', ui-monospace, monospace; font-size: 10px; letter-spacing: 0.06em;
  text-transform: uppercase; color: #a8ada0;
}
.ins-tag--requis { background: #e2f163; color: #14150f; }

/* Les trois états de l'annuaire, du plus visible au moins visible — et c'est délibéré :
   « reconnu » apporte une information, « inconnu » en apporte une petite, « injoignable »
   n'est qu'un accusé de réception. */
.ins-siret-found {
  display: flex; flex-direction: column; gap: 5px; margin-top: 8px;
  padding: 13px 14px; border-radius: 18px; background: #e2f163; color: #14150f;
}
.ins-siret-found-name {
  display: flex; align-items: center; gap: 8px;
  font-family: Poppins, sans-serif; font-weight: 600; font-size: 15px; color: #14150f;
}
.ins-siret-found-name .material-symbols-rounded { font-size: 19px; line-height: 1; }
.ins-siret-found-meta { font-size: 13px; line-height: 1.45; color: #14150f; opacity: 0.82; }
.ins-siret-found-note { font-size: 13px; line-height: 1.45; color: #14150f; opacity: 0.72; text-wrap: pretty; }

.ins-siret-unknown {
  display: flex; align-items: flex-start; gap: 10px; margin-top: 8px;
  padding: 13px 14px; border-radius: 18px; background: #232323;
  font-size: 14px; line-height: 1.45; color: #cfd2c6; text-wrap: pretty;
}
.ins-siret-unknown .material-symbols-rounded { flex: 0 0 auto; font-size: 19px; line-height: 1.3; color: #a8ada0; }

.ins-siret-offline {
  display: flex; align-items: center; gap: 6px; margin-top: 8px;
  font-family: 'DM Mono', ui-monospace, monospace; font-size: 11px; color: #a8ada0;
}
.ins-siret-offline .material-symbols-rounded { font-size: 15px; line-height: 1; }

/* La justification des champs facultatifs. Sa seconde moitié est une promesse tenue par le
   code : le téléphone ne part dans aucun outil de prospection. */
.ins-why {
  margin: 0; display: flex; align-items: flex-start; gap: 10px;
  padding: 13px 14px; border-radius: 18px; background: #1c1c1c;
  font-size: 14px; line-height: 1.45; color: #cfd2c6; text-wrap: pretty;
}
.ins-why .material-symbols-rounded { flex: 0 0 auto; font-size: 19px; line-height: 1.3; color: #e2f163; }

/* --- Étape 6 : ce que la formule choisie ouvre, et les premières minutes --- */
.ins-bought {
  display: flex; flex-direction: column; gap: 11px; width: 100%; box-sizing: border-box;
  padding: 16px; border-radius: 22px; background: #e2f163; color: #14150f; text-align: left;
}
.ins-bought .ins-overline { color: #14150f; opacity: 0.66; }
.ins-bought-list { display: flex; flex-direction: column; gap: 9px; }
.ins-bought-line { display: flex; align-items: flex-start; gap: 9px; font-size: 14px; line-height: 1.45; color: #14150f; }
.ins-bought-line .material-symbols-rounded { flex: 0 0 auto; font-size: 19px; line-height: 1.3; color: #14150f; }
.ins-bought-foot { font-size: 13px; line-height: 1.45; color: #14150f; opacity: 0.7; text-wrap: pretty; }

.ins-nextup {
  display: flex; flex-direction: column; gap: 13px; width: 100%; box-sizing: border-box;
  padding: 16px; border-radius: 22px; background: #1c1c1c; text-align: left;
}
.ins-nextup-list { display: flex; flex-direction: column; gap: 13px; }
.ins-nextup-line { display: flex; align-items: flex-start; gap: 12px; }
.ins-nextup-num {
  flex: 0 0 auto; width: 32px; height: 32px; border-radius: 11px; background: #232323;
  display: grid; place-items: center;
  font-family: 'DM Mono', ui-monospace, monospace; font-size: 11px; color: #e2f163;
}
.ins-nextup-col { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.ins-nextup-title { font-family: Poppins, sans-serif; font-weight: 600; font-size: 15px; color: #ffffff; }
.ins-nextup-text { font-size: 14px; line-height: 1.45; color: #cfd2c6; text-wrap: pretty; }

.ins-mailsent {
  display: flex; align-items: center; gap: 13px; width: 100%; box-sizing: border-box;
  padding: 16px; border: 1px solid #3c4034; border-radius: 22px; background: #1c1c1c; text-align: left;
}
.ins-mailsent > .material-symbols-rounded {
  flex: 0 0 auto; width: 40px; height: 40px; border-radius: 14px; background: #232323;
  display: grid; place-items: center; font-size: 21px; color: #e2f163;
}
.ins-mailsent-col { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.ins-mailsent-title { font-family: Poppins, sans-serif; font-weight: 600; font-size: 15px; color: #ffffff; overflow-wrap: anywhere; }
.ins-mailsent-text { font-size: 14px; line-height: 1.45; color: #cfd2c6; text-wrap: pretty; }

/* Le dernier panneau centre son contenu ; ces blocs-là portent du texte, et du texte centré
   sur six lignes se lit mal. Ils reprennent donc la largeur pleine et l'alignement à gauche. */
.ins-panel--center .ins-bought,
.ins-panel--center .ins-nextup,
.ins-panel--center .ins-mailsent,
.ins-panel--center .ins-cta-block { width: 100%; }

/* --- Étape 3, MESSAGE 29 : le bloc humain, les lignes « plus », l'encart application mobile --- */
.ins-human { display: flex; flex-direction: column; gap: 12px; background: #e2f163; border-radius: 22px; padding: 18px 19px; color: #14150f; }
.ins-overline--ink { display: flex; align-items: center; gap: 8px; color: #3c4034; }
.ins-overline--ink .material-symbols-rounded { font-size: 15px; line-height: 1; }
.ins-human-title {
  font-family: Poppins, sans-serif; font-weight: 700; font-size: clamp(20px, 2.3vw, 26px);
  line-height: 1.12; letter-spacing: -0.03em; color: #14150f; text-wrap: pretty;
}
.ins-human-body { font-size: 14.5px; line-height: 1.5; font-weight: 500; color: #14150f; text-wrap: pretty; }
.ins-human-body strong { font-weight: 700; }
.ins-human-foot {
  display: flex; align-items: center; gap: 9px;
  font-family: 'DM Mono', ui-monospace, monospace; font-size: 11px; line-height: 1.5; color: #3c4034;
  padding-top: 11px; border-top: 1px solid rgba(20, 21, 15, 0.22);
}
/* Les trois emplacements de visages (Inscription V2 264-269) : 27 px, cerclés de lime, qui se
   chevauchent de 9 px. Des disques sombres tant qu'il n'y a pas de photos de l'équipe. */
.ins-human-faces { flex: 0 0 auto; display: flex; }
.ins-human-faces span { width: 27px; height: 27px; border-radius: 999px; border: 2px solid #e2f163; box-sizing: border-box; }
.ins-human-faces span:nth-child(1) { background: #14150f; }
.ins-human-faces span:nth-child(2) { background: #3c4034; margin-left: -9px; }
.ins-human-faces span:nth-child(3) { background: #55584c; margin-left: -9px; }
.ins-mobile {
  display: flex; align-items: center; gap: 13px; flex-wrap: wrap;
  background: #1c1c1c; border: 1px dashed #3c4034; border-radius: 22px; padding: 16px 17px;
}
.ins-mobile-icon { flex: 0 0 auto; width: 40px; height: 40px; border-radius: 14px; background: #232323; display: grid; place-items: center; color: #e2f163; }
.ins-mobile-icon .material-symbols-rounded { font-size: 20px; line-height: 1; }
.ins-mobile-text { flex: 1 1 210px; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.ins-mobile-title { font-family: Poppins, sans-serif; font-weight: 700; font-size: 15.5px; letter-spacing: -0.015em; color: #ffffff; }
.ins-mobile-sub { font-size: 13.5px; line-height: 1.5; color: #cfd2c6; text-wrap: pretty; }
.ins-mobile-cta {
  flex: 0 0 auto; display: inline-flex; align-items: center; min-height: 46px; padding: 0 18px;
  border: none; border-radius: 999px; background: #232323; color: #ffffff; text-decoration: none;
  font-family: Poppins, sans-serif; font-weight: 600; font-size: 14px;
}
.ins-mobile-cta:hover { background: #2e2f27; }

/* --- Bloc 3 (MESSAGE 35) : sur invitation, et la reprise après gratuité --- */
.ins-contexte {
  margin: 0; display: flex; align-items: center; flex-wrap: wrap; gap: 8px 10px;
  font-size: 13px; line-height: 1.5; color: #cfd2c6;
}
.ins-contexte-badge {
  display: inline-flex; align-items: center; height: 26px; padding: 0 10px; border-radius: 999px;
  background: #e2f163; color: #14150f; font-family: 'DM Mono', ui-monospace, monospace; font-size: 11px;
  letter-spacing: 0.06em; text-transform: uppercase;
}
/* Une formule inerte : dessinée, lisible, mais ni cliquable ni sélectionnable. */
.ins-plan--inerte { cursor: not-allowed; opacity: 0.55; }
.ins-plan--inerte .ins-plan-mark { border-style: dotted; }

/* L'option « 12 mois en une fois » de l'étape 5 : même case que l'engagement. */
.ins-une-fois strong { font-weight: 700; }

/* L'erreur d'une étape (repasse du 23/09) : sous le bouton, la même ligne que les erreurs de
   champ, et le lien « Reprendre depuis le début » quand l'inscription a expiré. */
.ins-err-etape { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 4px 0 0; }
.ins-err-etape a { color: #e2f163; text-decoration: underline; min-height: 44px; display: inline-flex; align-items: center; }

/* À 390 px, l'interrupteur « Engagement de la formule / 12 mois » passait sur deux lignes et
   la pastille se cassait en « −10 / % » (repasse du 23/09) : toute la largeur, deux moitiés. */
.ins-rythme-tag { white-space: nowrap; }
@media (max-width: 479px) {
  .ins-rythme { width: 100%; }
  .ins-rythme-btn { flex: 1 1 0; justify-content: center; padding: 0 10px; font-size: 13px; text-align: center; }
}