/* ============================================================ Affichages muraux : accueil, visites, anniversaires d'arrivée. Vus sur des téléviseurs de 27 à 82 pouces, de très loin, sans que personne ne puisse rien régler. Trois principes en découlent : 1. Tout est dimensionné en vw borné par clamp(). La mise en page ne change pas d'une diagonale à l'autre, seule l'échelle suit. 2. Une seule chose à la fois occupe la scène. Quand il y en a trop, ça défile — plutôt que de tout rétrécir jusqu'à l'illisible. 3. Le mouvement est lent et continu. Un écran de couloir ne doit jamais clignoter ni sauter : on le regarde deux secondes en passant. Trois ambiances : nuit (défaut), clair, terminal. ============================================================ */ .sc { --accent: #565DF6; --gap: clamp(10px, 0.95vw, 28px); --radius: clamp(14px, 1.2vw, 32px); margin: 0; min-height: 100vh; font-family: 'Fira Sans', ui-sans-serif, system-ui, sans-serif; overflow: hidden; -webkit-font-smoothing: antialiased; } /* ── Ambiance nuit ──────────────────────────────────────────────────────── Fond presque noir et voiles de couleur très lents : la page respire sans qu'on puisse dire ce qui bouge. Les logos et les visages, eux, ressortent. */ .sc--night { --ink: #FFFFFF; --ink-soft: rgba(255, 255, 255, 0.62); --ink-faint: rgba(255, 255, 255, 0.34); --panel: rgba(255, 255, 255, 0.045); --panel-line: rgba(255, 255, 255, 0.09); --plate: #FFFFFF; color: var(--ink); background: #07080F; } .sc--night::before { content: ""; position: fixed; inset: -25%; z-index: 0; background: radial-gradient(48% 42% at 18% 22%, color-mix(in srgb, var(--accent) 55%, transparent), transparent 68%), radial-gradient(42% 38% at 82% 14%, color-mix(in srgb, var(--accent) 32%, #7A4FD6 40%), transparent 66%), radial-gradient(52% 44% at 62% 92%, color-mix(in srgb, var(--accent) 26%, #0E7C93 40%), transparent 70%); filter: blur(40px); opacity: 0.5; animation: aurora 48s ease-in-out infinite alternate; } @keyframes 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); } } /* ── Ambiance claire ──────────────────────────────────────────────────── */ .sc--tint { --ink: #14161F; --ink-soft: rgba(20, 22, 31, 0.62); --ink-faint: rgba(20, 22, 31, 0.34); --panel: rgba(255, 255, 255, 0.72); --panel-line: rgba(15, 23, 42, 0.07); --plate: #FFFFFF; color: var(--ink); background: radial-gradient(60% 50% at 12% 4%, color-mix(in srgb, var(--accent) 15%, transparent), transparent 62%), radial-gradient(55% 46% at 92% 10%, color-mix(in srgb, var(--accent) 10%, transparent), transparent 60%), linear-gradient(165deg, #FBFCFE 0%, #F1F3F9 58%, #E9EBF3 100%); } /* ── Ambiance terminal ────────────────────────────────────────────────── */ .sc--terminal { /* L'ambiance est monochrome : la teinte de l'écran n'y a plus de sens. Elle est posée en ligne sur , d'où le !important — c'est la seule façon pour une feuille de reprendre la main sur un attribut style. */ --accent: #2BE86B !important; --ink: #7CFFB0; --ink-soft: rgba(43, 232, 107, 0.66); --ink-faint: rgba(43, 232, 107, 0.38); --panel: rgba(43, 232, 107, 0.05); --panel-line: rgba(43, 232, 107, 0.3); --plate: rgba(43, 232, 107, 0.1); color: var(--ink); background: radial-gradient(1400px 900px at 50% 0%, rgba(43, 232, 107, 0.08), transparent 70%), #040705; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; } .sc--terminal::after { content: ""; position: fixed; inset: 0; z-index: 3; pointer-events: none; background: repeating-linear-gradient(180deg, rgba(0, 0, 0, 0.22) 0 1px, transparent 1px 3px); } .sc--terminal .panel__title::before { content: "> "; } /* ── Structure ────────────────────────────────────────────────────────── */ .sc-page { position: relative; z-index: 1; min-height: 100vh; padding: clamp(16px, 1.7vw, 48px); display: flex; flex-direction: column; gap: var(--gap); } .sc-head { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--gap); flex: none; } .sc-head__brand { font-size: clamp(11px, 0.8vw, 21px); font-weight: 700; letter-spacing: 0.24em; text-transform: uppercase; color: var(--accent); } .sc--night .sc-head__brand { color: color-mix(in srgb, var(--accent) 55%, #fff); } .sc-head__title { /* La feuille globale pose color: var(--text-primary) sur h1..h6, une encre sombre qui bat l'héritage. L'ambiance doit reprendre la main. */ color: inherit; margin: 0.08em 0 0; font-size: clamp(28px, 3.4vw, 92px); font-weight: 800; line-height: 1; letter-spacing: -0.025em; } .sc-head__meta { text-align: right; } .sc-head__date { font-size: clamp(13px, 1.25vw, 34px); font-weight: 600; color: var(--ink-soft); } .sc-head__clock { font-size: clamp(26px, 2.9vw, 78px); font-weight: 800; line-height: 1.02; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; } .sc-cols { flex: 1; display: flex; gap: var(--gap); min-height: 0; } .sc-main { flex: 1; display: flex; flex-direction: column; gap: var(--gap); min-width: 0; min-height: 0; } .sc-side { flex: 0 0 clamp(230px, 23vw, 600px); display: flex; flex-direction: column; gap: var(--gap); min-height: 0; } .panel { background: var(--panel); border: 1px solid var(--panel-line); border-radius: var(--radius); padding: clamp(12px, 1.15vw, 32px); display: flex; flex-direction: column; gap: clamp(8px, 0.7vw, 20px); min-height: 0; backdrop-filter: blur(14px); } .panel--stage { flex: 1; } .panel--week { flex: none; } .panel__head { display: flex; align-items: baseline; justify-content: space-between; gap: 0.6em; flex: none; } .panel__title { color: inherit; margin: 0; font-size: clamp(14px, 1.35vw, 36px); font-weight: 800; letter-spacing: 0.02em; } .panel__count, .panel__empty { font-size: clamp(12px, 1.05vw, 28px); font-weight: 600; color: var(--ink-faint); } /* ── Défilement : une page visible, les autres en attente ─────────────── */ .faces, .sc-stage { position: relative; flex: 1; min-height: 0; } .faces__page, .cheer { position: absolute; inset: 0; opacity: 0; transform: translateY(1.4vh) scale(0.995); transition: opacity 0.85s ease, transform 0.85s ease; pointer-events: none; } .faces__page.is-active, .cheer.is-active { opacity: 1; transform: none; } .faces__dots { position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); display: flex; gap: 0.55em; } .dot { width: clamp(6px, 0.5vw, 13px); height: clamp(6px, 0.5vw, 13px); border-radius: 50%; background: var(--ink-faint); transition: background 0.4s ease, transform 0.4s ease; } .dot.is-active { background: var(--accent); transform: scale(1.35); } /* ── Absents du jour ──────────────────────────────────────────────────── */ .faces__page { display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: min-content; gap: clamp(8px, 0.8vw, 22px); /* Cartes à la hauteur de leur contenu, bloc centré : étirées sur la hauteur de la scène, elles n'étaient plus que du vide autour d'un prénom. */ align-content: center; } .face { display: flex; align-items: center; gap: clamp(8px, 0.75vw, 20px); padding: clamp(8px, 0.75vw, 22px); border-radius: calc(var(--radius) * 0.66); background: var(--panel); border: 1px solid var(--panel-line); min-width: 0; } .sc-face__img { flex: none; width: clamp(48px, 4.9vw, 128px); height: clamp(48px, 4.9vw, 128px); border-radius: 50%; object-fit: cover; display: inline-flex; align-items: center; justify-content: center; font-size: clamp(14px, 1.35vw, 36px); font-weight: 700; color: #fff; background: var(--accent); box-shadow: 0 0 0 2px var(--panel-line); } .face__body { min-width: 0; } .face__name { font-size: clamp(15px, 1.5vw, 40px); font-weight: 700; line-height: 1.1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* Le motif de l'absence est écrit, pas seulement iconographié : sur la scène principale il y a la place, et « Télétravail » vaut mieux qu'un pictogramme qu'il faut avoir appris. */ .face__type { display: flex; align-items: center; gap: 0.4em; margin-top: 0.15em; font-size: clamp(11px, 1.02vw, 27px); font-weight: 600; color: var(--ink-soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .face__type .sc-i { width: 1.15em; height: 1.15em; flex: none; } .face--paid_leave .face__type { color: #F2B24C; } .face--remote_work .face__type { color: #4FC8DD; } .face--special_leave .face__type { color: #F27DA5; } .face--unpaid_leave .face__type, .face--sick_leave .face__type, .face--masked .face__type { color: var(--ink-faint); } .sc--tint .face--paid_leave .face__type { color: #B4690E; } .sc--tint .face--remote_work .face__type { color: #0E7C93; } .sc--tint .face--special_leave .face__type { color: #C13B63; } .sc--terminal .face__type { color: var(--ink-soft); } .all-here { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.4em; font-size: clamp(18px, 1.9vw, 50px); font-weight: 700; color: var(--ink-faint); } .all-here__icon { width: clamp(34px, 3.2vw, 86px); height: clamp(34px, 3.2vw, 86px); color: var(--accent); } /* ── Le reste de la semaine ───────────────────────────────────────────── */ .week { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(8px, 0.7vw, 20px); } .week__day { padding: clamp(8px, 0.7vw, 20px); border-radius: calc(var(--radius) * 0.6); background: var(--panel); border: 1px solid var(--panel-line); display: flex; flex-direction: column; gap: 0.3em; } .week__name { font-size: clamp(11px, 0.95vw, 25px); font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-soft); } .week__num { font-size: clamp(20px, 2vw, 54px); font-weight: 800; line-height: 1; color: var(--ink-faint); font-variant-numeric: tabular-nums; } /* Pile de visages : les vignettes se chevauchent, ce qui donne le nombre d'un coup d'œil sans avoir à lire le compte. */ .week__stack { display: flex; align-items: center; margin-top: 0.25em; } .week__face { width: clamp(30px, 2.7vw, 72px); height: clamp(30px, 2.7vw, 72px); border-radius: 50%; object-fit: cover; display: inline-flex; align-items: center; justify-content: center; font-size: clamp(10px, 0.86vw, 23px); font-weight: 700; color: #fff; background: var(--accent); border: 2px solid #0B0D16; margin-right: calc(-0.28 * clamp(30px, 2.7vw, 72px)); } .sc--tint .week__face { border-color: #fff; } .week__face:last-of-type { margin-right: 0; } .week__more { margin-left: 0.8em; font-size: clamp(11px, 0.95vw, 25px); font-weight: 700; color: var(--ink-faint); } .week__count, .week__none { font-size: clamp(10px, 0.88vw, 23px); font-weight: 600; color: var(--ink-faint); } /* Pastilles d'initiales : couleur stable pour une personne donnée. */ .sc-face__img--t0, .week__face--t0, .joiner__face--t0, .fact__face--t0, .cheer__face--t0 { background: #5B62F8; } .sc-face__img--t1, .week__face--t1, .joiner__face--t1, .fact__face--t1, .cheer__face--t1 { background: #12946F; } .sc-face__img--t2, .week__face--t2, .joiner__face--t2, .fact__face--t2, .cheer__face--t2 { background: #D08A22; } .sc-face__img--t3, .week__face--t3, .joiner__face--t3, .fact__face--t3, .cheer__face--t3 { background: #D2604A; } .sc-face__img--t4, .week__face--t4, .joiner__face--t4, .fact__face--t4, .cheer__face--t4 { background: #9A4B7C; } .sc-face__img--t5, .week__face--t5, .joiner__face--t5, .fact__face--t5, .cheer__face--t5 { background: #3187EE; } .sc-face__img--t6, .week__face--t6, .joiner__face--t6, .fact__face--t6, .cheer__face--t6 { background: #5B8F68; } .sc-face__img--t7, .week__face--t7, .joiner__face--t7, .fact__face--t7, .cheer__face--t7 { background: #7E5AC6; } /* ── Déjeuner ─────────────────────────────────────────────────────────── */ .course + .course { margin-top: clamp(8px, 0.7vw, 20px); } .course__label { display: flex; align-items: center; gap: 0.45em; font-size: clamp(10px, 0.85vw, 22px); font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent); } .sc--night .course__label { color: color-mix(in srgb, var(--accent) 45%, #fff); } .course__label .sc-i { width: 1.2em; height: 1.2em; } .course__dish { font-size: clamp(14px, 1.3vw, 35px); font-weight: 600; line-height: 1.28; margin-top: 0.12em; } /* ── Arrivées ─────────────────────────────────────────────────────────── */ .joiner { display: flex; align-items: center; gap: clamp(10px, 0.9vw, 26px); } .joiner + .joiner { margin-top: clamp(10px, 0.85vw, 24px); } .joiner__stage { position: relative; flex: none; } .joiner__face { width: clamp(52px, 4.8vw, 130px); height: clamp(52px, 4.8vw, 130px); border-radius: 50%; object-fit: cover; display: inline-flex; align-items: center; justify-content: center; font-size: clamp(18px, 1.7vw, 46px); font-weight: 700; color: #fff; background: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 40%, transparent); } .joiner__name { font-size: clamp(16px, 1.5vw, 40px); font-weight: 700; line-height: 1.12; } .joiner__job { font-size: clamp(12px, 1.05vw, 28px); font-weight: 600; color: var(--accent); } .sc--night .joiner__job { color: color-mix(in srgb, var(--accent) 45%, #fff); } .joiner__date { font-size: clamp(10px, 0.88vw, 23px); color: var(--ink-faint); } /* ── Écran des visites ──────────────────────────────────────────────────── Un hall d'accueil en photo, et le logo du tiers accroché au mur à côté du nôtre. Le décor n'est pas un simple fond : ses deux zones — le mur éclairé par les spots à droite, la pénombre à gauche — sont à une place fixe dans l'image. La mise en page est donc posée en pourcentages du cadre plutôt qu'en flux, pour tomber dessus quelle que soit la diagonale du téléviseur. La photo n'habille que l'ambiance nuit. En clair et en terminal, la même mise en page tient sur le fond de l'ambiance : le relief de l'enseigne ne dépend jamais du décor, seulement de ses couleurs. ───────────────────────────────────────────────────────────────────────── */ .vs { position: relative; display: block; height: 100vh; padding: 0; overflow: hidden; /* Encres de l'écran, dérivées de l'ambiance : le texte est posé sur une photo, il lui faut plus de présence que les --ink-* des autres écrans. */ --vs-soft: color-mix(in srgb, var(--ink) 78%, transparent); --vs-faint: color-mix(in srgb, var(--ink) 52%, transparent); } .sc--night .vs { background-color: #04091C; background-image: var(--wall, none); background-position: center; background-size: cover; background-repeat: no-repeat; } /* Le voile. La photo est belle mais bavarde : les dégradés rendent la colonne de gauche lisible, assoient l'heure en haut à droite et posent le bandeau du bas. Le mur, lui, n'est pas assombri — il reçoit au contraire une flaque de lumière chaude, dans le prolongement des deux spots, pour que l'enseigne paraisse éclairée par eux. */ .vs__scrim { position: absolute; inset: 0; z-index: 1; } .sc--night .vs__scrim { background: radial-gradient(26% 30% at 79% 31%, rgba(255, 206, 150, 0.14), transparent 72%), linear-gradient(101deg, rgba(0, 13, 42, 0.96) 0%, rgba(0, 14, 45, 0.92) 20%, rgba(0, 14, 45, 0.62) 38%, rgba(0, 14, 45, 0.16) 54%, rgba(0, 14, 45, 0) 66%), linear-gradient(200deg, rgba(0, 6, 22, 0.7) 0%, rgba(0, 6, 22, 0) 24%), linear-gradient(0deg, rgba(0, 10, 34, 0.82) 0%, rgba(0, 10, 34, 0.3) 11%, rgba(0, 10, 34, 0) 22%); } /* ── En-tête : à venir à gauche, la date et l'heure à droite ───────────── */ .vs__head { position: absolute; z-index: 4; top: clamp(12px, 3.2vh, 46px); left: clamp(14px, 3.4vw, 66px); right: clamp(14px, 3.4vw, 66px); align-items: flex-start; } .vs .sc-head__meta { margin-left: auto; } .vs .sc-head__date { font-size: clamp(12px, 1.95vh, 30px); font-weight: 500; color: color-mix(in srgb, var(--ink) 88%, transparent); } .vs .sc-head__clock { font-size: clamp(26px, 5.4vh, 84px); font-weight: 700; line-height: 1.04; letter-spacing: -0.015em; } .vs .sc-next { max-width: 44%; padding-top: 0; font-size: clamp(9px, 1.55vh, 24px); color: var(--vs-faint); } .vs .sc-next__item strong { color: var(--vs-soft); } /* ── La scène ─────────────────────────────────────────────────────────── */ .vs__stage { position: absolute; inset: 0; z-index: 2; flex: none; } .vs-guest { position: absolute; inset: 0; opacity: 0; transform: translateY(1.2vh); transition: opacity 0.9s ease, transform 0.9s ease; pointer-events: none; } .vs-guest.is-active { opacity: 1; transform: none; } .vs-guest__intro { position: absolute; left: clamp(14px, 3.6vw, 72px); top: 50%; width: 46%; transform: translateY(-50%); } .vs-guest__kicker { margin: 0; font-size: clamp(15px, 4.3vh, 66px); font-weight: 400; line-height: 1.1; color: var(--ink); } .vs-guest__rule { display: block; width: clamp(34px, 7.4vh, 114px); height: clamp(2px, 0.5vh, 8px); margin: clamp(8px, 2.2vh, 34px) 0 clamp(6px, 1.6vh, 26px); background: var(--accent); } /* Le nom se lit depuis le couloir : il prend toute la place qu'il peut. La taille suit sa longueur — « Kaze » et « Compagnie Générale des Eaux » ne tiennent pas dans la même colonne, et rien ne doit déborder. */ .vs-guest__name { color: var(--ink); margin: 0; font-size: min(14.6vh, calc(148vw / var(--len, 8))); font-weight: 800; line-height: 0.98; letter-spacing: -0.035em; overflow-wrap: anywhere; } .vs-guest__name--quiet { font-size: clamp(24px, 7.6vh, 116px); } .sc--night .vs-guest__kicker { text-shadow: 0 0.05em 0.3em rgba(0, 6, 24, 0.7); } .sc--night .vs-guest__name { text-shadow: 0 0.04em 0.16em rgba(0, 6, 24, 0.6); } .vs-guest__welcome { display: flex; align-items: center; gap: clamp(8px, 1.6vw, 30px); margin: clamp(12px, 3.4vh, 52px) 0 0; max-width: 88%; font-size: clamp(12px, 2.4vh, 36px); font-weight: 500; line-height: 1.32; color: color-mix(in srgb, var(--ink) 92%, transparent); } .vs-guest__seal { flex: none; display: inline-flex; align-items: center; justify-content: center; width: clamp(30px, 7.6vh, 116px); height: clamp(30px, 7.6vh, 116px); border-radius: 50%; color: var(--ink); background: color-mix(in srgb, var(--accent) 30%, rgba(0, 12, 40, 0.82)); border: 1px solid color-mix(in srgb, var(--accent) 48%, transparent); } .sc--tint .vs-guest__seal { background: color-mix(in srgb, var(--accent) 14%, #fff); } .vs-guest__seal .sc-i { width: 52%; height: 52%; stroke-width: 1.7; } .vs-guest__facts { display: flex; flex-wrap: wrap; align-items: center; gap: clamp(7px, 1.5vw, 28px); margin-top: clamp(10px, 3vh, 44px); font-size: clamp(10px, 1.95vh, 29px); font-weight: 600; color: var(--vs-soft); } .vs-fact { display: inline-flex; align-items: center; gap: 0.5em; } .vs-fact--kind { padding: 0.26em 0.95em; border-radius: 999px; font-size: 0.84em; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink); background: color-mix(in srgb, var(--accent) 32%, transparent); border: 1px solid color-mix(in srgb, var(--accent) 50%, transparent); } .vs-fact--time { color: var(--ink); font-weight: 700; font-variant-numeric: tabular-nums; } /* ── L'enseigne, et son relief ───────────────────────────────────────────── Le mur est éclairé par deux spots, et la caméra est un peu plus bas que l'enseigne : on voit donc le dessous des lettres. Tout le relief est là — une tranche sombre qui descend, une ombre portée plus loin sur le mur, et le halo chaud que le mur renvoie. La tranche est faite de drop-shadow empilés. Chaque filtre s'applique au résultat du précédent : douze copies décalées d'un même pas forment un volume plein, et la couleur du n-ième filtre ne peint que la bande qu'il découvre — d'où les deux premières, plus claires, qui font l'arête sous la face. Le filtre est posé sur le conteneur et non sur chaque logo : une seule épaisseur de matière pour toute l'enseigne, comme des lettres découpées dans la même plaque. L'ombre portée et le halo passent en dernier pour envelopper le volume entier ; le halo tient aussi lieu de rétro-éclairage, sans quoi un logo sombre disparaîtrait dans un mur sombre. */ .vs-sign { position: absolute; z-index: 3; left: 63%; right: 5%; top: 22%; height: 22%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: clamp(4px, 1.9vh, 28px); --relief: 0.15vh; --relief-lit: #454A5C; --relief-side: #090B12; --relief-cast: rgba(0, 0, 0, 0.78); --relief-glow: rgba(255, 216, 164, 0.3); /* Le mur renvoie assez de lumière pour cerner l'enseigne : sans ce liseré, un logo sombre se perdrait dans un mur sombre. Il vient en dernier, sur le volume déjà formé — posé sur la face, les copies de l'extrusion l'étireraient en traînée. */ --relief-rim: rgba(255, 238, 212, 0.5); --relief-stack: drop-shadow(0 var(--relief) 0 var(--relief-lit)) drop-shadow(0 var(--relief) 0 var(--relief-lit)) drop-shadow(0 var(--relief) 0 var(--relief-side)) drop-shadow(0 var(--relief) 0 var(--relief-side)) drop-shadow(0 var(--relief) 0 var(--relief-side)) drop-shadow(0 var(--relief) 0 var(--relief-side)) drop-shadow(0 var(--relief) 0 var(--relief-side)) drop-shadow(0 var(--relief) 0 var(--relief-side)) drop-shadow(0 var(--relief) 0 var(--relief-side)) drop-shadow(0 var(--relief) 0 var(--relief-side)) drop-shadow(0 var(--relief) 0 var(--relief-side)) drop-shadow(0 var(--relief) 0 var(--relief-side)) drop-shadow(0 1.05vh 1.1vh var(--relief-cast)) drop-shadow(0 0 2.2vh var(--relief-glow)) drop-shadow(0 0 0.28vh var(--relief-rim)); filter: var(--relief-stack); } /* En clair il n'y a pas de mur : la matière s'amincit, la tranche s'éclaircit et le halo s'éteint. À pleine épaisseur, l'enseigne se lisait double. */ .sc--tint .vs-sign { --relief: 0.09vh; --relief-lit: #E4E8F0; --relief-side: #AAB1C1; --relief-cast: rgba(18, 26, 48, 0.2); --relief-glow: transparent; --relief-rim: transparent; } .sc--terminal .vs-sign { --relief-lit: #0C3D1F; --relief-side: #04120A; --relief-glow: rgba(43, 232, 107, 0.3); --relief-rim: rgba(43, 232, 107, 0.4); } .sc--terminal .vs-sign__logo { filter: grayscale(1) brightness(1.5) contrast(1.2); } /* Notre enseigne existe en deux encres : les deux sont rendues, l'ambiance choisit. Le réglage se change à la volée dans l'aperçu de l'administration, qui bascule la classe du sans recharger — un choix fait côté serveur y resterait faux jusqu'au rafraîchissement suivant. */ .vs-sign__host { width: auto; height: clamp(14px, 4.5vh, 68px); } .vs-sign__host--day { display: none; } .sc--tint .vs-sign__host--night { display: none; } .sc--tint .vs-sign__host--day { display: block; } .vs-sign--solo .vs-sign__host { height: clamp(18px, 6vh, 92px); } .vs-sign__x { font-size: clamp(11px, 3.6vh, 55px); font-weight: 400; line-height: 1; color: var(--ink); } .vs-sign__guest { display: flex; align-items: center; justify-content: center; width: 100%; } /* Hauteur imposée, largeur libre : un logo carré et un logo tout en longueur pèsent alors le même poids sur le mur. `contain` garde les proportions quand la largeur vient buter sur le bord de l'enseigne. */ .vs-sign__logo { width: auto; height: clamp(22px, 7.2vh, 110px); max-width: 100%; object-fit: contain; } /* Un logo sans couche alpha porte son fond blanc : le relief en dessinerait le rectangle. Autant l'assumer — c'est un panneau vissé au mur. */ .vs-sign__logo--panel { box-sizing: content-box; padding: clamp(3px, 1vh, 15px) clamp(6px, 1.8vh, 27px); border-radius: clamp(3px, 1.1vh, 17px); background: #fff; } /* Pas de logo : le nom prend le relief à sa place. */ .vs-sign__word { display: block; font-size: min(6.6vh, calc(76vw / var(--len, 8))); font-weight: 800; line-height: 1.04; letter-spacing: -0.02em; text-align: center; color: var(--ink); overflow-wrap: anywhere; } /* ── Le bandeau du bas : la journée d'un coup d'œil ────────────────────── */ .vs-rail { position: absolute; z-index: 4; left: 0; right: 0; bottom: clamp(10px, 7vh, 100px); display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: clamp(10px, 2.2vw, 44px); padding: 0 clamp(14px, 3.4vw, 66px); font-size: clamp(10px, 2vh, 30px); font-weight: 600; } .vs-rail__item { display: inline-flex; align-items: center; gap: clamp(4px, 0.8vw, 15px); color: var(--vs-faint); white-space: nowrap; transition: color 0.6s ease; } .vs-rail__dot { width: clamp(4px, 1.05vh, 16px); height: clamp(4px, 1.05vh, 16px); border-radius: 50%; background: color-mix(in srgb, var(--accent) 52%, transparent); transition: background 0.6s ease, box-shadow 0.6s ease, transform 0.6s ease; } .vs-rail__item.is-active { color: var(--ink); } .vs-rail__item.is-active .vs-rail__dot { background: var(--accent); transform: scale(1.18); box-shadow: 0 0 0 0.3em color-mix(in srgb, var(--accent) 22%, transparent); } /* ── Faits d'une visite ou d'un anniversaire ──────────────────────────── */ .fact { display: inline-flex; align-items: center; gap: 0.45em; } .fact .sc-i { width: 1.15em; height: 1.15em; } .fact--time { color: var(--ink); font-weight: 800; font-variant-numeric: tabular-nums; } .fact__face { width: 1.5em; height: 1.5em; border-radius: 50%; object-fit: cover; display: inline-flex; align-items: center; justify-content: center; font-size: 0.55em; font-weight: 700; color: #fff; background: var(--accent); } /* ── Anniversaires d'arrivée : le visage est la vedette ─────────────────── Un logo se reconnaît de loin, un visage encore mieux : c'est lui qu'on croise dans le couloir dix minutes plus tard. Le nombre d'années se pose dessus comme une médaille — l'information tient dans un chiffre, elle n'a pas besoin d'une phrase pour être lue à dix mètres. */ .cheer { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: clamp(14px, 1.5vw, 44px); text-align: center; } .cheer__stage { position: relative; display: flex; align-items: center; justify-content: center; padding: clamp(16px, 2vw, 56px); } .cheer__face { position: relative; z-index: 1; display: flex; align-items: center; justify-content: center; width: clamp(160px, 21vw, 480px); height: clamp(160px, 21vw, 480px); border-radius: 50%; object-fit: cover; font-size: clamp(58px, 7.4vw, 190px); font-weight: 800; line-height: 1; color: #fff; border: clamp(3px, 0.32vw, 9px) solid var(--plate); box-shadow: 0 clamp(14px, 1.6vw, 44px) clamp(40px, 4.4vw, 120px) rgba(0, 0, 0, 0.32); animation: plate-in 1s cubic-bezier(0.22, 1, 0.36, 1); } /* La médaille est posée sur le bord du visage plutôt qu'à côté : les deux se lisent d'un seul regard, sans que l'œil ait à faire l'aller-retour. */ .cheer__badge { position: absolute; z-index: 2; right: clamp(2px, 0.6vw, 20px); bottom: clamp(2px, 0.6vw, 20px); display: flex; flex-direction: column; align-items: center; justify-content: center; width: clamp(70px, 8.6vw, 200px); height: clamp(70px, 8.6vw, 200px); border-radius: 50%; background: var(--accent); color: #fff; border: clamp(3px, 0.32vw, 9px) solid var(--plate); box-shadow: 0 clamp(8px, 0.9vw, 24px) clamp(20px, 2.4vw, 64px) rgba(0, 0, 0, 0.34); animation: badge-in 1.1s cubic-bezier(0.22, 1, 0.36, 1) backwards; animation-delay: 0.35s; } .cheer__badge-count { font-size: clamp(28px, 3.4vw, 92px); font-weight: 800; line-height: 1; font-variant-numeric: tabular-nums; } .cheer__badge-unit { font-size: clamp(10px, 0.92vw, 25px); font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; opacity: 0.85; } @keyframes badge-in { from { opacity: 0; transform: scale(0.4) rotate(-14deg); } to { opacity: 1; transform: none; } } .cheer__kicker { display: inline-block; padding: 0.28em 1.1em; border-radius: 999px; font-size: clamp(11px, 1.02vw, 27px); font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; background: color-mix(in srgb, var(--accent) 22%, transparent); color: var(--ink); border: 1px solid var(--panel-line); } .cheer__name { color: inherit; margin: 0.28em 0 0; font-size: clamp(34px, 4.6vw, 128px); font-weight: 800; line-height: 1.02; letter-spacing: -0.03em; } .cheer__job { margin-top: 0.15em; font-size: clamp(15px, 1.5vw, 40px); font-weight: 600; color: var(--ink-soft); } .sc--night .cheer__job { color: color-mix(in srgb, var(--accent) 45%, #fff); } .cheer__facts { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: clamp(10px, 1.2vw, 34px); margin-top: clamp(8px, 0.8vw, 22px); font-size: clamp(14px, 1.35vw, 36px); font-weight: 600; color: var(--ink-soft); } /* Étincelles : l'arrivée d'un tiers est un petit événement. Discrètes une par une, elles font vivre la scène sans jamais entrer en concurrence avec le logo — c'est lui qu'on doit voir. */ .sparks { position: absolute; inset: 0; z-index: 2; pointer-events: none; } .spark { position: absolute; display: block; width: calc(var(--s, 1) * clamp(20px, 2.3vw, 62px)); height: calc(var(--s, 1) * clamp(20px, 2.3vw, 62px)); color: var(--accent); opacity: 0; filter: drop-shadow(0 0 clamp(6px, 0.7vw, 18px) currentColor); animation: spark 4.6s ease-in-out infinite; } .sc--night .spark { color: color-mix(in srgb, var(--accent) 40%, #fff); } .spark .sc-i { width: 100%; height: 100%; fill: currentColor; stroke-width: 1; } @keyframes spark { 0%, 100% { opacity: 0; transform: scale(0.3) rotate(-18deg); } 45% { opacity: 1; transform: scale(1) rotate(12deg); } 70% { opacity: 0.15; transform: scale(0.7) rotate(20deg); } } .sparks--small .spark { width: calc(var(--s, 1) * clamp(9px, 0.85vw, 22px)); height: calc(var(--s, 1) * clamp(9px, 0.85vw, 22px)); } /* ── Bandeau des visites du jour ──────────────────────────────────────── */ .sc-rail { flex: none; display: flex; align-items: center; gap: clamp(10px, 1vw, 28px); padding: clamp(10px, 0.9vw, 26px) clamp(12px, 1.1vw, 30px); border-radius: var(--radius); background: var(--panel); border: 1px solid var(--panel-line); backdrop-filter: blur(14px); overflow: hidden; } .sc-rail__label { flex: none; font-size: clamp(10px, 0.85vw, 22px); font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-faint); } .sc-rail__items { display: flex; gap: clamp(8px, 0.8vw, 22px); min-width: 0; overflow: hidden; } /* L'élément en scène est souligné dans le bandeau : on sait où on en est de la journée sans attendre le tour suivant. */ .sc-rail__item { display: flex; flex-direction: column; padding: 0.3em 1em; border-radius: 999px; border: 1px solid transparent; font-size: clamp(11px, 0.98vw, 26px); color: var(--ink-faint); white-space: nowrap; transition: color 0.5s ease, background 0.5s ease, border-color 0.5s ease; } .sc-rail__item strong { font-weight: 700; } .sc-rail__item span { font-size: 0.8em; } .sc-rail__item.is-active { color: var(--ink); background: color-mix(in srgb, var(--accent) 20%, transparent); border-color: color-mix(in srgb, var(--accent) 45%, transparent); } .sc-next { flex: none; display: flex; align-items: center; flex-wrap: wrap; gap: clamp(8px, 0.9vw, 24px); padding-top: clamp(6px, 0.6vw, 16px); font-size: clamp(11px, 0.92vw, 24px); color: var(--ink-faint); } .sc-next__label { font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; font-size: 0.85em; color: var(--accent); } .sc-next__item strong { font-weight: 700; color: var(--ink-soft); } /* ── Écran vide ───────────────────────────────────────────────────────── */ .sc-empty { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: clamp(8px, 0.7vw, 20px); text-align: center; } .sc-empty__icon { width: clamp(48px, 5vw, 140px); height: clamp(48px, 5vw, 140px); color: var(--accent); stroke-width: 1.2; } .sc-empty__title { font-size: clamp(22px, 2.3vw, 62px); font-weight: 800; } .sc-empty__hint { font-size: clamp(13px, 1.15vw, 31px); color: var(--ink-faint); } /* ── Écrans étroits (fenêtre de contrôle, petit téléviseur vertical) ──── */ @media (max-width: 1100px) { .sc-cols { flex-direction: column; } .sc-side { flex: none; flex-direction: row; } .sc-side .panel { flex: 1; } .faces__page { grid-template-columns: repeat(2, 1fr); } .week { grid-template-columns: repeat(2, 1fr); } } /* La mise en page des visites vise le mur de la photo, donc un cadre large. Plus étroit que 4:3 — une fenêtre de contrôle, un écran à la verticale — la photo ne cadre plus rien : on la retire et tout revient dans l'axe. */ @media (max-aspect-ratio: 4 / 3) { .sc--night .vs { background-image: none; } .sc--night .vs__scrim { background: linear-gradient(180deg, rgba(0, 12, 40, 0.5), rgba(0, 12, 40, 0.86)); } .vs-guest__intro { left: 6%; right: 6%; top: 46%; width: auto; text-align: center; } .vs-guest__rule { margin-left: auto; margin-right: auto; } .vs-guest__name { font-size: min(9vh, calc(180vw / var(--len, 8))); } .vs-guest__welcome { max-width: none; justify-content: center; } .vs-guest__facts { justify-content: center; } .vs-sign { left: 8%; right: 8%; top: 14%; height: 20%; } } /* Le mouvement peut gêner ; la mise à jour du contenu, elle, reste. */ @media (prefers-reduced-motion: reduce) { .sc--night::before, .spark, .cheer__face, .cheer__badge { animation: none; } .faces__page, .vs-guest, .cheer { transition: opacity 0.2s ease; transform: none; } } /* ============================================================ Écran d'accueil, refonte d'après la maquette de l'équipe. Deux colonnes : à gauche ce qu'on fête et ce qu'on mange, à droite le planning des absents sur trois jours. Tout passe par les variables d'ambiance — la maquette montre `tint`, mais nuit et terminal doivent continuer de tenir. ============================================================ */ .wc { display: flex; flex-direction: column; gap: var(--gap); height: 100vh; padding: clamp(14px, 1.5vw, 40px); position: relative; z-index: 1; } /* ── L'en-tête ───────────────────────────────────────────────────────── Une seule ligne : le logo à gauche, la date et le temps à droite. L'écran n'a pas de titre — le mur dit de lui-même où l'on est, et la hauteur ainsi gagnée revient au planning et au menu. */ .wc-head { flex: none; display: flex; align-items: center; justify-content: space-between; gap: var(--gap); } /* La hauteur reprend celle du mot qu'il remplace. Deux exemplaires dans le document, un seul visible : le clair prend la version sombre, la nuit et le terminal la version blanche. L'aperçu de l'administration bascule la classe du sans recharger — un choix fait côté serveur y resterait faux. */ .wc-head__logo { width: auto; height: clamp(13px, 1.05vw, 26px); } .wc-head__logo--day { display: none; } .sc--tint .wc-head__logo--night { display: none; } .sc--tint .wc-head__logo--day { display: block; } .wc-head__meta { display: flex; align-items: center; gap: clamp(7px, 0.6vw, 16px); font-size: clamp(13px, 1.15vw, 28px); color: var(--ink-soft); } .wc-head__sep { color: var(--ink-faint); } .wc-head__weather { display: inline-flex; align-items: center; gap: 0.4em; } .wc-head__weather .sc-i { width: 1.2em; height: 1.2em; } /* ── Les deux colonnes ───────────────────────────────────────────────── La gauche est fixe et étroite : elle porte des cartes dont la hauteur dépend du contenu. Le planning prend tout le reste. */ .wc-cols { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(0, 0.62fr) minmax(0, 1fr); gap: var(--gap); } .wc-side { display: flex; flex-direction: column; gap: var(--gap); min-height: 0; } .wc-card { background: var(--panel); border: 1px solid var(--panel-line); border-radius: var(--radius); padding: clamp(12px, 1.1vw, 30px); } .wc-card__head { display: flex; align-items: baseline; justify-content: space-between; gap: 1em; margin-bottom: clamp(8px, 0.8vw, 20px); } .wc-card__title { display: flex; align-items: center; gap: 0.45em; margin: 0; font-size: clamp(15px, 1.35vw, 34px); font-weight: 700; letter-spacing: -0.01em; color: var(--accent); } .sc--night .wc-card__title { color: color-mix(in srgb, var(--accent) 50%, #fff); } .wc-card__title .sc-i { width: 1.1em; height: 1.1em; } .wc-card__meta { font-size: clamp(11px, 0.95vw, 23px); color: var(--ink-faint); } .wc-card__empty { padding: clamp(14px, 1.4vw, 36px) 0; text-align: center; font-size: clamp(13px, 1.1vw, 26px); color: var(--ink-faint); } /* ── Ce qu'on fête ───────────────────────────────────────────────────── Une arrivée récente, sinon un anniversaire d'ancienneté, sinon rien : les jours ordinaires, la carte n'existe pas et la place revient au menu. */ .wc-fete { display: flex; align-items: center; justify-content: space-between; gap: var(--gap); background: color-mix(in srgb, var(--accent) 9%, var(--panel)); border-color: color-mix(in srgb, var(--accent) 20%, transparent); } .wc-fete__kicker { display: flex; align-items: center; gap: 0.4em; font-size: clamp(13px, 1.15vw, 28px); font-weight: 700; color: var(--accent); } .sc--night .wc-fete__kicker { color: color-mix(in srgb, var(--accent) 45%, #fff); } .wc-fete__kicker .sc-i { width: 1.1em; height: 1.1em; flex: none; } .wc-fete__name { margin-top: 0.15em; font-size: clamp(20px, 2.1vw, 52px); font-weight: 800; letter-spacing: -0.02em; line-height: 1.05; } .wc-fete__word { margin-top: 0.2em; font-size: clamp(12px, 1.05vw, 25px); color: var(--ink-soft); } .wc-fete__face { flex: none; width: clamp(54px, 5vw, 128px); height: clamp(54px, 5vw, 128px); border-radius: 50%; object-fit: cover; display: grid; place-items: center; font-weight: 700; font-size: clamp(18px, 1.7vw, 42px); color: #fff; background: var(--accent); } /* ── Le menu ─────────────────────────────────────────────────────────── La carte prend la hauteur que lui laisse ce qu'on fête. Son corps est mis à l'échelle par screen_fit_controller quand le menu ne tient pas : le rognage ci-dessous n'est plus qu'un garde-fou. */ .wc-menu { flex: 1; min-height: 0; overflow: hidden; display: flex; flex-direction: column; } /* Le cadre borne la place ; le corps garde sa hauteur naturelle, et c'est en débordant qu'il dit au calage de resserrer. Sans `flex: none`, la colonne le comprimerait, la mesure ne verrait jamais rien, et dix plats recouvriraient le pied de la carte. */ .wc-menu__fit { flex: 1; min-height: 0; overflow: hidden; } .wc-menu__body { flex: none; } .wc-course { padding: clamp(7px, 0.65vw, 16px) 0; border-top: 1px solid var(--panel-line); } .wc-course:first-of-type { border-top: none; padding-top: 0; } /* Les plats par deux : dix d'affilée prenaient la colonne entière pour une liste de titres, et la vignette y était trop petite pour qu'on reconnaisse le plat. Deux de front, c'est une vignette une fois et demie plus grande et la moitié de la hauteur — de quoi loger deux cartes en dessous. */ .wc-course__items { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(4px, 0.4vw, 10px) clamp(8px, 0.8vw, 20px); } .wc-course__label { font-size: clamp(10px, 0.85vw, 20px); font-weight: 700; letter-spacing: 0.06em; margin-bottom: 0.35em; } .wc-course__label--entry { color: #1E8E45; } .wc-course__label--main { color: #C0791B; } .wc-course__label--dessert { color: #C13B63; } .sc--night .wc-course__label--entry { color: #66D98C; } .sc--night .wc-course__label--main { color: #F2B24C; } .sc--night .wc-course__label--dessert { color: #F27DA5; } .sc--terminal .wc-course__label { color: var(--ink-soft); } .wc-dish { display: flex; align-items: center; gap: clamp(9px, 0.85vw, 22px); padding: clamp(4px, 0.4vw, 10px) 0; } .wc-dish__photo { flex: none; width: clamp(46px, 3.4vw, 86px); height: clamp(46px, 3.4vw, 86px); border-radius: clamp(8px, 0.7vw, 18px); object-fit: cover; background: var(--plate); } .wc-dish__photo--none { background: color-mix(in srgb, var(--ink) 8%, transparent); } .wc-dish__title { min-width: 0; font-size: clamp(12px, 1.02vw, 25px); font-weight: 700; letter-spacing: -0.01em; line-height: 1.15; } /* ── Le pied de la carte : ce que l'écran attend de qui passe ─────────── L'heure de clôture, et combien de collègues ont déjà commandé. Avant onze heures, c'est la seule chose à faire de tout l'écran. */ .wc-order { flex: none; display: flex; align-items: center; justify-content: space-between; gap: clamp(8px, 0.8vw, 20px); margin-top: clamp(8px, 0.75vw, 20px); padding-top: clamp(8px, 0.75vw, 20px); border-top: 1px solid var(--panel-line); font-size: clamp(11px, 0.98vw, 24px); } .wc-order__when { display: inline-flex; align-items: center; gap: 0.4em; font-weight: 700; color: var(--accent); } .sc--night .wc-order__when { color: color-mix(in srgb, var(--accent) 50%, #fff); } .sc--terminal .wc-order__when { color: var(--ink); } .wc-order__when .sc-i { width: 1.1em; height: 1.1em; flex: none; } .wc-order__count { color: var(--ink-faint); } /* ── La bande du bas ─────────────────────────────────────────────────── Anniversaires et postes ouverts, sur toute la largeur de l'écran. Deux contenus courts qui se lisent en ligne : dans la colonne de gauche ils prenaient trois cents pixels au menu, ici ils n'en coûtent que cent trente, partagés entre le menu et le planning. Celle qui reste seule prend toute la largeur ; si les deux se taisent, la bande n'existe pas — c'est la grille et `:empty` qui s'en chargent, sans condition côté serveur. */ .wc-strip { flex: none; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: var(--gap); } .wc-strip:empty { display: none; } .wc-strip__card { display: flex; align-items: center; gap: clamp(10px, 1vw, 26px); padding: clamp(8px, 0.8vw, 20px) clamp(12px, 1.1vw, 30px); min-width: 0; } .wc-strip__title { flex: none; display: flex; align-items: center; gap: 0.45em; margin: 0; font-size: clamp(13px, 1.1vw, 27px); font-weight: 700; letter-spacing: -0.01em; color: var(--accent); } .sc--night .wc-strip__title { color: color-mix(in srgb, var(--accent) 50%, #fff); } .sc--terminal .wc-strip__title { color: var(--ink); } .wc-strip__title .sc-i { width: 1.1em; height: 1.1em; flex: none; } .wc-strip__count { font-size: clamp(10px, 0.85vw, 20px); font-weight: 600; color: var(--ink-faint); } /* ── Les anniversaires ───────────────────────────────────────────────── Ceux du jour d'abord, les suivants en dessous. Un prénom et un visage : de quoi souhaiter au passage, sans date ni âge. */ .wc-cake__list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: clamp(6px, 0.6vw, 16px) clamp(12px, 1.2vw, 32px); min-width: 0; } .wc-cake__row { display: flex; align-items: center; gap: clamp(6px, 0.5vw, 13px); } .wc-cake__face { flex: none; width: clamp(24px, 2vw, 50px); height: clamp(24px, 2vw, 50px); border-radius: 50%; object-fit: cover; display: grid; place-items: center; font-size: clamp(9px, 0.72vw, 17px); font-weight: 700; color: #fff; background: var(--accent); } .wc-cake__name { font-size: clamp(12px, 1.05vw, 26px); font-weight: 600; white-space: nowrap; } .wc-cake__when { flex: none; font-size: clamp(10px, 0.85vw, 20px); color: var(--ink-faint); } /* Celui du jour se distingue : c'est le seul qu'on peut souhaiter maintenant. */ .wc-cake__row--today .wc-cake__name { font-weight: 800; } .wc-cake__row--today .wc-cake__when { font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--accent); } .sc--night .wc-cake__row--today .wc-cake__when { color: color-mix(in srgb, var(--accent) 55%, #fff); } .sc--terminal .wc-cake__row--today .wc-cake__when { color: var(--ink); } /* ── Les postes ouverts ──────────────────────────────────────────────── Un hall a deux publics : le visiteur voit que ça bouge, le collaborateur pense à quelqu'un. La carte n'existe pas quand il n'y a rien à annoncer. */ .wc-jobs__list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: clamp(4px, 0.4vw, 10px) clamp(12px, 1.1vw, 30px); min-width: 0; } /* Un filet entre deux postes : sans lui, « Ingénieur DevOps Issy » et le poste suivant se lisent comme une seule ligne. */ .wc-jobs__row + .wc-jobs__row { padding-left: clamp(12px, 1.1vw, 30px); border-left: 1px solid var(--panel-line); } .wc-jobs__title { font-size: clamp(12px, 1.02vw, 25px); font-weight: 600; line-height: 1.2; white-space: nowrap; } /* ── Le planning ─────────────────────────────────────────────────────── Une grille de quatre colonnes : le nom, puis les trois jours. Les pastilles se posent dessus et peuvent enjamber plusieurs jours d'un coup. Rien ne défile : la liste se scinde en deux colonnes de front dès qu'elle dépasse une hauteur d'écran, et screen_fit_controller resserre l'ensemble au besoin. Le rognage ci-dessous n'est qu'un garde-fou. */ .wc-plan { display: flex; flex-direction: column; min-height: 0; overflow: hidden; } /* Le corps garde sa hauteur naturelle : c'est en débordant qu'il dit au calage automatique de resserrer. Sans `flex: none`, la colonne flex le comprimerait et la mesure ne verrait jamais le débordement. */ .wc-plan__body { flex: none; min-height: 0; } .wc-plan__cols { display: grid; grid-template-columns: repeat(var(--cols, 1), minmax(0, 1fr)); gap: clamp(10px, 0.95vw, 28px); } .wc-plan__col { min-width: 0; } .wc-plan__col + .wc-plan__col { padding-left: clamp(10px, 0.95vw, 28px); border-left: 1px solid var(--panel-line); } /* Deux colonnes de front : chacune n'a que la moitié de la largeur, et la typographie doit suivre — sinon « Congé payé » déborde de sa journée. Les pastilles y gagnent le droit de revenir à la ligne : « Congé sans solde » ne tient pas sur une seule journée, et un libellé rogné en son milieu ne dit plus rien. Seules celles qui en ont besoin s'y mettent — celles qui enjambent deux ou trois jours gardent leur ligne unique. */ /* Deux colonnes laissent de la hauteur libre entre douze et vingt-cinq absents : les lignes la prennent en espacement plutôt qu'en taille de texte, qui elle est contrainte par la largeur de la colonne. */ .wc-plan__cols--split .wc-row { padding: clamp(6px, 0.62vw, 16px) 0; } /* Le nom gagne sur les jours : « Antoine R. » et son visage ne tenaient pas dans 0,9 fr, et les pastilles ont le retour à la ligne pour se rattraper. */ .wc-plan__cols--split .wc-plan__days, .wc-plan__cols--split .wc-row { grid-template-columns: minmax(0, 0.95fr) repeat(3, minmax(0, 1fr)); gap: clamp(4px, 0.35vw, 9px); } .wc-plan__cols--split .wc-row__face { width: clamp(20px, 1.7vw, 42px); height: clamp(20px, 1.7vw, 42px); font-size: clamp(8px, 0.62vw, 15px); } .wc-plan__cols--split .wc-row__name { font-size: clamp(11px, 0.85vw, 20px); } .wc-plan__cols--split .wc-plan__day-name { font-size: clamp(9px, 0.75vw, 18px); } .wc-plan__cols--split .wc-plan__day-date { font-size: clamp(9px, 0.72vw, 17px); } /* Marges internes resserrées : « Congé payé » demandait six pixels de plus que sa journée et repassait à la ligne pour rien. Le retour à la ligne reste là pour les libellés qui, eux, ne tiendront jamais. */ .wc-plan__cols--split .wc-pill { padding: clamp(3px, 0.3vw, 8px) clamp(3px, 0.28vw, 7px); gap: 0.28em; font-size: clamp(10px, 0.85vw, 20px); white-space: normal; text-align: center; line-height: 1.1; border-radius: clamp(10px, 0.9vw, 22px); } .wc-plan__days, .wc-row { display: grid; grid-template-columns: minmax(0, 0.9fr) repeat(3, minmax(0, 1fr)); align-items: center; gap: clamp(5px, 0.45vw, 12px); } .wc-plan__days { flex: none; padding-bottom: clamp(7px, 0.6vw, 16px); border-bottom: 1px solid var(--panel-line); } .wc-plan__day { text-align: center; } .wc-plan__day-name { display: block; font-size: clamp(10px, 0.85vw, 20px); font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-soft); } .wc-plan__day-date { display: block; font-size: clamp(10px, 0.82vw, 19px); color: var(--ink-faint); } .wc-plan__all-here { flex: 1; display: flex; align-items: center; justify-content: center; gap: 0.5em; font-size: clamp(16px, 1.6vw, 40px); font-weight: 700; color: var(--ink-soft); } .wc-plan__all-here .sc-i { width: 1.2em; height: 1.2em; color: var(--accent); } .wc-row { padding: clamp(5px, 0.5vw, 13px) 0; } .wc-row__who { display: flex; align-items: center; gap: clamp(6px, 0.55vw, 14px); min-width: 0; } .wc-row__face { flex: none; width: clamp(24px, 2.1vw, 52px); height: clamp(24px, 2.1vw, 52px); border-radius: 50%; object-fit: cover; display: grid; place-items: center; font-size: clamp(9px, 0.75vw, 18px); font-weight: 700; color: #fff; background: var(--accent); } .wc-row__name { font-size: clamp(12px, 1.05vw, 26px); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .wc-row__gap { grid-column: span var(--span, 1); } .wc-pill { grid-column: span var(--span, 1); display: flex; align-items: center; justify-content: center; gap: 0.4em; padding: clamp(4px, 0.4vw, 11px) clamp(7px, 0.6vw, 16px); border-radius: 999px; font-size: clamp(11px, 0.95vw, 23px); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .wc-pill .sc-i { width: 1.1em; height: 1.1em; flex: none; } /* Le code couleur des absences, celui du reste de la plateforme : indigo pour les congés payés, ambre pour le sans-solde, violet pour les congés spéciaux, vert pour le télétravail, rouge pour l'arrêt maladie, gris pour le masqué. Tout dérive des tokens `--absence-*` — un changement dans le design system suit ici tout seul, et rien n'est recopié à la main. Fond pâle dérivé de la même teinte, comme le fait le module absences. */ .wc-pill { background: color-mix(in srgb, var(--tc) 13%, transparent); color: var(--tc); } .wc-pill--paid_leave { --tc: var(--absence-paid); } .wc-pill--unpaid_leave { --tc: var(--absence-unpaid); } .wc-pill--special_leave { --tc: var(--absence-special); } .wc-pill--remote_work { --tc: var(--absence-remote); } .wc-pill--sick_leave { --tc: var(--absence-sick); } .wc-pill--masked { --tc: var(--absence-masked); } /* Sur fond sombre, les mêmes teintes éclaircies : le code couleur est celui du type, pas une valeur figée, et il doit rester lisible à dix mètres. */ .sc--night .wc-pill { --tc: color-mix(in srgb, var(--hue) 62%, #fff); background: color-mix(in srgb, var(--hue) 20%, transparent); } .sc--night .wc-pill--paid_leave { --hue: var(--absence-paid); } .sc--night .wc-pill--unpaid_leave { --hue: var(--absence-unpaid); } .sc--night .wc-pill--special_leave { --hue: var(--absence-special); } .sc--night .wc-pill--remote_work { --hue: var(--absence-remote); } .sc--night .wc-pill--sick_leave { --hue: var(--absence-sick); } .sc--night .wc-pill--masked { --hue: var(--absence-masked); } /* L'ambiance terminal est monochrome : une couleur par type n'y a pas de sens. */ .sc--terminal .wc-pill { background: var(--plate); color: var(--ink); border-radius: 0; } /* ── Le télétravail ──────────────────────────────────────────────────── Pas une absence : la personne travaille, elle n'est pas dans le couloir. Une bande basse, des visages sans nom — l'information sans le poids. */ .wc-remote { display: flex; align-items: center; gap: clamp(9px, 0.85vw, 24px); margin-top: clamp(8px, 0.75vw, 20px); padding-top: clamp(8px, 0.75vw, 20px); border-top: 1px solid var(--panel-line); } .wc-remote__label { display: inline-flex; align-items: center; gap: 0.4em; flex: none; font-size: clamp(11px, 0.95vw, 23px); font-weight: 700; color: var(--absence-remote); } .sc--night .wc-remote__label { color: color-mix(in srgb, var(--absence-remote) 62%, #fff); } .sc--terminal .wc-remote__label { color: var(--ink-soft); } .wc-remote__label .sc-i { width: 1.1em; height: 1.1em; flex: none; } .wc-remote__day { display: flex; align-items: center; gap: clamp(5px, 0.5vw, 12px); flex: 1; min-width: 0; } .wc-remote__when { flex: none; font-size: clamp(9px, 0.8vw, 19px); font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-faint); } .wc-remote__none { font-size: clamp(10px, 0.85vw, 20px); color: var(--ink-faint); } /* Les visages se chevauchent, comme une pile de jetons : dix personnes tiennent dans le tiers d'une carte sans que la bande gagne une deuxième ligne. */ .wc-remote__faces { display: flex; flex-wrap: wrap; min-width: 0; } .wc-remote__face { flex: none; width: clamp(20px, 1.7vw, 42px); height: clamp(20px, 1.7vw, 42px); border-radius: 50%; object-fit: cover; display: grid; place-items: center; font-size: clamp(8px, 0.62vw, 15px); font-weight: 700; color: #fff; background: var(--accent); border: 2px solid var(--panel); } .wc-remote__face + .wc-remote__face { margin-left: -0.35em; }