/* Nappe de points des zones bleu nuit.
   ==================================================================
   Demandée par Lohann d'après pistonhq.app : un dégradé sombre en forme
   de vague, vu à travers une trame de petits points qui en prennent la
   couleur. Chez Piston c'est une image fixe ; ici, js/nappe.js peint le
   dégradé sur une toile et le fait onduler lentement.

   Le masque fait tout le dessin : sur chaque point la nappe passe en
   entier, entre les points à 22 % seulement. On voit donc à la fois le
   dégradé, adouci, et la trame, plus vive. Sans script, ou avant qu'il
   ne tourne, le fond ci-dessous tient lieu de nappe, immobile.

   Lisibilité : la nappe éclaircit le fond par endroits. Les gris clairs
   des zones sombres sont donc remontés à 74 % d'opacité au moins,
   l'orange y passe en orange vif, et la nappe est plafonnée
   (js/nappe.js). Pire cas calculé — la crête partout, 31 % de nappe en
   moyenne sous la trame — : 4,7:1 pour l'orange vif, plus pour le reste. */

.on-sombre, .pied, .entete-page, .offre-mise-en-avant {
  /* La nappe passe en z-index -1 : l'isolation la garde au-dessus du
     fond de la zone et sous tout son contenu, sans toucher aux enfants. */
  isolation: isolate;
}
.offre-mise-en-avant { position: relative; overflow: hidden; }

.nappe {
  position: absolute;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
  --pas-trame: 7px;
  background:
    radial-gradient(70% 60% at 0% 105%, rgb(52 92 222 / 0.85), transparent 70%),
    radial-gradient(55% 60% at 100% -5%, rgb(38 70 170 / 0.7), transparent 72%),
    rgb(20 36 80);
  -webkit-mask: radial-gradient(circle, #000 0 1.05px, rgb(0 0 0 / 0.22) 1.6px) 0 0 / var(--pas-trame) var(--pas-trame);
  mask: radial-gradient(circle, #000 0 1.05px, rgb(0 0 0 / 0.22) 1.6px) 0 0 / var(--pas-trame) var(--pas-trame);
}
.nappe canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}

/* --------------------------------------------------- variante en traits
   Les en-têtes clairs : même nappe, en orange très clair, vue à travers
   de fines hachures au lieu de points. Sur chaque trait la nappe passe
   en entier, entre les traits à 16 %. Plafond et lisibilité : voir
   js/nappe.js (le gris du texte reste au-dessus de 4,7:1). */
.nappe-traits {
  background:
    radial-gradient(70% 70% at 0% 95%, rgb(255 196 162 / 0.9), transparent 70%),
    radial-gradient(55% 65% at 100% 10%, rgb(255 210 184 / 0.8), transparent 72%),
    var(--orange-fond);
  -webkit-mask: repeating-linear-gradient(115deg, #000 0 1px, rgb(0 0 0 / 0.16) 1.7px 5.3px, #000 6px);
  mask: repeating-linear-gradient(115deg, #000 0 1px, rgb(0 0 0 / 0.16) 1.7px 5.3px, #000 6px);
}

/* ---------------------------------------------------- variante en voile
   Offres : ni points ni traits, un voile de couleur qui ondule — pêche,
   rose, lilas. C'est la nappe telle quelle, sans masque. Tons très
   clairs à dessein : sans trame, le texte repose directement dessus
   (le gris reste au-dessus de 4,8:1, voir js/nappe.js). */
.nappe-voile {
  -webkit-mask: none;
  mask: none;
  background:
    radial-gradient(60% 80% at 10% 90%, rgb(255 224 227 / 0.9), transparent 70%),
    radial-gradient(55% 70% at 90% 15%, rgb(239 224 251 / 0.9), transparent 72%),
    var(--orange-fond);
}

/* ------------------------------------------------ variante en filigrane
   Le bas de chaque page, noir : la nappe passe à travers de petits V du
   logo en quinconce (filigrane.svg), rien entre eux. Un second masque,
   en dégradé, l'éteint à mesure qu'on descend — de l'appel au pied, la
   page finit dans le noir. La vague est calculée sur la page entière
   (js/nappe.js) : elle passe de l'appel au pied sans raccord. */
.nappe-filigrane {
  background: rgb(255 255 255 / 0.06);
  -webkit-mask-image: url("../assets/logo/filigrane.svg"), linear-gradient(#000, #000);
  mask-image: url("../assets/logo/filigrane.svg"), linear-gradient(#000, #000);
  -webkit-mask-size: 64px 64px, 100% 100%;
  mask-size: 64px 64px, 100% 100%;
  -webkit-mask-repeat: repeat, no-repeat;
  mask-repeat: repeat, no-repeat;
  -webkit-mask-position: center top, 0 0;
  mask-position: center top, 0 0;
  -webkit-mask-composite: source-in;
  mask-composite: intersect;
}
.appel .nappe-filigrane {
  -webkit-mask-position: center bottom, 0 0;
  mask-position: center bottom, 0 0;
  -webkit-mask-image: url("../assets/logo/filigrane.svg"), linear-gradient(#000, rgb(0 0 0 / 0.6));
  mask-image: url("../assets/logo/filigrane.svg"), linear-gradient(#000, rgb(0 0 0 / 0.6));
}
.pied .nappe-filigrane {
  -webkit-mask-image: url("../assets/logo/filigrane.svg"), linear-gradient(rgb(0 0 0 / 0.6), transparent 90%);
  mask-image: url("../assets/logo/filigrane.svg"), linear-gradient(rgb(0 0 0 / 0.6), transparent 90%);
}

/* Les portes de l'accueil laissent passer la nappe : un voile de nuit
   plutôt qu'un aplat. Les filets, qui étaient le fond de la grille vu
   entre les cases, deviennent de vraies bordures. */
.on-sombre .portes {
  gap: 0;
  background: none;
  border-width: 1px 0 0 1px;
}
.on-sombre .portes .porte {
  background: rgb(16 28 51 / 0.6);
  border-right: 1px solid var(--trait-clair);
  border-bottom: 1px solid var(--trait-clair);
}
.on-sombre .portes .porte:hover { background: rgb(24 41 74 / 0.82); }

/* Mode contraste élevé : la trame disparaît, le fond redevient uni. */
@media (forced-colors: active) {
  .nappe { display: none; }
}

/* Page « Le studio » (29/09/2026, demande de Lohann) : des traits plus
   flous — la hachure passe en dégradé doux au lieu d'un bord net — et
   des chiffres bleu nuit, qui tiennent mieux que le bleu vif sur
   l'orange (--chiffre, dans css/studio3d.css). */
.studio-scene .nappe-traits {
  -webkit-mask: repeating-linear-gradient(115deg, #000 0, rgb(0 0 0 / 0.3) 3.5px, rgb(0 0 0 / 0.3) 5px, #000 9px);
  mask: repeating-linear-gradient(115deg, #000 0, rgb(0 0 0 / 0.3) 3.5px, rgb(0 0 0 / 0.3) 5px, #000 9px);
}