/* =========================================================================
   ATLANTIS STRENGTH, Ressources (hub + Réalisations + Guides d'achat + FAQ)
   Reuses tokens.css + styles.css (.cta/.stats/.section-*) + industries.css
   (.crumbs/.ihero/.indcard/.critcard/.bigquote) + adn.css (.jobgrid/.jobmain/
   .jobside/.jobsec/.joblist) + contact.css (.faq accordion). No page JS
   (FAQ uses native <details>).
   ========================================================================= */

/* ------------------------------ Hub grids ------------------------------- */
.reshub{ background:var(--atl-ink-1000); padding-block:clamp(64px,8vw,116px); }
/* The section is now only a mount point: realisations.js appends the real
   installations into .wrap. If the media API soft-fails the wrap stays empty,
   so collapse the padding rather than show a blank band between the hero and
   the CTA. (Browsers without :has() simply keep the padding, which is inert.) */
.reshub:has(.wrap:empty){ padding-block:0; }
/* auto-fit plutot qu'un compte de colonnes fixe : la quatrieme carte
   (Assistant, ajoutee le 2026-08-28) ne doit pas se retrouver seule sur une
   ligne a un tiers de largeur. */
.reshub__grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:20px; margin-top:8px; }
.reshub__grid .indcard{ grid-column:auto; min-height:360px; }

/* ---------------------- Guides hub (text cards) ------------------------- */
.guidegrid{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin-top:8px; }
.guidecard{ display:flex; flex-direction:column; gap:12px; padding:30px 26px; min-width:0;
  background:var(--atl-ink-900); border:1px solid var(--atl-ink-700); border-top:2px solid var(--accent);
  transition:transform var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out); }
.guidecard:hover{ transform:translateY(-3px); border-color:var(--accent); box-shadow:0 20px 44px -26px rgba(0,0,0,.75); }
.guidecard__kicker{ font-family:var(--font-mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--accent); }
.guidecard__title{ font-family:var(--font-display); font-weight:700; font-size:20px; text-transform:uppercase;
  color:#fff; line-height:1.12; letter-spacing:.01em; }
.guidecard__excerpt{ font-size:14px; line-height:1.6; color:var(--atl-ink-300); margin:0; }
.guidecard__foot{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin-top:auto; padding-top:14px; }
.guidecard__read{ font-family:var(--font-mono); font-size:11.5px; letter-spacing:.06em; text-transform:uppercase; color:var(--atl-ink-400); }
.guidecard__cta{ display:inline-flex; align-items:center; gap:8px; font-family:var(--font-sans); font-weight:700;
  font-size:12px; letter-spacing:var(--track-wide); text-transform:uppercase; color:#fff; }
.guidecard__cta svg{ transition:transform var(--dur-base) var(--ease-out); }
.guidecard:hover .guidecard__cta svg{ transform:translateX(4px); }

/* ------------------------- Article (case / guide) ----------------------- */
.article__lead{ font-size:clamp(17px,1.7vw,20px); line-height:1.6; color:var(--atl-ink-100); margin:0 0 34px; }
.prose > p{ font-size:15.5px; line-height:1.75; color:var(--atl-ink-300); margin:0 0 18px; max-width:70ch; }
.prose > p:last-child{ margin-bottom:0; }
.pullquote{ position:relative; margin:32px 0; padding:24px 28px; border-left:3px solid var(--accent); background:var(--atl-ink-900); }
/* Under motion, the red rule DRAWS DOWN as the pullquote reveals (like .bigquote).
   No-JS / reduced-motion keep the static rule. */
html.motion .pullquote{ border-left-color:transparent; }
html.motion .pullquote::before{
  content:""; position:absolute; left:-3px; top:0; bottom:0; width:3px;
  background:var(--accent); transform:scaleY(0); transform-origin:top;
  transition:transform var(--dur-slow) var(--ease-out) 140ms;
}
html.motion .pullquote.reveal.is-in::before{ transform:scaleY(1); }
.pullquote__text{ font-size:clamp(18px,1.9vw,23px); line-height:1.45; color:#fff; margin:0 0 16px; }
.pullquote__foot{ display:flex; align-items:center; gap:14px; }
.pullquote__avatar{ width:44px; height:44px; border-radius:50%; background:var(--atl-ink-700); color:#fff;
  display:grid; place-items:center; font-family:var(--font-display); font-weight:700; font-size:14px; flex:none; }
.pullquote__name{ display:block; font-family:var(--font-display); font-weight:700; font-size:14px; text-transform:uppercase; color:#fff; letter-spacing:.02em; }
.pullquote__role{ display:block; font-size:12px; color:var(--atl-ink-400); text-transform:uppercase; letter-spacing:.07em; margin-top:3px; }

/* case results strip */
.resultgrid{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin:8px 0 0; }
.resultcard{ padding:22px 20px; background:var(--atl-ink-900); border:1px solid var(--atl-ink-700); }
.resultcard__val{ font-family:var(--font-display); font-weight:800; font-size:clamp(24px,2.6vw,34px);
  text-transform:uppercase; color:var(--accent); line-height:1; letter-spacing:var(--track-tight); }
.resultcard__label{ font-size:13px; line-height:1.45; color:var(--atl-ink-300); margin-top:10px; display:block; }

/* machines used (case) */
.usedlist{ display:flex; flex-direction:column; gap:0; }
.usedlist li{ display:flex; align-items:baseline; justify-content:space-between; gap:14px;
  padding:12px 0; border-bottom:1px solid var(--atl-ink-700); }
.usedlist__name{ font-size:14.5px; color:var(--atl-ink-100); }
.usedlist__model{ font-family:var(--font-mono); font-size:12px; letter-spacing:.06em; color:var(--accent); flex:none; }

/* takeaways box reuses .jobside pattern; check bullets */
.takeaways{ display:flex; flex-direction:column; gap:12px; }
.takeaways li{ position:relative; padding-left:26px; font-size:13.5px; line-height:1.5; color:var(--atl-ink-200); }
.takeaways li::before{ content:""; position:absolute; left:0; top:4px; width:13px; height:13px; background:var(--accent);
  clip-path:polygon(14% 44%, 0 60%, 40% 100%, 100% 16%, 84% 4%, 40% 70%); }

/* ------------------------------- FAQ page ------------------------------- */
.faqpage{ background:var(--atl-ink-1000); padding-block:clamp(56px,7vw,104px); border-top:1px solid var(--atl-ink-800); }
.faqtheme{ max-width:900px; margin:0 auto clamp(36px,4vw,56px); }
.faqtheme:last-child{ margin-bottom:0; }
.faqtheme__title{ display:flex; align-items:center; gap:14px;
  font-family:var(--font-display); font-weight:700; font-size:clamp(17px,1.7vw,22px); text-transform:uppercase;
  color:#fff; letter-spacing:.01em; margin:0 0 6px; }
.faqtheme__title::before{ content:""; width:26px; height:2px; background:var(--accent); }
/* .faq / .faq__list / .faq__item / .faq__q / .faq__icon / .faq__a come from contact.css */

/* ------------------------------ Responsive ------------------------------ */
@media (max-width:1080px){
  .reshub__grid{ grid-template-columns:1fr; }
  .guidegrid{ grid-template-columns:1fr; }
  .resultgrid{ grid-template-columns:1fr; }
}
@media (max-width:900px){
  .reshub__grid{ grid-template-columns:1fr; }
}

/* ------------------------------- Reduced motion ------------------------- */
@media (prefers-reduced-motion: reduce){
  .guidecard, .guidecard:hover{ transition:none !important; transform:none !important; box-shadow:none !important; }
  .guidecard__cta svg, .guidecard:hover .guidecard__cta svg{ transition:none !important; transform:none !important; }
  /* Keep the pullquote rule static & visible (no draw). */
  html.motion .pullquote{ border-left-color:var(--accent) !important; }
  html.motion .pullquote::before{ display:none !important; }
}