/* ============================================================
   SIMANDOU TECHNOLOGIE — Charte graphique
   Auteur : Boubacar Bah · boubah6260@gmail.com
   ============================================================ */

:root{
  --vert:#14532d;
  --vert-fonce:#0c3a1e;
  --vert-clair:#1e7a3f;
  --encre:#101010;
  --papier:#fbfaf6;
  --gris:#e8e6df;
  --cyan:#00aeef;
  --magenta:#ec008c;
  --jaune:#ffd400;
  --radius:14px;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  font-family:'Work Sans',sans-serif;
  background:var(--papier);
  color:var(--encre);
  line-height:1.6;
}
h1,h2,h3,.display{font-family:'Anton',sans-serif;letter-spacing:.5px;font-weight:400;text-transform:uppercase}
.mono{font-family:'Space Mono',monospace}
.container{max-width:1180px;margin:0 auto;padding:0 24px}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}

/* ===== Barre CMJN (signature de la marque) ===== */
.cmyk-bar{display:flex;height:6px;width:100%}
.cmyk-bar span{flex:1}
.cmyk-bar .c{background:var(--cyan)}
.cmyk-bar .m{background:var(--magenta)}
.cmyk-bar .y{background:var(--jaune)}
.cmyk-bar .k{background:var(--encre)}
.cmyk-bar .g{background:var(--vert)}

/* ===== Header / Navigation ===== */
header{
  position:sticky;top:0;z-index:100;
  background:var(--papier);
  border-bottom:2px solid var(--encre);
}
.nav{display:flex;align-items:center;justify-content:space-between;height:72px;gap:16px}
.logo{display:flex;align-items:center;gap:12px}
.logo-img{
  width:52px;height:52px;object-fit:contain;
  background:#fff;border-radius:50%;
  border:2px solid var(--encre);padding:3px;
}
.logo-text{line-height:1.05}
.logo-text b{font-family:'Anton',sans-serif;font-weight:400;font-size:18px;display:block;color:var(--vert)}
.logo-text small{font-size:10px;letter-spacing:2.5px;text-transform:uppercase;color:var(--encre)}
nav ul{display:flex;gap:28px;list-style:none;font-weight:600;font-size:14px}
nav ul a{padding:6px 2px;border-bottom:2px solid transparent;transition:border-color .2s}
nav ul a:hover,nav ul a:focus-visible{border-color:var(--vert)}
nav ul a.actif{border-color:var(--vert);color:var(--vert)}
.btn{
  display:inline-block;background:var(--vert);color:#fff;
  padding:12px 26px;border-radius:var(--radius);
  font-weight:700;font-size:14px;border:2px solid var(--encre);
  box-shadow:3px 3px 0 var(--encre);
  transition:transform .15s, box-shadow .15s;
  cursor:pointer;
}
.btn:hover,.btn:focus-visible{transform:translate(-2px,-2px);box-shadow:5px 5px 0 var(--encre)}
.btn.jaune{background:var(--jaune);color:var(--encre)}
.btn.blanc{background:#fff;color:var(--encre)}
.burger{display:none;background:none;border:2px solid var(--encre);border-radius:8px;padding:8px 12px;font-size:18px;cursor:pointer}

/* ===== Bandeau de page intérieure ===== */
.bandeau{
  background:var(--vert-fonce);color:#fff;
  padding:56px 0;position:relative;overflow:hidden;
}
.bandeau::before{
  content:"";position:absolute;inset:0;
  background-image:radial-gradient(rgba(255,255,255,.08) 1.5px, transparent 1.5px);
  background-size:18px 18px;pointer-events:none;
}
.bandeau .container{position:relative}
.bandeau h1{font-size:clamp(32px,5vw,54px);margin-bottom:10px}
.bandeau p{color:#d8e6dc;max-width:640px}
.fil-ariane{
  font-family:'Space Mono',monospace;font-size:12px;
  color:var(--jaune);margin-bottom:14px;letter-spacing:1px;
}

/* ===== Héro (accueil) ===== */
.hero{background:var(--vert-fonce);color:#fff;position:relative;overflow:hidden}
.hero::before{
  content:"";position:absolute;inset:0;
  background-image:radial-gradient(rgba(255,255,255,.08) 1.5px, transparent 1.5px);
  background-size:18px 18px;pointer-events:none;
}
.hero-logo-watermark{position:absolute;right:-60px;bottom:-60px;width:340px;opacity:.06;pointer-events:none}
.hero-inner{
  position:relative;
  display:grid;grid-template-columns:1.15fr .85fr;gap:48px;
  padding:80px 0 90px;align-items:center;
}
.crop{position:relative;padding:8px 0}
.crop::before,.crop::after{content:"";position:absolute;width:22px;height:22px;border:2px solid var(--jaune)}
.crop::before{top:-10px;left:-14px;border-right:none;border-bottom:none}
.crop::after{bottom:-10px;right:-14px;border-left:none;border-top:none}
.eyebrow{
  font-family:'Space Mono',monospace;font-size:13px;letter-spacing:3px;
  text-transform:uppercase;color:var(--jaune);margin-bottom:18px;
}
.hero h1{font-size:clamp(40px,6vw,74px);line-height:1.02;margin-bottom:22px}
.hero h1 .souligne{color:var(--jaune)}
.hero p.lead{font-size:18px;color:#d8e6dc;max-width:520px;margin-bottom:32px}
.hero-cta{display:flex;gap:16px;flex-wrap:wrap}
.hero-stats{
  display:flex;gap:36px;margin-top:44px;flex-wrap:wrap;
  border-top:1px solid rgba(255,255,255,.2);padding-top:24px;
}
.stat b{font-family:'Anton',sans-serif;font-size:30px;color:var(--jaune);display:block}
.stat span{font-size:13px;color:#c4d6c9}

/* Fiche "bon à tirer" du héro */
.proof{
  background:#fff;color:var(--encre);
  border:2px solid var(--encre);border-radius:var(--radius);
  box-shadow:8px 8px 0 rgba(0,0,0,.35);
  overflow:hidden;transform:rotate(1.5deg);
}
.proof-head{
  display:flex;justify-content:space-between;align-items:center;
  padding:10px 16px;border-bottom:2px dashed var(--gris);
  font-family:'Space Mono',monospace;font-size:11px;
}
.proof-body{padding:22px}
.proof-body h3{font-size:22px;color:var(--vert);margin-bottom:6px}
.proof-body .ligne{display:flex;justify-content:space-between;font-size:13px;padding:9px 0;border-bottom:1px solid var(--gris)}
.proof-body .ligne b{font-family:'Space Mono',monospace}
.pastilles{display:flex;gap:8px;margin-top:16px}
.pastilles i{width:26px;height:26px;border-radius:50%;border:2px solid var(--encre)}
.pastilles .pc{background:var(--cyan)}
.pastilles .pm{background:var(--magenta)}
.pastilles .py{background:var(--jaune)}
.pastilles .pk{background:var(--encre)}
.tampon{
  margin-top:18px;display:inline-block;
  border:3px solid var(--vert);color:var(--vert);
  font-family:'Anton',sans-serif;padding:4px 14px;border-radius:8px;
  transform:rotate(-4deg);font-size:15px;letter-spacing:1px;
}

/* ===== Sections génériques ===== */
section{padding:88px 0}
.sec-head{max-width:640px;margin-bottom:52px}
.sec-head .eyebrow{color:var(--vert)}
.sec-head h2{font-size:clamp(30px,4vw,46px);line-height:1.1;margin-bottom:14px}
.sec-head p{color:#4b4b4b}

/* ===== Cartes services ===== */
.services-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:22px}
.carte{
  background:#fff;border:2px solid var(--encre);border-radius:var(--radius);
  padding:28px 24px;position:relative;
  transition:transform .15s, box-shadow .15s;
}
.carte:hover{transform:translateY(-6px);box-shadow:6px 6px 0 var(--vert)}
.carte .ico{
  width:52px;height:52px;border-radius:12px;
  display:flex;align-items:center;justify-content:center;
  font-size:24px;margin-bottom:18px;border:2px solid var(--encre);
}
.carte.c1 .ico{background:var(--cyan)}
.carte.c2 .ico{background:var(--magenta)}
.carte.c3 .ico{background:var(--jaune)}
.carte.c4 .ico{background:var(--vert-clair)}
.carte h3{font-size:17px;margin-bottom:10px}
.carte p{font-size:14px;color:#555}
.carte .tag{position:absolute;top:14px;right:14px;font-family:'Space Mono',monospace;font-size:10px;color:#6b6b6b}

/* ===== Machines ===== */
.machines{background:var(--encre);color:#fff}
.machines .sec-head .eyebrow{color:var(--jaune)}
.machines .sec-head p{color:#bbb}
.machines-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:22px}
.machine{
  border:2px solid rgba(255,255,255,.25);border-radius:var(--radius);
  padding:26px;display:flex;gap:20px;align-items:flex-start;
  background:rgba(255,255,255,.04);transition:border-color .2s;
}
.machine:hover{border-color:var(--jaune)}
.machine .num{
  font-family:'Space Mono',monospace;color:var(--jaune);font-size:13px;
  border:1px solid var(--jaune);padding:4px 10px;border-radius:6px;white-space:nowrap;
}
.machine h3{font-size:19px;margin-bottom:8px}
.machine p{font-size:14px;color:#c9c9c9}

/* ===== Processus ===== */
.process-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:0;counter-reset:etape}
.etape{padding:28px 22px;border-left:2px dashed var(--vert);position:relative}
.etape::before{
  counter-increment:etape;content:"0" counter(etape);
  font-family:'Anton',sans-serif;font-size:42px;color:var(--vert);
  opacity:.25;display:block;margin-bottom:8px;
}
.etape h3{font-size:16px;margin-bottom:8px}
.etape p{font-size:14px;color:#555}

/* ===== Duo photos (atelier) ===== */
.duo-photos{display:grid;grid-template-columns:repeat(2,1fr);gap:22px}

/* ===== Galerie ===== */
.realisations{background:var(--gris)}
.galerie{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.projet{border:2px solid var(--encre);border-radius:var(--radius);overflow:hidden;background:#fff}
.projet .visuel{
  height:220px;display:flex;align-items:center;justify-content:center;
  font-family:'Anton',sans-serif;font-size:24px;color:#fff;
  text-align:center;padding:20px;background:var(--vert);
  overflow:hidden;
}
.projet .visuel img{width:100%;height:100%;object-fit:cover;display:block}
.projet figcaption{
  padding:14px 18px;display:flex;justify-content:space-between;align-items:center;
  border-top:2px solid var(--encre);font-size:13px;font-weight:600;
}
.projet figcaption span{font-family:'Space Mono',monospace;font-size:11px;color:#6b6b6b}

/* ===== CTA pleine largeur ===== */
.devis-cta{background:var(--vert);color:#fff;text-align:center}
.devis-cta h2{font-size:clamp(30px,4vw,50px);margin-bottom:14px}
.devis-cta p{max-width:560px;margin:0 auto 30px;color:#d8e6dc}
.devis-cta .btn{box-shadow:3px 3px 0 rgba(0,0,0,.5)}

/* ===== Navigation rapide (pastilles d'ancrage) ===== */
.nav-rapide{display:flex;gap:12px;flex-wrap:wrap;margin-top:26px}
.nav-rapide a{
  font-family:'Space Mono',monospace;font-size:12px;
  border:2px solid var(--encre);padding:9px 18px;border-radius:30px;
  background:#fff;transition:background .2s;
}
.nav-rapide a:hover,.nav-rapide a:focus-visible{background:var(--jaune)}

/* ===== Fiches détail (services / machines) ===== */
.fiche-detail{padding:80px 0;border-top:2px solid var(--encre)}
.fiche-detail.fond-alt{background:var(--gris)}
.fiche-grid{display:grid;grid-template-columns:.85fr 1.15fr;gap:56px;align-items:center}
.fiche-grid.inverse{grid-template-columns:1.15fr .85fr}
.fiche-grid.inverse .fiche-visuel{order:2}
.fiche-visuel{
  background:#fff;border:2px solid var(--encre);border-radius:var(--radius);
  box-shadow:8px 8px 0 var(--vert);padding:48px 32px;text-align:center;
}
.fiche-visuel .ico-grand{font-size:60px;margin-bottom:18px}
.fiche-visuel img{width:100%;max-height:220px;object-fit:cover;border-radius:10px;border:2px solid var(--encre);margin-bottom:18px}
.fiche-visuel-titre{font-family:'Anton',sans-serif;letter-spacing:.5px;text-transform:uppercase;font-size:1.17em;margin:0}
.trio-photos{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.fiche-visuel .tag-num{
  font-family:'Space Mono',monospace;color:var(--vert);
  border:1px solid var(--vert);padding:4px 14px;border-radius:20px;
  font-size:12px;display:inline-block;margin-bottom:22px;
}
.fiche-texte .eyebrow{color:var(--vert)}
.fiche-texte h2{font-size:clamp(26px,3.4vw,38px);margin-bottom:14px;line-height:1.12}
.fiche-texte p.lead{color:#4b4b4b;margin-bottom:22px}
.liste-puces{list-style:none;margin-bottom:28px}
.liste-puces li{padding:8px 0 8px 30px;position:relative;font-size:15px}
.liste-puces li::before{content:"✓";position:absolute;left:0;color:var(--vert);font-weight:700}

/* ===== À propos ===== */
.apropos{background:var(--gris)}
.apropos .eyebrow{color:var(--vert)}
.apropos-grid{display:grid;grid-template-columns:1fr 1.1fr;gap:48px;align-items:center}
.apropos-photos{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.apropos-photos img{
  width:100%;height:240px;object-fit:cover;
  border-radius:var(--radius);border:2px solid var(--encre);
  box-shadow:6px 6px 0 var(--vert);
}
.apropos-photos img:nth-child(2){margin-top:32px}
.apropos .lead{color:#4b4b4b;margin-bottom:22px}

/* ===== Contact ===== */
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:start}
.info-ligne{display:flex;gap:16px;align-items:flex-start;padding:18px 0;border-bottom:1px solid var(--gris)}
.info-ligne .ico{
  width:44px;height:44px;border-radius:50%;background:var(--vert);color:#fff;
  display:flex;align-items:center;justify-content:center;font-size:18px;flex-shrink:0;
}
.info-ligne b{display:block;font-size:14px;text-transform:uppercase;letter-spacing:1px;color:var(--vert)}
.info-ligne span{font-size:15px}
.formulaire{
  background:#fff;border:2px solid var(--encre);border-radius:var(--radius);
  padding:32px;box-shadow:6px 6px 0 var(--vert);
}
.formulaire h3{font-size:20px;margin-bottom:20px;color:var(--vert)}
.champ{margin-bottom:16px}
.champ label{display:block;font-size:13px;font-weight:600;margin-bottom:6px}
.champ input,.champ select,.champ textarea{
  width:100%;padding:12px 14px;border:2px solid var(--encre);
  border-radius:10px;font-family:inherit;font-size:14px;background:var(--papier);
}
.champ input:focus,.champ select:focus,.champ textarea:focus{outline:3px solid var(--jaune);outline-offset:1px}
.carte-map{
  border:2px solid var(--encre);border-radius:var(--radius);
  overflow:hidden;margin-top:24px;
}
.carte-map iframe{width:100%;height:280px;border:0;display:block}

/* ===== Footer ===== */
footer{background:var(--encre);color:#bbb;padding:48px 0 28px;font-size:14px}
.footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr;gap:40px;margin-bottom:36px}
.footer-logo{width:72px;height:72px;object-fit:contain;background:#fff;border-radius:50%;padding:6px;margin-bottom:14px}
footer h3{color:#fff;font-family:'Anton',sans-serif;font-weight:400;font-size:16px;margin-bottom:14px;text-transform:uppercase;letter-spacing:1px}
footer ul{list-style:none}
footer li{margin-bottom:8px}
footer a:hover{color:var(--jaune)}
.footer-bas{
  border-top:1px solid #333;padding-top:20px;
  display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px;
  font-family:'Space Mono',monospace;font-size:11px;
}

/* ===== WhatsApp flottant ===== */
.wa-float{
  position:fixed;bottom:24px;right:24px;z-index:200;
  width:58px;height:58px;border-radius:50%;
  background:#25d366;color:#fff;font-size:28px;
  display:flex;align-items:center;justify-content:center;
  border:2px solid var(--encre);box-shadow:3px 3px 0 var(--encre);
  transition:transform .15s;
}
.wa-float:hover{transform:scale(1.08)}

/* ===== Responsive ===== */
@media (max-width:960px){
  .hero-inner{grid-template-columns:1fr;padding:56px 0 64px}
  .proof{max-width:440px}
  .services-grid{grid-template-columns:repeat(2,1fr)}
  .machines-grid{grid-template-columns:1fr}
  .process-grid{grid-template-columns:repeat(2,1fr);gap:20px}
  .galerie{grid-template-columns:repeat(2,1fr)}
  .contact-grid{grid-template-columns:1fr}
  .footer-grid{grid-template-columns:1fr 1fr}
  .fiche-grid,.fiche-grid.inverse{grid-template-columns:1fr}
  .fiche-grid.inverse .fiche-visuel{order:0}
  .trio-photos{grid-template-columns:1fr}
  .apropos-grid{grid-template-columns:1fr}
  .apropos-photos img:nth-child(2){margin-top:0}
}
@media (max-width:640px){
  .hero-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;padding-right:88px}
  nav ul{display:none}
  nav ul.ouvert{
    display:flex;flex-direction:column;position:absolute;
    top:72px;left:0;right:0;background:var(--papier);
    padding:20px 24px;border-bottom:2px solid var(--encre);gap:16px;
    z-index:99;
  }
  .burger{display:block}
  .nav > .btn{display:none}
  .services-grid,.process-grid,.galerie,.footer-grid{grid-template-columns:1fr}
  section{padding:60px 0}
}
@media (prefers-reduced-motion:reduce){
  *{transition:none!important;animation:none!important}
  html{scroll-behavior:auto}
}