/* ============================================================
   JC DATAGIT — Design system "Institutionnel minéral"
   Tokens définis au §6 du cahier des charges.
   ============================================================ */

:root{
  --noir:#0E100F;
  --charbon:#171916;
  --charbon-2:#1D201C;
  --ivoire:#F2EEE5;
  --ivoire-dim: rgba(242,238,229,0.72);
  --pierre:#B9B1A4;
  --or:#B89A59;
  --or-soft: rgba(184,154,89,0.14);
  --or-line: rgba(184,154,89,0.28);

  --serif: 'Cormorant Garamond', Georgia, serif;
  --sans: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  --maxw: 1180px;
  --maxw-text: 760px;
  --header-h: 84px;

  --ease: cubic-bezier(.4,0,.2,1);
}

*, *::before, *::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; scroll-padding-top:calc(var(--header-h) + 16px); }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *{ animation-duration:0.001ms !important; transition-duration:0.001ms !important; }
}

body{
  margin:0;
  background:var(--noir);
  color:var(--ivoire);
  font-family:var(--sans);
  font-size:16px;
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
}

img, svg{ max-width:100%; display:block; }

a{ color:inherit; text-decoration:none; }

a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible{
  outline:2px solid var(--or);
  outline-offset:3px;
  border-radius:1px;
}

.skip-link{
  position:absolute; left:-9999px; top:0; z-index:1000;
  background:var(--or); color:var(--noir); padding:12px 20px; font-weight:700;
}
.skip-link:focus{ left:16px; top:16px; }

/* ---------------- Layout helpers ---------------- */
.wrap{ max-width:var(--maxw); margin:0 auto; padding:0 clamp(20px,4vw,56px); }
.section{ padding:96px 0; position:relative; }
.section-tight{ padding:64px 0; }
.section-border-top{ border-top:1px solid rgba(184,154,89,0.16); }

.eyebrow{
  font-size:12px; letter-spacing:0.16em; text-transform:uppercase;
  color:var(--or); font-weight:700; margin:0 0 18px;
  display:flex; align-items:center; gap:12px;
}
.eyebrow::before{ content:""; width:32px; height:1px; background:var(--or); flex:none; }

h1,h2,h3{ font-family:var(--serif); font-weight:500; color:var(--ivoire); margin:0; }
h1{ font-size:clamp(36px,5.5vw,56px); line-height:1.1; }
h2{ font-size:clamp(28px,4vw,38px); line-height:1.18; }
h3{ font-size:22px; line-height:1.3; }
p{ margin:0 0 16px; }
.lede{ font-size:19px; color:var(--pierre); max-width:640px; }
.muted{ color:var(--pierre); }

/* ---------------- Buttons ---------------- */
.btn{
  display:inline-flex; align-items:center; gap:10px;
  font-family:var(--sans); font-size:14px; font-weight:700;
  letter-spacing:0.03em; text-transform:uppercase;
  padding:15px 26px;
  border-radius:2px;
  border:1px solid transparent;
  cursor:pointer;
  transition:background 200ms var(--ease), border-color 200ms var(--ease), color 200ms var(--ease), transform 200ms var(--ease);
}
.btn-primary{ background:var(--or); color:var(--noir); }
.btn-primary:hover{ background:#c7ab6a; transform:translateY(-1px); }
.btn-ghost{ background:transparent; color:var(--ivoire); border-color:var(--or-line); }
.btn-ghost:hover{ border-color:var(--or); background:var(--or-soft); }
.btn-arrow{ transition:transform 200ms var(--ease); }
.btn:hover .btn-arrow{ transform:translateX(3px); }

/* ---------------- Header / nav ---------------- */
.site-header{
  position:fixed; top:0; left:0; right:0; z-index:100;
  height:var(--header-h);
  display:flex; align-items:center; justify-content:space-between;
  padding:0 clamp(20px,4vw,56px);
  background:rgba(14,16,15,0.7);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  border-bottom:1px solid rgba(184,154,89,0.16);
}
.monogram{
  font-family:var(--serif); font-size:22px; letter-spacing:0.06em;
  color:var(--ivoire); display:flex; align-items:baseline; gap:7px; flex:none;
}
.monogram em{ color:var(--or); font-style:italic; }

.main-nav{ display:flex; align-items:center; gap:clamp(18px,2.4vw,36px); }
.main-nav a{
  font-size:14px; font-weight:600; color:var(--pierre);
  position:relative; padding:6px 0;
  transition:color 200ms var(--ease);
}
.main-nav a:hover, .main-nav a[aria-current="page"]{ color:var(--ivoire); }
.main-nav a[aria-current="page"]::after{
  content:""; position:absolute; left:0; right:0; bottom:-2px; height:1px; background:var(--or);
}
.nav-cta{
  background:var(--or); color:var(--noir) !important; font-weight:700 !important;
  padding:10px 18px; border-radius:2px; text-transform:uppercase; font-size:12.5px !important;
  letter-spacing:0.04em;
}
.nav-cta:hover{ background:#c7ab6a; }

.nav-toggle{
  display:none; background:none; border:1px solid var(--or-line); color:var(--ivoire);
  width:42px; height:42px; border-radius:2px; cursor:pointer;
  align-items:center; justify-content:center;
}

@media (max-width: 880px){
  .main-nav{
    position:fixed; inset:var(--header-h) 0 0 0;
    background:var(--noir);
    flex-direction:column; align-items:flex-start; justify-content:flex-start;
    gap:0; padding:24px clamp(20px,4vw,56px);
    transform:translateY(-8px); opacity:0; pointer-events:none;
    transition:opacity 220ms var(--ease), transform 220ms var(--ease);
  }
  .main-nav.open{ opacity:1; pointer-events:auto; transform:translateY(0); }
  .main-nav a{ width:100%; padding:16px 0; border-bottom:1px solid rgba(185,177,164,0.12); font-size:17px; }
  .nav-cta{ margin-top:20px; text-align:center; width:100%; justify-content:center; display:flex; }
  .nav-toggle{ display:flex; }
}

/* ---------------- Hero mineral composition (signature element) ---------------- */
.mineral{
  position:absolute; inset:0; z-index:0; overflow:hidden; pointer-events:none;
}
.mineral svg{ width:100%; height:100%; }
.mineral-shard{
  transition:transform 900ms var(--ease), opacity 900ms var(--ease);
}
.hero{
  position:relative;
  padding:calc(var(--header-h) + 96px) 0 88px;
  overflow:hidden;
}
.hero-inner{ position:relative; z-index:1; }
.hero h1 em{ color:var(--or); font-style:italic; }
.hero-ctas{ display:flex; flex-wrap:wrap; gap:16px; margin:36px 0 56px; }
.proof-bar{
  display:flex; flex-wrap:wrap; gap:0;
  border-top:1px solid var(--or-line);
  padding-top:28px;
}
.proof-item{
  flex:1 1 180px; padding-right:24px; margin-right:24px;
  border-right:1px solid rgba(185,177,164,0.15);
}
.proof-item:last-child{ border-right:none; }
.proof-item .num{ font-family:var(--serif); font-size:28px; color:var(--or); display:block; margin-bottom:4px; }
.proof-item .label{ font-size:13px; color:var(--pierre); }

/* Page header (non-home hero, smaller) */
.page-hero{ padding:calc(var(--header-h) + 72px) 0 56px; border-bottom:1px solid rgba(184,154,89,0.16); }

/* ---------------- Cards grid ---------------- */
.grid{ display:grid; gap:1px; background:rgba(184,154,89,0.16); border:1px solid rgba(184,154,89,0.16); }
.grid-2{ grid-template-columns:repeat(2,1fr); }
.grid-3{ grid-template-columns:repeat(3,1fr); }
@media (max-width:900px){ .grid-3{ grid-template-columns:1fr; } }
.grid-4{ grid-template-columns:repeat(4,1fr); }
@media (max-width:900px){ .grid-4{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:560px){ .grid-2, .grid-4{ grid-template-columns:1fr; } }

.card{
  background:var(--charbon);
  padding:36px 32px;
  transition:background 220ms var(--ease);
}
.card:hover{ background:var(--charbon-2); }
.card .icon{ color:var(--or); margin-bottom:20px; width:30px; height:30px; }
.card h3{ margin-bottom:12px; }
.card p{ color:var(--pierre); font-size:15px; margin-bottom:14px; }
.tags{ display:flex; flex-wrap:wrap; gap:8px; margin-top:16px; }
.tag{
  font-size:11.5px; letter-spacing:0.03em; text-transform:uppercase;
  color:var(--or); border:1px solid var(--or-line); padding:5px 10px; border-radius:2px;
}

/* ---------------- Numbered process (Méthode) ---------------- */
.process{ counter-reset:step; }
.process-step{
  display:grid; grid-template-columns:90px 1fr; gap:28px;
  padding:36px 0; border-top:1px solid rgba(184,154,89,0.16);
}
.process-step:last-child{ border-bottom:1px solid rgba(184,154,89,0.16); }
.process-num{ font-family:var(--serif); font-size:44px; color:var(--or); line-height:1; }
@media (max-width:640px){
  .process-step{ grid-template-columns:1fr; gap:10px; }
}

/* ---------------- Two-column utility ---------------- */
.two-col{ display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:start; }
@media (max-width:720px){ .two-col{ grid-template-columns:1fr; gap:24px; } }

/* ---------------- Pillars (Interventions) ---------------- */
.pillars{ display:flex; flex-direction:column; gap:0; }
.pillar{
  display:grid; grid-template-columns:220px 1fr; gap:32px;
  padding:32px 0; border-top:1px solid rgba(184,154,89,0.16);
}
.pillar:last-child{ border-bottom:1px solid rgba(184,154,89,0.16); }
.pillar-label{ font-family:var(--serif); font-style:italic; color:var(--or); font-size:20px; }
@media (max-width:720px){ .pillar{ grid-template-columns:1fr; gap:10px; } }

/* ---------------- CTA band ---------------- */
.cta-band{
  background:var(--charbon);
  border-top:1px solid var(--or-line);
  border-bottom:1px solid var(--or-line);
  padding:72px 0;
  text-align:center;
}
.cta-band h2{ margin-bottom:20px; }
.cta-band .lede{ margin:0 auto 32px; }
.cta-band .hero-ctas{ justify-content:center; margin:0; }

/* ---------------- Forms (Contact) ---------------- */
.form-grid{ display:grid; grid-template-columns:1fr 1fr; gap:22px; }
@media (max-width:640px){ .form-grid{ grid-template-columns:1fr; } }
.field{ display:flex; flex-direction:column; gap:8px; }
.field.full{ grid-column:1 / -1; }
.field label{ font-size:13px; font-weight:600; color:var(--pierre); }
.field .req{ color:var(--or); }
.field input, .field select, .field textarea{
  background:var(--charbon);
  border:1px solid rgba(184,154,89,0.22);
  color:var(--ivoire);
  font-family:var(--sans); font-size:15px;
  padding:13px 14px; border-radius:2px;
  transition:border-color 180ms var(--ease);
}
.field input:focus, .field select:focus, .field textarea:focus{ border-color:var(--or); }
.field textarea{ resize:vertical; min-height:120px; }
.consent{ display:flex; gap:10px; align-items:flex-start; font-size:13.5px; color:var(--pierre); }
.consent input{ margin-top:3px; }
.form-note{ font-size:13px; color:var(--pierre); margin-top:18px; }
.form-status{
  display:none; margin-top:20px; padding:16px 18px;
  border:1px solid var(--or-line); background:var(--or-soft); color:var(--ivoire); font-size:14px;
}
.form-status.visible{ display:block; }

/* ---------------- Footer ---------------- */
.site-footer{
  border-top:1px solid rgba(184,154,89,0.2);
  padding:64px 0 40px;
}
.footer-grid{
  display:grid; grid-template-columns:1.3fr 1fr 1fr; gap:40px;
  margin-bottom:48px;
}
@media (max-width:720px){ .footer-grid{ grid-template-columns:1fr; gap:32px; } }
.footer-mono{ font-family:var(--serif); font-size:24px; margin-bottom:14px; }
.footer-col h4{
  font-size:12px; text-transform:uppercase; letter-spacing:0.08em; color:var(--or);
  margin-bottom:16px; font-weight:700;
}
.footer-col a, .footer-col p{ display:block; color:var(--pierre); font-size:14.5px; margin-bottom:10px; }
.footer-col a:hover{ color:var(--ivoire); }
.footer-bottom{
  display:flex; flex-wrap:wrap; justify-content:space-between; gap:12px;
  border-top:1px solid rgba(185,177,164,0.12); padding-top:24px;
  font-size:13px; color:var(--pierre);
}
.footer-bottom a{ color:var(--pierre); }
.footer-bottom a:hover{ color:var(--or); }
.legal-links{ display:flex; gap:20px; flex-wrap:wrap; }

/* ---------------- Legal pages ---------------- */
.legal-body h2{ font-size:24px; margin:44px 0 14px; }
.legal-body h2:first-child{ margin-top:0; }
.legal-body p, .legal-body li{ color:var(--ivoire-dim); font-size:15.5px; }
.legal-body ul{ padding-left:20px; }
.legal-note{
  border:1px solid var(--or-line); background:var(--or-soft);
  padding:18px 20px; font-size:14px; color:var(--pierre); margin-bottom:40px;
}

/* ---------------- 404 ---------------- */
.error-page{
  min-height:100vh; display:flex; flex-direction:column; align-items:flex-start; justify-content:center;
  padding-top:var(--header-h);
}
.error-code{ font-family:var(--serif); font-size:clamp(80px,14vw,160px); color:var(--or); line-height:1; margin-bottom:8px; }

/* ---------------- Cookie banner ---------------- */
#cookie-banner{
  position:fixed; left:20px; right:20px; bottom:20px; z-index:200;
  max-width:560px; margin:0 auto;
  background:var(--charbon); border:1px solid var(--or-line);
  padding:24px; box-shadow:0 12px 40px rgba(0,0,0,0.4);
  transform:translateY(140%); opacity:0;
  transition:transform 400ms var(--ease), opacity 400ms var(--ease);
}
#cookie-banner.visible{ transform:translateY(0); opacity:1; }
#cookie-banner p{ font-size:13.5px; color:var(--pierre); margin-bottom:16px; }
#cookie-banner a{ color:var(--or); text-decoration:underline; }
.cookie-actions{ display:flex; gap:12px; flex-wrap:wrap; }
.cookie-actions .btn{ padding:11px 18px; font-size:12.5px; }

/* Utility */
.center{ text-align:center; }
.mt-0{ margin-top:0; }