/* =====================================================================
   Accueil : les 3 dernières nouvelles, en cartes, sur un fond marine
   « salle de répartition » : quadrillé de moniteur qui s'estompe, lueurs bleue et jaune, sceau en filigrane.
   ===================================================================== */
.nouvelles-accueil {
  position: relative; isolation: isolate; overflow: hidden;
  padding-block: clamp(48px, 7vw, 88px);
  background:
    radial-gradient(ellipse 60% 70% at 100% 0%, rgba(31, 95, 191, .45), transparent 65%),
    radial-gradient(ellipse 45% 55% at 0% 100%, rgba(255, 205, 0, .10), transparent 70%),
    linear-gradient(160deg, #10254a 0%, #0b1a35 55%, #091428 100%);
  color: #e8edf5;
  border-bottom: 3px solid var(--jaune);
}
/* quadrillé fin, visible au centre seulement */
.nouvelles-accueil::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image:
    linear-gradient(rgba(255, 255, 255, .06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .06) 1px, transparent 1px),
    linear-gradient(rgba(255, 255, 255, .025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .025) 1px, transparent 1px);
  background-size: 48px 48px, 48px 48px, 12px 12px, 12px 12px;
  -webkit-mask-image: radial-gradient(ellipse 75% 80% at 50% 40%, #000 30%, transparent 75%);
          mask-image: radial-gradient(ellipse 75% 80% at 50% 40%, #000 30%, transparent 75%);
}
/* sceau ATPH en filigrane, en haut à droite */
.nouvelles-accueil::after {
  content: ""; position: absolute; z-index: -1; right: -60px; top: -60px; width: 360px; height: 360px; pointer-events: none;
  background: url("../../img/sceau-atph-192.png") no-repeat center / contain;
  opacity: .06; filter: grayscale(1) brightness(2.4);
}

.nouvelles-entete {
  display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 16px 24px;
  margin-bottom: clamp(24px, 3.5vw, 36px);
}
.nouvelles-entete h2 { margin: 0; color: #fff; position: relative; padding-bottom: 14px; }
.nouvelles-entete h2::after {
  content: ""; position: absolute; left: 0; bottom: 0; width: 56px; height: 4px; border-radius: 2px; background: var(--jaune);
}
.nouvelles-vide { color: #c9d3e2; }

.cartes-nouvelles {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(16px, 2.4vw, 28px);
}
.carte-nouvelle {
  position: relative; display: flex; flex-direction: column; overflow: hidden;
  background: #fff; color: var(--encre); border-radius: var(--r-3, 18px);
  box-shadow: 0 1px 0 rgba(255, 255, 255, .06) inset, 0 18px 40px -22px rgba(0, 0, 0, .7);
  transition: transform 250ms cubic-bezier(.2, 0, 0, 1), box-shadow 250ms cubic-bezier(.2, 0, 0, 1);
}
.carte-nouvelle:hover, .carte-nouvelle:focus-within {
  transform: translateY(-4px);
  box-shadow: 0 0 0 2px var(--jaune), 0 26px 50px -24px rgba(0, 0, 0, .8);
}
.carte-nouvelle-image { display: block; aspect-ratio: 16 / 9; overflow: hidden; background: #dfe5ee; }
.carte-nouvelle-image img {
  width: 100%; height: 100%; object-fit: cover; object-position: top; display: block;
  transition: transform 450ms cubic-bezier(.2, 0, 0, 1);
}
.carte-nouvelle:hover .carte-nouvelle-image img { transform: scale(1.04); }
.carte-nouvelle-corps { position: relative; flex: 1; display: flex; flex-direction: column; gap: 8px; padding: 18px 20px 20px; }
/* sceau léger sous la date (demande du client) */
.carte-nouvelle-corps::after {
  content: ""; position: absolute; right: 14px; bottom: 12px; width: 54px; height: 54px; pointer-events: none;
  background: url("../../img/sceau-atph-96.png") no-repeat center / contain; opacity: .08;
}
.carte-nouvelle-date {
  align-self: flex-start; display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px; border-radius: var(--r-rond, 999px);
  background: var(--marine); color: #fff; font-family: var(--titre); font-weight: 600; font-size: .9rem;
}
.carte-nouvelle-date .bi { color: var(--jaune); }
.carte-nouvelle h3 { margin: 4px 0 0; font-size: 1.22rem; line-height: 1.25; }
.carte-nouvelle h3 a { color: var(--marine); text-decoration: none; }
/* toute la carte est cliquable par le titre */
.carte-nouvelle h3 a::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.carte-nouvelle h3 a:focus-visible { outline: none; }
.carte-nouvelle:has(h3 a:focus-visible) { outline: 3px solid var(--jaune); outline-offset: 3px; }
.carte-nouvelle p { margin: 0; color: var(--gris); font-size: .98rem; }
.carte-nouvelle .meta { margin-top: auto; padding-top: 6px; font-size: .9rem; color: var(--gris); }

@media (max-width: 991.98px) {
  .cartes-nouvelles { grid-template-columns: 1fr; }
  .carte-nouvelle { flex-direction: row; }
  .carte-nouvelle-image { flex: 0 0 38%; aspect-ratio: auto; }
}
@media (max-width: 575.98px) {
  .carte-nouvelle { flex-direction: column; }
  .carte-nouvelle-image { aspect-ratio: 16 / 9; }
  .nouvelles-entete .bouton { width: 100%; justify-content: center; }
}
@media (prefers-reduced-motion: reduce) {
  .carte-nouvelle, .carte-nouvelle-image img { transition: none; }
  .carte-nouvelle:hover { transform: none; }
}