/* Section Actualités (page d'accueil) */
.actus-content {
  margin: 8vh 0;
}

/* Deck de cartes */
.actus-deck {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
  padding: 0 11vw;
  align-items: stretch;
}

/* Tant qu'il y a peu d'articles, on évite la colonne vide : les cartes
   s'étalent sur la largeur disponible au lieu de rester tassées à gauche. */
.actus-deck:has(.actu-card:only-child) {
  grid-template-columns: minmax(0, 26rem);
  justify-content: center;
}

.actus-deck:has(.actu-card:nth-child(2):last-child) {
  grid-template-columns: repeat(2, minmax(0, 26rem));
  justify-content: center;
}

/* Carte article */
.actu-card {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--wp--preset--color--text-main-transparent);
  border-radius: 4px;
  overflow: hidden;
  text-decoration: none;
  color: var(--wp--preset--color--text-main);
  background-color: transparent;
  transition: transform 0.3s ease, border-color 0.3s ease;
}

.actu-card:hover {
  transform: translateY(-4px);
  border-color: var(--wp--preset--color--text-main);
}

/* Visuel : image à la une ou forme de repli */
.actu-visuel {
  position: relative;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background-color: var(--wp--preset--color--background-main);
}

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

.actu-card:hover .actu-visuel img {
  transform: scale(1.04);
}

/* Repli quand l'article n'a ni image à la une ni image dans son contenu :
   une forme de la charte, à pleine opacité. */
.actu-visuel-forme {
  display: flex;
  align-items: center;
  justify-content: center;
}

.actu-forme {
  width: 55%;
  height: 55%;
  transition: transform 0.4s ease;
}

.actu-card:hover .actu-forme {
  transform: scale(1.05) rotate(-3deg);
}

/* Contenu texte */
.actu-contenu {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  padding: var(--wp--preset--spacing--30);
  flex-grow: 1;
}

/* Le style de bloc du thème ajoute marges et retraits aux paragraphes et
   titres : dans une carte, c'est le flex qui gère l'espacement. */
.actu-contenu > * {
  margin: 0;
  padding-left: 0;
  padding-right: 0;
  max-width: 100%;
}

.actu-date {
  font-family: Arial, sans-serif;
  font-size: 0.75rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  opacity: 0.7;
}

.actu-titre {
  font-size: 1.5rem;
  font-weight: 400;
  line-height: 1.2;
  margin: 0;
  border: 0 !important;
  padding: 0 !important;
  text-wrap: balance;
  text-transform: none;
}

.actu-extrait {
  font-family: Arial, sans-serif;
  font-size: 0.9rem;
  line-height: 1.55;
  margin: 0;
  opacity: 0.8;
}

.actu-contenu > .actu-lire {
  font-family: Arial, sans-serif;
  font-size: 0.85rem;
  margin-top: auto;
  padding-top: 0.5rem;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Bouton vers l'archive : aligné comme celui des événements */
.actus-bouton {
  display: flex;
  justify-content: flex-end;
  flex-wrap: nowrap;
  margin: 0;
  padding: var(--wp--preset--spacing--30) 11vw;
}

/* Tablettes */
@media (max-width: 1024px) {
  .actus-deck {
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
    padding: 0 var(--wp--preset--spacing--50);
  }

  .actus-bouton {
    padding-left: var(--wp--preset--spacing--50);
    padding-right: var(--wp--preset--spacing--50);
  }
}

/* Mobiles */
@media (max-width: 768px) {
  .actus-content {
    margin: 5vh 0;
  }

  .actus-deck {
    grid-template-columns: 1fr;
    gap: 1.25rem;
  }

  .actu-titre {
    font-size: 1.3rem;
  }
}

/* Pas d'effet de survol au doigt */
@media (hover: none) and (pointer: coarse) {
  .actu-card:hover {
    transform: none;
  }

  .actu-card:hover .actu-visuel img,
  .actu-card:hover .actu-forme {
    transform: none;
  }

  .actu-card:active {
    transform: scale(0.98);
    transition: transform 0.1s ease;
  }
}

@media (prefers-reduced-motion: reduce) {
  .actu-card,
  .actu-visuel img,
  .actu-forme {
    transition: none;
  }
}

/* Aucun article publié : un mot d'attente plutôt qu'un titre de section
   suivi d'un blanc. */
.actus-vide {
  font-family: Arial, sans-serif;
  font-size: 1.05rem;
  text-align: center;
  opacity: 0.65;
  margin: 0;
  padding: var(--wp--preset--spacing--60) var(--wp--preset--spacing--50);
}

/* ------------------------------------------------------------------
   Page d'archive des actualités
   ------------------------------------------------------------------ */
/* Le sticky header (8vh) ne doit pas recouvrir le titre de la page. */
.actus-archive {
  padding-top: 12vh !important;
}

.actus-archive-contenu {
  margin-top: var(--wp--preset--spacing--50);
}

/* L'archive garde trois colonnes quelle que soit la quantité d'articles :
   les règles de centrage du deck de la page d'accueil n'ont pas cours ici. */
.actus-archive .actus-deck,
.actus-archive .actus-deck:has(.actu-card:only-child),
.actus-archive .actus-deck:has(.actu-card:nth-child(2):last-child) {
  grid-template-columns: repeat(3, 1fr);
  justify-content: stretch;
}

@media (max-width: 1024px) {
  .actus-archive .actus-deck,
  .actus-archive .actus-deck:has(.actu-card:only-child),
  .actus-archive .actus-deck:has(.actu-card:nth-child(2):last-child) {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 768px) {
  .actus-archive .actus-deck,
  .actus-archive .actus-deck:has(.actu-card:only-child),
  .actus-archive .actus-deck:has(.actu-card:nth-child(2):last-child) {
    grid-template-columns: 1fr;
  }
}

/* ------------------------------------------------------------------
   Article seul : contenu à gauche, navigation à droite
   ------------------------------------------------------------------ */
.actu-single {
  max-width: 100%;
}

.actu-single-grille {
  display: grid;
  grid-template-columns: minmax(0, 46rem) minmax(0, 18rem);
  gap: var(--wp--preset--spacing--70);
  justify-content: center;
  align-items: start;
  padding: 0 var(--wp--preset--spacing--50);
}

/* Premier article du site : sans autre actualité à proposer, la colonne
   de navigation est vide et ne doit pas réserver d'espace. */
.actu-single-grille:not(:has(.actus-nav)) {
  grid-template-columns: minmax(0, 46rem);
}

.actu-single-grille:not(:has(.actus-nav)) .actu-single-aside {
  display: none;
}

/* WordPress applique sa largeur "constrained" et son padding global à
   chaque enfant : dans une grille qui gère déjà les deux, le contenu se
   retrouverait décalé une seconde fois. */
.actu-single-grille,
.actu-single-grille > *,
.actu-single-article > *,
.actu-single-entete > *,
.actu-single-corps > * {
  max-width: 100%;
  margin-left: 0;
  margin-right: 0;
  padding-left: 0;
  padding-right: 0;
}

/* ---- Colonne article ---- */
.actu-single-date {
  font-family: Arial, sans-serif;
  font-size: 0.8rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  opacity: 0.7;
  margin: 0 0 0.5rem;
}

.actu-single-titre {
  font-size: clamp(2rem, 4.5vw, 3.2rem);
  font-weight: 400;
  line-height: 1.1;
  margin: 0;
  border: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  text-wrap: balance;
  text-transform: none;
}

.actu-single-image img {
  width: 100%;
  height: auto;
  border-radius: 4px;
}

.actu-single-corps {
  font-family: Arial, sans-serif;
  font-size: 1rem;
  line-height: 1.75;
}

.actu-single-corps > * {
  margin-top: 0;
  margin-bottom: 1.2em;
}

.actu-single-corps h2,
.actu-single-corps h3,
.actu-single-corps h4 {
  font-family: inherit;
  line-height: 1.25;
  margin-top: 1.8em;
  margin-bottom: 0.6em;
  border: 0 !important;
}

.actu-single-corps a {
  color: var(--wp--preset--color--text-main);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.actu-single-corps img {
  max-width: 100%;
  height: auto;
  border-radius: 4px;
}

.actu-single-corps blockquote {
  border-left: 3px solid var(--wp--preset--color--text-main-transparent);
  padding-left: 1.2rem;
  margin-left: 0;
  font-style: italic;
}

.actu-single-tags {
  font-family: Arial, sans-serif;
  font-size: 0.8rem;
  opacity: 0.75;
  margin-top: var(--wp--preset--spacing--50);
}

.actu-single-tags a {
  color: var(--wp--preset--color--text-main);
}

/* ---- Colonne navigation ---- */
.actu-single-aside {
  position: sticky;
  top: 12vh;
}

.actus-nav-titre {
  font-size: 1.1rem;
  font-weight: 400;
  margin: 0 0 1.2rem;
  padding: 0 0 0.7rem;
  border: 0 !important;
  border-bottom: 1px solid var(--wp--preset--color--text-main-transparent) !important;
  text-transform: none;
}

.actus-nav-liste {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
}

.actus-nav-lien {
  display: grid;
  grid-template-columns: 4.5rem 1fr;
  gap: 0.85rem;
  align-items: start;
  text-decoration: none;
  color: var(--wp--preset--color--text-main);
}

.actus-nav-visuel {
  display: block;
  aspect-ratio: 1 / 1;
  border-radius: 4px;
  overflow: hidden;
  background-color: var(--wp--preset--color--background-main);
  border: 1px solid var(--wp--preset--color--text-main-transparent);
}

.actus-nav-visuel img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.35s ease;
}

.actus-nav-visuel .actu-forme {
  width: 62%;
  height: 62%;
  margin: 19%;
  transition: transform 0.35s ease;
}

.actus-nav-lien:hover .actus-nav-visuel img {
  transform: scale(1.06);
}

.actus-nav-lien:hover .actus-nav-visuel .actu-forme {
  transform: scale(1.06);
}

.actus-nav-texte {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  min-width: 0;
}

.actus-nav-date {
  font-family: Arial, sans-serif;
  font-size: 0.68rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  opacity: 0.65;
}

.actus-nav-titre-article {
  font-size: 1rem;
  line-height: 1.25;
  text-wrap: balance;
}

.actus-nav-lien:hover .actus-nav-titre-article {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.actus-nav-toutes {
  display: inline-block;
  margin-top: 1.4rem;
  padding-top: 1rem;
  border-top: 1px solid var(--wp--preset--color--text-main-transparent);
  width: 100%;
  font-family: Arial, sans-serif;
  font-size: 0.85rem;
  color: var(--wp--preset--color--text-main);
  text-decoration: none;
  opacity: 0.8;
}

.actus-nav-toutes::after {
  content: " →";
}

.actus-nav-toutes:hover {
  opacity: 1;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* La flèche retour maison ne doit pas chevaucher le contenu, et le sticky
   header (8vh) ne doit pas recouvrir la date en haut d'article. */
.actu-single {
  padding-left: 5vw;
  padding-top: 12vh !important;
}

/* Tablettes : la navigation passe sous l'article */
@media (max-width: 1100px) {
  .actu-single-grille {
    grid-template-columns: minmax(0, 46rem);
  }

  .actu-single-aside {
    position: static;
    margin-top: var(--wp--preset--spacing--70);
    padding-top: var(--wp--preset--spacing--40);
    border-top: 1px solid var(--wp--preset--color--text-main-transparent);
  }

  .actus-nav-liste {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.2rem 1.5rem;
  }
}

@media (max-width: 768px) {
  /* La flèche retour est fixe : on descend le contenu pour qu'elle ne
     recouvre ni la date ni le titre. */
  .actu-single {
    padding-left: 0;
    padding-top: 22vh !important;
  }

  .actu-single-grille {
    padding-left: var(--wp--preset--spacing--40);
    padding-right: var(--wp--preset--spacing--40);
  }

  .actu-single-corps {
    font-size: 0.95rem;
  }

  .actus-nav-liste {
    grid-template-columns: 1fr;
  }
}

@media (prefers-reduced-motion: reduce) {
  .actus-nav-visuel img,
  .actus-nav-visuel .actu-forme {
    transition: none;
  }
}