/* =========================================================

   BLOCK — Header actualité

========================================================= */



.header-actualite{

  width: 100%;

  border-right: 20px solid #fff;



  --ha-pad: 0px;

  --ha-wide-pad: clamp(

    var(--ha-pad),

    calc((100vw - var(--layout-wide-size)) / 2 + var(--ha-pad)),

    999px

  );

}



.header-actualite__inner{

  width: 100%;

  background: var(--color-blanc);

  overflow: hidden;

  padding-left:20px;

}



.header-actualite__container{

  width: 100%;

  margin: 0 auto;



  padding-left: 10px;

  max-width: var(--layout-wide-size);

  margin-left: auto;

  margin-right: auto;



  padding-top: 56px;

  padding-bottom: 22px;

}



/* Titre */

.header-actualite__title{

  margin: 0 0 18px 0;

  font-size: var(--font-size-xl);

  font-weight: 500;

  line-height: 1.05;

  letter-spacing: -0.02em;

  color: var(--color-bleu)!important;

  max-width: 38ch;

}



/* Bottom row */

.header-actualite__bottom{

  display: flex;

  align-items: flex-end;

  justify-content: space-between;

  gap: 18px;

}



/* Meta */

.header-actualite__meta{

  display: flex;

  align-items: baseline;

  gap: 6px;



  font-size: var(--font-size-xs, 12px);

  font-weight: 400;

  line-height: 1.2;

  color: var(--color-noir, #000);



  flex-wrap: wrap;

}



.header-actualite__meta-label,

.header-actualite__meta-date,

.header-actualite__meta-cats{

  font: inherit;

  color: inherit;

}



.header-actualite__meta-date{

  white-space: nowrap;

}



/* Breadcrumb (Yoast) */

.header-actualite__breadcrumb .breadcrumb{

  font-size: var(--font-size-xs, 12px);

  font-weight: 400;

  line-height: 1.2;

  color: var(--color-noir, #000);

  text-align: right;

}



.header-actualite__breadcrumb .breadcrumb a{

  color: inherit;

  text-decoration: none;

}



.header-actualite__breadcrumb .breadcrumb a:hover{

  text-decoration: underline;

}

/* =========================================================
   ANIMATION D'ENTRÉE — HEADER ACTUALITÉ
========================================================= */

@keyframes headerActualiteReveal {
  from {
    opacity: 0;
    transform: translateY(16px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* état initial */
.header-actualite__title,
.header-actualite__meta,
.header-actualite__breadcrumb {
  opacity: 0;
  transform: translateY(16px);
}

/* lancement au chargement */
.header-actualite__title {
  animation: headerActualiteReveal 0.7s cubic-bezier(0.22, 1, 0.36, 1) forwards;
  animation-delay: 0.08s;
}

.header-actualite__meta {
  animation: headerActualiteReveal 0.7s cubic-bezier(0.22, 1, 0.36, 1) forwards;
  animation-delay: 0.18s;
}

.header-actualite__breadcrumb {
  animation: headerActualiteReveal 0.7s cubic-bezier(0.22, 1, 0.36, 1) forwards;
  animation-delay: 0.28s;
}

/* accessibilité */
@media (prefers-reduced-motion: reduce) {
  .header-actualite__title,
  .header-actualite__meta,
  .header-actualite__breadcrumb {
    opacity: 1;
    transform: none;
    animation: none;
  }
}


/* =========================================================

   RESPONSIVE : empilement classique + breadcrumb en bas

========================================================= */

@media (max-width: 860px){



  .header-actualite{

    border-right: 15px solid #fff;

    --ha-pad: 20px;

    --ha-wide-pad: var(--ha-pad);

  }



  .header-actualite__container{

    padding-left: var(--ha-wide-pad);

    padding-right: var(--ha-pad);

    padding-top: 28px;

    padding-bottom: 18px;

  }



  .header-actualite__title{

    margin-bottom: 16px;

    max-width: 100%;

  }



  .header-actualite__bottom{

    flex-direction: column;

    align-items: flex-start;

    justify-content: flex-start;

    gap: 10px;

  }



  .header-actualite__breadcrumb .breadcrumb{

    text-align: left;

  }

}