/*
 * Décors « plan d'architecte » de la charte : des TRAITS seuls (fond transparent), jamais un bloc d'image,
 * pour que la section garde la couleur de la page et que les bords se fondent.
 *  - .ferrer-texture-plan : plan en fond, fondu en haut et en bas (traits marine en clair, crème en sombre)
 *  - .ferrer-deco-coin : décor 3D en bas à droite (ajouter --sur-marine sur un fond bleu marine)
 */
.ferrer-texture-plan,
.ferrer-deco-coin {
  position: relative;
  isolation: isolate;
}

/* Plan en fond */
.ferrer-texture-plan::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: url("../images/charte/plan-traits-marine.webp") center / 1536px auto repeat;
  opacity: .14;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 18%, #000 82%, transparent 100%);
  mask-image: linear-gradient(to bottom, transparent 0, #000 18%, #000 82%, transparent 100%);
}

[data-bs-theme=dark] .ferrer-texture-plan::before {
  background-image: url("../images/charte/plan-traits-creme.webp");
  opacity: .1;
}

/* Décor 3D dans le coin bas droit */
.ferrer-deco-coin::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  z-index: -1;
  width: min(45%, 520px);
  aspect-ratio: 900 / 1080;
  max-height: 100%;
  pointer-events: none;
  background: url("../images/charte/coin-archi-marine.webp") right bottom / contain no-repeat;
  opacity: .2;
  -webkit-mask-image: radial-gradient(ellipse at 100% 100%, #000 35%, transparent 75%);
  mask-image: radial-gradient(ellipse at 100% 100%, #000 35%, transparent 75%);
}

[data-bs-theme=dark] .ferrer-deco-coin::after,
.ferrer-deco-coin--sur-marine::after {
  background-image: url("../images/charte/coin-archi-creme.webp");
  opacity: .16;
}

/* Bandeau bas (pied de page) : seule la partie basse du décor, où sont les traits, sur toute la hauteur */
.ferrer-deco-coin--sur-marine::after {
  aspect-ratio: auto;
  height: 100%;
  max-height: none;
  width: min(40%, 520px);
  background-size: 100% auto;
  -webkit-mask-image: linear-gradient(to left, #000 30%, transparent);
  mask-image: linear-gradient(to left, #000 30%, transparent);
}

/* Page 404 : effet « feuille de plan » */
.ferrer-texture-plan--feuille {
  border-radius: var(--tblr-border-radius-lg);
  overflow: hidden;
}

@media (max-width: 575.98px) {
  .ferrer-texture-plan::before {
    background-size: 1024px auto;
  }

  .ferrer-deco-coin::after {
    width: 60%;
  }
}

@media print {

  .ferrer-texture-plan::before,
  .ferrer-deco-coin::after {
    display: none;
  }
}