/* La vitrine publique — P56, aperçu validé par Luca le 01/11.
   Inspirée de yazio.com à sa demande : un aplat pastel, un titre énorme et
   centré, la marmite qui dépasse derrière une rangée de téléphones, puis des
   bandes de couleur franches. ⛔ Feuille à part : la vitrine ne charge ni
   `app.css` ni `app.js`, et l'app n'en charge rien. */

/* ⚠️ **Nunito sans `size-adjust`.** L'app ramène Nunito à la chasse de Caveat
   (74,4 %) ; la vitrine n'a pas cette échelle, donc sa propre face. */
@font-face {
  font-family: "Nunito Vitrine";
  src: url("/static/fonts/nunito/nunito-latin.woff2?v=1") format("woff2");
  font-weight: 200 1000; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Caveat Vitrine";
  src: url("/static/fonts/caveat/caveat-latin.woff2?v=2") format("woff2");
  font-weight: 400 700; font-style: normal; font-display: swap;
}

:root {
  --peche: #FDE6D6; --peche-clair: #FFF5EC; --creme: #FFFBF6;
  --terre: #C65A2E; --terre-fonce: #A94A2A; --terre-nuit: #7A3118;
  --sauge: #DCE5C6; --beurre: #FBE8AE; --rose: #F9D6CF; --menthe: #D3EBDD;
  --encre: #1F1813; --encre-douce: #5B4E44; --trait: #EADBCB;
  --titre: "Nunito Vitrine", ui-rounded, "SF Pro Rounded", system-ui, sans-serif;
  --main: "Caveat Vitrine", "Segoe Print", "Bradley Hand", cursive;
  color-scheme: light;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--creme); color: var(--encre); font-family: var(--titre); font-weight: 500; font-size: 18px; line-height: 1.55; overflow-x: hidden; }
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
:focus-visible { outline: 3px solid var(--terre); outline-offset: 3px; border-radius: 10px; }
h1, h2, h3 { text-wrap: balance; margin: 0; font-weight: 900; letter-spacing: -.02em; line-height: 1.02; }
.cadre { max-width: 1180px; margin: 0 auto; padding-left: max(20px, env(safe-area-inset-left, 0px)); padding-right: max(20px, env(safe-area-inset-right, 0px)); }
.main { font-family: var(--main); font-weight: 700; color: var(--terre); letter-spacing: 0; display: inline-block; position: relative; }
.main svg { position: absolute; left: 2%; bottom: -.08em; width: 96%; height: .22em; color: var(--terre); }

/* Bouton en relief, la signature */
.bouton { display: inline-flex; align-items: center; justify-content: center; min-height: 52px; padding: 0 26px; border-radius: 16px; font-weight: 800; font-size: 17px; text-decoration: none; white-space: nowrap; transition: transform .12s ease, box-shadow .12s ease; }
.bouton.fonce { background: var(--encre); color: #fff; box-shadow: 0 4px 0 var(--terre); }
.bouton.fonce:hover { transform: translateY(-2px); box-shadow: 0 6px 0 var(--terre); }
.bouton.fonce:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--terre); }
.bouton.clair { background: #fff; color: var(--encre); box-shadow: inset 0 0 0 2px var(--encre), 0 4px 0 var(--encre); }
.bouton.clair:hover { transform: translateY(-2px); box-shadow: inset 0 0 0 2px var(--encre), 0 6px 0 var(--encre); }
.bouton.grand { min-height: 62px; padding: 0 34px; font-size: 19px; border-radius: 18px; }

/* En-tête */
.entete { position: relative; z-index: 5; padding-top: env(safe-area-inset-top, 0px); }
.entete .cadre { display: flex; align-items: center; gap: 32px; min-height: 96px; }
.entete .logo { flex: 0 0 auto; }
.entete .logo img { height: 50px; width: auto; }
.entete .cadre > nav { display: flex; gap: 36px; flex: 1; justify-content: center; }
.entete .cadre > nav a { text-decoration: none; font-weight: 800; font-size: 17px; }
.entete .cadre > nav a:hover { color: var(--terre-fonce); }
.entete .droite { display: flex; align-items: center; gap: 18px; margin-left: auto; }
.entete .connexion { font-weight: 800; text-decoration: none; white-space: nowrap; }
.langues { display: flex; gap: 2px; font-size: 14px; font-weight: 800; }
.langues a { text-decoration: none; color: var(--encre-douce); padding: 6px 8px; border-radius: 10px; }
.langues a:hover { color: var(--terre-fonce); }
.langues a[aria-current] { color: var(--encre); background: rgba(255, 255, 255, .7); }
.pied .bas .langues a { padding: 2px 6px; }
.entete .connexion:hover { color: var(--terre-fonce); }

/* Ouverture */
.ouverture { background: linear-gradient(180deg, var(--peche) 0%, var(--peche-clair) 100%); overflow: hidden; text-align: center; }
.ouverture h1 { font-size: clamp(50px, 7.6vw, 108px); margin: 28px auto 0; max-width: 12ch; }
.ouverture .chapo { font-size: clamp(18px, 1.6vw, 22px); max-width: 640px; margin: 22px auto 0; color: var(--encre-douce); font-weight: 600; }
.ouverture .appels { display: flex; justify-content: center; flex-wrap: wrap; gap: 14px; margin-top: 34px; }
.ouverture .sous { font-size: 15px; color: var(--encre-douce); margin: 18px 0 0; font-weight: 600; }
.ouverture .sous a { font-weight: 800; }
.scene { position: relative; margin-top: 44px; height: clamp(560px, 44vw, 680px); }
.mascotte { position: absolute; left: 50%; bottom: clamp(300px, 26vw, 400px); width: clamp(190px, 17vw, 250px); transform: translateX(-50%); z-index: 1; }
.mascotte .couvercle { width: 72%; margin: 0 auto -7%; animation: souleve 3.2s ease-in-out infinite; transform-origin: 30% 100%; }
.mascotte .ingredient { position: absolute; width: 56px; animation: saute 3.2s ease-in-out infinite; }
.mascotte .i1 { left: -42px; top: 6%; width: 62px; animation-delay: .2s; }
.mascotte .i2 { right: -50px; top: -4%; width: 72px; animation-delay: .6s; }
.mascotte .i3 { right: -18px; top: 38%; width: 46px; animation-delay: 1s; }
@keyframes souleve { 0%, 55%, 100% { transform: translateY(0) rotate(0); } 25% { transform: translateY(-26px) rotate(-8deg); } }
@keyframes saute { 0%, 100% { transform: translateY(0) rotate(0); } 50% { transform: translateY(-12px) rotate(8deg); } }
.telephones { position: absolute; left: 50%; bottom: 0; transform: translateX(-50%); display: flex; gap: clamp(14px, 2vw, 30px); align-items: flex-start; z-index: 2; }
.tel { width: clamp(200px, 17vw, 264px); flex: 0 0 auto; border: 10px solid var(--encre); border-bottom: 0; border-radius: 46px 46px 0 0; background: var(--encre); overflow: hidden; height: clamp(300px, 28vw, 390px); }
.tel img { border-radius: 34px 34px 0 0; width: 100%; height: auto; }
.tel.haut { height: clamp(340px, 31vw, 440px); margin-top: -40px; }

/* Trois gestes */
.gestes { padding-block: 120px 110px; }
.gestes .cadre { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: 64px; align-items: center; }
.gestes ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 28px; }
.gestes li { font-size: clamp(34px, 3.8vw, 54px); font-weight: 900; letter-spacing: -.02em; line-height: 1.05; }
.gestes li span { display: block; font-size: 18px; font-weight: 600; letter-spacing: 0; color: var(--encre-douce); margin-top: 8px; line-height: 1.5; max-width: 520px; }
.gestes li:nth-child(2) { color: var(--terre-fonce); }
.gestes .carre { background: var(--beurre); border-radius: 40px; aspect-ratio: 1; max-width: 440px; width: 100%; justify-self: center; position: relative; display: grid; place-items: center; }
.gestes .carre img.m { width: 62%; }
.gestes .carre .t { position: absolute; width: 24%; left: 8%; bottom: 10%; transform: rotate(-12deg); }
.gestes .carre .b { position: absolute; width: 30%; right: 6%; top: 10%; transform: rotate(14deg); }

/* Bande terre cuite : de vraies fiches */
.envies { background: var(--terre); color: #fff; padding-block: 84px 96px; }
.envies h2 { font-size: clamp(44px, 5.6vw, 80px); color: #FFF5EC; }
.envies p.intro { max-width: 620px; font-size: 20px; margin: 16px 0 0; color: #FCE3D3; font-weight: 600; }
.envies .tete-bande { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; flex-wrap: wrap; }
.envies.tient .tete-bande { justify-content: center; text-align: center; }
.envies.tient p.intro { margin-inline: auto; }
.fleches { display: flex; gap: 12px; }
.fleches[hidden] { display: none; }
.fleche { width: 52px; height: 52px; border-radius: 50%; border: 0; background: #FFF5EC; color: var(--terre-fonce); display: grid; place-items: center; cursor: pointer; box-shadow: 0 4px 0 var(--terre-nuit); transition: transform .12s, opacity .15s; }
.fleche:hover { transform: translateY(-2px); }
.fleche:disabled { opacity: .35; cursor: default; transform: none; }
.rail { display: flex; gap: 22px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: max(20px, calc((100vw - 1180px) / 2 + 20px)); padding: 40px max(20px, calc((100vw - 1180px) / 2 + 20px)) 18px; scrollbar-width: none; scroll-behavior: smooth; }
.rail::-webkit-scrollbar { display: none; }
.rail.tient { justify-content: center; padding-inline: 20px; }
.fiche { flex: 0 0 280px; scroll-snap-align: start; background: #fff; color: var(--encre); border-radius: 28px; overflow: hidden; text-decoration: none; display: flex; flex-direction: column; transition: transform .15s ease, box-shadow .15s ease; box-shadow: 0 6px 0 var(--terre-nuit); }
.fiche:hover { transform: translateY(-4px); box-shadow: 0 10px 0 var(--terre-nuit); }
.fiche img { width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; background: var(--peche); }
.fiche-texte { padding: 18px 20px 22px; display: flex; flex-direction: column; gap: 4px; flex: 1; }
.fiche h3 { font-size: 21px; line-height: 1.15; }
.fiche .auteur { margin: 0; font-family: var(--main); font-size: 24px; color: var(--terre-fonce); line-height: 1; }
.fiche .puces { margin: auto 0 0; padding-top: 10px; display: flex; gap: 6px; flex-wrap: wrap; }
.fiche .puces span { font-size: 14px; font-weight: 800; background: var(--peche-clair); border-radius: 999px; padding: 4px 10px; color: var(--encre-douce); }

/* Tout en un */
.toutenun { padding-block: 120px 60px; text-align: center; }
.toutenun h2 { font-size: clamp(40px, 4.8vw, 68px); max-width: 22ch; margin: 0 auto; }
.tuiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 26px 22px; margin-top: 56px; text-align: left; }
.tuile .tete { border-radius: 24px; aspect-ratio: 5 / 4; display: grid; place-items: center; position: relative; overflow: hidden; }
.tuile .tete img { width: 52%; filter: drop-shadow(0 10px 14px rgba(31, 24, 19, .14)); transition: transform .2s ease; }
.tuile:hover .tete img { transform: scale(1.06) rotate(-3deg); }
.tuile h3 { font-size: 22px; margin-top: 16px; line-height: 1.15; }
.tuile p { margin: 6px 0 0; font-size: 16px; color: var(--encre-douce); }
.c1 { background: var(--peche); } .c2 { background: var(--sauge); } .c3 { background: var(--beurre); } .c4 { background: var(--rose); } .c5 { background: var(--menthe); }

/* En bref */
.enbref { padding-block: 60px 120px; }
.enbref .bloc { background: var(--sauge); border-radius: 40px; padding: clamp(32px, 5vw, 64px); display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 40px; align-items: center; }
.enbref .surtitre { font-family: var(--main); font-size: 34px; color: #4E5A3A; margin: 0; font-weight: 700; letter-spacing: 0; }
.enbref p.def { font-size: clamp(22px, 2.3vw, 30px); font-weight: 800; line-height: 1.35; margin: 10px 0 0; letter-spacing: -.01em; }
.enbref p.pas { margin: 22px 0 0; font-size: 16px; color: #3F4A2C; font-weight: 600; }
.enbref img { width: clamp(130px, 14vw, 190px); }

/* Formules */
.formules { background: var(--peche-clair); padding-block: 110px; text-align: center; }
.formules h2 { font-size: clamp(44px, 5.4vw, 76px); }
.formules p.intro { max-width: 680px; margin: 18px auto 0; color: var(--encre-douce); font-weight: 600; }
.grille { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; margin-top: 56px; text-align: left; align-items: stretch; }
.formule { background: #fff; border-radius: 30px; padding: 32px; box-shadow: 0 0 0 2px var(--trait); }
.formule.mise { box-shadow: 0 0 0 3px var(--encre), 0 8px 0 var(--terre); position: relative; }
.pastille { position: absolute; top: -16px; left: 30px; background: var(--terre); color: #fff; font-size: 14px; font-weight: 900; padding: 6px 14px; border-radius: 999px; }
.formule h3 { font-size: 26px; }
.prix { font-size: 52px; font-weight: 900; margin: 12px 0 0; letter-spacing: -.03em; line-height: 1; font-variant-numeric: tabular-nums; }
.prix small { font-size: 18px; font-weight: 800; color: var(--encre-douce); letter-spacing: 0; }
.an { margin: 6px 0 0; font-size: 15px; color: var(--encre-douce); font-weight: 600; }
.formule ul { list-style: none; margin: 22px 0 0; padding: 22px 0 0; border-top: 2px dashed var(--trait); display: grid; gap: 10px; font-size: 16px; font-weight: 700; }
.formule li { display: flex; gap: 10px; align-items: flex-start; }
.formule li::before { content: ""; flex: 0 0 22px; height: 22px; border-radius: 50%; background: var(--sauge) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234E5A3A' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4 8-9'/%3E%3C/svg%3E") center / 14px no-repeat; }
.formules .note { font-size: 14px; color: var(--encre-douce); margin: 24px 0 0; }

/* Guides et questions */
.savoir { padding-block: 120px; }
.savoir .cadre { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 72px; }
.savoir h2 { font-size: clamp(40px, 4.4vw, 60px); }
.guides { display: grid; gap: 12px; margin-top: 30px; }
.guides a { display: flex; justify-content: space-between; gap: 16px; align-items: center; padding: 18px 22px; border-radius: 18px; background: #fff; box-shadow: 0 0 0 2px var(--trait); text-decoration: none; font-weight: 800; transition: box-shadow .15s, transform .15s; }
.guides a:hover { box-shadow: 0 0 0 2px var(--encre), 0 4px 0 var(--encre); transform: translateY(-2px); }
.guides a b { color: var(--terre); font-size: 22px; }
details { border-bottom: 2px solid var(--trait); padding: 20px 0; }
details:first-of-type { margin-top: 22px; }
summary { cursor: pointer; list-style: none; font-weight: 900; font-size: 20px; display: flex; justify-content: space-between; gap: 20px; align-items: center; }
summary::-webkit-details-marker { display: none; }
summary::after { content: ""; flex: 0 0 32px; height: 32px; border-radius: 50%; background: var(--peche) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23A94A2A' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M12 6v12M6 12h12'/%3E%3C/svg%3E") center / 16px no-repeat; transition: transform .2s; }
details[open] summary::after { transform: rotate(45deg); }
details p { margin: 10px 0 0; color: var(--encre-douce); font-weight: 600; }

/* Dernier appel */
.final { background: linear-gradient(180deg, var(--peche-clair), var(--peche)); text-align: center; padding-block: 100px 110px; overflow: hidden; }
.final .groupe { position: relative; width: min(340px, 70vw); margin: 0 auto; }
.final .groupe .m { width: 66%; margin: 0 auto; }
.final .groupe .c { width: 48%; margin: 0 auto -6%; transform: rotate(-10deg) translate(-6%, -4%); }
.final .groupe .x { position: absolute; filter: drop-shadow(0 8px 10px rgba(31, 24, 19, .15)); }
.final .x1 { width: 24%; left: -2%; bottom: 6%; transform: rotate(-14deg); }
.final .x2 { width: 30%; right: -6%; bottom: 22%; transform: rotate(16deg); }
.final .x3 { width: 18%; right: 10%; bottom: -4%; }
.final h2 { font-size: clamp(46px, 6.4vw, 92px); margin-top: 28px; }
.final p { font-size: 20px; color: var(--encre-douce); font-weight: 600; margin: 16px 0 0; }
.final .bouton { margin-top: 34px; }

/* Pied */
.pied { background: #fff; padding-block: 64px 0; padding-bottom: env(safe-area-inset-bottom, 0px); }
.pied .haut { display: grid; grid-template-columns: minmax(0, 1.2fr) repeat(3, minmax(0, 1fr)); gap: 40px; }
.magasins { display: flex; flex-wrap: wrap; gap: 10px; }
.magasin { display: inline-flex; align-items: center; gap: 10px; background: var(--encre); color: #fff; text-decoration: none; border-radius: 12px; padding: 9px 16px 9px 12px; line-height: 1.1; font-weight: 800; font-size: 16px; }
.magasin small { display: block; font-size: 11px; font-weight: 600; opacity: .8; }
.pied p.web { margin: 14px 0 0; font-size: 15px; color: var(--encre-douce); font-weight: 600; }
.pied h2 { margin: 0 0 12px; font-size: 17px; font-weight: 900; letter-spacing: 0; }
.pied ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; font-size: 16px; font-weight: 600; }
.pied ul a { text-decoration: none; color: var(--encre-douce); }
.pied ul a:hover { color: var(--terre-fonce); }
.pied .bas { display: flex; flex-wrap: wrap; gap: 12px 24px; justify-content: space-between; border-top: 2px solid var(--trait); margin-top: 48px; padding-block: 22px; font-size: 14px; color: var(--encre-douce); font-weight: 600; }
.pied .bas a { color: var(--encre-douce); }
.geant { display: block; width: 100%; max-width: 1180px; margin: 0 auto; padding: 10px max(20px, env(safe-area-inset-left, 0px)) 0; }
.geant img { width: 100%; height: auto; opacity: .95; }

/* Une page de guide */
.guide-tete { background: linear-gradient(180deg, var(--peche) 0%, var(--peche-clair) 100%); padding-bottom: 72px; }
.guide-tete .fil { font-size: 15px; font-weight: 700; color: var(--encre-douce); margin: 24px 0 0; }
.guide-tete .fil a { color: var(--encre-douce); }
.guide-tete h1 { font-size: clamp(40px, 5.6vw, 76px); margin-top: 18px; max-width: 18ch; }
.guide-tete .reponse { margin-top: 28px; background: #fff; border-radius: 28px; padding: clamp(22px, 3vw, 34px); box-shadow: 0 0 0 2px var(--encre), 0 6px 0 var(--terre); max-width: 820px; }
.guide-tete .reponse .surtitre { font-family: var(--main); font-size: 28px; font-weight: 700; color: var(--terre-fonce); margin: 0; }
.guide-tete .reponse p { margin: 6px 0 0; font-size: clamp(19px, 1.8vw, 22px); font-weight: 700; line-height: 1.45; }
.guide-corps { padding-block: 72px 110px; }
.guide-corps .cadre { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 72px; align-items: start; }
.guide-corps article { max-width: 720px; }
.guide-corps h2 { font-size: clamp(30px, 3vw, 40px); margin: 48px 0 14px; }
.guide-corps h2:first-child { margin-top: 0; }
.guide-corps p, .guide-corps li { color: var(--encre-douce); font-weight: 600; }
.etapes { list-style: none; margin: 0; padding: 0; display: grid; gap: 18px; counter-reset: etape; }
.etapes li { counter-increment: etape; display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: 16px; align-items: start; }
.etapes li::before { content: counter(etape); width: 48px; height: 48px; border-radius: 50%; background: var(--encre); color: #fff; display: grid; place-items: center; font-weight: 900; font-size: 20px; box-shadow: 0 3px 0 var(--terre); }
.etapes li strong { color: var(--encre); display: block; font-size: 19px; }
.guide-corps aside .tel { width: 100%; height: auto; border-radius: 40px; border-bottom: 10px solid var(--encre); position: sticky; top: 24px; }
.guide-corps aside .tel img { border-radius: 30px; }
.autres { display: grid; gap: 12px; margin-top: 18px; }
.autres a { display: flex; justify-content: space-between; gap: 16px; padding: 16px 20px; border-radius: 16px; background: #fff; box-shadow: 0 0 0 2px var(--trait); text-decoration: none; font-weight: 800; }
.autres a:hover { box-shadow: 0 0 0 2px var(--encre), 0 4px 0 var(--encre); }
.autres a b { color: var(--terre); }
.guide-appel { margin-top: 56px; background: var(--sauge); border-radius: 28px; padding: 28px; display: flex; flex-wrap: wrap; gap: 18px; align-items: center; justify-content: space-between; }
.guide-appel p { margin: 0; font-size: 22px; font-weight: 900; color: var(--encre); }

@media (max-width: 1240px) {
  .entete .langues { display: none; }
  .entete .cadre > nav { gap: 24px; }
}
@media (max-width: 1000px) {
  .entete .cadre > nav { display: none; }
  .gestes .cadre, .savoir .cadre, .enbref .bloc, .guide-corps .cadre { grid-template-columns: minmax(0, 1fr); }
  .tuiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grille { grid-template-columns: minmax(0, 1fr); max-width: 520px; margin-inline: auto; }
  .pied .haut { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pied .haut > div:first-child { grid-column: 1 / -1; }
  .enbref img { display: none; }
  .guide-corps aside { max-width: 300px; }
}
@media (max-width: 600px) {
  .entete .cadre { min-height: 72px; gap: 10px; }
  .entete .logo img { height: 38px; }
  .entete .droite { gap: 8px; }
  .entete .bouton, .entete .langues { display: none; }
  .entete .connexion { display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; border-radius: 13px; font-size: 15px; background: #fff; box-shadow: inset 0 0 0 2px var(--encre), 0 3px 0 var(--encre); }
  .ouverture h1 { margin-top: 18px; }
  .ouverture .appels .bouton { flex: 1 1 100%; }
  .scene { height: 520px; margin-top: 28px; }
  .mascotte { bottom: 296px; width: 170px; }
  .tel { width: 210px; height: 300px; }
  .tel.haut { height: 330px; margin-top: -30px; }
  .tel.loin { display: none; }
  .gestes { padding-block: 84px 72px; }
  .gestes .carre { max-width: 260px; }
  .envies .fleches { display: none; }
  .fiche { flex-basis: 260px; }
  .tuiles { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 22px 14px; }
  .tuile h3 { font-size: 19px; }
  .tuile p { font-size: 15px; }
  .formule { padding: 26px; }
  .guide-appel .bouton { flex: 1 1 100%; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before { animation: none !important; transition: none !important; }
  html { scroll-behavior: auto; }
  .rail { scroll-behavior: auto; }
}