/* ==========================================================================
   Round 9 sections: expertises (home band + tag rows), key facts, ADN (Agence),
   modes d’intervention (Services), blog index + article.
   Uses the tokens of style.css only.
   ========================================================================== */

/* ---------- expertises: tag row ---------- */
.xp-row{display:flex;flex-wrap:wrap;align-items:baseline;gap:var(--s-3) var(--s-4);margin-top:var(--s-6);padding-top:var(--s-5);border-top:1px solid var(--line)}
.xp-row--top{margin:0 0 var(--s-7);padding-top:var(--s-4)}
.xp-label{font:500 var(--fs-xs)/1.2 var(--font-mono);letter-spacing:.04em;text-transform:uppercase;color:var(--grey);flex:none;min-width:8rem}
.xp-tags{display:flex;flex-wrap:wrap;gap:var(--s-2);list-style:none;padding:0}
.xp-tags li{font-size:var(--fs-sm);line-height:1.2;color:var(--bone);border:1px solid var(--line-strong);border-radius:var(--r-pill);padding:.45rem .85rem}

/* ---------- expertises: home giant word band (slow, platinum outline) ---------- */
.h-svc-sec{display:grid;grid-template-columns:minmax(0,1fr)}
.h-svc-sec > .xp-band{order:-1} /* visually the intro; the h2 stays first in reading order */
.xp-band{--marquee-dur:150s;position:relative;border:0;margin-inline:calc(var(--gutter) * -1);padding-block:clamp(72px,12vh,140px) 0}
.xp-band .marquee-list li,.xp-band .marquee-list li:nth-child(even){font:700 calc(clamp(72px,11vw,200px) * .58)/0.95 var(--font-head);letter-spacing:-.035em;
  /* stroke painted first, then a background-coloured fill on top: hides the glyphs' internal overlap lines */
  color:var(--black);-webkit-text-stroke:2px rgba(201,204,209,.8);paint-order:stroke fill;padding-right:.3em}
.xp-band .marquee-list li::after{width:.16em;height:.16em;margin-left:.3em;opacity:.8}
.xp-band .marquee-toggle{bottom:auto;top:var(--s-4)}
@media (max-width:47.99rem){
  .xp-band .marquee-list li,.xp-band .marquee-list li:nth-child(even){color:var(--grey);-webkit-text-stroke:0;letter-spacing:0}
}
@media (prefers-reduced-motion:reduce){
  /* static: the words wrap into a quiet, legible block instead of a moving line */
  .xp-band{padding-block:clamp(48px,8vh,96px) 0}
  .xp-band .marquee-track{width:auto}
  .xp-band .marquee-list{flex:1 1 auto;min-width:0;flex-wrap:wrap;row-gap:.25em;padding-inline:var(--gutter)}
  .xp-band .marquee-list[aria-hidden]{display:none}
  .xp-band .marquee-list li,.xp-band .marquee-list li:nth-child(even){font-size:clamp(24px,3.6vw,56px);line-height:1.1;white-space:normal;letter-spacing:0;color:var(--grey);-webkit-text-stroke:0}
}

/* ---------- key facts (top of a service page) ---------- */
.key-facts{padding-block:var(--s-7) var(--section)}
.key-facts .stat dd{font-size:clamp(2.75rem,5.2vw,5.5rem);line-height:.86;font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.key-facts .stat dt{max-width:16rem}

/* ---------- Agence: L’ADN BloomX ---------- */
.adn-head{display:grid;gap:var(--s-6);align-items:end;margin-bottom:var(--s-7)}
.adn-head .micro{margin-bottom:var(--s-4)}
.adn-stat{display:flex;align-items:baseline;gap:var(--s-3);border-left:1px solid var(--line);padding-left:var(--s-5)}
.adn-stat b{font:700 calc(clamp(4rem,9vw,8.5rem) * .58)/0.95 var(--font-head);letter-spacing:-.035em;font-variant-numeric:tabular-nums;color:var(--bone)}
.adn-stat span{color:var(--grey);font-size:var(--fs-sm);max-width:9rem}
.adn-grid{display:grid;list-style:none;padding:0;border-top:1px solid var(--line)}
.adn-grid li{display:grid;align-content:start;gap:var(--s-3);padding:var(--s-6) 0;border-bottom:1px solid var(--line)}
.adn-n{font:500 var(--fs-xs)/1 var(--font-mono);color:var(--accent-light);letter-spacing:.04em}
.adn-grid h3{font:700 calc(clamp(2rem,2.9vw,3rem) * .58)/0.95 var(--font-head);letter-spacing:-.035em;text-wrap:balance;max-width:16ch}
.adn-grid p{color:var(--grey);font-size:var(--fs-sm);max-width:30rem}
@media (min-width:48rem){
  .adn-head{grid-template-columns:1fr auto}
  .adn-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .adn-grid li{padding:var(--s-6) var(--s-6) var(--s-6) 0}
  .adn-grid li:nth-child(2n){padding-left:var(--s-6);border-left:1px solid var(--line)}
}
@media (min-width:64rem){
  .adn-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .adn-grid li,.adn-grid li:nth-child(2n){padding:var(--s-7) var(--s-6);border-left:1px solid var(--line)}
  .adn-grid li:nth-child(3n+1){padding-left:0;border-left:0}
}

/* ---------- Services: modes d’intervention ---------- */
.modes-in{display:grid;gap:var(--s-6)}
.modes-in .micro{margin-bottom:var(--s-4)}
.modes-list{display:grid;list-style:none;padding:0;border-top:1px solid var(--line)}
.modes-list li{display:grid;gap:var(--s-2);padding:var(--s-5) 0;border-bottom:1px solid var(--line)}
.modes-list h3{font:700 calc(clamp(2rem,3vw,3rem) * .58)/0.95 var(--font-head)}
.modes-list p{color:var(--grey);max-width:32rem}
@media (min-width:64rem){
  .modes-in{grid-template-columns:5fr 7fr;align-items:start}
  .modes-list li{grid-template-columns:minmax(12rem,16rem) 1fr;gap:var(--s-5);align-items:baseline}
}

/* ---------- blog: shared ---------- */
.post-meta{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s-2) var(--s-4);font:500 var(--fs-xs)/1.4 var(--font-mono);letter-spacing:.02em;color:var(--grey)}
.post-meta > span + span::before{content:"";display:inline-block;width:4px;height:4px;border-radius:50%;background:var(--line-strong);margin-right:var(--s-4);vertical-align:middle}
.post-cat{color:var(--accent-light)}
.post-draft{justify-self:start;display:inline-flex;align-items:center;gap:.5em;font:600 var(--fs-xs)/1 var(--font-body);color:var(--accent-light);
  box-shadow:inset 0 0 0 1px var(--accent-light);border-radius:var(--r-pill);padding:.45rem .8rem;margin-bottom:var(--s-4)}
.post-draft::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--accent)}

/* ---------- blog: index ---------- */
.post-list{list-style:none;padding:0;border-top:1px solid var(--line)}
.post-card{position:relative;display:grid;grid-template-columns:auto 1fr;gap:var(--s-5);padding:var(--s-6) 0;border-bottom:1px solid var(--line)}
.post-card-n{font:700 calc(clamp(2.5rem,5vw,4.5rem) * .58)/0.95 var(--font-head);color:transparent;-webkit-text-stroke:1px rgba(201,204,209,.6);font-variant-numeric:tabular-nums;min-width:1.4em}
.post-card > div{display:grid;gap:var(--s-3);justify-items:start}
.post-card-title{font:500 var(--fs-h3)/1.1 var(--font-head);letter-spacing:-.02em;max-width:24ch}
.post-card-title a{text-decoration:none}
.post-card-title a::after{content:"";position:absolute;inset:0}
.post-card-title a:focus-visible{outline:0}
.post-card:has(a:focus-visible){outline:2px solid var(--focus);outline-offset:4px}
.post-card-desc{color:var(--grey);max-width:42rem}
.post-card-go{display:inline-flex;align-items:center;gap:.5em;font-weight:600;font-size:var(--fs-sm);color:var(--bone)}
.post-card-go svg{transition:transform var(--dur) var(--ease)}
.post-card:hover .post-card-go svg{transform:translateX(4px)}
.post-card:hover .post-card-title{color:var(--gold-hi)}
@media (min-width:64rem){ .post-card{grid-template-columns:8rem 1fr;padding:var(--s-7) 0} }

/* ---------- blog: article ---------- */
/* blog article hero = shared .page-hero (contact look); long titles get a smaller condensed size */
.page-hero--post .page-title{font-size:clamp(3rem,7.4vw,8rem);line-height:.86;max-width:18ch}
.page-hero .post-draft{margin-bottom:calc(var(--s-3) * -1)}
.post-title{font:500 clamp(2.125rem,4.4vw + .5rem,4.75rem)/1.02 var(--font-head);letter-spacing:-.03em;max-width:22ch;text-wrap:balance}
.post-intro{font-size:var(--fs-lg);line-height:1.6;color:var(--platinum);max-width:44rem}
.post-grid{display:grid;gap:var(--s-7);padding-block:clamp(3rem,7vw,6rem)}
.post-toc ol{list-style:none;padding:0;margin-top:var(--s-4);counter-reset:toc;border-top:1px solid var(--line)}
.post-toc li{counter-increment:toc;border-bottom:1px solid var(--line)}
.post-toc a{display:grid;grid-template-columns:2rem 1fr;gap:var(--s-2);padding:.7rem 0;font-size:var(--fs-sm);line-height:1.35;color:var(--grey);text-decoration:none}
.post-toc a::before{content:counter(toc,decimal-leading-zero);font:500 var(--fs-xs)/1.6 var(--font-mono);color:var(--titanium)}
.post-toc a:hover{color:var(--bone)}
.post-body{max-width:43rem;font-size:clamp(1.0625rem,.3vw + 1rem,1.1875rem);line-height:1.75;color:var(--platinum);hanging-punctuation:first}
.post-body p{text-wrap:pretty}
.post-body > * + *{margin-top:1.15em}
.post-body h2{display:grid;gap:var(--s-3);font:500 var(--fs-h3)/1.12 var(--font-head);letter-spacing:-.022em;color:var(--bone);margin-top:2.4em;scroll-margin-top:calc(var(--header-h) + var(--s-5))}
.post-body > h2:first-child{margin-top:0}
.post-h-n{font:500 var(--fs-xs)/1 var(--font-mono);letter-spacing:.04em;color:var(--accent-light)}
.post-body ul{list-style:none;padding:0;border-top:1px solid var(--line)}
.post-body ul li{position:relative;padding:.85em 0 .85em 1.6em;border-bottom:1px solid var(--line)}
.post-body ul li::before{content:"";position:absolute;left:0;top:1.55em;width:.55em;height:2px;background:var(--accent)}
.post-sources{margin-top:var(--s-8);padding:var(--s-5);border:1px solid var(--line);border-radius:var(--r-md);background:var(--surface);font-size:var(--fs-sm);line-height:1.5}
.post-sources h2{font:500 var(--fs-xs)/1 var(--font-mono);letter-spacing:.04em;text-transform:uppercase;color:var(--grey);margin-bottom:var(--s-3)}
.post-sources ul{list-style:none;padding:0;border:0;display:grid;gap:var(--s-2)}
.post-sources ul li{padding:0;border:0}
.post-sources ul li::before{display:none}
.post-back{margin-top:var(--s-8);font-size:var(--fs-sm)}
@media (min-width:64rem){
  .post-grid{grid-template-columns:15rem minmax(0,43rem);gap:clamp(3rem,7vw,8rem);justify-content:start}
  .post-toc{position:sticky;top:calc(var(--header-h) + var(--s-6));align-self:start}
}
@media (max-width:63.99rem){ .post-toc{border:1px solid var(--line);border-radius:var(--r-md);padding:var(--s-4) var(--s-5) var(--s-2)} .post-toc ol{border-top:0} .post-toc li:last-child{border-bottom:0} }
@media (max-width:39.99rem){ .post-card{grid-template-columns:1fr} .post-card-n{display:none} }
@media (max-width:47.99rem){ .page-hero--post .crumbs li:last-child{display:none} }

/* SEO round 03/11: short answer, in-article FAQ, « À lire » links, « BloomX en bref » */
.quick-answer{max-width:43rem;margin:var(--s-6) 0 0;padding:var(--s-5);border:1px solid var(--line);border-left:3px solid var(--accent);border-radius:var(--r-md);background:var(--surface);color:var(--bone);line-height:1.55}
.quick-answer .micro{margin-bottom:var(--s-2)}
.post-body .post-faq h2{margin-top:2.4em}
.post-body .faq{max-width:none;margin-top:var(--s-4)}
.post-body .faq summary{font-size:1rem}
.post-body .faq-a p{font-size:1rem;line-height:1.65}
.read-more{list-style:none;padding:0;display:grid;gap:var(--s-2)}
.brief{max-width:var(--measure-wide,52rem);padding:var(--s-8) 0}
.h-solid .brief{padding:clamp(48px,8vh,96px) 0}
.brief h2{margin-bottom:var(--s-5)}
.brief-list{list-style:none;padding:0;border-top:1px solid var(--line)}
.brief-list li{position:relative;padding:.85em 0 .85em 1.6em;border-bottom:1px solid var(--line);color:var(--bone);line-height:1.5}
.brief-list li::before{content:"";position:absolute;left:0;top:1.5em;width:.55em;height:2px;background:var(--accent)}
.brief-upd{margin-top:var(--s-4);color:var(--grey)}