/* ── L'appli du pro (/app), refonte du 16/10/2026 ──
   Remplace base.css (copie du tableau de bord FCUTZ) et trimsync.css : TrimSync a maintenant son propre outil.
   Base : css/charte.css, ambiance « outil » (claire le jour, sombre si le téléphone l'est).
   Les noms de classes viennent des scripts (js/app/*.js) : ne pas les renommer sans eux. */

:root { --sidebar-l: 15.5rem; --topbar-h: 4rem; --mnav-h: 4.25rem; }
.theme-outil { --accent-hex: #00788d; --trait-hex: rgba(20, 30, 35, 0.07); }
@media (prefers-color-scheme: dark) { .theme-outil:not(.outil-clair) { --accent-hex: #72dee6; --trait-hex: rgba(255, 255, 255, 0.06); } }

[hidden] { display: none !important; }
.hidden { display: none !important; }
html, body { overscroll-behavior-y: none; }
/* Jamais de zoom dans l'appli (double toucher, pincement) : seul le défilement reste */
html, body { touch-action: pan-x pan-y; }
body { font-size: 0.9375rem; line-height: 1.5; }
.ti { flex: none; }

/* Rien ne s'affiche avant la session : l'écran de connexion d'abord */
body.hors-session .layout, body.hors-session .sidebar, body.hors-session .mnav,
body.hors-session .mnav-burger, body.hors-session #sidebar-backdrop { display: none !important; }
body:not(.hors-session) #ecran-connexion { display: none; }
/* Déjà connecté : pas d'éclair de l'écran de connexion pendant que la session se rouvre */
html.reprise #ecran-connexion { visibility: hidden; }

/* ════════ Connexion et création du salon ════════ */
#ecran-connexion { min-height: 100dvh; display: grid; place-items: center; padding: 1.5rem 1rem; }
.cx-carte { width: min(100%, 25rem); }
.cx-logo { font-size: 1.75rem; margin-bottom: 1.75rem; }
.cx-titre { font-family: var(--police-titre); font-size: 2rem; font-weight: 600; letter-spacing: -0.04em; line-height: 1.05; }
.cx-accroche { color: var(--texte-2); margin: 0.5rem 0 1.5rem; }
.cx-onglets { display: grid; grid-template-columns: 1fr 1fr; gap: 0.25rem; padding: 0.25rem; margin-bottom: 1.25rem; border-radius: var(--rayon); background: var(--surface-2); }
.cx-onglets .tab { text-align: center; }
.cx-form { display: flex; flex-direction: column; gap: 0.6rem; }
.cx-form[hidden] { display: none; }
.cx-form .btn { width: 100%; min-height: 3rem; margin-top: 0.4rem; font-size: 1rem; }
.cx-consent { display: flex; gap: 0.6rem; align-items: flex-start; font-size: var(--t-legende); color: var(--texte-2); line-height: 1.5; margin-top: 0.2rem; }
.cx-consent input { margin-top: 0.15rem; width: 1.1rem; height: 1.1rem; flex: none; accent-color: var(--accent); }
.cx-consent a, .cx-note a { color: var(--texte); }
.cx-lien { background: none; border: 0; color: var(--texte-2); font-size: var(--t-petit); cursor: pointer; padding: 0.6rem; text-decoration: underline; text-underline-offset: 3px; }
.cx-erreur { color: var(--alerte); font-size: var(--t-legende); min-height: 1.1rem; }
.cx-note { color: var(--texte-3); font-size: var(--t-legende); text-align: center; margin-top: 0.4rem; }
.cx-retour { display: block; text-align: center; margin-top: 2rem; color: var(--texte-3); font-size: var(--t-legende); text-decoration: none; }

/* ════════ Champs, boutons, onglets, interrupteurs ════════ */
.input {
  width: 100%;
  min-height: 2.75rem;
  padding: 0.6rem 0.85rem;
  background: var(--surface);
  border: 1px solid var(--trait);
  border-radius: var(--rayon);
  color: var(--texte);
  font-size: 1rem;
  font-family: var(--police);
  transition: border-color var(--duree-court) var(--ease), box-shadow var(--duree-court) var(--ease);
}
.input::placeholder { color: var(--texte-3); }
.input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-doux); }
.input:disabled { opacity: 0.5; }
select.input { appearance: none; -webkit-appearance: none; padding-right: 2.2rem; background-image: linear-gradient(45deg, transparent 50%, var(--texte-3) 50%), linear-gradient(135deg, var(--texte-3) 50%, transparent 50%); background-position: calc(100% - 1.05rem) 50%, calc(100% - 0.75rem) 50%; background-size: 0.3rem 0.3rem; background-repeat: no-repeat; }
textarea.input { resize: vertical; min-height: 4.5rem; line-height: 1.5; }
input[type="time"].input, input[type="date"].input { font-variant-numeric: tabular-nums; }

.btn-gold { background: var(--accent); color: var(--sur-accent); }
.btn-ghost { background: var(--surface-2); color: var(--texte); border-color: transparent; }
.btn-out { background: transparent; color: var(--texte); border-color: var(--trait); }
.btn-danger { background: transparent; color: var(--alerte); border-color: color-mix(in oklch, var(--alerte) 35%, var(--trait)); }
.btn-sm { --h: 2.25rem; font-size: var(--t-legende); padding: 0 0.8em; border-radius: var(--rayon-petit); }
.btn .ti { font-size: 1.15em; }
@media (hover: hover) {
  .btn-gold:hover { background: color-mix(in oklch, var(--accent) 88%, var(--texte)); }
  .btn-ghost:hover { background: var(--trait-doux); }
  .btn-out:hover, .btn-danger:hover { background: var(--surface-2); }
}

/* Onglets : un sélecteur à segments */
.tabs, .ag-barre-vue { display: inline-flex; gap: 0.2rem; padding: 0.2rem; border-radius: var(--rayon); background: var(--surface-2); }
.tab { padding: 0.45rem 0.85rem; border-radius: calc(var(--rayon) - 3px); font-size: var(--t-petit); font-weight: 500; color: var(--texte-2); cursor: pointer; user-select: none; transition: background-color var(--duree-court) var(--ease), color var(--duree-court) var(--ease); }
.tab.active { background: var(--surface); color: var(--texte); font-weight: 600; box-shadow: 0 1px 2px oklch(0 0 0 / 0.08); }

/* Interrupteur */
/* Pas de rectangle gris au toucher : sur iPhone, Safari surligne le label et le champ invisible à chaque appui */
.switch, .switch input, label:has(.switch), .ts-regle { -webkit-tap-highlight-color: transparent; -webkit-user-select: none; user-select: none; }
.switch { position: relative; display: inline-block; width: 2.6rem; height: 1.55rem; flex: none; }
.switch input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; z-index: 1; -webkit-appearance: none; appearance: none; }
.slider { position: absolute; inset: 0; border-radius: 999px; background: var(--trait); transition: background-color var(--duree) var(--ease); }
.slider::before { content: ''; position: absolute; top: 0.18rem; left: 0.18rem; width: 1.19rem; height: 1.19rem; border-radius: 50%; background: oklch(0.99 0 0); box-shadow: 0 1px 2px oklch(0 0 0 / 0.25); transition: transform var(--duree) var(--ease); }
.switch input:checked + .slider { background: var(--accent); }
.switch input:checked + .slider::before { transform: translateX(1.05rem); }
.switch input:focus-visible + .slider { outline: 2px solid var(--accent); outline-offset: 2px; }

/* Recherche */
.search-wrap { position: relative; }
.search-wrap > .ti { position: absolute; left: 0.85rem; top: 50%; transform: translateY(-50%); color: var(--texte-3); font-size: 1.1rem; pointer-events: none; }
.search-wrap .input { padding-left: 2.5rem; }

/* ════════ Coquille : menu, en-tête, pages ════════ */
.sidebar { position: fixed; top: 0; bottom: 0; left: 0; z-index: 40; width: var(--sidebar-l); display: flex; flex-direction: column; background: var(--surface); border-right: 1px solid var(--trait-doux); padding: 1rem 0.75rem calc(1rem + env(safe-area-inset-bottom, 0px)); }
.sidebar-logo { display: flex; align-items: center; gap: 0.6rem; padding: 0.4rem 0.6rem 1.25rem; }
.sidebar-logo .logo { font-size: 1.3rem; }
.sidebar-close { display: none; width: 2.25rem; height: 2.25rem; border-radius: 50%; border: 0; background: var(--surface-2); color: var(--texte-2); font-size: 1.1rem; cursor: pointer; margin-left: auto; order: 2; place-items: center; }
.sidebar-nav { display: flex; flex-direction: column; gap: 0.15rem; flex: 1; overflow-y: auto; }
.nav-section { font-size: 0.72rem; font-weight: 600; color: var(--texte-3); padding: 1rem 0.7rem 0.35rem; }
.nav-item { display: flex; align-items: center; gap: 0.7rem; padding: 0.6rem 0.7rem; border-radius: var(--rayon-petit); color: var(--texte-2); font-weight: 500; cursor: pointer; text-decoration: none; user-select: none; transition: background-color var(--duree-court) var(--ease), color var(--duree-court) var(--ease); }
.nav-item .ti { font-size: 1.25rem; }
.nav-item.active { background: var(--surface-2); color: var(--texte); font-weight: 600; }
.nav-item.active .ti { color: var(--accent-texte); }
@media (hover: hover) { .nav-item:not(.active):hover { color: var(--texte); background: var(--trait-doux); } }
.sidebar-footer { display: flex; flex-direction: column; gap: 0.6rem; padding-top: 0.75rem; border-top: 1px solid var(--trait-doux); }
.essai-pastille { align-self: flex-start; margin: 0 0.6rem; padding: 0.2rem 0.55rem; border-radius: 6px; background: var(--accent-doux); color: var(--accent-texte); font-size: var(--t-legende); font-weight: 600; }
.essai-pastille.alerte { background: var(--attente-doux); color: var(--attente); }
.barber-profile { display: flex; align-items: center; gap: 0.6rem; padding: 0.3rem 0.6rem; }
.barber-avatar { width: 2.2rem; height: 2.2rem; border-radius: 50%; display: grid; place-items: center; background: var(--texte); color: var(--fond); font-family: var(--police-titre); font-weight: 600; font-size: 0.85rem; flex: none; }
.barber-meta { min-width: 0; }
.barber-name { font-weight: 600; font-size: var(--t-petit); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.barber-role { color: var(--texte-3); font-size: var(--t-legende); }
.btn-deconnexion { display: flex; align-items: center; gap: 0.5rem; padding: 0.55rem 0.7rem; border: 0; border-radius: var(--rayon-petit); background: transparent; color: var(--texte-3); font-size: var(--t-petit); cursor: pointer; }
@media (hover: hover) { .btn-deconnexion:hover { color: var(--texte); background: var(--trait-doux); } }
#sidebar-backdrop { display: none; position: fixed; inset: 0; z-index: 35; background: oklch(0 0 0 / 0.4); opacity: 0; transition: opacity 300ms var(--ease); }
#sidebar-backdrop.visible { opacity: 1; }
.mnav-burger { display: none !important; }

.layout { margin-left: var(--sidebar-l); min-height: 100dvh; }
.main { width: min(100%, 78rem); margin-inline: auto; padding: 0 clamp(1rem, 2.5vw, 2rem) 3rem; }
.topbar { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: 0.75rem; min-height: var(--topbar-h); padding-top: env(safe-area-inset-top, 0px); margin: 0 calc(-1 * clamp(1rem, 2.5vw, 2rem)) 1rem; padding-inline: clamp(1rem, 2.5vw, 2rem); background: color-mix(in oklch, var(--fond) 88%, transparent); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-bottom: 1px solid var(--trait-doux); }
.burger-btn { display: none; width: 2.5rem; height: 2.5rem; border: 0; border-radius: 50%; background: transparent; cursor: pointer; flex-direction: column; align-items: center; justify-content: center; gap: 4px; margin-left: -0.5rem; }
.burger-line { display: block; width: 1.15rem; height: 1.75px; border-radius: 2px; background: var(--texte); }
.topbar-left { min-width: 0; flex: 1; }
.page-title { font-family: var(--police-titre); font-size: 1.35rem; font-weight: 600; letter-spacing: -0.03em; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.page-title .accent { color: var(--texte-3); }
.page-subtitle { color: var(--texte-3); font-size: var(--t-legende); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ts-nouveau-rdv { display: inline-flex; align-items: center; gap: 0.45rem; min-height: 2.5rem; padding: 0 1rem; border: 0; border-radius: var(--rayon); background: var(--accent); color: var(--sur-accent); font-weight: 600; font-size: var(--t-petit); cursor: pointer; flex: none; transition: transform var(--duree-ressort) var(--ressort); }
.ts-nouveau-rdv:active { transform: scale(0.97); }
.ts-nouveau-rdv .ti { font-size: 1.15rem; }

.page { display: none; }
.page.active { display: block; animation: page-entre 320ms var(--ease-sortie); }
@keyframes page-entre { from { opacity: 0; transform: translateY(6px); } }

/* Barre d'onglets du téléphone */
.mnav { display: none; }

@media (max-width: 1023px) {
  .sidebar { transform: translateX(-100%); transition: transform 220ms var(--ease-depart); box-shadow: var(--ombre); }
  .sidebar.open { transform: none; transition: transform 320ms var(--ease-sortie); }
  .sidebar-close { display: grid; }
  .layout { margin-left: 0; }
  .burger-btn { display: flex; }
}
@media (max-width: 768px) {
  .burger-btn { display: none; }
  /* Barre du bas bien fixe : la page ne défile plus, c'est .layout qui défile.
     Sur iPhone, la barre fixée à la fenêtre remontait quand la barre Safari bougeait. */
  html:has(body:not(.hors-session)), body:not(.hors-session) { height: 100%; overflow: hidden; background: var(--fond); }
  body:not(.hors-session) .layout { height: 100dvh; overflow-y: auto; overscroll-behavior-y: none; -webkit-overflow-scrolling: touch; }
  .main { padding-bottom: calc(var(--mnav-h) + 2.5rem + env(safe-area-inset-bottom, 0px)); }
  .topbar { min-height: 3.5rem; }
  .page-title { font-size: 1.2rem; }
  .ts-nouveau-rdv { width: 2.75rem; height: 2.75rem; padding: 0; justify-content: center; border-radius: 50%; }
  .ts-nouveau-rdv span { display: none; }
  /* Barre flottante façon Revolut : verre dépoli, un coussin d'accent qui glisse sous l'onglet actif (--i posé par nav()), icône qui se remplit */
  .mnav { --i: 0; display: grid; grid-template-columns: repeat(5, 1fr); position: fixed; left: 0.75rem; right: 0.75rem; bottom: calc(0.6rem + env(safe-area-inset-bottom, 0px)); z-index: 30; max-width: 28rem; margin-inline: auto; padding: 0.3rem; border-radius: 1.6rem; background: color-mix(in oklch, var(--surface) 80%, transparent); backdrop-filter: blur(22px) saturate(1.6); -webkit-backdrop-filter: blur(22px) saturate(1.6); border: 1px solid var(--trait-doux); box-shadow: 0 10px 30px oklch(0 0 0 / 0.14), 0 1px 0 oklch(1 0 0 / 0.06) inset; }
  .mnav::before { content: ''; position: absolute; top: 0.3rem; bottom: 0.3rem; left: 0.3rem; width: calc((100% - 0.6rem) / 5); border-radius: 1.25rem; background: var(--accent-doux); transform: translateX(calc(var(--i) * 100%)); transition: transform 460ms cubic-bezier(0.34, 1.32, 0.64, 1); }
  .mnav-item { position: relative; display: flex; flex-direction: column; align-items: center; gap: 0.15rem; min-height: 3.25rem; justify-content: center; border: 0; background: none; color: var(--texte-3); font-size: 0.68rem; font-weight: 500; cursor: pointer; -webkit-tap-highlight-color: transparent; transition: color 200ms var(--ease), transform 160ms var(--ease); }
  /* Le coussin suit l'onglet actif par le CSS seul (ne dépend pas du script) */
  .mnav:has(.mnav-item:nth-child(2).active) { --i: 1; }
  .mnav:has(.mnav-item:nth-child(3).active) { --i: 2; }
  .mnav:has(.mnav-item:nth-child(4).active) { --i: 3; }
  .mnav:has(.mnav-item:nth-child(5).active) { --i: 4; }
  .mnav-item:active { transform: scale(0.9); }
  .mnav-item .ti { font-size: 1.4rem; transition: transform 380ms cubic-bezier(0.34, 1.56, 0.64, 1); }
  .mnav-item.active { color: var(--accent-texte); font-weight: 600; }
  .mnav-item.active .ti { transform: translateY(-1px) scale(1.08); }
  @media (prefers-reduced-motion: reduce) { .mnav::before, .mnav-item, .mnav-item .ti { transition: none; } }
}

/* ════════ Cartes ════════ */
.card { background: var(--surface); border: 1px solid var(--trait-doux); border-radius: var(--rayon-grand); padding: 1.1rem 1.15rem; margin-bottom: 1rem; box-shadow: var(--ombre); }
.card-h { display: flex; justify-content: space-between; align-items: flex-start; gap: 0.75rem; margin-bottom: 0.85rem; }
.card-title { font-family: var(--police-titre); font-size: 1.08rem; font-weight: 600; letter-spacing: -0.02em; line-height: 1.25; display: flex; align-items: center; gap: 0.4rem; }
.card-sub { color: var(--texte-3); font-size: var(--t-legende); margin-top: 0.15rem; line-height: 1.45; }
.card-link { color: var(--accent-texte); font-size: var(--t-petit); font-weight: 600; cursor: pointer; white-space: nowrap; }
.ts-texte { color: var(--texte-2); line-height: 1.55; margin: 0 0 0.85rem; }
.ts-texte .ti { color: var(--accent-texte); }
.ts-vide { color: var(--texte-3); font-size: var(--t-petit); padding: 1rem 0; text-align: center; }
.ts-vide a, .ts-texte a, .ts-objectif-sur a { color: var(--texte); }
.ts-a { color: var(--texte-3); font-size: var(--t-legende); white-space: nowrap; display: inline-flex; align-items: center; gap: 0.25rem; }
.ts-boutons { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.85rem; }
.ts-sous-titre { font-weight: 600; font-size: var(--t-petit); margin: 1.1rem 0 0.5rem; }

/* Bandeaux (essai, e-mail à confirmer, notifications) */
.ts-bandeau { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem 0.85rem; padding: 0.9rem 1rem; margin-bottom: 1rem; border-radius: var(--rayon-grand); background: var(--accent-doux); color: var(--texte); font-size: var(--t-petit); }
.ts-bandeau > .ti { font-size: 1.3rem; color: var(--accent-texte); }
.ts-bandeau > span, .ts-bandeau > div:not(.ts-bandeau-actions):not(.ts-boutons) { flex: 1 1 14rem; }
.ts-bandeau-actions { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.ts-bandeau .ts-boutons { margin-top: 0; }

/* Offres (abonnement) */
.ts-offres { display: grid; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); gap: 0.6rem; margin: 0.6rem 0 0.85rem; }
.ts-offre { display: flex; flex-direction: column; gap: 0.2rem; padding: 0.9rem 1rem; border: 1px solid var(--trait); border-radius: var(--rayon); color: var(--texte); text-decoration: none; transition: border-color var(--duree-court) var(--ease); }
.ts-offre strong { font-weight: 600; }
.ts-offre span { color: var(--texte-3); font-size: var(--t-legende); }
.ts-offre-une { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-doux); }
@media (hover: hover) { .ts-offre:hover { border-color: var(--texte-3); } }

/* Mise en route (sur l'accueil) */
.ts-mise-en-route { border-color: color-mix(in oklch, var(--accent) 35%, var(--trait-doux)); }
.ts-etape { display: flex; align-items: center; gap: 0.7rem; padding: 0.55rem 0; font-size: var(--t-petit); border-top: 1px solid var(--trait-doux); }
.ts-etape > .ti { color: var(--texte-3); font-size: 1.2rem; }
.ts-etape.faite > .ti { color: var(--ok); }
.ts-etape.faite span { color: var(--texte-3); text-decoration: line-through; }
.ts-etape em, .ts-etape .btn { margin-left: auto; font-style: normal; color: var(--texte-3); font-size: var(--t-legende); }
.ts-etape .btn { color: var(--texte); }

/* Lignes (demandes, liste d'attente, fermetures, historique) */
.ts-liste, .ts-historique { display: flex; flex-direction: column; }
.ts-ligne { display: flex; align-items: center; gap: 0.7rem; padding: 0.7rem 0; border-top: 1px solid var(--trait-doux); }
.ts-ligne > .ti { color: var(--texte-3); font-size: 1.15rem; }
.ts-ligne-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.ts-ligne-txt strong { font-weight: 600; font-size: var(--t-petit); }
.ts-ligne-txt span { color: var(--texte-3); font-size: var(--t-legende); }
.ts-ligne.passe, .ts-ligne.barre { opacity: 0.55; }
.ts-ligne.barre strong { text-decoration: line-through; }
.ts-ligne[onclick] { cursor: pointer; }
.ts-historique { max-height: 15rem; overflow-y: auto; }

/* Chiffres du jour */
.kpi-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.75rem; margin-bottom: 1rem; }
.kpi-card { position: relative; background: var(--surface); border: 1px solid var(--trait-doux); border-radius: var(--rayon-grand); padding: 0.95rem 1rem; box-shadow: var(--ombre); min-width: 0; }
.kpi-icon { position: absolute; top: 0.9rem; right: 0.9rem; color: var(--texte-3); font-size: 1.1rem; }
.kpi-label { color: var(--texte-3); font-size: var(--t-legende); padding-right: 1.5rem; }
.kpi-value { font-family: var(--police-titre); font-size: 1.65rem; font-weight: 600; letter-spacing: -0.04em; line-height: 1.15; margin: 0.25rem 0 0.15rem; font-variant-numeric: tabular-nums; }
.kpi-value .unit { font-size: 0.6em; color: var(--texte-3); margin-left: 0.15em; letter-spacing: 0; }
.kpi-trend { display: flex; align-items: center; gap: 0.2rem; font-size: 0.75rem; color: var(--texte-3); }
.kpi-trend.up { color: var(--ok); }
.kpi-trend.down { color: var(--alerte); }
@media (max-width: 900px) { .kpi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Agenda du jour sur l'accueil */
.rdv-item { display: grid; grid-template-columns: 3rem 0.55rem minmax(0, 1fr) auto; gap: 0.6rem; align-items: center; padding: 0.7rem 0.15rem; border-top: 1px solid var(--trait-doux); cursor: pointer; }
.rdv-item.passe { opacity: 0.5; }
.rdv-time { color: var(--texte-2); font-variant-numeric: tabular-nums; font-size: var(--t-petit); font-weight: 500; }
.rdv-dot { width: 0.55rem; height: 0.55rem; border-radius: 50%; }
.rdv-name { font-weight: 600; font-size: var(--t-petit); line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rdv-svc { color: var(--texte-3); font-size: var(--t-legende); line-height: 1.35; }
.rdv-price { font-weight: 600; font-variant-numeric: tabular-nums; font-size: var(--t-petit); }
@media (hover: hover) { .rdv-item:hover { background: var(--trait-doux); border-radius: var(--rayon-petit); } }

/* Prochain client */
.ts-prochain-ligne { display: flex; gap: 0.85rem; align-items: center; }
.client-avatar { width: 3rem; height: 3rem; border-radius: 50%; display: grid; place-items: center; flex: none; color: oklch(0.99 0 0); font-weight: 600; font-family: var(--police-titre); }
.ts-prochain-nom { font-family: var(--police-titre); font-size: 1.5rem; font-weight: 600; letter-spacing: -0.03em; line-height: 1.15; }
.ts-dans { color: var(--accent-texte); font-size: var(--t-legende); font-weight: 600; margin-top: 0.15rem; }

/* Prestations les plus demandées */
.presta-item { padding: 0.5rem 0; }
.presta-header { display: flex; justify-content: space-between; font-size: var(--t-petit); margin-bottom: 0.35rem; }
.presta-name { font-weight: 500; }
.presta-count { color: var(--texte-3); font-variant-numeric: tabular-nums; }
.presta-bar { height: 0.4rem; border-radius: 999px; background: var(--surface-2); overflow: hidden; }
.presta-fill { height: 100%; border-radius: inherit; background: var(--accent); }

/* Graphique et objectif */
.chart-wrap { position: relative; height: 13rem; }
.ts-objectif-valeur { font-family: var(--police-titre); font-size: 2.2rem; font-weight: 600; letter-spacing: -0.045em; line-height: 1.1; font-variant-numeric: tabular-nums; }
.ts-objectif-valeur span { font-size: 0.55em; color: var(--texte-3); margin-left: 0.15em; }
.ts-objectif-sur { color: var(--texte-3); font-size: var(--t-legende); margin: 0.3rem 0 0.6rem; }
.ts-jauge { height: 0.5rem; border-radius: 999px; background: var(--surface-2); overflow: hidden; margin: 0.6rem 0 0.2rem; }
.ts-jauge > div { height: 100%; border-radius: inherit; background: var(--accent); }
.stat-row { display: flex; justify-content: space-between; padding: 0.6rem 0; border-top: 1px solid var(--trait-doux); font-size: var(--t-petit); }
.stat-label { color: var(--texte-3); }
.stat-val { font-weight: 600; }

.ts-grille-accueil { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 0 1rem; align-items: start; }
.ts-grille-egale { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
@media (max-width: 1024px) { .ts-grille-accueil, .ts-grille-egale { grid-template-columns: 1fr; } }

/* ════════ Accueil épuré (17/10/2026) : qui arrive, la journée, le mois en une ligne ════════
   Peu de surfaces : un seul panneau (le prochain rendez-vous), le reste posé à plat sur le fond. */
.ac-grille { display: grid; gap: 1.75rem; align-items: start; }
/* Téléphone : les deux colonnes s'effacent, l'ordre dit ce qu'on regarde d'abord */
.ac-col { display: contents; }
@media (max-width: 1024px) {
  .ac-semaine { order: 1; } .ac-prochain { order: 2; } .ac-journee { order: 3; } .ac-avenir { order: 4; } .ac-mois { order: 5; } .ac-lien { order: 6; } .ac-attente { order: 7; }
}
@media (min-width: 1025px) {
  .ac-grille { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 1.75rem 2.25rem; }
  .ac-semaine { grid-column: 1 / -1; }
  .ac-col { display: flex; flex-direction: column; gap: 1.75rem; min-width: 0; }
}

/* Les sept prochains jours : combien de rendez-vous, et une jauge de remplissage (minutes prises sur minutes ouvertes) */
.ac-semaine { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 0.4rem; }
.ac-jour { display: flex; flex-direction: column; align-items: center; gap: 0.15rem; min-height: 5.5rem; padding: 0.7rem 0.25rem 0.6rem; border: 1px solid var(--trait-doux); border-radius: var(--rayon); background: var(--surface); color: var(--texte); font: inherit; cursor: pointer; -webkit-tap-highlight-color: transparent; transition: background-color var(--duree-court) var(--ease), border-color var(--duree-court) var(--ease), transform var(--duree-ressort) var(--ressort); }
.ac-jour:active { transform: scale(0.97); }
@media (hover: hover) { .ac-jour:hover { border-color: var(--trait); background: var(--surface-2); } }
.ac-jour:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.ac-jour-nom { font-size: var(--t-legende); color: var(--texte-3); text-transform: capitalize; }
.ac-jour-num { font-family: var(--police-titre); font-size: 1.35rem; font-weight: 600; letter-spacing: -0.03em; line-height: 1.1; font-variant-numeric: tabular-nums; }
.ac-jour-n { font-size: var(--t-legende); font-weight: 600; color: var(--texte-2); font-variant-numeric: tabular-nums; min-height: 1.1em; }
.ac-jour-jauge { width: 70%; height: 3px; margin-top: auto; border-radius: 999px; background: var(--surface-2); overflow: hidden; }
.ac-jour-jauge > span { display: block; height: 100%; border-radius: inherit; background: var(--accent); }
.ac-jour.auj { border-color: var(--accent); background: var(--accent-doux); }
.ac-jour.auj .ac-jour-nom { color: var(--accent-texte); font-weight: 600; }
.ac-jour.ferme { background: transparent; border-style: dashed; }
.ac-jour.ferme .ac-jour-num, .ac-jour.ferme .ac-jour-n { color: var(--texte-3); }
.ac-jour.ferme .ac-jour-jauge { visibility: hidden; }
@media (max-width: 520px) {
  .ac-semaine { gap: 0.25rem; }
  .ac-jour { min-height: 4.9rem; padding-inline: 0; }
  .ac-jour-num { font-size: 1.15rem; }
  .ac-jour-unite { display: none; }
  .ac-jour.ferme .ac-jour-n { font-size: 0.68rem; }
}

/* Journée vide : ce qu'on peut faire, pas seulement le constat */
.ac-jour-vide { padding: 1rem 0 0.25rem; border-top: 1px solid var(--trait-doux); }
.ac-jour-vide p { margin: 0 0 0.85rem; color: var(--texte-2); font-size: var(--t-petit); }
.ac-jour-vide-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.ac-jour-vide-actions .btn { min-height: 2.75rem; }
/* À venir : les jours en petits intertitres */
.ac-avenir-jour { padding: 0.9rem 0.25rem 0.35rem; font-size: var(--t-legende); font-weight: 600; color: var(--texte-3); border-top: 1px solid var(--trait-doux); }
.ac-avenir-jour + .ac-rdv { border-top-color: transparent; }
/* Ta page de réservation */
.ac-lien-url { margin: 0.35rem 0 0.75rem; padding: 0.7rem 0.85rem; border: 1px solid var(--trait-doux); border-radius: var(--rayon); background: var(--surface); font-size: var(--t-petit); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; color: var(--texte-2); }
.ac-lien-actions { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.ac-prochain { background: var(--surface); border: 1px solid var(--trait-doux); border-radius: var(--rayon-grand); padding: 1.1rem 1.15rem; box-shadow: var(--ombre); }
.ac-etiquette { display: flex; justify-content: space-between; align-items: baseline; gap: 0.75rem; font-size: var(--t-legende); font-weight: 600; color: var(--texte-3); margin-bottom: 0.85rem; }
.ac-etiquette span { color: var(--accent-texte); }
.ac-prochain-ligne { display: flex; gap: 0.85rem; align-items: center; }
.ac-prochain-txt { min-width: 0; }
.ac-nom { font-family: var(--police-titre); font-size: 1.5rem; font-weight: 600; letter-spacing: -0.03em; line-height: 1.15; margin: 0; overflow-wrap: anywhere; }
.ac-detail { margin: 0.2rem 0 0; color: var(--texte-2); font-size: var(--t-petit); line-height: 1.4; }
.ac-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem; margin-top: 1rem; }
.ac-actions .btn { min-height: 2.75rem; justify-content: center; }
.ac-vide, .ac-fin { margin: 0; color: var(--texte-3); font-size: var(--t-petit); line-height: 1.5; padding: 0.25rem 0; }
.ac-vide a { color: var(--texte); }
.ac-titre { display: flex; justify-content: space-between; align-items: baseline; gap: 0.75rem; margin-bottom: 0.35rem; }
.ac-titre h2 { margin: 0; font-family: var(--police-titre); font-size: 1.08rem; font-weight: 600; letter-spacing: -0.02em; }
.ac-titre span { color: var(--texte-3); font-size: var(--t-legende); font-variant-numeric: tabular-nums; }
.ac-titre a { color: var(--accent-texte); font-size: var(--t-petit); font-weight: 600; text-decoration: none; white-space: nowrap; }
.ac-titre a .ti { vertical-align: -0.1em; }
.ac-rdv { display: grid; grid-template-columns: 3rem 0.55rem minmax(0, 1fr) auto; gap: 0.6rem; align-items: center; min-height: 3.5rem; padding: 0.55rem 0.25rem; border-top: 1px solid var(--trait-doux); cursor: pointer; transition: background-color var(--duree-court) var(--ease); -webkit-tap-highlight-color: transparent; }
.ac-rdv.passe { opacity: 0.5; }
.ac-rdv:active { background: var(--trait-doux); }
.ac-heure { color: var(--texte-2); font-variant-numeric: tabular-nums; font-size: var(--t-petit); font-weight: 500; }
.ac-rdv-txt { min-width: 0; }
.ac-rdv-txt .rdv-name, .ac-rdv-txt .rdv-svc { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (hover: hover) { .ac-rdv:hover { background: var(--trait-doux); border-radius: var(--rayon-petit); } }
.ac-rdv:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; border-radius: var(--rayon-petit); }
/* Le trait de l'heure qu'il est, entre ce qui est fait et ce qui reste */
.ac-maintenant { display: flex; align-items: center; gap: 0.5rem; margin: 0.2rem 0 0; color: var(--accent-texte); font-size: 0.75rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.ac-maintenant::after { content: ''; flex: 1; height: 1px; background: var(--accent); }
.ac-maintenant + .ac-rdv { border-top-color: transparent; }
.ac-mois-ligne { margin: 0.15rem 0 0.1rem; color: var(--texte-2); font-size: var(--t-petit); }
.ac-mois-ligne strong { color: var(--texte); font-family: var(--police-titre); font-size: 1.25rem; font-weight: 600; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.ac-mois .ts-jauge { margin-top: 0.7rem; }
.ac-attente .ts-ligne { padding-inline: 0.25rem; }


/* ════════ Agenda ════════ */
.ag-barre { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.6rem; margin-bottom: 0.85rem; }
.ag-barre-nav { display: flex; align-items: center; gap: 0.35rem; }
.ag-nav-btn { width: 2.4rem; height: 2.4rem; border-radius: 50%; border: 1px solid var(--trait); background: var(--surface); color: var(--texte-2); display: grid; place-items: center; font-size: 1.1rem; cursor: pointer; }
.ag-cur-label { font-family: var(--police-titre); font-weight: 600; font-size: 1.05rem; letter-spacing: -0.02em; min-width: 11rem; text-align: center; }
.ag-legend { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 0.85rem; }
.ag-leg-item { display: flex; align-items: center; gap: 0.4rem; font-size: var(--t-legende); color: var(--texte-2); padding: 0.25rem 0.6rem; border-radius: 6px; background: var(--surface); border: 1px solid var(--trait-doux); }
.ag-leg-swatch { width: 0.6rem; height: 0.6rem; border-radius: 3px; flex: none; }

/* La grille : 1 minute = 1 pixel (agenda.js en dépend), une colonne par jour */
.ag-grid { --ag-header-h: 3.25rem; --ag-pied-h: 1.9rem; display: flex; border: 1px solid var(--trait-doux); border-radius: var(--rayon-grand); overflow: hidden; background: var(--surface); }
.ag-time-col { width: 3rem; flex: none; border-right: 1px solid var(--trait-doux); }
.ag-time-h { height: var(--ag-header-h); border-bottom: 1px solid var(--trait-doux); }
.ag-time-cell { height: 60px; display: flex; justify-content: flex-end; padding: 0.15rem 0.45rem 0 0; font-size: 0.68rem; color: var(--texte-3); font-variant-numeric: tabular-nums; border-top: 1px solid var(--trait-doux); }
.ag-time-pied { height: var(--ag-pied-h); border-top: 1px solid var(--trait-doux); }
.ag-days-wrap { display: flex; flex: 1; overflow-x: auto; min-width: 0; }
.ag-day-col { flex: 1; min-width: 5.5rem; border-right: 1px solid var(--trait-doux); position: relative; }
.ag-day-col:last-child { border-right: 0; }
.ag-day-h { height: var(--ag-header-h); display: flex; align-items: center; gap: 0.3rem; padding: 0 0.4rem; border-bottom: 1px solid var(--trait-doux); background: var(--surface); position: sticky; top: 0; z-index: 3; cursor: pointer; overflow: hidden; color: var(--texte-3); font-size: 0.68rem; font-weight: 600; letter-spacing: 0.02em; }
.ag-day-label { flex: 1 1 auto; min-width: 0; display: flex; justify-content: center; pointer-events: none; }
.ag-day-date { display: flex; flex-direction: column; align-items: center; gap: 0.05rem; }
.ag-day-h .num { font-family: var(--police-titre); font-size: 1.05rem; font-weight: 600; color: var(--texte); letter-spacing: -0.02em; line-height: 1; }
.ag-day-h.today { color: var(--accent-texte); }
.ag-day-h.today .num { display: grid; place-items: center; min-width: 1.7rem; height: 1.7rem; padding: 0 0.3rem; border-radius: 999px; background: var(--accent); color: var(--sur-accent); }
.ag-view-day .ag-day-date { flex-direction: row; gap: 0.45rem; }
/* Vue semaine : la colonne est étroite, le numéro du jour passe sur sa propre ligne (avant, les pastilles « clients » et « € » l'écrasaient jusqu'à le rendre illisible) */
.ag-grid.ag-view-week { --ag-header-h: 4.9rem; }
.ag-view-week .ag-day-h { flex-wrap: wrap; align-content: center; justify-content: space-between; gap: 0.3rem 0.2rem; padding: 0.3rem 0.35rem; }
.ag-view-week .ag-day-label { order: -1; flex: 1 0 100%; }
.ag-view-week .ag-day-ca, .ag-view-week .ag-day-nb { padding-inline: 0.3rem; font-size: 0.62rem; }
.ag-view-week .ag-day-h .num { font-size: 1.05rem; }
.ag-day-ca, .ag-day-nb { flex: none; display: inline-flex; align-items: center; gap: 0.2rem; padding: 0.1rem 0.4rem; border-radius: 6px; background: var(--surface-2); color: var(--texte-2); font-size: 0.66rem; font-weight: 600; white-space: nowrap; font-variant-numeric: tabular-nums; }
.ag-day-nb { background: transparent; color: var(--texte-3); }
.ag-day-ca.vide, .ag-day-nb.vide { color: var(--texte-3); background: transparent; }
.ag-day-nb.vide .ti, .ag-view-week .ag-day-nb .ti { display: none; }
.ag-view-day .ag-day-ca, .ag-view-day .ag-day-nb { font-size: 0.75rem; padding: 0.15rem 0.55rem; }
.ag-day-col.ag-day-closed > .ag-day-h:not(.today) .num { color: var(--texte-3); }
.ag-hour { position: relative; cursor: pointer; }
.ag-hour.ag-half { height: 15px; }
.ag-hour.ag-half[data-min="0"] { border-top: 1px solid var(--trait-doux); }
.ag-hour.ag-half[data-min="30"] { border-top: 1px dashed color-mix(in oklch, var(--trait-doux) 70%, transparent); }
.ag-hour.ag-half.ag-off { background: repeating-linear-gradient(-45deg, color-mix(in oklch, var(--texte) 6%, transparent) 0 1px, transparent 1px 10.6066px), color-mix(in oklch, var(--surface-2) 70%, transparent); }
.ag-hour.drag-over { background: var(--accent-doux) !important; }
@media (hover: hover) { .ag-hour:not(.ag-off):hover { background: var(--accent-doux); } }
.ag-day-pied { height: var(--ag-pied-h); display: flex; align-items: center; justify-content: center; gap: 0.3rem; border-top: 1px solid var(--trait-doux); color: var(--texte-3); font-size: 0.68rem; font-weight: 600; cursor: pointer; }
.ag-day-pied .ti { font-size: 0.85rem; }
@media (hover: hover) { .ag-day-pied:hover { color: var(--texte); background: var(--trait-doux); } }
.ag-closed-overlay { position: absolute; top: var(--ag-header-h); left: 0; right: 0; bottom: var(--ag-pied-h); z-index: 2; display: flex; align-items: center; justify-content: center; cursor: pointer; background: color-mix(in oklch, var(--surface-2) 55%, transparent); }
.ag-closed-label { font-size: 0.7rem; font-weight: 600; color: var(--texte-3); }
.ag-now-line { position: absolute; left: 0; right: 0; height: 2px; background: var(--alerte); z-index: 4; pointer-events: none; }
.ag-now-line::before { content: ''; position: absolute; left: -4px; top: -3px; width: 8px; height: 8px; border-radius: 50%; background: var(--alerte); }

/* Rendez-vous : un aplat doux de la couleur de la prestation (pas de barre de côté) */
.ag-appt { position: absolute; left: 3px; right: 3px; z-index: 2; overflow: hidden; padding: 0.3rem 0.45rem; border-radius: 0.55rem; cursor: pointer; background: color-mix(in oklch, var(--c, var(--accent)) 16%, var(--surface)); border: 1px solid color-mix(in oklch, var(--c, var(--accent)) 38%, transparent); color: var(--texte); transform: translateZ(0); transition: box-shadow var(--duree-court) var(--ease); }
.ag-appt.dragging { opacity: 0.5; }
.ag-appt-row { display: flex; align-items: center; gap: 0.35rem; min-width: 0; }
.ag-appt-time { font-size: 0.68rem; font-weight: 600; color: color-mix(in oklch, var(--c, var(--accent)) 70%, var(--texte)); font-variant-numeric: tabular-nums; flex: none; }
.ag-appt-name { font-size: 0.78rem; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex: 1; min-width: 0; }
.ag-appt-svc { font-size: 0.7rem; color: var(--texte-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ag-appt-compact .ag-appt-svc { display: none; }
.ag-appt-pay { flex: none; display: inline-flex; align-items: center; gap: 0.15rem; font-size: 0.62rem; font-weight: 600; padding: 0.05rem 0.35rem; border-radius: 999px; background: var(--attente-doux); color: var(--attente); }
.ag-appt-pay.unpaid { background: var(--alerte-doux); color: var(--alerte); }
.ag-view-week .ag-appt-pay .lbl { display: none; }
@media (hover: hover) { .ag-appt:hover { box-shadow: 0 4px 12px oklch(0 0 0 / 0.12); } }
.ag-block-reel { position: absolute; left: 3px; right: 3px; z-index: 2; display: flex; align-items: center; gap: 0.3rem; padding: 0.25rem 0.45rem; overflow: hidden; border-radius: 0.55rem; cursor: pointer; font-size: 0.7rem; font-weight: 600; color: var(--texte-2); background: repeating-linear-gradient(-45deg, var(--surface-2) 0 6px, transparent 6px 12px), var(--surface); border: 1px dashed var(--trait); }
.ag-block-reel span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ag-block-h { flex: none; opacity: 0.8; }
.ag-drag-ghost { position: absolute; left: 3px; right: 3px; border-radius: 0.55rem; border: 2px dashed var(--accent); background: var(--accent-doux); z-index: 5; }
/* Couleurs des prestations : svc-1 à svc-6, tirées du nom (noyau.js, rangPresta), les mêmes que TEINTES_PRESTA */
.svc-1 { --c: #0099a6; } .svc-2 { --c: #d15c56; } .svc-3 { --c: #4a9a5e; }
.svc-4 { --c: #c0851f; } .svc-5 { --c: #7a6bc1; } .svc-6 { --c: #c65b93; }
.svc-autre { --c: #7a8185; }
@media (max-width: 768px) { .ag-cur-label { min-width: 0; font-size: 0.95rem; } }

/* ════════ Clients ════════ */
.cli-search { margin-bottom: 0.75rem; }
.cli-barre { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 0.6rem; margin-bottom: 0.5rem; }
.client-row { display: grid; grid-template-columns: 2.6rem minmax(0, 1fr) auto; gap: 0.75rem; align-items: center; padding: 0.75rem 0.25rem; border-top: 1px solid var(--trait-doux); cursor: pointer; }
.client-av { width: 2.6rem; height: 2.6rem; border-radius: 50%; display: grid; place-items: center; background: var(--surface-2); color: var(--texte-2); font-weight: 600; font-size: 0.85rem; }
.client-name { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.client-meta { color: var(--texte-3); font-size: var(--t-legende); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.client-amount { font-weight: 600; font-variant-numeric: tabular-nums; }
@media (hover: hover) { .client-row:hover { background: var(--trait-doux); border-radius: var(--rayon-petit); } }
.ts-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.4rem; margin-bottom: 1rem; }
.ts-stats:empty { display: none; }
.ts-stats > div { background: var(--surface-2); border-radius: var(--rayon-petit); padding: 0.6rem 0.5rem; text-align: center; display: flex; flex-direction: column; gap: 0.1rem; min-width: 0; }
.ts-stats strong { font-size: var(--t-petit); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ts-stats span { color: var(--texte-3); font-size: 0.7rem; }
@media (max-width: 480px) { .ts-stats { grid-template-columns: 1fr 1fr; } }

/* ════════ Disponibilités et paramètres ════════ */
.ts-jours { display: flex; flex-direction: column; margin-bottom: 1rem; }
.ts-jour { display: grid; grid-template-columns: 6rem 2.6rem auto 1fr; align-items: center; gap: 0.5rem 0.75rem; padding: 0.7rem 0; border-top: 1px solid var(--trait-doux); }
.ts-jour-nom { font-weight: 600; font-size: var(--t-petit); }
.ts-jour-heures, .ts-jour-pause { display: flex; align-items: center; gap: 0.4rem; }
.ts-jour .input[type="time"] { width: 6.6rem; padding-inline: 0.6rem 0.4rem; }
.ts-jour-pause .input[type="time"] { width: 6.2rem; }
.ts-jour.ferme .ts-jour-heures, .ts-jour.ferme .ts-jour-pause { opacity: 0.35; }
@media (max-width: 760px) {
  .ts-jour { grid-template-columns: 1fr auto; }
  .ts-jour-heures, .ts-jour-pause { grid-column: 1 / -1; }
}
.ts-form-ligne { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; margin-bottom: 0.75rem; }
.ts-form-ligne > .input { flex: 1 1 10rem; min-width: 0; }
.ts-form-ligne > .input[type="time"], .ts-form-ligne > .input[type="date"] { flex: 0 1 10.5rem; }
.ts-grille2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem; margin-bottom: 0.75rem; }
@media (max-width: 560px) { .ts-grille2 { grid-template-columns: 1fr; } }
.ts-coche { display: inline-flex; align-items: center; gap: 0.5rem; font-size: var(--t-petit); color: var(--texte-2); }
.ts-coche input { accent-color: var(--accent); width: 1.1rem; height: 1.1rem; }
.ts-prestas { display: flex; flex-direction: column; gap: 0.5rem; margin-bottom: 1rem; }
.ts-presta { display: grid; grid-template-columns: auto minmax(0, 1fr) 6.2rem 5.6rem 5.6rem auto; align-items: center; gap: 0.5rem; padding: 0.6rem; border: 1px solid var(--trait-doux); border-radius: var(--rayon); }
.ts-presta-desc { grid-column: 2 / -1; font-size: var(--t-petit) !important; min-height: 2.4rem !important; }
.ts-presta.inactive .input { opacity: 0.45; }
.ts-presta-ordre { display: flex; flex-direction: column; gap: 0.15rem; }
.ts-presta-ordre .btn { --h: 1.35rem; padding: 0 0.35rem; }
.ts-unite { position: relative; display: block; }
.ts-unite .input { width: 100%; padding-right: 2.2rem; }
.ts-unite span { position: absolute; right: 0.65rem; top: 50%; transform: translateY(-50%); color: var(--texte-3); font-size: var(--t-legende); pointer-events: none; }
.ts-presta-ajout .ts-unite { flex: 0 0 6rem; }
@media (max-width: 720px) {
  .ts-presta { grid-template-columns: auto 1fr 1fr auto; }
  .ts-presta-nom { grid-column: 2 / -1; }
  .ts-presta .ts-unite:nth-of-type(1) { grid-column: 2; }
  .ts-presta-desc { grid-column: 1 / -1; }
}
.ts-lien { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.6rem; padding: 0.75rem 0.9rem; margin-bottom: 0.75rem; border-radius: var(--rayon); background: var(--surface-2); }
.ts-lien a { color: var(--texte); font-weight: 600; word-break: break-all; }
.ts-regle { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; padding: 0.7rem 0; border-top: 1px solid var(--trait-doux); font-size: var(--t-petit); }
.ts-regle > .input { width: auto; flex: 0 0 auto; min-width: 9rem; }
/* La façon d'écrire du salon, sous la connexion Instagram */
.ts-style:not(:empty) { margin-top: 1.1rem; padding-top: 1rem; border-top: 1px solid var(--trait-doux); }
.ts-style-titre { font-size: var(--t-petit); font-weight: 600; color: var(--texte); margin: 0 0 0.5rem; }
.ts-style-erreur { color: var(--alerte); }
.ts-style textarea.input { min-height: 11rem; }
.ts-danger { margin-top: 1rem; }
.ts-danger summary { cursor: pointer; color: var(--alerte); font-size: var(--t-petit); padding: 0.4rem 0; }
.ts-danger .ts-texte { margin-top: 0.6rem; }
.ts-perso-logo { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; margin-bottom: 0.4rem; }
.ts-perso-logo .ts-boutons { margin-top: 0; }
.ts-logo { width: 4rem; height: 4rem; border-radius: 1rem; object-fit: cover; flex: none; }
.ts-logo-vide { display: grid; place-items: center; background: var(--texte); color: var(--fond); font-family: var(--police-titre); font-weight: 600; font-size: 1.5rem; }
.ts-couleurs { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.ts-couleur { width: 2.25rem; height: 2.25rem; border-radius: 50%; border: 2px solid var(--surface); box-shadow: 0 0 0 1px var(--trait); cursor: pointer; }
.ts-couleur.choisie { box-shadow: 0 0 0 2px var(--texte); }

/* ════════ Fenêtres (nouveau RDV, modifier, fiche client) ════════ */
.modal-bg { position: fixed; inset: 0; z-index: 60; display: flex; align-items: center; justify-content: center; padding: 1rem; background: oklch(0 0 0 / 0.45); opacity: 0; visibility: hidden; transition: opacity var(--duree-depart) var(--ease-depart), visibility 0s linear var(--duree-depart); }
.modal-bg.open { opacity: 1; visibility: visible; transition: opacity 220ms var(--ease); }
.modal { position: relative; width: min(100%, 32rem); max-height: calc(100dvh - 2rem); overflow-y: auto; overscroll-behavior: contain; background: var(--fond); border: 1px solid var(--trait-doux); border-radius: var(--rayon-grand); padding: 1.35rem 1.25rem 1.1rem; box-shadow: 0 30px 80px oklch(0 0 0 / 0.3); transform: translateY(10px) scale(0.985); transition: transform var(--duree-depart) var(--ease-depart); }
.modal-bg.open .modal { transform: none; transition: transform 320ms var(--ease-sortie); }
.modal-close { position: absolute; top: 0.9rem; right: 0.9rem; width: 2.25rem; height: 2.25rem; border-radius: 50%; border: 0; background: var(--surface-2); color: var(--texte-2); display: grid; place-items: center; font-size: 1.05rem; cursor: pointer; }
.modal-title { font-family: var(--police-titre); font-size: 1.35rem; font-weight: 600; letter-spacing: -0.03em; padding-right: 2.5rem; margin-bottom: 1rem; }
.rdv-sec { padding: 0.85rem 0; border-top: 1px solid var(--trait-doux); }
.rdv-sec-t { font-size: var(--t-legende); font-weight: 600; color: var(--texte-3); margin-bottom: 0.5rem; }
.f-group { margin-bottom: 0.5rem; }
.f-group:last-child { margin-bottom: 0; }
.f-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0.5rem; }
.f-row .f-group { margin-bottom: 0; min-width: 0; }
/* Date et heure : un champ date a une largeur propre que Safari impose ; on la rend à la colonne (sinon les deux champs se chevauchent) */
.f-group > .input, .f-row .input { display: block; width: 100%; min-width: 0; max-width: 100%; box-sizing: border-box; }
input[type="date"].input, input[type="time"].input { -webkit-appearance: none; appearance: none; min-height: 2.75rem; text-align: left; }
input[type="date"].input::-webkit-date-and-time-value, input[type="time"].input::-webkit-date-and-time-value { text-align: left; min-width: 0; }
.modal-info { display: flex; gap: 0.5rem; align-items: flex-start; padding: 0.6rem 0.75rem; border-radius: var(--rayon-petit); background: var(--surface-2); font-size: var(--t-legende); }
.modal-info-danger { background: var(--alerte-doux); color: var(--alerte); }
.modal-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 0.5rem; padding-top: 1rem; border-top: 1px solid var(--trait-doux); margin-top: 0.4rem; }
.modal-actions .btn { flex: 1 1 auto; }
.rdv-badges { margin: -0.4rem 0 0.75rem; }
.rdv-badge { display: inline-flex; align-items: center; gap: 0.3rem; padding: 0.15rem 0.55rem; border-radius: 6px; background: var(--surface-2); color: var(--texte-2); font-size: var(--t-legende); font-weight: 600; }
.rdv-badge:empty { display: none; }
.rdv-badge-ok { background: var(--accent-doux); color: var(--accent-texte); }
.rdv-contact { display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem; margin: 0.5rem 0 0.25rem; }
.autocomplete-suggestions { position: absolute; left: 0; right: 0; top: calc(100% + 4px); z-index: 5; background: var(--surface); border: 1px solid var(--trait); border-radius: var(--rayon); box-shadow: var(--ombre); overflow: hidden; }
.autocomplete-item { display: flex; justify-content: space-between; gap: 0.5rem; padding: 0.65rem 0.85rem; cursor: pointer; font-size: var(--t-petit); }
.autocomplete-item + .autocomplete-item { border-top: 1px solid var(--trait-doux); }
.ac-visites { color: var(--texte-3); font-size: var(--t-legende); }
@media (hover: hover) { .autocomplete-item:hover { background: var(--surface-2); } }
@media (max-width: 560px) {
  .modal-bg { align-items: flex-end; padding: 0; }
  .modal { width: 100%; max-height: 92dvh; border-radius: 1.25rem 1.25rem 0 0; padding-bottom: calc(1.1rem + env(safe-area-inset-bottom, 0px)); transform: translateY(24px); }
}

/* Sélecteur d'heure en roue (ROUE_CRAN = 38 px dans agenda.js) */
.heure-btn { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; text-align: left; cursor: pointer; font-variant-numeric: tabular-nums; }
.heure-btn .ti { color: var(--texte-3); }
.roue-wrap { position: relative; margin-top: 0.4rem; }
.roue { height: 152px; overflow-y: auto; scroll-snap-type: y mandatory; -webkit-overflow-scrolling: touch; scrollbar-width: none; border: 1px solid var(--trait); border-radius: var(--rayon); background: var(--surface); }
.roue::-webkit-scrollbar { display: none; }
.roue-piste { padding: 57px 0; }
.roue-cran { height: 38px; display: flex; align-items: center; justify-content: center; scroll-snap-align: center; font-family: var(--police-titre); font-size: 1rem; font-weight: 500; color: var(--texte-3); font-variant-numeric: tabular-nums; transition: color 160ms var(--ease), font-size 160ms var(--ease); }
.roue-cran.sel { color: var(--texte); font-size: 1.2rem; font-weight: 600; }
.roue-cadre { position: absolute; left: 0.4rem; right: 0.4rem; top: 50%; height: 38px; transform: translateY(-50%); pointer-events: none; border-radius: var(--rayon-petit); background: var(--accent-doux); }

/* Fenêtre de confirmation (noyau.js, showConfirm) */
.confirmer-fond { position: fixed; inset: 0; z-index: 90; display: flex; align-items: center; justify-content: center; padding: 1rem; background: oklch(0 0 0 / 0.45); animation: fond-entre 180ms var(--ease); }
.confirmer-boite { width: min(100%, 22rem); background: var(--fond); border: 1px solid var(--trait-doux); border-radius: var(--rayon-grand); padding: 1.35rem 1.25rem 1.1rem; box-shadow: 0 30px 80px oklch(0 0 0 / 0.3); animation: boite-entre 260ms var(--ease-sortie); }
.confirmer-boite p { margin: 0 0 1.1rem; line-height: 1.5; }
.confirmer-boutons { display: flex; gap: 0.5rem; justify-content: flex-end; }
@keyframes fond-entre { from { opacity: 0; } }
@keyframes boite-entre { from { opacity: 0; transform: translateY(8px) scale(0.985); } }

/* Messages éphémères */
.toast-wrap { position: fixed; left: 50%; bottom: calc(1rem + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%); z-index: 95; display: flex; flex-direction: column; align-items: center; gap: 0.4rem; pointer-events: none; width: min(92vw, 26rem); }
.toast { padding: 0.7rem 1rem; border-radius: var(--rayon); background: var(--texte); color: var(--fond); font-size: var(--t-petit); font-weight: 500; box-shadow: var(--ombre); animation: toast-entre 260ms var(--ease-sortie); transition: opacity var(--duree-depart) var(--ease-depart), transform var(--duree-depart) var(--ease-depart); }
.toast.danger, .toast.error, .toast.r { background: var(--alerte); color: oklch(0.99 0 0); }
.toast.success { background: var(--ok); color: oklch(0.99 0 0); }
.toast.dismiss { opacity: 0; transform: translateY(6px); }
@keyframes toast-entre { from { opacity: 0; transform: translateY(8px); } }
@media (max-width: 768px) { .toast-wrap { bottom: calc(var(--mnav-h) + 0.75rem + env(safe-area-inset-bottom, 0px)); } }

/* ════════ Mise en route (première connexion, plein écran) ════════ */
.mer { position: fixed; inset: 0; z-index: 70; background: var(--fond); overflow-y: auto; padding: max(1.5rem, env(safe-area-inset-top)) 1rem max(1.5rem, env(safe-area-inset-bottom)); }
.mer-carte { width: min(100%, 34rem); margin: 0 auto; display: flex; flex-direction: column; gap: 1rem; }
.mer-haut { display: flex; flex-direction: column; gap: 0.7rem; }
.mer-marque { font-size: 1.35rem; align-self: flex-start; }
.mer-etapes { display: flex; gap: 0.35rem; }
.mer-etapes span { flex: 1; height: 0.25rem; border-radius: 999px; background: var(--trait); }
.mer-etapes span.fait, .mer-etapes span.actif { background: var(--accent); }
.mer-compteur { color: var(--texte-3); font-size: var(--t-legende); }
.mer-corps { display: flex; flex-direction: column; gap: 0.75rem; }
.mer-corps h2, .mer-corps h3 { font-size: 1.6rem; letter-spacing: -0.035em; }
.mer-intro { color: var(--texte-2); }
.mer-champ { display: flex; flex-direction: column; gap: 0.35rem; font-size: var(--t-petit); font-weight: 500; color: var(--texte-2); }
.mer-champ em { font-style: normal; color: var(--texte-3); font-weight: 400; }
.mer-prestas, .mer-jours { display: flex; flex-direction: column; gap: 0.5rem; }
.mer-presta { display: grid; grid-template-columns: minmax(0, 1fr) 6.5rem 5.5rem auto; gap: 0.4rem; align-items: center; }
.mer-prix { position: relative; }
.mer-prix span { position: absolute; right: 0.7rem; top: 50%; transform: translateY(-50%); color: var(--texte-3); pointer-events: none; }
.mer-jour { display: grid; grid-template-columns: 2.6rem 5.5rem 1fr auto 1fr; gap: 0.4rem; align-items: center; }
.mer-jour.ferme .input { opacity: 0.4; }
.mer-jour-nom { font-weight: 600; font-size: var(--t-petit); }
/* La pause (une fois pour tous les jours ouverts) et les règles du parcours (17/10/2026) */
.mer-pause { display: grid; grid-template-columns: 2.6rem 5.5rem 1fr auto 1fr; gap: 0.4rem; align-items: center; padding-top: 0.75rem; border-top: 1px solid var(--trait-doux); }
.mer-pause.ferme .input { opacity: 0.4; }
.mer-aide { margin: -0.25rem 0 0; color: var(--texte-3); font-size: var(--t-legende); }
.mer-regle { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 0.85rem 1rem; border: 1px solid var(--trait-doux); border-radius: var(--rayon); background: var(--surface); cursor: pointer; -webkit-tap-highlight-color: transparent; }
.mer-regle > span:first-child { display: flex; flex-direction: column; gap: 0.15rem; color: var(--texte-2); font-size: var(--t-legende); }
.mer-regle strong { color: var(--texte); font-size: var(--t-petit); }
.mer-corps .ts-perso-logo { margin-bottom: 0.25rem; }
.mer-lien { display: flex; flex-direction: column; gap: 0.6rem; padding: 1rem; border-radius: var(--rayon-grand); background: var(--surface-2); }
.mer-lien strong { font-size: 1.05rem; word-break: break-all; }
.mer-lien .ts-boutons { margin-top: 0; }
.mer-insta { color: var(--texte-2); padding-left: 1.2rem; display: grid; gap: 0.35rem; }
.mer-actions { display: flex; justify-content: space-between; gap: 0.5rem; padding-top: 0.5rem; }
.mer-actions .btn { min-height: 3rem; }
@media (max-width: 480px) {
  .mer-presta { grid-template-columns: 1fr 1fr auto; }
  .mer-presta > .input[data-champ="nom"] { grid-column: 1 / -1; }
  .mer-jour, .mer-pause { grid-template-columns: 2.6rem 4.4rem minmax(0, 1fr) auto minmax(0, 1fr); }
}

/* ── Le Pro se demande : il ne se paie qu'une fois le bot branché (16/10/2026) ── */
button.ts-offre { font: inherit; text-align: left; background: none; cursor: pointer; width: 100%; }
.ts-offre-attente { cursor: default; }
.ts-offre-attente strong i, .ts-attente i { color: var(--accent-texte); }
.ts-attente { display: inline-flex; align-items: center; gap: 0.35rem; padding: 0 0.6rem; font-size: var(--t-legende); color: var(--texte-2); }

/* ── Le lien de paiement de l'acompte, sous la prestation (16/10/2026) ── */
.ts-presta-lien { grid-column: 2 / -1; position: relative; display: block; }
.ts-presta-lien i { position: absolute; left: 0.75rem; top: 50%; transform: translateY(-50%); color: var(--texte-3); pointer-events: none; }
.ts-presta-lien .input { width: 100%; padding-left: 2.2rem; font-size: var(--t-petit) !important; min-height: 2.4rem !important; }
.ts-presta-aide { grid-column: 2 / -1; margin: -0.2rem 0 0; font-size: var(--t-legende); color: var(--texte-3); }
@media (max-width: 720px) { .ts-presta-lien, .ts-presta-aide { grid-column: 1 / -1; } }