@import url("/assets/css/cabs-home-refine.css?v=cabs04");

/* CABS — alignement du bandeau hero, flottant d’en-tête et bulles.
   Couche 4 : bandeau traversant + fuite atmosphérique à droite. */

/*
 * HERO — grand écran
 * Le bandeau traverse maintenant toute la largeur du viewport.
 * Son contenu, lui, reste calé sur la grille éditoriale du site.
 */
.cabs-hero {
  position: relative;
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  overflow: hidden;
}

.cabs-hero__inner {
  width: min(var(--page), calc(100% - 2rem));
  margin-left: auto;
  margin-right: auto;
}

/*
 * Petite trace graphique à droite : un écho, pas un second motif.
 * L’arc reste volontairement très discret et disparaît sous 1160 px.
 */
.cabs-hero::after {
  content: "";
  position: absolute;
  z-index: 2;
  top: 15%;
  right: clamp(2rem, 5vw, 5.5rem);
  width: clamp(7rem, 11vw, 11rem);
  height: clamp(7rem, 11vw, 11rem);
  border: 1px solid rgba(48, 105, 113, .16);
  border-left-color: transparent;
  border-bottom-color: rgba(48, 105, 113, .07);
  border-radius: 50%;
  opacity: .68;
  transform: rotate(-18deg);
  pointer-events: none;
}

/*
 * EN-TÊTE — grand écran
 * Les actions flottent à droite. Le menu conserve sa largeur utile grâce à la réserve à droite.
 */
.site-header__inner {
  position: relative;
  grid-template-columns: minmax(18.5rem, 1.04fr) minmax(0, 1.96fr);
  padding-right: 10.5rem;
}

.cabs-header-actions {
  position: absolute;
  z-index: 45;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  margin: 0;
}

/* Le menu utilise tout l’espace restant mais ne passe jamais sous le flottant. */
.site-header__inner .site-nav {
  min-width: 0;
}

.site-nav__row {
  justify-content: flex-end;
}

/*
 * BULLES — on évite volontairement la zone du flottant.
 * Les deux dernières entrées développent leur bulle vers la gauche.
 */
.nav-preview {
  z-index: 60;
}

.site-nav__item:nth-last-child(-n+2) .nav-preview {
  left: auto;
  right: 0;
  transform: translate(0, -.3rem);
}

.site-nav__item:nth-last-child(-n+2):hover .nav-preview,
.site-nav__item:nth-last-child(-n+2):focus-within .nav-preview {
  transform: translate(0, 0);
}

/*
 * HERO — voile principal.
 * À gauche : assise claire pour le texte.
 * Au centre : l’image respire presque sans voile.
 * À droite : retour atmosphérique très léger, comme une fuite du bandeau.
 */
.cabs-hero__veil {
  background:
    radial-gradient(
      ellipse at 8% 58%,
      rgba(248, 252, 253, .92) 0%,
      rgba(248, 252, 253, .78) 18%,
      rgba(248, 252, 253, .44) 34%,
      rgba(248, 252, 253, .12) 48%,
      rgba(248, 252, 253, 0) 60%
    ),
    radial-gradient(
      ellipse at 92% 62%,
      rgba(248, 252, 253, .22) 0%,
      rgba(248, 252, 253, .12) 18%,
      rgba(248, 252, 253, .05) 32%,
      rgba(248, 252, 253, 0) 48%
    ),
    linear-gradient(
      90deg,
      rgba(248, 252, 253, .92) 0%,
      rgba(248, 252, 253, .72) 16%,
      rgba(248, 252, 253, .28) 31%,
      rgba(248, 252, 253, .04) 48%,
      rgba(248, 252, 253, 0) 62%,
      rgba(248, 252, 253, .03) 78%,
      rgba(248, 252, 253, .10) 91%,
      rgba(248, 252, 253, .16) 100%
    );
}

/*
 * LARGEUR INTERMÉDIAIRE — le flottant « glisse » sous le menu.
 * Pas de chevauchement : l’en-tête réserve sa hauteur et le bloc reste aligné à droite.
 */
@media (max-width: 1180px) and (min-width: 861px) {
  .site-header__inner {
    grid-template-columns: minmax(17rem, .95fr) minmax(0, 1.45fr);
    grid-template-rows: auto auto;
    gap: .4rem 1.1rem;
    padding-right: 0;
    padding-bottom: 3.7rem;
  }

  .cabs-brand {
    grid-column: 1;
    grid-row: 1 / span 2;
    align-self: start;
  }

  .site-header__inner .site-nav {
    grid-column: 2;
    grid-row: 1;
    align-self: end;
  }

  .site-nav__row {
    justify-content: flex-end;
    gap: clamp(.9rem, 1.5vw, 1.3rem) !important;
  }

  .cabs-header-actions {
    top: auto;
    right: 0;
    bottom: .55rem;
    transform: none;
  }

  /* À cette largeur, toutes les bulles s’ouvrent de préférence vers la gauche. */
  .site-nav__item .nav-preview {
    left: auto;
    right: 0;
    transform: translate(0, -.3rem);
  }

  .site-nav__item:hover .nav-preview,
  .site-nav__item:focus-within .nav-preview {
    transform: translate(0, 0);
  }
}

/* Sous la largeur canonique, retour au flux normal pour éviter tout débordement. */
@media (max-width: 1160px) {
  .cabs-hero {
    width: 100%;
    margin-left: 0;
    margin-right: 0;
  }

  .cabs-hero::after {
    display: none;
  }
}

/*
 * TABLETTE / PETIT ÉCRAN
 * On conserve la logique existante : menu scrollable, actions masquées à très petite largeur.
 */
@media (max-width: 860px) {
  .site-header__inner {
    display: block;
    padding-right: 0;
    padding-bottom: .8rem;
  }

  .cabs-header-actions {
    position: static;
    display: flex;
    justify-content: flex-end;
    margin-top: .55rem;
    transform: none;
  }

  .site-nav__row {
    justify-content: flex-start;
  }

  .nav-preview {
    display: none;
  }

  .cabs-hero__veil {
    background:
      radial-gradient(
        ellipse at 100% 100%,
        rgba(248, 252, 253, .66) 0%,
        rgba(248, 252, 253, .22) 30%,
        rgba(248, 252, 253, 0) 52%
      ),
      linear-gradient(
        90deg,
        rgba(248, 252, 253, .97) 0%,
        rgba(248, 252, 253, .84) 46%,
        rgba(248, 252, 253, .28) 72%,
        rgba(248, 252, 253, 0) 100%
      );
  }
}

@media (max-width: 760px) {
  .cabs-header-actions {
    display: none;
  }
}