/* ==========================================================================
   SUNDATALAB · design system (direction 1a "Structure")
   Grotesque + mono, grille apparente, ton d'atelier technique.
   ========================================================================== */

:root{
  --bg:            #FBFBF9;
  --bg-alt:        #F4F4F0;
  --bg-page:       #E7E7E2;
  --bg-dark:       #17181A;
  --bg-darker:     #0F1011;
  --border:        #E4E4DE;
  --border-soft:   #D8D8D0;
  --border-dark:   #2C2D2F;

  --ink:           #17181A;
  --ink-soft:      #3A3A36;
  --ink-muted:     #4A4A44;
  --ink-faint:     #6B6B63;
  --ink-mono:      #6E6E66;
  --ink-on-dark:   #FBFBF9;
  --ink-on-dark-muted: #A8A8A0;
  --ink-on-dark-faint: #7A7A72;

  --lime:          #B4E01B;
  --lime-dark:     #6E8F00;
  --lime-deep:     #3A4A00;

  --white:         #FFFFFF;

  --radius-s: 2px;
  --radius-m: 4px;

  --font-display: 'Space Grotesk', Helvetica, Arial, sans-serif;
  --font-body:    'Instrument Sans', Helvetica, Arial, sans-serif;
  --font-mono:    'JetBrains Mono', 'Courier New', monospace;

  --container: 1280px;
  --edge: 56px;
}

*, *::before, *::after{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
body{
  margin: 0;
  background: var(--bg-page);
  color: var(--ink);
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img{ max-width: 100%; display: block; }
a{ color: inherit; text-decoration: none; }
button{ font-family: inherit; cursor: pointer; }
ul{ margin: 0; padding: 0; list-style: none; }
h1,h2,h3,h4,p{ margin: 0; }
svg{ display:block; }

.site{
  max-width: var(--container);
  margin: 0 auto;
  background: var(--bg);
  box-shadow: 0 40px 100px rgba(20,20,18,0.10);
  overflow: hidden;
}

.wrap{ padding-left: 56px; padding-right: 56px; }

/* ---------- typography helpers ---------- */
.eyebrow{
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.eyebrow.accent{ color: var(--lime-dark); }
.eyebrow.on-dark{ color: var(--ink-on-dark-faint); }
.mono{ font-family: var(--font-mono); }
.section-number{
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.section-head{
  display: flex;
  align-items: baseline;
  gap: 20px;
  padding-top: 64px;
  padding-bottom: 30px;
}
.section-head h2{
  font-family: var(--font-display);
  font-size: 30px;
  letter-spacing: -0.02em;
  color: var(--ink);
}
.section-head p.lede{
  font-size: 17px;
  color: var(--ink-muted);
  max-width: 620px;
}
.section-head h2.title-w490{ min-width: 490px; }
.section-intro{
  padding: 0 0 34px;
  max-width: 680px;
}
.section-intro p{
  font-size: 17px;
  line-height: 1.6;
  color: var(--ink-muted);
}

h1,h2,h3,h4{ font-family: var(--font-display); color: var(--ink); }

.kicker{
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--lime-dark);
}

/* ---------- buttons ---------- */
.btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 500;
  padding: 14px 24px;
  border-radius: var(--radius-s);
  border: 1px solid transparent;
  transition: transform .12s ease, opacity .12s ease, background .12s ease, border-color .12s ease;
  white-space: nowrap;
}
.btn:hover{ transform: translateY(-1px); }
.btn-primary{ background: var(--lime); color: var(--ink); font-weight: 500; }
.btn-primary:hover{ background: #a5d016; }
.btn-dark{ background: var(--ink); color: var(--bg); font-weight: 500; }
.btn-dark:hover{ background: #2a2b2d; }
.btn-outline{ background: transparent; color: var(--ink); border-color: var(--ink); }
.btn-outline:hover{ border-color: var(--lime-dark); color: var(--lime-dark); }
.btn-outline-light{ background: transparent; color: var(--bg); border-color: #3f4043; }
.btn-outline-light:hover{ border-color: var(--lime); color: var(--lime); }
.btn-ghost{ background: transparent; color: var(--ink); padding: 14px 4px; border-bottom: 2px solid var(--lime); border-radius: 0; }
.btn-block{ width: 100%; }
.btn-sm{ padding: 11px 20px; font-size: 15px; }
.btn-lg{ padding: 15px 26px; font-size: 16px; }

/* ---------- header / nav ---------- */
.nav{
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 56px;
  border-bottom: 1px solid var(--border);
  background: var(--bg);
  position: sticky;
  top: 0;
  z-index: 50;
}
.brand{ display: flex; align-items: center; gap: 11px; }
.brand-logo{ height: 26px; width: auto; display: block; }
.footer-brand .brand-logo{ height: 24px; }
.brand-name{
  font-family: var(--font-display);
  font-size: 21px;
  font-weight: 500;
  letter-spacing: -0.02em;
  color: var(--ink);
}
.nav-right{ display: flex; align-items: center; gap: 24px; }
.nav-links{ display: flex; align-items: center; gap: 20px; font-family: var(--font-display); font-size: 15px; color: var(--ink-soft); }
.nav-links > a{ padding: 6px 0; border-bottom: 2px solid transparent; }
.nav-links > a:hover, .nav-links > a.active{ color: var(--ink); border-bottom-color: var(--lime); }
.nav-toggle{ display: none; background: none; border: none; padding: 8px; }
.nav-toggle span{ display:block; width:22px; height:2px; background:var(--ink); margin:4px 0; }

/* ---------- dropdown menus (Produits / Services) ---------- */
.nav-item{ position: relative; display: flex; align-items: center; }
.nav-item > a{ padding: 6px 0; border-bottom: 2px solid transparent; display:flex; align-items:center; gap:5px; }
.nav-item > a::after{ content:""; width:6px; height:6px; border-right:1.5px solid currentColor; border-bottom:1.5px solid currentColor; transform: rotate(45deg); margin-top:-3px; opacity:.55; }
.nav-item > a:hover, .nav-item > a.active{ color: var(--ink); border-bottom-color: var(--lime); }
.nav-item .dropdown{
  position: absolute;
  top: 100%;
  left: -16px;
  margin-top: 14px;
  background: var(--bg);
  border: 1px solid var(--border);
  min-width: 240px;
  box-shadow: 0 20px 40px rgba(20,20,18,0.14);
  opacity: 0;
  visibility: hidden;
  transform: translateY(4px);
  transition: opacity .15s ease, transform .15s ease, visibility .15s;
  padding: 8px 0;
  z-index: 60;
}
.nav-item:hover .dropdown,
.nav-item:focus-within .dropdown{ opacity: 1; visibility: visible; transform: translateY(0); }
.dropdown a{
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 12px 18px;
  font-family: var(--font-display);
  font-size: 14.5px;
  font-weight: 500;
  color: var(--ink-soft);
  border-bottom: none;
}
.dropdown a:hover{ background: var(--bg-alt); color: var(--ink); }
.dropdown a .dsub{
  font-family: var(--font-mono);
  font-size: 11.5px;
  font-weight: 400;
  color: var(--ink-faint);
}

/* mobile accordion (details/summary) */
.mobile-dropdown{ border-bottom: 1px solid var(--border); }
.mobile-dropdown summary{
  font-family: var(--font-display);
  font-size: 17px;
  padding: 14px 0;
  color: var(--ink-soft);
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.mobile-dropdown summary::-webkit-details-marker{ display:none; }
.mobile-dropdown summary::after{ content:"+"; font-family: var(--font-mono); font-size:18px; color: var(--ink-faint); }
.mobile-dropdown[open] summary::after{ content:"×"; }
.mobile-nav .mobile-dropdown a{
  display: block;
  padding: 10px 0 14px 16px;
  font-family: var(--font-display);
  font-size: 15.5px;
  color: var(--ink-muted);
  border-bottom: none;
}

/* ---------- breadcrumb / page header (interior pages) ---------- */
.page-header{
  padding: 48px 56px 40px;
  border-bottom: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.page-header h1{
  font-size: 48px;
  line-height: 1.05;
  letter-spacing: -0.03em;
  max-width: 820px;
}
.page-header .lede{
  font-size: 18px;
  line-height: 1.6;
  color: var(--ink-muted);
  max-width: 640px;
}
.page-header .cta-row{ display:flex; gap:12px; padding-top: 8px; flex-wrap: wrap; }

/* ---------- hero (home) ---------- */
.hero{
  display: grid;
  grid-template-columns: 1fr 1fr;
  border-bottom: 1px solid var(--border);
}
.hero-copy{
  padding: 84px 56px 72px;
  display: flex;
  flex-direction: column;
  gap: 28px;
  border-right: 1px solid var(--border);
}
.hero-copy h1{
  font-size: 62px;
  line-height: 1.02;
  letter-spacing: -0.035em;
  color: var(--ink);
}
.hero-copy .sub{
  font-size: 21px;
  line-height: 1.5;
  color: var(--ink-muted);
  max-width: 520px;
}
.hero-cta{ display: flex; gap: 12px; padding-top: 6px; flex-wrap: wrap; }
.hero-signature{
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--ink-faint);
  padding-top: 12px;
}
.hero-visual{
  padding: 56px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  background: var(--bg-alt);
}
.shot{
  flex: 1;
  min-height: 320px;
  border: 1px solid var(--border-soft);
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--white);
  border-radius: var(--radius-m);
  overflow: hidden;
}
.shot img{ width: 100%; height: 100%; object-fit: cover; display: block; }
.illus-banner{ min-height: 280px; border-bottom: 1px solid var(--border); }
.illus-banner img{ width: 100%; height: 100%; object-fit: cover; display: block; }
.illus-inline{ min-height: 220px; }
.illus-inline img{ width: 100%; height: 100%; object-fit: cover; display: block; }
.article-banner{ margin: 0 56px 8px; border: 1px solid var(--border-soft); border-radius: var(--radius-m); overflow: hidden; min-height: 240px; }
.article-banner img{ width: 100%; height: 100%; object-fit: cover; display: block; }

/* ---------- benefit cards (reuses pillar look for a 3-col layout) ---------- */
.benefit-grid{ display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--border); }
.benefit-grid.cols-4{ grid-template-columns: repeat(4, 1fr); }
.benefit{
  padding: 32px 30px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  border-right: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
.benefit:last-child{ border-right: none; }
.benefit .eyebrow{ margin-bottom: 2px; }
.benefit h3{ font-size: 19px; font-weight: 600; }
.benefit p{ font-size: 14.5px; line-height: 1.55; color: var(--ink-muted); }

/* ---------- step + CTA rows (used where prices were replaced by CTAs) ---------- */
.step-cta{ display: flex; flex-direction: column; gap: 4px; }
.step-cta-item{ padding: 26px 0; border-top: 1px solid var(--border-soft); }
.step-cta-item:last-child{ padding-bottom: 0; }
.step-cta-item .stage-name{ font-family: var(--font-display); font-size: 19px; font-weight: 600; color: var(--ink); }
.step-cta-item .stage-meta{ font-family: var(--font-mono); font-size: 12px; color: var(--lime-dark); margin-top: 4px; }
.step-cta-item p{ font-size: 15px; line-height: 1.6; color: var(--ink-muted); padding-top: 10px; }
.shot-caption{
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.06em;
  color: var(--ink-faint);
}

/* ---------- feature grid (4 piliers) ---------- */
.pillars{ border-bottom: 1px solid var(--border); }
.pillars-grid{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid var(--border);
}
.pillar{
  padding: 36px 32px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  border-right: 1px solid var(--border);
  min-height: 190px;
}
.pillar:last-child{ border-right: none; padding-right: var(--edge); }
.pillar:first-child{ padding-left: var(--edge); }
.pillar h3{ font-size: 20px; font-weight: 600; }
.pillar p{ font-size: 15px; line-height: 1.55; color: var(--ink-muted); }
.pillar .quote{
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 1.5;
  color: var(--lime-dark);
  margin-top: auto;
}

/* ---------- model comparison table ---------- */
.model-table{ padding: 56px; border-bottom: 1px solid var(--border); display:flex; flex-direction:column; gap:32px; }
.model-grid{
  display: grid;
  grid-template-columns: 180px repeat(var(--cols,2), 1fr);
  border-top: 1px solid var(--ink);
}
.model-grid > .cell{
  padding: 22px 24px;
  border-bottom: 1px solid var(--border);
  border-left: 1px solid var(--border);
  font-size: 16px;
  line-height: 1.5;
  color: var(--ink-soft);
}
.model-grid > .cell:first-child{ border-left: none; }
.model-grid > .row-label{
  padding: 22px 0;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.06em;
  color: var(--ink-faint);
  border-bottom: 1px solid var(--border);
}
.model-grid > .col-head{
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 600;
  color: var(--ink);
}

/* ---------- alternatives list ---------- */
.alternatives{ padding: 56px; background: var(--bg-alt); border-bottom: 1px solid var(--border); display:flex; flex-direction:column; gap:32px; }
.alt-row{
  display: grid;
  grid-template-columns: 300px 1fr;
  gap: 32px;
  padding: 20px 0;
  border-top: 1px solid var(--border-soft);
}
.alt-row:last-child{ border-bottom: 1px solid var(--border-soft); }
.alt-row .name{ font-family: var(--font-display); font-size: 18px; font-weight: 500; color: var(--ink); }
.alt-row .desc{ font-size: 16px; line-height: 1.55; color: var(--ink-muted); }

/* ---------- proof strip ---------- */
.proof{ padding: 56px; border-bottom: 1px solid var(--border); display:flex; flex-direction:column; gap:32px; }
.proof-grid{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--border); }
.proof-card{ background: var(--bg); padding: 32px; display:flex; flex-direction:column; gap:12px; }
.proof-card h3{ font-size: 18px; font-weight: 600; }
.proof-card p{ font-size: 15px; line-height: 1.55; color: var(--ink-muted); }

/* ---------- generic content section ---------- */
.section{ padding: 64px 56px; border-bottom: 1px solid var(--border); }
.section.alt-bg{ background: var(--bg-alt); }
.section.dark{ background: var(--bg-dark); color: var(--bg); }
.section.dark h2, .section.dark h3{ color: var(--bg); }
.section.dark p{ color: var(--ink-on-dark-muted); }
.section.no-border{ border-bottom: none; }
.section.tight{ padding-top: 40px; padding-bottom: 40px; }

.grid-2{ display: grid; grid-template-columns: 1fr 1fr; gap: 56px; }
.grid-3{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
.grid-4{ display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }

/* ---------- step process ---------- */
.steps{ display: flex; flex-direction: column; }
.step{
  display: grid;
  grid-template-columns: 90px 1fr 200px;
  gap: 28px;
  padding: 32px 0;
  border-top: 1px solid var(--border-soft);
  align-items: start;
}
.step:last-child{ border-bottom: 1px solid var(--border-soft); }
.step .num{ font-family: var(--font-mono); font-size: 14px; color: var(--lime-dark); }
.step h4{ font-size: 21px; margin-bottom: 10px; }
.step p{ font-size: 15px; line-height: 1.6; color: var(--ink-muted); }
.step .meta{ font-family: var(--font-mono); font-size: 13px; color: var(--ink-faint); line-height: 1.6; text-align: right; }
.step .meta strong{ display:block; color: var(--ink-soft); font-size: 14px; margin-bottom: 4px; }

/* ---------- pricing cards ---------- */
.pricing-grid{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; align-items: stretch; }
.pricing-grid.cols-2{ grid-template-columns: repeat(2, 1fr); }
.pricing-grid.cols-4{ grid-template-columns: repeat(4, 1fr); gap: 20px; }
.price-card{
  border: 1px solid var(--border-soft);
  background: var(--bg);
  border-radius: var(--radius-m);
  padding: 32px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.price-card.featured{
  border-color: var(--ink);
  box-shadow: 0 20px 40px rgba(20,20,18,0.10);
  position: relative;
}
.price-card.featured::before{
  content: "Le plus choisi";
  position: absolute;
  top: -13px;
  left: 32px;
  background: var(--lime);
  color: var(--ink);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 5px 10px;
  border-radius: 3px;
}
.price-card .plan-name{ font-family: var(--font-display); font-size: 20px; font-weight: 600; }
.price-card .plan-for{ font-size: 14px; color: var(--ink-faint); }
.price-card .price{ display:flex; align-items:baseline; gap:6px; padding: 8px 0; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); margin: 4px 0; }
.price-card .price .amount{ font-family: var(--font-display); font-size: 40px; letter-spacing: -0.02em; color: var(--ink); }
.price-card .price .amount small{ font-size: 16px; font-weight: 400; }
.price-card .price .unit{ font-family: var(--font-mono); font-size: 13px; color: var(--ink-faint); }
.price-card ul.features{ display:flex; flex-direction:column; gap: 12px; flex: 1; }
.price-card ul.features li{ font-size: 14.5px; line-height: 1.5; color: var(--ink-soft); padding-left: 20px; position: relative; }
.price-card ul.features li::before{ content:"•"; position:absolute; left:0; color: var(--lime-dark); font-family: var(--font-mono); }
.price-card.dark{
  background: var(--ink);
  border-color: var(--ink);
  box-shadow: 0 20px 40px rgba(20,20,18,0.18);
}
.price-card.dark::before{ background: var(--lime); color: var(--ink); }
.price-card.dark .plan-name{ color: var(--ink-on-dark); }
.price-card.dark .plan-for{ color: var(--ink-on-dark-muted); }
.price-card.dark .price{ border-color: #3f4043; }
.price-card.dark .price .amount{ color: var(--ink-on-dark); }
.price-card.dark .price .amount small{ color: var(--ink-on-dark-muted); }
.price-card.dark ul.features li{ color: var(--ink-on-dark-muted); }
.price-card.dark ul.features li::before{ color: var(--lime); }
.price-note{ font-family: var(--font-mono); font-size: 12.5px; color: var(--ink-faint); line-height: 1.6; }

/* stage/step price card (audit -> construction -> maintenance) */
.stage-grid{ display:flex; flex-direction:column; }
.stage-row{
  display: grid;
  grid-template-columns: 220px 1fr 200px;
  gap: 28px;
  padding: 30px 0;
  border-top: 1px solid var(--border-soft);
  align-items: center;
}
.stage-row:last-child{ border-bottom: 1px solid var(--border-soft); }
.stage-row .stage-name{ font-family: var(--font-display); font-size: 19px; font-weight: 600; }
.stage-row .stage-meta{ font-family: var(--font-mono); font-size: 12px; color: var(--ink-faint); margin-top: 6px; }
.stage-row p{ font-size: 15px; line-height: 1.6; color: var(--ink-muted); }
.stage-row .stage-price{ text-align: right; font-family: var(--font-display); font-size: 21px; color: var(--ink); }
.stage-row .stage-price small{ display:block; font-family: var(--font-mono); font-size: 11.5px; color: var(--ink-faint); font-weight: 400; margin-top: 4px; }

/* ---------- CTA band (audit) ---------- */
.cta-band{
  background: var(--bg-dark);
  padding: 72px 56px;
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 56px;
  align-items: center;
}
.cta-band .head{ display:flex; flex-direction:column; gap: 18px; }
.cta-band h2{ font-size: 40px; line-height: 1.1; letter-spacing: -0.03em; color: var(--bg); }
.cta-band .head p{ font-size: 17px; line-height: 1.6; color: var(--ink-on-dark-muted); max-width: 520px; }

/* ---------- form ---------- */
.form-panel{ display:flex; flex-direction:column; gap: 12px; }
.field-row{ display:flex; gap:1px; background: var(--border-dark); }
.field{ flex:1; background: var(--bg-dark); }
.field input, .field select, .field textarea{
  width: 100%;
  background: var(--bg-dark);
  border: 1px solid var(--border-dark);
  color: var(--bg);
  padding: 15px 16px;
  font-family: var(--font-mono);
  font-size: 13px;
  border-radius: 0;
}
.field-row .field input{ border: none; }
.field textarea{ min-height: 90px; resize: vertical; }
.field label, .field-label{
  display:block;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ink-on-dark-faint);
  margin-bottom: 6px;
}
.field input::placeholder, .field textarea::placeholder{ color: #6E6E66; }
.field input:focus, .field select:focus, .field textarea:focus{ outline: 1px solid var(--lime); }
.form-submit{
  background: var(--lime);
  color: var(--ink);
  padding: 16px;
  text-align: center;
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 600;
  border: none;
  border-radius: 0;
  width: 100%;
}
.form-submit:hover{ background: #a5d016; }
.form-note{ font-family: var(--font-mono); font-size: 12px; color: var(--ink-on-dark-faint); text-align: center; }

/* light form (contact page) */
.form-light .field{ background: transparent; }
.form-light .field input, .form-light .field select, .form-light .field textarea{
  background: var(--bg);
  border: 1px solid var(--border-soft);
  color: var(--ink);
  border-radius: var(--radius-s);
}
.form-light .field-row{ background: transparent; gap: 16px; }
.form-light .field-row .field input{ border: 1px solid var(--border-soft); }
.form-light .field label{ color: var(--ink-faint); }
.form-light .field select{ appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--ink-faint) 50%), linear-gradient(135deg, var(--ink-faint) 50%, transparent 50%); background-position: calc(100% - 20px) center, calc(100% - 15px) center; background-size: 5px 5px, 5px 5px; background-repeat: no-repeat; }
.form-light .form-submit{ background: var(--ink); color: var(--bg); }
.form-light .form-submit:hover{ background: #2a2b2d; }

/* ---------- footer ---------- */
.footer{
  background: var(--bg-darker);
  padding: 56px 56px 32px;
}
.footer-top{ display:flex; align-items:flex-start; justify-content:space-between; gap: 48px; padding-bottom: 40px; border-bottom: 1px solid #24252A; flex-wrap: wrap; }
.footer-brand{ display:flex; flex-direction:column; gap: 16px; max-width: 320px; }
.footer-brand p{ font-size: 14px; line-height: 1.6; color: var(--ink-on-dark-faint); }
.footer-cols{ display:flex; gap: 64px; flex-wrap: wrap; }
.footer-col{ display:flex; flex-direction:column; gap: 14px; }
.footer-col .title{ font-family: var(--font-mono); font-size: 11px; letter-spacing:.1em; text-transform:uppercase; color: var(--ink-on-dark-faint); margin-bottom: 4px; }
.footer-col a{ font-family: var(--font-mono); font-size: 12px; color: var(--ink-on-dark-faint); }
.footer-col a:hover{ color: var(--lime); }
.footer-bottom{ display:flex; align-items:center; justify-content:space-between; padding-top: 28px; flex-wrap: wrap; gap: 12px; }
.footer-bottom .legal-links{ display:flex; gap: 22px; font-family: var(--font-mono); font-size: 12px; color: var(--ink-on-dark-faint); }
.footer-bottom .legal-links a:hover{ color: var(--lime); }
.footer-copy{ font-family: var(--font-mono); font-size: 12px; color: var(--ink-on-dark-faint); }

/* ---------- article / ressources ---------- */
.article-header{ padding: 56px; border-bottom: 1px solid var(--border); max-width: 880px; }
.article-header h1{ font-size: 42px; line-height: 1.1; letter-spacing: -0.02em; padding-top: 14px; }
.article-header .lede{ font-size: 18px; color: var(--ink-muted); padding-top: 16px; line-height: 1.6; }
.article-body{ padding: 8px 56px 64px; max-width: 780px; display:flex; flex-direction:column; gap: 22px; }
.article-body h2{ font-size: 26px; padding-top: 18px; }
.article-body h3{ font-size: 20px; padding-top: 6px; }
.article-body p{ font-size: 17px; line-height: 1.7; color: var(--ink-soft); }
.article-body ul{ display:flex; flex-direction:column; gap:10px; padding-left: 4px; }
.article-body ul li{ font-size: 16.5px; line-height: 1.65; color: var(--ink-soft); padding-left: 22px; position: relative; }
.article-body ul li::before{ content:"•"; position:absolute; left:0; color: var(--lime-dark); font-family: var(--font-mono); }
.article-body blockquote{
  border-left: 3px solid var(--lime);
  padding: 4px 0 4px 22px;
  font-family: var(--font-display);
  font-size: 21px;
  line-height: 1.5;
  color: var(--ink);
}
.callout{ background: var(--bg-alt); border: 1px solid var(--border); border-radius: var(--radius-m); padding: 24px 28px; display:flex; flex-direction:column; gap:8px; }
.callout .eyebrow{ margin-bottom: 4px; }
.source-note{ font-family: var(--font-mono); font-size: 12px; color: var(--ink-faint); }

.card-grid{ display:grid; grid-template-columns: repeat(2,1fr); gap: 1px; background: var(--border); border: 1px solid var(--border); }
.resource-card{ background: var(--bg); padding: 32px; display:flex; flex-direction:column; gap: 14px; }
.resource-card .tag{ font-family: var(--font-mono); font-size: 11px; letter-spacing:.08em; text-transform:uppercase; color: var(--lime-dark); }
.resource-card h3{ font-size: 22px; line-height:1.25; }
.resource-card p{ font-size: 15px; line-height:1.55; color: var(--ink-muted); }
.resource-card .read{ font-family: var(--font-display); font-size: 14px; font-weight:600; margin-top: auto; padding-top: 10px; border-top: 1px dashed var(--border-soft); }

/* ---------- client wall ---------- */
.client-grid{ display:grid; grid-template-columns: repeat(3,1fr); gap: 1px; background: var(--border); border: 1px solid var(--border); }
.client-card{ background: var(--bg); padding: 26px 28px; display:flex; flex-direction:column; gap:7px; }
.client-card .name{ font-family: var(--font-display); font-size: 18px; font-weight: 600; color: var(--ink); line-height:1.3; }
.client-card .sector{ font-family: var(--font-mono); font-size: 11.5px; letter-spacing:.06em; text-transform:uppercase; color: var(--ink-faint); }

/* ---------- testimonials ---------- */
.testimonial-grid{ display:grid; grid-template-columns: repeat(2,1fr); gap: 40px 56px; }
.testimonial-card{ display:flex; flex-direction:column; gap:16px; justify-content:space-between; }
.testimonial-card blockquote{ border-left: 3px solid var(--lime); padding: 2px 0 2px 22px; font-family: var(--font-display); font-size: 18.5px; line-height: 1.5; color: var(--ink); }
.testimonial-card .attribution{ padding-left: 25px; display:flex; flex-direction:column; gap:2px; }
.testimonial-card .attribution .name{ font-family: var(--font-display); font-size: 14.5px; font-weight: 600; color: var(--ink); }
.testimonial-card .attribution .sector{ font-family: var(--font-mono); font-size: 11.5px; text-transform: uppercase; letter-spacing:.06em; color: var(--ink-faint); }

/* ---------- faq ---------- */
.faq-item{ padding: 26px 0; border-top: 1px solid var(--border-soft); }
.faq-item:last-child{ border-bottom: 1px solid var(--border-soft); }
.faq-item h4{ font-size: 18px; margin-bottom: 10px; }
.faq-item p{ font-size: 15.5px; line-height: 1.6; color: var(--ink-muted); }

/* ---------- team / values ---------- */
.value-list{ display:flex; flex-direction:column; }
.value-item{ display:grid; grid-template-columns: 60px 1fr; gap: 24px; padding: 28px 0; border-top: 1px solid var(--border-soft); }
.value-item:last-child{ border-bottom: 1px solid var(--border-soft); }
.value-item .num{ font-family: var(--font-mono); font-size: 15px; color: var(--lime-dark); }
.value-item h4{ font-size: 19px; margin-bottom: 8px; }
.value-item p{ font-size: 15.5px; line-height: 1.6; color: var(--ink-muted); }
.value-item .proof{ padding: 0; border: none; margin-top: 10px; font-family: var(--font-mono); font-size: 12.5px; color: var(--lime-dark); }

.audience-grid{ display:grid; grid-template-columns: repeat(3,1fr); gap: 1px; background: var(--border); border: 1px solid var(--border); }
.audience-card{ background: var(--bg); padding: 30px; display:flex; flex-direction:column; gap: 12px; }
.audience-card .tag{ font-family: var(--font-mono); font-size: 11px; text-transform:uppercase; letter-spacing:.08em; color: var(--ink-faint); }
.audience-card h3{ font-size: 20px; }
.audience-card p{ font-size: 14.5px; line-height:1.55; color: var(--ink-muted); }

/* ---------- badges / tags ---------- */
.tag-row{ display:flex; gap:10px; flex-wrap:wrap; }
.tag-pill{ font-family: var(--font-mono); font-size:12px; padding: 6px 12px; border:1px solid var(--border-soft); border-radius: 20px; color: var(--ink-faint); }

/* ---------- stat row ---------- */
.stat-row{ display:grid; grid-template-columns: repeat(4,1fr); gap: 1px; background: var(--border); border-top:1px solid var(--border); border-bottom:1px solid var(--border); }
.stat{ background: var(--bg); padding: 30px 28px; display:flex; flex-direction:column; gap:8px; }
.stat:first-child{ padding-left: var(--edge); }
.stat:last-child{ padding-right: var(--edge); }
.stat .num{ font-family: var(--font-display); font-size: 36px; letter-spacing:-0.02em; color: var(--ink); }
.stat .label{ font-size: 13.5px; line-height:1.5; color: var(--ink-muted); }
.stat .src{ font-family: var(--font-mono); font-size: 11px; color: var(--ink-faint); }

/* ---------- utility ---------- */
.center{ text-align: center; }
.mt-0{ margin-top:0; }
.divider{ border-top: 1px solid var(--border); }
.small{ font-size: 13px; }

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width: 1080px){
  .hero{ grid-template-columns: 1fr; }
  .hero-copy{ border-right: none; border-bottom: 1px solid var(--border); }
  .pillars-grid{ grid-template-columns: repeat(2,1fr); }
  .pillar:nth-child(2){ border-right: none; padding-right: var(--edge); }
  .pillar:nth-child(3){ padding-left: var(--edge); }
  .pillar{ border-bottom: 1px solid var(--border); }
  .benefit-grid, .benefit-grid.cols-4{ grid-template-columns: repeat(2,1fr); }
  .benefit:nth-child(2n){ border-right: none; }
  .model-grid{ grid-template-columns: 140px repeat(var(--cols,2), 1fr); }
  .proof-grid{ grid-template-columns: 1fr; }
  .grid-2{ grid-template-columns: 1fr; gap: 32px; }
  .grid-3{ grid-template-columns: 1fr 1fr; }
  .grid-4{ grid-template-columns: 1fr 1fr; }
  .pricing-grid{ grid-template-columns: 1fr; }
  .pricing-grid.cols-4{ grid-template-columns: repeat(2, 1fr); }
  .cta-band{ grid-template-columns: 1fr; }
  .stage-row{ grid-template-columns: 1fr; gap: 10px; }
  .stage-row .stage-price{ text-align: left; }
  .step{ grid-template-columns: 1fr; gap: 10px; }
  .step .meta{ text-align: left; }
  .audience-grid{ grid-template-columns: 1fr; }
  .card-grid{ grid-template-columns: 1fr; }
  .client-grid{ grid-template-columns: repeat(2,1fr); }
  .testimonial-grid{ grid-template-columns: 1fr; }
  .stat-row{ grid-template-columns: 1fr 1fr; }
  .stat:nth-child(2){ padding-right: var(--edge); }
  .stat:nth-child(3){ padding-left: var(--edge); }
  .section-head h2.title-w490{ min-width: 0; }
}

@media (max-width: 760px){
  :root{ --edge: 24px; }
  .wrap, .nav, .page-header, .model-table, .alternatives, .proof, .section, .cta-band, .footer, .article-header, .article-body{
    padding-left: 24px; padding-right: 24px;
  }
  .nav-links{ display: none; }
  .nav-toggle{ display: block; }
  .nav .btn{ display: none; }
  .nav-item-lang{ display: none !important; }
  .hero-copy, .hero-visual{ padding: 48px 24px; }
  .hero-copy h1{ font-size: 38px; }
  .page-header h1{ font-size: 32px; }
  .pillars-grid{ grid-template-columns: 1fr; }
  .pillar{ border-right: none; padding-left: var(--edge); padding-right: var(--edge); }
  .benefit-grid, .benefit-grid.cols-4{ grid-template-columns: 1fr; }
  .benefit{ border-right: none; }
  .article-banner{ margin: 0 24px 8px; }
  .model-grid{ grid-template-columns: 1fr; }
  .model-grid > .row-label{ padding-top: 20px; border-bottom: none; }
  .model-grid > .cell{ border-left: none; }
  .grid-3, .grid-4{ grid-template-columns: 1fr; }
  .client-grid{ grid-template-columns: 1fr; }
  .cta-band h2{ font-size: 30px; }
  .footer-top{ flex-direction: column; }
  .stat-row{ grid-template-columns: 1fr; }
  .stat{ padding-left: var(--edge); padding-right: var(--edge); }
  .field-row{ flex-direction: column; }
  .pricing-grid.cols-4{ grid-template-columns: 1fr; }
}

/* ---------- mobile nav panel ---------- */
.mobile-nav{
  display: none;
  flex-direction: column;
  background: var(--bg);
  border-bottom: 1px solid var(--border);
  padding: 8px 24px 20px;
}
.mobile-nav.open{ display: flex; }
.mobile-nav a{
  font-family: var(--font-display);
  font-size: 17px;
  padding: 14px 0;
  border-bottom: 1px solid var(--border);
  color: var(--ink-soft);
}
.mobile-nav a.btn{ margin-top: 14px; border-bottom: none; padding: 14px 24px; }