/* ==========================================================================
   OSOMBA TRADING INNOVATION — Feuille de style principale
   Design system : industriel / corporate — inspiré du secteur BTP & trading
   Palette dérivée du logo officiel (anneau rouge orbital autour du "O")
   ========================================================================== */

/* --------------------------------- TOKENS -------------------------------- */
:root{
  /* Couleurs */
  --ink:        #0b0c0d;   /* noir profond (texte, fonds sombres) */
  --ink-soft:   #1a1c1e;   /* noir légèrement désaturé (panneaux) */
  --steel:      #565b60;   /* gris acier (texte secondaire sur fond clair) */
  --steel-2:    #8a8f93;   /* gris moyen (légendes) */
  --fog:        #f1f2f3;   /* gris clair (fonds de section) */
  --fog-2:      #e6e7e8;   /* gris clair (bordures / séparateurs) */
  --paper:      #ffffff;   /* blanc */
  --red:        #e8121f;   /* rouge de marque (accent unique) */
  --red-deep:   #a80d18;   /* rouge foncé (hover / ombres) */
  --red-glow:   rgba(232,18,31,.18);

  /* Typographie */
  --f-display: 'Oswald', 'Arial Narrow', sans-serif;
  --f-body:    'Inter', -apple-system, sans-serif;
  --f-mono:    'IBM Plex Mono', ui-monospace, monospace;

  /* Échelle */
  --gap-xs: .5rem;
  --gap-s:  1rem;
  --gap-m:  2rem;
  --gap-l:  4rem;
  --gap-xl: 8rem;

  --radius: 2px; /* angles quasi-droits : identité "acier/plaque" */
  --ease: cubic-bezier(.2,.7,.2,1);
  --container: 1240px;
}

/* --------------------------------- RESET --------------------------------- */
*, *::before, *::after{ box-sizing: border-box; }
html{ scroll-behavior: smooth; overflow-x: hidden; width: 100%; }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior: auto; }
  *, *::before, *::after{ animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}
body{
  margin:0;
  font-family: var(--f-body);
  color: var(--ink);
  background: var(--paper);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img{ max-width:100%; display:block; }
a{ color: inherit; text-decoration:none; }
ul{ list-style:none; margin:0; padding:0; }
h1,h2,h3,h4{ font-family: var(--f-display); font-weight:600; text-transform:uppercase; letter-spacing:.02em; margin:0 0 var(--gap-s); line-height:1.15; }
p{ margin:0 0 1rem; }
button{ font-family:inherit; cursor:pointer; }
input, textarea, select{ font-family:inherit; }

:focus-visible{
  outline: 2px solid var(--red);
  outline-offset: 3px;
}

.container{
  width:100%;
  max-width: var(--container);
  margin-inline:auto;
  padding-inline: 1.5rem;
}
@media(min-width:640px){ .container{ padding-inline: 2.5rem; } }

section{ position:relative; }

.eyebrow{
  display:inline-flex;
  align-items:center;
  gap:.6em;
  font-family: var(--f-mono);
  font-size:.75rem;
  letter-spacing:.18em;
  text-transform:uppercase;
  color: var(--red);
  margin-bottom: 1rem;
}
.eyebrow::before{
  content:"";
  width:28px; height:1px;
  background: var(--red);
  display:inline-block;
}

.section-head{
  max-width: 640px;
  margin-bottom: var(--gap-l);
}
.section-head.center{ margin-inline:auto; text-align:center; }
.section-head h2{ font-size: clamp(1.8rem, 3.4vw, 2.6rem); }
.section-head p{ color: var(--steel); font-size:1.05rem; }

.on-dark .section-head p{ color:#c7c9cb; }
.on-dark h2, .on-dark h3{ color:var(--paper); }

/* ----------------------------- BOUTONS ----------------------------------- */
.btn{
  display:inline-flex;
  align-items:center;
  gap:.6rem;
  padding: .95rem 1.9rem;
  font-family: var(--f-display);
  font-size:.85rem;
  letter-spacing:.08em;
  text-transform:uppercase;
  border:1px solid transparent;
  border-radius: var(--radius);
  transition: transform .35s var(--ease), background-color .3s, color .3s, border-color .3s, box-shadow .3s;
  position:relative;
  overflow:hidden;
  white-space:nowrap;
}
.btn svg{ width:16px; height:16px; transition: transform .35s var(--ease); flex-shrink:0; }
.btn:hover svg{ transform: translateX(4px); }
.btn-primary{ background: var(--red); color:var(--paper); }
.btn-primary:hover{ background: var(--red-deep); box-shadow:0 10px 30px -8px var(--red-glow); transform: translateY(-2px); }
.btn-ghost{ border-color: rgba(255,255,255,.35); color:var(--paper); }
.btn-ghost:hover{ border-color: var(--paper); background: rgba(255,255,255,.08); transform: translateY(-2px); }
.btn-dark{ border-color: var(--ink); color:var(--ink); }
.btn-dark:hover{ background:var(--ink); color:var(--paper); transform: translateY(-2px); }

/* ============================== NAVBAR =================================== */
.nav{
  position: fixed; inset: 0 0 auto 0;
  z-index: 1000;
  background: var(--fog);
  border-bottom: 1px solid transparent;
  transition: background-color .4s var(--ease), backdrop-filter .4s var(--ease), box-shadow .4s var(--ease), border-color .4s;
}
.nav.scrolled{
  background: rgba(241,242,243,.72);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  border-bottom-color: var(--fog-2);
  box-shadow: 0 8px 30px -20px rgba(0,0,0,.4);
}
.nav-inner{
  display:flex; align-items:center; justify-content:space-between;
  height: 76px;
}
.brand{ display:flex; align-items:center; gap:.7rem; }
.brand img{ height: 60px; width:auto; }
.brand-text{ font-family: var(--f-display); font-size:1rem; letter-spacing:.04em; line-height:1.1; }
.brand-text span{ display:block; font-family: var(--f-mono); font-size:.6rem; letter-spacing:.16em; color: var(--steel); text-transform:uppercase; }

.nav-links{ display:flex; align-items:center; gap: 2.1rem; }
.nav-links a{
  font-family: var(--f-display);
  font-size:.8rem;
  letter-spacing:.05em;
  text-transform:uppercase;
  color: var(--ink);
  position:relative;
  padding: .3rem 0;
}
.nav-links a::after{
  content:"";
  position:absolute; left:0; right:100%; bottom:-2px; height:2px;
  background: var(--red);
  transition: right .3s var(--ease);
}
.nav-links a:hover::after,
.nav-links a.active::after{ right:0; }
.nav-links a.active{ color: var(--red); }

.nav-cta{ display:flex; align-items:center; gap:1rem; }
.nav-cta .btn{ padding:.7rem 1.3rem; font-size:.75rem; }

.hamburger{
  display:none;
  width: 44px; height:44px;
  border:none; background:none;
  flex-direction:column; align-items:center; justify-content:center; gap:6px;
  z-index: 1100;
}
.hamburger span{
  width: 26px; height:3px; background: var(--ink);
  border-radius: 2px;
  transition: transform .35s var(--ease), opacity .25s, background-color .3s;
}
.hamburger.open span:nth-child(1){ transform: translateY(9px) rotate(45deg); background: var(--red); }
.hamburger.open span:nth-child(2){ opacity:0; }
.hamburger.open span:nth-child(3){ transform: translateY(-9px) rotate(-45deg); background: var(--red); }

.mobile-menu{
  position:fixed; inset:0;
  background: var(--ink);
  z-index:1050;
  display:flex; flex-direction:column;
  justify-content:center;
  padding: 2rem 2.5rem;
  transform: translateY(-100%);
  transition: transform .55s var(--ease);
}
.mobile-menu.open{ transform: translateY(0); }
.mobile-menu ul{ display:flex; flex-direction:column; gap:1.4rem; }
.mobile-menu a{
  font-family: var(--f-display);
  font-size: clamp(1.6rem,7vw,2.4rem);
  text-transform:uppercase;
  color: var(--paper);
  display:flex; align-items:baseline; gap:1rem;
}
.mobile-menu a small{ font-family:var(--f-mono); font-size:.9rem; color:var(--red); }
.mobile-menu .btn{ margin-top:2rem; align-self:flex-start; }

@media(max-width: 960px){
  .nav-links, .nav-cta .btn-dark{ display:none; }
  .hamburger{ display:flex; }
}

/* ============================== HERO ====================================== */
.hero{
  position:relative;
  min-height: 100svh;
  display:flex; align-items:flex-end;
  background: var(--ink);
  color: var(--paper);
  overflow:hidden;
  isolation:isolate;
}
.hero-bg{
  position:absolute; inset:0; z-index:-2;
  background:
    radial-gradient(ellipse 120% 80% at 15% 0%, rgba(232,18,31,.16), transparent 60%),
    radial-gradient(circle at 85% 15%, rgba(255,255,255,.05), transparent 45%),
    var(--ink);
}
.hero-bg::before{ /* trame de points, clin d'oeil au company profile officiel */
  content:"";
  position:absolute; inset:0;
  background-image: radial-gradient(rgba(255,255,255,.09) 1px, transparent 1.4px);
  background-size: 22px 22px;
  opacity:.5;
  mask-image: linear-gradient(to bottom, black, transparent 85%);
}
.hero-orbit{
  position:absolute; z-index:-1;
  top:8%; right:-12%;
  width:min(62vw, 780px); height:min(62vw,780px);
}
.hero-orbit svg{ width:100%; height:100%; }

.hero-inner{
  position:relative;
  width:100%;
  padding-top: 190px;
  padding-bottom: 6rem;
}
.hero-kicker{
  font-family: var(--f-mono);
  font-size:.78rem;
  letter-spacing:.22em;
  text-transform:uppercase;
  color: var(--red);
  display:flex; align-items:center; gap:.9rem;
  margin-bottom: 1.6rem;
}
.hero-kicker::before{ content:""; width:36px; height:1px; background:var(--red); }
.hero h1{
  font-size: clamp(2.6rem, 7vw, 5.6rem);
  max-width: 16ch;
  margin-bottom: 1.6rem;
}
.hero h1 em{ font-style:normal; color: var(--red); }
.hero-sub{
  max-width: 46ch;
  font-size: clamp(1rem, 1.4vw, 1.2rem);
  color:#c7c9cb;
  margin-bottom: 2.6rem;
}
.hero-actions{ display:flex; gap:1rem; flex-wrap:wrap; margin-bottom: 4rem; }

.hero-stats{
  display:grid;
  grid-template-columns: repeat(4, auto);
  gap: 2.6rem;
  border-top: 1px solid rgba(255,255,255,.14);
  padding-top: 1.8rem;
}
.hero-stats .stat b{
  display:block;
  font-family: var(--f-display);
  font-size: clamp(1.5rem, 2.4vw, 2rem);
  color: var(--paper);
}
.hero-stats .stat span{
  font-family: var(--f-mono);
  font-size:.68rem;
  letter-spacing:.1em;
  text-transform:uppercase;
  color: var(--steel-2);
}
@media(max-width: 820px){
  .hero-stats{ grid-template-columns: repeat(2,auto); row-gap:1.6rem; }
}

.scroll-cue{
  position:absolute; right: 2.5rem; bottom: 2.2rem;
  display:flex; flex-direction:column; align-items:center; gap:.6rem;
  font-family: var(--f-mono); font-size:.65rem; letter-spacing:.2em; text-transform:uppercase;
  color: var(--steel-2);
}
.scroll-cue .line{ width:1px; height:46px; background:linear-gradient(to bottom, var(--red), transparent); position:relative; overflow:hidden; }
.scroll-cue .line::after{
  content:""; position:absolute; left:0; top:-100%; width:100%; height:100%;
  background: var(--paper);
  animation: scrollDrop 2.2s var(--ease) infinite;
}
@keyframes scrollDrop{ 0%{top:-100%;} 60%{top:100%;} 100%{top:100%;} }
@media(max-width:720px){ .scroll-cue{ display:none; } }

/* ========================= REVEAL / ANIMATIONS ============================ */
html.js [data-reveal]{
  opacity:0;
  transform: translateY(28px);
  transition: opacity .8s var(--ease), transform .8s var(--ease);
}
[data-reveal].in{ opacity:1; transform:none; }
html.js [data-reveal="fade"]{ transform:none; }
html.js [data-reveal="left"]{ transform: translateX(-32px); }
[data-reveal="left"].in{ transform:none; }
html.js [data-reveal="right"]{ transform: translateX(32px); }
[data-reveal="right"].in{ transform:none; }
html.js [data-reveal="scale"]{ transform: scale(.94); }
[data-reveal="scale"].in{ transform:none; }
/* Sans JavaScript (ou avant l'exécution du script) : contenu visible par défaut,
   pas de tremblement, pas d'animation — dégradation gracieuse. */

.stagger > *{ transition-delay: calc(var(--i, 0) * 90ms); }

/* ============================ SECTION UTILS =============================== */
.section{ padding: var(--gap-xl) 0; }
.section.tight{ padding: var(--gap-l) 0; }
.bg-fog{ background: var(--fog); }
.bg-ink{ background: var(--ink); color:var(--paper); }
.bg-paper{ background: var(--paper); }

.divider{
  position:relative; height: 64px; overflow:hidden;
}
.divider svg{ position:absolute; inset:0; width:100%; height:100%; }

/* ------------------------------- À PROPOS --------------------------------- */
.about{
  display:grid;
  grid-template-columns: 1.1fr .9fr;
  gap: var(--gap-l);
  align-items:start;
}
@media(max-width:900px){ .about{ grid-template-columns:1fr; } }

.about-copy p{ color: var(--steel); font-size:1.05rem; }
.about-copy .lede{ color:var(--ink); font-size:1.25rem; font-weight:500; }

.plate{
  background: var(--ink);
  color: var(--paper);
  padding: 2.4rem;
  border-radius: var(--radius);
  position:relative;
}
.plate::before{
  content:"";
  position:absolute; top:0; left:0; width:46px; height:4px; background:var(--red);
}
.plate-row{ display:flex; justify-content:space-between; gap:1rem; padding: .9rem 0; border-bottom:1px solid rgba(255,255,255,.1); font-family:var(--f-mono); font-size:.82rem; }
.plate-row:last-child{ border-bottom:none; }
.plate-row span:first-child{ color: var(--steel-2); text-transform:uppercase; letter-spacing:.08em; }
.plate-row span:last-child{ text-align:right; color: var(--paper); }

/* -------------------------- VISION / MISSION ------------------------------ */
.vm-grid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
}
@media(max-width:800px){ .vm-grid{ grid-template-columns:1fr; } }
.vm-card{
  background: var(--paper);
  border: 1px solid var(--fog-2);
  padding: 2.6rem;
  border-radius: var(--radius);
  position:relative;
  transition: transform .4s var(--ease), box-shadow .4s var(--ease), border-color .4s;
}
.vm-card:hover{ transform: translateY(-6px); box-shadow: 0 30px 60px -30px rgba(0,0,0,.25); border-color:transparent; }
.vm-card .num{ font-family:var(--f-mono); color: var(--red); font-size:.8rem; letter-spacing:.14em; }
.vm-card h3{ font-size:1.5rem; margin-top:.6rem; }
.vm-card p{ color: var(--steel); }
.vm-card .mark{ position:absolute; top:2rem; right:2rem; width:34px; height:34px; opacity:.14; }

/* ------------------------------- VALEURS ---------------------------------- */
.values-grid{
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--fog-2);
  border: 1px solid var(--fog-2);
}
@media(max-width:960px){ .values-grid{ grid-template-columns: repeat(2,1fr); } }
@media(max-width:560px){ .values-grid{ grid-template-columns: 1fr; } }
.value-card{
  background: var(--paper);
  padding: 2.4rem 2rem;
  transition: background-color .35s;
}
.value-card:hover{ background: var(--ink); color: var(--paper); }
.value-card:hover p{ color:#c7c9cb; }
.value-card:hover .v-icon{ background:var(--red); }
.value-card .v-icon{
  width:52px; height:52px;
  display:flex; align-items:center; justify-content:center;
  background: var(--fog);
  color: var(--red);
  margin-bottom: 1.4rem;
  transition: background-color .35s, color .35s;
}
.value-card:hover .v-icon{ color:var(--paper); }
.value-card .v-icon svg{ width:24px; height:24px; }
.value-card h3{ font-size:1.05rem; }
.value-card p{ color: var(--steel); font-size:.95rem; }

/* ------------------------------- SERVICES --------------------------------- */
.services-grid{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.6rem;
}
@media(max-width:960px){ .services-grid{ grid-template-columns: repeat(2,1fr); } }
@media(max-width:640px){ .services-grid{ grid-template-columns: 1fr; } }

.service-card{
  position:relative;
  border-radius: var(--radius);
  overflow:hidden;
  aspect-ratio: 4/5;
  background: var(--ink);
  color: var(--paper);
  isolation:isolate;
}
.service-card .panel{
  position:absolute; inset:0;
  z-index:-1;
}
.service-card .panel img{ width:100%; height:100%; object-fit:cover; }
.service-card .panel .fallback{
  position:absolute; inset:0;
  display:flex; align-items:center; justify-content:center;
}
.service-card .panel .fallback svg{ width:46%; height:46%; opacity:.9; }
.service-card .scrim{
  position:absolute; inset:0;
  background: linear-gradient(to top, rgba(0,0,0,.86) 10%, rgba(0,0,0,.35) 55%, rgba(0,0,0,.15));
}
.service-card .tag{
  position:absolute; top:1.4rem; left:1.4rem;
  font-family: var(--f-mono); font-size:.68rem; letter-spacing:.14em;
  color: rgba(255,255,255,.72);
  border:1px solid rgba(255,255,255,.3);
  padding:.3rem .6rem;
}
.service-card .body{
  position:absolute; left:0; right:0; bottom:0;
  padding: 1.6rem;
  transform: translateY(38px);
  transition: transform .45s var(--ease);
}
.service-card .body p{
  color:#d7d8d9; font-size:.9rem;
  max-height:0; opacity:0; overflow:hidden;
  transition: max-height .45s var(--ease), opacity .35s var(--ease) .05s;
}
.service-card:hover .body{ transform: translateY(0); }
.service-card:hover .body p{ max-height:120px; opacity:1; margin-top:.5rem; }
.service-card h3{ font-size:1.2rem; margin:0; }
.service-card .line{ width:26px; height:2px; background:var(--red); margin-top:.7rem; }

/* --------------------------- POURQUOI CHOISIR ------------------------------ */
.why-grid{
  display:grid;
  grid-template-columns: repeat(3,1fr);
  gap: 2rem 2.4rem;
}
@media(max-width:900px){ .why-grid{ grid-template-columns: repeat(2,1fr); } }
@media(max-width:560px){ .why-grid{ grid-template-columns: 1fr; } }
.why-item{ display:flex; gap:1.2rem; }
.why-item .w-icon{
  flex-shrink:0; width:48px; height:48px;
  border:1px solid rgba(255,255,255,.18);
  display:flex; align-items:center; justify-content:center;
  color: var(--red);
}
.why-item .w-icon svg{ width:22px; height:22px; }
.why-item h3{ font-size:1rem; color:var(--paper); }
.why-item p{ color:#b9bbbd; font-size:.92rem; margin:0; }

/* ------------------------------ POLES D'ACTIVITES --------------------------- */
.poles-grid{
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.4rem;
}
@media(max-width:960px){ .poles-grid{ grid-template-columns: repeat(2,1fr); } }
@media(max-width:560px){ .poles-grid{ grid-template-columns: 1fr; } }

.pole-card{
  display:flex; flex-direction:column; align-items:flex-start;
  text-align:left;
  background: var(--paper);
  border: 1px solid var(--fog-2);
  padding: 1.8rem 1.6rem;
  border-radius: var(--radius);
  font-family: inherit;
  color: var(--ink);
  cursor:pointer;
  transition: transform .35s var(--ease), box-shadow .35s var(--ease), border-color .35s;
}
.pole-card:hover, .pole-card:focus-visible{
  transform: translateY(-6px);
  box-shadow: 0 30px 60px -30px rgba(0,0,0,.25);
  border-color: transparent;
}
.pole-card .pole-icon{
  width:52px; height:52px;
  display:flex; align-items:center; justify-content:center;
  background: var(--fog);
  color: var(--red);
  margin-bottom: 1.2rem;
  transition: background-color .3s, color .3s;
}
.pole-card:hover .pole-icon{ background: var(--red); color:var(--paper); }
.pole-card .pole-icon svg{ width:24px; height:24px; }
.pole-card .tag{
  font-family: var(--f-mono); font-size:.66rem; letter-spacing:.14em; text-transform:uppercase;
  color: var(--steel-2); margin-bottom:.5rem;
}
.pole-card h3{ font-size:1.05rem; margin-bottom:.4rem; }
.pole-tagline{
  font-family: var(--f-mono); font-size:.78rem; color: var(--steel);
  text-transform:none; letter-spacing:0; margin:0;
}
.pole-card .pole-more{
  margin-top: 1.2rem;
  display:inline-flex; align-items:center; gap:.5rem;
  font-family: var(--f-display); font-size:.72rem; letter-spacing:.06em; text-transform:uppercase;
  color: var(--red);
}
.pole-card .pole-more svg{ width:14px; height:14px; transition: transform .3s var(--ease); }
.pole-card:hover .pole-more svg{ transform: translateX(4px); }

/* ------------------------------ CHIPS (valeurs) ------------------------------ */
.chip-grid{
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
}
@media(max-width:820px){ .chip-grid{ grid-template-columns: repeat(2,1fr); } }
@media(max-width:480px){ .chip-grid{ grid-template-columns: 1fr; } }
.chip{
  display:flex; align-items:center; gap:.9rem;
  border:1px solid rgba(255,255,255,.14);
  padding: 1.1rem 1.2rem;
  transition: border-color .3s, background-color .3s;
}
.chip:hover{ border-color: var(--red); background: rgba(232,18,31,.06); }
.chip-icon{
  flex-shrink:0; width:38px; height:38px;
  display:flex; align-items:center; justify-content:center;
  color: var(--red);
}
.chip-icon svg{ width:20px; height:20px; }
.chip span{ font-family: var(--f-display); font-size:.85rem; letter-spacing:.03em; text-transform:uppercase; color:var(--paper); }

/* -------------------------------- AMBITION ----------------------------------- */
.ambition-inner{ max-width: 760px; margin-inline:auto; text-align:center; }
.ambition .eyebrow{ justify-content:center; }
.ambition-text{
  font-size: clamp(1.05rem, 2vw, 1.3rem);
  color: var(--steel);
  line-height:1.7;
}
.ambition-signature{
  margin-top: 2.2rem;
  padding-top: 2.2rem;
  border-top: 1px solid var(--fog-2);
}
.ambition-signature p{
  font-family: var(--f-display);
  text-transform:uppercase;
  font-size: clamp(1.1rem, 2.4vw, 1.5rem);
  letter-spacing:.02em;
  color: var(--ink);
  margin-bottom:.3rem;
}
.ambition-signature em{ font-style:normal; color: var(--red); }

/* ---------------------------- MODALE DETAIL POLE ------------------------------ */
.pole-modal{
  position:fixed; inset:0; z-index:2000;
  display:flex; align-items:center; justify-content:center;
  padding: 1.5rem;
}
.pole-modal[hidden]{ display:none; }
.pole-modal-backdrop{
  position:absolute; inset:0;
  background: rgba(11,12,13,.72);
  backdrop-filter: blur(4px);
}
.pole-modal-panel{
  position:relative;
  background: var(--paper);
  max-width: 640px;
  width:100%;
  max-height: 85vh;
  overflow-y:auto;
  padding: 2.6rem;
  border-radius: var(--radius);
  animation: modalIn .35s var(--ease);
}
@keyframes modalIn{
  from{ opacity:0; transform: translateY(18px) scale(.98); }
  to{ opacity:1; transform:none; }
}
.pole-modal-close{
  position:absolute; top:1.4rem; right:1.4rem;
  width:36px; height:36px;
  border:1px solid var(--fog-2);
  background:none;
  display:flex; align-items:center; justify-content:center;
  color: var(--ink);
  transition: background-color .3s, border-color .3s;
}
.pole-modal-close:hover{ background: var(--ink); color:var(--paper); border-color:var(--ink); }
.pole-modal-close svg{ width:16px; height:16px; }
.pole-modal-head{ margin-bottom: 1.2rem; padding-right: 2.5rem; }
.pole-modal-head h3{ font-size:1.5rem; margin: .3rem 0; }
.pole-modal-desc{ color: var(--steel); font-size:1rem; margin-bottom: 1.6rem; }
.pole-modal-body h4{
  font-family: var(--f-mono); font-size:.72rem; letter-spacing:.12em; text-transform:uppercase;
  color: var(--red); margin: 1.4rem 0 .8rem;
}
.pole-modal-body ul{ display:grid; grid-template-columns: 1fr 1fr; gap:.5rem 1rem; }
@media(max-width:520px){ .pole-modal-body ul{ grid-template-columns: 1fr; } }
.pole-modal-body li{
  display:flex; gap:.6rem; align-items:flex-start;
  font-size:.92rem; color: var(--ink);
  padding: .3rem 0;
}
.pole-modal-body li svg{ width:15px; height:15px; color: var(--red); flex-shrink:0; margin-top:.2rem; }
.pole-modal-body .network-block{
  background: var(--fog); padding: 1rem 1.2rem; margin-top:.6rem;
}
.pole-modal-body .network-block strong{ display:block; font-family:var(--f-display); font-size:.85rem; text-transform:uppercase; margin-bottom:.4rem; }
.pole-modal-body .network-block p{ font-size:.88rem; color:var(--steel); margin:0 0 .5rem; }
.pole-modal-body .network-block p:last-child{ margin-bottom:0; }
.pole-modal .btn{ margin-top:1.8rem; width:100%; justify-content:center; }

/* ------------------------------ REALISATIONS ------------------------------- */
.gallery{
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: 130px;
  gap: .6rem;
}
.gallery .g-item{
  position:relative;
  background: var(--fog);
  border: 1px dashed var(--fog-2);
  display:flex; align-items:center; justify-content:center;
  overflow:hidden;
  transition: border-color .3s, background-color .3s;
}
.gallery .g-item:hover{ border-color: var(--red); background:#eceeee; }
.gallery .g-item span{
  font-family: var(--f-mono); font-size:.66rem; letter-spacing:.1em; text-transform:uppercase; color:var(--steel-2);
  text-align:center; padding: 0 .6rem;
  position:relative; z-index:1;
}
.gallery .g-item svg{ width:26px; height:26px; color: var(--steel-2); margin-bottom:.4rem; position:relative; z-index:1; }
.gallery .g-item.big{ grid-column: span 2; grid-row: span 2; }

/* Dès qu'une vraie photo est présente (assets/gallery/...), la balise <img>
   se charge, remplit la carte, et l'icône + le fond clair passent dessous. */
.gallery .g-item img{
  position:absolute; inset:0;
  width:100%; height:100%; object-fit:cover;
  z-index:0;
}
.gallery .g-item.has-photo{ border-style:solid; }
.gallery .g-item.has-photo::before{
  content:"";
  position:absolute; inset:0;
  background: linear-gradient(to top, rgba(0,0,0,.75), rgba(0,0,0,.05) 55%);
  z-index:0;
}
.gallery .g-item.has-photo svg{ display:none; }
.gallery .g-item.has-photo span{
  color:#fff;
  position:absolute; left:.9rem; right:.9rem; bottom:.7rem;
  text-align:left; padding:0;
}
@media(max-width:820px){
  .gallery{ grid-template-columns: repeat(2,1fr); }
  .gallery .g-item.big{ grid-column: span 2; grid-row: span 1; }
}

/* --------------------------- QUALITE / ENV / SANTE -------------------------- */
.split{
  display:grid;
  grid-template-columns: .8fr 1.2fr;
  gap: var(--gap-l);
  align-items:center;
}
@media(max-width:900px){ .split{ grid-template-columns:1fr; } }
.split.reverse .split-media{ order:2; }
.split-media{
  background: var(--ink);
  color:var(--paper);
  padding: 2.4rem;
  min-height: 260px;
  display:flex; flex-direction:column; justify-content:space-between;
  position:relative;
  overflow:hidden;
}
.split-media svg.deco{ position:absolute; right:-30px; bottom:-30px; width:180px; height:180px; opacity:.12; }
.split-media .kpi{ font-family:var(--f-display); font-size:3.2rem; color:var(--paper); }
.split-media .kpi-label{ font-family:var(--f-mono); font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; color:var(--steel-2); }
.split ul.checklist{ margin-top:1.4rem; }
.checklist li{
  display:flex; gap:.8rem; padding: .7rem 0; border-bottom:1px solid var(--fog-2);
  color: var(--steel); font-size:.98rem;
}
.checklist li svg{ flex-shrink:0; width:18px; height:18px; color:var(--red); margin-top:.15rem; }
.checklist li:last-child{ border-bottom:none; }

/* --------------------------------- ORG CHART -------------------------------- */
.org-wrap{ overflow-x:auto; padding-bottom:1rem; }
.org{ min-width: 760px; }

/* -------------------------------- CONTACT ----------------------------------- */
.contact-grid{
  display:grid;
  grid-template-columns: .95fr 1.05fr;
  gap: var(--gap-l);
}
@media(max-width:960px){ .contact-grid{ grid-template-columns:1fr; } }

.contact-card{
  background: var(--ink); color:var(--paper);
  padding: 2.4rem;
  margin-bottom: 1.2rem;
}
.contact-line{ display:flex; gap:1rem; padding: 1rem 0; border-bottom:1px solid rgba(255,255,255,.1); }
.contact-line:last-child{ border-bottom:none; }
.contact-line svg{ width:20px; height:20px; color:var(--red); flex-shrink:0; margin-top:.2rem; }
.contact-line .l-label{ font-family:var(--f-mono); font-size:.68rem; letter-spacing:.12em; text-transform:uppercase; color:var(--steel-2); display:block; margin-bottom:.2rem; }

.map-embed{
  border:1px solid var(--fog-2);
  overflow:hidden;
  filter: grayscale(.15) contrast(1.05);
}

.map-slot{
  height: 220px;
  background: var(--fog);
  border:1px dashed var(--fog-2);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:.6rem; color: var(--steel-2);
  font-family:var(--f-mono); font-size:.75rem; letter-spacing:.08em; text-transform:uppercase;
}
.map-slot svg{ width:28px; height:28px; }

.whatsapp-btn{
  display:inline-flex; align-items:center; gap:.7rem;
  background:#1f9e56; color:#fff;
  padding:.9rem 1.5rem;
  font-family:var(--f-display); font-size:.82rem; letter-spacing:.06em; text-transform:uppercase;
  transition: background-color .3s, transform .3s;
}
.whatsapp-btn:hover{ background:#178047; transform: translateY(-2px); }
.whatsapp-btn svg{ width:20px; height:20px; }

.form{
  background: var(--fog);
  padding: 2.4rem;
  border:1px solid var(--fog-2);
}
.form-row{ display:grid; grid-template-columns:1fr 1fr; gap:1.2rem; }
@media(max-width:560px){ .form-row{ grid-template-columns:1fr; } }
.field{ margin-bottom: 1.2rem; }
.field label{
  display:block; font-family:var(--f-mono); font-size:.68rem; letter-spacing:.1em; text-transform:uppercase;
  color: var(--steel); margin-bottom:.5rem;
}
.field input, .field textarea, .field select{
  width:100%;
  border:1px solid var(--fog-2);
  background: var(--paper);
  padding: .85rem 1rem;
  font-size:.95rem;
  color: var(--ink);
  border-radius: var(--radius);
  transition: border-color .3s, box-shadow .3s;
}
.field input:focus, .field textarea:focus, .field select:focus{
  border-color: var(--red);
  box-shadow: 0 0 0 3px var(--red-glow);
  outline:none;
}
.field textarea{ resize:vertical; min-height:120px; }
.form-msg{ font-family:var(--f-mono); font-size:.8rem; margin-top:1rem; min-height:1.2rem; }
.form-msg.ok{ color:#1f9e56; }
.form-msg.err{ color: var(--red); }

/* --------------------------------- FOOTER ------------------------------------ */
.footer{
  background: var(--ink); color:#c7c9cb;
  padding-top: var(--gap-l);
}
.footer-top{
  display:grid;
  grid-template-columns: 1.3fr 1fr 1fr 1fr;
  gap: 2.5rem;
  padding-bottom: var(--gap-l);
  border-bottom: 1px solid rgba(255,255,255,.1);
}
@media(max-width:860px){ .footer-top{ grid-template-columns:1fr 1fr; } }
@media(max-width:520px){ .footer-top{ grid-template-columns:1fr; } }
.footer-brand img{ height:42px; margin-bottom:1rem; }
.footer-brand p{ font-size:.9rem; max-width:32ch; }
.footer h4{ color:var(--paper); font-size:.82rem; letter-spacing:.1em; margin-bottom:1.2rem; }
.footer ul li{ margin-bottom:.7rem; font-size:.9rem; }
.footer ul li a:hover{ color: var(--red); }
.footer-social{ display:flex; gap:.7rem; margin-top:1.2rem; }
.footer-social a{
  width:38px; height:38px; border:1px solid rgba(255,255,255,.2);
  display:flex; align-items:center; justify-content:center;
  transition: background-color .3s, border-color .3s;
}
.footer-social a:hover{ background: var(--red); border-color:var(--red); }
.footer-social svg{ width:16px; height:16px; }
.footer-bottom{
  display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:1rem;
  padding: 1.6rem 0 2rem;
  font-family: var(--f-mono); font-size:.72rem; letter-spacing:.04em; color: var(--steel-2);
}
.footer-bottom a:hover{ color: var(--paper); }

/* ------------------------------ WHATSAPP FAB ---------------------------------- */
.fab-whatsapp{
  position:fixed; right:1.6rem; bottom:1.6rem; z-index:900;
  width:56px; height:56px; border-radius:50%;
  background:#1f9e56; color:#fff;
  display:flex; align-items:center; justify-content:center;
  box-shadow: 0 12px 30px -10px rgba(0,0,0,.4);
  transition: transform .3s var(--ease);
}
.fab-whatsapp:hover{ transform: scale(1.08); }
.fab-whatsapp svg{ width:28px; height:28px; }

/* ------------------------------- back to top ----------------------------------*/
.top-btn{
  position:fixed; right:1.6rem; bottom:5.6rem; z-index:900;
  width:44px;height:44px; border-radius:50%;
  background: var(--ink); color:var(--paper);
  display:flex; align-items:center; justify-content:center;
  opacity:0; visibility:hidden; transform: translateY(10px);
  transition: opacity .3s, transform .3s, visibility .3s;
}
.top-btn.show{ opacity:1; visibility:visible; transform:none; }
.top-btn svg{ width:18px; height:18px; }

/* ----------------------- correctifs anti-débordement flex ---------------------- */
.contact-line > div,
.why-item > div,
.plate-row span:last-child,
.checklist li{
  min-width: 0;
  overflow-wrap: break-word;
}
.plate-row{ flex-wrap: wrap; }
.contact-line, .why-item{ min-width: 0; }
.contact-grid > *,
.form-row > *,
.form,
.field,
.field select{ min-width: 0; }

/* --------------------------------- misc --------------------------------------*/
.skip-link{
  position:absolute; left:-9999px; top:auto;
  background: var(--red); color:#fff; padding: .8rem 1.2rem; z-index:2000;
}
.skip-link:focus{ left: 1rem; top:1rem; }

.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden;
  clip: rect(0,0,0,0); white-space:nowrap; border:0;
}
[data-reveal]{ opacity:1 !important; transform:none !important; }