/* ─────────────────────────────────────────────────────────────────────────────
   Tispo — socle de style, pensé RTL d'abord.

   RÈGLE ABSOLUE : aucune propriété physique de côté dans ce fichier ni dans les
   pages. Pas de margin-left, padding-right, left:, right:, text-align:left.
   Uniquement les propriétés logiques (…-inline-start / …-inline-end), qui se
   retournent seules quand dir passe de rtl à ltr.

   Les seules exceptions légitimes sont les propriétés qui ne SE retournent pas
   toutes seules et qu'il faut donc traiter explicitement :
     transform: translateX(), box-shadow (décalage X), background-position,
     linear-gradient(to right), et les icônes directionnelles.
   Elles sont regroupées et commentées plus bas.
   ───────────────────────────────────────────────────────────────────────────── */

:root {
  /* Palette claire */
  --bg:        #FAF9FC;
  --surface:   #FFFFFF;
  --surface-2: #F4F2F8;
  --ink:       #17151F;
  --muted:     #6B6577;
  --line:      #E7E3EF;
  --accent:    #7C3AED;
  --accent-ink:#FFFFFF;
  --accent-soft:#F1EAFE;
  --ok:        #0E9F6E;
  --warn:      #B45309;
  --danger:    #E11D48;

  --r-sm: 10px;  --r-md: 14px;  --r-lg: 20px;  --r-pill: 999px;
  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 24px; --sp-6: 32px;

  /* L'ombre porte un décalage X : elle NE se retourne PAS avec dir.
     On la garde donc purement verticale, ce qui la rend neutre au sens de
     lecture — c'est la solution la plus simple et la plus robuste. */
  --shadow-1: 0 1px 2px rgba(23,21,31,.06), 0 2px 8px rgba(23,21,31,.05);
  --shadow-2: 0 4px 12px rgba(23,21,31,.08), 0 12px 32px rgba(23,21,31,.10);

  --font: 'Assistant', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --tap: 44px;                      /* cible tactile minimale */
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #131118; --surface: #1C1926; --surface-2: #262233;
    --ink: #F3F1F8; --muted: #A49DB4; --line: #322C42;
    --accent: #A78BFA; --accent-ink: #17151F; --accent-soft: #2A2140;
  }
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--font);
  /* L'hébreu n'a ni ascendantes ni descendantes latines : il lui faut plus
     d'interligne que le 1.4 habituel pour rester lisible. */
  line-height: 1.65;
  background: var(--bg);
  color: var(--ink);
  /* En hébreu, jamais de letter-spacing : les lettres ne tolèrent pas
     l'écartement et le mot se disloque. */
  letter-spacing: normal;
}

/* Titres. Pas de text-transform: uppercase — l'hébreu n'a pas de majuscules,
   la règle ne ferait qu'abîmer les mots latins mélangés. */
h1, h2, h3 { margin: 0 0 var(--sp-3); line-height: 1.3; font-weight: 800; letter-spacing: -.01em; }
h1 { font-size: 26px; } h2 { font-size: 20px; } h3 { font-size: 16px; }
p  { margin: 0 0 var(--sp-3); }

/* Alignement logique : « start », jamais « left ». */
.t-start  { text-align: start; }
.t-center { text-align: center; }
.t-end    { text-align: end; }

/* ─── Isolation bidi ──────────────────────────────────────────────────────────
   LE piège n°1 de l'hébreu. Les chiffres restent LTR dans un texte RTL, et le
   moteur bidi réordonne visuellement ce qui les entoure. Sans isolation,
   « 14:00-14:30 » peut s'afficher « 14:30-14:00 », et un numéro de téléphone
   collé à du texte hébreu se disloque.

   .num  → toute valeur numérique : heure, prix, téléphone, date.
   <bdi> → tout contenu saisi par un utilisateur (nom de salon, de prestation),
           dont on ne connaît pas la langue à l'avance.
   ───────────────────────────────────────────────────────────────────────────── */
.num, bdi, time, .phone, .price {
  unicode-bidi: isolate;
  font-variant-numeric: tabular-nums;
}
/* Une plage horaire est un bloc LTR entier : on isole ET on force la direction,
   sinon le tiret sépare deux îlots que le bidi peut permuter. */
.range { unicode-bidi: isolate; direction: ltr; display: inline-block; }

/* ─── Boutons ─────────────────────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2);
  min-height: var(--tap); padding-inline: var(--sp-5); padding-block: 10px;
  border: 1px solid transparent; border-radius: var(--r-pill);
  font: inherit; font-size: 16px; font-weight: 700; cursor: pointer;
  background: var(--surface-2); color: var(--ink);
  transition: transform .12s ease, background .15s ease, opacity .15s ease;
  -webkit-tap-highlight-color: transparent;
}
.btn:active { transform: scale(.97); }
.btn:disabled { opacity: .45; cursor: not-allowed; transform: none; }
.btn-primary { background: var(--accent); color: var(--accent-ink); box-shadow: var(--shadow-1); }
.btn-ghost   { background: transparent; border-color: var(--line); }
.btn-danger  { background: transparent; border-color: var(--danger); color: var(--danger); }
.btn-block   { display: flex; inline-size: 100%; }
.btn-sm      { min-height: 34px; font-size: 14px; padding-inline: var(--sp-3); }

/* Flèche directionnelle : le glyphe « ← » est correct en RTL (il pointe vers
   l'avant du sens de lecture). En LTR on le retourne. C'est exactement le genre
   d'icône qui DOIT être miroitée — contrairement à une horloge ou à un ▶ média. */
.icon-forward { display: inline-block; }
:root[dir="ltr"] .icon-forward, [dir="ltr"] .icon-forward { transform: scaleX(-1); }

/* ─── Surfaces ────────────────────────────────────────────────────────────── */
.card {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-lg); padding: var(--sp-4); box-shadow: var(--shadow-1);
}
.stack   { display: flex; flex-direction: column; gap: var(--sp-3); }
.row     { display: flex; align-items: center; gap: var(--sp-3); }
.row-between { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); }
.grow    { flex: 1; min-inline-size: 0; }
.muted   { color: var(--muted); }
.small   { font-size: 13px; }
.hidden  { display: none !important; }

/* NB : flex-direction: row se retourne DÉJÀ avec dir=rtl.
   Ne jamais « corriger » un alignement RTL avec row-reverse : cela inverse
   une deuxième fois et casse la version LTR. */

/* ─── Champs ──────────────────────────────────────────────────────────────── */
label { display: block; font-size: 14px; font-weight: 700; margin-block-end: 6px; }
input, select, textarea {
  inline-size: 100%; min-height: var(--tap);
  padding-inline: var(--sp-3); padding-block: 10px;
  border: 1px solid var(--line); border-radius: var(--r-md);
  background: var(--surface); color: var(--ink);
  font: inherit; font-size: 16px;          /* < 16px ferait zoomer iOS au focus */
  text-align: start;
}
input:focus-visible, select:focus-visible, textarea:focus-visible, .btn:focus-visible, .slot:focus-visible {
  outline: 2px solid var(--accent); outline-offset: 2px;
}
/* Email, téléphone et mot de passe se saisissent de gauche à droite même dans
   une page RTL — mais restent alignés du côté « start » de la mise en page. */
input[type="email"], input[type="tel"], input[type="url"], input[type="password"] {
  direction: ltr; text-align: start;
}
:root[dir="rtl"] input[type="email"],
:root[dir="rtl"] input[type="tel"],
:root[dir="rtl"] input[type="url"] { text-align: right; }

.field-error { color: var(--danger); font-size: 13px; margin-block-start: 4px; }

/* ─── Grille de créneaux ──────────────────────────────────────────────────────
   Choix délibéré : PAS de <input type="time"> ni de roue de sélection. Une
   grille de boutons est plus fiable en RTL (aucun réordonnancement bidi
   possible), plus rapide au pouce, et reflète la réalité métier : les créneaux
   sont discrets, pas continus.
   ───────────────────────────────────────────────────────────────────────────── */
.slots { display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: var(--sp-2); }
.slot {
  min-height: var(--tap); border: 1px solid var(--line); border-radius: var(--r-md);
  background: var(--surface); color: var(--ink);
  font: inherit; font-size: 16px; font-weight: 700; cursor: pointer;
  font-variant-numeric: tabular-nums; unicode-bidi: isolate;
  transition: background .12s ease, border-color .12s ease, transform .12s ease;
}
.slot:active { transform: scale(.96); }
.slot[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }

/* ─── Bandeau de jours ────────────────────────────────────────────────────────
   Défile horizontalement. En RTL le premier jour est à DROITE : c'est le
   comportement natif du flux, il n'y a rien à inverser — à condition de ne pas
   piloter le défilement en JS avec scrollLeft (dont le signe varie d'un moteur
   à l'autre). On utilise scrollIntoView, qui est neutre.
   ───────────────────────────────────────────────────────────────────────────── */
.days { display: flex; gap: var(--sp-2); overflow-x: auto; padding-block-end: var(--sp-2); scrollbar-width: thin; }
.day {
  flex: 0 0 auto; inline-size: 62px; padding: var(--sp-2) var(--sp-1);
  border: 1px solid var(--line); border-radius: var(--r-md);
  background: var(--surface); cursor: pointer; text-align: center;
  font: inherit; color: var(--ink);
}
.day[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.day .dow { font-size: 12px; font-weight: 700; opacity: .75; }
.day .dnum { font-size: 19px; font-weight: 800; font-variant-numeric: tabular-nums; }
.day.closed { opacity: .38; }
.day:disabled { cursor: not-allowed; }

/* ─── Listes sélectionnables (prestations, coiffeurs) ─────────────────────── */
.pick {
  display: flex; align-items: center; gap: var(--sp-3); inline-size: 100%;
  padding: var(--sp-3); border: 1px solid var(--line); border-radius: var(--r-md);
  background: var(--surface); color: var(--ink); font: inherit; text-align: start; cursor: pointer;
}
.pick[aria-pressed="true"] { border-color: var(--accent); background: var(--accent-soft); }
.pick .t   { font-weight: 700; }
.pick .sub { font-size: 13px; color: var(--muted); }
.avatar {
  inline-size: 42px; block-size: 42px; border-radius: 50%; flex: 0 0 auto;
  display: grid; place-items: center; font-weight: 800; color: #fff; font-size: 17px;
}

/* ─── Divers ──────────────────────────────────────────────────────────────── */
.badge {
  display: inline-block; padding: 2px 10px; border-radius: var(--r-pill);
  font-size: 12px; font-weight: 700; background: var(--surface-2); color: var(--muted);
}
.badge-warn { background: #FEF3C7; color: var(--warn); }
.wrap { max-inline-size: 560px; margin-inline: auto; padding: var(--sp-4); }

.spinner {
  inline-size: 22px; block-size: 22px; border-radius: 50%;
  border: 2.5px solid var(--line); border-block-start-color: var(--accent);
  animation: spin .7s linear infinite; margin-inline: auto;
}
@keyframes spin { to { transform: rotate(360deg); } }

.toast {
  position: fixed; inset-block-end: 20px; inset-inline: var(--sp-4);
  max-inline-size: 420px; margin-inline: auto;
  background: var(--ink); color: var(--bg);
  padding: var(--sp-3) var(--sp-4); border-radius: var(--r-md);
  box-shadow: var(--shadow-2); z-index: 60; text-align: center;
}
.toast.err { background: var(--danger); color: #fff; }

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}