/* =========================================================
   Reinhard Couverture — Design System (thème clair)
   Artisan chaleureux : blanc cassé, vert sauge pastel,
   pointe de jaune doré
   ========================================================= */

@import url('https://fonts.googleapis.com/css2?family=Archivo:wght@500;600;700;800;900&family=Hanken+Grotesk:wght@400;500;600;700&display=swap');

:root{
  /* surfaces — warm off-white */
  --bg:        #f7f3ea;   /* page background */
  --surface:   #fffdf8;   /* cards */
  --surface-2: #efe9dc;   /* alt sections (warm beige) */
  --green-soft:#e6eed9;   /* pastel green tint */

  /* type — warm near-black */
  --ink:       #282621;
  --ink-soft:  #5b5648;
  --ink-faint: #8d8775;

  /* primary — sage / vert pastel */
  --green:     #6b8e57;
  --green-2:   #7da067;
  --green-deep:#4f6b3f;

  /* secondary accent — jaune doré (touches only) */
  --gold:      #d8a93f;

  --line:       rgba(40,38,33,.12);
  --line-strong:rgba(40,38,33,.22);

  --maxw: 1200px;
  --gutter: clamp(20px, 5vw, 64px);

  --font-display: 'Archivo', system-ui, sans-serif;
  --font-body: 'Hanken Grotesk', system-ui, sans-serif;

  --r: 6px;
  --shadow: 0 18px 40px -26px rgba(40,38,33,.5);
}

*{ box-sizing: border-box; }
html{ scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body{
  margin:0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 18px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img{ max-width:100%; height:auto; display:block; }
a{ color: inherit; text-decoration: none; }
::selection{ background: var(--green); color:#fff; }

/* ---------- layout ---------- */
.wrap{ max-width: var(--maxw); margin:0 auto; padding-inline: var(--gutter); }
section{ position: relative; }
.section{ padding-block: clamp(64px, 9vw, 132px); }

/* ---------- type ---------- */
h1,h2,h3,h4{ font-family: var(--font-display); margin:0; line-height:1.02; letter-spacing:-.02em; font-weight:800; color:var(--ink); }
.eyebrow{
  font-family: var(--font-display);
  font-weight:700; font-size:.78rem; letter-spacing:.22em; text-transform:uppercase;
  color: var(--green-deep);
  display:inline-flex; align-items:center; gap:.7em;
}
.eyebrow::before{ content:""; width:26px; height:3px; background: var(--green); display:inline-block; transform: skewX(-24deg); }
.h-xl{ font-size: clamp(2.6rem, 7vw, 5.4rem); font-weight:900; text-transform:uppercase; }
.h-lg{ font-size: clamp(2rem, 4.4vw, 3.5rem); font-weight:800; }
.h-md{ font-size: clamp(1.5rem, 2.6vw, 2.1rem); font-weight:800; }
.lead{ font-size: clamp(1.08rem,1.4vw,1.28rem); color: var(--ink-soft); line-height:1.65; }
.muted{ color: var(--ink-soft); }
.faint{ color: var(--ink-faint); }
p{ margin:0 0 1.1em; }
.accent{ color: var(--green-deep); }

/* ---------- buttons ---------- */
.btn{
  --bg: var(--green);
  position:relative; display:inline-flex; align-items:center; gap:.65em;
  font-family: var(--font-display); font-weight:700; font-size:.98rem; letter-spacing:.01em;
  padding: 1.02em 1.6em; border:0; border-radius: var(--r); cursor:pointer;
  background: var(--bg); color:#fff; overflow:hidden; transition: transform .18s ease, box-shadow .25s ease;
  box-shadow: 0 1px 0 rgba(255,255,255,.2) inset, 0 14px 26px -14px rgba(79,107,63,.7);
}
.btn::after{ /* diagonal sheen */
  content:""; position:absolute; top:-30%; left:-20%; width:30%; height:160%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.32), transparent);
  transform: skewX(-22deg) translateX(-260%); transition: transform .6s ease;
}
.btn:hover{ transform: translateY(-2px); box-shadow: 0 1px 0 rgba(255,255,255,.2) inset, 0 18px 30px -14px rgba(79,107,63,.75); }
.btn:hover::after{ transform: skewX(-22deg) translateX(560%); }
.btn--ghost{
  background: transparent; color: var(--ink);
  box-shadow: inset 0 0 0 1.5px var(--line-strong);
}
.btn--ghost:hover{ box-shadow: inset 0 0 0 1.5px var(--green); color:var(--green-deep); }
.btn--lg{ padding: 1.15em 1.9em; font-size:1.05rem; }
.btn--block{ width:100%; justify-content:center; }
.btn svg{ width:1.05em; height:1.05em; }

/* ---------- header ---------- */
.site-head{
  position: sticky; top:0; z-index:60;
  background: color-mix(in srgb, var(--bg) 85%, transparent);
  backdrop-filter: blur(14px) saturate(1.2);
  border-bottom: 1px solid var(--line);
}
.site-head .wrap{ display:flex; align-items:center; gap:24px; height:74px; }
.brand{ display:flex; align-items:center; gap:13px; margin-right:auto; }
.brand img{ height:40px; width:auto; }
.brand b{ font-family:var(--font-display); font-weight:800; font-size:1.04rem; letter-spacing:.02em; line-height:1; color:var(--ink); }
.brand span{ display:block; font-size:.66rem; letter-spacing:.24em; text-transform:uppercase; color:var(--green-deep); font-weight:700; font-family:var(--font-display); margin-top:3px; }
.brand b, .brand span{ white-space:nowrap; }
.nav{ display:flex; gap:6px; align-items:center; }
.nav a{
  font-family:var(--font-display); font-weight:600; font-size:.92rem; color:var(--ink-soft);
  padding:.5em .85em; border-radius:var(--r); transition:color .18s, background .18s;
}
.nav a:hover{ color:var(--ink); }
.nav a.active{ color:var(--ink); }
.nav a.active::after{ content:""; display:block; height:3px; background:var(--green); margin-top:5px; transform:skewX(-24deg); }
.head-cta{ display:flex; align-items:center; gap:22px; margin-left:26px; }
.head-cta .btn{ white-space:nowrap; padding:.62em 1.05em; font-size:.86rem; }
.head-tel{ display:flex; align-items:center; gap:9px; font-family:var(--font-display); font-weight:700; color:var(--ink); white-space:nowrap; }
.nav a{ white-space:nowrap; }
@media (max-width: 1040px){ .site-head .head-tel{ display:none; } }
.head-tel svg{ width:18px;height:18px;color:var(--green-deep); }
.burger{ display:none; background:none;border:0;color:var(--ink);cursor:pointer;padding:8px;margin-left:auto; }
.burger svg{ width:26px;height:26px; }

/* ---------- diagonal slash motif ---------- */
.slash-rule{ height:3px; background:var(--green); width:54px; transform:skewX(-24deg); transform-origin:left; }

/* ---------- image placeholders ---------- */
.ph{
  position:relative; overflow:hidden; border-radius:var(--r);
  background:
    repeating-linear-gradient(135deg, #ece5d6 0 14px, #f3ede1 14px 28px);
  border:1px solid var(--line);
  display:flex; align-items:center; justify-content:center;
  color: var(--ink-faint);
}
.ph::after{
  content: attr(data-label);
  font-family: ui-monospace, 'SF Mono', Menlo, monospace;
  font-size:.74rem; letter-spacing:.04em; text-transform:uppercase;
  padding:.5em .8em; border:1px dashed var(--line-strong); border-radius:4px;
  background: rgba(255,253,248,.7);
}

/* ---------- cards ---------- */
.card{
  background: var(--surface); border:1px solid var(--line); border-radius:var(--r);
  padding: clamp(22px,2.4vw,32px);
  box-shadow: var(--shadow);
  transition: border-color .22s ease, transform .22s ease, box-shadow .22s ease;
}
.card:hover{ border-color: var(--line-strong); transform: translateY(-3px); box-shadow: 0 24px 50px -28px rgba(40,38,33,.55); }

/* service card */
.svc{ position:relative; }
.svc .ico{
  width:50px;height:50px;border-radius:var(--r);
  display:flex;align-items:center;justify-content:center;
  background: var(--green-soft); color: var(--green-deep); margin-bottom:20px;
  border:1px solid var(--line);
}
.svc .ico svg{ width:24px;height:24px; }
.svc:hover .ico{ background: var(--green); color:#fff; border-color:transparent; }
.svc h3{ font-size:1.22rem; margin-bottom:8px; }
.svc p{ color:var(--ink-soft); font-size:.98rem; margin:0; line-height:1.6; }

/* ---------- footer ---------- */
.site-foot{ background: var(--surface-2); border-top:1px solid var(--line); padding-block: 64px 32px; }
.foot-grid{ display:grid; grid-template-columns: 1.4fr 1fr 1fr 1.1fr; gap:40px; }
.site-foot h4{ font-size:.82rem; letter-spacing:.18em; text-transform:uppercase; color:var(--ink); margin-bottom:18px; font-weight:700;}
.site-foot a{ color:var(--ink-soft); display:block; padding:5px 0; font-size:.96rem; transition:color .18s; }
.site-foot a:hover{ color:var(--green-deep); }
.foot-brand img{ height:48px; margin-bottom:18px; }
.foot-bottom{ border-top:1px solid var(--line); margin-top:46px; padding-top:24px; display:flex; flex-wrap:wrap; gap:14px 28px; justify-content:space-between; color:var(--ink-faint); font-size:.84rem; }

/* ---------- mobile sticky call ---------- */
.mobile-bar{ display:none; }

/* ---------- generic helpers ---------- */
.grid{ display:grid; gap:24px; }
.tag{
  display:inline-flex; align-items:center; gap:.5em; font-family:var(--font-display); font-weight:600;
  font-size:.82rem; color:var(--green-deep); border:1px solid var(--line); border-radius:100px;
  padding:.5em .95em; background:var(--green-soft);
}
.reveal{ opacity:0; transform: translateY(22px); transition: opacity .7s ease, transform .7s ease; }
.reveal.in{ opacity:1; transform:none; }

/* ---------- responsive ---------- */
@media (max-width: 920px){
  .foot-grid{ grid-template-columns: 1fr 1fr; gap:32px; }
}
@media (max-width: 900px){
  .nav, .head-tel{ display:none; }
  .burger{ display:block; }
  .head-cta .btn{ display:none; }
}
@media (max-width: 780px){
  body{ font-size:17px; }
  .nav, .head-tel{ display:none; }
  .burger{ display:block; }
  .head-cta .btn{ display:none; }
  .mobile-bar{
    display:grid; grid-template-columns:1fr 1fr; gap:1px;
    position:fixed; bottom:0; left:0; right:0; z-index:70;
    background: var(--line); border-top:1px solid var(--line);
  }
  .mobile-bar a{
    display:flex;align-items:center;justify-content:center;gap:9px;
    padding:15px; font-family:var(--font-display); font-weight:700; font-size:.98rem;
    background: var(--surface); color:var(--ink);
  }
  .mobile-bar a.call{ background: var(--green); color:#fff; }
  .mobile-bar svg{ width:18px;height:18px; }
  body{ padding-bottom: 56px; }
  .foot-grid{ grid-template-columns:1fr; }
}

/* mobile nav drawer */
.drawer{
  position:fixed; inset:0; z-index:80; background: var(--bg);
  display:flex; flex-direction:column; padding:24px var(--gutter);
  transform: translateX(100%); transition: transform .3s ease; visibility:hidden;
}
.drawer.open{ transform:none; visibility:visible; }
.drawer .drawer-top{ display:flex; align-items:center; justify-content:space-between; height:50px; margin-bottom:30px; }
.drawer .drawer-top img{ height:38px; }
.drawer button{ background:none;border:0;color:var(--ink);cursor:pointer; }
.drawer button svg{ width:30px;height:30px; }
.drawer a{ font-family:var(--font-display); font-weight:700; font-size:1.7rem; padding:14px 0; border-bottom:1px solid var(--line); color:var(--ink); }
.drawer a:last-of-type{ border-bottom:0; }
.drawer .btn{ margin-top:24px; color:#fff; }