@charset "UTF-8";
/* ────────────────────────────────────────────────────────────────────────────
 * MAESTOR — thème custom pour Easy!Appointments
 *
 * Aligne le visuel sur la charte maestor.eu :
 *   bordeaux #7C2D3A · anthracite #1F2937 · or #E8B547 · crème #FAFAF7
 *   typo Inter (via stack système — pas de dépendance CDN tierce)
 *
 * Note : la couleur "primary" (boutons, header, wizard steps, date picker)
 * est gérée séparément via le paramètre "Couleur entreprise" du backend
 * Easy!Apps. Pose #7C2D3A dans Paramètres → Général → Entreprise.
 * Ce thème ne touche QUE ce que company_color ne couvre pas :
 *   - fond global crème
 *   - typo + hiérarchie
 *   - radius / espacements
 *   - accent or pour quelques highlights
 * ──────────────────────────────────────────────────────────────────────────── */

/* On hérite intégralement de default (full Bootstrap 5.3.3 + Bootswatch default) */
@import url('default.css');

/* ════════════════════════════════════════════════════════════════════════════
   Variables Bootstrap surchargées
   ════════════════════════════════════════════════════════════════════════════ */
:root,
[data-bs-theme=light] {
  /* Couleurs Maestor */
  --bs-body-bg: #FAFAF7;
  --bs-body-color: #1F2937;
  --bs-secondary-bg: #F4F2EC;
  --bs-tertiary-bg: #FFFFFF;
  --bs-border-color: rgba(31, 41, 55, 0.10);
  --bs-border-color-translucent: rgba(31, 41, 55, 0.10);
  --bs-emphasis-color: #1F2937;
  --bs-secondary-color: #6B7280;
  --bs-tertiary-color: #9CA3AF;

  /* Typographie — stack système qui s'aligne très près d'Inter
     (San Francisco sur Mac, Segoe UI sur Windows, Roboto sur Android).
     Pour aller plus loin un jour : self-host Inter via @font-face. */
  --bs-font-sans-serif: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  --bs-body-font-family: var(--bs-font-sans-serif);
  --bs-body-font-size: 0.95rem;
  --bs-body-line-height: 1.55;
  --bs-body-font-weight: 400;

  /* Headings plus tight, comme sur maestor.eu */
  --bs-heading-color: #1F2937;
  --bs-link-decoration: none;

  /* Radius : moins anguleux que Bootstrap default mais pas mou */
  --bs-border-radius-sm: 6px;
  --bs-border-radius: 8px;
  --bs-border-radius-lg: 12px;
  --bs-border-radius-xl: 16px;

  /* Shadows discrètes */
  --bs-box-shadow-sm: 0 1px 2px rgba(31, 41, 55, 0.04);
  --bs-box-shadow: 0 2px 8px rgba(31, 41, 55, 0.04);
  --bs-box-shadow-lg: 0 4px 16px rgba(31, 41, 55, 0.06);

  /* Accent or chaud Maestor — utilisé sur quelques highlights ci-dessous */
  --maestor-or: #E8B547;
  --maestor-or-soft: rgba(232, 181, 71, 0.14);
}

/* ════════════════════════════════════════════════════════════════════════════
   Reset typographique
   ════════════════════════════════════════════════════════════════════════════ */
body {
  font-family: var(--bs-font-sans-serif);
  background: var(--bs-body-bg);
  color: var(--bs-body-color);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
  font-family: var(--bs-font-sans-serif);
  font-weight: 600;
  letter-spacing: -0.015em;
  color: var(--bs-heading-color);
}

h1, .h1 { font-size: 2rem; line-height: 1.15; letter-spacing: -0.025em; }
h2, .h2 { font-size: 1.5rem; line-height: 1.2; }
h3, .h3 { font-size: 1.2rem; line-height: 1.3; }

p { line-height: 1.6; }

/* ════════════════════════════════════════════════════════════════════════════
   Boutons — finition (la couleur primary vient de company_color)
   ════════════════════════════════════════════════════════════════════════════ */
.btn {
  font-weight: 500;
  letter-spacing: -0.005em;
  border-radius: var(--bs-border-radius);
  padding: 0.625rem 1.25rem;
  transition: background-color 140ms cubic-bezier(0.22, 1, 0.36, 1),
              border-color 140ms cubic-bezier(0.22, 1, 0.36, 1),
              transform 140ms cubic-bezier(0.22, 1, 0.36, 1);
}

.btn:hover {
  transform: translateY(-1px);
}

.btn-lg {
  padding: 0.875rem 1.75rem;
  font-size: 1rem;
  border-radius: var(--bs-border-radius-lg);
}

.btn-sm {
  padding: 0.5rem 0.875rem;
  font-size: 0.85rem;
}

/* ════════════════════════════════════════════════════════════════════════════
   Cards & containers
   ════════════════════════════════════════════════════════════════════════════ */
.card {
  border: 1px solid var(--bs-border-color);
  border-radius: var(--bs-border-radius-lg);
  background: var(--bs-tertiary-bg);
}

.modal-content {
  border-radius: var(--bs-border-radius-lg);
  border: 1px solid var(--bs-border-color);
}

.dropdown-menu {
  border-radius: var(--bs-border-radius);
  border: 1px solid var(--bs-border-color);
  box-shadow: var(--bs-box-shadow-lg);
}

/* ════════════════════════════════════════════════════════════════════════════
   Formulaires
   ════════════════════════════════════════════════════════════════════════════ */
.form-control,
.form-select {
  border: 1px solid rgba(31, 41, 55, 0.18);
  border-radius: var(--bs-border-radius);
  padding: 0.625rem 0.875rem;
  font-size: 0.95rem;
  background: var(--bs-tertiary-bg);
  color: var(--bs-body-color);
  transition: border-color 140ms cubic-bezier(0.22, 1, 0.36, 1),
              box-shadow 140ms cubic-bezier(0.22, 1, 0.36, 1);
}

.form-control:focus,
.form-select:focus {
  box-shadow: 0 0 0 3px rgba(124, 45, 58, 0.08);
}

.form-label {
  font-weight: 500;
  font-size: 0.85rem;
  color: var(--bs-body-color);
  margin-bottom: 0.375rem;
  letter-spacing: -0.005em;
}

.form-text,
.small {
  color: var(--bs-secondary-color);
  font-size: 0.825rem;
}

/* ════════════════════════════════════════════════════════════════════════════
   Booking wizard — feel + finition (company_color gère les couleurs)
   ════════════════════════════════════════════════════════════════════════════ */
#book-appointment-wizard {
  background: var(--bs-body-bg);
}

/* ────────────────────────────────────────────────────────────────────────────
   Texte LISIBLE sur fond bordeaux — fix contraste

   company_color_style.php applique `color: <bordeaux>` + filter brightness sur
   le texte du header et des book-step alors que le fond est aussi bordeaux,
   ce qui produit du rose pâle illisible. On force du crème par-dessus.

   Spécificité bumped à 3 IDs (`html body #book...`) pour battre le style inline
   injecté plus tard dans le <head>.
   ──────────────────────────────────────────────────────────────────────────── */

/* Header du wizard (titre démo + nom du provider) */
html body #book-appointment-wizard #header,
html body #book-appointment-wizard #header * {
  color: #FAFAF7 !important;
  filter: none !important;
}

html body #book-appointment-wizard #company-name .display-selected-service,
html body #book-appointment-wizard #company-name .display-selected-provider,
html body #book-appointment-wizard #company-name .display-booking-selection {
  color: #FAFAF7 !important;
  filter: none !important;
  border-right-color: rgba(250, 250, 247, 0.25) !important;
}

/* Les 3 étapes du wizard (book-step) — texte crème, étape active plus contrastée */
html body #book-appointment-wizard .book-step,
html body #book-appointment-wizard .book-step *,
html body #book-appointment-wizard .book-step strong {
  color: rgba(250, 250, 247, 0.7) !important;
  filter: none !important;
}

html body #book-appointment-wizard .book-step.active-step,
html body #book-appointment-wizard .book-step.active-step *,
html body #book-appointment-wizard .book-step.active-step strong {
  color: #FAFAF7 !important;
  background: #5A1D27 !important;        /* bordeaux-dark pour différencier */
  filter: none !important;
}

/* Bouton "Backend" en footer (badge bordeaux) — texte crème */
html body #frame-footer .backend-link {
  color: #FAFAF7 !important;
}

#book-appointment-wizard .wizard-frame {
  background: var(--bs-tertiary-bg);
  border: 1px solid var(--bs-border-color);
  border-radius: var(--bs-border-radius-lg);
  padding: 1.5rem;
}

@media (min-width: 768px) {
  #book-appointment-wizard .wizard-frame {
    padding: 2.5rem;
  }
}

#book-appointment-wizard .frame-title {
  font-size: 1.35rem;
  font-weight: 600;
  letter-spacing: -0.015em;
  color: var(--bs-heading-color);
  margin-bottom: 1.5rem;
}

@media (min-width: 768px) {
  #book-appointment-wizard .frame-title {
    font-size: 1.65rem;
  }
}

#book-appointment-wizard .book-step {
  border-radius: var(--bs-border-radius);
  font-weight: 500;
  letter-spacing: -0.005em;
}

/* Bandeau de confirmation finale */
#book-appointment-wizard .frame-container .alert {
  border-radius: var(--bs-border-radius);
  border: 1px solid var(--bs-border-color);
}

/* ════════════════════════════════════════════════════════════════════════════
   Header (booking + backend)
   ════════════════════════════════════════════════════════════════════════════ */
#header {
  border-bottom: 1px solid var(--bs-border-color);
}

#header #company-name,
#header #header-logo {
  font-weight: 600;
  letter-spacing: -0.015em;
}

/* ════════════════════════════════════════════════════════════════════════════
   Date picker (flatpickr)
   ════════════════════════════════════════════════════════════════════════════ */
.flatpickr-calendar {
  border-radius: var(--bs-border-radius-lg);
  border: 1px solid var(--bs-border-color);
  box-shadow: var(--bs-box-shadow-lg);
}

/* ════════════════════════════════════════════════════════════════════════════
   Accent or chaud Maestor — touches discrètes
   ════════════════════════════════════════════════════════════════════════════ */
.badge.bg-warning,
.alert-warning {
  background: var(--maestor-or-soft) !important;
  color: #8B6914 !important;
  border-color: rgba(232, 181, 71, 0.3) !important;
}

/* ════════════════════════════════════════════════════════════════════════════
   Footer du wizard de booking
   ════════════════════════════════════════════════════════════════════════════ */
#frame-footer {
  border-top: 1px solid var(--bs-border-color);
  padding-top: 1rem;
  margin-top: 2rem;
  font-size: 0.85rem;
  color: var(--bs-secondary-color);
}

/* ════════════════════════════════════════════════════════════════════════════
   Liens
   ════════════════════════════════════════════════════════════════════════════ */
a {
  text-decoration: none;
  transition: color 140ms cubic-bezier(0.22, 1, 0.36, 1);
}

a:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ════════════════════════════════════════════════════════════════════════════
   Focus accessible global
   ════════════════════════════════════════════════════════════════════════════ */
:focus-visible {
  outline: 2px solid #7C2D3A;
  outline-offset: 2px;
  border-radius: 4px;
}

/* ════════════════════════════════════════════════════════════════════════════
   Petits ajustements responsifs
   ════════════════════════════════════════════════════════════════════════════ */
.container {
  padding-inline: 1rem;
}

@media (min-width: 768px) {
  .container {
    padding-inline: 1.5rem;
  }
}