/* ============================================================
   ONB.css — Wizard d'inscription « port d'abord »
   100 % tokens du pack (--card-bg/--text/--bd/--brand/--muted…)
   → suit automatiquement tous les thèmes (night-sea, côte dorée, gros temps).
   ============================================================ */

.ONB-page{ min-height:100vh; display:flex; flex-direction:column; }

/* Barre de marque (logo centré, minimal) */
.ONB-top{ display:flex; justify-content:center; align-items:center; padding:18px 16px; }
.ONB-logo{ height:38px; width:auto; filter:var(--logo-filter, none); }

/* Conteneur centré */
.ONB-shell{ flex:1; display:flex; align-items:flex-start; justify-content:center; padding:4px 16px 64px; }
.ONB-card{
  width:100%; max-width:560px; margin:0 auto;   /* centré même si .GN-root main force display:block */
  background:var(--card-bg); color:var(--text);
  border:1px solid var(--bd); border-radius:var(--radius, 16px);
  padding:28px 24px;
  box-shadow:var(--shadow, 0 8px 24px rgba(0,0,0,.12));
}

/* Indicateur de progression (5 segments) */
.ONB-progress{ display:flex; gap:8px; margin-bottom:24px; }
.ONB-progress-step{ flex:1; height:5px; border-radius:3px; background:var(--surface-2); transition:background .2s; }
.ONB-progress-step.is-current{ background:var(--brand); opacity:.55; }
.ONB-progress-step.is-done{ background:var(--brand); }

/* Titres */
.ONB-eyebrow{ font-size:.78rem; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); margin:0 0 6px; font-weight:700; }
.ONB-title{ font-size:1.5rem; line-height:1.2; font-weight:800; margin:0 0 8px; color:var(--text); }
.ONB-sub{ color:var(--muted); margin:0 0 22px; line-height:1.45; }

/* Champs de formulaire (étape Perso) */
.ONB-field{ margin-bottom:14px; }
.ONB-field .GN-form-label{ display:block; margin-bottom:5px; }
.ONB-field .GN-input{ width:100%; box-sizing:border-box; }
.ONB-field .ONB-hint{ margin-top:5px; }

/* Mot de passe : œil + jauge de force (rouge→vert) + critères cochés */
.ONB-pwd-wrap{ position:relative; }
.ONB-pwd-wrap .GN-input{ padding-right:42px; }
.ONB-pwd-eye{
  position:absolute; right:8px; top:50%; transform:translateY(-50%);
  background:none; border:none; cursor:pointer; color:var(--muted);
  display:flex; align-items:center; padding:4px;
}
.ONB-pwd-eye:hover{ color:var(--brand); }
.pwd-strength{ display:grid; grid-template-columns:1fr auto; gap:10px; align-items:center; margin:10px 0 0; }
.pwd-strength-bar{ position:relative; height:10px; border-radius:999px; background:var(--surface-2); overflow:hidden; }
.pwd-strength-bar::after{ content:""; position:absolute; inset:0 auto 0 0; width:0; background:#e74c3c; transition:width .2s ease, background .2s ease; }
/* Niveaux : couleurs sémantiques rouge→vert (universelles, hors thème) */
.pwd-strength-bar.level-0::after{ width:12%;  background:#e74c3c; }
.pwd-strength-bar.level-1::after{ width:35%;  background:#e67e22; }
.pwd-strength-bar.level-2::after{ width:60%;  background:#f1c40f; }
.pwd-strength-bar.level-3::after{ width:82%;  background:#3fb96a; }
.pwd-strength-bar.level-4::after{ width:100%; background:#22c55e; }
.pwd-strength-label{ font-weight:700; color:var(--text); font-size:.9rem; white-space:nowrap; }
.ONB-pwd-crit{ list-style:none; margin:10px 0 0; padding:0; display:flex; flex-wrap:wrap; gap:6px 14px; }
.ONB-pwd-crit li{ font-size:.85rem; color:var(--muted); display:flex; align-items:center; gap:6px; transition:color .15s; }
.ONB-pwd-crit li::before{ content:"○"; font-weight:700; color:var(--muted); }
.ONB-pwd-crit li.is-ok{ color:#22c55e; }
.ONB-pwd-crit li.is-ok::before{ content:"✓"; color:#22c55e; }

/* Actions : validation + retour sur une même rangée, taille alignée.
   row-reverse → le bouton principal (1er dans le DOM) à droite, « Retour » à gauche.
   Sur l'étape Port (un seul bouton) il occupe toute la largeur. */
.ONB-actions{ display:flex; flex-direction:row-reverse; gap:10px; margin-top:24px; }
.ONB-actions .GN-btn{ flex:1; width:auto; }

/* Séparateur « ou » */
.ONB-sep{ display:flex; align-items:center; gap:12px; color:var(--muted); font-size:.85rem; margin:20px 0; }
.ONB-sep::before, .ONB-sep::after{ content:""; flex:1; height:1px; background:var(--bd); }

/* Bouton Google */
.ONB-google{
  display:inline-flex; align-items:center; justify-content:center; gap:10px; width:100%;
  padding:12px; border:1px solid var(--bd); border-radius:12px;
  background:var(--surface-2); color:var(--text);
  font:inherit; font-weight:600; text-decoration:none; cursor:pointer;
  transition:border-color .15s;
}
.ONB-google:hover{ border-color:var(--brand); }
.ONB-google svg{ width:18px; height:18px; flex:0 0 auto; }

/* Message d'erreur de champ */
.ONB-error{ color:var(--danger); font-size:.9rem; margin:8px 0 0; }

/* Champ en faute : bord rouge + léger halo (double le message rouge, plus lisible).
   Couvre les inputs .GN-input, la ville (composant .RV-input) et la grille de rôles. */
.ONB-card .GN-input.is-error{ border-color:var(--danger); box-shadow:0 0 0 1px var(--danger); }
.ONB-ville.is-error .RV-input{ border-color:var(--danger); box-shadow:0 0 0 1px var(--danger); }
.ONB-role-grid.is-error .ONB-role-card{ border-color:var(--danger); }

/* Hint */
.ONB-hint{ color:var(--muted); font-size:.85rem; margin:10px 0 0; }

/* Suggestion d'autocomplete active (navigation Tab / flèches) */
.GN-autocomplete-row.is-active{ background:var(--surface-2); box-shadow:inset 3px 0 0 var(--brand); }

/* Cartes de rôle (étape 2) */
.ONB-role-grid{ display:flex; flex-direction:column; gap:12px; }
.ONB-role-card{
  display:flex; align-items:center; gap:14px;
  padding:16px; border:2px solid var(--bd); border-radius:14px;
  background:var(--surface-2); color:var(--text);
  cursor:pointer; transition:border-color .15s, box-shadow .15s, transform .08s;
}
.ONB-role-card:hover{ border-color:var(--brand); transform:translateY(-1px); }
.ONB-role-card input{ position:absolute; width:1px; height:1px; opacity:0; pointer-events:none; }
.ONB-role-card.is-selected{ border-color:var(--brand); box-shadow:0 0 0 1px var(--brand); }
.ONB-role-ic{ font-size:1.8rem; line-height:1; flex:0 0 auto; }
.ONB-role-txt{ display:flex; flex-direction:column; gap:2px; }
.ONB-role-t{ font-weight:700; }
.ONB-role-s{ font-size:.88rem; color:var(--muted); }

/* Placeholder d'étape (incréments à venir) */
.ONB-stub{ padding:24px; border:1px dashed var(--bd); border-radius:12px; color:var(--muted); text-align:center; }
.ONB-stub strong{ color:var(--text); }

/* ============================================================
   Souplesse / responsive
   GN.css ne met box-sizing:border-box que sur ::before/::after :
   on le force sur TOUT le wizard pour que width:100% + padding ne
   débordent jamais (champs, textarea, autocomplete, etc.).
   ============================================================ */
.ONB-card, .ONB-card *, .ONB-card *::before, .ONB-card *::after{ box-sizing:border-box; }
.ONB-card .GN-input, .ONB-card textarea.GN-input{ width:100%; max-width:100%; }
.ONB-card textarea.GN-input{ resize:vertical; }
.ONB-card img{ max-width:100%; height:auto; }

@media (max-width:600px){
  .ONB-shell{ padding:4px 10px 56px; }
  .ONB-card{ padding:22px 16px; border-radius:14px; }
  .ONB-title{ font-size:1.3rem; }
  .ONB-card .GN-form-grid{ grid-template-columns:1fr; }   /* type + longueur s'empilent */
  .pwd-strength-label{ white-space:normal; }              /* le niveau peut passer à la ligne */
  .ONB-actions{ flex-wrap:wrap; }                          /* boutons souples si labels longs */
}