:root{--bg:#fff;--fg:#0a0a0a;--muted:#6b6b6b;--border:#e6e6e6;--accent:#000;--radius:16px;--maxw:1120px;--page-pad:20px}
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--bg);color:var(--fg);font-family:'Poppins',system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,'Helvetica Neue',Arial}
a{color:var(--fg);text-underline-offset:2px}
img{max-width:100%;height:auto;display:block}

header{position:sticky;top:0;backdrop-filter:saturate(180%) blur(6px);background:rgba(255,255,255,.85);border-bottom:1px solid var(--border);z-index:50}
.nav-inner{max-width:var(--maxw);margin:0 auto;display:flex;gap:16px;align-items:center;padding:14px var(--page-pad)}
.brand{text-decoration:none; margin-right:auto;font-weight:700;font-size:24px;line-height:1}
.nav-links{display:flex;gap:20px;align-items:center}
.nav-links a{text-decoration:none;color:var(--fg);opacity:.85;}
.nav-links a:hover,.nav-links a:focus{opacity:1}
.langswitch{border:0 !important;padding:0 !important;border-radius:0 !important;}
.langswitch .flag{width:20px;height:20px;border-radius:50%;display:block;object-fit:cover}

.burger{display:none;border:none;padding:10px 12px;border-radius:12px;background:#000}
.burger span{display:block;width:22px;height:2px;background:#fff;margin:4px 0}

.container{max-width:var(--maxw);margin:0 auto;padding:40px var(--page-pad)}

.hero{display:grid;grid-template-columns:1.1fr .9fr;gap:40px;align-items:center;}
.hero h1{font-size:42px;line-height:1.06;margin:0 0 12px}
.hero .lead{font-size:clamp(1.05rem,1.6vw,1.25rem);color:var(--muted);margin:0 0 22px}
.hero .lead-about{font-size:clamp(1.05rem,1.6vw,1.25rem);color:var(--muted);margin:0 0 22px}
.lead{font-size:clamp(1.05rem,1.6vw,1.25rem);color:var(--muted);margin:0 0 22px}
h1{font-size:42px;line-height:1.06;margin:0 0 12px}

/* Desktop: text left, image right */
@media (min-width:981px){
  .hero.home-hero .hero-text{order:1}
  .hero.home-hero .hero-image{order:2; min-height: 560px;box-shadow: -20px 13px 28px hsl(0, 0%, 80.4%);}
  .hero.home-hero .hero-image-about{order:2; width: 620px;box-shadow: -20px 13px 28px hsl(0, 0%, 80.4%);}

}

/* Hero as background block */
.hero-image{background:url('/billal-righi.jpeg') center center/cover no-repeat;border-radius:14px;width:100%;min-height:420px}
.hero-image-about{background:url('/assets/img/carousel/img18.jpg') center top/cover no-repeat;border-radius:14px;width:100%;min-height:440px}

.cta{display:flex;gap:12px;flex-wrap:wrap}
.button{appearance:none;border:1.5px solid var(--fg);background:#fff;color:var(--fg);padding:12px 18px;border-radius:999px;text-decoration:none}
.button.primary{background:#000;color:#fff;border-color:#000}

.section{margin:36px 0}
.card-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.card{border:1px solid var(--border);padding:22px;border-radius:var(--radius);background:#fff}
.eyebrow{text-transform:uppercase;font-size:.8rem;letter-spacing:.12em;color:var(--muted);font-weight:700}
h2{font-size:clamp(1.6rem,2.4vw,2rem);margin:0 0 14px}
h3{margin:10px 0 6px;font-size:1.15rem}
.muted{color:var(--muted)}
ul{padding-left:18px}

/* Card media banner */
.card .card-media{height:220px;border-radius:16px 16px 0 0;overflow:hidden;background:#eee;margin:-22px -22px 16px -22px}
.card .card-media img{width:100%;height:100%;object-fit:cover;display:block}
.card .c1{background: url('/assets/img/projects/cotizup-logo.jpg') center center/cover no-repeat;}.card .c2{background: url('/assets/img/projects/klorie-logo.jpg') center center/cover no-repeat;}.card .c3{background: url('/assets/img/projects/ummah-charity-logo.jpg') center center/cover no-repeat;}.card .c4{background: url('/assets/img/projects/circum-capital-logo.jpg') center center/cover no-repeat;}

/* Home mini grid above carousel */
.home-cards{margin-top:40px}
.home-cards .card-grid{grid-template-columns:repeat(3,1fr)}

/* Carousel (About only) */
.carousel {
  width: 100%;
  overflow: hidden;
  position: relative;
  padding: 10px 0 10px 0;
  background: #1f2225;
}

.carousel-track {
  display: flex;
  gap: 20px;
  will-change: transform;
  transform: translateZ(0); 
}

.carousel-item {
  min-width: 290px;
  height: 215px;
  border-radius: 9px;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  flex-shrink: 0;
  contain: content;
  contain: layout paint size;
}

/* Animation de défilement */
@keyframes scrollLoop {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%);
  }
}

/* Responsive */
@media (max-width: 600px) {
  .carousel-item {

  }
}

@keyframes carousel-scroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}

footer{margin-top: 30px; border-top:1px solid var(--border)}
.footer-inner{max-width:var(--maxw);margin:0 auto;padding:24px var(--page-pad);font-size:.95rem;display:flex;flex-wrap:wrap;gap:12px;align-items:center;justify-content:space-between}

@media (max-width:980px){
  .hero{grid-template-columns:1fr}
  .card-grid{grid-template-columns:1fr 1fr}
}

@media (max-width:760px){
  h3{margin:10px 0 6px;font-size:1.25rem}
  .nav-links{display:none;position:absolute;top:58px;left:0;right:0;background:#fff;border-bottom:1px solid var(--border);padding:12px var(--page-pad);flex-direction:column;gap:12px}
  .nav-links.open{display:flex}
  .nav-links a{padding: 5px 20px; border: 1px solid #CCC; border-radius: 100px;}
  .burger{display:inline-block}
  .hero .lead-about{font-size:clamp(1.25rem,1.6vw,1.25rem);color:var(--muted);margin:0 0 22px}
  .lead{font-size:clamp(1.25rem,1.6vw,1.25rem);color:var(--muted);margin:0 0 22px}

  /* Global mobile margins */
  .container{padding:32px var(--page-pad)}

  /* Home keeps margins but hero breaks out to full-bleed */
  .container.home-container{padding:0 var(--page-pad) 0}

  .hero{padding-top: 0px; grid-template-columns:1fr;gap:0;margin-left:calc(-1 * var(--page-pad));margin-right:calc(-1 * var(--page-pad))}
  .hero-image{order:-1;border-radius:0;width:100%;min-height:339px}
  .hero-image{background:url('/billal-righi.jpeg') center 56%/123% no-repeat;}
  .hero-image-about{order:-1;border-radius:0;width:100%;min-height:289px}
  .hero-text{margin: 29px 20px 0px 20px}
  .hero h1{font-size:34px;line-height:42px}
  h1{font-size:34px;line-height:42px; line-height:1.06;margin:32px 0 22px}

  /* ALL card grids stack to one column on mobile */
  .card-grid{grid-template-columns:1fr}

  .home-cards .card-grid{grid-template-columns:1fr}
  .carousel img{}

}

:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.langswitch{border:0 !important; padding:0 !important; border-radius:0 !important;}
.langswitch .flag{width:20px;height:20px;border-radius:50%;display:block;object-fit:cover}