/* ============================================================================
   PINLANE : COUCHE CLIENT (« pinlane-client.css »)
   Parcours de réservation grand public + public-form.html + direction.html.
   Se charge APRÈS pinlane.css et ne référence que ses tokens.
   Univers client : mêmes composants que la console, plus d'air (spacing ×1.5),
   titres 24-32px, orientation réassurance/conversion.
   Convention CTA : action principale = recette .btn-primary (inversion
   noir/blanc, signature du système). L'accent bleu = sélection + états actifs.
   Sections :
     1. Compat tokens legacy (styles inline historiques du JS)
     2. index.html : #clientView (parcours formule → activité → créneau → OK)
     3. public-form.html : body.public-form
     4. (retirée) direction.html redirige vers la console du SPA
     5. Header client : shell public de index.html (body.client-mode)
     6. Pickers formule (heure d'arrivée, « Ancres + Liberté », occasion)
   ========================================================================== */

/* ----------------------------------------------------------------------------
   1. COMPAT : alias de tokens legacy encore référencés par des style=""
   inline générés par app-main.js (renderSlots vide/chargement, récap, total).
   Aucun autre usage autorisé.
   -------------------------------------------------------------------------- */
body {
  --text-2: var(--muted);
  --text-3: var(--faint);
}

/* ----------------------------------------------------------------------------
   0. IDENTITÉ FUN GALAXY : accent magenta de marque (#944292, logo Fun Galaxy)
   sur le parcours CLIENT uniquement. Le staff/direction gardent l'accent système
   (bleu). Scopé body.client-mode (index #clientView + header public) et
   body.public-form (formulaire autonome) : jamais body.staff-mode/admin-mode.
   Contrastes tenus : boutons magenta + texte blanc (light 6.4:1 / dark ≥3.9:1
   pour libellés bold), accent-strong plus foncé/plus clair pour le texte.
   -------------------------------------------------------------------------- */
body.client-mode, body.public-form {
  --accent: #a1289a;
  --accent-strong: #7d2478;
  --accent-soft: #f7ebf6;
  --accent-contrast: #ffffff;
  --tenant-accent: #a1289a;
  --tenant-accent-soft: #f7ebf6;
}
[data-theme='dark'] body.client-mode,
[data-theme='dark'] body.public-form {
  --accent: #c74fbf;
  --accent-strong: #e59ede;
  --accent-soft: #2a1228;
  --accent-contrast: #ffffff;
  --tenant-accent: #c74fbf;
  --tenant-accent-soft: #2a1228;
}

/* Titres « marqués » Fun Galaxy sur le parcours client (majuscules + poids). */
body.client-mode #clientView .hero-title h1 {
  text-transform: uppercase;
  font-weight: 800;
  letter-spacing: 0.005em;
  font-size: clamp(28px, 5.4vw, 38px);
}
body.client-mode #clientView .hero-kicker {
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-weight: 600;
}
/* Titres de sections (Date et joueurs, Que souhaitez-vous faire ?, …) marqués. */
body.client-mode #clientView .card-title {
  text-transform: uppercase;
  font-weight: 800;
  letter-spacing: 0.02em;
}
/* Icônes de cartes teintées marque Fun Galaxy. */
body.client-mode #clientView .card-icon,
body.client-mode #clientView .card-icon.teal {
  background: var(--accent-soft);
  color: var(--accent);
}
/* CTA principal Fun Galaxy : pill magenta + halo (remplace l'inversion noir/blanc). */
body.client-mode #clientView .btn-primary {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-contrast);
  border-radius: var(--radius-full);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-weight: 700;
  box-shadow: 0 8px 28px color-mix(in srgb, var(--accent) 38%, transparent);
}
body.client-mode #clientView .btn-primary:hover {
  opacity: 1;
  filter: brightness(1.06);
  box-shadow: 0 10px 32px color-mix(in srgb, var(--accent) 48%, transparent);
}

/* Écran de confirmation Fun Galaxy : badge magenta halo + titre marqué, plus pro. */
body.client-mode #clientView .success-wrap {
  padding: var(--space-10) var(--space-6) var(--space-8);
  gap: var(--space-4);
}
body.client-mode #clientView .success-icon {
  width: 76px;
  height: 76px;
  background: var(--accent);
  color: var(--accent-contrast);
  box-shadow: 0 0 0 8px var(--accent-soft), 0 12px 34px color-mix(in srgb, var(--accent) 45%, transparent);
}
body.client-mode #clientView .success-wrap h2 {
  text-transform: uppercase;
  font-size: clamp(32px, 6.4vw, 46px);
  font-weight: 800;
  letter-spacing: 0.015em;
  line-height: 1.05;
  color: transparent;
  -webkit-text-stroke: 1.8px var(--text);
  margin-top: var(--space-1);
}
body.client-mode #clientView .success-wrap .sub { font-size: 16px; }
body.client-mode #clientView .success-wrap .btn-secondary {
  border-radius: var(--radius-full);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-weight: 700;
  border-color: color-mix(in srgb, var(--accent) 50%, var(--line-strong));
}
body.client-mode #clientView .success-wrap .btn-secondary:hover {
  border-color: var(--accent);
  color: var(--accent-strong);
}

/* ============================================================================
   2. PARCOURS CLIENT : index.html #clientView
   ========================================================================== */
#clientView {
  padding: var(--space-8) var(--space-4) var(--space-10);
}

#clientView .client-wrap {
  width: min(760px, 100%);
  margin: 0 auto;
}

/* --- Hero -------------------------------------------------------------- */
#clientView .hero-title {
  text-align: center;
  margin-bottom: var(--space-8);
}

#clientView .hero-kicker {
  font-size: 13px;
  font-weight: 500;
  color: var(--accent-strong);
  margin-bottom: var(--space-2);
}

#clientView .hero-title h1 {
  font-size: clamp(26px, 5vw, 32px);
  letter-spacing: -0.02em;
}

#clientView .hero-title h1 .accent {
  color: var(--accent);
}

#clientView .hero-title p {
  margin: var(--space-3) auto 0;
  max-width: 540px;
  font-size: 15px;
  color: var(--muted);
}

/* --- Stepper d'étapes : numéro + libellé, active = accent --------------- */
#clientView .progress {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-bottom: var(--space-6);
}

#clientView .progress-step {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: 32px;
  padding: 0 var(--space-2);
}

#clientView .progress-index {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  flex: none;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-full);
  background: var(--surface);
  color: var(--muted);
  font-family: var(--font-data);
  font-variant-numeric: tabular-nums;
  font-size: 12px;
  font-weight: 500;
  transition: background-color var(--dur) var(--ease), border-color var(--dur) var(--ease), color var(--dur) var(--ease);
}

#clientView .progress-label {
  font-size: 12px;
  font-weight: 500;
  color: var(--muted);
}

#clientView .progress-step.active .progress-index {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-contrast);
}

#clientView .progress-step.active .progress-label {
  color: var(--text);
}

#clientView .progress-step.done .progress-index {
  background: var(--accent-soft);
  border-color: var(--accent-soft);
  color: var(--accent);
}

/* --- Alertes (#alertBox) ------------------------------------------------ */
#clientView .alert {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  padding: 12px 14px;
  margin-bottom: var(--space-4);
  border-radius: var(--radius-md);
  background: var(--danger-soft);
  color: var(--danger);
  font-size: 13px;
  font-weight: 500;
  line-height: 1.45;
}

#clientView .alert svg {
  flex: none;
  margin-top: 1px;
}

#clientView .alert.booking-alternatives {
  display: block;
  background: var(--surface);
  border: 1px solid var(--line-strong);
  color: var(--text);
  font-weight: 400;
}

/* .booking-alt-* : composant partagé défini dans pinlane.css */

/* --- Cartes du parcours (plus d'air que la console) --------------------- */
#clientView .card {
  padding: var(--space-6);
  margin-bottom: var(--space-4);
}

#clientView .card-head {
  display: flex;
  align-items: flex-start;
  gap: var(--space-4);
  margin-bottom: var(--space-5);
}

#clientView .card-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  flex: none;
  border-radius: var(--radius-md);
  background: var(--subtle);
  color: var(--muted);
}

/* L'ancien accent teal du tenant disparaît : même rendu que l'icône de base */
#clientView .card-icon.teal {
  background: var(--subtle);
  color: var(--muted);
}

#clientView .card-title {
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -0.01em;
}

#clientView .card-desc {
  margin-top: 2px;
  font-size: 13px;
  color: var(--muted);
}

/* --- Champs ------------------------------------------------------------- */
#clientView .lbl {
  display: block;
  margin-bottom: 6px;
  font-size: 13px;
  font-weight: 500;
  color: var(--text);
}

/* 16px + 48px : confort mobile-first, évite le zoom iOS */
#clientView .input,
#clientView input[type='date'],
#clientView input[type='number'],
#clientView input[type='tel'],
#clientView input[type='email'],
#clientView input[type='text'] {
  height: 48px;
  font-size: 16px;
}

#clientView .grid-2 {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-4);
}

#clientView .contact-grid {
  row-gap: var(--space-5);
}

/* Erreur au champ (P2-1, DESIGN.md §6) : message 12px --danger injecté par
   setFieldError() sous l'input marqué aria-invalid (bordure via pinlane.css). */
#clientView .field-error-message {
  display: block;
  margin-top: 6px;
}

#clientView .date-input-wrap {
  position: relative;
}

#clientView .date-input-wrap input {
  padding-right: 48px;
}

/* Une seule icône calendrier : l'indicateur natif WebKit est masqué, le champ
   garde notre bouton .date-picker-trigger (cliquable, ouvre le picker). */
#clientView .date-input-wrap input[type='date']::-webkit-calendar-picker-indicator {
  display: none;
  -webkit-appearance: none;
  appearance: none;
}

#clientView .date-picker-trigger {
  position: absolute;
  top: 50%;
  right: 4px;
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease);
}

#clientView .date-picker-trigger:hover {
  background: var(--subtle);
  color: var(--text);
}

/* .schedule-hint : composant partagé défini dans pinlane.css */

/* Etat du jour côté client. Le bloc n'existe dans le DOM que si le serveur a
   rendu un verdict (payload center.day) : sans verdict, rendu historique. */
#clientView .day-status {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  margin-top: var(--space-2);
  padding: 10px 12px;
  border: 1px solid var(--line-strong);
  border-left-width: 3px;
  border-radius: var(--radius-md);
  background: var(--subtle);
  color: var(--muted);
  font-size: 13px;
  line-height: 1.45;
}

#clientView .day-status svg {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  margin-top: 1px;
}

#clientView .day-status-copy {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

/* La couleur forte ne porte que l'icône, la bordure et la pastille : le titre
   reste --text et la phrase --muted, contraste AA garanti en clair comme en
   sombre sans une seule valeur en dur. */
#clientView .day-status-copy strong {
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
}

#clientView .day-status-copy > span {
  font-size: 12.5px;
  color: var(--muted);
}

#clientView .day-status.is-closed {
  background: var(--danger-soft);
  border-color: var(--danger);
  color: var(--danger);
}

#clientView .day-status.is-partial {
  background: var(--warning-soft);
  border-color: var(--warning);
  color: var(--warning);
}

/* Attente du verdict serveur : ni ouvert, ni fermé, et ça se voit. */
#clientView .schedule-hint .sched-checking {
  color: var(--muted);
}

#clientView .pax-alert {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  margin-top: var(--space-2);
  padding: 10px 12px;
  border-radius: var(--radius-md);
  background: var(--info-soft);
  color: var(--info-strong);
  font-size: 13px;
  line-height: 1.45;
}

#clientView .pax-alert.warning {
  background: var(--warning-soft);
  color: var(--warning);
}

/* Stepper joueurs : sur desktop, champ simple (boutons masqués = rendu
   historique préservé). Les boutons +/- n'apparaissent qu'en mobile. */
#clientView .pax-stepper {
  display: grid;
  grid-template-columns: 1fr;
}

#clientView .pax-step-btn {
  display: none;
}

/* Conteneur du CTA principal d'étape : transparent sur desktop (le bouton
   garde son rendu pleine largeur habituel), transformé en barre sticky en
   mobile : voir la media query. */
#clientView .step-cta-bar {
  margin-top: var(--space-4);
}

/* --- Segmented type d'activité : sélection = accent --------------------- */
#clientView .segmented {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-2);
}

#clientView .seg-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0 var(--space-3);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--text);
  font-family: var(--font-ui);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: background-color var(--dur) var(--ease), border-color var(--dur) var(--ease), color var(--dur) var(--ease);
}

#clientView .seg-btn:hover {
  background: var(--subtle);
}

#clientView .seg-btn.active {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-contrast);
}

/* Activité fermée ce jour : le bouton est éteint ET porte le mot "Fermé".
   Jamais l'un sans l'autre - un gris seul se lit comme un style, pas comme
   une information. */
#clientView .seg-btn.is-off {
  background: var(--subtle);
  border-color: var(--line);
  color: var(--faint);
  cursor: not-allowed;
}

#clientView .seg-btn.is-off:hover {
  background: var(--subtle);
}

#clientView .seg-btn-off {
  margin-left: var(--space-2);
  padding: 1px 8px;
  border-radius: var(--radius-full);
  background: var(--danger-soft);
  color: var(--danger);
  font-size: 11px;
  font-weight: 600;
}

#clientView .seg-btn-off[hidden] {
  display: none;
}

#clientView #typeAlert:empty {
  display: none;
}

/* --- Durées bowling / options laser ------------------------------------- */
#clientView .grid-4 {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-2);
}

#clientView .grid-3 {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-2);
}

#clientView .dur-pill {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 3px;
  min-height: 60px;
  padding: 10px 14px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-md);
  background: var(--surface);
  color: var(--text);
  font-family: var(--font-ui);
  font-size: 14px;
  font-weight: 500;
  text-align: left;
  cursor: pointer;
  transition: background-color var(--dur) var(--ease), border-color var(--dur) var(--ease), color var(--dur) var(--ease);
}

#clientView .dur-pill:hover {
  background: var(--subtle);
}

#clientView .dur-pill .price {
  font-family: var(--font-data);
  font-variant-numeric: tabular-nums;
  font-size: 13px;
  font-weight: 400;
  color: var(--muted);
}

#clientView .dur-pill small {
  font-size: 12px;
  font-weight: 400;
  color: var(--muted);
}

#clientView .dur-pill.active {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-contrast);
}

#clientView .dur-pill.active .price,
#clientView .dur-pill.active small {
  color: var(--accent-contrast);
  opacity: 0.85;
}

#clientView .laser-note {
  margin-top: var(--space-3);
  font-size: 12px;
  color: var(--muted);
}

/* --- Choix de la formule : liste compacte groupée par famille ------------ */
/* Une seule colonne scannable : nom + contenu + prix sur une ligne, mentions
   communes factorisées dans l'en-tête de famille (pas de redite par carte). */
#clientView .formule-grid {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

#clientView .formule-group-head h3 {
  margin: 0;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--text);
}

#clientView .formule-group-notes {
  margin: 4px 0 0;
  font-size: 12px;
  color: var(--muted);
}

#clientView .formule-group-info {
  margin: 4px 0 0;
  font-size: 12px;
  font-weight: 500;
  color: var(--success);
}

#clientView .formule-group-alert {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  margin-top: var(--space-3);
  padding: var(--space-3);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-md);
  background: var(--subtle);
  color: var(--warning);
  font-size: 12.5px;
  line-height: 1.5;
}

#clientView .formule-group-alert svg {
  flex-shrink: 0;
  margin-top: 2px;
}

/* Grille de formules : 3 colonnes desktop (demande patron : rangées de 3, pas
   2 colonnes qui s'étirent). align-items: stretch => hauteurs de cartes égales
   par rangée. Responsive 3 -> 2 -> 1 (bornes plus bas). */
#clientView .formule-cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-3);
  margin-top: var(--space-3);
  align-items: stretch;
}

/* Écran intermédiaire (tablette / petit laptop) : 2 colonnes. Borne basse à
   641px pour laisser le bloc mobile (<=640px, 1 colonne) faire foi en dessous. */
@media (min-width: 641px) and (max-width: 820px) {
  #clientView .formule-cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

#clientView .formule-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  width: 100%;
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-lg);
  background: var(--surface);
  color: var(--text);
  font-family: var(--font-ui);
  font-size: 13px;
  text-align: left;
  cursor: pointer;
  transition: background-color var(--dur) var(--ease), border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}

#clientView .formule-card:hover {
  background: var(--subtle);
}

#clientView .formule-card.active {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}

/* Une carte indisponible reste PARFAITEMENT LISIBLE et pourtant évidemment
   inerte. L'opacité globale est interdite ici : elle effaçait justement la
   raison qui explique pourquoi la carte est morte. */
#clientView .formule-card.disabled {
  background: var(--subtle);
  border-color: var(--line-strong);
  border-style: dashed;
  color: var(--faint);
  cursor: not-allowed;
}

#clientView .formule-card.disabled:hover {
  background: var(--subtle);
}

#clientView .formule-card.disabled .formule-name,
#clientView .formule-card.disabled .formule-card-price strong,
#clientView .formule-card.disabled .formule-card-price small,
#clientView .formule-card.disabled .formule-card-list,
#clientView .formule-card.disabled .formule-card-meta {
  color: var(--faint);
}

#clientView .formule-card.disabled .formule-card-list li::before {
  background: var(--line-strong);
}

#clientView .formule-card.disabled .badge-best {
  background: var(--subtle);
  border: 1px solid var(--line-strong);
  color: var(--faint);
}

#clientView .formule-card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-3);
}

#clientView .formule-card-title {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
  min-width: 0;
}

#clientView .formule-name {
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -0.01em;
}

#clientView .badge-best {
  padding: 1px 8px;
  border-radius: var(--radius-full);
  background: var(--accent);
  color: var(--accent-contrast);
  font-size: 10.5px;
  font-weight: 500;
  line-height: 1.6;
}

#clientView .formule-card-price {
  display: flex;
  align-items: baseline;
  gap: 6px;
  flex-shrink: 0;
  font-family: var(--font-data);
  font-variant-numeric: tabular-nums;
}

#clientView .formule-card-price s {
  color: var(--faint);
  font-size: 11.5px;
}

#clientView .formule-card-price strong {
  font-size: 18px;
  font-weight: 600;
}

#clientView .formule-card-price small {
  color: var(--muted);
  font-size: 10.5px;
}

#clientView .formule-card-list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 3px;
  color: var(--muted);
  font-size: 12.5px;
  line-height: 1.45;
}

#clientView .formule-card-list li {
  position: relative;
  padding-left: 14px;
}

#clientView .formule-card-list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 5px;
  height: 5px;
  border-radius: var(--radius-full);
  background: var(--line-strong);
}

#clientView .formule-card-meta {
  color: var(--faint);
  font-size: 11.5px;
}

/* Barre de raison collée en bas : même hauteur d'une carte à l'autre.
   .formule-card est déjà display:flex / column, margin-top:auto suffit. */
#clientView .formule-card-status {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: auto;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--success);
}

#clientView .formule-card-status svg {
  flex: 0 0 auto;
}

#clientView .formule-card-status.warn {
  padding: 6px 8px;
  border-radius: var(--radius-sm);
  background: var(--warning-soft);
  color: var(--warning);
}

#clientView .formule-card-check {
  position: absolute;
  top: -8px;
  right: -8px;
  display: none;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: var(--radius-full);
  background: var(--accent);
  color: var(--accent-contrast);
  box-shadow: 0 0 0 2px var(--surface);
}

#clientView .formule-card.active .formule-card-check {
  display: inline-grid;
}

/* --- Préférences formule (mode auto / manuel, ordre) --------------------- */
#clientView .formula-preferences {
  margin-top: var(--space-5);
  padding-top: var(--space-5);
  border-top: 1px solid var(--line);
}

#clientView .formula-pref-head {
  margin-bottom: var(--space-3);
}

#clientView .formula-pref-note {
  margin-top: 2px;
  font-size: 12px;
  color: var(--muted);
}

#clientView .preference-grid {
  display: grid;
  gap: var(--space-3);
}

/* --- Info box + actions d'étape ------------------------------------------ */
/* .info-box : composant partagé défini dans pinlane.css */

#clientView .step-actions {
  display: flex;
  gap: var(--space-3);
  margin-top: var(--space-6);
}

/* --- CTA : convention unique = .btn-primary (inversion) ------------------ */
#clientView .btn-primary,
#clientView .btn-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  height: 48px;
  padding: 0 var(--space-5);
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  font-family: var(--font-ui);
  font-size: 15px;
  font-weight: 500;
  line-height: 1;
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
  transition: background-color var(--dur) var(--ease), border-color var(--dur) var(--ease), color var(--dur) var(--ease), opacity var(--dur) var(--ease);
}

#clientView .btn-primary {
  width: 100%;
  background: var(--text);
  border-color: var(--text);
  color: var(--surface);
}

#clientView .btn-primary:hover {
  opacity: 0.88;
}

#clientView .btn-primary:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

#clientView .btn-secondary {
  background: var(--surface);
  border-color: var(--line-strong);
  color: var(--text);
}

#clientView .btn-secondary:hover {
  background: var(--subtle);
}

#clientView .btn-secondary:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

#clientView .step > .btn-secondary {
  margin-top: var(--space-4);
}

/* --- Grille de créneaux : cellule surface, sélection = accent ------------ */
#clientView .slot-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: var(--space-2);
  margin-top: var(--space-4);
}

#clientView .slot-grid.formula-plan-grid {
  grid-template-columns: 1fr;
}

#clientView .slot {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 3px;
  min-height: 56px;
  padding: 10px 12px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-md);
  background: var(--surface);
  color: var(--text);
  font-family: var(--font-ui);
  text-align: left;
  cursor: pointer;
  transition: background-color var(--dur) var(--ease), border-color var(--dur) var(--ease), color var(--dur) var(--ease);
}

#clientView .slot:hover {
  background: var(--subtle);
}

#clientView .slot.active {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-contrast);
}

#clientView .slot.active .slot-time,
#clientView .slot.active .slot-free,
#clientView .slot.active .slot-plan {
  color: var(--accent-contrast);
}

#clientView .slot-time {
  font-family: var(--font-data);
  font-variant-numeric: tabular-nums;
  font-size: 15px;
  font-weight: 600;
}

#clientView .slot-free {
  font-size: 11px;
  color: var(--muted);
}

#clientView .slot-plan {
  display: block;
  margin-top: 4px;
  font-size: 12px;
  color: var(--muted);
  line-height: 1.45;
}

#clientView .slot-plan b {
  color: var(--text);
  font-weight: 600;
}

#clientView .slot.formula-slot {
  padding: var(--space-4);
}

/* --- États créneaux : chargement (spinner + squelette) et vide ------------ */
#clientView .slot-state {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  margin-top: var(--space-4);
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--subtle);
  color: var(--muted);
  font-size: 13px;
  line-height: 1.5;
}

#clientView .slot-state-loading {
  align-items: center;
}

#clientView .slot-state-empty strong {
  display: block;
  color: var(--text);
  font-size: 13px;
  font-weight: 600;
}

#clientView .slot-state-empty span {
  font-size: 12.5px;
}

#clientView .slot-state-empty svg {
  flex-shrink: 0;
  margin-top: 2px;
  color: var(--faint);
}

/* État panne serveur : distinct de l'état vide (P3-9), signal danger +
   action « Réessayer » (le vide suggère seulement de changer de date). */
#clientView .slot-state-error {
  border-color: var(--danger);
  background: var(--danger-soft);
  color: var(--text);
}

#clientView .slot-state-error svg {
  flex-shrink: 0;
  margin-top: 2px;
  color: var(--danger);
}

#clientView .slot-state-error strong {
  display: block;
  color: var(--danger);
  font-size: 13px;
  font-weight: 600;
}

#clientView .slot-state-error span {
  display: block;
  font-size: 12.5px;
  color: var(--text);
}

#clientView .slot-retry-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: var(--space-3);
  min-height: 44px;
  padding: 0 var(--space-4);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--text);
  font-family: var(--font-ui);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: background-color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}

#clientView .slot-retry-btn:hover {
  background: var(--subtle);
}

#clientView .slot-spinner {
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  border: 2px solid var(--line-strong);
  border-top-color: var(--accent);
  border-radius: var(--radius-full);
  animation: slot-spinner-rotate 0.8s linear infinite;
}

@keyframes slot-spinner-rotate {
  to { transform: rotate(360deg); }
}

#clientView .slot-skeleton {
  pointer-events: none;
  border-color: var(--line);
}

#clientView .slot-skeleton-line {
  display: block;
  width: 64%;
  height: 12px;
  border-radius: var(--radius-sm);
  background: var(--subtle);
  animation: slot-skeleton-pulse 1.4s ease-in-out infinite;
}

#clientView .slot-skeleton-line.short {
  width: 40%;
  height: 9px;
}

@keyframes slot-skeleton-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.45; }
}

@media (prefers-reduced-motion: reduce) {
  #clientView .slot-spinner {
    animation: none;
  }

  #clientView .slot-skeleton-line {
    animation: none;
  }
}

/* Itinéraire d'un programme formule dans une carte créneau */
#clientView .formula-route {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
}

#clientView .formula-route-item {
  display: inline-flex;
  flex-direction: column;
}

#clientView .formula-route-item small {
  font-size: 11px;
  color: var(--muted);
}

#clientView .formula-route-item strong {
  font-family: var(--font-data);
  font-variant-numeric: tabular-nums;
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
}

#clientView .formula-route-arrow {
  color: var(--faint);
}

#clientView .formula-plan-meta {
  display: block;
  margin-top: 4px;
  font-size: 12px;
  color: var(--muted);
}

#clientView .formula-commitment {
  display: grid;
  gap: 2px;
  margin-top: 6px;
  font-size: 12px;
  color: var(--muted);
}

#clientView .formula-commitment-row b {
  color: var(--text);
  font-weight: 600;
}

#clientView .formula-customer-note {
  font-size: 12px;
  color: var(--faint);
}

/* --- Planificateur manuel des horaires de formule ------------------------ */
#clientView .formula-planner {
  display: grid;
  gap: var(--space-4);
  margin-top: var(--space-4);
}

#clientView .formula-planner-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-3);
}

#clientView .formula-planner-head strong {
  display: block;
  font-size: 15px;
  font-weight: 600;
}

#clientView .formula-planner-head span {
  display: block;
  margin-top: 2px;
  font-size: 13px;
  color: var(--muted);
}

#clientView .formula-plan-count {
  flex: none;
  padding: 2px 10px;
  border-radius: var(--radius-full);
  background: var(--accent-soft);
  color: var(--accent-strong);
  font-size: 12px;
  font-weight: 500;
  white-space: nowrap;
}

#clientView .formula-planner-route {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

#clientView .formula-route-step {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  min-width: 120px;
  min-height: 44px;
  padding: 10px 12px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-md);
  background: var(--surface);
  color: var(--text);
  font-family: var(--font-ui);
  text-align: left;
  cursor: pointer;
  transition: background-color var(--dur) var(--ease), border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}

#clientView .formula-route-step:disabled {
  cursor: default;
}

#clientView .formula-route-step > span {
  font-family: var(--font-data);
  font-variant-numeric: tabular-nums;
  font-size: 11px;
  color: var(--muted);
}

#clientView .formula-route-step strong {
  font-size: 13px;
  font-weight: 600;
}

#clientView .formula-route-step small {
  font-size: 12px;
  color: var(--muted);
}

#clientView .formula-route-step.active {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}

#clientView .formula-route-step.done {
  background: var(--accent-soft);
  border-color: var(--accent-soft);
}

#clientView .formula-route-step.done small {
  color: var(--accent-strong);
  font-weight: 500;
}

#clientView .formula-route-step.done.soft small {
  color: var(--muted);
  font-weight: 400;
}

#clientView .formula-order-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 36px;
  padding: 0 12px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--text);
  font-family: var(--font-ui);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: background-color var(--dur) var(--ease);
}

#clientView .formula-order-btn:hover {
  background: var(--subtle);
}

#clientView .formula-plan-summary {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  padding: var(--space-4);
  border-radius: var(--radius-md);
  background: var(--subtle);
}

#clientView .formula-plan-summary > span {
  display: inline-flex;
  flex-direction: column;
}

#clientView .formula-plan-summary b {
  font-size: 13px;
  font-weight: 600;
}

#clientView .formula-plan-summary small {
  font-family: var(--font-data);
  font-variant-numeric: tabular-nums;
  font-size: 12px;
  color: var(--muted);
}

#clientView .formula-time-choice-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: var(--space-2);
}

#clientView .formula-time-choice {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 3px;
  min-height: 56px;
  padding: 10px 12px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-md);
  background: var(--surface);
  color: var(--text);
  font-family: var(--font-ui);
  text-align: left;
  cursor: pointer;
  transition: background-color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}

#clientView .formula-time-choice:hover {
  background: var(--subtle);
}

#clientView .formula-time-choice strong {
  font-family: var(--font-data);
  font-variant-numeric: tabular-nums;
  font-size: 15px;
  font-weight: 600;
}

#clientView .formula-time-choice small {
  font-size: 12px;
  color: var(--muted);
}

#clientView .formula-time-empty {
  padding: var(--space-5);
  border: 1px dashed var(--line-strong);
  border-radius: var(--radius-md);
  text-align: center;
  font-size: 13px;
  color: var(--muted);
}

/* --- Texte responsive : version longue (desktop) / courte (mobile) --------
   Permet de raccourcir certaines descriptions UNIQUEMENT sur mobile sans
   toucher au contenu desktop. Par défaut le desktop affiche la version longue
   et masque la version mobile ; la media query mobile inverse. */
#clientView .only-mobile { display: none; }

/* --- Récapitulatif -------------------------------------------------------- */
#clientView .recap-item {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-4);
  padding: 12px 0;
  border-bottom: 1px solid var(--line);
  font-size: 14px;
}

#clientView .recap-label {
  color: var(--muted);
}

#clientView .recap-value {
  font-weight: 500;
  text-align: right;
}

#clientView .recap-value.accent {
  font-family: var(--font-data);
  font-variant-numeric: tabular-nums;
  color: var(--accent);
}

/* Ancien teal tenant : neutralisé, les pistes restent des données mono */
#clientView .recap-value.teal {
  font-family: var(--font-data);
  font-variant-numeric: tabular-nums;
  color: var(--text);
}

#clientView .recap-note {
  margin-top: var(--space-3);
  padding: 12px 14px;
  border-radius: var(--radius-md);
  background: var(--subtle);
  font-size: 13px;
  color: var(--muted);
  line-height: 1.5;
}

#clientView .recap-note b {
  color: var(--text);
}

#clientView .total-box {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  margin-top: var(--space-4);
  padding: var(--space-4);
  border-radius: var(--radius-md);
  background: var(--subtle);
}

#clientView .total-amount {
  font-family: var(--font-data);
  font-variant-numeric: tabular-nums;
  font-size: 24px;
  font-weight: 600;
  letter-spacing: -0.02em;
}

/* --- Confirmation --------------------------------------------------------- */
#clientView .success-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
  max-width: 520px;
  margin: var(--space-8) auto 0;
  padding: var(--space-10) var(--space-6);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--surface);
  text-align: center;
}

#clientView .success-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  border-radius: var(--radius-full);
  background: var(--success-soft);
  color: var(--success);
}

#clientView .success-wrap h2 {
  font-size: 24px;
}

#clientView .success-wrap .sub {
  font-size: 15px;
  color: var(--muted);
}

#clientView .success-wrap .sub b {
  color: var(--text);
}

#clientView .confetti-hint {
  width: 100%;
  margin-top: var(--space-2);
  padding: var(--space-4);
  border-radius: var(--radius-md);
  background: var(--subtle);
  text-align: left;
}

#clientView .confetti-hint strong {
  font-size: 14px;
  font-weight: 600;
}

#clientView .confetti-hint p {
  margin-top: 6px;
  font-size: 13px;
  color: var(--muted);
  line-height: 1.5;
}

#clientView .confetti-hint b {
  color: var(--text);
}

/* --- Micro-motion : fade discret, une fois par rendu ---------------------- */
@keyframes pl-client-enter {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

/* .scale-in / .shake : composants partagés définis dans pinlane.css */
#clientView .slide-up,
#clientView .slide-right {
  animation: pl-client-enter var(--dur-slow) var(--ease) both;
}

/* --- Mobile first : le parcours se fait au téléphone ---------------------- */
@media (max-width: 640px) {
  #clientView {
    padding: var(--space-5) var(--space-3) var(--space-8);
  }

  #clientView .card {
    padding: var(--space-4);
  }

  #clientView .grid-2,
  #clientView .contact-grid,
  #clientView .segmented,
  #clientView .grid-3 {
    grid-template-columns: 1fr;
  }

  /* Ligne formule : le prix reste lisible, le check passe en haut */
  #clientView .formule-row {
    align-items: flex-start;
  }

  #clientView .formule-row-check {
    margin-top: 2px;
  }

  #clientView .grid-4 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  #clientView .slot-grid {
    grid-template-columns: repeat(auto-fill, minmax(104px, 1fr));
  }

  /* 5 étapes sur petit écran : seul le libellé actif reste visible */
  #clientView .progress {
    gap: 2px;
  }

  #clientView .progress-step {
    padding: 0 4px;
  }

  #clientView .progress-step:not(.active) .progress-label {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }

  #clientView .step-actions {
    flex-direction: column-reverse;
  }

  #clientView .step-actions .btn-secondary {
    width: 100%;
  }

  /* Cible tactile ≥44px pour l'ouverture du calendrier */
  #clientView .date-picker-trigger {
    width: 44px;
    height: 44px;
  }

  #clientView .date-input-wrap input {
    padding-right: 52px;
  }

  /* --- Anti-débordement iOS des contrôles natifs date/number -------------
     BUG mobile : à l'étape 1, la carte « Date et joueurs » et le champ Date
     débordaient à droite hors de l'écran sur iPhone réel. Cause racine : sur
     iOS Safari, <input type="date"> et <input type="number"> sont des WIDGETS
     NATIFS dotés d'une largeur intrinsèque (min-width UA) que `width:100%` ne
     réduit pas. Dans la grille mobile 1 colonne, cette largeur intrinsèque
     dépasse la colonne → l'input pousse sa cellule .grid-2, la .date-input-wrap
     et la .card au-delà du viewport. Invisible sous Chromium / WebKit desktop
     (qui rendent ces champs en simple champ texte, d'où « 0 débordement » dans
     les audits automatisés). On neutralise la largeur intrinsèque : les enfants
     de grille/stepper peuvent rétrécir (min-width:0), les champs sont bornés au
     conteneur (max-width:100%) et rendus non-natifs (appearance:none). Desktop
     (≥641px) hors média-query : rendu natif intact. */
  #clientView .grid-2 > *,
  #clientView .contact-grid > *,
  #clientView .pax-stepper > *,
  #clientView .date-input-wrap {
    min-width: 0;
  }

  #clientView .input,
  #clientView input[type='date'],
  #clientView input[type='number'],
  #clientView input[type='tel'],
  #clientView input[type='email'],
  #clientView input[type='text'] {
    min-width: 0;
    max-width: 100%;
    -webkit-appearance: none;
    appearance: none;
  }

  /* Garde-fou : même si un widget natif tentait d'imposer sa largeur, il est
     borné visuellement au champ (le contenu « 2026-07-09 » y tient largement). */
  #clientView .date-input-wrap {
    overflow: hidden;
  }

  /* --- Stepper joueurs tactile : − [champ] + ------------------------------ */
  #clientView .pax-stepper {
    grid-template-columns: 48px minmax(0, 1fr) 48px;
    gap: var(--space-2);
    align-items: stretch;
  }

  #clientView .pax-stepper .input {
    text-align: center;
  }

  #clientView .pax-step-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border: 1px solid var(--line-strong);
    border-radius: var(--radius-sm);
    background: var(--surface);
    color: var(--text);
    cursor: pointer;
    transition: background-color var(--dur) var(--ease), border-color var(--dur) var(--ease);
  }

  #clientView .pax-step-btn:hover {
    background: var(--subtle);
  }

  #clientView .pax-step-btn:active {
    background: var(--accent-soft);
  }

  /* --- FORMULES MOBILE : 1 colonne pleine largeur, CONTENU COMPLET visible -
     Objectif patron : voir d'un coup d'œil TOUT ce que contient chaque formule
     sans avoir à taper. Le tap ne sert plus qu'à SÉLECTIONNER. Une colonne pleine
     largeur laisse respirer nom + prix + la liste complète des inclusions.
     (Desktop ≥769px conserve sa grille multi-colonnes intacte.) */
  #clientView .formule-cards {
    grid-template-columns: 1fr;
    gap: var(--space-3);
    margin-top: var(--space-3);
  }

  #clientView .formule-card {
    padding: var(--space-4);
    gap: var(--space-2);
    border-radius: var(--radius-lg);
  }

  /* En-tête en ligne : nom + Best deal à gauche, prix (barré + actuel + /pers) à
     droite : comme une carte tarif d'app mobile. */
  #clientView .formule-card-head {
    flex-direction: row;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-3);
  }

  #clientView .formule-name {
    font-size: 15px;
  }

  #clientView .formule-card-price strong {
    font-size: 18px;
  }

  /* La liste complète des inclusions reste TOUJOURS visible (aucun masquage),
     sélectionnée ou non : c'est le cœur de la demande. */
  #clientView .formule-card-list {
    font-size: 13px;
    gap: 4px;
  }

  /* --- BLOCS label|texte EMPILÉS pleine largeur --------------------------
     Sur mobile, aucun bloc « pilule à gauche | texte écrasé à droite ». Le
     libellé passe au-dessus, le texte coule normalement sur toute la largeur.
     Concerne : le récap « Vos rendez-vous / Arrivée / Table / À votre rythme »
     (visit-line), le récapitulatif final (recap-item) et l'en-tête du pass
     liberté (anchor-free-head). Desktop conserve la disposition en ligne. */
  #clientView .visit-line {
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
  }

  #clientView .visit-line > span:not(.visit-tag),
  #clientView .visit-line > strong {
    width: 100%;
  }

  #clientView .recap-item {
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
  }

  #clientView .recap-value {
    width: 100%;
    text-align: left;
  }

  /* Sélecteur plus spécifique (.anchor-free-pass parent) pour battre la règle de
     base align-items:center définie plus bas dans le fichier, sinon le badge et
     le texte restent centrés sur des x différents (colonne non détectée). */
  #clientView .anchor-free-pass .anchor-free-head {
    flex-direction: column;
    align-items: flex-start;
  }

  /* Texte responsive : sur mobile on montre la version courte, on masque la longue. */
  #clientView .only-desktop { display: none; }
  #clientView .only-mobile { display: inline; }

  /* --- CTA principal STICKY (pouce + safe-area iOS) ----------------------- */
  /* Barre pleine largeur ancrée en bas de l'écran : le CTA reste atteignable
     même au milieu d'une longue liste de formules. Le conteneur porte le fond
     dégradé + la safe-area, le bouton garde son style d'origine. */
  #clientView .step-cta-bar,
  #clientView #step3 .step-actions,
  #clientView #step4 .step-actions {
    position: sticky;
    bottom: 0;
    z-index: 20;
    margin-top: var(--space-4);
    margin-left: calc(-1 * var(--space-3));
    margin-right: calc(-1 * var(--space-3));
    padding: var(--space-3) var(--space-3) calc(var(--space-3) + env(safe-area-inset-bottom, 0px));
    background: linear-gradient(to top, var(--page) 68%, rgba(0, 0, 0, 0));
  }

  #clientView #step3 .step-actions,
  #clientView #step4 .step-actions {
    gap: var(--space-2);
  }

  /* Boutons d'action d'étape : en colonne, le CTA doit garder sa pleine
     hauteur (neutralise le flex:1 inline hérité du layout desktop en ligne,
     qui écrase le bouton en colonne). */
  #clientView .step-actions .btn-primary {
    flex: none !important;
    width: 100%;
  }
}

/* ============================================================================
   3. PUBLIC FORM : public-form.html (body.public-form)
   ========================================================================== */
body.public-form {
  font-size: 15px;
}

.public-form .shell {
  width: min(980px, calc(100% - 32px));
  margin: var(--space-10) auto;
}

.public-form .hero {
  display: grid;
  gap: var(--space-3);
  margin-bottom: var(--space-8);
}

.public-form .eyebrow {
  display: inline-flex;
  width: fit-content;
  padding: 2px 10px;
  border-radius: var(--radius-full);
  background: var(--accent-soft);
  color: var(--accent-strong);
  font-size: 12px;
  font-weight: 500;
  line-height: 1.6;
}

.public-form h1 {
  font-size: clamp(24px, 4vw, 32px);
  letter-spacing: -0.02em;
}

.public-form .subtitle {
  max-width: 640px;
  font-size: 15px;
  color: var(--muted);
}

.public-form .grid {
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
  gap: var(--space-6);
  align-items: start;
}

.public-form .panel {
  padding: var(--space-6);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--surface);
}

.public-form .panel h2 {
  margin: 0 0 var(--space-4);
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.public-form .section {
  display: grid;
  gap: var(--space-4);
  margin-bottom: var(--space-6);
}

.public-form .section:last-child {
  margin-bottom: 0;
}

.public-form .row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-4);
}

.public-form label {
  display: grid;
  gap: 6px;
  font-size: 13px;
  font-weight: 500;
  color: var(--text);
}

/* Confort mobile : 16px, pas de zoom iOS */
.public-form input,
.public-form select {
  height: 48px;
  font-size: 16px;
}

.public-form textarea {
  font-size: 16px;
}

/* Sélecteurs (type, durée, créneau), sélection = accent */
.public-form .segmented {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-2);
}

.public-form .segmented button,
.public-form .duration-list button,
.public-form .slot-list button {
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--text);
  font-family: var(--font-ui);
  cursor: pointer;
  transition: background-color var(--dur) var(--ease), border-color var(--dur) var(--ease), color var(--dur) var(--ease);
}

.public-form .segmented button:hover,
.public-form .duration-list button:hover,
.public-form .slot-list button:hover {
  background: var(--subtle);
}

.public-form .segmented button.active,
.public-form .duration-list button.active,
.public-form .slot-list button.active {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-contrast);
}

.public-form .segmented button {
  min-height: 44px;
  padding: 0 var(--space-3);
  font-size: 14px;
  font-weight: 500;
}

.public-form .duration-list,
.public-form .slot-list,
.public-form .formula-list {
  display: grid;
  gap: var(--space-2);
}

.public-form .duration-list {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.public-form .duration-list button {
  display: grid;
  gap: 3px;
  min-height: 56px;
  padding: 12px 14px;
  border-radius: var(--radius-md);
  font-size: 14px;
  text-align: left;
}

.public-form .duration-list strong {
  font-weight: 600;
}

.public-form .duration-list .price {
  font-family: var(--font-data);
  font-variant-numeric: tabular-nums;
  font-size: 13px;
  color: var(--muted);
}

.public-form .duration-list button.active .price {
  color: var(--accent-contrast);
  opacity: 0.85;
}

.public-form .slot-list {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.public-form .slot-list button {
  display: grid;
  gap: 3px;
  min-height: 56px;
  padding: 10px 12px;
  border-radius: var(--radius-md);
  text-align: left;
}

.public-form .slot-list strong {
  font-family: var(--font-data);
  font-variant-numeric: tabular-nums;
  font-size: 15px;
  font-weight: 600;
}

.public-form .slot-meta {
  font-size: 12px;
  color: var(--muted);
}

.public-form .slot-list button.active .slot-meta {
  color: var(--accent-contrast);
  opacity: 0.85;
}

/* Cartes formules : sélection = bordure accent + ring */
.public-form .formula-card {
  display: grid;
  gap: 6px;
  padding: var(--space-4);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-lg);
  background: var(--surface);
  color: var(--text);
  font-family: var(--font-ui);
  text-align: left;
  cursor: pointer;
  transition: background-color var(--dur) var(--ease), border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}

.public-form .formula-card:hover {
  background: var(--subtle);
}

.public-form .formula-card.active {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
  background: var(--surface);
}

.public-form .formula-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  font-size: 15px;
  font-weight: 600;
}

.public-form .formula-price {
  font-family: var(--font-data);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  font-weight: 600;
}

.public-form .formula-meta {
  font-size: 13px;
  color: var(--muted);
  line-height: 1.5;
}

.public-form .pill {
  display: inline-flex;
  width: fit-content;
  padding: 2px 10px;
  border-radius: var(--radius-full);
  background: var(--subtle);
  color: var(--muted);
  font-size: 12px;
  font-weight: 500;
  line-height: 1.6;
}

.public-form .notice {
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--surface);
  color: var(--muted);
  font-size: 13px;
  line-height: 1.5;
}

.public-form .notice.warn {
  border-color: var(--danger-soft);
  background: var(--danger-soft);
  color: var(--danger);
}

.public-form .empty {
  padding: var(--space-5);
  border: 1px dashed var(--line-strong);
  border-radius: var(--radius-md);
  text-align: center;
  font-size: 13px;
  color: var(--muted);
}

/* Résumé + CTA */
.public-form .summary {
  display: grid;
  gap: var(--space-3);
  position: sticky;
  top: var(--space-6);
}

.public-form .summary-card {
  padding: var(--space-6);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--surface);
}

.public-form .summary-total {
  margin: var(--space-1) 0 var(--space-4);
  font-family: var(--font-data);
  font-variant-numeric: tabular-nums;
  font-size: 32px;
  font-weight: 600;
  letter-spacing: -0.02em;
}

.public-form .summary-list {
  display: grid;
  gap: var(--space-2);
}

.public-form .summary-item {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-4);
  padding-bottom: var(--space-2);
  border-bottom: 1px solid var(--line);
  color: var(--muted);
  font-size: 14px;
}

.public-form .summary-item:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}

.public-form .summary-item strong {
  color: var(--text);
  font-weight: 500;
  text-align: right;
}

/* CTA principal : convention .btn-primary (inversion) */
.public-form .cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 48px;
  padding: 0 var(--space-5);
  border: 1px solid var(--text);
  border-radius: var(--radius-sm);
  background: var(--text);
  color: var(--surface);
  font-family: var(--font-ui);
  font-size: 15px;
  font-weight: 500;
  cursor: pointer;
  transition: opacity var(--dur) var(--ease);
}

.public-form .cta:hover {
  opacity: 0.88;
}

.public-form .cta[disabled] {
  opacity: 0.5;
  cursor: not-allowed;
}

/* display:none par défaut, le JS passe en block après envoi */
.public-form .success {
  display: none;
  padding: var(--space-4);
  border-radius: var(--radius-md);
  background: var(--success-soft);
  color: var(--success);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.5;
}

.public-form .tiny {
  font-size: 12px;
  color: var(--muted);
}

@media (max-width: 860px) {
  .public-form .grid {
    grid-template-columns: 1fr;
  }

  .public-form .summary {
    position: static;
  }

  .public-form .slot-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  .public-form .shell {
    width: calc(100% - 24px);
    margin: var(--space-4) auto;
  }

  .public-form .panel,
  .public-form .summary-card {
    padding: var(--space-4);
  }

  .public-form .row,
  .public-form .segmented,
  .public-form .duration-list,
  .public-form .slot-list {
    grid-template-columns: 1fr;
  }
}

/* ============================================================================
   4. DIRECTION : section retiree. direction.html est devenue une simple
      redirection vers la console Direction du SPA (/#admin) : le prototype
      body.direction de l'epoque test n'existe plus, ses styles non plus.
   ========================================================================== */

/* ============================================================================
   5. HEADER CLIENT : shell public de index.html (body.client-mode)
   Logo tenant (SVG inline, seul branding Fun Galaxy conservé), nav externe,
   sélecteur de centre, switch de vue. En staff/admin, le header appartient à
   pinlane-staff.css.
   ========================================================================== */
body.client-mode header {
  display: flex;
  align-items: center;
  gap: var(--space-6);
  max-width: 1120px;
  margin: 0 auto;
  padding: var(--space-3) var(--space-6);
  min-height: 72px;
  border-bottom: 1px solid var(--line);
  background: var(--page);
}

body.client-mode .logo-wrap {
  flex: 0 0 auto;
  cursor: pointer;
  border-radius: var(--radius-sm);
}

/* Le logo tenant officiel (assets/brand/logo-fun-galaxy.svg) est à texte
   blanc : en thème clair on lui garantit un socle sombre, var(--text) vaut
   exactement le noir de référence (#0a0a0a) dans ce thème. Pas de halo. */
[data-theme='light'] body.client-mode .logo-wrap {
  background: var(--text);
  padding: 4px 12px;
}

body.client-mode .logo {
  width: auto;
  height: 48px;
  display: block;
}

body.client-mode #nav {
  display: flex;
  align-items: center;
  gap: var(--space-5);
  margin-left: auto;
}

body.client-mode .nav-link {
  color: var(--muted);
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
  transition: color var(--dur) var(--ease);
}

body.client-mode .nav-link:hover {
  color: var(--text);
  text-decoration: none;
}

/* Groupe d'actions à droite du header (switch de vue). Classe portée par le
   conteneur (ex-style inline) pour piloter le comportement responsive. */
body.client-mode .header-actions {
  display: flex;
  gap: 12px;
  align-items: center;
  margin-left: auto;
}

body.client-mode .view-switch {
  display: inline-flex;
  padding: 3px;
  gap: 2px;
  background: var(--subtle);
  border-radius: var(--radius-md);
}

body.client-mode .view-switch button {
  min-height: 30px;
  padding: 0 12px;
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--muted);
  font-family: var(--font-ui);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}

body.client-mode .view-switch button:hover {
  color: var(--text);
}

body.client-mode .view-switch button.active {
  background: var(--surface);
  color: var(--text);
  box-shadow: var(--shadow-sm), 0 0 0 1px var(--line);
}

/* Boutons flottants hors header (cachés en staff/admin par l'invariant) */
body.client-mode #logoutBtn.site-auth-action {
  position: fixed;
  top: 14px;
  right: var(--space-4);
  z-index: 60;
  height: 32px;
  padding: 0 12px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--text);
  font-family: var(--font-ui);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
}

body.client-mode #logoutBtn.site-auth-action:hover {
  background: var(--subtle);
}

/* Entrée staff (P3-7) : plus de bouton flottant au-dessus du flux, un lien
   sobre dans le footer du parcours client. */
body.client-mode .client-footer {
  display: flex;
  justify-content: center;
  margin-top: var(--space-10);
  padding-top: var(--space-5);
  border-top: 1px solid var(--line);
}

body.client-mode .client-demo-access {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 var(--space-3);
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--muted);
  font-family: var(--font-ui);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: color var(--dur) var(--ease);
}

body.client-mode .client-demo-access:hover {
  color: var(--text);
  text-decoration: underline;
}

body.client-mode .client-demo-access.hidden {
  display: none;
}

/* --- Contact du centre : toujours accessible sous le parcours -------------
   Visible en mode client ET en mode client pur (/reserver) : un point de
   contact (téléphone + email du centre) « pour toute question/precision ».
   Alimenté par renderCenterContact() depuis /api/public-booking-meta ; masqué
   tant qu'aucune coordonnée n'est servie (fallback discret, aucune valeur
   inventée). Placé DANS #clientView => disparaît en vue staff/direction. */
.client-contact-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--space-2) var(--space-4);
  margin-top: var(--space-8);
  padding-top: var(--space-5);
  border-top: 1px solid var(--line);
  text-align: center;
}
.client-contact-bar[hidden] { display: none; }
.client-contact-intro {
  font-size: 13px;
  color: var(--muted);
}
.client-contact-links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--space-2) var(--space-4);
}
.client-contact-link {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 40px;
  padding: 0 6px;
  color: var(--text);
  font-family: var(--font-ui);
  font-size: 13.5px;
  font-weight: 500;
  text-decoration: none;
  transition: color var(--dur) var(--ease);
}
.client-contact-link svg { color: var(--accent); flex-shrink: 0; }
.client-contact-link:hover { color: var(--accent); text-decoration: underline; }
.client-contact-link:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: var(--radius-sm); }

/* En mode client pur, la barre de contact reste (le footer "Espace équipe"
   est masqué ailleurs). On retire la double bordure en collant la barre au
   flux quand le footer disparaît. */
body.customer-mode .client-contact-bar { margin-top: var(--space-6); }

/* --- Mode client pur (/reserver) : zéro commande staff ------------------- */
/* Entrée partageable aux clients finaux. Masque totalement le switch de vue,
   la Déconnexion et l'Accès SaaS. Le staff continue d'utiliser / ou #staff. */
body.customer-mode .view-switch,
body.customer-mode #logoutBtn,
body.customer-mode #clientDemoAccess,
body.customer-mode .client-footer {
  display: none !important;
}

@media (max-width: 900px) {
  body.client-mode #nav {
    display: none;
  }
}

@media (max-width: 640px) {
  /* En-tête robuste mobile : le logo reste seul sur la première ligne, le switch
     de vue passe en pleine largeur sur une seconde ligne (flex-wrap). Plus aucun
     débordement horizontal ni libellé « Direction » coupé, quelle que soit la
     largeur. Ne s'applique JAMAIS aux <header> internes type .formule-group-head
     (neutralisés en display:block plus bas). */
  body.client-mode header {
    flex-wrap: wrap;
    gap: var(--space-2) var(--space-3);
    padding: var(--space-2) var(--space-4);
    min-height: 60px;
  }

  body.client-mode .logo {
    width: auto;
    height: 40px;
  }

  /* Le groupe d'actions (switch) occupe sa propre ligne, pleine largeur. */
  body.client-mode .header-actions {
    order: 3;
    flex: 1 1 100%;
    margin-left: 0;
  }

  body.client-mode .view-switch {
    flex: 1 1 auto;
    margin-left: 0;
  }

  /* Les trois vues se répartissent l'espace à parts égales : aucun texte coupé. */
  body.client-mode .view-switch button {
    flex: 1 1 0;
    min-width: 0;
    min-height: 38px;
    padding: 0 8px;
    white-space: nowrap;
  }

  /* En-tête de famille de formules : empilé verticalement pleine largeur (le
     sélecteur global `body.client-mode header` le passait en flex-row, d'où 3
     colonnes serrées illisibles sur mobile). Desktop conserve sa mise en page. */
  #clientView .formule-group-head {
    display: block;
  }
}

/* Très petits mobiles (≤430px) : resserre encore le header. */
@media (max-width: 430px) {
  body.client-mode header {
    gap: var(--space-2);
    padding: var(--space-2) var(--space-3);
  }

  body.client-mode .view-switch button {
    padding: 0 6px;
    font-size: 12px;
  }
}

/* ============================================================================
   6. PICKERS FORMULE : heure d'arrivée & « Ancres + Liberté »
   (L'ancien bloc « SKIN FUN GALAXY » : tokens --fgx-*, fonts Anton/Montserrat,
   fond noir figé, halos néon teal, color-scheme:dark forcé, est supprimé :
   le branding tenant n'existe plus que par le logo du header (DESIGN.md §3)
   et les thèmes light/dark de pinlane.css font foi sur tout le parcours.)
   ========================================================================== */

/* --- Picker formule « heure d'arrivée d'abord » --------------------------- */
#clientView .formula-arrival-picker {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}
#clientView .formula-arrival-head {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}
#clientView .formula-arrival-head strong {
  font-family: var(--font-ui);
  font-size: 15px;
  color: var(--text);
}
#clientView .formula-arrival-head span {
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--muted);
}
#clientView .formula-arrival-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(64px, 1fr));
  gap: var(--space-2);
}
#clientView .formula-arrival-chip {
  min-height: 44px;
  padding: var(--space-2) var(--space-2);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-md);
  background: var(--surface);
  color: var(--text);
  font-family: var(--font-ui);
  font-size: 13.5px;
  font-weight: 600;
  cursor: pointer;
  transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease), color var(--dur) var(--ease);
}
#clientView .formula-arrival-chip:hover {
  border-color: var(--accent);
}
#clientView .formula-arrival-chip.active {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-contrast);
}
#clientView .formula-arrival-chip:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
#clientView .formula-arrival-hint {
  margin: 0;
  font-size: 12.5px;
  color: var(--muted);
}
#clientView .formula-program-panel {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding: var(--space-4);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--surface);
}

/* ==========================================================================
   PICKER FORMULE « ANCRES + LIBERTÉ »
   Une ligne de chips par ancre (Bowling / Laser), un pass liberté sans
   aucune heure, la table qui suit l'arrivée.
   ========================================================================== */
#clientView .formula-anchor-picker {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding: var(--space-4);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--surface);
}

#clientView .formula-model-preview {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

#clientView .formula-model-line {
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
  font-size: 13px;
  color: var(--text);
}

/* Le second mot de ces pastilles (`reserved`, `table`, `free`, `arrival`,
   `laser`) est un token MODIFICATEUR, pas un utilitaire. `table` a pourtant un
   homonyme nu dans la feuille partagee : `.table, table.pl-table { width:100% }`
   (assets/pinlane.css:548). Cette largeur passait sans opposition - la regle
   ci-dessous ne declarait aucun `width` - et la pastille, en `flex-shrink:0`,
   devenait une barre pleine largeur qui ejectait le texte voisin hors de la
   ligne (colonne d'un caractere, 10 lignes de haut, scroll horizontal a 390px).
   `width: auto` neutralise tout homonyme utilitaire present ou futur : la regle
   est plus specifique (#clientView), donc elle gagne sans `!important`. */
#clientView .formula-model-tag,
#clientView .visit-tag {
  flex-shrink: 0;
  width: auto;
  padding: 2px 10px;
  border-radius: var(--radius-full);
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
}

#clientView .formula-model-tag.reserved,
#clientView .visit-tag.reserved { background: var(--accent-soft); color: var(--text); }
#clientView .formula-model-tag.table,
#clientView .visit-tag.table { background: var(--warning-soft, var(--subtle)); color: var(--text); }
#clientView .formula-model-tag.free,
#clientView .visit-tag.free { background: var(--success-soft); color: var(--success); }
#clientView .visit-tag.arrival { background: var(--accent-soft); color: var(--text); }
#clientView .visit-tag.laser { background: var(--accent-soft); color: var(--text); }

#clientView .anchor-row {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-3);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--page);
}

#clientView .anchor-row-head {
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
  flex-wrap: wrap;
}

#clientView .anchor-row-head strong {
  font-size: 14px;
  color: var(--text);
}

#clientView .anchor-row-head small {
  font-size: 12px;
  color: var(--muted);
}

#clientView .anchor-chip-grid {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

#clientView .anchor-chip {
  min-height: 44px;
  min-width: 64px;
  padding: var(--space-1) var(--space-3);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-full);
  background: var(--surface);
  color: var(--text);
  font-family: var(--font-ui);
  font-size: 13.5px;
  font-weight: 700;
  cursor: pointer;
  transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease);
}

#clientView .anchor-chip:hover { border-color: var(--accent); }

#clientView .anchor-chip.active {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-contrast);
}

#clientView .anchor-chip:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

#clientView .anchor-chip:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

#clientView .anchor-row-onsite .anchor-chip-grid { opacity: 0.55; }

#clientView .anchor-onsite {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-height: 44px;
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-sm);
  font-size: 13px;
  color: var(--text);
  cursor: pointer;
}

#clientView .anchor-onsite input {
  width: 18px;
  height: 18px;
  accent-color: var(--accent);
  cursor: pointer;
}

#clientView .anchor-onsite.active { color: var(--accent); font-weight: 600; }

#clientView .anchor-status {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-3);
  border-radius: var(--radius-md);
  font-size: 13px;
}

#clientView .anchor-status-busy {
  flex-direction: row;
  align-items: center;
  border: 1px dashed var(--line-strong);
  color: var(--muted);
}

#clientView .anchor-status-error {
  border: 1px solid var(--danger);
  background: var(--danger-soft);
  color: var(--text);
}

#clientView .anchor-suggestions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  font-size: 12.5px;
  color: var(--muted);
}

#clientView .anchor-suggestion {
  min-height: 40px;
  padding: var(--space-1) var(--space-3);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-full);
  background: var(--surface);
  color: var(--text);
  font-family: var(--font-ui);
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
  transition: border-color var(--dur) var(--ease);
}

#clientView .anchor-suggestion:hover { border-color: var(--accent); }

#clientView .anchor-free-pass {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-3);
  border: 1px dashed var(--success);
  border-radius: var(--radius-md);
  background: var(--success-soft);
}

#clientView .anchor-free-head {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
}

#clientView .anchor-free-head strong {
  font-size: 13.5px;
  color: var(--text);
}

/* Badge statut §6 : fond -soft + texte statut (blanc sur vert clair échouait
   le contraste AA en thème dark). */
#clientView .anchor-free-badge {
  padding: 2px 10px;
  border-radius: var(--radius-full);
  background: var(--success-soft);
  color: var(--success);
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
}

#clientView .anchor-free-items {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

#clientView .anchor-free-item {
  padding: 4px 12px;
  border-radius: var(--radius-full);
  border: 1px solid var(--success);
  background: var(--surface);
  color: var(--text);
  font-size: 12.5px;
  font-weight: 600;
}

#clientView .anchor-free-pass small {
  font-size: 12px;
  color: var(--muted);
}

#clientView .formula-visit-summary {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin-bottom: var(--space-3);
}

#clientView .visit-line {
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
  font-size: 13px;
  color: var(--text);
}

#clientView .visit-line strong { font-size: 14px; }

#clientView .visit-line-note {
  font-size: 12px;
  color: var(--muted);
}

#clientView .formula-plan-confirm { width: 100%; }
#clientView .formula-order-fallback-btn {
  margin-top: var(--space-2);
  min-height: 40px;
  padding: var(--space-1) var(--space-3);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-full);
  background: transparent;
  color: var(--text);
  font-family: var(--font-ui);
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
}
#clientView .formula-order-fallback-btn:hover { border-color: var(--accent); }

/* === Occasion déclarée + demande sur mesure (CHANTIER 1 & 2) ============== */
.lbl-optional { color: var(--text-3); font-weight: 500; font-size: 0.9em; }

.occasion-chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-3);
}
.occasion-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 44px;
  padding: 0 15px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-full);
  background: var(--surface);
  color: var(--text);
  font-family: var(--font-ui);
  font-size: 13.5px;
  font-weight: 500;
  line-height: 1.2;
  cursor: pointer;
  transition: background-color var(--dur) var(--ease), border-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.occasion-chip svg { color: var(--muted); flex-shrink: 0; transition: color var(--dur) var(--ease); }
.occasion-chip:hover { background: var(--subtle); border-color: var(--muted); }
.occasion-chip:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.occasion-chip.active {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-contrast);
}
.occasion-chip.active svg { color: var(--accent-contrast); }

/* Champ de précision « Autre » (révélé quand le chip Autre est actif). */
.occasion-other-wrap { margin-top: var(--space-3); }
.occasion-other-wrap.hidden { display: none; }

/* Note honnête discrète sous un champ (demande particulière, etc.). */
.field-honest-note {
  margin: 8px 0 0;
  font-size: 12px;
  line-height: 1.45;
  color: var(--text-3);
}

/* Entrée « demande sur mesure » sous l'étape 1 */
.bespoke-entry {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  width: 100%;
  margin-top: var(--space-3);
  padding: 16px 18px;
  border: 1px dashed var(--line-strong);
  border-radius: var(--radius-md);
  background: var(--surface);
  color: var(--text);
  text-align: left;
  cursor: pointer;
  transition: border-color var(--dur) var(--ease), background-color var(--dur) var(--ease);
}
.bespoke-entry:hover { border-color: var(--accent); background: var(--subtle); }
.bespoke-entry-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  border-radius: var(--radius-full);
  background: var(--accent-soft);
  color: var(--accent);
}
.bespoke-entry-text { display: flex; flex-direction: column; gap: 3px; flex: 1; }
.bespoke-entry-text strong { font-size: 14.5px; font-weight: 600; }
.bespoke-entry-text small { font-size: 12.5px; color: var(--text-2); line-height: 1.45; }
.bespoke-entry-chevron { flex-shrink: 0; color: var(--text-3); }

/* Modale demande sur mesure */
body.modal-open { overflow: hidden; }
.bespoke-modal {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: var(--space-4);
  overflow-y: auto;
  background: var(--backdrop);
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
}
.bespoke-modal.hidden { display: none; }
.bespoke-modal-card {
  position: relative;
  width: 100%;
  max-width: 560px;
  margin: auto;
  padding: 26px 24px 24px;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--raised);
  box-shadow: var(--shadow-overlay);
}
.bespoke-modal-close {
  position: absolute;
  top: 14px;
  right: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border: none;
  border-radius: var(--radius-full);
  background: transparent;
  color: var(--text-2);
  cursor: pointer;
}
.bespoke-modal-close:hover { background: var(--subtle); color: var(--text); }
.bespoke-modal-head { margin-bottom: var(--space-3); padding-right: 36px; }
.bespoke-modal-head h2 { font-size: 20px; font-weight: 700; margin: 0 0 6px; }
.bespoke-modal-head p { font-size: 13px; color: var(--text-2); line-height: 1.5; margin: 0; }
.bespoke-success {
  padding: 14px 16px;
  border-radius: var(--radius-md);
  background: var(--accent-soft);
  color: var(--accent);
  font-size: 13.5px;
  line-height: 1.5;
  font-weight: 500;
}
.bespoke-error {
  margin-top: var(--space-3);
  padding: 10px 14px;
  border-radius: var(--radius-sm);
  background: var(--danger-soft);
  color: var(--danger);
  font-size: 13px;
  font-weight: 500;
}
.bespoke-modal .hidden { display: none; }

/* La modale vit hors de #clientView : sa grille de champs a besoin de ses
   propres règles (le .grid-2 de #clientView ne s'y applique pas). Champs alignés
   sur 2 colonnes, empilés sous 520px. */
.bespoke-modal .grid-2 {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-3) var(--space-4);
}
.bespoke-modal .grid-2 > * { min-width: 0; }
@media (max-width: 520px) {
  .bespoke-modal .grid-2 { grid-template-columns: 1fr; }
}
.bespoke-fineprint {
  margin: var(--space-3) 0 0;
  font-size: 12px;
  line-height: 1.5;
  color: var(--text-3);
}

/* Actions de la modale : primaire accent plein, secondaire bordé, alignées à
   droite (le .cr-actions générique de pinlane.css les aplatirait sinon). */
.bespoke-modal .cr-actions { justify-content: flex-end; margin-top: var(--space-4); }
.bespoke-modal .cr-actions .btn-primary,
.bespoke-modal .cr-actions .btn-secondary {
  min-height: 40px;
  padding: 0 18px;
  border-radius: var(--radius-sm);
  font-size: 14px;
  font-weight: 600;
  flex: 0 0 auto;
}
.bespoke-modal .cr-actions .btn-primary {
  border: 1px solid var(--accent);
  background: var(--accent);
  color: var(--accent-contrast);
}
.bespoke-modal .cr-actions .btn-primary:hover { opacity: 0.9; border-color: var(--accent); }
.bespoke-modal .cr-actions .btn-secondary {
  border: 1px solid var(--line-strong);
  background: var(--surface);
  color: var(--text);
}
.bespoke-modal .cr-actions .btn-secondary:hover { background: var(--subtle); border-color: var(--line-strong); }

/* Type déclaré affiché sur une fiche réservation client */
.occasion-field textarea.input { resize: vertical; min-height: 46px; }

/* ── Demande particulière ───────────────────────────────────────────────────
   Le champ grandit à la frappe (JS), donc AUCUNE poignée de redimensionnement :
   elle était le seul indice que le texte pouvait être long, et elle donnait à
   la zone un air d'ébauche. Le compteur ne paraît qu'en approche de la limite.
   (Les suggestions cliquables ont été retirées le 2026-07-28 : elles
   proposaient des services que le centre ne rend pas.) */
.request-box { position: relative; }
.request-field textarea.input {
  resize: none;
  min-height: 96px;
  max-height: 220px;
  padding: 12px 14px 26px;
  line-height: 1.55;
  overflow-y: auto;
}
.request-count {
  position: absolute;
  right: 12px;
  bottom: 8px;
  font-family: var(--font-data);
  font-variant-numeric: tabular-nums;
  font-size: 11.5px;
  color: var(--faint);
  pointer-events: none;
}
.request-count.is-close { color: var(--warning); }

/* Libellé de groupe occasion sur le formulaire public standalone */
.occasion-label { display: block; font-size: 13px; font-weight: 600; margin-bottom: 4px; color: var(--text); }
.cta-secondary {
  background: var(--surface);
  color: var(--text);
  border: 1px solid var(--line-strong);
}
.cta-secondary:hover { background: var(--subtle); }

/* Modale demande sur mesure : .cr-actions : composant partagé dans pinlane.css */