/* ============================================================
   Altus Conseil — design-system/sections/altus-section-news.css
   ------------------------------------------------------------
   Page d'index des actualités (listing paginé, filtres par thème) :
   tête charbon (sur-titre, H1, accroche, filtres), corps papier
   (carte vedette, grille de cartes 3/2/1, pagination, note CTA).
   Page GÉNÉRÉE INTÉGRALEMENT par le serveur à partir des articles
   publiés : contrat de classes figé, rien ne se rédige à la main.
   Se BRANCHE sur la couche altus-motion (reveal-stagger, reveal,
   lift) ; ne ré-implémente aucun motion.

   Class names — convention §00 (préfixe .altus-section-news) :
     .altus-section-news                                     <section>
       .altus-section-news-head            [theme dark]      <header>
         .altus-section-news-head-inner    (reveal-stagger, max 1180px)
           .altus-section-news-eyebrow                       <p> 13px capitales fg2
           .altus-section-news-title                         <h1> clamp(40px,6vw,76px)
             .altus-section-news-title-accent                <span> point final bronze
           .altus-section-news-lede                          <p> clamp(18px,2vw,21px), max 58ch
           .altus-section-news-filters                       <nav aria-label="Thèmes">
             .altus-section-news-filter (.is-active)         <a> filet ivoire 30 % ; actif = fond bronze
       .altus-section-news-body            [theme light]     <div> max 1180px, padding 64px 24px 88px
         .altus-section-news-label                           <p> 12px capitales, filet bas
         .altus-section-news-featured      (reveal, lift)    <a> grille 1.3fr 1fr, carte blanche
           .altus-section-news-featured-media                <figure> img min-height 380px cover
           .altus-section-news-featured-text                 <div> padding 44px 40px
             .altus-section-news-card-meta                   <p> (partagé)
               .altus-section-news-tag                       <span> étiquette bronze / charbon
               time[datetime]                                13px fg2-inverse
               .altus-section-news-read                      <span> « 6 min »
             .altus-section-news-featured-title              <h2> clamp(26px,3vw,36px)
             .altus-section-news-featured-excerpt            <p> 17px
             .altus-section-news-more                        <span> « Lire l'article » + flèche ::after
         .altus-section-news-grid          (reveal-stagger)  <div> 3 col, gap 24px
           .altus-section-news-card        (reveal, lift)    <a> carte blanche, flex column
             .altus-section-news-card-media                  <figure> img 16/10 cover
             .altus-section-news-card-body                   <div> padding 24px, flex 1
               .altus-section-news-card-meta (idem)
               .altus-section-news-card-title                <h2> 22px 500
               .altus-section-news-card-excerpt              <p> 15px, 3 lignes max
               .altus-section-news-more
         .altus-section-news-empty                           <p> état vide (thème sans article)
         .altus-section-news-pagination                      <nav aria-label="Pagination">
           .altus-section-news-page (.is-prev | .is-next | .is-current | .is-gap | .is-disabled | .is-far)
         .altus-section-news-note          (reveal)          <div> charbon, grille 1fr auto
           .altus-section-news-note-text                     <p> 19px ivoire
             .altus-section-news-note-eyebrow                <span> 12px capitales bronze, bloc
           a.altus-btn.altus-btn-primary

   RÈGLE BRONZE — étiquettes de thème, filtre actif, point final du
   titre, filet « Lire l'article » (+ eyebrow de la note). Rien d'autre.

   Requiert : colors_and_type.css + altus-motion.css/.js + hero.css (.altus-btn).
   ============================================================ */

/* ─── Variables locales ────────────────────────────────────── */

.altus-section-news {
  --altus-news-card: #fff;
  --altus-news-line: color-mix(in srgb, var(--altus-fg1-inverse) 14%, transparent);
  --altus-news-line-dark: color-mix(in srgb, var(--altus-fg1) 30%, transparent);
  --altus-news-lede: color-mix(in srgb, var(--altus-fg1) 82%, transparent);
  position: relative;
  font-family: var(--altus-font);
  font-weight: var(--altus-w-light);
  line-height: 1.6;
  color: var(--altus-fg1-inverse);
  background: var(--altus-light);
}
.altus-section-news *, .altus-section-news *::before, .altus-section-news *::after { box-sizing: border-box; }
.altus-section-news a { color: inherit; text-decoration: none; }

/* ─── Tête — charbon ───────────────────────────────────────── */

.altus-section-news-head {
  color: var(--altus-fg1);
  background: var(--altus-bg);
  /* Respiration sous le header fixé (156px au repos sur desktop) : jamais
     moins de 180px, 25vh sur les grands écrans, comme les autres têtes de page. */
  padding: clamp(180px, 25vh, 260px) 24px 64px;
}
/* Pas de bonus :first-child ici : la tête porte déjà sa propre respiration
   sous le header fixé, comme les autres sections du site. */

.altus-section-news-head-inner { max-width: 1180px; margin: 0 auto; }

.altus-section-news-eyebrow {
  margin: 0 0 20px;
  font-size: 13px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--altus-fg2);
}

.altus-section-news-title {
  margin: 0 0 18px;
  font-size: clamp(40px, 6vw, 76px);
  line-height: 1.02;
  font-weight: var(--altus-w-medium);
  letter-spacing: -0.03em;
  color: var(--altus-fg1);
}
.altus-section-news-title-accent { color: var(--altus-accent); }

.altus-section-news-lede {
  margin: 0;
  font-size: clamp(18px, 2vw, 21px);
  line-height: 1.55;
  color: var(--altus-news-lede);
  max-width: 58ch;
  text-wrap: pretty;
}

.altus-section-news-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 36px;
}
.altus-section-news-filter {
  display: inline-block;
  font-size: 13px;
  letter-spacing: 0.08em;
  line-height: 1.3;
  padding: 8px 14px;
  border: 1px solid var(--altus-news-line-dark);
  color: var(--altus-news-lede);
  transition: border-color 200ms var(--altus-ease), color 200ms var(--altus-ease);
}
.altus-section-news-filter:hover { border-color: var(--altus-fg1); color: var(--altus-fg1); }
.altus-section-news-filter.is-active {
  background: var(--altus-accent);
  border-color: var(--altus-accent);
  color: var(--altus-bg);
  font-weight: var(--altus-w-medium);
}
.altus-section-news-filter:focus-visible { outline: 1px solid var(--altus-fg1); outline-offset: 4px; }

/* ─── Corps — papier ───────────────────────────────────────── */

.altus-section-news-body {
  max-width: 1180px;
  margin: 0 auto;
  padding: 64px 24px 88px;
}

.altus-section-news-label {
  margin: 0 0 20px;
  padding-bottom: 12px;
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--altus-fg2-inverse);
  border-bottom: 1px solid var(--altus-news-line);
}
.altus-section-news-featured + .altus-section-news-label { margin-top: 64px; }

/* Cartes — base partagée (vedette + grille) */
.altus-section-news-featured,
.altus-section-news-card {
  display: grid;
  background: var(--altus-news-card);
  border: 1px solid var(--altus-news-line);
  color: var(--altus-fg1-inverse);
}
.altus-section-news-featured:focus-visible,
.altus-section-news-card:focus-visible { outline: 2px solid var(--altus-fg1-inverse); outline-offset: 4px; }

/* Sans la couche motion : ombre légère au survol (lift s'en charge sinon) */
.altus-section-news-featured:not([data-altus-lift]),
.altus-section-news-card:not([data-altus-lift]) { transition: box-shadow 250ms var(--altus-ease); }
.altus-section-news-featured:not([data-altus-lift]):hover,
.altus-section-news-card:not([data-altus-lift]):hover { box-shadow: 0 14px 40px color-mix(in srgb, var(--altus-fg1-inverse) 8%, transparent); }

.altus-section-news-featured-media,
.altus-section-news-card-media {
  margin: 0;
  overflow: hidden;
}
.altus-section-news-featured-media img,
.altus-section-news-card-media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 600ms var(--altus-ease);
}
@media (prefers-reduced-motion: no-preference) {
  .altus-section-news-featured:hover img,
  .altus-section-news-card:hover img { transform: scale(1.03); }
}

/* Meta (partagé) */
.altus-section-news-card-meta {
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  font-size: 13px;
  color: var(--altus-fg2-inverse);
}
.altus-section-news-tag {
  display: inline-block;
  font-size: 11px;
  letter-spacing: 0.16em;
  line-height: 1.3;
  text-transform: uppercase;
  font-weight: var(--altus-w-medium);
  color: var(--altus-bg);
  background: var(--altus-accent);
  padding: 5px 10px;
}
.altus-section-news-card-meta time { margin-left: 12px; }
.altus-section-news-read::before { content: '·'; margin: 0 6px; }

/* « Lire l'article » */
.altus-section-news-more {
  align-self: flex-start;
  font-size: 15px;
  font-weight: var(--altus-w-medium);
  padding-bottom: 3px;
  border-bottom: 1px solid var(--altus-accent);
  transition: color 200ms var(--altus-ease);
}
.altus-section-news-more::after { content: ' →'; }
.altus-section-news-featured:hover .altus-section-news-more,
.altus-section-news-card:hover .altus-section-news-more { color: var(--altus-accent); }

/* Vedette */
.altus-section-news-featured { grid-template-columns: 1.3fr 1fr; }
.altus-section-news-featured-media img { min-height: 380px; }
.altus-section-news-featured-text {
  padding: 44px 40px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.altus-section-news-featured-title {
  margin: 18px 0 14px;
  font-size: clamp(26px, 3vw, 36px);
  line-height: 1.15;
  font-weight: var(--altus-w-medium);
  letter-spacing: -0.02em;
  text-wrap: balance;
}
.altus-section-news-featured-excerpt {
  margin: 0 0 26px;
  font-size: 17px;
  color: var(--altus-fg2-inverse);
  text-wrap: pretty;
}

/* Grille */
.altus-section-news-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
}
.altus-section-news-card { display: flex; flex-direction: column; }
.altus-section-news-card-media img { aspect-ratio: 16 / 10; }
.altus-section-news-card-body {
  padding: 24px;
  flex: 1;
  display: flex;
  flex-direction: column;
}
.altus-section-news-card-title {
  margin: 16px 0 10px;
  font-size: 22px;
  line-height: 1.25;
  font-weight: var(--altus-w-medium);
  letter-spacing: -0.015em;
}
.altus-section-news-card-excerpt {
  margin: 0 0 22px;
  font-size: 15px;
  color: var(--altus-fg2-inverse);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.altus-section-news-card .altus-section-news-more { margin-top: auto; }

/* État vide */
.altus-section-news-empty {
  margin: 0;
  padding: 48px 0;
  font-size: 17px;
  text-align: center;
  color: var(--altus-fg2-inverse);
}

/* Pagination */
.altus-section-news-pagination {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 6px;
  margin-top: 48px;
}
.altus-section-news-page {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  height: 40px;
  padding: 0 12px;
  font-size: 14px;
  line-height: 1;
  border: 1px solid var(--altus-news-line);
  color: var(--altus-fg1-inverse);
  transition: border-color 200ms var(--altus-ease);
}
a.altus-section-news-page:hover { border-color: var(--altus-fg1-inverse); }
a.altus-section-news-page:focus-visible { outline: 2px solid var(--altus-fg1-inverse); outline-offset: 4px; }
.altus-section-news-page.is-prev, .altus-section-news-page.is-next { padding: 0 16px; }
.altus-section-news-page.is-current {
  background: var(--altus-fg1-inverse);
  border-color: var(--altus-fg1-inverse);
  color: var(--altus-fg1);
  font-weight: var(--altus-w-medium);
}
.altus-section-news-page.is-gap { border: 0; color: var(--altus-fg2-inverse); }
.altus-section-news-page.is-disabled { border: 0; color: var(--altus-fg2-inverse); cursor: default; }

/* Note CTA */
.altus-section-news-note {
  margin-top: 56px;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 24px;
  align-items: center;
  padding: 36px 40px;
  background: var(--altus-bg);
  color: var(--altus-fg1);
}
.altus-section-news-note-text {
  margin: 0;
  font-size: 19px;
  line-height: 1.45;
  color: var(--altus-fg1);
  text-wrap: pretty;
}
.altus-section-news-note-eyebrow {
  display: block;
  margin-bottom: 8px;
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--altus-accent);
}
.altus-section-news-note .altus-btn { white-space: nowrap; }

/* ─── Responsive ───────────────────────────────────────────── */

@media (max-width: 1024px) {
  .altus-section-news-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 860px) {
  .altus-section-news-head { padding-top: 140px; } /* header mobile : 116px */
  .altus-section-news-featured { grid-template-columns: 1fr; }
  .altus-section-news-featured-media img { min-height: 0; aspect-ratio: 16 / 10; }
  .altus-section-news-featured-text { padding: 28px 24px; }
  .altus-section-news-note { grid-template-columns: 1fr; padding: 28px 24px; }
}
@media (max-width: 600px) {
  .altus-section-news-grid { grid-template-columns: 1fr; }
  .altus-section-news-body { padding: 48px 20px 64px; }
  .altus-section-news-page.is-gap, .altus-section-news-page.is-far { display: none; }
}