:root{
--cardin:#0C1A1A; /* Vert Cardin */
--teal:#6ACFC7; /* Sarcelle duveteuse */
--bg: #0e1515; /* fond foncé */
--fg: #E6F2F2; /* texte principal */
--muted: #A5C0BF; /* texte secondaire */
--accent: var(--teal);
}


html, body{font-family: "Inter", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; color: var(--fg); background: radial-gradient(1200px 600px at 10% -10%, rgba(106,207,199,.12), transparent 50%), var(--cardin);}


.navbar{background: rgba(12,26,26,.7) !important; backdrop-filter: blur(6px);}
.glass-nav{border-bottom: 1px solid rgba(106,207,199,.15)}


a{color: var(--accent);}
.btn-accent{background: var(--accent); color: #081010; border: none}
.btn-accent:hover{filter: brightness(1.05)}
.btn-outline-accent{border-color: var(--accent); color: var(--accent)}
.btn-outline-accent:hover{background: var(--accent); color:#081010}


.text-accent{color: var(--accent)!important}
.bg-accent-subtle{background: color-mix(in oklab, var(--accent) 20%, transparent)}
.text-accent-emphasis{color: color-mix(in oklab, var(--accent) 80%, white)}


.section-title{font-weight:800; letter-spacing:.3px}


.hero{position: relative;}
.hero-wave path{fill: color-mix(in oklab, var(--accent) 18%, transparent)}
.hero-blob{width: 380px; height: 380px; border-radius: 50%; background: radial-gradient(circle at 30% 30%, color-mix(in oklab, var(--accent) 50%, #fff) 0%, var(--accent) 45%, transparent 60%),
conic-gradient(from 180deg at 50% 50%, rgba(106,207,199,.35), rgba(12,26,26,.0)); filter: blur(1px); box-shadow: inset 0 0 40px rgba(0,0,0,.15), 0 10px 60px rgba(106,207,199,.15)}


.card-tilt{transition: transform .15s ease, box-shadow .2s ease; will-change: transform}
.card-tilt:hover{transform: translateY(-4px); box-shadow: 0 12px 40px rgba(106,207,199,.12)}


.project-card{position: relative; display:block; border-radius: 16px; overflow: hidden;}
.project-card img{width:100%; height: 280px; object-fit: cover; filter: saturate(90%)}
.project-card .project-overlay{position:absolute; inset:0; display:flex; flex-direction:column; align-items:flex-start; justify-content:flex-end; padding:16px; background: linear-gradient(180deg, rgba(0,0,0,0) 30%, rgba(0,0,0,.55)); color:#fff}
.project-card:hover img{transform: scale(1.03); transition: transform .6s ease}


.stat{padding: 14px 16px; background: rgba(255,255,255,.03); border:1px solid rgba(106,207,199,.15); border-radius: 14px}


footer{background: rgba(0,0,0,.05)}


/* utilitaires */
.border-opacity-25{border-color: rgba(255,255,255,.15)!important}


/* Réactivité */
@media (max-width: 576px){
.hero-blob{display:none}
.project-card img{height: 220px}
}