/* ============================================================
   THÈME JOLIICILS — le seul fichier à adapter d'un client à l'autre.

   Le site de Joliicils est un Tailwind compilé : il n'expose aucune
   variable CSS et n'a pas de feuille de style externe. Ce fichier
   rejoue donc les deux choses dont le module a besoin :
     1. les variables de couleur et de police ;
     2. les quelques composants partagés (nav, boutons, champs, cartes).

   Palette relevée sur joliicils.fr :
     crème #faf6f1 · sable #f3ebe2 · rosé #e7c4bd
     bois de rose #a5655f · doré #b8965a · encre #2b231d
   ============================================================ */

:root {
  --ink: #faf6f1;          /* fond de page */
  --ink-2: #f3ebe2;        /* fond alterné */
  --card: #ffffff;
  --line: rgba(43, 35, 29, 0.16);
  --line-soft: rgba(43, 35, 29, 0.09);
  --cream: #2b231d;        /* texte principal (encre) */
  --muted: #5c5148;
  --faint: #8c7d6f;

  --accent: #a5655f;       /* bois de rose : fond des éléments actifs */
  --accent-ink: #ffffff;   /* texte posé sur l'accent */
  --accent-doux: #e7c4bd;
  --or: #b8965a;
  --alerte: #a14444;

  --f-titre: "Cormorant Garamond", Georgia, serif;
  --titre-casse: none;     /* Joliicils n'écrit pas ses titres en capitales */
  --f-texte: "Inter", system-ui, sans-serif;
  /* Titres d'étape de la réservation (« Quelle prestation ? ») : même police que
     les noms de prestations, à la demande de la cliente. */
  --f-sous-titre: var(--f-texte);
  --sous-titre-casse: none;
  --sous-titre-espace: 0;
  --sous-titre-graisse: 600;
  --sous-titre-taille: 1.15rem;
  /* Tarifs des prestations : police des descriptions, en semi-gras pour rester
     bien visibles (demande de la cliente). */
  --f-prix: var(--f-texte);
  --prix-taille: 1rem;
  --prix-espace: 0;
  --prix-graisse: 600;
  --f-script: "Pinyon Script", cursive;
}

* { -webkit-tap-highlight-color: transparent; }
html { scroll-padding-top: 96px; scroll-behavior: smooth; }

body {
  font-family: var(--f-texte);
  background: var(--ink);
  color: var(--cream);
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  margin: 0;
}
::selection { background: var(--accent-doux); color: var(--cream); }

.bk-titre, .bk-sous-titre, .bk-cal__mois { font-weight: 500; letter-spacing: 0.005em; }
.bk-titre { line-height: 1.12; }
.ital { font-family: var(--f-titre); font-style: italic; font-weight: 500; }
.grad-text { color: var(--accent); }

/* ---------- Surtitre ---------- */
.eyebrow {
  font-size: 11px; letter-spacing: 0.24em; text-transform: uppercase; font-weight: 600;
  color: var(--accent); display: inline-flex; align-items: center; gap: 0.8rem;
}
.eyebrow::before { content: ""; width: 28px; height: 1px; background: var(--accent-doux); }

/* ---------- Barre de navigation ---------- */
.nav-bar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 50;
  background: rgba(250, 246, 241, 0.92);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line-soft);
}
.brand { display: inline-flex; align-items: center; gap: 0.75rem; color: var(--cream); line-height: 1; text-decoration: none; }
/* Repris à l'identique de la barre de navigation de joliicils.fr */
.brand-name {
  font-family: var(--f-script); font-weight: 400; font-size: 2.7rem;
  letter-spacing: 0.01em; line-height: 0.9;
}
.brand-name .sub {
  display: block; font-family: var(--f-texte); font-size: 8.5px; font-weight: 600;
  letter-spacing: 0.3em; text-transform: uppercase; color: var(--muted); margin-top: -2px;
}
.logo-mark {
  width: 44px; height: 44px; flex: none; border-radius: 50%; object-fit: cover;
  border: 1px solid var(--line);
}

/* ---------- Boutons ----------
   Le module appelle historiquement ces classes « btn-jaune » et
   « btn-ghost ». Les noms restent, seules les couleurs changent. */
.btn-jaune {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.6rem;
  background: var(--accent); color: var(--accent-ink);
  padding: 0.9rem 1.9rem; border-radius: 999px; border: 1px solid var(--accent);
  font-size: 12px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase;
  text-decoration: none; cursor: pointer;
  transition: transform 0.3s ease, box-shadow 0.3s ease, background 0.3s ease;
}
.btn-jaune:hover { transform: translateY(-2px); background: #92554f; box-shadow: 0 14px 30px -16px rgba(43, 35, 29, 0.5); }

.btn-ghost {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.6rem;
  background: transparent; color: var(--cream);
  padding: 0.9rem 1.9rem; border-radius: 999px; border: 1px solid var(--line);
  font-size: 12px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase;
  text-decoration: none; cursor: pointer;
  transition: border-color 0.3s ease, background 0.3s ease, transform 0.3s ease;
}
.btn-ghost:hover { border-color: var(--accent); color: var(--accent); transform: translateY(-2px); }

/* ---------- Filtres de zone ---------- */
.filter-btn {
  padding: 0.55rem 1.15rem; border-radius: 999px; border: 1px solid var(--line);
  font-size: 11.5px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--muted); background: var(--card); cursor: pointer;
  transition: all 0.25s ease; text-decoration: none;
}
.filter-btn:hover { color: var(--cream); border-color: var(--accent-doux); }
.filter-btn.active { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }

/* ---------- Cartes ---------- */
.card {
  background: var(--card); border: 1px solid var(--line-soft); border-radius: 1rem;
  transition: transform 0.35s ease, box-shadow 0.35s ease;
}
.card:hover { transform: translateY(-4px); box-shadow: 0 22px 44px -30px rgba(43, 35, 29, 0.45); }

/* ---------- Étiquettes ---------- */
.tag {
  display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.28rem 0.7rem;
  border-radius: 999px; font-size: 10.5px; font-weight: 700;
  letter-spacing: 0.12em; text-transform: uppercase;
}
.tag-jaune { background: var(--accent); color: var(--accent-ink); }
.tag-rose { background: var(--accent-doux); color: var(--cream); }
.tag-outline { border: 1px solid var(--line); color: var(--muted); }

/* ---------- Formulaire ---------- */
.form-field {
  width: 100%; background: var(--card); border: 1px solid var(--line);
  border-radius: 0.65rem; padding: 0.9rem 1.1rem; color: var(--cream); font-size: 15px;
  font-family: var(--f-texte); outline: none;
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}
.form-field::placeholder { color: var(--faint); }
.form-field:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(165, 101, 95, 0.16); }
label.form-label {
  display: block; font-size: 11px; font-weight: 700; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--muted); margin-bottom: 0.45rem;
}