/* ============================================================
   SITA & Compagnie — Styles globaux — Design System v2
   Palette : #345BA9 (bleu principal) / #4DABE0 (bleu clair)
   ============================================================ */

/* ── Variables CSS ───────────────────────────────────────── */
:root {
  --color-bg:         #F8FBFF;
  --color-foreground: #1A2B4A;
  --color-card:       #FFFFFF;
  --color-primary:    #345BA9;
  --color-primary-fg: #FFFFFF;
  --color-dark:       #0D1B3E;
  --color-dark-fg:    #F0F6FF;
  --color-muted:      #6375A3;
  --color-accent:     #4DABE0;
  --color-border:     #D1DDF0;
  --color-soft:       #EEF4FC;

  /* Rétrocompatibilité anciens noms */
  --color-primary-light:  #4A7BD4;
  --color-primary-dark:   #0D1B3E;
  --color-secondary:      #4DABE0;
  --color-secondary-light:#6DC0EA;
  --color-text:       #1A2B4A;
  --color-white:      #FFFFFF;
  --color-gray:       #6375A3;
  --color-gray-light: #EEF4FC;

  /* Gradients */
  --gradient-hero:  linear-gradient(135deg, #EEF4FC 0%, #D5E5F8 50%, #B8D5F0 100%);
  --gradient-brand: linear-gradient(135deg, #345BA9, #4DABE0);

  /* Ombres */
  --shadow-soft: 0 10px 40px -10px rgba(52,91,169,0.20);
  --shadow-card: 0 4px 20px -4px rgba(13,27,62,0.10);

  /* Rétrocompatibilité ombres */
  --shadow-sm: 0 2px 8px rgba(52,91,169,.08);
  --shadow-md: 0 4px 20px rgba(52,91,169,.14);
  --shadow-lg: 0 8px 40px rgba(52,91,169,.18);

  --radius:    10px;
  --radius-lg: 1.25rem;
  --transition: .3s ease;

  --font-heading: 'Outfit', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-body:    'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

/* ── Reset ───────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.7;
  color: var(--color-foreground);
  background-color: var(--color-bg);
  -webkit-font-smoothing: antialiased;
}

/* ── Typographie ─────────────────────────────────────────── */
h1, h2, h3 {
  font-family: var(--font-heading);
  font-weight: 800;
  line-height: 1.15;
  color: var(--color-foreground);
  letter-spacing: -0.02em;
}
h4, h5, h6 {
  font-family: var(--font-heading);
  font-weight: 700;
  color: var(--color-foreground);
}
h1 { font-size: clamp(2.25rem, 5vw, 4rem); }
h2 { font-size: clamp(1.75rem, 3.5vw, 3rem); }
h3 { font-size: clamp(1.25rem, 2.5vw, 1.75rem); }

a {
  color: var(--color-primary);
  text-decoration: none;
  transition: color var(--transition);
}
a:hover { color: var(--color-accent); }
img { max-width: 100%; height: auto; }

/* ── Sections ─────────────────────────────────────────────── */
.section-padding { padding: 5rem 0; }
.section    { padding: 5rem 0; }
.section-sm { padding: 3rem 0; }
.section-lg { padding: 7rem 0; }

/* ── Fonds ────────────────────────────────────────────────── */
.hero-gradient  { background: var(--gradient-hero); }
.healing-gradient { background: var(--gradient-brand); }
.bg-dark-sita   { background: var(--color-dark); color: var(--color-dark-fg); }
.bg-soft-sita   { background: var(--color-soft); }

/* ── En-têtes de section ──────────────────────────────────── */
.section-header {
  text-align: center;
  margin-bottom: 3.5rem;
}
.section-header h2 { margin-bottom: 1rem; }
.section-header p  { color: var(--color-muted); max-width: 640px; margin: 0 auto; }

.section-label {
  display: inline-block;
  font-size: .75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--color-primary);
  margin-bottom: .5rem;
}

/* ── Cards ───────────────────────────────────────────────── */
.card-sita {
  background: var(--color-card);
  border-radius: var(--radius-lg);
  padding: 2rem;
  box-shadow: var(--shadow-card);
  border: 1px solid var(--color-border);
  transition: transform .3s ease, box-shadow .3s ease;
}
.card-sita:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-soft);
}

/* Card glass (sections sombres) */
.card-why {
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: var(--radius-lg);
  padding: 2rem;
  transition: background .3s ease, transform .3s ease;
  backdrop-filter: blur(10px);
}
.card-why:hover {
  background: rgba(255,255,255,0.1);
  transform: translateY(-4px);
}

/* Card traitement (ex. produits) — compat existant */
.card-treatment {
  background: var(--color-card);
  border-radius: var(--radius-lg);
  padding: 2rem;
  box-shadow: var(--shadow-card);
  border: 1px solid var(--color-border);
  transition: transform .3s ease, box-shadow .3s ease;
}
.card-treatment:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-soft);
}

/* Card produit avec image */
.card-produit {
  background: var(--color-card);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  border: 1px solid var(--color-border);
  overflow: hidden;
  transition: transform .3s ease, box-shadow .3s ease;
  position: relative;
}
.card-produit:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-soft);
}
.card-produit::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0;
  width: 0; height: 4px;
  background: var(--gradient-brand);
  transition: width .3s ease;
}
.card-produit:hover::after { width: 100%; }
.card-produit .card-img-top {
  height: 220px;
  object-fit: cover;
  transition: transform .4s ease;
}
.card-produit:hover .card-img-top { transform: scale(1.05); }
.card-produit .card-icon {
  width: 52px; height: 52px;
  background: var(--color-soft);
  border-radius: .75rem;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-primary);
  margin-bottom: .75rem;
}

/* ── Boîtes icônes ───────────────────────────────────────── */
.icon-box {
  width: 56px; height: 56px;
  border-radius: 1rem;
  background: var(--color-soft);
  color: var(--color-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.icon-box-gradient {
  width: 56px; height: 56px;
  border-radius: 1rem;
  background: var(--gradient-brand);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

/* ── Boutons ─────────────────────────────────────────────── */
.btn-brand {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .875rem 1.75rem;
  border-radius: 9999px;
  background: var(--gradient-brand);
  color: #fff !important;
  font-weight: 600;
  font-family: var(--font-body);
  font-size: .95rem;
  text-decoration: none;
  border: none;
  box-shadow: var(--shadow-soft);
  transition: transform .2s ease, box-shadow .2s ease;
  cursor: pointer;
  line-height: 1.4;
}
.btn-brand:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 48px -10px rgba(52,91,169,.35);
}
.btn-brand .icon { fill: white; color: white; }

.btn-outline-brand {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .875rem 1.75rem;
  border-radius: 9999px;
  background: transparent;
  color: var(--color-primary) !important;
  font-weight: 600;
  font-family: var(--font-body);
  font-size: .95rem;
  text-decoration: none;
  border: 1.5px solid var(--color-primary);
  transition: transform .2s ease, background .2s ease, color .2s ease;
  cursor: pointer;
  line-height: 1.4;
}
.btn-outline-brand:hover {
  transform: translateY(-2px);
  background: var(--color-soft);
}

/* Rétrocompatibilité anciens boutons */
.btn {
  font-family: var(--font-body);
  font-weight: 600;
  border-radius: 9999px;
  padding: .65rem 1.75rem;
  transition: all var(--transition);
  display: inline-flex;
  align-items: center;
  gap: .4rem;
}
.btn-primary, .btn-blue {
  background: var(--gradient-brand);
  border-color: transparent;
  color: #fff;
}
.btn-primary:hover, .btn-blue:hover {
  background: var(--gradient-brand);
  color: #fff;
  transform: translateY(-2px);
  box-shadow: var(--shadow-soft);
  filter: brightness(1.08);
}
.btn-secondary, .btn-light-blue {
  background: var(--color-accent);
  border-color: var(--color-accent);
  color: #fff !important;
  font-weight: 700;
}
.btn-secondary:hover {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: #fff !important;
  transform: translateY(-2px);
  box-shadow: var(--shadow-soft);
}
.btn-outline-white {
  border: 2px solid rgba(255,255,255,.7);
  color: #fff;
  background: transparent;
  border-radius: 9999px;
}
.btn-outline-white:hover {
  background: rgba(255,255,255,.15);
  border-color: #fff;
  color: #fff;
}
.btn-outline-primary {
  border: 2px solid var(--color-primary);
  color: var(--color-primary);
  background: transparent;
  border-radius: 9999px;
}
.btn-outline-primary:hover {
  background: var(--color-primary);
  color: #fff;
  transform: translateY(-2px);
}

/* ── Badges ──────────────────────────────────────────────── */
.badge-pill {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .375rem .875rem;
  border-radius: 9999px;
  background: rgba(255,255,255,.72);
  color: var(--color-primary);
  font-size: .78rem;
  font-weight: 600;
  border: 1px solid var(--color-border);
  backdrop-filter: blur(10px);
}

.cert-badge {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  padding: .3rem .75rem;
  background: var(--color-soft);
  color: var(--color-primary);
  border: 1px solid var(--color-border);
  border-radius: 9999px;
  font-size: .78rem;
  font-weight: 600;
  margin: .2rem;
}
.cert-badge--lg { font-size: .85rem; padding: .35rem .9rem; }

.footer-cert-badge {
  display: inline-flex;
  align-items: center;
  gap: .375rem;
  padding: .375rem .75rem;
  border-radius: 9999px;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.15);
  font-size: .75rem;
  font-weight: 500;
}

/* ── Stat numbers ────────────────────────────────────────── */
.stat-number {
  font-size: 3.5rem;
  font-weight: 800;
  color: var(--color-primary);
  font-family: var(--font-heading);
  line-height: 1;
}

/* Stat card classique */
.stat-card {
  text-align: center;
  padding: 2.5rem 1.5rem;
  background: var(--color-card);
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-card);
  transition: transform var(--transition), box-shadow var(--transition);
}
.stat-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-soft);
}
.stat-card .stat-number { font-size: 3rem; }
.stat-card .stat-label  { color: var(--color-muted); margin-top: .5rem; font-weight: 500; }
.stat-card .stat-icon {
  color: var(--color-primary);
  margin-bottom: 1rem;
  background: var(--color-soft);
  width: 64px; height: 64px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 1.25rem;
}

/* ── Processus ────────────────────────────────────────────── */
.process-circle {
  width: 56px; height: 56px;
  border-radius: 50%;
  background: var(--gradient-brand);
  color: #fff;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 1.1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 1rem;
  position: relative;
  z-index: 1;
  box-shadow: var(--shadow-soft);
}

.process-steps { position: relative; }
.process-step {
  text-align: center;
  padding: 1.5rem 1rem;
  position: relative;
}
.process-step .step-number {
  width: 56px; height: 56px;
  border-radius: 50%;
  background: var(--gradient-brand);
  color: #fff;
  font-family: var(--font-heading);
  font-size: 1.1rem;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 1rem;
  position: relative; z-index: 1;
  box-shadow: var(--shadow-soft);
}
.process-step .step-icon { color: var(--color-accent); margin-bottom: .75rem; }
.process-connector {
  display: flex;
  align-items: center;
  padding-top: 28px;
}
.process-connector::before {
  content: '';
  display: block;
  width: 100%;
  height: 2px;
  background: linear-gradient(to right, var(--color-border), var(--color-primary), var(--color-border));
  opacity: .4;
}

/* ── Icônes SVG ──────────────────────────────────────────── */
.icon {
  display: inline-block;
  width: 1.25em; height: 1.25em;
  fill: currentColor;
  vertical-align: middle;
  flex-shrink: 0;
}
.icon-xs  { width: 1em;    height: 1em; }
.icon-sm  { width: 1.25em; height: 1.25em; }
.icon-md  { width: 1.5em;  height: 1.5em; }
.icon-lg  { width: 2em;    height: 2em; }
.icon-xl  { width: 3em;    height: 3em; }

.icon-blue  { fill: var(--color-accent);   color: var(--color-accent); }
.icon-gold  { fill: var(--color-accent);   color: var(--color-accent); }
.icon-green { fill: var(--color-primary);  color: var(--color-primary); }
.icon-white { fill: #fff; color: #fff; }

/* ── Floating card ────────────────────────────────────────── */
.floating-card {
  background: var(--color-card);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  padding: 1.25rem;
  border: 1px solid var(--color-border);
}

/* ── FAQ (détails natifs) ────────────────────────────────── */
.faq-details {
  background: var(--color-card);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  border: 1px solid var(--color-border);
  padding: 1.5rem;
  margin-bottom: .75rem;
}
.faq-details summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  font-weight: 600;
  font-size: 1rem;
  color: var(--color-foreground);
  list-style: none;
  gap: 1rem;
}
.faq-details summary::-webkit-details-marker { display: none; }
.faq-details summary .faq-icon {
  width: 28px; height: 28px;
  border-radius: 50%;
  background: var(--color-soft);
  color: var(--color-primary);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  font-size: 1.25rem;
  font-weight: 700;
  transition: transform .2s ease;
}
.faq-details[open] summary .faq-icon { transform: rotate(45deg); }
.faq-details p {
  margin-top: 1rem;
  color: var(--color-muted);
  font-size: .95rem;
  line-height: 1.7;
}

/* ── Boutons flottants ────────────────────────────────────── */
.floating-btn {
  position: fixed;
  width: 52px; height: 52px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--shadow-soft);
  z-index: 999;
  transition: transform var(--transition), opacity var(--transition), box-shadow var(--transition);
  opacity: 0;
  pointer-events: none;
  border: none;
  cursor: pointer;
}
.floating-btn.visible { opacity: 1; pointer-events: auto; }
.floating-btn:hover   { transform: scale(1.1); box-shadow: var(--shadow-lg); }

.floating-btn--whatsapp {
  background: #25D366;
  color: #fff;
  right: 24px;
  bottom: 88px;
}
.floating-btn--whatsapp .icon { fill: #fff; color: #fff; }

.floating-btn--top {
  background: var(--gradient-brand);
  color: #fff;
  right: 24px;
  bottom: 24px;
  transform: rotate(-90deg);
}
.floating-btn--top.visible { transform: rotate(-90deg); }
.floating-btn--top:hover   { transform: rotate(-90deg) scale(1.1); }
.floating-btn--top .icon   { fill: #fff; color: #fff; }

/* ── Loader de page ───────────────────────────────────────── */
#page-loader {
  position: fixed; inset: 0;
  background: var(--color-dark);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  transition: opacity .4s ease, visibility .4s ease;
}
#page-loader.hidden { opacity: 0; visibility: hidden; }
.loader-content { text-align: center; }
.loader-bar {
  width: 120px; height: 3px;
  background: rgba(255,255,255,.2);
  margin: 1rem auto 0;
  border-radius: 2px;
  overflow: hidden;
}
.loader-bar::after {
  content: '';
  display: block;
  height: 100%; width: 40%;
  background: var(--color-accent);
  border-radius: 2px;
  animation: loaderSlide .8s ease-in-out infinite alternate;
}

/* ── Formulaires ──────────────────────────────────────────── */
.form-label { font-weight: 500; color: var(--color-foreground); margin-bottom: .35rem; }
.form-control, .form-select {
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius);
  padding: .625rem 1rem;
  font-family: var(--font-body);
  color: var(--color-foreground);
  background-color: var(--color-card);
  transition: border-color var(--transition), box-shadow var(--transition);
}
.form-control:focus, .form-select:focus {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(52,91,169,.12);
  outline: none;
}
.form-control::placeholder { color: var(--color-muted); opacity: .7; }
.form-control.is-invalid { border-color: #dc3545; }
.form-control.is-valid   { border-color: var(--color-primary); }
.invalid-feedback { font-size: .85rem; }

/* ── Alertes ──────────────────────────────────────────────── */
.alert-sita-success {
  background: rgba(52,91,169,.08);
  border: 1px solid rgba(52,91,169,.25);
  color: var(--color-primary);
  border-radius: var(--radius);
  padding: 1rem 1.25rem;
  display: flex;
  align-items: center;
  gap: .75rem;
}
.alert-sita-error {
  background: rgba(220,53,69,.08);
  border: 1px solid rgba(220,53,69,.3);
  color: #b02a37;
  border-radius: var(--radius);
  padding: 1rem 1.25rem;
}

/* ── Hero sous-pages ──────────────────────────────────────── */
.page-hero {
  background: var(--gradient-brand);
  padding: 80px 0 60px;
  color: #fff;
  position: relative;
  overflow: hidden;
}
.page-hero::before {
  content: '';
  position: absolute; inset: 0;
  background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.06'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  opacity: .6;
}
.page-hero h1 { color: #fff; }
.page-hero .breadcrumb-item.active { color: rgba(255,255,255,.75); }

/* ── Tableau Bootstrap ────────────────────────────────────── */
.table-sita thead th {
  background: var(--color-primary);
  color: var(--color-accent);
  font-weight: 700;
  border-color: var(--color-primary-light);
}
.table-sita tbody tr:nth-child(even) { background: var(--color-bg); }
.table-sita tbody td { border-color: var(--color-border); vertical-align: middle; }

/* ── Accordion Bootstrap ──────────────────────────────────── */
.accordion-sita .accordion-button {
  font-family: var(--font-heading);
  font-weight: 600;
  color: var(--color-primary);
  background: var(--color-soft);
  border-radius: var(--radius) !important;
}
.accordion-sita .accordion-button:not(.collapsed) {
  color: #fff;
  background: var(--color-primary);
  box-shadow: none;
}
.accordion-sita .accordion-button::after { filter: none; }
.accordion-sita .accordion-button:not(.collapsed)::after { filter: invert(1) brightness(2); }
.accordion-sita .accordion-body { background: var(--color-card); }

/* ── Timeline verticale ───────────────────────────────────── */
.timeline { position: relative; }
.timeline::before {
  content: '';
  position: absolute;
  left: 24px; top: 0; bottom: 0;
  width: 2px;
  background: var(--color-border);
}
.timeline-item { display: flex; gap: 1.5rem; margin-bottom: 2rem; position: relative; }
.timeline-dot {
  width: 48px; height: 48px;
  border-radius: 50%;
  background: var(--gradient-brand);
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  position: relative; z-index: 1;
}
.timeline-content h4 { color: var(--color-primary); margin-bottom: .35rem; }

/* ── CTA section finale ───────────────────────────────────── */
.cta-section {
  background: var(--gradient-brand);
  padding: 90px 0;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.cta-section::before {
  content: '';
  position: absolute; inset: 0;
  background: radial-gradient(circle at 20% 20%, rgba(255,255,255,.12), transparent 40%),
              radial-gradient(circle at 80% 80%, rgba(255,255,255,.12), transparent 40%);
}
.cta-section h2 { color: #fff; position: relative; }
.cta-section p  { color: rgba(255,255,255,.88); position: relative; }

/* ── Séparateurs ──────────────────────────────────────────── */
.divider-blue {
  width: 60px; height: 4px;
  background: var(--gradient-brand);
  margin: 1rem auto; border-radius: 2px;
}
.divider-blue--left { margin-left: 0; }
.divider-gold { width: 60px; height: 4px; background: var(--color-accent); margin: 1rem auto; border-radius: 2px; }
.divider-gold--left { margin-left: 0; }

/* ── Breadcrumb ───────────────────────────────────────────── */
.breadcrumb { background: transparent; padding: 0; margin: 0; }
.breadcrumb-item + .breadcrumb-item::before { color: rgba(255,255,255,.6); }
.breadcrumb-item a { color: rgba(255,255,255,.85); }
.breadcrumb-item a:hover { color: var(--color-accent); }
.breadcrumb-item.active { color: var(--color-accent); }

/* ── Chiffres mis en avant ────────────────────────────────── */
.highlight-number {
  font-family: var(--font-heading);
  font-size: 2.5rem;
  font-weight: 800;
  color: var(--color-accent);
}

/* ── Why cards compat ─────────────────────────────────────── */
.why-card:not(.card-why) {
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: var(--radius-lg);
  padding: 2rem 1.5rem;
  transition: background var(--transition), transform var(--transition);
}
.why-card:not(.card-why):hover {
  background: rgba(255,255,255,.1);
  transform: translateY(-4px);
}
.why-icon {
  width: 72px; height: 72px;
  background: rgba(77,171,224,.2);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto 1.25rem;
}

/* ── Partenaires ──────────────────────────────────────────── */
.partners-row {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 1.5rem;
}

/* ── Modal ────────────────────────────────────────────────── */
.modal-header.modal-sita  { background: var(--color-primary); color: #fff; }
.modal-sita .modal-title  { color: var(--color-accent); font-family: var(--font-heading); }

/* ── Ripple ───────────────────────────────────────────────── */
.btn { position: relative; overflow: hidden; }
.ripple {
  position: absolute;
  border-radius: 50%;
  background: rgba(255,255,255,.35);
  animation: rippleAnim .5s ease-out forwards;
  pointer-events: none;
}

/* ── Sidebar devis ────────────────────────────────────────── */
.quote-sidebar {
  background: var(--color-soft);
  border-radius: var(--radius-lg);
  padding: 2rem;
  border: 1px solid var(--color-border);
}
.quote-sidebar h4 { color: var(--color-primary); font-family: var(--font-heading); }
.quote-why-list { list-style: none; padding: 0; margin: 0; }
.quote-why-list li {
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: .4rem 0;
  color: var(--color-foreground);
  font-size: .95rem;
}
.quote-why-list .icon { color: var(--color-accent); }

/* ── Responsive card img ──────────────────────────────────── */
.card-img-wrap {
  overflow: hidden;
  border-radius: var(--radius) var(--radius) 0 0;
}
.card-img-wrap img {
  transition: transform .45s ease;
  width: 100%;
  display: block;
}
.card-img-wrap:hover img { transform: scale(1.06); }

/* ── Letter spacing utility ───────────────────────────────── */
.letter-spacing { letter-spacing: .1em; }

/* ── Fond bg-light-sita compat ────────────────────────────── */
.bg-light-sita   { background-color: var(--color-soft); }
.bg-primary-sita { background: var(--color-dark); color: var(--color-dark-fg); }
.bg-primary-sita h2, .bg-primary-sita h3 { color: var(--color-accent); }

/* ── Témoignages ──────────────────────────────────────────── */
.testimonial-avatar {
  width: 40px; height: 40px;
  border-radius: 50%;
  background: var(--gradient-brand);
  color: #fff;
  font-weight: 600;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-heading);
  flex-shrink: 0;
}

/* ── Service card ─────────────────────────────────────────── */
.service-card {
  transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
  border-bottom: 3px solid transparent;
}
.service-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-soft);
  border-bottom-color: var(--color-accent);
}
.service-card .service-icon {
  transition: transform var(--transition), color var(--transition);
}
.service-card:hover .service-icon {
  transform: scale(1.15) rotate(-5deg);
  color: var(--color-accent);
}

/* ── Partner logos ────────────────────────────────────────── */
.partner-logo {
  filter: grayscale(100%);
  opacity: .55;
  transition: filter var(--transition), opacity var(--transition);
  max-height: 60px;
  object-fit: contain;
}
.partner-logo:hover { filter: none; opacity: 1; }

/* ── Animate ping ─────────────────────────────────────────── */
.animate-ping {
  animation: ping 1.5s cubic-bezier(0,0,.2,1) infinite;
}