/* ============================================================
   Liberta Local — Système éditorial (v5.83)
   Design unifié pour pages & articles (guides, FAQ, Découvrir…).
   Auto-applique sur tout contenu enveloppé dans .lbt-guide.
   Cohérent avec les plaquettes : Bricolage Grotesque + palette verte.
   ============================================================ */

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

:root{
  --ed-ink:#14331f; --ed-green:#16a34a; --ed-green-d:#15803d; --ed-green-dk:#1a3a2a;
  --ed-soft:#3c5b49; --ed-muted:#6b8576; --ed-bg:#f7faf8; --ed-line:#e3ece6;
  --ed-accent:#2ecc71;
}

/* ---- Base typographique ---- */
.lbt-guide{
  max-width:820px; margin:0 auto; font-size:1.06rem; line-height:1.75; color:#26392f;
}
.lbt-guide > *:first-child{ margin-top:0; }
.lbt-guide h2,.lbt-guide h3,.lbt-guide h4{
  font-family:'Bricolage Grotesque',Inter,system-ui,sans-serif; letter-spacing:-.015em; color:var(--ed-ink);
}
.lbt-guide h2{
  font-size:1.72rem; font-weight:800; margin:2.6rem 0 1rem; padding-bottom:.45rem;
  border-bottom:2px solid var(--ed-line); scroll-margin-top:90px;
}
.lbt-guide h2::before{
  content:""; display:inline-block; width:.55em; height:.55em; margin-right:.5em;
  border-radius:3px; background:var(--ed-accent); transform:translateY(-.05em) rotate(-8deg);
}
.lbt-guide h3{ font-size:1.28rem; font-weight:700; color:var(--ed-green-d); margin:1.8rem 0 .7rem; scroll-margin-top:90px; }
.lbt-guide h4{ font-size:1.08rem; font-weight:700; color:var(--ed-green-dk); margin:1.3rem 0 .5rem; }
.lbt-guide p{ margin:0 0 1rem; }
.lbt-guide a{ color:var(--ed-green-d); text-decoration:underline; text-underline-offset:2px; text-decoration-thickness:1.5px; }
.lbt-guide a:hover{ color:var(--ed-green); }
.lbt-guide strong{ color:var(--ed-ink); font-weight:700; }
.lbt-guide ul,.lbt-guide ol{ margin:0 0 1.1rem; padding-left:0; }
.lbt-guide ul li,.lbt-guide ol li{ margin:.4rem 0; }
/* puces personnalisées */
.lbt-guide ul{ list-style:none; }
.lbt-guide ul > li{ position:relative; padding-left:1.7rem; }
.lbt-guide ul > li::before{
  content:""; position:absolute; left:.15rem; top:.62em; width:.5rem; height:.5rem;
  border-radius:50%; background:var(--ed-green); box-shadow:0 0 0 3px color-mix(in srgb,var(--ed-green) 16%,transparent);
}
.lbt-guide ol{ list-style:none; counter-reset:ed; }
.lbt-guide ol > li{ position:relative; padding-left:2.4rem; }
.lbt-guide ol > li::before{
  counter-increment:ed; content:counter(ed); position:absolute; left:0; top:.05em;
  width:1.6rem; height:1.6rem; border-radius:50%; background:var(--ed-green); color:#fff;
  font-size:.82rem; font-weight:800; display:flex; align-items:center; justify-content:center;
  font-family:'Bricolage Grotesque',sans-serif;
}

/* ---- Citations / pull-quote ---- */
.lbt-guide blockquote{
  position:relative; margin:1.6rem 0; padding:1.1rem 1.3rem 1.1rem 1.5rem;
  background:linear-gradient(var(--ed-bg),var(--ed-bg)); border:1px solid var(--ed-line);
  border-left:4px solid var(--ed-green); border-radius:0 12px 12px 0; color:#2c4a39; font-size:1.04rem;
}
.lbt-guide blockquote p:last-child{ margin-bottom:0; }

/* ---- Tableaux ---- */
.lbt-guide table,.lbt-guide table.lbt-guide-table{
  width:100%; border-collapse:separate; border-spacing:0; margin:1.4rem 0;
  border:1px solid var(--ed-line); border-radius:12px; overflow:hidden; font-size:.97rem;
}
.lbt-guide th,.lbt-guide td{ padding:.7rem .9rem; text-align:left; vertical-align:top; border-bottom:1px solid var(--ed-line); }
.lbt-guide thead th,.lbt-guide table th:first-child{ background:var(--ed-green-dk); color:#fff; font-weight:700; border-bottom:none; }
.lbt-guide tbody tr:nth-child(even){ background:var(--ed-bg); }
.lbt-guide tbody tr:last-child td{ border-bottom:none; }

.lbt-guide hr{ border:0; height:1px; background:var(--ed-line); margin:2.4rem 0; }
.lbt-guide img{ max-width:100%; height:auto; border-radius:12px; }

/* ============================================================
   COMPOSANTS OPT-IN (à utiliser dans le contenu)
   ============================================================ */

/* Hero de page */
.lbt-ed-hero{
  position:relative; overflow:hidden; border-radius:20px; margin:0 0 2.2rem;
  padding:2.6rem 2.4rem; color:#fff;
  background:radial-gradient(130% 130% at 88% -10%,#1f7a45,#0f3a22 60%,#0c2c1a);
}
.lbt-ed-hero::after{ content:""; position:absolute; top:-30%; right:-8%; width:42%; height:160%;
  background:radial-gradient(circle,rgba(46,204,113,.22),transparent 70%); }
.lbt-ed-hero .eyebrow{ position:relative; z-index:1; font-size:.74rem; font-weight:800; letter-spacing:.22em;
  text-transform:uppercase; color:#7ee787; margin-bottom:.7rem; }
.lbt-ed-hero h1,.lbt-ed-hero .t{
  position:relative; z-index:1; font-family:'Bricolage Grotesque',sans-serif; font-weight:800;
  font-size:2.3rem; line-height:1.05; letter-spacing:-.02em; color:#fff; margin:0; }
.lbt-ed-hero .mk{ display:inline-block; position:relative; color:#06351c; z-index:0; }
.lbt-ed-hero .mk::before{ content:""; position:absolute; inset:-.05em -.25em; background:#7ee787; border-radius:5px; z-index:-1; transform:rotate(-1.2deg); }
.lbt-ed-hero .sub{ position:relative; z-index:1; font-size:1.05rem; color:#cfeed8; margin:1rem 0 0; max-width:60ch; line-height:1.6; }
.lbt-ed-hero .chips{ position:relative; z-index:1; display:flex; flex-wrap:wrap; gap:.5rem; margin-top:1.2rem; }
.lbt-ed-hero .chips span{ font-size:.78rem; font-weight:700; color:#eafff1; background:rgba(255,255,255,.1);
  border:1px solid rgba(126,231,135,.5); border-radius:30px; padding:.32rem .8rem; }

/* Cartes-stats */
.lbt-ed-stats{ display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:.9rem; margin:1.8rem 0; }
.lbt-ed-stat{ background:#fff; border:1px solid var(--ed-line); border-radius:14px; padding:1.2rem 1rem; text-align:center; }
.lbt-ed-stat b{ display:block; font-family:'Bricolage Grotesque',sans-serif; font-weight:800; font-size:2rem; line-height:1; color:var(--ed-green-d); }
.lbt-ed-stat span{ display:block; font-size:.8rem; color:var(--ed-muted); margin-top:.5rem; line-height:1.35; }

/* Grille de cartes (fonctionnalités) */
.lbt-ed-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:1rem; margin:1.6rem 0; }
.lbt-ed-card{ background:#fff; border:1px solid var(--ed-line); border-radius:14px; padding:1.2rem 1.3rem; }
.lbt-ed-card .ic{ font-size:1.6rem; line-height:1; }
.lbt-ed-card b{ display:block; font-family:'Bricolage Grotesque',sans-serif; font-weight:700; font-size:1.04rem; color:var(--ed-green-dk); margin:.5rem 0 .25rem; }
.lbt-ed-card p{ font-size:.92rem; color:var(--ed-soft); margin:0; line-height:1.5; }

/* Encadrés (💡 astuce / ⚠️ à savoir / 🙋 aide) */
.lbt-ed-callout{ display:flex; gap:.8rem; align-items:flex-start; margin:1.4rem 0; padding:1rem 1.2rem;
  border-radius:12px; border:1px solid var(--ed-line); background:var(--ed-bg); font-size:.98rem; line-height:1.55; }
.lbt-ed-callout .ic{ font-size:1.3rem; line-height:1.3; flex-shrink:0; }
.lbt-ed-callout.tip{ background:#f0fdf4; border-color:#bbf7d0; }
.lbt-ed-callout.warn{ background:#fffbeb; border-color:#fde68a; }
.lbt-ed-callout.help{ background:#eff6ff; border-color:#bfdbfe; }
.lbt-ed-callout p:last-child{ margin-bottom:0; }

/* Bande CTA */
.lbt-ed-cta{ margin:2.4rem 0 .5rem; border-radius:18px; padding:1.8rem 2rem; color:#fff;
  background:radial-gradient(120% 160% at 0% 0%,#1f7a45,#0f3a22); display:flex; flex-wrap:wrap; align-items:center; gap:1rem 1.6rem; }
.lbt-ed-cta .l{ flex:1; min-width:60%; }
.lbt-ed-cta h3{ font-family:'Bricolage Grotesque',sans-serif; font-weight:800; font-size:1.4rem; color:#fff; margin:0 0 .4rem; }
.lbt-ed-cta p{ color:#cfeed8; margin:0; font-size:.96rem; }
.lbt-ed-cta .btn{ display:inline-flex; align-items:center; gap:.5rem; background:#7ee787; color:#06351c !important;
  font-weight:800; text-decoration:none; padding:.8rem 1.4rem; border-radius:12px; font-size:1rem; transition:transform .12s,background .15s; }
.lbt-ed-cta .btn:hover{ background:#a8f5b8; transform:translateY(-1px); }

/* Sceau / badge */
.lbt-ed-badge{ display:inline-flex; align-items:center; gap:.4rem; font-size:.78rem; font-weight:800;
  letter-spacing:.04em; text-transform:uppercase; color:var(--ed-green-d); background:#eafdf0;
  border:1px solid #b6ebc6; border-radius:30px; padding:.3rem .8rem; }

/* ============================================================
   SOMMAIRE COLLANT (généré par JS)
   ============================================================ */
.lbt-ed-layout{ display:block; }
.lbt-ed-toc{
  background:var(--ed-bg); border:1px solid var(--ed-line); border-radius:14px;
  padding:1rem 1.2rem; margin:0 0 1.8rem;
}
.lbt-ed-toc-title{ font-size:.74rem; font-weight:800; letter-spacing:.16em; text-transform:uppercase; color:var(--ed-muted); margin-bottom:.6rem; }
.lbt-ed-toc ul{ list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:.4rem .6rem; }
.lbt-ed-toc li{ margin:0; padding:0; }
.lbt-ed-toc li::before{ display:none; }
.lbt-ed-toc a{ display:inline-block; font-size:.86rem; font-weight:600; text-decoration:none;
  color:var(--ed-soft); background:#fff; border:1px solid var(--ed-line); border-radius:30px; padding:.3rem .8rem; transition:all .15s; }
.lbt-ed-toc a:hover,.lbt-ed-toc a.active{ background:var(--ed-green); border-color:var(--ed-green); color:#fff; }

@media(min-width:1080px){
  .lbt-ed-has-toc{ max-width:1060px; display:grid; grid-template-columns:1fr 230px; gap:2.4rem; align-items:start; }
  .lbt-ed-has-toc .lbt-ed-toc{ grid-column:2; grid-row:1; position:sticky; top:84px; margin:0; }
  .lbt-ed-has-toc .lbt-ed-body{ grid-column:1; grid-row:1; min-width:0; }
  .lbt-ed-has-toc .lbt-ed-toc ul{ flex-direction:column; gap:.15rem; }
  .lbt-ed-has-toc .lbt-ed-toc a{ background:transparent; border:none; border-left:2px solid transparent; border-radius:0; padding:.3rem .6rem; width:100%; }
  .lbt-ed-has-toc .lbt-ed-toc a:hover,.lbt-ed-has-toc .lbt-ed-toc a.active{ background:transparent; color:var(--ed-green-d); border-left-color:var(--ed-green); }
}

/* ============================================================
   ACCORDÉONS FAQ
   ============================================================ */
.lbt-ed-faq{ border:1px solid var(--ed-line); border-radius:12px; margin:.7rem 0; background:#fff; overflow:hidden; }
.lbt-ed-faq > summary{ cursor:pointer; list-style:none; padding:1rem 1.2rem; font-weight:700; color:var(--ed-ink);
  display:flex; align-items:center; gap:.7rem; }
.lbt-ed-faq > summary::-webkit-details-marker{ display:none; }
.lbt-ed-faq > summary::after{ content:"+"; margin-left:auto; font-size:1.3rem; color:var(--ed-green); transition:transform .2s; font-weight:700; }
.lbt-ed-faq[open] > summary::after{ transform:rotate(45deg); }
.lbt-ed-faq > summary:hover{ background:var(--ed-bg); }
.lbt-ed-faq .lbt-ed-faq-body{ padding:0 1.2rem 1.1rem; color:var(--ed-soft); line-height:1.6; }

/* ============================================================
   RÉVÉLATIONS AU SCROLL (désactivées si reduced-motion)
   ============================================================ */
.lbt-ed-reveal{ opacity:0; transform:translateY(14px); transition:opacity .5s ease,transform .5s ease; }
.lbt-ed-reveal.is-in{ opacity:1; transform:none; }
@media(prefers-reduced-motion:reduce){
  .lbt-ed-reveal{ opacity:1 !important; transform:none !important; transition:none !important; }
}

/* ---- Responsive ---- */
@media(max-width:640px){
  .lbt-guide{ font-size:1rem; }
  .lbt-ed-hero{ padding:1.8rem 1.4rem; }
  .lbt-ed-hero h1,.lbt-ed-hero .t{ font-size:1.7rem; }
  .lbt-ed-cta{ padding:1.4rem 1.4rem; }
}