/* ===================================================================== styles.css — Styles personnalisés --------------------------------------------------------------------- Tailwind gère la mise en page générale (classes dans le HTML). Ici on traite ce que Tailwind ne fait pas bien tout seul : le composant , le loader 3D, les transitions de la modale, et quelques détails "premium". Variables de couleur (rappel) : espresso #14110F · surface #1F1A17 · brass #C8A45C · cream #F2EBDD ===================================================================== */ /* ---------- Réglages globaux ---------- */ :root { --brass: #C8A45C; --espresso: #14110F; } /* Empêche le "rebond" élastique disgracieux et fige le fond quand la modale est ouverte (classe ajoutée par JS sur ). */ body.modale-ouverte { overflow: hidden; } /* Masque les barres de scroll horizontales (onglets / filtres) tout en gardant le défilement tactile. */ .no-scrollbar { -ms-overflow-style: none; /* IE/Edge */ scrollbar-width: none; /* Firefox */ } .no-scrollbar::-webkit-scrollbar { display: none; /* Chrome/Safari */ } /* ===================================================================== ONGLETS DE CATÉGORIE Les classes d'état (.onglet--actif) sont ajoutées/retirées par app.js ===================================================================== */ .onglet { flex: 0 0 auto; /* ne rétrécit pas, scroll horizontal */ padding: 0.45rem 1.05rem; border-radius: 999px; font-size: 0.9rem; font-weight: 500; color: #9A8F80; /* muted */ border: 1px solid transparent; white-space: nowrap; transition: color .2s, background-color .2s, border-color .2s; } .onglet:hover { color: #F2EBDD; } .onglet--actif { color: var(--espresso); background: var(--brass); font-weight: 600; } /* ===================================================================== CHIPS DE FILTRE (Sans Gluten, Végétarien, …) ===================================================================== */ .chip-filtre { flex: 0 0 auto; padding: 0.35rem 0.85rem; border-radius: 999px; font-size: 0.8rem; font-weight: 500; color: #9A8F80; background: #1F1A17; /* surface */ border: 1px solid #3A312A; /* line */ white-space: nowrap; transition: all .2s; } .chip-filtre:hover { border-color: var(--brass); color: #F2EBDD; } /* État actif : bordure et texte laiton, léger halo */ .chip-filtre--actif { color: var(--brass); border-color: var(--brass); background: #2A231E; /* surface-2 */ } /* ===================================================================== CARTE DE PLAT ===================================================================== */ .carte-plat { background: #1F1A17; border: 1px solid #3A312A; border-radius: 1rem; overflow: hidden; cursor: pointer; transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease; } .carte-plat:hover, .carte-plat:focus-visible { transform: translateY(-4px); border-color: var(--brass); box-shadow: 0 12px 30px -12px rgba(0,0,0,.7); outline: none; } .carte-plat__media { position: relative; aspect-ratio: 4 / 3; background: #2A231E; overflow: hidden; } .carte-plat__media img { width: 100%; height: 100%; object-fit: cover; display: block; } /* Petit badge "3D" pour indiquer que le plat est visualisable */ .badge-3d { position: absolute; top: 0.6rem; right: 0.6rem; display: inline-flex; align-items: center; gap: .3rem; padding: 0.25rem 0.55rem; font-size: 0.65rem; font-weight: 600; letter-spacing: .05em; color: var(--espresso); background: var(--brass); border-radius: 999px; } /* Mini-chips d'allergènes sur la carte */ .allergene-mini { font-size: 0.68rem; color: #9A8F80; border: 1px solid #3A312A; border-radius: 999px; padding: 0.1rem 0.5rem; } /* ===================================================================== MODALE 3D / AR ===================================================================== */ .modale { position: fixed; inset: 0; z-index: 50; display: flex; align-items: flex-end; /* feuille qui monte du bas (mobile) */ justify-content: center; transition: opacity .25s ease; } @media (min-width: 640px) { .modale { align-items: center; } /* centrée sur grand écran */ } /* État caché : invisible + non cliquable */ .modale--cachee { opacity: 0; pointer-events: none; } /* Fond sombre flouté */ .modale__fond { position: absolute; inset: 0; background: rgba(8, 6, 5, .72); backdrop-filter: blur(4px); } /* Panneau contenant le visualiseur + infos */ .modale__panneau { position: relative; width: 100%; max-width: 540px; max-height: 92vh; overflow-y: auto; background: #1F1A17; border: 1px solid #3A312A; border-radius: 1.25rem 1.25rem 0 0; /* arrondi haut sur mobile */ /* respecte la zone sûre (encoche / barre gestuelle iPhone) */ padding-bottom: env(safe-area-inset-bottom); transform: translateY(24px); transition: transform .3s cubic-bezier(.2,.8,.2,1); } @media (min-width: 640px) { .modale__panneau { border-radius: 1.25rem; } } /* Animation d'entrée : le panneau remonte quand la modale s'ouvre */ .modale:not(.modale--cachee) .modale__panneau { transform: translateY(0); } .modale__fermer { position: absolute; top: 0.75rem; right: 0.75rem; z-index: 2; width: 36px; height: 36px; display: grid; place-items: center; border-radius: 999px; color: #F2EBDD; background: rgba(20,17,15,.55); backdrop-filter: blur(4px); transition: background .2s; } .modale__fermer:hover { background: rgba(20,17,15,.85); } .modale__infos { padding: 1.25rem 1.25rem 1.5rem; } /* Chips d'allergènes dans la modale */ .allergene-chip { font-size: 0.75rem; color: #9A8F80; background: #14110F; border: 1px solid #3A312A; border-radius: 999px; padding: 0.25rem 0.7rem; } /* ===================================================================== ZONE DU VISUALISEUR + ===================================================================== */ .viewer-wrap { position: relative; width: 100%; height: 340px; /* léger halo radial pour faire "flotter" le plat (effet premium) */ background: radial-gradient(120% 90% at 50% 25%, #2A231E 0%, #1F1A17 55%, #16120F 100%); } @media (min-width: 640px) { .viewer-wrap { height: 380px; } } #mv { width: 100%; height: 100%; --poster-color: transparent; /* on gère le chargement nous-mêmes */ background-color: transparent; } /* On masque le bouton AR par défaut de model-viewer : on fournit notre propre bouton "Voir sur ma table" plus visible. */ #mv::part(default-ar-button) { display: none; } /* ===================================================================== LOADER 3D (superposé pendant le téléchargement du .glb) Affiché/masqué via la classe .viewer-loader--cache (app.js) ===================================================================== */ .viewer-loader { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.9rem; pointer-events: none; /* laisse passer les interactions */ transition: opacity .3s ease; } .viewer-loader--cache { opacity: 0; visibility: hidden; } /* Anneau qui tourne */ .viewer-loader__spinner { width: 34px; height: 34px; border: 3px solid #3A312A; border-top-color: var(--brass); border-radius: 50%; animation: spin 0.9s linear infinite; } @keyframes spin { to { transform: rotate(360deg); } } /* Barre de progression (remplie via app.js : style.width) */ .viewer-loader__barre { width: 160px; height: 3px; background: #3A312A; border-radius: 999px; overflow: hidden; } .viewer-loader__barre span { display: block; height: 100%; width: 0%; /* mis à jour en JS sur l'event 'progress' */ background: var(--brass); border-radius: 999px; transition: width .15s ease; } .viewer-loader__texte { font-size: 0.78rem; color: #9A8F80; } /* ===================================================================== BOUTON "Voir sur ma table (AR)" ===================================================================== */ .btn-ar { width: 100%; display: flex; align-items: center; justify-content: center; gap: 0.6rem; padding: 0.95rem 1rem; border-radius: 0.85rem; font-weight: 600; font-size: 1rem; color: var(--espresso); background: linear-gradient(180deg, #E4C988 0%, #C8A45C 100%); box-shadow: 0 8px 22px -10px rgba(200,164,92,.8); transition: transform .15s ease, box-shadow .2s ease, opacity .2s; } .btn-ar:hover { transform: translateY(-2px); } .btn-ar:active { transform: translateY(0); } /* État désactivé (AR indisponible) */ .btn-ar:disabled { background: #2A231E; color: #9A8F80; box-shadow: none; cursor: not-allowed; } /* ===================================================================== ACCESSIBILITÉ : respect de "réduire les animations" ===================================================================== */ @media (prefers-reduced-motion: reduce) { * { animation-duration: .001ms !important; transition-duration: .001ms !important; } }