/* =========================================================
     NEXTIWEB — Design 2026 : feuille de LECTURE (blog/articles)
     À charger APRÈS v2026.css. Reprend les classes existantes des
     articles (.breadcrumb, .article-hero, .article-body, .callout,
     .article-cta-inline, .article-table, .article-faq, .article-layout,
     .float-bar…) mais portées aux tokens 2026 — le corps des articles
     ne change pas, seuls le chrome + les feuilles de style changent.
     ========================================================= */

/* ---------- Alias des anciens tokens --color-* → tokens 2026 ----------
   Les corps d'articles contiennent encore des styles inline en var(--color-*)
   (encadrés prix, bloc partage LinkedIn, articles liés, CTA final…).
   On les redirige vers la palette 2026 pour qu'ils s'affichent correctement
   SANS avoir à retoucher le contenu des ~340 articles. Site dark-only. */
:root{
  --color-bg:var(--bg); --color-bg-alt:var(--bg-2);
  --color-surface:var(--surface); --color-surface-alt:var(--surface-2); --color-surface-soft:var(--bg-2);
  --color-primary:var(--green); --color-primary-dark:#009e4f; --color-primary-deep:#006837;
  --color-text:var(--text); --color-text-muted:var(--muted); --color-text-light:var(--muted-2);
  --color-border:var(--border); --color-border-strong:var(--border-strong); --color-border-soft:var(--border);
  --color-header-bg:rgba(7,8,9,.72); --color-topbar-bg:rgba(0,0,0,.5); --color-menu-bg:rgba(7,8,9,.96);
  --color-footer-bg:var(--bg-2); --color-card-hover:var(--surface-2);
  --color-shadow-soft:rgba(0,0,0,.35); --color-shadow-strong:rgba(0,0,0,.45);
}

/* ---------- Fil d'Ariane ---------- */
.breadcrumb-bar{border-bottom:1px solid var(--border);background:rgba(0,0,0,.25)}
.breadcrumb{display:flex;align-items:center;flex-wrap:wrap;gap:.35rem;font-size:.82rem;color:var(--muted);padding:.75rem 0 .6rem;list-style:none;margin:0}
.breadcrumb__item{display:flex;align-items:center;gap:.35rem}
.breadcrumb__item:not(:last-child)::after{content:"\203A";color:var(--muted-2);font-size:1rem;line-height:1}
.breadcrumb__link{color:var(--muted);text-decoration:none;transition:color .2s}
.breadcrumb__link:hover{color:var(--green)}
.breadcrumb__current{color:var(--green);font-weight:600}
.breadcrumb__link--home{display:inline-flex;align-items:center;gap:.3rem}
.breadcrumb__link--home svg{color:var(--green);flex-shrink:0;position:relative;top:-1px}

/* ---------- Hero article ---------- */
.article-hero{padding:3rem 0 2rem;border-bottom:1px solid var(--border)}
.article-hero__kicker{display:inline-flex;align-items:center;gap:.4rem;font-family:var(--display);font-size:.75rem;font-weight:700;color:var(--green);text-transform:uppercase;letter-spacing:.12em;margin-bottom:1rem}
.article-hero__title{font-family:var(--display);font-size:clamp(1.85rem,4.4vw,2.8rem);font-weight:800;line-height:1.14;letter-spacing:-.01em;margin-bottom:1.25rem;max-width:820px;
  background:linear-gradient(115deg,var(--text) 0%,var(--text) 55%,var(--green-soft) 100%);-webkit-background-clip:text;background-clip:text;color:transparent}
.article-meta{display:flex;align-items:center;flex-wrap:wrap;gap:1rem;font-size:.82rem;color:var(--muted);margin-bottom:.5rem}
.article-meta__author{font-weight:700;color:var(--text)}
.article-meta span{display:flex;align-items:center;gap:.35rem}
.article-meta svg{color:var(--green);opacity:.85}

/* ---------- Encadré résumé ---------- */
.article-summary{background:var(--grad-soft);border:1px solid rgba(0,230,118,.22);border-left:3px solid var(--green);border-radius:.75rem;padding:1.35rem 1.6rem;margin-bottom:2.5rem}
.article-summary__title{font-family:var(--display);font-size:.74rem;font-weight:700;color:var(--green);text-transform:uppercase;letter-spacing:.1em;margin-bottom:.8rem}
.article-summary ul{margin:0;padding-left:1.25rem;display:flex;flex-direction:column;gap:.5rem}
.article-summary li{font-size:.92rem;line-height:1.55;color:var(--text)}

/* ---------- Corps de l'article ---------- */
.article-body{max-width:800px;font-size:1.02rem}
.article-body h2{font-family:var(--display);font-size:clamp(1.4rem,2.6vw,1.65rem);font-weight:700;margin:2.75rem 0 1rem;color:var(--text);line-height:1.28;letter-spacing:-.01em;scroll-margin-top:90px}
.article-body h3{font-family:var(--display);font-size:1.18rem;font-weight:700;margin:2rem 0 .75rem;color:var(--green-soft);scroll-margin-top:90px}
.article-body p{font-size:1.02rem;line-height:1.82;color:var(--text);margin-bottom:1.3rem}
.article-body ul,.article-body ol{padding-left:1.5rem;margin-bottom:1.3rem;display:flex;flex-direction:column;gap:.55rem}
.article-body li{font-size:1.02rem;line-height:1.7;color:var(--text)}
.article-body li::marker{color:var(--green)}
.article-body strong{color:var(--text);font-weight:700}
.article-body a{color:var(--green);text-decoration:underline;text-underline-offset:3px;text-decoration-color:rgba(0,230,118,.45);transition:text-decoration-color .2s}
.article-body a:hover{text-decoration-color:var(--green)}
.article-body hr{border:none;border-top:1px solid var(--border);margin:2.75rem 0}
.article-body blockquote{margin:1.75rem 0;padding:.4rem 0 .4rem 1.3rem;border-left:3px solid var(--green);color:var(--muted);font-style:italic}

/* ---------- Encadré « Le saviez-vous » ---------- */
.callout{background:var(--surface);border:1px solid var(--border);border-left:3px solid var(--green);border-radius:.7rem;padding:1.15rem 1.45rem;margin:1.85rem 0;font-size:.95rem;line-height:1.7;color:var(--muted)}
.callout strong{font-family:var(--display);color:var(--green);display:block;margin-bottom:.4rem;font-size:.74rem;text-transform:uppercase;letter-spacing:.09em}

/* ---------- CTA inline (milieu d'article) ---------- */
.article-cta-inline{background:var(--grad-soft);border:1px solid rgba(0,230,118,.2);border-radius:.9rem;padding:1.75rem;margin:2.75rem 0;text-align:center}
.article-cta-inline p{font-size:.98rem;color:var(--muted);margin-bottom:1.1rem}
.article-cta-inline .btn--primary{color:#04150c!important;font-weight:600}

/* ---------- Tableau ---------- */
.article-table-wrap{overflow-x:auto;margin:1.6rem 0;border:1px solid var(--border);border-radius:.7rem}
.article-table{width:100%;border-collapse:collapse;font-size:.92rem}
.article-table th{background:rgba(0,230,118,.1);color:var(--green);font-family:var(--display);font-weight:700;text-align:left;padding:.8rem 1rem;border-bottom:1px solid rgba(0,230,118,.22)}
.article-table td{padding:.8rem 1rem;border-bottom:1px solid var(--border);color:var(--text);vertical-align:top}
.article-table tr:last-child td{border-bottom:none}
.article-table tr:hover td{background:rgba(255,255,255,.025)}

/* ---------- FAQ article (accordéon, géré par v2026.js) ---------- */
.article-faq{display:flex;flex-direction:column;gap:.65rem;margin-bottom:2rem}
.article-faq__item{border:1px solid var(--border);border-radius:.7rem;overflow:hidden;background:var(--surface);transition:border-color .2s}
.article-faq__item.is-open{border-color:rgba(0,230,118,.35)}
.article-faq__btn{width:100%;display:flex;align-items:center;justify-content:space-between;gap:1rem;background:none;border:none;padding:1.05rem 1.35rem;cursor:pointer;text-align:left}
.article-faq__q{font-family:var(--display);font-weight:700;font-size:.96rem;color:var(--text);margin:0;line-height:1.4}
.article-faq__chevron{flex-shrink:0;width:18px;height:18px;color:var(--green);transition:transform .25s var(--ease)}
.article-faq__item.is-open .article-faq__chevron{transform:rotate(180deg)}
.article-faq__a{font-size:.94rem;color:var(--muted);line-height:1.7;margin:0;padding:0 1.35rem 1.1rem;display:none}
.article-faq__item.is-open .article-faq__a{display:block}
.article-faq__btn:hover .article-faq__q{color:var(--green)}

/* ---------- Disposition 2 colonnes + sidebar ---------- */
.article-layout{display:grid;grid-template-columns:1fr 280px;gap:3rem;align-items:start}
.article-sidebar{position:sticky;top:96px}
.article-sidebar__box{background:var(--surface);border:1px solid var(--border);border-radius:.85rem;padding:1.5rem;margin-bottom:1.5rem}
.article-sidebar__title{font-family:var(--display);font-size:.76rem;font-weight:700;color:var(--green);text-transform:uppercase;letter-spacing:.1em;margin-bottom:1rem}
.article-sidebar__toc{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:.55rem}
.article-sidebar__toc a{font-size:.86rem;color:var(--muted);text-decoration:none;line-height:1.45;transition:color .2s,padding .2s;border-left:2px solid transparent;padding-left:.7rem}
.article-sidebar__toc a:hover{color:var(--green);border-left-color:var(--green)}

/* ---------- Articles liés (sidebar / bas de page) ---------- */
.article-related__link{display:block;font-size:.88rem;color:var(--text);text-decoration:none;line-height:1.45;padding:.6rem 0;border-bottom:1px solid var(--border);transition:color .2s}
.article-related__link:last-child{border-bottom:none}
.article-related__link:hover{color:var(--green)}

/* ---------- Barre flottante (audit + WhatsApp) ---------- */
.whatsapp-float{display:none!important}
.float-bar{position:fixed;bottom:1.5rem;right:1.5rem;z-index:60;display:flex;align-items:center;gap:.5rem}
.audit-pill{display:flex;align-items:center;gap:.35rem;padding:0 1rem;height:46px;background:var(--grad);background-size:160% auto;border-radius:23px;color:#04150c;font-family:var(--display);font-weight:700;font-size:.78rem;text-decoration:none;white-space:nowrap;box-shadow:0 10px 28px -8px rgba(0,230,118,.6);transition:transform .25s var(--ease),background-position .3s;flex-shrink:0}
.audit-pill:hover{transform:translateY(-2px);background-position:right center}
.whatsapp-pill{display:flex;align-items:center;justify-content:center;width:46px;height:46px;background:#25d366;border-radius:50%;color:#fff;box-shadow:0 8px 22px rgba(37,211,102,.45);transition:transform .25s var(--ease);text-decoration:none;flex-shrink:0}
.whatsapp-pill:hover{transform:translateY(-2px)}
@media(max-width:768px){.float-bar{flex-direction:column;gap:.4rem;bottom:1rem;right:.875rem}}

/* ====== Pages de LISTE du blog (hub + index de catégories) ====== */
/* NB : sur les index de catégorie le wrapper .blog-hero est absent (section>.container) ;
   on centre donc directement via les classes enfants pour couvrir hub + index de catégorie. */
.blog-hero{padding:3.5rem 0 2rem;text-align:center}
.blog-hero__kicker{display:block;text-align:center;font-family:var(--display);font-size:.74rem;font-weight:700;color:var(--green);text-transform:uppercase;letter-spacing:.12em;margin-bottom:1rem}
.blog-hero__title{text-align:center;font-family:var(--display);font-size:clamp(2rem,5vw,3rem);font-weight:800;line-height:1.1;letter-spacing:-.02em;margin-bottom:1rem;display:flex;align-items:center;justify-content:center;gap:.6rem;flex-wrap:wrap}
.blog-hero__brand{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.blog-hero__subtitle{max-width:660px;margin:0 auto;text-align:center;color:var(--muted);font-size:1.05rem;line-height:1.6}
.blog-search{display:flex;gap:.6rem;max-width:560px;margin:2rem auto 0}
.blog-search__input{flex:1;min-width:0;background:var(--surface);border:1px solid var(--border-strong);border-radius:999px;padding:.85rem 1.4rem;color:var(--text);font-family:var(--body);font-size:.95rem;outline:none;transition:border-color .2s,box-shadow .2s}
.blog-search__input::placeholder{color:var(--muted-2)}
.blog-search__input:focus{border-color:var(--green);box-shadow:0 0 0 3px rgba(0,230,118,.12)}
.blog-search__btn{flex-shrink:0;background:var(--grad);background-size:160% auto;color:#04150c;font-family:var(--display);font-weight:600;border:none;border-radius:999px;padding:.85rem 1.6rem;cursor:pointer;transition:background-position .3s,transform .25s var(--ease)}
.blog-search__btn:hover{background-position:right center;transform:translateY(-2px)}
.blog-empty{text-align:center;color:var(--muted);padding:2rem}

/* Grille de catégories */
.blog-cat-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1.4rem}
@media(max-width:900px){.blog-cat-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:520px){.blog-cat-grid{grid-template-columns:1fr}}
.blog-cat-card{display:flex;flex-direction:column;align-items:flex-start;gap:.45rem;background:var(--surface);border:1px solid var(--border);border-radius:18px;padding:1.6rem;text-decoration:none;transition:transform .3s var(--ease),border-color .3s,background .3s}
.blog-cat-card:hover{transform:translateY(-5px);border-color:var(--border-strong);background:var(--surface-2)}
.blog-cat-card__icon{width:52px;height:52px;border-radius:14px;display:grid;place-items:center;background:var(--surface-2);border:1px solid var(--border);margin-bottom:.4rem}
.blog-cat-card__icon svg{display:block}
.blog-cat-card__title{font-family:var(--display);font-weight:700;font-size:1.08rem;color:var(--text)}
.blog-cat-card__desc{color:var(--muted);font-size:.9rem;line-height:1.5;flex:1}
.blog-cat-card__link{font-family:var(--display);font-weight:600;font-size:.86rem;color:var(--green);margin-top:.4rem}

/* Liste d'articles (cartes) */
.projects{display:grid;grid-template-columns:repeat(2,1fr);gap:1.4rem}
@media(max-width:760px){.projects{grid-template-columns:1fr}}
.project-card{background:var(--surface);border:1px solid var(--border);border-radius:18px;padding:1.6rem;transition:transform .3s var(--ease),border-color .3s,background .3s}
.project-card:hover{transform:translateY(-5px);border-color:var(--border-strong);background:var(--surface-2)}
.project-card__title{font-family:var(--display);font-weight:700;line-height:1.3;margin:.3rem 0 .6rem;color:var(--text)}
.project-card__text{color:var(--muted);font-size:.94rem;line-height:1.6;margin-bottom:1rem}
.project-card__meta a{font-family:var(--display);font-weight:600;font-size:.9rem;color:var(--green);text-decoration:none}
.project-card__meta a:hover{text-decoration:underline}

/* Rangée de puces « guides par secteur » (réutilise le style des puces) */
.blog-sectors{display:flex;flex-wrap:wrap;gap:.65rem}

/* ---------- Responsive ---------- */
@media(max-width:900px){
  .article-layout{grid-template-columns:1fr}
  .article-sidebar{display:none}
}