:root{
  --bg:#f0f0f0;
  --text:#0f1720;
  --muted:#383d42;
  --accent:hsla(214, 99%, 50%, 1);
  --radius:12px;
  --container:1200px;
  --gap:20px;
}
*{box-sizing:border-box}
html,body{
  height:100%;
  margin:0;
  font-family:Inter,system-ui,Arial,Helvetica,sans-serif;
  background: linear-gradient(135deg, hsla(214, 99%, 50%, 0.184) 10%, #ffffff 150%); /* bleu vers blanc */
  color:var(--text);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img,video{max-width:100%;height:auto;display:block}
.container{max-width:var(--container);margin:0 auto;padding:48px 20px}
.header-grid{display:grid;grid-template-columns:1fr auto;align-items:center;gap:16px}
.brand {
  font-family: Poppins, Inter, sans-serif;
  text-decoration: none;
  color: rgb(6, 6, 6);
  font-weight: 700;
  font-size: 28px;
}
.brand-last {
  color: hsla(214, 99%, 50%, 1);
  margin-left: 6px;
}
.nav{list-style:none;display:flex;gap:18px;padding:0;margin:0;align-items:center}
.nav a {
  text-decoration: none;
  font-family: Poppins, Inter, sans-serif;
  color: rgb(0, 0, 0);
  font-size: 16px;
  font-weight: 600;
}
.nav a:hover{color:var(--accent)}
.nav-toggle{display:none;background:transparent;border:1px solid rgba(0,0,0,0.06);padding:8px 12px;border-radius:8px}

.hero{padding:60px 0;min-height:340px;}
.hero-inner{display:grid;grid-template-columns:1fr 520px;gap:32px;align-items:center}
.hero h1{font-family:Poppins,Inter; font-size:clamp(28px,4vw,44px);margin:0}
.lead{color:var(--muted);margin:12px 0 20px}
.btn{display:inline-block;padding:10px 16px;border-radius:12px;text-decoration:none;font-weight:700}
.btn.primary{background:var(--accent);color:white;box-shadow:0 8px 20px rgba(26,45,255,0.12);transition:transform .18s ease}
.btn.primary:hover{transform:translateY(-3px)}
.btn.ghost {
  border: 1px solid rgba(0,0,0,0.06);
  background: rgb(255, 255, 255);
  color: rgb(0, 0, 0);
}

.card-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--gap);margin-top:24px}
.card {
  background:white;
  border-radius:var(--radius);
  /* border: 3px solid var(--accent); */
  overflow:hidden;
  box-shadow:0 8px 20px rgba(0,0,0,0.15);
  transition: transform 0.3s, box-shadow 0.3s;
  display:flex;
  flex-direction:column;
  min-height:320px;
}

.card:hover {
  transform: translateY(-5px);
  box-shadow:0 16px 40px rgba(0,0,0,0.25);
}
.card img{width:100%;height:220px;object-fit:cover;display:block}
/* Font-display swap for Google Fonts */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: local('Inter'), url('https://fonts.gstatic.com/s/inter/v12/UcCO3FwrK3iLTcviYwY.woff2') format('woff2');
}
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: local('Poppins'), url('https://fonts.gstatic.com/s/poppins/v20/pxiEyp8kv8JHgFVrJJfedw.woff2') format('woff2');
}
.card-body {
  padding:16px;
  flex:1;
  display:flex;
  flex-direction:column;
  justify-content: flex-end;
  align-items: center;
}
.link {
  background: none;
  color: hsla(214, 99%, 50%, 1);
  border: none;
  padding: 0;
  cursor: pointer;
  font-weight: 700;
  text-decoration: none;
  font-size: 14px;
  letter-spacing: 0.5px;
  transition: color 0.2s;
}

.link:hover {
  color: #09128f;
  text-decoration: none;
}
.muted{color:var(--muted)}
.projects-list .project{background:white;padding:18px;border-radius:12px;margin-bottom:18px;box-shadow:0 6px 18px rgba(12,12,20,0.04)}
.tag{background:rgba(26,45,255,0.08);color:var(--accent);padding:6px 10px;border-radius:999px;font-weight:600}
.gallery{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.thumb{background:white;border-radius:10px;overflow:hidden;cursor:pointer;box-shadow:0 6px 18px rgba(12,12,20,0.04)}
.thumb img{width:100%;height:200px;object-fit:cover;display:block}
.video-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:20px}

/* Modal */
.modal{position:fixed;inset:0;display:none;align-items:center;justify-content:center;background:rgba(6,8,12,0.6);z-index:1200;padding:20px}
.modal[aria-hidden="false"]{display:flex}
.modal-panel{background:white;border-radius:14px;max-width:1100px;width:100%;overflow:hidden;box-shadow:0 30px 80px rgba(12,12,20,0.18)}
.modal-grid{display:grid;grid-template-columns:1fr 420px;gap:20px;padding:20px}
.modal-media{background:#f6f7fb;border-radius:10px;padding:12px;min-height:320px;display:flex;align-items:center;justify-content:center}
.modal-media img{max-width:100%;max-height:60vh;border-radius:8px}
.modal-content{padding:6px 12px}
.modal-close{position:absolute;right:14px;top:14px;border:none;background:#fff;font-size:20px;padding:6px 10px;border-radius:8px;cursor:pointer}

/* carousel controls */
.carousel-controls{display:flex;gap:8px;justify-content:center;margin-top:10px}
.carousel-controls button{border:none;padding:8px 10px;border-radius:8px;background:transparent;cursor:pointer}

/* Page transition overlay */
.page-transition-overlay {
  position: fixed;
  inset: 0;
  background: white;
  z-index: 9999;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.4s ease;
}
.page-transition-overlay.active {
  opacity: 1;
  pointer-events: auto;
}

/* responsiveness */
@media (max-width:1000px){
  .hero-inner{grid-template-columns:1fr;gap:24px}
  .card-grid{grid-template-columns:repeat(2,1fr)}
  .modal-grid{grid-template-columns:1fr}
  .modal-panel{max-width:900px}
  .modal-media{min-height:240px}
}
@media (max-width:600px){
  .card-grid{grid-template-columns:1fr}
  .nav{display:none}
  .nav-toggle{display:inline-block}
  .mobile-nav{padding:12px;background:white}
  .gallery{grid-template-columns:repeat(2,1fr)}
  .container{padding:28px 16px}
  .modal-media img{max-height:50vh}
}