/* ============================================================
   COCON — CSS spécifique aux pages d'article du cocon SEO.
   Chargé après maestro.css (dont il réutilise les tokens et
   surcharge la largeur de lecture). Uniquement sur ces pages.
   ============================================================ */

/* Largeur de lecture plus étroite que le reste du site */
.wrap{max-width:1000px}

/* Titres d'article (sélecteurs d'élément, complémentaires des .h1/.h2/.h3 utilitaires) */
h1{font-size:clamp(29px,4vw,44px);font-weight:700;letter-spacing:-.03em;line-height:1.06}
h2{font-size:clamp(22px,3vw,30px);font-weight:700;letter-spacing:-.02em;line-height:1.14;margin-bottom:6px}
h3{font-size:18px;font-weight:700;letter-spacing:-.01em}

.breadcrumb{font-size:13px;color:var(--maestro-muted);padding:16px 0 0}
.breadcrumb a{color:var(--maestro-muted)}.breadcrumb a:hover{color:var(--maestro-green-strong)}

.hero{padding:34px 0 40px;background:radial-gradient(900px 380px at 85% -10%,rgba(27,168,77,.09),transparent 60%)}
.hero h1{margin:10px 0 14px;max-width:16ch}
.lead{font-size:17.5px;color:var(--maestro-ink-soft);max-width:60ch}
.hero-cta{display:flex;gap:12px;margin-top:22px;flex-wrap:wrap}

section{padding:40px 0}
.sec-mist{background:var(--maestro-mist)}
.sec-dark{background:var(--maestro-ink);color:#fff}
.sec-dark h2,.sec-dark h3{color:#fff}.sec-dark p{color:#C7D0CA}
.sec-head{max-width:640px;margin-bottom:22px}.sec-head h2{margin-top:8px}

.prose p{font-size:16.5px;color:var(--maestro-ink-soft);margin-bottom:14px}
.prose p b{color:var(--maestro-ink)}

.ticks{list-style:none;margin:6px 0 4px}
.ticks li{position:relative;padding-left:28px;margin-bottom:9px;color:var(--maestro-ink-soft);font-size:16px}
.ticks li:before{content:"\2713";position:absolute;left:0;top:0;color:var(--maestro-green);font-weight:800}

.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:8px}
.card{background:#fff;border:1px solid var(--maestro-line);border-radius:var(--maestro-radius-lg);padding:22px;box-shadow:var(--maestro-shadow-sm)}
.card h3{margin-bottom:6px}.card p{font-size:14.5px;color:var(--maestro-ink-soft)}

.two{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:8px}
.panel{background:#fff;border:1px solid var(--maestro-line);border-radius:var(--maestro-radius-lg);padding:24px}
.panel.g{background:var(--maestro-success-surface);border-color:var(--maestro-success-border)}

.cmp{width:100%;border-collapse:collapse;margin-top:8px;font-size:15px;background:#fff;border:1px solid var(--maestro-line);border-radius:var(--maestro-radius-lg);overflow:hidden}
.cmp th,.cmp td{padding:13px 16px;text-align:left;border-bottom:1px solid var(--maestro-line);vertical-align:top}
.cmp th{background:var(--maestro-mist);font-size:12px;text-transform:uppercase;letter-spacing:.06em;color:var(--maestro-muted)}
.cmp td:first-child{font-weight:600;color:var(--maestro-ink)}
.cmp .ok{color:var(--maestro-green-strong);font-weight:600}.cmp .no{color:var(--maestro-muted)}
.cmp tr:last-child td{border-bottom:none}

.faq-list{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:8px}
.faq-item{background:#fff;border:1px solid var(--maestro-line);border-radius:var(--maestro-radius-lg);padding:20px 22px;box-shadow:var(--maestro-shadow-sm)}
.faq-item h3{font-size:16px;margin-bottom:7px}.faq-item p{font-size:14.5px;color:var(--maestro-ink-soft)}

.ctaband{background:var(--maestro-ink);border-radius:var(--maestro-radius-lg);padding:34px;text-align:center;color:#fff}
.ctaband h2{color:#fff}.ctaband p{color:#C7D0CA;margin:8px auto 18px;max-width:52ch}

.related{display:flex;flex-wrap:wrap;gap:10px;margin-top:8px}
.related a{background:#fff;border:1px solid var(--maestro-line);border-radius:999px;padding:8px 16px;font-size:14px;color:var(--maestro-ink-soft);font-weight:500}
.related a:hover{border-color:var(--maestro-success-border);background:var(--maestro-success-surface);color:var(--maestro-green-strong)}

.bp-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:8px}
.bp{position:relative;background:#fff;border:1px solid var(--maestro-line);border-radius:var(--maestro-radius-lg);padding:18px 18px 18px 58px;box-shadow:var(--maestro-shadow-sm)}
.bp .num{position:absolute;left:16px;top:16px;width:30px;height:30px;border-radius:50%;background:var(--maestro-success-surface);color:var(--maestro-green-strong);font-weight:700;font-size:15px;display:flex;align-items:center;justify-content:center;border:1px solid var(--maestro-success-border)}
.bp h3{font-size:15.5px;margin-bottom:4px}
.bp p{font-size:14px;color:var(--maestro-ink-soft)}

@media(max-width:820px){.cards{grid-template-columns:1fr}.two{grid-template-columns:1fr}.faq-list{grid-template-columns:1fr}.bp-grid{grid-template-columns:1fr}}