/* ==== shapes.css ==== */
/* Généré par tools/gen_shapes.py — ne pas éditer à la main.
   Les six silhouettes (--s-*) ont la même structure : 36 courbes cubiques en pourcentages d'une boîte
   carrée. C'est ce qui permet `transition: clip-path` de l'une à l'autre. Les bords de section (--e-*)
   et le chevron (--b-*) ne se transforment pas : ils mêlent librement px et %. */

:root {
  --s-hero: shape(from 24% 0%, curve to 30.5% 0% with 26.17% 0% / 28.33% 0%, curve to 37% 0% with 32.67% 0% / 34.83% 0%, curve to 50% 0% with 41.33% 0% / 45.67% 0%, curve to 63% 0% with 54.33% 0% / 58.67% 0%, curve to 76% 0% with 67.33% 0% / 71.67% 0%, curve to 85.34% 1.89% with 79.31% 0% / 82.47% 0.67%, curve to 92.97% 7.03% with 88.21% 3.1% / 90.8% 4.86%, curve to 98.11% 14.66% with 95.14% 9.2% / 96.9% 11.79%, curve to 100% 24% with 99.33% 17.53% / 100% 20.69%, curve to 100% 30.5% with 100% 26.17% / 100% 28.33%, curve to 100% 37% with 100% 32.67% / 100% 34.83%, curve to 100% 50% with 100% 41.33% / 100% 45.67%, curve to 100% 63% with 100% 54.33% / 100% 58.67%, curve to 100% 76% with 100% 67.33% / 100% 71.67%, curve to 98.11% 85.34% with 100% 79.31% / 99.33% 82.47%, curve to 92.97% 92.97% with 96.9% 88.21% / 95.14% 90.8%, curve to 85.34% 98.11% with 90.8% 95.14% / 88.21% 96.9%, curve to 76% 100% with 82.47% 99.33% / 79.31% 100%, curve to 63% 100% with 71.67% 100% / 67.33% 100%, curve to 56.5% 100% with 60.83% 100% / 58.67% 100%, curve to 50% 100% with 54.33% 100% / 52.17% 100%, curve to 37% 100% with 45.67% 100% / 41.33% 100%, curve to 24% 100% with 32.67% 100% / 28.33% 100%, curve to 14.66% 98.11% with 20.69% 100% / 17.53% 99.33%, curve to 7.03% 92.97% with 11.79% 96.9% / 9.2% 95.14%, curve to 1.89% 85.34% with 4.86% 90.8% / 3.1% 88.21%, curve to 0% 76% with 0.67% 82.47% / 0% 79.31%, curve to 0% 63% with 0% 71.67% / 0% 67.33%, curve to 0% 56.5% with 0% 60.83% / 0% 58.67%, curve to 0% 50% with 0% 54.33% / 0% 52.17%, curve to 0% 37% with 0% 45.67% / 0% 41.33%, curve to 0% 24% with 0% 32.67% / 0% 28.33%, curve to 1.89% 14.66% with 0% 20.69% / 0.67% 17.53%, curve to 7.03% 7.03% with 3.1% 11.79% / 4.86% 9.2%, curve to 14.66% 1.89% with 9.2% 4.86% / 11.79% 3.1%, curve to 24% 0% with 17.53% 0.67% / 20.69% 0%, close);
  --s-gravity: shape(from 6% 0%, curve to 11.26% 4.59% with 6.75% 1.75% / 8.59% 3.28%, curve to 21.44% 7.88% with 13.92% 5.91% / 17.41% 7%, curve to 34.9% 9.84% with 25.47% 8.75% / 30.05% 9.41%, curve to 50% 10.5% with 39.75% 10.28% / 44.88% 10.5%, curve to 65.1% 9.84% with 55.12% 10.5% / 60.25% 10.28%, curve to 78.56% 7.88% with 69.95% 9.41% / 74.53% 8.75%, curve to 88.74% 4.59% with 82.59% 7% / 86.08% 5.91%, curve to 94% 0% with 91.41% 3.28% / 93.25% 1.75%, curve to 100% 6% with 96% 2% / 98% 4%, curve to 95.41% 11.26% with 98.25% 6.75% / 96.72% 8.59%, curve to 92.12% 21.44% with 94.09% 13.92% / 93% 17.41%, curve to 90.16% 34.9% with 91.25% 25.47% / 90.59% 30.05%, curve to 89.5% 50% with 89.72% 39.75% / 89.5% 44.88%, curve to 90.16% 65.1% with 89.5% 55.12% / 89.72% 60.25%, curve to 92.12% 78.56% with 90.59% 69.95% / 91.25% 74.53%, curve to 95.41% 88.74% with 93% 82.59% / 94.09% 86.08%, curve to 100% 94% with 96.72% 91.41% / 98.25% 93.25%, curve to 94% 100% with 98% 96% / 96% 98%, curve to 88.74% 95.41% with 93.25% 98.25% / 91.41% 96.72%, curve to 78.56% 92.12% with 86.08% 94.09% / 82.59% 93%, curve to 65.1% 90.16% with 74.53% 91.25% / 69.95% 90.59%, curve to 50% 89.5% with 60.25% 89.72% / 55.12% 89.5%, curve to 34.9% 90.16% with 44.88% 89.5% / 39.75% 89.72%, curve to 21.44% 92.12% with 30.05% 90.59% / 25.47% 91.25%, curve to 11.26% 95.41% with 17.41% 93% / 13.92% 94.09%, curve to 6% 100% with 8.59% 96.72% / 6.75% 98.25%, curve to 0% 94% with 4% 98% / 2% 96%, curve to 4.59% 88.74% with 1.75% 93.25% / 3.28% 91.41%, curve to 7.88% 78.56% with 5.91% 86.08% / 7% 82.59%, curve to 9.84% 65.1% with 8.75% 74.53% / 9.41% 69.95%, curve to 10.5% 50% with 10.28% 60.25% / 10.5% 55.12%, curve to 9.84% 34.9% with 10.5% 44.88% / 10.28% 39.75%, curve to 7.88% 21.44% with 9.41% 30.05% / 8.75% 25.47%, curve to 4.59% 11.26% with 7% 17.41% / 5.91% 13.92%, curve to 0% 6% with 3.28% 8.59% / 1.75% 6.75%, curve to 6% 0% with 2% 4% / 4% 2%, close);
  --s-grid: shape(from 0% 0%, curve to 11.5% 0% with 3.83% 0% / 7.67% 0%, curve to 23% 0% with 15.33% 0% / 19.17% 0%, curve to 34.5% 0% with 26.83% 0% / 30.67% 0%, curve to 46% 0% with 38.33% 0% / 42.17% 0%, curve to 57.5% 0% with 49.83% 0% / 53.67% 0%, curve to 69% 0% with 61.33% 0% / 65.17% 0%, curve to 80.5% 0% with 72.83% 0% / 76.67% 0%, curve to 92% 0% with 84.33% 0% / 88.17% 0%, curve to 100% 8% with 94.67% 2.67% / 97.33% 5.33%, curve to 100% 21% with 100% 12.33% / 100% 16.67%, curve to 100% 34% with 100% 25.33% / 100% 29.67%, curve to 94% 34% with 98% 34% / 96% 34%, curve to 94% 46% with 94% 38% / 94% 42%, curve to 100% 46% with 96% 46% / 98% 46%, curve to 100% 64% with 100% 52% / 100% 58%, curve to 100% 82% with 100% 70% / 100% 76%, curve to 91% 91% with 97% 85% / 94% 88%, curve to 82% 100% with 88% 94% / 85% 97%, curve to 74% 100% with 79.33% 100% / 76.67% 100%, curve to 66% 100% with 71.33% 100% / 68.67% 100%, curve to 58% 100% with 63.33% 100% / 60.67% 100%, curve to 50% 100% with 55.33% 100% / 52.67% 100%, curve to 42% 100% with 47.33% 100% / 44.67% 100%, curve to 34% 100% with 39.33% 100% / 36.67% 100%, curve to 18% 100% with 28.67% 100% / 23.33% 100%, curve to 9% 91% with 15% 97% / 12% 94%, curve to 0% 82% with 6% 88% / 3% 85%, curve to 0% 71.75% with 0% 78.58% / 0% 75.17%, curve to 0% 61.5% with 0% 68.33% / 0% 64.92%, curve to 0% 56.38% with 0% 59.79% / 0% 58.08%, curve to 0% 51.25% with 0% 54.67% / 0% 52.96%, curve to 0% 41% with 0% 47.83% / 0% 44.42%, curve to 0% 30.75% with 0% 37.58% / 0% 34.17%, curve to 0% 20.5% with 0% 27.33% / 0% 23.92%, curve to 0% 10.25% with 0% 17.08% / 0% 13.67%, curve to 0% 0% with 0% 6.83% / 0% 3.42%, close);
  --s-dungeon: shape(from 0% 0%, curve to 24% 0% with 8% 0% / 16% 0%, curve to 24% 12% with 24% 4% / 24% 8%, curve to 38% 12% with 28.67% 12% / 33.33% 12%, curve to 38% 0% with 38% 8% / 38% 4%, curve to 62% 0% with 46% 0% / 54% 0%, curve to 62% 12% with 62% 4% / 62% 8%, curve to 76% 12% with 66.67% 12% / 71.33% 12%, curve to 76% 0% with 76% 8% / 76% 4%, curve to 100% 0% with 84% 0% / 92% 0%, curve to 100% 12.5% with 100% 4.17% / 100% 8.33%, curve to 100% 25% with 100% 16.67% / 100% 20.83%, curve to 100% 37.5% with 100% 29.17% / 100% 33.33%, curve to 100% 50% with 100% 41.67% / 100% 45.83%, curve to 100% 62.5% with 100% 54.17% / 100% 58.33%, curve to 100% 68.75% with 100% 64.58% / 100% 66.67%, curve to 100% 75% with 100% 70.83% / 100% 72.92%, curve to 100% 87.5% with 100% 79.17% / 100% 83.33%, curve to 100% 100% with 100% 91.67% / 100% 95.83%, curve to 87.5% 100% with 95.83% 100% / 91.67% 100%, curve to 75% 100% with 83.33% 100% / 79.17% 100%, curve to 62.5% 100% with 70.83% 100% / 66.67% 100%, curve to 50% 100% with 58.33% 100% / 54.17% 100%, curve to 37.5% 100% with 45.83% 100% / 41.67% 100%, curve to 25% 100% with 33.33% 100% / 29.17% 100%, curve to 18.75% 100% with 22.92% 100% / 20.83% 100%, curve to 12.5% 100% with 16.67% 100% / 14.58% 100%, curve to 0% 100% with 8.33% 100% / 4.17% 100%, curve to 0% 87.5% with 0% 95.83% / 0% 91.67%, curve to 0% 75% with 0% 83.33% / 0% 79.17%, curve to 0% 62.5% with 0% 70.83% / 0% 66.67%, curve to 0% 50% with 0% 58.33% / 0% 54.17%, curve to 0% 37.5% with 0% 45.83% / 0% 41.67%, curve to 0% 25% with 0% 33.33% / 0% 29.17%, curve to 0% 18.75% with 0% 22.92% / 0% 20.83%, curve to 0% 12.5% with 0% 16.67% / 0% 14.58%, curve to 0% 0% with 0% 8.33% / 0% 4.17%, close);
  --s-zen: shape(from 44% 0%, curve to 60% 0% with 49.33% 0% / 54.67% 0%, curve to 68.06% 0.93% with 62.76% 0% / 65.46% 0.32%, curve to 75.57% 3.61% with 70.67% 1.55% / 73.18% 2.45%, curve to 82.36% 7.86% with 77.96% 4.78% / 80.24% 6.2%, curve to 88.28% 13.47% with 84.49% 9.51% / 86.47% 11.39%, curve to 93.17% 20.28% with 90.09% 15.55% / 91.73% 17.83%, curve to 96.86% 28.09% with 94.61% 22.73% / 95.84% 25.34%, curve to 99.19% 36.73% with 97.87% 30.85% / 98.65% 33.73%, curve to 100% 46% with 99.72% 39.72% / 100% 42.82%, curve to 100% 54% with 100% 48.67% / 100% 51.33%, curve to 100% 62% with 100% 56.67% / 100% 59.33%, curve to 96.39% 76.79% with 100% 67.25% / 98.71% 72.25%, curve to 92.14% 83.25% with 95.22% 79.06% / 93.8% 81.22%, curve to 86.53% 88.87% with 90.49% 85.27% / 88.61% 87.15%, curve to 79.72% 93.51% with 84.45% 90.59% / 82.17% 92.14%, curve to 71.91% 97.01% with 77.27% 94.88% / 74.66% 96.05%, curve to 63.27% 99.23% with 69.15% 97.98% / 66.27% 98.72%, curve to 54% 100% with 60.28% 99.73% / 57.18% 100%, curve to 44% 100% with 50.67% 100% / 47.33% 100%, curve to 34% 100% with 40.67% 100% / 37.33% 100%, curve to 20.77% 96.86% with 29.31% 100% / 24.83% 98.88%, curve to 14.99% 93.17% with 18.73% 95.84% / 16.8% 94.61%, curve to 9.96% 88.28% with 13.18% 91.73% / 11.5% 90.09%, curve to 5.81% 82.36% with 8.42% 86.47% / 7.03% 84.49%, curve to 2.67% 75.57% with 4.58% 80.24% / 3.53% 77.96%, curve to 0.69% 68.06% with 1.81% 73.18% / 1.14% 70.67%, curve to 0% 60% with 0.24% 65.46% / 0% 62.76%, curve to 0% 48% with 0% 56% / 0% 52%, curve to 0% 36% with 0% 44% / 0% 40%, curve to 3.46% 21.99% with 0% 31.03% / 1.23% 26.29%, curve to 7.51% 15.87% with 4.57% 19.83% / 5.93% 17.79%, curve to 12.89% 10.54% with 9.1% 13.96% / 10.9% 12.17%, curve to 19.4% 6.15% with 14.88% 8.92% / 17.06% 7.44%, curve to 26.87% 2.83% with 21.74% 4.85% / 24.24% 3.74%, curve to 35.13% 0.73% with 29.51% 1.92% / 32.27% 1.21%, curve to 44% 0% with 38% 0.25% / 40.96% 0%, close);
  --s-tour: shape(from 25% 12.5%, curve to 29.68% 10.16% with 26.56% 11.72% / 28.12% 10.94%, curve to 34.37% 7.82% with 31.25% 9.38% / 32.81% 8.6%, curve to 39.05% 5.47% with 35.93% 7.03% / 37.49% 6.25%, curve to 43.74% 3.13% with 40.62% 4.69% / 42.18% 3.91%, curve to 50% 1.83% with 45.47% 2.27% / 47.73% 1.83%, curve to 56.26% 3.13% with 52.27% 1.83% / 54.53% 2.27%, curve to 60.95% 5.47% with 57.82% 3.91% / 59.38% 4.69%, curve to 65.63% 7.82% with 62.51% 6.25% / 64.07% 7.03%, curve to 75% 12.5% with 68.75% 9.38% / 71.88% 10.94%, curve to 84.37% 17.18% with 78.12% 14.06% / 81.25% 15.62%, curve to 93.74% 21.87% with 87.49% 18.75% / 90.62% 20.31%, curve to 100% 32% with 97.2% 23.6% / 100% 28.13%, curve to 100% 41% with 100% 35% / 100% 38%, curve to 100% 50% with 100% 44% / 100% 47%, curve to 100% 68% with 100% 56% / 100% 62%, curve to 93.74% 78.13% with 100% 71.87% / 97.2% 76.4%, curve to 84.37% 82.82% with 90.62% 79.69% / 87.49% 81.25%, curve to 75% 87.5% with 81.25% 84.38% / 78.12% 85.94%, curve to 70.32% 89.84% with 73.44% 88.28% / 71.88% 89.06%, curve to 65.63% 92.18% with 68.75% 90.62% / 67.19% 91.4%, curve to 60.95% 94.53% with 64.07% 92.97% / 62.51% 93.75%, curve to 56.26% 96.87% with 59.38% 95.31% / 57.82% 96.09%, curve to 50% 98.17% with 54.53% 97.73% / 52.27% 98.17%, curve to 43.74% 96.87% with 47.73% 98.17% / 45.47% 97.73%, curve to 34.37% 92.18% with 40.62% 95.31% / 37.49% 93.75%, curve to 29.68% 89.84% with 32.81% 91.4% / 31.25% 90.62%, curve to 25% 87.5% with 28.12% 89.06% / 26.56% 88.28%, curve to 15.63% 82.82% with 21.88% 85.94% / 18.75% 84.38%, curve to 6.26% 78.13% with 12.51% 81.25% / 9.38% 79.69%, curve to 0% 68% with 2.8% 76.4% / 0% 71.87%, curve to 0% 59% with 0% 65% / 0% 62%, curve to 0% 50% with 0% 56% / 0% 53%, curve to 0% 32% with 0% 44% / 0% 38%, curve to 6.26% 21.87% with 0% 28.13% / 2.8% 23.6%, curve to 15.63% 17.18% with 9.38% 20.31% / 12.51% 18.75%, curve to 25% 12.5% with 18.75% 15.62% / 21.88% 14.06%, close);

  --e-vague: shape(from 0% 28px, curve to 16.67% 0px with 8.33% 28px / 8.33% 0px, curve to 33.33% 28px with 25% 0px / 25% 28px, curve to 50% 0px with 41.67% 28px / 41.67% 0px, curve to 66.67% 28px with 58.33% 0px / 58.33% 28px, curve to 83.33% 0px with 75% 28px / 75% 0px, curve to 100% 28px with 91.67% 0px / 91.67% 28px, vline to 100%, hline to 0%, close);
  --e-dents: shape(from 0% 22px, line to 3.57% 0px, line to 7.14% 22px, line to 10.71% 0px, line to 14.29% 22px, line to 17.86% 0px, line to 21.43% 22px, line to 25% 0px, line to 28.57% 22px, line to 32.14% 0px, line to 35.71% 22px, line to 39.29% 0px, line to 42.86% 22px, line to 46.43% 0px, line to 50% 22px, line to 53.57% 0px, line to 57.14% 22px, line to 60.71% 0px, line to 64.29% 22px, line to 67.86% 0px, line to 71.43% 22px, line to 75% 0px, line to 78.57% 22px, line to 82.14% 0px, line to 85.71% 22px, line to 89.29% 0px, line to 92.86% 22px, line to 96.43% 0px, line to 100% 22px, vline to 100%, hline to 0%, close);
  --e-creneaux: shape(from 0% 0px, hline to 5.88%, vline to 20px, hline to 11.76%, vline to 0px, hline to 17.65%, vline to 20px, hline to 23.53%, vline to 0px, hline to 29.41%, vline to 20px, hline to 35.29%, vline to 0px, hline to 41.18%, vline to 20px, hline to 47.06%, vline to 0px, hline to 52.94%, vline to 20px, hline to 58.82%, vline to 0px, hline to 64.71%, vline to 20px, hline to 70.59%, vline to 0px, hline to 76.47%, vline to 20px, hline to 82.35%, vline to 0px, hline to 88.24%, vline to 20px, hline to 94.12%, vline to 0px, hline to 100%, vline to 100%, hline to 0%, close);
  --e-collines: shape(from 0% 32.2px, curve to 16% 6.9px with 8% 32.2px / 8% 6.9px, curve to 34% 25.3px with 25% 6.9px / 25% 25.3px, curve to 52% 0px with 43% 25.3px / 43% 0px, curve to 70% 27.6px with 61% 0px / 61% 27.6px, curve to 86% 11.5px with 78% 27.6px / 78% 11.5px, curve to 100% 34.5px with 93% 11.5px / 93% 34.5px, vline to 100%, hline to 0%, close);
  --e-festons: shape(from 0% 16px, curve to 11.11% 16px with 0% -5.28px / 11.11% -5.28px, curve to 22.22% 16px with 11.11% -5.28px / 22.22% -5.28px, curve to 33.33% 16px with 22.22% -5.28px / 33.33% -5.28px, curve to 44.44% 16px with 33.33% -5.28px / 44.44% -5.28px, curve to 55.56% 16px with 44.44% -5.28px / 55.56% -5.28px, curve to 66.67% 16px with 55.56% -5.28px / 66.67% -5.28px, curve to 77.78% 16px with 66.67% -5.28px / 77.78% -5.28px, curve to 88.89% 16px with 77.78% -5.28px / 88.89% -5.28px, curve to 100% 16px with 88.89% -5.28px / 100% -5.28px, vline to 100%, hline to 0%, close);
  --e-dechire: shape(from 0% 10px, line to 5% 3px, line to 11% 12px, line to 17% 5px, line to 23% 14px, line to 30% 4px, line to 36% 11px, line to 43% 2px, line to 49% 13px, line to 56% 6px, line to 62% 12px, line to 69% 3px, line to 75% 10px, line to 82% 5px, line to 88% 13px, line to 94% 4px, line to 100% 9px, vline to 100%, hline to 0%, close);

  --c-loin: shape(from 0% 76.09%, line to 17.97% 26.09%, line to 30.47% 52.17%, line to 46.09% 0%, line to 62.5% 45.65%, line to 76.56% 15.22%, line to 100% 67.39%, line to 100% 100%, line to 0% 100%, close);
  --c-milieu: shape(from 0% 46%, curve to 22% 14% with 11% 46% / 11% 14%, curve to 46% 38% with 34% 14% / 34% 38%, curve to 70% 6% with 58% 38% / 58% 6%, curve to 100% 34% with 85% 6% / 85% 34%, line to 100% 100%, line to 0% 100%, close);
  --c-proche: shape(from 0% 30%, curve to 30% 8% with 15% 30% / 15% 8%, curve to 62% 34% with 46% 8% / 46% 34%, curve to 100% 12% with 81% 34% / 81% 12%, line to 100% 100%, line to 0% 100%, close);

  --b-chevron: shape(from 0% 0%, hline to calc(100% - 14px), line to 100% 50%, line to calc(100% - 14px) 100%, hline to 0%, close);
  --b-chevron-retour: shape(from 14px 0%, hline to 100%, hline to 100%, vline to 100%, hline to 14px, line to 0% 50%, close);
}

/* ==== mondes.css ==== */
/* Généré par tools/build.py depuis data/games.json — un monde par jeu, un style par « look ». */
[data-monde="gravity-crush"] { --m-fond: #080312; --m-encre: #F6ECFF; --m-a: #FF73F2; --m-b: #73F2FF; --m-sur-a: #0B0A10; --forme: var(--s-gravity); --bord: var(--e-vague); --bord-h: 28px; }
[data-monde="grid-runner"] { --m-fond: #101C33; --m-encre: #E7F1FA; --m-a: #FF859C; --m-b: #69E0F4; --m-sur-a: #0B0A10; --forme: var(--s-grid); --bord: var(--e-dents); --bord-h: 22px; }
body:has(input[name="look"][value="neon"]:checked) { --m-fond: #101C33; --m-encre: #E7F1FA; --m-a: #FF859C; --m-b: #69E0F4; --m-sur-a: #0B0A10; }
body:has(input[name="look"][value="neon"]:checked) .heros__art img[data-look="neon"] { display: block; }
body:has(input[name="look"][value="neon"]:checked) .looks__panneau[data-look="neon"] { display: block; }
.look-puce input[value="neon"] + span i { background: #FF859C; }
body:has(input[name="look"][value="zen"]:checked) { --m-fond: #F5F0E5; --m-encre: #29392F; --m-a: #AA4935; --m-b: #3F6656; --m-sur-a: #FFFFFF; }
body:has(input[name="look"][value="zen"]:checked) .heros__art img[data-look="zen"] { display: block; }
body:has(input[name="look"][value="zen"]:checked) .looks__panneau[data-look="zen"] { display: block; }
.look-puce input[value="zen"] + span i { background: #AA4935; }
body:has(input[name="look"][value="orbital"]:checked) { --m-fond: #102627; --m-encre: #E1EEE6; --m-a: #EDB36F; --m-b: #91DFBD; --m-sur-a: #0B0A10; }
body:has(input[name="look"][value="orbital"]:checked) .heros__art img[data-look="orbital"] { display: block; }
body:has(input[name="look"][value="orbital"]:checked) .looks__panneau[data-look="orbital"] { display: block; }
.look-puce input[value="orbital"] + span i { background: #EDB36F; }
[data-monde="dungeon-cleaner"] { --m-fond: #1A1226; --m-encre: #FFF5E0; --m-a: #FFC93D; --m-b: #5EE6FF; --m-sur-a: #0B0A10; --forme: var(--s-dungeon); --bord: var(--e-creneaux); --bord-h: 20px; }
body:has(input[name="look"][value="cartoon"]:checked) { --m-fond: #1A1226; --m-encre: #FFF5E0; --m-a: #FFC93D; --m-b: #5EE6FF; --m-sur-a: #0B0A10; }
body:has(input[name="look"][value="cartoon"]:checked) .heros__art img[data-look="cartoon"] { display: block; }
body:has(input[name="look"][value="cartoon"]:checked) .looks__panneau[data-look="cartoon"] { display: block; }
.look-puce input[value="cartoon"] + span i { background: #FFC93D; }
body:has(input[name="look"][value="sombre"]:checked) { --m-fond: #1B1F24; --m-encre: #EDE6D3; --m-a: #D4BE86; --m-b: #94B1D4; --m-sur-a: #0B0A10; }
body:has(input[name="look"][value="sombre"]:checked) .heros__art img[data-look="sombre"] { display: block; }
body:has(input[name="look"][value="sombre"]:checked) .looks__panneau[data-look="sombre"] { display: block; }
.look-puce input[value="sombre"] + span i { background: #D4BE86; }
body:has(input[name="look"][value="steampunk"]:checked) { --m-fond: #2A211A; --m-encre: #F7E8D3; --m-a: #F7B970; --m-b: #EBA554; --m-sur-a: #0B0A10; }
body:has(input[name="look"][value="steampunk"]:checked) .heros__art img[data-look="steampunk"] { display: block; }
body:has(input[name="look"][value="steampunk"]:checked) .looks__panneau[data-look="steampunk"] { display: block; }
.look-puce input[value="steampunk"] + span i { background: #F7B970; }
[data-monde="zen-lettres"] { --m-fond: #171C33; --m-encre: #FFF3E4; --m-a: #F6C38F; --m-b: #B9789A; --m-sur-a: #0B0A10; --forme: var(--s-zen); --bord: var(--e-collines); --bord-h: 46px; }
[data-monde="le-grand-tour"] { --m-fond: #F4E9CF; --m-encre: #3A2A1A; --m-a: #9E2B1E; --m-b: #B8892B; --m-sur-a: #FFFFFF; --forme: var(--s-tour); --bord: var(--e-festons); --bord-h: 16px; }
.camembert__roue { --k1: #D1A21E; }
.categories li:nth-child(1) { --kc: #D1A21E; }
.camembert__roue { --k2: #4E8A3E; }
.categories li:nth-child(2) { --kc: #4E8A3E; }
.camembert__roue { --k3: #C2457A; }
.categories li:nth-child(3) { --kc: #C2457A; }
.camembert__roue { --k4: #6E4C9E; }
.categories li:nth-child(4) { --kc: #6E4C9E; }
.camembert__roue { --k5: #2F6FAE; }
.categories li:nth-child(5) { --kc: #2F6FAE; }
.camembert__roue { --k6: #D9722B; }
.categories li:nth-child(6) { --kc: #D9722B; }
.paysages li:nth-child(1) { --pc: #3380B2; }
.paysages li:nth-child(2) { --pc: #8766C2; }
.paysages li:nth-child(3) { --pc: #458F61; }
.paysages li:nth-child(4) { --pc: #CC8038; }
.paysages li:nth-child(5) { --pc: #2978A3; }
.paysages li:nth-child(6) { --pc: #D6668C; }
.paysages li:nth-child(7) { --pc: #339994; }
.paysages li:nth-child(8) { --pc: #66943D; }
.paysages li:nth-child(9) { --pc: #0D949E; }
.paysages li:nth-child(10) { --pc: #CC5C29; }
.paysages li:nth-child(11) { --pc: #B84C2E; }
.paysages li:nth-child(12) { --pc: #386B99; }
.paysages li:nth-child(13) { --pc: #8C426B; }
.paysages li:nth-child(14) { --pc: #C23D33; }
.paysages li:nth-child(15) { --pc: #D1852E; }
.paysages li:nth-child(16) { --pc: #526EBD; }
body[data-heure="aube"][data-monde="zen-lettres"] { --m-fond: #3A4478; }
body[data-heure="jour"][data-monde="zen-lettres"] { --m-fond: #1E4F9E; }
body[data-heure="doree"][data-monde="zen-lettres"] { --m-fond: #7A3B4E; }
body[data-heure="crepuscule"][data-monde="zen-lettres"] { --m-fond: #171C33; }
body[data-heure="nuit"][data-monde="zen-lettres"] { --m-fond: #1A2148; }

/* ==== base.css ==== */
/* Didjor — jeux de poche.
   « Papier découpé » : un fond neutre et froid, sur lequel cinq feuilles découpées portent chacune le
   monde d'un jeu. Les silhouettes viennent de shapes.css (généré). Aucune dépendance : polices
   auto-hébergées, ni style ni script en ligne (CSP stricte). */

/* ---------- polices (OFL, sous-ensembles latin) ---------- */

@font-face {
  font-family: "Bricolage Grotesque";
  src: url("/fonts/bricolage-grotesque-latin.woff2") format("woff2");
  font-weight: 200 800; font-style: normal; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Figtree";
  src: url("/fonts/figtree-latin.woff2") format("woff2");
  font-weight: 300 900; font-style: normal; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Noto Serif";
  src: url("/fonts/noto-serif-latin.woff2") format("woff2");
  font-weight: 100 900; font-style: normal; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ---------- jetons ---------- */

:root {
  color-scheme: light dark;

  --papier: #E9EBF3;
  --papier-2: #DADFEC;
  --encre: #17151F;
  --encre-douce: #55536B;
  --focus: #4B35F0;
  --focus-halo: #FFFFFF;
  --ombre: rgba(23, 21, 31, 0.26);

  --display: "Bricolage Grotesque", "Arial Narrow", "Segoe UI", system-ui, sans-serif;
  --texte: "Figtree", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --serif: "Noto Serif", Georgia, "Times New Roman", serif;

  --t-0: clamp(1rem, 0.96rem + 0.2vw, 1.0625rem);
  --t-1: clamp(1.14rem, 1.04rem + 0.5vw, 1.4rem);
  --t-2: clamp(1.4rem, 1.15rem + 1.2vw, 2rem);
  --t-3: clamp(2.1rem, 1.35rem + 3.6vw, 4rem);
  --t-4: clamp(3.1rem, 1.5rem + 8vw, 7.6rem);

  --gut: clamp(1.25rem, 5vw, 4.5rem);
  --maxw: 76rem;
  --rayon: 0.6rem;
  --ease-forme: cubic-bezier(0.65, 0, 0.35, 1);

  /* variables d'un « monde » : par défaut, celles du site (mondes.css les remplace) */
  --m-fond: var(--papier);
  --m-encre: var(--encre);
  --m-a: var(--encre);
  --m-b: var(--focus);
  --m-sur-a: var(--papier);
  --bord-h: 28px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --papier: #14131B;
    --papier-2: #201F2C;
    --encre: #EDEBF5;
    --encre-douce: #A9A6BD;
    --focus: #A79BFF;
    --focus-halo: #14131B;
    --ombre: rgba(0, 0, 0, 0.5);
  }
}

/* ---------- socle ---------- */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--papier);
  color: var(--encre);
  font-family: var(--texte);
  font-size: var(--t-0);
  line-height: 1.6;
  overflow-x: hidden;
}

img, svg { display: block; max-width: 100%; height: auto; }

h1, h2, h3 {
  margin: 0;
  font-family: var(--display);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.03em;
  text-wrap: balance;
}
p { margin: 0 0 1em; text-wrap: pretty; }
a { color: inherit; text-decoration-thickness: 0.08em; text-underline-offset: 0.18em; }
ul { margin: 0; padding: 0; list-style: none; }

.conteneur { width: min(100% - 2 * var(--gut), var(--maxw)); margin-inline: auto; }

.cache-visuel {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap; border: 0;
}

.evitement {
  position: absolute; left: -9999px; top: 0; z-index: 50;
  background: var(--encre); color: var(--papier); padding: 0.8rem 1.2rem; text-decoration: none; font-weight: 700;
}
.evitement:focus { left: 0; }

:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }

/* ---------- la découpe (parent non clippé + face clippée) ---------------------------------
   `clip-path` coupe les ombres et les contours : l'ombre et l'anneau de focus vivent donc sur le parent,
   en `drop-shadow` durs (sans flou), qui suivent la silhouette. La face garde un `border-radius` de
   repli ; il n'est retiré que là où `shape()` est réellement compris. */

.cut {
  position: relative;
  filter: drop-shadow(5px 6px 0 var(--ombre));
}
.cut__face {
  display: block; width: 100%; height: 100%; overflow: hidden;
  border-radius: 24%;
  background: var(--m-fond);
}
.cut__face > img { width: 100%; height: 100%; object-fit: cover; }

.cut:has(:focus-visible),
.btn:has(:focus-visible) {
  filter:
    drop-shadow(3px 0 0 var(--focus)) drop-shadow(-3px 0 0 var(--focus))
    drop-shadow(0 3px 0 var(--focus)) drop-shadow(0 -3px 0 var(--focus))
    drop-shadow(5px 6px 0 var(--ombre));
}
.cut :focus-visible, .btn :focus-visible { outline: none; }

@supports (clip-path: shape(from 0% 0%, curve to 10% 10% with 0% 5% / 5% 10%, close)) {
  .cut__face {
    border-radius: 0;
    clip-path: var(--forme, var(--s-hero));
    transition: clip-path 900ms var(--ease-forme);
  }
}

/* ---------- boutons : un chevron ---------- */

.btn {
  display: inline-block;
  filter: drop-shadow(3px 4px 0 var(--ombre));
  transition: transform 160ms ease, filter 160ms ease;
}
.btn__face {
  display: inline-flex; align-items: center; gap: 0.6rem;
  padding: 0.95rem 1.5rem;
  background: var(--m-a);
  color: var(--m-sur-a);
  font: 700 1rem/1.1 var(--display);
  letter-spacing: -0.01em;
  text-decoration: none;
  border-radius: var(--rayon);
}
.btn:hover { transform: translate(-1px, -2px); }
.btn--attente .btn__face {
  background: transparent; color: inherit; border: 2px dashed currentColor; cursor: default;
}
.btn--attente { filter: none; }
.btn--attente:hover { transform: none; }

@supports (clip-path: shape(from 0% 0%, curve to 10% 10% with 0% 5% / 5% 10%, close)) {
  .btn__face { border-radius: 0; clip-path: var(--b-chevron); padding-right: 2.7rem; }
  .btn--attente .btn__face { border: 0; background: color-mix(in srgb, currentColor 16%, transparent); }
}

.etiquette {
  display: inline-block; padding: 0.3rem 0.8rem; border-radius: 99px;
  background: color-mix(in srgb, var(--m-encre) 14%, transparent);
  font-size: 0.82rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
}

/* ---------- bandeau ---------- */

.bar {
  position: relative; z-index: 5;
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 1rem var(--gut);
}
.bar__marque {
  display: inline-flex; align-items: baseline; gap: 0.6rem;
  font: 800 1.4rem/1 var(--display); letter-spacing: -0.04em; text-decoration: none;
}
.bar__marque small {
  font: 600 0.72rem/1 var(--texte); letter-spacing: 0.16em; text-transform: uppercase; opacity: 0.86;
}
.bar__nav { display: none; gap: 1.5rem; font-weight: 600; font-size: 0.95rem; }
.bar__nav a { text-decoration: none; padding: 0.4rem 0; border-bottom: 3px solid transparent; }
.bar__nav a:hover, .bar__nav a[aria-current="page"] { border-color: currentColor; }
.bar__retour { font-weight: 700; font-size: 0.95rem; }
@media (min-width: 960px) { .bar__nav { display: flex; } .bar__retour { display: none; } }

.page-jeu .bar { background: var(--m-fond); color: var(--m-encre); }

/* ---------- pied de page : un bord déchiré ---------- */

.pied {
  position: relative;
  margin-top: 0;
  padding: 5rem 0 3rem;
  background: #17151F; color: #EDEBF5;
}
@supports (clip-path: shape(from 0% 0%, curve to 10% 10% with 0% 5% / 5% 10%, close)) {
  .pied { clip-path: var(--e-dechire); margin-top: -14px; padding-top: 6rem; }
}
.pied__grille { display: grid; gap: 2.2rem; }
@media (min-width: 800px) { .pied__grille { grid-template-columns: 1.3fr 1fr 1fr; } }
.pied h2 { font-size: 1.05rem; letter-spacing: 0; margin-bottom: 0.8rem; opacity: 0.75; font-weight: 700; }
.pied p, .pied li { margin: 0 0 0.4rem; }
.pied a { text-decoration-color: rgba(237, 235, 245, 0.45); }
.pied__marque { font: 800 var(--t-2)/1 var(--display); letter-spacing: -0.04em; margin-bottom: 0.7rem; }
.pied__fin { margin-top: 2.5rem; font-size: 0.86rem; opacity: 0.7; }
.pied :focus-visible { outline-color: #A79BFF; }

/* ---------- pages de texte (politiques, 404) ---------- */

.texte { padding: 2rem 0 5rem; }
.texte__col { max-width: 46rem; }
.texte h1 { font-size: clamp(2rem, 1.3rem + 2.6vw, 3.2rem); margin-bottom: 0.6rem; }
.texte h2 { font-size: var(--t-2); margin: 2.4rem 0 0.7rem; }
.texte .date { color: var(--encre-douce); margin-bottom: 1.6rem; font-weight: 600; }
.texte .app { font: 700 0.85rem var(--texte); letter-spacing: 0.14em; color: var(--encre-douce); margin-bottom: 0.6rem; }
.texte .summary {
  background: var(--papier-2); padding: 1.1rem 1.4rem; margin-block: 1.2rem 2rem; border-radius: 0.5rem;
  box-shadow: 5px 6px 0 var(--ombre);   /* comme les découpes du reste du site : une ombre dure, pas un filet coloré */
}
.texte .summary p { margin: 0; }
.texte ul { list-style: disc; padding-left: 1.4rem; margin: 0 0 1em; }
.texte li { margin-bottom: 0.35rem; }
.texte nav ul { list-style: none; padding: 0; columns: 2 16rem; }
.texte footer { margin-top: 3rem; padding-top: 1.2rem; border-top: 2px solid var(--papier-2); color: var(--encre-douce); font-size: 0.92rem; }
.texte article a, .texte p a { color: var(--focus); }
.texte__retour { display: inline-block; margin-bottom: 1.5rem; font-weight: 700; }

/* ---------- mouvement réduit, impression ---------- */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

@media print {
  * { clip-path: none !important; filter: none !important; }
  .bar, .pied__grille + *, .evitement { display: none !important; }
  body { background: #fff; color: #000; }
  .pied { background: none; color: #000; margin: 0; padding: 1rem 0; }
}

/* ==== accueil.css ==== */
/* Accueil : le héros-silhouette, puis un chapitre par jeu. */

[hidden] { display: none !important; }

/* ---------- héros : une découpe qui devient la forme de chaque jeu ---------- */

.scene {
  position: relative;
  overflow-x: clip;
  padding: clamp(0.5rem, 2vw, 1.5rem) 0 clamp(6.5rem, 12vw, 10.5rem);
}
/* deux grandes feuilles pâles en arrière-plan, pour la profondeur du papier */
@supports (clip-path: shape(from 0% 0%, curve to 10% 10% with 0% 5% / 5% 10%, close)) {
  .scene::before, .scene::after {
    content: ""; position: absolute; z-index: 0; background: var(--papier-2); pointer-events: none;
  }
  .scene::before { width: 30rem; aspect-ratio: 1; left: -11rem; top: -8rem; clip-path: var(--s-gravity); transform: rotate(14deg); }
  .scene::after { width: 34rem; aspect-ratio: 1; right: -12rem; bottom: -6rem; clip-path: var(--s-zen); transform: rotate(-10deg); }
}

.scene__grille { position: relative; z-index: 1; display: grid; gap: 2.6rem; align-items: center; }
@media (min-width: 900px) {
  .scene__grille { grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); gap: 4rem; }
}

.scene__sur {
  margin-bottom: 1.1rem; font-size: 0.8rem; font-weight: 700; letter-spacing: 0.15em; text-transform: uppercase;
  color: var(--encre-douce);
}
.scene__titre { margin-bottom: 1.5rem; font-size: var(--t-4); line-height: 0.88; letter-spacing: -0.045em; }
.scene__lede { max-width: 31rem; font-size: var(--t-1); line-height: 1.45; }
.scene__note { font-weight: 700; color: var(--encre-douce); }

.scene__vitrine { width: min(100%, 33rem); margin-inline: auto; }
@media (min-width: 900px) { .scene__vitrine { width: min(100%, 28.5rem); } }
.scene__stage { width: 100%; aspect-ratio: 1; }
.scene__face { position: relative; }
.scene__img { position: absolute; inset: 0; opacity: 0; transition: opacity 700ms ease; }
.scene__img.est-actif { opacity: 1; }

.scene__legende { margin-top: 1.3rem; }
.scene__genre {
  margin-bottom: 0.35rem; font-size: 0.78rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--encre-douce);
}
.scene__nom { font: 800 var(--t-2)/1 var(--display); letter-spacing: -0.035em; }
.scene__accroche { margin: 0.4rem 0 1rem; min-height: 3em; }

.scene__commandes { display: flex; flex-wrap: wrap; align-items: center; gap: 1.2rem 1.6rem; margin-top: 1.5rem; }
.pastilles { display: flex; gap: 0.75rem; }
.pastille-cadre { width: 3.3rem; aspect-ratio: 1; transition: transform 220ms var(--ease-forme); }
.pastille-cadre:has([aria-pressed="true"]) { transform: scale(1.2) rotate(-5deg); z-index: 1; }
.pastille {
  display: grid; place-items: center; width: 100%; height: 100%; padding: 0; border: 0; cursor: pointer;
  background: var(--m-a); color: var(--m-sur-a);
  font: 800 0.86rem/1 var(--display); letter-spacing: -0.01em;
}
.scene__pause {
  padding: 0.55rem 1rem; border: 2px solid var(--encre); border-radius: 99px; background: none; color: inherit;
  font: 700 0.86rem var(--texte); cursor: pointer;
}
.scene__pause:hover { background: var(--encre); color: var(--papier); }

/* ---------- chapitres : un monde par jeu ---------- */

.chapitre {
  position: relative;
  background: var(--m-fond);
  color: var(--m-encre);
  padding: clamp(4rem, 9vw, 7.5rem) 0 clamp(3.5rem, 8vw, 6.5rem);
}
@supports (clip-path: shape(from 0% 0%, curve to 10% 10% with 0% 5% / 5% 10%, close)) {
  .chapitre {
    clip-path: var(--bord);
    margin-top: calc(-1 * var(--bord-h));
    padding-top: calc(clamp(4rem, 9vw, 7.5rem) + var(--bord-h));
  }
}
.chapitre__grille { display: grid; gap: 2.6rem; align-items: center; }
@media (min-width: 860px) {
  .chapitre__grille { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: 4.5rem; }
  .chapitre--inverse .chapitre__art { order: 2; }
}
.chapitre__art { width: min(100%, 30rem); aspect-ratio: 1; margin-inline: auto; transform: rotate(-2.2deg); }
.chapitre--inverse .chapitre__art { transform: rotate(2.4deg); }

.chapitre__genre {
  margin-bottom: 0.9rem; font-size: 0.8rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--m-a);
}
.chapitre h2 { margin-bottom: 0.7rem; font-size: var(--t-3); }
.chapitre__accroche { font: 600 var(--t-1)/1.3 var(--texte); margin-bottom: 1rem; }
.chapitre__resume { max-width: 34rem; opacity: 0.92; }
.puces { display: flex; flex-wrap: wrap; gap: 0.5rem 1.8rem; margin: 1.3rem 0 2rem; }
.puces li { font-size: 0.95rem; }
.puces strong { font: 800 1.35rem/1 var(--display); color: var(--m-a); margin-right: 0.3rem; letter-spacing: -0.03em; }
.chapitre__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.4rem; }

/* ---------- à propos ---------- */

.apropos { padding: 5rem 0 6rem; }
.apropos h2 { max-width: 20ch; margin-bottom: 2rem; font-size: var(--t-3); }
.apropos__liste { display: grid; gap: 1.6rem 3rem; }
@media (min-width: 760px) { .apropos__liste { grid-template-columns: repeat(3, 1fr); } }
.apropos__liste h3 { margin-bottom: 0.4rem; font-size: var(--t-1); letter-spacing: -0.02em; }
.apropos__liste p { margin: 0; color: var(--encre-douce); }
.apropos__liste li::before {
  content: ""; display: block; width: 2.2rem; aspect-ratio: 1; margin-bottom: 0.9rem; background: var(--focus); border-radius: 30%;
}
@supports (clip-path: shape(from 0% 0%, curve to 10% 10% with 0% 5% / 5% 10%, close)) {
  .apropos__liste li::before { border-radius: 0; }
  .apropos__liste li:nth-child(1)::before { clip-path: var(--s-gravity); }
  .apropos__liste li:nth-child(2)::before { clip-path: var(--s-grid); }
  .apropos__liste li:nth-child(3)::before { clip-path: var(--s-tour); }
}

/* ==== jeu.css ==== */
/* Pages de jeu : héros du monde, faits, galerie en cadres de téléphone, particularités de chaque jeu. */

.heros {
  position: relative;
  background: var(--m-fond);
  color: var(--m-encre);
  padding: clamp(1.5rem, 4vw, 3rem) 0 clamp(6.5rem, 11vw, 9.5rem);
}
.heros__grille { display: grid; gap: 2.4rem; align-items: center; }
@media (min-width: 900px) { .heros__grille { grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: 4rem; } }

.heros__genre {
  margin-bottom: 1rem; font-size: 0.8rem; font-weight: 700; letter-spacing: 0.15em; text-transform: uppercase; color: var(--m-a);
}
.heros h1 { font-size: var(--t-4); line-height: 0.88; letter-spacing: -0.045em; margin-bottom: 1.2rem; }
.heros__accroche { margin-bottom: 1.4rem; font: 600 var(--t-1)/1.3 var(--texte); }
.heros__pitch { max-width: 34rem; opacity: 0.93; }
.heros__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.4rem; margin-top: 1.8rem; }
.heros__art { width: min(100%, 30rem); aspect-ratio: 1; margin-inline: auto; transform: rotate(2deg); }
.heros__icone { width: 4.2rem; height: 4.2rem; margin-bottom: 1.2rem; border-radius: 22%; }

/* le bord haut de la section suivante révèle le monde du héros */
.section-papier {
  position: relative; background: var(--papier); padding: clamp(3rem, 6vw, 5rem) 0;
}
@supports (clip-path: shape(from 0% 0%, curve to 10% 10% with 0% 5% / 5% 10%, close)) {
  .section-papier--bord {
    clip-path: var(--bord); margin-top: calc(-1 * var(--bord-h)); padding-top: calc(clamp(3rem, 6vw, 5rem) + var(--bord-h));
  }
}
.section-papier h2 { margin-bottom: 1.6rem; font-size: var(--t-3); }
.section-papier__intro { max-width: 40rem; margin-bottom: 2rem; color: var(--encre-douce); font-size: var(--t-1); line-height: 1.45; }

/* ---------- faits : une puce à la forme du jeu, du texte à l'abri des bords ---------- */

.faits { display: grid; grid-template-columns: repeat(auto-fit, minmax(8.6rem, 1fr)); gap: 1.6rem 1.6rem; margin: 0; }
.fait { display: flex; flex-direction: column-reverse; gap: 0.3rem; }
.fait dd { display: flex; align-items: center; gap: 0.7rem; margin: 0; font: 800 var(--t-3)/1 var(--display); letter-spacing: -0.04em; }
.fait dd::before { content: ""; flex: none; width: 1rem; aspect-ratio: 1; background: var(--m-a); border-radius: 50%; }
.fait dt { font-size: 0.95rem; color: var(--encre-douce); font-weight: 600; }
@supports (clip-path: shape(from 0% 0%, curve to 10% 10% with 0% 5% / 5% 10%, close)) {
  .fait dd::before { border-radius: 0; clip-path: var(--forme); }
}

/* ---------- galerie : cadres de téléphone ---------- */

.galerie { position: relative; }
.galerie__piste {
  display: flex; gap: clamp(1.2rem, 3vw, 2.2rem); overflow-x: auto; scroll-snap-type: x mandatory;
  padding: 1.2rem var(--gut) 2rem; scrollbar-width: thin;
}
@media (min-width: 1100px) { .galerie__piste { justify-content: center; } }
.galerie__piste > li { flex: 0 0 clamp(11.5rem, 58vw, 15.5rem); scroll-snap-align: center; }
.galerie__piste > li:has(.tel--petit) { flex-basis: clamp(9rem, 44vw, 11.5rem); }
.tel { margin: 0; }
.tel__cadre {
  position: relative; padding: 1.35rem 0.55rem 0.75rem; border-radius: 2.1rem; background: #0C0B12;
  filter: drop-shadow(5px 6px 0 var(--ombre));
}
.tel__cadre::after { /* l'objectif frontal */
  content: ""; position: absolute; top: 0.5rem; left: 50%; width: 0.5rem; aspect-ratio: 1; translate: -50% 0; border-radius: 50%;
  background: #05040A; box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.07);
}
.tel__ecran { overflow: hidden; border-radius: 1.6rem; background: var(--m-fond); }
.tel__ecran img { width: 100%; height: auto; }
.tel figcaption { margin-top: 0.9rem; font-size: 0.86rem; color: var(--encre-douce); text-align: center; }
.tel--petit .tel__cadre { border-radius: 1.6rem; padding: 1rem 0.4rem 0.55rem; }
.tel--petit .tel__ecran { border-radius: 1.25rem; }
.tel--petit .tel__cadre::after { top: 0.38rem; width: 0.4rem; }
.galerie__boutons { display: none; gap: 0.6rem; justify-content: flex-end; margin-bottom: 0.4rem; padding-inline: var(--gut); }
.galerie--deborde .galerie__boutons { display: flex; }
.galerie__bouton {
  width: 2.8rem; height: 2.8rem; border: 2px solid var(--encre); border-radius: 50%; background: none; color: inherit;
  font: 700 1.1rem var(--display); cursor: pointer;
}
.galerie__bouton:hover { background: var(--encre); color: var(--papier); }

/* ---------- fonctions ---------- */

.fonctions { display: grid; gap: 2.2rem 3rem; }
@media (min-width: 760px) { .fonctions { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.fonction h3 { margin-bottom: 0.55rem; font-size: var(--t-2); letter-spacing: -0.03em; }
.fonction p { margin: 0; color: var(--encre-douce); }
.fonction::before { content: ""; display: block; width: 2rem; aspect-ratio: 1; margin-bottom: 1rem; background: var(--m-a); border-radius: 30%; }
@supports (clip-path: shape(from 0% 0%, curve to 10% 10% with 0% 5% / 5% 10%, close)) {
  .fonction::before { border-radius: 0; clip-path: var(--forme); }
}

/* ---------- offre, crédits, politique ---------- */

.offre { max-width: 44rem; }
.offre p { font-size: var(--t-1); line-height: 1.45; }
.credits { margin-top: 1.6rem; font-size: 0.88rem; color: var(--encre-douce); }
.credits li { margin-bottom: 0.3rem; }
.offre__liens { display: flex; flex-wrap: wrap; gap: 0.8rem 1.6rem; margin-top: 1.6rem; font-weight: 700; }

/* ---------- les autres jeux ---------- */

.autres { padding: 1rem 0 5.5rem; }
.autres h2 { margin-bottom: 1.6rem; font-size: var(--t-2); }
.autres__liste { display: grid; grid-template-columns: repeat(auto-fill, minmax(9rem, 9rem)); gap: 1.8rem 2.4rem; }
.autre { display: block; text-decoration: none; }
.autre .cut { display: block; width: min(100%, 9rem); aspect-ratio: 1; margin-bottom: 0.9rem; transition: transform 200ms ease; }
.autre .cut__face { display: block; }
.autre:hover .cut { transform: translate(-2px, -3px) rotate(-2deg); }
.autre__nom { display: block; font: 800 1.15rem/1.1 var(--display); letter-spacing: -0.03em; }
.autre__genre { display: block; font-size: 0.85rem; color: var(--encre-douce); }

/* ================= Grid Runner / Dungeon Cleaner : choisir son style ================= */

.looks__choix { display: flex; flex-wrap: wrap; gap: 0.7rem; margin: 0 0 2.2rem; padding: 0; border: 0; }
.look-puce { position: relative; }
.look-puce input { position: absolute; opacity: 0; inset: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.look-puce span {
  display: inline-flex; align-items: center; gap: 0.6rem; padding: 0.7rem 1.2rem; border: 2px solid var(--encre); border-radius: 99px;
  background: transparent; font: 700 0.98rem/1 var(--display); letter-spacing: -0.01em;
}
.look-puce i { display: inline-block; width: 0.9rem; height: 0.9rem; border-radius: 50%; }
.look-puce input:checked + span { background: var(--encre); color: var(--papier); }
.look-puce input:focus-visible + span { outline: 3px solid var(--focus); outline-offset: 3px; }

.looks__panneau { display: none; }
.looks__panneau .galerie__piste { justify-content: center; padding-inline: 0; }
.looks__note { max-width: 32rem; margin: 1rem auto 0; text-align: center; color: var(--encre-douce); }

/* le style choisi : la page entière prend ses couleurs (mondes.css) et ses images (ici) */
.heros__art .cut__face > img[data-look] { display: none; }

.avant-apres { display: grid; gap: 2rem 3rem; }
@media (min-width: 900px) { .avant-apres { grid-template-columns: 1fr 1fr; align-items: start; } }
.avant-apres h3 { margin-bottom: 1rem; font-size: var(--t-2); }
.avant-apres .galerie__piste { justify-content: flex-start; padding-inline: 0; overflow: visible; flex-wrap: wrap; }

/* ================= Zen Lettres : un paysage qui suit l'heure ================= */

.paysage {
  --ciel-haut: #27335F; --ciel-bas: #F6C38F; --ciel-mi: #B9789A; --astre: #FFE7B8;
  --c1: #7A6A99; --c2: #3F3F6E; --c3: #1F2244; --astre-x: 68%; --astre-y: 36%; --etoiles: 0;
  position: relative; width: 100%; height: 100%; overflow: hidden; container-type: inline-size;
  background: linear-gradient(180deg, var(--ciel-haut) 0%, var(--ciel-mi) 58%, var(--ciel-bas) 100%);
  transition: background 800ms ease;
}
.paysage[data-heure="aube"] { --ciel-haut: #6A78B4; --ciel-mi: #E7A9AE; --ciel-bas: #F7D2B0; --astre: #FFF0D0; --c1: #8E88B4; --c2: #5C5C8C; --c3: #2F3157; --astre-x: 24%; --astre-y: 52%; }
.paysage[data-heure="jour"] { --ciel-haut: #3878E0; --ciel-mi: #8FB8EE; --ciel-bas: #C2DEF7; --astre: #FFF7D6; --c1: #6F93B8; --c2: #4B7A88; --c3: #2F5A55; --astre-x: 70%; --astre-y: 24%; }
.paysage[data-heure="doree"] { --ciel-haut: #E0704F; --ciel-mi: #FFA375; --ciel-bas: #FFC98F; --astre: #FFF1C1; --c1: #A56C8E; --c2: #6F4F78; --c3: #3B2F52; --astre-x: 74%; --astre-y: 50%; }
.paysage[data-heure="crepuscule"] { --ciel-haut: #27335F; --ciel-mi: #B9789A; --ciel-bas: #F6C38F; --astre: #FFE7B8; --c1: #7A6A99; --c2: #3F3F6E; --c3: #1F2244; --astre-x: 66%; --astre-y: 46%; }
.paysage[data-heure="nuit"] { --ciel-haut: #050814; --ciel-mi: #0A1024; --ciel-bas: #0D142B; --astre: #F4F1E6; --c1: #1B2243; --c2: #121933; --c3: #0A0F22; --astre-x: 30%; --astre-y: 26%; --etoiles: 1; }

.paysage__etoiles {
  position: absolute; inset: 0; opacity: var(--etoiles); transition: opacity 800ms ease;
  background:
    radial-gradient(1.5px 1.5px at 12% 14%, #fff, transparent 60%), radial-gradient(1px 1px at 26% 30%, #fff, transparent 60%),
    radial-gradient(1.5px 1.5px at 41% 10%, #fff, transparent 60%), radial-gradient(1px 1px at 58% 22%, #fff, transparent 60%),
    radial-gradient(1.5px 1.5px at 73% 12%, #fff, transparent 60%), radial-gradient(1px 1px at 88% 28%, #fff, transparent 60%),
    radial-gradient(1px 1px at 18% 44%, #fff, transparent 60%), radial-gradient(1.5px 1.5px at 92% 8%, #fff, transparent 60%),
    radial-gradient(1px 1px at 50% 38%, #fff, transparent 60%), radial-gradient(1px 1px at 8% 30%, #fff, transparent 60%);
}
.paysage__astre {
  position: absolute; left: var(--astre-x); top: var(--astre-y); width: 17%; aspect-ratio: 1; translate: -50% -50%;
  border-radius: 50%; background: var(--astre); box-shadow: 0 0 0 0.9cqi color-mix(in srgb, var(--astre) 28%, transparent), 0 0 6cqi 1cqi color-mix(in srgb, var(--astre) 55%, transparent);
  transition: left 800ms ease, top 800ms ease, background 800ms ease;
}
.paysage__crete { position: absolute; left: 0; right: 0; bottom: 0; transition: background 800ms ease; }
.paysage__crete--loin { height: 48%; background: var(--c1); }
.paysage__crete--milieu { height: 36%; background: var(--c2); }
.paysage__crete--proche { height: 24%; background: var(--c3); }
@supports (clip-path: shape(from 0% 0%, curve to 10% 10% with 0% 5% / 5% 10%, close)) {
  .paysage__crete--loin { clip-path: var(--c-loin); }
  .paysage__crete--milieu { clip-path: var(--c-milieu); }
  .paysage__crete--proche { clip-path: var(--c-proche); }
}

.heures { display: flex; flex-wrap: wrap; gap: 0.6rem; margin: 1.6rem 0 0; padding: 0; border: 0; }
.heure-puce { position: relative; }
.heure-puce input { position: absolute; opacity: 0; inset: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.heure-puce span {
  display: inline-block; padding: 0.5rem 0.95rem; border: 2px solid currentColor; border-radius: 99px; font: 700 0.9rem/1 var(--texte);
}
.heure-puce input:checked + span { background: var(--m-encre); color: var(--m-fond); border-color: var(--m-encre); }
.heure-puce input:focus-visible + span { outline: 3px solid var(--m-a); outline-offset: 3px; }
.heros__vitrine { display: grid; gap: 0.4rem; }

.paysages { display: grid; grid-template-columns: repeat(auto-fill, minmax(11.5rem, 1fr)); gap: 0.7rem 1rem; }
.paysages li { display: flex; align-items: center; gap: 0.7rem; font-weight: 600; }
.paysages i { flex: none; width: 1.1rem; aspect-ratio: 1; border-radius: 50%; background: var(--pc); }

/* ================= Le Grand Tour : une carte ancienne ================= */

.page-tour h1, .page-tour h2, .page-tour h3 { font-family: var(--serif); letter-spacing: -0.02em; font-weight: 800; }
.page-tour .heros h1 { font-size: clamp(2.8rem, 1.6rem + 6.5vw, 6.2rem); line-height: 0.95; }

.camembert { display: grid; gap: 2.4rem; align-items: center; }
@media (min-width: 800px) { .camembert { grid-template-columns: minmax(0, 18rem) 1fr; gap: 4rem; } }
.camembert__roue {
  width: min(100%, 18rem); aspect-ratio: 1; margin-inline: auto;
  background: conic-gradient(from -30deg, var(--k1) 0 60deg, var(--k2) 60deg 120deg, var(--k3) 120deg 180deg, var(--k4) 180deg 240deg, var(--k5) 240deg 300deg, var(--k6) 300deg 360deg);
  border-radius: 50%;
}
@supports (clip-path: shape(from 0% 0%, curve to 10% 10% with 0% 5% / 5% 10%, close)) {
  .camembert__roue { border-radius: 0; clip-path: var(--s-tour); }
}
.categories { display: grid; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); gap: 0.8rem 1.4rem; }
.categories li { display: flex; align-items: center; gap: 0.7rem; font-weight: 700; }
.categories i { flex: none; width: 1.2rem; aspect-ratio: 1; border-radius: 30%; background: var(--kc); }

.pays-liste { display: grid; gap: 1.6rem; align-items: start; }
@media (min-width: 800px) { .pays-liste { grid-template-columns: 1.4fr 1fr; } }
.pays { padding: 1.4rem 1.5rem; border: 2px solid var(--m-encre); border-radius: 0.4rem; background: var(--m-fond); color: var(--m-encre); }
.pays--france { grid-row: span 3; }
.pays h3 { margin-bottom: 0.2rem; font-size: var(--t-2); }
.pays__n { margin-bottom: 0.9rem; font-weight: 700; color: var(--m-a); }
.villes { display: flex; flex-wrap: wrap; gap: 0.4rem 0.5rem; }
.villes li { padding: 0.2rem 0.65rem; border: 1px solid color-mix(in srgb, var(--m-encre) 45%, transparent); border-radius: 99px; font-size: 0.9rem; color: var(--m-encre); }

.extraits { display: grid; gap: 1.6rem; }
@media (min-width: 800px) { .extraits { grid-template-columns: 1fr 1fr; } }
.extrait { padding: 1.5rem 1.6rem 1.6rem; background: #FBF5E4; border: 2px solid var(--m-encre); border-radius: 0.4rem; color: var(--m-encre); }
.extrait__ville { margin-bottom: 0.6rem; font-size: 0.8rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--m-a); }
.extrait__question { margin-bottom: 1rem; font: 700 var(--t-1)/1.3 var(--serif); }
.extrait details { border-top: 1px solid color-mix(in srgb, var(--m-encre) 30%, transparent); padding-top: 0.9rem; }
.extrait summary { cursor: pointer; font-weight: 700; color: var(--m-a); }
.extrait__reponse { margin: 0.8rem 0 0.3rem; font: 800 1.3rem/1.2 var(--serif); }
.extrait__anecdote { margin: 0; font-style: italic; }

/* dans un chapitre coloré, l'introduction prend l'encre du monde et non celle du site */
.chapitre .section-papier__intro { color: var(--m-encre); opacity: 0.9; }
.chapitre h2 { color: var(--m-encre); }