/* ============================================================
   Article de blog (single.php) — d'après maquettes/article.html.
   Dépend de theme.css + blog.css (.stack, .bcard, .sec-head, .btn, .crumb, .cta-band).
   ============================================================ */

/* ---- HERO ---- */
.art-hero{position:relative;color:#fff;overflow:hidden;padding:clamp(150px,18vw,215px) 0 clamp(40px,6vw,66px)}
.art-hero .bg{position:absolute;inset:0;z-index:0}
.art-hero .bg img{width:100%;height:100%;object-fit:cover;transform:scale(1.05)}
.art-hero::after{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(to top,rgba(11,40,42,.95) 6%,rgba(11,40,42,.55) 62%,rgba(11,40,42,.5))}
.art-hero .inner{position:relative;z-index:2;max-width:830px}
.art-hero .cat{font-family:var(--mont);font-size:.68rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:#fff;background:var(--teal-deep);padding:7px 14px;border-radius:50px;display:inline-block;margin-bottom:18px}
.art-hero h1{font-size:clamp(2.2rem,5vw,4rem);font-weight:800;line-height:1.12;margin-bottom:20px;text-shadow:0 2px 26px rgba(0,0,0,.35)}
.art-hero h1 em{font-family:var(--serif);font-style:italic;font-weight:400;color:var(--teal)}
.art-meta{display:flex;align-items:center;gap:14px;flex-wrap:wrap;font-family:var(--mont);font-size:.82rem}
.art-meta .au{display:flex;align-items:center;gap:10px}
.art-meta .au .av{width:40px;height:40px;border-radius:50%;background:var(--teal);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700}
.art-meta .sep{opacity:.45}

/* ---- Layout : sommaire + prose ---- */
.art-layout{display:grid;grid-template-columns:300px 1fr;gap:56px;align-items:start;padding:clamp(38px,6vw,66px) 0}
.art-layout--notoc{grid-template-columns:minmax(0,1fr)}
.toc{position:sticky;top:124px;background:var(--paper);border:1px solid var(--line);border-radius:14px;padding:22px 22px 24px}
/* Desktop : sommaire déployé (le <details> est ouvert), en-tête non interactif. */
.toc-d>summary{list-style:none;pointer-events:none;margin-bottom:14px}
.toc-d>summary::-webkit-details-marker{display:none}
.toc-lbl{font-family:var(--mont);font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-soft)}
.toc ol{list-style:none;counter-reset:t;margin:0;padding:0}
.toc li{counter-increment:t;margin-bottom:11px}
.toc a{font-family:var(--mont);font-size:.84rem;color:var(--ink-soft);display:flex;gap:9px;align-items:baseline;transition:.2s}
.toc a::before{content:counter(t,decimal-leading-zero);color:var(--teal);font-weight:700;font-size:.72rem}
.toc a:hover{color:var(--teal-deep)}

/* ---- Prose (contenu migré) ---- */
.prose{max-width:none;font-size:clamp(1.05rem,1.7vw,1.12rem);line-height:1.8;color:#264241}
.prose p{margin:0 0 1.3em}
.prose h2{font-size:clamp(1.4rem,2.4vw,1.9rem);margin:1.9em 0 .55em;scroll-margin-top:124px;color:var(--ink)}
.prose h3{font-size:1.18rem;margin:1.5em 0 .45em;color:var(--teal-ink)}
.prose h4{font-family:var(--mont);font-size:1.02rem;margin:1.3em 0 .4em;color:var(--ink)}
.prose ul,.prose ol{margin:0 0 1.3em;padding-left:1.2em}
.prose li{margin-bottom:.5em}
.prose a{color:var(--teal-deep);text-decoration:underline;text-underline-offset:2px}
.prose img{max-width:100%;height:auto;border-radius:12px;margin:1.4em 0}
.prose strong{font-weight:700;color:var(--ink)}
.prose .art-btn{text-align:center;margin:1.8em 0}
.prose a.btn{color:#fff;text-decoration:none}
.prose a.btn:hover{text-decoration:none}
.prose a.btn.btn-primary{color:#fff}
.prose hr{border:none;border-top:1px solid var(--line);margin:2em 0}

/* galerie native WordPress ([gallery]) */
.prose .gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:1.8em 0}
.prose .gallery-columns-2{grid-template-columns:repeat(2,1fr)}
.prose .gallery-columns-4{grid-template-columns:repeat(4,1fr)}
.prose .gallery-item{margin:0!important;width:auto!important}
.prose .gallery-item img{width:100%;aspect-ratio:1;object-fit:cover;border:none!important;border-radius:8px;margin:0;cursor:zoom-in;transition:.4s var(--ease)}
.prose .gallery-item img:hover{transform:scale(1.04)}
.prose .gallery-caption{display:none}
@media(max-width:620px){.prose .gallery,.prose .gallery-columns-4{grid-template-columns:repeat(2,1fr)}}

/* accordéons <details> (Sources / Infos pratiques) */
.art-acc{border:1px solid var(--line);border-radius:12px;margin:1.1em 0;background:var(--paper);overflow:hidden}
.art-acc>summary{cursor:pointer;list-style:none;padding:16px 20px;font-family:var(--mont);font-weight:600;font-size:.95rem;color:var(--ink);display:flex;justify-content:space-between;align-items:center;gap:12px}
.art-acc>summary::-webkit-details-marker{display:none}
.art-acc>summary::after{content:"+";font-size:1.3rem;color:var(--teal-deep);transition:.25s}
.art-acc[open]>summary::after{transform:rotate(45deg)}
.art-acc>summary:hover{color:var(--teal-deep)}
.art-acc>*:not(summary){padding:0 22px;margin:0 0 12px}
.art-acc>summary+*{padding-top:6px}
.art-acc>*:last-child{padding-bottom:18px}
.art-acc ul,.art-acc ol{padding-left:44px;padding-right:22px}
.art-acc li{margin-bottom:.35em}

/* ---- Bloc auteur ---- */
.authorbox{max-width:760px;display:flex;gap:18px;align-items:center;background:var(--paper);border-radius:16px;padding:24px 26px;box-shadow:var(--shadow-sm);margin-top:2.4em}
.authorbox .av{width:64px;height:64px;border-radius:50%;background:var(--teal-deep);color:#fff;display:flex;align-items:center;justify-content:center;font-family:var(--mont);font-weight:700;font-size:1.4rem;flex-shrink:0}
.authorbox b{font-family:var(--mont);font-size:1rem;display:block;color:var(--ink)}
.authorbox p{margin:4px 0 0;font-size:.88rem;color:var(--ink-soft)}

/* ---- FAQ (accordéon ACF) ---- */
.art-faq-sec{padding-bottom:clamp(30px,5vw,54px)}
.art-faq{max-width:820px;margin:0 auto}
.art-faq .sec-head{text-align:center;margin-bottom:28px}
.art-faq .sec-head h2 em{font-family:var(--serif);font-style:italic;font-weight:400;color:var(--teal-deep)}
.art-faq .art-acc p{color:var(--ink-soft);font-size:.98rem;line-height:1.7}
/* liens dans les accordéons (Sources, Infos, réponses) : visibles mais NON soulignés */
.art-faq a{color:var(--teal-deep);text-decoration:none;font-weight:600}
.art-faq a:hover{color:var(--teal-ink)}

/* ---- CTA (sur-titre lisible) ---- */
.cta-band .eyebrow{color:#fff}

/* ---- Lightbox galerie ---- */
.art-lightbox{position:fixed;inset:0;z-index:2100;display:none;align-items:center;justify-content:center;background:rgba(6,20,21,.93)}
.art-lightbox.is-open{display:flex}
.art-lightbox img{max-width:90vw;max-height:86vh;object-fit:contain;border-radius:6px;box-shadow:0 12px 60px rgba(0,0,0,.5)}
.art-lightbox .lb-close,.art-lightbox .lb-prev,.art-lightbox .lb-next{position:absolute;background:rgba(255,255,255,.12);border:none;color:#fff;cursor:pointer;width:48px;height:48px;border-radius:50%;font-size:1.7rem;line-height:1;display:flex;align-items:center;justify-content:center;transition:.25s}
.art-lightbox .lb-close:hover,.art-lightbox .lb-prev:hover,.art-lightbox .lb-next:hover{background:rgba(255,255,255,.26)}
.art-lightbox .lb-close{top:22px;right:22px}
.art-lightbox .lb-prev{left:22px;top:50%;transform:translateY(-50%)}
.art-lightbox .lb-next{right:22px;top:50%;transform:translateY(-50%)}

@media(max-width:900px){
  .art-layout{grid-template-columns:1fr;gap:0}
  /* Sommaire = accordéon repliable, STICKY (articles longs → toujours accessible). top = header mobile réduit. */
  .toc{position:sticky;top:80px;padding:0;margin-bottom:26px;z-index:20;box-shadow:0 10px 24px -16px rgba(11,40,42,.4)}
  /* Ouvert : liste plafonnée + scrollable pour ne pas couvrir tout l'écran (beaucoup de sections). */
  .toc-d[open]>ol{max-height:50vh;overflow:auto}
  /* Cible d'ancre : passer sous le header + le sommaire sticky replié. */
  .prose h2{scroll-margin-top:140px}
  .toc-d>summary{pointer-events:auto;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 18px;margin-bottom:0}
  .toc-d>summary::after{content:"";flex:none;width:9px;height:9px;border-right:2px solid var(--teal);border-bottom:2px solid var(--teal);transform:rotate(45deg);transition:transform .3s;margin-right:4px}
  .toc-d[open]>summary::after{transform:rotate(-135deg)}
  .toc-d>ol{padding:2px 18px 16px}
}
@media(max-width:640px){.art-lightbox .lb-prev{left:10px}.art-lightbox .lb-next{right:10px}}