/* ---------- Police Familjen Grotesk, auto-hébergée (latin + latin-ext) ---------- */
@font-face { font-family: 'Familjen Grotesk'; font-style: normal; font-weight: 400 700; font-display: swap;
  src: url(fonts/familjen-grotesk-normal-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Familjen Grotesk'; font-style: normal; font-weight: 400 700; font-display: swap;
  src: url(fonts/familjen-grotesk-normal-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Familjen Grotesk'; font-style: italic; font-weight: 400 700; font-display: swap;
  src: url(fonts/familjen-grotesk-italique-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Familjen Grotesk'; font-style: italic; font-weight: 400 700; font-display: swap;
  src: url(fonts/familjen-grotesk-italique-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }

/* MOSAE — tokens (direction A2.1 / F4) */
:root {
  --creme: #F2EDE2;      /* papier, zones de texte */
  --kraft: #E8E0CE;      /* fond de la section tickets */
  --ticket: #FBF6EA;     /* tickets crème */
  --rouge: #E1140A;      /* prix, réservation, touches de pinceau */
  --encre: #131110;      /* noir */
  --gris-texte: #5b534c; /* textes secondaires sur crème (contraste AA) */
  --gris-sur-noir: #d8cfbf;
  --police: 'Familjen Grotesk', 'Helvetica Neue', Arial, sans-serif;
  --r-corps: 1.7;        /* interlignage paragraphes */
}
/* Déchirures latérales des tickets : même style, tracé différent */
.torn-1 { clip-path: polygon(0.00% 0.00%, 5.56% 0.00%, 11.11% 0.00%, 16.67% 0.00%, 22.22% 0.00%, 27.78% 0.00%, 33.33% 0.00%, 38.89% 0.00%, 44.44% 0.00%, 50.00% 0.00%, 55.56% 0.00%, 61.11% 0.00%, 66.67% 0.00%, 72.22% 0.00%, 77.78% 0.00%, 83.33% 0.00%, 88.89% 0.00%, 94.44% 0.00%, 100.00% 0.00%, 99.65% 5.56%, 97.80% 11.11%, 98.01% 16.67%, 99.34% 22.22%, 98.71% 27.78%, 98.83% 33.33%, 98.31% 38.89%, 97.95% 44.44%, 99.76% 50.00%, 99.93% 55.56%, 97.83% 61.11%, 98.87% 66.67%, 98.02% 72.22%, 99.99% 77.78%, 98.84% 83.33%, 98.12% 88.89%, 99.41% 94.44%, 97.54% 100.00%, 94.44% 100.00%, 88.89% 100.00%, 83.33% 100.00%, 77.78% 100.00%, 72.22% 100.00%, 66.67% 100.00%, 61.11% 100.00%, 55.56% 100.00%, 50.00% 100.00%, 44.44% 100.00%, 38.89% 100.00%, 33.33% 100.00%, 27.78% 100.00%, 22.22% 100.00%, 16.67% 100.00%, 11.11% 100.00%, 5.56% 100.00%, 0.00% 100.00%, 2.34% 94.44%, 0.08% 88.89%, 0.07% 83.33%, 1.41% 77.78%, 2.44% 72.22%, 0.99% 66.67%, 0.56% 61.11%, 1.10% 55.56%, 0.08% 50.00%, 0.58% 44.44%, 1.14% 38.89%, 1.29% 33.33%, 0.61% 27.78%, 0.60% 22.22%, 0.57% 16.67%, 1.19% 11.11%, 0.75% 5.56%); }
.torn-2 { clip-path: polygon(0.00% 0.00%, 5.56% 0.00%, 11.11% 0.00%, 16.67% 0.00%, 22.22% 0.00%, 27.78% 0.00%, 33.33% 0.00%, 38.89% 0.00%, 44.44% 0.00%, 50.00% 0.00%, 55.56% 0.00%, 61.11% 0.00%, 66.67% 0.00%, 72.22% 0.00%, 77.78% 0.00%, 83.33% 0.00%, 88.89% 0.00%, 94.44% 0.00%, 100.00% 0.00%, 97.51% 5.56%, 97.54% 11.11%, 99.85% 16.67%, 99.78% 22.22%, 97.83% 27.78%, 98.09% 33.33%, 98.26% 38.89%, 99.20% 44.44%, 98.42% 50.00%, 98.42% 55.56%, 98.49% 61.11%, 99.59% 66.67%, 98.88% 72.22%, 98.98% 77.78%, 98.12% 83.33%, 97.41% 88.89%, 97.53% 94.44%, 98.59% 100.00%, 94.44% 100.00%, 88.89% 100.00%, 83.33% 100.00%, 77.78% 100.00%, 72.22% 100.00%, 66.67% 100.00%, 61.11% 100.00%, 55.56% 100.00%, 50.00% 100.00%, 44.44% 100.00%, 38.89% 100.00%, 33.33% 100.00%, 27.78% 100.00%, 22.22% 100.00%, 16.67% 100.00%, 11.11% 100.00%, 5.56% 100.00%, 0.00% 100.00%, 1.16% 94.44%, 0.70% 88.89%, 0.09% 83.33%, 0.07% 77.78%, 1.21% 72.22%, 0.83% 66.67%, 0.99% 61.11%, 2.32% 55.56%, 1.37% 50.00%, 1.46% 44.44%, 0.61% 38.89%, 0.06% 33.33%, 0.85% 27.78%, 0.36% 22.22%, 1.33% 16.67%, 2.60% 11.11%, 1.75% 5.56%); }
.torn-3 { clip-path: polygon(0.00% 0.00%, 5.56% 0.00%, 11.11% 0.00%, 16.67% 0.00%, 22.22% 0.00%, 27.78% 0.00%, 33.33% 0.00%, 38.89% 0.00%, 44.44% 0.00%, 50.00% 0.00%, 55.56% 0.00%, 61.11% 0.00%, 66.67% 0.00%, 72.22% 0.00%, 77.78% 0.00%, 83.33% 0.00%, 88.89% 0.00%, 94.44% 0.00%, 100.00% 0.00%, 99.38% 5.56%, 98.59% 11.11%, 99.04% 16.67%, 98.43% 22.22%, 98.37% 27.78%, 99.83% 33.33%, 99.97% 38.89%, 97.82% 44.44%, 99.33% 50.00%, 99.39% 55.56%, 97.41% 61.11%, 98.78% 66.67%, 97.83% 72.22%, 98.76% 77.78%, 98.34% 83.33%, 99.61% 88.89%, 98.35% 94.44%, 97.74% 100.00%, 94.44% 100.00%, 88.89% 100.00%, 83.33% 100.00%, 77.78% 100.00%, 72.22% 100.00%, 66.67% 100.00%, 61.11% 100.00%, 55.56% 100.00%, 50.00% 100.00%, 44.44% 100.00%, 38.89% 100.00%, 33.33% 100.00%, 27.78% 100.00%, 22.22% 100.00%, 16.67% 100.00%, 11.11% 100.00%, 5.56% 100.00%, 0.00% 100.00%, 1.36% 94.44%, 1.93% 88.89%, 1.75% 83.33%, 0.17% 77.78%, 1.97% 72.22%, 1.54% 66.67%, 0.78% 61.11%, 0.08% 55.56%, 2.25% 50.00%, 1.23% 44.44%, 1.87% 38.89%, 2.28% 33.33%, 1.86% 27.78%, 2.39% 22.22%, 1.03% 16.67%, 2.08% 11.11%, 1.16% 5.56%); }
.torn-4 { clip-path: polygon(0.00% 0.00%, 5.56% 0.00%, 11.11% 0.00%, 16.67% 0.00%, 22.22% 0.00%, 27.78% 0.00%, 33.33% 0.00%, 38.89% 0.00%, 44.44% 0.00%, 50.00% 0.00%, 55.56% 0.00%, 61.11% 0.00%, 66.67% 0.00%, 72.22% 0.00%, 77.78% 0.00%, 83.33% 0.00%, 88.89% 0.00%, 94.44% 0.00%, 100.00% 0.00%, 99.39% 5.56%, 99.73% 11.11%, 98.97% 16.67%, 99.60% 22.22%, 99.83% 27.78%, 98.96% 33.33%, 97.61% 38.89%, 97.92% 44.44%, 98.01% 50.00%, 99.42% 55.56%, 98.60% 61.11%, 99.28% 66.67%, 99.55% 72.22%, 99.72% 77.78%, 99.44% 83.33%, 97.59% 88.89%, 97.84% 94.44%, 97.90% 100.00%, 94.44% 100.00%, 88.89% 100.00%, 83.33% 100.00%, 77.78% 100.00%, 72.22% 100.00%, 66.67% 100.00%, 61.11% 100.00%, 55.56% 100.00%, 50.00% 100.00%, 44.44% 100.00%, 38.89% 100.00%, 33.33% 100.00%, 27.78% 100.00%, 22.22% 100.00%, 16.67% 100.00%, 11.11% 100.00%, 5.56% 100.00%, 0.00% 100.00%, 2.08% 94.44%, 0.50% 88.89%, 0.81% 83.33%, 1.63% 77.78%, 1.90% 72.22%, 2.22% 66.67%, 2.29% 61.11%, 0.23% 55.56%, 1.58% 50.00%, 1.75% 44.44%, 1.32% 38.89%, 0.46% 33.33%, 1.23% 27.78%, 0.23% 22.22%, 2.43% 16.67%, 2.25% 11.11%, 1.42% 5.56%); }
.torn-5 { clip-path: polygon(0.00% 0.00%, 5.56% 0.00%, 11.11% 0.00%, 16.67% 0.00%, 22.22% 0.00%, 27.78% 0.00%, 33.33% 0.00%, 38.89% 0.00%, 44.44% 0.00%, 50.00% 0.00%, 55.56% 0.00%, 61.11% 0.00%, 66.67% 0.00%, 72.22% 0.00%, 77.78% 0.00%, 83.33% 0.00%, 88.89% 0.00%, 94.44% 0.00%, 100.00% 0.00%, 98.38% 5.56%, 98.07% 11.11%, 97.93% 16.67%, 97.55% 22.22%, 98.08% 27.78%, 97.60% 33.33%, 99.92% 38.89%, 98.79% 44.44%, 97.55% 50.00%, 98.31% 55.56%, 97.66% 61.11%, 99.71% 66.67%, 98.78% 72.22%, 99.36% 77.78%, 98.59% 83.33%, 98.51% 88.89%, 99.97% 94.44%, 99.44% 100.00%, 94.44% 100.00%, 88.89% 100.00%, 83.33% 100.00%, 77.78% 100.00%, 72.22% 100.00%, 66.67% 100.00%, 61.11% 100.00%, 55.56% 100.00%, 50.00% 100.00%, 44.44% 100.00%, 38.89% 100.00%, 33.33% 100.00%, 27.78% 100.00%, 22.22% 100.00%, 16.67% 100.00%, 11.11% 100.00%, 5.56% 100.00%, 0.00% 100.00%, 0.73% 94.44%, 2.38% 88.89%, 1.99% 83.33%, 0.41% 77.78%, 2.07% 72.22%, 0.36% 66.67%, 1.61% 61.11%, 0.33% 55.56%, 0.00% 50.00%, 2.27% 44.44%, 0.54% 38.89%, 0.56% 33.33%, 2.55% 27.78%, 2.27% 22.22%, 0.75% 16.67%, 2.50% 11.11%, 1.40% 5.56%); }
.torn-6 { clip-path: polygon(0.00% 0.00%, 5.56% 0.00%, 11.11% 0.00%, 16.67% 0.00%, 22.22% 0.00%, 27.78% 0.00%, 33.33% 0.00%, 38.89% 0.00%, 44.44% 0.00%, 50.00% 0.00%, 55.56% 0.00%, 61.11% 0.00%, 66.67% 0.00%, 72.22% 0.00%, 77.78% 0.00%, 83.33% 0.00%, 88.89% 0.00%, 94.44% 0.00%, 100.00% 0.00%, 97.94% 5.56%, 97.86% 11.11%, 98.74% 16.67%, 99.32% 22.22%, 100.00% 27.78%, 98.28% 33.33%, 98.78% 38.89%, 98.02% 44.44%, 99.03% 50.00%, 98.00% 55.56%, 99.29% 61.11%, 97.92% 66.67%, 98.10% 72.22%, 98.92% 77.78%, 98.60% 83.33%, 98.23% 88.89%, 99.50% 94.44%, 98.56% 100.00%, 94.44% 100.00%, 88.89% 100.00%, 83.33% 100.00%, 77.78% 100.00%, 72.22% 100.00%, 66.67% 100.00%, 61.11% 100.00%, 55.56% 100.00%, 50.00% 100.00%, 44.44% 100.00%, 38.89% 100.00%, 33.33% 100.00%, 27.78% 100.00%, 22.22% 100.00%, 16.67% 100.00%, 11.11% 100.00%, 5.56% 100.00%, 0.00% 100.00%, 2.09% 94.44%, 0.69% 88.89%, 2.09% 83.33%, 1.78% 77.78%, 2.20% 72.22%, 0.87% 66.67%, 0.24% 61.11%, 2.08% 55.56%, 2.09% 50.00%, 1.16% 44.44%, 0.24% 38.89%, 0.51% 33.33%, 1.65% 27.78%, 0.76% 22.22%, 2.47% 16.67%, 1.53% 11.11%, 0.52% 5.56%); }
.torn-7 { clip-path: polygon(0.00% 0.00%, 5.56% 0.00%, 11.11% 0.00%, 16.67% 0.00%, 22.22% 0.00%, 27.78% 0.00%, 33.33% 0.00%, 38.89% 0.00%, 44.44% 0.00%, 50.00% 0.00%, 55.56% 0.00%, 61.11% 0.00%, 66.67% 0.00%, 72.22% 0.00%, 77.78% 0.00%, 83.33% 0.00%, 88.89% 0.00%, 94.44% 0.00%, 100.00% 0.00%, 99.16% 5.56%, 99.61% 11.11%, 98.31% 16.67%, 99.81% 22.22%, 98.61% 27.78%, 99.05% 33.33%, 99.85% 38.89%, 98.68% 44.44%, 99.90% 50.00%, 98.87% 55.56%, 99.82% 61.11%, 99.76% 66.67%, 98.90% 72.22%, 97.85% 77.78%, 99.68% 83.33%, 99.42% 88.89%, 98.37% 94.44%, 97.54% 100.00%, 94.44% 100.00%, 88.89% 100.00%, 83.33% 100.00%, 77.78% 100.00%, 72.22% 100.00%, 66.67% 100.00%, 61.11% 100.00%, 55.56% 100.00%, 50.00% 100.00%, 44.44% 100.00%, 38.89% 100.00%, 33.33% 100.00%, 27.78% 100.00%, 22.22% 100.00%, 16.67% 100.00%, 11.11% 100.00%, 5.56% 100.00%, 0.00% 100.00%, 1.50% 94.44%, 1.03% 88.89%, 2.54% 83.33%, 0.12% 77.78%, 2.23% 72.22%, 0.75% 66.67%, 0.38% 61.11%, 0.31% 55.56%, 0.80% 50.00%, 2.12% 44.44%, 0.47% 38.89%, 1.51% 33.33%, 1.66% 27.78%, 0.97% 22.22%, 1.42% 16.67%, 0.16% 11.11%, 0.15% 5.56%); }
.torn-8 { clip-path: polygon(0.00% 0.00%, 5.56% 0.00%, 11.11% 0.00%, 16.67% 0.00%, 22.22% 0.00%, 27.78% 0.00%, 33.33% 0.00%, 38.89% 0.00%, 44.44% 0.00%, 50.00% 0.00%, 55.56% 0.00%, 61.11% 0.00%, 66.67% 0.00%, 72.22% 0.00%, 77.78% 0.00%, 83.33% 0.00%, 88.89% 0.00%, 94.44% 0.00%, 100.00% 0.00%, 99.41% 5.56%, 97.50% 11.11%, 99.67% 16.67%, 98.17% 22.22%, 99.78% 27.78%, 99.36% 33.33%, 97.40% 38.89%, 99.46% 44.44%, 98.33% 50.00%, 98.81% 55.56%, 98.82% 61.11%, 98.71% 66.67%, 99.50% 72.22%, 97.84% 77.78%, 99.77% 83.33%, 99.39% 88.89%, 99.95% 94.44%, 99.31% 100.00%, 94.44% 100.00%, 88.89% 100.00%, 83.33% 100.00%, 77.78% 100.00%, 72.22% 100.00%, 66.67% 100.00%, 61.11% 100.00%, 55.56% 100.00%, 50.00% 100.00%, 44.44% 100.00%, 38.89% 100.00%, 33.33% 100.00%, 27.78% 100.00%, 22.22% 100.00%, 16.67% 100.00%, 11.11% 100.00%, 5.56% 100.00%, 0.00% 100.00%, 1.06% 94.44%, 2.35% 88.89%, 0.99% 83.33%, 0.30% 77.78%, 0.67% 72.22%, 2.58% 66.67%, 0.16% 61.11%, 1.61% 55.56%, 0.98% 50.00%, 1.72% 44.44%, 0.88% 38.89%, 1.80% 33.33%, 1.29% 27.78%, 1.69% 22.22%, 2.34% 16.67%, 1.51% 11.11%, 0.37% 5.56%); }
.torn-bas { clip-path: polygon(0.00% 0.00%, 1.67% 0.00%, 3.33% 0.00%, 5.00% 0.00%, 6.67% 0.00%, 8.33% 0.00%, 10.00% 0.00%, 11.67% 0.00%, 13.33% 0.00%, 15.00% 0.00%, 16.67% 0.00%, 18.33% 0.00%, 20.00% 0.00%, 21.67% 0.00%, 23.33% 0.00%, 25.00% 0.00%, 26.67% 0.00%, 28.33% 0.00%, 30.00% 0.00%, 31.67% 0.00%, 33.33% 0.00%, 35.00% 0.00%, 36.67% 0.00%, 38.33% 0.00%, 40.00% 0.00%, 41.67% 0.00%, 43.33% 0.00%, 45.00% 0.00%, 46.67% 0.00%, 48.33% 0.00%, 50.00% 0.00%, 51.67% 0.00%, 53.33% 0.00%, 55.00% 0.00%, 56.67% 0.00%, 58.33% 0.00%, 60.00% 0.00%, 61.67% 0.00%, 63.33% 0.00%, 65.00% 0.00%, 66.67% 0.00%, 68.33% 0.00%, 70.00% 0.00%, 71.67% 0.00%, 73.33% 0.00%, 75.00% 0.00%, 76.67% 0.00%, 78.33% 0.00%, 80.00% 0.00%, 81.67% 0.00%, 83.33% 0.00%, 85.00% 0.00%, 86.67% 0.00%, 88.33% 0.00%, 90.00% 0.00%, 91.67% 0.00%, 93.33% 0.00%, 95.00% 0.00%, 96.67% 0.00%, 98.33% 0.00%, 100.00% 0.00%, 100.00% 1.67%, 100.00% 3.33%, 100.00% 5.00%, 100.00% 6.67%, 100.00% 8.33%, 100.00% 10.00%, 100.00% 11.67%, 100.00% 13.33%, 100.00% 15.00%, 100.00% 16.67%, 100.00% 18.33%, 100.00% 20.00%, 100.00% 21.67%, 100.00% 23.33%, 100.00% 25.00%, 100.00% 26.67%, 100.00% 28.33%, 100.00% 30.00%, 100.00% 31.67%, 100.00% 33.33%, 100.00% 35.00%, 100.00% 36.67%, 100.00% 38.33%, 100.00% 40.00%, 100.00% 41.67%, 100.00% 43.33%, 100.00% 45.00%, 100.00% 46.67%, 100.00% 48.33%, 100.00% 50.00%, 100.00% 51.67%, 100.00% 53.33%, 100.00% 55.00%, 100.00% 56.67%, 100.00% 58.33%, 100.00% 60.00%, 100.00% 61.67%, 100.00% 63.33%, 100.00% 65.00%, 100.00% 66.67%, 100.00% 68.33%, 100.00% 70.00%, 100.00% 71.67%, 100.00% 73.33%, 100.00% 75.00%, 100.00% 76.67%, 100.00% 78.33%, 100.00% 80.00%, 100.00% 81.67%, 100.00% 83.33%, 100.00% 85.00%, 100.00% 86.67%, 100.00% 88.33%, 100.00% 90.00%, 100.00% 91.67%, 100.00% 93.33%, 100.00% 95.00%, 100.00% 96.67%, 100.00% 98.33%, 100.00% 100.00%, 98.33% 95.02%, 96.67% 93.84%, 95.00% 89.83%, 93.33% 94.88%, 91.67% 94.41%, 90.00% 93.54%, 88.33% 97.97%, 86.67% 94.37%, 85.00% 93.07%, 83.33% 91.28%, 81.67% 98.96%, 80.00% 96.66%, 78.33% 99.00%, 76.67% 91.09%, 75.00% 92.37%, 73.33% 99.54%, 71.67% 89.20%, 70.00% 89.39%, 68.33% 92.81%, 66.67% 93.23%, 65.00% 98.27%, 63.33% 99.83%, 61.67% 94.19%, 60.00% 99.34%, 58.33% 97.91%, 56.67% 97.34%, 55.00% 99.67%, 53.33% 94.90%, 51.67% 95.15%, 50.00% 90.73%, 48.33% 94.29%, 46.67% 92.96%, 45.00% 94.50%, 43.33% 92.71%, 41.67% 94.97%, 40.00% 96.94%, 38.33% 89.03%, 36.67% 89.05%, 35.00% 90.76%, 33.33% 92.21%, 31.67% 96.53%, 30.00% 97.47%, 28.33% 96.82%, 26.67% 99.23%, 25.00% 91.57%, 23.33% 95.60%, 21.67% 90.69%, 20.00% 95.75%, 18.33% 89.46%, 16.67% 90.68%, 15.00% 99.99%, 13.33% 97.69%, 11.67% 89.99%, 10.00% 94.83%, 8.33% 89.22%, 6.67% 95.63%, 5.00% 99.20%, 3.33% 93.08%, 1.67% 91.44%, 0.00% 97.03%, 0.00% 98.33%, 0.00% 96.67%, 0.00% 95.00%, 0.00% 93.33%, 0.00% 91.67%, 0.00% 90.00%, 0.00% 88.33%, 0.00% 86.67%, 0.00% 85.00%, 0.00% 83.33%, 0.00% 81.67%, 0.00% 80.00%, 0.00% 78.33%, 0.00% 76.67%, 0.00% 75.00%, 0.00% 73.33%, 0.00% 71.67%, 0.00% 70.00%, 0.00% 68.33%, 0.00% 66.67%, 0.00% 65.00%, 0.00% 63.33%, 0.00% 61.67%, 0.00% 60.00%, 0.00% 58.33%, 0.00% 56.67%, 0.00% 55.00%, 0.00% 53.33%, 0.00% 51.67%, 0.00% 50.00%, 0.00% 48.33%, 0.00% 46.67%, 0.00% 45.00%, 0.00% 43.33%, 0.00% 41.67%, 0.00% 40.00%, 0.00% 38.33%, 0.00% 36.67%, 0.00% 35.00%, 0.00% 33.33%, 0.00% 31.67%, 0.00% 30.00%, 0.00% 28.33%, 0.00% 26.67%, 0.00% 25.00%, 0.00% 23.33%, 0.00% 21.67%, 0.00% 20.00%, 0.00% 18.33%, 0.00% 16.67%, 0.00% 15.00%, 0.00% 13.33%, 0.00% 11.67%, 0.00% 10.00%, 0.00% 8.33%, 0.00% 6.67%, 0.00% 5.00%, 0.00% 3.33%, 0.00% 1.67%); }  /* bande papier du header */
.torn-zone { clip-path: polygon(0.00% 0.48%, 3.33% 1.09%, 6.67% 0.74%, 10.00% 1.21%, 13.33% 1.25%, 16.67% 0.13%, 20.00% 0.03%, 23.33% 1.67%, 26.67% 0.52%, 30.00% 0.47%, 33.33% 1.99%, 36.67% 0.94%, 40.00% 1.67%, 43.33% 0.95%, 46.67% 1.28%, 50.00% 0.30%, 53.33% 1.27%, 56.67% 1.74%, 60.00% 1.05%, 63.33% 1.48%, 66.67% 1.34%, 70.00% 0.13%, 73.33% 1.52%, 76.67% 1.18%, 80.00% 0.60%, 83.33% 0.06%, 86.67% 1.73%, 90.00% 0.95%, 93.33% 1.44%, 96.67% 1.76%, 100.00% 1.43%, 98.16% 3.33%, 99.21% 6.67%, 98.40% 10.00%, 99.11% 13.33%, 98.13% 16.67%, 98.24% 20.00%, 99.81% 23.33%, 99.73% 26.67%, 99.57% 30.00%, 98.07% 33.33%, 99.13% 36.67%, 98.75% 40.00%, 99.40% 43.33%, 98.99% 46.67%, 99.23% 50.00%, 99.30% 53.33%, 98.83% 56.67%, 98.83% 60.00%, 98.19% 63.33%, 98.64% 66.67%, 98.14% 70.00%, 98.29% 73.33%, 98.02% 76.67%, 98.66% 80.00%, 99.67% 83.33%, 98.28% 86.67%, 98.07% 90.00%, 98.19% 93.33%, 98.86% 96.67%, 98.57% 100.00%, 96.67% 99.58%, 93.33% 98.34%, 90.00% 98.85%, 86.67% 99.43%, 83.33% 99.87%, 80.00% 98.29%, 76.67% 98.02%, 73.33% 99.82%, 70.00% 98.40%, 66.67% 99.18%, 63.33% 99.70%, 60.00% 99.41%, 56.67% 98.46%, 53.33% 98.25%, 50.00% 99.91%, 46.67% 98.77%, 43.33% 99.91%, 40.00% 98.56%, 36.67% 99.34%, 33.33% 98.24%, 30.00% 98.04%, 26.67% 98.99%, 23.33% 98.00%, 20.00% 99.38%, 16.67% 99.85%, 13.33% 98.80%, 10.00% 99.94%, 6.67% 99.61%, 3.33% 99.18%, 0.00% 98.78%, 0.31% 96.67%, 0.08% 93.33%, 1.74% 90.00%, 0.63% 86.67%, 1.92% 83.33%, 1.79% 80.00%, 0.76% 76.67%, 0.92% 73.33%, 1.04% 70.00%, 1.29% 66.67%, 1.19% 63.33%, 1.12% 60.00%, 1.24% 56.67%, 1.88% 53.33%, 1.01% 50.00%, 0.86% 46.67%, 1.44% 43.33%, 0.48% 40.00%, 0.60% 36.67%, 1.96% 33.33%, 1.04% 30.00%, 1.10% 26.67%, 0.02% 23.33%, 0.83% 20.00%, 1.16% 16.67%, 0.04% 13.33%, 1.23% 10.00%, 1.26% 6.67%, 0.12% 3.33%); }  /* zone papier du hero */

/* =====================================================================
   MOSAE — feuille de style (direction A2.1 « Photo peinte, équilibrée »)
   Les jetons de couleur et les découpes .torn-* viennent de tokens.css,
   recopié tel quel en tête de ce fichier.
   ===================================================================== */

/* ---------- Réglages complémentaires ---------- */
:root {
  --blanc: #FFFFFF;            /* texte sur rouge : seul blanc atteint 4,5:1 */
  --gris-ticket: #6f665d;      /* labels sur ticket crème */
  --gris-kraft: #4a433d;       /* texte d'accompagnement sur kraft */
  --gris-clair-noir: #b8ae9f;  /* labels sur fond noir */

  --t-label: 13px;
  --t-hero: clamp(18px, 1.72vw, 22px);
  --t-corps: clamp(17px, 1.64vw, 21px);
  --t-liste: clamp(17px, 1.49vw, 19px);
  --t-lien: 16px;

  --bord: clamp(16px, 3.75vw, 48px);
  --gap-grille: clamp(14px, 1.6vw, 24px);
  --gap-ticket: clamp(14px, 1.4vw, 20px);
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }

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

body {
  margin: 0;
  background: var(--creme);
  color: var(--encre);
  font-family: var(--police);
  font-size: var(--t-corps);
  line-height: var(--r-corps);
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}

img, svg, picture { display: block; max-width: 100%; }
img { height: auto; }
/* <picture> doit porter la hauteur, sinon le height:100% de l'image ne résout pas. */
.accroche-photo picture, .cours-photo picture, .tuteur-photo picture { width: 100%; height: 100%; }

h1, h2, h3, p, ul, ol, figure, blockquote { margin: 0; }
ul, ol { padding: 0; list-style: none; }

a { color: inherit; }

/* Texte réservé aux lecteurs d'écran et au référencement. */
.vh {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  overflow: hidden; white-space: nowrap;
  clip: rect(0 0 0 0); clip-path: inset(50%);
}

.saut {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--encre); color: var(--creme);
  padding: 14px 20px; font-size: var(--t-lien); font-weight: 600;
}
.saut:focus { left: 0; }

/* Focus visible partout. Le contour est encre par défaut : posé à 3 px à
   l'extérieur, il tombe sur le papier crème ou kraft, jamais sur le rouge
   du bouton. Sur les fonds noirs, il passe en crème. */
:focus-visible {
  outline: 3px solid var(--encre);
  outline-offset: 3px;
}
.sur-noir :focus-visible,
.menu-plein :focus-visible,
.pied :focus-visible,
.saut:focus-visible {
  outline-color: var(--creme);
}

.wrap {
  width: 100%;
  max-width: 1280px;
  margin-inline: auto;
  padding-inline: var(--bord);
}

/* ---------- Grain et papier ---------- */
.grain { position: relative; }
.grain > .voile-grain {
  position: absolute; inset: 0;
  background-image: url("svg/textures/grain.svg");
  background-size: 300px 300px;
  mix-blend-mode: overlay;
  opacity: .16;
  pointer-events: none;
  z-index: 2;
}
.voile-papier {
  position: absolute; inset: 0;
  background-image: url("svg/textures/papier.svg");
  background-size: 600px 600px;
  mix-blend-mode: multiply;
  opacity: .1;
  pointer-events: none;
  z-index: 1;
}

/* ---------- Trois voix typographiques ---------- */

/* 1 · lettrage peint (SVG, jamais une police) */
.peint { display: block; color: inherit; }
.peint svg { width: 100%; height: auto; overflow: visible; }

/* 2 · Familjen Grotesk */
.label {
  font-size: var(--t-label);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .09em;
  line-height: 1.3;
}
.corps { font-size: var(--t-corps); line-height: 1.65; }
.valeur { font-weight: 500; }
.titre-fonctionnel {
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -.02em;
}

/* ---------- Bouton pinceau ---------- */
.pinceau {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 60px;
  min-width: 44px;
  padding: 8px 26px;
  color: var(--blanc);
  font-size: var(--t-lien);
  font-weight: 600;
  line-height: 1.25;
  text-align: center;
  text-decoration: none;
  border: 0;
  background: none;
  cursor: pointer;
  font-family: inherit;
}
.pinceau .touche {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  color: var(--rouge);
  z-index: 0;
  pointer-events: none;
}
.pinceau .touche svg { width: 100%; height: 100%; overflow: visible; display: block; }
.pinceau .touche path { stroke-dasharray: 1; stroke-dashoffset: 0; }
.pinceau > span { position: relative; z-index: 1; }
.pinceau--noir .touche { color: var(--encre); }

@keyframes redessine { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
.pinceau:hover .touche path,
.pinceau:focus-visible .touche path { animation: redessine 220ms ease-out; }

/* Lien souligné */
.lien-souligne {
  font-size: var(--t-lien);
  font-weight: 600;
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 6px;
  display: inline-block;
  padding-block: 11px;   /* 22 + 22 + interligne : zone cliquable >= 44 px */
}

/* ---------- En-tête ---------- */
.entete {
  position: absolute; top: 0; left: 0; right: 0;
  z-index: 20;
  height: 92px;
  background: var(--creme);
  padding-bottom: 8px;
}
.entete-bande { display: flex; align-items: center; justify-content: space-between; gap: 16px; height: 100%; }
.entete-marque { display: inline-flex; align-items: center; min-height: 44px; }
.entete-marque img { height: 40px; width: auto; }

.nav-bureau { display: flex; gap: 34px; align-items: center; }
.nav-bureau a {
  font-size: var(--t-lien);
  font-weight: 500;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}
.nav-bureau a:hover { text-decoration: underline; text-underline-offset: 5px; text-decoration-thickness: 2px; }
.entete .pinceau { min-height: 52px; width: 176px; padding: 6px 14px; }

.bouton-menu {
  display: none;
  min-height: 44px; min-width: 88px;
  padding: 0 16px;
  border: 2px solid var(--encre);
  background: transparent;
  color: var(--encre);
  font-family: inherit;
  font-size: var(--t-lien);
  font-weight: 600;
  cursor: pointer;
}

/* Menu plein écran (mobile) */
.menu-plein {
  position: fixed; inset: 0; z-index: 60;
  background: var(--encre);
  color: var(--creme);
  padding: 24px var(--bord) 40px;
  display: none;
  flex-direction: column;
  gap: 8px;
  overflow-y: auto;
}
.menu-plein[data-ouvert="true"] { display: flex; }
.menu-tete { display: flex; align-items: center; justify-content: space-between; margin-bottom: 18px; }
.menu-tete img { height: 40px; width: auto; }
.menu-fermer {
  min-height: 44px; min-width: 88px; padding: 0 16px;
  border: 2px solid var(--creme); background: transparent; color: var(--creme);
  font-family: inherit; font-size: var(--t-lien); font-weight: 600; cursor: pointer;
}
.menu-liens { display: flex; flex-direction: column; }
.menu-liens a {
  font-size: clamp(24px, 7vw, 32px);
  font-weight: 700;
  letter-spacing: -.02em;
  text-decoration: none;
  padding: 12px 0;
  min-height: 44px;
  border-bottom: 1px solid #3a3430;
}
.menu-secondaire { display: flex; flex-wrap: wrap; gap: 10px 22px; margin-top: 22px; }
.menu-secondaire a {
  font-size: var(--t-lien); font-weight: 500;
  display: inline-flex; align-items: center; min-height: 44px;
  text-decoration: underline; text-underline-offset: 5px;
}
.menu-plein .pinceau { margin-top: 26px; width: 100%; }

/* ---------- Accroche ---------- */
.accroche {
  position: relative;
  min-height: 880px;
  background: var(--encre);
  color: var(--creme);
  display: flex;
  flex-direction: column;
  padding-top: 120px;
  padding-bottom: 80px;
  isolation: isolate;
}
.accroche-photo { position: absolute; inset: 0; z-index: 0; }
.accroche-photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 40%; }
.accroche .wrap { position: relative; z-index: 3; display: flex; flex-direction: column; flex: 1; }

.accroche-titres { display: flex; flex-direction: column; }
.titre-sbe { width: min(100%, 1190px); margin-left: -8px; transform: rotate(-1.5deg); }
.titre-fr { width: min(66%, 800px); margin-left: clamp(0px, 17vw, 210px); margin-top: clamp(20px, 3.6vw, 48px); transform: rotate(-3deg); color: var(--rouge); }
.titre-sbe-mobile { display: none; }

.annotation {
  position: absolute;
  right: 5%;
  top: 57%;
  width: 355px;
  z-index: 4;
  transform: rotate(-4deg);
  color: var(--creme);
  display: none;
}
/* Ombre portée très douce : le marqueur crème reste lisible quand il tombe
   sur une zone claire de la photo, sans changer sa couleur ni sa place. */
.annotation svg { width: 100%; height: auto; overflow: visible; filter: drop-shadow(0 0 3px rgba(19, 17, 16, .9))
          drop-shadow(0 0 7px rgba(19, 17, 16, .7))
          drop-shadow(0 2px 3px rgba(19, 17, 16, .5)); }
.annotation .ligne2 { width: 58%; margin-top: 4px; }

.accroche-carte-zone { margin-top: auto; padding-top: clamp(36px, 6vw, 96px); }
.accroche-carte {
  position: relative;
  width: min(100%, 580px);
  background: var(--creme);
  color: var(--encre);
  padding: 30px 32px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.accroche-carte > * { position: relative; z-index: 2; }
.accroche-carte .voile-papier { z-index: 1; }
.accroche-texte { font-size: var(--t-hero); line-height: 1.7; }
.accroche-actions { display: flex; flex-wrap: wrap; gap: 16px 40px; align-items: center; }
.accroche-actions .pinceau { width: 280px; }

/* ---------- Le cours ---------- */
.cours { background: var(--encre); color: var(--creme); }
.cours-grille { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); }
.cours-photo { grid-column: 1 / span 7; position: relative; height: 680px; overflow: hidden; }
.cours-photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; }
.cours-qm1 {
  position: absolute; left: 7%; top: 13%; width: 82%;
  z-index: 3; color: var(--creme);
}
.cours-cercle {
  position: absolute; left: 3%; top: 10%; width: 75%;
  z-index: 2; color: var(--rouge);
}
.cours-cercle svg { width: 100%; height: auto; overflow: visible; }

.cours-bloc { grid-column: 8 / span 5; padding: 76px 52px 60px 44px; display: flex; flex-direction: column; gap: 18px; }
.cours-titre { font-size: clamp(30px, 3.13vw, 40px); }
.cours-liste { display: flex; flex-direction: column; gap: 12px; }
.cours-liste li { display: flex; gap: 14px; align-items: baseline; font-size: var(--t-liste); line-height: 1.6; }
.cours-num {
  flex: none;
  color: var(--rouge);
  font-size: 19px;      /* 19 px / 700 : « grand texte » AA sur fond noir */
  font-weight: 700;
  letter-spacing: .02em;
  font-variant-numeric: tabular-nums;
}
.cours-bloc .pinceau { width: 260px; align-self: flex-start; margin-top: 6px; }

/* ---------- Infos pratiques : tickets imprimés ---------- */
.pratique { position: relative; background: var(--kraft); padding-block: clamp(48px, 6vw, 80px) clamp(54px, 7vw, 90px); }
.pratique-tete { display: flex; align-items: flex-end; gap: 20px; margin-bottom: clamp(26px, 3.4vw, 44px); }
.pratique-tete .peint { width: min(85%, 1007px); flex: none; }
.pratique-lead { font-size: clamp(17px, 1.49vw, 19px); line-height: 1.6; color: var(--gris-kraft); padding-bottom: 14px; }

.tickets { display: flex; flex-direction: column; gap: var(--gap-ticket); }
.ticket-ligne {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--gap-ticket);
  align-items: stretch;
}

.ticket {
  position: relative;
  height: 100%;
  background: var(--ticket);
  color: var(--encre);
  padding: 26px 30px;
  overflow: hidden;
  filter: drop-shadow(0 2px 1px rgba(19, 17, 16, .18));
  transition: transform 180ms ease-out, filter 180ms ease-out;
}
.ticket::after {
  content: "";
  position: absolute; inset: 0;
  background-image: url("svg/textures/grain.svg");
  background-size: 300px 300px;
  mix-blend-mode: multiply;
  opacity: .07;
  pointer-events: none;
}
.ticket-label { color: var(--gris-ticket); margin-bottom: 10px; }
.ticket-valeur {
  font-size: clamp(26px, 2.5vw, 32px);
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: -.015em;
}
.ticket--noir { background: var(--encre); color: var(--creme); }
.ticket--noir .ticket-label { color: var(--gris-clair-noir); }
.ticket--noir::after { mix-blend-mode: overlay; opacity: .14; }

/* rotations régulières, entre -1,2° et +1,4° */
.ticket--r1 { transform: rotate(-1.2deg); }
.ticket--r2 { transform: rotate(0.8deg); }
.ticket--r3 { transform: rotate(-0.5deg); }
.ticket--r4 { transform: rotate(1.4deg); }
.ticket--r5 { transform: rotate(0.7deg); }
.ticket--r6 { transform: rotate(-0.8deg); }

.t-date   { grid-column: span 3; }
.t-heure  { grid-column: span 3; }
.t-format { grid-column: span 3; }
.t-places { grid-column: span 3; }
.t-lieu   { grid-column: span 4; }
.t-prix   { grid-column: span 8; }

/* le ticket rouge : tout est cliquable */
.ticket--rouge {
  background: var(--rouge);
  color: var(--blanc);
  display: flex;
  align-items: stretch;
  padding: 0;
  text-decoration: none;
  filter: drop-shadow(0 3px 1px rgba(19, 17, 16, .22));
}
.ticket--rouge::after { mix-blend-mode: overlay; opacity: .12; }
.ticket-prix-bloc { padding: 26px 30px; display: flex; flex-direction: column; gap: 8px; justify-content: center; }
.ticket--rouge .ticket-label { color: var(--blanc); margin-bottom: 0; }
.ticket-prix {
  font-size: clamp(38px, 4.1vw, 52px);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -.02em;
}
.ticket-action {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 20px 32px;
  border-left: 3px dashed rgba(255, 255, 255, .6);
  font-size: clamp(18px, 1.72vw, 22px);
  font-weight: 600;
}
.ticket-fleche { font-size: 1.15em; }

.ticket--rouge:hover, .ticket--rouge:focus-visible { filter: drop-shadow(0 8px 6px rgba(19, 17, 16, .28)); }
.ticket--rouge:hover { transform: rotate(-0.8deg) translateY(-2px); }
.ticket--rouge:focus-visible { outline: 3px solid var(--encre); outline-offset: 4px; }

.ticket--lien:hover { transform: translateY(-2px); }
.ticket--r1.ticket--lien:hover { transform: rotate(-1.2deg) translateY(-2px); }

.pratique-note { font-size: var(--t-lien); line-height: 1.6; color: var(--gris-texte); margin-top: 14px; }

/* ---------- Tuteurs ---------- */
.tuteurs {
  padding-block: clamp(54px, 7vw, 90px);
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--gap-grille);
  row-gap: 40px;
  align-items: center;
}
.tuteurs-texte { grid-column: 1 / span 5; display: flex; flex-direction: column; gap: 18px; }
.tuteurs-texte .peint { width: min(100%, 752px); }
.tuteurs-accroche { font-size: clamp(24px, 2.35vw, 30px); font-weight: 700; line-height: 1.2; letter-spacing: -.015em; }
.tuteurs-carte-zone { grid-column: 7 / span 6; }
.tuteur-carte { background: var(--encre); color: var(--creme); box-shadow: 8px 8px 0 var(--rouge); }
.tuteur-photo { position: relative; height: 530px; overflow: hidden; }
.tuteur-photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; }
.tuteur-prenom { position: absolute; left: 4%; bottom: 2.5%; width: 93%; z-index: 3; color: var(--creme); }
.tuteur-infos { padding: 22px 24px 26px; display: flex; flex-direction: column; gap: 10px; }
.tuteur-programme { font-size: clamp(20px, 1.72vw, 22px); font-weight: 700; line-height: 1.3; }
.tuteur-parcours { font-size: var(--t-lien); line-height: 1.5; color: var(--gris-sur-noir); }
.tuteur-phrase { font-size: var(--t-lien); line-height: 1.55; font-style: italic; }
.tuteur-infos .pinceau { width: 100%; max-width: 320px; margin-top: 8px; }

/* ---------- Une question ? ---------- */
.question { position: relative; background: var(--encre); color: var(--creme); padding-block: clamp(54px, 6.5vw, 80px) clamp(48px, 5.5vw, 70px); }
.question-titre {
  font-size: clamp(46px, 9.4vw, 120px);
  font-weight: 700;
  line-height: .95;
  letter-spacing: -.035em;
}
.question-bas { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 26px; margin-top: 14px; }
.question-bas .peint { width: min(100%, 990px); flex: 1 1 420px; color: var(--rouge); }
.question-actions { display: flex; flex-direction: column; gap: 10px; align-items: flex-start; }
.question-actions .pinceau { width: 270px; min-height: 64px; }
.question-note { font-size: var(--t-lien); line-height: 1.5; color: var(--gris-sur-noir); }
.question-mail { margin-top: -6px; }
.question-mail a { display: inline-flex; align-items: center; min-height: 44px; color: var(--creme); text-underline-offset: 3px; overflow-wrap: anywhere; }

.formulaire-repli { margin-top: 40px; border-top: 1px solid #3a3430; padding-top: 22px; }
.formulaire-repli > summary {
  font-size: var(--t-lien); font-weight: 600; cursor: pointer;
  min-height: 44px; display: flex; align-items: center;
}
.formulaire { display: grid; gap: 18px; max-width: 640px; margin-top: 20px; }
.champ { display: flex; flex-direction: column; gap: 6px; }
.champ label, .champ legend { font-size: var(--t-lien); font-weight: 600; }
.champ input, .champ select, .champ textarea {
  font-family: inherit; font-size: var(--t-lien);
  min-height: 44px; padding: 10px 12px;
  border: 2px solid var(--gris-sur-noir);
  background: var(--encre); color: var(--creme);
}
.champ textarea { min-height: 88px; }
.champ fieldset { border: 0; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; }
.choix { display: flex; flex-wrap: wrap; gap: 8px 12px; }
.choix label {
  display: inline-flex; align-items: center; gap: 10px;
  min-height: 44px; min-width: 44px; padding: 0 10px 0 4px;
  font-size: var(--t-lien); font-weight: 400; cursor: pointer;
}
.choix input[type="radio"] { width: 22px; height: 22px; min-height: 22px; padding: 0; margin: 0; accent-color: var(--rouge); flex: none; }
.champ-erreur { color: #ffb3ad; font-size: var(--t-lien); }
.formulaire-actions { display: flex; flex-wrap: wrap; gap: 14px; }
.formulaire-actions .pinceau { width: 260px; }
.formulaire-etat { font-size: var(--t-lien); color: var(--gris-sur-noir); min-height: 24px; }

/* ---------- Pied de page ---------- */
.pied { position: relative; background: var(--encre); color: var(--creme); padding: 46px var(--bord) 34px; display: flex; flex-direction: column; gap: 26px; }
.pied-haut { display: flex; align-items: flex-end; justify-content: space-between; flex-wrap: wrap; gap: 22px; }
.pied-marque img { height: 64px; width: auto; }
.pied-liens { display: flex; flex-wrap: wrap; gap: 8px 26px; justify-content: flex-end; max-width: 620px; }
.pied-liens a {
  font-size: var(--t-lien); font-weight: 500; text-decoration: none;
  display: inline-flex; align-items: center; min-height: 44px;
}
.pied-liens a:hover { text-decoration: underline; text-underline-offset: 5px; text-decoration-thickness: 2px; }
.pied-bas { font-size: var(--t-lien); line-height: 1.5; color: var(--gris-clair-noir); border-top: 1px solid #3a3430; padding-top: 18px; }

/* ---------- Pages légales ---------- */
.page-legale .entete { position: static; background: var(--creme); border-bottom: 2px solid rgba(19, 17, 16, .12); }
.page-legale .entete.torn-bas { clip-path: none; }
.legal-contenu { padding-block: clamp(40px, 5vw, 72px) clamp(54px, 7vw, 90px); max-width: 760px; }
.legal-contenu h1 { font-size: clamp(32px, 4vw, 48px); font-weight: 700; line-height: 1.1; letter-spacing: -.02em; margin-bottom: 26px; }
.legal-contenu h2 { font-size: clamp(22px, 2.2vw, 26px); font-weight: 700; line-height: 1.25; margin-top: 36px; margin-bottom: 10px; }
.legal-contenu p { margin-bottom: 14px; }
.legal-contenu a { text-decoration: underline; text-underline-offset: 4px; }
.legal-contenu p a { position: relative; }
.legal-contenu p a::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 44px; min-width: 44px; transform: translateY(-50%); } /* zone cliquable de 44 px sans changer l'interlignage */
.legal-retour { margin-top: 40px; }

/* ---------- Apparition au scroll ---------- */
.js .apparait { opacity: 0; transform: translateY(8px); }
.js .apparait.est-visible {
  opacity: 1; transform: none;
  transition: opacity 520ms ease-out, transform 520ms ease-out;
}

/* ---------- Points de rupture ---------- */
@media (min-width: 1100px) {
  .annotation { display: block; }
}

@media (max-width: 1099px) {
  .accroche-actions .pinceau { width: min(100%, 320px); }
}

@media (max-width: 899px) {
  .cours-grille { grid-template-columns: 1fr; }
  .cours-photo { grid-column: 1; height: clamp(300px, 48vw, 440px); }
  .cours-bloc { grid-column: 1; padding: 32px var(--bord) 44px; }
  .cours-bloc .pinceau { width: 100%; max-width: 420px; }

  .tuteurs-texte, .tuteurs-carte-zone { grid-column: 1 / -1; }
  .tuteur-photo { height: clamp(340px, 62vw, 530px); }

  .pratique-tete { flex-direction: column; align-items: flex-start; gap: 18px; }
  .pratique-tete .peint { width: min(100%, 520px); }
  .pratique-lead { padding-bottom: 0; }

  /* display:contents sort les tickets de leurs deux lignes : ils deviennent
     les enfants directs de .tickets, et `order` peut alors les réordonner. */
  .ticket-ligne { display: contents; }
  .ticket { height: auto; }
  .t-date, .t-heure, .t-format, .t-places, .t-lieu, .t-prix { grid-column: auto; }

  /* Ordre mobile : Date, Horaire, Format, Lieu, Places, puis le ticket rouge. */
  .tickets { display: flex; flex-direction: column; gap: var(--gap-ticket); }
  .t-date { order: 1; }
  .t-heure { order: 2; }
  .t-format { order: 3; }
  .t-lieu { order: 4; }
  .t-places { order: 5; }
  .t-prix { order: 6; }

  /* perforation horizontale */
  .ticket--rouge { flex-direction: column; }
  .ticket-action { border-left: 0; border-top: 3px dashed rgba(255, 255, 255, .6); justify-content: space-between; padding: 18px 26px; }
  .ticket-prix-bloc { padding: 24px 26px 18px; }

  .question-bas { flex-direction: column; align-items: flex-start; }
  .question-bas .peint { width: 100%; flex: none; }
  .question-actions { width: 100%; }
  .question-actions .pinceau { width: 100%; max-width: 420px; }

  .pied-haut { flex-direction: column; align-items: flex-start; }
  .pied-liens { justify-content: flex-start; max-width: none; }
}

@media (max-width: 767px) {
  .nav-bureau { display: none; }
  .entete .pinceau { display: none; }
  .bouton-menu { display: inline-flex; align-items: center; justify-content: center; }
  .entete { height: 70px; padding-bottom: 6px; }
  .entete-marque img { height: 40px; }

  .accroche { min-height: 800px; padding-top: 90px; padding-bottom: 24px; }
  .accroche-photo img { object-position: 35% 40%; }
  .titre-sbe { display: none; }
  .titre-sbe-mobile { display: flex; flex-direction: column; gap: 4px; width: 100%; margin-left: -4px; transform: rotate(-2deg); }
  .titre-sbe-mobile .peint:first-child { width: min(96%, 360px); }
  .titre-sbe-mobile .peint:last-child { width: min(90%, 340px); }
  .titre-fr { width: min(88%, 330px); margin-left: 8px; margin-top: 30px; }
  .accroche-carte { width: 100%; padding: 22px 18px; gap: 14px; }
  .accroche-texte { font-size: max(17px, var(--t-hero)); }
  .accroche-actions { flex-direction: column; align-items: stretch; gap: 14px; }
  .accroche-actions .pinceau { width: 100%; }
  .lien-souligne { align-self: flex-start; }

  .ticket { padding: 22px 22px; }
  .ticket-prix-bloc { padding: 22px 22px 16px; }
  .ticket-action { padding: 16px 22px; }

  .tuteur-prenom { width: 90%; }
  .pied-marque img { height: 52px; }
}

@media (max-width: 400px) {
  .entete .entete-bande { gap: 8px; }
  .bouton-menu { min-width: 80px; padding: 0 12px; }
}

/* ---------- Mouvement réduit ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  .js .apparait { opacity: 1; transform: none; }
  .ticket--rouge:hover, .ticket--lien:hover { transform: none; }
  .ticket--r1.ticket--lien:hover { transform: rotate(-1.2deg); }
}

/* ---------- Impression ---------- */
@media print {
  .entete, .menu-plein, .voile-grain, .voile-papier { display: none !important; }
  body { background: #fff; color: #000; }
}

/* ===== Refonte du 23/09/2026 : hero plus lisible, image de la slide 2, nouvelle slide tuteur ===== */
/* Hero : titres d'origine, un peu plus visibles */
.accroche::before { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(180deg, rgba(19,17,16,.46) 0%, rgba(19,17,16,.30) 30%, rgba(19,17,16,0) 56%); }
.titre-sbe svg, .titre-sbe-mobile svg { filter: drop-shadow(0 2px 4px rgba(19,17,16,.55)); }
.titre-fr svg { filter: drop-shadow(0 2px 4px rgba(19,17,16,.45)); }
.annotation--claire { width: 300px; }

/* Slide 2 : images de gauche */
.voile-alt { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.alt-groupe .voile-alt { background: linear-gradient(180deg, rgba(19,17,16,0) 42%, rgba(19,17,16,.62) 100%); }
.alt-groupe .cours-qm1 { left: 7%; top: auto; bottom: 8%; width: 54%; }
.alt-groupe .cours-cercle { left: 3%; top: auto; bottom: 4%; width: 50%; }

/* Tuteurs : la slide de la bêta, lettrage d'origine */
.tuteurs-v3 { background: var(--encre); color: var(--creme); }
.tuteurs-v3 .tu { padding-block: clamp(52px, 7vw, 90px); display: grid; gap: 26px; }
.tuteurs-v3 .label { color: var(--gris-clair-noir); }
.tuteurs-v3 .ident { display: grid; grid-template-columns: 38% 1fr; gap: 16px; align-items: end; margin-top: 14px; }
.tuteurs-v3 .cadre-papier { background: var(--creme); padding: 6px; transform: rotate(-2.5deg); filter: drop-shadow(0 3px 2px rgba(19,17,16,.3)); }
.tuteurs-v3 .vignette { aspect-ratio: 4 / 5; overflow: hidden; }
.tuteurs-v3 .vignette picture { display: block; width: 100%; height: 100%; }
.tuteurs-v3 .vignette img { width: 100%; height: 100%; object-fit: cover; }
.tuteurs-v3 .t-samuel { color: var(--rouge); width: 100%; }
.tuteurs-v3 .qui { font-size: 17px; font-weight: 600; color: var(--gris-sur-noir); margin-top: 8px; }
.tuteurs-v3 .tu-phrase { font-size: 24px; font-weight: 700; line-height: 1.25; letter-spacing: -.015em; margin-top: 22px; }
.tuteurs-v3 .stats { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.tuteurs-v3 .stat { background: var(--creme); color: var(--encre); padding: 16px 16px 18px; display: flex; flex-direction: column; gap: 8px;
  filter: drop-shadow(0 2px 1px rgba(19,17,16,.18)); }
.tuteurs-v3 .stat:first-child { transform: rotate(-1deg); }
.tuteurs-v3 .stat:last-child { transform: rotate(1.2deg); }
.tuteurs-v3 .stat .note { color: var(--rouge); width: 80%; }
.tuteurs-v3 .stat-label { font-size: 16px; color: var(--gris-texte); }
.tuteurs-v3 .preuves { margin: 22px 0; }
.tuteurs-v3 .preuves li { font-size: 18px; line-height: 1.5; padding: 12px 0; border-top: 1px solid #3a3430; }
.tuteurs-v3 .pinceau { width: 100%; max-width: 340px; }
@media (min-width: 900px) {
  .tuteurs-v3 .tu { grid-template-columns: 5fr 7fr; gap: 56px; align-items: center; }
  .tuteurs-v3 .ident { grid-template-columns: 200px 1fr; }
  .tuteurs-v3 .tu-phrase { font-size: 30px; }
}
/* Deux sections noires se suivent : un filet les sépare. */
.question { border-top: 1px solid #2f2a27; }