/**
 * Bloc « dernières actualités » de la page d'accueil — vue `article`, affichage `block_1`.
 * Posé le 2026-09-02.
 *
 * Contexte : la classe .teaser-homepage n'avait AUCUNE règle dans style.css.
 * Le bloc s'affichait en grille Bootstrap brute.
 *
 * Portée : tout est préfixé par .view-article, vue utilisée uniquement par
 * gabriellepasselecq.be. chpchene.be ne la rend pas — vérifié.
 *
 * Palette et typographie reprises du thème : #002d43, #be0519, HelveticaLTStd.
 * À terme, ces règles ont vocation à rejoindre les sources SCSS du thème.
 */

.view-article {
  --ah-nav: #002d43;
  --ah-red: #be0519;
  --ah-red-dk: #920010;
  --ah-grey: #f4f4f4;
  --ah-rule: rgba(0, 45, 67, .14);
  --ah-nav-60: rgba(0, 45, 67, .6);
  --ah-gap: 34px;
}

/* ---------- Cadrage ----------
 * Le paragraphe `prg-view` ne rend pas de <div class="container">, alors que le
 * thème l'attend (.prg-view .container { padding: 60px 0 }). Sans lui, la vue
 * part bord à bord et sans respiration verticale. On redonne ici à .view-article
 * la géométrie exacte du .container Bootstrap du thème (750 / 970 / 1170 + 15px),
 * pour que la section s'aligne sur le héros et les raccourcis qui la précèdent.
 */
.view-article {
  box-sizing: border-box;
  width: 100%;
  padding: 60px 15px;
  margin-right: auto;
  margin-left: auto;
}
.view-article *, .view-article *::before, .view-article *::after { box-sizing: border-box; }

@media (min-width: 768px)  { .view-article { width: 750px;  } }
@media (min-width: 992px)  { .view-article { width: 970px;  } }
@media (min-width: 1200px) { .view-article { width: 1170px; } }

/* ---------- En-tête de section ---------- */
.view-article .view-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 24px;
  padding-bottom: 16px;
  margin-bottom: var(--ah-gap);
  border-bottom: 2px solid var(--ah-nav);
}
.view-article .view-header h2 {
  margin: 0;
  color: var(--ah-nav);
  font-size: clamp(19px, 2.1vw, 26px);
  font-weight: 700;
  line-height: 1.22;
  letter-spacing: -.015em;
  max-width: 45%;
  display: flex;
  gap: 12px;
}
/* Reprend la convention .title--line du thème, en rouge pour signaler la section */
.view-article .view-header h2::before {
  content: "";
  flex: 0 0 20px;
  height: 3px;
  background-color: var(--ah-red);
  margin-top: .62em;
}
.view-article .view-header .actus-all {
  color: var(--ah-nav-60);
  font-size: 13.5px;
  text-decoration: none;
  white-space: nowrap;
  border-bottom: 1px solid var(--ah-rule);
  padding-bottom: 2px;
  transition: color .2s, border-color .2s;
}
.view-article .view-header .actus-all:hover,
.view-article .view-header .actus-all:focus {
  color: var(--ah-red);
  border-bottom-color: var(--ah-red);
}

/* ---------- Paire asymétrique : la plus récente domine ---------- */
.view-article .view-content {
  display: grid;
  grid-template-columns: 1.38fr 1fr;
  gap: var(--ah-gap);
  align-items: start;
}
.view-article .view-content > * { min-width: 0; }

.view-article .teaser-homepage {
  display: flex;
  flex-direction: column;
  height: 100%;
}

/* ---------- Le filet daté : la date structure le bloc ---------- */
.view-article .teaser-homepage .m_infos.actualites {
  display: flex;
  align-items: center;
  gap: 12px;
  border-top: 2px solid var(--ah-nav);
  padding-top: 9px;
  margin: 0 0 14px;
}
.view-article .teaser-homepage .m_date,
.view-article .teaser-homepage .m_date time {
  font-size: 13px;
  font-weight: 700;
  color: var(--ah-nav);
  letter-spacing: .02em;
  font-variant-numeric: tabular-nums;
}
.view-article .teaser-homepage .m_categorie {
  font-size: 13px;
  color: var(--ah-red);
  margin-left: auto;
  text-align: right;
}
.view-article .teaser-homepage .m_categorie a { color: inherit; text-decoration: none; }

/* ---------- La photographie porte le bloc ---------- */
.view-article .teaser-homepage .ah-shot {
  display: block;
  overflow: hidden;
  background-color: var(--ah-grey);
  margin-bottom: 16px;
}
.view-article .teaser-homepage .ah-shot img {
  width: 100%;
  height: auto;
  display: block;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  transition: transform .5s cubic-bezier(.2, .6, .2, 1);
}
.view-article .view-content > :first-child .ah-shot img { aspect-ratio: 16 / 10; }
.view-article .teaser-homepage:hover .ah-shot img { transform: scale(1.035); }

/* ---------- Titre ---------- */
.view-article .teaser-homepage h2 {
  margin: 0 0 10px;
  line-height: 1.24;
  letter-spacing: -.012em;
  font-weight: 700;
  font-size: clamp(16.5px, 1.2vw, 19px);
}
.view-article .view-content > :first-child .teaser-homepage h2,
.view-article .view-content > .teaser-homepage:first-child h2 {
  font-size: clamp(18px, 1.55vw, 23px);
}
.view-article .teaser-homepage h2 a {
  color: var(--ah-nav);
  text-decoration: none;
  background-image: linear-gradient(var(--ah-red), var(--ah-red));
  background-size: 0 2px;
  background-repeat: no-repeat;
  background-position: 0 100%;
  transition: background-size .3s cubic-bezier(.2, .6, .2, 1);
}
.view-article .teaser-homepage h2 a:hover,
.view-article .teaser-homepage h2 a:focus { background-size: 100% 2px; }

/* ---------- Chapô ---------- */
.view-article .teaser-homepage p {
  margin: 0 0 18px;
  color: var(--ah-nav-60);
  font-size: 14.5px;
  line-height: 1.62;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}
.view-article .view-content > :first-child .teaser-homepage p,
.view-article .view-content > .teaser-homepage:first-child p { -webkit-line-clamp: 3; }

/* ---------- Appel à l'action : seul élément arrondi ---------- */
.view-article .teaser-homepage .btn--primary {
  margin-top: auto;
  align-self: flex-start;
  padding: 15px 38px;
  font-size: 12px;
}

/* ---------- Adaptatif ---------- */
@media (max-width: 860px) {
  .view-article .view-content { grid-template-columns: 1fr; gap: 38px; }
  .view-article .view-content > :first-child .ah-shot img { aspect-ratio: 16 / 10; }
  .view-article .view-header { flex-direction: column; align-items: flex-start; gap: 10px; }
}

@media (prefers-reduced-motion: reduce) {
  .view-article .teaser-homepage .ah-shot img,
  .view-article .teaser-homepage h2 a,
  .view-article .view-header .actus-all { transition: none; }
  .view-article .teaser-homepage:hover .ah-shot img { transform: none; }
}

.view-article a:focus-visible { outline: 3px solid var(--ah-red); outline-offset: 3px; }