/* ============================================================
   MG — Section Conseils (éditorial)
   Dépend de /refonte-porte-fenetre-alu/styles.css (:root, .btn, .wrap)
   et /refonte-porte-fenetre-alu/sections.css (.header, .footer, .drawer)
   ============================================================ */

/* ---- Fil d'ariane ---- */
.c-crumb{background:var(--surface-2);border-bottom:1px solid var(--line);font-size:.86rem;}
.c-crumb .wrap{display:flex;align-items:center;flex-wrap:wrap;gap:.45em;padding:.85rem var(--gutter);}
.c-crumb a{color:var(--muted);text-decoration:none;}
.c-crumb a:hover{color:var(--accent);text-decoration:underline;}
.c-crumb .sep{color:var(--muted-2);}
.c-crumb .here{color:var(--text);font-weight:600;}

/* ---- Hero article ---- */
.c-hero{background:linear-gradient(170deg,var(--teal) 0%,var(--teal-900) 100%);color:#fff;padding:clamp(38px,6vw,68px) 0 clamp(46px,7vw,80px);}
.c-hero .wrap{max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gutter);}
.c-hero .kicker{display:inline-flex;align-items:center;gap:.5em;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.18);color:#fff;font-size:.76rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;padding:.42em .9em;border-radius:100px;}
.c-hero h1{font-family:var(--font-head);font-size:clamp(1.75rem,3.6vw,2.85rem);line-height:1.12;font-weight:800;margin:1.1rem 0 0;max-width:22ch;letter-spacing:-.02em;}
.c-hero .lede{margin:1.05rem 0 0;font-size:clamp(1rem,1.5vw,1.15rem);line-height:1.6;color:rgba(255,255,255,.82);max-width:62ch;}
.c-hero .meta{margin-top:1.5rem;display:flex;flex-wrap:wrap;gap:.5em 1.4em;font-size:.85rem;color:rgba(255,255,255,.62);}
.c-hero .meta b{color:rgba(255,255,255,.9);font-weight:600;}

/* ---- Corps ---- */
.c-main{background:var(--surface);}
.c-main .wrap{max-width:var(--maxw);margin-inline:auto;padding:clamp(34px,5vw,58px) var(--gutter) clamp(46px,7vw,84px);display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:clamp(28px,4vw,58px);align-items:start;}
@media(max-width:980px){.c-main .wrap{grid-template-columns:1fr;}}

.c-body{max-width:74ch;font-size:1.045rem;line-height:1.72;color:var(--text);}
.c-body>p{margin:0 0 1.15em;}
.c-body h2{font-family:var(--font-head);font-size:clamp(1.32rem,2.2vw,1.7rem);font-weight:800;line-height:1.24;letter-spacing:-.015em;margin:2.5em 0 .75em;padding-top:.2em;position:relative;scroll-margin-top:90px;}
.c-body h2::before{content:"";display:block;width:44px;height:4px;border-radius:4px;background:var(--brand);margin-bottom:.7rem;}
.c-body h2:first-child{margin-top:0;}
.c-body h3{font-family:var(--font-head);font-size:1.08rem;font-weight:700;margin:1.9em 0 .5em;color:var(--teal);}
.c-body ul,.c-body ol{margin:0 0 1.25em;padding-left:1.25em;}
.c-body li{margin:.42em 0;}
.c-body li::marker{color:var(--brand);font-weight:700;}
.c-body strong{font-weight:700;color:var(--teal-900);}
.c-body a{color:var(--accent);text-decoration:underline;text-underline-offset:2px;text-decoration-thickness:1px;}
.c-body a:hover{color:var(--accent-700);}

/* ---- Sommaire ---- */
.c-toc{border:1px solid var(--line);border-left:4px solid var(--brand);background:var(--surface-2);border-radius:var(--r);padding:1.15rem 1.3rem;margin:0 0 2.3em;}
.c-toc .t{font-family:var(--font-head);font-size:.78rem;font-weight:800;letter-spacing:.09em;text-transform:uppercase;color:var(--muted);margin-bottom:.6rem;}
.c-toc ol{margin:0;padding-left:1.15em;font-size:.96rem;}
.c-toc li{margin:.3em 0;}
.c-toc a{color:var(--text);text-decoration:none;}
.c-toc a:hover{color:var(--accent);text-decoration:underline;}

/* ---- Encadrés ---- */
.c-note{border-radius:var(--r);padding:1.05rem 1.25rem;margin:1.8em 0;font-size:.985rem;line-height:1.65;border:1px solid var(--line);background:var(--surface-2);}
.c-note .nt{display:block;font-family:var(--font-head);font-weight:800;font-size:.8rem;letter-spacing:.07em;text-transform:uppercase;margin-bottom:.4rem;}
.c-note.tip{background:var(--accent-050);border-color:#cddffa;}
.c-note.tip .nt{color:var(--accent-700);}
.c-note.warn{background:var(--brand-050);border-color:#f3d3c7;}
.c-note.warn .nt{color:var(--brand-700);}
.c-note p:last-child{margin-bottom:0;}

/* ---- Tableaux ---- */
.c-tbl{width:100%;border-collapse:collapse;margin:1.6em 0;font-size:.93rem;border:1px solid var(--line);border-radius:var(--r);overflow:hidden;}
.c-tbl-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;}
.c-tbl th{background:var(--teal);color:#fff;font-family:var(--font-head);font-weight:700;text-align:left;padding:.72em .9em;font-size:.86rem;letter-spacing:.01em;}
.c-tbl td{padding:.68em .9em;border-top:1px solid var(--line);vertical-align:top;}
.c-tbl tbody tr:nth-child(even){background:var(--surface-2);}

/* ---- FAQ ---- */
.c-faq{margin-top:2.4em;}
.c-faq details{border:1px solid var(--line);border-radius:var(--r);background:var(--surface-2);margin:.6em 0;overflow:hidden;}
.c-faq summary{cursor:pointer;list-style:none;padding:.95em 1.15em;font-family:var(--font-head);font-weight:700;font-size:1rem;display:flex;justify-content:space-between;gap:1em;align-items:center;color:var(--teal-900);}
.c-faq summary::-webkit-details-marker{display:none;}
.c-faq summary::after{content:"+";font-size:1.35rem;line-height:1;color:var(--brand);font-weight:700;flex:none;}
.c-faq details[open] summary::after{content:"–";}
.c-faq .a{padding:0 1.15em 1.05em;font-size:.98rem;line-height:1.68;color:var(--muted);}
.c-faq .a p:last-child{margin-bottom:0;}

/* ---- CTA produit ---- */
.c-cta{margin:2.4em 0 0;background:linear-gradient(140deg,var(--teal) 0%,var(--teal-700) 100%);color:#fff;border-radius:var(--r-lg);padding:clamp(1.4rem,3vw,2.1rem);}
.c-cta h3{font-family:var(--font-head);font-size:1.25rem;font-weight:800;margin:0 0 .5rem;color:#fff;}
.c-cta p{margin:0 0 1.1rem;color:rgba(255,255,255,.8);font-size:.98rem;line-height:1.6;max-width:56ch;}
.c-cta .row{display:flex;flex-wrap:wrap;gap:.65rem;}

/* ---- Aside ---- */
.c-aside{position:sticky;top:20px;display:grid;gap:1rem;}
@media(max-width:980px){.c-aside{position:static;}}
.c-box{border:1px solid var(--line);border-radius:var(--r);background:var(--surface);box-shadow:var(--shadow-sm);padding:1.15rem 1.25rem;}
.c-box h4{font-family:var(--font-head);font-size:.78rem;font-weight:800;letter-spacing:.09em;text-transform:uppercase;color:var(--muted);margin:0 0 .75rem;}
.c-box a.lnk{display:block;padding:.5em 0;border-top:1px solid var(--line);color:var(--text);text-decoration:none;font-size:.94rem;line-height:1.45;}
.c-box a.lnk:first-of-type{border-top:0;padding-top:0;}
.c-box a.lnk:hover{color:var(--accent);}
.c-box.call{background:var(--teal);border-color:var(--teal);color:#fff;}
.c-box.call h4{color:rgba(255,255,255,.6);}
.c-box.call .num{display:block;font-family:var(--font-head);font-size:1.42rem;font-weight:800;color:#fff;text-decoration:none;letter-spacing:-.01em;}
.c-box.call .hrs{display:block;font-size:.85rem;color:rgba(255,255,255,.68);margin-top:.25rem;}
.c-box.call .btn{margin-top:.9rem;}

/* ---- Index Conseils ---- */
.c-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(310px,1fr));gap:1.15rem;margin-top:.4rem;}
.c-card{display:flex;flex-direction:column;border:1px solid var(--line);border-radius:var(--r-lg);background:var(--surface);overflow:hidden;text-decoration:none;color:inherit;transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease;}
.c-card:hover{transform:translateY(-3px);box-shadow:var(--shadow);border-color:var(--line-2);}
.c-card .cov{height:104px;background:linear-gradient(135deg,var(--teal) 0%,var(--teal-700) 100%);position:relative;}
.c-card .cov.b2{background:linear-gradient(135deg,#8a3a18 0%,var(--brand) 100%);}
.c-card .cov.b3{background:linear-gradient(135deg,#3c4a52 0%,#6d7b83 100%);}
.c-card .cov.b4{background:linear-gradient(135deg,#1f55b0 0%,#2f6fd6 100%);}
.c-card .cov.b5{background:linear-gradient(135deg,#2b5a3f 0%,#4c8a63 100%);}
.c-card .bd{padding:1.1rem 1.2rem 1.3rem;display:flex;flex-direction:column;flex:1;}
.c-card .cat{font-family:var(--font-head);font-size:.72rem;font-weight:800;letter-spacing:.09em;text-transform:uppercase;color:var(--brand);}
.c-card h2{font-family:var(--font-head);font-size:1.1rem;font-weight:800;line-height:1.3;margin:.45rem 0 .5rem;letter-spacing:-.01em;}
.c-card p{margin:0 0 1rem;font-size:.93rem;line-height:1.58;color:var(--muted);}
.c-card .go{margin-top:auto;font-size:.88rem;font-weight:700;color:var(--accent);}
.c-intro{max-width:66ch;font-size:1.045rem;line-height:1.7;color:var(--muted);margin:0 0 2rem;}
.c-index .wrap{display:block;}

/* ---- Correctifs contraste (05/08) ---- */
.c-hero h1,
.c-hero h2{color:#fff;}
.c-cta h3{color:#fff;}
.c-cta .btn-ghost{color:#fff;background:transparent;border-color:rgba(255,255,255,.34);}
.c-cta .btn-ghost:hover{background:rgba(255,255,255,.12);border-color:#fff;color:#fff;}
.c-box.call .btn-white{color:var(--teal);}

/* ---- Les .btn échappent au style de lien du corps d'article ---- */
.c-body .btn{text-decoration:none;}
.c-body .btn-primary,.c-body .btn-accent,.c-body .btn-dark{color:#fff;}
.c-body .btn-primary:hover,.c-body .btn-accent:hover,.c-body .btn-dark:hover{color:#fff;}
.c-body .btn-white,.c-box.call .btn-white{color:var(--teal);}
.c-cta .btn-ghost,.c-cta .btn-ghost:hover{color:#fff;}

/* ---- Bloc « Continuer la lecture » en bas d'article ---- */
.c-more{background:var(--surface-2);border-top:1px solid var(--line);padding:clamp(38px,5vw,64px) 0 clamp(46px,6vw,76px);}
.c-more .wrap{max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gutter);}
.c-more-h{font-family:var(--font-head);font-size:clamp(1.3rem,2.2vw,1.65rem);font-weight:800;letter-spacing:-.015em;margin:0 0 1.4rem;position:relative;}
.c-more-h::before{content:"";display:block;width:44px;height:4px;border-radius:4px;background:var(--brand);margin-bottom:.7rem;}
.c-more .c-grid{margin-top:0;}
.c-card h3{font-family:var(--font-head);font-size:1.06rem;font-weight:800;line-height:1.3;margin:.45rem 0 .5rem;letter-spacing:-.01em;color:var(--text);}

/* ---- Correctif débordement horizontal mobile ---- */
@media(max-width:980px){.c-main .wrap{grid-template-columns:minmax(0,1fr);}}
.c-body,.c-aside,.c-main .wrap>*{min-width:0;}
.c-tbl-wrap{max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch;}
.c-tbl{min-width:460px;}
.c-body pre,.c-body code{overflow-x:auto;max-width:100%;}
.c-hero h1,.c-body h2,.c-body h3{overflow-wrap:break-word;}
@media(max-width:640px){
  .c-tbl{font-size:.86rem;}
  .c-tbl th,.c-tbl td{padding:.55em .7em;}
  .c-tbl-wrap{position:relative;}
}