qui l'enveloppe : un ne défile pas, overflow-x n'a aucun effet sur un display: table. Même conteneur que .table-scroll chez les voisines. */ .data-table { max-width: 100%; overflow-x: auto; overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch; border: 1px solid var(--trait); border-radius: 14px; } table { width: 100%; border-collapse: collapse; background: var(--surface); font-size: .86rem; } /* Le journal des appels (tableau de bord). Chaque cellule qui a deux écritures les rend TOUTES LES DEUX, et le CSS choisit selon la place : pas de second tableau à maintenir, donc pas de risque que l'un mente pendant que l'autre dit vrai. La version courte ne sert que sous 740 px. */ .table-compacte .date-courte, .table-compacte .entete-courte { display: none; } .col-nombre { font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; } th, td { padding: 11px 13px; border-bottom: 1px solid var(--trait); text-align: left; vertical-align: top; } th { background: var(--surface-2); color: var(--muet); font-size: .73rem; letter-spacing: .06em; text-transform: uppercase; } tbody tr:last-child td { border-bottom: 0; } .bars { display: flex; height: 135px; align-items: end; gap: 5px; padding-top: 10px; } .bars > div { display: flex; height: 100%; min-width: 7px; flex: 1; flex-direction: column; justify-content: end; gap: 5px; } .bars span { width: 100%; min-height: 4px; border-radius: 4px 4px 1px 1px; background: var(--accent); } .bars small { color: var(--muet); font-size: .6rem; text-align: center; } .pagination { display: flex; align-items: center; justify-content: center; gap: 14px; margin-top: 24px; color: var(--muet); } .login-page { display: grid; min-height: 100vh; place-items: center; padding: 22px; background: radial-gradient(circle at 50% 0, #202638, transparent 45rem), var(--fond); } .login-box { width: min(430px, 100%); padding: clamp(23px, 6vw, 36px); border: 1px solid var(--trait); border-radius: 24px; background: var(--surface); } .login-brand { display: flex; align-items: center; gap: 13px; margin-bottom: 23px; } .login-brand h1 { font-size: 2.25rem; } .login-box form { display: grid; gap: 15px; } .error-box { text-align: center; } .error-box .login-brand { justify-content: center; } .error-box .notice { text-align: left; } @media (max-width: 980px) { .filters { grid-template-columns: 1fr 1fr; } .filters .search-wrap { grid-column: 1 / -1; } .detail-grid { grid-template-columns: 1fr; } .service-grid { grid-template-columns: 1fr; } .trusted-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .trusted-import-panel { grid-template-columns: 1fr; } } /* ================================================================ MODE APPLICATION (≤ 900px) : topbar fixe + pastille d'onglets flottante opaque. Grammaire commune à /srv/annuaire, /srv/contact, /srv/agenda et /srv/play — même seuil, mêmes mesures, mêmes gestes. La barre du bas est une pastille d'encre OPAQUE, détachée des bords, sans bordure ni flou, dont les onglets sont strictement identiques : la seule destination mise en avant est la page ouverte. Ne pas y réintroduire de trait, d'ombre ni de backdrop-filter. ================================================================ */ @media (max-width: 900px) { .layout { display: block; } .sidebar { display: none; } .topbar { display: flex; align-items: center; gap: 12px; position: fixed; top: 0; left: 0; right: 0; z-index: 60; background: color-mix(in srgb, var(--fond) 86%, transparent); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); border-bottom: 1px solid var(--trait); padding: 10px 16px; padding-top: calc(10px + var(--safe-top)); padding-left: calc(16px + var(--safe-left)); padding-right: calc(16px + var(--safe-right)); } /* La marque reprend la taille du groupe (34 px) : c'est elle qui donne sa hauteur à la barre, et une barre plus haute que chez les voisines se verrait au premier coup d'œil. */ .topbar .brand-ico { margin: 0; width: 34px; height: 34px; border-radius: 11px; } .topbar .brand-ico svg { width: 21px; height: 21px; } .topbar-title { flex: 1; font-weight: 800; font-size: 17px; letter-spacing: -.2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* Bouton texte « Réglages » (sans icône) : même convention que l'Annuaire. */ .topbar-admin { display: inline-flex; align-items: center; min-height: 34px; padding: 6px 14px; border-radius: 999px; background: rgba(255, 255, 255, .07); border: 1px solid var(--trait); color: var(--texte); font-size: 13.5px; font-weight: 700; letter-spacing: -.01em; white-space: nowrap; flex: none; } .topbar-admin:hover { text-decoration: none; border-color: var(--accent); } .topbar-admin.on { background: var(--accent-doux); color: var(--accent-2); border-color: color-mix(in srgb, var(--accent) 45%, var(--trait)); } .topbar-bell { position: relative; display: inline-flex; padding: 4px 2px; color: var(--texte); flex: none; } .topbar-bell .lucide { width: 22px; height: 22px; } .topbar-bell:hover { text-decoration: none; } .tabbar { display: flex; align-items: stretch; gap: 6px; position: fixed; z-index: 60; left: calc(12px + var(--safe-left)); right: calc(12px + var(--safe-right)); bottom: calc(4px + var(--safe-bottom)); transform: translateY(15px); padding: 7px; background: var(--tabbar-base); border-radius: 26px; } /* Sous la barre, la safe area devient un aplat opaque : le contenu s'arrête visuellement avant les bords arrondis. */ body::after { content: ""; position: fixed; z-index: 59; left: 0; right: 0; bottom: 0; height: calc(4px + var(--safe-bottom)); pointer-events: none; background: var(--tabbar-base); } .tab { position: relative; flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; min-height: 66px; padding: 10px 2px; color: var(--muet); text-decoration: none; cursor: pointer; font-weight: 700; line-height: 1; letter-spacing: -.01em; border-radius: 20px; background: transparent; -webkit-user-select: none; user-select: none; transition: background .16s ease, color .16s ease, transform .1s ease; } .tab:hover { text-decoration: none; } .tab:active { transform: scale(.95); } .tab .t-ico { display: flex; align-items: center; justify-content: center; } .tab .t-ico .lucide { width: 25px; height: 25px; } .tab .t-lbl { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; } .tab.on { background: var(--accent-doux); color: var(--accent-2); font-weight: 800; } .content { width: 100%; margin-left: 0; min-height: 0; padding: calc(64px + var(--safe-top)) 14px calc(96px + var(--safe-bottom)); padding-left: calc(14px + var(--safe-left)); padding-right: calc(14px + var(--safe-right)); } .login-box { margin: max(8vh, calc(24px + var(--safe-top))) auto; } } @media (max-width: 740px) { :root { --rayon: 16px; } h1 { font-size: 2.15rem; } .page-head { align-items: flex-start; flex-direction: column; margin-bottom: 19px; } /* Un titre de section et son bouton passent l'un sous l'autre plutôt que de forcer la largeur de la page. */ .section-head { flex-wrap: wrap; } /* Le journal des appels TIENT dans la largeur d'un téléphone, sans défilement horizontal : le geste et le nom du modèle s'effacent, « Application » devient « App », la date se dit « 22h46 15/07/26 » et se coupe volontiers en deux lignes. Restent les cinq colonnes qui font un journal lisible : quand, qui, quel agent, combien, et si ça a marché. Le détail complet est à un lien de là, dans /agents/appels. */ .table-compacte { font-size: .76rem; } .table-compacte th, .table-compacte td { padding: 8px 6px; } .table-compacte th { font-size: .66rem; letter-spacing: .03em; } .table-compacte .col-geste, .table-compacte .col-modele, .table-compacte .date-longue, .table-compacte .entete-longue { display: none; } .table-compacte .date-courte, .table-compacte .entete-courte { display: inline; } .table-compacte .badge { padding: 2px 7px; font-size: .68rem; } .page-head > form, .page-head > .btn, .head-actions { width: 100%; } .page-head > form .btn, .page-head > .btn, .head-actions .btn { flex: 1; } .notice { margin-bottom: 18px; } /* Deux tuiles par ligne : à quatre, la valeur passerait sous la barre des deux chiffres lisibles et la frise n'aurait plus qu'un pixel par jour. */ .stats-row { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } .stat { min-height: 108px; padding: 13px 14px 14px; gap: 12px; } .stat-val { font-size: 1.6rem; } .stat-tete { font-size: .74rem; } .frise { height: 26px; gap: 1px; } .filters { grid-template-columns: 1fr; } .filters .search-wrap { grid-column: auto; } .filters .btn { width: 100%; } input, select, textarea { font-size: 16px; } .form-grid { grid-template-columns: 1fr; } .form-grid .full { grid-column: auto; } .compact-form { align-items: stretch; flex-direction: column; } .carte { padding: 16px; } .actu-card { flex-direction: column; } .actu-visuel { width: 100%; aspect-ratio: 16 / 9; } .article-hero { aspect-ratio: 16 / 9; } .carte-actions .btn { padding-inline: 12px; } .piste-card { align-items: flex-start; } .date-puce { width: 50px; height: 57px; } .actions-grid.two, .admin-grid { grid-template-columns: 1fr; } .source-row { align-items: flex-start; } .source-icon { display: none; } .row-actions { flex-direction: column; } .source-assign { grid-template-columns: 1fr; } .theme-top { align-items: flex-start; } .theme-edit { grid-template-columns: auto minmax(0, 1fr) auto; } .theme-edit .muted { grid-column: 2 / -1; } .category-add { width: 100%; } .category-add input { min-width: 0; } .trusted-import-form { grid-template-columns: 1fr; } .trusted-import-form .btn { grid-column: auto; } .trusted-list-head { align-items: stretch; } .trusted-search { width: 100%; } .trusted-grid { grid-template-columns: 1fr; } .subject-row { align-items: stretch; } .subject-row form:first-child { grid-template-columns: auto 1fr auto; } .subject-row form:first-child .muted, .subject-row form:first-child .icon-btn { grid-column: 2 / -1; } .service-card { padding: 14px; } .service-ico { display: none; } .facts > div { grid-template-columns: 1fr; gap: 4px; } .action-bar { align-items: stretch; } .action-bar form { flex: 1 1 auto; } .action-bar .btn { width: 100%; } .danger-zone { align-items: stretch; flex-direction: column; } .danger-zone label, .danger-zone input[type="number"], .danger-zone .btn { width: 100%; } .bars { height: 105px; } .bars small { display: none; } .pagination { flex-wrap: wrap; } } /* ================================================================ iPhone étroit (≤ 380px) : la pastille et la topbar se resserrent — même réglage que dans le reste du groupe. ================================================================ */ @media (max-width: 380px) { .tabbar { gap: 4px; padding: 6px; } .tab { min-height: 62px; gap: 5px; border-radius: 18px; } .tab .t-ico .lucide { width: 23px; height: 23px; } .tab .t-lbl { font-size: 12px; } .topbar-admin { padding: 6px 11px; font-size: 13px; } .topbar { gap: 9px; } } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; } } /* ================================================================ Composants propres à Admin Trois seulement, parce que le reste de la grammaire est déjà celle du groupe : la JAUGE d'un quota, la RANGÉE DE COMMANDES d'une interaction, et la LIGNE DE LIEN entre deux applications. Règle absolue conservée : aucun box-shadow, nulle part. ================================================================ */ /* La jauge : un rapport à un total connu. Sa couleur ne vient pas de la zone de la page mais de l'ÉTAT MESURÉ — un quota atteint doit être rouge sur la page des agents comme sur le tableau de bord. Une seule variable porte cette teinte, et la PISTE VIDE en est une nuance claire : l'état se lit alors sur toute la longueur de la barre, y compris sur la part non remplie, au lieu de s'arrêter au bout du remplissage. Deux vocabulaires d'état, parce qu'il y a deux sens de lecture : · un QUOTA se remplit — plein est mauvais (libre → atteint) ; · un RAPPORT se complète — plein est bon (mauvais → bon). Ne pas les mélanger : « atteint » sur une rangée d'applications en ligne se lirait à l'envers. */ .jauge { position: relative; height: 8px; overflow: hidden; border-radius: 999px; --jauge-teinte: var(--accent); background: color-mix(in srgb, var(--jauge-teinte) 17%, var(--fond)); border: 1px solid color-mix(in srgb, var(--jauge-teinte) 26%, transparent); } .jauge > i { display: block; height: 100%; border-radius: inherit; background: var(--jauge-teinte); transition: width .25s ease; } .jauge.libre { --jauge-teinte: var(--ok); } .jauge.engage { --jauge-teinte: var(--accent); } .jauge.proche { --jauge-teinte: var(--warn); } .jauge.atteint { --jauge-teinte: var(--danger); } .jauge.bon { --jauge-teinte: var(--ok); } .jauge.moyen { --jauge-teinte: var(--warn); } .jauge.mauvais { --jauge-teinte: var(--danger); } .jauge-ligne { display: grid; grid-template-columns: 1fr auto; gap: 6px 14px; align-items: center; margin: 14px 0; } .jauge-ligne .jauge { grid-column: 1 / -1; } .jauge-legende { display: flex; flex-wrap: wrap; gap: 6px 14px; color: var(--muet); font-size: .82rem; } /* Les quatre commandes d'une interaction : lecture, pause, arrêt, répéter. Elles sont côte à côte et de même taille — ce sont les touches d'un transport, pas une liste d'actions. */ .commandes { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; } .commandes form { display: contents; } .commande { display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-width: 46px; height: 42px; padding: 0 14px; border: 1px solid var(--trait-fort); border-radius: var(--rayon-petit); background: var(--surface-2); color: var(--texte-2); font-size: .86rem; font-weight: 700; cursor: pointer; } .commande:hover:not(:disabled) { border-color: var(--accent); color: var(--texte); } .commande:disabled { opacity: .42; cursor: not-allowed; } .commande.on { border-color: var(--accent); background: var(--accent-doux); color: var(--accent-2); } .commande .lucide { width: 18px; height: 18px; } /* Une ligne de lien : source → cible, avec la nature au milieu. La flèche porte le sens, et le sens est toute l'information d'un lien. */ .lien-ligne { display: grid; grid-template-columns: 1fr auto 1fr auto; gap: 10px 14px; align-items: center; padding: 13px 15px; border: 1px solid var(--trait); border-radius: var(--rayon-petit); background: var(--surface); } .lien-ligne + .lien-ligne { margin-top: 10px; } .lien-bout { display: flex; align-items: center; gap: 9px; min-width: 0; font-weight: 700; } .lien-bout small { display: block; color: var(--muet); font-weight: 500; } .lien-fleche { display: flex; align-items: center; gap: 7px; color: var(--muet); font-size: .8rem; } .lien-fleche .lucide { width: 17px; height: 17px; } @media (max-width: 720px) { .lien-ligne { grid-template-columns: 1fr; } .lien-fleche { justify-content: flex-start; } } /* Une tuile de chiffre, quand une page n'a qu'un seul nombre à dire. */ .chiffre { display: grid; gap: 3px; padding: 15px 17px; border: 1px solid var(--trait); border-radius: var(--rayon-petit); background: var(--surface); } .chiffre strong { font-size: 1.5rem; line-height: 1.1; } .chiffre span { color: var(--muet); font-size: .82rem; } .chiffres { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; margin: 18px 0; } /* Le rapport d'un calcul IA : du texte écrit par un moteur extérieur. Il s'affiche tel quel, sans mise en forme — et donc sans qu'aucun HTML venu du dehors ne puisse être rendu. Il défile dans son cadre plutôt que de pousser la page. */ .rapport { margin: 0; max-height: 70vh; overflow: auto; white-space: pre-wrap; overflow-wrap: anywhere; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .86rem; line-height: 1.6; } /* ================================================================ LES VERSIONS (/versions) Une version se lit en trois temps, et la mise en page suit cet ordre : le NUMÉRO (gros, à gauche, c'est ce qu'on cherche), ce qu'elle APPORTE (les notes, en pleine largeur — une version sans notes ne sert à rien trois mois plus tard), puis les GESTES. Celle qui est en place porte un filet d'accent sur la tranche : on doit voir où l'on est sans lire. ================================================================ */ .versions-liste { display: grid; gap: 11px; margin-top: 22px; } .version-ligne { padding: 14px 16px; border: 1px solid var(--trait); border-left: 3px solid var(--trait); border-radius: var(--rayon-petit); background: var(--surface); } .version-ligne.en-place { border-color: color-mix(in srgb, var(--accent) 40%, var(--trait)); border-left-color: var(--accent); } .version-tete { display: flex; align-items: center; flex-wrap: wrap; gap: 9px; } .version-num { padding: 2px 10px; border: 1px solid var(--trait-fort); border-radius: 999px; background: var(--fond-2); color: var(--accent-2); font-size: .9rem; font-weight: 820; font-variant-numeric: tabular-nums; } /* Les notes gardent les retours à la ligne du champ de saisie : on écrit un changement par ligne, ça doit se relire tel quel. */ .version-notes { margin: 10px 0 12px; color: var(--texte-2); font-size: .9rem; white-space: pre-wrap; } .version-ligne .row-actions { flex-wrap: wrap; align-items: center; } .version-plus { position: relative; } .version-plus > summary { list-style: none; cursor: pointer; } .version-plus > summary::-webkit-details-marker { display: none; } .version-plus > form { margin-top: 14px; } .version-app { margin-bottom: 12px; } .version-app > summary { display: flex; align-items: center; flex-wrap: wrap; gap: 9px; cursor: pointer; } /* Les nouveautés d'une version, en trois couches empilées. Le texte rédigé par l'IA porte un filet d'accent à gauche : il ne doit pas se confondre avec ce que le propriétaire a écrit lui-même, qui, lui, fait foi. Les faits mesurés restent repliés — ils servent de preuve, pas de lecture. */ .version-auto { margin: 12px 0; padding: 2px 0 2px 13px; border-left: 2px solid color-mix(in srgb, var(--accent) 55%, var(--trait)); } .version-auto-tete { display: flex; align-items: center; gap: 7px; margin: 0 0 6px; color: var(--accent-2); font-size: .78rem; font-weight: 760; } .version-auto-tete .muted { font-weight: 450; } .version-faits { margin-bottom: 12px; } .version-faits > summary { display: flex; align-items: center; gap: 7px; color: var(--muet); font-size: .82rem; font-weight: 700; cursor: pointer; } .version-faits > summary:hover { color: var(--texte-2); } .version-faits pre { margin: 10px 0 0; padding: 12px 14px; max-height: 340px; overflow: auto; overflow-wrap: anywhere; white-space: pre-wrap; border: 1px solid var(--trait); border-radius: var(--rayon-petit); background: var(--fond-2); color: var(--texte-2); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .78rem; line-height: 1.6; } /* ================================================================ JARVIS — LE PLATEAU, LE MICRO, LE FIL ================================================================ */ /* ------------------------------------------------- Le gros bouton La demande tient en six mots : « interface ultra simple : gros bouton icon svg micro ». Il est donc le seul objet vraiment grand de l'application, et il reste atteignable au pouce sur mobile. Aucun box-shadow : l'anneau est une bordure qui respire. */ .scene { display: flex; min-height: min(62vh, 520px); flex-direction: column; align-items: center; justify-content: center; gap: 18px; padding: 8px 0 4px; } .micro { position: relative; display: grid; width: min(58vw, 220px); height: min(58vw, 220px); place-items: center; border: 2px solid var(--trait-fort); border-radius: 50%; background: radial-gradient(circle at 50% 30%, var(--accent-doux), var(--surface) 70%); color: var(--accent); transition: transform .16s ease, border-color .16s ease, background .3s ease, color .3s ease; } .micro:hover { border-color: var(--accent); } .micro:active { transform: scale(.97); } .micro .lucide { width: 42%; height: 42%; stroke-width: 1.6; } .micro:focus-visible { outline: 3px solid var(--accent-2); outline-offset: 4px; } /* L'anneau qui bat pendant l'écoute. Une seule animation, sur une pseudo-élément : le bouton lui-même ne bouge pas, sinon la cible se dérobe sous le doigt. */ .micro::after { content: ""; position: absolute; inset: -10px; border: 2px solid var(--accent); border-radius: 50%; opacity: 0; } .micro.ecoute { border-color: var(--accent); color: var(--accent-2); } .micro.ecoute::after { animation: onde 1.6s ease-out infinite; } .micro.reflechit { color: var(--muet); border-color: var(--trait-fort); } .micro.reflechit .lucide { animation: tourne 1.1s linear infinite; } @keyframes onde { 0% { opacity: .55; transform: scale(1); } 100% { opacity: 0; transform: scale(1.22); } } @keyframes tourne { to { transform: rotate(360deg); } } @media (prefers-reduced-motion: reduce) { .micro.ecoute::after, .micro.reflechit .lucide { animation: none; } .micro.ecoute::after { opacity: .5; } } .micro-aide { max-width: 30rem; color: var(--muet); font-size: .92rem; text-align: center; } .entendu { max-width: 34rem; color: var(--texte-2); font-size: 1.05rem; text-align: center; font-style: italic; } .entendu:empty { display: none; } /* ------------------------------------------------- Le plateau Ce qui s'affiche à la place de la réponse. Sa FORME vient du serveur (lib/reponse.js) : coche, nombre, ancre, liste, texte. Sa COULEUR vient de la voix qui l'a dite. */ .plateau { width: min(100%, 40rem); border: 1px solid var(--trait); border-radius: var(--rayon); background: var(--surface); padding: 22px; text-align: center; transition: border-color .3s ease, background .3s ease; } .plateau[hidden] { display: none; } /* QUI PARLE — la couleur du plateau, et rien d'autre à lire. Bleu d'ardoise : le navigateur, gratuit et local. Menthe : Gemini, payant et distant. */ .plateau.voix-navigateur { border-color: color-mix(in srgb, var(--voix-navigateur) 45%, var(--trait)); background: linear-gradient(180deg, var(--voix-navigateur-doux), var(--surface) 62%); } .plateau.voix-gemini { border-color: color-mix(in srgb, var(--voix-gemini) 45%, var(--trait)); background: linear-gradient(180deg, var(--voix-gemini-doux), var(--surface) 62%); } .plateau-ico { display: grid; width: 92px; height: 92px; margin: 0 auto 12px; place-items: center; border-radius: 50%; background: var(--surface-2); color: var(--accent); } .plateau-ico .lucide { width: 52px; height: 52px; stroke-width: 1.7; } .plateau.voix-navigateur .plateau-ico { color: var(--voix-navigateur); } .plateau.voix-gemini .plateau-ico { color: var(--voix-gemini); } .forme-erreur .plateau-ico, .forme-rien .plateau-ico { color: var(--warn); } /* Le grand nombre : c'est la réponse, il doit se lire de loin. Pas de tabular-nums — un « 3 » ne doit pas flotter dans la largeur d'un zéro (même règle que les tuiles d'Admin). */ .plateau-nombre { margin: 0; font-size: clamp(3.4rem, 16vw, 5.6rem); font-weight: 700; line-height: 1; letter-spacing: -.03em; } .plateau-unite { color: var(--muet); font-size: 1rem; } .plateau-titre { margin: 10px 0 4px; font-size: 1.15rem; font-weight: 600; } .plateau-phrase { margin: 8px auto 0; max-width: 34rem; color: var(--texte-2); text-align: left; } .forme-check .plateau-phrase, .forme-nombre .plateau-phrase { text-align: center; } /* L'ancre : la réponse EST un lien vers une fiche. Le bloc entier est cliquable, parce qu'on le vise avec le pouce, pas au pixel. */ .plateau-ancre { display: block; margin-top: 12px; border: 1px solid var(--trait); border-radius: var(--rayon-petit); background: var(--surface-2); padding: 12px 14px; color: var(--texte); text-align: left; } .plateau-ancre:hover { border-color: var(--accent); } .plateau-ancre .ou { color: var(--muet); font-size: .85rem; } .plateau-liste { margin: 12px 0 0; padding: 0; list-style: none; text-align: left; } .plateau-liste li { display: flex; justify-content: space-between; gap: 12px; border-top: 1px solid var(--trait); padding: 9px 2px; } .plateau-liste li:first-child { border-top: 0; } .plateau-liste .quand { color: var(--muet); font-size: .85rem; white-space: nowrap; } /* La confirmation d'écriture. Deux boutons, jamais un seul : « oui » à côté de « non », de la même taille, parce qu'on répond à la voix et qu'on ne relit pas. */ .plateau-confirme { display: flex; gap: 10px; justify-content: center; margin-top: 16px; } .plateau-confirme .btn { flex: 1 1 0; max-width: 12rem; justify-content: center; } /* Qui a parlé, en toutes lettres — la couleur ne porte jamais l'information seule (règle du groupe). */ .voix-etiquette { display: inline-flex; align-items: center; gap: 6px; margin-top: 14px; border-radius: 999px; padding: 4px 12px; font-size: .8rem; } .voix-navigateur .voix-etiquette { background: var(--voix-navigateur-doux); color: color-mix(in srgb, var(--voix-navigateur) 80%, white); } .voix-gemini .voix-etiquette { background: var(--voix-gemini-doux); color: color-mix(in srgb, var(--voix-gemini) 80%, white); } .voix-etiquette .lucide { width: 1em; height: 1em; } /* ------------------------------------------------- Le budget Une jauge à une seule teinte, dont la piste vide est une nuance claire : l'état se lit sur toute la longueur, pas seulement sur la part remplie (même règle que les jauges d'Admin). */ .budget { display: flex; align-items: center; gap: 10px; border: 1px solid var(--trait); border-radius: var(--rayon-petit); background: var(--surface); padding: 10px 14px; font-size: .88rem; } .budget-piste { position: relative; flex: 1 1 auto; height: 8px; overflow: hidden; border-radius: 999px; background: color-mix(in srgb, var(--jauge-teinte, var(--accent)) 22%, var(--surface-3)); } .budget-part { height: 100%; border-radius: 999px; background: var(--jauge-teinte, var(--accent)); } .budget.proche { --jauge-teinte: var(--warn); } .budget.atteint { --jauge-teinte: var(--danger); } /* ------------------------------------------------- Le fil du journal */ .fil { display: flex; flex-direction: column; gap: 0; } .fil-ligne { display: grid; grid-template-columns: 84px 96px 1fr; gap: 12px; align-items: baseline; border-top: 1px solid var(--trait); padding: 9px 4px; } .fil-ligne:first-child { border-top: 0; } .fil-ligne.neuve { animation: apparait .5s ease; } @keyframes apparait { from { background: var(--accent-doux); } to { background: transparent; } } .fil-heure { color: var(--muet); font-size: .82rem; font-variant-numeric: tabular-nums; } .fil-app { overflow: hidden; border-radius: 999px; background: var(--surface-2); padding: 1px 9px; color: var(--texte-2); font-size: .76rem; text-align: center; text-overflow: ellipsis; white-space: nowrap; } .fil-message { overflow-wrap: anywhere; } .fil-detail { display: block; color: var(--muet); font-size: .84rem; } .fil-ligne.n-attention .fil-message { color: var(--warn); } .fil-ligne.n-alerte .fil-message { color: var(--danger); } .fil-vide { padding: 28px 4px; color: var(--muet); text-align: center; } .fil-barre { position: sticky; top: calc(var(--safe-top) + 58px); z-index: 5; display: flex; flex-wrap: wrap; gap: 8px; border: 1px solid var(--trait); border-radius: var(--rayon-petit); background: color-mix(in srgb, var(--fond) 94%, transparent); padding: 10px; backdrop-filter: blur(8px); } .fil-barre input[type="search"] { flex: 1 1 12rem; min-width: 0; } .fil-etat { display: flex; align-items: center; gap: 8px; color: var(--muet); font-size: .84rem; } .fil-etat .pastille { width: 8px; height: 8px; border-radius: 50%; background: var(--ok); animation: bat 2.4s ease-in-out infinite; } .fil-etat.figee .pastille { background: var(--muet); animation: none; } @keyframes bat { 50% { opacity: .25; } } @media (max-width: 640px) { .fil-ligne { grid-template-columns: 62px 1fr; } .fil-app { grid-column: 1; } .fil-message { grid-column: 2; } .fil-heure { grid-column: 1; } } /* ------------------------------------------------- Quelques cadres Jarvis n'a que quatre pages : plutôt que de reprendre les dix variantes de panneaux du groupe, il en déclare deux, et s'en tient là. Les mesures (rayon, trait, fond) restent celles du groupe — seules les VALEURS de couleur changent d'une application à l'autre, jamais les mesures. */ .panneau { margin: 22px 0; border: 1px solid var(--trait); border-radius: var(--rayon); background: var(--surface); padding: 18px 20px; } .panneau > h2 { display: flex; align-items: center; gap: 9px; margin: 0 0 12px; font-size: 1.02rem; letter-spacing: -.01em; } .panneau > h2 .lucide { color: var(--accent); } .stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; margin: 22px 0; } .stat-label { display: flex; align-items: center; gap: 8px; color: var(--muet); font-size: .8rem; font-weight: 700; } /* La valeur ne prend JAMAIS la couleur d'un état, et jamais de tabular-nums : chaque chiffre prendrait la largeur d'un zéro et un « 121 » flotterait (même règle que les tuiles d'Admin). */ .stat-valeur { font-size: 2.1rem; font-weight: 700; line-height: 1.05; letter-spacing: -.03em; } .dire { width: min(100%, 40rem); } .dire .btn { white-space: nowrap; } /* Réservé aux lecteurs d'écran : une étiquette qui existe pour la voix de l'assistant vocal du système, pas pour l'œil. */ .sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } /* ================================================================ L'APERÇU D'UNE ÉCRITURE Ce qui va partir chez le voisin, champ par champ, AVANT que ça parte. Une phrase de confirmation ne dit rien du téléphone repris de la fiche ni de la durée décidée par défaut : on confirmait à l'aveugle une écriture qu'on ne découvrait qu'après coup. ================================================================ */ .apercu { margin-top: 16px; border: 1px solid var(--trait-fort); border-radius: var(--rayon-petit); background: var(--surface-2); text-align: left; overflow: hidden; } .apercu-tete { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; border-bottom: 1px solid var(--trait); padding: 10px 14px; background: var(--surface-3); } .apercu-app { font-weight: 700; font-size: .92rem; } .apercu-alerte { display: flex; align-items: center; gap: 8px; margin: 0; border-bottom: 1px solid var(--trait); padding: 9px 14px; background: var(--warn-doux); color: var(--warn); font-size: .88rem; } .apercu-alerte .lucide { flex: 0 0 auto; } .apercu-champs { margin: 0; padding: 4px 0; } .apercu-ligne { display: grid; grid-template-columns: minmax(6.5rem, 32%) 1fr; gap: 12px; padding: 7px 14px; } .apercu-ligne dt { color: var(--muet); font-size: .85rem; } .apercu-ligne dd { margin: 0; overflow-wrap: anywhere; } /* Un champ vide se montre quand même, en retrait : c'est une information. Le masquer laisserait croire qu'il n'existe pas, alors qu'il partira vide. */ .apercu-ligne.vide dd { font-size: .88rem; } .apercu-ligne.vide { opacity: .62; } /* LES TROIS GESTES, de même poids visuel et de même taille. On répond à la voix, on ne relit pas : « valider » ne doit pas être plus facile à toucher que « annuler ». C'est la même règle que les deux boutons de confirmation, poussée à trois. */ .apercu-gestes { display: flex; gap: 10px; margin-top: 14px; } .apercu-gestes > form { display: contents; } .apercu-gestes .btn { flex: 1 1 0; min-height: 52px; justify-content: center; gap: 8px; font-size: 1rem; white-space: nowrap; } .apercu-gestes .geste-annuler { border-color: var(--danger); color: var(--danger); } .apercu-gestes .geste-annuler:hover { background: var(--danger-doux); } .apercu-gestes .geste-modifier { border-color: var(--warn); color: var(--warn); } .apercu-gestes .geste-modifier:hover { background: var(--warn-doux); } @media (max-width: 520px) { .apercu-gestes { flex-wrap: wrap; } .apercu-gestes .btn { flex: 1 1 40%; } } /* LE « ÊTES-VOUS SÛR ? ». Une deuxième marche, posée par-dessus les trois gestes plutôt qu'à côté : la question doit remplacer le choix précédent, pas s'y ajouter. */ .apercu-sur { margin-top: 14px; border: 1px solid var(--warn); border-radius: var(--rayon-petit); background: var(--warn-doux); padding: 12px 14px; } .apercu-sur p { margin: 0 0 10px; font-weight: 600; text-align: center; } .apercu-sur .apercu-gestes { margin-top: 0; } /* Le formulaire de correction, replié. Il ne concurrence pas les trois gestes : on ne corrige qu'après avoir lu. */ .apercu-edition { margin-top: 14px; border: 1px dashed var(--trait-fort); border-radius: var(--rayon-petit); padding: 12px 14px; text-align: left; } .apercu-edition[hidden] { display: none; } .apercu-edition > summary { cursor: pointer; color: var(--muet); font-size: .9rem; list-style: none; } .apercu-edition > summary::-webkit-details-marker { display: none; } .apercu-edition[open] > summary { margin-bottom: 10px; } .apercu-edition label { display: block; margin-bottom: 10px; } .apercu-edition label > span { display: block; margin-bottom: 4px; color: var(--muet); font-size: .82rem; } .apercu-edition input, .apercu-edition textarea { width: 100%; border: 1px solid var(--trait); border-radius: var(--rayon-petit); background: var(--champ); padding: 9px 11px; color: var(--texte); } .apercu-edition input:disabled { color: var(--muet); } .apercu-edition input:focus, .apercu-edition textarea:focus { border-color: var(--accent); outline: none; } /* La phrase d'origine, en tête de l'aperçu. En italique et en retrait : c'est une citation, pas une donnée de la fiche — et c'est ce qu'on relit en premier quand le résultat surprend. */ .apercu-entendu { display: flex; align-items: center; gap: 8px; margin: 0; border-bottom: 1px solid var(--trait); padding: 9px 14px; color: var(--texte-2); font-size: .88rem; font-style: italic; } .apercu-entendu .lucide { flex: 0 0 auto; color: var(--muet); font-style: normal; }