/* ============================================================
   ANSPACH — News : liste (/news/) et article (/news/<slug>/)
   Partage par la page de liste et les pages d'actualite, au-dessus du
   socle site.css. Modeles : « Page News » et « Page News - Prison Island ».
   ============================================================ */

/* ---------- Liste ----------
   Chaque actualite est une rangee. Trois zones nommees : la date, le corps
   et l'image, qui se reorganisent selon la largeur sans toucher au DOM. */
.news-list { display:flex; flex-direction:column }
.news { display:grid; grid-template-columns:1fr; grid-template-areas:"img" "date" "body"; gap:18px;
        padding:32px 0; border-bottom:1px solid rgba(35,0,68,.14); color:#230044 }
.news-list > .news:first-child { padding-top:0 }
.news:hover { color:#230044 }
.news-date { grid-area:date; display:flex; align-items:baseline; gap:10px }
.news-day { font-family:'Bodoni Moda',serif; font-size:34px; line-height:1; font-weight:500; letter-spacing:-.02em; color:#230044 }
.news.is-closed .news-day { color:rgba(35,0,68,.4) }
.news-my { font:700 11px Figtree,sans-serif; letter-spacing:.14em; text-transform:uppercase; color:rgba(35,0,68,.55) }
.news-body { grid-area:body }
.news-meta { display:flex; align-items:center; flex-wrap:wrap; gap:14px; font:700 11px Figtree,sans-serif; letter-spacing:.14em; text-transform:uppercase; color:rgba(35,0,68,.55); margin-bottom:12px }
.pill { display:inline-flex; align-items:center; height:22px; padding:0 10px; border:1px solid rgba(35,0,68,.3); color:rgba(35,0,68,.6); font:700 10px Figtree,sans-serif; letter-spacing:.14em; text-transform:uppercase }
.news-t { margin:0; font-family:'Bodoni Moda',serif; font-size:26px; line-height:1.1; font-weight:500; letter-spacing:-.02em; color:#230044; max-width:22ch;
          transition:color .25s ease }
.news:hover .news-t { color:#5554A0 }
.news-x { margin:12px 0 0; font-size:15px; line-height:1.6; color:rgba(35,0,68,.72); max-width:58ch; text-wrap:pretty }
.news-more { margin-top:16px; font:700 13px Figtree,sans-serif; color:#230044 }
.news-img { grid-area:img; position:relative; aspect-ratio:3/2; overflow:hidden; background:#EFE4EE }
.news-img img { position:absolute; left:0; top:0; width:100%; height:100%; object-fit:cover; display:block;
                transition:transform .8s cubic-bezier(.22,.61,.36,1) }
.news:hover .news-img img { transform:scale(1.05) }
@media (min-width:768px) {
  .news { grid-template-columns:1fr 240px; grid-template-rows:auto 1fr; grid-template-areas:"date img" "body img"; gap:14px 32px; padding:36px 0 }
  .news-body { align-self:start }
  .news-img { align-self:center }
  .news-day { font-size:36px }
}
@media (min-width:1024px) {
  .news { grid-template-columns:150px 1fr 300px; grid-template-rows:auto; grid-template-areas:"date body img"; gap:48px; align-items:center }
  .news-date { display:block }
  .news-day { font-size:40px }
  .news-my { display:block; margin-top:8px }
  .news-t { font-size:32px }
}

/* ---------- Article ---------- */
/* Bandeau : un cran plus haut que les autres pages, le titre peut etre long. */
.phero-news { height:440px }
@media (min-width:768px) { .phero-news { height:480px } }
@media (min-width:1024px) { .phero-news { height:520px } }
.phero-news .phero-card-in { max-width:732px }
.phero-news .h1 { max-width:18ch; line-height:1; font-size:min(var(--ph1),56px) }
.art-meta { margin-top:16px; display:flex; align-items:center; flex-wrap:wrap; gap:10px 14px; font:600 14px Figtree,sans-serif; color:rgba(255,255,255,.8) }
.art-meta .dot { color:rgba(255,255,255,.4) }
@media (min-width:1024px) { .art-meta { margin-top:20px } }
/* Etat « Clôturé » dans le bandeau : pastille claire sur la plaque sombre. */
.pill-light { border-color:rgba(255,255,255,.55); color:#fff }

.article { display:grid; grid-template-columns:1fr; gap:40px }
@media (min-width:1024px) { .article { grid-template-columns:1fr 360px; gap:64px; align-items:start } }
.art-body { max-width:680px }
.art-lead { margin:0; font-family:'Bodoni Moda',serif; font-size:22px; line-height:1.35; font-weight:400; color:#230044; letter-spacing:-.01em; text-wrap:pretty }
@media (min-width:768px) { .art-lead { font-size:26px } }
.art-txt { margin-top:30px; font-size:16px; line-height:1.75; color:rgba(35,0,68,.82); display:flex; flex-direction:column; gap:18px; text-wrap:pretty }
.art-txt p { margin:0 }
.art-txt a { color:#230044; text-decoration:underline }
.art-txt .h3 { font-size:26px; line-height:1.15 }
@media (min-width:768px) { .art-txt { margin-top:36px; font-size:17px; gap:20px } .art-txt .h3 { font-size:30px } }
.art-img { margin-top:32px; position:relative; aspect-ratio:16/9; overflow:hidden; background:#EFE4EE }
.art-img img { position:absolute; left:0; top:0; width:100%; height:100%; object-fit:cover; display:block }
@media (min-width:768px) { .art-img { margin-top:40px } }

/* Encart de cloture : dans le fil de lecture, avant le texte. */
.closed-note { margin-top:28px; display:flex; gap:16px; align-items:flex-start; padding:20px 22px; background:#EFE4EE; color:#230044; border-left:3px solid #230044 }
.closed-note b { display:block; font:700 11px Figtree,sans-serif; letter-spacing:.16em; text-transform:uppercase; margin-bottom:6px }
.closed-note p { margin:0; font-size:15px; line-height:1.6; color:rgba(35,0,68,.8) }
@media (min-width:768px) { .closed-note { padding:24px 28px } }

/* Partage */
.art-share { margin-top:40px; padding-top:28px; border-top:1px solid rgba(35,0,68,.14); display:flex; align-items:center; justify-content:space-between; gap:16px 24px; flex-wrap:wrap }
@media (min-width:768px) { .art-share { margin-top:48px; padding-top:32px } }
.art-share-btns { display:flex; gap:12px; flex-wrap:wrap }
.art-share .btn { padding:13px 22px; font-size:14px; gap:10px }
.ico-round { display:flex; align-items:center; justify-content:center; width:18px; height:18px; border-radius:50%; border:1.5px solid currentColor; font:700 11px Figtree,sans-serif; line-height:1 }

/* Encart pratique */
.art-aside { display:flex; flex-direction:column; gap:12px }
@media (min-width:1024px) { .art-aside { position:sticky; top:calc(var(--hdr) + 24px) } }
.card-dark { background:#230044; color:#fff; padding:32px 28px 36px }
@media (min-width:768px) { .card-dark { padding:36px 40px 40px } }
.card-dark .kicker { margin-bottom:18px }
.irows { display:flex; flex-direction:column; gap:12px; font:500 15px Figtree,sans-serif }
.irow { display:flex; justify-content:space-between; gap:16px; padding-bottom:12px; border-bottom:1px solid rgba(255,255,255,.16) }
.irow:last-child { padding-bottom:0; border-bottom:0 }
.irow span:first-child { color:rgba(255,255,255,.7) }
.irow b { font-weight:700; text-align:right }
.irow.is-closed b { color:#C98BBC }
.card-dark .btn { margin-top:28px; width:100%; padding:15px 28px }
/* Action eteinte quand l'actualite est cloturee : le bouton reste pour
   expliquer, mais il n'est plus cliquable. */
.btn-off { background:rgba(255,255,255,.12); color:rgba(255,255,255,.7); cursor:default; pointer-events:none }

/* Autres news */
.others { margin-top:var(--sec); border-top:1px solid rgba(35,0,68,.14) }
.others-head { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:16px 24px; padding:32px 0 8px }
.others-head .h2 { font-size:32px }
.others-all { font:700 14px Figtree,sans-serif; color:#230044; white-space:nowrap }
@media (min-width:768px) { .others-head { padding:40px 0 8px } .others-head .h2 { font-size:40px } }
.others .news-list > .news:first-child { padding-top:32px }
@media (min-width:768px) { .others .news-list > .news:first-child { padding-top:36px } }

@media (prefers-reduced-motion:reduce) { .news:hover .news-img img { transform:none } }