/* ============================================================ Affichage public « repas du jour » sur les écrans des locaux. Principe : une grille rigide. Les entrées sont toujours à gauche, les plats au milieu, les desserts à droite, et les cartes ont toutes la même taille. Un collaborateur qui passe tous les jours sait où poser les yeux avant même d'avoir lu quoi que ce soit — c'est ce qui prime sur la densité. Chaque carte se lit de haut en bas : la photo et le nom du plat en tête, les convives dessous. On identifie le plat d'abord, les visages ensuite. Les vignettes ont la même taille partout (--avatar) et s'enroulent sur autant de rangées qu'il faut : elles sont assez grosses pour qu'on se reconnaisse depuis le couloir. ============================================================ */ .board-body { /* Teinte unique de l'écran, choisie dans Administration → Repas et posée en ligne sur le . Tout le reste en découle. */ --tint: #565DF6; --ink: color-mix(in srgb, var(--tint) 82%, #0B0E20); margin: 0; min-height: 100vh; color: #1B1E2B; background: radial-gradient(1200px 760px at 8% 2%, color-mix(in srgb, var(--tint) 16%, transparent), transparent 64%), radial-gradient(1100px 700px at 96% 8%, color-mix(in srgb, var(--tint) 11%, transparent), transparent 62%), radial-gradient(1300px 800px at 50% 104%, color-mix(in srgb, var(--tint) 13%, transparent), transparent 64%), linear-gradient(168deg, #F9FAFD 0%, #EFF1F8 55%, #E8EAF3 100%); background-attachment: fixed; } .board { --avatar: 72px; --dgap: 8px; --dpad: 14px; min-height: 100vh; padding: 12px 24px 12px; display: flex; flex-direction: column; gap: 10px; } /* ----- En-tête ----- Marque, titre et date empilés à gauche, comme sur la maquette : c'est la première chose lue, elle n'a pas à être centrée ni répartie. */ .board__head { flex: none; } .board__kicker { display: flex; align-items: baseline; gap: 16px; font-size: 19px; font-weight: var(--weight-bold); letter-spacing: 0.24em; text-transform: uppercase; color: var(--ink); } .board__updated { letter-spacing: 0.04em; text-transform: none; font-weight: var(--weight-medium); color: var(--text-muted); } .board__brand { align-self: center; margin-left: 10px; font-size: 17px; font-weight: var(--weight-semibold); letter-spacing: 0.1em; color: var(--text-muted); } .board__date { margin: 2px 0 0; font-size: 45px; font-weight: var(--weight-bold); letter-spacing: -0.035em; line-height: 1; color: #12141F; } .board__counters { display: flex; gap: 12px; flex: none; } .board__counter { display: flex; align-items: baseline; gap: 10px; padding: 7px 20px; border-radius: 16px; background: #fff; box-shadow: 0 8px 22px rgba(23, 27, 45, .10); } .board__counter-value { font-size: 36px; font-weight: var(--weight-bold); line-height: 1; color: var(--ink); } .board__counter-label { font-size: 20px; font-weight: var(--weight-medium); color: var(--text-muted); } .board__counter--muted .board__counter-value { color: #C97C1A; } /* ----- Les trois colonnes, toujours dans le même ordre ----- */ .board__grid { flex: 1; min-height: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; } /* Une seule couleur pour tout l'écran : la catégorie se lit à sa position, qui ne bouge jamais, pas à un code couleur. */ .board-col { display: flex; flex-direction: column; gap: 10px; min-width: 0; } .board-col__head { flex: none; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-inline: 18px; padding: 4px 0; border-radius: 15px; background: color-mix(in srgb, var(--tint) 13%, rgba(255, 255, 255, .5)); backdrop-filter: blur(16px) saturate(180%); border: 1px solid rgba(255, 255, 255, .6); color: var(--ink); } .board-col__head .lucide { width: 24px; height: 24px; flex: none; } .board-col__name { display: inline-flex; align-items: center; gap: 12px; font-size: 24px; font-weight: var(--weight-bold); letter-spacing: 0.16em; text-transform: uppercase; } .board-col__dishes { flex: 1; min-height: 0; display: grid; grid-auto-rows: 1fr; gap: 10px; } /* ----- La carte d'un plat ----- Deux étages. En tête, la photo, le nom et le compte en gros à droite ; le compte reste toujours à la même abscisse, c'est ce qui permet de balayer une colonne du regard sans rien lire. Dessous, les convives sur toute la largeur de la carte. Les cartes d'une colonne ont toutes la même hauteur (grid-auto-rows: 1fr) : le contenu se cale en haut, le vide reste dessous plutôt qu'au-dessus. */ .board-dish { min-height: 0; display: flex; flex-direction: column; align-items: stretch; gap: 12px; padding: 12px 18px; background: rgba(255, 255, 255, .58); backdrop-filter: blur(26px) saturate(170%); border: 1px solid rgba(255, 255, 255, .7); border-radius: 22px; box-shadow: 0 10px 30px rgba(23, 27, 45, .10); } .board-dish__head { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 16px; } .board-dish__photo { width: 84px; height: 84px; border-radius: 16px; object-fit: cover; display: block; } .board-dish__photo--none { background: rgba(23, 27, 45, .07); } .board-dish__title { margin: 0; font-size: 27px; font-weight: var(--weight-bold); letter-spacing: -0.015em; line-height: 1.16; color: var(--ink); display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; } .board-dish__count { font-size: 54px; font-weight: var(--weight-bold); line-height: 1; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; text-align: right; min-width: 1.4em; } /* Une couleur par service, reprise dans l'en-tête de colonne : le chiffre se rattache à sa catégorie sans qu'on ait à remonter la colonne. */ .board-col--entry { --course: #1E8E45; } .board-col--main { --course: #C0791B; } .board-col--dessert { --course: #C13B63; } .board-dish__count { color: var(--course, var(--tint)); } .board-col__name { color: var(--course, var(--ink)); } .board-col__head .lucide { color: var(--course, var(--ink)); } /* Plat sans commande : présent, mais visiblement en retrait. */ .board-dish.is-empty { background: rgba(255, 255, 255, .5); box-shadow: none; } .board-dish.is-empty .board-dish__title { color: var(--gray-500); } .board-dish.is-empty .board-dish__count { color: var(--gray-300); } /* ----- Convives ----- Alignés à gauche sous la tête de carte, sur autant de rangées qu'il faut. Toute la largeur leur revient : c'est ce qui permet de grossir les visages sans perdre en densité. */ .board-dish__people { display: flex; flex-wrap: wrap; align-content: flex-start; gap: var(--dgap); } .board-dish__nobody { font-size: 19px; color: var(--gray-500); } /* Sans prénom sous le portrait, toute la vignette est le visage. */ .board-diner { display: inline-flex; width: var(--avatar); } .board-diner__portrait { position: relative; width: 100%; } .board-diner__avatar { width: 100%; aspect-ratio: 1; border-radius: 50%; object-fit: cover; display: inline-flex; align-items: center; justify-content: center; font-size: 36px; font-weight: var(--weight-bold); color: #fff; box-shadow: 0 3px 12px rgba(23, 27, 45, .18); } .board-diner--extra .board-diner__avatar { box-shadow: 0 0 0 4px var(--tint), 0 3px 12px rgba(23, 27, 45, .18); } /* Teintes stables par personne, pour les portraits absents. Désaturées afin de ne pas trancher avec le reste de l'écran, mais assez distinctes pour différencier deux collaborateurs sans photo. */ .board-diner__avatar--t0 { background: #5A61CE; } .board-diner__avatar--t1 { background: #BE5A52; } .board-diner__avatar--t2 { background: #B08046; } .board-diner__avatar--t3 { background: #4F8B62; } .board-diner__avatar--t4 { background: #47818C; } .board-diner__avatar--t5 { background: #8D5EA3; } .board-diner__avatar--t6 { background: #AE5F79; } .board-diner__avatar--t7 { background: #5B6878; } /* Quantité d'une commande complémentaire, en pastille sur le portrait. */ .board-diner__qty { position: absolute; right: -2px; bottom: 0; min-width: 38px; height: 32px; padding: 0 8px; border-radius: var(--radius-full); background: var(--tint); border: 3px solid #fff; color: #fff; font-size: 19px; font-weight: var(--weight-bold); display: inline-flex; align-items: center; justify-content: center; } .board-dish__nobody { font-size: 22px; color: var(--gray-400); text-align: center; } /* ----- États et pied ----- */ .board__empty { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 24px; } .board__empty .lucide { width: 96px; height: 96px; color: var(--gray-300); } .board__empty-title { font-size: 50px; font-weight: var(--weight-semibold); color: var(--gray-500); } /* Très grands écrans (TV 4K) : tout grossit franchement — c'est là que se joue le confort de lecture à dix mètres. */ @media (min-width: 2200px) { .board { --avatar: 140px; --dgap: 14px; --dpad: 24px; padding: 24px 48px 24px; gap: 18px; } .board__kicker { font-size: 26px; gap: 24px; } .board__brand { font-size: 24px; } .board__date { font-size: 78px; } .board__counter { padding: 12px 30px; border-radius: 24px; } .board__counter-value { font-size: 58px; } .board__counter-label { font-size: 28px; } .board__grid { gap: 26px; } .board-col { gap: 18px; } .board-col__head { padding: 8px 0; border-radius: 22px; gap: 18px; } .board-col__head .lucide { width: 44px; height: 44px; } .board-col__name { font-size: 38px; } .board-col__dishes { gap: 18px; } .board-dish { border-radius: 34px; } .board-dish__title { font-size: 42px; } .board-dish__count { font-size: 96px; } .board-dish__photo { width: 150px; height: 150px; border-radius: 26px; } .board-dish { gap: 18px; padding: 20px 30px; } .board-dish__head { gap: 28px; } .board__title { font-size: 96px; } .board__meta { font-size: 34px; } .board__brand { font-size: 34px; } .board-col__count { font-size: 30px; } .board-diner__avatar { font-size: 72px; } .board-diner__qty { min-width: 74px; height: 62px; font-size: 36px; border-width: 5px; } .board-dish__nobody { font-size: 34px; } } /* ============================================================ Thème « nuit » — le tableau des repas dans l'ambiance des autres écrans des locaux (voir modules/screens.css, .sc--night). Comme le thème terminal, il ne fait que redécorer : la grille, les tailles et l'auto-ajustement restent ceux du thème clair. Les mêmes valeurs que la famille sc--night — fond #07080F, voiles lents tirés de la teinte, plaques translucides — pour que deux téléviseurs voisins se ressemblent. ============================================================ */ .board-body--night { --ink: #FFFFFF; --panel: rgba(255, 255, 255, .05); --panel-line: rgba(255, 255, 255, .09); color: #fff; background: #07080F; } /* Voiles de couleur très lents : la page respire sans qu'on puisse dire ce qui bouge. Les visages, eux, ressortent. */ .board-body--night::before { content: ""; position: fixed; inset: -25%; z-index: 0; background: radial-gradient(48% 42% at 18% 22%, color-mix(in srgb, var(--tint) 55%, transparent), transparent 68%), radial-gradient(42% 38% at 82% 14%, color-mix(in srgb, var(--tint) 32%, #7A4FD6 40%), transparent 66%), radial-gradient(52% 44% at 62% 92%, color-mix(in srgb, var(--tint) 26%, #0E7C93 40%), transparent 70%); filter: blur(40px); opacity: .42; animation: board-aurora 48s ease-in-out infinite alternate; } @keyframes board-aurora { 0% { transform: translate3d(0, 0, 0) scale(1); } 50% { transform: translate3d(2%, -2%, 0) scale(1.08); } 100% { transform: translate3d(-2%, 1%, 0) scale(1.03); } } /* Le contenu passe devant les voiles. */ .board-body--night .board { position: relative; z-index: 1; } .board-body--night .board__date { color: #fff; } .board-body--night .board__updated, .board-body--night .board__brand, .board-body--night .board__counter-label { color: rgba(255, 255, 255, .62); } .board-body--night .board__counter { background: var(--panel); border: 1px solid var(--panel-line); backdrop-filter: blur(14px); box-shadow: none; } /* L'ambre du compteur « en retard » vire au clair : sur fond noir, le brun d'origine ne se distinguait plus du texte courant. */ .board-body--night .board__counter--muted .board__counter-value { color: #F0B45E; } .board-body--night .board-col__head { background: color-mix(in srgb, var(--tint) 22%, transparent); border-color: var(--panel-line); } .board-body--night .board-col__name { color: color-mix(in srgb, var(--tint) 45%, #fff); } /* Les plaques restent translucides, mais sans la saturation du thème clair : elle amplifiait les voiles du fond, et le bas des colonnes virait au bleu. */ .board-body--night .board-col__head, .board-body--night .board-dish { backdrop-filter: blur(22px); } .board-body--night .board-dish { background: var(--panel); border-color: var(--panel-line); box-shadow: 0 10px 30px rgba(0, 0, 0, .35); } .board-body--night .board-dish__title { color: #fff; } .board-body--night .board-dish.is-empty { background: rgba(255, 255, 255, .025); box-shadow: none; } .board-body--night .board-dish.is-empty .board-dish__count { background: rgba(255, 255, 255, .14); color: rgba(255, 255, 255, .62); } .board-body--night .board-dish__nobody { color: rgba(255, 255, 255, .34); } /* Le portrait porte sa propre ombre : sur fond noir, celle du thème clair ne se voyait plus et les vignettes flottaient sans se détacher. */ .board-body--night .board-diner__avatar { box-shadow: 0 3px 14px rgba(0, 0, 0, .5); } .board-body--night .board-diner--extra .board-diner__avatar { box-shadow: 0 0 0 4px var(--tint), 0 3px 14px rgba(0, 0, 0, .5); } .board-body--night .board-diner__qty { border-color: #0B0D18; } .board-body--night .board__empty-title { color: rgba(255, 255, 255, .55); } .board-body--night .board__empty .lucide { color: rgba(255, 255, 255, .22); } /* ============================================================ Thème « terminal » — habillage rétro phosphore vert, à allumer depuis Administration → Repas pour une journée particulière. Il ne fait que redécorer : la grille, les tailles et le script d'auto-ajustement sont ceux du thème clair. Un seul sélecteur racine change tout, donc rien à maintenir en double. ============================================================ */ .board-body--terminal { --tint: #2BE86B; --ink: #7CFFB0; --phosphor: #2BE86B; --phosphor-dim: rgba(43, 232, 107, .42); color: var(--phosphor); background: radial-gradient(1400px 900px at 50% 0%, rgba(43, 232, 107, .09), transparent 70%), #050A06; font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace); } /* Lignes de balayage d'un moniteur cathodique : très légères, sinon elles fatiguent l'œil sur un écran allumé toute la journée. */ .board-body--terminal::after { content: ""; position: fixed; inset: 0; pointer-events: none; background: repeating-linear-gradient(180deg, rgba(0, 0, 0, .22) 0 1px, transparent 1px 3px); } .board-body--terminal .board__kicker, .board-body--terminal .board__date, .board-body--terminal .board__updated, .board-body--terminal .board__brand, .board-body--terminal .board__counter-label { color: var(--phosphor); letter-spacing: 0.06em; } .board-body--terminal .board__date { text-transform: uppercase; text-shadow: 0 0 14px rgba(43, 232, 107, .55); } /* Curseur clignotant : le détail qui fait la blague. */ .board-body--terminal .board__date::after { content: "_"; animation: board-caret 1.1s steps(1) infinite; } @keyframes board-caret { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0; } } .board-body--terminal .board__updated::before { content: "· "; } .board-body--terminal .board__counter { background: transparent; border: 2px solid var(--phosphor-dim); border-radius: 4px; box-shadow: none; } .board-body--terminal .board__counter-value { color: var(--phosphor); } .board-body--terminal .board__counter--muted .board__counter-value { color: #E8C15A; } .board-body--terminal .board-col__head { background: transparent; backdrop-filter: none; border: 2px solid var(--phosphor-dim); border-radius: 4px; color: var(--phosphor); } .board-body--terminal .board-col__name::before { content: "["; margin-right: .5em; } .board-body--terminal .board-col__name::after { content: "]"; margin-left: .5em; } .board-body--terminal .board-dish { background: rgba(43, 232, 107, .04); backdrop-filter: none; border: 2px solid var(--phosphor-dim); border-radius: 6px; box-shadow: none; } .board-body--terminal .board-dish__title { color: var(--phosphor); letter-spacing: 0; text-shadow: 0 0 10px rgba(43, 232, 107, .40); } .board-body--terminal .board-dish__title::before { content: "> "; opacity: .65; } .board-body--terminal .board-dish__count { background: transparent; border-radius: 3px; color: var(--phosphor); } .board-body--terminal .board-dish__count::before { content: "["; } .board-body--terminal .board-dish__count::after { content: "]"; } .board-body--terminal .board-dish.is-empty { background: transparent; opacity: .5; } .board-body--terminal .board-dish__nobody { color: var(--phosphor-dim); } /* Portraits traités en phosphore : c'est ce qui fait basculer l'écran entier dans le thème, plutôt qu'une grille verte avec des photos couleur dedans. */ .board-body--terminal .board-diner__avatar { border-radius: 4px; filter: grayscale(1) brightness(1.05) contrast(1.15) sepia(1) hue-rotate(65deg) saturate(3.2); box-shadow: 0 0 0 2px var(--phosphor-dim); background: #0A140C; color: var(--phosphor); } .board-body--terminal .board-diner--extra .board-diner__avatar { box-shadow: 0 0 0 3px var(--phosphor); } .board-body--terminal .board-diner__qty { background: #050A06; border: 2px solid var(--phosphor); border-radius: 3px; color: var(--phosphor); } .board-body--terminal .board__empty-title { color: var(--phosphor); } .board-body--terminal .board__empty .lucide { color: var(--phosphor-dim); } /* ----- En-tête de l'écran, d'après la maquette ----- */ .board__brand { font-size: 22px; font-weight: var(--weight-bold); letter-spacing: -0.02em; color: var(--gray-500); } .board__title { margin: 2px 0 0; font-size: 58px; font-weight: var(--weight-bold); letter-spacing: -0.03em; line-height: 1.02; color: var(--ink); } .board__meta { display: flex; align-items: center; gap: 10px; margin-top: 4px; font-size: 22px; color: var(--gray-500); } .board__sep { opacity: 0.45; } .board-col__count { font-size: 20px; font-weight: var(--weight-medium); color: var(--gray-500); white-space: nowrap; }