/* =========================================================
   BLOCK — Header modèles (maquette)
   - Fond: blanc cassé (comme mockup)
   - Border right blanc
   - Titre vert (page-accent) en haut à gauche
   - Lien parent sous le titre (flèche verte)
   - Onglets biseautés en bas à gauche
   - Breadcrumb à droite sur la même ligne
========================================================= */

.header-modeles{
  width: 100%;
  border-right: 20px solid #fff;
  background: var(--color-blanc);
  padding:40px 0 0 0;
}

.header-modeles__inner{
  width: 100%;
  background: var(--color-blanc);
}

.header-modeles__container{
  max-width: var(--layout-wide-size);
  margin: 0 auto;
  padding: 0 30px;
}

/* =========================================================
   TOP (titre + lien parent)
========================================================= */

.header-modeles__top{
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.header-modeles__title{
  margin: 0;
  text-transform: uppercase;
  font-size: var(--font-size-xxl);
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--page-accent);
}

.header-modeles__title img{
  height:30px;
}

.header-modeles__back{
  width: fit-content;
  display: inline-flex;
  align-items: baseline;
  gap: 6px;

  text-decoration: none;
  color: var(--color-noir);
  font-weight: 500;
  font-size: var(--font-size-xs, 12px);

  transition: color .22s ease;
}

.header-modeles__back-arrow{
  color: var(--page-accent);
  font-weight: 500;
  line-height: 1;
}

.header-modeles__back:hover{
  color: var(--page-accent);
}

/* =========================================================
   BOTTOM LINE (tabs + breadcrumb)
========================================================= */

.header-modeles__bottom{
  margin-top: 25px;

  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 18px;
}

/* =========================================================
   TABS (biseau comme maquette)
   - Onglet = forme trapèze (diagonale à droite)
   - Chevauchement entre onglets
========================================================= */

.header-modeles__tabs{
  display: inline-flex;
  align-items: flex-end;
  gap: 0;

  /* IMPORTANT mobile: on garde le rendu desktop, donc on évite le wrap
     et on autorise le scroll horizontal si besoin */
  max-width: 100%;
  overflow-x: auto;
  overflow-y: visible;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none; /* Firefox */
}

.header-modeles__tabs::-webkit-scrollbar{
  display: none; /* Chrome/Safari */
}

/* Base tab */
.header-modeles__tab{
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;

  flex: 0 0 auto;
  white-space: nowrap;

  /* IMPORTANT: plus de padding à droite pour la diagonale */
  padding: 10px 12px 9px 18px;

  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: .02em;

  font-size: 11px;
  font-weight: 600;
  line-height: 1;
  color: var(--color-noir);
  background: var(--color-blanc-fonce);

  border-bottom: 0;

  /* gestion empilement (important pour le chevauchement) */
  z-index: 1;

  transition:
    color .22s ease,
    background-color .22s ease,
    border-color .22s ease;
}

/* Diagonale à droite (le vrai biseau maquette) */
.header-modeles__tab::after{
  content: "";
  position: absolute;
  top: 0px;
  right: 0px;

  width: 22px;
  height: 100%;

  background: inherit;

  transform: skewX(35deg);
  transform-origin: right top;

  pointer-events: none;
}

/* Chevauchement entre onglets (sinon on voit un trou) */
.header-modeles__tab + .header-modeles__tab{
  margin-left: 0px;
}

/* Actif = fond blanc + au-dessus */
.header-modeles__tab.is-active{
  background: #fff;
  z-index: 3;
}

/* Décalage visuel du second onglet (comme ta maquette) */
.header-modeles__tab:nth-child(2){
  padding-left: 30px;
}

.header-modeles__tab:first-child{
  z-index: 3;
}

.header-modeles__tab + .header-modeles__tab{
  z-index: 2;
}

/* Hover */
.header-modeles__tab:hover{
  color: var(--page-accent);
}

/* =========================================================
   BREADCRUMB (Yoast)
========================================================= */

.header-modeles__breadcrumb{
  min-width: 0;
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;

  padding-bottom: 8px; /* align visuel avec tabs */
}

.header-modeles__breadcrumb .breadcrumb{
  font-size: 11px;
  font-weight: 400;
  color: var(--color-noir);
  white-space: nowrap;
}

/* dernier item Yoast en accent */
.header-modeles__breadcrumb .breadcrumb .breadcrumb_last,
.header-modeles__breadcrumb .breadcrumb span.breadcrumb_last{
  color: var(--page-accent);
}

/* =========================================================
   ANIMATION D'ENTRÉE — HEADER MODÈLES
========================================================= */

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

/* état initial */
.header-modeles__title,
.header-modeles__back,
.header-modeles__tab,
.header-modeles__breadcrumb {
  opacity: 0;
  transform: translateY(16px);
}

/* cascade top */
.header-modeles__title {
  animation: headerModelesReveal 0.7s cubic-bezier(0.22, 1, 0.36, 1) forwards;
  animation-delay: 0.08s;
}

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

/* cascade tabs */
.header-modeles__tab:nth-child(1) {
  animation: headerModelesReveal 0.7s cubic-bezier(0.22, 1, 0.36, 1) forwards;
  animation-delay: 0.28s;
}

.header-modeles__tab:nth-child(2) {
  animation: headerModelesReveal 0.7s cubic-bezier(0.22, 1, 0.36, 1) forwards;
  animation-delay: 0.36s;
}

/* breadcrumb */
.header-modeles__breadcrumb {
  animation: headerModelesReveal 0.7s cubic-bezier(0.22, 1, 0.36, 1) forwards;
  animation-delay: 0.44s;
}

/* accessibilité */
@media (prefers-reduced-motion: reduce) {
  .header-modeles__title,
  .header-modeles__back,
  .header-modeles__tab,
  .header-modeles__breadcrumb {
    opacity: 1;
    transform: none;
    animation: none;
  }
}

/* =========================================================
   RESPONSIVE
========================================================= */

@media (max-width: 860px){

  .header-modeles{
    border-right: 15px solid #fff;
  }

  .header-modeles__container{
    padding: 18px 20px 0 20px;
  }

  .header-modeles__bottom{
    flex-direction: column-reverse;
    align-items: flex-start;
    gap: 10px;
  }

  .header-modeles__breadcrumb{
    padding-bottom: 10px;
    width: 100%;
    justify-content: flex-start;
    white-space: normal;
  }

  /* On garde le biseau (donc PAS de content:none sur ::after)
     On adapte juste un peu les paddings pour mieux respirer */
  .header-modeles__tab{
    padding: 10px 12px 9px 16px; /* proche desktop, un poil plus compact */
  }

  .header-modeles__tab:nth-child(2){
    padding-left: 26px; /* réduit légèrement pour petits écrans */
  }
}