:root{
  --navy:#0F2B45; --navy-d:#0A1E31; --gold:#E8A817;
  --ink:#14181C; --grey:#6B7580; --line:#D8DDE2; --pale:#F2F4F6;
  --maxw:1180px;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth; scroll-padding-top:74px}
body{font-family:Arial,Helvetica,"Liberation Sans",sans-serif;color:#2B333B;line-height:1.6;background:#fff;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:var(--navy)}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px}

/* ---------- barre de navigation ---------- */
header{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.97);border-bottom:1px solid var(--line)}
.nav{display:flex;align-items:center;gap:14px;height:72px;flex-wrap:nowrap}
.nav .brand{display:flex;align-items:center;gap:10px;text-decoration:none;flex:0 0 auto}
.nav .brand img{height:40px;width:auto}
.nav .brand span{font-weight:700;color:var(--navy);font-size:16px;letter-spacing:-.2px}
.nav nav{display:flex;gap:15px;margin-left:auto;flex-wrap:nowrap;white-space:nowrap}
.nav nav a{font-size:12.5px;color:#44505c;text-decoration:none;letter-spacing:.3px}
.nav nav a:hover{color:var(--navy)}
.nav .tools{display:flex;align-items:center;gap:10px;flex:0 0 auto}
.lang{font-size:12px;font-weight:700;letter-spacing:1px;color:var(--grey);text-decoration:none;border:1px solid var(--line);padding:6px 9px}
.lang:hover{border-color:var(--navy);color:var(--navy)}
.btn{display:inline-block;background:var(--gold);color:var(--navy-d);font-weight:700;font-size:13px;
     padding:11px 16px;white-space:nowrap;text-decoration:none;letter-spacing:.3px;border:0}
.btn:hover{background:#d69a13}
.btn.ghost{background:transparent;color:#fff;border:1px solid rgba(255,255,255,.5)}
.btn.ghost:hover{background:rgba(255,255,255,.12)}
.btn.dark{background:var(--navy);color:#fff}
.burger{display:none;background:none;border:1px solid var(--line);padding:8px 10px;font-size:15px;color:var(--navy);cursor:pointer}

/* ---------- hero ---------- */
.hero{position:relative;background:var(--navy-d);color:#fff;overflow:hidden}
.hero img.bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.85}
.hero:after{content:"";position:absolute;inset:0;
  background:linear-gradient(100deg,rgba(10,30,49,.94) 0%,rgba(10,30,49,.80) 42%,rgba(10,30,49,.40) 100%)}
.hero .inner{position:relative;z-index:2}
.hero .inner{padding:86px 0 74px}
.hero .eyebrow{font-size:11px;letter-spacing:3px;text-transform:uppercase;color:#9FB4C8;margin-bottom:16px}
.hero h1{font-size:clamp(32px,5.2vw,56px);line-height:1.03;letter-spacing:-1.4px;font-weight:700;color:#fff;max-width:16ch}
.hero .sig{color:var(--gold);font-size:clamp(17px,2.4vw,22px);font-weight:700;margin-top:20px;letter-spacing:-.3px}
.hero p.lead{color:#CBD8E4;max-width:62ch;margin-top:16px;font-size:15.5px}
.hero .cta{display:flex;gap:12px;margin-top:30px;flex-wrap:wrap}

/* ---------- bande de chiffres ---------- */
.kpis{background:var(--navy);color:#fff;border-top:3px solid var(--gold)}
.kpis .grid{display:grid;grid-template-columns:repeat(6,1fr);gap:24px;padding:34px 0}
.kpi .n{font-size:28px;font-weight:700;letter-spacing:-1px;line-height:1}
.kpi .n small{font-size:14px;letter-spacing:0}
.kpi .l{font-size:11.5px;color:#9FB4C8;margin-top:8px;line-height:1.35}

/* ---------- sections ---------- */
section{padding:74px 0}
section.alt{background:var(--pale)}
section.dark{background:var(--navy);color:#fff}
section.dark p{color:#C8D4DF}
section.dark h2,section.dark h3{color:#fff}
.eyebrow{font-size:11px;letter-spacing:2.4px;text-transform:uppercase;color:var(--grey);font-weight:700;margin-bottom:10px}
section.dark .eyebrow{color:var(--gold)}
h2{font-size:clamp(24px,3.4vw,34px);line-height:1.12;letter-spacing:-.8px;color:var(--navy);font-weight:700;max-width:22ch}
h3{font-size:17px;color:var(--navy);font-weight:700;margin-bottom:8px;letter-spacing:-.2px}
.sec-head{border-bottom:1px solid var(--line);padding-bottom:20px;margin-bottom:34px}
section.dark .sec-head{border-color:#2C4560}
p+p{margin-top:14px}
.cols2{display:grid;grid-template-columns:1.15fr 1fr;gap:46px}
.cols3{display:grid;grid-template-columns:repeat(3,1fr);gap:26px}
ul.ticks{list-style:none}
ul.ticks li{position:relative;padding-left:16px;font-size:14px;margin-bottom:6px;line-height:1.5}
ul.ticks li:before{content:"";position:absolute;left:0;top:9px;width:6px;height:6px;background:var(--gold)}
section.dark ul.ticks li{color:#C8D4DF}

/* fiche d'identite */
table.idt{width:100%;border-collapse:collapse}
table.idt td{padding:9px 0;border-bottom:1px solid var(--line);font-size:13.5px;vertical-align:top}
table.idt td:first-child{width:42%;color:var(--grey);font-size:11px;letter-spacing:.8px;text-transform:uppercase;padding-right:14px}
table.idt td:last-child{color:var(--navy);font-weight:700}
.note{font-size:12px;color:var(--grey);font-weight:400;display:block;margin-top:2px}

/* poles */
.pole{background:#fff;border:1px solid var(--line);display:flex;flex-direction:column}
.pole img{aspect-ratio:16/10;object-fit:cover;width:100%}
.pole .ph{aspect-ratio:16/10;background:var(--pale);display:flex;align-items:center;justify-content:center}
.pole .ph svg{width:96px;height:auto}
.pole .body{padding:22px 22px 26px}
.pole .num{font-size:11px;letter-spacing:2px;color:var(--gold);font-weight:700}
.pole p{font-size:14px}
.pole .va{font-size:12.5px;color:var(--navy);margin-top:12px;border-top:1px solid var(--line);padding-top:12px}
.grid2{display:grid;grid-template-columns:repeat(2,1fr);gap:26px}

/* etapes */
.steps{display:grid;grid-template-columns:repeat(6,1fr);gap:16px;margin-top:8px}
.step{border-top:3px solid var(--gold);padding-top:12px}
.step b{display:block;font-size:20px;color:#fff;line-height:1}
.step span{font-size:12px;color:#9FB4C8;display:block;margin-top:7px;line-height:1.35}

/* tableau references */
table.ref{width:100%;border-collapse:collapse;margin-top:6px}
table.ref th{background:var(--navy);color:#fff;font-size:11px;letter-spacing:1.1px;text-transform:uppercase;
             padding:11px 12px;text-align:left;font-weight:700}
table.ref td{padding:11px 12px;border-bottom:1px solid var(--line);font-size:13.5px;vertical-align:top}
table.ref tr:nth-child(even) td{background:#F8F9FA}
table.ref td:last-child{font-weight:700;color:var(--navy);white-space:nowrap}
.tag-ok{color:#0F6B3C}

/* fiche projet */
.card{border:1px solid var(--line);border-top:5px solid var(--navy);background:#fff}
.card .body{padding:22px}
.card .cli{font-size:11px;letter-spacing:1.2px;text-transform:uppercase;color:var(--gold);font-weight:700}
.card h3{margin:8px 0 12px}
.card img{aspect-ratio:16/10;object-fit:cover;width:100%}
.meta{display:flex;flex-wrap:wrap;gap:0 26px;border-top:1px solid var(--line);border-bottom:1px solid var(--line);
      padding:10px 0;margin-bottom:14px}
.meta div{font-size:11px;color:var(--grey)}
.meta b{display:block;font-size:13px;color:var(--navy)}
.card p{font-size:13.5px}
.callout{border-left:4px solid var(--gold);padding:4px 0 4px 16px;margin-top:16px}
.callout .lb{font-size:11px;letter-spacing:1.2px;text-transform:uppercase;color:var(--gold);font-weight:700}

/* engagements */
.eng{border-left:4px solid var(--gold);padding-left:18px;margin-bottom:26px}
.eng .prom{font-size:12.5px;color:var(--grey);margin-top:7px}

/* contact */
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:46px}
.cinfo b{display:block;font-size:11px;letter-spacing:1.8px;text-transform:uppercase;color:var(--gold);margin-top:22px;font-weight:700}
.cinfo b:first-child{margin-top:0}
.cinfo{font-size:15px;line-height:1.85;color:#DCE5ED}
.cinfo a{color:#fff;text-decoration:none;border-bottom:1px solid rgba(255,255,255,.35)}
.closing{font-size:clamp(19px,2.6vw,26px);font-weight:700;color:#fff;letter-spacing:-.5px;margin-top:44px;
         border-top:1px solid #2C4560;padding-top:26px}
.backband{position:relative}
.backband img{width:100%;height:280px;object-fit:cover;display:block}
footer{background:var(--navy-d);color:#8FA3B7;font-size:11.5px;letter-spacing:.6px}
footer .wrap{display:flex;justify-content:space-between;gap:18px;padding-top:20px;padding-bottom:20px;flex-wrap:wrap}
footer b{color:#fff}

/* ---------- responsive ---------- */
@media(max-width:980px){
  .kpis .grid{grid-template-columns:repeat(3,1fr)}
  .cols2,.contact-grid{grid-template-columns:1fr;gap:30px}
  .cols3,.grid2{grid-template-columns:1fr}
  .steps{grid-template-columns:repeat(3,1fr)}
}
@media(max-width:760px){
  .nav nav{display:none;position:absolute;top:72px;left:0;right:0;background:#fff;border-bottom:1px solid var(--line);
           flex-direction:column;gap:0;padding:8px 24px 16px}
  .nav nav.open{display:flex}
  .nav nav a{padding:11px 0;border-bottom:1px solid var(--line);font-size:14px}
  .burger{display:block;margin-left:auto;order:3}
  .nav .tools .btn{display:none}
  section{padding:52px 0}
  .hero .inner{padding:62px 0 54px}
  .kpis .grid{grid-template-columns:repeat(2,1fr);gap:20px}
  .steps{grid-template-columns:repeat(2,1fr)}
  .backband img{height:190px}
}
@media print{header,.hero .cta,.burger{display:none}}

/* fiche projet principale et tableaux larges */
.kiaka-card{display:grid;grid-template-columns:340px 1fr}
.tablewrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
.tablewrap table.ref{min-width:620px}
@media(max-width:760px){
  .kiaka-card{grid-template-columns:1fr}
  .kiaka-card img{aspect-ratio:16/10}
  .meta{gap:0 16px}
  .meta div{min-width:44%}
}

/* ---------- positionnement, notes de donnees, appel a l'action ---------- */
.kpinote{font-size:11px;color:#7E93A8;padding-bottom:26px;margin-top:-8px;letter-spacing:.2px}
.poscard{background:#fff;border-top:4px solid var(--navy);padding:22px 22px 24px}
.poscard:nth-child(2){border-top-color:var(--gold)}
.poscard h3{font-size:12px;letter-spacing:2px;text-transform:uppercase;color:var(--grey);margin-bottom:10px}
.poscard p{font-size:15px;color:var(--navy);line-height:1.55}
.posnote{margin-top:26px;font-size:13.5px;color:var(--grey);border-left:4px solid var(--gold);padding-left:16px;max-width:88ch}
.ctafinal{background:var(--navy-d);color:#C8D4DF;padding:64px 0}
.btn.alt{background:transparent;color:var(--navy);border:1px solid var(--line)}
.btn.alt:hover{background:var(--pale)}
@media(max-width:1240px){.nav .tools .btn.alt{display:none}}
@media(max-width:1060px){.nav nav a{font-size:12px}.nav nav{gap:12px}}