/* ==========================================================================
   Couche d'améliorations visuelles "modernes" — additive uniquement.
   Ne modifie aucune classe Nicepage existante, n'ajoute que des transitions
   et effets au survol/scroll sur les éléments déjà présents dans le HTML.
   ========================================================================== */

html {
  scroll-behavior: smooth;
}

body {
  animation: acep-fade-in .5s ease both;
}

@keyframes acep-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* --- Cartes (actualités, blocs de contenu répétés) ------------------------ */
.u-blog-post,
.u-list-item {
  transition: transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .35s ease;
  will-change: transform;
}
.u-blog-post:hover,
.u-list-item:hover {
  transform: translateY(-8px);
  box-shadow: 0 16px 32px rgba(0, 0, 0, .14);
}

/* Zoom léger sur les images de cartes au survol.
   Retiré des actualités : le site officiel les présente sans aucun effet de
   survol, et c'est la référence. Le zoom y était d'ailleurs peu lisible —
   les images sont en « contain », agrandir leur cadre de 6 % n'agrandit
   l'illustration que de très peu. Conservé pour les autres listes du site,
   qui ne sont pas concernées par cette demande. */
.u-blog-post a.u-image,
.u-list-item a.u-image {
  display: block;
  overflow: hidden;
}
.u-list-item a.u-image img {
  transition: transform .5s ease;
}
.u-list-item a.u-image:hover img {
  transform: scale(1.06);
}

/* --- Boutons / CTA ---------------------------------------------------------*/
.u-btn {
  transition: transform .25s ease, box-shadow .25s ease, filter .25s ease;
}
.u-btn:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 20px rgba(0, 0, 0, .18);
  filter: brightness(1.05);
}
.u-btn:active {
  transform: translateY(-1px);
}

/* --- Navigation -------------------------------------------------------- */
/* Couleur d'accent du menu, relevée sur la maquette d'origine : la rubrique
   active y était signalée par un texte de cette couleur et un liseré de 2 px. */
:root {
  --acep-menu-accent: #4345e7;
}

.u-nav-link {
  border-radius: 4px;
  transition: background-color .2s ease, color .2s ease;
}

/* Survol : le thème y dessine le même cadre bleu que sur la rubrique courante,
   si bien que deux entrées paraissaient sélectionnées en même temps. Le cadre
   est donc retiré au survol — seul le changement de couleur du texte, propre au
   thème, signale que l'entrée est cliquable. Le cadre reste ainsi réservé à la
   page où l'on se trouve.

   La répétition de .u-nav-link sert, ici encore, à peser plus lourd que la
   règle du thème, écrite en !important avec une spécificité gonflée. */
.u-nav-1 > .u-nav-item:not(.active) > a.u-nav-link.u-nav-link.u-nav-link.u-nav-link.u-nav-link.u-nav-link:hover,
.u-nav-4 > .u-nav-item:not(.active) > a.u-nav-link.u-nav-link.u-nav-link.u-nav-link.u-nav-link.u-nav-link:hover {
  border-color: transparent !important;
}

/* Rubrique active : encadré complet dans la couleur d'accent, avec le texte
   de la même couleur et sans fond. L'encadré reste affiché tant qu'on est sur
   la rubrique, y compris lorsque la souris est ailleurs — c'est lui qui
   signale la page courante, le survol ne faisant que colorer le texte.

   Le thème impose la couleur du texte actif en !important, avec une
   spécificité volontairement gonflée (« a.u-button-style » répété quatre
   fois) : la répétition de .u-nav-link ci-dessous n'a pas d'autre rôle que de
   peser plus lourd que cette règle.

   Le sélecteur vise les enfants directs : appliqué en descendance, il
   atteignait aussi les entrées des sous-menus et effaçait leur fond noir,
   laissant un texte blanc sur blanc. */
.u-nav-1 > .u-nav-item.active > a.u-nav-link.u-nav-link.u-nav-link.u-nav-link.u-nav-link.u-nav-link,
.u-nav-4 > .u-nav-item.active > a.u-nav-link.u-nav-link.u-nav-link.u-nav-link.u-nav-link.u-nav-link {
  background-color: transparent !important;
  color: var(--acep-menu-accent) !important;
  border: 2px solid var(--acep-menu-accent) !important;
  border-radius: 4px;
}

/* Dans les sous-menus, sur fond noir, le texte reste clair : seul l'encadré
   désigne l'entrée courante. */
.u-nav-popup .u-nav-item.active > a.u-nav-link.u-nav-link.u-nav-link.u-nav-link.u-nav-link.u-nav-link {
  border: 2px solid var(--acep-menu-accent) !important;
  border-radius: 4px;
}

.u-nav-popup .u-nav-link:hover {
  background-color: rgba(255, 255, 255, .15);
  color: #fff;
}

.u-logo-image {
  transition: transform .3s ease;
}
.u-logo:hover .u-logo-image {
  transform: scale(1.05);
}

/* Ombre douce du header quand la page est scrollée */
header.u-header {
  transition: box-shadow .3s ease;
}
header.u-header.is-scrolled {
  box-shadow: 0 4px 16px rgba(0, 0, 0, .1);
}

/* --- Champs de formulaire (admin & site) ---------------------------------- */
.u-input,
.u-field-input,
input,
textarea,
select {
  transition: box-shadow .2s ease, border-color .2s ease;
}
.u-input:focus,
.u-field-input:focus {
  box-shadow: 0 0 0 3px rgba(241, 154, 14, .25);
}

/* Respecte les préférences d'accessibilité : pas d'animation si demandé */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  body { animation: none; }
  .u-blog-post, .u-list-item, .u-btn, .u-logo-image, .u-nav-link, header.u-header {
    transition: none !important;
  }
}

/* ------------------------------------------------------------------
   Actualité épinglée

   Une actualité permanente est affichée sans date de fin et remonte en
   tête de liste. Sans repère, le visiteur la prenait pour la dernière
   publiée. L'icône seule suffit : le mot « Épinglée » redisait ce que le
   dessin montre, et alourdissait une carte volontairement sobre. Le
   libellé reste disponible au survol et pour les lecteurs d'écran.

   Le repère n'existe que dans la liste. Sur sa propre page, une actualité
   est seule : il n'y a plus d'ordre à expliquer.

   L'icône est un SVG posé dans la page — le site ne charge aucune police
   d'icônes — et « currentColor » lui fait suivre la couleur du texte.
   ------------------------------------------------------------------ */
/* Le sélecteur nomme la carte pour passer devant la règle de Nicepage
   « .u-container-layout > * { position: relative } », qui ramènerait le badge
   dans le flux. La carte, elle, est déjà positionnée (.u-repeater-item) : rien
   à ajouter de ce côté, donc aucun risque pour la mise en page du site. */
.u-blog-post .acep-epingle {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 2;

  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  margin: 0;
  border-radius: 50%;
  /* Fond opaque et ombre légère : le badge peut se superposer à une image,
     où un fond translucide deviendrait illisible. */
  background: #fdeccd;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.18);
  color: #8a5a00;
}

.acep-epingle-icone {
  flex: 0 0 auto;
  /* Légère rotation : l'épingle pointe vers le texte qu'elle retient. */
  transform: rotate(-20deg);
}

@media (prefers-color-scheme: dark) {
  .u-blog-post .acep-epingle {
    background: #5a3c06;
    color: #f7c86b;
  }
}

/* Pas de cadre autour des vignettes d'actualité.

   Un fond gris et une bordure avaient été posés pour matérialiser la case
   que le gabarit réserve à l'image, identique pour toutes (305 × 222 px),
   et rendre moins visible l'écart entre une couverture haute et une
   capture large. Le site officiel les présente sans rien de tout cela,
   et c'est la référence : l'image seule, sur le blanc de la carte. */