/* ---- Base ---- */
@font-face {
  font-family: 'Inter';
  src: url('assets/Inter-Variable.ttf') format('truetype');
  font-display: swap;
}

:root{
  --green:#00b894;
  --blue:#0984e3;
  --text:#101418;
  --ink:#0b1220;
  --bg:#f6f8fb;
  --card: #ffffff;
  --muted:#64748b;
  --radius:16px;
  --shadow: 0 8px 28px rgba(10,20,30,0.12);
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin: 0;
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color: var(--text);
  background: url("images/fond.png") no-repeat center center fixed;
  background-size: cover;
  line-height: 1.5;
}
img{max-width:100%; display:block}

.container{max-width:1100px; margin:0 auto; padding:0 20px}

/* ---- accessibility ---- */
.skip-link{
  position:absolute; left:-9999px; top:auto; width:1px; height:1px; overflow:hidden;
}
.skip-link:focus{left:16px; top:16px; width:auto; height:auto; background:#fff; padding:8px 12px; border-radius:8px}

/* ---- Header ---- */
.site-header{
   position: sticky;
  top: 0;
  backdrop-filter: saturate(1.2) blur(6px);
  background: rgba(255,255,255,0.3); /* légèrement transparent */
  border-bottom: 1px solid rgba(0,0,0,0.06);
  z-index: 10;
}
.header-inner{display:flex; align-items:center; justify-content:space-between; padding:12px 0}
.brand{display:flex; align-items:center; gap:12px}
.logo{width:48px; height:auto}
.brand-title{font-weight:700; letter-spacing:0.2px}
.brand-sub{font-size:12px; color:var(--muted)}

.nav a{margin-left:16px; text-decoration:none; color:#1f2937; font-weight:600}
.nav a:hover{opacity:.8}

/* ---- Hero ---- */
.gradient-bg{
  background: linear-gradient(135deg, var(--green), var(--blue));
  color:#fff;
  position:relative;
  overflow:hidden;
}
.hero-inner{padding:72px 0; text-align:center}
.hero-inner h1{font-size: clamp(28px, 5vw, 44px); line-height:1.1; margin: 0 0 12px}
.hero-inner p{font-size: clamp(16px, 2.5vw, 20px); opacity:.95; margin:0 auto 20px; max-width:800px}
.accent{background: linear-gradient(90deg, #fff, #e6f9f3); -webkit-background-clip:text; background-clip:text; color:transparent}

@keyframes floaty {
  0% { transform: translateY(0) }
  50% { transform: translateY(-8px) }
  100% { transform: translateY(0) }
}
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}

.cta-row{display:flex; gap:12px; justify-content:center; flex-wrap:wrap}
.btn{display:inline-block; padding:12px 18px; border-radius:999px; text-decoration:none; font-weight:700; border:2px solid #fff}
.btn.primary{background:#fff; color:#0b1220}
.btn.ghost{background:transparent; color:#fff}

/* ---- Sections ---- */
.section{padding:48px 0}
.section.alt{background: rgba(255,255,255,0.8); /* 80% opaque */}

/* ---- Cards ---- */
.cards{display:grid; grid-template-columns: repeat(auto-fit, minmax(230px,1fr)); gap:16px}
.card{
  background: var(--card);
  border-radius: var(--radius);
  padding:18px;
  box-shadow: var(--shadow);
  border: 1px solid rgba(0,0,0,0.06);
}
.card h3{margin:0 0 8px}

/* ---- Réalisations ---- */
.grid{display:grid; grid-template-columns: repeat(auto-fit, minmax(220px,1fr)); gap:12px}
.shot{margin:0; background:#fff; border-radius:12px; overflow:hidden; box-shadow: var(--shadow)}
.shot img{width:100%; height:180px; object-fit:cover}
.shot figcaption{padding:8px 10px; font-size:14px; color:#334155}

/* ---- Témoignages ---- */
.testimonials{
  display:grid; grid-auto-flow:column; grid-auto-columns: min(100%, 560px);
  gap:16px; overflow-x:auto; scroll-snap-type: x mandatory; padding-bottom:4px;
}
.t{scroll-snap-align:center; background: linear-gradient(135deg, rgba(0,184,148,.14), rgba(9,132,227,.14)); border:1px solid rgba(0,0,0,0.06); border-radius:16px; padding:18px; box-shadow: var(--shadow)}
.t p{font-style:italic; margin:0 0 10px}
.t footer{color:#0f172a; font-weight:700}
.dots{display:flex; justify-content:center; gap:8px; margin-top:10px}
.dot{width:10px; height:10px; border-radius:999px; border:none; background:#cbd5e1}
.dot.active{background:var(--blue)}

/* ---- Contact ---- */
.contact{max-width:800px}
.contact-list{list-style:none; padding:0; margin:12px 0 0; display:grid; gap:6px}
.contact a{text-decoration:none; color:var(--blue); font-weight:700}
.contact a:hover{text-decoration:underline}

/* ---- Footer ---- */
.site-footer{background: rgba(11,18,32,0.7); /* 70% opaque */
  color: #cbd5e1;}
.footer-inner{display:flex; justify-content:space-between; align-items:center; gap:12px; padding:14px 0}
.footer-inner small{opacity:.9}

/* ---- Utilities ---- */
.section h2{
  margin:0 0 16px;
  font-size: clamp(22px, 3.5vw, 30px);
  color: var(--ink);
}