, qui s'étirait sur toute la largeur de
la carte (disgracieux, signalé par l'utilisateur). inline-flex conserve
le comportement largeur-au-contenu d'un bouton normal tout en gardant
le centrage flex interne. */
display: inline-flex;
align-items: center;
justify-content: center;
padding-top: 0;
padding-bottom: 0;
color: #f5e2b8;
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
transition: filter 0.2s;
}
[data-theme="ancien"] .nav-cta:hover,
[data-theme="ancien"] .btn-primary:hover,
[data-theme="ancien"] .btn-secondary:hover {
filter: brightness(1.12);
}
/* ─── IMAGES DES PARCHEMINS — intégration papier (2026-07-19, v3 retravaillée)
───
Casse le rectangle net des photos posées dans les cartes parchemin :
bord "grignoté" façon bruit (5 variantes .parchment-picture--v1..v5,
cyclées côté PHP via l'index de boucle, 84 points/côté) — généré par
bruit multi-octave (mulberry32 seedé, voir historique) pour un grain
irrégulier non-périodique plutôt qu'une onde lisse. Deux fausses pistes
avant cette version : v1→v2 (13→30 points, amplitude ≤1.5% puis 0.2-3%)
jugées trop sages/quasi invisibles ; une v3 intermédiaire a inversé
l'erreur en poussant l'AMPLITUDE (0-24%) plutôt que la densité de points
— résultat : zigzags façon éclair qui tranchaient le texte du bandeau
(biome-name/creature-name), jugé "vulgaire". Le bon axe n'est pas
l'amplitude mais le nombre de points : version retenue = beaucoup de
points (grain fin), amplitude réduite et contenue à 0.2-0.8% (jamais
plus), pour une érosion crédible du bord plutôt qu'une découpe à la hache.
Un fondu de transparence sur ce bord (mask-image) a été tenté ensuite sur
plusieurs passes (SVG puis PNG raster, mask-mode luminance) mais jamais
concluant en pratique malgré des vérifications rigoureuses — ANNULÉ à la
demande explicite de l'utilisateur (2026-07-19) : seul le clip-path net
ci-dessous reste actif, pas de mask-image, pas de --edge-mask.
Reste inchangé : vieillissement de teinte (filter), grain fin (::after).
Scope : toutes les images DANS un parchemin de la prez — hero-inspi,
biome-banner, creature-banner, faction-img, daynight-img, eda-showcase-img,
gallery-img (8 vignettes "Ambiances/Atmosphères", ajouté 2026-07-19 après
validation du reste — 3 essais avant la bonne structure) :
1) 1er essai : `--absolute` posé directement sur .gallery-card (comme
biome-banner) → hauteur 0 pour les 5 vignettes "cover". Cause : depuis
le 2026-07-18, .gallery-card force déjà TOUTES ses images en flux
natural (position:static, height:auto — décision antérieure pour
unifier cover/contain en thème ancien), donc un wrapper --absolute
(inset:0) n'a plus aucune hauteur de référence (chicken-and-egg).
2) 2e essai : suppression du wrapper, img directement dans
.internal-parchment, classe `parchment-picture` posée sur .gallery-card
lui-même (comme le fix overlay biome-banner/creature-banner) → clip-path
invisible. Cause différente cette fois : .gallery-card PORTE LUI-MÊME le
border-image 9-slice (contrairement à .biome-card où le 9-slice est sur
un ANCÊTRE différent de .biome-banner) — le clip-path posé sur
.gallery-card découpe alors la boîte ENTIÈRE bordure comprise (50px de
chaque côté), et l'érosion fine (1-2%) tombe dans la zone de bordure
transparente, invisible.
3) Version retenue : nouveau wrapper `.gallery-picture` (classe
`parchment-picture parchment-picture--vN`) inséré entre
`.internal-parchment` et `
`/`.gallery-overlay` — ni le border-image
(resté sur .gallery-card) ni le flux natural (image reste position:
static, contribue sa propre hauteur au wrapper) ne sont perturbés ;
`.gallery-overlay` (sibling de l'image, pas descendant) suit la même
découpe car il est DANS ce même wrapper désormais positionné
(position:relative hérité de la règle de base ci-dessous). */
[data-theme="ancien"] {
--paper-color: #e4cf98;
}
/* 2026-07-19 — 2e refonte (demande explicite : "davantage de brisures/détails
(3 fois plus)" + "moins d'amplitude (sinon effet découpage d'enfant de
maternelle)") : 28 → 84 points/côté (x3), et amplitude max ramenée de ~2%
à ~0.8% (jitter indépendant par point conservé, mais plage resserrée pour
un bord finement dentelé plutôt qu'un découpage grossier). */
[data-theme="ancien"] .parchment-picture {
position: relative;
overflow: hidden;
isolation: isolate;
clip-path: polygon(
0% 0.16%, 1.19% 0.26%, 2.381% 0.3%, 3.571% 0.54%, 4.762% 0.16%, 5.952% 0.23%, 7.143% 0.18%, 8.333% 0.71%,
9.524% 0.21%, 10.714% 0.19%, 11.905% 0.17%, 13.095% 0.23%, 14.286% 0.35%, 15.476% 0.51%, 16.667% 0.16%, 17.857% 0.78%,
19.048% 0.09%, 20.238% 0.68%, 21.429% 0.4%, 22.619% 0.35%, 23.81% 0.26%, 25% 0.12%, 26.19% 0.34%, 27.381% 0.73%,
28.571% 0.79%, 29.762% 0.24%, 30.952% 0.43%, 32.143% 0.15%, 33.333% 0.41%, 34.524% 0.72%, 35.714% 0.33%, 36.905% 0.42%,
38.095% 0.43%, 39.286% 0.13%, 40.476% 0.35%, 41.667% 0.66%, 42.857% 0.5%, 44.048% 0.6%, 45.238% 0.11%, 46.429% 0.39%,
47.619% 0.34%, 48.81% 0.35%, 50% 0.43%, 51.19% 0.16%, 52.381% 0.56%, 53.571% 0.78%, 54.762% 0.75%, 55.952% 0.25%,
57.143% 0.54%, 58.333% 0.23%, 59.524% 0.12%, 60.714% 0.6%, 61.905% 0.15%, 63.095% 0.29%, 64.286% 0.19%, 65.476% 0.18%,
66.667% 0.22%, 67.857% 0.43%, 69.048% 0.67%, 70.238% 0.75%, 71.429% 0.29%, 72.619% 0.12%, 73.81% 0.08%, 75% 0.63%,
76.19% 0.33%, 77.381% 0.2%, 78.571% 0.3%, 79.762% 0.51%, 80.952% 0.51%, 82.143% 0.54%, 83.333% 0.3%, 84.524% 0.29%,
85.714% 0.4%, 86.905% 0.56%, 88.095% 0.5%, 89.286% 0.57%, 90.476% 0.15%, 91.667% 0.18%, 92.857% 0.17%, 94.048% 0.35%,
95.238% 0.4%, 96.429% 0.63%, 97.619% 0.77%, 98.81% 0.74%, 100% 0.36%, 99.61% 1.19%, 99.77% 2.381%, 99.59% 3.571%,
99.76% 4.762%, 99.64% 5.952%, 99.76% 7.143%, 99.58% 8.333%, 99.21% 9.524%, 99.44% 10.714%, 99.67% 11.905%, 99.42% 13.095%,
99.65% 14.286%, 99.75% 15.476%, 99.62% 16.667%, 99.69% 17.857%, 99.38% 19.048%, 99.69% 20.238%, 99.33% 21.429%, 99.72% 22.619%,
99.77% 23.81%, 99.52% 25%, 99.3% 26.19%, 99.68% 27.381%, 99.51% 28.571%, 99.9% 29.762%, 99.32% 30.952%, 99.37% 32.143%,
99.74% 33.333%, 99.74% 34.524%, 99.85% 35.714%, 99.84% 36.905%, 99.91% 38.095%, 99.45% 39.286%, 99.84% 40.476%, 99.81% 41.667%,
99.6% 42.857%, 99.85% 44.048%, 99.37% 45.238%, 99.51% 46.429%, 99.62% 47.619%, 99.59% 48.81%, 99.74% 50%, 99.78% 51.19%,
99.82% 52.381%, 99.7% 53.571%, 99.61% 54.762%, 99.74% 55.952%, 99.46% 57.143%, 99.32% 58.333%, 99.51% 59.524%, 99.68% 60.714%,
99.44% 61.905%, 99.67% 63.095%, 99.83% 64.286%, 99.31% 65.476%, 99.71% 66.667%, 99.32% 67.857%, 99.75% 69.048%, 99.86% 70.238%,
99.84% 71.429%, 99.21% 72.619%, 99.48% 73.81%, 99.85% 75%, 99.84% 76.19%, 99.43% 77.381%, 99.26% 78.571%, 99.7% 79.762%,
99.88% 80.952%, 99.81% 82.143%, 99.57% 83.333%, 99.62% 84.524%, 99.88% 85.714%, 99.69% 86.905%, 99.75% 88.095%, 99.32% 89.286%,
99.7% 90.476%, 99.29% 91.667%, 99.8% 92.857%, 99.38% 94.048%, 99.58% 95.238%, 99.92% 96.429%, 99.33% 97.619%, 99.69% 98.81%,
99.85% 100%, 98.81% 99.42%, 97.619% 99.29%, 96.429% 99.67%, 95.238% 99.67%, 94.048% 99.35%, 92.857% 99.84%, 91.667% 99.25%,
90.476% 99.51%, 89.286% 99.6%, 88.095% 99.78%, 86.905% 99.7%, 85.714% 99.79%, 84.524% 99.76%, 83.333% 99.2%, 82.143% 99.79%,
80.952% 99.85%, 79.762% 99.37%, 78.571% 99.39%, 77.381% 99.28%, 76.19% 99.62%, 75% 99.48%, 73.81% 99.7%, 72.619% 99.5%,
71.429% 99.57%, 70.238% 99.88%, 69.048% 99.65%, 67.857% 99.49%, 66.667% 99.91%, 65.476% 99.91%, 64.286% 99.81%, 63.095% 99.68%,
61.905% 99.67%, 60.714% 99.5%, 59.524% 99.91%, 58.333% 99.35%, 57.143% 99.88%, 55.952% 99.51%, 54.762% 99.86%, 53.571% 99.8%,
52.381% 99.22%, 51.19% 99.51%, 50% 99.9%, 48.81% 99.41%, 47.619% 99.23%, 46.429% 99.69%, 45.238% 99.69%, 44.048% 99.79%,
42.857% 99.66%, 41.667% 99.79%, 40.476% 99.71%, 39.286% 99.42%, 38.095% 99.36%, 36.905% 99.7%, 35.714% 99.9%, 34.524% 99.23%,
33.333% 99.61%, 32.143% 99.5%, 30.952% 99.43%, 29.762% 99.76%, 28.571% 99.25%, 27.381% 99.69%, 26.19% 99.2%, 25% 99.8%,
23.81% 99.59%, 22.619% 99.34%, 21.429% 99.81%, 20.238% 99.47%, 19.048% 99.21%, 17.857% 99.79%, 16.667% 99.81%, 15.476% 99.72%,
14.286% 99.23%, 13.095% 99.23%, 11.905% 99.69%, 10.714% 99.41%, 9.524% 99.59%, 8.333% 99.7%, 7.143% 99.88%, 5.952% 99.63%,
4.762% 99.89%, 3.571% 99.9%, 2.381% 99.3%, 1.19% 99.37%, 0% 99.63%, 0.36% 98.81%, 0.21% 97.619%, 0.18% 96.429%,
0.34% 95.238%, 0.57% 94.048%, 0.09% 92.857%, 0.09% 91.667%, 0.18% 90.476%, 0.14% 89.286%, 0.28% 88.095%, 0.37% 86.905%,
0.31% 85.714%, 0.3% 84.524%, 0.08% 83.333%, 0.74% 82.143%, 0.25% 80.952%, 0.39% 79.762%, 0.65% 78.571%, 0.59% 77.381%,
0.63% 76.19%, 0.29% 75%, 0.35% 73.81%, 0.51% 72.619%, 0.79% 71.429%, 0.34% 70.238%, 0.12% 69.048%, 0.34% 67.857%,
0.52% 66.667%, 0.31% 65.476%, 0.2% 64.286%, 0.29% 63.095%, 0.23% 61.905%, 0.35% 60.714%, 0.73% 59.524%, 0.26% 58.333%,
0.52% 57.143%, 0.51% 55.952%, 0.42% 54.762%, 0.16% 53.571%, 0.11% 52.381%, 0.22% 51.19%, 0.5% 50%, 0.2% 48.81%,
0.35% 47.619%, 0.66% 46.429%, 0.24% 45.238%, 0.19% 44.048%, 0.13% 42.857%, 0.12% 41.667%, 0.36% 40.476%, 0.75% 39.286%,
0.16% 38.095%, 0.48% 36.905%, 0.3% 35.714%, 0.5% 34.524%, 0.16% 33.333%, 0.34% 32.143%, 0.37% 30.952%, 0.32% 29.762%,
0.63% 28.571%, 0.36% 27.381%, 0.38% 26.19%, 0.77% 25%, 0.43% 23.81%, 0.39% 22.619%, 0.21% 21.429%, 0.09% 20.238%,
0.2% 19.048%, 0.71% 17.857%, 0.68% 16.667%, 0.44% 15.476%, 0.56% 14.286%, 0.62% 13.095%, 0.16% 11.905%, 0.78% 10.714%,
0.59% 9.524%, 0.13% 8.333%, 0.7% 7.143%, 0.73% 5.952%, 0.17% 4.762%, 0.74% 3.571%, 0.43% 2.381%, 0.52% 1.19%
);
}
[data-theme="ancien"] .parchment-picture--v2 {
clip-path: polygon(
0% 0.16%, 1.19% 0.49%, 2.381% 0.72%, 3.571% 0.11%, 4.762% 0.78%, 5.952% 0.64%, 7.143% 0.21%, 8.333% 0.59%,
9.524% 0.24%, 10.714% 0.4%, 11.905% 0.57%, 13.095% 0.64%, 14.286% 0.26%, 15.476% 0.58%, 16.667% 0.72%, 17.857% 0.3%,
19.048% 0.4%, 20.238% 0.15%, 21.429% 0.3%, 22.619% 0.21%, 23.81% 0.31%, 25% 0.11%, 26.19% 0.59%, 27.381% 0.49%,
28.571% 0.38%, 29.762% 0.23%, 30.952% 0.23%, 32.143% 0.58%, 33.333% 0.4%, 34.524% 0.22%, 35.714% 0.61%, 36.905% 0.21%,
38.095% 0.52%, 39.286% 0.09%, 40.476% 0.56%, 41.667% 0.54%, 42.857% 0.25%, 44.048% 0.75%, 45.238% 0.49%, 46.429% 0.72%,
47.619% 0.09%, 48.81% 0.26%, 50% 0.36%, 51.19% 0.64%, 52.381% 0.63%, 53.571% 0.12%, 54.762% 0.25%, 55.952% 0.28%,
57.143% 0.66%, 58.333% 0.27%, 59.524% 0.09%, 60.714% 0.65%, 61.905% 0.67%, 63.095% 0.62%, 64.286% 0.1%, 65.476% 0.69%,
66.667% 0.43%, 67.857% 0.68%, 69.048% 0.64%, 70.238% 0.33%, 71.429% 0.51%, 72.619% 0.43%, 73.81% 0.62%, 75% 0.13%,
76.19% 0.21%, 77.381% 0.18%, 78.571% 0.41%, 79.762% 0.22%, 80.952% 0.19%, 82.143% 0.33%, 83.333% 0.66%, 84.524% 0.41%,
85.714% 0.24%, 86.905% 0.16%, 88.095% 0.35%, 89.286% 0.39%, 90.476% 0.59%, 91.667% 0.75%, 92.857% 0.12%, 94.048% 0.34%,
95.238% 0.71%, 96.429% 0.22%, 97.619% 0.59%, 98.81% 0.2%, 100% 0.4%, 99.69% 1.19%, 99.65% 2.381%, 99.59% 3.571%,
99.64% 4.762%, 99.74% 5.952%, 99.74% 7.143%, 99.59% 8.333%, 99.57% 9.524%, 99.8% 10.714%, 99.63% 11.905%, 99.35% 13.095%,
99.61% 14.286%, 99.35% 15.476%, 99.76% 16.667%, 99.33% 17.857%, 99.64% 19.048%, 99.84% 20.238%, 99.89% 21.429%, 99.66% 22.619%,
99.7% 23.81%, 99.86% 25%, 99.22% 26.19%, 99.51% 27.381%, 99.72% 28.571%, 99.3% 29.762%, 99.3% 30.952%, 99.5% 32.143%,
99.66% 33.333%, 99.81% 34.524%, 99.27% 35.714%, 99.79% 36.905%, 99.35% 38.095%, 99.59% 39.286%, 99.51% 40.476%, 99.9% 41.667%,
99.63% 42.857%, 99.61% 44.048%, 99.37% 45.238%, 99.49% 46.429%, 99.28% 47.619%, 99.57% 48.81%, 99.86% 50%, 99.31% 51.19%,
99.41% 52.381%, 99.73% 53.571%, 99.7% 54.762%, 99.36% 55.952%, 99.35% 57.143%, 99.68% 58.333%, 99.64% 59.524%, 99.79% 60.714%,
99.72% 61.905%, 99.63% 63.095%, 99.84% 64.286%, 99.79% 65.476%, 99.77% 66.667%, 99.7% 67.857%, 99.84% 69.048%, 99.7% 70.238%,
99.6% 71.429%, 99.62% 72.619%, 99.65% 73.81%, 99.74% 75%, 99.77% 76.19%, 99.65% 77.381%, 99.63% 78.571%, 99.89% 79.762%,
99.49% 80.952%, 99.79% 82.143%, 99.22% 83.333%, 99.61% 84.524%, 99.48% 85.714%, 99.78% 86.905%, 99.39% 88.095%, 99.5% 89.286%,
99.33% 90.476%, 99.88% 91.667%, 99.72% 92.857%, 99.48% 94.048%, 99.85% 95.238%, 99.69% 96.429%, 99.57% 97.619%, 99.34% 98.81%,
99.72% 100%, 98.81% 99.22%, 97.619% 99.4%, 96.429% 99.76%, 95.238% 99.69%, 94.048% 99.31%, 92.857% 99.32%, 91.667% 99.88%,
90.476% 99.46%, 89.286% 99.74%, 88.095% 99.29%, 86.905% 99.66%, 85.714% 99.74%, 84.524% 99.91%, 83.333% 99.3%, 82.143% 99.75%,
80.952% 99.59%, 79.762% 99.29%, 78.571% 99.29%, 77.381% 99.35%, 76.19% 99.77%, 75% 99.87%, 73.81% 99.66%, 72.619% 99.85%,
71.429% 99.48%, 70.238% 99.78%, 69.048% 99.52%, 67.857% 99.75%, 66.667% 99.22%, 65.476% 99.58%, 64.286% 99.73%, 63.095% 99.31%,
61.905% 99.86%, 60.714% 99.28%, 59.524% 99.37%, 58.333% 99.62%, 57.143% 99.31%, 55.952% 99.63%, 54.762% 99.63%, 53.571% 99.71%,
52.381% 99.36%, 51.19% 99.61%, 50% 99.64%, 48.81% 99.88%, 47.619% 99.41%, 46.429% 99.26%, 45.238% 99.82%, 44.048% 99.66%,
42.857% 99.8%, 41.667% 99.44%, 40.476% 99.9%, 39.286% 99.39%, 38.095% 99.62%, 36.905% 99.86%, 35.714% 99.39%, 34.524% 99.69%,
33.333% 99.32%, 32.143% 99.57%, 30.952% 99.5%, 29.762% 99.4%, 28.571% 99.41%, 27.381% 99.5%, 26.19% 99.73%, 25% 99.28%,
23.81% 99.76%, 22.619% 99.71%, 21.429% 99.8%, 20.238% 99.88%, 19.048% 99.6%, 17.857% 99.62%, 16.667% 99.3%, 15.476% 99.79%,
14.286% 99.37%, 13.095% 99.24%, 11.905% 99.78%, 10.714% 99.86%, 9.524% 99.76%, 8.333% 99.7%, 7.143% 99.88%, 5.952% 99.5%,
4.762% 99.83%, 3.571% 99.88%, 2.381% 99.69%, 1.19% 99.25%, 0% 99.82%, 0.53% 98.81%, 0.27% 97.619%, 0.38% 96.429%,
0.59% 95.238%, 0.19% 94.048%, 0.12% 92.857%, 0.55% 91.667%, 0.2% 90.476%, 0.6% 89.286%, 0.78% 88.095%, 0.14% 86.905%,
0.08% 85.714%, 0.35% 84.524%, 0.29% 83.333%, 0.71% 82.143%, 0.19% 80.952%, 0.33% 79.762%, 0.38% 78.571%, 0.32% 77.381%,
0.19% 76.19%, 0.31% 75%, 0.33% 73.81%, 0.16% 72.619%, 0.22% 71.429%, 0.22% 70.238%, 0.23% 69.048%, 0.42% 67.857%,
0.42% 66.667%, 0.29% 65.476%, 0.65% 64.286%, 0.55% 63.095%, 0.56% 61.905%, 0.57% 60.714%, 0.43% 59.524%, 0.17% 58.333%,
0.35% 57.143%, 0.43% 55.952%, 0.15% 54.762%, 0.11% 53.571%, 0.2% 52.381%, 0.7% 51.19%, 0.17% 50%, 0.2% 48.81%,
0.3% 47.619%, 0.63% 46.429%, 0.76% 45.238%, 0.49% 44.048%, 0.41% 42.857%, 0.49% 41.667%, 0.65% 40.476%, 0.15% 39.286%,
0.16% 38.095%, 0.09% 36.905%, 0.5% 35.714%, 0.75% 34.524%, 0.1% 33.333%, 0.67% 32.143%, 0.26% 30.952%, 0.52% 29.762%,
0.69% 28.571%, 0.4% 27.381%, 0.43% 26.19%, 0.72% 25%, 0.33% 23.81%, 0.58% 22.619%, 0.28% 21.429%, 0.32% 20.238%,
0.32% 19.048%, 0.11% 17.857%, 0.31% 16.667%, 0.7% 15.476%, 0.41% 14.286%, 0.64% 13.095%, 0.25% 11.905%, 0.22% 10.714%,
0.13% 9.524%, 0.09% 8.333%, 0.65% 7.143%, 0.8% 5.952%, 0.35% 4.762%, 0.2% 3.571%, 0.35% 2.381%, 0.77% 1.19%
);
/* 2026-07-19 — 4e passe : le fondu rectangulaire (2 linear-gradient) — commentaire clos le 2026-08-01 (bug pré-existant : ce commentaire n'était jamais fermé, ce qui rendait TOUT le CSS qui suivait dans ce fichier — .parchment-picture--v3/v4/v5, .gallery-card--contain, .parchment-picture::after et l'override #lutHelpTooltip ajouté ce jour — invisible pour le parseur CSS du navigateur, avalé comme texte de commentaire jusqu'au premier "*/" rencontré plus loin dans le fichier. Découvert en vérifiant en direct pourquoi l'override tooltip médiéval ne s'appliquait pas. */
}
[data-theme="ancien"] .parchment-picture--v3 {
clip-path: polygon(
0% 0.21%, 1.19% 0.11%, 2.381% 0.2%, 3.571% 0.79%, 4.762% 0.73%, 5.952% 0.11%, 7.143% 0.56%, 8.333% 0.25%,
9.524% 0.43%, 10.714% 0.63%, 11.905% 0.43%, 13.095% 0.54%, 14.286% 0.69%, 15.476% 0.09%, 16.667% 0.18%, 17.857% 0.41%,
19.048% 0.48%, 20.238% 0.6%, 21.429% 0.21%, 22.619% 0.1%, 23.81% 0.28%, 25% 0.1%, 26.19% 0.8%, 27.381% 0.35%,
28.571% 0.44%, 29.762% 0.28%, 30.952% 0.7%, 32.143% 0.67%, 33.333% 0.22%, 34.524% 0.3%, 35.714% 0.57%, 36.905% 0.74%,
38.095% 0.25%, 39.286% 0.8%, 40.476% 0.32%, 41.667% 0.51%, 42.857% 0.75%, 44.048% 0.43%, 45.238% 0.28%, 46.429% 0.69%,
47.619% 0.33%, 48.81% 0.26%, 50% 0.43%, 51.19% 0.31%, 52.381% 0.28%, 53.571% 0.36%, 54.762% 0.2%, 55.952% 0.58%,
57.143% 0.3%, 58.333% 0.53%, 59.524% 0.79%, 60.714% 0.2%, 61.905% 0.23%, 63.095% 0.29%, 64.286% 0.21%, 65.476% 0.24%,
66.667% 0.52%, 67.857% 0.77%, 69.048% 0.38%, 70.238% 0.65%, 71.429% 0.57%, 72.619% 0.42%, 73.81% 0.11%, 75% 0.16%,
76.19% 0.13%, 77.381% 0.43%, 78.571% 0.16%, 79.762% 0.1%, 80.952% 0.42%, 82.143% 0.39%, 83.333% 0.42%, 84.524% 0.67%,
85.714% 0.8%, 86.905% 0.2%, 88.095% 0.32%, 89.286% 0.52%, 90.476% 0.16%, 91.667% 0.08%, 92.857% 0.28%, 94.048% 0.41%,
95.238% 0.11%, 96.429% 0.1%, 97.619% 0.78%, 98.81% 0.12%, 100% 0.43%, 99.75% 1.19%, 99.47% 2.381%, 99.75% 3.571%,
99.89% 4.762%, 99.92% 5.952%, 99.84% 7.143%, 99.56% 8.333%, 99.4% 9.524%, 99.62% 10.714%, 99.78% 11.905%, 99.89% 13.095%,
99.91% 14.286%, 99.5% 15.476%, 99.64% 16.667%, 99.73% 17.857%, 99.88% 19.048%, 99.62% 20.238%, 99.46% 21.429%, 99.75% 22.619%,
99.71% 23.81%, 99.64% 25%, 99.3% 26.19%, 99.46% 27.381%, 99.25% 28.571%, 99.49% 29.762%, 99.23% 30.952%, 99.6% 32.143%,
99.74% 33.333%, 99.63% 34.524%, 99.83% 35.714%, 99.64% 36.905%, 99.4% 38.095%, 99.57% 39.286%, 99.9% 40.476%, 99.35% 41.667%,
99.43% 42.857%, 99.84% 44.048%, 99.69% 45.238%, 99.77% 46.429%, 99.49% 47.619%, 99.38% 48.81%, 99.61% 50%, 99.89% 51.19%,
99.72% 52.381%, 99.76% 53.571%, 99.62% 54.762%, 99.65% 55.952%, 99.79% 57.143%, 99.91% 58.333%, 99.77% 59.524%, 99.83% 60.714%,
99.71% 61.905%, 99.7% 63.095%, 99.27% 64.286%, 99.4% 65.476%, 99.23% 66.667%, 99.73% 67.857%, 99.75% 69.048%, 99.49% 70.238%,
99.7% 71.429%, 99.47% 72.619%, 99.75% 73.81%, 99.4% 75%, 99.69% 76.19%, 99.68% 77.381%, 99.21% 78.571%, 99.43% 79.762%,
99.39% 80.952%, 99.42% 82.143%, 99.73% 83.333%, 99.41% 84.524%, 99.48% 85.714%, 99.73% 86.905%, 99.81% 88.095%, 99.39% 89.286%,
99.4% 90.476%, 99.39% 91.667%, 99.71% 92.857%, 99.73% 94.048%, 99.49% 95.238%, 99.72% 96.429%, 99.49% 97.619%, 99.72% 98.81%,
99.61% 100%, 98.81% 99.71%, 97.619% 99.87%, 96.429% 99.7%, 95.238% 99.81%, 94.048% 99.61%, 92.857% 99.75%, 91.667% 99.39%,
90.476% 99.21%, 89.286% 99.68%, 88.095% 99.27%, 86.905% 99.38%, 85.714% 99.74%, 84.524% 99.72%, 83.333% 99.56%, 82.143% 99.29%,
80.952% 99.36%, 79.762% 99.77%, 78.571% 99.51%, 77.381% 99.43%, 76.19% 99.64%, 75% 99.8%, 73.81% 99.84%, 72.619% 99.52%,
71.429% 99.51%, 70.238% 99.78%, 69.048% 99.67%, 67.857% 99.5%, 66.667% 99.28%, 65.476% 99.47%, 64.286% 99.65%, 63.095% 99.6%,
61.905% 99.36%, 60.714% 99.87%, 59.524% 99.8%, 58.333% 99.65%, 57.143% 99.31%, 55.952% 99.61%, 54.762% 99.85%, 53.571% 99.41%,
52.381% 99.37%, 51.19% 99.27%, 50% 99.5%, 48.81% 99.36%, 47.619% 99.81%, 46.429% 99.23%, 45.238% 99.89%, 44.048% 99.76%,
42.857% 99.64%, 41.667% 99.62%, 40.476% 99.6%, 39.286% 99.81%, 38.095% 99.23%, 36.905% 99.46%, 35.714% 99.44%, 34.524% 99.37%,
33.333% 99.3%, 32.143% 99.34%, 30.952% 99.86%, 29.762% 99.35%, 28.571% 99.49%, 27.381% 99.87%, 26.19% 99.72%, 25% 99.24%,
23.81% 99.78%, 22.619% 99.33%, 21.429% 99.28%, 20.238% 99.22%, 19.048% 99.9%, 17.857% 99.49%, 16.667% 99.85%, 15.476% 99.58%,
14.286% 99.77%, 13.095% 99.29%, 11.905% 99.68%, 10.714% 99.24%, 9.524% 99.67%, 8.333% 99.28%, 7.143% 99.81%, 5.952% 99.25%,
4.762% 99.48%, 3.571% 99.85%, 2.381% 99.25%, 1.19% 99.74%, 0% 99.77%, 0.23% 98.81%, 0.13% 97.619%, 0.13% 96.429%,
0.08% 95.238%, 0.18% 94.048%, 0.72% 92.857%, 0.41% 91.667%, 0.11% 90.476%, 0.1% 89.286%, 0.18% 88.095%, 0.27% 86.905%,
0.39% 85.714%, 0.29% 84.524%, 0.52% 83.333%, 0.09% 82.143%, 0.3% 80.952%, 0.36% 79.762%, 0.44% 78.571%, 0.25% 77.381%,
0.27% 76.19%, 0.39% 75%, 0.37% 73.81%, 0.09% 72.619%, 0.13% 71.429%, 0.33% 70.238%, 0.33% 69.048%, 0.25% 67.857%,
0.38% 66.667%, 0.33% 65.476%, 0.26% 64.286%, 0.8% 63.095%, 0.52% 61.905%, 0.65% 60.714%, 0.53% 59.524%, 0.39% 58.333%,
0.6% 57.143%, 0.2% 55.952%, 0.26% 54.762%, 0.1% 53.571%, 0.52% 52.381%, 0.52% 51.19%, 0.39% 50%, 0.12% 48.81%,
0.48% 47.619%, 0.4% 46.429%, 0.27% 45.238%, 0.73% 44.048%, 0.59% 42.857%, 0.15% 41.667%, 0.31% 40.476%, 0.26% 39.286%,
0.13% 38.095%, 0.16% 36.905%, 0.61% 35.714%, 0.5% 34.524%, 0.49% 33.333%, 0.17% 32.143%, 0.22% 30.952%, 0.16% 29.762%,
0.74% 28.571%, 0.31% 27.381%, 0.18% 26.19%, 0.49% 25%, 0.31% 23.81%, 0.37% 22.619%, 0.15% 21.429%, 0.25% 20.238%,
0.17% 19.048%, 0.54% 17.857%, 0.58% 16.667%, 0.33% 15.476%, 0.17% 14.286%, 0.36% 13.095%, 0.59% 11.905%, 0.43% 10.714%,
0.33% 9.524%, 0.33% 8.333%, 0.37% 7.143%, 0.44% 5.952%, 0.27% 4.762%, 0.51% 3.571%, 0.27% 2.381%, 0.66% 1.19%
);
/* 2026-07-19 — 4e passe : le fondu rectangulaire (2 linear-gradient) — commentaire clos le 2026-08-01 (bug pré-existant : ce commentaire n'était jamais fermé, ce qui rendait TOUT le CSS qui suivait dans ce fichier — .parchment-picture--v3/v4/v5, .gallery-card--contain, .parchment-picture::after et l'override #lutHelpTooltip ajouté ce jour — invisible pour le parseur CSS du navigateur, avalé comme texte de commentaire jusqu'au premier "*/" rencontré plus loin dans le fichier. Découvert en vérifiant en direct pourquoi l'override tooltip médiéval ne s'appliquait pas. */
}
[data-theme="ancien"] .parchment-picture--v4 {
clip-path: polygon(
0% 0.48%, 1.19% 0.39%, 2.381% 0.31%, 3.571% 0.19%, 4.762% 0.67%, 5.952% 0.64%, 7.143% 0.39%, 8.333% 0.52%,
9.524% 0.09%, 10.714% 0.35%, 11.905% 0.53%, 13.095% 0.5%, 14.286% 0.2%, 15.476% 0.22%, 16.667% 0.65%, 17.857% 0.4%,
19.048% 0.15%, 20.238% 0.34%, 21.429% 0.22%, 22.619% 0.5%, 23.81% 0.65%, 25% 0.55%, 26.19% 0.17%, 27.381% 0.1%,
28.571% 0.41%, 29.762% 0.57%, 30.952% 0.43%, 32.143% 0.11%, 33.333% 0.72%, 34.524% 0.7%, 35.714% 0.21%, 36.905% 0.12%,
38.095% 0.68%, 39.286% 0.29%, 40.476% 0.68%, 41.667% 0.57%, 42.857% 0.14%, 44.048% 0.33%, 45.238% 0.69%, 46.429% 0.16%,
47.619% 0.22%, 48.81% 0.69%, 50% 0.19%, 51.19% 0.21%, 52.381% 0.36%, 53.571% 0.26%, 54.762% 0.2%, 55.952% 0.55%,
57.143% 0.36%, 58.333% 0.5%, 59.524% 0.16%, 60.714% 0.75%, 61.905% 0.6%, 63.095% 0.21%, 64.286% 0.72%, 65.476% 0.67%,
66.667% 0.62%, 67.857% 0.1%, 69.048% 0.76%, 70.238% 0.09%, 71.429% 0.71%, 72.619% 0.15%, 73.81% 0.41%, 75% 0.29%,
76.19% 0.25%, 77.381% 0.44%, 78.571% 0.3%, 79.762% 0.72%, 80.952% 0.27%, 82.143% 0.38%, 83.333% 0.78%, 84.524% 0.12%,
85.714% 0.42%, 86.905% 0.42%, 88.095% 0.76%, 89.286% 0.43%, 90.476% 0.22%, 91.667% 0.63%, 92.857% 0.27%, 94.048% 0.36%,
95.238% 0.54%, 96.429% 0.74%, 97.619% 0.28%, 98.81% 0.48%, 100% 0.32%, 99.8% 1.19%, 99.71% 2.381%, 99.9% 3.571%,
99.73% 4.762%, 99.6% 5.952%, 99.81% 7.143%, 99.67% 8.333%, 99.81% 9.524%, 99.36% 10.714%, 99.72% 11.905%, 99.8% 13.095%,
99.47% 14.286%, 99.4% 15.476%, 99.48% 16.667%, 99.84% 17.857%, 99.59% 19.048%, 99.64% 20.238%, 99.7% 21.429%, 99.49% 22.619%,
99.62% 23.81%, 99.84% 25%, 99.87% 26.19%, 99.31% 27.381%, 99.24% 28.571%, 99.77% 29.762%, 99.76% 30.952%, 99.32% 32.143%,
99.42% 33.333%, 99.74% 34.524%, 99.5% 35.714%, 99.5% 36.905%, 99.58% 38.095%, 99.33% 39.286%, 99.26% 40.476%, 99.77% 41.667%,
99.57% 42.857%, 99.23% 44.048%, 99.9% 45.238%, 99.91% 46.429%, 99.35% 47.619%, 99.3% 48.81%, 99.69% 50%, 99.67% 51.19%,
99.25% 52.381%, 99.31% 53.571%, 99.84% 54.762%, 99.33% 55.952%, 99.66% 57.143%, 99.64% 58.333%, 99.65% 59.524%, 99.62% 60.714%,
99.77% 61.905%, 99.74% 63.095%, 99.68% 64.286%, 99.91% 65.476%, 99.29% 66.667%, 99.74% 67.857%, 99.87% 69.048%, 99.87% 70.238%,
99.59% 71.429%, 99.88% 72.619%, 99.43% 73.81%, 99.72% 75%, 99.78% 76.19%, 99.65% 77.381%, 99.8% 78.571%, 99.78% 79.762%,
99.64% 80.952%, 99.79% 82.143%, 99.68% 83.333%, 99.89% 84.524%, 99.83% 85.714%, 99.8% 86.905%, 99.67% 88.095%, 99.77% 89.286%,
99.73% 90.476%, 99.57% 91.667%, 99.84% 92.857%, 99.44% 94.048%, 99.24% 95.238%, 99.88% 96.429%, 99.5% 97.619%, 99.3% 98.81%,
99.74% 100%, 98.81% 99.76%, 97.619% 99.78%, 96.429% 99.43%, 95.238% 99.42%, 94.048% 99.51%, 92.857% 99.81%, 91.667% 99.82%,
90.476% 99.66%, 89.286% 99.48%, 88.095% 99.6%, 86.905% 99.78%, 85.714% 99.21%, 84.524% 99.57%, 83.333% 99.43%, 82.143% 99.91%,
80.952% 99.4%, 79.762% 99.72%, 78.571% 99.72%, 77.381% 99.84%, 76.19% 99.84%, 75% 99.92%, 73.81% 99.67%, 72.619% 99.83%,
71.429% 99.32%, 70.238% 99.48%, 69.048% 99.68%, 67.857% 99.28%, 66.667% 99.3%, 65.476% 99.63%, 64.286% 99.69%, 63.095% 99.87%,
61.905% 99.47%, 60.714% 99.71%, 59.524% 99.5%, 58.333% 99.33%, 57.143% 99.85%, 55.952% 99.85%, 54.762% 99.71%, 53.571% 99.92%,
52.381% 99.79%, 51.19% 99.91%, 50% 99.59%, 48.81% 99.24%, 47.619% 99.49%, 46.429% 99.72%, 45.238% 99.32%, 44.048% 99.6%,
42.857% 99.39%, 41.667% 99.2%, 40.476% 99.63%, 39.286% 99.44%, 38.095% 99.92%, 36.905% 99.68%, 35.714% 99.83%, 34.524% 99.7%,
33.333% 99.32%, 32.143% 99.33%, 30.952% 99.47%, 29.762% 99.41%, 28.571% 99.76%, 27.381% 99.7%, 26.19% 99.64%, 25% 99.67%,
23.81% 99.7%, 22.619% 99.46%, 21.429% 99.21%, 20.238% 99.75%, 19.048% 99.62%, 17.857% 99.67%, 16.667% 99.78%, 15.476% 99.71%,
14.286% 99.69%, 13.095% 99.74%, 11.905% 99.74%, 10.714% 99.31%, 9.524% 99.77%, 8.333% 99.86%, 7.143% 99.81%, 5.952% 99.72%,
4.762% 99.23%, 3.571% 99.35%, 2.381% 99.29%, 1.19% 99.21%, 0% 99.78%, 0.31% 98.81%, 0.78% 97.619%, 0.61% 96.429%,
0.15% 95.238%, 0.3% 94.048%, 0.52% 92.857%, 0.58% 91.667%, 0.13% 90.476%, 0.24% 89.286%, 0.34% 88.095%, 0.11% 86.905%,
0.09% 85.714%, 0.35% 84.524%, 0.35% 83.333%, 0.67% 82.143%, 0.75% 80.952%, 0.15% 79.762%, 0.74% 78.571%, 0.11% 77.381%,
0.21% 76.19%, 0.66% 75%, 0.71% 73.81%, 0.64% 72.619%, 0.21% 71.429%, 0.33% 70.238%, 0.26% 69.048%, 0.32% 67.857%,
0.1% 66.667%, 0.32% 65.476%, 0.31% 64.286%, 0.74% 63.095%, 0.15% 61.905%, 0.33% 60.714%, 0.12% 59.524%, 0.23% 58.333%,
0.64% 57.143%, 0.34% 55.952%, 0.35% 54.762%, 0.24% 53.571%, 0.09% 52.381%, 0.75% 51.19%, 0.73% 50%, 0.22% 48.81%,
0.33% 47.619%, 0.59% 46.429%, 0.66% 45.238%, 0.36% 44.048%, 0.65% 42.857%, 0.56% 41.667%, 0.16% 40.476%, 0.37% 39.286%,
0.74% 38.095%, 0.74% 36.905%, 0.2% 35.714%, 0.69% 34.524%, 0.5% 33.333%, 0.39% 32.143%, 0.11% 30.952%, 0.73% 29.762%,
0.36% 28.571%, 0.6% 27.381%, 0.43% 26.19%, 0.23% 25%, 0.76% 23.81%, 0.67% 22.619%, 0.38% 21.429%, 0.67% 20.238%,
0.14% 19.048%, 0.64% 17.857%, 0.12% 16.667%, 0.42% 15.476%, 0.6% 14.286%, 0.17% 13.095%, 0.09% 11.905%, 0.52% 10.714%,
0.73% 9.524%, 0.09% 8.333%, 0.69% 7.143%, 0.31% 5.952%, 0.28% 4.762%, 0.41% 3.571%, 0.31% 2.381%, 0.21% 1.19%
);
/* 2026-07-19 — 4e passe : le fondu rectangulaire (2 linear-gradient) — commentaire clos le 2026-08-01 (bug pré-existant : ce commentaire n'était jamais fermé, ce qui rendait TOUT le CSS qui suivait dans ce fichier — .parchment-picture--v3/v4/v5, .gallery-card--contain, .parchment-picture::after et l'override #lutHelpTooltip ajouté ce jour — invisible pour le parseur CSS du navigateur, avalé comme texte de commentaire jusqu'au premier "*/" rencontré plus loin dans le fichier. Découvert en vérifiant en direct pourquoi l'override tooltip médiéval ne s'appliquait pas. */
}
[data-theme="ancien"] .parchment-picture--v5 {
clip-path: polygon(
0% 0.53%, 1.19% 0.41%, 2.381% 0.61%, 3.571% 0.35%, 4.762% 0.09%, 5.952% 0.49%, 7.143% 0.1%, 8.333% 0.12%,
9.524% 0.67%, 10.714% 0.23%, 11.905% 0.58%, 13.095% 0.31%, 14.286% 0.33%, 15.476% 0.69%, 16.667% 0.57%, 17.857% 0.71%,
19.048% 0.71%, 20.238% 0.19%, 21.429% 0.17%, 22.619% 0.15%, 23.81% 0.39%, 25% 0.18%, 26.19% 0.52%, 27.381% 0.65%,
28.571% 0.69%, 29.762% 0.36%, 30.952% 0.42%, 32.143% 0.3%, 33.333% 0.33%, 34.524% 0.31%, 35.714% 0.29%, 36.905% 0.76%,
38.095% 0.32%, 39.286% 0.24%, 40.476% 0.71%, 41.667% 0.19%, 42.857% 0.6%, 44.048% 0.59%, 45.238% 0.28%, 46.429% 0.17%,
47.619% 0.71%, 48.81% 0.08%, 50% 0.78%, 51.19% 0.78%, 52.381% 0.44%, 53.571% 0.74%, 54.762% 0.39%, 55.952% 0.69%,
57.143% 0.73%, 58.333% 0.23%, 59.524% 0.41%, 60.714% 0.35%, 61.905% 0.38%, 63.095% 0.3%, 64.286% 0.63%, 65.476% 0.74%,
66.667% 0.09%, 67.857% 0.15%, 69.048% 0.25%, 70.238% 0.42%, 71.429% 0.44%, 72.619% 0.18%, 73.81% 0.14%, 75% 0.74%,
76.19% 0.29%, 77.381% 0.28%, 78.571% 0.24%, 79.762% 0.26%, 80.952% 0.23%, 82.143% 0.33%, 83.333% 0.43%, 84.524% 0.35%,
85.714% 0.67%, 86.905% 0.43%, 88.095% 0.09%, 89.286% 0.38%, 90.476% 0.19%, 91.667% 0.67%, 92.857% 0.11%, 94.048% 0.14%,
95.238% 0.42%, 96.429% 0.38%, 97.619% 0.24%, 98.81% 0.19%, 100% 0.63%, 99.72% 1.19%, 99.64% 2.381%, 99.89% 3.571%,
99.58% 4.762%, 99.85% 5.952%, 99.61% 7.143%, 99.69% 8.333%, 99.64% 9.524%, 99.46% 10.714%, 99.31% 11.905%, 99.4% 13.095%,
99.43% 14.286%, 99.86% 15.476%, 99.68% 16.667%, 99.6% 17.857%, 99.73% 19.048%, 99.42% 20.238%, 99.78% 21.429%, 99.79% 22.619%,
99.86% 23.81%, 99.58% 25%, 99.74% 26.19%, 99.92% 27.381%, 99.7% 28.571%, 99.25% 29.762%, 99.81% 30.952%, 99.82% 32.143%,
99.8% 33.333%, 99.32% 34.524%, 99.87% 35.714%, 99.73% 36.905%, 99.75% 38.095%, 99.6% 39.286%, 99.92% 40.476%, 99.9% 41.667%,
99.77% 42.857%, 99.59% 44.048%, 99.5% 45.238%, 99.63% 46.429%, 99.21% 47.619%, 99.86% 48.81%, 99.91% 50%, 99.49% 51.19%,
99.52% 52.381%, 99.41% 53.571%, 99.64% 54.762%, 99.74% 55.952%, 99.74% 57.143%, 99.62% 58.333%, 99.6% 59.524%, 99.59% 60.714%,
99.62% 61.905%, 99.8% 63.095%, 99.89% 64.286%, 99.78% 65.476%, 99.9% 66.667%, 99.7% 67.857%, 99.22% 69.048%, 99.32% 70.238%,
99.3% 71.429%, 99.87% 72.619%, 99.85% 73.81%, 99.24% 75%, 99.23% 76.19%, 99.64% 77.381%, 99.29% 78.571%, 99.68% 79.762%,
99.49% 80.952%, 99.7% 82.143%, 99.88% 83.333%, 99.41% 84.524%, 99.52% 85.714%, 99.23% 86.905%, 99.7% 88.095%, 99.48% 89.286%,
99.57% 90.476%, 99.8% 91.667%, 99.42% 92.857%, 99.38% 94.048%, 99.72% 95.238%, 99.21% 96.429%, 99.81% 97.619%, 99.78% 98.81%,
99.24% 100%, 98.81% 99.86%, 97.619% 99.75%, 96.429% 99.64%, 95.238% 99.72%, 94.048% 99.26%, 92.857% 99.69%, 91.667% 99.84%,
90.476% 99.75%, 89.286% 99.89%, 88.095% 99.9%, 86.905% 99.78%, 85.714% 99.92%, 84.524% 99.9%, 83.333% 99.64%, 82.143% 99.48%,
80.952% 99.27%, 79.762% 99.58%, 78.571% 99.74%, 77.381% 99.67%, 76.19% 99.79%, 75% 99.91%, 73.81% 99.62%, 72.619% 99.82%,
71.429% 99.78%, 70.238% 99.89%, 69.048% 99.66%, 67.857% 99.4%, 66.667% 99.25%, 65.476% 99.2%, 64.286% 99.7%, 63.095% 99.62%,
61.905% 99.85%, 60.714% 99.91%, 59.524% 99.66%, 58.333% 99.25%, 57.143% 99.42%, 55.952% 99.63%, 54.762% 99.84%, 53.571% 99.63%,
52.381% 99.89%, 51.19% 99.71%, 50% 99.31%, 48.81% 99.64%, 47.619% 99.29%, 46.429% 99.27%, 45.238% 99.41%, 44.048% 99.63%,
42.857% 99.75%, 41.667% 99.63%, 40.476% 99.77%, 39.286% 99.69%, 38.095% 99.77%, 36.905% 99.63%, 35.714% 99.48%, 34.524% 99.5%,
33.333% 99.3%, 32.143% 99.33%, 30.952% 99.25%, 29.762% 99.77%, 28.571% 99.52%, 27.381% 99.79%, 26.19% 99.6%, 25% 99.59%,
23.81% 99.68%, 22.619% 99.44%, 21.429% 99.25%, 20.238% 99.32%, 19.048% 99.67%, 17.857% 99.78%, 16.667% 99.3%, 15.476% 99.47%,
14.286% 99.62%, 13.095% 99.4%, 11.905% 99.81%, 10.714% 99.85%, 9.524% 99.35%, 8.333% 99.42%, 7.143% 99.91%, 5.952% 99.62%,
4.762% 99.89%, 3.571% 99.31%, 2.381% 99.6%, 1.19% 99.84%, 0% 99.51%, 0.6% 98.81%, 0.23% 97.619%, 0.54% 96.429%,
0.36% 95.238%, 0.37% 94.048%, 0.21% 92.857%, 0.18% 91.667%, 0.39% 90.476%, 0.61% 89.286%, 0.3% 88.095%, 0.63% 86.905%,
0.37% 85.714%, 0.57% 84.524%, 0.39% 83.333%, 0.38% 82.143%, 0.13% 80.952%, 0.09% 79.762%, 0.15% 78.571%, 0.7% 77.381%,
0.22% 76.19%, 0.29% 75%, 0.28% 73.81%, 0.52% 72.619%, 0.41% 71.429%, 0.21% 70.238%, 0.39% 69.048%, 0.36% 67.857%,
0.73% 66.667%, 0.26% 65.476%, 0.5% 64.286%, 0.15% 63.095%, 0.68% 61.905%, 0.31% 60.714%, 0.1% 59.524%, 0.64% 58.333%,
0.61% 57.143%, 0.64% 55.952%, 0.21% 54.762%, 0.35% 53.571%, 0.63% 52.381%, 0.43% 51.19%, 0.77% 50%, 0.65% 48.81%,
0.72% 47.619%, 0.16% 46.429%, 0.74% 45.238%, 0.33% 44.048%, 0.52% 42.857%, 0.39% 41.667%, 0.19% 40.476%, 0.7% 39.286%,
0.28% 38.095%, 0.49% 36.905%, 0.56% 35.714%, 0.17% 34.524%, 0.34% 33.333%, 0.5% 32.143%, 0.5% 30.952%, 0.13% 29.762%,
0.57% 28.571%, 0.32% 27.381%, 0.67% 26.19%, 0.28% 25%, 0.24% 23.81%, 0.39% 22.619%, 0.43% 21.429%, 0.61% 20.238%,
0.39% 19.048%, 0.23% 17.857%, 0.78% 16.667%, 0.09% 15.476%, 0.26% 14.286%, 0.15% 13.095%, 0.17% 11.905%, 0.63% 10.714%,
0.71% 9.524%, 0.25% 8.333%, 0.67% 7.143%, 0.35% 5.952%, 0.27% 4.762%, 0.11% 3.571%, 0.74% 2.381%, 0.76% 1.19%
);
/* 2026-07-19 — 4e passe : le fondu rectangulaire (2 linear-gradient) — commentaire clos le 2026-08-01 (bug pré-existant : ce commentaire n'était jamais fermé, ce qui rendait TOUT le CSS qui suivait dans ce fichier — .parchment-picture--v3/v4/v5, .gallery-card--contain, .parchment-picture::after et l'override #lutHelpTooltip ajouté ce jour — invisible pour le parseur CSS du navigateur, avalé comme texte de commentaire jusqu'au premier "*/" rencontré plus loin dans le fichier. Découvert en vérifiant en direct pourquoi l'override tooltip médiéval ne s'appliquait pas. */
}
/* Types dont l'
d'origine porte elle-même l'aspect-ratio (pas de boîte
parente dédiée) : le wrapper reprend ce ratio, l'image passe en 100%/100%. */
[data-theme="ancien"] .parchment-picture--fill {
width: 100%;
aspect-ratio: 16/9;
}
/* Types où le wrapper remplace l'
à l'intérieur d'une boîte déjà
dimensionnée par le parent (banner déjà aspect-ratio + overflow:hidden,
légende en sibling — non affectée par le clip-path de ce wrapper). */
[data-theme="ancien"] .parchment-picture--absolute {
position: absolute;
inset: 0;
}
/* 2026-07-19 — tentative de fondu de transparence sur les bords (mask-image
basé sur le polygone du clip-path, flouté) essayée sur plusieurs passes,
jamais concluante (5-6 demandes de correction sans résultat visible en
pratique) : ANNULÉE à la demande explicite de l'utilisateur. Reste
uniquement le clip-path (bord dentelé net) + le vieillissement de teinte
(filter) ci-dessous — pas de mask-image, pas de --edge-mask. */
[data-theme="ancien"] .parchment-picture img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
filter: saturate(0.88) sepia(0.08) contrast(0.96) brightness(1.01);
}
/* eda-showcase-img garde son ratio naturel d'origine (pas de recadrage,
height:auto) : le wrapper ne force ni ratio ni object-fit ici, seuls le
vieillissement/l'érosion des bords s'appliquent. Le masque SVG (polygone +
flou, en % dans les 2 dimensions) reste cohérent quel que soit l'aspect-
ratio de la boîte — plus besoin de variante dédiée ici (contrairement à
l'ancien radial, invisible sur les captures EDA quasi carrées). */
[data-theme="ancien"] .parchment-picture--auto img {
width: 100%;
height: auto;
object-fit: initial;
}
/* .gallery-card--contain (3 vignettes pixel-art EGA/CGA/Apple II) : l'image
n'est pas dans un wrapper --absolute (cf. note plus haut), donc elle hérite
du object-fit:cover/width/height:100% de la règle générique ci-dessus —
il faut restaurer explicitement son propre comportement (contain, hauteur
naturelle, fond sombre pour le letterboxing). Spécificité 3 classes bat
la règle générique (attribut+classe+élément) sans !important. */
[data-theme="ancien"] .gallery-card--contain .gallery-img {
width: 100%;
height: auto;
object-fit: contain;
background: #05070c;
}
/* Grain fin + micro-rayures, sur toute l'image (pas de masque de bord —
tentative de concentration en frange annulée avec le reste du mask-image,
cf. commentaire ci-dessus). */
[data-theme="ancien"] .parchment-picture::after {
content: "";
position: absolute;
inset: 0;
pointer-events: none;
mix-blend-mode: multiply;
opacity: 0.4;
background:
repeating-radial-gradient(circle at 30% 20%, rgba(60,40,20,0.5) 0 0.6px, transparent 0.6px 3.2px),
repeating-linear-gradient(11deg, rgba(60,40,20,0.35) 0 0.5px, transparent 0.5px 7px),
repeating-linear-gradient(101deg, rgba(60,40,20,0.3) 0 0.5px, transparent 0.5px 9px);
}
/* 2026-08-01 — demande explicite : l'UI des tooltips hover (#lutHelpTooltip,
cf. javascript/helpTooltip.js) est partagée game-wide (stats, EDA, boutons,
score/efficacité arcade...) et restait figée dans la palette "bleu sidéral"
(fond bleu marine translucide + bordure bleu clair + flou verre) même en
thème médiéval, faute d'override. Le CSS de base est injecté en JS dans
au premier ensureHelpTooltip() — potentiellement APRÈS ce fichier —
mais [data-theme="ancien"] #lutHelpTooltip (spécificité attribut+id) bat
#lutHelpTooltip (id seul) quel que soit l'ordre d'injection, donc cet
override s'applique sans !important (même logique déjà validée pour les
fixes debugLightPanel de ce chantier). Palette "cachet de cire" reprise
telle quelle (même brun/crème que .fps-hud-close/.debug-light-close
ci-dessus) plutôt que le parchemin 9-slice des grands panneaux fixes
(#scorePanel, .help-panel...) — une bulle flottante qui suit la souris et
change de taille selon le texte ne se prête pas à un 9-slice. */
[data-theme="ancien"] #lutHelpTooltip {
background: #4a3623;
border: 1px solid #6b4e10;
box-shadow: 0 6px 20px rgba(20, 12, 4, 0.55);
backdrop-filter: none;
color: #f0e6d0;
font-family: Georgia, "Times New Roman", serif;
/* 2026-08-03 — demande explicite : héritait du text-shadow clair posé sur
body pour les textes Enchanted-Land de la prez — sur le fond sombre de
cette bulle (#4a3623), ce halo clair rendait le texte illisible. Jamais
en Enchanted-Land de toute façon (aide contextuelle, hors périmètre). */
text-shadow: none;
}
/* 2026-08-01 — bannière footer.png : collée en bas de l'écran, uniquement ingame
en thème médiéval. Le menu pre-game (.mode-screen, z-index:9999, fond opaque,
cf. css/multiplayerUi.css) la recouvre déjà naturellement, sans logique JS
supplémentaire. La prez (index.php) n'a pas cet élément, donc jamais concernée.
z-index bas + pointer-events:none pour ne jamais gêner le HUD (FPS/EDA etc.,
z-index >= 3000) ni les clics.
2026-08-01 — erratum (demande explicite) : la 1ère version étirait un
en width:100vw/height:auto — sur une très grande résolution (5120px de large),
le ratio d'origine (1885x119) donnait une bande ~323px de haut, disproportionnée.
Remplacé par un
à fond RÉPÉTÉ horizontalement : images/footer.png a été
redimensionné sur disque à 792x50px (motif déjà nativement seamless, resize
uniforme donc toujours seamless) et s'affiche en repeat-x.
2026-08-01 — 2e erratum (demande explicite : "le motif qui se répète est trop
gros dans le bandeau") : à sa taille native (792x50, background-size:auto), un
seul motif (liane/pierre) occupait ~800px de large pour seulement 50px de haut
→ rendu "zoomé"/disproportionné à l'affichage même si aucune règle CSS ne le
grossit littéralement. Fix : background-size réduit (28px, puis 38px après
retour "trop petit") — motif plus fin, répété plus souvent.
2026-08-01 — 3e round (demande explicite) : nouveau fichier source
images/footer2.png (1885x119, RGBA natif, transparence non retouchée cette
fois — vérifié via histogramme alpha avant usage) remplace footer.png
(792x50, recadré à la volée précédemment). Demande explicite : réduire encore
d'au moins 50% par rapport au dernier réglage (38px) → 19px de haut. Largeur
recalculée automatiquement (background-size: auto 19px), motif toujours
seamless (fichier source inchangé, seul le CSS scale). */
/* 2026-08-08 — ERRATUM (2e demande, "toujours pas visible") : la surcharge
brun foncé posée ci-dessous au 1er round partait d'une hypothèse fausse
("parchemin clair du cadre médiéval") — vérifié aux captures d'écran, le
COIN bas-droit précis où vit la pastille (position:fixed right/bottom) est
en réalité la partie SOMBRE du cadre (pierre + lierre foncé, pas le
parchemin), donc du texte brun à 50% d'opacité y devenait invisible —
confirmé en testant une couleur criarde au même endroit (parfaitement
visible). Retrait de la surcharge : la pastille hérite désormais du blanc
translucide + text-shadow sombre de css/base.css, qui fonctionne aussi
bien sur ce coin sombre médiéval que sur le fond spatial du thème Bleu. */
/* 2026-08-08 — demande explicite, thème médiéval UNIQUEMENT : la pastille
version+date (#gameVersionBadge, texte nu par-dessus le cadre depuis
l'erratum ci-dessus) passe dans un petit conteneur à coins arrondis, fond
sombre légèrement translucide — cohérent avec le reste des panneaux HUD
médiévaux (parchemin/pierre foncé), sans revenir sur la couleur du texte
qui reste blanc translucide (le fond sombre propre garantit maintenant le
contraste, plus besoin de compter sur celui du cadre en dessous). Non
demandé pour le thème Bleu — pas de règle équivalente hors [data-theme=
"ancien"], la pastille y reste un texte nu comme avant. */
[data-theme="ancien"] #gameVersionBadge {
/* 2026-08-08 — demande explicite : opacité réduite de 20% (0.55 → 0.44)
pour rester subtile. */
background: rgba(20, 14, 8, 0.44);
border-radius: 8px;
padding: 3px 9px;
}
[data-theme="ancien"] #footerBanner {
display: block;
position: fixed;
bottom: 0;
left: 0;
width: 100vw;
height: 85px;
background-image: url("../../images/cadre.png");
background-repeat: repeat-x;
background-position: bottom left;
/* 2026-08-01 — fichier renommé footer2.png → cadre.png (demande explicite),
url() mise à jour ci-dessous en conséquence (v0.9.3.37). Aucun autre
changement, image identique.
2026-08-01 — demande explicite : +180% par rapport à 19px → 19 × 2.8 ≈ 53px.
height du conteneur remontée à 53px en même temps (au lieu de rester à 50px)
pour ne pas rogner le haut du motif maintenant plus grand que le conteneur.
2026-08-01 — BUG CORRIGÉ (demande explicite : "un pixel vide se glisse entre
les 2 répétitions, alors que le fichier est seamless") : `background-size:
auto 53px` laisse le navigateur calculer la largeur du motif lui-même
(1885 × 53/119 = 839.34px, une valeur NON ENTIÈRE). Chaque répétition du
repeat-x est alors positionnée avec un arrondi indépendant au pixel près,
et ces arrondis s'accumulent/divergent d'une répétition à l'autre → un
interstice d'1px apparaît par endroits, alors que le fichier lui-même est
parfaitement seamless. Fix : largeur ET hauteur fixées explicitement en
pixels ENTIERS (au lieu de `auto `), pour que CHAQUE répétition
fasse exactement la même taille en pixels, sans dérive d'arrondi. +40% par
rapport à 53px → 53 × 1.4 ≈ 74px de haut ; largeur recalculée à l'identique
du ratio d'origine (1885:119) et arrondie à l'entier le plus proche : 1172px.
2026-08-01 — 5e round (demande explicite) : +15% par rapport à 74px →
74 × 1.15 ≈ 85px de haut ; largeur recalculée au même ratio (1885:119) et
arrondie à l'entier : 1346px. Toujours des pixels entiers pour éviter toute
dérive d'arrondi sur le repeat-x.
2026-08-01 — BUG CORRIGÉ (demande explicite : "l'image de BG est tronquée
en hauteur sur le bord inférieur, contrairement aux 3 autres côtés") : la
propriété `height` du conteneur était restée à 74px (valeur du round
précédent) alors que `background-size` était déjà monté à 85px lors du
5e round ci-dessus — oubli lors de cette dernière modif. Avec
`background-position: bottom left`, un conteneur plus petit que le
motif (74px < 85px) rogne le HAUT du motif (l'ancrage bas restant fixe).
Fix : `height` remonté à 85px pour matcher le `background-size`,
exactement comme #headerBanner/#leftBanner/#rightBanner. */
background-size: 1346px 85px;
/* 2026-08-01 — demande explicite : le cadre (4 côtés) passe AU-DESSUS de
TOUT le reste de l'UI (HUD, panneaux, modales — le plus haut z-index
du projet était jusqu'ici 20000, cf. css/snapshots.css). 99999 garantit
de rester gagnant dans tous les cas. pointer-events:none inchangé : le
cadre reste purement décoratif, aucun clic n'est intercepté même en
z-index maximal. */
z-index: 99999;
pointer-events: none;
user-select: none;
/* 2026-08-01 — demande explicite : généralisation de l'ombre validée sur
la prez (#prezFooterBanner, cf. plus bas) au jeu (pre-game + ingame).
Pas de `transform` sur cet élément (background-position:bottom left
suffit, pas de retournement) — le filter s'applique donc directement
sans le piège filter+transform rencontré sur #headerBanner ci-dessous.
Direction vers le HAUT (vers le contenu, cette bande étant en bas).
2026-08-01 — demande explicite : ombre plus diffuse sur les 4 côtés du
cadre (jeu + prez, 8 règles au total) — flou +20% (3px→3.6px) et
intensité/opacité +20% (0.45→0.54), offset (distance) inchangé.
2026-08-02 — demande explicite : flou +10% (3.6px→3.96px) et
opacité −10% (0.54→0.486) sur ces mêmes 8 règles (4 côtés × jeu+prez),
offset toujours inchangé.
2026-08-02 — demande explicite (précision : "prez, menus pre-game et
ingame, bref partout en thème médiéval") : flou +10% supplémentaire
(3.96px→4.356px) et distance (offset) +20% (2px→2.4px) sur ces mêmes 8
règles, opacité inchangée. #headerBanner/#footerBanner/#leftBanner/
#rightBanner (game.php) sont des éléments fixes partagés entre l'écran
pre-game et le jeu en cours — aucune règle séparée n'existe pour le
pre-game, ces 8 règles couvrent donc déjà bien les 3 contextes cités.
2026-08-02 — demande explicite : "distance de flou" (rayon de flou du
drop-shadow, 3e valeur) +30% supplémentaire (4.356px→5.663px) sur ces
mêmes 8 règles, offset et opacité inchangés cette fois. */
filter: drop-shadow(0 -2.4px 5.663px rgba(0, 0, 0, 0.486));
}
/* 2026-08-01 — demande explicite : le footer devient un cadre ("frame")
complet — la même bannière dupliquée en haut de l'écran. #headerBanner
réutilise exactement footer2.png, avec les mêmes dimensions/zoom/repeat
que #footerBanner (background-size et background-repeat identiques),
mais retournée à 180° (transform:rotate(180deg)) et collée en haut
(top:0 au lieu de bottom:0). Comme la div est tournée à 180°, son
background-position doit aussi être inversé ("top left" au lieu de
"bottom left") pour que le motif s'aligne visuellement de la même façon
une fois la rotation appliquée. Même logique medieval-only / ingame-only
que #footerBanner (masquée par défaut, réaffichée uniquement par
[data-theme="ancien"]). */
/* 2026-08-01 — demande explicite : généralisation de l'ombre validée sur la
prez (#prezHeaderBanner) au jeu. Piège filter+transform déjà rencontré et
documenté en détail sur #prezHeaderBanner (cf. plus bas dans ce fichier) :
combiner `filter` et `transform: rotate(180deg)` sur le MÊME élément
rend l'ombre invisible ou mal positionnée (le navigateur calcule la zone
de rendu du filtre avant la rotation, sur un layer dont le centre ne
correspond plus au centre visuel une fois étendu par le filtre).
Restructuré à l'identique : rotation déplacée sur un ::before dédié,
`filter` sur le conteneur parent NON transformé — offset standard (Y
positif = vers le bas à l'écran, vers le contenu). */
[data-theme="ancien"] #headerBanner {
display: block;
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 85px;
z-index: 99999;
pointer-events: none;
user-select: none;
filter: drop-shadow(0 2.4px 5.663px rgba(0, 0, 0, 0.486));
}
[data-theme="ancien"] #headerBanner::before {
content: "";
position: absolute;
inset: 0;
background-image: url("../../images/cadre.png");
background-repeat: repeat-x;
background-position: top left;
background-size: 1346px 85px;
transform: rotate(180deg);
}
/* 2026-08-01 — demande explicite : côtés gauche/droit du cadre, à base de
la même image footer2.png, tournée à 90°/-90°, "passant sous" (donc
z-index légèrement inférieur) les parties header/footer au niveau des 4
coins. Suite à la demande explicite de faire passer le cadre entier
au-dessus de tout le reste de l'UI, le couple header/footer est monté à
99999 (cf. plus haut) ; left/right suivent à 99998 — un cran en dessous —
pour conserver EXACTEMENT le même agencement relatif des 4 coins qu'avant
(header/footer par-dessus), tout en dépassant largement le plus haut
z-index utilisé ailleurs dans le projet (20000, css/snapshots.css).
#leftBanner/#rightBanner sont des conteneurs verticaux
(width:85px, height:100vh) avec overflow:hidden ; le motif (bande
horizontale identique à header/footer, même background-size 1346x85)
est porté par un pseudo-élément ::before centré puis tourné à 90°/-90°
autour de son propre centre — comme le pseudo-élément fait 100vh de
long (= la hauteur du conteneur) et 85px d'épais (= la largeur du
conteneur), la rotation de 90° l'aligne exactement sur le conteneur
sans décalage, quelle que soit la hauteur d'écran. */
[data-theme="ancien"] #leftBanner,
[data-theme="ancien"] #rightBanner {
display: block;
position: fixed;
top: 0;
bottom: 0;
width: 85px;
height: 100vh;
z-index: 99998;
pointer-events: none;
user-select: none;
/* 2026-08-01 — demande explicite : généralisation de l'ombre validée sur
la prez (#prezLeftBanner/#prezRightBanner). `overflow: hidden` retiré :
le ::before (100vh × 85px avant rotation) recouvre après rotation
EXACTEMENT les mêmes dimensions que ce conteneur (85px × 100vh),
l'overflow:hidden n'était donc là que par précaution, jamais
nécessaire au motif — il aurait sinon rogné l'ombre du filter. Comme
seul le ::before porte `transform: rotate()`, le filter (sur ce
conteneur non transformé) suit le sens standard, direction horizontale
vers le contenu. */
}
[data-theme="ancien"] #leftBanner {
left: 0;
filter: drop-shadow(2.4px 0 5.663px rgba(0, 0, 0, 0.486));
}
[data-theme="ancien"] #rightBanner {
right: 0;
filter: drop-shadow(-2.4px 0 5.663px rgba(0, 0, 0, 0.486));
}
[data-theme="ancien"] #leftBanner::before,
[data-theme="ancien"] #rightBanner::before {
content: "";
position: absolute;
top: 50%;
left: 50%;
width: 100vh;
height: 85px;
background-image: url("../../images/cadre.png");
background-repeat: repeat-x;
background-size: 1346px 85px;
}
[data-theme="ancien"] #leftBanner::before {
transform: translate(-50%, -50%) rotate(90deg);
}
[data-theme="ancien"] #rightBanner::before {
transform: translate(-50%, -50%) rotate(-90deg);
}
/* 2026-08-01 — demande explicite : "le même cadre sur la prez en thème
médiéval : tu le poses par dessus tout le reste, simplement". Reprise
à l'identique du cadre ingame ci-dessus (même image cadre.png, mêmes
dimensions/background-size, même z-index 99999/99998), sur 4 nouveaux
ids dédiés (#prezFooterBanner/#prezHeaderBanner/#prezLeftBanner/
#prezRightBanner, cf. index.php) pour ne jamais entrer en conflit avec
les #footerBanner/#headerBanner/#leftBanner/#rightBanner du jeu — ce
fichier medieval.css est chargé À LA FOIS par game.php ET index.php.
Masqués par défaut dans css/presentation.css (même logique que
base.css côté jeu), réaffichés ici uniquement en [data-theme="ancien"].
Point d'attention signalé par l'utilisateur : la prez a un fixe
(top:0, cf. règle [data-theme="ancien"] nav plus haut dans ce fichier)
qui se retrouverait sous la bande haute du cadre — corrigé en poussant
ce de 85px vers le bas (cf. règle [data-theme="ancien"] nav
modifiée en conséquence), pour qu'il reste visible ET cliquable. */
[data-theme="ancien"] #prezFooterBanner {
display: block;
position: fixed;
bottom: 0;
left: 0;
width: 100vw;
height: 85px;
background-image: url("../../images/cadre.png");
background-repeat: repeat-x;
background-position: bottom left;
background-size: 1346px 85px;
z-index: 99999;
pointer-events: none;
user-select: none;
/* 2026-08-01 — demande explicite : même ombre que #prezHeaderBanner,
inversée 180° (direction du HAUT au lieu du bas, puisque cette bande
est en bas de l'écran — l'ombre doit toujours pointer VERS le
contenu). Contrairement à #prezHeaderBanner, cet élément n'a PAS de
`transform: rotate()` (background-position:bottom left suffit, pas de
retournement) — le filter peut donc s'appliquer directement ici sans
le piège filter+transform rencontré plus haut (cf. commentaire
détaillé sur #prezHeaderBanner). Mêmes valeurs de flou/opacité
resserrées (2px, 3px, 0.45), offsetY négatif = vers le haut. */
filter: drop-shadow(0 -2.4px 5.663px rgba(0, 0, 0, 0.486));
}
/* 2026-08-01 — TEST demande explicite : effet d'ombre sur la bande TOP du
cadre, prez uniquement pour l'instant (à généraliser si validé). Un
box-shadow classique projetterait une ombre sur la boîte rectangulaire de
la div, pas sur la silhouette réelle du feuillage — filter: drop-shadow()
suit au contraire le canal alpha de l'image (même technique déjà en place
sur le bord-image parchemin du , cf. plus haut dans ce fichier).
ERRATUM (même jour, 2 tentatives précédentes invisibles à l'écran, avec
offsetY positif puis négatif) : la cause n'était PAS le signe de
l'offset, mais le fait de combiner `filter` ET `transform: rotate(180deg)`
sur le MÊME élément. Dans ce cas, le navigateur calcule la zone de rendu
du filtre (bounding box + marge nécessaire à l'ombre/flou) AVANT
d'appliquer la rotation, sur un layer dont le centre de rotation ne
correspond plus au centre visuel une fois le layer étendu par le filtre
— le résultat observé était soit une ombre partiellement hors-écran (au-
dessus de top:0, tronquée), soit invisible selon le signe. Restructuré :
la rotation est déplacée sur un ::before dédié (background-image +
transform), le `filter` reste sur le conteneur parent, qui lui N'EST PAS
transformé — le sens de l'offset redevient alors standard (Y positif =
ombre vers le bas à l'écran), exactement comme sur le . */
[data-theme="ancien"] #prezHeaderBanner {
display: block;
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 85px;
z-index: 99999;
pointer-events: none;
user-select: none;
/* 2026-08-01 — retour utilisateur : "encore trop diffuse, trop distante
en px et trop floue" — resserré : offset 6px→2px, flou 10px→3px
(opacité inchangée à 0.45). Ombre plus fine et plus collée au motif. */
filter: drop-shadow(0 2.4px 5.663px rgba(0, 0, 0, 0.486));
}
[data-theme="ancien"] #prezHeaderBanner::before {
content: "";
position: absolute;
inset: 0;
background-image: url("../../images/cadre.png");
background-repeat: repeat-x;
background-position: top left;
background-size: 1346px 85px;
transform: rotate(180deg);
}
[data-theme="ancien"] #prezLeftBanner,
[data-theme="ancien"] #prezRightBanner {
display: block;
position: fixed;
top: 0;
bottom: 0;
width: 85px;
height: 100vh;
z-index: 99998;
pointer-events: none;
user-select: none;
/* 2026-08-01 — demande explicite : même ombre que #prezHeaderBanner/
#prezFooterBanner, adaptée aux 2 bandes verticales — direction
horizontale, vers le CONTENU (donc vers la droite pour la bande
gauche, vers la gauche pour la bande droite). `overflow: hidden`
retiré (cf. ci-dessous) pour ne pas rogner cette ombre : la bande
tournée du ::before (100vh × 85px avant rotation, translate(-50%,-50%)
rotate(±90deg)) recouvre après rotation EXACTEMENT les mêmes
dimensions que ce conteneur (85px × 100vh) — l'overflow:hidden n'était
donc là que par précaution, jamais nécessaire pour le motif lui-même,
et peut être retiré sans risque pour laisser respirer le filter.
Comme pour le header (cf. commentaire détaillé sur #prezHeaderBanner),
le `filter` reste ici sur le conteneur NON tourné — seul le ::before
porte `transform: rotate()` — donc le sens de l'offset est standard
(X positif = ombre vers la droite à l'écran), aucun piège de rotation
à compenser. */
}
[data-theme="ancien"] #prezLeftBanner {
left: 0;
filter: drop-shadow(2.4px 0 5.663px rgba(0, 0, 0, 0.486));
}
[data-theme="ancien"] #prezRightBanner {
right: 0;
filter: drop-shadow(-2.4px 0 5.663px rgba(0, 0, 0, 0.486));
}
[data-theme="ancien"] #prezLeftBanner::before,
[data-theme="ancien"] #prezRightBanner::before {
content: "";
position: absolute;
top: 50%;
left: 50%;
width: 100vh;
height: 85px;
background-image: url("../../images/cadre.png");
background-repeat: repeat-x;
background-size: 1346px 85px;
}
[data-theme="ancien"] #prezLeftBanner::before {
transform: translate(-50%, -50%) rotate(90deg);
}
[data-theme="ancien"] #prezRightBanner::before {
transform: translate(-50%, -50%) rotate(-90deg);
}
/* 2026-08-09 — #prezVersionBadge (bas-gauche, version + date de release),
demande explicite : visible SEULEMENT en thème médiéval sur la prez, par-
dessus le cadre décoratif (#prezFooterBanner/#prezLeftBanner, z-index
99999/99998 ci-dessus) — reprend à l'identique #gameVersionBadge côté jeu
(cf. css/base.css + [data-theme="ancien"] #gameVersionBadge plus bas dans
ce même fichier) : même position, même z-index 100000, même fond sombre
translucide arrondi. Masqué par défaut sur le thème Bleu via
css/presentation.css (#prezVersionBadge { display: none; }). */
[data-theme="ancien"] #prezVersionBadge {
display: block;
position: fixed;
left: 6px;
bottom: 4px;
z-index: 100000;
font-family: monospace;
font-size: 11.5px;
letter-spacing: 0.03em;
color: rgba(255, 255, 255, 0.75);
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.9), 0 0 4px rgba(0, 0, 0, 0.7);
pointer-events: none;
user-select: none;
background: rgba(20, 14, 8, 0.44);
border-radius: 8px;
padding: 3px 9px;
}
[data-theme="ancien"] #prezVersionDate {
opacity: 0.75;
font-style: italic;
}
/* 2026-08-03 — demande explicite : typo "Enchanted-Land" sur .title (ingame,
partagée par .tileDeckBox : "TUILE ACTIVE/SUIVANTE/RESTANTES/POSÉES" et
.missionsBox : "MISSIONS EN COURS") — 12px, hérite déjà de Georgia via ses
2 conteneurs (deck.css/missions.css), remplacé ici seulement sur .title
pour ne toucher ni les valeurs numériques voisines (#deckRemaining,
#tilesPlaced, mission-item...) ni les boutons. Jamais en dessous de 12px
(c'est exactement le plancher) — le size-adjust:180% du @font-face,
déjà global plus haut dans ce fichier, s'applique automatiquement ici
aussi (mêmes dimensions que la prez, comme demandé). */
[data-theme="ancien"] .title {
font-family: 'EnchantedLand', Georgia, "Times New Roman", serif;
/* 2026-08-03 — demande explicite : plus de MAJUSCULES sur les textes
Enchanted-Land (texte source ET text-transform:uppercase, base deck.css,
tout en capitales) — seule la 1ère lettre reste capitalisée. lowercase
ici + ::first-letter juste en dessous (::first-letter accepte
text-transform, contrairement à ::first-line pour cette propriété). */
text-transform: lowercase;
/* 2026-08-08 — demande explicite : 14px → 15px (letter-spacing resserré
tenté puis annulé sur demande explicite, "moche et illisible" — retour
au "aucun letter-spacing" du round du 2026-08-03). */
letter-spacing: normal;
font-size: 15px;
}
[data-theme="ancien"] .title::first-letter {
text-transform: uppercase;
}