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

   BLOCK — Header animé

   Full width + border right 20px white

   Fond white-dark

   Titre highlight page-accent (sur le texte, bord droit incliné)

   Image ronde à droite

   Blob visible UNIQUEMENT au survol (JS toggle .header-anime.is-hover)

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



/* Wrapper */

.header-anime {

  width: 100%;

  border-right: 20px solid #fff;



}



/* Inner container */

.header-anime__inner{

  position: relative;

  width: 100%;

  min-height: 260px;



  background: var(--color-blanc-fonce);

  overflow: hidden;



  /* padding vertical, horizontal simple */

  padding: 20px 20px;

}



/* Container wide (contenu centré) */

.header-anime__container{

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

  margin: 0 auto;



  display: flex;

  align-items: center;

  justify-content: space-around;

  padding:100px 0;

  position:relative;

  gap: clamp(20px, 4vw, 64px);

}



.header-anime__content{

  position: relative;

  z-index: 2;

  min-width: 0; /* évite les débordements avec gros texte */

}



.header-anime__media{

  position: relative;

  z-index: 2;

  align-items: center;

  justify-content: flex-end;

}



.header-anime_bottom{

  position:absolute;

  left:0;

  bottom:0px;

  width:100%;

  display: flex;

  justify-content: space-between;

  align-items: self-end;



    padding:0 10px;

}



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

   BLOB (tache)

   - cachée par défaut

   - visible uniquement quand .header-anime.is-hover

   - transform piloté par JS

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



.header-anime__blob {

  position: absolute;

  left: 0;

  top: 0;



  width: 110px;

  height: 110px;

  border-radius: 999px;



  pointer-events: none;

  z-index: 1;



  /* rendu tache diffuse */

  background: radial-gradient(

    circle,

    var(--page-accent) 0%,

    rgba(0, 0, 0, 0) 65%

  );

  filter: blur(18px);



  /* IMPORTANT: invisible hors survol */

  opacity: 0;

  visibility: hidden;



  /* transition clean + vrai hide */

  transition: opacity .18s ease, visibility 0s linear .18s;

}



/* Visible uniquement au survol (classe ajoutée en JS) */

.header-anime.is-hover .header-anime__blob {

  opacity: .6;

  visibility: visible;

  transition: opacity .18s ease, visibility 0s linear 0s;

}



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

   TITLE — fond vert collé + biseau simple à droite

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



.header-anime__title {

  margin: 0;

  line-height: 1; /* IMPORTANT : aucune respiration verticale */

  letter-spacing: -0.02em;



  font-size: clamp(34px, 4.2vw, 62px);

  font-weight: 700;

  text-transform: uppercase;

}



.header-anime__title .title-line {

  position: relative;

  display: block;          /* empilement strict */

  width: fit-content;



  color: #fff;



  /* padding horizontal seulement */

  padding: 6px 48px 6px 14px;



  /* aucun espace entre lignes */

  margin: 0;



  isolation: isolate;

}



.header-anime__title .title-line::before {

  content: "";

  position: absolute;

  inset: 0;

  z-index: -1;



  background: var(--page-accent);



  /*

    BISEAU SIMPLE :

    - le bord haut va plus loin que le bord bas

    - pas de pointe / flèche

  */

  clip-path: polygon(

    0 0,

    98% 0,   /* haut plus long */

    95% 100%,/* bas plus court */

    0 100%

  );

}



/* Décalage horizontal par ligne */

.header-anime__title .title-line:nth-child(1) {

  margin-left: 50px;

}



.header-anime__title .title-line:nth-child(2) {

  margin-left: 100px;

}



.header-anime__title .title-line:nth-child(3) {

  margin-left: 0px;

}







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

   MEDIA — Image ronde

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



.header-anime__media {

  display: flex;

  align-items: center;

  justify-content: flex-end;

}



.header-anime__circle {

  width: clamp(140px, 20vw, 320px);

  height: clamp(140px, 20vw, 320px);

  border-radius: 999px;

  overflow: hidden;

}



.header-anime__circle img {

  width: 100%;

  height: 100%;

  display: block;

  object-fit: cover;

}


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

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

/* état initial */
.header-anime__title .title-line,
.header-anime__media,
.header-anime_bottom .breadcrumb,
.header-anime_bottom .btn_primary {
  opacity: 0;
  transform: translateY(16px);
}

/* titre : apparition ligne par ligne */
.header-anime__title .title-line:nth-child(1) {
  animation: headerAnimeReveal 0.7s cubic-bezier(0.22, 1, 0.36, 1) forwards;
  animation-delay: 0.08s;
}

.header-anime__title .title-line:nth-child(2) {
  animation: headerAnimeReveal 0.7s cubic-bezier(0.22, 1, 0.36, 1) forwards;
  animation-delay: 0.18s;
}

.header-anime__title .title-line:nth-child(3) {
  animation: headerAnimeReveal 0.7s cubic-bezier(0.22, 1, 0.36, 1) forwards;
  animation-delay: 0.28s;
}

/* image */
.header-anime__media {
  animation: headerAnimeReveal 0.7s cubic-bezier(0.22, 1, 0.36, 1) forwards;
  animation-delay: 0.22s;
}

/* breadcrumb + bouton */
.header-anime_bottom .breadcrumb {
  animation: headerAnimeReveal 0.7s cubic-bezier(0.22, 1, 0.36, 1) forwards;
  animation-delay: 0.34s;
}

.header-anime_bottom .btn_primary {
  animation: headerAnimeReveal 0.7s cubic-bezier(0.22, 1, 0.36, 1) forwards;
  animation-delay: 0.42s;
}

/* accessibilité */
@media (prefers-reduced-motion: reduce) {
  .header-anime__title .title-line,
  .header-anime__media,
  .header-anime_bottom .breadcrumb,
  .header-anime_bottom .btn_primary {
    opacity: 1;
    transform: none;
    animation: none;
  }
}


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

   RESPONSIVE

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



@media (max-width: 860px){



  /* Border droite réduit */

  .header-anime{

    border-right: 15px solid #fff;

  }



  /* Container en colonne */

  .header-anime__container{

    flex-direction: column;

    align-items: flex-start;

    justify-content: flex-start;

    gap: 18px;



    /* on garde de la place pour le breadcrumb en haut */

    padding: 30px 0 30px 0;

  }



  /* IMAGE en premier + sort à droite */

  .header-anime__media{

    order: 1;

    width: 100%;

    justify-content: flex-start;

  }



  .header-anime__circle{

    /* léger plus grand possible en mobile si tu veux */

    width: clamp(160px, 55vw, 260px);

    height: clamp(160px, 55vw, 260px);



    /* sort de l'écran à droite */

    transform: translateX(-60px);

  }



  /* TEXTE après l'image */

  .header-anime__content{

    order: 2;

    width: 100%;

  }



  /* TITRE : plus de fond, plus blanc -> couleur page */

  .header-anime__title .title-line{

    color: var(--page-accent);

    padding: 0;       /* plus de “bande” */

    margin-left: 0;   /* on annule les offsets */

  }



  .header-anime__title .title-line::before{

    content: none;    /* supprime le fond */

  }



  /* Bottom dans le flux (surtout PAS positionné) */

  .header-anime_bottom{

    order: 3;

    position: static;     /* IMPORTANT: annule l'ancrage */

    width: 100%;



    display: flex;

    flex-direction: column;

    align-items: flex-start;

    gap: 16px;

    padding:0;

  }



  /* Breadcrumb ancré au bloc (header-anime__inner est position:relative) */

  .header-anime__inner .breadcrumb{

    position: absolute;

    top: -14px;

    right: 5px;



    transform: rotate(-90deg)!important;

    transform-origin: top right;



    text-align: right;

    white-space: nowrap;

    z-index: 5;

  }



  /* Bouton reste sous le texte (et sous breadcrumb car breadcrumb est absolu) */

  .header-anime_bottom .btn_primary{

    margin-top: 8px;

  }



  /* Décalage horizontal par ligne */

  .header-anime__title .title-line:nth-child(1) {

    margin-left: 0px;

  }



  .header-anime__title .title-line:nth-child(2) {

    margin-left: 0px;

  }



  .header-anime__title .title-line:nth-child(3) {

    margin-left: 0px;

  }

}