/* ============================================================
   REZA — feuille de style unique · direction « BRONZE 2.0 »

   Le principe tient en une phrase : il y a UNE source de lumière,
   en haut de la page, et tout le relief en découle.
     · une surface POSÉE (carte, bouton, créneau libre) reçoit un
       filet de bronze sur son bord supérieur et une ombre en dessous ;
     · une surface SAISISSABLE (champ, piste, créneau pris) est
       creusée dans la page ;
     · une surface CHOISIE s'allume — elle ne se remplit pas.

   Le fond sombre, le bronze, les coins arrondis et les halos sont
   ceux d'origine. Ce qui change : l'échelle de tailles, le rythme
   des espaces, la finesse des ombres et le contraste.
   ============================================================ */

/* ------------------------------------------------------------
   1. LES JETONS (les valeurs de base, réglées une seule fois)
   ------------------------------------------------------------ */
:root {
  /* --- Fond et surfaces --- */
  --bg: #0b0d12;          /* le fond de page, inchangé */
  --bg-soft: #10141c;     /* le « creux » : champs, pistes, créneaux pris */
  --card: #141924;        /* toute surface posée */
  --card-2: #1a2030;      /* surface posée un cran plus haut */
  --card-3: #1f2637;      /* survol des surfaces posées */
  --line: rgba(233,238,247,.10);    /* filet de séparation discret */
  --line-2: rgba(233,238,247,.17);  /* filet un peu plus present */
  --line-i: #6a7284;      /* bordure d'une cible cliquable — 3,6:1 */

  /* --- Encre --- */
  --text: #e9eef7;        /* 15:1 sur une carte */
  --muted: #93a0b7;       /* texte secondaire — 6,7:1 sur une carte */
  --muted-2: #7c8aa3;     /* micro-libellés en capitales — 5:1 */

  /* --- Marque : bronze par défaut, 7 palettes plus bas ---
     Une palette = six valeurs atomiques, rien d'autre. */
  --brand-rgb: 231,176,113;
  --brand-lt: #edbb80;    /* haut du dégradé */
  --brand-mid: #c07f3c;   /* milieu du dégradé */
  --brand-2: #b87335;     /* bas du dégradé */
  --on-brand: #1e1104;    /* l'encre posée sur un aplat de marque */
  --halo-1: #241a10;      /* halo chaud, haut de page à droite */
  --halo-2: #1e160e;      /* halo chaud, haut de page à gauche */

  /* --- États : fixes, ils ne suivent PAS la palette du salon ---
     (sinon « Confirmé » devient bleu chez un salon ambré) */
  --accent: #4ade9a;      /* positif : code promo appliqué, réduction */
  --ok: #4ade9a;
  --info: #7fb6ff;
  --warn: #f6bf57;
  --danger: #ff7a87;

  /* --- Rayons : un contrôle ne s'arrondit pas comme une page --- */
  --r1: 10px;             /* contrôles */
  --r2: 14px;             /* cartes */
  --r3: 22px;             /* grandes surfaces */
  --radius: 14px;         /* nom d'origine, conservé */

  /* --- Ombres : deux couches, jamais trois --- */
  --sh1: 0 1px 2px rgba(0,0,0,.55);
  --sh2: 0 1px 2px rgba(0,0,0,.5), 0 18px 44px -20px rgba(0,0,0,.85);
  --sh3: 0 2px 4px rgba(0,0,0,.5), 0 34px 70px -28px rgba(0,0,0,.9);
  --shadow: 0 2px 4px rgba(0,0,0,.5), 0 34px 70px -28px rgba(0,0,0,.9); /* nom d'origine */

  /* --- Rythme d'espacement, base 4 px : aucune valeur inventée --- */
  --s1: 4px;  --s2: 8px;  --s3: 12px; --s4: 16px; --s5: 20px;
  --s6: 24px; --s7: 32px; --s8: 48px; --s9: 72px; --s10: 104px;

  /* --- Échelle typographique : treize crans, pas un de plus --- */
  --t-micro: 12px; --t-xs: 13px;  --t-sm: 14px;  --t-md: 15px;
  --t-base: 16px;  --t-lg: 18px;  --t-xl: 20px;  --t-2xl: 22px;
  --t-3xl: 24px;   --t-4xl: 28px; --t-5xl: 32px; --t-6xl: 40px;
  --t-display: 54px;

  --ease: cubic-bezier(.2,.7,.3,1);
}

/* Les valeurs DÉRIVÉES de la marque sont déclarées ici, sur « * »,
   et surtout pas sur « :root » : sur :root elles se figeraient sur
   le bronze et aucune des 7 palettes ne pourrait les recalculer. */
* {
  box-sizing: border-box;
  --brand: rgb(var(--brand-rgb));
  --arete: rgba(var(--brand-rgb),.16);    /* le filet de lumière */
  --arete-2: rgba(var(--brand-rgb),.36);  /* le même, plus franc */
  --ring: rgba(var(--brand-rgb),.30);     /* l'anneau de sélection */
  --glow: rgba(var(--brand-rgb),.55);     /* la lueur courte */
  --grad: linear-gradient(180deg, var(--brand-lt) 0%, var(--brand-mid) 62%, var(--brand-2) 100%);
  --grad-h: linear-gradient(90deg, var(--brand-2), var(--brand-lt));
}

/* ------------------------------------------------------------
   2. BASE
   ------------------------------------------------------------ */
html, body { margin: 0; padding: 0; }
body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  background:
    radial-gradient(1200px 700px at 80% -10%, var(--halo-1) 0%, rgba(0,0,0,0) 55%),
    radial-gradient(900px 600px at -10% 10%, var(--halo-2) 0%, rgba(0,0,0,0) 50%),
    var(--bg);
  background-attachment: fixed;
  color: var(--text);
  font-size: var(--t-base);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
h1, h2, h3, h4 { text-wrap: balance; }
.container { max-width: 1120px; margin: 0 auto; padding: 0 var(--s6); }
.muted { color: var(--muted); }
.center { text-align: center; }
.hidden { display: none !important; }

/* Le focus clavier est visible partout : un anneau bronze qui épouse
   le rayon de l'élément, jamais un contour effacé par le navigateur. */
:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 3px;
}

/* ------------------------------------------------------------
   3. BOUTONS
   Mieux proportionnés (44 px de haut, cible tactile), et l'ombre
   bleu-indigo héritée de l'ancienne palette a disparu : tout
   dérive maintenant du bronze courant.
   ------------------------------------------------------------ */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  min-height: 44px; padding: 0 var(--s5); border-radius: var(--r1);
  border: 1px solid var(--line-i); background: var(--card-2); color: var(--text);
  font-family: inherit; font-size: var(--t-md); font-weight: 600;
  letter-spacing: -.005em; white-space: nowrap; text-align: center; cursor: pointer;
  box-shadow: var(--sh1), inset 0 1px 0 var(--arete);
  transition: transform .16s var(--ease), box-shadow .16s var(--ease),
              border-color .16s var(--ease), background-color .16s var(--ease);
}
.btn:hover {
  background: var(--card-3);
  box-shadow: var(--sh2), inset 0 1px 0 var(--arete-2);
  transform: translateY(-1px);
}
.btn:active { transform: translateY(0) scale(.994); }

/* Action principale : encre sombre sur le bronze — c'est ce qui rend
   les 7 palettes lisibles (4,9:1 au pire point du dégradé bronze,
   7,6:1 sur l'ambre qui était à 1,7:1 avec du blanc). */
.btn.primary {
  background: var(--grad); color: var(--on-brand); border-color: transparent;
  box-shadow: 0 1px 2px rgba(0,0,0,.5),
              0 10px 26px -12px var(--glow),
              inset 0 1px 0 rgba(255,240,222,.5);
}
.btn.primary:hover {
  box-shadow: 0 1px 2px rgba(0,0,0,.5),
              0 16px 34px -12px var(--glow),
              inset 0 1px 0 rgba(255,240,222,.7);
}
.btn.ghost { background: transparent; }
.btn.ghost:hover { background: rgba(233,238,247,.05); }
.btn.danger { background: transparent; border-color: rgba(255,122,135,.42); color: var(--danger); }
.btn.danger:hover { background: rgba(255,122,135,.12); border-color: var(--danger); }
.btn.sm { min-height: 44px; padding: 0 15px; font-size: var(--t-sm); border-radius: 9px; }
.btn.block { width: 100%; }
.btn:disabled {
  background: var(--bg-soft); color: var(--muted-2);
  border-color: var(--line); cursor: not-allowed; transform: none;
  box-shadow: inset 0 1px 2px rgba(0,0,0,.45);
}

/* ------------------------------------------------------------
   4. NAVIGATION
   ------------------------------------------------------------ */
.nav { display: flex; align-items: center; justify-content: space-between; gap: var(--s5); padding: var(--s5) 0; }
.brand { display: flex; align-items: center; gap: 11px; font-weight: 700; font-size: var(--t-xl); letter-spacing: -.028em; }
.brand .logo {
  width: 38px; height: 38px; flex: 0 0 auto; border-radius: 11px; background: var(--grad);
  display: grid; place-items: center; color: var(--on-brand); font-weight: 800;
  font-size: var(--t-xl); letter-spacing: -.03em;
  box-shadow: 0 6px 18px -8px var(--glow), inset 0 1px 0 rgba(255,240,222,.55);
}
.nav-links { display: flex; align-items: center; gap: var(--s2); }
.nav-links a.link {
  color: var(--muted); padding: 11px 13px; border-radius: 9px;
  font-size: var(--t-sm); font-weight: 500;
  transition: color .16s var(--ease), background-color .16s var(--ease);
}
.nav-links a.link:hover { color: var(--text); background: rgba(233,238,247,.05); }

/* ------------------------------------------------------------
   5. CARTES — la surface posée de référence
   Bordure pleine remplacée par un filet discret + l'arête de
   lumière en haut + deux couches d'ombre.
   ------------------------------------------------------------ */
.card {
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--radius); padding: var(--s6);
  box-shadow: var(--sh2), inset 0 1px 0 var(--arete);
}
.grid { display: grid; gap: var(--s4); }

/* ------------------------------------------------------------
   6. HERO (page d'accueil)
   ------------------------------------------------------------ */
.hero { padding: var(--s9) 0 var(--s7); }
.badge {
  display: inline-flex; gap: 9px; align-items: center;
  font-size: var(--t-xs); color: var(--muted);
  background: var(--bg-soft); border: 1px solid var(--line-2);
  padding: 7px 15px 7px 12px; border-radius: 999px; margin-bottom: var(--s6);
  box-shadow: inset 0 1px 0 var(--arete);
}
.badge .dot {
  width: 7px; height: 7px; flex: 0 0 auto; border-radius: 50%;
  background: var(--brand); box-shadow: 0 0 0 3px rgba(var(--brand-rgb),.18);
}
.hero h1 {
  font-size: var(--t-display); line-height: 1.03; margin: 0 0 var(--s5);
  letter-spacing: -.038em; font-weight: 700;
}
.hero h1 .grad {
  background: linear-gradient(180deg, var(--brand-lt), var(--brand-2));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
/* Le hero s'aligne d'un seul côté : pastille, titre, chapô et boutons
   partent tous du même bord gauche. */
.hero p.lead {
  font-size: var(--t-lg); line-height: 1.55; color: var(--muted);
  max-width: 56ch; margin: 0 0 var(--s7);
}
.hero .cta { display: flex; gap: var(--s3); justify-content: flex-start; flex-wrap: wrap; }

/* ------------------------------------------------------------
   7. FONCTIONNALITÉS
   ------------------------------------------------------------ */
.features { padding: var(--s8) 0; }
.feature-grid { grid-template-columns: repeat(3, 1fr); }
.feature .ficon {
  width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center;
  font-size: var(--t-2xl); background: var(--bg-soft); border: 1px solid var(--line-2);
  margin-bottom: var(--s3); box-shadow: inset 0 1px 0 var(--arete);
}
.feature h3 { margin: 0 0 var(--s2); font-size: var(--t-base); letter-spacing: -.012em; font-weight: 650; }
.feature p { margin: 0; color: var(--muted); font-size: var(--t-sm); line-height: 1.55; }

.section-head { text-align: center; margin: var(--s9) auto var(--s7); max-width: 640px; }
.section-head h2 { font-size: var(--t-4xl); margin: 0 0 var(--s3); letter-spacing: -.024em; line-height: 1.15; font-weight: 650; }
.section-head p { color: var(--muted); margin: 0; font-size: var(--t-base); }

/* ------------------------------------------------------------
   8. TARIFS
   La formule mise en avant n'est plus cerclée de bronze sur ses
   quatre côtés : elle est simplement plus éclairée que sa voisine.
   ------------------------------------------------------------ */
.pricing-grid { grid-template-columns: repeat(2, 1fr); max-width: 760px; margin: 0 auto; }
.plan { position: relative; display: flex; flex-direction: column; }
.plan.featured {
  border-color: rgba(var(--brand-rgb),.34);
  box-shadow: var(--sh3), inset 0 1px 0 var(--arete-2), 0 -1px 0 0 rgba(var(--brand-rgb),.55);
}
.plan .tag {
  position: absolute; top: -11px; right: var(--s5); background: var(--grad); color: var(--on-brand);
  font-size: var(--t-micro); font-weight: 700; letter-spacing: .04em;
  padding: 4px 11px; border-radius: 999px;
  box-shadow: 0 6px 16px -8px var(--glow), inset 0 1px 0 rgba(255,240,222,.55);
}
.plan h3 { margin: 0; font-size: var(--t-md); letter-spacing: .02em; color: var(--muted); font-weight: 650; }
.plan .price {
  font-size: var(--t-6xl); font-weight: 700; margin: var(--s1) 0 var(--s2);
  letter-spacing: -.035em; line-height: 1.1; font-variant-numeric: tabular-nums;
}
.plan .price span { font-size: var(--t-md); color: var(--muted); font-weight: 500; letter-spacing: -.005em; }
.plan ul { list-style: none; padding: 0; margin: var(--s4) 0 var(--s6); display: grid; gap: 9px; }
.plan ul li { display: flex; gap: var(--s3); align-items: flex-start; color: var(--muted); font-size: var(--t-sm); }
.plan ul li::before { content: "✓"; flex: 0 0 auto; color: var(--brand); font-weight: 700; font-size: var(--t-xs); }
.plan .btn { margin-top: auto; }

/* ------------------------------------------------------------
   9. PIED DE PAGE
   ------------------------------------------------------------ */
.footer {
  border-top: 1px solid var(--line); margin-top: var(--s9); padding: var(--s7) 0;
  color: var(--muted); font-size: var(--t-sm);
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: var(--s3);
}

/* ------------------------------------------------------------
   10. CONNEXION / INSCRIPTION
   ------------------------------------------------------------ */
.auth-wrap { min-height: 100vh; display: grid; place-items: center; padding: var(--s7) var(--s6); }
.auth-card { width: 100%; max-width: 420px; }
.tabs {
  display: flex; background: var(--bg-soft); border: 1px solid var(--line-2);
  border-radius: var(--r2); padding: 4px; margin-bottom: var(--s6);
  box-shadow: inset 0 2px 5px rgba(0,0,0,.45);
}
.tabs button {
  flex: 1; background: transparent; border: none; color: var(--muted);
  min-height: 40px; padding: 0 var(--s3); border-radius: var(--r1);
  font-family: inherit; font-size: var(--t-sm); font-weight: 600; cursor: pointer;
  transition: color .16s var(--ease), background-color .16s var(--ease);
}
.tabs button:hover { color: var(--text); }
.tabs button.active {
  background: var(--card-2); color: var(--text);
  box-shadow: var(--sh1), inset 0 1px 0 var(--arete-2);
}

/* Connexion avec un compte Google / Facebook. Les deux boutons restent
   neutres (pas de bronze) : la couleur vient du seul logo, c'est ce que
   demandent les chartes des deux fournisseurs. */
.social-box { display: grid; gap: var(--s3); margin-bottom: var(--s5); }
.btn.social { font-weight: 600; }
.btn.social svg { flex: 0 0 auto; }
.btn.social.facebook:hover { border-color: rgba(24,119,242,.55); }
.btn.social.google:hover { border-color: rgba(255,255,255,.28); }
.social-sep {
  display: flex; align-items: center; gap: var(--s3);
  color: var(--muted-2); font-size: var(--t-xs); margin: var(--s2) 0 0;
}
.social-sep::before, .social-sep::after {
  content: ""; flex: 1; height: 1px; background: var(--line-2);
}

/* ------------------------------------------------------------
   11. FORMULAIRES — tout ce qui est saisissable est creusé
   ------------------------------------------------------------ */
label.fl {
  display: block; font-size: var(--t-xs); color: var(--muted);
  margin: var(--s4) 0 var(--s2); font-weight: 650;
}
input, select, textarea {
  width: 100%; background: var(--bg-soft); border: 1px solid var(--line-2); color: var(--text);
  min-height: 44px; padding: 11px 14px; border-radius: var(--r1);
  font-size: var(--t-md); font-family: inherit; outline: none;
  box-shadow: inset 0 1px 2px rgba(0,0,0,.45);
  transition: border-color .16s var(--ease), box-shadow .16s var(--ease);
}
textarea { min-height: 96px; line-height: 1.55; }
input::placeholder, textarea::placeholder { color: var(--muted-2); }
/* Le halo de focus était bleu indigo sous un champ bronze : il dérive
   maintenant de la marque courante. */
input:focus, select:focus, textarea:focus {
  border-color: var(--brand);
  box-shadow: inset 0 1px 2px rgba(0,0,0,.45), 0 0 0 3px var(--ring);
}
.row { display: flex; gap: var(--s3); }
.row > * { flex: 1; }
.err { color: var(--danger); font-size: var(--t-sm); margin-top: var(--s3); min-height: 18px; }
.ok { color: var(--ok); font-size: var(--t-sm); margin-top: var(--s3); }

/* ------------------------------------------------------------
   12. TABLEAU DE BORD
   ------------------------------------------------------------ */
.dash { display: grid; grid-template-columns: 230px 1fr; min-height: 100vh; }
.side {
  background: rgba(11,13,18,.55); border-right: 1px solid var(--line);
  padding: var(--s5) var(--s4);
}
.side .brand { font-size: var(--t-lg); margin-bottom: var(--s6); }
.side nav { display: grid; gap: 2px; }
.side nav a {
  position: relative; display: flex; align-items: center; gap: var(--s3);
  padding: 11px 13px; border-radius: 9px; color: var(--muted);
  font-size: var(--t-sm); font-weight: 550; cursor: pointer;
  transition: color .16s var(--ease), background-color .16s var(--ease);
}
.side nav a:hover { color: var(--text); background: rgba(233,238,247,.05); }
.side nav a.active {
  color: var(--text); font-weight: 650; background: var(--card-2);
  box-shadow: inset 0 1px 0 var(--arete-2);
}
/* L'onglet actif s'allume par un trait de lumière, il ne se remplit pas. */
.side nav a.active::before {
  content: ""; position: absolute; left: 0; top: 8px; bottom: 8px; width: 2px;
  border-radius: 2px; background: linear-gradient(180deg, var(--brand-lt), var(--brand-2));
}
.side .side-foot { margin-top: var(--s6); border-top: 1px solid var(--line); padding-top: var(--s4); }
.main { padding: var(--s6) var(--s7); overflow: auto; }
.page-head {
  display: flex; justify-content: space-between; align-items: flex-start;
  gap: var(--s4); margin-bottom: var(--s6); flex-wrap: wrap;
}
.page-head h1 { margin: 0; font-size: var(--t-3xl); letter-spacing: -.024em; font-weight: 650; }
.page-head p { margin: var(--s1) 0 0; color: var(--muted); font-size: var(--t-sm); }

.stat-grid { grid-template-columns: repeat(4, 1fr); margin-bottom: var(--s6); }
.stat { padding: var(--s5); }
/* Micro-capitale espacée : les quatre tuiles se lisent d'un coup d'œil. */
.stat .k {
  color: var(--muted-2); font-size: var(--t-micro); font-weight: 700;
  letter-spacing: .13em; text-transform: uppercase; line-height: 1.35;
}
.stat .v {
  font-size: var(--t-5xl); font-weight: 700; margin-top: var(--s2);
  letter-spacing: -.035em; line-height: 1; font-variant-numeric: tabular-nums;
}
.stat .v small { font-size: var(--t-base); color: var(--muted); font-weight: 600; letter-spacing: -.01em; }

.share-box {
  display: flex; gap: var(--s3); align-items: center; background: var(--bg-soft);
  border: 1px dashed var(--line-2); padding: var(--s3) var(--s4); border-radius: var(--r1);
  box-shadow: inset 0 1px 2px rgba(0,0,0,.45);
}
.share-box code {
  color: var(--brand); font-size: var(--t-sm); word-break: break-all;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

/* ------------------------------------------------------------
   13. TABLEAUX
   ------------------------------------------------------------ */
table.tbl { width: 100%; border-collapse: collapse; }
table.tbl th {
  text-align: left; font-size: var(--t-micro); text-transform: uppercase;
  letter-spacing: .13em; color: var(--muted-2); font-weight: 700;
  padding: var(--s3); border-bottom: 1px solid var(--line);
}
table.tbl td {
  padding: var(--s3); border-bottom: 1px solid var(--line);
  font-size: var(--t-sm);
}
table.tbl tr:last-child td { border-bottom: none; }
table.tbl tbody tr { transition: background-color .16s var(--ease); }
table.tbl tbody tr:hover { background: rgba(233,238,247,.03); }
/* Tableau large (factures) : défilement horizontal sur petit écran. */
.tbl-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.tbl-wrap table.tbl { min-width: 620px; }

/* Choix en pleine largeur (motif d'annulation) : le libellé passe à la ligne. */
.choice {
  display: flex; align-items: center; gap: var(--s3); width: 100%; text-align: left;
  min-height: 44px; padding: var(--s3) var(--s4);
  border: 1px solid var(--line-i); border-radius: var(--r1);
  background: var(--card-2); color: var(--text);
  font-family: inherit; font-size: var(--t-md); font-weight: 600; line-height: 1.35;
  cursor: pointer; box-shadow: var(--sh1), inset 0 1px 0 var(--arete);
  transition: border-color .16s var(--ease), box-shadow .16s var(--ease), background-color .16s var(--ease);
}
.choice:hover { border-color: var(--brand); }
/* Le choix retenu s'allume : même surface, arête franchement bronze. */
.choice.sel {
  border-color: rgba(var(--brand-rgb),.6); background: var(--card-2);
  box-shadow: var(--sh2), inset 0 1px 0 rgba(var(--brand-rgb),.9), 0 0 0 1px var(--ring);
}
.choice input { width: auto; flex: 0 0 auto; margin: 0; min-height: 0; box-shadow: none; accent-color: var(--brand); }

/* ------------------------------------------------------------
   14. PASTILLES D'ÉTAT
   Elles sont sorties de la palette du salon : « Confirmé » doit
   rester vert, même chez un salon ambré ou rose. La forme double
   la couleur, pour la vision daltonienne.
   ------------------------------------------------------------ */
.pill {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: var(--t-micro); font-weight: 650; padding: 4px 11px;
  border-radius: 999px; border: 1px solid var(--line-2);
  background: var(--bg-soft); color: var(--muted);
}
.pill.booked { color: var(--ok); border-color: rgba(74,222,154,.34); background: rgba(74,222,154,.10); border-radius: 7px; }
.pill.cancelled { color: var(--danger); border-color: rgba(255,122,135,.36); background: rgba(255,122,135,.10); border-style: dashed; }

/* ------------------------------------------------------------
   15. RÉSERVATION PUBLIQUE
   ------------------------------------------------------------ */
.book-wrap { max-width: 680px; margin: 0 auto; padding: var(--s7) var(--s5) var(--s9); }
.book-head { text-align: center; margin-bottom: var(--s6); }
.book-head .logo-lg {
  width: 64px; height: 64px; border-radius: 18px; background: var(--grad);
  display: grid; place-items: center; color: var(--on-brand); font-weight: 800;
  font-size: var(--t-4xl); letter-spacing: -.03em; margin: 0 auto var(--s3);
  box-shadow: 0 10px 28px -12px var(--glow), inset 0 1px 0 rgba(255,240,222,.5);
}
.book-head h1 { margin: 0 0 var(--s2); font-size: var(--t-4xl); letter-spacing: -.026em; }
.info-line {
  display: flex; gap: var(--s2); justify-content: center; color: var(--muted);
  font-size: var(--t-sm); flex-wrap: wrap;
}
.info-line span { display: inline-flex; gap: 6px; align-items: center; }

/* En-tête compact du parcours (le salon reste visible à chaque étape). */
.bk-head { display: flex; align-items: center; gap: var(--s3); margin-bottom: var(--s5); }
.bk-avatar {
  width: 52px; height: 52px; flex: 0 0 auto; border-radius: 16px; background: var(--grad);
  display: grid; place-items: center; color: var(--on-brand); font-weight: 800;
  font-size: var(--t-2xl); letter-spacing: -.03em; overflow: hidden;
  box-shadow: 0 8px 20px -10px var(--glow), inset 0 1px 0 rgba(255,240,222,.5);
}
.bk-avatar img { width: 100%; height: 100%; object-fit: cover; }
.bk-id h1 { margin: 0; font-size: var(--t-xl); line-height: 1.2; letter-spacing: -.02em; }
.bk-id .info-line { justify-content: flex-start; font-size: var(--t-xs); margin-top: 3px; }
.bk-count {
  font-size: var(--t-micro); text-transform: uppercase; letter-spacing: .13em;
  color: var(--muted-2); font-weight: 700; margin-bottom: var(--s3);
}

.step-label {
  font-size: var(--t-xs); text-transform: uppercase; letter-spacing: .12em;
  color: var(--muted-2); font-weight: 700; margin: var(--s6) 0 var(--s3);
}
.svc-list { display: grid; gap: var(--s3); }
.svc {
  display: flex; align-items: center; gap: var(--s3); min-height: 44px;
  padding: var(--s3) var(--s4); border: 1px solid var(--line-i); border-radius: var(--r1);
  cursor: pointer; background: var(--card);
  box-shadow: var(--sh1), inset 0 1px 0 var(--arete);
  transition: border-color .16s var(--ease), box-shadow .16s var(--ease), transform .16s var(--ease);
}
.svc:hover { border-color: var(--brand); transform: translateY(-1px); }
/* La prestation choisie s'allume au lieu de se remplir. */
.svc.sel {
  border-color: rgba(var(--brand-rgb),.6); background: var(--card-2);
  box-shadow: var(--sh2), inset 0 1px 0 rgba(var(--brand-rgb),.9),
              0 0 0 1px var(--ring), 0 8px 22px -14px var(--glow);
}
.svc .check {
  width: 22px; height: 22px; flex: 0 0 auto; border-radius: 7px;
  border: 2px solid var(--line-i); display: grid; place-items: center;
  font-size: var(--t-xs); line-height: 1;
}
.svc.sel .check { background: var(--brand); border-color: var(--brand); color: var(--on-brand); }
.svc .svc-name { font-weight: 650; font-size: var(--t-md); }
.svc .svc-meta { color: var(--muted); font-size: var(--t-xs); }
.svc .svc-price { margin-left: auto; font-weight: 700; font-variant-numeric: tabular-nums; }

/* ------------------------------------------------------------
   16. CRÉNEAUX — libre = posé, pris = creusé, choisi = allumé
   Un créneau pris est une information (« le salon est plein à
   cette heure »), pas un déchet : il reste lisible à 7:1,
   barré d'un filet fin, et sans aucune opacity.
   ------------------------------------------------------------ */
.slot-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 9px; }
.slot {
  min-height: 44px; display: grid; place-items: center; text-align: center;
  border: 1px solid var(--line-i); border-radius: 11px; cursor: pointer;
  font-weight: 650; font-size: var(--t-md); font-variant-numeric: tabular-nums;
  background: var(--card); color: var(--text);
  box-shadow: var(--sh1), inset 0 1px 0 var(--arete);
  transition: border-color .16s var(--ease), box-shadow .16s var(--ease), transform .16s var(--ease);
}
.slot:hover:not(.taken) { border-color: var(--brand); transform: translateY(-1px); }
.slot.sel {
  background: var(--card-2); color: var(--text); border-color: rgba(var(--brand-rgb),.6);
  box-shadow: var(--sh2), inset 0 1px 0 rgba(var(--brand-rgb),.9),
              0 0 0 1px var(--ring), 0 8px 22px -12px var(--glow);
}
.slot.taken {
  background: var(--bg-soft); border-color: var(--line); color: var(--muted);
  cursor: not-allowed; text-decoration: line-through;
  text-decoration-thickness: 1px; text-decoration-color: var(--muted-2);
  box-shadow: inset 0 1px 2px rgba(0,0,0,.5);
}

/* ------------------------------------------------------------
   17. BARRE DE TOTAL — collante, détachée par un filet de lumière
   ------------------------------------------------------------ */
.summary-bar {
  position: sticky; bottom: 0; margin-top: var(--s6);
  background: rgba(16,20,28,.92); backdrop-filter: blur(14px);
  border: 1px solid var(--line-2); border-radius: var(--r2);
  padding: var(--s4) var(--s5);
  display: flex; align-items: center; justify-content: space-between; gap: var(--s3);
  box-shadow: var(--sh3), inset 0 1px 0 var(--arete-2);
}
.summary-bar .tot { font-size: var(--t-xs); color: var(--muted); white-space: nowrap; line-height: 1.3; }
.summary-bar .tot b {
  display: block; font-size: var(--t-2xl); color: var(--text);
  font-weight: 700; letter-spacing: -.024em; font-variant-numeric: tabular-nums;
}
.summary-bar .bk-nav { display: flex; gap: var(--s2); margin-left: auto; }

/* ------------------------------------------------------------
   18. CONFIRMATION ET NOTIFICATIONS
   ------------------------------------------------------------ */
.success-box { text-align: center; padding: var(--s8) var(--s5); }
.success-box .big { font-size: var(--t-display); margin-bottom: var(--s3); line-height: 1; }

.toast {
  position: fixed; bottom: var(--s6); left: 50%; transform: translateX(-50%);
  background: var(--card-2); border: 1px solid var(--line-2);
  padding: var(--s3) var(--s5); border-radius: var(--r1); color: var(--text);
  font-size: var(--t-sm); box-shadow: var(--sh3), inset 0 1px 0 var(--arete); z-index: 99;
  opacity: 0; pointer-events: none; transition: opacity .25s var(--ease), transform .25s var(--ease);
}
.toast.show { opacity: 1; transform: translateX(-50%) translateY(-4px); }
.toast.err { border-color: rgba(255,122,135,.5); color: var(--danger); }

/* ------------------------------------------------------------
   19. LOGO ET PHOTO DE PROFIL
   ------------------------------------------------------------ */
.logo-mark { flex: 0 0 auto; display: block; border-radius: 10px; }
.set-avatar {
  width: 76px; height: 76px; border-radius: 50%; background: var(--grad);
  display: grid; place-items: center; color: var(--on-brand); font-weight: 800;
  font-size: var(--t-4xl); letter-spacing: -.03em; overflow: hidden; flex: 0 0 auto;
  box-shadow: 0 10px 26px -14px var(--glow), inset 0 1px 0 rgba(255,240,222,.5);
}
.set-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ------------------------------------------------------------
   20. MODALE DE BIENVENUE
   ------------------------------------------------------------ */
.welcome-overlay {
  position: fixed; inset: 0; background: rgba(6,8,14,.72); backdrop-filter: blur(6px);
  display: grid; place-items: center; z-index: 200; padding: var(--s6);
  opacity: 0; pointer-events: none; transition: opacity .3s var(--ease);
}
.welcome-overlay.show { opacity: 1; pointer-events: auto; }
.welcome-card {
  max-width: 460px; width: 100%; text-align: center; padding: var(--s7) var(--s6);
  border-radius: var(--r3);
  transform: translateY(12px) scale(.98); transition: transform .3s var(--ease);
}
.welcome-overlay.show .welcome-card { transform: none; }
.welcome-card .wlogo { margin: 0 auto var(--s5); width: 76px; height: 76px; }
.welcome-card h2 { font-size: var(--t-4xl); margin: 0 0 var(--s3); letter-spacing: -.026em; }
.welcome-card p { color: var(--muted); margin: 0 0 var(--s6); font-size: var(--t-base); }
.welcome-feats { display: grid; gap: var(--s3); text-align: left; margin: 0 0 var(--s6); }
.welcome-feats div { display: flex; gap: 11px; align-items: center; font-size: var(--t-sm); }
.welcome-feats .wf-ic {
  width: 34px; height: 34px; flex: 0 0 auto; border-radius: 9px; background: var(--bg-soft);
  border: 1px solid var(--line-2); display: grid; place-items: center; font-size: var(--t-lg);
  box-shadow: inset 0 1px 0 var(--arete);
}
.welcome-actions { display: flex; gap: var(--s3); }
.welcome-actions .btn { flex: 1; }

/* ------------------------------------------------------------
   21. ASSISTANT DE CONFIGURATION (onboarding)
   ------------------------------------------------------------ */
.wiz-wrap { min-height: 100vh; display: flex; flex-direction: column; align-items: center; padding: var(--s7) var(--s5) var(--s9); }
.wiz-top { display: flex; align-items: center; gap: 11px; font-weight: 700; font-size: var(--t-2xl); letter-spacing: -.028em; margin-bottom: var(--s6); }
.wiz { width: 100%; max-width: 620px; }
.wiz-steps { display: flex; gap: var(--s2); justify-content: center; margin-bottom: var(--s6); }
.wiz-steps .dot {
  width: 34px; height: 5px; border-radius: 3px; background: var(--bg-soft);
  box-shadow: inset 0 1px 1px rgba(0,0,0,.5); transition: background .2s var(--ease);
}
.wiz-steps .dot.on { background: var(--grad-h); box-shadow: 0 0 0 1px var(--ring); }
.wiz-step { display: none; }
.wiz-step.active { display: block; animation: fade .3s var(--ease); }
@keyframes fade { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.wiz-step h2 { font-size: var(--t-4xl); margin: 0 0 var(--s2); letter-spacing: -.026em; }
.wiz-step .sub { color: var(--muted); margin: 0 0 var(--s6); font-size: var(--t-base); }
.wiz-nav { display: flex; justify-content: space-between; gap: var(--s3); margin-top: var(--s6); }

/* Choix de palette : la vignette s'allume, elle ne se remplit pas. */
.palette-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s3); }
.palette {
  cursor: pointer; border: 1px solid var(--line-i); border-radius: var(--r2);
  padding: var(--s4); background: var(--card);
  box-shadow: var(--sh1), inset 0 1px 0 var(--arete);
  transition: border-color .16s var(--ease), box-shadow .16s var(--ease), transform .16s var(--ease);
}
.palette:hover { border-color: var(--brand); transform: translateY(-1px); }
.palette.sel {
  border-color: rgba(var(--brand-rgb),.6); background: var(--card-2);
  box-shadow: var(--sh2), inset 0 1px 0 rgba(var(--brand-rgb),.9),
              0 0 0 1px var(--ring), 0 10px 26px -16px var(--glow);
}
.palette .swatches { display: flex; gap: 7px; margin-bottom: var(--s3); }
.palette .sw { width: 100%; height: 34px; border-radius: var(--r1); border: 1px solid rgba(0,0,0,.35); }
.palette .pname { font-weight: 650; font-size: var(--t-md); }
.palette .pdesc { color: var(--muted); font-size: var(--t-xs); }
.theme-block { margin-bottom: var(--s6); }
.theme-block > label { display: block; font-weight: 650; margin-bottom: var(--s3); font-size: var(--t-md); }

/* Éditeur de prestations */
.svc-editor { display: grid; gap: var(--s3); margin-bottom: var(--s3); }
.svc-row { display: flex; gap: var(--s2); align-items: center; }
.svc-row input { padding: 10px 12px; }
.svc-row .in-name { flex: 3; }
.svc-row .in-price { flex: 1; min-width: 70px; }
.svc-row .in-dur { flex: 1; min-width: 70px; }
.svc-row .rm {
  background: transparent; border: 1px solid rgba(255,122,135,.42); color: var(--danger);
  border-radius: 9px; width: 44px; height: 44px; cursor: pointer; flex: 0 0 auto;
  font-family: inherit; font-size: var(--t-base);
  transition: background-color .16s var(--ease), border-color .16s var(--ease);
}
.svc-row .rm:hover { background: rgba(255,122,135,.12); border-color: var(--danger); }

/* Sélecteur de jours (réutilisable) */
.days-row { display: flex; gap: var(--s2); flex-wrap: wrap; }

/* ------------------------------------------------------------
   22. BARRES MOBILES DU TABLEAU DE BORD (cachées sur ordinateur)
   ------------------------------------------------------------ */
.mobile-topbar, .mobile-bottomnav { display: none; }

/* ------------------------------------------------------------
   23. ADAPTATIF
   ------------------------------------------------------------ */
@media (max-width: 980px) {
  .feature-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 860px) {
  .container { padding: 0 var(--s5); }
  .hero { padding: var(--s8) 0 var(--s5); }
  .hero h1 { font-size: var(--t-6xl); }
  .feature-grid { grid-template-columns: 1fr; }
  .pricing-grid { grid-template-columns: 1fr; }
  .stat-grid { grid-template-columns: repeat(2, 1fr); }
  .dash { grid-template-columns: 1fr; }
  .side { display: none; }

  /* ---- Format MOBILE du tableau de bord (façon appli) ---- */
  .main { padding: var(--s4) var(--s4) 88px; }
  .page-head h1 { font-size: var(--t-2xl); }
  .stat { padding: var(--s4); }
  .stat .v { font-size: var(--t-4xl); }

  .mobile-topbar {
    display: flex; align-items: center; justify-content: space-between;
    position: sticky; top: 0; z-index: 30; background: rgba(11,13,18,.94);
    backdrop-filter: blur(12px); border-bottom: 1px solid var(--line);
    box-shadow: 0 1px 0 var(--arete);
    padding: var(--s2) var(--s3); margin: calc(var(--s4) * -1) calc(var(--s4) * -1) var(--s3);
  }
  .mobile-topbar .brand { font-size: var(--t-lg); }
  .mobile-topbar .m-actions { display: flex; gap: var(--s1); }
  .mobile-topbar .m-actions a {
    display: grid; place-items: center; min-width: 44px; min-height: 44px;
    border-radius: var(--r1); color: var(--muted); font-size: var(--t-lg);
    cursor: pointer; text-decoration: none;
  }
  .mobile-topbar .m-actions a:active { background: var(--card); color: var(--text); }

  .mobile-bottomnav {
    display: flex; position: fixed; bottom: 0; left: 0; right: 0; z-index: 40;
    background: rgba(16,20,28,.94); backdrop-filter: blur(12px);
    border-top: 1px solid var(--line-2); box-shadow: 0 -1px 0 var(--arete);
    padding: var(--s2) var(--s1) calc(var(--s2) + env(safe-area-inset-bottom, 0px));
  }
  .mobile-bottomnav a {
    flex: 1; display: flex; flex-direction: column; align-items: center; gap: 2px;
    min-height: 44px; justify-content: center; padding: var(--s1) 2px;
    color: var(--muted); font-size: var(--t-micro); font-weight: 600;
    cursor: pointer; border-radius: var(--r1); text-decoration: none;
  }
  .mobile-bottomnav a .ic { font-size: var(--t-xl); line-height: 1; }
  .mobile-bottomnav a.active { color: var(--text); }
  .mobile-bottomnav a.active .ic { transform: scale(1.08); }

  /* Confort tactile et anti-zoom automatique sur iOS. */
  input, select, textarea { font-size: 16px; }
}

@media (max-width: 560px) {
  .nav-links .link { display: none; }   /* landing : on garde juste les boutons */
  .nav-links { gap: var(--s2); }
  /* Pas la place en largeur : les champs côte à côte passent les uns SOUS les autres. */
  .row { flex-direction: column; gap: var(--s3); }
  .hero h1 { font-size: var(--t-5xl); }
  .hero p.lead { font-size: var(--t-base); }
  .section-head h2 { font-size: var(--t-4xl); }
  .card { padding: var(--s5); }
  .palette-grid { grid-template-columns: 1fr; }
  /* On garde le champ Durée visible ; on resserre juste les colonnes. */
  .svc-row { gap: 6px; }
  .svc-row .in-name { flex: 2; }
  .svc-row .in-price, .svc-row .in-dur { min-width: 52px; }
  .svc-row input { padding: 10px 8px; }
  .svc-row .rm { width: 40px; }
}

@media (max-width: 460px) {
  .summary-bar { padding: var(--s3) var(--s4); gap: var(--s3); flex-wrap: wrap; }
  .summary-bar .tot b { font-size: var(--t-xl); }
  /* Écran étroit : les boutons passent sous le total, pleine largeur. */
  .summary-bar .bk-nav { width: 100%; }
  .summary-bar .bk-nav .btn { flex: 1; justify-content: center; }
  .stat-grid { grid-template-columns: 1fr; }
}

/* ------------------------------------------------------------
   24. LES 7 PALETTES
   Le salon ne choisit que la LUMIÈRE : six valeurs atomiques par
   palette. Le dégradé, l'arête, l'anneau de sélection, la lueur et
   les halos de fond en dérivent tout seuls (voir le bloc « * »).
   L'encre posée sur un aplat de marque vient de --on-brand, qui
   garantit au moins 4,5:1 sur les sept palettes.
   ------------------------------------------------------------ */
[data-theme="bronze"] {
  --brand-rgb: 231,176,113;
  --brand-lt: #edbb80; --brand-mid: #c07f3c; --brand-2: #b87335;
  --on-brand: #1e1104; --halo-1: #241a10; --halo-2: #1e160e;
}
[data-theme="indigo"] {
  --brand-rgb: 154,171,255;
  --brand-lt: #b4c0ff; --brand-mid: #8b9bfb; --brand-2: #7d84f2;
  --on-brand: #0b0a24; --halo-1: #1a2140; --halo-2: #241a3a;
}
[data-theme="corail"] {
  --brand-rgb: 251,143,157;
  --brand-lt: #fca3ae; --brand-mid: #f4707f; --brand-2: #ee5f72;
  --on-brand: #2a0810; --halo-1: #40202b; --halo-2: #3a1f28;
}
[data-theme="emeraude"] {
  --brand-rgb: 74,222,154;
  --brand-lt: #6ce7ae; --brand-mid: #2ec98a; --brand-2: #1cb87c;
  --on-brand: #02170f; --halo-1: #123a30; --halo-2: #10322c;
}
[data-theme="ambre"] {
  --brand-rgb: 251,191,36;
  --brand-lt: #fccb4a; --brand-mid: #efa414; --brand-2: #e9950a;
  --on-brand: #1c1403; --halo-1: #2e2410; --halo-2: #382a12;
}
[data-theme="azur"] {
  --brand-rgb: 92,215,239;
  --brand-lt: #7fe2f5; --brand-mid: #22bee4; --brand-2: #0ea5e9;
  --on-brand: #03151c; --halo-1: #0f2a34; --halo-2: #0f2c3a;
}
[data-theme="rose"] {
  --brand-rgb: 247,154,198;
  --brand-lt: #f9a8ce; --brand-mid: #ee6fae; --brand-2: #e85aa0;
  --on-brand: #2a0a1b; --halo-1: #2e1424; --halo-2: #331528;
}

/* ------------------------------------------------------------
   25. MOUVEMENT RÉDUIT
   ------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    transition-duration: .01ms !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
  }
  .btn:hover, .slot:hover:not(.taken), .svc:hover, .palette:hover { transform: none; }
}

/* Onglets des Paramètres (défilables horizontalement sur mobile) */
.set-tabs {
  display: flex; gap: 4px; overflow-x: auto; -webkit-overflow-scrolling: touch;
  background: var(--bg-soft); border: 1px solid var(--line-2);
  border-radius: var(--r2); padding: 4px; margin-bottom: var(--s6);
  box-shadow: inset 0 2px 5px rgba(0,0,0,.45);
}
.set-tabs button {
  flex: 0 0 auto; white-space: nowrap; background: transparent; border: none; color: var(--muted);
  min-height: 40px; padding: 0 14px; border-radius: var(--r1);
  font-family: inherit; font-size: var(--t-sm); font-weight: 600; cursor: pointer;
  transition: color .16s var(--ease), background-color .16s var(--ease);
}
.set-tabs button:hover { color: var(--text); }
.set-tabs button.active {
  background: var(--card-2); color: var(--text);
  box-shadow: var(--sh1), inset 0 1px 0 var(--arete-2);
}
/* Bandeau « 1er mois offert » */
.free-banner {
  max-width: 760px; border-left: 3px solid var(--brand);
  background: var(--bg-soft); margin-bottom: var(--s5);
}