/* ==============================
   background-lin.css
   Effet textile
   ============================== */

/* Container global */
.background-lin {
  position: relative;
  width: 100%;
  min-height: 100vh;
}

/* Gradient + trame lin croisée */
.background-lin::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;

  /* Fond crème + trame lin */
  background-color: var(--bg);
  background-image: repeating-linear-gradient(
      0deg,
      rgba(0, 0, 0, 0.018) 0px,
      rgba(0, 0, 0, 0.018) 1px,
      transparent 1px,
      transparent 3px
    ),
    repeating-linear-gradient(
      90deg,
      rgba(0, 0, 0, 0.015) 0px,
      rgba(0, 0, 0, 0.015) 1px,
      transparent 1px,
      transparent 4px
    ),
    linear-gradient(180deg, var(--bg) 0%, #fbf8f4 50%, var(--bg) 100%);
  /* Tailles et répétition */
  background-repeat: repeat, repeat, no-repeat;
  background-size: 4px 4px, 4px 4px, cover;
}

/* Micro-grain WebP pour réalisme textile */
.background-lin::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: url("../img/noise.webp") repeat;
  opacity: 0.12;
  pointer-events: none;
}

/* Centrage du wrap */
.background-lin .wrap {
  width: min(1100px, 90vw);
  margin: 0 auto;
  position: relative; /* pour rester au-dessus des pseudo-éléments */
}