/* X-RENT — motifs de marque repris du flyer 2025 :
   bandes hachurées « hazard », coins diagonaux, arcs techniques. */


/* Bandes hachurées « hazard » — bordure verticale des sections marquantes */
.hazard {
  position: relative;
}
.hazard::before,
.hazard::after {
  content: "";
  position: absolute;
  top: 0; bottom: 0;
  width: 26px;
  background: var(--hazard);
  opacity: .92;
  pointer-events: none;
}
.hazard::before { left: 0; }
.hazard::after  { right: 0; }

/* Variante horizontale : filet hachuré en haut ou en bas d'un bloc */
.hazard-rule {
  height: 10px;
  background: repeating-linear-gradient(-45deg,
    var(--amber-hi) 0 9px, var(--amber) 9px 18px, transparent 18px 36px);
}

/* Coin diagonal jaune sur une image — signature du flyer */
.corner {
  position: relative;
  display: block;
  overflow: hidden;
}
.corner img { display: block; width: 100%; }
.corner::before,
.corner::after {
  content: "";
  position: absolute;
  width: 27%;
  aspect-ratio: 1;
  background: var(--amber);
  opacity: .9;
  pointer-events: none;
  /* les images filtrées créent un contexte d'empilement : le coin doit passer au-dessus */
  z-index: 2;
}
/* triangle en haut à gauche */
.corner::before {
  top: 0; left: 0;
  clip-path: polygon(0 0, 100% 0, 0 100%);
}
/* triangle en bas à droite */
.corner::after {
  right: 0; bottom: 0;
  clip-path: polygon(100% 0, 100% 100%, 0 100%);
}
.corner--one::after { display: none; }
.corner--soft::before, .corner--soft::after { opacity: .82; width: 21%; }

/* Arc technique fin, décor du flyer */
.arc {
  position: absolute;
  border: 1px solid rgba(255, 255, 255, .10);
  border-radius: 50%;
  pointer-events: none;
}

@media (max-width: 900px) {
  .hazard::before, .hazard::after { width: 14px; }
}

/* Sur fond clair (bandeau d'appel jaune), les hachures passent en sombre */
.callout.hazard::before,
.callout.hazard::after {
  background: repeating-linear-gradient(-45deg,
    var(--black) 0 13px, #3a3a3a 13px 26px, transparent 26px 52px);
  opacity: .85;
}