/* Dépannage / SAV — page publique de réservation (/rdv/{slug}) et gestion
   par lien. Mobile-first (maquettes 390 px validées le 02-09), tokens
   seulement : navy = primary, fond = gray-50. */

/* Règle plateforme (« hidden vs display fixe », déjà payée sur airfact
   /jobs/N) : toute règle d'auteur `display:` écrase le [hidden]{display:none}
   du NAVIGATEUR — .savp-step est en flex, donc SANS cette ligne les étapes
   masquées (2, 3 et le squelette « terminé ») s'empilaient sous l'étape 1
   (écran Olivier 02-09). Aucune feuille de composants ne porte de [hidden]
   global (seulement des règles scopées dash / kpi) : la garde vit ICI.
   NB : jamais la séquence étoile-barre dans un commentaire CSS — la première
   version l'avait via « dash-* / kpi-* » collés, le commentaire se refermait
   là et le débris avalait CETTE règle comme son bloc. */
.savp [hidden], .public-layout [hidden] { display: none !important; }

.public-layout { min-height: 100vh; background: var(--gray-50); }
.savp { max-width: 480px; margin: 0 auto; min-height: 100vh; display: flex; flex-direction: column; background: var(--gray-50); font-family: var(--font); color: var(--text); padding-bottom: 96px; box-sizing: border-box; }

.savp-header { background: var(--surface); border-bottom: 1px solid var(--border); padding: 16px 20px; display: flex; align-items: center; gap: 12px; position: sticky; top: 0; z-index: 2; }
.savp-back { border: 0; background: transparent; padding: 4px; margin-left: -6px; color: var(--text-secondary); cursor: pointer; display: inline-flex; }
.savp-brand-logo { width: 36px; height: 36px; border-radius: 8px; object-fit: contain; flex-shrink: 0; }
.savp-brand { display: flex; align-items: baseline; gap: 10px; }
.savp-brand-name { font-size: 17px; font-weight: 700; letter-spacing: 0.06em; color: var(--primary); }
.savp-brand-sub { font-size: 13px; color: var(--text-muted); }

.savp-progress { display: flex; gap: 6px; padding: 14px 20px 0; }
.savp-progress span { height: 3px; flex: 1; border-radius: 2px; background: var(--border); }
.savp[data-step="1"] .savp-progress span:nth-child(1),
.savp[data-step="2"] .savp-progress span:nth-child(-n+2),
.savp[data-step="3"] .savp-progress span,
.savp[data-step="4"] .savp-progress span { background: var(--primary); }
.savp-step-label { padding: 6px 20px 0; font-size: 12px; color: var(--text-muted); }
.savp[data-step="4"] .savp-progress, .savp[data-step="4"] .savp-step-label, .savp-manage .savp-progress, .savp-manage .savp-step-label { display: none; }

.savp-step { padding: 18px 20px 0; display: flex; flex-direction: column; gap: 14px; }
.savp-title { font-size: 22px; font-weight: 700; color: var(--text); margin: 0; line-height: 1.25; }
.savp-lead { font-size: 14px; color: var(--text-secondary); margin: 0; line-height: 1.5; }
.savp-hint { font-size: 12.5px; color: var(--text-muted); margin: 0; line-height: 1.5; }
.savp-empty { font-size: 14px; color: var(--text-secondary); background: var(--surface); border: 1px solid var(--border); border-radius: 10px; padding: 14px; }

/* ── 1. Prestations ─────────────────────────────────────────────────────── */
.savp-types { display: flex; flex-direction: column; gap: 10px; }
.savp-type { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; text-align: left; background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 14px 16px; cursor: pointer; font: inherit; color: var(--text); }
.savp-type:hover, .savp-type:focus-visible { border-color: var(--primary); outline: none; }
.savp-type svg { color: var(--text-muted); flex-shrink: 0; }
.savp-type-main { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.savp-type-label { font-size: 15px; font-weight: 600; }
.savp-type-sub { font-size: 12.5px; color: var(--text-muted); }

/* ── 2. Créneau ─────────────────────────────────────────────────────────── */
.savp-chip { display: inline-flex; align-items: center; gap: 8px; align-self: flex-start; background: var(--state-navy-bg); color: var(--state-navy-fg); border-radius: 999px; padding: 6px 12px; font-size: 13px; font-weight: 600; }
.savp-days { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 4px; scrollbar-width: none; margin: 0 -20px; padding-left: 20px; padding-right: 20px; }
.savp-days::-webkit-scrollbar { display: none; }
.savp-day { flex-shrink: 0; background: var(--surface); color: var(--text); border: 1px solid var(--border); border-radius: 10px; padding: 8px 14px; text-align: center; cursor: pointer; font: inherit; }
.savp-day small { display: block; font-size: 11px; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.04em; }
.savp-day strong { display: block; font-size: 16px; font-weight: 700; }
.savp-day.is-selected { background: var(--primary); border-color: var(--primary); color: var(--surface); }
.savp-day.is-selected small { color: var(--surface); opacity: 0.75; }
.savp-day-title { font-size: 13px; font-weight: 600; color: var(--text-secondary); text-transform: uppercase; letter-spacing: 0.03em; }
.savp-slots { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.savp-slot { background: var(--surface); border: 1px solid var(--border); border-radius: 10px; padding: 12px 0; text-align: center; font-size: 15px; font-weight: 600; color: var(--text); cursor: pointer; font: inherit; }
.savp-slot.is-selected { background: var(--primary); border-color: var(--primary); color: var(--surface); font-weight: 700; }
.savp-slots .savp-empty { grid-column: 1 / -1; }
.savp-loading { grid-column: 1 / -1; display: flex; justify-content: center; padding: 20px 0; }

/* ── 3. Coordonnées ─────────────────────────────────────────────────────── */
.savp-summary { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 10px; background: var(--state-navy-bg); color: var(--state-navy-fg); border-radius: 10px; padding: 10px 14px; font-size: 14px; }
.savp-summary-when { font-weight: 600; }
.savp-summary-what { color: var(--text-secondary); }
.savp-hp { position: absolute; left: -9999px; top: -9999px; width: 1px; height: 1px; overflow: hidden; }
.savp .form-input, .savp .form-textarea { font-size: 16px; } /* iOS : pas de zoom au focus */

/* ── CTA collant ────────────────────────────────────────────────────────── */
.savp-cta { position: fixed; left: 0; right: 0; bottom: 0; padding: 12px 20px 22px; background: linear-gradient(to top, var(--gray-50) 70%, transparent); display: flex; justify-content: center; z-index: 3; }
.savp-cta .savp-btn { max-width: 440px; }
.savp-btn { display: inline-flex; align-items: center; justify-content: center; width: 100%; background: var(--primary); color: var(--surface); border: 1px solid var(--primary); border-radius: 10px; padding: 15px 16px; font-size: 15px; font-weight: 600; cursor: pointer; font-family: inherit; text-decoration: none; box-sizing: border-box; }
.savp-btn:disabled { opacity: 0.55; cursor: not-allowed; }
.savp-btn--ghost { background: var(--surface); color: var(--error); border-color: var(--border); }
.savp-btn--link { display: inline-flex; width: auto; align-self: flex-start; }
.savp-actions { display: flex; flex-direction: column; gap: 10px; }

/* ── Terminé / gestion ──────────────────────────────────────────────────── */
.savp-done { align-items: flex-start; }
.savp-done-icon { color: var(--success); }
.savp-done-status { display: inline-flex; align-items: center; gap: 6px; align-self: flex-start; border-radius: 4px; padding: 4px 10px; font-size: 12.5px; font-weight: 600; background: var(--state-amber-bg); color: var(--state-amber-fg); }
.savp-done-status.is-confirmed, .savp-status-confirmed, .savp-status-converted { background: var(--state-green-bg); color: var(--state-green-fg); }
.savp-status-cancelled_client, .savp-status-cancelled_tenant { background: var(--state-red-bg); color: var(--state-red-fg); }
.savp-status-done, .savp-status-no_show { background: var(--state-graphite-bg); color: var(--state-graphite-fg); }
.savp-card { width: 100%; background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 14px 16px; display: flex; flex-direction: column; gap: 10px; box-sizing: border-box; }
.savp-card-row { display: flex; align-items: flex-start; gap: 10px; font-size: 14px; color: var(--text); }
.savp-card-row svg { color: var(--text-muted); flex-shrink: 0; margin-top: 1px; }
.savp-card-row strong { font-weight: 600; }
.savp-link { color: var(--primary); font-weight: 600; font-size: 14px; text-decoration: none; }
.savp-footer { margin-top: auto; padding: 16px 20px 0; display: flex; align-items: center; justify-content: center; gap: 6px; font-size: 11px; color: var(--text-muted); }
.savp-footer-logo { width: 14px; height: 14px; border-radius: 50%; flex-shrink: 0; }
/* La place du CTA collant ne se réserve que quand il est LÀ : à l'étape 1 il
   est caché, et les 96 px faisaient un bandeau vide sous la mention —
   visible surtout dans une iframe, où la page est courte. */
.savp:not(:has(> .savp-cta:not([hidden]))) { padding-bottom: 16px; }

/* Encadrée (classe posée par public-booking.js) : la page prend la hauteur
   de son contenu, jamais celle du cadre — le site hôte ajuste l'iframe. */
.savp-encadree .public-layout, .savp-encadree .savp { min-height: 0; }
.savp-encadree .savp-footer { margin-top: 0; }
/* Et ce qui reste du cadre sous la carte prend le fond du SITE HÔTE : si son
   code d'intégration n'ajuste pas la hauteur (script absent ou bloqué par sa
   CSP), l'iframe garde 760 px — sans cette règle, un grand bloc gris. */
html.savp-encadree, .savp-encadree body, .savp-encadree .public-layout { background: transparent; }
/* Le CTA n'est plus FIXÉ au bas de l'écran : dans un cadre de hauteur fixe,
   « le bas de l'écran » est le bas du cadre, loin sous la carte. Il suit le
   contenu (collant si le cadre est plus court), et la place qu'on lui
   réservait sous la carte n'a plus lieu d'être. */
.savp-encadree .savp { padding-bottom: 16px; }
.savp-encadree .savp-cta { position: sticky; padding: 16px 20px 0; }
/* Le site hôte ajuste la hauteur (embed.js l'a confirmé) : aucun défilement. */
html.savp-ajustee, html.savp-ajustee body { overflow: hidden; }
.savp-notfound .savp-step { padding-top: 40px; }

@media (min-width: 640px) {
    .savp { margin: 24px auto; min-height: 0; border: 1px solid var(--border); border-radius: 16px; box-shadow: var(--shadow); padding-bottom: 24px; }
    .savp-header { border-radius: 16px 16px 0 0; position: static; }
    .savp-cta { position: sticky; padding: 16px 20px 0; background: transparent; }
    .savp-footer { padding-bottom: 20px; }
}