/* ============================================================
   SERRURIER-ACTU — Blog/magazine layer (additive, no deps)
   Sticky latest-news header, hero slider, share, author box,
   prev/next, tags, newsletter band, light reading mode.
   All colors inherit the site's CSS custom properties.
   ============================================================ */

/* ---------- category color coding ---------- */
:root{
  --cat-securite:#c8a24a; --cat-depannage:#d9744b; --cat-tarifs:#5aa9a0;
  --cat-location:#9b8cce; --cat-metier:#c9c3b6; --cat-serrurerie:#cf9bbf;
}

/* ============================================================
   1. STICKY LATEST-NEWS HEADER (.sa-news)
   ============================================================ */
.sa-news{position:sticky;top:0;z-index:60;display:flex;align-items:stretch;
  background:var(--bg-1);border-bottom:1px solid var(--line);
  font:600 12.5px/1 var(--body);min-height:40px;overflow:hidden}
.sa-news-lab{display:flex;align-items:center;gap:7px;flex:0 0 auto;
  padding:0 15px;background:var(--signal);color:#0c0b0a;font:700 11px/1 var(--disp);
  letter-spacing:.12em;text-transform:uppercase;white-space:nowrap}
.sa-news-lab .dot{width:7px;height:7px;border-radius:50%;background:#0c0b0a;
  animation:saPulse 1.6s ease-in-out infinite}
@keyframes saPulse{0%,100%{opacity:.35}50%{opacity:1}}
.sa-news-vp{position:relative;flex:1 1 auto;overflow:hidden;display:flex;align-items:center;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 36px,#000 calc(100% - 36px),transparent);
  mask-image:linear-gradient(90deg,transparent,#000 36px,#000 calc(100% - 36px),transparent)}
.sa-news-track{display:flex;align-items:center;gap:34px;white-space:nowrap;
  padding-left:18px;will-change:transform;animation:saTicker 46s linear infinite}
.sa-news:hover .sa-news-track,.sa-news-track:focus-within{animation-play-state:paused}
.sa-news-track a{display:inline-flex;align-items:center;gap:9px;color:var(--bone-dim);
  text-decoration:none;transition:color .15s}
.sa-news-track a:hover{color:var(--bone)}
.sa-news-track a::before{content:"";width:5px;height:5px;border-radius:50%;
  background:var(--c,var(--signal));flex:0 0 auto}
.sa-news-track time{color:var(--steel);font-weight:500;margin-right:2px}
@keyframes saTicker{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){
  .sa-news-track{animation:none}
  .sa-news-vp{overflow-x:auto;scrollbar-width:none}.sa-news-vp::-webkit-scrollbar{display:none}}
@media (max-width:640px){.sa-news-lab span:not(.dot){display:none}.sa-news-lab{padding:0 12px}}

/* ============================================================
   2. HERO ARTICLE SLIDER (.sa-slider)
   ============================================================ */
.sa-slider{position:relative;margin:0 0 8px;background:var(--bg-1);
  border-bottom:1px solid var(--line)}
.sa-slider-vp{overflow:hidden}
.sa-slides{display:flex;transition:transform .6s cubic-bezier(.6,.02,.1,1)}
@media (prefers-reduced-motion:reduce){.sa-slides{transition:none}}
.sa-slide{position:relative;flex:0 0 100%;min-width:100%}
.sa-slide a{display:block;position:relative;height:clamp(320px,46vw,500px);
  text-decoration:none;color:var(--bone);overflow:hidden}
.sa-slide .sa-slide-img{position:absolute;inset:0;background-size:cover;
  background-position:center;transform:scale(1.04);transition:transform 7s ease}
.sa-slide.is-cur .sa-slide-img{transform:scale(1)}
.sa-slide::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(12,11,10,.15) 0%,rgba(12,11,10,.55) 45%,rgba(12,11,10,.94) 100%)}
.sa-slide-cap{position:absolute;left:0;right:0;bottom:0;z-index:2;
  max-width:var(--wrap);margin:0 auto;padding:0 var(--gut) 40px;width:100%}
.sa-slide-cap .sa-slide-cat{display:inline-flex;align-items:center;gap:7px;
  font:700 11px/1 var(--disp);letter-spacing:.14em;text-transform:uppercase;
  color:var(--c,var(--signal));margin-bottom:14px}
.sa-slide-cap .sa-slide-cat::before{content:"";width:22px;height:2px;background:var(--c,var(--signal))}
.sa-slide-cap h2{font:600 clamp(26px,3.6vw,46px)/1.05 var(--disp);
  letter-spacing:-.01em;margin:0 0 12px;max-width:18ch;text-wrap:balance}
.sa-slide-cap p{color:var(--bone-dim);font:400 15px/1.5 var(--body);
  margin:0 0 16px;max-width:54ch;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.sa-slide-cap .sa-slide-meta{display:inline-flex;align-items:center;gap:10px;
  font:600 12px/1 var(--body);color:var(--bone)}
.sa-slide-cap .sa-slide-meta::after{content:"Lire l'article →";color:var(--signal)}
.sa-slide-cap .sa-slide-meta time{color:var(--steel)}
/* controls */
.sa-slider-nav{position:absolute;top:50%;transform:translateY(-50%);z-index:3;
  width:46px;height:46px;border-radius:50%;border:1px solid var(--line);
  background:rgba(12,11,10,.5);backdrop-filter:blur(6px);color:var(--bone);
  display:flex;align-items:center;justify-content:center;cursor:pointer;
  transition:background .15s,border-color .15s}
.sa-slider-nav:hover{background:var(--bg-3);border-color:var(--signal)}
.sa-slider-nav.prev{left:18px}.sa-slider-nav.next{right:18px}
.sa-slider-nav svg{width:20px;height:20px}
.sa-dots{position:absolute;bottom:18px;left:50%;transform:translateX(-50%);z-index:3;
  display:flex;gap:8px}
.sa-dots button{width:8px;height:8px;border-radius:50%;border:0;padding:0;cursor:pointer;
  background:rgba(243,239,230,.32);transition:width .2s,background .2s}
.sa-dots button.is-cur{width:24px;border-radius:5px;background:var(--signal)}
@media (max-width:640px){.sa-slider-nav{display:none}.sa-slide-cap{padding-bottom:30px}}

/* ============================================================
   3. SHARE BUTTONS (.sa-share)
   ============================================================ */
.sa-share{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin:34px 0 6px}
.sa-share .sa-share-lab{font:700 11px/1 var(--disp);letter-spacing:.12em;
  text-transform:uppercase;color:var(--steel);margin-right:4px}
.sa-share button,.sa-share a{display:inline-flex;align-items:center;gap:7px;
  padding:9px 14px;border-radius:999px;border:1px solid var(--line);background:var(--bg-2);
  color:var(--bone-dim);font:600 13px/1 var(--body);text-decoration:none;cursor:pointer;
  transition:border-color .15s,color .15s,background .15s}
.sa-share button:hover,.sa-share a:hover{border-color:var(--signal);color:var(--bone);background:var(--bg-3)}
.sa-share svg{width:16px;height:16px}
.sa-share .sa-copied{color:var(--signal);border-color:var(--signal)}

/* ============================================================
   4. AUTHOR BOX / PREV-NEXT / TAGS
   ============================================================ */
.sa-author{display:flex;gap:16px;align-items:flex-start;margin:30px 0;
  padding:22px;background:var(--bg-2);border:1px solid var(--line);border-radius:14px}
.sa-author .sa-av{flex:0 0 auto;width:54px;height:54px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;background:var(--signal-soft);
  border:1px solid var(--signal);color:var(--signal);font:700 17px/1 var(--disp)}
.sa-author h4{margin:0 0 4px;font:600 16px/1.2 var(--body);color:var(--bone)}
.sa-author p{margin:0;color:var(--bone-dim);font:400 13.5px/1.55 var(--body)}
.sa-author a{color:var(--signal);text-decoration:none}
.sa-tags{display:flex;flex-wrap:wrap;gap:8px;margin:24px 0}
.sa-tags a{font:600 12px/1 var(--body);color:var(--bone-dim);text-decoration:none;
  padding:7px 12px;border-radius:999px;border:1px solid var(--line);background:var(--bg-1);transition:.15s}
.sa-tags a:hover{border-color:var(--signal);color:var(--bone)}
.sa-tags a::before{content:"#";color:var(--signal);margin-right:1px}
.sa-pn{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin:30px 0}
.sa-pn a{display:flex;flex-direction:column;gap:6px;padding:16px 18px;text-decoration:none;
  background:var(--bg-2);border:1px solid var(--line);border-radius:12px;transition:border-color .15s}
.sa-pn a:hover{border-color:var(--signal)}
.sa-pn .sa-pn-k{font:700 10.5px/1 var(--disp);letter-spacing:.12em;text-transform:uppercase;color:var(--steel)}
.sa-pn .sa-pn-t{font:600 14.5px/1.3 var(--body);color:var(--bone)}
.sa-pn a.next{text-align:right}
@media (max-width:560px){.sa-pn{grid-template-columns:1fr}.sa-pn a.next{text-align:left}}

/* ============================================================
   5. NEWSLETTER BAND (.sa-nl) — pages without #newsletter
   ============================================================ */
.sa-nl{margin:46px 0 0;padding:40px var(--gut);background:
  radial-gradient(120% 140% at 0% 0%,var(--signal-soft),transparent 60%),var(--bg-1);
  border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.sa-nl-in{max-width:var(--wrap);margin:0 auto;display:flex;flex-wrap:wrap;gap:22px;
  align-items:center;justify-content:space-between}
.sa-nl h3{margin:0 0 6px;font:600 24px/1.1 var(--disp);color:var(--bone)}
.sa-nl p{margin:0;color:var(--bone-dim);font:400 14px/1.5 var(--body);max-width:46ch}
.sa-nl form{display:flex;gap:10px;flex-wrap:wrap}
.sa-nl input{padding:13px 16px;min-width:230px;border-radius:10px;border:1px solid var(--line);
  background:var(--bg-2);color:var(--bone);font:400 14px/1 var(--body)}
.sa-nl input:focus{outline:none;border-color:var(--signal)}
.sa-nl .btn{padding:13px 22px;border-radius:10px;border:0;background:var(--signal);
  color:#0c0b0a;font:700 14px/1 var(--body);cursor:pointer}
.sa-nl-ok{color:var(--signal);font:600 14px/1.4 var(--body)}

/* ============================================================
   6. LIGHT READING MODE (toggle) — overrides core tokens
   ============================================================ */
.sa-theme-btn{display:inline-flex;align-items:center;justify-content:center;
  width:34px;height:34px;border-radius:9px;border:1px solid var(--line);
  background:var(--bg-2);color:var(--bone-dim);cursor:pointer;transition:.15s}
.sa-theme-btn:hover{border-color:var(--signal);color:var(--bone)}
.sa-theme-btn svg{width:17px;height:17px}
:root.sa-light{
  --bg:#f5f1e8; --bg-1:#efe9dc; --bg-2:#e7e0d0; --bg-3:#ddd4c1;
  --bone:#23201b; --bone-dim:#4a463d; --steel:#6d685d; --steel-dk:#8a857b;
  --line:rgba(35,32,27,.14); --line-2:rgba(35,32,27,.08);
  --signal:#9a7414; --signal-hi:#b1882a; --signal-soft:rgba(154,116,20,.12);
}
:root.sa-light .sa-slide a{color:#f3efe6}
:root.sa-light .sa-news-lab,:root.sa-light .sa-nl .btn,:root.sa-light .sa-news-track a:hover{color:#23201b}

/* ============================================================
   7. FILTER CHIPS (blog / categorie / guides listings)
   ============================================================ */
.sa-chips{display:flex;flex-wrap:wrap;gap:9px;margin:4px 0 26px;padding:0}
.sa-chips button{font:600 13px/1 var(--body);color:var(--bone-dim);background:var(--bg-2);
  border:1px solid var(--line);border-radius:999px;padding:9px 15px;cursor:pointer;transition:.15s}
.sa-chips button:hover{color:var(--bone);border-color:var(--steel)}
.sa-chips button.is-cur{color:#0c0b0a;background:var(--c,var(--signal));border-color:transparent}

/* ============================================================
   8. HOMEPAGE "DERNIERS ARTICLES" GRID
   ============================================================ */
.sa-latest{padding:54px 0;border-top:1px solid var(--line)}
.sa-latest>.wrap{max-width:var(--wrap);margin:0 auto;padding:0 var(--gut)}
.sa-latest-head{display:flex;align-items:baseline;justify-content:space-between;gap:16px;margin:0 0 22px}
.sa-latest-head h2{font:600 28px/1 var(--disp);color:var(--bone);margin:0}
.sa-latest-head a{color:var(--signal);text-decoration:none;font:600 13px/1 var(--body);white-space:nowrap}
.sa-latest-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.sa-mcard{display:flex;flex-direction:column;text-decoration:none;background:var(--bg-2);
  border:1px solid var(--line);border-radius:14px;overflow:hidden;transition:border-color .15s,transform .15s}
.sa-mcard:hover{border-color:var(--signal);transform:translateY(-2px)}
.sa-mc{display:block;aspect-ratio:16/9;background-size:cover;background-position:center}
.sa-mcard-b{padding:15px 18px 18px;display:flex;flex-direction:column;gap:8px}
.sa-mcard-cat{font:700 10.5px/1 var(--disp);letter-spacing:.12em;text-transform:uppercase}
.sa-mcard-t{font:600 16px/1.3 var(--body);color:var(--bone)}
.sa-mcard time{color:var(--steel);font:500 12px/1 var(--body)}
@media (max-width:880px){.sa-latest-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.sa-latest-grid{grid-template-columns:1fr}}

/* ============================================================
   9. CATEGORY / BLOG HERO BANNER (FLUX imagery on .page-head)
   ============================================================ */
.page-head.sa-cathero-on{position:relative;isolation:isolate;overflow:hidden;
  padding-top:clamp(56px,9vw,104px);padding-bottom:clamp(40px,6vw,64px);border-bottom:1px solid var(--line)}
.page-head.sa-cathero-on::before{content:"";position:absolute;inset:0;z-index:-2;
  background:var(--img) center/cover no-repeat;transform:scale(1.02)}
.page-head.sa-cathero-on::after{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(180deg,rgba(12,11,10,.55) 0%,rgba(12,11,10,.78) 60%,rgba(12,11,10,.92) 100%)}
.page-head.sa-cathero-on .kicker,.page-head.sa-cathero-on .idx{color:var(--c,var(--signal))}
.page-head.sa-cathero-on h1{color:var(--bone);text-shadow:0 2px 24px rgba(0,0,0,.45)}
.page-head.sa-cathero-on .lede,.page-head.sa-cathero-on p{color:var(--bone-dim)}

/* reading time badge on listing cards */
.sa-rt{display:inline-block;margin-top:10px;font:600 11px/1 var(--body);color:var(--steel)}
.sa-rt::before{content:"";display:inline-block;width:5px;height:5px;border-radius:50%;
  background:var(--signal);margin-right:7px;vertical-align:middle}

/* ============================================================
   10. HOMEPAGE NUMBERS STRIP
   ============================================================ */
.sa-nums{border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:var(--bg-1)}
.sa-nums-in{max-width:var(--wrap);margin:0 auto;padding:26px var(--gut);display:grid;grid-template-columns:repeat(4,1fr);gap:24px}
.sa-num b{display:block;font:600 clamp(24px,3vw,32px)/1 var(--disp);color:var(--signal)}
.sa-num span{display:block;margin-top:6px;font:500 12.5px/1.4 var(--body);color:var(--bone-dim)}
@media (max-width:680px){.sa-nums-in{grid-template-columns:1fr 1fr;gap:18px}}

/* ============================================================
   11. HOMEPAGE PER-RUBRIQUE ROWS
   ============================================================ */
.sa-rubs{padding:54px 0;border-top:1px solid var(--line)}
.sa-rubs>.wrap{max-width:var(--wrap);margin:0 auto;padding:0 var(--gut)}
.sa-rubs-h{font:600 28px/1 var(--disp);color:var(--bone);margin:0 0 24px}
.sa-rub{margin:0 0 34px}
.sa-rub-head{display:flex;align-items:center;gap:14px;text-decoration:none;margin:0 0 16px;padding-bottom:12px;border-bottom:1px solid var(--line)}
.sa-rub-thumb{width:46px;height:46px;border-radius:9px;background-size:cover;background-position:center;flex:0 0 auto;border:1px solid var(--line)}
.sa-rub-name{font:600 19px/1 var(--disp);color:var(--c,var(--signal));flex:1}
.sa-rub-all{font:600 12px/1 var(--body);color:var(--bone-dim)}
.sa-rub-head:hover .sa-rub-all{color:var(--bone)}
.sa-rub-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
@media (max-width:880px){.sa-rub-grid{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.sa-rub-grid{grid-template-columns:1fr}}

/* ============================================================
   12. ARTICLE "À LIRE ENSUITE"
   ============================================================ */
.sa-readnext{display:block;margin:30px 0;padding:22px 24px;border-radius:14px;text-decoration:none;
  background:radial-gradient(120% 140% at 0 0,var(--signal-soft),transparent 60%),var(--bg-2);
  border:1px solid var(--line);transition:border-color .15s}
.sa-readnext:hover{border-color:var(--signal)}
.sa-readnext .sa-rn-k{font:700 10.5px/1 var(--disp);letter-spacing:.14em;text-transform:uppercase;color:var(--signal)}
.sa-readnext .sa-rn-t{display:block;margin-top:8px;font:600 clamp(18px,2.4vw,22px)/1.25 var(--disp);color:var(--bone)}
.sa-readnext .sa-rn-d{display:block;margin-top:6px;font:400 13.5px/1.5 var(--body);color:var(--bone-dim)}