/*
 * G pro — Charte couleurs (alignée Wix d'origine)
 * Primary brand (turquoise/teal vif des graphiques) : #2DBFA0
 * Secondary brand (bleu pétrole foncé du portrait)  : #1D4A5C
 * Ink (texte sombre)                                 : #0F2A36
 * BG principal                                       : #FFFFFF
 * BG section claire                                  : #F4F7F8
 * Borders                                            : #E2E8EA
 *
 * Pour éviter de renommer toutes les classes Tailwind du HTML,
 * on REMAPPE les tokens existants :
 *   gold   → teal vif #2DBFA0     (accent principal)
 *   goldd  → teal foncé #1F9C82   (hover)
 *   ink    → #0F2A36              (anthracite teal)
 *   steel  → #1D4A5C              (bleu pétrole signature)
 *   ivory  → #F4F7F8              (gris très clair)
 *   cream  → #FFFFFF              (blanc)
 *   line   → #E2E8EA              (gris bordure)
 *   mute   → #5F6B72              (texte gris)
 */

html{scroll-behavior:smooth}
body{background:#FFFFFF;color:#0F2A36;font-family:'Inter',system-ui,sans-serif;-webkit-font-smoothing:antialiased}
.display{font-family:'Fraunces',serif;font-feature-settings:"ss01","ss02";letter-spacing:-0.02em}
.mono{font-family:'JetBrains Mono',monospace}
.tracking-eyebrow{letter-spacing:.22em}
.divider{height:1px;background:linear-gradient(to right,transparent,#2DBFA0 30%,#2DBFA0 70%,transparent)}
.hairline{border-color:#E2E8EA}
.gold-rule{height:1px;background:#2DBFA0}

.hero-bg{
  background-image:linear-gradient(180deg,rgba(15,42,54,.55) 0%,rgba(15,42,54,.75) 60%,rgba(15,42,54,.92) 100%),
                    url('../img/hero.jpg');
  background-size:cover;background-position:center;background-attachment:fixed;
}
@media (max-width:768px){.hero-bg{background-attachment:scroll}}

.reveal{opacity:0;transform:translateY(28px);transition:opacity .9s ease,transform .9s ease}
.reveal.in{opacity:1;transform:none}

@keyframes marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.marquee{animation:marquee 38s linear infinite}

.svc{transition:transform .5s ease,box-shadow .5s ease,border-color .5s ease}
.svc:hover{transform:translateY(-6px);box-shadow:0 24px 60px -30px rgba(15,42,54,.25);border-color:#2DBFA0}

.proj-img{transition:transform 1.2s ease}
.proj:hover .proj-img{transform:scale(1.06)}
.proj:hover .proj-arrow{transform:translate(4px,-4px)}
.proj-arrow{transition:transform .4s ease}

/* NAV: clair sur hero sombre, sombre au scroll */
#nav{transition:all .35s ease}
#nav .nav-logo-title{color:#fff}
#nav .nav-logo-sub{color:rgba(255,255,255,.65)}
#nav .nav-link{color:rgba(255,255,255,.88)}
#nav .nav-cta{color:#fff;border-color:rgba(255,255,255,.35)}
#nav.nav-scrolled{background:#FFFFFF;border-bottom:1px solid #E2E8EA;box-shadow:0 4px 24px -16px rgba(15,42,54,.18)}
#nav.nav-scrolled .nav-logo-title{color:#0F2A36}
#nav.nav-scrolled .nav-logo-sub{color:#5F6B72}
#nav.nav-scrolled .nav-link{color:#0F2A36}
#nav.nav-scrolled .nav-cta{color:#0F2A36;border-color:rgba(15,42,54,.22)}

/* Sub-pages: nav toujours blanc opaque (pas de hero sombre derrière) */
body.subpage #nav{background:#FFFFFF;border-bottom:1px solid #E2E8EA;box-shadow:0 4px 24px -16px rgba(15,42,54,.10)}
body.subpage #nav .nav-logo-title{color:#0F2A36}
body.subpage #nav .nav-logo-sub{color:#5F6B72}
body.subpage #nav .nav-link{color:#0F2A36}
body.subpage #nav .nav-cta{color:#0F2A36;border-color:rgba(15,42,54,.22)}

input,textarea,select{font-family:inherit}
.field{background:#fff;border:1px solid #E2E8EA;padding:14px 16px;width:100%;font-size:15px;transition:border-color .3s,box-shadow .3s}
.field:focus{outline:none;border-color:#2DBFA0;box-shadow:0 0 0 4px rgba(45,191,160,.12)}

.kpi-num{font-variant-numeric:tabular-nums;letter-spacing:-.03em}
.dots{background-image:radial-gradient(#0F2A36 1px,transparent 1px);background-size:18px 18px;opacity:.08}
.sec-num{font-family:'JetBrains Mono',monospace;color:#2DBFA0;font-size:13px;letter-spacing:.15em}

::selection{background:#2DBFA0;color:#0F2A36}

/* Page header (sub-pages) */
.page-hero{
  background:
    radial-gradient(ellipse at 30% 0%, rgba(45,191,160,.08) 0%, transparent 50%),
    radial-gradient(ellipse at 90% 100%, rgba(29,74,92,.08) 0%, transparent 50%),
    #FFFFFF;
}

/* Article prose */
.prose{max-width:720px;line-height:1.75;color:#1A2E38}
.prose p{margin-bottom:1.4em;font-size:17px}
.prose h2{font-family:'Fraunces',serif;font-weight:400;font-size:2rem;margin-top:3em;margin-bottom:.8em;color:#0F2A36;letter-spacing:-.02em}
.prose h3{font-family:'Fraunces',serif;font-weight:500;font-size:1.4rem;margin-top:2.2em;margin-bottom:.6em;color:#0F2A36}
.prose h4{font-family:'Inter',sans-serif;font-weight:600;font-size:1.05rem;margin-top:1.6em;margin-bottom:.4em;color:#0F2A36;text-transform:uppercase;letter-spacing:.08em}
.prose ul,.prose ol{margin-bottom:1.4em;padding-left:1.4em}
.prose li{margin-bottom:.5em}
.prose ul li{list-style:none;position:relative}
.prose ul li::before{content:"→";color:#2DBFA0;position:absolute;left:-1.4em;font-weight:600}
.prose strong{color:#0F2A36;font-weight:600}
.prose blockquote{border-left:3px solid #2DBFA0;padding:1em 0 1em 1.5em;margin:2em 0;font-family:'Fraunces',serif;font-style:italic;font-size:1.3rem;color:#0F2A36}
.prose a{color:#1F9C82;text-decoration:underline;text-underline-offset:3px;text-decoration-color:rgba(31,156,130,.4)}
.prose a:hover{text-decoration-color:#1F9C82}