/* ==========================================================================
   Soyatech — Styles des sections sombres de la maquette
   (bandeau logos, mosaïque promo, promo du moment, barre de services)
   Le reste de la mise en page est dans v3.css.
   ========================================================================== */

:root {
  /* Accent : bleu Soyatech conservé */
  --acc: #0f64f7;
  --acc-600: #0b52d1;
  --acc-050: #eef4ff;

  /* Bandes sombres façon Securox */
  --night: #0d0d0d;
  --night-2: #161616;
  --night-3: #1f1f1f;
  --night-line: rgba(255, 255, 255, 0.1);

  /* Rayons carrés : l'identité visuelle de la référence */
  --r-card: var(--r);
  --r-btn: var(--r);
  --r-pill: 999px;

  --shadow-card: 0 1px 3px rgba(13, 13, 13, 0.06);
  --shadow-card-h: 0 12px 32px rgba(13, 13, 13, 0.12);
}
/* ------------------------------------------------- Bandeau logos partenaires */
.nl-brands {
  background: var(--night);
  padding: 26px 0;
}

.nl-brands .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(20px, 4vw, 56px);
  flex-wrap: wrap;
}

.nl-brand {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  color: rgba(255, 255, 255, 0.86);
  font-weight: 600;
  font-size: clamp(13px, 1.5vw, 17px);
  letter-spacing: 0.01em;
  opacity: 0.85;
  transition: opacity 0.25s var(--ease);
}

.nl-brand:hover {
  opacity: 1;
}

.nl-brand .ico {
  font-size: 19px;
  color: var(--acc);
}

/* --------------------------------------------------------- Mosaïque promo */
.nl-mosaic {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

.nl-mosaic .nl-tile-wide {
  grid-column: 1 / -1;
}

.nl-tile {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: 230px;
  padding: clamp(22px, 3vw, 38px);
  border-radius: var(--r);
  overflow: hidden;
  background: var(--night-2);
  isolation: isolate;
}

.nl-tile-wide {
  min-height: 300px;
}

.nl-tile img,
.nl-tile video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -2;
  transition: transform 0.6s var(--ease);
}

.nl-tile:hover img,
.nl-tile:hover video {
  transform: scale(1.04);
}

.nl-tile::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(
    100deg,
    rgba(13, 13, 13, 0.9) 0%,
    rgba(13, 13, 13, 0.62) 45%,
    rgba(13, 13, 13, 0.15) 100%
  );
}

.nl-tile .nl-tile-eyebrow {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--acc);
  margin-bottom: 8px;
}

.nl-tile h3 {
  margin: 0 0 10px;
  color: #fff;
  font-size: clamp(20px, 2.4vw, 30px);
  line-height: 1.2;
  max-width: 16ch;
}

.nl-tile p {
  margin: 0 0 16px;
  color: rgba(255, 255, 255, 0.75);
  font-size: 14px;
  max-width: 34ch;
}

.nl-tile .btn {
  align-self: flex-start;
}

@media (max-width: 700px) {
  .nl-mosaic {
    grid-template-columns: 1fr;
  }
  .nl-tile {
    min-height: 200px;
  }
}

/* ------------------------------------- Mosaïque : tuiles plus généreuses */
.nl-tile {
  min-height: 300px;
  justify-content: center;
}

.nl-tile-wide {
  min-height: 360px;
}

.nl-tile h3 {
  max-width: 20ch;
  font-size: clamp(21px, 2vw, 28px);
}

.nl-tile-wide h3 {
  max-width: 22ch;
  font-size: clamp(24px, 2.6vw, 34px);
}

/* Le contenu occupe la moitié gauche : l'image reste lisible à droite */
.nl-tile > .nl-tile-eyebrow,
.nl-tile > h3,
.nl-tile > p,
.nl-tile > .btn {
  position: relative;
  z-index: 1;
  max-width: 54%;
}

@media (max-width: 700px) {
  .nl-tile > .nl-tile-eyebrow,
  .nl-tile > h3,
  .nl-tile > p,
  .nl-tile > .btn {
    max-width: 100%;
  }
  .nl-tile,
  .nl-tile-wide {
    min-height: 240px;
  }
}

/* ------------------------------------------------------- Promo du week-end */
.nl-deal {
  background: var(--night);
  color: #fff;
  padding: clamp(46px, 6vw, 84px) 0;
  text-align: center;
}

.nl-deal .nl-deal-sub {
  color: rgba(255, 255, 255, 0.6);
  font-size: 14px;
  margin: 0 0 clamp(24px, 3vw, 38px);
}

.nl-deal-stage {
  position: relative;
  max-width: 460px;
  margin: 0 auto clamp(22px, 3vw, 34px);
}

.nl-deal-stage img {
  width: 100%;
  height: auto;
  display: block;
}

.nl-deal-actions {
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
}

.nl-deal .btn-ghost {
  border-color: rgba(255, 255, 255, 0.3);
  color: #fff;
}

.nl-deal .btn-ghost:hover {
  border-color: #fff;
  background: rgba(255, 255, 255, 0.08);
}

/* --------------------------------------------------------- Barre services */
.nl-services {
  border-top: 1px solid #ececf0;
  border-bottom: 1px solid #ececf0;
  padding: clamp(26px, 3vw, 40px) 0;
  background: #fff;
}

.nl-services .wrap {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(16px, 2vw, 30px);
}

.nl-service {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 7px;
}

.nl-service .ico {
  font-size: 28px;
  color: var(--acc);
}

.nl-service strong {
  font-size: 14px;
  font-weight: 600;
}

.nl-service span {
  font-size: 12.5px;
  color: var(--ink-600);
}

@media (max-width: 780px) {
  .nl-services .wrap {
    grid-template-columns: repeat(2, 1fr);
    gap: 22px;
  }
}


/* Boutons carrés dans les sections sombres, comme la maquette */
.nl-tile .btn,
.nl-deal .btn {
  border-radius: var(--r);
  font-weight: 600;
}

.nl-tile .btn-primary,
.nl-deal .btn-primary {
  background: var(--acc);
  border-color: var(--acc);
  box-shadow: none;
}

.nl-tile .btn-primary:hover,
.nl-deal .btn-primary:hover {
  background: var(--acc-600);
  border-color: var(--acc-600);
}

/* ---------- Promo du moment : image de fond, grande hauteur, carrousel ---------- */
.nl-deal-xl {
  position: relative;
  isolation: isolate;
  min-height: 680px;
  display: grid;
  align-items: center;
  padding: clamp(56px, 7vw, 96px) 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.nl-deal-xl::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(50% 60% at 50% 55%, rgba(15, 100, 247, 0.18), transparent 70%),
    linear-gradient(180deg, rgba(13, 13, 13, 0.82), rgba(13, 13, 13, 0.7));
}

.nl-deal-xl .h-lg {
  font-size: clamp(28px, 3.6vw, 44px);
  margin-bottom: 6px;
}

.nl-deal-carousel {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: clamp(10px, 2vw, 28px);
  max-width: 920px;
  margin: 0 auto;
}

.nl-deal-arrow {
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.28);
  background: rgba(255, 255, 255, 0.04);
  color: #fff;
  cursor: pointer;
  transition:
    background 0.22s var(--ease),
    border-color 0.22s var(--ease);
}

.nl-deal-arrow:hover {
  background: var(--acc);
  border-color: var(--acc);
}

.nl-deal-arrow .ico {
  font-size: 24px;
}

.nl-deal-slides {
  position: relative;
  min-height: 420px;
}

.nl-deal-slide {
  display: none;
  animation: nl-deal-in 0.45s var(--ease);
}

.nl-deal-slide.on {
  display: block;
}

@keyframes nl-deal-in {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

.nl-deal-xl .nl-deal-stage {
  max-width: 400px;
  margin-bottom: 18px;
}

.nl-deal-xl .nl-deal-stage img {
  mix-blend-mode: normal;
  filter: none;
}

.nl-deal-xl h3 {
  margin: 0 0 8px;
  color: #fff;
  font-size: clamp(17px, 1.8vw, 22px);
}

.nl-deal-xl .pdp-price {
  justify-content: center;
  margin-bottom: 22px;
}

@media (max-width: 700px) {
  .nl-deal-xl {
    min-height: 0;
  }
  .nl-deal-carousel {
    grid-template-columns: 1fr;
  }
  .nl-deal-arrow {
    display: none;
  }
  .nl-deal-slides {
    min-height: 0;
  }
}