/* HACCPilot — Onboarding (Phase 4)
 * Styles spécifiques aux 6 step pages et au routeur index.
 * Préfixe .onb-* exclusivement. Réutilise les variables CSS de app.css.
 * Mobile-first : breakpoint à 600px (max-width container).
 */

/* ── Routing page (index.html) ──────────────────────────────── */
.onb-routing {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  background: var(--bg);
  padding: 20px;
}
.onb-routing__spinner {
  width: 40px;
  height: 40px;
  border: 3px solid var(--neutral-200);
  border-top-color: var(--color-primary);
  border-radius: 50%;
  animation: onb-spin 0.7s linear infinite;
}
.onb-routing__msg {
  font-family: var(--font-body);
  font-size: 15px;
  color: var(--text-secondary);
  margin: 0;
}
@keyframes onb-spin { to { transform: rotate(360deg); } }

/* ── Layout commun aux 6 step pages ─────────────────────────── */
.onb-page {
  min-height: 100vh;
  background: var(--bg);
  padding: 16px 16px calc(env(safe-area-inset-bottom, 0px) + 24px);
  display: flex;
  flex-direction: column;
  max-width: 600px;
  margin: 0 auto;
}

/* ── Header : sélecteur langue + barre progression ──────────── */
.onb-header {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 24px;
}

/* i18n-T-selector-final-3 — sélecteur langue onboarding = <select> natif (aligné step4/6),
   classe partagée neutre. Remplace les anciens 4 boutons à plat (retirés).
   .onb-lang : wrapper aligné à droite (col header step1/3 + cellule grid step2).
   .onb-lang__select : clone du style select step4/6 (drapeau+nom, chevron natif). */
.onb-lang {
  display: flex;
  justify-content: flex-end;
}
.onb-lang__select {
  border: none;
  background: transparent;
  font-family: var(--font-family-base);
  font-size: 14px;
  font-weight: 500;
  color: var(--color-text-primary);
  cursor: pointer;
  outline: none;
  padding-right: 2px;
}

/* ── Barre de progression "Étape X / 6" ────────────────────── */
.onb-progress { display: flex; flex-direction: column; gap: 6px; }
.onb-progress__label {
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 500;
  color: var(--text-secondary);
}
.onb-progress__bar {
  height: 6px;
  background: var(--neutral-200);
  border-radius: 999px;
  overflow: hidden;
}
.onb-progress__fill {
  height: 100%;
  background: var(--color-primary);
  border-radius: 999px;
  transition: width 0.3s ease;
}

/* ── Card de contenu principal ──────────────────────────────── */
.onb-card {
  background: var(--bg-white);
  border-radius: 16px;
  padding: 24px 20px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.05);
  display: flex;
  flex-direction: column;
  gap: 16px;
  flex: 1;
}

/* ── Titres ─────────────────────────────────────────────────── */
.onb-title {
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 800;
  color: var(--text-primary);
  line-height: 1.25;
  letter-spacing: -0.02em;
  margin: 0;
}
.onb-subtitle {
  font-family: var(--font-body);
  font-size: 15px;
  color: var(--text-secondary);
  line-height: 1.4;
  margin: 0;
}

/* ── Form basics (réutilisables sur step1, step3, etc.) ────── */
.onb-form { display: flex; flex-direction: column; gap: 14px; }
.onb-form__label {
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
}
.onb-form__required { color: var(--color-error); margin-left: 2px; }
.onb-form__input {
  width: 100%;
  height: 48px;
  border: 1.5px solid var(--border);
  border-radius: 12px;
  padding: 0 14px;
  font-family: var(--font-body);
  font-size: 15px;
  color: var(--text-primary);
  background: var(--bg-white);
  outline: none;
  transition: border-color 0.15s, box-shadow 0.15s;
  -webkit-appearance: none;
  appearance: none;
}
.onb-form__input::placeholder { color: var(--text-tertiary); }
.onb-form__input:focus {
  border-color: var(--border-focus);
  box-shadow: 0 0 0 3px var(--color-primary-glow);
}
.onb-form__error {
  font-family: var(--font-body);
  font-size: 13px;
  color: var(--color-error);
  margin-top: 4px;
}

/* ── Boutons primaire / secondaire / retour ─────────────────── */
.onb-actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 16px;
}
.onb-btn-primary {
  width: 100%;
  height: 52px;
  background: var(--color-primary);
  color: var(--text-on-primary);
  border: none;
  border-radius: 12px;
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.15s, transform 0.1s;
  -webkit-tap-highlight-color: transparent;
}
.onb-btn-primary:active { transform: scale(0.98); background: var(--color-primary-hover); }
.onb-btn-primary:disabled { opacity: 0.5; cursor: default; transform: none; }
.onb-btn-secondary {
  width: 100%;
  height: 48px;
  background: var(--bg-white);
  color: var(--text-primary);
  border: 1.5px solid var(--border);
  border-radius: 12px;
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s;
}
.onb-btn-secondary:active { background: var(--neutral-50); }
.onb-btn-back {
  align-self: flex-start;
  background: none;
  border: none;
  color: var(--text-secondary);
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  padding: 6px 0;
  text-decoration: none;
}
.onb-btn-back:hover { color: var(--text-primary); }

/* ── Encart info (notamment pour collectivite alert §4.1) ──── */
.onb-info {
  background: var(--color-primary-subtle);
  border-left: 3px solid var(--color-primary);
  padding: 12px 14px;
  border-radius: 8px;
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--text-primary);
  line-height: 1.4;
}

/* ── Encart warning (obligation légale HACCP, Phase 4B-bis) ── */
.onb-warning {
  background: var(--color-warning-subtle);
  border-left: 3px solid var(--color-warning);
  padding: 12px 14px;
  border-radius: 8px;
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--text-primary);
  line-height: 1.4;
}

/* ── Wrapper champ : nécessaire pour positionner le dropdown
       autocomplete absolument sous l'input (Phase 4B-bis). ──── */
.onb-form__field {
  position: relative;
  display: flex;
  flex-direction: column;
}

/* ── Helper text sous un champ (ex: explication agrément) ──── */
.onb-form__helper {
  font-family: var(--font-body);
  font-size: 12px;
  color: var(--text-tertiary);
  margin-top: 4px;
  line-height: 1.3;
}

/* ── Autocomplete adresse (Phase 4B-bis) ───────────────────── */
.onb-autocomplete-list {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 10;
  background: var(--bg-white);
  border: 1.5px solid var(--border);
  border-radius: 12px;
  margin-top: 4px;
  max-height: 240px;
  overflow-y: auto;
  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
}
.onb-autocomplete-item {
  padding: 10px 14px;
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--text-primary);
  cursor: pointer;
  border-bottom: 1px solid var(--border);
  -webkit-tap-highlight-color: transparent;
}
.onb-autocomplete-item:last-child { border-bottom: none; }
.onb-autocomplete-item:hover,
.onb-autocomplete-item.is-active {
  background: var(--color-primary-subtle);
}
.onb-autocomplete-loading {
  padding: 10px 14px;
  font-family: var(--font-body);
  font-size: 13px;
  color: var(--text-tertiary);
  font-style: italic;
}

/* ── Carte utilisateur (step 2 — non modifiable au MVP) ────── */
.onb-user-card {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--neutral-50);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 16px;
  margin: 16px 0 24px;
}
.onb-user-card__avatar {
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-primary-subtle);
  border-radius: 50%;
  font-size: 24px;
  flex-shrink: 0;
}
.onb-user-card__body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.onb-user-card__role {
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 600;
  color: var(--text-primary);
}
.onb-user-card__email {
  font-family: var(--font-body);
  font-size: 13px;
  color: var(--text-secondary);
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ── Étape 3 : architecture 3 zones (suggestions / liste / ajout) ──── */
.onb-suppliers-section-title {
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 600;
  color: #6B7280;
  margin: 0 0 10px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.onb-suppliers-suggestions {
  margin: 16px 0 20px;
}
.onb-suggestions-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
/* L'attribut [hidden] doit l'emporter sur display:grid (même spécificité → la
   classe gagnait par l'ordre source). Sélecteur classe+attribut (0,2,0) > classe. */
.onb-suggestions-grid[hidden] { display: none; }
/* En-tête repliable « Fournisseurs fréquents (N) » (modèle C — idiome accordéon
   réutilisé de cleaning-plan-editor : header cliquable + aria-expanded + chevron).
   Réutilise le micro-titre uppercase (13px/600/#6B7280) cohérent onboarding. */
.onb-frequent-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
  margin: 8px 0 6px;
  padding: 8px 10px;             /* respiration pour la zone de survol + cible tactile */
  border-radius: 8px;
  background: none;
  border: none;
  cursor: pointer;
  font-family: var(--font-body);
  transition: background 0.15s;
  -webkit-tap-highlight-color: transparent;
}
@media (hover: hover) {
  .onb-frequent-header:hover { background: var(--color-bg-soft); } /* gris très léger */
}
.onb-frequent-header__label {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  font-size: 13px;
  font-weight: 600;
  color: #6B7280;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.onb-frequent-header__count { color: var(--text-tertiary); font-weight: 600; }
.onb-frequent-header__chevron {
  width: 18px;
  height: 18px;
  color: var(--text-secondary);  /* gris plus soutenu → chevron plus visible */
  flex-shrink: 0;
  transition: transform 0.18s;
}
.onb-suggestion-chip {
  min-height: 52px;
  padding: 8px 24px;             /* L/R dégage le ✓ (coin G) et le ✕ (coin D) */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  position: relative;            /* ancre des marqueurs ✓ / ✕ */
  background: var(--bg-white);
  border: 1.5px solid var(--border);
  border-radius: 12px;
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
  text-align: center;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, transform 0.1s;
  -webkit-tap-highlight-color: transparent;
}
@media (hover: hover) {
  .onb-suggestion-chip:hover { background: var(--color-primary-subtle); }
}
.onb-suggestion-chip:active { transform: scale(0.98); }

/* État sélectionné — UNIFORME suggestions + customs : bordure + fond verts. */
.onb-suggestion-chip--selected {
  border-color: var(--color-success);
  background: var(--color-success-subtle);
  font-weight: 700;
}
@media (hover: hover) {
  .onb-suggestion-chip--selected:hover { background: var(--color-success-subtle); }
}
/* Marqueur de sélection UNIQUE : pastille ✓ verte, coin haut-gauche, MÊME position
   pour toutes les cards sélectionnées (suggestions ET customs). Porte SEUL l'état. */
.onb-suggestion-chip__check {
  position: absolute;
  top: 6px;
  left: 6px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--color-success);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}
.onb-suggestion-chip__label { line-height: 1.2; }

/* Nature "Personnalisé" — DISCRÈTE : ne porte plus l'état (le ✓ s'en charge).
   Petit texte atténué, sans fond ni majuscules → secondaire au nom (dominant). */
.onb-suggestion-chip--custom { cursor: default; }
.onb-suggestion-chip__badge {
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--text-tertiary);
  line-height: 1;
}

/* Suppression custom : glyphe ✕ ~18px (secondaire) mais zone tactile ~40px via
   padding invisible, ancré coin haut-droit. Découvrable sans concurrencer le nom. */
.onb-suggestion-chip__remove {
  position: absolute;
  top: 0;
  right: 0;
  width: 40px;
  height: 40px;
  border: none;
  background: transparent;
  color: var(--text-secondary);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: flex-start;
  justify-content: flex-end;
  padding: 5px 7px 0 0;          /* glyphe poussé dans le coin, hit-area étendue */
  border-radius: 0 12px 0 12px;
  transition: color 0.15s;
}
.onb-suggestion-chip__remove:hover { color: var(--color-danger, #DC2626); }

/* Compteur = contexte principal sous le H1 (remplace sous-titre + bloc récap) */
.onb-suppliers-counter {
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 600;
  color: var(--color-success);
  margin: 4px 0 18px;
}

.onb-add-supplier-section {
  margin: 0 0 16px;
}
.onb-add-supplier-row {
  display: flex;
  gap: 8px;
}
.onb-add-supplier-row .onb-form__input { flex: 1; }
.onb-btn-add {
  height: 44px;
  padding: 0 16px;
  background: var(--color-primary-subtle);
  color: var(--color-primary);
  border: none;
  border-radius: 12px;
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
  transition: background 0.15s;
}
.onb-btn-add:disabled { opacity: 0.4; cursor: default; }


/* ============================================================
   Step4 V2 (Phase 4E) — Équipements (DA HACCPilot V2)
   Chantier 2A : structure + tokens + i18n + stub navigation.
   Préfixes utilisés : .onb-step4-*, .onb-stepper-v2, .onb-equipment-*
   (sans collision avec les classes existantes step1/2/3).
   ============================================================ */

/* ── Page container ─────────────────────────────────────────── */
.onb-step4-page {
  min-height: 100vh;
  background: var(--color-bg);
  font-family: var(--font-family-base);
  color: var(--color-text-primary);
  padding: 12px 16px calc(env(safe-area-inset-bottom, 0px) + 16px);
  max-width: 720px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
}

/* ── Topbar : logo centré + dropdown langue droite ──────────── */
.onb-step4-topbar {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding: 8px 0 4px;
  margin-bottom: 4px;
}
.onb-step4-topbar__cell {
  display: flex;
  align-items: center;
}
.onb-step4-topbar__cell--right {
  justify-content: flex-end;
}
.onb-step4-topbar__logo {
  justify-self: center;
  /* Hauteur gérée par .onb-topbar__logo (app.css) — séparation responsabilités :
     placement ici, hauteur dans l'utilitaire partagé (réutilisable Volet B). */
}
.onb-step4-lang {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 8px 4px 10px;
  border-radius: var(--radius-button-secondary);
}
.onb-step4-lang__select {
  border: none;
  background: transparent;
  font-family: var(--font-family-base);
  font-size: 14px;
  font-weight: 500;
  color: var(--color-text-primary);
  cursor: pointer;
  outline: none;
  padding-right: 2px;
}

/* ── Indicateur "Étape N sur N" ─────────────────────────────── */
.onb-step4-progress {
  font-family: var(--font-family-base);
  font-size: 14px;
  font-weight: 700;
  color: var(--color-primary);
  padding: 6px 4px;
}

/* ── Label "Étape N / N" V2 (générique, partagé step1/2/3, alignable step4/5/6 ultérieurement) ─
   Pattern : weight 600 + color text-primary (cohérent step5/6 majoritaire).
   step4 (`.onb-step4-progress`) reste 700/primary — dette d'harmonisation à traiter en suite. */
.onb-progress-v2 {
  font-family: var(--font-family-base);
  font-size: 14px;
  font-weight: 600;
  color: var(--color-text-primary);
  padding: 6px 4px;
}

/* ── Stepper V2 : 6 dots + lignes ───────────────────────────── */
.onb-stepper-v2 {
  list-style: none;
  margin: 4px 0 24px;
  padding: 0 4px;
  display: flex;
  align-items: flex-start;
  gap: 0;
}
.onb-stepper-v2__step {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  min-width: 0;
}
.onb-stepper-v2__step::before {
  content: '';
  position: absolute;
  top: 14px;
  left: -50%;
  right: 50%;
  height: 3px;
  background: var(--color-border-light);
  z-index: 0;
}
.onb-stepper-v2__step:first-child::before {
  display: none;
}
.onb-stepper-v2__dot {
  position: relative;
  z-index: 1;
  width: 30px;
  height: 30px;
  border-radius: var(--radius-circle);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-family-base);
  font-size: 13px;
  font-weight: 700;
  background: var(--color-bg);
  color: var(--color-text-muted);
  border: 1.5px solid var(--color-border-light);
  box-sizing: border-box;
}
.onb-stepper-v2__dot svg {
  width: 16px;
  height: 16px;
}
.onb-stepper-v2__label {
  margin-top: 8px;
  font-size: 11px;
  line-height: 1.25;
  color: var(--color-text-muted);
  text-align: center;
  max-width: 88px;
  word-break: break-word;
}
/* États done / active / pending */
.onb-stepper-v2__step--done .onb-stepper-v2__dot {
  background: var(--color-success);
  color: #FFF;
  border-color: var(--color-success);
}
.onb-stepper-v2__step--done::before {
  background: var(--color-success);
}
.onb-stepper-v2__step--done .onb-stepper-v2__label {
  color: var(--color-text-primary);
}
.onb-stepper-v2__step--active .onb-stepper-v2__dot {
  background: var(--color-primary-active);
  color: #FFF;
  border-color: var(--color-primary-active);
}
.onb-stepper-v2__step--active::before {
  background: var(--color-success);
}
.onb-stepper-v2__step--active .onb-stepper-v2__label {
  color: var(--color-primary-active);
  font-weight: 600;
}
/* État --skipped : étape sautée via "Je compléterai plus tard"
   (sémantique : NON validée, signal d'urgence douce orange-rouge).
   Pattern HTML attendu en 2B : remplacer contenu du dot par SVG croix.
   Aucune utilisation active en 2A — le JS skip → step5 sans POST. */
.onb-stepper-v2__step--skipped .onb-stepper-v2__dot {
  background: var(--color-warning);
  color: #FFF;
  border-color: var(--color-warning);
}
.onb-stepper-v2__step--skipped::before {
  background: var(--color-warning);
}
.onb-stepper-v2__step--skipped .onb-stepper-v2__label {
  color: var(--color-text-primary);
}

/* Stepper compact mobile (TZ8-C) : TOUS les labels masqués, y compris l'étape
   active — le titre de page (hero) porte le contexte de l'étape. Supprime le wrap
   du label actif piégé dans sa colonne étroite (~68px à 412px) et lève la pression
   d'abréviation sur le lexique métier. Numéros + progression seuls.
   Dot actif agrandi conservé (focus point). Desktop >599px inchangé.
   Réversible : réintroduire l'exception .onb-stepper-v2__step--active .onb-stepper-v2__label. */
@media (max-width: 599px) {
  .onb-stepper-v2__label {
    display: none;
  }
  .onb-stepper-v2__step--active .onb-stepper-v2__dot {
    width: 36px;
    height: 36px;
    font-size: 14px;
  }
}

/* ── Main container ─────────────────────────────────────────── */
.onb-step4-main {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

/* ── Hero : flocon + titre ──────────────────────────────────── */
.onb-step4-hero {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-top: 4px;
}
/* Container universel UI (26/05/2026) — cercle 80px → carré arrondi 14px (lg 56px) neutre.
   Cohérent tokens sm/md/lg (vs xl tacite 80px abandonné post-validation Thierry). */
.onb-step4-hero__flake {
  flex-shrink: 0;
  width: var(--icon-container-size-lg);
  height: var(--icon-container-size-lg);
  border-radius: var(--icon-container-radius);
  background: var(--icon-container-bg);
  border: 1px solid var(--icon-container-border);
  box-shadow: var(--shadow-icon-hero);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-primary-active);
}
.onb-step4-hero__flake svg {
  width: 32px;
  height: 32px;
}
.onb-step4-hero__text {
  flex: 1;
  min-width: 0;
}
.onb-step4-hero__title {
  font-family: var(--font-family-base);
  font-size: 22px;   /* était 24px — aligne sur step5/6, règle le débordement FR à 412px (04S-3c-I) */
  font-weight: 700;
  line-height: 1.2;
  color: var(--color-text-primary);
  margin: 0 0 6px;
  letter-spacing: -0.01em;
}
.onb-step4-hero__subtitle {
  font-size: 15px;
  color: var(--color-text-secondary);
  line-height: 1.45;
  margin: 0;
}

/* ── Section title (uppercase micro-titre) ──────────────────── */
.onb-step4-section {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.onb-step4-section__title {
  font-family: var(--font-family-base);
  font-size: 13px;
  font-weight: 600;
  color: var(--color-text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin: 0;
}
.onb-step4-section__title--with-count {
  display: flex;
  align-items: center;
  gap: 6px;
}
.onb-step4-section__count {
  color: var(--color-success);
  font-weight: 700;
}

/* ── Quick-add grid (6 cards) ───────────────────────────────── */
.onb-step4-quick-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}
@media (min-width: 768px) {
  .onb-step4-quick-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}
.onb-step4-quick-card {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px;
  background: var(--color-bg);
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius-card-small);
  box-shadow: var(--shadow-card);
  cursor: pointer;
  font-family: var(--font-family-base);
  font-size: 14px;
  font-weight: 600;
  color: var(--color-text-primary);
  text-align: left;
  transition: border-color 0.15s, box-shadow 0.15s, background 0.15s;
}
.onb-step4-quick-card:hover {
  border-color: var(--color-primary-active);
}
.onb-step4-quick-card:focus-visible {
  outline: 2px solid var(--color-primary-active);
  outline-offset: 2px;
}
.onb-step4-quick-card.is-selected {
  border-color: var(--color-primary-active);
  background: var(--color-primary-soft);
}
.onb-step4-quick-card__icon {
  flex-shrink: 0;
  width: var(--icon-container-size-md);
  height: var(--icon-container-size-md);
  border-radius: var(--icon-container-radius);
  background: var(--icon-container-bg);
  border: 1px solid var(--icon-container-border);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-primary-active);   /* hérité par SVG inline currentColor */
}
.onb-step4-quick-card__icon svg {
  width: 24px;
  height: 24px;
  display: block;
}
.onb-step4-quick-card__label {
  flex: 1;
  line-height: 1.3;
}

/* ── Liste "Mes équipements" (vide en 2A, classes prêtes 2B) ── */
.onb-step4-equipments-list {
  background: var(--color-bg);
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius-card-small);
  box-shadow: var(--shadow-card);
  overflow: hidden;
}
.onb-step4-equipments-empty {
  margin: 0;
  padding: 18px;
  text-align: center;
  font-size: 14px;
  color: var(--color-text-muted);
}
/* Banner pédagogique générique (réutilisable step5+ pour zones cleaning, etc.) */
.onb-personalize-banner {
  display: flex;
  gap: 12px;
  padding: 14px;
  background: var(--color-primary-soft);
  border-bottom: 1px solid var(--color-border-soft);
}
.onb-personalize-banner__icon {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  color: var(--color-primary-active);
}
.onb-personalize-banner__icon svg {
  width: 100%;
  height: 100%;
  display: block;
}
.onb-personalize-banner__body { flex: 1; min-width: 0; }
.onb-personalize-banner__title {
  font-size: 14px;
  font-weight: 700;
  color: var(--color-text-primary);
  line-height: 1.3;
}
.onb-personalize-banner__text {
  font-size: 13px;
  color: var(--color-text-secondary);
  margin-top: 4px;
  line-height: 1.4;
}
/* Items équipements (pour 2B) */
.onb-equipment-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px;
  border-bottom: 1px solid var(--color-border-soft);
}
.onb-equipment-item:last-child {
  border-bottom: none;
}
.onb-equipment-item__icon {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: var(--radius-icon-container);
  background: var(--color-primary-soft);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-primary-active);   /* hérité par SVG inline currentColor */
}
.onb-equipment-item__icon svg {
  width: 24px;
  height: 24px;
}
.onb-equipment-item__body {
  flex: 1;
  min-width: 0;
}
.onb-equipment-item__name {
  font-size: 15px;
  font-weight: 700;
  color: var(--color-text-primary);
  line-height: 1.3;
}
/* Mode édition inline (Bloc 3c) — input qui mime le span __name pour éviter
   tout flicker de hauteur lors du toggle view ↔ edit. */
.onb-equipment-item__name-input {
  width: 100%;
  font-family: var(--font-family-base);
  font-size: 15px;
  font-weight: 700;
  color: var(--color-text-primary);
  line-height: 1.3;
  padding: 2px 6px;
  margin: -2px -6px;
  border: 1px solid var(--color-primary-active);
  border-radius: 6px;
  background: var(--color-bg);
  outline: none;
}
.onb-equipment-item__name-input:focus {
  box-shadow: 0 0 0 3px var(--color-primary-soft);
}
.onb-equipment-item__sublabel {
  font-size: 13px;
  color: var(--color-text-secondary);
  margin-top: 2px;
}
.onb-equipment-item__actions {
  display: flex;
  gap: 6px;
  flex-shrink: 0;
}
.onb-equipment-item__btn {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  border: none;
  background: transparent;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s;
}
.onb-equipment-item__btn:hover {
  background: var(--color-bg-soft);
}
.onb-equipment-item__btn img {
  width: 20px;
  height: 20px;
}
.onb-equipment-item__btn--delete:hover {
  background: rgba(240, 68, 56, 0.08);
}

/* ── Bouton "Ajouter un équipement personnalisé" ────────────────
   04S-3c-F : le formulaire inline (label/input/select) a été supprimé (bascule
   sur la modale partagée en 3c-E). Seul le bouton __add-btn subsiste. */
.onb-step4-custom-form__add-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  height: 56px;
  padding: 0 16px;
  background: var(--color-bg);
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius-input);
  color: var(--color-primary);
  font-family: var(--font-family-base);
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  box-shadow: var(--shadow-card);
  transition: border-color 0.15s, background 0.15s, box-shadow 0.15s;
}
.onb-step4-custom-form__add-btn:hover {
  border-color: var(--color-primary);
}
.onb-step4-custom-form__add-btn:focus-visible {
  outline: 2px solid var(--color-primary-active);
  outline-offset: 2px;
}

/* ── Helper text "ⓘ ..." ────────────────────────────────────── */
.onb-step4-helper {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 6px 0 0;
  font-size: 13px;
  color: var(--color-text-muted);
  line-height: 1.4;
}
.onb-step4-helper__icon {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  color: var(--color-text-muted);
}
.onb-step4-helper__icon svg {
  width: 18px;
  height: 18px;
}

/* ── CTAs (3 boutons empilés) ───────────────────────────────── */
.onb-step4-ctas {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 8px;
}
.onb-step4-cta-primary {
  width: 100%;
  height: 56px;
  background: var(--color-primary);
  color: #FFF;
  border: none;
  border-radius: var(--radius-button-primary);
  font-family: var(--font-family-base);
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s, transform 0.1s;
  -webkit-tap-highlight-color: transparent;
}
.onb-step4-cta-primary:hover {
  background: #00306F;
}
.onb-step4-cta-primary:active {
  transform: scale(0.99);
}
.onb-step4-cta-primary:disabled,
.onb-step4-cta-skip:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
}
.onb-step4-cta-skip:not([hidden]) {
  width: 100%;
  height: 56px;
  background: var(--color-bg);
  color: var(--color-primary);
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius-button-secondary);
  font-family: var(--font-family-base);
  font-size: 15px;
  font-weight: 500;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  box-shadow: var(--shadow-card);
  transition: border-color 0.15s, background 0.15s;
}
.onb-step4-cta-skip:hover {
  border-color: var(--color-primary);
  background: var(--color-bg-soft);
}
.onb-step4-cta-skip__icon {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.onb-step4-cta-skip__icon img {
  width: 22px;
  height: 22px;
}
.onb-step4-cta-back {
  align-self: flex-start;
  font-family: var(--font-family-base);
  font-size: 15px;
  font-weight: 500;
  color: var(--color-text-secondary);
  text-decoration: none;
  padding: 8px 4px;
  margin-top: 4px;
  -webkit-tap-highlight-color: transparent;
}
.onb-step4-cta-back:hover {
  color: var(--color-primary);
}

/* ── Footer cadenas vert ────────────────────────────────────── */
.onb-step4-footer-secure {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin: 18px 0 4px;
  font-size: 13px;
  font-weight: 500;
  color: var(--color-success);
}
.onb-step4-footer-secure__icon {
  display: flex;
  align-items: center;
  color: var(--color-success);
}
.onb-step4-footer-secure__icon svg {
  width: 18px;
  height: 18px;
}

/* =====================================================================
   Step 5 — Plan de nettoyage (Chantier step5 / Bloc 3a)
   Classes préfixées .onb-step5-* parallèles à step4 (isolation simple,
   pas de généralisation maintenant). Réutilisation des classes
   transverses existantes : .onb-stepper-v2.*, .onb-personalize-banner.*,
   .onb-topbar__logo, .brand-logo.
   ===================================================================== */

/* ── Topbar (réutilise pattern step4) ──────────────────────────────── */
.onb-step5-topbar {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding: 12px 16px;
}
.onb-step5-topbar__cell {
  display: flex;
  align-items: center;
}
.onb-step5-topbar__cell--right {
  justify-content: flex-end;
}
.onb-step5-topbar__logo {
  /* Hauteur via .onb-topbar__logo (app.css L1169) — utility partagée */
  display: block;
}
.onb-step5-lang {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  color: var(--color-text-secondary);
}
.onb-step5-lang__select {
  font-family: var(--font-family-base);
  font-size: 14px;
  color: var(--color-text-primary);
  background: transparent;
  border: none;
  padding: 4px 4px 4px 0;
  cursor: pointer;
}

/* ── Indicateur "Étape N sur N" ────────────────────────────────────── */
.onb-step5-progress {
  padding: 0 16px;
  font-family: var(--font-family-base);
  font-size: 14px;
  font-weight: 600;
  color: var(--color-text-primary);
}

/* ── Main + Hero ───────────────────────────────────────────────────── */
.onb-step5-main {
  padding: 0 16px 24px;
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.onb-step5-hero {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: 8px;
}
.onb-step5-hero__icon {
  flex-shrink: 0;
  width: var(--icon-container-size-lg);
  height: var(--icon-container-size-lg);
  border-radius: var(--icon-container-radius);
  background: var(--icon-container-bg);
  border: 1px solid var(--icon-container-border);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-primary-active);
}
.onb-step5-hero__icon svg {
  width: 32px;
  height: 32px;
  display: block;
}
.onb-step5-hero__text {
  flex: 1;
  min-width: 0;
}
.onb-step5-hero__title {
  margin: 0;
  font-family: var(--font-family-base);
  font-size: 22px;
  font-weight: 700;
  color: var(--color-text-primary);
  line-height: 1.2;
}
.onb-step5-hero__subtitle {
  margin: 6px 0 0;
  font-size: 14px;
  color: var(--color-text-secondary);
  line-height: 1.4;
}

/* ── Sections ──────────────────────────────────────────────────────── */
.onb-step5-section {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.onb-step5-section__title {
  font-family: var(--font-family-base);
  font-size: 13px;
  font-weight: 700;
  color: var(--color-text-secondary);
  letter-spacing: 0.04em;
  margin: 0;
}
.onb-step5-section__title--with-count {
  display: flex;
  align-items: center;
  gap: 6px;
}
.onb-step5-section__count {
  color: var(--color-success);
  font-weight: 700;
}

/* ── Quick-add grid (6 cards) ──────────────────────────────────────── */
.onb-step5-quick-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}
@media (min-width: 600px) {
  .onb-step5-quick-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}
.onb-step5-quick-card {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px;
  background: var(--color-bg);
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius-card-small);
  box-shadow: var(--shadow-card);
  cursor: pointer;
  font-family: var(--font-family-base);
  font-size: 14px;
  font-weight: 600;
  color: var(--color-text-primary);
  text-align: left;
  transition: border-color 0.15s, box-shadow 0.15s, background 0.15s;
}
.onb-step5-quick-card:hover {
  border-color: var(--color-primary-active);
}
.onb-step5-quick-card:focus-visible {
  outline: 2px solid var(--color-primary-active);
  outline-offset: 2px;
}
.onb-step5-quick-card__icon {
  flex-shrink: 0;
  width: var(--icon-container-size-md);
  height: var(--icon-container-size-md);
  border-radius: var(--icon-container-radius);
  background: var(--icon-container-bg);
  border: 1px solid var(--icon-container-border);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-primary-active);
}
.onb-step5-quick-card__icon svg {
  width: 24px;
  height: 24px;
  display: block;
}
.onb-step5-quick-card__label {
  flex: 1;
  line-height: 1.3;
}

/* ── Liste "Mes zones de nettoyage" ────────────────────────────────── */
/* overflow: visible (PAS hidden) — le dropdown responsable du mode édition
   (position: absolute) doit pouvoir déborder visuellement. Le clipping des
   coins arrondis est porté par les items eux-mêmes (border-bottom soft
   sur tous sauf last-child) → pas de fuite visible sur les enfants. */
.onb-step5-zones-list {
  background: var(--color-bg);
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius-card-small);
  box-shadow: var(--shadow-card);
  overflow: visible;
}
.onb-step5-zones-empty {
  margin: 0;
  padding: 18px;
  text-align: center;
  font-size: 14px;
  color: var(--color-text-muted);
}

/* Items zones de nettoyage (layout 2 colonnes : body | actions) */
.onb-cleaning-zone-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px;
  border-bottom: 1px solid var(--color-border-soft);
}
.onb-cleaning-zone-item:last-child {
  border-bottom: none;
}
.onb-cleaning-zone-item__icon {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: var(--radius-icon-container);
  background: var(--color-primary-soft);
  display: flex;
  align-items: center;
  justify-content: center;
}
.onb-cleaning-zone-item__icon svg {
  width: 24px;
  height: 24px;
}
.onb-cleaning-zone-item__body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.onb-cleaning-zone-item__row {
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
}
.onb-cleaning-zone-item__name {
  font-size: 15px;
  font-weight: 700;
  color: var(--color-text-primary);
  line-height: 1.3;
}
.onb-cleaning-zone-item__frequency {
  font-size: 13px;
  color: var(--color-text-secondary);
}
.onb-cleaning-zone-item__responsible {
  font-size: 13px;
  color: var(--color-text-secondary);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.onb-cleaning-zone-item__responsible-icon {
  display: inline-flex;
  align-items: center;
  color: var(--color-text-muted);
}
.onb-cleaning-zone-item__responsible-icon svg {
  width: 14px;
  height: 14px;
}
.onb-cleaning-zone-item__responsible-suffix {
  color: var(--color-text-muted);
}
.onb-cleaning-zone-item__actions {
  display: flex;
  gap: 6px;
  flex-shrink: 0;
}
.onb-cleaning-zone-item__btn {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  border: none;
  background: transparent;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s;
}
.onb-cleaning-zone-item__btn:hover {
  background: var(--color-bg-soft);
}
.onb-cleaning-zone-item__btn img {
  width: 20px;
  height: 20px;
}
.onb-cleaning-zone-item__btn--delete:hover {
  background: rgba(240, 68, 56, 0.08);
}
.onb-cleaning-zone-item__btn:disabled {
  cursor: not-allowed;
  opacity: 0.5;
}

/* Mode édition inline (Bloc 3c) — l'item s'étend verticalement pour accueillir
   les 3 contrôles (input nom + select fréquence + input/datalist responsable).
   Layout flex-column par défaut (mobile-first), row possible sur grand écran
   si la place le permet. */
.onb-cleaning-zone-item--editing {
  align-items: flex-start;
}
.onb-cleaning-zone-item__edit-form {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
}
.onb-cleaning-zone-item__edit-name,
.onb-cleaning-zone-item__edit-freq,
.onb-cleaning-zone-item__edit-resp {
  width: 100%;
  height: 40px;
  padding: 0 10px;
  font-family: var(--font-family-base);
  font-size: 14px;
  color: var(--color-text-primary);
  background: var(--color-bg);
  border: 1px solid var(--color-primary-active);
  border-radius: 8px;
  box-sizing: border-box;
  -webkit-appearance: none;
  appearance: none;
  outline: none;
}
.onb-cleaning-zone-item__edit-name {
  font-weight: 700;
}
.onb-cleaning-zone-item__edit-name:focus,
.onb-cleaning-zone-item__edit-freq:focus,
.onb-cleaning-zone-item__edit-resp:focus {
  box-shadow: 0 0 0 3px var(--color-primary-soft);
}
.onb-cleaning-zone-item__edit-freq {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none' stroke='%23064CFC' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='1,1 6,7 11,1'/></svg>");
  background-repeat: no-repeat;
  background-position: right 10px center;
  padding-right: 28px;
}

/* ============================================
   Chantier Refonte Nettoyage 2026-05-17 — items HACCP atomiques
   ============================================
   Classes pour la refonte step5 : tableau récap "Mon plan de nettoyage"
   + 8 catégories groupées avec checkboxes (items catalogue) + lignes
   custom (badge "custom" + bouton trash). Cohérent design tokens brand
   (#003886 primary navy, #064CFC primary-active, #EBF4FD primary-soft,
   #01A550 success). Pattern BEM strict. */

/* Tableau récap "Mon plan de nettoyage" — lecture seule, 3 colonnes
   (Élément | Fréquence | Responsable). Style cohérent .onb-step5-zones-list
   (card avec border + shadow) mais structure <table>. */
.onb-step5-plan-table-wrap {
  background: var(--color-bg);
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius-card-small);
  box-shadow: var(--shadow-card);
  overflow: hidden;
}
.onb-step5-plan-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}
.onb-step5-plan-table thead th {
  text-align: left;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-text-muted);
  padding: 12px 14px;
  background: var(--color-bg-soft);
  border-bottom: 1px solid var(--color-border-soft);
}
.onb-step5-plan-table tbody td {
  padding: 12px 14px;
  border-bottom: 1px solid var(--color-border-soft);
  color: var(--color-text-secondary);
  vertical-align: middle;
}
.onb-step5-plan-table tbody td:first-child {
  font-weight: 700;
  color: var(--color-text-primary);
}
.onb-step5-plan-table tbody tr:last-child td {
  border-bottom: none;
}

/* Groupe catégorie (8 ordre fixe : production → cold → dishwashing →
   service → floors → sanitary → storage → waste). Card englobante avec
   header gris doux (titre catégorie uppercase) + liste items en dessous. */
.onb-step5-category-group {
  background: var(--color-bg);
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius-card-small);
  box-shadow: var(--shadow-card);
  margin-top: 12px;
  overflow: hidden;
}
.onb-step5-category-group__title {
  margin: 0;
  padding: 12px 14px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-text-muted);
  background: var(--color-bg-soft);
  border-bottom: 1px solid var(--color-border-soft);
}
.onb-step5-category-group__list {
  list-style: none;
  margin: 0;
  padding: 0;
}

/* Item ligne — checkbox (catalogue) ou label custom + bouton trash. */
.onb-step5-category-group__item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--color-border-soft);
  /* Transition lente pour le flash post-scroll-to depuis chip. */
  transition: background 0.6s ease-out;
}
.onb-step5-category-group__item:last-child {
  border-bottom: none;
}

/* Variant --flash : highlight discret après scroll depuis chip top 5.
   Background passe à primary-soft pendant ~1.5s (timeout JS) puis
   transition douce 600ms vers background normal (white). */
.onb-step5-category-group__item--flash {
  background: var(--color-primary-soft);
}

/* Variant --custom : ligne d'item ajouté manuellement (badge + trash).
   Teinte légère success pour différencier visuellement des items catalogue. */
.onb-step5-category-group__item--custom {
  background: rgba(1, 165, 80, 0.04);
}

/* Label + checkbox alignés horizontalement. Cliquer le label coche
   l'input grâce au wrapping <label><input> dans le HTML. */
.onb-step5-category-group__label {
  display: flex;
  align-items: center;
  gap: 12px;
  cursor: pointer;
  flex: 1;
  font-size: 15px;
  color: var(--color-text-primary);
}
.onb-step5-category-group__checkbox {
  width: 20px;
  height: 20px;
  margin: 0;
  accent-color: var(--color-primary-active);
  cursor: pointer;
  flex-shrink: 0;
}

/* Bloc nom + badge "custom" pour les items ajoutés manuellement. */
.onb-step5-category-group__custom-label {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 15px;
  font-weight: 600;
  color: var(--color-text-primary);
}

/* Badge "custom" — pill verte success petite. */
.onb-step5-category-group__custom-badge {
  display: inline-block;
  padding: 2px 8px;
  background: var(--color-success);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  border-radius: var(--radius-circle);
}

/* Bouton trash (suppression item custom) — pattern symétrique
   .onb-cleaning-zone-item__btn--delete legacy : hover tinte rouge léger. */
.onb-step5-category-group__remove {
  width: 32px;
  height: 32px;
  border-radius: 10px;
  border: none;
  background: transparent;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s;
  flex-shrink: 0;
}
.onb-step5-category-group__remove:hover {
  background: rgba(240, 68, 56, 0.08);
}
.onb-step5-category-group__remove img {
  width: 18px;
  height: 18px;
}

/* ── Composant dropdown responsable custom (réutilisable) ─────────────────
   Remplace le datalist HTML5 natif (filtrage automatique masquait les
   options pré-remplies — bug UX). Première option "+ Nouveau" en vert
   pour saisie libre, suggestions ensuite.
   Réutilisable pour Configuration > Nettoyage V2 (Volet B post-pilote). */
.onb-responsible-dropdown {
  position: relative;
  width: 100%;
}
.onb-responsible-dropdown__input {
  width: 100%;
  height: 48px;
  padding: 0 14px;
  font-family: var(--font-family-base);
  font-size: 15px;
  color: var(--color-text-primary);
  background: var(--color-bg);
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius-input);
  box-sizing: border-box;
  outline: none;
  -webkit-appearance: none;
  appearance: none;
}
.onb-responsible-dropdown__input:focus {
  outline: 2px solid var(--color-primary-active);
  outline-offset: 0;
}
.onb-responsible-dropdown__menu {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  z-index: 50;
  background: var(--color-bg);
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius-card-small);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
  max-height: 280px;
  overflow-y: auto;
  padding: 4px 0;
}
.onb-responsible-dropdown__option {
  padding: 10px 14px;
  font-family: var(--font-family-base);
  font-size: 15px;
  color: var(--color-text-primary);
  cursor: pointer;
  user-select: none;
}
.onb-responsible-dropdown__option:hover,
.onb-responsible-dropdown__option.is-highlighted {
  background: var(--color-bg-soft);
}
.onb-responsible-dropdown__option--new {
  color: var(--color-success);
  font-weight: 600;
  border-bottom: 1px solid var(--color-border-soft);
  margin-bottom: 4px;
}
.onb-responsible-dropdown__option--new:hover,
.onb-responsible-dropdown__option--new.is-highlighted {
  background: rgba(1, 165, 80, 0.08);
}

/* Variante édition inline (item zone en mode édition) : input compact 40px */
.onb-cleaning-zone-item__edit-form .onb-responsible-dropdown__input {
  height: 40px;
  padding: 0 10px;
  font-size: 14px;
  border-color: var(--color-primary-active);
  border-radius: 8px;
}
.onb-cleaning-zone-item__edit-form .onb-responsible-dropdown__input:focus {
  box-shadow: 0 0 0 3px var(--color-primary-soft);
  outline: none;
}

/* =====================================================================
   Step 6 — Récapitulatif onboarding (Chantier step6)
   Classes préfixées .onb-step6-* parallèles step5. Réutilise les
   classes transverses .onb-stepper-v2.*, .onb-topbar__logo.
   ===================================================================== */

/* ── Topbar (pattern step5) ────────────────────────────────────────── */
.onb-step6-topbar {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding: 12px 16px;
}
.onb-step6-topbar__cell { display: flex; align-items: center; }
.onb-step6-topbar__cell--right { justify-content: flex-end; }
.onb-step6-topbar__logo { display: block; }
.onb-step6-lang {
  display: flex; align-items: center; gap: 6px;
  font-size: 14px; color: var(--color-text-secondary);
}
.onb-step6-lang__select {
  font-family: var(--font-family-base); font-size: 14px;
  color: var(--color-text-primary); background: transparent;
  border: none; padding: 4px 4px 4px 0; cursor: pointer;
}

/* ── Progress + Main ───────────────────────────────────────────────── */
.onb-step6-progress {
  padding: 0 16px;
  font-family: var(--font-family-base);
  font-size: 14px; font-weight: 600;
  color: var(--color-text-primary);
}
.onb-step6-main {
  padding: 0 16px 24px;
  display: flex; flex-direction: column; gap: 16px;
}

/* ── Hero ──────────────────────────────────────────────────────────── */
.onb-step6-hero {
  display: flex; align-items: center; gap: 16px;
  margin-top: 8px;
}
.onb-step6-hero__icon {
  flex-shrink: 0; width: var(--icon-container-size-lg); height: var(--icon-container-size-lg);
  border-radius: var(--icon-container-radius);
  background: var(--icon-container-bg);
  border: 1px solid var(--icon-container-border);
  display: flex; align-items: center; justify-content: center;
  color: var(--color-primary-active);
}
.onb-step6-hero__icon svg { width: 32px; height: 32px; display: block; }
.onb-step6-hero__text { flex: 1; min-width: 0; }
.onb-step6-hero__title {
  margin: 0;
  font-family: var(--font-family-base);
  font-size: 22px; font-weight: 700;
  color: var(--color-text-primary);
  line-height: 1.2;
}
.onb-step6-hero__subtitle {
  margin: 6px 0 0;
  font-size: 14px;
  color: var(--color-text-secondary);
  line-height: 1.4;
}

/* ── Card récap (5 instances) ──────────────────────────────────────── */
.onb-step6-card {
  position: relative;
  display: flex; align-items: flex-start; gap: 14px;
  padding: 16px;
  background: var(--color-bg);
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius-card-small);
  box-shadow: var(--shadow-card);
}
.onb-step6-card__icon {
  flex-shrink: 0; width: var(--icon-container-size-md); height: var(--icon-container-size-md);
  border-radius: var(--icon-container-radius);
  background: var(--icon-container-bg);
  border: 1px solid var(--icon-container-border);
  display: flex; align-items: center; justify-content: center;
  color: var(--color-primary-active);
}
.onb-step6-card__icon svg { width: 24px; height: 24px; display: block; }
.onb-step6-card__body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.onb-step6-card__title {
  font-family: var(--font-family-base);
  font-size: 13px; font-weight: 700;
  color: var(--color-text-secondary);
  letter-spacing: 0.04em;
  margin: 0;
}
.onb-step6-card__count {
  color: var(--color-text-secondary);
  font-weight: 700;
  margin-left: 4px;
}
.onb-step6-card__content {
  font-family: var(--font-family-base);
  font-size: 15px; font-weight: 700;
  color: var(--color-text-primary);
  line-height: 1.4;
}
/* S6 polish : phrase d'état (vs nom d'identification) — poids normal, couleur
   primaire conservée. Le gras de __content reste réservé aux noms ("Le bistrot").
   Local à la carte plan ("Plan généré automatiquement"), n'impacte pas les autres. */
.onb-step6-card__content--plain { font-weight: 400; }
.onb-step6-card__sub {
  font-size: 14px; font-weight: 400;
  color: var(--color-text-secondary);
  line-height: 1.4;
}
.onb-step6-card__subtitle {
  font-size: 12px;
  font-weight: 600;
  color: var(--color-text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-top: 10px;
  margin-bottom: 4px;
}
.onb-step6-card__subtitle:first-of-type { margin-top: 6px; }
.onb-step6-card__list {
  margin: 4px 0 0; padding-left: 20px;
  font-size: 14px; color: var(--color-text-primary);
  line-height: 1.5;
}
.onb-step6-card__list li { margin-top: 2px; }
/* Sous-texte zone (Card 4 équipements) : ligne 2 grise, hiérarchie nom > zone. */
.onb-step6-card__list .onb-eq-zone {
  display: block;
  font-size: 13px;
  color: var(--color-text-secondary);
}
.onb-step6-card__empty {
  font-size: 14px;
  color: var(--color-text-muted);
  font-style: italic;
}
/* S6 polish (Variante A) — carte plan uniquement : bouton Modifier en absolu
   haut-droite (même place visuelle que les autres cartes) pour libérer la pleine
   largeur au texte → "Plan généré automatiquement" et la ligne de chiffres
   tiennent chacune sur une ligne (plus de wrap). Local à --plan : les 4 autres
   cartes gardent le bouton dans le flux, zéro impact. */
.onb-step6-card--plan .onb-step6-card__modify-btn {
  position: absolute;
  top: 16px;
  right: 16px;
}
/* Le titre réserve la hauteur (min-height) + la largeur (padding-right) du bouton
   absolu, pour que les 2 phrases démarrent SOUS le bouton, pleine largeur, sans
   collision avec lui. */
.onb-step6-card--plan .onb-step6-card__title {
  min-height: 34px;
  padding-right: 112px;
}

.onb-step6-card__modify-btn {
  flex-shrink: 0;
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 14px;
  background: var(--color-bg);
  color: var(--color-primary-active);
  border: 1px solid var(--color-border-light);
  border-radius: 8px;
  font-family: var(--font-family-base);
  font-size: 13px; font-weight: 600;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
}
.onb-step6-card__modify-btn:hover {
  border-color: var(--color-primary-active);
  background: var(--color-bg-soft);
}
.onb-step6-card__modify-btn svg { width: 14px; height: 14px; }

/* ── Badges role métier ────────────────────────────────────────────── */
.onb-step6-badges {
  display: flex; flex-wrap: wrap; gap: 8px;
  margin-top: 4px;
}
.onb-step6-badge {
  display: inline-flex; align-items: center;
  padding: 6px 12px;
  border-radius: 16px;
  font-family: var(--font-family-base);
  font-size: 13px; font-weight: 500;
}
.onb-step6-badge--gerant {
  background: var(--color-primary-soft);
  color: var(--color-primary-active);
}
.onb-step6-badge--chef {
  background: rgba(1, 165, 80, 0.12);
  color: #01A550;
}
.onb-step6-badge--commis {
  background: rgba(255, 121, 0, 0.12);
  color: #C95B00;
}
.onb-step6-badge--default {
  background: var(--color-bg-soft);
  color: var(--color-text-muted);
}

/* ── Skipped badge (À compléter plus tard) ─────────────────────────── */
/* Fix superposition 26/05/2026 : déplacé dans le flux normal en haut du __body
   (vs position absolute initial qui se superposait au modify-btn flex-shrink à droite). */
.onb-step6-skipped-badge {
  display: inline-flex; align-items: center; align-self: flex-start;
  padding: 4px 10px;
  margin-bottom: 6px;
  background: var(--color-bg-soft);
  color: var(--color-text-muted);
  border-radius: 12px;
  font-size: 11px; font-weight: 600;
  letter-spacing: 0.02em;
}

/* ── Info card "Bon à savoir" ──────────────────────────────────────── */
.onb-step6-info-card {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 14px 16px;
  background: var(--color-primary-soft);
  border-radius: var(--radius-card-small);
}
.onb-step6-info-card__icon {
  flex-shrink: 0;
  display: flex; align-items: center;
  color: var(--color-primary-active);
}
.onb-step6-info-card__icon svg { width: 20px; height: 20px; }
.onb-step6-info-card__body { flex: 1; min-width: 0; }
.onb-step6-info-card__title {
  font-family: var(--font-family-base);
  font-size: 14px; font-weight: 700;
  color: var(--color-text-primary);
}
.onb-step6-info-card__text {
  margin-top: 4px;
  font-size: 13px;
  color: var(--color-text-secondary);
  line-height: 1.4;
}

/* ── CTAs ──────────────────────────────────────────────────────────── */
.onb-step6-ctas {
  display: flex; flex-direction: column; gap: 12px;
  margin-top: 8px;
}
.onb-step6-cta-primary {
  width: 100%; height: 56px;
  background: var(--color-primary);
  color: #FFF;
  border: none;
  border-radius: var(--radius-button-primary);
  font-family: var(--font-family-base);
  font-size: 16px; font-weight: 600;
  cursor: pointer;
  transition: background 0.15s, transform 0.1s;
  -webkit-tap-highlight-color: transparent;
}
.onb-step6-cta-primary:hover { background: #00306F; }
.onb-step6-cta-primary:active { transform: scale(0.99); }
.onb-step6-cta-primary:disabled {
  opacity: 0.5; cursor: not-allowed; transform: none;
}
.onb-step6-cta-back {
  align-self: flex-start;
  font-family: var(--font-family-base);
  font-size: 15px; font-weight: 500;
  color: var(--color-text-secondary);
  text-decoration: none;
  padding: 8px 4px;
}
.onb-step6-cta-back:hover { color: var(--color-primary-active); }

/* ── Trust signal footer ───────────────────────────────────────────── */
.onb-step6-footer-secure {
  display: flex; align-items: center; justify-content: center; gap: 6px;
  margin-top: 16px;
  font-size: 13px;
  color: var(--color-success);
}
.onb-step6-footer-secure__icon {
  display: flex; align-items: center;
  color: var(--color-success);
}
.onb-step6-footer-secure__icon svg { width: 18px; height: 18px; }

/* ── Form custom add zone (3 champs : nom + fréquence + responsable) ── */
.onb-step5-custom-form {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.onb-step5-custom-form__field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.onb-step5-custom-form__label {
  font-family: var(--font-family-base);
  font-size: 14px;
  font-weight: 600;
  color: var(--color-text-primary);
}
.onb-step5-custom-form__required {
  color: var(--color-danger);
  margin-left: 2px;
}
.onb-step5-custom-form__input-wrap {
  position: relative;
}
.onb-step5-custom-form__input-icon {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--color-text-muted);
  display: flex;
  align-items: center;
  pointer-events: none;
}
.onb-step5-custom-form__input-icon svg {
  width: 18px;
  height: 18px;
}
.onb-step5-custom-form__input,
.onb-step5-custom-form__select {
  width: 100%;
  height: 48px;
  padding: 0 14px 0 42px;
  font-family: var(--font-family-base);
  font-size: 15px;
  color: var(--color-text-primary);
  background: var(--color-bg);
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius-input);
  box-sizing: border-box;
  -webkit-appearance: none;
  appearance: none;
}
.onb-step5-custom-form__input:focus,
.onb-step5-custom-form__select:focus {
  outline: 2px solid var(--color-primary-active);
  outline-offset: 0;
}
.onb-step5-custom-form__select {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none' stroke='%23064CFC' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='1,1 6,7 11,1'/></svg>");
  background-repeat: no-repeat;
  background-position: right 14px center;
  padding-right: 36px;
}
.onb-step5-custom-form__row-2col {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
@media (min-width: 600px) {
  .onb-step5-custom-form__row-2col {
    flex-direction: row;
  }
  .onb-step5-custom-form__row-2col > .onb-step5-custom-form__field {
    flex: 1;
  }
}
.onb-step5-custom-form__add-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  height: 48px;
  background: var(--color-bg);
  color: var(--color-primary-active);
  border: 1px solid var(--color-primary-active);
  border-radius: var(--radius-input);
  font-family: var(--font-family-base);
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s;
}
.onb-step5-custom-form__add-btn:hover {
  background: var(--color-primary-soft);
}
.onb-step5-custom-form__add-btn-circle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 1.5px solid var(--color-primary-active);
}
.onb-step5-custom-form__add-btn-circle svg {
  width: 12px;
  height: 12px;
}

/* ── Helper bulle pédagogique permanente sous form ─────────────────── */
.onb-step5-helper {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 14px;
  background: var(--color-bg-soft);
  border-radius: var(--radius-card-small);
  font-size: 13px;
  color: var(--color-text-secondary);
  line-height: 1.4;
  margin: 0;
}
.onb-step5-helper__icon {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  color: var(--color-primary-active);
}
.onb-step5-helper__icon svg {
  width: 18px;
  height: 18px;
}

/* ── CTAs Continuer + Skip + Retour ────────────────────────────────── */
.onb-step5-ctas {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 8px;
}
.onb-step5-cta-primary {
  width: 100%;
  height: 56px;
  background: var(--color-primary);
  color: #FFF;
  border: none;
  border-radius: var(--radius-button-primary);
  font-family: var(--font-family-base);
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s, transform 0.1s;
  -webkit-tap-highlight-color: transparent;
}
.onb-step5-cta-primary:hover {
  background: #00306F;
}
.onb-step5-cta-primary:active {
  transform: scale(0.99);
}
.onb-step5-cta-primary:disabled,
.onb-step5-cta-skip:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
}
.onb-step5-cta-skip:not([hidden]) {
  width: 100%;
  height: 56px;
  background: var(--color-bg);
  color: var(--color-primary);
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius-button-secondary);
  font-family: var(--font-family-base);
  font-size: 15px;
  font-weight: 500;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  box-shadow: var(--shadow-card);
  transition: border-color 0.15s, background 0.15s;
}
.onb-step5-cta-skip:hover {
  border-color: var(--color-primary);
  background: var(--color-bg-soft);
}
.onb-step5-cta-skip__icon {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  color: var(--color-primary);
}
.onb-step5-cta-skip__icon svg {
  width: 22px;
  height: 22px;
}
.onb-step5-cta-back {
  align-self: flex-start;
  font-family: var(--font-family-base);
  font-size: 15px;
  font-weight: 500;
  color: var(--color-text-secondary);
  text-decoration: none;
  padding: 8px 4px;
}
.onb-step5-cta-back:hover {
  color: var(--color-primary-active);
}

/* ── Trust signal footer ───────────────────────────────────────────── */
.onb-step5-footer-secure {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin-top: 16px;
  font-size: 13px;
  color: var(--color-success);
}
.onb-step5-footer-secure__icon {
  display: flex;
  align-items: center;
  color: var(--color-success);
}
.onb-step5-footer-secure__icon svg {
  width: 18px;
  height: 18px;
}