/* ============================================================
   Studio Abis — Blog / articles (long-form, DA du site)
   (charge styles.css avant : tokens, nav, footer, fonts)
   ============================================================ */

.article{max-width:760px;margin:0 auto;padding:0 var(--pad)}

.article__head{padding-top:clamp(6.5rem, 4rem + 6vw, 9.5rem)}
.breadcrumb{font-size:.78rem;color:var(--ink-soft);margin-bottom:1.6rem}
.breadcrumb a:hover{color:var(--orange)}
.breadcrumb span{opacity:.5;margin:0 .4rem}
.article__eyebrow{
  display:inline-flex;align-items:center;gap:.55rem;
  font-size:.66rem;letter-spacing:.07em;text-transform:uppercase;color:var(--ink-soft);margin-bottom:1rem;
}
.article__eyebrow i{width:8px;height:8px;background:var(--orange);display:block}
.article__title{
  font-family:var(--serif);font-weight:500;
  font-size:clamp(2rem, 1rem + 3vw, 3.1rem);
  line-height:1.1;letter-spacing:-0.03em;color:var(--ink);max-width:20ch;
}
.article__title .hl{color:var(--orange)}
.article__meta{margin-top:1.2rem;font-size:.8rem;color:var(--ink-soft);display:flex;gap:1rem;flex-wrap:wrap}
.article__lead{margin-top:1.4rem;font-size:1.1rem;line-height:1.6;color:#403c36;max-width:60ch}

.article__hero{
  margin:clamp(2rem, 1rem + 3vw, 3.5rem) 0;
  border:1px solid var(--card-line);border-radius:8px;overflow:hidden;background:var(--cream-2);
}
.article__hero img{width:100%;display:block;aspect-ratio:16/9;object-fit:cover}

.article__body{font-size:1.03rem;line-height:1.78;color:#33302b}
.article__body h2{
  font-family:var(--serif);font-weight:500;
  font-size:clamp(1.5rem, 1rem + 1.5vw, 2rem);
  letter-spacing:-0.02em;line-height:1.18;margin:2.6rem 0 1rem;color:var(--ink);
}
.article__body h3{
  font-family:var(--serif);font-weight:500;font-size:1.3rem;
  letter-spacing:-0.015em;margin:1.9rem 0 .5rem;color:var(--ink);
}
.article__body p{margin:0 0 1.2rem}
.article__body ul{margin:0 0 1.4rem;padding-left:0;list-style:none}
.article__body li{position:relative;padding-left:1.5rem;margin-bottom:.55rem}
.article__body li::before{content:"+";position:absolute;left:0;top:0;color:var(--orange);font-weight:600}
.article__body a:not(.article__btn){color:var(--orange);text-decoration:underline;text-underline-offset:2px;text-decoration-thickness:1px}
.article__body strong{color:var(--ink);font-weight:600}

/* encart résultat chiffré */
.result{
  background:#f6f4f1;border:1px solid var(--card-line);border-left:3px solid var(--orange);
  padding:1.3rem 1.6rem;margin:2.2rem 0;border-radius:4px;
}
.result p{margin:0;font-size:1rem;line-height:1.6}
.result strong{color:var(--orange);font-weight:600}

/* FAQ (couplée au schema FAQPage) */
.faq{margin:2.8rem 0 1rem;border-top:1px solid var(--hair)}
.faq__item{border-bottom:1px solid var(--hair);padding:1.3rem 0}
.faq__q{font-family:var(--serif);font-weight:500;font-size:1.18rem;letter-spacing:-0.01em;margin-bottom:.5rem;color:var(--ink)}
.faq__a{margin:0;color:#403c36;line-height:1.7}

/* CTA fin d'article */
.article__cta{
  margin:3rem 0 0;padding:clamp(1.8rem, 1rem + 2vw, 2.6rem);
  border:1px solid var(--card-line);background:#f6f4f1;border-radius:6px;box-shadow:0 1px 3px rgba(32,32,32,.05);text-align:center;
}
.article__cta h2{font-family:var(--serif);font-weight:500;font-size:clamp(1.4rem, 1rem + 1.4vw, 1.9rem);letter-spacing:-0.02em;margin:0 0 .6rem;color:var(--ink)}
.article__cta p{margin:0 auto 1.4rem;max-width:48ch;color:var(--ink-soft);font-size:.95rem;line-height:1.6}
.article__btn{
  display:inline-flex;align-items:center;justify-content:center;min-height:52px;padding:0 2rem;
  background:var(--ink);color:#fff;border:1px solid var(--ink);border-radius:4px;text-decoration:none;
  font-size:.8rem;letter-spacing:.04em;text-transform:uppercase;transition:background .2s,border-color .2s,color .2s;
}
.article__btn:hover{background:var(--orange);border-color:var(--orange);color:#fff}

/* articles liés */
.related{max-width:1280px;margin:clamp(3rem, 2rem + 3vw, 5rem) auto clamp(4rem, 2.5rem + 4vw, 6.5rem);padding:0 var(--pad)}
.related h2{font-family:var(--serif);font-weight:500;font-size:clamp(1.3rem, 1rem + 1vw, 1.7rem);letter-spacing:-0.02em;margin-bottom:clamp(1rem, .6rem + 1vw, 1.6rem)}
.related__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1rem, .4rem + 1.2vw, 1.8rem)}
@media (max-width:820px){ .related__grid{grid-template-columns:repeat(2,1fr)} }
@media (max-width:560px){ .related__grid{grid-template-columns:1fr} }

/* ---------- index du blog ---------- */
.blogwrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--pad)}
.bloghead{padding:clamp(7rem, 4rem + 6vw, 10rem) 0 clamp(2rem, 1rem + 2vw, 3rem)}
.bloghead h1{font-family:var(--serif);font-weight:500;font-size:clamp(2.2rem,1rem + 3.4vw,3.6rem);letter-spacing:-0.03em;line-height:1.05;margin:.6rem 0}
.bloghead h1 .hl{color:var(--orange)}
.bloghead p{max-width:60ch;color:var(--ink-soft);font-size:1rem;line-height:1.6}
/* filtres par secteur */
.blogfilters{display:flex;flex-wrap:wrap;gap:.5rem;margin:0 0 clamp(1.6rem, 1rem + 1.6vw, 2.6rem)}
.blogchip{font-family:inherit;font-size:.78rem;letter-spacing:.01em;padding:.5rem 1.05rem;border:1px solid var(--card-line);background:transparent;color:var(--ink-soft);border-radius:0;cursor:pointer;transition:background .2s ease,border-color .2s ease,color .2s ease}
.blogchip:hover{border-color:var(--orange);color:var(--orange)}
.blogchip.is-active{background:var(--orange);border-color:var(--orange);color:#fff}
.postcard.is-hidden{display:none}
.bloggrid{padding:0 0 clamp(4rem, 2rem + 5vw, 7rem);display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1rem, .4rem + 1.2vw, 1.8rem)}
.postcard{border:1px solid var(--card-line);background:#f6f4f1;overflow:hidden;display:flex;flex-direction:column;text-decoration:none;color:inherit;transition:border-color .2s}
.postcard:hover{border-color:rgba(0,81,171,.45)}
.postcard__img{aspect-ratio:16/9;background:var(--cream-2);border-bottom:1px solid var(--card-line);overflow:hidden}
.postcard__img img{width:100%;height:100%;object-fit:cover;display:block}
.postcard__body{padding:clamp(1rem,.7rem + .6vw,1.4rem)}
.postcard__tag{font-size:.6rem;letter-spacing:.07em;text-transform:uppercase;color:var(--orange)}
.postcard__title{font-family:var(--serif);font-weight:500;font-size:clamp(1.1rem,.9rem + .5vw,1.4rem);letter-spacing:-0.015em;line-height:1.15;margin-top:.5rem}
.postcard__excerpt{margin-top:.6rem;font-size:.82rem;line-height:1.55;color:var(--ink-soft)}

@media (max-width:900px){ .bloggrid{grid-template-columns:repeat(2,1fr)} }
@media (max-width:600px){ .bloggrid{grid-template-columns:1fr} }

/* ============================================================
   Pages blog : footer collé en bas quand le contenu est court
   ============================================================ */
body.blogpage{display:flex;flex-direction:column;min-height:100vh}
body.blogpage > main{flex:1 0 auto}

/* ============================================================
   Article : corps à gauche + encadré sticky à droite (desktop)
   ============================================================ */
.article-wrap{max-width:1280px;margin:0 auto;padding:0 var(--pad);display:grid;grid-template-columns:minmax(0,1fr) 360px;gap:clamp(2.5rem, 1rem + 3.5vw, 5rem);align-items:start}
.article-wrap .article{max-width:none;margin:0;padding:0}

.article-aside{position:sticky;top:102px;align-self:start;margin-top:calc(clamp(6.5rem, 4rem + 6vw, 9.5rem) + 3.4rem)}
.aside-card__logo{height:21px;width:auto;filter:invert(1);display:block;margin-bottom:1.3rem}
.aside-card{display:flex;flex-direction:column;min-height:calc(100vh - 140px);border:1px solid var(--card-line);background:#f6f4f1;border-radius:5px;box-shadow:0 1px 3px rgba(32,32,32,.05);padding:1.7rem 1.6rem}
.aside-card__q{font-family:var(--serif);font-weight:500;font-size:1.2rem;line-height:1.28;letter-spacing:-0.01em;color:var(--ink)}
.aside-card__pitch{margin-top:.9rem;font-size:.88rem;line-height:1.6;color:#403c36}
.aside-card__list{list-style:none;margin:1.2rem 0 0;padding:0}
.aside-card__list li{position:relative;padding-left:1.4rem;margin-bottom:.55rem;font-size:.84rem;line-height:1.4;color:#403c36}
.aside-card__list li::before{content:"+";position:absolute;left:0;top:0;color:var(--orange);font-weight:600}
.aside-card__cta{margin-top:auto;padding-top:1.6rem}
.aside-card__avail{display:flex;align-items:center;gap:.55rem;font-size:.78rem;color:var(--ink-soft);margin-bottom:.95rem}
.aside-card__avail i{width:8px;height:8px;border-radius:50%;background:#46a758;display:block;box-shadow:0 0 0 3px rgba(70,167,88,.18)}
.aside-card .article__btn{width:100%}
.aside-card__note{margin-top:.8rem;font-size:.72rem;text-align:center;color:var(--ink-soft)}

/* ============================================================
   Mobile : barre CTA fixe en bas de l'écran
   ============================================================ */
.article-mobilecta{display:none}
@media (max-width:900px){
  .article-wrap{grid-template-columns:1fr;max-width:760px}
  .article-aside{display:none}
  .article-mobilecta{display:flex;align-items:center;justify-content:space-between;gap:1rem;position:fixed;left:0;right:0;bottom:0;z-index:45;background:var(--ink);color:var(--cream);padding:.7rem 1rem;box-shadow:0 -4px 20px rgba(0,0,0,.14)}
  .article-mobilecta span{font-size:.82rem;line-height:1.25}
  .article-mobilecta a{flex:none;background:var(--orange);color:#fff;padding:.7rem 1.1rem;font-size:.76rem;letter-spacing:.03em;text-transform:uppercase;white-space:nowrap}
  body.blogpage .foot{padding-bottom:5.5rem}
}

/* ============================================================
   Interlignage serré sur les titres (cohérence avec le hero)
   ============================================================ */
.article__title{line-height:1.05}
.article__body h2{line-height:1.1}
.article__body h3{line-height:1.14}
.faq__q{line-height:1.2}
.article__cta h2{line-height:1.1}
.related h2{line-height:1.12}
.postcard__title{line-height:1.1}
.aside-card__q{line-height:1.18}

/* interlettrage resserré sur les titres serif (Spectral) */
.article__title{letter-spacing:-0.04em}
.bloghead h1{letter-spacing:-0.04em}
.article__body h2{letter-spacing:-0.03em}
.article__cta h2{letter-spacing:-0.03em}
.related h2{letter-spacing:-0.03em}
.postcard__title{letter-spacing:-0.025em}
.faq__q{letter-spacing:-0.02em}
.aside-card__q{letter-spacing:-0.02em}