/* ressources.css — hub + gabarit article FR
   common.css : tokens, reset, nav, footer, STT — non dupliqués. */

/* ── Hub (body:has(.articles-grid)) ── */
body:has(.articles-grid){
  --max:1140px;
}
body:has(.articles-grid) .page-hero{
  background:var(--band);padding:64px 32px 56px;color:#fff;text-align:center;
}
body:has(.articles-grid) .page-hero h1{
  font-size:clamp(1.8rem,4vw,2.8rem);font-weight:800;letter-spacing:-.03em;
  line-height:1.15;margin-bottom:14px;
}
body:has(.articles-grid) .page-hero h1 em{
  font-style:italic;font-family:'DM Serif Display',Georgia,serif;font-weight:400;color:#9FD4C8;
}
body:has(.articles-grid) .page-hero p{
  font-size:1rem;color:rgba(255,255,255,.95);max-width:560px;margin:0 auto;line-height:1.65;
}
body:has(.articles-grid) .content{
  max-width:var(--max);margin:0 auto;padding:56px 32px 72px;
}
body:has(.articles-grid) .section-title{
  font-size:.75rem;font-weight:700;text-transform:uppercase;letter-spacing:.1em;
  color:var(--green-text);margin:40px 0 18px;
}
body:has(.articles-grid) .section-title:first-child{margin-top:0}
body:has(.articles-grid) .articles-grid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-bottom:8px;
}
body:has(.articles-grid) .articles-grid--featured{margin-bottom:24px}
body:has(.articles-grid) .article-card{
  background:var(--card);border:1px solid var(--border);border-radius:var(--r);
  padding:24px;transition:.2s;display:flex;flex-direction:column;text-decoration:none;color:inherit;
}
body:has(.articles-grid) .article-card:hover{
  border-color:var(--green);box-shadow:0 4px 20px rgba(74,124,111,.1);
  transform:translateY(-2px);text-decoration:none;
}
body:has(.articles-grid) .article-tag{
  font-size:.68rem;font-weight:700;text-transform:uppercase;letter-spacing:.08em;
  color:var(--green-text);background:var(--green-bg);padding:3px 10px;border-radius:100px;
  align-self:flex-start;margin-bottom:12px;
}
body:has(.articles-grid) .article-title{
  font-size:.93rem;font-weight:700;color:var(--fg);line-height:1.4;margin-bottom:8px;flex:1;
}
body:has(.articles-grid) .article-desc{
  font-size:.82rem;color:var(--muted);line-height:1.6;margin-bottom:14px;
}
body:has(.articles-grid) .article-link{
  font-size:.8rem;font-weight:700;color:var(--green-text);
}
body:has(.articles-grid) .featured-card{
  grid-column:1/-1;background:var(--band);border:none;border-radius:var(--r);padding:32px;
  display:grid;grid-template-columns:1fr auto;gap:24px;align-items:center;
}
body:has(.articles-grid) .featured-card:hover{
  box-shadow:0 8px 28px rgba(74,124,111,.28);transform:translateY(-2px);
}
body:has(.articles-grid) .featured-card .fc-tag{
  font-size:.68rem;font-weight:700;text-transform:uppercase;letter-spacing:.08em;
  color:rgba(255,255,255,.95);margin-bottom:10px;display:inline-block;
}
body:has(.articles-grid) .featured-card .fc-title{
  font-size:1.2rem;font-weight:800;color:#fff;line-height:1.3;margin-bottom:12px;letter-spacing:-.02em;
}
body:has(.articles-grid) .featured-card .fc-desc{
  font-size:.88rem;color:rgba(255,255,255,.95);line-height:1.65;margin-bottom:16px;
}
body:has(.articles-grid) .featured-card .fc-link{
  font-size:.85rem;font-weight:700;color:#D3EEE8;
}
body:has(.articles-grid) .featured-card .fc-img{font-size:4rem;text-align:center;opacity:.8}
body:has(.articles-grid) .ressource-cta-band{
  background:var(--green-bg);border-top:1px solid rgba(74,124,111,.15);padding:48px 32px;text-align:center;
}
body:has(.articles-grid) .ressource-cta-label{
  font-size:.9rem;font-weight:700;color:var(--green-text);text-transform:uppercase;
  letter-spacing:.08em;margin-bottom:16px;
}
body:has(.articles-grid) .ressource-cta-links{
  display:flex;gap:12px;justify-content:center;flex-wrap:wrap;font-size:.88rem;align-items:center;
}
body:has(.articles-grid) .ressource-cta-links a{color:var(--green-text);font-weight:600}
body:has(.articles-grid) .ressource-cta-links span{color:var(--border)}

@media(max-width:900px){
  body:has(.articles-grid) .articles-grid{grid-template-columns:1fr 1fr}
  body:has(.articles-grid) .featured-card{grid-template-columns:1fr}
  body:has(.articles-grid) .featured-card .fc-img{display:none}
}
@media(max-width:600px){
  body:has(.articles-grid) .articles-grid{grid-template-columns:1fr}
  body:has(.articles-grid) .content,.page-hero{padding-left:20px;padding-right:20px}
}

/* ── Article (body:has(.article-hero)) ── */
body:has(.article-hero){
  --max:780px;
}
body:has(.article-hero) .article-hero{
  background:var(--band);padding:48px 32px 36px;color:#fff;
}
body:has(.article-hero) .article-hero .inner{max-width:var(--max);margin:0 auto}
body:has(.article-hero) .atag{
  display:inline-block;font-size:.7rem;font-weight:700;text-transform:uppercase;
  letter-spacing:.08em;background:rgba(13,17,23,.28);color:rgba(255,255,255,.95);
  padding:4px 12px;border-radius:100px;margin-bottom:16px;
}
body:has(.article-hero) .article-hero h1{
  font-size:clamp(1.5rem,3.5vw,2.1rem);font-weight:800;letter-spacing:-.03em;
  line-height:1.2;margin-bottom:14px;color:#fff;
}
body:has(.article-hero) .ameta{
  font-size:.82rem;color:rgba(255,255,255,.95);display:flex;flex-wrap:wrap;gap:12px;
}
body:has(.article-hero) .container{
  max-width:var(--max);margin:0 auto;padding:40px 32px 80px;
}
body:has(.article-hero) .ai-disclosure{
  font-size:.8rem;color:var(--muted);margin:0 0 28px;padding-bottom:20px;
  border-bottom:1px solid var(--border);font-style:italic;line-height:1.5;
}
body:has(.article-hero) .intro{
  font-size:1.05rem;color:var(--fg2);line-height:1.75;margin-bottom:36px;
  padding-bottom:28px;border-bottom:1px solid var(--border);
}
body:has(.article-hero) .intro p{font-size:1.05rem;color:var(--fg2);margin-bottom:14px}
body:has(.article-hero) .container > h2{
  font-size:1.2rem;font-weight:700;color:var(--fg);margin:40px 0 14px;line-height:1.3;
}
body:has(.article-hero) .container > h3{
  font-size:1rem;font-weight:700;color:var(--fg);margin:28px 0 10px;
}
body:has(.article-hero) .container > p{
  font-size:.93rem;color:var(--fg2);margin-bottom:16px;line-height:1.78;
}
body:has(.article-hero) .container > ul,
body:has(.article-hero) .container > ol{
  font-size:.93rem;color:var(--fg2);margin-bottom:16px;padding-left:22px;
}
body:has(.article-hero) .container li{margin-bottom:7px;line-height:1.7}
body:has(.article-hero) .callout{
  background:var(--green-bg);border-left:3px solid var(--green);
  border-radius:0 var(--r) var(--r) 0;padding:16px 20px;margin:24px 0;
  font-size:.9rem;color:var(--fg);
}
body:has(.article-hero) .warning{
  background:#FEF2F2;border-left:3px solid #dc2626;
  border-radius:0 var(--r) var(--r) 0;padding:16px 20px;margin:24px 0;
  font-size:.9rem;color:#7f1d1d;
}
body:has(.article-hero) .cta-box{
  background:var(--band);color:#fff;border-radius:var(--r);padding:32px;margin-top:48px;text-align:center;
}
body:has(.article-hero) .cta-box h3{
  font-size:1.15rem;font-weight:800;margin-bottom:8px;color:#fff;
}
body:has(.article-hero) .cta-box p{
  font-size:.9rem;color:rgba(255,255,255,.95);margin-bottom:20px;
}
body:has(.article-hero) .cta-box > a:first-of-type{
  background:#fff;color:#3A6259;border-radius:9px;padding:11px 26px;font-size:.9rem;
  font-weight:700;text-decoration:none;display:inline-block;
}
body:has(.article-hero) .related{
  margin-top:48px;padding-top:36px;border-top:1px solid var(--border);
}
body:has(.article-hero) .related h3{font-size:1rem;font-weight:700;margin-bottom:16px;color:var(--fg)}
body:has(.article-hero) .rg{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
body:has(.article-hero) .rc{
  background:var(--bg2);border:1px solid var(--border);border-radius:var(--r);
  padding:16px;transition:.18s;text-decoration:none;display:block;
}
body:has(.article-hero) .rc:hover{border-color:var(--green);text-decoration:none}
body:has(.article-hero) .rc .rt{
  font-size:.68rem;font-weight:700;text-transform:uppercase;color:var(--green-text);margin-bottom:6px;
}
body:has(.article-hero) .rc .rti{
  font-size:.84rem;font-weight:600;color:var(--fg);line-height:1.4;
}

@media(max-width:900px){
  body:has(.article-hero) .rg{grid-template-columns:1fr}
}
@media(max-width:600px){
  body:has(.article-hero) .article-hero,
  body:has(.article-hero) .container{padding-left:20px;padding-right:20px}
}

/* Mode sombre : les encadrés gardaient le fond clair du thème clair (texte clair sur fond clair). */
[data-theme="dark"] body:has(.article-hero) .callout{
  background:rgba(94,158,143,.14);
}
[data-theme="dark"] body:has(.article-hero) .warning{
  background:rgba(220,38,38,.12);color:#fecaca;
}
/* Repli sans JavaScript (thème du système) */
@media (prefers-color-scheme: dark){
:root:not([data-theme="light"]):not([data-theme="dark"]) body:has(.article-hero) .callout{background:rgba(94,158,143,.14)}
:root:not([data-theme="light"]):not([data-theme="dark"]) body:has(.article-hero) .warning{background:rgba(220,38,38,.12);color:#fecaca}
}