/* ============================================================
   sidecol.css — colonne latérale contextuelle.
   Une seule mécanique visuelle pour trois contextes (article de
   blog, guide d'achat, outil), avec un contenu propre à chacun.
   ============================================================ */
.sc-layout{display:grid;grid-template-columns:minmax(0,1fr) 316px;gap:clamp(24px,3vw,46px);align-items:start;max-width:1180px;margin-inline:auto}
.sc-main{min-width:0}
.sc{position:sticky;top:calc(var(--hdr,74px) + 18px);display:flex;flex-direction:column;gap:12px}
/* Si la colonne dépasse la hauteur de l'écran, elle cesse d'être collante
   plutôt que de créer une zone de défilement interne. */
@supports (height:100dvh){.sc{align-self:start}}

.sc-box{background:#fff;border:1px solid var(--b,#E8E1DD);border-radius:14px;padding:16px 17px}
.sc-box.ink{background:var(--ink,#17140F);border-color:transparent}
.sc-h{display:flex;align-items:center;gap:8px;margin:0 0 12px;font-family:var(--font-body);font-weight:700;font-size:10.5px;letter-spacing:.11em;text-transform:uppercase;color:var(--soft,#7D726D)}
.sc-h svg{color:var(--coral-d,#C4614A)}
.sc-box.ink .sc-h{color:rgba(255,255,255,.5)}

/* Sommaire */
.sc-toc{max-height:44vh;overflow:auto;scrollbar-width:thin;display:flex;flex-direction:column;gap:1px;margin:0;padding:0;list-style:none;counter-reset:sc}
.sc-toc a{display:flex;gap:9px;padding:7px 9px;border-radius:8px;font-size:13.5px;line-height:1.4;color:var(--ink2,#3A3330);text-decoration:none}
.sc-toc a::before{counter-increment:sc;content:counter(sc);flex:none;width:17px;font-family:var(--font-body);font-weight:700;font-size:11px;color:var(--soft,#7D726D);padding-top:2px}
.sc-toc a:hover{background:var(--bg2,#FAF7F5)}
.sc-toc a.on{background:var(--bg2,#FAF7F5);color:var(--coral-d,#C4614A);font-weight:600}
.sc-toc a.on::before{color:var(--coral,#E07B65)}
.sc-toc li.lvl3 a{padding-left:26px;font-size:13px;color:var(--mid,#6B615C)}
.sc-toc li.lvl3 a::before{content:'·';width:10px}

/* Liste de liens */
.sc-list{display:flex;flex-direction:column;gap:2px}
.sc-item{display:flex;align-items:center;gap:10px;padding:9px;border-radius:9px;text-decoration:none;color:var(--ink2,#3A3330)}
.sc-item:hover{background:var(--bg2,#FAF7F5)}
.sc-item[aria-current=page]{background:var(--bg2,#FAF7F5);color:var(--coral-d,#C4614A)}
.sc-item i{flex:none;width:30px;height:30px;border-radius:8px;background:var(--bg2,#FAF7F5);display:grid;place-items:center;color:var(--soft,#7D726D)}
.sc-item[aria-current=page] i{background:#FDF2EE;color:var(--coral-d,#C4614A)}
.sc-item b{display:block;font-family:var(--font-body);font-size:13.5px;font-weight:600;line-height:1.25}
.sc-item span{display:block;font-size:12px;color:var(--soft,#7D726D);line-height:1.3}

/* Produits cités / prix du jour */
.sc-prod{display:flex;align-items:center;gap:11px;padding:9px 0;border-bottom:1px solid var(--bg2,#F4EFEB);text-decoration:none}
.sc-prod:last-child{border-bottom:0}
.sc-prod .m{position:relative;flex:none;width:44px;height:44px;border-radius:9px;overflow:hidden;background:var(--bg2,#FAF7F5);display:grid;place-items:center;color:var(--b2,#DDD0C8)}
.sc-prod .m img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.sc-prod .t{min-width:0;flex:1}
.sc-prod .t b{display:block;font-family:var(--font-display);font-size:14px;font-weight:600;line-height:1.2;color:var(--ink,#1C1C1C);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sc-prod .t span{font-size:11.5px;color:var(--soft,#7D726D)}
.sc-prod .p{flex:none;font-family:var(--font-display);font-size:14.5px;font-weight:600;color:var(--coral-d,#C4614A);font-variant-numeric:tabular-nums;white-space:nowrap}

/* Encart d'action */
.sc-box.ink h4{margin:0 0 7px;font-family:var(--font-display);font-size:17.5px;font-weight:500;letter-spacing:-.01em;color:#fff}
.sc-box.ink p{margin:0 0 14px;font-size:13px;line-height:1.55;color:rgba(255,255,255,.62)}
.sc-cta{display:block;text-align:center;padding:11px 16px;border-radius:999px;background:var(--coral,#E07B65);color:#fff;font-family:var(--font-body);font-size:13.5px;font-weight:700;text-decoration:none}
.sc-cta:hover{background:#fff;color:var(--ink,#1C1C1C)}
.sc-nl{display:flex;flex-direction:column;gap:8px}
.sc-nl input{height:42px;padding:0 14px;border-radius:999px;border:1px solid rgba(255,255,255,.16);background:rgba(255,255,255,.07);color:#fff;font-family:inherit;font-size:13.5px;outline:0}
.sc-nl input::placeholder{color:rgba(255,255,255,.4)}
.sc-nl input:focus{border-color:var(--coral,#E07B65)}
.sc-nl button{height:42px;border:0;border-radius:999px;background:var(--coral,#E07B65);color:#fff;font-family:inherit;font-size:13.5px;font-weight:700;cursor:pointer}
.sc-nl button:hover{background:#fff;color:var(--ink,#1C1C1C)}
.sc-fine{margin:9px 0 0;font-size:11.5px;color:rgba(255,255,255,.4)}

/* Chiffres compacts */
.sc-nums{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.sc-num u{display:block;text-decoration:none;font-size:9.5px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--soft,#7D726D);margin-bottom:2px}
.sc-num b{font-family:var(--font-display);font-size:19px;font-weight:600;color:var(--ink,#1C1C1C);font-variant-numeric:tabular-nums}
.sc-note{margin:11px 0 0;font-size:11.5px;line-height:1.5;color:var(--soft,#7D726D)}

@media(max-width:1080px){
  .sc-layout{grid-template-columns:1fr}
  .sc{position:static;max-height:none;overflow:visible;flex-direction:row;flex-wrap:wrap}
  .sc-box{flex:1 1 280px}
  .sc-box[data-sc-only-desktop]{display:none}
}
