/* Les fonds de page — écrit par lib/fonds.js, ne pas modifier à la main.

   Le motif ne se peint pas : il sert de pochoir à une couleur, celle que
   la rubrique a choisie. Le calque se pose derrière le contenu, fixe,
   pour que le dessin ne défile pas avec la page. */

.fond-aucun { --fond-motif: none; --fond-taille: 0; }
.fond-treillis { --fond-motif: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='128' height='128' viewBox='0 0 128 128'%3E%3Cg fill='none' stroke='%23000000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M0 0L128 128M128 0L0 128'/%3E%3Cpath d='M64 44l5 15 15 5-15 5-5 15-5-15-15-5 15-5z'/%3E%3Cpath d='M0 0l5 15 15 5-15 5-5 15M128 0l-5 15-15 5 15 5 5 15'/%3E%3C/g%3E%3C/svg%3E"); --fond-taille: 128px; }
.fond-semis { --fond-motif: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='320' height='320' viewBox='0 0 320 320'%3E%3Cg fill='none' stroke='%23000000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M44 30l7 15 15 7-15 7-7 15-7-15-15-7 15-7z'/%3E%3Ccircle cx='252' cy='54' r='11'/%3E%3Cpath d='M108 246q11-14 22 0t22 0'/%3E%3Crect x='214' y='210' width='20' height='20' rx='5' transform='rotate(20 224 220)'/%3E%3Cpath d='M62 194l11-19 11 19z'/%3E%3Cpath d='M282 152v22M271 163h22'/%3E%3Cpath d='M150 92q12-16 24 0'/%3E%3C/g%3E%3Cg fill='%23000000'%3E%3Ccircle cx='176' cy='196' r='6'/%3E%3Ccircle cx='96' cy='118' r='5'/%3E%3Ccircle cx='300' cy='268' r='7'/%3E%3Ccircle cx='24' cy='268' r='5'/%3E%3C/g%3E%3C/svg%3E"); --fond-taille: 320px; }
.fond-zellige { --fond-motif: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='112' height='112' viewBox='0 0 112 112'%3E%3Cg fill='none' stroke='%23000000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M56 8l9 22 22 9-22 9-9 22-9-22-22-9 22-9z'/%3E%3Cpath d='M0 56l9 22 22 9-22 9-9 22M112 56l-9 22-22 9 22 9 9 22'/%3E%3Cpath d='M0 0h112M0 112h112' stroke-opacity='.4'/%3E%3C/g%3E%3C/svg%3E"); --fond-taille: 112px; }
.fond-quadrillage { --fond-motif: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='96' height='96' viewBox='0 0 96 96'%3E%3Cg fill='none' stroke='%23000000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M0 0h96M0 0v96' /%3E%3Cpath d='M0 24h96M0 48h96M0 72h96M24 0v96M48 0v96M72 0v96' stroke-opacity='.45'/%3E%3C/g%3E%3C/svg%3E"); --fond-taille: 96px; }
.fond-vagues { --fond-motif: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='80' viewBox='0 0 80 80'%3E%3Cg fill='none' stroke='%23000000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M0 60q20-28 40 0t40 0'/%3E%3Cpath d='M-40 20q20-28 40 0t40 0t40 0'/%3E%3C/g%3E%3C/svg%3E"); --fond-taille: 80px; }
.fond-pois { --fond-motif: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='72' height='72' viewBox='0 0 72 72'%3E%3Cg fill='%23000000'%3E%3Ccircle cx='18' cy='18' r='4'/%3E%3Ccircle cx='54' cy='54' r='4'/%3E%3C/g%3E%3Cg fill='none' stroke='%23000000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='54' cy='18' r='7'/%3E%3Ccircle cx='18' cy='54' r='7'/%3E%3C/g%3E%3C/svg%3E"); --fond-taille: 72px; }

body[class*="fond-"]::before,
.fond-echantillon::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-color: var(--fond-teinte, #e6d8c0);
  -webkit-mask-image: var(--fond-motif, none);
  mask-image: var(--fond-motif, none);
  -webkit-mask-repeat: repeat;
  mask-repeat: repeat;
  -webkit-mask-size: var(--fond-taille, 128px);
  mask-size: var(--fond-taille, 128px);
}

/* L'échantillon des réglages : le même motif, dans une vignette.
   Le calque de la page se range derrière le contenu ; celui d'un
   échantillon doit au contraire passer devant sa propre vignette. */
.fond-echantillon { position: relative; overflow: hidden; }
.fond-echantillon::before {
  position: absolute;
  z-index: 0;
  /* La vignette est petite : le motif y est montré au quart, sinon on n'en
     verrait qu'un morceau et tous les fonds se ressembleraient. */
  -webkit-mask-size: calc(var(--fond-taille, 128px) / 4);
  mask-size: calc(var(--fond-taille, 128px) / 4);
}

body.fond-aucun::before, .fond-echantillon.fond-aucun::before { display: none; }

@media print { body[class*="fond-"]::before { display: none; } }