@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=IBM+Plex+Sans:wght@400;500;600&display=swap');

:root{
  --ink:#141F36;
  --ink2:#24395C;
  --steel:#35578A;
  --sky:#8FA9CC;
  --pearl:#EEF1F4;
  --silver:#C4CEDC;
  --white:#FFFFFF;
  --line: rgba(238,241,244,0.16);
  --chrome: linear-gradient(135deg, #EDEFF2 0%, #B9C3CE 45%, #8A99AC 55%, #EDEFF2 100%);
}
*{box-sizing:border-box; margin:0; padding:0;}
body{
  font-family:'IBM Plex Sans', sans-serif;
  color: var(--pearl);
  background: var(--ink);
}
h1,h2,h3,h4{font-family:'Space Grotesk', sans-serif; font-weight:700; letter-spacing:-0.01em; line-height:1.2; color:var(--white);}
a{color:inherit; text-decoration:none;}
.wrap{max-width:1080px; margin:0 auto; padding:0 32px;}

/* NAV */
.nav{
  display:flex; align-items:center; justify-content:space-between;
  padding:22px 0;
}
.nav-sep{
  height:2px;
  background: linear-gradient(90deg, transparent 0%, #8A99AC 20%, #EDEFF2 50%, #8A99AC 80%, transparent 100%);
}
.logo{display:flex; align-items:center; gap:10px;}
.logo svg{width:30px; height:30px;}
.logo .word{font-family:'Space Grotesk'; font-weight:700; font-size:18px; color:var(--white); line-height:1; position:relative; top:-1px;}
.logo .word .start{font-weight:400; color:var(--sky);}
.nav-left{display:flex; align-items:center; gap:52px;}
.nav-links{display:flex; gap:26px; font-size:14px; color:var(--silver); font-weight:500;}
.nav-links a{padding-bottom:2px; border-bottom:1px solid transparent; transition:color .15s, border-color .15s;}
.nav-links a:hover{color:var(--white); border-bottom-color:var(--sky);}
.btn{
  font-family:'Space Grotesk'; font-weight:600; font-size:14px;
  color:var(--ink); background:var(--pearl);
  padding:13px 24px; border:none; display:inline-block; position:relative; overflow:hidden;
}
.btn span{position:relative; z-index:1;}
.btn::before{content:""; position:absolute; inset:0; background:var(--chrome); opacity:0; transition:opacity .25s;}
.btn:hover::before{opacity:1;}
.btn.small{padding:10px 18px; font-size:13px;}

/* HERO */
.hero{padding:90px 0 80px; text-align:center;}
.hero .eyebrow{font-size:14px; color:var(--sky); font-weight:600; margin-bottom:18px;}
.hero h1{font-size:48px; max-width:660px; margin:0 auto 20px;}
.hero p{font-size:17px; color:var(--silver); max-width:480px; margin:0 auto 34px;}

/* LOGOS BAR */
.logos{padding:40px 0; background:var(--ink2); border-top:1px solid var(--line); border-bottom:1px solid var(--line); text-align:center;}
.logos .lead{font-size:13px; color:var(--sky); margin-bottom:22px; font-weight:600; letter-spacing:.02em;}
.logo-row{
  display:grid; grid-template-columns:repeat(7,1fr);
  border:1px solid var(--line); margin-bottom:20px;
}
.logo-chip{
  padding:22px 8px; font-size:12.5px; font-weight:600; color:var(--pearl);
  border-right:1px solid var(--line); font-family:'Space Grotesk';
  display:flex; align-items:center; justify-content:center; text-align:center;
  line-height:1.35; min-height:76px;
}
.logo-chip:last-child{border-right:none;}
.counter{font-size:14px; color:var(--sky); font-weight:600;}

/* SECTIONS */
.section{padding:80px 0;}
.section.alt{background:var(--ink2);}
.kicker{font-size:13px; color:var(--sky); font-weight:600; margin-bottom:10px;}
.section h2{font-size:30px; margin-bottom:44px;}

/* CAS D'USAGE */
.uc-grid{display:grid; grid-template-columns:repeat(5,1fr); border:1px solid var(--line);}
.uc-item{
  padding:36px 16px; text-align:center; border-right:1px solid var(--line);
  display:flex; flex-direction:column; align-items:center;
}
.uc-item:last-child{border-right:none;}
.uc-icon{width:44px; height:44px; display:flex; align-items:center; justify-content:center; margin-bottom:16px;}
.uc-item span{font-size:14px; font-weight:500; color:var(--pearl);}

/* POURQUOI */
.why{display:flex; align-items:center; gap:56px;}
.why .photo{
  width:230px; height:290px; flex-shrink:0; object-fit:cover;
  border:1px solid var(--line); filter:grayscale(100%) brightness(1.05);
}
.why .txt h2{font-size:28px; margin-bottom:18px;}
.why .txt p{font-size:16px; color:var(--silver); line-height:1.75; max-width:480px; margin-bottom:14px;}
.why .signature{font-family:'Space Grotesk'; font-weight:600; font-size:14px; color:var(--sky); margin-top:20px; display:inline-block; border-bottom:1px solid var(--sky); padding-bottom:2px; transition:color .15s, border-color .15s;}
.why .signature:hover{color:var(--white); border-color:var(--white);}

/* OFFRE */
.offer-grid{display:grid; grid-template-columns: 1.1fr 0.9fr; gap:48px; align-items:start;}
.offer-list{list-style:none;}
.offer-list li{
  display:flex; gap:14px; padding:16px 0; border-bottom:1px solid var(--line); font-size:15px; color:var(--pearl);
}
.offer-list li:first-child{padding-top:0;}
.offer-list .dot{width:6px; height:6px; margin-top:8px; background:var(--sky); flex-shrink:0;}

.price-panel{border:1px solid var(--line); background:var(--ink2);}
.price-row{display:flex;}
.price-cell{flex:1; padding:28px 22px; text-align:center;}
.price-cell:first-child{border-right:1px solid var(--line);}
.price-cell .amount{font-family:'Space Grotesk'; font-size:32px; font-weight:700; color:var(--white);}
.price-cell .desc{font-size:13px; color:var(--silver); margin-top:6px;}
.no-sub{
  border-top:1px solid var(--line);
  padding:16px 22px; display:flex; align-items:center; gap:10px; justify-content:center;
  font-size:13px; font-weight:600; color:var(--white); background:var(--steel);
}
.no-sub svg{flex-shrink:0;}

/* OPTIONS */
.opt-grid{display:grid; grid-template-columns:1fr 1fr; gap:1px; background:var(--line); border:1px solid var(--line);}
.opt-card{background:var(--ink); padding:26px 28px;}
.opt-card .tag{font-size:11px; font-weight:600; color:var(--sky); text-transform:uppercase; letter-spacing:.04em; margin-bottom:8px; display:block;}
.opt-card .name{font-family:'Space Grotesk'; font-size:17px; font-weight:600; color:var(--white);}

/* CTA FINAL */
.cta{padding:90px 0; text-align:center; background:var(--ink); border-top:1px solid var(--line);}
.cta h2{font-size:30px; margin-bottom:14px;}
.cta p{font-size:16px; color:var(--silver); margin-bottom:32px;}

/* FOOTER */
.footer{padding:30px 0; display:flex; justify-content:space-between; align-items:center; font-size:13px; color:var(--silver); border-top:1px solid var(--line);}
.footer .logo .word{font-size:15px;}

/* ============ RESPONSIVE — TABLETTE ============ */
@media (max-width: 900px){
  .wrap{padding:0 24px;}
  .hero{padding:64px 0 56px;}
  .hero h1{font-size:36px;}
  .hero p{font-size:16px;}

  .nav-links{display:none;}
  .nav-left{gap:0;}

  .logo-row{grid-template-columns:repeat(4,1fr);}
  .logo-chip{border-bottom:1px solid var(--line);}
  .logo-chip:nth-child(4n){border-right:none;}

  .uc-grid{grid-template-columns:repeat(3,1fr);}
  .uc-item{border-bottom:1px solid var(--line);}
  .uc-item:nth-child(3n){border-right:none;}

  .why{flex-direction:column; text-align:center; gap:32px;}
  .why .photo{width:200px; height:250px;}
  .why .txt p{margin-left:auto; margin-right:auto;}

  .offer-grid{grid-template-columns:1fr; gap:36px;}

  .section{padding:64px 0;}
  .section h2{font-size:26px; margin-bottom:32px;}
}

/* ============ RESPONSIVE — MOBILE ============ */
@media (max-width: 600px){
  .wrap{padding:0 20px;}

  .nav{padding:18px 0;}
  .btn.small{padding:9px 14px; font-size:12.5px;}
  .logo .word{font-size:16px;}
  .logo svg{width:26px; height:26px;}

  .hero{padding:52px 0 44px; text-align:left;}
  .hero .eyebrow{font-size:13px;}
  .hero h1{font-size:28px;}
  .hero p{max-width:100%; margin:0 0 26px;}
  .hero .btn{width:100%; text-align:center;}

  .logos{padding:32px 0;}
  .logo-row{grid-template-columns:repeat(2,1fr);}
  .logo-chip{border-right:1px solid var(--line); border-bottom:1px solid var(--line); padding:18px 8px; min-height:64px;}
  .logo-chip:nth-child(4n){border-right:1px solid var(--line);}
  .logo-chip:nth-child(2n){border-right:none;}

  .uc-grid{grid-template-columns:repeat(2,1fr);}
  .uc-item{border-right:1px solid var(--line); padding:26px 12px;}
  .uc-item:nth-child(3n){border-right:1px solid var(--line);}
  .uc-item:nth-child(2n){border-right:none;}

  .why{text-align:left;}
  .why .photo{width:100%; height:260px;}
  .why .txt p{margin-left:0; margin-right:0;}

  .offer-list li{font-size:14px;}
  .price-row{flex-direction:column;}
  .price-cell:first-child{border-right:none; border-bottom:1px solid var(--line);}
  .no-sub{font-size:12.5px; padding:14px 16px;}

  .opt-grid{grid-template-columns:1fr;}
  .opt-card{padding:22px 20px;}

  .cta{padding:64px 0;}
  .cta h2{font-size:24px;}
  .cta .btn{width:100%; text-align:center;}

  .footer{flex-direction:column; gap:14px; text-align:center;}
}