/* article + conseils index styles (thème clair) */

/* conseils index grid */
.conseils-grid{ grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap:30px; }
.c-card{ display:flex; flex-direction:column; align-items:flex-start; gap:14px; }
.c-card .ph, .c-card .card-img{ width:100%; aspect-ratio:16/9; object-fit:cover; display:block; border-radius: var(--r); }
.c-card h2{ font-size:1.5rem; }
.c-card .read{ font-family:var(--font-display); font-weight:700; color:var(--green-deep); margin-top:auto; padding-top:6px; }

/* article */
.article-hero{ position:relative; padding-block: clamp(44px,6vw,84px) clamp(28px,4vw,44px); border-bottom:1px solid var(--line); overflow:hidden; }
.article-hero-bg{ position:absolute; inset:0; z-index:0; pointer-events:none; background: radial-gradient(50% 70% at 88% 6%, rgba(107,142,87,.16), transparent 60%); }
.article-hero .wrap{ position:relative; z-index:1; max-width:820px; }
.article-meta{ display:flex; flex-wrap:wrap; gap:10px 18px; align-items:center; margin-top:22px; color:var(--ink-faint); font-size:.9rem; }
.article-meta .tag{ background:var(--green-soft); }
.article-hero h1{ font-size: clamp(2rem,4.6vw,3.4rem); font-weight:900; max-width:18ch; }

.article-body{ max-width:760px; margin:0 auto; padding-block: clamp(40px,5vw,72px); }
.article-cover{ margin-bottom:44px; }
.article-band{ margin: 48px 0 8px; }
.article-band img{ display:block; width:100%; height: clamp(180px, 26vw, 300px); object-fit:cover; object-position:center; border-radius: var(--r); }
.article-cover .ph, .article-cover .card-img{ width:100%; aspect-ratio:16/8; object-fit:cover; display:block; border-radius: var(--r); }
.article-body h2{ font-size: clamp(1.5rem,2.6vw,2rem); margin: 44px 0 14px; }
.article-body h3{ font-size: 1.25rem; margin: 30px 0 10px; color:var(--ink); }
.article-body p{ color:var(--ink-soft); }
.article-body p, .article-body li{ font-size:1.12rem; line-height:1.78; }
.article-body ul, .article-body ol{ color:var(--ink-soft); padding-left:1.3em; margin:0 0 1.3em; }
.article-body li{ margin-bottom:.5em; }
.article-body strong{ color:var(--ink); }
.article-body a.inline{ color:var(--green-deep); text-decoration:underline; text-underline-offset:3px; }
.article-lead{ font-size:1.28rem !important; line-height:1.6; color:var(--ink) !important; margin-bottom:8px; }

.callout{ border-left:4px solid var(--green); background:var(--green-soft); padding:20px 24px; border-radius:0 var(--r) var(--r) 0; margin:28px 0; }
.callout p{ margin:0; color:var(--ink); }
.callout b{ color:var(--green-deep); font-family:var(--font-display); }
.callout--warn{ border-left-color: var(--gold); background: #fbf3df; }
.callout--warn p{ font-style: italic; }
.callout--warn b{ color: #8a6410; }

.price-table{ width:100%; border-collapse:collapse; margin:24px 0; font-size:1rem; background:var(--surface); border:1px solid var(--line); border-radius:var(--r); overflow:hidden; }
.price-table th, .price-table td{ text-align:left; padding:14px 16px; border-bottom:1px solid var(--line); }
.price-table th{ font-family:var(--font-display); color:var(--ink); font-size:.82rem; text-transform:uppercase; letter-spacing:.08em; background:var(--surface-2); }
.price-table td{ color:var(--ink-soft); }
.price-table td:last-child{ color:var(--green-deep); font-family:var(--font-display); font-weight:700; white-space:nowrap; }
.price-table tr:last-child td{ border-bottom:0; }

.faq{ margin:30px 0; display:grid; gap:12px; }
.faq details{ border:1px solid var(--line); border-radius:var(--r); background:var(--surface); padding:0 20px; }
.faq summary{ cursor:pointer; padding:18px 0; font-family:var(--font-display); font-weight:700; font-size:1.06rem; list-style:none; display:flex; justify-content:space-between; align-items:center; gap:16px; color:var(--ink); }
.faq summary::-webkit-details-marker{ display:none; }
.faq summary::after{ content:"+"; color:var(--green); font-size:1.5rem; line-height:1; transition:transform .2s; }
.faq details[open] summary::after{ transform:rotate(45deg); }
.faq details p{ margin:0 0 18px; color:var(--ink-soft); font-size:1.02rem; }

.author-box{ display:flex; gap:16px; align-items:center; margin-top:48px; padding-top:28px; border-top:1px solid var(--line); }
.author-box .av{ width:54px; height:54px; border-radius:50%; background:var(--green); display:flex; align-items:center; justify-content:center; font-family:var(--font-display); font-weight:900; color:#fff; flex:none; }
.author-box b{ font-family:var(--font-display); color:var(--ink); }
.author-box span{ display:block; color:var(--ink-soft); font-size:.92rem; }

.article-cta{ background:var(--green-soft); border:1px solid var(--line); border-radius:var(--r); padding: clamp(24px,3vw,36px); margin-top:40px; text-align:center; }
.article-cta h3{ font-size:1.5rem; margin-bottom:8px; }
.article-cta .lead{ margin-bottom:20px; color:var(--ink-soft); }
.article-cta .btn{ margin:0 6px 8px; }

.related{ border-top:1px solid var(--line); }
.related-grid{ grid-template-columns:1fr 1fr; gap:24px; }

@media (max-width: 680px){
  .conseils-grid, .related-grid{ grid-template-columns:1fr; }
}