/* ---- Effet grille bleu ---- */
.grid-overlay--blue {
  position: relative;
  --grid-color: rgb(3 119 225 / 0.52);
  --grid-size: 55px;
}

.grid-overlay--blue::before {
  content: '';
  position: absolute;
  inset: 0;
  background-size: var(--grid-size) var(--grid-size);
  background-image:
    linear-gradient(0deg,  transparent 20%, var(--grid-color) 21%, var(--grid-color) 22%, transparent 23%, transparent 70%, var(--grid-color) 71%, var(--grid-color) 72%, transparent 73%, transparent),
    linear-gradient(90deg, transparent 20%, var(--grid-color) 21%, var(--grid-color) 22%, transparent 23%, transparent 70%, var(--grid-color) 71%, var(--grid-color) 72%, transparent 73%, transparent);
  mix-blend-mode: screen;
  pointer-events: none;
  z-index: -1;
}

@media (min-width: 768px) and (max-width: 1032px) {
  .grid-overlay--blue { --grid-size: 50px; }
}
@media (max-width: 767px) {
  .grid-overlay--blue { --grid-size: 45px; }
}

/* ---- Effet grille orange ---- */
.grid-overlay--orange {
  position: relative;
  --grid-color: rgb(252 84 10 / 0.42);
  --grid-size: 55px;
}

.grid-overlay--orange::before {
  content: '';
  position: absolute;
  inset: 0;
  background-size: var(--grid-size) var(--grid-size);
  background-image:
    linear-gradient(0deg,  transparent 20%, var(--grid-color) 21%, var(--grid-color) 22%, transparent 23%, transparent 70%, var(--grid-color) 71%, var(--grid-color) 72%, transparent 73%, transparent),
    linear-gradient(90deg, transparent 20%, var(--grid-color) 21%, var(--grid-color) 22%, transparent 23%, transparent 70%, var(--grid-color) 71%, var(--grid-color) 72%, transparent 73%, transparent);
  mix-blend-mode: screen;
  pointer-events: none;
  z-index: 1;
}

@media (min-width: 768px) and (max-width: 1032px) {
  .grid-overlay--orange { --grid-size: 50px; }
}
@media (max-width: 767px) {
  .grid-overlay--orange { --grid-size: 45px; }
}

/* ---- Effet grille verte ---- */
.grid-overlay--green {
  position: relative;
  --grid-color: rgb(24 182 102 / 0.42);
  --grid-size: 55px;
}

.grid-overlay--green::before {
  content: '';
  position: absolute;
  inset: 0;
  background-size: var(--grid-size) var(--grid-size);
  background-image:
    linear-gradient(0deg,  transparent 20%, var(--grid-color) 21%, var(--grid-color) 22%, transparent 23%, transparent 70%, var(--grid-color) 71%, var(--grid-color) 72%, transparent 73%, transparent),
    linear-gradient(90deg, transparent 20%, var(--grid-color) 21%, var(--grid-color) 22%, transparent 23%, transparent 70%, var(--grid-color) 71%, var(--grid-color) 72%, transparent 73%, transparent);
  mix-blend-mode: screen;
  pointer-events: none;
  z-index: 1;
}

@media (min-width: 768px) and (max-width: 1032px) {
  .grid-overlay--green { --grid-size: 50px; }
}
@media (max-width: 767px) {
  .grid-overlay--green { --grid-size: 45px; }
}