/* assets/css/style.css
   Style principal — fond, overlay, header, chiffres, projets, footer
*/

/* Google fonts */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600;700;800&family=Poppins:wght@600;700&display=swap');

:root{
  --primary: #2563EB;
  --accent:  #38BDF8;
  --dark:    #071227;
  --card:    rgba(255,255,255,0.06);
  --card-strong: rgba(255,255,255,0.10);
  --muted:   #94a3b8;
  --text:    #e6eef8;
  --radius:  12px;
  --container-w: 1200px;
}

/* Reset */
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{
  font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial;
  color:var(--text);
  /* fallback gradient (no image until script adds the bg-image-loaded class) */
  background: linear-gradient(180deg,#051025 0%, #071227 40%);
  background-repeat: no-repeat;
  background-position: center;
  background-attachment: fixed;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  line-height:1.5;
}

/* When the script confirms the image loaded, this class is added to body */
body.bg-image-loaded {
  background-image:
    linear-gradient(180deg, rgba(3,7,18,0.72), rgba(3,7,18,0.86)),
    url('assets/img/hero-bg.png');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-attachment: fixed;
}

/* dark fade overlay on whole page (additional layer for better contrast) */
.bg-overlay {
  position: fixed;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(0,0,0,0.64) 0%, rgba(0,0,0,0.44) 36%, rgba(0,0,0,0.28) 70%, rgba(0,0,0,0.18) 100%);
  z-index: 0;
  mix-blend-mode: normal;
}

/* Layout helpers */
.container{max-width:var(--container-w);margin:0 auto;padding:0 1.25rem;position:relative;z-index:2}
main{padding:4rem 0 6rem}

/* Header */
.site-header{
  position:sticky; top:0; z-index:60;
  background: linear-gradient(180deg, rgba(2,6,23,0.55), rgba(2,6,23,0.72));
  backdrop-filter: blur(8px);
  border-bottom: 1px solid rgba(255,255,255,0.03);
}
.header-inner{display:flex;align-items:center;justify-content:space-between;padding:.9rem 0}
.brand{display:flex;align-items:center;gap:.75rem;text-decoration:none;color:var(--text)}
.brand img{height:46px;border-radius:8px;box-shadow:0 10px 30px rgba(2,6,23,.6)}
.brand strong{font-family:'Poppins', Inter; font-weight:700;letter-spacing:.2px}

/* Nav */
.nav{display:flex;gap:.25rem;align-items:center}
.nav a{
  color:var(--text);
  text-decoration:none;
  padding:.45rem .75rem;
  border-radius:10px;
  font-weight:600;
  font-size:.95rem;
  transition:all .17s ease;
}
.nav a:hover, .nav a:focus{
  background:rgba(255,255,255,0.03);
  color:white;
  transform:translateY(-2px);
  box-shadow:0 6px 18px rgba(37,99,235,.06);
}
.cta {
  background: linear-gradient(90deg,var(--primary),var(--accent));
  color:white; padding:.5rem .9rem; border-radius:999px;
  box-shadow:0 10px 30px rgba(37,99,235,.18);
}

/* Mobile hamburger */
.hamburger{display:none;background:transparent;border:0;color:var(--text);font-size:1.6rem}
.mobile-nav { display:none; position: absolute; right:1.25rem; top:64px; background: linear-gradient(180deg, rgba(3,7,18,0.98), rgba(3,7,18,0.99)); padding:12px; border-radius:12px; box-shadow:0 20px 60px rgba(2,6,23,.6);}
.mobile-nav a{display:block;padding:.7rem 1rem;border-radius:8px;color:var(--text);}

/* --- HERO: bigger, white title, subtitle effect --- */
.hero{
  padding:7.5rem 0 3rem;
  text-align:center;
  color:var(--text);
  position:relative;
  z-index:2;
}
.hero .logo{
  max-width:300px;
  margin:0 auto 1.2rem;
  display:block;
  filter: drop-shadow(0 12px 40px rgba(0,0,0,0.7));
}
.hero h1{
  font-size:3.6rem;
  font-weight:900;
  color: #ffffff;
  text-shadow: 0 8px 30px rgba(0,0,0,0.6);
  line-height:1.02;
  margin-bottom:.5rem;
}
.hero p{
  color: #f1f5f9;
  font-size:1.15rem;
  margin-top:.6rem;
  text-shadow: 0 4px 18px rgba(37,99,235,0.12);
  opacity:0.95;
}
.hero p::after{
  content: "";
  display: block;
  width: 56px;
  height: 4px;
  margin: 12px auto 0;
  border-radius: 4px;
  background: linear-gradient(90deg,var(--primary),var(--accent));
  opacity:.95;
}

/* fade-in utility */
.fade-in {
  opacity: 0;
  transform: translateY(10px);
  transition: opacity .6s ease, transform .6s ease;
}
.fade-in.visible {
  opacity: 1;
  transform: translateY(0);
}

/* --- 'Quelques chiffres' emphasized --- */
.chiffres-wrap{margin-top:2.2rem;margin-bottom:4.2rem}
.section-title.chiffres{
  font-size:1.28rem;
  font-weight:800;
  color:#ffffff;
  text-transform:uppercase;
  letter-spacing: .8px;
  margin-bottom: 1rem;
  display:inline-block;
  background: linear-gradient(90deg, rgba(37,99,235,0.12), rgba(56,189,248,0.08));
  padding:.5rem .9rem;
  border-radius:10px;
  box-shadow:0 8px 28px rgba(2,6,23,0.45);
}

/* Stats grid */
.stats-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
  gap:1.6rem;
  margin-top:1.25rem;
}

/* Stronger stat cards */
.stat{
  background: linear-gradient(180deg, rgba(255,255,255,0.08), rgba(255,255,255,0.02));
  border: 1px solid rgba(255,255,255,0.06);
  padding:1.8rem;
  border-radius:12px;
  text-align:center;
  box-shadow:0 20px 50px rgba(2,6,23,0.6);
  position:relative;
  overflow:hidden;
}

/* Accent top stripe */
.stat::before{
  content:"";
  position:absolute;
  left:0;right:0;top:0;
  height:4px;
  background: linear-gradient(90deg,var(--primary),var(--accent));
  opacity:.95;
}

/* Big numeric value visually dominant */
.stat .value{
  font-size:3rem;
  font-weight:900;
  margin-bottom:.25rem;
  background: linear-gradient(90deg,var(--primary),var(--accent));
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  color:transparent;
  text-shadow: 0 12px 30px rgba(37,99,235,0.10);
}

/* stat label */
.stat .label{ color:var(--muted); font-weight:600; }

/* =======================
   SECTION PROJETS
   enhanced project cards with semi-transparent bg image + dark fade
   uses inline CSS variable --bg on each .project-card element:
     <div class="project-card" style="--bg:url('assets/img/beaufort-bg.jpg')">
======================= */

.projects-section {
  padding: 80px 0 40px;
  background: transparent;
  text-align: center;
  z-index:2;
}

.projects-section .section-title{
  font-size:1.3rem;
  font-weight:800;
  color:#fff;
  margin-bottom:8px;
}
.projects-section .section-subtitle{
  color: #cbd5e1;
  max-width:760px;
  margin: 0 auto 36px;
  font-size:1.02rem;
}

/* grid */
.projects-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
  gap:1.8rem;
}

/* project card base */
.project-card{
  position: relative;
  padding: 24px;
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: var(--radius);
  color: white;
  overflow: hidden;
  text-align: left;
  backdrop-filter: blur(6px);
  box-shadow: 0 16px 40px rgba(2,6,23,0.5);
  transition: transform 0.35s ease, box-shadow 0.35s ease;
  min-height: 220px;
  display:flex;
  flex-direction:column;
}

/* Image background (semi transparent). --bg should contain url('...') */
.project-card::before{
  content: "";
  position:absolute;
  inset:0;
  background-image: var(--bg);
  background-size: cover;
  background-position: center;
  opacity: 0.34;
  filter: saturate(.9) contrast(.9);
  transform: scale(1.02);
  z-index: 0;
}

/* dark gradient overlay for readability */
.project-card::after{
  content: "";
  position:absolute;
  inset:0;
  background: linear-gradient(to bottom, rgba(0,0,0,0.66), rgba(0,0,0,0.82));
  z-index: 1;
}

/* ensure content above overlays */
.project-card *{ position: relative; z-index: 2; }

/* logo */
.project-logo{ height:56px; margin-bottom:14px; object-fit:contain; }

/* heading */
.project-card h3{ font-size:1.25rem; margin-bottom:8px; color:var(--text); font-weight:700; }

/* description */
.project-card p{ font-size:1rem; color:var(--muted); line-height:1.6; margin-bottom:12px; }

/* features */
.project-card ul{ margin:0 0 12px 1rem; color:var(--muted); font-size:0.95rem; }
.project-card li{ margin-bottom:6px; }

/* badge + meta */
.badge{
  display:inline-block; padding:.28rem .6rem; border-radius:999px; font-weight:700; font-size:.78rem; margin-right:.4rem;
  color:white; background: linear-gradient(90deg,var(--primary),var(--accent)); box-shadow: 0 8px 22px rgba(37,99,235,.12);
}
.project-meta{ display:flex; gap:.6rem; align-items:center; margin-top:auto; color:var(--muted); font-weight:600; font-size:.92rem; }

/* hover effect */
.project-card:hover{ transform: translateY(-8px); box-shadow:0 24px 60px rgba(37,99,235,0.15); }

/* link */
.link{ color:var(--accent); text-decoration:underline; }

/* footer (not fixed) */
.site-footer{
  position:static;
  border-top:1px solid rgba(255,255,255,0.03);
  padding:2.25rem 0;
  background: linear-gradient(180deg, rgba(2,6,23,0.9), rgba(2,6,23,0.96));
  margin-top:3.5rem;
  z-index:2;
}
.site-footer .container{ display:flex; align-items:center; justify-content:space-between; gap:1rem; }
.site-footer .left{ text-align:left; }
.site-footer .right{ text-align:right; }
.site-footer small{ color:var(--muted); }
.site-footer a{ color:var(--muted); text-decoration:none; margin-left:1rem; }
.site-footer a:hover{ color:var(--text); }

/* Responsive */
@media (max-width:900px){
  .nav{display:none}
  .hamburger{display:block}
  .mobile-nav{right:12px;left:12px}
  .hero h1{font-size:2.2rem}
  .stat .value{ font-size:2.1rem }
  main{padding:3rem 0}
  .site-footer .container{flex-direction:column;align-items:flex-start}
  .site-footer .right{margin-top:0.6rem;text-align:left}
  .project-card::before{ transform: scale(1); opacity:0.28 }
}