/* =========================================================
   SAÏD DIGITAL — Design system
   Palette dérivée du logo (vert circuit / noir encre)
   ========================================================= */

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

:root{
  /* couleurs */
  --ink:        #12160f;
  --black:      #0a0c09;
  --green-900:  #0f2e14;
  --green-700:  #1f7a2e;
  --green-600:  #2f9a3e;
  --green-500:  #4caf50;
  --green-300:  #8bd17e;
  --green-100:  #e6f4e2;
  --cream:      #f6f7f3;
  --paper:      #ffffff;
  --line:       #e1e3dc;

  /* type */
  --font-display: 'Space Grotesk', sans-serif;
  --font-body: 'Inter', sans-serif;
  --font-mono: 'JetBrains Mono', monospace;

  /* rythme */
  --cut: 22px; /* taille de la coupe diagonale angulaire, signature du logo */
  --radius: 4px;
  --maxw: 1180px;
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  background:var(--cream);
  color:var(--ink);
  font-family:var(--font-body);
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}

img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
ul{ margin:0; padding:0; list-style:none; }

.wrap{
  max-width:var(--maxw);
  margin:0 auto;
  padding:0 32px;
}

/* -------- typographie -------- */
h1,h2,h3,h4{
  font-family:var(--font-display);
  font-weight:700;
  line-height:1.08;
  margin:0;
  color:var(--black);
  letter-spacing:-0.01em;
}
h1{ font-size:clamp(2.6rem, 5vw, 4.2rem); }
h2{ font-size:clamp(1.9rem, 3.2vw, 2.7rem); }
h3{ font-size:1.3rem; }
p{ margin:0; }

.eyebrow{
  font-family:var(--font-mono);
  font-size:0.78rem;
  letter-spacing:0.14em;
  text-transform:uppercase;
  color:var(--green-700);
  display:flex;
  align-items:center;
  gap:10px;
  margin-bottom:16px;
}
.eyebrow::before{
  content:"";
  width:22px;
  height:2px;
  background:var(--green-500);
  display:inline-block;
}

.lead{
  font-size:1.15rem;
  color:#3c4238;
  max-width:56ch;
}

.text-green{ color:var(--green-600); }

/* -------- boutons -------- */
.btn{
  display:inline-flex;
  align-items:center;
  gap:10px;
  font-family:var(--font-mono);
  font-size:0.85rem;
  letter-spacing:0.03em;
  padding:15px 26px;
  border:2px solid var(--black);
  background:var(--black);
  color:#fff;
  cursor:pointer;
  transition:transform .18s ease, background .18s ease, color .18s ease, border-color .18s ease;
  clip-path: polygon(0 0, calc(100% - var(--cut)) 0, 100% var(--cut), 100% 100%, var(--cut) 100%, 0 calc(100% - var(--cut)));
}
.btn:hover{ background:var(--green-600); border-color:var(--green-600); transform:translate(2px,-2px); }
.btn.outline{
  background:transparent;
  color:var(--black);
  border-color:var(--black);
}
.btn.outline:hover{ background:var(--black); color:#fff; }
.btn.on-dark{ border-color:var(--green-500); background:var(--green-500); color:var(--black); }
.btn.on-dark:hover{ background:var(--green-300); border-color:var(--green-300); }
.btn svg{ width:14px; height:14px; }

/* -------- header / nav -------- */
header.site{
  position:sticky;
  top:0;
  z-index:50;
  background:rgba(246,247,243,0.92);
  backdrop-filter:blur(8px);
  border-bottom:1px solid var(--line);
}
.nav{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:16px 32px;
  max-width:var(--maxw);
  margin:0 auto;
}
.nav .brand img{ height:40px; width:auto; }
.nav-links{
  display:flex;
  gap:32px;
  font-family:var(--font-mono);
  font-size:0.85rem;
  letter-spacing:0.02em;
}
.nav-links a{
  position:relative;
  padding:4px 0;
  color:var(--ink);
}
.nav-links a::after{
  content:"";
  position:absolute; left:0; bottom:-2px;
  width:0; height:2px;
  background:var(--green-500);
  transition:width .2s ease;
}
.nav-links a:hover::after,
.nav-links a.active::after{ width:100%; }
.nav-links a.active{ color:var(--green-700); }

.nav-cta{ display:flex; align-items:center; gap:22px; }
.nav-toggle{
  display:none;
  background:none; border:none; cursor:pointer;
  flex-direction:column; gap:5px; padding:6px;
}
.nav-toggle span{ width:24px; height:2px; background:var(--black); display:block; }

/* -------- hero -------- */
.hero{
  position:relative;
  background:var(--black);
  color:#fff;
  overflow:hidden;
  padding:96px 0 0;
}
.hero .wrap{
  display:grid;
  grid-template-columns:1.1fr 0.9fr;
  gap:40px;
  align-items:center;
}
.hero h1{ color:#fff; margin-bottom:22px; }
.hero .lead{ color:#c7ccc2; margin-bottom:36px; }
.hero .eyebrow{ color:var(--green-300); }
.hero .eyebrow::before{ background:var(--green-300); }
.hero-actions{ display:flex; gap:16px; flex-wrap:wrap; }

.hero-graphic{
  position:relative;
  height:420px;
  display:flex;
  align-items:center;
  justify-content:center;
}
.hero-graphic img{ height:100%; width:auto; filter:drop-shadow(0 20px 60px rgba(76,175,80,0.25)); }

.hero-base{
  height:64px;
  background:linear-gradient(90deg, var(--green-900), var(--green-700) 50%, var(--green-900));
  margin-top:70px;
  clip-path: polygon(0 0, 100% 0, 100% 100%, 4% 100%);
}

/* -------- bandeau services (accueil) -------- */
.service-strip{
  padding:90px 0;
}
.grid-3{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:26px;
  margin-top:52px;
}
.card{
  background:var(--paper);
  border:1px solid var(--line);
  padding:34px 28px;
  clip-path: polygon(0 0, calc(100% - var(--cut)) 0, 100% var(--cut), 100% 100%, var(--cut) 100%, 0 calc(100% - var(--cut)));
  transition:transform .2s ease, border-color .2s ease;
}
.card:hover{ transform:translateY(-6px); border-color:var(--green-500); }
.card .num{
  font-family:var(--font-mono);
  color:var(--green-600);
  font-size:0.85rem;
  margin-bottom:18px;
  display:block;
}
.card h3{ margin-bottom:12px; }
.card p{ color:#4b5147; font-size:0.96rem; margin-bottom:18px; }
.card a{
  font-family:var(--font-mono);
  font-size:0.8rem;
  color:var(--green-700);
  border-bottom:1px solid var(--green-500);
  padding-bottom:2px;
}

/* -------- section générique -------- */
.section{ padding:90px 0; }
.section.alt{ background:var(--paper); border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.section-head{ max-width:640px; margin-bottom:50px; }
.section-head.center{ margin-left:auto; margin-right:auto; text-align:center; }
.section-head.center .eyebrow{ justify-content:center; }

/* -------- stats -------- */
.stat-bar{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:24px;
  padding:60px 0;
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
}
.stat b{
  font-family:var(--font-display);
  font-size:2.4rem;
  color:var(--black);
  display:block;
}
.stat span{
  font-family:var(--font-mono);
  font-size:0.78rem;
  color:var(--green-700);
  text-transform:uppercase;
  letter-spacing:0.06em;
}

/* -------- process / etapes -------- */
.process{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:0;
  margin-top:50px;
  border-top:1px solid var(--line);
}
.process-step{
  padding:34px 34px 34px 34px;
  border-right:1px solid var(--line);
}
.process-step:first-child{ padding-left:0; }
.process-step:last-child{ border-right:none; padding-right:0; }
.process-step .n{
  font-family:var(--font-mono);
  color:var(--green-500);
  font-size:1.6rem;
  display:block;
  margin-bottom:14px;
}

/* -------- cta bandeau -------- */
.cta-band{
  background:linear-gradient(120deg, var(--green-900), var(--green-700));
  color:#fff;
  padding:80px 0;
  position:relative;
  overflow:hidden;
}
.cta-band .wrap{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:30px;
  flex-wrap:wrap;
  position:relative;
  z-index:2;
}
.cta-band h2{ color:#fff; max-width:520px; }

/* -------- footer -------- */
footer.site{
  background:var(--black);
  color:#c7ccc2;
  padding:70px 0 30px;
}
.footer-grid{
  display:grid;
  grid-template-columns:1.4fr 1fr 1fr 1fr;
  gap:40px;
  padding-bottom:50px;
  border-bottom:1px solid #26291f;
}
.footer-grid img{ height:36px; margin-bottom:16px; }
.footer-grid p{ color:#8b9083; font-size:0.92rem; max-width:32ch; }
.footer-col h4{
  font-family:var(--font-mono);
  font-size:0.78rem;
  letter-spacing:0.1em;
  text-transform:uppercase;
  color:var(--green-300);
  margin-bottom:18px;
}
.footer-col a, .footer-col li{
  display:block;
  color:#c7ccc2;
  font-size:0.92rem;
  margin-bottom:10px;
}
.footer-col a:hover{ color:var(--green-300); }
.footer-bottom{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding-top:26px;
  font-family:var(--font-mono);
  font-size:0.78rem;
  color:#6d7264;
  flex-wrap:wrap;
  gap:12px;
}

/* -------- page hero simple (pages interieures) -------- */
.page-hero{
  background:var(--black);
  color:#fff;
  padding:70px 0 66px;
  position:relative;
}
.page-hero .eyebrow{ color:var(--green-300); }
.page-hero .eyebrow::before{ background:var(--green-300); }
.page-hero h1{ color:#fff; }
.page-hero .lead{ color:#c7ccc2; margin-top:18px; }

/* -------- services détaillés -------- */
.service-block{
  display:grid;
  grid-template-columns:0.9fr 1.1fr;
  gap:60px;
  align-items:start;
  padding:70px 0;
  border-bottom:1px solid var(--line);
}
.service-block:last-child{ border-bottom:none; }
.service-block .tag{
  font-family:var(--font-mono);
  color:var(--green-600);
  font-size:0.8rem;
  margin-bottom:14px;
  display:block;
}
.service-block ul{ margin-top:22px; display:grid; gap:12px; }
.service-block li{
  display:flex;
  gap:12px;
  align-items:flex-start;
  color:#3c4238;
  font-size:0.98rem;
}
.service-block li::before{
  content:"";
  width:8px; height:8px;
  margin-top:7px;
  background:var(--green-500);
  flex-shrink:0;
  clip-path: polygon(0 0, 100% 0, 100% 60%, 60% 100%, 0 100%);
}

/* -------- portfolio -------- */
.portfolio-grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:26px;
  margin-top:50px;
}
.portfolio-item{
  background:var(--paper);
  border:1px solid var(--line);
  overflow:hidden;
  clip-path: polygon(0 0, calc(100% - var(--cut)) 0, 100% var(--cut), 100% 100%, var(--cut) 100%, 0 calc(100% - var(--cut)));
}
.portfolio-thumb{
  height:220px;
  background:linear-gradient(135deg, var(--green-900), var(--green-700));
  display:flex;
  align-items:center;
  justify-content:center;
  color:var(--green-300);
  font-family:var(--font-mono);
  font-size:0.8rem;
  text-align:center;
  padding:20px;
  letter-spacing:0.04em;
  overflow:hidden;
}
.portfolio-thumb:has(img){ padding:0; }
.portfolio-thumb img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}
.portfolio-body{ padding:24px 26px 28px; }
.portfolio-body .tag{
  font-family:var(--font-mono);
  font-size:0.75rem;
  color:var(--green-700);
  text-transform:uppercase;
  letter-spacing:0.06em;
}
.portfolio-body h3{ margin:10px 0 8px; }
.portfolio-body p{ color:#4b5147; font-size:0.93rem; }
.note-banner{
  margin-top:44px;
  padding:22px 26px;
  border:1px dashed var(--green-500);
  background:var(--green-100);
  font-family:var(--font-mono);
  font-size:0.85rem;
  color:var(--green-900);
}

/* -------- à propos -------- */
.about-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:60px;
  align-items:center;
}
.values-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:26px;
  margin-top:50px;
}
.value-card{ padding:8px 0; }
.value-card .n{ font-family:var(--font-mono); color:var(--green-500); font-size:1.1rem; }

/* -------- contact -------- */
.contact-grid{
  display:grid;
  grid-template-columns:0.85fr 1.15fr;
  gap:60px;
}
.contact-info-item{
  display:flex;
  gap:18px;
  padding:22px 0;
  border-bottom:1px solid var(--line);
}
.contact-info-item:first-child{ padding-top:0; }
.contact-info-item .ic{
  width:42px; height:42px;
  background:var(--green-100);
  color:var(--green-700);
  display:flex; align-items:center; justify-content:center;
  flex-shrink:0;
  clip-path: polygon(0 0, calc(100% - 8px) 0, 100% 8px, 100% 100%, 8px 100%, 0 calc(100% - 8px));
}
.contact-info-item h4{ font-size:0.95rem; margin-bottom:4px; }
.contact-info-item p, .contact-info-item a{ color:#4b5147; font-size:0.93rem; }
.contact-info-item a:hover{ color:var(--green-700); }

.form-field{ margin-bottom:20px; }
.form-field label{
  display:block;
  font-family:var(--font-mono);
  font-size:0.78rem;
  text-transform:uppercase;
  letter-spacing:0.06em;
  color:var(--ink);
  margin-bottom:8px;
}
.form-field input, .form-field textarea, .form-field select{
  width:100%;
  padding:13px 15px;
  border:1px solid var(--line);
  background:var(--paper);
  font-family:var(--font-body);
  font-size:0.96rem;
  color:var(--ink);
}
.form-field input:focus, .form-field textarea:focus, .form-field select:focus{
  outline:2px solid var(--green-500);
  outline-offset:1px;
  border-color:var(--green-500);
}
.form-row{ display:grid; grid-template-columns:1fr 1fr; gap:20px; }
.map-block{
  margin-top:60px;
  border:1px solid var(--line);
  height:320px;
}
.map-block iframe{ width:100%; height:100%; border:0; filter:grayscale(0.3); }

/* -------- responsive -------- */
@media (max-width: 900px){
  .hero .wrap{ grid-template-columns:1fr; }
  .hero-graphic{ height:280px; order:-1; }
  .grid-3{ grid-template-columns:1fr; }
  .stat-bar{ grid-template-columns:repeat(2,1fr); row-gap:30px; }
  .process{ grid-template-columns:1fr; }
  .process-step{ border-right:none; border-bottom:1px solid var(--line); padding:26px 0; }
  .footer-grid{ grid-template-columns:1fr 1fr; }
  .service-block{ grid-template-columns:1fr; gap:26px; }
  .about-grid{ grid-template-columns:1fr; }
  .values-grid{ grid-template-columns:1fr; }
  .portfolio-grid{ grid-template-columns:1fr; }
  .contact-grid{ grid-template-columns:1fr; }
}
@media (max-width: 900px){
  .nav-links, .nav-cta .btn{ display:none; }
  .nav-toggle{ display:flex; }
  .nav.open .nav-links{
    display:flex;
    position:absolute;
    top:72px; left:0; right:0;
    background:var(--cream);
    flex-direction:column;
    padding:24px 32px;
    border-bottom:1px solid var(--line);
    gap:18px;
  }
  .footer-grid{ grid-template-columns:1fr; }
  .footer-bottom{ flex-direction:column; align-items:flex-start; }
  .form-row{ grid-template-columns:1fr; }
}