/* =============================================
   PAGE LISTING — ACTUALITÉS
   ============================================= */

.actu-section {
  background-color: var(--color-creme);
}

.actu-filtres {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-sm);
  margin-bottom: var(--sp-2xl);
}

.actu-grille {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-xl);
}

@media (min-width: 640px) {
  .actu-grille { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 900px) {
  .actu-grille { grid-template-columns: repeat(3, 1fr); }
}

.actu-vide {
  text-align: center;
  color: var(--color-gris);
  font-size: var(--fs-md);
  padding: var(--sp-3xl) 0;
}

/* Carte actualité */
.actu-carte {
  background: var(--color-blanc);
  border-radius: var(--border-radius-lg);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: box-shadow var(--transition), transform var(--transition);
}

.actu-carte:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-3px);
}

.actu-carte-lien {
  display: block;
}

.actu-carte-image {
  position: relative;
  aspect-ratio: 16/9;
  overflow: hidden;
  background-color: var(--color-bleu-clair);
}

.actu-carte-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}

.actu-carte:hover .actu-carte-image img {
  transform: scale(1.04);
}

.actu-carte-image-vide {
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, var(--color-bleu-clair), var(--color-gris-clair));
}

/* Tags catégorie */
.actu-tag {
  position: absolute;
  top: var(--sp-sm);
  left: var(--sp-sm);
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 0.25em 0.7em;
  border-radius: 99px;
}

.tag-danse         { background: var(--color-bleu);  color: var(--color-blanc); }
.tag-commemoration { background: var(--color-rouge);  color: var(--color-blanc); }
.tag-annonce       { background: var(--color-abricot); color: var(--color-texte); }

/* Corps de la carte */
.actu-carte-corps {
  padding: var(--sp-lg);
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: var(--sp-sm);
}

.actu-date {
  font-size: var(--fs-xs);
  color: var(--color-gris);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.actu-titre {
  font-family: var(--font-titre);
  font-size: var(--fs-md);
  line-height: 1.3;
}

.actu-titre a {
  color: var(--color-texte);
  transition: color var(--transition);
}

.actu-titre a:hover { color: var(--color-rouge); }

.actu-resume {
  font-size: var(--fs-sm);
  color: var(--color-gris);
  line-height: 1.65;
  flex: 1;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.actu-lire-plus {
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
  color: var(--color-rouge);
  margin-top: var(--sp-xs);
  transition: gap var(--transition);
}

.actu-lire-plus:hover { text-decoration: underline; }

/* =============================================
   PAGE ARTICLE INDIVIDUEL
   ============================================= */

.article-hero {
  background-color: var(--color-bleu);
  color: var(--color-blanc);
  padding-block: var(--sp-2xl);
}

.article-hero h1 {
  color: var(--color-blanc);
  margin-block: var(--sp-sm) var(--sp-md);
  max-width: 760px;
}

.article-meta {
  display: flex;
  align-items: center;
  gap: var(--sp-md);
  flex-wrap: wrap;
  margin-top: var(--sp-sm);
}

.article-meta time {
  font-size: var(--fs-sm);
  opacity: 0.75;
}

/* Image de couverture */
.article-couverture {
  background-color: var(--color-gris-clair);
  max-height: 480px;
  overflow: hidden;
}

.article-couverture img {
  width: 100%;
  max-height: 480px;
  object-fit: cover;
  display: block;
}

/* Corps de l'article */
.article-section {
  background-color: var(--color-creme);
}

.article-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-3xl);
  align-items: start;
}

@media (min-width: 900px) {
  .article-layout {
    grid-template-columns: 1fr 280px;
  }
}

/* Contenu riche (prose) */
.article-contenu {
  background: var(--color-blanc);
  border-radius: var(--border-radius-lg);
  padding: var(--sp-2xl);
  box-shadow: var(--shadow-sm);
}

.article-contenu p {
  line-height: 1.85;
  margin-bottom: var(--sp-md);
  font-size: var(--fs-md);
}

.article-contenu h2 {
  font-size: var(--fs-xl);
  color: var(--color-bleu);
  margin-top: var(--sp-2xl);
  margin-bottom: var(--sp-md);
}

.article-contenu h3 {
  font-size: var(--fs-lg);
  color: var(--color-texte);
  margin-top: var(--sp-xl);
  margin-bottom: var(--sp-sm);
}

.article-contenu ul,
.article-contenu ol {
  padding-left: var(--sp-xl);
  margin-bottom: var(--sp-md);
}

.article-contenu ul li { list-style: disc; }
.article-contenu ol li { list-style: decimal; }

.article-contenu li {
  line-height: 1.7;
  margin-bottom: var(--sp-xs);
  font-size: var(--fs-md);
}

.article-contenu blockquote {
  border-left: 4px solid var(--color-abricot);
  padding: var(--sp-md) var(--sp-lg);
  margin: var(--sp-xl) 0;
  background: var(--color-abricot-clair);
  border-radius: 0 var(--border-radius) var(--border-radius) 0;
  font-style: italic;
  color: var(--color-gris);
}

/* Photos dans l'article */
.article-photo {
  margin-block: var(--sp-xl);
}

.article-photo img {
  width: 100%;
  border-radius: var(--border-radius-lg);
  box-shadow: var(--shadow-sm);
}

.article-photo figcaption {
  text-align: center;
  font-size: var(--fs-sm);
  color: var(--color-gris);
  margin-top: var(--sp-sm);
  font-style: italic;
}

/* Grille de photos */
.article-photos-grille {
  display: grid;
  gap: var(--sp-sm);
  margin-block: var(--sp-xl);
}

.article-photos-grille.cols-2 { grid-template-columns: repeat(2, 1fr); }
.article-photos-grille.cols-3 { grid-template-columns: repeat(3, 1fr); }

@media (max-width: 500px) {
  .article-photos-grille.cols-3 { grid-template-columns: repeat(2, 1fr); }
}

.article-photos-grille img {
  width: 100%;
  aspect-ratio: 4/3;
  object-fit: cover;
  border-radius: var(--border-radius);
  box-shadow: var(--shadow-sm);
  cursor: zoom-in;
  transition: transform 0.25s ease;
}

.article-photos-grille img:hover { transform: scale(1.02); }

/* Vidéo intégrée */
.article-video {
  margin-block: var(--sp-xl);
}

.article-video-wrapper {
  position: relative;
  padding-bottom: 56.25%; /* 16:9 */
  height: 0;
  border-radius: var(--border-radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-md);
}

.article-video-wrapper iframe,
.article-video-wrapper video {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  border: none;
}

.article-video figcaption {
  text-align: center;
  font-size: var(--fs-sm);
  color: var(--color-gris);
  margin-top: var(--sp-sm);
  font-style: italic;
}

/* Sidebar */
.article-sidebar {
  display: flex;
  flex-direction: column;
  gap: var(--sp-lg);
  position: sticky;
  top: 80px;
}

.sidebar-bloc {
  background: var(--color-blanc);
  border-radius: var(--border-radius-lg);
  padding: var(--sp-lg);
  box-shadow: var(--shadow-sm);
}

.sidebar-titre {
  font-family: var(--font-titre);
  font-size: var(--fs-base);
  color: var(--color-bleu);
  margin-bottom: var(--sp-md);
  padding-bottom: var(--sp-sm);
  border-bottom: 2px solid var(--color-gris-clair);
}

.sidebar-partager {
  display: flex;
  flex-direction: column;
  gap: var(--sp-sm);
}

.btn-partager {
  display: flex;
  align-items: center;
  gap: var(--sp-sm);
  padding: 0.5em 1em;
  border-radius: var(--border-radius);
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  transition: opacity var(--transition);
  color: var(--color-blanc);
  border: none;
  cursor: pointer;
  text-align: left;
}

.btn-partager:hover { opacity: 0.85; }
.btn-partager.fb  { background: #1877f2; }
.btn-partager.wa  { background: #25d366; }
.btn-partager.copy { background: var(--color-gris); }

/* Navigation retour */
.article-retour {
  margin-bottom: var(--sp-xl);
}

.lien-retour {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-xs);
  font-size: var(--fs-sm);
  color: var(--color-bleu);
  font-weight: var(--fw-medium);
  transition: gap var(--transition);
}

.lien-retour:hover { text-decoration: underline; }