/* ================================================================
   HOME ZÉRO SESSION — blocs « Où tu en es » + « Ta première session »
   ================================================================
   Occupent les mêmes emplacements que la Home mature (barres + hero),
   remplis avec ce que l'apprenant A. Disparaissent dès la 1re session
   (branche sessionsCount===0 dans renderHome). Fichier isolé, revert
   propre. Couleurs DriveBook : fond jaune conservé (page), cartes
   blanches, bleu #144393, émeraude #059669 (coches), bleu clair (ancre
   1500). Ne touche à rien de la Home mature.
   ================================================================ */

.hz-card {
  background: #FFFFFF;
  border-radius: 20px;
  padding: 18px 16px;
  margin-bottom: 14px;
  box-shadow: 0 4px 16px rgba(20, 67, 147, .08);
}
.hz-card-title {
  margin: 0 0 12px;
  font-family: Nunito, sans-serif;
  font-size: 19px;
  font-weight: 800;
  color: #144393;
  letter-spacing: -.3px;
}

/* Sous-titre bénéfice (bloc guide) — « mains sur le volant » en évidence,
   callout bleu clair pour qu'il ne se noie pas dans la carte blanche. */
.hz-card-sub {
  margin: 0 0 14px;
  padding: 12px 14px;
  background: #EEF3FB;
  border-radius: 12px;
  font-family: Nunito, sans-serif;
  font-size: 14.5px;
  line-height: 1.5;
  font-weight: 600;
  color: #144393;
}

/* ── Lignes dépliables (accordéon) ─────────────────────────────── */
.hz-line { border-top: 1px solid rgba(20, 67, 147, .08); }
.hz-line:first-of-type { border-top: none; }

.hz-line-head {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 2px;
  background: none;
  border: none;
  cursor: pointer;
  font-family: Nunito, sans-serif;
  text-align: left;
}
.hz-line-label {
  flex: 1;
  min-width: 0;
  font-size: 15px;
  font-weight: 700;
  color: #1A1A2E;
  line-height: 1.3;
}
.hz-value {
  flex-shrink: 0;
  font-size: 13px;
  font-weight: 700;
  color: #6B7280;
}
/* Libellé d'ACTION à droite d'une ligne (forme 1). Bleu souligné = ça se tape
   (grammaire du bloc). Le soulignement porte l'affordance, pas la déco. */
.hz-action {
  flex-shrink: 0;
  font-size: 14px;
  font-weight: 800;
  color: #144393;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 2px;
}
/* Chevron : l'affordance qui manquait — pivote à l'ouverture. */
.hz-chevron {
  flex-shrink: 0;
  color: rgba(20, 67, 147, .4);
  transition: transform .22s ease;
}
.hz-line.open .hz-chevron { transform: rotate(180deg); }

/* Pastille de statut — colonne unique, alignée (20px, gouttière = gap head).
   Sur fond JAUNE, c'est le BLEU qui porte le signal (le jaune plein serait
   invisible). Grammaire : pointillé bleu = pas encore / plein bleu = acquis /
   plein bleu + coche blanche = fait (--done RÉSERVÉ, non émis pour l'instant).
   Inversion LOCALE : ne touche pas au token --status-mastered (jaune = acquis
   ailleurs). Le fantôme aligne la ligne km (sans pastille visible). */
.hz-pastille {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
}
.hz-pastille--empty { background: transparent; border: 2px dashed #144393; }
.hz-pastille--full  { background: #144393; border: 2px solid #144393; }
.hz-pastille--done  { background: #144393; border: 2px solid #144393; color: #FFF; }
.hz-pastille--ghost { background: none; border: none; visibility: hidden; }

/* Détail replié par défaut, révélé quand .hz-line.open */
.hz-line-detail {
  overflow: hidden;
  max-height: 0;
  opacity: 0;
  transition: max-height .26s ease, opacity .2s ease, padding .26s ease;
  padding: 0 2px 0 32px;
}
.hz-line.open .hz-line-detail {
  max-height: 320px;
  opacity: 1;
  padding: 0 2px 14px 32px;
}
.hz-line-detail p {
  margin: 0;
  font-size: 14px;
  line-height: 1.55;
  color: #6B7280;
}
.hz-detail-cta {
  margin-top: 10px;
  padding: 9px 16px;
  border: 2px solid #144393;
  border-radius: 10px;
  background: #FFF;
  color: #144393;
  font-family: Nunito, sans-serif;
  font-size: 13px;
  font-weight: 800;
  cursor: pointer;
}

/* ================================================================
   BLOC 1 « Où tu en es » NU (fond jaune) — le jaune porte le contexte,
   le blanc porte l'action/l'info. Le bloc 2 (première session) garde sa
   carte blanche : c'est volontairement le seul rectangle blanc = point de
   mire. Tout est scopé sous .hz-card--bare → aucune fuite sur le bloc 2.
   ================================================================ */
.hz-card--bare {
  background: none;
  box-shadow: none;
  border-radius: 0;
  padding-top: 6px;
  padding-bottom: 6px;
}
/* Séparateurs : bleu translucide (un gris sur du jaune fait sale). */
.hz-card--bare .hz-line { border-top-color: rgba(20, 67, 147, .18); }
/* Chevrons un peu plus soutenus pour tenir sur le jaune. */
.hz-card--bare .hz-chevron { color: rgba(20, 67, 147, .55); }

/* Déroulés → petits cadres blancs, indentés SOUS le texte de la ligne (pas
   sous la pastille). C'est là que descendent countdown vert + date : lisibles
   sur blanc, jamais sur le jaune. */
.hz-card--bare .hz-line-detail {
  margin: 0 2px 0 30px;
  padding: 0 12px;
  background: #FFFFFF;
  border-radius: 12px;
}
.hz-card--bare .hz-line.open .hz-line-detail {
  padding: 10px 12px;
  margin-bottom: 8px;
}
/* Ligne méta (countdown / date d'obtention) en tête du cadre blanc. */
.hz-detail-meta {
  margin: 0 0 6px !important;
  font-size: 14px;
  font-weight: 800;
  line-height: 1.3;
}
/* Bouton d'action pleine largeur DANS le cadre (guide : « Lier mon guide » ;
   permis none : « Ouvrir le Planning »). Vrai bouton, pas un libellé 13px. */
.hz-detail-btn {
  display: block;
  width: 100%;
  margin-top: 12px;
  padding: 12px 16px;
  border: none;
  border-radius: 10px;
  background: #144393;
  color: #FFFFFF;
  font-family: Nunito, sans-serif;
  font-size: 14px;
  font-weight: 800;
  cursor: pointer;
  text-align: center;
}
.hz-detail-btn:active { transform: scale(.98); }

/* Ancre 1 500 km : plus de bandeau bleu pâle, ligne comme les autres. */
.hz-card--bare .hz-line--km {
  margin: 0;
  padding: 0;
  background: none;
  border-radius: 0;
  border-top: 1px solid rgba(20, 67, 147, .18);
}
.hz-card--bare .hz-line--km .hz-line-label { color: #144393; }

/* ── Ligne 4 — ancre 1 500 km, en bleu clair ───────────────────── */
.hz-line--km {
  margin: 8px -16px -18px;
  padding: 0 16px;
  background: #EEF3FF;
  border-top: none;
  border-radius: 0 0 20px 20px;
}
.hz-line--km .hz-line-label { color: #144393; }
.hz-line--km .hz-chevron { color: rgba(20, 67, 147, .5); }

/* ── Bloc 2 — Ta première session ──────────────────────────────── */
.hz-steps { display: flex; flex-direction: column; }
.hz-step { border-top: 1px solid rgba(20, 67, 147, .06); }
.hz-step:first-child { border-top: none; }
.hz-step-head {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 13px 2px;
  background: none;
  border: none;
  font-family: Nunito, sans-serif;
  text-align: left;
}
button.hz-step-head { cursor: pointer; }
.hz-step-num {
  flex-shrink: 0;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: #144393;
  color: #FFF;
  font-size: 14px;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
}
.hz-step-label {
  flex: 1;
  font-size: 15px;
  font-weight: 700;
  color: #1A1A2E;
  line-height: 1.3;
}
.hz-step .hz-chevron { color: rgba(20, 67, 147, .4); }
.hz-step.open .hz-chevron { transform: rotate(180deg); }
.hz-step .hz-line-detail { padding-left: 40px; }
.hz-step.open .hz-line-detail { padding-left: 40px; }

/* Filet fin + phrase compacte pointant le vrai bouton nav (miniature inline).
   Plus de gros bouton décoratif : le bloc se compacte, marges resserrées. */
.hz-btn-sep {
  height: 1px;
  background: rgba(20, 67, 147, .1);
  margin: 12px 0 0;
}
.hz-btn-line {
  margin: 12px 2px 0;
  text-align: center;
  font-size: 15px;
  font-weight: 700;
  color: #144393;
  line-height: 1.5;
}
/* Miniature du bouton nav intégrée dans la ligne de texte. */
.hz-btn-mini {
  height: 1.5em;
  width: auto;
  vertical-align: middle;
  margin: 0 .1em;
  position: relative;
  top: -.06em;
}