/* ============================================================
 * SEPHAT — SYSTÈME DE DESIGN
 * Fondation partagée : tokens, composants réutilisables.
 * Chargé avant sephat.css. Tout le site s'appuie dessus.
 * ============================================================ */

:root {
  /* — Couleurs de marque (issues du logo) — */
  --sx-deep:    #06243f;   /* bleu profond — header, hero, texte fort */
  --sx-deep-2:  #0c3055;   /* bleu profond clair — grille, bordures sombres */
  --sx-cyan:    #0a91d4;   /* cyan — primaire, liens, accents */
  --sx-cyan-d:  #0a6bb0;   /* cyan foncé — hover, texte lien */
  --sx-cyan-l:  #e6f4fb;   /* cyan très clair — fonds, surbrillances */
  --sx-amber:   #ef9f27;   /* ambre — CTA devis, badges promo */
  --sx-amber-d: #d98d18;
  --sx-amber-ink:#412402;

  /* — Neutres — */
  --sx-ink:     #1a232c;   /* texte principal */
  --sx-muted:   #5f6b76;   /* texte secondaire */
  --sx-faint:   #8a96a3;   /* texte tertiaire (hints) */
  --sx-line:    #e3e8ee;   /* bordures */
  --sx-line-2:  #cfd8e0;   /* bordures appuyées */
  --sx-bg:      #f5f7f9;   /* fond de page */
  --sx-surface: #ffffff;   /* surfaces (cartes) */
  --sx-surface-2:#f4f7f9;  /* surfaces secondaires */

  /* — Sémantique — */
  --sx-success: #1d9e75;
  --sx-success-bg:#e1f5ee;
  --sx-danger:  #e24b4a;
  --sx-warning: #ba7517;

  /* — Rayons — */
  --sx-r-sm: 5px;
  --sx-r:    8px;
  --sx-r-lg: 12px;

  /* — Échelle d'espacement — */
  --sx-s1: 4px;  --sx-s2: 8px;  --sx-s3: 12px;
  --sx-s4: 16px; --sx-s5: 24px; --sx-s6: 32px; --sx-s7: 48px;

  /* — Ombres (parcimonie) — */
  --sx-shadow: 0 1px 3px rgba(6,36,63,.06), 0 1px 2px rgba(6,36,63,.04);
  --sx-shadow-lg: 0 6px 20px rgba(6,36,63,.10);

  /* — Conteneur — */
  --sx-maxw: 1240px;
}

/* — Typographie de base — */
body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  color: var(--sx-ink);
  background: var(--sx-bg);
  -webkit-font-smoothing: antialiased;
}
.sx-num { font-variant-numeric: tabular-nums; }

/* — Conteneur centré — */
.sx-container { max-width: var(--sx-maxw); margin: 0 auto; padding-left: var(--sx-s4); padding-right: var(--sx-s4); }

/* ============================================================
 * COMPOSANTS RÉUTILISABLES
 * ============================================================ */

/* — Boutons — */
.sx-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  font-size: 14px; font-weight: 500; line-height: 1; cursor: pointer;
  padding: 11px 18px; border-radius: var(--sx-r); border: 1px solid transparent;
  transition: background .15s ease, border-color .15s ease, color .15s ease;
  text-decoration: none;
}
.sx-btn-primary { background: var(--sx-cyan); color: #fff; }
.sx-btn-primary:hover { background: var(--sx-cyan-d); color: #fff; }
.sx-btn-quote { background: var(--sx-amber); color: var(--sx-amber-ink); }
.sx-btn-quote:hover { background: var(--sx-amber-d); color: var(--sx-amber-ink); }
.sx-btn-ghost { background: transparent; border-color: var(--sx-line-2); color: var(--sx-deep); }
.sx-btn-ghost:hover { background: var(--sx-surface-2); border-color: var(--sx-cyan); }
.sx-btn-icon { padding: 11px 13px; }

/* — Badges / puces — */
.sx-badge {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 12px; padding: 4px 10px; border-radius: var(--sx-r-sm);
  background: var(--sx-surface-2); color: var(--sx-muted);
}
.sx-badge-info { background: var(--sx-cyan-l); color: var(--sx-cyan-d); }
.sx-badge-success { background: var(--sx-success-bg); color: var(--sx-success); }

/* — Carte — */
.sx-card {
  background: var(--sx-surface); border: 1px solid var(--sx-line);
  border-radius: var(--sx-r-lg); box-shadow: var(--sx-shadow);
}

/* — Fil d'ariane — */
.sx-breadcrumb { font-size: 12px; color: var(--sx-muted); padding: 12px 0; }
.sx-breadcrumb a { color: var(--sx-cyan-d); text-decoration: none; }
.sx-breadcrumb a:hover { text-decoration: underline; }
.sx-breadcrumb .sep { margin: 0 6px; color: var(--sx-faint); }

/* — Tableau de specs — */
.sx-specs-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 24px; }
.sx-spec-row {
  display: flex; justify-content: space-between; gap: 12px;
  padding: 8px 0; border-bottom: 1px solid var(--sx-line); font-size: 13px;
}
.sx-spec-row .k { color: var(--sx-muted); }
.sx-spec-row .v { font-variant-numeric: tabular-nums; text-align: right; }

/* — Bloc prix — */
.sx-price-box { background: var(--sx-surface-2); border-radius: var(--sx-r); padding: 12px 14px; }
.sx-price-na { font-size: 18px; font-weight: 500; color: var(--sx-cyan-d); }
.sx-price-hint { font-size: 12px; color: var(--sx-muted); margin: 6px 0 0; }

@media (max-width: 600px) {
  .sx-specs-grid { grid-template-columns: 1fr; }
}