/* ============================================================================
   onboarding.css — le parcours guidé (brique 7)
   ============================================================================
   🔴 TOUT EST PRÉFIXÉ `.ob-*` ET SCOPÉ `#onboarding-section` (règle 2 : les
      classes du tronc commun ne se redéfinissent jamais). Les seules classes
      partagées employées ici sont `.ds-btn` et ses variantes, utilisées TELLES
      QUELLES, sans surcharge.
   ⚠️ Aucun `:has()` (règle 3 — piège Safari).
   Le fichier vit à part plutôt que dans styles.css : le motif du dépôt est un
   CSS par application (avis.css, devis.css, conges.css, stock.css).
   ============================================================================ */

#onboarding-section { display: block; }
#onboarding-section.hidden { display: none; }

/* ============================================================================
   LE RAPPEL DE CONFIGURATION — la pastille de l'en-tête
   ============================================================================
   🔴 CLASSE PROPRE, AUCUN EMPRUNT. Elle vit à côté de `.help-trigger` et
      `.notif-bell` (38 px ronds) et doit s'aligner sur eux — mais elle porte
      une PHRASE, ce qu'un rond de 38 px ne peut pas faire. Reprendre leur
      classe et la « juste un peu » élargir aurait déformé les deux autres
      partout ailleurs (règle 2 : les classes partagées ne se redéfinissent
      jamais).
   ⚠️ Elle est TEINTÉE, là où ses voisines sont neutres : c'est un rappel, il
      doit se remarquer sans crier. Terra-mist en repos, terra-bg au survol.
   ⚠️ Sa hauteur est celle de ses voisines (38 px) — c'est ce qui la fait tenir
      dans la ligne sans décaler le reste. Le `.app-header-right` est en flex :
      un élément plus haut pousserait tout le rang.
   ============================================================================ */
/* 🔴 UN EMPLACEMENT VIDE NE DOIT PAS OCCUPER DE PLACE, ET UN `<span>` VIDE EN
   OCCUPE. `.app-header-right` est un flex avec `gap: 12px` : un item de largeur
   nulle reste un item, et le gap s'applique entre lui et le suivant. Sans cette
   règle, l'en-tête gagnerait 12 px de vide PERMANENT sur les sept applications,
   y compris chez les cabinets qui n'auront jamais de rappel à afficher — un
   décalage que personne ne relierait jamais au parcours guidé.
   ⚠️ `:empty` et non `:has()` (règle 3 — piège Safari). Le sélecteur est exact :
   le slot est vide OU contient la pastille, jamais du texte. */
#ob-pastille-slot:empty { display: none; }

.ob-pastille {
  display: inline-flex; align-items: center; gap: 8px;
  height: 38px; padding: 0 15px 0 12px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--terra-bg); background: var(--terra-mist);
  color: var(--terra-deep);
  font-family: var(--sans); font-size: var(--text-sm); font-weight: 600;
  white-space: nowrap; cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease;
}
.ob-pastille:hover { background: var(--terra-bg); border-color: var(--terra-light); }
.ob-pastille:focus-visible { outline: 2px solid var(--terra); outline-offset: 2px; }
.ob-pastille-n {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 19px; height: 19px; padding: 0 5px;
  border-radius: var(--radius-pill);
  background: var(--terra); color: var(--paper);
  font-size: 10.5px; font-weight: 700; line-height: 1;
}
/* Sous 900 px, le libellé s'efface et la pastille redevient un rond : l'en-tête
   porte déjà quatre éléments, et `flex-wrap` ferait passer le rang à la ligne. */
@media (max-width: 900px) {
  .ob-pastille { padding: 0; width: 38px; justify-content: center; gap: 0; }
  .ob-pastille-lbl { display: none; }
}

.ob-wrap { max-width: 840px; margin: 0 auto; padding: 28px 16px 64px; }
.ob-card {
  background: var(--paper);
  border: 1px solid var(--rule-soft);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  padding: 32px 34px;
  text-align: left;
}

/* ── Le fil des étapes ───────────────────────────────────────────────────── */
.ob-steps { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-bottom: 26px; }
.ob-step {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 6px 13px; border-radius: var(--radius-pill);
  border: 1px solid transparent; background: transparent;
  font-family: var(--sans); font-size: var(--text-xs); font-weight: 600;
  letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--ink-faint); cursor: pointer;
}
.ob-step:hover { background: var(--ivory-soft); color: var(--ink-soft); }
.ob-step.is-current { background: var(--terra-mist); border-color: var(--terra-bg); color: var(--terra-deep); }
.ob-step.is-done { color: var(--sage-deep); }
.ob-step.is-skipped { color: var(--ink-faint); text-decoration: line-through; }
.ob-dot {
  width: 19px; height: 19px; border-radius: var(--radius-pill);
  border: 1.5px solid currentColor; display: inline-flex;
  align-items: center; justify-content: center;
  font-size: 10px; font-weight: 700; text-decoration: none; flex-shrink: 0;
}
.ob-step.is-done .ob-dot { background: var(--sage); border-color: var(--sage); color: var(--paper); }
.ob-step.is-current .ob-dot { background: var(--terra); border-color: var(--terra); color: var(--paper); }
.ob-sep { color: var(--ink-faint); font-size: 11px; }

/* ── Titres ──────────────────────────────────────────────────────────────── */
.ob-eyebrow {
  display: block; margin-bottom: 8px;
  font-size: var(--text-xs); letter-spacing: 0.22em;
  text-transform: uppercase; color: var(--ink-faint);
}
.ob-title {
  font-family: var(--serif); font-style: italic; font-weight: 300;
  font-size: 30px; line-height: 1.15; color: var(--ink);
}
.ob-tag {
  display: inline-block; margin-left: 10px; vertical-align: middle;
  font-family: var(--sans); font-style: normal; font-size: 10px; font-weight: 700;
  letter-spacing: 0.12em; text-transform: uppercase; padding: 3px 9px;
  border-radius: var(--radius-pill); background: var(--terra-bg); color: var(--terra-deep);
}
.ob-tag--opt { background: var(--sage-bg); color: var(--sage-deep); }
.ob-lede { color: var(--ink-soft); font-size: var(--text-base); margin-top: 10px; max-width: 60ch; }
.ob-hr { border: 0; border-top: 1px solid var(--rule-soft); margin: 26px 0; }

/* ── Encarts d'état ──────────────────────────────────────────────────────── */
.ob-done, .ob-skipped, .ob-soon, .ob-where {
  display: flex; gap: 13px; align-items: flex-start;
  border-radius: var(--radius); padding: 14px 16px; margin-bottom: 20px;
  font-size: var(--text-sm); line-height: 1.5;
}
.ob-done { background: var(--sage-mist); border: 1px solid var(--sage-bg); color: var(--ink-soft); }
.ob-done-ic { color: var(--sage-deep); font-weight: 700; flex-shrink: 0; }
.ob-done b { color: var(--sage-deep); }
.ob-skipped { background: var(--warn-bg); border: 1px solid #E6D9A6; color: var(--warn-deep); display: block; }
.ob-soon { background: var(--ivory); border: 1px dashed var(--rule); color: var(--ink-mute); display: block; }
.ob-soon b { color: var(--ink-soft); }
.ob-where {
  background: var(--sage-mist); border: 1px solid var(--sage-bg);
  border-left: 3px solid var(--sage); color: var(--ink-soft);
}
.ob-where-ic { color: var(--sage-deep); flex-shrink: 0; }
.ob-where b { color: var(--sage-deep); font-weight: 700; }
.ob-erreur {
  background: var(--danger-bg); border: 1px solid var(--danger);
  border-radius: var(--radius); padding: 12px 14px; margin: 16px 0;
  font-size: var(--text-sm); color: var(--danger);
}

/* ── Le bloc de saisie ───────────────────────────────────────────────────── */
.ob-add {
  background: var(--ivory); border: 1px solid var(--rule-soft);
  border-radius: var(--radius-md); padding: 20px 20px 8px; margin-bottom: 20px;
}
.ob-add-title {
  font-size: var(--text-xs); font-weight: 700; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--ink-mute); margin-bottom: 16px;
}
.ob-add-act { padding-bottom: 12px; }
.ob-field { margin-bottom: 18px; }
.ob-field label {
  display: block; margin-bottom: 7px; font-weight: 600; color: var(--ink-mute);
  font-size: 10px; text-transform: uppercase; letter-spacing: 0.14em;
}
.ob-field input, .ob-field select {
  width: 100%; padding: 10px 12px;
  border: 1px solid var(--rule); border-radius: var(--radius);
  font-size: 14px; font-family: var(--sans);
  background: var(--paper); color: var(--ink);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.ob-field input:focus, .ob-field select:focus {
  outline: none; border-color: var(--terracotta); box-shadow: 0 0 0 3px var(--terracotta-mist);
}
.ob-field.ob-err input, .ob-field.ob-err select {
  border-color: var(--danger); box-shadow: 0 0 0 3px var(--danger-bg);
}
.ob-req { color: var(--terra); }
.ob-opt { font-weight: 500; text-transform: none; letter-spacing: 0; font-size: 11px; }
.ob-hint { font-size: var(--text-sm); color: var(--ink-mute); margin: -10px 0 18px; line-height: 1.45; }
.ob-hint b { color: var(--ink-soft); }
.ob-check {
  display: flex; align-items: flex-start; gap: 10px; margin: 4px 0 18px;
  font-size: var(--text-sm); color: var(--ink-soft);
}
.ob-check input { width: auto; margin-top: 3px; flex-shrink: 0; }
.ob-swatches { display: flex; gap: 7px; flex-wrap: wrap; }
.ob-swatch {
  width: 26px; height: 26px; border-radius: var(--radius-pill);
  border: 2px solid transparent; cursor: pointer; padding: 0;
}
.ob-swatch.is-on { border-color: var(--ink); box-shadow: 0 0 0 2px var(--paper) inset; }

/* Deux ou trois champs sur une ligne (prénom + rôle, contacts d'un labo) */
.ob-row { display: flex; gap: 18px; flex-wrap: wrap; }
.ob-row .ob-field { flex: 1; min-width: 170px; }

/* ── Listes de ce qui est déjà saisi ─────────────────────────────────────── */
.ob-liste { display: flex; flex-direction: column; gap: 8px; margin-bottom: 22px; }
.ob-item {
  padding: 12px 14px; background: var(--ivory);
  border: 1px solid var(--rule-soft); border-radius: var(--radius-md);
}
.ob-item-h { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.ob-item-nom { font-weight: 600; color: var(--ink); font-size: var(--text-base); }
.ob-item-meta { font-size: var(--text-sm); color: var(--ink-mute); }
.ob-warn { color: var(--warn-deep); }
.ob-vide {
  padding: 22px 18px; margin-bottom: 22px;
  border: 1px dashed var(--rule); border-radius: var(--radius-md);
  background: var(--ivory); color: var(--ink-mute);
  font-size: var(--text-sm); text-align: center;
}

/* Sous-liste : les plateformes d'une marque d'implants */
.ob-sub {
  margin-top: 10px; padding-left: 16px;
  border-left: 2px solid var(--rule-soft);
  display: flex; flex-direction: column; gap: 6px; align-items: flex-start;
}
.ob-sub-row { font-size: var(--text-sm); color: var(--ink-soft); }
.ob-sub-b { color: var(--ink-faint); margin-right: 8px; }
.ob-sub-add { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; width: 100%; }
.ob-sub-add input {
  flex: 1; min-width: 180px; padding: 7px 11px;
  border: 1px solid var(--rule); border-radius: var(--radius);
  font-family: var(--sans); font-size: var(--text-sm);
  background: var(--paper); color: var(--ink);
}
.ob-sub-add input:focus {
  outline: none; border-color: var(--terracotta); box-shadow: 0 0 0 3px var(--terracotta-mist);
}

/* ── Navigation ──────────────────────────────────────────────────────────── */
.ob-nav {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  margin-top: 28px; padding-top: 22px; border-top: 1px solid var(--rule-soft);
}
.ob-nav-sp { flex: 1; }
.ob-nav-note {
  flex-basis: 100%; margin-top: 10px;
  font-size: var(--text-sm); color: var(--terra-deep);
}

/* ── L'équipe : UNE liste, chacun avec son état ──────────────────────────── */
.ob-deleg {
  border: 1px solid var(--rule-soft); border-radius: var(--radius-md);
  padding: 18px 20px; background: var(--paper); margin-top: 4px;
}
.ob-deleg-t { font-weight: 600; color: var(--ink); margin-bottom: 6px; }
.ob-deleg-d { font-size: var(--text-sm); color: var(--ink-mute); line-height: 1.5; }
.ob-deleg-note {
  margin-top: 12px; font-size: var(--text-sm); color: var(--ink-mute);
  font-style: italic;
}
.ob-deleg-none {
  margin-top: 12px; padding: 12px 14px;
  background: var(--warn-bg); border: 1px solid #E6D9A6; border-radius: var(--radius);
  font-size: var(--text-sm); color: var(--warn-deep); line-height: 1.5;
}
.ob-deleg-none b { color: #5E4310; }
.ob-team { display: flex; flex-direction: column; gap: 6px; margin: 16px 0 4px; }
.ob-team-row {
  display: flex; align-items: center; gap: 12px; padding: 10px 13px;
  border: 1px solid var(--rule-soft); border-radius: var(--radius); background: var(--ivory);
}
.ob-team-row.is-nocompte { background: var(--paper); border-style: dashed; }
.ob-team-row.is-deleg { background: var(--sage-mist); border-color: var(--sage-bg); }
.ob-team-main { flex: 1; min-width: 0; }
.ob-team-nom { font-weight: 600; color: var(--ink); font-size: var(--text-base); }
.ob-team-meta { font-size: var(--text-sm); color: var(--ink-mute); margin-top: 1px; }
.ob-team-st { font-size: var(--text-xs); font-weight: 600; color: var(--ink-faint); white-space: nowrap; }
.ob-team-st.is-ok { color: var(--sage-deep); }
.ob-team-st.is-deleg {
  color: var(--sage-deep); background: var(--sage-bg);
  border-radius: var(--radius-pill); padding: 3px 10px;
}
.ob-invit {
  margin-top: 14px; padding: 14px;
  background: var(--ivory); border: 1px solid var(--rule-soft); border-radius: var(--radius);
}
.ob-invit-t { font-size: var(--text-sm); color: var(--ink-soft); margin-bottom: 9px; }
.ob-invit-row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.ob-invit-row input, .ob-invit-row select {
  padding: 8px 12px; border: 1px solid var(--rule); border-radius: var(--radius);
  font-family: var(--sans); font-size: var(--text-sm);
  background: var(--paper); color: var(--ink);
}
.ob-invit-row input { flex: 1; min-width: 200px; }
.ob-invit-row input:focus, .ob-invit-row select:focus {
  outline: none; border-color: var(--terracotta); box-shadow: 0 0 0 3px var(--terracotta-mist);
}
.ob-invit-hint { font-size: var(--text-sm); color: var(--ink-mute); margin-top: 9px; line-height: 1.45; }

/* ── « Et ensuite » — l'import Doctolib, à l'écran final ─────────────────── */
.ob-next {
  border: 1px solid var(--rule-soft); border-left: 3px solid var(--accent-patient);
  border-radius: var(--radius); background: var(--paper); padding: 15px 17px;
}
.ob-next-h { display: flex; gap: 12px; align-items: flex-start; }
.ob-next-ic {
  width: 26px; height: 26px; border-radius: var(--radius-pill);
  background: var(--accent-patient); color: var(--paper);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 14px; flex-shrink: 0;
}
.ob-next-t { font-weight: 600; color: var(--ink); line-height: 1.35; }
.ob-next-d { font-size: var(--text-sm); color: var(--ink-soft); margin-top: 4px; line-height: 1.5; }
.ob-next-path {
  display: flex; align-items: center; gap: 12px; margin-top: 14px; padding: 10px 14px;
  background: var(--ivory); border: 1px solid var(--rule-soft); border-radius: var(--radius);
}
.ob-next-path-l {
  font-size: 10px; font-weight: 700; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--ink-faint); flex-shrink: 0;
}
.ob-next-path-v { font-weight: 600; color: var(--accent-patient); font-size: var(--text-base); }
.ob-next-list { list-style: none; margin: 14px 0 0; padding: 0; display: flex; flex-direction: column; gap: 11px; }
.ob-next-list li {
  position: relative; padding-left: 17px;
  font-size: var(--text-sm); color: var(--ink-soft); line-height: 1.55;
}
.ob-next-list li::before {
  content: ""; position: absolute; left: 0; top: 8px;
  width: 6px; height: 6px; border-radius: var(--radius-pill); background: var(--rule);
}
.ob-next-list b { color: var(--ink); }

/* ── Récapitulatif ───────────────────────────────────────────────────────── */
.ob-recap { display: flex; flex-direction: column; gap: 10px; margin: 22px 0; }
.ob-recap-row {
  display: flex; align-items: center; gap: 14px; padding: 13px 16px;
  border-radius: var(--radius-md); border: 1px solid var(--rule-soft); background: var(--ivory);
}
.ob-recap-row.is-skipped { background: var(--warn-bg); border-color: #E6D9A6; }
.ob-recap-row.is-empty { background: var(--paper); border-style: dashed; }
.ob-recap-ic {
  width: 26px; height: 26px; border-radius: var(--radius-pill);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 700; flex-shrink: 0;
  background: var(--sage); color: var(--paper);
}
.ob-recap-row.is-skipped .ob-recap-ic { background: var(--warn); color: var(--paper); }
.ob-recap-row.is-empty .ob-recap-ic { background: var(--ivory-deep); color: var(--ink-mute); }
.ob-recap-lbl { flex: 1; font-weight: 600; color: var(--ink); }
.ob-recap-val { font-size: var(--text-sm); color: var(--ink-mute); }

@media (max-width: 640px) {
  .ob-card { padding: 24px 18px; }
  .ob-title { font-size: 25px; }
}