/*
Home V4 — ④ Vitals, la démo « états » (PRODUIT, ZIGZAG, 10/11/2026 ; commande LEAD 14:37 UTC).
Un chat ChatGPT (fictif : le jardin partagé) s'allonge ; dans sa barre, la pastille U de l'extension porte le point
Vitals, qui passe d'un état à l'autre (son nom apparaît à côté), jusqu'au bandeau fin. Pas de choix d'outil, pas de collage.
10/11 16:3x (Kevin via LEAD) : le grand rectangle « Uncook Vitals · Fresh / Watch / Act » est retiré, plus de bouton
pause/lecture, le survol n'arrête plus la boucle ; elle tourne toujours (sauf hors écran, onglet caché, mouvement réduit).
Seuls les états que Vitals montre vraiment (extension/vitals.js, vitals-ui.js ; contrat /api/rescue/ clé vitals) :
fresh = un point vert discret · watch = le point passe à l'ambre, une bulle au survol (« A few early signs of
wear in this chat. ») · act = le point bat (rouge) et la proposition s'ouvre, non modale.
Les couleurs des points sont celles d'engine.js (LEVELS : #22c55e, #eab308, #ef4444), reprises par l'extension.
Contrat :
Aucun appel hors du site.
*/
@font-face { font-family: UckVeJakarta; font-weight: 700; font-display: swap; src: url('/_home-v4/assets/plus-jakarta-sans-700.ttf') format('truetype'); }
@font-face { font-family: UckVeDM; font-weight: 400; font-display: swap; src: url('/_home-v4/assets/dm-sans-400.ttf') format('truetype'); }
@font-face { font-family: UckVeDM; font-weight: 500; font-display: swap; src: url('/_home-v4/assets/dm-sans-500.ttf') format('truetype'); }
@font-face { font-family: UckVeDM; font-weight: 600; font-display: swap; src: url('/_home-v4/assets/dm-sans-600.ttf') format('truetype'); }
@font-face { font-family: UckVeDM; font-weight: 700; font-display: swap; src: url('/_home-v4/assets/dm-sans-700.ttf') format('truetype'); }
.ve {
--b-blue: #4458AC; --b-ink: #263153; --b-lavender: #EEF0FC; --b-lime: #E4EE99; --b-muted: #5C6480; --b-paper: #FCFCFF;
--ve-fresh: #22c55e; --ve-watch: #eab308; --ve-act: #ef4444;
--ve-c: var(--ve-fresh);
--ve-ligne: #DADFF0;
position: relative;
display: block;
inline-size: 100%;
container-type: inline-size;
container-name: ve;
font-family: UckVeDM, 'DM Sans', Arial, sans-serif;
color: var(--b-ink);
-webkit-font-smoothing: antialiased;
}
.ve *, .ve *::before, .ve *::after { box-sizing: border-box; }
.ve p { margin: 0; }
.ve[data-etat="watch"] { --ve-c: var(--ve-watch); }
.ve[data-etat="act"] { --ve-c: var(--ve-act); }
/* ---------- Pause / lecture : visible au seul focus clavier ----------
NOTE D'INCIDENT (décision LEAD 10/11 sur recommandation PRODUIT, WCAG 2.2.2, SKILL §10.5 : la boucle dure 9 s, plus de 5 s).
Même bouton que celui des boucles (boucle.css .hb-toggle) : dans l'ordre de tabulation et lu, mais invisible et hors
d'atteinte du pointeur (opacité 0, découpe à zéro) tant qu'il n'a pas le focus clavier ; absolu, il ne prend pas de place. */
.ve-toggle {
position: absolute; right: 12px; bottom: 12px; z-index: 3;
inline-size: 40px; block-size: 40px; border-radius: 50%;
display: grid; place-items: center;
border: 0; margin: 0; padding: 0; cursor: pointer;
background: rgba(255, 255, 255, .94); color: var(--b-ink);
box-shadow: 0 .3em .9em -.3em rgba(38, 49, 83, .45);
opacity: 0; clip-path: inset(50%); pointer-events: none;
}
.ve-toggle:focus-visible {
opacity: 1; clip-path: none; pointer-events: auto;
outline: 3px solid var(--b-blue); outline-offset: 2px;
box-shadow: 0 0 0 2px #fff, 0 .3em .9em -.3em rgba(38, 49, 83, .45);
}
.ve-toggle svg { inline-size: 16px; block-size: 16px; }
.ve-toggle .ve-icon-play { display: none; }
.ve-toggle.is-play .ve-icon-play { display: block; }
.ve-toggle.is-play .ve-icon-pause { display: none; }
.ve.is-static .ve-toggle { display: none; }
@media (prefers-reduced-motion: reduce) { .ve-toggle { display: none; } }
.ve-sr {
position: absolute !important;
inline-size: 1px; block-size: 1px;
overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%);
white-space: nowrap; margin: -1px; padding: 0; border: 0;
}
/* ---------- La scène ---------- */
.ve-stage {
--ve-fs: clamp(12.5px, calc(8.5px + 1.05cqi), 15.5px);
position: relative;
inline-size: 100%;
aspect-ratio: 6 / 5;
overflow: hidden;
isolation: isolate;
border-radius: clamp(20px, 3.4cqi, 32px);
padding: clamp(14px, 3.4cqi, 28px);
display: grid;
grid-template-columns: minmax(0, 1fr);
font-size: var(--ve-fs);
background:
radial-gradient(60% 50% at 0% 100%, #EEF4C4 0%, #EEF4C400 72%),
radial-gradient(55% 45% at 100% 0%, #ffffff 0%, #ffffff00 70%),
linear-gradient(160deg, #F4F6FE 0%, #DFE5FB 100%);
box-shadow: 0 40px 80px -46px #0a1030;
}
/* ---------- Le chat ---------- */
.ve-chat {
position: relative;
min-inline-size: 0; min-block-size: 0;
display: flex; flex-direction: column;
background: #fff;
border-radius: clamp(14px, 2.2cqi, 20px);
box-shadow: 0 1px 0 #ffffff, 0 18px 40px -24px #26315366, inset 0 0 0 1px #2631530f;
overflow: hidden;
}
.ve-head {
flex: none;
display: flex; align-items: center; gap: .6em;
padding: .85em 1em;
border-bottom: 1px solid #EEF0F6;
}
.ve-ai {
display: grid; place-items: center; flex: none;
inline-size: 2em; block-size: 2em; border-radius: 50%;
background: var(--b-ink); color: #fff;
font: 700 .72em/1 UckVeDM, 'DM Sans', Arial, sans-serif; letter-spacing: .04em;
}
.ve-nom { display: flex; flex-direction: column; min-inline-size: 0; line-height: 1.2; }
.ve-nom b { font-weight: 700; font-size: .95em; }
.ve-nom span { font-size: .82em; color: var(--b-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ve-fil {
position: relative; flex: 1 1 auto; min-block-size: 0; overflow: hidden;
/* Le haut du fil s'efface : ce qui remonte sort en douceur sous l'en-tête. */
-webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 1.8em);
mask-image: linear-gradient(to bottom, transparent 0, #000 1.8em);
}
.ve-fil-in {
position: absolute; inset: 0 0 auto 0;
padding: .9em 1.6em 1em 1em;
display: flex; flex-direction: column; gap: .6em;
transition: transform .55s cubic-bezier(.2, .7, .2, 1);
will-change: transform;
}
.ve-ascenseur { position: absolute; inset: .6em .35em .6em auto; inline-size: 4px; border-radius: 4px; background: #F1F3F9; }
.ve-ascenseur i { position: absolute; inset: auto 0 0 0; border-radius: 4px; background: #C9CFE3; block-size: 40%; transition: block-size .55s cubic-bezier(.2, .7, .2, 1); }
/* Un message (ou une ligne d'échange ancien, en gris) : présent dans la mise en page, visible quand il arrive. */
.ve-m { opacity: 0; transform: translateY(.5em); transition: opacity .35s ease, transform .45s cubic-bezier(.2, .7, .2, 1); }
.ve-m.is-on { opacity: 1; transform: none; }
.ve-m.is-futur { visibility: hidden; }
.ve-msg { max-inline-size: 86%; padding: .55em .8em; border-radius: 1em; font-size: .92em; line-height: 1.4; }
.ve-msg.u { align-self: flex-end; background: var(--b-lavender); color: var(--b-ink); border-bottom-right-radius: .3em; }
.ve-msg.ia { align-self: flex-start; color: var(--b-ink); padding-inline: 0; }
.ve-ancien { display: flex; flex-direction: column; gap: .32em; }
.ve-ancien.u { align-self: flex-end; align-items: flex-end; inline-size: 52%; padding: .55em .8em; border-radius: 1em; border-bottom-right-radius: .3em; background: #F3F4FB; }
.ve-ancien.ia { align-self: flex-start; inline-size: 78%; }
.ve-ancien i { display: block; block-size: .5em; border-radius: .5em; background: #E6E9F3; }
.ve-ancien.u i { background: #DFE3F5; }
/* Le bas du chat : le bandeau Vitals (au stade act), puis la saisie. */
.ve-bas { position: relative; flex: none; padding: 0 .8em .8em; }
.ve-saisie {
display: flex; align-items: center; justify-content: flex-end; gap: .45em;
block-size: 2.7em; padding: 0 .4em;
border-radius: 1.35em;
background: #F6F7FB; box-shadow: inset 0 0 0 1px #E6E9F3;
}
.ve-envoi { inline-size: 1.9em; block-size: 1.9em; border-radius: 50%; background: #C9CFE3; display: grid; place-items: center; }
.ve-envoi svg { inline-size: 1.05em; block-size: 1.05em; stroke: #fff; }
/* L'indicateur Vitals, DANS la barre du chat (Kevin 10/11 16:3x via LEAD : le grand rectangle « Uncook Vitals · Fresh /
Watch / Act » est retiré). La pastille U de l'extension (page-u.js : carré blanc, filet #CCD3E9, ombre #26315315, le signe
lime de page-u-assets.js) porte le point Vitals de vitals-ui.js (.pip : 12 px, anneau 4 px à 22 %, pulsation 1,8 s à act),
puis le nom de l'état, qui apparaît à côté. Les couleurs du point restent celles d'engine.js. */
.ve-u {
position: relative; flex: none;
display: inline-flex; align-items: center; gap: .5em;
block-size: 2.05em; padding: 0 .75em 0 .22em;
border-radius: .72em;
background: color-mix(in srgb, var(--ve-c) 9%, #fff);
box-shadow: inset 0 0 0 1px #CCD3E9, 0 4px 12px #26315315;
transition: background-color .45s ease;
z-index: 3;
}
.ve-u-signe { flex: none; inline-size: 1.62em; block-size: 1.62em; display: block; }
.ve-pip {
position: relative; flex: none;
inline-size: .8em; block-size: .8em; border-radius: 50%;
margin-inline: .12em .06em;
background: var(--ve-c);
box-shadow: 0 0 0 .27em color-mix(in srgb, var(--ve-c) 22%, transparent), 0 2px 8px #26315340;
transition: background-color .45s ease, box-shadow .45s ease;
}
.ve[data-etat="act"] .ve-pip { animation: ve-pulse 1.8s ease-in-out infinite; }
/* NOTE D'INCIDENT (QUALITÉ 10/11 17:3x, WCAG 2.2.2) : à l'arrêt, TOUTE animation de la démo se fige, pas seulement le point. */
.ve.is-paused *, .ve.is-paused *::before, .ve.is-paused *::after { animation-play-state: paused !important; }
@keyframes ve-pulse {
0%, 100% { box-shadow: 0 0 0 .27em color-mix(in srgb, var(--ve-c) 26%, transparent), 0 2px 8px #26315340; }
50% { box-shadow: 0 0 0 .54em color-mix(in srgb, var(--ve-c) 8%, transparent), 0 2px 12px #2631534d; }
}
/* Le nom de l'état : les trois mots empilés dans une même case (aucun saut de largeur), seul le courant se montre. */
.ve-etat { display: grid; font-size: .86em; font-weight: 700; line-height: 1; letter-spacing: .005em; color: var(--b-ink); }
.ve-etat > span {
grid-area: 1 / 1;
opacity: 0; transform: translateX(-.45em);
transition: opacity .3s ease, transform .45s cubic-bezier(.2, .7, .2, 1);
}
.ve[data-etat="fresh"] .ve-etat > [data-e="fresh"],
.ve[data-etat="watch"] .ve-etat > [data-e="watch"],
.ve[data-etat="act"] .ve-etat > [data-e="act"] { opacity: 1; transform: none; transition-delay: .12s; }
.ve-bulle {
position: absolute; right: -.3em; bottom: calc(100% + .6em);
inline-size: max-content; max-inline-size: 15em;
padding: .5em .75em; border-radius: .6em;
background: var(--b-ink); color: #fff;
font-size: .84em; font-weight: 500; line-height: 1.35;
box-shadow: 0 4px 14px #2631532e;
opacity: 0; transform: translateY(.3em);
transition: opacity .2s ease, transform .2s ease;
pointer-events: none;
}
.ve-bulle.is-on { opacity: 1; transform: none; }
/* Le bandeau fin, au stade act : ici sa seule PLACE (au-dessus de la saisie) et son apparition ; son dessin est le composant
commun « BANDEAU VITALS » juste en dessous, copie identique de celui de boucle.css (Kevin via LEAD 10/11 17:4x). */
.ve-bandeau {
position: absolute; left: .8em; right: .8em; bottom: calc(100% + .1em);
box-shadow: 0 14px 30px -14px #263153aa;
opacity: 0; transform: translateY(.8em);
transition: opacity .35s ease, transform .55s cubic-bezier(.2, 1.2, .3, 1);
z-index: 2;
}
.ve-bandeau.is-on { opacity: 1; transform: none; }
/* ==== BANDEAU VITALS, composant commun (PRODUIT, 10/11 — Kevin via LEAD 17:4x : « bandeau refait ») ====================
COPIE IDENTIQUE À L'OCTET dans site/assets/handoff-boucle-v4/boucle.css et site/assets/home-sections-v4/vitals-etats.css,
entre les deux marqueurs « BANDEAU VITALS ». Toute retouche se fait dans les deux, dans le même commit.
Balisage (boucle.mjs chatScene, vitals-etats.mjs gabarit) :
L'hôte (.hb-vitals, .ve-bandeau) ne garde que la PLACE du bandeau (position, marges, apparition) ; le dessin est ici.
Mise en page selon la largeur du bandeau LUI-MÊME (requête de conteneur, pas l'écran) :
· large (≥ 740 px) : une ligne, signe U, phrase, puis les deux boutons, centrés sur une même ligne médiane ;
· sinon : la phrase (signe U en tête) au-dessus, centrée, et les deux boutons en dessous, centrés.
Marges égales : rembourrage symétrique, groupe centré. « Not now » : bouton secondaire, texte blanc sur l'encre
#263153 (12,8:1 calculé, mesuré au pixel dans le rapport du commit). Mots inchangés. */
.uck-bandeau {
--ub-ink: #263153; --ub-lime: #E4EE99; --ub-lime-hover: #EEF5B5; --ub-lime-pressed: #D3DE78;
container: uck-bandeau / inline-size;
background: var(--ub-ink); color: #fff;
border-radius: 14px;
font: 500 14px/1.35 HBDM, UckVeDM, 'DM Sans', Arial, sans-serif;
letter-spacing: .002em;
}
.uck-bandeau-in {
display: flex; flex-direction: column; align-items: center; gap: 10px;
padding: 12px 14px;
text-align: center;
}
.uck-bandeau-lead { margin: 0; max-inline-size: 34em; text-wrap: balance; }
.uck-bandeau-logo {
display: inline-block; inline-size: 20px; block-size: 20px;
margin-inline-end: 8px; vertical-align: -5px;
}
.uck-bandeau-texte { color: #fff; }
.uck-bandeau-actions { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 8px; }
.uck-bandeau-cta, .uck-bandeau-later {
display: inline-flex; align-items: center; justify-content: center;
block-size: 34px; padding: 0 16px;
border-radius: 999px;
font: 700 14px/1 HBDM, UckVeDM, 'DM Sans', Arial, sans-serif;
white-space: nowrap;
}
.uck-bandeau-cta {
position: relative;
background: var(--ub-lime); color: var(--ub-ink);
transition: transform .18s ease, box-shadow .18s ease, background-color .2s ease;
}
.uck-bandeau-cta.is-hover { background: var(--ub-lime-hover); box-shadow: 0 0 0 3px rgba(228, 238, 153, .35); }
.uck-bandeau-cta.is-pressed {
transform: scale(.95);
background: var(--ub-lime-pressed);
box-shadow: inset 0 2px 5px rgba(38, 49, 83, .3), 0 0 0 4px rgba(228, 238, 153, .45);
}
.uck-bandeau-later {
padding: 0 14px;
color: #fff; font-weight: 600;
box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .38);
}
@container uck-bandeau (max-width: 320px) {
.uck-bandeau-in { padding: 11px 10px; }
.uck-bandeau-lead { font-size: 13px; }
.uck-bandeau-cta { padding: 0 12px; font-size: 13.5px; }
.uck-bandeau-later { padding: 0 11px; font-size: 13.5px; }
}
@container uck-bandeau (min-width: 740px) {
.uck-bandeau-in { flex-direction: row; justify-content: center; gap: 16px; padding: 9px 12px; }
.uck-bandeau-lead { display: flex; align-items: center; max-inline-size: none; white-space: nowrap; }
.uck-bandeau-logo { flex: none; margin-inline-end: 9px; vertical-align: 0; }
.uck-bandeau-actions { flex: none; flex-wrap: nowrap; }
}
/* ==== fin BANDEAU VITALS ==== */
/* ---------- Le curseur, qui survole le point au stade watch ---------- */
.ve-curseur {
position: absolute; left: 0; top: 0; z-index: 5;
inline-size: 1.35em; block-size: 1.35em;
opacity: 0; pointer-events: none;
transition: opacity .25s ease;
filter: drop-shadow(0 2px 3px #26315340);
}
.ve-curseur.is-on { opacity: 1; }
.ve-curseur svg { display: block; inline-size: 100%; block-size: 100%; }
/* ---------- Carte étroite : le chat seul, plus haut ---------- */
@container ve (max-width: 520px) {
.ve-stage { aspect-ratio: 4 / 5; }
.ve-msg { max-inline-size: 92%; }
}
/* ---------- Image fixe (mouvement réduit) ---------- */
.ve.is-static .ve-fil-in, .ve.is-static .ve-m, .ve.is-static .ve-pip, .ve.is-static .ve-bandeau, .ve.is-static .ve-u,
.ve.is-static .ve-ascenseur i, .ve.is-static .ve-etat > span { transition: none; animation: none; }
@media (prefers-reduced-motion: reduce) {
.ve-fil-in, .ve-m, .ve-pip, .ve-bandeau, .ve-ascenseur i, .ve-u, .ve-etat > span, .ve-bulle { transition: none; }
.ve[data-etat="act"] .ve-pip { animation: none; }
}
/* =====================================================================================================
La section ④ elle-même (balisage : tools/produit-home-v4/fragments/vitals.html). L'APLAT FORT de la page :
l'encre V4 profonde (--b-ink), un halo du bleu V4 ; texte blanc et #D8DDF1, sur-titre et marques en lime.
===================================================================================================== */
.vx {
--b-blue: #4458AC; --b-ink: #263153; --b-lavender: #EEF0FC; --b-lime: #E4EE99; --b-muted: #5C6480; --b-paper: #FCFCFF;
position: relative;
isolation: isolate;
overflow: hidden;
/* Plein écran (Kevin 10/11 16:3x via LEAD) : la section tient la hauteur de la fenêtre, son contenu centré. */
min-block-size: 100vh;
min-block-size: 100svh;
display: grid;
align-content: center;
padding: clamp(56px, 8vh, 96px) 0;
color: #fff;
background:
radial-gradient(ellipse 50% 45% at 0% 0%, #3a4c99 0%, #3a4c9900 72%),
radial-gradient(ellipse 45% 40% at 100% 100%, #34468f 0%, #34468f00 72%),
var(--b-ink);
font: 400 16px/1.55 UckVeDM, 'DM Sans', Arial, sans-serif;
-webkit-font-smoothing: antialiased;
}
.vx *, .vx *::before, .vx *::after { box-sizing: border-box; }
/* Dans la Home, site/_home-v4/v3.css (raccords, autre propriétaire) remet #vitals.vx à « display:block; min-height:0 » pour
annuler les 100svh des anciennes feuilles. Kevin veut désormais Vitals plein écran (10/11 16:3x via LEAD) : la règle
ci-dessous, un cran plus spécifique (section#vitals), rend la hauteur d'écran à cette seule section, sans toucher v3.css.
Si v3.css retire #vitals de sa liste, cette règle devient inutile et se retire. */
html[data-home-review-kevin] main#top > section#vitals.vx {
min-block-size: 100vh;
min-block-size: 100svh;
display: grid;
align-content: center;
}
.vx-cadre {
width: min(1200px, calc(100% - 112px));
margin-inline: auto;
display: grid;
grid-template-columns: minmax(0, 5fr) minmax(0, 6.4fr);
gap: 80px;
align-items: center;
}
/* Le sur-titre est le logo de la fonction : le signe U de la marque (site/_home-v4/assets/uncook-logo.svg, le carré lime et
son U bleu, à l'identique) et « Uncook Vitals » composé comme un mot-symbole. Plus de trait devant (Kevin 10/11). */
.vx-kicker {
display: inline-flex; align-items: center; gap: 12px;
margin: 0 0 22px;
font: 700 21px/1 UckVeJakarta, 'Plus Jakarta Sans', Arial, sans-serif;
letter-spacing: -.025em;
color: #fff;
}
.vx-signe { flex: none; inline-size: 36px; block-size: 36px; display: block; filter: drop-shadow(0 6px 14px #0a10304d); }
.vx-kicker b { font-weight: 700; color: var(--b-lime); }
.vx-titre {
margin: 0;
font: 700 48px/1.06 UckVeJakarta, 'Plus Jakarta Sans', Arial, sans-serif;
letter-spacing: -.035em;
color: #fff;
text-wrap: balance;
}
.vx-chapo { margin: 20px 0 0; max-width: 40ch; font-size: 19px; line-height: 1.55; color: #D8DDF1; }
.vx-points { list-style: none; margin: 40px 0 0; padding: 0; display: grid; gap: 22px; }
.vx-point { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 4px 16px; align-items: start; }
.vx-marque {
grid-row: span 2;
display: grid; place-items: center;
inline-size: 40px; block-size: 40px; border-radius: 12px;
background: var(--b-lime); color: var(--b-ink);
}
.vx-marque svg { inline-size: 21px; block-size: 21px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.vx-point h3 { margin: 0; padding-top: 1px; font: 700 18px/1.3 UckVeJakarta, 'Plus Jakarta Sans', Arial, sans-serif; letter-spacing: -.012em; color: #fff; }
.vx-point p { margin: 0; max-width: 46ch; font-size: 16px; line-height: 1.55; color: #D8DDF1; }
.vx-demo { min-inline-size: 0; }
@media (max-width: 1100px) {
.vx-cadre { width: calc(100% - 64px); gap: 48px; }
.vx-titre { font-size: 40px; }
}
@media (max-width: 900px) {
.vx { padding: 64px 0 72px; }
.vx-kicker { font-size: 19px; gap: 10px; margin-bottom: 18px; }
.vx-signe { inline-size: 32px; block-size: 32px; }
.vx-cadre { width: calc(100% - 48px); grid-template-columns: minmax(0, 1fr); gap: 40px; }
.vx-titre { font-size: 32px; line-height: 1.1; }
.vx-chapo { font-size: 17px; margin-top: 14px; }
.vx-points { margin-top: 28px; gap: 18px; }
.vx-point { grid-template-columns: 36px minmax(0, 1fr); gap: 2px 14px; }
.vx-marque { inline-size: 36px; block-size: 36px; border-radius: 10px; }
.vx-marque svg { inline-size: 19px; block-size: 19px; }
.vx-point h3 { font-size: 17px; }
.vx-point p { font-size: 15px; }
}