/* Couleurs alignées sur le thème Telegram (var(--tg-theme-*), injectées par telegram-web-app.js sur une fois Telegram.WebApp.ready() appelé) — avec des valeurs de repli pour un test en navigateur classique, hors Telegram, où ces variables ne sont jamais posées. */ /* ─── Animations (client ET admin — chargé par les deux pages) ────────── CSS pur, aucune librairie : cohérent avec le zéro-dépendance du projet. Deux mécanismes : 1. Transition d'écran : `.entree-vue` rejoue un fondu + léger glissement à chaque fois qu'un écran devient visible. Les scripts (app.js / admin/app.js) retirent puis rajoutent cette classe avec un reflow forcé entre les deux (`void el.offsetWidth`) — sans ce reflow, réappliquer la même classe ne relance pas l'animation CSS, le navigateur ne voit aucun changement à jouer. 2. Retour au tap : tout bouton/carte cliquable se tasse légèrement au `:active` — la doc Telegram recommande des interactions qui donnent l'impression d'une app native, réactive au toucher. */ @keyframes entreeVue { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } } .entree-vue { animation: entreeVue 220ms ease-out; } button, .carte-produit, .carte-commande, .carte-commande-admin, .onglet-categorie, .choix-vitesse-item, .bouton-mode, .stepper button { transition: transform 120ms ease-out, opacity 120ms ease-out; } button:active, .carte-produit:active, .carte-commande-admin:active, .onglet-categorie:active, .choix-vitesse-item:active, .bouton-mode:active, .stepper button:active { transform: scale(0.95); opacity: 0.85; } /* L'icône de succès (écran de confirmation client) apparaît en "pop" plutôt qu'en statique — voir public/index.html, #icone-succes. */ @keyframes popIn { 0% { transform: scale(0); opacity: 0; } 60% { transform: scale(1.15); opacity: 1; } 100% { transform: scale(1); } } .icone-succes { width: 64px; height: 64px; margin: 0 auto 16px; border-radius: 50%; background: var(--tg-theme-button-color, #2481cc); color: var(--tg-theme-button-text-color, #ffffff); display: flex; align-items: center; justify-content: center; font-size: 32px; animation: popIn 340ms ease-out; } /* Accessibilité : un utilisateur qui a demandé de réduire les animations au niveau système ne doit voir aucune de celles ci-dessus — snippet standard qui ramène toute transition/animation à une durée quasi nulle plutôt que de les désactiver sélectionnable par sélecteur (plus sûr : rien n'est oublié, y compris une animation ajoutée plus tard sans y repenser). */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; } } * { box-sizing: border-box; } body { margin: 0; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; background: var(--tg-theme-bg-color, #ffffff); color: var(--tg-theme-text-color, #111111); padding-bottom: 96px; /* place pour le MainButton natif */ } /* max-width + margin:auto plutôt qu'une largeur figée pensée pour un écran de téléphone : la fenêtre d'une Mini App sur Telegram Desktop peut être bien plus large qu'un mobile, et ce choix centre proprement le contenu dans les deux cas au lieu de l'étirer bord à bord sur desktop. */ #app { max-width: 640px; margin: 0 auto; padding: 12px 16px 24px; } header#entete { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 8px 0 16px; } header#entete h1 { font-size: 20px; margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } #bouton-mes-commandes { flex: 0 0 auto; padding: 8px 12px; border-radius: 999px; border: 1px solid var(--tg-theme-hint-color, #cccccc); background: var(--tg-theme-secondary-bg-color, #f2f2f2); color: var(--tg-theme-text-color, #111111); font-size: 13px; } nav#onglets-categories { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 8px; margin-bottom: 12px; } .onglet-categorie { flex: 0 0 auto; padding: 8px 14px; border-radius: 999px; border: 1px solid var(--tg-theme-hint-color, #cccccc); background: var(--tg-theme-secondary-bg-color, #f2f2f2); color: var(--tg-theme-text-color, #111111); font-size: 14px; } .onglet-categorie.actif { background: var(--tg-theme-button-color, #2481cc); color: var(--tg-theme-button-text-color, #ffffff); border-color: transparent; } .carte-produit { background: var(--tg-theme-secondary-bg-color, #f7f7f7); border-radius: 12px; padding: 12px; margin-bottom: 10px; } .carte-produit h3 { margin: 0 0 8px; font-size: 15px; } .ligne-palier { display: flex; align-items: center; justify-content: space-between; padding: 6px 0; gap: 8px; } .ligne-palier .info-palier { font-size: 14px; } .ligne-palier .prix-palier { color: var(--tg-theme-hint-color, #888888); font-size: 13px; } .stepper { display: flex; align-items: center; gap: 8px; } .stepper button { width: 28px; height: 28px; border-radius: 50%; border: none; background: var(--tg-theme-button-color, #2481cc); color: var(--tg-theme-button-text-color, #ffffff); font-size: 16px; line-height: 1; } .stepper .valeur { min-width: 18px; text-align: center; font-size: 14px; } .etiquette { font-size: 13px; color: var(--tg-theme-hint-color, #888888); margin: 16px 0 6px; } #recap-lignes { list-style: none; margin: 0 0 8px; padding: 0; } #recap-lignes li { display: flex; justify-content: space-between; padding: 6px 0; border-bottom: 1px solid var(--tg-theme-hint-color, #eeeeee); font-size: 14px; } #recap-total { font-weight: 600; font-size: 16px; margin: 8px 0 0; } .choix-mode { display: flex; gap: 8px; } .bouton-mode { flex: 1; padding: 10px; border-radius: 10px; border: 1px solid var(--tg-theme-hint-color, #cccccc); background: var(--tg-theme-secondary-bg-color, #f2f2f2); color: var(--tg-theme-text-color, #111111); font-size: 14px; } .bouton-mode.actif { background: var(--tg-theme-button-color, #2481cc); color: var(--tg-theme-button-text-color, #ffffff); border-color: transparent; } #champ-adresse { width: 100%; padding: 10px; border-radius: 10px; border: 1px solid var(--tg-theme-hint-color, #cccccc); background: var(--tg-theme-bg-color, #ffffff); color: var(--tg-theme-text-color, #111111); font-family: inherit; font-size: 14px; resize: vertical; } .choix-vitesse-item { display: block; width: 100%; text-align: left; padding: 10px; margin-bottom: 8px; border-radius: 10px; border: 1px solid var(--tg-theme-hint-color, #cccccc); background: var(--tg-theme-secondary-bg-color, #f2f2f2); color: var(--tg-theme-text-color, #111111); font-size: 14px; } .choix-vitesse-item.actif { background: var(--tg-theme-button-color, #2481cc); color: var(--tg-theme-button-text-color, #ffffff); border-color: transparent; } #bouton-retour-catalogue, #bouton-retour-catalogue-2, #bouton-fermer { margin-top: 16px; width: 100%; padding: 10px; border-radius: 10px; border: 1px solid var(--tg-theme-hint-color, #cccccc); background: transparent; color: var(--tg-theme-link-color, #2481cc); font-size: 14px; } #erreur { color: #d0342c; font-size: 13px; margin-top: 12px; } /* ─── Confirmation ────────────────────────────────────────────────────── */ #vue-confirmation { text-align: center; padding-top: 24px; } #vue-confirmation h2 { font-size: 18px; margin-bottom: 16px; } #confirmation-numero { font-size: 16px; font-weight: 600; margin: 0 0 12px; } #confirmation-lignes { list-style: none; margin: 0 0 12px; padding: 0; text-align: left; } #confirmation-lignes li { padding: 6px 0; border-bottom: 1px solid var(--tg-theme-hint-color, #eeeeee); font-size: 14px; } #confirmation-total { font-weight: 600; font-size: 16px; margin: 4px 0; } #confirmation-mode, #confirmation-adresse, #confirmation-statut { font-size: 14px; color: var(--tg-theme-hint-color, #666666); margin: 4px 0; } /* ─── Mes commandes ───────────────────────────────────────────────────── */ .carte-commande { background: var(--tg-theme-secondary-bg-color, #f7f7f7); border-radius: 12px; padding: 12px; margin-bottom: 10px; text-align: left; } .entete-commande { display: flex; justify-content: space-between; align-items: center; font-size: 15px; margin-bottom: 4px; } .statut-commande { font-size: 13px; color: var(--tg-theme-hint-color, #666666); } .date-commande { font-size: 12px; color: var(--tg-theme-hint-color, #888888); margin-bottom: 8px; } .carte-commande ul { list-style: none; margin: 0 0 8px; padding: 0; } .carte-commande li { font-size: 13px; padding: 2px 0; } .total-commande { font-weight: 600; font-size: 14px; }