:root{
  --noir:#0d0b0a;
  --noir2:#151210;
  --orange:#f0912f;
  --orange-clair:#f5a94e;
  --rouge:#d21f1f;
  --rouge2:#b81a1a;
  --creme:#f7ede2;
  --gris:#c9c2ba;
  --gris2:#9a938b;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  background:var(--noir);
  color:var(--creme);
  font-family:'Poppins',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  line-height:1.6;
  overflow-x:hidden;
}
.wrap{max-width:1200px;margin:0 auto;padding:0 24px}

/* ---- HERO ---- */
.hero{
  display:grid;grid-template-columns:1fr 1fr;min-height:88vh;align-items:center;
}
.hero-img{
  height:100%;min-height:88vh;
  background:linear-gradient(120deg,rgba(13,11,10,0) 40%,var(--noir) 98%),
    url('warehouse.jpg') center/cover;
}
.hero-txt{padding:64px 56px}
.hero h1{
  font-weight:800;font-size:clamp(2.6rem,5vw,4rem);line-height:1.02;letter-spacing:-1px;margin-bottom:28px;
}
.hero h1 .o{color:var(--orange)}
.hero p{font-size:1.06rem;color:var(--gris);margin-bottom:20px;max-width:30em}
.hero p a{color:var(--orange);font-weight:600}
.baseline{color:var(--orange);font-weight:700;font-size:1.15rem;margin-top:12px}
.baseline .o{color:var(--orange)}

/* ---- SECTIONS ---- */
section{padding:80px 0;position:relative}
section:nth-child(even){background:var(--noir2)}
.stitle{
  font-weight:800;font-size:clamp(2rem,3.6vw,3rem);letter-spacing:-1px;margin-bottom:20px;line-height:1.05;
}
.intro{color:var(--gris);font-size:1.05rem;max-width:60em;margin-bottom:44px}
.intro a,.hl{color:var(--orange);font-weight:600}

/* ---- MISSION (3 blocs pont) ---- */
.mission-grid{display:grid;grid-template-columns:1.2fr 1fr;gap:48px;align-items:center}
.bridge-flow{display:flex;flex-direction:column;gap:6px}
.bstep{display:flex;align-items:center;gap:22px}
.bmark{
  flex-shrink:0;width:76px;height:88px;background:var(--rouge);
  clip-path:polygon(0 0,100% 0,100% 72%,50% 100%,0 72%);
  display:flex;align-items:center;justify-content:center;font-size:1.8rem;
}
.bmark.mid{background:var(--rouge2)}
.bstep h3{font-size:1.35rem;font-weight:700;margin-bottom:2px}
.bstep h3.o{color:var(--orange)}
.bstep p{color:var(--gris);font-size:.97rem;line-height:1.45}
.bstep .ia{color:var(--orange);font-weight:600}
.mission-img{
  height:420px;border-radius:14px;
  background:linear-gradient(160deg,rgba(13,11,10,.15),rgba(13,11,10,.15)),url('bridge.jpg') center/cover;
}

/* ---- REPRÉSENTATION (2 col) ---- */
.two-col{display:grid;grid-template-columns:1fr 1fr;gap:48px;margin-bottom:36px}
.two-col h3{font-size:1.5rem;font-weight:700;margin-bottom:14px}
.two-col p{color:var(--gris)}
.badges{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.badge{
  background:var(--rouge);border-radius:14px;padding:26px;text-align:center;
}
.badge .big{font-size:1.5rem;font-weight:700;letter-spacing:1px;display:block;margin-bottom:6px}
.badge .sub{color:rgba(255,255,255,.85);font-size:.95rem}

/* ---- GRID 4 (étude marché) ---- */
.grid4{display:grid;grid-template-columns:1fr 1fr;gap:40px 56px}
.feat{display:flex;gap:18px}
.feat .ico{
  flex-shrink:0;width:52px;height:52px;border-radius:12px;background:var(--rouge);
  display:flex;align-items:center;justify-content:center;font-size:1.5rem;
}
.feat .ico.light{background:var(--creme)}
.feat h3{font-size:1.22rem;font-weight:700;margin-bottom:6px}
.feat h3 .ia{color:var(--orange)}
.feat p{color:var(--gris);font-size:.98rem;line-height:1.5}

/* ---- APPELS D'OFFRES (donut + 4 coins) ---- */
.tender{display:grid;grid-template-columns:1fr auto 1fr;gap:36px;align-items:center}
.tender .col{display:flex;flex-direction:column;gap:40px}
.tender .col.right{text-align:left}
.tender .col.left{text-align:right}
.donut-img{width:300px;max-width:100%;height:auto;display:block;margin:0 auto}
.titem h3{font-size:1.18rem;font-weight:700;margin-bottom:6px}
.titem p{color:var(--gris);font-size:.95rem;line-height:1.45}
/* Donut : anneau rouge à 4 quartiers + icônes posées au centre de chaque quartier */
.donut{
  width:260px;height:260px;border-radius:50%;flex-shrink:0;
  background:conic-gradient(
    var(--rouge) 0deg 85deg, var(--noir) 85deg 95deg,
    var(--rouge) 95deg 175deg, var(--noir) 175deg 185deg,
    var(--rouge) 185deg 265deg, var(--noir) 265deg 275deg,
    var(--rouge) 275deg 355deg, var(--noir) 355deg 360deg
  );
  position:relative;
}
.donut::after{
  content:"";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:96px;height:96px;border-radius:50%;background:var(--noir);
}
section:nth-child(even) .donut{
  background:conic-gradient(
    var(--rouge) 0deg 85deg, var(--noir2) 85deg 95deg,
    var(--rouge) 95deg 175deg, var(--noir2) 175deg 185deg,
    var(--rouge) 185deg 265deg, var(--noir2) 265deg 275deg,
    var(--rouge) 275deg 355deg, var(--noir2) 355deg 360deg
  );
}
section:nth-child(even) .donut::after{background:var(--noir2)}
.donut .dico{
  position:absolute;top:50%;left:50%;width:40px;height:40px;margin:-20px;
  display:flex;align-items:center;justify-content:center;font-size:1.5rem;
}
/* chaque icône au CENTRE de son quartier (segments centrés sur les diagonales) */
.donut .d1{transform:translate(63px,-63px)}   /* quartier haut-droite */
.donut .d2{transform:translate(63px,63px)}    /* quartier bas-droite */
.donut .d3{transform:translate(-63px,63px)}   /* quartier bas-gauche */
.donut .d4{transform:translate(-63px,-63px)}  /* quartier haut-gauche */

/* ---- CARDS rouges (gestion quotidienne) ---- */
.cards3{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.rcard{background:var(--rouge);border-radius:14px;padding:28px}
.rcard h3{font-size:1.2rem;font-weight:700;margin-bottom:12px}
.rcard p{color:rgba(255,255,255,.9);font-size:.96rem;line-height:1.5}

/* ---- LOGISTIQUE (timeline décalée) ---- */
.logi-grid{display:grid;grid-template-columns:1fr 1.3fr;gap:48px;align-items:center}
.logi-img{
  height:460px;border-radius:14px;
  background:linear-gradient(160deg,rgba(13,11,10,.1),rgba(13,11,10,.1)),url('logistics.jpg') center/cover;
}
.timeline{display:flex;flex-direction:column;gap:26px}
.tl-item{display:flex;gap:18px;padding-left:0}
.tl-item .bar{width:6px;border-radius:4px;background:var(--rouge);flex-shrink:0}
.tl-item h3{font-size:1.18rem;font-weight:700;margin-bottom:4px}
.tl-item h3 .ia{color:var(--orange)}
.tl-item p{color:var(--gris);font-size:.96rem;line-height:1.45}
.tl-item:nth-child(2){margin-left:40px}
.tl-item:nth-child(3){margin-left:80px}
.tl-item:nth-child(4){margin-left:120px}

/* ---- POURQUOI F3S (bandeaux) ---- */
.why-list{display:flex;flex-direction:column;gap:16px;margin-bottom:44px}
.why{
  border:1.5px solid var(--rouge);border-left:6px solid var(--rouge);border-radius:10px;
  padding:18px 26px;background:rgba(210,31,31,.04);
}
.why:nth-child(2){margin-left:26px}
.why:nth-child(3){margin-left:52px}
.why:nth-child(4){margin-left:78px}
.why:nth-child(5){margin-left:104px}
.why h3{font-size:1.15rem;font-weight:700;margin-bottom:2px}
.why h3 .ia{color:var(--orange)}
.why p{color:var(--gris);font-size:.95rem}
.closing{text-align:center;font-weight:600;font-size:clamp(1rem,1.9vw,1.35rem);color:var(--creme);line-height:1.3;margin:20px 0 30px}
.closing .hl{display:block;margin-top:8px;color:var(--orange);text-decoration:none;font-family:'Fredoka',sans-serif;font-weight:700;font-size:clamp(1.9rem,4.6vw,3.2rem);line-height:1.05}

/* ---- CONTACT / CTA ---- */
.cta{text-align:center;padding:20px 0 0}
.cta a.mail{
  display:inline-block;background:var(--orange);color:var(--noir);font-weight:700;
  padding:16px 40px;border-radius:40px;text-decoration:none;font-size:1.1rem;
  transition:transform .15s,background .15s;
}
.cta a.mail:hover{background:var(--orange-clair);transform:translateY(-2px)}
.cta .sub{color:var(--gris2);margin-top:16px;font-size:.95rem}

/* ---- LANG SWITCH ---- */
.langbar{
  position:fixed;top:0;left:0;right:0;z-index:50;
  display:flex;justify-content:space-between;align-items:center;
  padding:14px 28px;background:rgba(13,11,10,.82);backdrop-filter:blur(10px);
  border-bottom:1px solid rgba(247,237,226,.08);
}
.langbar .logo{font-weight:800;font-size:1.3rem;letter-spacing:-.5px}
.langbar .logo .o{color:var(--orange)}
.langbar .langs{display:flex;gap:8px}
.langbar .langs a{
  color:var(--gris);text-decoration:none;font-weight:600;font-size:.85rem;
  padding:6px 12px;border-radius:8px;transition:.15s;
}
.langbar .langs a:hover{color:var(--creme);background:rgba(247,237,226,.06)}
.langbar .langs a.active{color:var(--noir);background:var(--orange)}
main{padding-top:56px}

/* ---- FOOTER ---- */
footer{text-align:center;padding:40px 24px;color:var(--gris2);font-size:.85rem;border-top:1px solid rgba(247,237,226,.06)}

/* ---- RESPONSIVE ---- */
@media(max-width:860px){
  .hero{grid-template-columns:1fr}
  .hero-img{min-height:200px;height:200px}
  .hero-txt{padding:40px 24px}
  .mission-grid,.two-col,.grid4,.logi-grid{grid-template-columns:1fr;gap:32px}
  .mission-img{display:none}
  .badges{grid-template-columns:1fr}
  .cards3{grid-template-columns:1fr}
  .tender{grid-template-columns:1fr}
  .tender .donut{display:none}
  .tender .col.left{text-align:left}
  .logi-img{display:none}
  .tl-item:nth-child(2),.tl-item:nth-child(3),.tl-item:nth-child(4){margin-left:0}
  .why:nth-child(n){margin-left:0}
  section{padding:56px 0}
}