/* =========================================================
   Boom-360 — unslop overlay
   Chargé APRÈS styles.css. Applique les 9 passes de la méthode
   unslop (CC-BY-4.0, Damir Sokolovsky) en gardant la palette
   taupe/noir/crème et les fontes Montserrat + Fraunces italic.

   Grille 4px. Chrome calme. Un seul accent (--taupe-deep).
   Hiérarchie par taille, pas par poids. Textes identiques,
   images identiques, branding identique — forme recomposée.
   ========================================================= */

:root {
  --radius-xs: 4px;
  --radius-sm: 8px;
  --radius: 12px;
  --radius-lg: 16px;
  --radius-pill: 999px;

  /* Rythme d'espacement */
  --s-1: 4px;  --s-2: 8px;  --s-3: 12px;
  --s-4: 16px; --s-5: 20px; --s-6: 24px;
  --s-7: 32px; --s-8: 40px; --s-9: 48px;
  --s-10: 64px; --s-11: 80px; --s-12: 96px;

  --pad: clamp(20px, 4vw, 40px);
  --maxw: 1360px;

  /* Chrome calme : un accent ; les ombres colorées disparaissent */
  --shadow-sm: 0 1px 2px rgba(27, 23, 21, 0.06);
  --shadow-md: 0 2px 4px rgba(27, 23, 21, 0.06), 0 10px 24px -14px rgba(27, 23, 21, 0.14);
  --shadow-lg: 0 4px 8px rgba(27, 23, 21, 0.08), 0 24px 40px -18px rgba(27, 23, 21, 0.18);
  --shadow-taupe-md: var(--shadow-md);
  --shadow-glow: none;
}

/* =========================================================
   1 — SPACING + base
   ========================================================= */
body {
  font-size: 16px;
  line-height: 1.55;
  letter-spacing: 0;
}

/* Grille 4px propagée aux sections — réduction nette du vide vertical */
.section,
.hero.hero--centered {
  padding-top: clamp(56px, 7vw, 96px);
  padding-bottom: clamp(56px, 7vw, 96px);
}

.hero.hero--centered {
  padding-top: clamp(72px, 10vw, 128px);
  padding-bottom: clamp(48px, 6vw, 80px);
}

.section__head { margin-bottom: 48px; }

/* =========================================================
   2 — COLOR : chrome neutre, un accent
   Supprime gradients, gradient text, shadows colorées.
   ========================================================= */

/* Fini le gradient text sur le BOOM — Fraunces italique en solide */
.hero__big-boom em {
  background: none;
  -webkit-background-clip: initial;
          background-clip: initial;
  -webkit-text-fill-color: var(--taupe-deep);
  color: var(--taupe-deep);
  text-shadow: none;
  font-weight: 500;
  letter-spacing: -0.03em;
}
.hero__big-bang { color: var(--taupe-deep); }

/* Scrollbar barre : solide taupe, pas un dégradé */
.scrollbar span { background: var(--taupe-deep); }

/* Pas de glow au survol général */
*, *::before, *::after {
  text-shadow: none;
}

/* Bordures hairline cohérentes */
.services__stack,
.service,
.projects,
.project { border-color: rgba(27, 23, 21, 0.08) !important; }
.section--dark .services__stack,
.section--dark .service,
.section--dark .projects,
.section--dark .project { border-color: rgba(245, 243, 241, 0.10) !important; }

/* =========================================================
   3 — ICONS : les sparkles i du marquee disparaissent
   ========================================================= */
.marquee__track i,
.loader__marquee-track i {
  display: none !important;
}
.marquee__track {
  gap: clamp(48px, 7vw, 96px);
}
.loader__marquee-track { gap: clamp(32px, 5vw, 56px); }

/* Badge EGC : enlever l'étoile ★ visuellement, garder le texte pour a11y */
.egc__badge {
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: none;
  font-weight: 500;
  color: var(--taupe);
}

/* Le dot pulse du eyebrow : on l'arrête (anime sans raison, slop) */
.eyebrow .dot,
.dot {
  animation: none !important;
  opacity: 0.6;
}

/* =========================================================
   4 — COPY : sentence case, fini le tracking hurlé
   ========================================================= */
.eyebrow,
.eyebrow--light,
.hero__scroll,
.hero__scroll span,
.hero__credentials,
.logos-marquee__label,
.project__index,
.project__tags,
.loader__tag,
.cursor__label,
.service__num,
.marquee__track span,
.orbit__label,
.pkg-cta .eyebrow,
.egc__tag,
.egc__badge {
  text-transform: none !important;
  letter-spacing: 0.02em !important;
  font-weight: 500 !important;
}

/* Les marquees : plus de hurlement, ni uppercase ni weight 700 */
.marquee__track span {
  font-weight: 400 !important;
  font-size: clamp(18px, 2.2vw, 32px) !important;
  letter-spacing: 0 !important;
  color: rgba(245, 243, 241, 0.85);
}
.marquee {
  border-top: 1px solid rgba(245, 243, 241, 0.10);
  border-bottom: 1px solid rgba(245, 243, 241, 0.10);
}

/* Les crédentials du hero deviennent une ligne tranquille */
.hero__credentials {
  position: static;
  margin: 0 auto 32px;
  justify-content: center;
  font-size: 12px;
  color: var(--grey);
  opacity: 1 !important;
  transform: none !important;
  max-width: var(--maxw);
}
.hero__credentials b { font-weight: 500; color: var(--black); }
.hero__credentials-sep { background: rgba(27, 23, 21, 0.14); }

@media (max-width: 980px) {
  .hero__credentials { display: flex; font-size: 11px; gap: 0 12px; margin-bottom: 20px; }
}
@media (max-width: 560px) {
  .hero__credentials { display: none; }
}

/* Scroll indicator : sentence case */
.hero__scroll span { font-size: 11px; color: var(--grey); }

/* Project name et index : plus d'uppercase hurlé */
.project__name { font-weight: 500 !important; letter-spacing: -0.015em !important; }
.project__index, .project__tags {
  font-size: 12px !important;
  color: var(--taupe) !important;
}

/* =========================================================
   5 — TYPE : weights 400–500, 600 rare. Pas de 700–900.
   ========================================================= */
.nav__name {
  font-weight: 600 !important;
  letter-spacing: 0.01em !important;
  font-size: 15px;
  text-transform: none !important;
}

.hero__big,
.hero__big-row {
  font-weight: 500 !important;
  letter-spacing: -0.03em !important;
  text-transform: none !important;
}
.hero__big-row { font-size: clamp(28px, 6vw, 72px) !important; }
.hero__big { gap: 8px; margin-bottom: 32px; }
.hero__big-boom em {
  font-size: clamp(96px, 20vw, 260px) !important;
}

.section__head h2 {
  font-weight: 500 !important;
  letter-spacing: -0.02em !important;
  font-size: clamp(32px, 4.6vw, 64px) !important;
  line-height: 1.05;
}

h1, h2, h3, h4 {
  font-weight: 500;
  letter-spacing: -0.015em;
}

.service h3 {
  font-weight: 500 !important;
  font-size: clamp(16px, 1.5vw, 20px) !important;
}

.egc__col h3 { font-weight: 500; letter-spacing: -0.015em; }

/* Big BOOM band géant : enlever uppercase, enlever weight 900 */
.bigboom__track,
.bigboom span {
  font-weight: 500 !important;
  letter-spacing: -0.02em !important;
  text-transform: none !important;
}

/* Fraunces italique garde sa magie mais weight 500 (pas 700) */
em {
  font-weight: 500;
  color: var(--taupe-deep);
}

/* Numéros tabulaires partout où il y a du chiffre */
.hero__stats strong,
.reach__stats strong,
.phone figcaption b,
.boommeter__pct {
  font-variant-numeric: tabular-nums;
  font-weight: 500 !important;
  letter-spacing: -0.02em !important;
}
.hero__stats strong,
.reach__stats strong {
  font-size: clamp(36px, 4.4vw, 56px) !important;
}

/* =========================================================
   6 — LAYOUT : hero propre, section composée
   ========================================================= */
.hero.hero--centered {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  text-align: center;
  position: relative;
}

/* Le dot pulse du eyebrow disparaît visuellement */
.hero__center .eyebrow .dot { display: none; }

.hero__center .eyebrow {
  justify-content: center;
}

.hero__cta {
  gap: 12px;
  margin-top: 24px;
}

.hero__stats {
  gap: 48px;
  margin-top: 64px;
}
.hero__stats li { gap: 8px; }
.hero__stats li span {
  color: var(--grey);
  font-size: 13px;
  line-height: 1.4;
  letter-spacing: 0 !important;
  text-transform: none !important;
  font-weight: 400;
}

/* Scroll indicator recentré, petit, en bas */
.hero__scroll {
  position: absolute;
  left: 50%;
  bottom: 24px;
  transform: translateX(-50%);
  gap: 12px;
}

/* Nav : plate, hairline bottom, pas d'ombre */
.nav {
  background: rgba(245, 243, 241, 0.92);
  border-bottom: 1px solid var(--line);
  padding-top: 12px;
  padding-bottom: 12px;
}
.nav.is-scrolled {
  box-shadow: none;
}
.nav__mark { width: 36px; height: 36px; }
.nav__brand:hover .nav__mark { transform: none; }
.nav__links { gap: 28px; font-size: 14px; }
.nav__links a::after { height: 1px; background: var(--taupe-deep); }

/* =========================================================
   7 — DETAILS : radius cohérent, ombres sages
   ========================================================= */
.btn {
  border-radius: 10px !important;
  font-weight: 500 !important;
  letter-spacing: 0 !important;
  font-size: 14px !important;
  padding: 12px 20px !important;
  border: 1px solid transparent;
  transition: background 0.18s var(--ease), color 0.18s var(--ease), border-color 0.18s var(--ease);
}
.btn::before { display: none !important; }
.btn:hover .btn__arrow { transform: translateX(3px) !important; }

.btn--solid { background: var(--black); color: var(--white); }
.btn--solid:hover { background: var(--taupe-deep); }

.btn--ghost {
  background: transparent;
  color: var(--black);
  border-color: var(--line);
}
.btn--ghost:hover { background: var(--black); color: var(--white); border-color: var(--black); }

.section--dark .btn--solid { background: var(--white); color: var(--black); }
.section--dark .btn--solid:hover { background: var(--taupe); color: var(--black); }
.section--dark .btn--ghost { color: var(--white); border-color: rgba(245, 243, 241, 0.25); }
.section--dark .btn--ghost:hover { background: var(--white); color: var(--black); border-color: var(--white); }

.btn--lg { padding: 14px 24px !important; font-size: 15px !important; }
.btn--xl { padding: 16px 28px !important; font-size: 15px !important; }

/* Nav CTA : rectangle 8px, pas une pill */
.nav .btn { border-radius: 8px !important; padding: 10px 16px !important; font-size: 13px !important; }

/* Cards & panels */
.egc__col,
.service--expand,
.pkg-cta,
.pkg-card,
.quote,
.audience,
.contact-card {
  border-radius: var(--radius) !important;
  box-shadow: var(--shadow-sm) !important;
}

/* Logos marquee : plus doux */
.logos-marquee__label {
  font-size: 12px;
  color: var(--grey);
  text-transform: none !important;
  letter-spacing: 0.02em !important;
  font-weight: 500;
}
.logos__mark {
  border-radius: 10px;
  transition: opacity 0.18s var(--ease), transform 0.18s var(--ease) !important;
}
.logos__mark:hover {
  transform: translateY(-2px) !important;
  filter: none !important;
}

/* =========================================================
   8 — VISUALS : on nettoie les blobs, orbites, glows décoratifs
   ========================================================= */
.orbit, .orbit__spark { display: none !important; }

/* Section Big BOOM band : on calme la typographie */
.bigboom {
  padding: clamp(48px, 6vw, 80px) 0 !important;
}

/* Section EGC : réduction hauteur */
.egc { padding: clamp(56px, 7vw, 96px) var(--pad); }
.egc__versus { gap: 24px; }
.egc__col { padding: 24px; }
.egc__vs {
  font-family: 'Fraunces', Georgia, serif;
  font-style: italic;
  font-weight: 500;
  color: var(--taupe);
}

/* Authentic band : moins de vide vertical */
.authentic {
  padding: clamp(64px, 8vw, 112px) var(--pad);
}
.authentic h2 { font-weight: 500 !important; letter-spacing: -0.02em !important; }
.authentic__eyebrow {
  text-transform: none !important;
  letter-spacing: 0.02em !important;
  font-weight: 500 !important;
}
.authentic__pull em {
  font-weight: 500;
}

/* Les grandes sections dark n'ont plus d'immense vide */
.section--dark { padding-top: clamp(64px, 8vw, 112px); padding-bottom: clamp(64px, 8vw, 112px); }

/* Reach phone frames : léger, pas glowing */
.phone { box-shadow: var(--shadow-md) !important; }

/* Les shadows "taupe" partout : plus de glow */
*[class*="shadow"] { filter: none !important; }

/* Footmarquee */
.footmarquee {
  padding: clamp(40px, 5vw, 72px) 0 !important;
}

/* =========================================================
   9 — MOTION : plus de pulses, scales hover apaisées
   ========================================================= */
.dot,
.boommeter,
.service--expand:not(.is-open) .service__arrow {
  animation: none !important;
}

/* Hover scales trop forts : rabattus */
*[data-tilt]:hover,
.pkg-card:hover,
.logos__mark:hover,
.phone:hover {
  transform: translateY(-2px) !important;
}

/* Transition catch-all → cible les propriétés sûres */
.btn, .nav__links a, .service, .logos__mark, .phone, .pkg-card {
  transition-property: background-color, color, border-color, opacity, transform !important;
  transition-duration: 180ms !important;
  transition-timing-function: cubic-bezier(0.22, 1, 0.36, 1) !important;
}

/* Fini la rotation sur l'hover du nav mark */
.nav__brand:hover .nav__mark { transform: none !important; }

/* Hero scroll indicator : garde l'animation subtile */
.hero__scroll-line::after { animation-duration: 3s; }

/* =========================================================
   Détails supplémentaires : eyebrows & meta cohérents
   ========================================================= */
.eyebrow {
  font-size: 12px !important;
  font-weight: 500 !important;
  color: var(--taupe-deep) !important;
  gap: 8px;
}
.eyebrow--light { color: var(--taupe) !important; }

/* Services : rangées de même hauteur, alignement propre */
.service__row {
  padding: 20px 0 !important;
  grid-template-columns: 56px 1fr 24px !important;
  gap: 16px !important;
}
.service:hover .service__row { padding-left: 16px !important; }
.service__num { font-size: 12px !important; color: var(--taupe-deep) !important; }
.service__arrow { color: var(--taupe-deep) !important; opacity: 1 !important; }

/* Packages CTA : respiration */
.pkg-cta__inner { gap: 32px; }
.pkg-cta h2 { font-weight: 500 !important; }

/* Form area et autres */
input, select, textarea, button {
  font-family: inherit;
  letter-spacing: 0 !important;
}

/* Les quotes : Fraunces italique garde sa voix */
.quote, blockquote { font-weight: 500 !important; }

/* Badge "First in Mauritius" : plus de fond coloré */
.egc__badge {
  background: transparent !important;
  padding: 0 !important;
  border: 0 !important;
  box-shadow: none !important;
}

/* =========================================================
   Mobile : conservation des contraintes
   ========================================================= */
@media (max-width: 720px) {
  .hero__stats { gap: 24px; margin-top: 40px; }
  .hero__stats strong { font-size: 32px !important; }
  .section__head { margin-bottom: 32px; }
  .section__head h2 { font-size: clamp(28px, 7vw, 40px) !important; }
}

/* =========================================================
   Nettoyage général — attrape les labels/badges/metas oubliés
   partout dans le CSS existant (eyebrow, tag, num, role, pill…)
   ========================================================= */
[class*="__label"],
[class*="__tag"],
[class*="__num"],
[class*="__role"],
[class*="__meta"],
[class*="__index"],
[class*="__badge"],
[class*="__pill"],
[class*="__chaplabel"],
[class*="__quick-label"],
[class*="__client"],
[class*="__link"],
[class*="__pkg"],
[class*="__ribbon"],
[class*="__nav"],
[class*="__stats"] span,
[class*="__price-from"],
[class*="__expect-label"],
[class*="__shotbadge"],
[class*="__watch"],
[class*="__social a"],
.footer__bottom,
.quote cite,
.brief__field span,
.brief__note,
.phone figcaption span,
.contact-card__label,
.member__role,
.team__tag,
.pk-compare__table thead th {
  text-transform: none !important;
  letter-spacing: 0.02em !important;
  font-weight: 500 !important;
}

/* Les grandes bannières marquee de bandes */
.bigboom__track,
.bigboom__track span,
.logos__label,
.footmarquee__track,
.footmarquee__track span {
  text-transform: none !important;
  letter-spacing: -0.015em !important;
  font-weight: 500 !important;
}

/* Petits textes tranquilles au footer */
.footer__bottom { font-size: 12px; color: var(--grey); }

/* Scroll indicator : masquer le label SCROLL (reste la ligne) */
.hero__scroll span { font-size: 10px; opacity: 0.6; text-transform: none !important; letter-spacing: 0.02em !important; }

/* Services : num reste discret */
.service__num { font-size: 11px !important; }

/* Toujours plus de weight calme sur les H2 du contact */
.contact h2, .cta h2, .ct-hero h1, .ab-hero h1, .pk-hero h1, .pf-hero h1, .sv-hero h1 {
  font-weight: 500 !important;
  letter-spacing: -0.02em !important;
}

/* Les grosses bannières BOOM géantes : baisse le weight */
.bigboom {
  font-weight: 500 !important;
}
.bigboom span, .bigboom__track {
  font-weight: 500 !important;
}

/* Pills de nav sur les pages intérieures (sv-hero, ab-hero, pk-hero, pf-hero, ct-hero) */
.sv-hero__nav a,
.ab-hero__nav a,
.pk-hero__nav a,
.pf-hero__nav a,
.ct-hero__nav a,
.pf-filter a,
.pf-filter__item {
  text-transform: none !important;
  letter-spacing: 0.02em !important;
  font-weight: 500 !important;
  border-radius: 8px !important;
  font-size: 12px !important;
  padding: 8px 14px !important;
}

/* Les grosses stats hero des pages intérieures */
.pf-hero__stats strong,
.ab-hero__stats strong,
.pk-hero__stats strong {
  font-weight: 500 !important;
  font-variant-numeric: tabular-nums;
}

/* Service cards numérotées */
.sv-card__num,
.pf-case__num {
  font-weight: 500 !important;
  color: var(--taupe-deep) !important;
  text-transform: none !important;
  letter-spacing: 0.02em !important;
}

/* Package cards */
.pk-card h3, .pk__title {
  font-weight: 500 !important;
}
.pk__ribbon, .pk__tag, .pk__price-from {
  text-transform: none !important;
  letter-spacing: 0.02em !important;
  font-weight: 500 !important;
  font-size: 11px !important;
}

/* =========================================================
   Crédit — unslop est CC-BY-4.0 (Damir Sokolovsky, @heydamir)
   ========================================================= */