:root{
  --bg:oklch(98.5% 0.004 95);
  --bg-alt:oklch(95.5% 0.006 95);
  --fg:oklch(19% 0.008 95);
  --fg-muted:oklch(46% 0.012 95);
  --accent:oklch(83% 0.19 93);
  --accent-ink:oklch(58% 0.15 90);
  --border:oklch(88% 0.006 95);
  --display:'Space Grotesk','Helvetica Neue',Arial,sans-serif;
  --body:'Work Sans','Helvetica Neue',Arial,sans-serif;
  --pad: 100px;
}

@media (max-width:1100px){ :root{ --pad: 56px; } }
@media (max-width:640px){ :root{ --pad: 24px; } }

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  background:var(--bg);
  color:var(--fg);
  font-family:var(--body);
  -webkit-font-smoothing:antialiased;
}
a{color:var(--fg);text-decoration:underline;text-decoration-color:var(--accent);text-underline-offset:3px;}
h1,h2,h3{font-family:var(--display);margin:0;}
img,svg{max-width:100%;}

.label{font-family:var(--display);font-size:14px;letter-spacing:.16em;text-transform:uppercase;color:var(--accent);font-weight:600;}

.btn{display:inline-flex;align-items:center;gap:10px;padding:15px 28px;font-family:var(--display);font-weight:500;font-size:14px;border-radius:2px;cursor:pointer;border:none;text-decoration:none;}
.btn-primary{background:var(--accent);color:oklch(22% 0.03 90);}
.btn-ghost{border:1px solid var(--fg);color:var(--fg);background:none;}

/* ---------- Header / Nav ---------- */
.site-header{
  position:sticky;top:0;z-index:50;
  background:var(--bg);
  border-bottom:1px solid var(--border);
}
.nav-inner{
  display:flex;align-items:center;justify-content:space-between;
  padding:0 var(--pad);height:88px;
}
.logo{color:var(--fg);display:flex;align-items:center;text-decoration:none;}
.logo-mark{display:inline-flex;flex-direction:column;align-items:flex-start;gap:.14em;font-family:'Archivo',Helvetica,Arial,sans-serif;font-size:30px;}
.logo-word{font-weight:800;letter-spacing:-.045em;line-height:.85;color:var(--fg);}
.logo-bar{display:block;width:.68em;height:.177em;background:var(--accent);}
.nav-right{display:flex;align-items:center;gap:44px;}
.nav-links{display:flex;gap:36px;font-family:var(--display);font-size:14px;list-style:none;margin:0;padding:0;}
.nav-links a{position:relative;display:inline-block;padding-bottom:4px;text-decoration:none;color:var(--fg);}
.nav-links a::after{
  content:"";position:absolute;left:0;bottom:0;width:100%;height:2px;
  background:var(--accent);transform:scaleX(0);transform-origin:left;
  transition:transform .25s ease;
}
.nav-links a:hover::after{transform:scaleX(1);}
.nav-cta{padding:11px 22px;font-size:13px;text-decoration:none;}
.nav-toggle{display:none;background:none;border:none;padding:8px;cursor:pointer;color:var(--fg);}

@media (max-width:860px){
  .nav-right .nav-links, .nav-right .nav-cta{display:none;}
  .nav-toggle{display:inline-flex;}
  .nav-inner{height:64px;}
  .logo-mark{font-size:23px;}
}

.mobile-menu{
  display:none;
  flex-direction:column;
  border-bottom:1px solid var(--border);
  background:var(--bg);
}
.mobile-menu.open{display:flex;}
.mobile-menu a{
  padding:18px var(--pad);
  border-top:1px solid var(--border);
  font-family:var(--display);
  font-size:15px;
  text-decoration:none;
  color:var(--fg);
}
.mobile-menu .btn{margin:16px var(--pad) 20px;justify-content:center;}

/* ---------- Hero ---------- */
.hero{
  position:relative;overflow:hidden;
  min-height:560px;display:flex;align-items:center;
  padding:100px var(--pad);
  background:#0a0a0c url('https://kdbz.fr/img/Paris_Night.jpg') center/cover no-repeat;
}
.hero::before{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg, rgba(10,10,12,.35) 0%, rgba(10,10,12,.74) 100%);
}
.hero .inner{position:relative;max-width:860px;}
.hero .label{color:var(--accent);}
.hero h1{font-weight:700;font-size:60px;line-height:1.05;margin:0 0 30px;letter-spacing:-.02em;color:#fff;}
.hero p{font-size:17px;line-height:1.6;color:rgba(255,255,255,.82);max-width:480px;margin:0 0 40px;}
.hero .actions{display:flex;gap:14px;flex-wrap:wrap;}
.hero .btn-ghost{border-color:rgba(255,255,255,.65);color:#fff;}
.hero-accent{position:relative;display:inline-block;padding-bottom:5px;}
.hero-accent::after{
  content:"";position:absolute;left:0;bottom:0;width:100%;height:4px;
  background:var(--accent);transform:scaleX(0);transform-origin:left;
  animation:heroAccentGrow .7s ease .5s forwards;
}
@keyframes heroAccentGrow{to{transform:scaleX(1);}}
@media (prefers-reduced-motion: reduce){
  .hero-accent::after{animation:none;transform:scaleX(1);}
}
.hero .credit{
  position:absolute;right:var(--pad);bottom:16px;z-index:1;
  display:flex;align-items:center;gap:6px;
  font-size:11.5px;color:rgba(255,255,255,.7);
}
.hero .credit svg{flex:none;}

@media (max-width:900px){
  .hero{min-height:480px;}
}

@media (max-width:640px){
  .hero{padding:40px var(--pad) 56px;min-height:420px;}
  .hero h1{font-size:32px;line-height:1.15;}
  .hero p{font-size:15px;}
  .hero .actions{flex-direction:column;}
  .hero .actions .btn{justify-content:center;}
}

/* ---------- Section shells ---------- */
.section{padding:96px var(--pad);}
.section.alt{background:var(--bg-alt);}
.section-head{display:flex;flex-direction:column;margin-bottom:56px;gap:10px;}
.section-head p{color:var(--fg-muted);max-width:480px;font-size:14.5px;line-height:1.6;margin:0;}

@media (max-width:640px){
  .section{padding:48px var(--pad);}
  .section-head{margin-bottom:28px;}
}

/* ---------- Savoir-faire ---------- */
.services-grid{
  display:grid;grid-template-columns:repeat(4, minmax(0, 1fr));
  gap:1px;background:var(--border);border:1px solid var(--border);
}
.service-card{background:var(--bg);padding:40px 32px;transition:background-color .2s ease;}
.service-card svg{color:var(--accent);margin-bottom:24px;transition:color .2s ease;}
.service-card h3{font-size:17px;font-weight:700;margin:0 0 12px;color:var(--fg);transition:color .2s ease;}
.service-card p{color:var(--fg-muted);font-size:14px;line-height:1.65;margin:0;transition:color .2s ease;}
.service-card:hover{background:var(--accent);}
.service-card:hover svg,
.service-card:hover h3,
.service-card:hover p{color:var(--fg);}

@media (max-width:900px){
  .services-grid{grid-template-columns:repeat(2, minmax(0, 1fr));}
}
@media (max-width:640px){
  .services-grid{grid-template-columns:1fr;}
  .service-card{padding:28px 24px;}
  .service-card svg{margin-bottom:16px;width:24px;height:24px;}
}

/* ---------- Approche ---------- */
.approach{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:80px;}
.approach p.lede{color:var(--fg-muted);font-size:15.5px;line-height:1.75;max-width:440px;}
.timeline{display:flex;flex-direction:column;}
.timeline .row{display:flex;gap:20px;padding:20px 0;border-bottom:1px solid var(--border);}
.timeline .row:last-child{border-bottom:none;}
.timeline .year{font-family:var(--display);font-weight:700;font-size:15px;width:60px;flex:none;}
.timeline .text{font-size:14.5px;color:var(--fg-muted);}

@media (max-width:900px){
  .approach{grid-template-columns:1fr;gap:36px;}
}

/* ---------- Confiance ---------- */
.trust-grid{
  display:grid;grid-template-columns:repeat(6, minmax(0, 1fr));
  gap:1px;background:var(--border);border:1px solid var(--border);
}
.trust-grid .slot{height:64px;background:var(--bg);display:flex;align-items:center;justify-content:center;}

.trust-logo{
  display:block;
  background-color:oklch(42% 0.012 95);
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
  -webkit-mask-position:center;mask-position:center;
  -webkit-mask-size:contain;mask-size:contain;
  transition:background-color .2s ease;
}
.slot:hover .trust-logo{background-color:var(--accent);}

.logo-ddb{width:68px;height:32px;-webkit-mask-image:url(../logo/DDB.svg);mask-image:url(../logo/DDB.svg);}
.logo-havas{width:168px;height:32px;-webkit-mask-image:url(../logo/havas.svg);mask-image:url(../logo/havas.svg);}
.logo-microsoft{width:140px;height:30px;-webkit-mask-image:url(../logo/microsoft-mask.svg);mask-image:url(../logo/microsoft-mask.svg);}
.logo-tarkett{width:122px;height:28px;-webkit-mask-image:url(../logo/Tarkett.svg);mask-image:url(../logo/Tarkett.svg);}
.logo-betc{width:92px;height:32px;-webkit-mask-image:url(../logo/betc.svg);mask-image:url(../logo/betc.svg);}
.logo-loreal{width:190px;height:32px;-webkit-mask-image:url("../logo/L'Oreal_logo.svg");mask-image:url("../logo/L'Oreal_logo.svg");}

@media (max-width:900px){
  .trust-grid{grid-template-columns:repeat(3, minmax(0, 1fr));}
}
@media (max-width:640px){
  .trust-grid{grid-template-columns:repeat(2, minmax(0, 1fr));}
  .trust-grid .slot{height:56px;}
  .logo-ddb{width:46px;height:22px;}
  .logo-havas{width:116px;height:22px;}
  .logo-microsoft{width:98px;height:21px;}
  .logo-tarkett{width:88px;height:20px;}
  .logo-betc{width:62px;height:22px;}
  .logo-loreal{width:130px;height:22px;}
}

/* ---------- Contact ---------- */
.contact{max-width:560px;}
.contact p.lede{color:var(--fg-muted);font-size:17px;line-height:1.6;margin:0 0 32px;}
@media (max-width:640px){
  .contact .btn{justify-content:center;width:100%;}
}

/* ---------- Footer ---------- */
.site-footer{
  padding:30px var(--pad);border-top:1px solid var(--border);
  display:flex;justify-content:space-between;align-items:center;
}
.site-footer .copyright{font-size:13px;color:var(--fg-muted);}
.site-footer .social{display:flex;gap:20px;color:var(--fg-muted);}
.site-footer .social a{color:inherit;text-decoration:none;display:flex;}