/* =========================================================================
   PACARBRES — Système de design
   Arboriste grimpeur · intervention raisonnée
   Palette : papier chaud · vert forêt · brun bois · sable
   Typo : Bricolage Grotesque (titres) + Hanken Grotesk (texte)
   ========================================================================= */

@import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,400;12..96,500;12..96,600;12..96,700&family=Hanken+Grotesk:wght@400;500;600;700&display=swap');

:root{
  /* — Couleurs — */
  --paper:        #f5f3ee;   /* fond principal, papier chaud */
  --paper-2:      #efeae0;   /* fond de section alterné */
  --paper-3:      #e9e3d6;   /* cartes / surfaces */
  --forest:       #2f4a32;   /* vert forêt — primaire */
  --forest-deep:  #21351f;   /* vert très profond — fonds sombres */
  --forest-soft:  #5e7d52;   /* vert clair, accents */
  --bark:         #7a6c53;   /* brun bois — secondaire */
  --bark-soft:    #a8946f;
  --sand:         #d8d2c4;   /* sable — neutre clair */
  --ink:          #1c241b;   /* texte foncé, vert-noir */
  --ink-soft:     #4c5448;   /* texte secondaire */
  --line:         #ddd6c8;   /* filets / bordures */
  --line-dark:    #3a4a36;

  /* — Typo — */
  --font-display: "Bricolage Grotesque", system-ui, sans-serif;
  --font-body:    "Hanken Grotesk", system-ui, sans-serif;

  /* — Mesures — */
  --maxw: 1280px;
  --gutter: clamp(20px, 5vw, 64px);
  --radius: 4px;
  --radius-lg: 10px;

  /* — Transitions — */
  --ease: cubic-bezier(.22,.61,.36,1);
}

/* ---------------------------------------------------------------- Reset */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; scroll-behavior:smooth; }
body{
  margin:0;
  font-family:var(--font-body);
  font-size:18px;
  line-height:1.65;
  color:var(--ink);
  background:var(--paper);
  font-weight:400;
}
img{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
button{ font-family:inherit; cursor:pointer; }
h1,h2,h3,h4{ font-family:var(--font-display); font-weight:600; line-height:1.04; margin:0; letter-spacing:-.015em; color:var(--ink); }
p{ margin:0; }
::selection{ background:var(--forest); color:var(--paper); }

/* --------------------------------------------------------------- Layout */
.wrap{ max-width:var(--maxw); margin:0 auto; padding-inline:var(--gutter); }
.section{ padding-block:clamp(72px, 11vw, 152px); }
.section--tight{ padding-block:clamp(56px, 8vw, 104px); }
.bg-paper2{ background:var(--paper-2); }
.bg-forest{ background:var(--forest-deep); color:var(--sand); }
.bg-forest h1,.bg-forest h2,.bg-forest h3{ color:#f3efe6; }

/* --------------------------------------------------------------- Typographie utilitaire */
.display{
  font-family:var(--font-display);
  font-size:clamp(2.7rem, 7vw, 5.6rem);
  line-height:0.98;
  font-weight:600;
  letter-spacing:-.025em;
}
.h2{
  font-size:clamp(2rem, 4.4vw, 3.4rem);
  letter-spacing:-.02em;
  line-height:1.02;
}
.h3{ font-size:clamp(1.35rem,2.2vw,1.85rem); }
.lead{
  font-size:clamp(1.15rem, 1.9vw, 1.5rem);
  line-height:1.5;
  color:var(--ink-soft);
  font-weight:400;
}
.eyebrow{
  font-family:var(--font-body);
  font-size:.78rem;
  font-weight:600;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--bark);
  display:inline-flex;
  align-items:center;
  gap:.7em;
}
.eyebrow::before{
  content:"";
  width:26px; height:1px;
  background:currentColor;
  display:inline-block;
  opacity:.6;
}
.bg-forest .eyebrow{ color:var(--bark-soft); }
.muted{ color:var(--ink-soft); }
.serif-num{
  font-family:var(--font-display);
  font-weight:500;
  font-variant-numeric:tabular-nums;
}

/* --------------------------------------------------------------- Boutons */
.btn{
  display:inline-flex; align-items:center; gap:.6em;
  font-family:var(--font-body);
  font-weight:600;
  font-size:.98rem;
  letter-spacing:.01em;
  padding:.92em 1.5em;
  border-radius:100px;
  border:1px solid transparent;
  transition:all .35s var(--ease);
  white-space:nowrap;
}
.btn .arr{ transition:transform .35s var(--ease); }
.btn:hover .arr{ transform:translateX(4px); }
.btn--primary{ background:var(--forest); color:#f3efe6; }
.btn--primary:hover{ background:var(--forest-deep); }
.btn--ghost{ background:transparent; color:var(--ink); border-color:var(--line-dark); }
.btn--ghost:hover{ background:var(--ink); color:var(--paper); border-color:var(--ink); }
.bg-forest .btn--ghost{ color:#f3efe6; border-color:rgba(243,239,230,.4); }
.bg-forest .btn--ghost:hover{ background:#f3efe6; color:var(--forest-deep); }
.btn--light{ background:#f3efe6; color:var(--forest-deep); }
.btn--light:hover{ background:#fff; }

.textlink{
  display:inline-flex; align-items:center; gap:.5em;
  font-weight:600; color:var(--forest);
  border-bottom:1px solid transparent;
  transition:border-color .3s var(--ease);
}
.textlink .arr{ transition:transform .3s var(--ease); }
.textlink:hover{ border-color:var(--forest); }
.textlink:hover .arr{ transform:translateX(3px); }

/* --------------------------------------------------------------- Header / Nav */
.site-header{
  position:fixed; top:0; left:0; right:0; z-index:100;
  transition:background .4s var(--ease), border-color .4s var(--ease), backdrop-filter .4s var(--ease);
  border-bottom:1px solid transparent;
}
.site-header.solid{
  background:rgba(245,243,238,.85);
  backdrop-filter:blur(14px) saturate(1.4);
  border-bottom-color:var(--line);
}
.nav{
  display:flex; align-items:center; justify-content:space-between;
  height:74px;
}
.brand{
  display:flex; align-items:center; gap:.6em;
  font-family:var(--font-display);
  font-weight:700;
  font-size:1.42rem;
  letter-spacing:-.03em;
  color:var(--ink);
}
.brand img{ height:34px; width:auto; display:block; }
@media (max-width:520px){ .brand img{ height:28px; } }
.brand .mark{
  width:26px; height:26px; border-radius:50%;
  background:var(--forest);
  position:relative; flex:none;
}
.brand .mark::after{
  content:""; position:absolute; inset:0; margin:auto;
  width:2px; height:15px; background:var(--paper);
  transform:translateY(2px);
}
.brand .mark::before{
  content:""; position:absolute; top:5px; left:50%;
  width:9px; height:9px; border-radius:50% 50% 50% 0;
  background:var(--forest-soft);
  transform:translateX(-1px) rotate(45deg);
}
.site-header.on-dark .brand{ color:#f3efe6; }
.site-header.on-dark:not(.solid) .nav-links a{ color:rgba(243,239,230,.82); }
.site-header.on-dark:not(.solid) .nav-links a:hover{ color:#fff; }
.site-header.on-dark:not(.solid) .brand .mark{ background:#f3efe6; }
.site-header.on-dark:not(.solid) .brand .mark::after{ background:var(--forest-deep); }
.site-header.on-dark:not(.solid) .nav-cta{ color:#f3efe6; border-color:rgba(243,239,230,.45); }
.site-header.on-dark:not(.solid) .nav-cta:hover{ background:#f3efe6; color:var(--forest-deep); }
.site-header.on-dark:not(.solid) .burger span{ background:#f3efe6; }

.nav-links{
  display:flex; align-items:center; gap:2.2rem;
  list-style:none; margin:0; padding:0;
}
.nav-links a{
  font-weight:500; font-size:1rem; color:var(--ink-soft); white-space:nowrap;
  position:relative; padding-block:6px;
  transition:color .25s var(--ease);
}
.nav-links a::after{
  content:""; position:absolute; left:0; bottom:0;
  width:100%; height:1.5px; background:var(--forest);
  transform:scaleX(0); transform-origin:left;
  transition:transform .3s var(--ease);
}
.nav-links a:hover,.nav-links a[aria-current="page"]{ color:var(--ink); }
.nav-links a:hover::after,.nav-links a[aria-current="page"]::after{ transform:scaleX(1); }

.nav-right{ display:flex; align-items:center; gap:1.4rem; }
.nav-cta{
  font-weight:600; font-size:.92rem; white-space:nowrap;
  padding:.62em 1.25em; border-radius:100px;
  border:1px solid var(--line-dark); color:var(--ink);
  transition:all .3s var(--ease);
}
.nav-cta:hover{ background:var(--forest); color:#f3efe6; border-color:var(--forest); }

.burger{ display:none; flex-direction:column; gap:5px; background:none; border:0; padding:8px; }
.burger span{ width:24px; height:2px; background:var(--ink); display:block; transition:.3s var(--ease); }

/* menu mobile */
.mobile-menu{
  position:fixed; inset:0; z-index:99;
  background:var(--paper);
  display:flex; flex-direction:column; justify-content:center;
  padding:var(--gutter);
  transform:translateY(-100%);
  transition:transform .5s var(--ease);
  visibility:hidden;
}
.mobile-menu.open{ transform:translateY(0); visibility:visible; }
.mobile-menu a{
  font-family:var(--font-display); font-weight:600;
  font-size:clamp(2rem,9vw,3rem); color:var(--ink);
  padding-block:.18em; border-bottom:1px solid var(--line);
}
.mobile-menu a:last-of-type{ border-bottom:0; }

/* --------------------------------------------------------------- Hero */
.hero{ position:relative; min-height:100svh; display:flex; align-items:flex-end; overflow:hidden; background:var(--forest-deep); }
.hero-media{ position:absolute; inset:0; z-index:0; background:var(--forest-deep); }
.hero-media image-slot{ width:100%; height:100%; }
.hero::after{
  content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:
    linear-gradient(to top, rgba(20,28,17,.78) 0%, rgba(22,30,18,.40) 52%, rgba(28,36,22,.20) 100%),
    linear-gradient(to right, rgba(20,28,17,.34) 0%, rgba(20,28,17,0) 58%);
}
.hero-inner{ position:relative; z-index:2; width:100%; padding-bottom:clamp(48px,7vw,96px); padding-top:120px; }
.hero h1{ color:#f5f1e7; max-width:16ch; }
.hero .lead{ color:rgba(245,241,231,.86); max-width:46ch; margin-top:1.4rem; }
.hero-actions{ display:flex; flex-wrap:wrap; gap:1rem; margin-top:2.2rem; }
.hero-meta{
  position:absolute; z-index:2; top:104px; right:var(--gutter);
  text-align:right; color:rgba(245,241,231,.7);
  font-size:.82rem; letter-spacing:.04em; line-height:1.7;
  max-width:30ch;
}
@media (max-width:760px){ .hero-meta{ display:none; } }

/* --------------------------------------------------------------- Composants génériques */
.grid{ display:grid; gap:clamp(28px,4vw,64px); }
.grid-2{ grid-template-columns:repeat(2,1fr); }
.grid-3{ grid-template-columns:repeat(3,1fr); }
.grid-4{ grid-template-columns:repeat(4,1fr); }
.items-center{ align-items:center; }

.kicker-row{ display:flex; flex-direction:column; gap:1.2rem; max-width:60ch; }

/* Carte prestation (aperçu accueil + page) */
.svc{
  display:flex; flex-direction:column;
  padding-top:1.6rem;
  border-top:1px solid var(--line);
  transition:border-color .4s var(--ease);
}
.svc:hover{ border-top-color:var(--forest); }
.svc .num{ font-size:.85rem; color:var(--bark); letter-spacing:.1em; margin-bottom:1.1rem; }
.svc h3{ font-size:clamp(1.3rem,2vw,1.7rem); margin-bottom:.7rem; }
.svc p{ color:var(--ink-soft); font-size:1.02rem; line-height:1.55; }
.svc .svc-link{ margin-top:1.4rem; }

/* Bloc image + texte */
.media-frame{ position:relative; border-radius:var(--radius-lg); overflow:hidden; background:var(--paper-3); }
.media-frame image-slot{ width:100%; height:100%; }
.media-tag{
  position:absolute; left:14px; bottom:14px; z-index:3;
  background:rgba(245,241,231,.92); color:var(--forest-deep);
  font-size:.72rem; font-weight:600; letter-spacing:.04em;
  padding:.4em .8em; border-radius:100px;
}

/* Galerie multi-photos par prestation : 1 grande + vignettes */
.presta-gallery{ display:flex; flex-direction:column; gap:12px; }
.presta-gallery .pg-main{ aspect-ratio:4/3; }
.pg-thumbs{ display:grid; grid-template-columns:repeat(3,1fr); gap:12px; }
.pg-thumbs image-slot{ width:100%; aspect-ratio:1; border-radius:var(--radius-lg); border:1.5px dashed rgba(122,108,83,.55); background:var(--paper-3); }
.pg-hint{ font-size:.78rem; color:var(--ink-soft); margin-top:.2rem; display:flex; align-items:center; gap:.5em; }
.pg-hint::before{ content:""; width:16px; height:1px; background:var(--bark); display:inline-block; }

/* Liste valeurs / approche */
.value-list{ list-style:none; margin:0; padding:0; display:grid; gap:0; }
.value-list li{
  display:grid; grid-template-columns:auto 1fr; gap:1.4rem;
  padding-block:1.5rem; border-top:1px solid var(--line);
  align-items:baseline;
}
.value-list .vnum{ font-family:var(--font-display); font-size:1rem; color:var(--bark); }
.value-list h4{ font-family:var(--font-display); font-size:1.2rem; margin-bottom:.35rem; }
.value-list p{ color:var(--ink-soft); font-size:1rem; }

/* Stat / chiffres sobres */
.figs{ display:flex; flex-wrap:wrap; gap:clamp(2rem,6vw,5rem); }
.fig .n{ font-family:var(--font-display); font-size:clamp(2.4rem,4vw,3.4rem); font-weight:600; line-height:1; color:var(--forest); }
.bg-forest .fig .n{ color:#e9e3d6; }
.fig .l{ font-size:.92rem; color:var(--ink-soft); margin-top:.5rem; max-width:18ch; }
.bg-forest .fig .l{ color:rgba(216,210,196,.75); }

/* Galerie */
.gallery{ display:grid; grid-template-columns:repeat(12,1fr); gap:14px; }
.gallery image-slot{ width:100%; height:100%; border-radius:var(--radius-lg); }
.g-a{ grid-column:span 7; aspect-ratio:4/3; }
.g-b{ grid-column:span 5; aspect-ratio:3/4; }
.g-c{ grid-column:span 4; aspect-ratio:1; }
.g-d{ grid-column:span 4; aspect-ratio:1; }
.g-e{ grid-column:span 4; aspect-ratio:1; }
.g-wide{ grid-column:span 12; aspect-ratio:21/9; }

/* Témoignages */
.quote{ }
.quote blockquote{
  font-family:var(--font-display); font-weight:500;
  font-size:clamp(1.3rem,2.3vw,1.9rem); line-height:1.3;
  letter-spacing:-.01em; margin:0; color:var(--ink);
}
.quote .stars{ color:#c8923a; font-size:1rem; letter-spacing:.15em; margin-bottom:1rem; }
.quote .who{ margin-top:1.4rem; font-size:.95rem; color:var(--ink-soft); }
.quote .who b{ color:var(--ink); font-weight:600; }

/* Bandeau CTA */
.cta-band{ text-align:center; }
.cta-band h2{ max-width:18ch; margin-inline:auto; }
.cta-band .lead{ max-width:48ch; margin:1.2rem auto 0; }
.cta-band .row{ display:flex; gap:1rem; justify-content:center; flex-wrap:wrap; margin-top:2.4rem; }

/* --------------------------------------------------------------- Footer */
.site-footer{ background:var(--forest-deep); color:var(--sand); padding-block:clamp(56px,7vw,88px) 32px; }
.site-footer a{ color:rgba(216,210,196,.8); transition:color .25s; }
.site-footer a:hover{ color:#fff; }
.footer-top{ display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:clamp(28px,5vw,72px); align-items:start; }
.footer-brand{ font-family:var(--font-display); font-weight:700; font-size:1.7rem; color:#f3efe6; letter-spacing:-.03em; }
.footer-brand + p{ margin-top:1rem; color:rgba(216,210,196,.7); max-width:34ch; font-size:1rem; }
.footer-col h5{ font-family:var(--font-body); font-size:.78rem; letter-spacing:.18em; text-transform:uppercase; color:var(--bark-soft); margin:0 0 1.1rem; font-weight:600; }
.footer-col ul{ list-style:none; margin:0; padding:0; display:grid; gap:.7rem; }
.footer-bottom{
  display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:1rem;
  margin-top:clamp(40px,6vw,72px); padding-top:28px;
  border-top:1px solid rgba(216,210,196,.18);
  font-size:.85rem; color:rgba(216,210,196,.6);
}

/* --------------------------------------------------------------- Page header (intérieures) */
.page-head{ padding-top:140px; padding-bottom:clamp(40px,6vw,72px); }
.page-head .display{ font-size:clamp(2.6rem,6.5vw,5rem); max-width:18ch; }
.page-head .lead{ max-width:52ch; margin-top:1.4rem; }
.crumbs{ font-size:.85rem; letter-spacing:.04em; color:var(--ink-soft); margin-bottom:1.6rem; }
.crumbs a:hover{ color:var(--forest); }

/* --------------------------------------------------------------- Formulaire */
.form-grid{ display:grid; grid-template-columns:1fr 1fr; gap:1.3rem 1.5rem; }
.field{ display:flex; flex-direction:column; gap:.5rem; }
.field.full{ grid-column:1 / -1; }
.field label{ font-size:.82rem; font-weight:600; letter-spacing:.04em; color:var(--ink); }
.field label .req{ color:var(--bark); }
.field input,.field select,.field textarea{
  font-family:var(--font-body); font-size:1rem; color:var(--ink);
  background:var(--paper); border:1px solid var(--line);
  border-radius:var(--radius); padding:.85em 1em;
  transition:border-color .25s, box-shadow .25s;
  width:100%;
}
.field textarea{ resize:vertical; min-height:130px; }
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none; border-color:var(--forest);
  box-shadow:0 0 0 3px rgba(47,74,50,.12);
}
.field.invalid input,.field.invalid select,.field.invalid textarea{ border-color:#a6452f; }
.field .err{ font-size:.78rem; color:#a6452f; display:none; }
.field.invalid .err{ display:block; }
.chips{ display:flex; flex-wrap:wrap; gap:.6rem; }
.chip{
  font-size:.9rem; padding:.55em 1em; border-radius:100px;
  border:1px solid var(--line); background:var(--paper); color:var(--ink-soft);
  transition:all .25s var(--ease);
}
.chip[aria-pressed="true"]{ background:var(--forest); color:#f3efe6; border-color:var(--forest); }
.form-success{
  display:none; text-align:center; padding:clamp(40px,6vw,72px);
  background:var(--paper-3); border-radius:var(--radius-lg);
}
.form-success.show{ display:block; }
.form-success .ok{ width:54px;height:54px;border-radius:50%;background:var(--forest);display:flex;align-items:center;justify-content:center;margin:0 auto 1.4rem; }
.form-success .ok::after{ content:""; width:18px;height:9px;border-left:2.5px solid #f3efe6;border-bottom:2.5px solid #f3efe6;transform:rotate(-45deg) translate(1px,-2px); }

/* Carte contact */
.contact-card{ display:grid; gap:1.6rem; }
.contact-line{ display:grid; grid-template-columns:auto 1fr; gap:1.1rem; align-items:start; padding-block:1.2rem; border-top:1px solid var(--line); }
.contact-line:first-child{ border-top:0; padding-top:0; }
.contact-line .ci{ width:40px;height:40px;border-radius:50%;border:1px solid var(--line-dark);display:flex;align-items:center;justify-content:center;flex:none; }
.contact-line .lab{ font-size:.76rem; letter-spacing:.12em; text-transform:uppercase; color:var(--bark); }
.contact-line .val{ font-family:var(--font-display); font-size:1.25rem; font-weight:500; color:var(--ink); }
.contact-line a.val:hover{ color:var(--forest); }
.contact-layout{ grid-template-columns:1.5fr 1fr; gap:clamp(40px,6vw,88px); }
@media (max-width:860px){ .contact-layout{ grid-template-columns:1fr; } }

/* --------------------------------------------------------------- Révélations au scroll */
.reveal{ opacity:0; transform:translateY(26px); transition:opacity .9s var(--ease), transform .9s var(--ease); }
.reveal.in{ opacity:1; transform:none; }
.reveal.d1{ transition-delay:.08s; }
.reveal.d2{ transition-delay:.16s; }
.reveal.d3{ transition-delay:.24s; }
@media (prefers-reduced-motion:reduce){ .reveal{ opacity:1; transform:none; transition:none; } html{ scroll-behavior:auto; } }

/* --------------------------------------------------------------- Divers */
.divider{ height:1px; background:var(--line); border:0; margin:0; }
.tag-list{ display:flex; flex-wrap:wrap; gap:.6rem; }
.tag{ font-size:.82rem; color:var(--ink-soft); border:1px solid var(--line); border-radius:100px; padding:.4em .9em; }

/* --------------------------------------------------------------- Responsive */
@media (max-width:980px){
  .footer-top{ grid-template-columns:1fr 1fr; }
  .grid-4{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width:860px){
  body{ font-size:17px; }
  .nav-links,.nav-cta{ display:none; }
  .burger{ display:flex; }
  .grid-2,.grid-3{ grid-template-columns:1fr; }
  .form-grid{ grid-template-columns:1fr; }
  .footer-top{ grid-template-columns:1fr; gap:36px; }
  .gallery{ grid-template-columns:repeat(2,1fr); }
  .g-a,.g-b,.g-c,.g-d,.g-e,.g-wide{ grid-column:span 1; aspect-ratio:4/3; }
  .value-list li{ grid-template-columns:1fr; gap:.4rem; }
}
@media (max-width:520px){
  .gallery{ grid-template-columns:1fr; }
  .grid-4{ grid-template-columns:1fr; }
}