/* L'Éclaireur Local — pages services — « Carnet de territoire »
   Mêmes tokens que la page d'accueil (index.html). */
:root{
  --paper:#F3ECDC; --paper-deep:#E6D8BC; --ink:#2B2016; --ink-soft:#5B4A38;
  --ocre:#96552C; --ocre-ink:#D2985A; --sauge:#5B6650;
  --rgb-ink:43,32,22; --rgb-paper:243,236,220; --rgb-ocre:150,85,44;
  --font-display:'Fraunces', Georgia, serif;
  --font-body:'Newsreader', Georgia, serif;
  --ease:cubic-bezier(.4,0,.2,1); --dur-fast:220ms;
  --container:1040px; --gutter:clamp(20px, 4.5vw, 64px);
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:var(--font-body); font-size:17px; line-height:1.6; -webkit-font-smoothing:antialiased;
}
img,svg{display:block; max-width:100%;}
p{max-width:62ch; margin:0 0 16px;}
h1,h2,h3{font-family:var(--font-display); margin:0; font-weight:500; line-height:1.14;}
a{color:inherit;}
::selection{ background:rgba(var(--rgb-ocre),.28); }
.container{max-width:var(--container); margin:0 auto; padding:0 var(--gutter);}

/* liens et boutons — « presse, pas verre » */
.link{
  position:relative; color:var(--ink); text-decoration:none; display:inline-block; padding-bottom:2px;
  background-image:linear-gradient(var(--ocre),var(--ocre)); background-repeat:no-repeat;
  background-position:left bottom; background-size:0% 1.5px;
  transition:background-size var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.link:hover, .link:focus-visible{ color:var(--ocre); background-size:100% 1.5px; }
.btn{
  display:inline-block; padding:14px 30px; border:1.5px solid var(--ocre); background:transparent;
  color:var(--ink); font:500 16px var(--font-body); text-decoration:none; letter-spacing:.01em; cursor:pointer;
  transition:background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.btn:hover, .btn:focus-visible{ background:var(--ocre); color:var(--paper); }
.btn:focus-visible{ outline:2px solid var(--ink); outline-offset:3px; }

/* en-tête */
.site-header{ position:sticky; top:0; z-index:40; background:var(--paper); border-bottom:1px solid rgba(var(--rgb-ink),.16); padding:16px 0; }
.site-header .container{ max-width:1240px; display:flex; align-items:center; justify-content:space-between; gap:16px; }
.brand{ display:flex; align-items:center; gap:12px; text-decoration:none; color:var(--ink); }
.brand-mark{ height:38px; width:auto; }
.brand span{ font-family:var(--font-display); font-size:17px; font-weight:600; letter-spacing:.04em; text-transform:uppercase; }
.header-actions{ display:flex; align-items:center; gap:24px; }
.header-actions .btn{ display:none; padding:10px 22px; font-size:15px; }
@media (min-width:768px){ .header-actions .btn{ display:inline-block; } }

/* fil d'Ariane */
.crumbs{ font-size:.88rem; color:var(--ink-soft); padding:22px 0 0; }
.crumbs a{ color:var(--ink-soft); }
.crumbs span{ margin:0 8px; opacity:.6; }

/* corps de page */
.page-hero{ padding:40px 0 56px; }
@media (min-width:768px){ .page-hero{ padding:56px 0 72px; } }
.page-hero h1{ font-size:clamp(2rem, 4.6vw, 3.1rem); font-weight:600; margin-bottom:24px; max-width:22ch; }
.lead{ font-size:1.15rem; color:var(--ink-soft); max-width:58ch; }
@media (min-width:768px){ .lead{ font-size:1.26rem; } }
.hero-ctas{ display:flex; flex-direction:column; align-items:flex-start; gap:18px; margin-top:30px; }
@media (min-width:560px){ .hero-ctas{ flex-direction:row; align-items:center; gap:28px; } }

.band{ background:var(--paper-deep); }
.block{ padding:56px 0; }
@media (min-width:768px){ .block{ padding:88px 0; } }
.block h2{ font-size:clamp(1.6rem, 3vw, 2.2rem); margin-bottom:22px; }
.block .intro{ color:var(--ink-soft); }

.two-col{ display:grid; grid-template-columns:1fr; gap:36px; }
@media (min-width:900px){ .two-col{ grid-template-columns:1fr 1fr; gap:64px; } }

.pin-list{ list-style:none; margin:0; padding:0; }
.pin-list li{ position:relative; padding-left:24px; margin-bottom:16px; }
.pin-list li::before{
  content:''; position:absolute; left:1px; top:9px; width:7px; height:7px;
  background:var(--ocre); transform:rotate(45deg);
}
.pin-list strong{ font-weight:600; }

.steps{ list-style:none; margin:0; padding:0; }
.steps li{ padding:24px 0; border-top:1px solid rgba(var(--rgb-ink),.16); display:grid; grid-template-columns:1fr; gap:6px; }
.steps li:last-child{ border-bottom:1px solid rgba(var(--rgb-ink),.16); }
@media (min-width:768px){ .steps li{ grid-template-columns:260px 1fr; gap:32px; } }
.steps h3{ font-size:1.12rem; display:flex; align-items:baseline; gap:12px; }
.steps h3::before{ content:''; width:7px; height:7px; background:var(--ocre); transform:rotate(45deg); flex-shrink:0; }
.steps p{ margin:0; color:var(--ink-soft); font-size:.97rem; }

.proof{ border-left:1.5px solid var(--ocre); padding-left:24px; max-width:62ch; }
.proof p{ color:var(--ink); margin-bottom:12px; }
.proof .src{ font-style:italic; color:var(--ink-soft); font-size:.92rem; }

.price-note{ font-family:var(--font-display); font-size:1.5rem; font-weight:600; color:var(--ocre); margin:0 0 10px; }
.price-note small{ display:block; font-family:var(--font-body); font-size:.82rem; font-weight:400; font-style:italic; color:var(--ink-soft); }

.faq{ list-style:none; margin:0; padding:0; }
.faq li{ padding:24px 0; border-top:1px solid rgba(var(--rgb-ink),.16); }
.faq li:last-child{ border-bottom:1px solid rgba(var(--rgb-ink),.16); }
.faq h3{ font-family:var(--font-body); font-size:1.08rem; font-weight:600; margin-bottom:8px; }
.faq p{ margin:0; color:var(--ink-soft); font-size:.98rem; }

.others{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:1fr; gap:18px; }
@media (min-width:768px){ .others{ grid-template-columns:repeat(3,1fr); gap:28px; } }
.others li{ border-top:1.5px solid var(--ocre); padding-top:14px; }
.others a{ font-family:var(--font-display); font-weight:600; font-size:1.08rem; text-decoration:none; }
.others a:hover{ color:var(--ocre); }
.others p{ font-size:.92rem; color:var(--ink-soft); margin:6px 0 0; }

.closing{ text-align:center; padding:64px 0 72px; }
.closing p{ margin:0 auto 24px; font-family:var(--font-display); font-style:italic; font-weight:600; font-size:1.35rem; color:var(--ocre); }

/* pied de page */
.site-footer{ border-top:1px solid rgba(var(--rgb-ink),.18); padding:40px 0 48px; }
.site-footer .container{ max-width:1240px; }
.footer-links{ display:flex; flex-wrap:wrap; gap:12px 28px; font-size:.95rem; margin-bottom:20px; }
.footer-legal{ font-size:.8rem; color:var(--ink-soft); }
.footer-legal a{ color:var(--ink-soft); }

@media (prefers-reduced-motion: reduce){ *{ transition-duration:0.01ms !important; } }