/* CSN-ACTU-V1 - article d'actualite Constellation V01.
   Coeur : CSS du bloc 33 du catalogue (page source actu-rgaa.html), verbatim.
   Variables : palette Constellation (tokens.css).
   Queue : mise en forme du corps, reprise de assets/style.css et scopee. */
.article-hero, .article-wrap, .article-back {
  --bg-hero:#171b45;
  --teal-lt:#9E99F2;
  --teal:var(--c-primary-soft);
  --text-on-dark:#fff;
  --text-hero-sub:rgba(255,255,255,.72);
  --text:var(--c-text);
  --text-strong:var(--c-ink);
  --text-muted:var(--c-text-2);
}
.article-hero .wrap { max-width:1260px; margin:0 auto; padding:0 36px; }
.article-hero {
      background: var(--bg-hero);
      padding: clamp(64px, 7vw, 104px) 0 clamp(52px, 5.5vw, 84px);
      text-align: center;
      position: relative;
      overflow: hidden;
    }
    .article-hero::before {
      content: '';
      position: absolute; inset: 0;
      background: radial-gradient(ellipse at 50% 0%, rgba(0,174,178,0.12) 0%, transparent 65%);
      pointer-events: none;
    }
    .article-hero .wrap { position: relative; z-index: 2; }
    .article-hero .badge {
      display: inline-flex; align-items: center; gap: 8px;
      font-size: 13px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase;
      color: var(--teal-lt); margin-bottom: 24px;
    }
    .article-hero .badge .dot {
      width: 6px; height: 6px; border-radius:50%; background: var(--teal-lt);
    }
    .article-hero h1 {
      font-size: clamp(30px, 5vw, 45px); font-weight: 700; line-height: 1.1;
      letter-spacing: -.03em; color: var(--text-on-dark);
      max-width: 100%; margin: 0 auto 20px;
    }
    .article-hero .meta {
      display: inline-flex; align-items: center; gap: 12px;
      font-size: 14px; color: var(--text-hero-sub); margin-bottom: 40px;
    }
    .article-hero .meta span {
      background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.08);
      padding: 6px 16px; border-radius:100px; font-weight: 500;
    }
    /* visuel sorti du bandeau bleu : aligne sur la navbar, sur le fond de page */
    .article-hero-img {
      max-width:820px; width: calc(100% - 72px); margin: 44px auto 0;
      border-radius:7px; overflow: hidden;
      box-shadow: 0 18px 48px rgba(14,18,62,0.18);
    }
    .article-hero-img img { width: 100%; height: auto; display: block}

    .article-wrap {
      max-width: 1260px; margin: 0 auto;
      padding: clamp(48px, 6vw, 80px) 36px clamp(60px, 8vw, 100px);
    }
    .article-wrap p {
      font-size: 15px; line-height: 1.85; color: var(--text);
      margin-bottom: 20px;
    }
    .article-wrap strong {
      font-size: 15px; font-weight: 700; color: var(--text-strong);
      margin: 26px auto 8px;  line-height: 1.5;
    ;max-width:none;}
    .article-wrap h3 {
      font-size: 20px; font-weight: 700; color: var(--text-strong);
      margin: 36px 0 14px; line-height: 1.3;
    }
    .article-wrap ul, .article-wrap ol {
      margin: 20px 0; padding-left: 24px;
      font-size: 17px; line-height: 1.85; color: var(--text);
    }
    .article-wrap li { margin-bottom: 12px; }
    .article-wrap strong { color: var(--text-strong); }
    .article-wrap img {
      width: 100%; border-radius:7px; margin:24px auto;
      box-shadow: var(--shadow-card);
;max-width:620px;display:block;}
    /* citations en violet (--teal = --c-primary-soft : #5551CF clair / #9E99F2 sombre) */
    .article-wrap blockquote {
      border-left: 3px solid var(--teal);
      padding: 16px 0 16px 24px; margin: 32px 0;
      font-style: italic; color: var(--teal);
    }
    .article-wrap blockquote p,
    .article-wrap blockquote strong,
    .article-wrap blockquote em { color: inherit; }

    .article-back {
      display: inline-flex; align-items: center; gap: 8px;
      font-size: 15px; font-weight: 600; color: var(--teal);
      margin-top: 40px; transition: color .2s;
    }
    .article-back:hover { color: var(--teal-lt); }
    .article-back svg { transition: transform .2s; }
    .article-back:hover svg { transform: translateX(-3px); }

    @media (max-width: 600px) {
      .article-hero { padding: 60px 0 36px; }
      .article-hero-img { border-radius:7px; }
    }

/* corps de l'article - repris de l'archive, scope .article-wrap */
.article-wrap::after { content:""; display:block; clear:both; }
.article-wrap h4 {
  font-size:17px; font-weight:700; color:var(--text-strong);
  margin:28px 0 10px; line-height:1.35;
}
.article-wrap .surtitre {
  margin-bottom:28px; font-size:13px; font-weight:600;
  letter-spacing:.14em; text-transform:uppercase; color:var(--teal);
}
.article-wrap .fig { margin:28px 0; }
.article-wrap .fig img { margin:0; }
.article-wrap figcaption {
  margin-top:9px; font-size:15px; color:var(--text-muted);
}
.article-wrap .fig--centre img { margin-inline:auto; }
.article-wrap .fig--gauche, .article-wrap .fig--droite { max-width:46%; }
.article-wrap .fig--gauche { float:left; margin-right:26px; }
.article-wrap .fig--droite { float:right; margin-left:26px; }
.article-wrap iframe {
  width:100%; aspect-ratio:16/9; height:auto; margin:32px 0;
  border:0; border-radius:7px; display:block;
}
.article-wrap table {
  width:100%; border-collapse:collapse; margin:26px 0; font-size:15px;
}
.article-wrap th, .article-wrap td {
  padding:10px 12px; border:1px solid var(--c-border); text-align:left;
  vertical-align:middle;
}
.article-wrap th { background:var(--c-bg-alt); font-weight:700; }
.article-wrap td img { width:64px; margin:0; border-radius:7px; }
.article-wrap .creneau {
  display:grid; grid-template-columns:112px 1fr; column-gap:22px;
  padding:16px 0; border-top:1px solid var(--c-border);
}
.article-wrap .creneau > * { grid-column:2; }
.article-wrap .creneau h4 { margin:0 0 4px; }
.article-wrap .creneau p { margin:0 0 8px; }
.article-wrap .creneau p:last-child { margin-bottom:0; }
.article-wrap .creneau__heure {
  grid-column:1; grid-row:1; margin:0; font-size:14px; font-weight:700;
  color:var(--teal); font-variant-numeric:tabular-nums;
}
.article-wrap a:not(.article-back) {
  color:var(--teal); text-decoration:underline;
  text-underline-offset:3px;
}
.article-wrap a:not(.article-back):hover { color:var(--teal-lt); }
@media (max-width: 600px) {
  .article-wrap .fig--gauche, .article-wrap .fig--droite {
    float:none; max-width:100%; margin-inline:0;
  }
  .article-wrap .creneau { grid-template-columns:1fr; }
  .article-wrap .creneau > *, .article-wrap .creneau__heure {
    grid-column:1;
  }
  .article-wrap .creneau__heure { grid-row:auto; margin-bottom:6px; }
}

/* CSN - alignement sur la barre de navigation (max-width 1260 / padding 36) */
.article-wrap ~ .section > .container { max-width:1260px; padding:0 36px; }
@media (max-width:1080px){
  .article-hero .wrap,
  .article-wrap ~ .section > .container { padding-left:20px; padding-right:20px; }
  .article-wrap { padding-left:20px; padding-right:20px; }
  .article-hero-img { width: calc(100% - 40px); margin-top:32px; }
}