/* ============================================================
   vertical.css — Blocs propres aux pages verticales
   (/praticien/, /gite/, /loisirs/)

   Même règle que metier.css : ne contient QUE ce qui n'existe pas
   déjà dans main.css, components.css, home.css, artisan.css et
   metier.css. Le hero, les cartes de fonctions, le workflow, les
   tarifs, le pied de page et le bloc réforme sont repris tels quels
   des pages existantes, pour que la charte reste corrigeable en un
   seul endroit.

   Les trois verticaux n'ont pas la même mécanique : un cabinet
   raisonne en créneaux, un gîte en nuits, une billetterie en
   entrées. Chacun a donc son visuel de hero, et ces visuels sont
   les seuls blocs vraiment nouveaux ici.
   ============================================================ */

/* ── Sections génériques ───────────────────────────────────── */
.vsection      { padding: 80px 0; background: var(--bg); }
.vsection--alt { background: var(--bg-alt); }

.vsection__header { margin-bottom: 44px; max-width: 680px; }

/* ── Bloc deux colonnes : texte + panneau illustré ─────────── */
.vsplit {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 56px;
  align-items: center;
}
.vsplit--rev .vsplit__text  { order: 2; }
.vsplit--rev .vsplit__panel { order: 1; }

.vsplit__text .section-title { margin-bottom: 16px; }
.vsplit__lead {
  font-size: 16.5px;
  line-height: 1.7;
  color: var(--muted);
  margin-bottom: 22px;
}

/* ── Panneau illustré (fond clair, bord discret) ───────────── */
.vpanel {
  background: var(--white);
  border: 1.5px solid var(--border);
  border-radius: var(--r);
  box-shadow: var(--shadow-md);
  overflow: hidden;
}
.vpanel__head {
  background: var(--dark);
  padding: 13px 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.vpanel__logo {
  font-weight: 800;
  font-size: 12.5px;
  color: var(--brand);
  letter-spacing: .08em;
}
.vpanel__tag {
  background: rgba(245,184,0,.2);
  color: var(--brand);
  font-size: 11px;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 100px;
  border: 1px solid rgba(245,184,0,.3);
  white-space: nowrap;
}
.vpanel__body { padding: 18px; }
.vpanel__foot {
  border-top: 1.5px solid var(--border);
  padding: 12px 18px;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--muted);
  text-align: center;
}

/* ── Agenda du jour (hero /praticien/) ─────────────────────── */
.agenda-row {
  display: grid;
  grid-template-columns: 52px 1fr auto;
  gap: 12px;
  align-items: center;
  padding: 11px 0;
  border-bottom: 1px solid var(--border);
}
.agenda-row:last-child { border-bottom: none; }

.agenda-row__time {
  font-size: 13px;
  font-weight: 800;
  color: var(--dark);
  font-variant-numeric: tabular-nums;
}
.agenda-row__name {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--text);
}
.agenda-row__meta {
  font-size: 12px;
  color: var(--muted);
  margin-top: 2px;
}
.agenda-row__state {
  font-size: 10.5px;
  font-weight: 700;
  padding: 4px 9px;
  border-radius: 100px;
  white-space: nowrap;
  border: 1px solid var(--border);
  color: var(--muted);
  background: var(--bg-alt);
}
.agenda-row__state--paid {
  color: #276749;
  background: #F0FFF4;
  border-color: #C6F6D5;
}
.agenda-row__state--visio {
  color: var(--brand-text);
  background: var(--brand-light);
  border-color: rgba(245,184,0,.35);
}
.agenda-row--free .agenda-row__name,
.agenda-row--free .agenda-row__time { color: var(--muted); font-weight: 600; }

/* ── Disponibilités (hero /gite/) ──────────────────────────── */
.calmock__month {
  font-size: 13px;
  font-weight: 800;
  color: var(--dark);
  margin-bottom: 12px;
}
.calmock__grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 5px;
}
.calmock__dow {
  font-size: 10px;
  font-weight: 700;
  color: var(--muted);
  text-align: center;
  text-transform: uppercase;
  letter-spacing: .04em;
  padding-bottom: 4px;
}
.calmock__day {
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--r-xs);
  font-size: 11.5px;
  font-weight: 600;
  color: var(--text);
  background: var(--bg-alt);
  border: 1px solid var(--border);
  font-variant-numeric: tabular-nums;
}
.calmock__day--busy {
  background: var(--brand);
  border-color: var(--brand-dark);
  color: #1D1D1F;
  font-weight: 800;
}
.calmock__day--empty { background: none; border: none; }

.calmock__legend {
  display: flex;
  gap: 18px;
  margin-top: 16px;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--muted);
}
.calmock__legend span { display: inline-flex; align-items: center; gap: 7px; }
.calmock__key {
  width: 11px; height: 11px;
  border-radius: 3px;
  border: 1px solid var(--border);
  background: var(--bg-alt);
  flex-shrink: 0;
}
.calmock__key--busy { background: var(--brand); border-color: var(--brand-dark); }

/* ── Billet (hero /loisirs/) ───────────────────────────────── */
.ticket__body {
  padding: 20px 18px;
  display: grid;
  grid-template-columns: 1fr 96px;
  gap: 18px;
  align-items: center;
}
.ticket__event {
  font-size: 16.5px;
  font-weight: 800;
  color: var(--dark);
  line-height: 1.25;
  margin-bottom: 10px;
}
.ticket__meta {
  display: grid;
  gap: 6px;
}
.ticket__meta div {
  font-size: 12px;
  color: var(--muted);
}
.ticket__meta strong {
  color: var(--text);
  font-weight: 700;
}
.ticket__qr {
  width: 96px; height: 96px;
  border: 1.5px solid var(--border);
  border-radius: var(--r-sm);
  padding: 7px;
  background: var(--white);
}
.ticket__qr svg { width: 100%; height: 100%; display: block; }
.ticket__tear {
  border-top: 1.5px dashed var(--border);
  margin: 0 18px;
}

/* ── Cartes numérotées (étapes ou principes) ───────────────── */
.vcards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.vcard {
  background: var(--white);
  border: 1.5px solid var(--border);
  border-radius: var(--r);
  padding: 26px 24px;
}
.vcard__num {
  width: 34px; height: 34px;
  border-radius: 50%;
  background: var(--brand-light);
  border: 1.5px solid rgba(245,184,0,.4);
  color: var(--brand-text);
  font-size: 14px;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 16px;
}
.vcard__title {
  font-size: 16px;
  font-weight: 700;
  color: var(--dark);
  margin-bottom: 8px;
  line-height: 1.3;
}
.vcard__desc {
  font-size: 14px;
  color: var(--muted);
  line-height: 1.65;
}

/* ── Compteurs (tableau de bord /loisirs/) ─────────────────── */
.vmetrics {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}
.vmetric {
  background: var(--white);
  border: 1.5px solid var(--border);
  border-radius: var(--r-sm);
  padding: 18px 16px;
  text-align: center;
}
.vmetric__val {
  font-size: 28px;
  font-weight: 800;
  color: var(--dark);
  letter-spacing: -.02em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.vmetric__lbl {
  font-size: 11.5px;
  font-weight: 600;
  color: var(--muted);
  margin-top: 7px;
  text-transform: uppercase;
  letter-spacing: .05em;
}

/* ── Champs de formulaire simulés (widget /gite/) ──────────── */
.vfield {
  border: 1.5px solid var(--border);
  border-radius: var(--r-xs);
  padding: 10px 13px;
  margin-bottom: 10px;
  background: var(--bg);
}
.vfield__lbl {
  font-size: 10.5px;
  font-weight: 700;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: .05em;
}
.vfield__val {
  font-size: 14px;
  font-weight: 700;
  color: var(--dark);
  margin-top: 3px;
}
.vfield-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.vfield-row .vfield { margin-bottom: 10px; }

.vfake-btn {
  display: block;
  width: 100%;
  text-align: center;
  background: var(--brand);
  color: #1D1D1F;
  font-size: 13.5px;
  font-weight: 800;
  padding: 12px;
  border-radius: var(--r-xs);
  margin-top: 4px;
}

/* ── Ligne de contrôle (mode Station /loisirs/) ────────────── */
.vscan {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid var(--border);
}
.vscan:last-child { border-bottom: none; }
.vscan__icon {
  width: 30px; height: 30px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  background: #F0FFF4;
  border: 1px solid #C6F6D5;
  color: #276749;
}
.vscan__icon--wait {
  background: var(--brand-light);
  border-color: rgba(245,184,0,.35);
  color: var(--brand-text);
}
.vscan__name { font-size: 13.5px; font-weight: 700; color: var(--text); }
.vscan__meta { font-size: 12px; color: var(--muted); margin-top: 1px; }

/* ── Responsive ────────────────────────────────────────────── */
@media (max-width: 1024px) {
  .vsplit { grid-template-columns: 1fr; gap: 40px; }
  .vsplit--rev .vsplit__text  { order: 1; }
  .vsplit--rev .vsplit__panel { order: 2; }
  .vsplit__panel { max-width: 480px; }
}

@media (max-width: 768px) {
  .vsection { padding: 60px 0; }
  .vcards   { grid-template-columns: 1fr; }
  .vmetrics { grid-template-columns: 1fr; }
}

@media (max-width: 480px) {
  .ticket__body { grid-template-columns: 1fr; justify-items: start; }
  .vfield-row   { grid-template-columns: 1fr; }
}