/* Avatar = logo source de l'avis (Google ou Eldo) */
  .av.source-google,
  .av.source-eldo{
    background:#fff !important;
    border:1px solid var(--line) !important;
    background-size:60% !important;
    background-position:center !important;
    background-repeat:no-repeat !important;
    box-shadow: 0 1px 2px rgba(10,10,10,.06);
  }
  .av.source-google{ background-image: url("../img/google-logo-search-new-svgrepo-com.svg") !important }
  .av.source-eldo{   background-image: url("../img/logo-eldo.svg") !important; background-size:75% !important }

  /* ================================================================ */
  /*   SINGLE ARTICLE TEMPLATE                                         */
  /* ================================================================ */
  .article-hero{
    padding:40px 40px 40px;
  }
  .article-hero .wrap{ max-width:820px; margin:0 auto }
  .article-hero .meta{
    display:flex; gap:14px; align-items:center; flex-wrap:wrap;
    font-size:12.5px; color:var(--ink-3); margin-bottom:14px;
  }
  .article-hero .cat-pill{
    background:var(--accent-soft); color:var(--accent-2);
    padding:5px 10px; border-radius:var(--radius-full);
    font-size:11.5px; font-weight:700;
    text-transform:uppercase; letter-spacing:1px;
  }
  .article-hero h1{
    font-family:"Google Sans Flex", "Inter", sans-serif; font-weight:700;
    font-size:52px; color:var(--ink); letter-spacing:-1.2px; line-height:1.05;
    margin:10px 0 20px;
  }
  .article-hero .chapo{
    font-size:19px; line-height:1.55; color:var(--ink-2); margin:0 0 24px;
    font-weight:500;
  }
  .article-hero .author-row{
    display:flex; align-items:center; gap:14px;
    padding-top:18px; border-top:1px solid var(--line);
    font-size:13px; color:var(--ink-3);
  }
  .article-hero .author-av{
    width:40px; height:40px; border-radius:50%;
    background:var(--wf); border:1px dashed var(--wf-line);
  }
  .article-hero .author-row b{ color:var(--ink); font-size:13.5px; display:block }
  .article-hero .share{
    margin-left:auto; display:flex; gap:8px;
  }
  .article-hero .share a{
    width:36px; height:36px; border-radius:50%;
    border:1px solid var(--line-2); display:flex; align-items:center; justify-content:center;
    color:var(--ink-3); font-size:13px; cursor:pointer;
  }
  .article-hero .share a:hover{ border-color:var(--brand); color:var(--brand) }

  .article-cover{
    max-width:1180px; margin:0 auto; padding:0 40px;
  }
  .article-cover .ph{
    border-radius:var(--radius-lg); aspect-ratio: 16/8; position:relative;
    margin-top:-30px;
    display:flex; align-items:center; justify-content:center;
    color:var(--ink-3); font-size:12px;
  }

  .article-body{
    display:grid; grid-template-columns: 240px 1fr;
    max-width:1180px; margin:0 auto; padding:60px 40px;
    gap:60px; align-items:start;
  }
  .article-toc{
    position:sticky; top:calc(var(--header-h-pill) + 24px);
    align-self:start;
  }
  .article-toc .toc-title{
    font-size:11px; font-weight:700; color:var(--ink-3);
    text-transform:uppercase; letter-spacing:1.4px;
    margin-bottom:14px;
  }
  .article-toc ol{
    list-style:none; padding:0; margin:0;
    border-left:2px solid var(--line);
  }
  .article-toc li{
    padding:7px 0 7px 14px; font-size:13px; color:var(--ink-2);
    cursor:pointer; margin-left:-2px; border-left:2px solid transparent;
  }
  .article-toc li.on{
    border-left-color:var(--accent); color:var(--brand); font-weight:600;
  }
  .article-toc li:hover{ color:var(--brand) }

  .article-prose{
    max-width:720px; font-size:17px; line-height:1.75; color:var(--ink-2);
  }
  .article-prose h2{
    font-family:"Google Sans Flex", "Inter", sans-serif; font-weight:700;
    font-size:32px; color:var(--brand); letter-spacing:-.5px; line-height:1.1;
    margin:44px 0 16px;
  }
  .article-prose h2:first-child{ margin-top:0 }
  .article-prose h3{
    letter-spacing:-.3px; margin:28px 0 12px;
  }
  .article-prose p{ margin:0 0 18px }
  .article-prose ul, .article-prose ol{ margin: 0 0 20px; padding-left:24px; line-height:1.7 }
  .article-prose ul li, .article-prose ol li{ margin-bottom:6px }
  .article-prose strong{ color:var(--ink); font-weight:700 }
  .article-prose em{ color:var(--brand); font-weight:600 }
  .article-prose blockquote{
    margin:28px 0; padding:24px 28px;
    background:var(--paper-2); border-left:3px solid var(--accent);
    border-radius:0 14px 14px 0; color:var(--ink); font-size:18px; line-height:1.6;
  }
  .article-prose .inline-img{
    background:var(--wf); border:1px dashed var(--wf-line);
    border-radius:var(--radius); aspect-ratio: 16/9;
    margin: 28px 0; position:relative;
    display:flex; align-items:center; justify-content:center;
    color:var(--ink-3); font-size:12px;
  }
  .article-prose .caption{
    font-size:13px; color:var(--ink-3); 
    text-align:center; margin:-14px 0 24px;
  }

  .article-cta-inline{
    background:var(--brand); color:#fff;
    border-radius:var(--radius); padding:28px;
    margin: 36px 0;
    display:flex; align-items:center; gap:22px;
  }
  .article-cta-inline .ico{
    width:52px; height:52px; border-radius:var(--radius-sm);
    background:rgba(255,255,255,.1); color:var(--accent-warm);
    display:flex; align-items:center; justify-content:center;
    flex-shrink:0;
  }
  .article-cta-inline h4{
    margin:0 0 4px; font-size:18px; color:#fff; font-family:"Google Sans Flex", "Inter", sans-serif; font-weight:700;
  }
  .article-cta-inline p{ margin:0; font-size:13.5px; color:rgba(255,255,255,.8) }
  .article-cta-inline .btn{ margin-left:auto; flex-shrink:0 }

  .author-box{
    background:var(--paper-2); border-radius:var(--radius); padding:28px;
    display:flex; gap:20px; align-items:center;
    margin:40px 0;
  }
  .author-box .av-lg{
    width:72px; height:72px; border-radius:50%;
    background:var(--wf); flex-shrink:0;
  }
  .author-box h4{
    margin:0 0 4px; font-family:"Google Sans Flex", "Inter", sans-serif; font-size:18px; color:var(--ink); font-weight:700;
  }
  .author-box .role{ font-size:12px; color:var(--ink-3); margin-bottom:8px; font-weight:600; text-transform:uppercase; letter-spacing:1.2px }
  .author-box p{ margin:0; font-size:13.5px; color:var(--ink-2); line-height:1.6 }

  .related{
    display:grid; grid-template-columns: repeat(3, 1fr); gap:20px;
  }
  .related-card{
    background:#fff; border:1px solid var(--line); border-radius:var(--radius);
    overflow:hidden; cursor:pointer; transition:all .15s;
  }
  .related-card:hover{ border-color:var(--brand); transform:translateY(-2px); box-shadow:var(--shadow-md) }
  .related-card .ph{
    background:var(--wf); border-bottom:1px dashed var(--wf-line);
    aspect-ratio: 16/10; max-height: 15rem; overflow:hidden;
    position:relative;
    display:flex; align-items:center; justify-content:center;
    color:var(--ink-3); font-size:11px;
  }
  .related-card .ph img{
    width:100%; height:100%; object-fit:cover; display:block;
  }
  .related-card .body{ padding:16px 18px }
  .related-card .cat{
    font-size:10.5px; font-weight:700; color:var(--accent-2);
    text-transform:uppercase; letter-spacing:1.2px;
  }
  .related-card h5{
    margin:6px 0 8px; font-family:"Google Sans Flex", "Inter", sans-serif;
    font-size:16px; color:var(--ink); font-weight:700;
    line-height:1.25; letter-spacing:-.2px;
  }
  .related-card .dt{ font-size:12px; color:var(--ink-3) }

  /* ============= TABLETTE (≤1024px) ============= */
  @media (max-width: 1024px){
    .article-body{ grid-template-columns: 200px 1fr; gap:40px; padding:48px 28px }
    .article-hero{ padding:32px 28px }
    .article-hero h1{ font-size:42px }
    .article-cover{ padding:0 28px }
    .related{ grid-template-columns: repeat(2, 1fr) }
    .related .related-card:nth-child(3){ grid-column: 1 / -1; max-width:540px; margin:0 auto; width:100% }
  }

  /* ============= MOBILE (≤768px) ============= */
  @media (max-width: 768px){
    .article-body{ grid-template-columns:1fr; gap:20px; padding:40px 18px }
    .article-toc{ position:static }
    .article-hero{ padding:28px 18px }
    .article-hero h1{ font-size:32px }
    .article-hero .chapo{ font-size:16px }
    /* Author-row mobile : avatar + nom sur la 1ʳᵉ ligne, share sous (aligné au texte). */
    .article-hero .author-row{
      display:grid;
      grid-template-columns: 40px 1fr;
      grid-template-rows: auto auto;
      column-gap:14px; row-gap:14px;
      align-items:center;
    }
    .article-cover .ph {  aspect-ratio: 16/9; }
    .article-cover .ph img { max-width:100%; }
    .article-hero .author-av{ grid-column:1; grid-row:1 }
    .article-hero .author-row > div:not(.share):not(.author-av){
      grid-column:2; grid-row:1; min-width:0;
    }
    .article-hero .author-row b{ font-size:14px }
    .article-hero .author-row > div:not(.share):not(.author-av) span{
      font-size:12.5px; line-height:1.4;
    }
    .article-hero .share{
      grid-column:1 / -1; grid-row:2;
      margin-left:0; gap:10px;
      justify-content:flex-start;
      padding-top:14px; border-top:1px solid var(--line);
    }
    .article-hero .share a{ width:34px; height:34px }
    .article-cover{ padding:0 18px }
    .article-prose{ font-size:15.5px }
    .article-prose h2{ font-size:24px }
    .article-prose h3{ font-size:18px }
    .related{ grid-template-columns:1fr }
    .related .related-card:nth-child(3){ max-width:none }
    .article-cta-inline{ flex-direction:column; text-align:center; padding:22px }
  }


/* ════════════════════════════════════════════════════════════════════
   POST TOC v2 — sommaire auto-généré par inc/posts-toc.php
   Réutilise le styling de .article-toc mais avec markup .post-toc.
   ════════════════════════════════════════════════════════════════════ */

.article-body__aside {
  position: sticky;
  top: calc(var(--header-h-pill, 80px) + 24px);
  align-self: start;
  z-index: 1;
}

.post-toc {
  background: var(--paper-2);
  border-radius: var(--radius);
  padding: 18px 18px 20px;
  border: 1px solid var(--line-2);
}
.post-toc__title {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  font-weight: 700;
  color: var(--ink-3);
  text-transform: uppercase;
  letter-spacing: 1.4px;
  margin-bottom: 14px;
}
.post-toc__title svg { opacity: 0.7; }
.post-toc__list {
  list-style: none;
  padding: 0;
  margin: 0;
  border-left: 2px solid var(--line);
}
.post-toc__item {
  margin-left: -2px;
  border-left: 2px solid transparent;
  transition: border-color .15s ease;
}
.post-toc__item a {
  display: block;
  padding: 7px 0 7px 14px;
  font-size: 13.5px;
  line-height: 1.4;
  color: var(--ink-2);
  text-decoration: none;
  transition: color .15s ease;
}
.post-toc__item--h3 a {
  padding-left: 26px;
  font-size: 12.5px;
  color: var(--ink-3);
}
.post-toc__item a:hover { color: var(--brand); }
.post-toc__item.is-active {
  border-left-color: var(--accent);
}
.post-toc__item.is-active > a {
  color: var(--brand);
  font-weight: 600;
}

/* Article body : layout 2 colonnes uniquement si TOC présent.
   On surcharge avec !important pour battre la règle historique
   ancestrale `.article-body { display: grid; grid-template-columns: 240px 1fr }`
   qui sinon laisse une colonne data fantôme de 240px même sans TOC. */
.article-body.has-toc {
  display: grid;
  grid-template-columns: 240px 1fr;
  max-width: 1180px;
  margin: 0 auto;
  padding: 40px 40px 60px;
  gap: 48px;
  align-items: start;
}
.article-body:not(.has-toc) {
  display: block !important;
  grid-template-columns: none !important;
  max-width: 760px;
  margin: 0 auto;
  padding: 40px 40px 60px;
  gap: 0;
}
.article-body:not(.has-toc) .article-prose {
  max-width: 100%;
  width: 100%;
}

/* Scroll-margin pour que les ancres ne s'arrêtent pas derrière le header */
.article-prose h2[id],
.article-prose h3[id] {
  scroll-margin-top: 100px;
}

/* Le formulaire post-quote reprend le styling de la section sec-cream
   et le réduit en padding pour s'enchaîner directement avec related */
.post-quote { padding: 56px 40px; }
.post-quote .head { text-align: center; margin-bottom: 28px; }
.post-quote .wrap > form,
.post-quote .wrap .wpcf7 {
  max-width: 880px;
  margin: 0 auto;
}

/* ─── Responsive ──────────────────────────────────────────────── */
@media (max-width: 980px) {
  .article-body.has-toc {
    grid-template-columns: 1fr;
    gap: 24px;
    padding: 32px 22px 48px;
  }
  .article-body__aside { position: static; }
  .post-toc { padding: 14px 16px; }
  .post-quote { padding: 40px 22px; }
}


/* ════════════════════════════════════════════════════════════════════
   AUTHOR ROW (hero) + SHARE + AUTHOR-BOX (bas d'article)
   Port de la maquette editoriale.
   ════════════════════════════════════════════════════════════════════ */

.article-hero .author-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
  font-size: 13px;
  color: var(--ink-3);
  flex-wrap: wrap;
}
.article-hero .author-av {
  width: 44px; height: 44px;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
  background: var(--paper-2);
}
.article-hero .author-av img {
  width: 100%; height: 100%;
  object-fit: cover;
  border-radius: 50%;
  display: block;
}
.article-hero .author-info { display: flex; flex-direction: column; }
.article-hero .author-row b {
  color: var(--ink);
  font-size: 13.5px;
  display: block;
  margin-bottom: 1px;
}

/* Boutons partage social */
.article-hero .share {
  margin-left: auto;
  display: flex;
  gap: 8px;
  align-items: center;
}
.article-hero .share a,
.article-hero .share button {
  width: 36px; height: 36px;
  border-radius: 50%;
  border: 1px solid var(--line-2);
  background: transparent;
  display: flex; align-items: center; justify-content: center;
  color: var(--ink-3);
  cursor: pointer;
  transition: all .15s ease;
  padding: 0;
  text-decoration: none;
}
.article-hero .share a:hover,
.article-hero .share button:hover {
  border-color: var(--brand);
  color: var(--brand);
}
.article-hero .share .share-copy.is-copied {
  border-color: var(--brand-2);
  color: var(--brand-2);
  background: rgba(0, 120, 53, 0.08);
}

/* Bloc résumé auteur en bas d'article */
.author-box {
  background: var(--paper-2);
  border-radius: var(--radius-lg, 20px);
  padding: 28px;
  display: flex;
  gap: 22px;
  align-items: flex-start;
  margin: 48px 0 24px;
}
.author-box .av-lg {
  width: 72px; height: 72px;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
  background: var(--paper);
}
.author-box .av-lg img {
  width: 100%; height: 100%;
  object-fit: cover;
  border-radius: 50%;
  display: block;
}
.author-box h4 {
  margin: 0 0 4px;
  font-family: "Google Sans Flex", "Inter", sans-serif;
  font-size: 19px;
  color: var(--ink);
  font-weight: 700;
  letter-spacing: -0.3px;
}
.author-box .role {
  font-size: 11.5px;
  color: var(--ink-3);
  margin-bottom: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.2px;
}
.author-box p {
  margin: 0;
  font-size: 13.5px;
  color: var(--ink-2);
  line-height: 1.6;
}

@media (max-width: 600px) {
  .article-hero .share { width: 100%; justify-content: flex-start; margin-left: 0; margin-top: 12px; margin-bottom:12px; }
  .author-box { flex-direction: column; gap: 14px; padding: 22px; }
}


/* ════════════════════════════════════════════════════════════════════
   v2 : share row standalone (sans auteur dans le hero)
   ════════════════════════════════════════════════════════════════════ */

.article-hero .share-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
  font-size: 13px;
  color: var(--ink-3);
  flex-wrap: wrap;
}
.article-hero .share-row__label {
  font-size: 11.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.4px;
  color: var(--ink-3);
}
.article-hero .share-row .share { margin-left: auto; }

/* Author-box : nom + avatar = liens cliquables vers la page auteur */
.author-box .av-lg { display: block; text-decoration: none; }
.author-box .av-lg img { transition: opacity .15s ease; }
.author-box .av-lg:hover img { opacity: 0.88; }
.author-box h4 a {
  color: inherit;
  text-decoration: none;
  transition: color .15s ease;
}
.author-box h4 a:hover { color: var(--brand); }
.author-box__body { display: flex; flex-direction: column; align-items: flex-start; }
.author-box__link {
  display: inline-block;
  margin-top: 12px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--brand);
  text-decoration: none;
}
.author-box__link:hover {
  text-decoration: underline;
}


/* ─── Picto fallback ISO&FACE sur les related cards d'article ─── */
/* (single.php : .related .related-card .ph est vraiment vide quand pas de thumb) */
.related .related-card .ph:empty {
  background: rgba(0, 120, 53, 0.12) !important;
  position: relative;
  overflow: hidden;
}
.related .related-card .ph:empty::after {
  content: "";
  position: absolute;
  inset: 0;
  background-color: var(--brand-2);
  -webkit-mask-image: url("../images/picto-isoface-mark.svg");
          mask-image: url("../images/picto-isoface-mark.svg");
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-position: center;
          mask-position: center;
  -webkit-mask-size: 42% auto;
          mask-size: 42% auto;
  opacity: 0.55;
  pointer-events: none;
}