/*
  Feuille de style de la rubrique blog (/blog/ et /blog/{slug}/).

  Le bloc « chrome » ci-dessous (variables de charte, en-tete, pied de page) est
  repris a l'identique de Legal.twig et Offre.twig, qui embarquent le leur en
  ligne. Les pages du blog le chargent depuis un fichier : elles sont deux, et
  leur mise en page sera retravaillee avec les visuels definitifs.
*/

:root{
    --moss-deep:#1C3D12; --moss:#2E5C2E; --clay:#C8943A; --clay-soft:#E8C98B;
    --paper:#F7F3EA; --paper-warm:#FBF8F1; --ink:#14241A; --ink-soft:#3D4A41; --line:#E3DCCB;
    --leaf:#9EBF8A; --paper-soft:#EDE6D6; --stone:#6B7268; --clay-deep:#9A6A1A;
    --paper-line:rgba(28,61,18,0.12); --radius:6px; --gutter:clamp(1.25rem,3vw,2rem);
    --ease:cubic-bezier(0.22,1,0.36,1);
    --font-display:'Fraunces','Playfair Display',Georgia,serif;
    --font-body:'Manrope',system-ui,-apple-system,sans-serif;
}
*{box-sizing:border-box}
body{margin:0;font-family:'Manrope',system-ui,-apple-system,sans-serif;color:var(--ink);background:var(--paper);line-height:1.65}
a{color:var(--moss);text-decoration:underline;text-underline-offset:2px}
a:hover{color:var(--clay)}
/* ---------- Header (identique à la home) ---------- */
.site-header{position:sticky;top:0;z-index:100;background:rgba(247,243,234,0.88);backdrop-filter:saturate(140%) blur(10px);-webkit-backdrop-filter:saturate(140%) blur(10px);border-bottom:1px solid var(--paper-line)}
.container{max-width:1180px;margin-inline:auto;padding-inline:var(--gutter)}
.nav{display:flex;align-items:center;justify-content:space-between;gap:2rem;padding-block:1.1rem}
.brand{display:flex;align-items:center;gap:.7rem;font-family:var(--font-display);font-size:1.25rem;font-weight:700;color:var(--ink);letter-spacing:.02em;text-decoration:none}
.brand svg,.brand img{width:36px;height:36px;flex-shrink:0}
.brand-name{line-height:1}
.brand-name span{color:var(--clay-deep)}
.brand-sub{display:block;font-family:var(--font-body);font-size:.62rem;font-weight:700;color:var(--stone);letter-spacing:.24em;text-transform:uppercase;margin-top:3px}
.nav-links{display:flex;align-items:center;gap:clamp(.9rem,1.8vw,2rem);list-style:none;margin:0;padding:0}
.nav-links a{font-size:.95rem;font-weight:500;color:var(--ink-soft);position:relative;text-decoration:none;white-space:nowrap;transition:color .25s var(--ease)}
.nav-links a::after{content:"";position:absolute;left:0;right:0;bottom:-6px;height:1px;background:var(--clay);transform:scaleX(0);transform-origin:left;transition:transform .35s var(--ease)}
.nav-links a:hover{color:var(--moss-deep)}
.nav-links a:hover::after{transform:scaleX(1)}
.nav-cta{display:inline-flex;align-items:center;gap:.5rem;white-space:nowrap;padding:.7rem 1.2rem;background:var(--moss-deep);color:var(--paper-warm) !important;border-radius:var(--radius);font-weight:600;font-size:.92rem;text-decoration:none;transition:background .25s var(--ease),transform .25s var(--ease);border:1px solid var(--moss-deep)}
.nav-cta:hover{background:var(--moss);transform:translateY(-1px)}
.nav-cta::after{display:none}
.nav-cta svg{flex-shrink:0;width:14px;height:14px}
.nav-burger{display:none;background:none;border:1px solid var(--paper-line);border-radius:var(--radius);padding:.5rem;cursor:pointer;width:44px;height:44px;position:relative;transition:background .2s var(--ease)}
.nav-burger:hover{background:var(--paper-warm)}
.nav-burger span{display:block;width:20px;height:2px;background:var(--ink);border-radius:2px;position:absolute;left:50%;transform-origin:center;transition:transform .3s var(--ease),top .25s var(--ease),opacity .2s var(--ease)}
.nav-burger span:nth-child(1){top:14px;transform:translateX(-50%)}
.nav-burger span:nth-child(2){top:21px;transform:translateX(-50%)}
.nav-burger span:nth-child(3){top:28px;transform:translateX(-50%)}
.nav-burger[aria-expanded="true"] span:nth-child(1){top:21px;transform:translateX(-50%) rotate(45deg)}
.nav-burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.nav-burger[aria-expanded="true"] span:nth-child(3){top:21px;transform:translateX(-50%) rotate(-45deg)}
.nav-mobile{display:none}
@keyframes navDrop{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:translateY(0)}}
/* Bascule burger a 1180px : la nav complete (7 liens + CTA, blog compris) ne
   tient plus en dessous. La home bascule encore a 720px. */
@media(max-width:1180px){
    .nav-links{display:none}
    .nav-burger{display:block}
    .nav-mobile.open{display:flex;flex-direction:column;position:absolute;top:100%;left:0;right:0;background:var(--paper-warm);padding:1rem var(--gutter) 1.25rem;gap:0;list-style:none;margin:0;box-shadow:0 12px 32px rgba(28,61,18,0.10);border-top:1px solid var(--paper-line);animation:navDrop .28s var(--ease) both}
    .nav-mobile li{border-bottom:1px solid var(--paper-line)}
    .nav-mobile li:last-child{border-bottom:0;padding-top:.75rem}
    .nav-mobile a{display:flex;align-items:center;justify-content:space-between;padding:.95rem .25rem;color:var(--ink);font-size:1rem;font-weight:500;text-decoration:none}
    .nav-mobile .nav-cta{justify-content:center;color:var(--paper-warm);background:var(--moss-deep);border-color:var(--moss-deep);padding:.85rem 1.2rem}
    .nav{gap:.75rem;padding-block:.85rem}
    .brand{font-size:1.05rem;gap:.55rem}
    .brand svg,.brand img{width:30px;height:30px}
    .brand-sub{display:none}
}

.site-footer{background:var(--ink);color:#EDE7D9;padding:clamp(2rem,4vw,3rem) clamp(1rem,4vw,3rem) 1.5rem;margin-top:3rem}
.footer-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:2.5rem;margin-bottom:2.5rem;max-width:1100px;margin-inline:auto}
.footer-brand-block{max-width:32ch}
.footer-brand{display:flex;align-items:center;gap:.7rem;font-family:var(--font-display);font-size:1.3rem;font-weight:700;color:var(--paper-warm);margin-bottom:1rem}
.footer-brand img{width:36px;height:36px;flex-shrink:0}
.footer-brand span{color:var(--clay)}
.footer-tagline{font-size:.7rem;font-weight:700;letter-spacing:.24em;text-transform:uppercase;color:var(--leaf);margin-bottom:1.25rem}
.footer-desc{font-size:.92rem;color:var(--paper-soft);opacity:.7;line-height:1.6}
.footer-col h4{font-family:var(--font-body);font-size:.78rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--clay);margin-bottom:1rem}
.footer-col a,.footer-col p{display:block;font-size:.93rem;color:var(--paper-soft);opacity:.78;margin-bottom:.55rem;text-decoration:none}
.footer-col a:hover{color:var(--clay);opacity:1}
@media(max-width:860px){.footer-grid{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.footer-grid{grid-template-columns:1fr;gap:1.8rem}}
.footer-bottom{max-width:1100px;margin:0 auto;display:flex;flex-wrap:wrap;gap:.5rem 1.5rem;
    align-items:center;justify-content:space-between;font-size:.82rem;opacity:.85}
.footer-legal{display:flex;flex-wrap:wrap;gap:1.2rem;margin-bottom:1rem;max-width:1100px;margin-inline:auto}
.footer-legal a,.footer-legal button{color:#EDE7D9;font-size:.85rem;opacity:.8;text-decoration:none;
    background:none;border:none;padding:0;font:inherit;cursor:pointer}
.footer-legal a:hover,.footer-legal button:hover{color:var(--clay);opacity:1}

/* ---------- Rubrique blog : commun ---------- */
.blog-wrap{max-width:1100px;margin-inline:auto;padding:clamp(2rem,5vw,3.5rem) var(--gutter)}
.blog-head{max-width:44ch;margin-bottom:clamp(2rem,4vw,3rem)}
.blog-head h1{font-family:var(--font-display);font-weight:500;font-size:clamp(1.9rem,4.5vw,2.9rem);
    line-height:1.15;color:var(--moss-deep);margin:0 0 .9rem}
.blog-head p{margin:0;color:var(--ink-soft);font-size:1.05rem}
.blog-eyebrow{display:inline-block;font-size:.72rem;font-weight:700;letter-spacing:.2em;
    text-transform:uppercase;color:var(--clay-deep);margin-bottom:.9rem}
.blog-note{padding:1.1rem 1.3rem;background:var(--paper-warm);border:1px solid var(--line);
    border-radius:var(--radius);color:var(--ink-soft)}

/* ---------- Liste des articles ---------- */
.blog-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:clamp(1.2rem,2.5vw,2rem);
    list-style:none;margin:0;padding:0}
.blog-card{display:flex;flex-direction:column;background:var(--paper-warm);border:1px solid var(--line);
    border-radius:var(--radius);overflow:hidden;transition:transform .3s var(--ease),box-shadow .3s var(--ease)}
.blog-card:hover{transform:translateY(-3px);box-shadow:0 14px 34px rgba(28,61,18,.10)}
.blog-card-media{aspect-ratio:16/9;background:var(--paper-soft);overflow:hidden}
.blog-card-media img{width:100%;height:100%;object-fit:cover;display:block}
/* Vignette sans visuel : aplat de charte, en attendant les images définitives. */
.blog-card-media--empty{background:linear-gradient(135deg,var(--moss-deep),var(--moss))}
.blog-card-body{display:flex;flex-direction:column;flex:1;padding:1.3rem 1.4rem 1.5rem;gap:.7rem}
.blog-card-meta{display:flex;flex-wrap:wrap;gap:.5rem .9rem;align-items:center;font-size:.78rem;color:var(--stone)}
.blog-tag{display:inline-block;padding:.2rem .6rem;background:var(--paper-soft);border-radius:999px;
    font-size:.72rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--moss-deep)}
.blog-card h2{font-family:var(--font-display);font-weight:500;font-size:1.25rem;line-height:1.3;margin:0}
.blog-card h2 a{color:var(--ink);text-decoration:none}
.blog-card h2 a:hover{color:var(--moss)}
.blog-card p{margin:0;color:var(--ink-soft);font-size:.95rem}
.blog-card-more{margin-top:auto;padding-top:.4rem;font-size:.9rem;font-weight:600;color:var(--moss);
    text-decoration:none;display:inline-flex;align-items:center;gap:.4rem}
.blog-card-more:hover{color:var(--clay)}
.blog-card-more svg{transition:transform .25s var(--ease)}
.blog-card:hover .blog-card-more svg{transform:translateX(3px)}

/* ---------- Article ---------- */
.article-layout{display:grid;grid-template-columns:minmax(0,1fr) 240px;gap:clamp(2rem,4vw,3.5rem);align-items:start}
.article-head{margin-bottom:2rem}
.article-head h1{font-family:var(--font-display);font-weight:500;font-size:clamp(1.9rem,4.5vw,2.8rem);
    line-height:1.18;color:var(--moss-deep);margin:.6rem 0 1rem}
.article-meta{display:flex;flex-wrap:wrap;gap:.5rem 1.1rem;align-items:center;font-size:.85rem;color:var(--stone)}
.article-lead{font-size:1.1rem;color:var(--ink-soft);margin:1.2rem 0 0;max-width:62ch}
.article-cover{margin:2rem 0;border-radius:var(--radius);overflow:hidden;border:1px solid var(--line)}
.article-cover img{width:100%;height:auto;display:block}
.article-back{display:inline-flex;align-items:center;gap:.45rem;font-size:.9rem;font-weight:600;
    color:var(--moss);text-decoration:none}
.article-back:hover{color:var(--clay)}

/* Corps de l'article : HTML produit par le convertisseur Markdown. */
.article-body{max-width:70ch;font-size:1.03rem}
.article-body h2{font-family:var(--font-display);font-weight:500;font-size:clamp(1.35rem,2.6vw,1.65rem);
    color:var(--moss);margin:2.4rem 0 .8rem;scroll-margin-top:6rem}
.article-body h3{font-family:var(--font-display);font-weight:500;font-size:1.15rem;color:var(--moss-deep);
    margin:1.8rem 0 .6rem;scroll-margin-top:6rem}
.article-body p{margin:0 0 1.1rem;color:var(--ink-soft)}
.article-body strong{color:var(--ink);font-weight:700}
.article-body ul,.article-body ol{margin:0 0 1.2rem;padding-left:1.3rem;color:var(--ink-soft)}
.article-body li{margin-bottom:.5rem}
.article-body li::marker{color:var(--clay)}
.article-body blockquote{margin:1.5rem 0;padding:.9rem 1.3rem;border-left:3px solid var(--clay-soft);
    background:var(--paper-warm);color:var(--ink-soft);font-style:italic}
.article-body hr{border:0;border-top:1px solid var(--line);margin:2.2rem 0}
.article-body img{max-width:100%;height:auto;border-radius:var(--radius);display:block;margin:1.5rem 0}
.article-body code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.9em;
    background:var(--paper-soft);padding:.15rem .4rem;border-radius:3px}
.article-body pre{background:var(--ink);color:#EDE7D9;padding:1rem 1.2rem;border-radius:var(--radius);
    overflow-x:auto;margin:0 0 1.4rem}
.article-body pre code{background:none;padding:0;color:inherit}
/* Tableaux : jamais de débordement horizontal de la page, ils défilent seuls. */
.article-body .table-scroll{overflow-x:auto;margin:0 0 1.4rem}
.article-body table{border-collapse:collapse;width:100%;font-size:.95rem}
.article-body th,.article-body td{border:1px solid var(--line);padding:.6rem .8rem;text-align:left}
.article-body th{background:var(--paper-soft);font-weight:700;color:var(--moss-deep)}
/* Ancre déposée devant chaque titre par le convertisseur : révélée au survol. */
.article-body .heading-anchor{float:left;margin-left:-1.1em;padding-right:.35em;opacity:0;
    text-decoration:none;color:var(--clay);transition:opacity .2s var(--ease)}
.article-body .heading-anchor::before{content:"#"}
.article-body h2:hover .heading-anchor,.article-body h3:hover .heading-anchor{opacity:1}
/* Le rendu Mermaid est confié à la bibliothèque Markdown Synapx, côté navigateur. */
.article-body .mermaid{margin:1.5rem 0;text-align:center}

/* Sommaire latéral */
.article-toc{position:sticky;top:5.5rem;font-size:.9rem}
.article-toc h2{font-size:.72rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;
    color:var(--clay-deep);margin:0 0 .9rem;font-family:var(--font-body)}
.article-toc ol{list-style:none;margin:0;padding:0;border-left:1px solid var(--line)}
.article-toc li{margin:0}
.article-toc a{display:block;padding:.35rem 0 .35rem .9rem;margin-left:-1px;border-left:2px solid transparent;
    color:var(--ink-soft);text-decoration:none;line-height:1.4}
.article-toc a:hover{color:var(--moss);border-left-color:var(--clay-soft)}
.article-toc a.is-active{color:var(--moss-deep);font-weight:600;border-left-color:var(--clay)}

/* FAQ et sources : présentes dans le modèle de données Adliss, affichées si renseignées. */
.article-extra{max-width:70ch;margin-top:2.5rem}
.article-extra h2{font-family:var(--font-display);font-weight:500;font-size:1.4rem;color:var(--moss);margin:0 0 1rem}
.article-faq details{border:1px solid var(--line);border-radius:var(--radius);background:var(--paper-warm);
    padding:.9rem 1.1rem;margin-bottom:.7rem}
.article-faq summary{cursor:pointer;font-weight:600;color:var(--ink)}
.article-faq details p{margin:.7rem 0 0;color:var(--ink-soft)}
.article-sources ul{padding-left:1.2rem;color:var(--ink-soft);font-size:.92rem}

/* Appel à l'action de fin d'article */
.article-cta{max-width:70ch;margin:3rem 0 0;padding:clamp(1.5rem,3vw,2.2rem);background:var(--moss-deep);
    color:var(--paper-warm);border-radius:var(--radius)}
.article-cta h2{font-family:var(--font-display);font-weight:500;font-size:1.5rem;margin:0 0 .6rem;color:var(--paper-warm)}
.article-cta p{margin:0 0 1.4rem;color:var(--paper-soft);opacity:.9}
.article-cta .btn{display:inline-flex;align-items:center;gap:.5rem;padding:.85rem 1.4rem;background:var(--clay);
    color:var(--ink);border-radius:var(--radius);font-weight:700;text-decoration:none;transition:transform .25s var(--ease)}
.article-cta .btn:hover{transform:translateY(-1px);color:var(--ink)}

.article-next{margin-top:3rem}
.article-next h2{font-family:var(--font-display);font-weight:500;font-size:1.4rem;color:var(--moss);margin:0 0 1.2rem}

@media(max-width:900px){
    .article-layout{grid-template-columns:minmax(0,1fr)}
    .article-toc{position:static;order:-1;padding-bottom:1.5rem;border-bottom:1px solid var(--line);margin-bottom:1.5rem}
}