/* ============================================================
   Galéo — thème partagé des pages statiques (public/*.html)
   Charte réelle : navy + teal (accent) + orange (CTA), Poppins.
   Référencé par <link href="galeo-theme.css"> dans chaque page.
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@500;600;700&family=Source+Sans+3:wght@400;500;600&display=swap');

:root {
  /* Palette Galéo */
  --ga-navy: #243C58;
  --ga-indigo: #201850;
  --ga-teal: #47858C;
  --ga-orange: #FF9320;
  --ga-gold: #BF9765;
  --ga-gold-200: #E4C892;
  --ga-gold-700: #8A6A2E;
  --ga-slate: #58838C;
  --ga-cream: #F7F3EA;
  --ga-green: #3C643C;

  /* Alias courts utilisés par certaines pages */
  --teal: var(--ga-teal);
  --orange: var(--ga-orange);
  --indigo: var(--ga-indigo);
  --cream: var(--ga-cream);

  /* Intégration Bootstrap 5.3 */
  --bs-primary: #243C58;
  --bs-primary-rgb: 36, 60, 88;
  --bs-secondary: #FF9320;
  --bs-secondary-rgb: 255, 147, 32;
  --bs-link-color: #243C58;
  --bs-link-color-rgb: 36, 60, 88;
  --bs-link-hover-color: #47858C;
  --bs-link-hover-color-rgb: 71, 133, 140;
  --bs-body-color: #2b2f36;
  --bs-body-font-family: 'Source Sans 3', system-ui, -apple-system, sans-serif;
}

body { font-family: var(--bs-body-font-family); color: var(--bs-body-color); }
h1, h2, h3, h4, .navbar-brand,
.display-1, .display-2, .display-3, .display-4, .display-5, .display-6 {
  font-family: 'Poppins', sans-serif;
}

/* ---------- Boutons / utilitaires Bootstrap rebrandés ---------- */
.btn-primary {
  --bs-btn-bg: #243C58; --bs-btn-border-color: #243C58; --bs-btn-color: #fff;
  --bs-btn-hover-bg: #1b2d43; --bs-btn-hover-border-color: #1b2d43; --bs-btn-hover-color: #fff;
  --bs-btn-active-bg: #1b2d43; --bs-btn-active-border-color: #1b2d43;
  --bs-btn-disabled-bg: #243C58; --bs-btn-disabled-border-color: #243C58;
}
.btn-secondary {
  --bs-btn-bg: #FF9320; --bs-btn-border-color: #FF9320; --bs-btn-color: #fff;
  --bs-btn-hover-bg: #ec8410; --bs-btn-hover-border-color: #ec8410; --bs-btn-hover-color: #fff;
  --bs-btn-active-bg: #ec8410; --bs-btn-active-border-color: #ec8410; --bs-btn-active-color: #fff;
  --bs-btn-disabled-bg: #FF9320; --bs-btn-disabled-border-color: #FF9320; --bs-btn-disabled-color: #fff;
}
.btn-outline-primary {
  --bs-btn-color: #243C58; --bs-btn-border-color: #243C58;
  --bs-btn-hover-bg: #243C58; --bs-btn-hover-border-color: #243C58; --bs-btn-hover-color: #fff;
  --bs-btn-active-bg: #243C58; --bs-btn-active-border-color: #243C58;
}
.text-primary { color: #243C58 !important; }
.link-primary { color: #243C58 !important; }
.text-bg-secondary { color: #fff !important; background-color: #FF9320 !important; }

/* ---------- Marque ---------- */
.brand-mark { display: inline-flex; align-items: baseline; gap: .45rem; font-family: 'Poppins', sans-serif; }
.brand-mark strong { font-weight: 700; font-size: 1.3rem; color: var(--ga-indigo); letter-spacing: -.01em; }
.brand-mark strong b { color: var(--ga-teal); }
.brand-mark span { font-size: .78rem; font-weight: 500; color: var(--bs-secondary-color, #6b7785); }

/* ---------- Eyebrow & règle de titre ---------- */
.eyebrow { text-transform: uppercase; letter-spacing: .14em; font-size: .78rem; font-weight: 600; color: var(--ga-teal); }
.eyebrow--light { color: var(--ga-gold-200); }
.title-rule { position: relative; padding-bottom: .65rem; }
.title-rule::after {
  content: ""; position: absolute; left: 50%; transform: translateX(-50%);
  bottom: 0; width: 64px; height: 4px; border-radius: 2px; background: var(--ga-orange);
}
.text-start > .title-rule::after, .title-rule.text-start::after { left: 0; transform: none; }
.text-gold { color: var(--ga-orange) !important; }

/* ---------- Sections ---------- */
.section-cream { background: var(--ga-cream); }
.section-navy { background-color: var(--ga-navy); background-image: url('/brand/motif-hexagones.svg'); background-size: 120px auto; color: #fff; }
.section-navy .eyebrow { color: var(--ga-gold-200); }
.py-lg-6 { } /* placeholder : padding géré par utilitaires Bootstrap + media ci-dessous */
@media (min-width: 992px) { .py-lg-6 { padding-top: 5rem; padding-bottom: 5rem; } }

/* ---------- Hero & blobs décoratifs ---------- */
.hero { position: relative; overflow: hidden; background: linear-gradient(135deg, #ffffff 0%, var(--ga-cream) 100%); }
.ga-blob { position: absolute; border-radius: 50%; filter: blur(6px); opacity: .16; z-index: 0; pointer-events: none; }
.ga-blob--orange { background: var(--ga-orange); }
.ga-blob--gold { background: var(--ga-gold); }

/* ---------- Cartes ---------- */
.card-hover { transition: transform .18s ease, box-shadow .18s ease; border: 1px solid rgba(36, 60, 88, .08); }
.card-hover:hover { transform: translateY(-4px); box-shadow: 0 .85rem 1.8rem rgba(36, 60, 88, .14); }
.service-icon {
  width: 54px; height: 54px; border-radius: 15px; display: grid; place-items: center;
  background: rgba(71, 133, 140, .12); color: var(--ga-teal); font-size: 1.45rem; margin-bottom: 1rem;
}

/* ---------- Footer ---------- */
.footer { background: var(--ga-indigo); color: rgba(255, 255, 255, .85); }
.footer a { color: var(--ga-gold-200); text-decoration: none; }
.footer a:hover { color: #fff; }