html, body {
  overflow-x: hidden;
  max-width: 100vw;
}
html {
  scroll-behavior: smooth;
  scroll-padding-top: 90px;
}
body {
  background-color: #F4F5F8;
}

/* ── Dégradés de marque (texte & fonds) ─────────────────────────────────── */
.bg-gsc-cta {
  background: linear-gradient(135deg, #E8792E, #F5A93C);
}
.text-gradient-brand {
  background: linear-gradient(90deg, #E8792E, #F5A93C);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ── Header sticky : transition d'apparence au scroll (cf. assets/js/main.js) ── */
#site-header {
  background-color: #151B4D;
  padding: 18px 0;
  transition: all 0.3s ease;
}
#site-header.is-scrolled {
  background-color: rgba(21, 27, 77, 0.95);
  backdrop-filter: blur(12px);
  box-shadow: 0 4px 32px rgba(0, 0, 0, 0.3);
  padding: 12px 0;
}

/* ── Mega-menu : ouverture au survol (desktop uniquement) ───────────────── */
.mega-menu-trigger .mega-menu-panel {
  opacity: 0;
  visibility: hidden;
  transform: translate(-50%, 6px);
  transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s;
}
.mega-menu-trigger:hover .mega-menu-panel,
.mega-menu-trigger:focus-within .mega-menu-panel {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, 0);
}
.mega-menu-trigger:hover .chevron-icon {
  transform: rotate(180deg);
}
.chevron-icon {
  transition: transform 0.2s ease;
}

/* ── Cartes interactives (services, why-gsc) ─────────────────────────────── */
.gsc-card {
  transition: all 0.3s ease;
}
.gsc-card:hover {
  border-color: rgba(232, 121, 46, 0.5);
  background-color: rgba(255, 255, 255, 0.07);
  transform: translateY(-3px);
}

/* ── Cartes de référence (grille secondaire) — overlay galerie au clic ───── */
.reference-card {
  cursor: pointer;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.reference-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 40px rgba(21, 27, 77, 0.25);
}
.reference-card .reference-overlay {
  opacity: 0;
  transition: opacity 0.25s ease;
  background: rgba(21, 27, 77, 0.45);
}
.reference-card:hover .reference-overlay {
  opacity: 1;
}

/* ── Modal galerie de références ─────────────────────────────────────────── */
#reference-modal {
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.25s ease, visibility 0.25s;
}
#reference-modal.is-open {
  opacity: 1;
  visibility: visible;
}
#reference-modal .modal-panel {
  transform: scale(0.96);
  transition: transform 0.25s ease;
}
#reference-modal.is-open .modal-panel {
  transform: scale(1);
}
.modal-thumb {
  cursor: pointer;
  opacity: 0.55;
  transition: opacity 0.2s ease, border-color 0.2s ease;
  border: 2px solid transparent;
}
.modal-thumb:hover,
.modal-thumb.is-active {
  opacity: 1;
  border-color: #E8792E;
}

/* ── Mobile drawer ────────────────────────────────────────────────────────── */
#mobile-drawer {
  transform: translateX(100%);
  transition: transform 0.25s ease;
}
#mobile-drawer.is-open {
  transform: translateX(0);
}

/* ── Animation d'apparition au scroll ─────────────────────────────────────── */
[data-reveal] {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.6s ease, transform 0.6s ease;
  transition-delay: calc(var(--reveal-index, 0) * 60ms);
}
[data-reveal].is-visible {
  opacity: 1;
  transform: translateY(0);
}
@media (prefers-reduced-motion: reduce) {
  [data-reveal] {
    transition: none;
    opacity: 1;
    transform: none;
  }
}

/* ── Focus visible (accessibilité clavier) ───────────────────────────────── */
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible {
  outline: 2px solid #E8792E;
  outline-offset: 2px;
}

/* ── Portrait duotone (section Le visage de GSC) ─────────────────────────── */
.duotone-portrait {
  filter: grayscale(1) contrast(1.05) sepia(0.15);
}