/* Les polices sont chargees par dans le de chaque page : pas d'@import ici, il ajouterait un aller-retour. */ /* ========================================================================== MENU STATIQUE — LE GRAND BLEU Feuille unique, CSS vanilla. Sosie visuel de l'appli React (Tailwind 3). Sommaire : 1. Preflight 9. Contenu du menu 2. Tokens 10. Entrées 3. Thèmes 11. Modale allergènes 4. Base 12. Page d'accueil 5. Zoom 13. Animations 6. Séparateur ornementé 14. Responsive (640 / 768) 7. En-têtes 15. RTL (dormant) + sans JS 8. Onglets ========================================================================== */ /* ============================== 1. PREFLIGHT ============================== */ /* Reprise du preflight Tailwind : sans lui, les bordures et les marges dérivent. */ *, ::before, ::after { box-sizing: border-box; border-width: 0; border-style: solid; border-color: #e5e7eb; } html { line-height: 1.5; -webkit-text-size-adjust: 100%; } body { margin: 0; line-height: inherit; } h1, h2, h3, p { margin: 0; font-size: inherit; font-weight: inherit; } ul, ol { margin: 0; padding: 0; list-style: none; } button, input { font-family: inherit; font-size: 100%; font-weight: inherit; line-height: inherit; color: inherit; margin: 0; padding: 0; } button { background-color: transparent; background-image: none; cursor: pointer; text-transform: none; } a { color: inherit; text-decoration: none; } img, svg { display: block; vertical-align: middle; max-width: 100%; height: auto; } summary { display: block; list-style: none; cursor: pointer; } summary::-webkit-details-marker { display: none; } /* =============================== 2. TOKENS =============================== */ :root { color-scheme: light dark; /* zoom typographique, piloté par le JS (1 | 1.15 | 1.3) */ --lgb-zoom: 1; /* palette brute, identique à tailwind.config.js */ --lgb-navy-50: #eef0f6; --lgb-navy-700: #1a2855; --lgb-navy-800: #121d3f; --lgb-navy-900: #0a1228; --lgb-cream-50: #fbf8f0; --lgb-cream-100: #f5f1e8; --lgb-cream-200: #ede6d3; --lgb-cream-300: #e0d4b3; --lgb-gold-400: #c9a96a; --lgb-gold-500: #b8954f; --lgb-site-navy: #01183a; /* fond de la page dîner-croisière du site */ --lgb-site-panel: #0a2247; /* fond du menu de langues, version site */ /* courbe de transition de Tailwind (transition / transition-colors) */ --lgb-ease: cubic-bezier(.4, 0, .2, 1); /* polices */ --lgb-font-serif: 'Cardo', Georgia, serif; --lgb-font-sans: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif; /* rôles, MODE CLAIR */ --lgb-ink-rgb: 26 40 85; /* navy-700 */ --lgb-title-rgb: 26 40 85; /* navy-700 */ --lgb-gold-rgb: 184 149 79; /* gold-500 */ --lgb-bg: var(--lgb-cream-100); --lgb-fg: var(--lgb-navy-700); --lgb-title: var(--lgb-navy-700); --lgb-muted: rgb(var(--lgb-ink-rgb) / .5); --lgb-surface: var(--lgb-cream-50); --lgb-surface-soft: rgb(255 255 255 / .4); --lgb-surface-soft-hover: rgb(255 255 255 / .6); --lgb-surface-soft-strong: rgb(255 255 255 / .6); --lgb-surface-strong-hover: #ffffff; --lgb-header-bg: rgb(251 248 240 / .95); --lgb-modal-bg: var(--lgb-cream-50); --lgb-allergen-bg: rgb(255 255 255 / .6); --lgb-border: rgb(var(--lgb-ink-rgb) / .10); --lgb-border-strong: rgb(var(--lgb-ink-rgb) / .15); --lgb-dots: rgb(var(--lgb-ink-rgb) / .25); --lgb-gold: var(--lgb-gold-500); --lgb-gold-border: rgb(var(--lgb-gold-rgb) / .6); /* anneau de focus : le React laissait l'anneau natif du navigateur, toujours tres contraste. L'or #b8954f ne donne que 2,5:1 sur le crème (WCAG 1.4.11 demande 3:1), d'ou une couleur propre en mode clair. */ --lgb-focus: #7a5f23; /* texte pose SUR --lgb-title (pastille de zoom, carte d'onglet active) : cream-100 en clair, navy-700 en sombre — jamais navy-900. */ --lgb-on-title: var(--lgb-cream-100); --lgb-rule-gold: rgb(201 169 106 / .4); --lgb-overlay: rgb(10 18 40 / .7); --lgb-hover: rgb(var(--lgb-ink-rgb) / .1); --lgb-shadow-header: 0 8px 24px -8px rgb(10 18 40 / .18); --lgb-shadow-tabbar: 0 -8px 24px -8px rgb(10 18 40 / .18); --lgb-shadow-card: 0 8px 30px -12px rgb(10 18 40 / .35); --lgb-shadow-menu: 0 10px 15px -3px rgb(0 0 0 / .1), 0 4px 6px -4px rgb(0 0 0 / .1); --lgb-shadow-modal: 0 30px 60px -15px rgb(10 18 40 / .6); --lgb-shadow-logo: 0 8px 30px -12px rgb(10 18 40 / .4); /* bascule des visuels jour/nuit sans dupliquer les sélecteurs */ --lgb-show-light: block; --lgb-show-dark: none; } /* =============================== 3. THÈMES =============================== */ /* Sombre automatique (système), sauf si l'utilisateur a forcé le clair. */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --lgb-ink-rgb: 237 230 211; /* cream-200 */ --lgb-title-rgb: 245 241 232; /* cream-100 */ --lgb-gold-rgb: 201 169 106; /* gold-400 */ --lgb-bg: var(--lgb-navy-900); --lgb-fg: var(--lgb-cream-300); --lgb-title: var(--lgb-cream-100); --lgb-surface: var(--lgb-navy-800); --lgb-surface-soft: rgb(10 18 40 / .4); --lgb-surface-soft-hover: rgb(10 18 40 / .6); --lgb-surface-soft-strong: rgb(18 29 63 / .6); --lgb-surface-strong-hover: var(--lgb-navy-800); --lgb-header-bg: rgb(18 29 63 / .95); --lgb-modal-bg: var(--lgb-navy-900); --lgb-allergen-bg: rgb(18 29 63 / .6); --lgb-gold: var(--lgb-gold-400); --lgb-focus: var(--lgb-gold-400); --lgb-on-title: var(--lgb-navy-700); --lgb-gold-border: rgb(var(--lgb-gold-rgb) / .5); --lgb-rule-gold: rgb(201 169 106 / .3); --lgb-hover: rgb(245 241 232 / .1); --lgb-shadow-header: 0 8px 24px -8px rgb(0 0 0 / .55); --lgb-shadow-tabbar: 0 -8px 24px -8px rgb(0 0 0 / .55); --lgb-shadow-card: 0 8px 30px -12px rgb(0 0 0 / .6); --lgb-show-light: none; --lgb-show-dark: block; } } /* Sombre forcé (bouton, ou variantes site / panier) — même corps, dupliqué. */ :root[data-theme="dark"] { --lgb-ink-rgb: 237 230 211; --lgb-title-rgb: 245 241 232; --lgb-gold-rgb: 201 169 106; --lgb-bg: var(--lgb-navy-900); --lgb-fg: var(--lgb-cream-300); --lgb-title: var(--lgb-cream-100); --lgb-surface: var(--lgb-navy-800); --lgb-surface-soft: rgb(10 18 40 / .4); --lgb-surface-soft-hover: rgb(10 18 40 / .6); --lgb-surface-soft-strong: rgb(18 29 63 / .6); --lgb-surface-strong-hover: var(--lgb-navy-800); --lgb-header-bg: rgb(18 29 63 / .95); --lgb-modal-bg: var(--lgb-navy-900); --lgb-allergen-bg: rgb(18 29 63 / .6); --lgb-gold: var(--lgb-gold-400); --lgb-focus: var(--lgb-gold-400); --lgb-on-title: var(--lgb-navy-700); --lgb-gold-border: rgb(var(--lgb-gold-rgb) / .5); --lgb-rule-gold: rgb(201 169 106 / .3); --lgb-hover: rgb(245 241 232 / .1); --lgb-shadow-header: 0 8px 24px -8px rgb(0 0 0 / .55); --lgb-shadow-tabbar: 0 -8px 24px -8px rgb(0 0 0 / .55); --lgb-shadow-card: 0 8px 30px -12px rgb(0 0 0 / .6); --lgb-show-light: none; --lgb-show-dark: block; } /* Variantes site et panier : sombre forcé + fond bleu du site officiel. Ce bloc vient APRÈS les deux blocs sombres, il l'emporte donc. */ :root[data-lgb-variant="site"], :root[data-lgb-variant="panier"] { --lgb-bg: var(--lgb-site-navy); --lgb-fg: var(--lgb-cream-100); --lgb-zoom: 1; } /* Mouvement réduit */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; animation-delay: 0ms !important; transition-duration: .01ms !important; } } /* ================================ 4. BASE ================================ */ .lgb-body { margin: 0; min-height: 100vh; /* repli iOS 15.0 a 15.3, qui ne connait pas dvh */ min-height: 100dvh; overflow-x: hidden; font-family: var(--lgb-font-sans); -webkit-font-smoothing: antialiased; background: var(--lgb-bg); color: var(--lgb-fg); } /* Chinois : ni Cardo ni Inter ne couvrent le CJK, pile système explicite. */ html[lang="zh"] .lgb-body { font-family: 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', 'Noto Sans SC', var(--lgb-font-sans); } .lgb-scroll-lock { overflow: hidden; } .lgb-app { min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; } /* NB : pas d'overflow-y sur le main, sinon les barres collantes cessent d'agir. */ .lgb-main { flex: 1 1 auto; } .lgb-visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; } .lgb-modal-toggle { position: fixed; top: 0; inset-inline-start: 0; } .lgb-icon { display: block; flex-shrink: 0; stroke: currentColor; } .lgb-icon--moon { display: var(--lgb-show-light); } .lgb-icon--sun { display: var(--lgb-show-dark); } /* ================================ 5. ZOOM ================================ */ /* Le zoom n'agit que sur les descendants de .lgb-zoom : la zone de menu de chaque panneau et le conteneur des modales (comme .font-zoom dans le React). */ .lgb-zoom { font-size: calc(1rem * var(--lgb-zoom)); } /* ========================= 6. SÉPARATEUR ORNEMENTÉ ======================== */ .lgb-sep { display: flex; align-items: center; gap: 0.75rem; font-family: var(--lgb-font-sans); font-size: 0.75rem; /* taille de base, NON zoomée */ letter-spacing: 0.2em; text-transform: uppercase; font-weight: 600; color: inherit; } .lgb-sep::before, .lgb-sep::after { content: ''; flex: 1; border-top: 1px dotted currentColor; opacity: 0.6; } .lgb-sep-dot { flex: 0 0 auto; } .lgb-sep--section { margin-bottom: 2rem; color: rgb(var(--lgb-gold-rgb) / .7); font-size: calc(0.6rem * var(--lgb-zoom)); } .lgb-sep--acc { margin-bottom: 1.25rem; color: rgb(var(--lgb-gold-rgb) / .7); font-size: calc(0.6rem * var(--lgb-zoom)); } .lgb-sep--entry { margin: 0.75rem 0; opacity: 0.5; } .lgb-entry--sep { list-style: none; } .lgb-sep--modal { margin: 1.5rem 0; color: rgb(var(--lgb-ink-rgb)); } /* ============================== 7. EN-TÊTES ============================== */ .lgb-header { position: sticky; top: 0; z-index: 30; padding-top: env(safe-area-inset-top); background: var(--lgb-header-bg); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); border-bottom: 1px solid var(--lgb-rule-gold); box-shadow: var(--lgb-shadow-header); } .lgb-header-row { display: flex; align-items: center; justify-content: space-between; padding-inline: 1rem; height: 3.5rem; } .lgb-brand { display: flex; align-items: center; gap: 0.625rem; min-width: 0; } .lgb-brand-logo { width: 2rem; height: 2rem; border-radius: 9999px; object-fit: cover; flex-shrink: 0; } .lgb-brand-logo--light { display: var(--lgb-show-light); } .lgb-brand-logo--dark { display: var(--lgb-show-dark); } .lgb-brand-name { font-family: var(--lgb-font-serif); font-size: 1.125rem; line-height: 1.75rem; letter-spacing: 0.025em; color: var(--lgb-title); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .lgb-header-actions { display: flex; align-items: center; gap: 0.25rem; } .lgb-iconbtn { position: relative; padding: 0.5rem; border-radius: 9999px; background: transparent; border: none; color: var(--lgb-title); cursor: pointer; } .lgb-iconbtn:hover { background: var(--lgb-hover); } .lgb-zoom-badge { position: absolute; bottom: -0.125rem; inset-inline-end: -0.125rem; font-size: 0.55rem; font-weight: 600; line-height: 1; padding: 0.125rem 0.25rem; border-radius: 9999px; background: var(--lgb-title); color: var(--lgb-on-title); } .lgb-zoom-badge[hidden] { display: none; } /* Menu de langues (details/summary) */ .lgb-langmenu { position: relative; } .lgb-langmenu-trigger { display: flex; align-items: center; gap: 0.25rem; padding: 0.5rem; border-radius: 9999px; cursor: pointer; } .lgb-langmenu-trigger:hover { background: var(--lgb-hover); } .lgb-langmenu-flag { font-size: 1.125rem; line-height: 1; } .lgb-langmenu-panel { position: absolute; inset-inline-end: 0; top: 100%; margin-top: 0.5rem; z-index: 40; min-width: 11.25rem; max-height: 70vh; overflow-y: auto; background: var(--lgb-surface); border: 1px solid var(--lgb-border-strong); border-radius: 0.5rem; box-shadow: var(--lgb-shadow-menu); overflow-x: hidden; } .lgb-langmenu-item { display: flex; align-items: center; gap: 0.75rem; padding: 0.625rem 1rem; text-align: start; white-space: nowrap; color: inherit; text-decoration: none; } .lgb-langmenu-item:hover { background: var(--lgb-hover); } .lgb-langmenu-item.is-current { background: rgb(var(--lgb-ink-rgb) / .05); font-weight: 600; } .lgb-langmenu-item-flag { font-size: 1.125rem; flex-shrink: 0; } .lgb-langmenu-item-label { font-family: var(--lgb-font-serif); } /* En-tête version site (fond bleu forcé, pas de thème ni de zoom) */ .lgb-headersite { position: sticky; top: 0; z-index: 30; padding-top: env(safe-area-inset-top); background: rgb(1 24 58 / .95); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); border-bottom: 1px solid rgb(201 169 106 / .3); box-shadow: 0 8px 24px -8px rgb(0 0 0 / .55); } .lgb-headersite-row { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 0.5rem; padding: 0.5rem 0.75rem; min-height: 4.5rem; } .lgb-headersite-left { display: flex; justify-content: flex-start; } .lgb-headersite-center { display: flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1; min-width: 0; } .lgb-headersite-right { display: flex; justify-content: flex-end; } .lgb-backlink { padding: 0.5rem; margin-inline-start: -0.25rem; border-radius: 9999px; color: var(--lgb-cream-100); flex-shrink: 0; } .lgb-backlink:hover { background: rgb(245 241 232 / .1); } .lgb-headersite-logo { height: 2.75rem; width: auto; object-fit: contain; flex-shrink: 0; } .lgb-headersite-kicker { margin-top: 0.125rem; font-size: 0.6rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.35em; color: rgb(201 169 106 / .8); } /* Le panneau de langues de la version site est en #0a2247, comme le `bg-[#0a2247]` ecrit en dur dans HeaderSite.tsx. Rien d'autre ne change de fond : la carte ouverte et la barre du bas restent navy-800. */ .lgb-headersite .lgb-langmenu-trigger:hover, .lgb-headersite .lgb-langmenu-item:hover { background: rgb(245 241 232 / .1); } .lgb-headersite .lgb-langmenu-panel { background: var(--lgb-site-panel); border-color: rgb(237 230 211 / .15); color: var(--lgb-cream-100); } .lgb-headersite .lgb-langmenu-item.is-current { background: rgb(245 241 232 / .05); } /* Ancres structurelles du contrat DOM : peu ou pas de style propre, mais elles doivent exister pour que le HTML genere et la feuille restent en phase. */ .lgb-groups { display: block; } .lgb-entry { list-style: none; } .lgb-tabbar-label { display: block; } /* =============================== 8. ONGLETS ============================== */ .lgb-panel { display: none; } .lgb-tabbar { position: sticky; bottom: 0; z-index: 30; padding-bottom: env(safe-area-inset-bottom); background: var(--lgb-header-bg); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); border-top: 1px solid var(--lgb-rule-gold); box-shadow: var(--lgb-shadow-tabbar); } .lgb-tabbar-grid { display: grid; grid-template-columns: repeat(var(--lgb-tabs, 3), minmax(0, 1fr)); } .lgb-tabbar-btn { position: relative; padding: 0.875rem 0.5rem; font-family: var(--lgb-font-serif); font-size: 0.875rem; line-height: 1.25rem; letter-spacing: 0.18em; text-transform: uppercase; text-align: center; cursor: pointer; color: rgb(var(--lgb-ink-rgb) / .55); transition: color .15s var(--lgb-ease); } .lgb-tabbar-btn:hover { color: var(--lgb-title); } .lgb-tabbar-indicator { position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 2.5rem; height: 0.125rem; border-radius: 0 0 0.25rem 0.25rem; background: var(--lgb-gold); opacity: 0; } /* Variante > 3 onglets : grille de cartes au-dessus du contenu */ .lgb-tabgrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.75rem; padding: 1rem; } .lgb-tabgrid-btn { padding: 1rem; border-radius: 0.5rem; cursor: pointer; font-family: var(--lgb-font-serif); font-size: 1rem; line-height: 1.5rem; letter-spacing: 0.025em; text-align: center; background: var(--lgb-surface-soft-strong); border: 1px solid var(--lgb-border-strong); color: var(--lgb-title); } /* Bascule d'onglet en CSS pur, K = 1..6 (plafond documenté). */ #lgb-tab-1:checked ~ .lgb-main > #lgb-panel-1, #lgb-tab-2:checked ~ .lgb-main > #lgb-panel-2, #lgb-tab-3:checked ~ .lgb-main > #lgb-panel-3, #lgb-tab-4:checked ~ .lgb-main > #lgb-panel-4, #lgb-tab-5:checked ~ .lgb-main > #lgb-panel-5, #lgb-tab-6:checked ~ .lgb-main > #lgb-panel-6 { display: block; } #lgb-tab-1:checked ~ .lgb-tabbar [for="lgb-tab-1"], #lgb-tab-2:checked ~ .lgb-tabbar [for="lgb-tab-2"], #lgb-tab-3:checked ~ .lgb-tabbar [for="lgb-tab-3"], #lgb-tab-4:checked ~ .lgb-tabbar [for="lgb-tab-4"], #lgb-tab-5:checked ~ .lgb-tabbar [for="lgb-tab-5"], #lgb-tab-6:checked ~ .lgb-tabbar [for="lgb-tab-6"] { color: var(--lgb-title); font-weight: 700; } #lgb-tab-1:checked ~ .lgb-tabbar [for="lgb-tab-1"] .lgb-tabbar-indicator, #lgb-tab-2:checked ~ .lgb-tabbar [for="lgb-tab-2"] .lgb-tabbar-indicator, #lgb-tab-3:checked ~ .lgb-tabbar [for="lgb-tab-3"] .lgb-tabbar-indicator, #lgb-tab-4:checked ~ .lgb-tabbar [for="lgb-tab-4"] .lgb-tabbar-indicator, #lgb-tab-5:checked ~ .lgb-tabbar [for="lgb-tab-5"] .lgb-tabbar-indicator, #lgb-tab-6:checked ~ .lgb-tabbar [for="lgb-tab-6"] .lgb-tabbar-indicator { opacity: 1; } #lgb-tab-1:checked ~ .lgb-tabgrid [for="lgb-tab-1"], #lgb-tab-2:checked ~ .lgb-tabgrid [for="lgb-tab-2"], #lgb-tab-3:checked ~ .lgb-tabgrid [for="lgb-tab-3"], #lgb-tab-4:checked ~ .lgb-tabgrid [for="lgb-tab-4"], #lgb-tab-5:checked ~ .lgb-tabgrid [for="lgb-tab-5"], #lgb-tab-6:checked ~ .lgb-tabgrid [for="lgb-tab-6"] { background: var(--lgb-title); color: var(--lgb-on-title); border-color: transparent; } /* Anneau de focus : le radio est masqué, on le reporte sur le label. */ #lgb-tab-1:focus-visible ~ .lgb-tabbar [for="lgb-tab-1"], #lgb-tab-2:focus-visible ~ .lgb-tabbar [for="lgb-tab-2"], #lgb-tab-3:focus-visible ~ .lgb-tabbar [for="lgb-tab-3"], #lgb-tab-4:focus-visible ~ .lgb-tabbar [for="lgb-tab-4"], #lgb-tab-5:focus-visible ~ .lgb-tabbar [for="lgb-tab-5"], #lgb-tab-6:focus-visible ~ .lgb-tabbar [for="lgb-tab-6"], #lgb-tab-1:focus-visible ~ .lgb-tabgrid [for="lgb-tab-1"], #lgb-tab-2:focus-visible ~ .lgb-tabgrid [for="lgb-tab-2"], #lgb-tab-3:focus-visible ~ .lgb-tabgrid [for="lgb-tab-3"], #lgb-tab-4:focus-visible ~ .lgb-tabgrid [for="lgb-tab-4"], #lgb-tab-5:focus-visible ~ .lgb-tabgrid [for="lgb-tab-5"], #lgb-tab-6:focus-visible ~ .lgb-tabgrid [for="lgb-tab-6"] { outline: 2px solid var(--lgb-focus); outline-offset: -2px; } /* =========================== 9. CONTENU DU MENU ========================== */ .lgb-container { padding: 1.25rem 1rem; max-width: 42rem; margin-inline: auto; } .lgb-groups--expanded > * + * { margin-top: 2rem; } .lgb-groups--dropdown > * + * { margin-top: 0.625rem; } .lgb-section { text-align: center; } .lgb-section-title { font-family: var(--lgb-font-serif); font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; font-size: calc(1rem * var(--lgb-zoom)); line-height: 1.5rem; color: var(--lgb-title); margin: 0 0 0.75rem; } .lgb-section-subtitle { font-family: var(--lgb-font-serif); font-weight: 600; text-transform: uppercase; letter-spacing: 0.15em; font-size: calc(0.95rem * var(--lgb-zoom)); opacity: 0.8; margin: 0 0 1.25rem; } /* Accordéon (mode dropdown) */ .lgb-acc { border-radius: 0.75rem; border: 1px solid var(--lgb-border); overflow: hidden; background: var(--lgb-surface-soft); transition: border-color .2s var(--lgb-ease), background-color .2s var(--lgb-ease); } .lgb-acc:hover { background: var(--lgb-surface-soft-hover); } .lgb-acc[open] { border-color: var(--lgb-gold-border); background: var(--lgb-surface); box-shadow: var(--lgb-shadow-card); } .lgb-acc-summary { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; padding: 1rem 1.25rem; text-align: start; } .lgb-acc-summary:focus-visible { outline: 2px solid var(--lgb-focus); outline-offset: -2px; } .lgb-acc-title { font-family: var(--lgb-font-serif); font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; font-size: calc(0.875rem * var(--lgb-zoom)); line-height: 1.25rem; color: rgb(var(--lgb-title-rgb) / .85); transition: color .15s var(--lgb-ease); } .lgb-acc[open] .lgb-acc-title { color: var(--lgb-title); } .lgb-acc-chevron { flex-shrink: 0; color: var(--lgb-muted); transform-origin: center; transition: transform .25s ease-out, color .25s ease-out; } .lgb-acc[open] .lgb-acc-chevron { transform: rotate(180deg); color: var(--lgb-gold); } .lgb-acc-body { padding: 0 1.25rem 1.5rem; } .lgb-acc-subtitle { text-align: center; font-family: var(--lgb-font-serif); font-weight: 600; text-transform: uppercase; letter-spacing: 0.15em; font-size: calc(0.95rem * var(--lgb-zoom)); opacity: 0.8; margin: 0 0 1.25rem; } /* Amélioration progressive : ouverture animée là où le navigateur sait le faire. */ @supports (interpolate-size: allow-keywords) { :root { interpolate-size: allow-keywords; } .lgb-acc::details-content { block-size: 0; overflow: hidden; transition: block-size .3s cubic-bezier(.22,.61,.36,1), content-visibility .3s allow-discrete; } .lgb-acc[open]::details-content { block-size: auto; } } .lgb-legal { margin-top: 2rem; padding-top: 0.5rem; text-align: center; font-size: calc(0.65rem * var(--lgb-zoom)); text-transform: uppercase; letter-spacing: 0.2em; font-weight: 600; color: var(--lgb-muted); } .lgb-empty { text-align: center; padding-block: 5rem; opacity: 0.6; font-style: italic; font-family: var(--lgb-font-serif); } /* =============================== 10. ENTRÉES ============================= */ .lgb-entries { text-align: left; } .lgb-entries--loose > li + li { margin-top: 1rem; } .lgb-entries--tight > li + li { margin-top: 0; } /* En-tête Verre / Bouteille */ .lgb-dblhead { display: flex; align-items: flex-end; justify-content: flex-end; gap: 0.75rem; margin-bottom: 0.25rem; font-size: 0.65rem; /* style inline du React : jamais zoome */ text-transform: uppercase; letter-spacing: 0.15em; font-weight: 600; color: rgb(var(--lgb-ink-rgb) / .7); } .lgb-dblhead-col { width: 4.5rem; text-align: center; line-height: 1.25; } .lgb-dblhead-label { display: block; } .lgb-dblhead-vol { display: block; opacity: 0.7; font-weight: 400; } .lgb-entry--text { text-align: center; font-family: var(--lgb-font-serif); font-weight: 600; text-transform: uppercase; letter-spacing: 0.15em; font-size: calc(0.95rem * var(--lgb-zoom)); opacity: 0.8; padding-inline: 1rem; } .lgb-entry--noprice { text-align: center; } .lgb-entry--double { padding-block: 0.75rem; border-bottom: 1px solid var(--lgb-border); } .lgb-entry--double:last-child { border-bottom-width: 0; } .lgb-entry--double:first-child { padding-top: 0; } .lgb-row { display: flex; align-items: baseline; gap: 0.5rem; } .lgb-row--double { display: flex; align-items: flex-start; gap: 0.75rem; } .lgb-entry-main { flex: 1 1 0%; min-width: 0; } .lgb-item-title { display: inline-flex; align-items: baseline; gap: 0.375rem; font-family: var(--lgb-font-serif); font-weight: 700; font-size: calc(1rem * var(--lgb-zoom)); line-height: 1.5rem; letter-spacing: 0.025em; text-transform: uppercase; color: var(--lgb-title); margin: 0; } .lgb-info-btn { align-self: center; display: inline-flex; align-items: center; justify-content: center; width: 1rem; height: 1rem; border-radius: 9999px; color: rgb(var(--lgb-ink-rgb) / .5); cursor: pointer; transition: background-color .15s var(--lgb-ease); } .lgb-info-btn:hover { background: var(--lgb-hover); } .lgb-info-btn:focus-visible { outline: 2px solid var(--lgb-focus); outline-offset: 2px; } .lgb-dots { flex: 1 1 auto; align-self: flex-end; margin-bottom: 0.35em; border-bottom: 1px dotted var(--lgb-dots); } .lgb-price { font-family: var(--lgb-font-serif); font-weight: 700; color: var(--lgb-title); white-space: nowrap; font-variant-numeric: tabular-nums; flex-shrink: 0; } .lgb-prices { display: flex; align-items: baseline; gap: 0.75rem; flex-shrink: 0; padding-top: 0.25rem; } .lgb-price-col { width: 4.5rem; text-align: center; font-family: var(--lgb-font-serif); font-weight: 700; color: var(--lgb-title); font-variant-numeric: tabular-nums; } .lgb-price-empty { opacity: 0.3; } .lgb-desc { font-family: var(--lgb-font-serif); font-size: calc(0.92rem * var(--lgb-zoom)); margin-top: 0.25rem; opacity: 0.8; line-height: 1.625; } .lgb-desc--lead { font-size: calc(0.95rem * var(--lgb-zoom)); opacity: 0.85; } /* ========================= 11. MODALE ALLERGÈNES ========================= */ /* Ouverture/fermeture en CSS pur : checkbox masquée + labels for=. */ .lgb-modal { display: none; } .lgb-modal-toggle:checked + .lgb-modal { display: flex; position: fixed; inset: 0; z-index: 50; align-items: center; justify-content: center; padding: 1.25rem; background: var(--lgb-overlay); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); animation: lgbOverlayIn 200ms ease-out; } .lgb-modal-backdrop { position: fixed; inset: 0; cursor: pointer; } .lgb-modal-dialog { position: relative; width: 100%; max-width: 28rem; max-height: 85vh; display: flex; flex-direction: column; overflow: hidden; background: var(--lgb-modal-bg); border-radius: 1rem; border: 1px solid var(--lgb-border-strong); box-shadow: var(--lgb-shadow-modal); animation: lgbDialogIn 220ms cubic-bezier(.22,.61,.36,1); } .lgb-modal-close { position: absolute; top: 0.75rem; inset-inline-end: 0.75rem; z-index: 10; padding: 0.375rem; border-radius: 9999px; color: rgb(var(--lgb-ink-rgb) / .6); cursor: pointer; } .lgb-modal-close:hover { background: var(--lgb-hover); } .lgb-modal-close:focus-visible { outline: 2px solid var(--lgb-focus); outline-offset: -2px; } .lgb-modal-body { overflow-y: auto; padding: 2rem 1.75rem 1.5rem; } .lgb-modal-head { text-align: center; } .lgb-modal-title { font-family: var(--lgb-font-serif); font-weight: 700; font-size: calc(1.25rem * var(--lgb-zoom)); line-height: 1.25; letter-spacing: 0.04em; text-transform: uppercase; color: var(--lgb-title); margin: 0; } .lgb-modal-price { margin-top: 0.5rem; font-family: var(--lgb-font-serif); font-size: calc(1rem * var(--lgb-zoom)); line-height: 1.5rem; color: rgb(var(--lgb-ink-rgb) / .8); font-variant-numeric: tabular-nums; } .lgb-modal-price-sep { opacity: 0.5; margin-inline: 0.375rem; font-weight: 400; } .lgb-modal-desc { margin-top: 1rem; font-family: var(--lgb-font-serif); font-size: calc(0.95rem * var(--lgb-zoom)); line-height: 1.625; text-align: center; font-style: italic; color: rgb(var(--lgb-ink-rgb) / .9); } .lgb-allergens > li + li { margin-top: 0.5rem; } .lgb-allergen { display: flex; align-items: flex-start; gap: 0.75rem; padding: 0.625rem 0.75rem; border-radius: 0.5rem; background: var(--lgb-allergen-bg); border: 1px solid var(--lgb-border); } .lgb-allergen-icon { font-size: calc(1.125rem * var(--lgb-zoom)); line-height: 1; margin-top: 0.125rem; } .lgb-allergen-main { flex: 1 1 0%; min-width: 0; } .lgb-allergen-label { font-family: var(--lgb-font-serif); font-weight: 600; font-size: calc(0.875rem * var(--lgb-zoom)); line-height: 1.25rem; letter-spacing: 0.025em; } .lgb-allergen-desc { font-size: calc(0.75rem * var(--lgb-zoom)); font-style: italic; opacity: 0.7; margin-top: 0.125rem; line-height: 1.375; } /* ========================== 12. PAGE D'ACCUEIL ========================== */ .lgb-body--home { display: block; } .lgb-home { position: relative; min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 3.5rem 1.5rem; overflow: hidden; color: rgb(var(--lgb-ink-rgb)); } .lgb-home-theme { position: fixed; top: 1.25rem; inset-inline-end: 1.25rem; z-index: 30; padding: 0.625rem; border-radius: 9999px; background: var(--lgb-surface-soft-strong); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); border: 1px solid var(--lgb-border-strong); color: var(--lgb-title); cursor: pointer; transition: background-color .15s; } .lgb-home-theme:hover { background: var(--lgb-surface-strong-hover); } .lgb-home-inner { display: flex; flex-direction: column; align-items: center; width: 100%; max-width: 28rem; } .lgb-home-logo { width: 6rem; height: 6rem; border-radius: 9999px; object-fit: cover; margin-bottom: 1.5rem; box-shadow: var(--lgb-shadow-logo); } .lgb-home-logo--light { display: var(--lgb-show-light); } .lgb-home-logo--dark { display: var(--lgb-show-dark); } .lgb-home-kicker { font-family: var(--lgb-font-serif); font-style: italic; font-size: 0.875rem; line-height: 1.25rem; opacity: 0.7; margin: 0 0 0.25rem; text-align: center; } .lgb-home-title { font-family: var(--lgb-font-serif); font-size: 2.25rem; line-height: 2.5rem; text-align: center; margin: 0 0 2.5rem; letter-spacing: 0.025em; } .lgb-home-sep { width: 100%; max-width: 20rem; margin-bottom: 2rem; } .lgb-home-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.75rem; width: 100%; } .lgb-home-lang { display: flex; align-items: center; gap: 0.75rem; padding: 1rem; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); border: 1px solid var(--lgb-border-strong); border-radius: 0.5rem; background: var(--lgb-surface-soft-strong); color: inherit; text-decoration: none; transition: background-color .2s var(--lgb-ease), transform .2s var(--lgb-ease); } .lgb-home-lang:hover { transform: translateY(-2px); background: var(--lgb-surface-strong-hover); } .lgb-home-lang:active { transform: scale(0.96); } .lgb-home-lang-flag { font-size: 1.5rem; line-height: 2rem; flex-shrink: 0; } .lgb-home-lang-label { font-family: var(--lgb-font-serif); font-size: 1rem; line-height: 1.5rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* ============================= 13. ANIMATIONS ============================ */ @keyframes lgbOverlayIn { from { opacity: 0; } to { opacity: 1; } } @keyframes lgbDialogIn { from { opacity: 0; transform: translateY(12px) scale(0.96); } to { opacity: 1; transform: translateY(0) scale(1); } } @keyframes lgbRise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } } .lgb-stagger { animation: lgbRise 450ms cubic-bezier(.22,.61,.36,1) both; animation-delay: calc(0.15s + var(--i, 0) * 0.05s); } /* ============================= 14. RESPONSIVE ============================ */ @media (min-width: 640px) { .lgb-brand-name { font-size: 1.25rem; line-height: 1.75rem; } .lgb-headersite-logo { height: 3rem; } .lgb-item-title { font-size: calc(1.125rem * var(--lgb-zoom)); line-height: 1.75rem; } .lgb-section-title { font-size: calc(1.125rem * var(--lgb-zoom)); line-height: 1.75rem; } .lgb-acc-title { font-size: calc(1rem * var(--lgb-zoom)); line-height: 1.5rem; } .lgb-modal-toggle:checked + .lgb-modal { padding: 2rem; } .lgb-modal-title { font-size: calc(1.5rem * var(--lgb-zoom)); line-height: 2rem; } .lgb-modal-desc { font-size: calc(1rem * var(--lgb-zoom)); line-height: 1.5rem; } .lgb-home-kicker { font-size: 1rem; line-height: 1.5rem; } .lgb-home-grid { gap: 1rem; } .lgb-home-lang-label { font-size: 1.125rem; line-height: 1.75rem; } } @media (min-width: 768px) { .lgb-home-title { font-size: 3rem; line-height: 1; } } /* ===================== 15. RTL (dormant) ET SANS JS ====================== */ /* Aucune des 8 langues activées n'est RTL. Ces règles ne servent que si l'arabe revient un jour : on les garde, elles ne coûtent rien. */ html[dir="rtl"] .lgb-body { font-family: 'Noto Sans Arabic', var(--lgb-font-sans); } html[dir="rtl"] .lgb-item-title, html[dir="rtl"] .lgb-section-title, html[dir="rtl"] .lgb-acc-title, html[dir="rtl"] .lgb-tabbar-btn, html[dir="rtl"] .lgb-modal-title { font-family: 'Amiri', 'Noto Naskh Arabic', var(--lgb-font-serif); letter-spacing: 0; text-transform: none; } /* Les boutons thème et zoom n'ont aucun effet sans JS : on les masque. Jamais de contenu de menu masqué derrière une condition JS. */ html:not([data-js="1"]) [data-lgb-theme], html:not([data-js="1"]) [data-lgb-zoom] { display: none; }