/* ===================================================================== styles.css — palette, typographie, écrans. Polices embarquées dans /fonts. Aucune ressource externe. ===================================================================== */ @font-face { font-family: 'Newsreader'; src: url('fonts/Newsreader-Variable.ttf') format('truetype'); font-weight: 200 800; font-style: normal; font-display: block; } @font-face { font-family: 'Newsreader'; src: url('fonts/Newsreader-Italic-Variable.ttf') format('truetype'); font-weight: 200 800; font-style: italic; font-display: block; } @font-face { font-family: 'Public Sans'; src: url('fonts/PublicSans-Variable.ttf') format('truetype'); font-weight: 100 900; font-style: normal; font-display: block; } @font-face { font-family: 'Public Sans'; src: url('fonts/PublicSans-Italic-Variable.ttf') format('truetype'); font-weight: 100 900; font-style: italic; font-display: block; } :root { --pierre: #EAE6E0; --surface: #FFFFFF; --encre: #1F2428; --olivier: #3F5245; --trait: #A39C8E; --ocre: #B07D2B; --rouge-profond: #8E2C24; --encre-2: #5B6166; /* texte secondaire, contraste AA sur blanc */ --olivier-clair: #E4E8E2; /* fond léger pour l'état actif */ --ocre-clair: #F4EBDB; --ocre-texte: #85601F; /* ocre assombri pour le texte, contraste AA */ --rouge-clair: #F3E4E2; --pierre-sombre: #E2DED8; /* Deux hairlines plus douces que --trait : la séparation intérieure d'un panneau n'a pas à peser autant que son contour. */ --trait-doux: #B9B3A7; --trait-fin: #AFA89B; /* Ombres chaudes, jamais grises : le papier ne porte pas d'ombre bleue. Le premier terme est un liseré d'un pixel posé DANS l'ombre : il donne à chaque surface un bord net sans rouvrir le contour « 1px solid » que le système s'interdit — il vaut 5 % de noir chaud, il se voit sans se lire. C'est lui qui encadre, d'un coup, tous les composants de tous les écrans. */ --ombre-1: 0 0 0 1px rgba(58, 48, 33, 0.055), 0 1px 1px rgba(58, 48, 33, 0.04), 0 3px 14px -5px rgba(58, 48, 33, 0.10); --ombre-2: 0 0 0 1px rgba(58, 48, 33, 0.07), 0 1px 2px rgba(58, 48, 33, 0.05), 0 14px 36px -18px rgba(58, 48, 33, 0.22); --geste: 160ms cubic-bezier(0.4, 0, 0.2, 1); --serif: 'Newsreader', Georgia, 'Times New Roman', serif; --sans: 'Public Sans', 'Segoe UI', Arial, sans-serif; /* Un seul rail : l'en-tête et la page partagent ce bord gauche. */ --mesure: 1560px; --marge: clamp(22px, 3.4vw, 60px); --rail: max(var(--marge), (100% - var(--mesure)) / 2 + var(--marge)); --largeur-legende: 250px; /* Le chevron des menus et des listes : dessiné, jamais celui du système. Il vit sur :root parce que les listes déroulantes ne sont pas toutes dans l'en-tête — le formulaire « Nouvelle bible » en porte une. */ --chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='7' viewBox='0 0 11 7'%3E%3Cpath d='M1 1l4.5 4.5L10 1' fill='none' stroke='%235B6166' stroke-width='1.2'/%3E%3C/svg%3E"); --chevron-haut: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='7' viewBox='0 0 11 7'%3E%3Cpath d='M1 6l4.5-4.5L10 6' fill='none' stroke='%231F2428' stroke-width='1.4'/%3E%3C/svg%3E"); } * { box-sizing: border-box; } /* Le rail reste collé en haut : une ancre visée doit s'arrêter en dessous de lui plutôt que de se glisser derrière. */ html { font-size: 16px; scroll-padding-top: 74px; } body { margin: 0; /* Le fond n'est pas un aplat : la lumière tombe du haut, comme sur du papier. */ background: var(--pierre); background-image: linear-gradient(178deg, #F2EFEA 0%, var(--pierre) 32%); background-attachment: fixed; color: var(--encre); font-family: var(--sans); font-size: 1rem; line-height: 1.5; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } ::selection { background: var(--olivier-clair); color: var(--encre); } a { color: inherit; text-decoration: none; transition: color var(--geste); } a:hover { text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; } b, strong { font-weight: 600; } h1, h2, h3 { font-family: var(--serif); font-weight: 480; margin: 0; line-height: 1.14; letter-spacing: -0.012em; font-optical-sizing: auto; } /* Le surtitre : capitales étroites et espacées, la seule graisse haute du sans. */ .surtitre { display: block; font-size: 0.72rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--encre-2); } button, input, select, textarea { font: inherit; color: inherit; } :focus-visible { outline: 2px solid var(--olivier); outline-offset: 2px; } .num, .id, dd, .statut-compte, .frise-fin, .journal-date, output, .brouillon-champ, .chiffres-liste { font-variant-numeric: tabular-nums; } .secondaire { color: var(--encre-2); } .vide { color: var(--encre-2); font-style: italic; } .note { color: var(--encre-2); margin: 12px 0 0; font-size: 0.95rem; } /* ---------- Structure ---------- */ .app { display: grid; grid-template-columns: minmax(0, 1fr) 0; min-height: 100vh; } .app.assistant-ouvert { grid-template-columns: minmax(0, 1fr) 440px; } .app > .principal { min-width: 0; } .bouton { background: var(--surface); border: 1px solid var(--encre); border-radius: 0; padding: 8px 16px; cursor: pointer; line-height: 1.25; font-size: 0.95rem; letter-spacing: 0.012em; transition: background var(--geste), color var(--geste), border-color var(--geste), box-shadow var(--geste); } .bouton:hover { background: var(--encre); color: var(--pierre); } .bouton:active { box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.16); } .bouton-principal { background: var(--olivier); border-color: var(--olivier); color: #fff; } .bouton-principal:hover { background: #33422F; border-color: #33422F; color: #fff; } .bouton-petit { padding: 5px 11px; font-size: 0.9rem; } .bouton[disabled] { opacity: 0.4; cursor: not-allowed; } .bouton[disabled]:hover { background: var(--surface); color: inherit; } #bouton-assistant[aria-expanded="true"] { background: var(--olivier); border-color: var(--olivier); color: #fff; } /* Même rail que l'en-tête, et de l'air en bas : une page de dossier ne s'arrête pas au dernier pixel de contenu. */ main { padding: 44px var(--rail) 120px; } .ecran-entete { margin-bottom: 30px; max-width: 92ch; } .titre-ecran { font-size: clamp(2rem, 1.5rem + 1.5vw, 2.85rem); letter-spacing: -0.019em; } .chapeau { margin: 14px 0 0; color: var(--encre-2); font-size: 1.08rem; line-height: 1.55; max-width: 74ch; } .chapeau .statut { color: var(--encre); white-space: nowrap; } /* Une section s'ouvre par un filet fin et beaucoup d'air, pas par une boîte. */ .bloc { margin-top: 56px; padding-top: 24px; border-top: 1px solid var(--trait-doux); } .bloc:first-child { margin-top: 0; } .titre-bloc { font-size: 1.42rem; margin-bottom: 18px; } /* ---------- Tableaux ---------- */ /* Un tableau se nomme pour qui ne le voit pas : le porte la phrase, le

au-dessus la redit à l'œil. Le cacher évite de l'écrire deux fois. */ table caption { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } /* Pas de contour : une surface posee sur la pierre, tenue par son ombre. Les filets ne separent plus que les lignes entre elles. */ table.donnees { width: 100%; border-collapse: collapse; background: var(--surface); box-shadow: var(--ombre-1); } table.donnees th, table.donnees td { padding: 13px 18px; text-align: left; vertical-align: top; } table.donnees th { font-weight: 600; color: var(--olivier); border-bottom: 1px solid var(--olivier); font-size: 0.82rem; letter-spacing: 0.08em; text-transform: uppercase; padding-top: 15px; padding-bottom: 11px; white-space: nowrap; } table.donnees td { border-bottom: 1px solid var(--trait-fin); } table.donnees tbody tr:last-child td { border-bottom: none; } table.donnees .num { text-align: right; white-space: nowrap; } table.donnees th.num { text-align: right; } table.donnees .id { white-space: nowrap; font-weight: 500; } table.donnees tfoot td { border-top: 1px solid var(--olivier); border-bottom: none; font-weight: 600; background: #F8F6F3; } table.donnees tr.cliquable { cursor: pointer; } table.donnees tr.cliquable td { transition: background var(--geste); } table.donnees tr.cliquable:hover td { background: var(--olivier-clair); } table.donnees td.cause { max-width: 52ch; color: var(--encre-2); } .tableau-risques tbody td { padding-top: 17px; padding-bottom: 17px; } /* ---------- Les listes déroulantes ---------- Une liste du système arrive bleue, arrondie, en police du système : trois écarts avec tout le reste, dans la fenêtre où l'on démontre. Le bouton fermé se tient donc comme les autres surfaces du projet — arêtes vives, ombre chaude, chevron dessiné. Seule la liste ouverte reste au système. */ select { appearance: none; -webkit-appearance: none; font: inherit; color: var(--encre); border: 0; border-radius: 0; padding: 9px 34px 9px 13px; background: var(--surface) var(--chevron) no-repeat right 12px center; box-shadow: var(--ombre-1); cursor: pointer; max-width: 100%; } select:focus-visible { outline: 2px solid var(--olivier); outline-offset: 2px; } /* ---------- Pastilles de statut ---------- */ .statut { display: inline; } .statut i { display: inline-block; width: 10px; height: 10px; margin-right: 8px; border: 1px solid var(--olivier); background: transparent; vertical-align: 0; } .statut em { font-style: normal; color: var(--encre-2); } .statut.s-commande i { background: transparent; } .statut.s-expedie i { background: linear-gradient(90deg, var(--olivier) 50%, transparent 50%); } .statut.s-livre-en-reserve i { background: var(--ocre); border-color: var(--ocre); } .statut.s-controle-conforme i { background: var(--ocre-clair); border-color: var(--ocre); } .statut.s-installe i { background: var(--olivier); } .statut.s-cloture i { background: var(--encre); border-color: var(--encre); } .statut.s-en-retard i { background: var(--ocre); border-color: var(--ocre); border-radius: 50%; } .statut.s-en-circuit i { background: var(--ocre-clair); border-color: var(--ocre); } .risque { display: inline-block; color: var(--rouge-profond); border: 1px solid var(--rouge-profond); padding: 2px 9px; font-size: 0.86rem; font-weight: 600; letter-spacing: 0.02em; white-space: nowrap; } tr.ligne-risque td:first-child { box-shadow: inset 3px 0 0 var(--rouge-profond); } /* ---------- Écran 1 : frise ---------- */ .frise-bloc { border-top: none; padding-top: 0; } .frise { position: relative; background: var(--surface); box-shadow: var(--ombre-1); padding: 0 28px 10px 0; } .frise-axe, .frise-ligne { display: grid; grid-template-columns: var(--largeur-legende) minmax(0, 1fr); } .frise-axe { height: 60px; border-bottom: 1px solid var(--trait-doux); } .frise-legende { padding: 13px 20px; display: flex; flex-direction: column; justify-content: center; gap: 3px; border-right: 1px solid var(--trait-fin); } .frise-legende a { line-height: 1.25; } .frise-legende span { color: var(--encre-2); font-size: 0.95rem; } .frise-cadre { color: var(--encre-2); font-size: 0.95rem; } .frise-piste { position: relative; min-height: 64px; } .frise-piste::before, .frise-piste::after { content: ''; position: absolute; top: 0; bottom: 0; width: 0; } .frise-piste::before { left: var(--aujourdhui); border-left: 1px dashed var(--encre-2); } .frise-piste::after { left: var(--reouverture); border-left: 3px solid var(--encre); margin-left: -1px; } .frise-piste-axe { min-height: 0; height: 100%; } .frise-piste-axe::before, .frise-piste-axe::after { top: 50px; } .frise-mois { position: absolute; top: 32px; transform: translateX(-50%); font-size: 0.85rem; color: var(--encre-2); } .frise-mois::before { content: ''; position: absolute; top: -8px; left: 50%; height: 6px; border-left: 1px solid var(--trait); } .frise-etiquette { position: absolute; top: 6px; font-size: 0.9rem; white-space: nowrap; padding: 1px 6px; background: var(--surface); } .etiquette-aujourdhui { transform: translateX(-100%); color: var(--encre-2); text-align: right; } .etiquette-reouverture { transform: translateX(-100%); font-weight: 600; color: var(--encre); text-align: right; padding-right: 8px; } /* La butée avancée par la marge de mise en scène. Repérée sur l'axe seul : un second trait dans les pistes entrerait en conflit avec « aujourd'hui ». */ .etiquette-butee { transform: translateX(-100%); text-align: right; padding-right: 8px; color: var(--ocre-texte); font-weight: 600; border-bottom: 2px dashed var(--ocre); } .frise-corps .frise-ligne { border-bottom: 1px solid var(--trait-fin); } .frise-corps .frise-ligne:last-child { border-bottom: none; } .frise-barre { position: absolute; top: 50%; height: 16px; transform: translateY(-50%) scaleX(0); transform-origin: left center; transition: transform 1.3s cubic-bezier(0.2, 0.7, 0.15, 1); transition-delay: calc(var(--i) * 0.18s + 0.2s); } .frise.deployee .frise-barre { transform: translateY(-50%) scaleX(1); } .frise.deja-jouee .frise-barre { transition: none; } /* Chaque bande est un bouton : elle se survole, se cible au clavier et ouvre sa fiche. Tout ce qu'un bouton apporte de natif est remis à plat, les fonds de .seg ci-dessous reprennent la main. */ .frise-barre .seg { position: absolute; top: 0; bottom: 0; display: block; -webkit-appearance: none; appearance: none; margin: 0; padding: 0; border: 0; background: none; font: inherit; color: inherit; min-width: 4px; cursor: pointer; } /* La bande ne fait que 16 px de haut : on lui donne une prise plus large que ce qu'elle montre, sinon elle se dérobe sous le curseur. */ .frise-barre .seg::after { content: ''; position: absolute; top: -10px; bottom: -10px; left: 0; right: 0; } .frise-barre .seg:focus-visible { outline: 2px solid var(--olivier); outline-offset: 3px; } .frise-barre .seg.montree { box-shadow: 0 0 0 2px var(--encre); } .frise-barre .seg.etape.montree { box-shadow: inset 1px 0 0 #fff, 0 0 0 2px var(--encre); } .seg.attente { background: repeating-linear-gradient(135deg, var(--trait) 0 3px, transparent 3px 8px); border: 1px solid var(--trait); } .seg.delai { background: var(--olivier-clair); border: 1px solid var(--trait); } .seg.etape { background: var(--olivier); box-shadow: inset 1px 0 0 #fff; } .seg.depassement { background: var(--rouge-profond); background-image: repeating-linear-gradient(45deg, rgba(255,255,255,.55) 0 2px, transparent 2px 6px); } .frise-fin { position: absolute; top: 50%; transform: translateY(-50%); margin-left: 10px; white-space: nowrap; font-size: 0.95rem; color: var(--encre-2); opacity: 0; transition: opacity 0.4s ease; transition-delay: calc(var(--i) * 0.18s + 1.4s); } .frise-fin b { color: var(--rouge-profond); } .frise.deployee .frise-fin { opacity: 1; } .frise.deja-jouee .frise-fin { transition: none; } .frise-lecture { color: var(--encre-2); margin: 10px 0 0; font-size: 0.95rem; } .frise-geste { color: var(--encre-2); margin: 4px 0 0; font-size: 0.88rem; font-style: italic; } .frise-corps .frise-ligne:hover { background: #FBFAF8; } /* ---------- Écran 1 : la fiche d'une bande ---------- Une feuille posée sur la frise, pas une bulle : mêmes arêtes vives et même ombre chaude que les autres surfaces. */ .fiche-frise { position: absolute; z-index: 6; width: 340px; max-width: calc(100% - 16px); padding: 13px 16px 14px; background: var(--surface); box-shadow: var(--ombre-2); border-top: 2px solid var(--olivier); pointer-events: none; } .fiche-frise.epinglee { pointer-events: auto; border-top-color: var(--encre); } .fiche-frise-genre { margin: 0; font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--encre-2); } .fiche-frise-titre { margin: 3px 0 9px; font-family: 'Newsreader', Georgia, serif; font-size: 1.15rem; line-height: 1.2; color: var(--encre); } .fiche-frise-liste { margin: 0; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 3px 14px; font-size: 0.9rem; } .fiche-frise-liste dt { color: var(--encre-2); white-space: nowrap; } .fiche-frise-liste dd { margin: 0; color: var(--encre); } /* D'où sort la date : livraison constatée, date annoncée, délai calculé. La démonstration tient sur cette transparence-là, pas sur la date seule. */ .fiche-frise-precision { display: block; color: var(--encre-2); font-size: 0.82rem; line-height: 1.35; } .fiche-frise-note { margin: 10px 0 0; padding-left: 9px; font-size: 0.9rem; color: var(--rouge-profond); border-left: 2px solid var(--rouge-profond); } .fiche-frise-lien { display: inline-block; margin-top: 11px; font-size: 0.9rem; font-weight: 600; } .fiche-frise-epingle { margin: 9px 0 0; padding-top: 8px; border-top: 1px solid var(--trait-fin); font-size: 0.82rem; color: var(--encre-2); } /* ---------- Écran 1 : chiffres ---------- */ .chiffres-liste { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; margin: 0; background: var(--surface); box-shadow: var(--ombre-1); } .chiffres-liste > div { padding: 22px 26px 24px; border-right: 1px solid var(--trait-fin); display: flex; flex-direction: column; gap: 0; } .chiffres-liste > div:last-child { border-right: none; } .chiffres-liste dt { color: var(--encre-2); font-size: 0.82rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; } .chiffres-liste dd { margin: 13px 0 8px; font-family: var(--serif); font-size: clamp(2rem, 1.4rem + 1.1vw, 2.6rem); font-weight: 400; line-height: 1; letter-spacing: -0.022em; } .chiffres-liste small { color: var(--encre-2); font-size: 0.9rem; line-height: 1.4; } /* ---------- Écran 1 : statuts ---------- */ .statuts { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 24px; align-items: start; } .statuts-sequence { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(6, 1fr); background: var(--surface); box-shadow: var(--ombre-1); } .statut-case { padding: 18px 20px; border-right: 1px solid var(--trait-fin); position: relative; } .statut-case:last-child { border-right: none; } .statut-case::after { content: ''; position: absolute; right: -6px; top: 26px; width: 0; height: 0; border: 5px solid transparent; border-left-color: var(--trait); z-index: 1; } .statut-case:last-child::after { display: none; } .statut-compte { display: block; font-family: var(--serif); font-size: 1.95rem; font-weight: 400; line-height: 1.05; letter-spacing: -0.02em; } .statut-case.zero .statut-compte { color: var(--encre-2); } .statut-libelle { display: block; margin-top: 4px; } .statuts-accolades { grid-column: 1; display: grid; grid-template-columns: repeat(6, 1fr); margin-top: -18px; font-size: 0.9rem; color: var(--encre-2); } .accolade { border-top: 1px solid var(--olivier); padding-top: 4px; margin: 0 12px; text-align: center; } .accolade-2 { grid-column: 3 / span 2; } .accolade-4 { grid-column: 5 / span 2; } .statuts-hors { grid-column: 2; grid-row: 1; list-style: none; margin: 0; padding: 0; display: grid; gap: 0; box-shadow: var(--ombre-1); background: var(--surface); } .statuts-hors li { padding: 13px 20px; display: flex; align-items: baseline; gap: 14px; border-bottom: 1px solid var(--trait-fin); } .statuts-hors li:last-child { border-bottom: none; } .statuts-hors .statut-compte { font-size: 1.5rem; min-width: 1.4em; } .statuts-hors li.zero .statut-compte { color: var(--encre-2); } /* ---------- Écran 1 : à traiter ---------- */ .a-traiter { list-style: none; margin: 0; padding: 0; background: var(--surface); box-shadow: var(--ombre-1); } .a-traiter-item { border-bottom: 1px solid var(--trait-fin); } .a-traiter-item:last-child { border-bottom: none; } .a-traiter-item a { display: grid; grid-template-columns: 3px 1fr; gap: 18px; padding: 16px 20px; transition: background var(--geste); } .a-traiter-item a:hover { background: #F7F5F1; text-decoration: none; } .a-traiter-item a::before { content: ''; background: var(--ocre); grid-row: 1 / span 2; } .a-traiter-titre { display: block; font-weight: 500; } .a-traiter-detail { display: block; grid-column: 2; color: var(--encre-2); margin-top: 2px; } /* ---------- Sélecteurs ---------- */ .selecteur { display: flex; gap: 4px; align-items: center; flex-wrap: wrap; margin-bottom: 34px; padding-bottom: 18px; border-bottom: 1px solid var(--trait-doux); } /* Une boîte d'un pixel n'existe pas dans ce système : la surface se pose avec son ombre. Et la cible fait 44 px de haut, pas 38. */ .selecteur > a { display: inline-flex; align-items: center; min-height: 44px; padding: 10px 16px; border: 0; border-radius: 0; background: var(--surface); box-shadow: var(--ombre-1); font-size: 0.95rem; transition: background var(--geste), color var(--geste); } .selecteur > a:hover { text-decoration: none; background: var(--olivier-clair); } .selecteur > a.actif { background: var(--olivier); color: #fff; } .selecteur > a span { color: inherit; opacity: 0.8; margin-left: 6px; } .selecteur-ligne { gap: 16px; } .selecteur-champ { display: inline-flex; align-items: center; gap: 8px; color: var(--encre-2); } .selecteur-champ select { max-width: 380px; } .selecteur-nav { display: inline-flex; gap: 12px; margin-left: auto; } .selecteur-nav a, .retour { color: var(--olivier); } .selecteur > a.retour { border: none; background: none; padding-left: 0; } /* ---------- Écran 3 : graphe ---------- */ .graphe { display: grid; grid-template-columns: minmax(0, 1fr) 90px minmax(0, 1fr); gap: 0; align-items: stretch; margin-bottom: 20px; } .graphe-colonne { display: grid; gap: 14px; } .graphe-droite { align-content: center; } .graphe-liens { width: 100%; height: 100%; min-height: 100%; } .graphe-liens path { fill: none; stroke-width: 2px; } .graphe-liens path.ok { stroke: var(--olivier); } .graphe-liens path.bloque { stroke: var(--ocre); stroke-dasharray: 5 4; } .carte-noeud { background: var(--surface); box-shadow: var(--ombre-1); border-left: 3px solid var(--trait); padding: 15px 20px; } .carte-noeud.ok { border-left-color: var(--olivier); } .carte-noeud.bloque { border-left-color: var(--ocre); } .carte-noeud.attend { border-left-color: var(--trait); } .noeud-titre { display: flex; justify-content: space-between; gap: 12px; } .noeud-titre span { color: var(--encre-2); font-variant-numeric: tabular-nums; } .noeud-objet { color: var(--encre-2); margin-top: 2px; } .noeud-etat { margin-top: 8px; font-weight: 500; } .carte-noeud.bloque .noeud-etat:not(.secondaire) { color: var(--ocre-texte); } .noeud-etat.secondaire { font-weight: 400; margin-top: 2px; } table.calcul tr.pivot td { background: var(--olivier-clair); font-weight: 500; } table.calcul tr.bloque td:first-child { box-shadow: inset 3px 0 0 var(--ocre); } table.calcul tr.ok td:first-child { box-shadow: inset 3px 0 0 var(--olivier); } table.calcul tr.butee td { border-top: 1px solid var(--encre); font-weight: 500; } table.calcul tr.depassement td { color: var(--rouge-profond); font-weight: 600; } table.calcul tr.marge td { color: var(--olivier); font-weight: 600; } /* La phrase qui conclut un calcul n'est pas du texte courant : c'est le résultat. Elle est posée sur sa propre feuille, avec le trait qui dit dans quel sens le résultat penche. */ .conclusion { font-family: var(--serif); font-size: 1.5rem; font-weight: 400; margin: 24px 0 0; line-height: 1.32; letter-spacing: -0.012em; max-width: 62ch; background: var(--surface); box-shadow: var(--ombre-1); border-left: 3px solid var(--olivier); padding: 20px 28px 22px 25px; } .conclusion-depassement { color: var(--rouge-profond); border-left-color: var(--rouge-profond); } .type-doc { color: var(--encre-2); white-space: nowrap; } /* ---------- Écran 4 : facturation ---------- */ .progression { margin-bottom: 24px; } .progression-barre { display: flex; height: 68px; box-shadow: var(--ombre-1); background: var(--surface); } .progression-seg { display: flex; flex-direction: column; justify-content: center; padding: 0 12px; border-right: 1px solid var(--surface); min-width: 0; overflow: hidden; white-space: nowrap; } .progression-seg:last-child { border-right: none; } .progression-seg.etat-réglée { background: var(--olivier); color: #fff; } .progression-seg.etat-en-attente-de-validation { background: var(--ocre-clair); color: var(--encre); box-shadow: inset 0 5px 0 var(--ocre); } .progression-seg.reste { background: repeating-linear-gradient(135deg, var(--trait) 0 3px, transparent 3px 9px); color: var(--encre); } .progression-libelle { font-size: 0.95rem; opacity: 0.9; } .progression-montant { font-weight: 600; font-variant-numeric: tabular-nums; } .progression-jalons { position: relative; height: 30px; margin-top: 6px; font-size: 0.9rem; color: var(--encre-2); } .progression-jalons span { position: absolute; transform: translateX(-100%); white-space: nowrap; padding-right: 6px; border-right: 1px solid var(--trait); line-height: 1.2; text-align: right; } .progression-jalons b { display: block; color: var(--encre); } .marche-grille { display: grid; grid-template-columns: minmax(0, 3fr) minmax(320px, 2fr); gap: 24px; align-items: start; } .marche-etapes tr.reste td { color: var(--encre-2); } .marche-etapes .secondaire { display: block; font-size: 0.95rem; } .synthese { margin: 0; background: var(--surface); box-shadow: var(--ombre-1); } .synthese > div { padding: 15px 20px; border-bottom: 1px solid var(--trait-fin); display: grid; grid-template-columns: 1fr auto; gap: 0 16px; align-items: baseline; } .synthese > div:last-child { border-bottom: none; } .synthese dt { color: var(--encre-2); } .synthese dd { margin: 0; font-family: var(--serif); font-size: 1.55rem; font-weight: 400; text-align: right; letter-spacing: -0.015em; } .synthese small { grid-column: 1 / -1; color: var(--encre-2); font-size: 0.9rem; } .synthese .retenue { background: var(--pierre); } .synthese .retenue dt { color: var(--encre); font-weight: 500; } .controles { list-style: none; margin: 16px 0 0; padding: 0; display: grid; gap: 10px; } .controles li { display: grid; grid-template-columns: 28px 1fr; gap: 8px; align-items: start; } .controles .coche { font-weight: 700; color: var(--olivier); font-size: 1.2rem; line-height: 1.2; } .controles li.ko .coche { color: var(--ocre-texte); } .controle-libelle { display: block; } .controle-detail { display: block; color: var(--encre-2); font-variant-numeric: tabular-nums; } .etat-facture { display: inline; white-space: nowrap; } .etat-facture i { display: inline-block; width: 10px; height: 10px; margin-right: 8px; border: 1px solid var(--olivier); vertical-align: 0; } .etat-facture em { font-style: normal; color: var(--encre-2); } .etat-facture.reglee i { background: var(--olivier); } .etat-facture.attente i { background: var(--ocre); border-color: var(--ocre); } .etat-facture.recue i { background: transparent; } .etat-facture.doublon { color: var(--ocre-texte); font-weight: 600; } .etat-facture.doublon i { background: var(--ocre); border-color: var(--ocre); border-radius: 50%; } .etat-facture.proforma { color: var(--encre-2); font-style: italic; } .etat-facture.proforma i { border-style: dashed; } table.factures tr.doublon td { border-bottom: none; background: var(--ocre-clair); } table.factures tr.alerte-ligne td { background: var(--ocre-clair); padding-top: 0; } table.factures tr.proforma td { color: var(--encre-2); } table.factures td.action { text-align: right; white-space: nowrap; } .alerte-doublon { color: var(--encre); } /* ---------- Écran 5 : service fait ---------- */ .fiche { max-width: 880px; } .fiche-entete { margin-bottom: 18px; } .fiche-alerte { background: var(--ocre-clair); border-left: 3px solid var(--ocre); box-shadow: var(--ombre-1); padding: 13px 18px; margin: 0 0 20px; } .fiche-colonnes { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; } .fiche-colonne { background: var(--surface); box-shadow: var(--ombre-1); padding: 18px 22px; } .fiche-colonne h3 { font-size: 1.2rem; margin-bottom: 10px; } .fiche-colonne ul { margin: 0; padding-left: 18px; } .fiche-colonne li { margin: 4px 0; } .fiche-decision { margin-top: 24px; background: var(--surface); box-shadow: var(--ombre-1); padding: 24px; } .fiche-boutons { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; } .decision { min-height: 62px; border: 1px solid var(--encre); background: var(--surface); border-radius: 0; font-size: 1.1rem; font-weight: 500; cursor: pointer; transition: background var(--geste), color var(--geste), border-color var(--geste); } .decision-conforme { background: var(--olivier); border-color: var(--olivier); color: #fff; } .decision-conforme:hover { background: #364639; } .decision-reserve { border-color: var(--ocre); color: var(--ocre-texte); } .decision-reserve:hover, .decision-reserve.choisie { background: var(--ocre-clair); } .decision-refus:hover, .decision-refus.choisie { background: var(--pierre); } .fiche-motif { margin-top: 14px; display: grid; grid-template-columns: 1fr auto; gap: 12px; align-items: end; } .fiche-motif[hidden] { display: none; } .fiche-motif label { display: grid; gap: 4px; color: var(--encre-2); } .fiche-motif textarea { width: 100%; padding: 8px; border: 1px solid var(--trait-doux); border-radius: 0; resize: vertical; color: var(--encre); } /* minmax(0, 1fr) et non 1fr : sans cela les deux champs refusent de descendre sous leur contenu minimal, et l'horodatage poussait la page de trois pixels vers la droite — assez pour une barre de défilement. */ .fiche-signature { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto; gap: 16px; margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--trait); align-items: end; } .fiche-signature label { display: grid; gap: 4px; color: var(--encre-2); font-size: 0.95rem; } .fiche-signature select, .fiche-signature input { padding: 7px 9px; border: 1px solid var(--trait-doux); border-radius: 0; background: var(--surface); color: var(--encre); font-size: 1rem; } .fiche-signature input[name="signature"] { font-family: var(--serif); font-style: italic; font-size: 1.45rem; border-bottom: 1px solid var(--encre); border-top: none; border-left: none; border-right: none; border-radius: 0; padding-left: 2px; } .horodatage { display: grid; gap: 4px; color: var(--encre-2); font-size: 0.95rem; } .horodatage output { color: var(--encre); font-size: 1rem; padding: 7px 0; } .fiche-seuil { margin: 16px 0 0; padding: 13px 18px; background: #F7F5F1; border-left: 3px solid var(--olivier); } .fiche-faite { margin-top: 24px; background: var(--olivier-clair); border-left: 3px solid var(--olivier); box-shadow: var(--ombre-1); padding: 15px 20px; } .fiche-faite p { margin: 0; } .journal { margin-top: 28px; } .journal h3 { font-size: 1.25rem; margin-bottom: 10px; } .journal-liste { list-style: none; margin: 0; padding: 0; background: var(--surface); box-shadow: var(--ombre-1); } .journal-liste li { display: grid; grid-template-columns: 150px 1fr auto; gap: 16px; padding: 13px 20px; border-bottom: 1px solid var(--trait-fin); } .journal-liste li:last-child { border-bottom: none; } .journal-date { color: var(--encre-2); white-space: nowrap; } .journal-par { color: var(--encre-2); white-space: nowrap; } /* ---------- Écran 6 : assistant ---------- */ .assistant { border-left: 1px solid var(--trait-doux); box-shadow: -18px 0 40px -32px rgba(58, 48, 33, 0.45); background: var(--surface); position: sticky; top: 0; height: 100vh; display: grid; grid-template-rows: auto auto minmax(0, 1fr) auto auto; min-width: 0; } .assistant[hidden] { display: none; } .assistant-entete { display: flex; justify-content: space-between; align-items: center; padding: 16px 20px 8px; } .assistant-entete h2 { font-size: 1.4rem; } .assistant-mention { margin: 0 20px 12px; color: var(--encre-2); font-size: 0.9rem; border-bottom: 1px solid var(--trait); padding-bottom: 12px; } .assistant-conversation { overflow-y: auto; padding: 4px 20px 12px; display: grid; gap: 12px; align-content: start; } .assistant-vide { color: var(--encre-2); font-style: italic; margin: 0; } .message { padding: 12px 15px; border-radius: 0; max-width: 100%; } .message p { margin: 0 0 8px; } .message p:last-child { margin-bottom: 0; } .message ul { margin: 6px 0 0; padding-left: 18px; } .message li { margin: 6px 0; } .message a { color: var(--olivier); text-decoration: underline; text-underline-offset: 3px; } .message-question { background: var(--olivier-clair); justify-self: end; max-width: 90%; } .message-reponse { background: var(--pierre); } .message-refus { border-left: 4px solid var(--ocre); } .assistant-questions { display: grid; gap: 6px; padding: 12px 20px; border-top: 1px solid var(--trait); } .question { text-align: left; background: var(--surface); border: 1px solid var(--trait-doux); border-radius: 0; padding: 9px 13px; cursor: pointer; transition: background var(--geste), border-color var(--geste); } .question:hover { background: var(--olivier-clair); border-color: var(--olivier); } .assistant-saisie { display: grid; grid-template-columns: 1fr auto; gap: 8px; padding: 0 20px 16px; } .assistant-saisie input { padding: 8px 10px; border: 1px solid var(--trait-doux); border-radius: 0; min-width: 0; } /* Le brouillon est une surface, pas une boîte : son bord vient de son ombre, comme toutes les autres. C'est l'écran du geste 6 de la démonstration, et c'était la dernière entorse à la règle. */ .brouillon { background: var(--surface); box-shadow: var(--ombre-1); padding: 14px 16px; margin-top: 4px; } .brouillon-champ { display: grid; grid-template-columns: 56px 1fr; gap: 8px; padding: 4px 0; border-bottom: 1px solid var(--trait); } .brouillon-champ span:first-child { color: var(--encre-2); } .brouillon-corps { padding-top: 10px; } .brouillon-corps p { margin: 0 0 10px; } .brouillon-actions { display: flex; align-items: center; gap: 12px; margin-top: 8px; padding-top: 10px; border-top: 1px solid var(--trait); } .brouillon-mention { color: var(--encre-2); font-size: 0.9rem; } /* ---------- Sous-onglets : les deux natures de validation ---------- */ .sous-onglets { display: flex; gap: 4px; margin-bottom: 26px; border-bottom: 1px solid var(--trait-doux); } .sous-onglets a { display: inline-flex; align-items: center; min-height: 44px; padding: 10px 16px; color: var(--encre); border: 0; border-bottom: 2px solid transparent; margin-bottom: -1px; } .sous-onglets a:hover { text-decoration: none; background: var(--pierre); } .sous-onglets a.actif { color: var(--olivier); border-bottom-color: var(--olivier); font-weight: 600; } /* Le compteur d'un onglet est un chiffre en exposant, pas une pastille. C'est la règle du rail principal ; le rail des bibles portait des pastilles pleines, et les deux se lisaient à soixante-dix pixels l'un de l'autre. Deux manières de compter sur la même image. */ .sous-onglets .pastille { display: inline; min-width: 0; padding: 0; margin-left: 5px; background: none; color: var(--ocre-texte); font-family: var(--serif); font-size: 0.88rem; font-weight: 500; line-height: 1; vertical-align: 0.45em; letter-spacing: 0; } .sous-onglets a.actif .pastille { font-weight: 600; } .pastille { display: inline-block; min-width: 20px; padding: 0 6px; margin-left: 4px; /* Blanc sur --ocre ne vaut que 3,61:1 : sous le seuil AA d'un texte de 0,74 rem. --ocre-texte est le même ocre, assombri, à 5,7:1. */ background: var(--ocre-texte); color: #fff; border-radius: 0; font-size: 0.74rem; font-weight: 600; letter-spacing: 0.02em; text-align: center; line-height: 1.7; } /* ---------- Écran 5 : le circuit de validation ---------- Le circuit est UN composant, pas six boîtes empilées : une seule surface posée sur la pierre, des étapes séparées entre elles par un filet, et le trait de gauche qui reste le seul porteur d'état. */ .circuit { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; background: var(--surface); box-shadow: var(--ombre-1); } .circuit-etape { border: 0; border-bottom: 1px solid var(--trait-fin); border-left: 3px solid var(--trait); background: transparent; padding: 16px 20px; } .circuit-etape:last-child { border-bottom: none; } .circuit-etape.etape-valide { border-left-color: var(--olivier); } .circuit-etape.etape-refuse { border-left-color: var(--rouge-profond); background: var(--rouge-clair); } .circuit-etape.etape-attente { border-left-color: var(--ocre); background: var(--ocre-clair); } .circuit-etape.etape-avenir, .circuit-etape.etape-ecartee { color: var(--encre-2); } .circuit-tete { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; } .circuit-role { font-weight: 600; text-transform: lowercase; } .circuit-role::first-letter { text-transform: uppercase; } .circuit-qui { color: var(--encre-2); } .circuit-etat { margin-left: auto; font-size: 0.9rem; padding: 1px 8px; border: 1px solid var(--trait-doux); border-radius: 0; white-space: nowrap; } .circuit-etat.valide { color: var(--olivier); border-color: var(--olivier); } .circuit-etat.refuse { color: var(--rouge-profond); border-color: var(--rouge-profond); font-weight: 600; } .circuit-etat.attente { color: #fff; background: var(--ocre); border-color: var(--ocre); font-weight: 600; } .circuit-etat.avenir { color: var(--encre-2); } .circuit-objet { margin: 4px 0 0; color: var(--encre-2); } .circuit-decisions { list-style: none; margin: 10px 0 0; padding: 0 0 0 14px; border-left: 2px solid var(--trait); display: grid; gap: 8px; } .circuit-decisions li { display: grid; gap: 2px; } .circuit-decisions li.refus { border-left: 2px solid var(--rouge-profond); margin-left: -16px; padding-left: 14px; } .circuit-decision { font-weight: 500; } .circuit-decisions em { font-style: italic; color: var(--encre-2); } .circuit-relance { color: var(--rouge-profond); font-weight: 500; } /* ---------- Écran 5 : inviter un validateur extérieur ---------- */ .invitation { display: flex; gap: 16px; align-items: flex-end; flex-wrap: wrap; margin-top: 14px; padding: 18px 22px 20px; background: var(--surface); box-shadow: var(--ombre-1); } .invitation label { display: grid; gap: 4px; color: var(--encre-2); } .invitation select, .invitation input { padding: 8px 10px; border: 1px solid var(--trait-doux); border-radius: 0; background: var(--surface); color: var(--encre); min-width: 240px; } .invitation-faite { background: var(--olivier-clair); border-left: 3px solid var(--olivier); box-shadow: var(--ombre-1); padding: 13px 18px; margin: 14px 0 8px; } .invitation-lien { display: flex; gap: 10px; align-items: baseline; margin: 0; color: var(--encre-2); } .invitation-lien code { font-family: ui-monospace, 'Cascadia Mono', Consolas, monospace; background: var(--pierre); padding: 2px 8px; border-radius: 0; color: var(--encre); } /* ---------- Écran 6 : bibles, cartes de référence ---------- */ .cartes { display: grid; grid-template-columns: repeat(auto-fill, minmax(360px, 1fr)); gap: 24px; align-items: start; /* une fiche s'arrête où son texte s'arrête */ } .carte { background: var(--surface); box-shadow: var(--ombre-1); border-top: 2px solid var(--olivier); padding: 20px 22px 22px; transition: box-shadow var(--geste); display: grid; gap: 8px; align-content: start; } .carte.carte-sourcing { border-top-color: var(--rouge-profond); } .carte-entete { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; } .carte-categorie { display: block; font-size: 0.72rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--encre-2); margin-bottom: 3px; } .carte-entete h4 { font-family: var(--serif); font-size: 1.22rem; font-weight: 480; letter-spacing: -0.01em; margin: 0; } .carte-designation { margin: 0; font-weight: 500; } .carte-reference { font-family: ui-monospace, 'Cascadia Mono', Consolas, monospace; font-size: 0.84rem; letter-spacing: 0.01em; background: #F4F1EC; box-shadow: inset 0 0 0 1px var(--trait-fin); padding: 2px 8px; white-space: nowrap; } .carte-source, .carte-pose { margin: 0; color: var(--encre-2); } .carte-champs { display: grid; gap: 6px; margin: 4px 0 0; padding: 10px 0 0; border-top: 1px solid var(--trait); } .carte-champ { display: grid; grid-template-columns: 90px 1fr; gap: 10px; } .carte-champ dt { color: var(--encre-2); } .carte-champ dd { margin: 0; } .carte-stock { margin: 4px 0 0; padding-top: 10px; border-top: 1px solid var(--trait); } .carte-stock > span:first-child { color: var(--encre-2); } .carte-stock em { font-style: italic; color: var(--ocre-texte); } .carte-ligne { margin: 0; } .carte-ligne a { color: var(--olivier); } .carte-substituts { margin-top: 4px; padding-top: 10px; border-top: 1px solid var(--trait); } .carte-substituts h5 { margin: 0 0 6px; font-size: 0.95rem; color: var(--encre-2); font-weight: 600; } .carte-substituts ul { margin: 0; padding-left: 18px; } .carte-substituts li { margin: 4px 0; } .carte-actions { margin-top: 4px; } /* Disponibilité d'une référence. */ .stock { white-space: nowrap; font-size: 0.9rem; color: var(--encre-2); } .stock i { display: inline-block; width: 10px; height: 10px; margin-right: 6px; border: 1px solid var(--olivier); vertical-align: 0; } .stock.s-disponible i { background: var(--olivier); } .stock.s-a-confirmer i { background: var(--ocre-clair); border-color: var(--ocre); } .stock.s-epuise i { background: var(--ocre); border-color: var(--ocre); border-radius: 50%; } .stock.s-arrete i { background: var(--rouge-profond); border-color: var(--rouge-profond); border-radius: 50%; } .stock.s-epuise, .stock.s-arrete { color: var(--rouge-profond); font-weight: 500; } /* Disponibilité jamais relevée : un carré creux, ni vert ni rouge. Ce n'est pas une alerte, c'est un manque, et il se lit comme tel. */ .stock.s-non-renseigne i { background: transparent; border-color: var(--trait); } .stock.s-non-renseigne { color: var(--encre-2); } /* ---------- Écran 6 : recherche d'approvisionnement ---------- */ .sourcing { margin-top: 10px; padding-top: 12px; border-top: 1px solid var(--trait); } .sourcing h5 { margin: 0 0 8px; font-size: 0.95rem; font-weight: 600; } .sourcing-etapes { margin: 0 0 12px; padding-left: 20px; display: grid; gap: 6px; color: var(--encre-2); } .sourcing-etapes li::marker { color: var(--olivier); font-weight: 600; } /* ---------- Écran 7 : budget ---------- */ /* Un tableau large reste lisible quand l’assistant prend la moitié de l’écran. */ .table-large { overflow-x: auto; } .table-large table { min-width: 900px; } /* Sous 1100 px, ces tableaux défilent DANS leur bloc plutôt que de pousser la page entière de côté. La barre qui l'annonce doit être discrète : un trait dans la palette, pas la barre grise du système posée en travers d'une carte. */ .table-large { scrollbar-width: thin; scrollbar-color: var(--trait) transparent; } .table-large::-webkit-scrollbar { height: 8px; } .table-large::-webkit-scrollbar-track { background: transparent; } .table-large::-webkit-scrollbar-thumb { background: var(--trait); border-radius: 0; } .table-large::-webkit-scrollbar-thumb:hover { background: var(--encre-2); } .tableau-budget td:first-child a { color: var(--encre); } .ecart-plus { color: var(--rouge-profond); font-weight: 600; } .ecart-moins { color: var(--olivier); } .ecart-plus em, .ecart-moins em { font-style: normal; font-weight: 400; color: var(--encre-2); } .alerte-douce { border-left-color: var(--ocre) !important; } .alerte-forte { background: var(--rouge-clair) !important; border-left-color: var(--rouge-profond) !important; } .a-traiter-item.genre-budget-non-valide a::before, .a-traiter-item.genre-budget-depassement a::before { background: var(--rouge-profond); } .a-traiter-item.genre-budget-poste a::before { background: var(--rouge-profond); } .a-traiter-item.genre-budget-marge a::before, .a-traiter-item.genre-budget-ecart a::before { background: var(--ocre); } .a-traiter-item.genre-engagement a::before { background: var(--olivier); } /* ---------- Ce qu'une action vient de faire bouger ---------- */ tr.surlignee td { background: var(--ocre-clair); } .frise-ligne.surlignee .frise-legende a { color: var(--ocre-texte); font-weight: 600; } /* ---------- Assistant : actions ---------- */ .assistant-propositions { border-top: 1px solid var(--trait); overflow-y: auto; max-height: 42vh; } .assistant-propositions h3 { margin: 0; padding: 12px 20px 0; font-family: var(--sans); font-size: 0.8rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--encre-2); } .assistant-propositions .assistant-mention { margin: 6px 20px 0; border-bottom: none; padding-bottom: 0; } .assistant-propositions .assistant-questions { border-top: none; padding-top: 8px; } .question-action { border-left: 3px solid var(--ocre); font-weight: 500; } .question-action:hover { background: var(--ocre-clair); border-color: var(--trait); border-left-color: var(--ocre); } .message-action { border-left: 4px solid var(--ocre); } .tableau-action { margin: 8px 0 4px; background: var(--surface); } .tableau-action th, .tableau-action td { padding: 6px 10px; font-size: 0.92rem; } .message .brouillon { margin-top: 8px; } .message .sourcing { border-top: none; padding-top: 4px; } /* ---------- L'arrivée d'un écran ---------- Une seule chose animée, courte, et rejouée à chaque navigation puisque app.js réécrit #ecran. Rien d'autre ne bouge dans la page. PIÈGE DE CAPTURE, payé le 23/09/2026. Pendant ces 420 ms, TOUT #ecran est translucide et se compose sur la pierre du fond : une capture prise au milieu rend des photos d'intérieur délavées, comme voilées de beige — et la mesure le confirme, le même alpha (0,57) sur les photos, sur les surfaces blanches et sur le texte. Ce n'est pas un filtre, pas une conversion d'image, pas un fond : c'est l'animation, prise trop tôt. Pour capturer : lancer le navigateur avec --force-prefers-reduced-motion (la règle plus bas coupe alors l'animation), ou lui donner de quoi terminer (--virtual-time-budget=8000). */ @keyframes pose { from { opacity: 0; transform: translateY(7px); } to { opacity: 1; transform: none; } } /* Un écran ne rend qu'un seul enfant, div.ecran : les cinq délais qui suivaient étaient du code mort. Une seule pose, celle de la page. */ #ecran > * { animation: pose 420ms cubic-bezier(0.16, 0.7, 0.24, 1) backwards; } .carte:hover { box-shadow: var(--ombre-2); } .question:hover { background: #F7F5F1; border-color: var(--olivier); } .decision-conforme:hover { background: #33422F; border-color: #33422F; } /* ---------- En-tête : la composition de l'accueil ---------- */ .vues { display: inline-flex; align-items: center; gap: 8px; } .vues-mot { color: var(--encre-2); font-size: 0.9rem; white-space: nowrap; } .bouton-icone { padding: 6px 10px; font-size: 1.05rem; line-height: 1.3; text-decoration: none; } .bouton-icone:hover { text-decoration: none; background: var(--pierre); } .bouton-icone.actif { background: var(--olivier); border-color: var(--olivier); color: #fff; } /* ---------- Accueil : cinq chiffres, dont un qui parle en euros ---------- */ .chiffres-cinq { grid-template-columns: repeat(5, 1fr); } .chiffre-expose dd { color: var(--rouge-profond); } .chapeau-marge { color: var(--ocre-texte); } /* ---------- Accueil : « À traiter », chaque entrée dit sa règle ---------- */ .a-traiter-item { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: stretch; } .a-traiter-item > a { display: grid; grid-template-columns: 148px minmax(0, 1fr); gap: 14px; padding: 12px 16px; align-items: baseline; } .a-traiter-item a::before { content: none; } .a-traiter-quand { font-size: 0.78rem; font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase; padding-left: 12px; border-left: 3px solid var(--trait); color: var(--encre-2); white-space: nowrap; } .gravite-jour .a-traiter-quand { border-left-color: var(--rouge-profond); color: var(--rouge-profond); } .gravite-semaine .a-traiter-quand { border-left-color: var(--ocre); color: var(--ocre-texte); } .gravite-surveiller .a-traiter-quand { border-left-color: var(--trait); } .a-traiter-corps { display: grid; gap: 2px; min-width: 0; } .a-traiter-regle { display: flex; align-items: center; gap: 8px; padding: 12px 16px 12px 20px; border-left: 1px solid var(--trait); color: var(--encre-2); font-size: 0.9rem; text-align: right; max-width: 300px; } .a-traiter-regle-mot { font-size: 0.7rem; font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase; color: var(--encre-2); white-space: nowrap; } .a-traiter-reglage { flex: none; width: 26px; height: 26px; display: grid; place-items: center; border: 1px solid var(--trait-doux); border-radius: 0; color: var(--encre-2); text-decoration: none; } .a-traiter-reglage:hover { background: var(--olivier-clair); border-color: var(--olivier); color: var(--olivier); text-decoration: none; } /* ---------- Une ligne qui tombe dans la marge, pas au-delà de la butée ---------- */ .risque-marge { color: var(--ocre-texte); border-color: var(--ocre); font-weight: 500; } .frise-fin-marge { color: var(--ocre-texte); } /* ---------- Légende de la frise : ce que personne ne survole en visio ---------- */ .frise-legende-liste { display: flex; flex-wrap: wrap; gap: 8px 22px; align-items: center; list-style: none; margin: 10px 0 0; padding: 12px 0 0 var(--largeur-legende); border-top: 1px solid var(--trait); color: var(--encre-2); font-size: 0.9rem; } .frise-legende-liste li { display: inline-flex; align-items: center; gap: 8px; } .frise-legende-liste i { display: inline-block; width: 26px; height: 12px; flex: none; border-radius: 0; position: static; } .frise-legende-titre { font-weight: 600; color: var(--encre); } /* ---------- Écran Réglages ---------- */ .reglages { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 14px; } .reglage { background: var(--surface); box-shadow: var(--ombre-1); border-left: 3px solid var(--trait-doux); padding: 16px 18px; display: grid; gap: 8px; align-content: start; } .reglage-vif { border-left-color: var(--olivier); } .reglage-modifie { border-left-color: var(--ocre); background: var(--ocre-clair); } .reglage-tete { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; } .reglage-nom { font-weight: 600; } .reglage-etat { font-size: 0.78rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--encre-2); white-space: nowrap; } .reglage-vif .reglage-etat { color: var(--olivier); } .reglage-aide { margin: 0; color: var(--encre-2); font-size: 0.92rem; } .reglage-pas { display: flex; align-items: center; gap: 12px; } .pas { width: 34px; height: 34px; flex: none; font-size: 1.15rem; line-height: 1; background: var(--surface); border: 1px solid var(--encre); border-radius: 0; cursor: pointer; } .pas:hover { background: var(--olivier); border-color: var(--olivier); color: #fff; } .reglage-valeur { font-family: var(--serif); font-size: 1.35rem; } .reglage-valeur-fixe { margin: 0; color: var(--encre); } .reglage-chemin { margin: 0; font-family: ui-monospace, 'Cascadia Mono', Consolas, monospace; font-size: 0.82rem; color: var(--encre-2); } .reglages-consequence { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; background: var(--ocre-clair); border-left: 4px solid var(--ocre); box-shadow: var(--ombre-1); padding: 12px 16px; margin: 14px 0 0; } .bloc-colonnes { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 28px; } .liste-reglage { margin: 0 0 12px; padding: 14px 20px 15px 40px; display: grid; gap: 6px; background: var(--surface); box-shadow: var(--ombre-1); } .liste-reglage-hors { list-style: none; padding-left: 20px; } .souverainete { max-width: 74ch; margin: 0; background: var(--surface); box-shadow: var(--ombre-1); padding: 18px 24px 20px; } .emporter { width: 100%; max-width: 620px; font-family: ui-monospace, 'Cascadia Mono', Consolas, monospace; font-size: 0.85rem; padding: 12px 14px; border: 1px solid var(--trait-doux); border-radius: 0; background: var(--pierre); color: var(--encre); resize: vertical; } /* ---------- L'objet visé par une entrée d'« À traiter » ---------- */ .vise { box-shadow: inset 0 0 0 2px var(--olivier); transition: box-shadow 1.6s ease-out; } /* ---------- Mouvement réduit ---------- */ @media (prefers-reduced-motion: reduce) { /* Le mouvement, c'est aussi les 160 ms de --geste et la frise : qui demande moins de mouvement n'en veut nulle part. */ *, *::before, *::after { transition-duration: 1ms !important; animation-duration: 1ms !important; } #ecran > * { animation: none; } .onglets a::after { transition: none; } .frise-barre, .frise-fin { transition: none !important; } .frise-barre { transform: translateY(-50%) scaleX(1); } .frise-fin { opacity: 1; } .app { transition: none; } .tete .tete-rappel { transition: none; } } /* ---------- Écrans de fiche sur grand écran ---------- La fiche garde sa mesure de lecture ; le journal passe à côté d'elle au lieu de s'empiler dessous et de laisser la moitié droite vide. */ @media (min-width: 1500px) { .fiche { max-width: none; display: grid; grid-template-columns: minmax(0, 980px) minmax(320px, 400px); column-gap: 56px; align-content: start; } .fiche > * { grid-column: 1; } .fiche-entete { grid-column: 1 / -1; } .fiche .journal { grid-column: 2; grid-row: 2 / span 30; margin-top: 0; align-self: start; } .fiche .journal-liste li { grid-template-columns: 1fr; gap: 2px; padding: 13px 18px; } .fiche .journal-date { font-size: 0.9rem; } .fiche .journal-par { text-align: left; font-size: 0.9rem; } } /* ---------- Derniers réglages ---------- */ .selecteur-nav a, .retour { color: var(--olivier); font-size: 0.95rem; } .fiche-entete { margin-bottom: 22px; } .journal h3 { font-size: 1.3rem; margin-bottom: 12px; } .journal { margin-top: 40px; } .note { font-size: 0.92rem; line-height: 1.5; } .frise-lecture { margin-top: 14px; } .chiffres-liste + .note, .a-traiter + .note { margin-top: 14px; } .titre-bloc + .table-large, .titre-bloc + table.donnees { margin-top: 2px; } /* ---------- Largeurs ---------- Le rail (--marge / --mesure) fait l'essentiel du travail : il suffit de le resserrer. Aucune règle ne redéfinit le padding de
, sinon l'en-tête et la page cesseraient de partager leur bord gauche. */ /* Très grand écran : la mesure s'élargit un peu, l'air augmente plus vite que le texte, et la page reste une page — pas un tableur étiré. */ @media (min-width: 1900px) { :root { --mesure: 1680px; --marge: 64px; --largeur-legende: 280px; } main { padding-top: 56px; } } @media (max-width: 1300px) { :root { --largeur-legende: 220px; } /* La date projetée s'écrit à droite de la barre : il lui faut sa marge. */ .frise { padding-right: 92px; } main { padding-top: 34px; padding-bottom: 88px; } .app.assistant-ouvert { grid-template-columns: minmax(0, 1fr) 400px; } .bloc { margin-top: 44px; } .marche-grille { grid-template-columns: 1fr; } } @media (max-width: 1100px) { .chiffres-liste { grid-template-columns: repeat(2, 1fr); } .chiffres-liste > div:nth-child(2n) { border-right: none; } .chiffres-liste > div:nth-child(-n+2) { border-bottom: 1px solid var(--trait); } /* Cinq chiffres sur deux colonnes : le cinquième restait seul, une demi-rangée vide à sa droite et le filet du rang au-dessus qui s'arrêtait en l'air. Il prend le rang entier. */ .chiffres-cinq > div:nth-child(3), .chiffres-cinq > div:nth-child(4) { border-bottom: 1px solid var(--trait); } .chiffres-cinq > div:nth-child(5) { grid-column: 1 / -1; } .statuts { grid-template-columns: 1fr; } .statuts-sequence { grid-template-columns: repeat(3, 1fr); } .statuts-accolades { display: none; } .fiche-colonnes { grid-template-columns: 1fr; } .graphe { grid-template-columns: 1fr; } .graphe-liens { display: none; } .cartes { grid-template-columns: 1fr; } .fiche-boutons { grid-template-columns: 1fr; } } /* ===================================================================== Budget vertical de l'accueil L'écran d'accueil doit tenir sa promesse : les cinq chiffres, la frise et les premières tâches au-dessus de la ligne de flottaison, sur un portable de réunion à 1440 × 900. Ces règles resserrent ce qui coûtait de la hauteur sans rien apporter à la lecture. ===================================================================== */ main { padding-top: 22px; } .ecran-entete { margin-bottom: 14px; } .ecran-campagne .titre-ecran { font-size: 2.05rem; } .ecran-campagne .chapeau { max-width: 92ch; margin-top: 6px; } .chiffres-liste dd { font-size: 1.72rem; margin: 8px 0 5px; } .chiffres-liste > div { padding-top: 14px; padding-bottom: 14px; } .chiffres-cinq small { font-size: 0.86rem; } .frise-piste { min-height: 52px; } .frise-bloc { margin-bottom: 18px; } .frise-legende-liste { margin-top: 8px; padding-top: 9px; } .frise-lecture { margin-top: 8px; } /* Une entrée d'« À traiter » : deux lignes, pas quatre. */ .a-traiter-item > a { padding-top: 10px; padding-bottom: 10px; } .a-traiter-regle { padding-top: 10px; padding-bottom: 10px; } /* L'accueil respire moins entre ses blocs : 80 px de séparation valaient une tâche visible de moins. Les autres écrans gardent leur souffle. */ .ecran-campagne .bloc { margin-top: 26px; padding-top: 17px; } .ecran-campagne .titre-bloc { font-size: 1.3rem; margin-bottom: 12px; } .frise-axe { height: 50px; } .frise-piste-axe::before, .frise-piste-axe::after { top: 42px; } .frise-mois { top: 26px; } .frise-legende { padding-top: 8px; padding-bottom: 8px; } .frise-piste { min-height: 46px; } .frise-lecture { font-size: 0.88rem; } /* Le détail d'une tâche se plaçait en colonne 2 du temps où l'entrée était une grille à deux colonnes. Il empile désormais sous son titre. */ .a-traiter-corps > .a-traiter-titre, .a-traiter-corps > .a-traiter-detail { grid-column: 1; margin-top: 0; } .a-traiter-item > a { grid-template-columns: 132px minmax(0, 1fr); gap: 16px; } .a-traiter-regle { width: 250px; max-width: 250px; text-align: left; align-items: flex-start; gap: 10px; padding-left: 18px; } .a-traiter-regle > span:nth-child(2) { flex: 1; min-width: 0; } .a-traiter-regle-mot { padding-top: 2px; } /* L'engrenage, dessiné et non typographié : il rend pareil partout. */ .engrenage { width: 16px; height: 16px; display: block; fill: currentColor; } .bouton-icone { display: inline-grid; place-items: center; padding: 8px 10px; } .bouton-icone .engrenage { width: 17px; height: 17px; } .a-traiter-reglage .engrenage { width: 14px; height: 14px; } /* Le nom du paramètre passe en premier et occupe toute la largeur ; l'état se pose en dessous, comme une étiquette. Sur une carte de 300 px, les mettre côte à côte coupait le nom lettre par lettre. */ .reglage-tete { display: block; } .reglage-nom { display: block; } .reglage-etat { display: inline-block; margin-top: 4px; padding: 1px 8px; border: 1px solid var(--trait-doux); border-radius: 0; font-size: 0.72rem; letter-spacing: 0.07em; } .reglage-vif .reglage-etat { border-color: var(--olivier); } .reglage-modifie .reglage-etat { border-color: var(--ocre); color: var(--ocre-texte); } /* ===================================================================== L'en-tête (5 septembre 2026) Un cartouche de journal posé sur le rail gauche, puis un rail d'onglets qui reste seul collé en haut quand la page défile. La règle du bloc : aucune boîte. Le sélecteur de propriété est un titre qui se déroule, les langues sont deux mots, les compteurs d'onglets sont des chiffres en exposant, la mention de démonstration est une ligne grise au lieu d'une barre noire. Un seul accent : le bouton « Demander », olivier plein — c'est la seule chose de l'en-tête qui appelle le clic. ===================================================================== */ /* La colonne principale est un conteneur : l'en-tête se resserre quand l'assistant s'ouvre, pas seulement quand la fenêtre rétrécit. */ .app > .principal { container-type: inline-size; } /* Le
ne dessine rien lui-même : ses deux blocs sont posés dans la colonne, sinon le rail d'onglets collerait au bas du
plutôt qu'au haut de la fenêtre. Essai abandonné le 5 septembre 2026 : rendre le
entier collant et replier le cartouche. Le cartouche est dans le flux — le replier raccourcit la page de 85 px, et tout le contenu saute vers le haut au premier cran de molette. Un en-tête qui se raccourcit ne doit jamais changer de hauteur DANS le flux ; il doit laisser le cartouche s'en aller de lui-même. */ .tete { display: contents; } /* ---- Morceaux communs ---- */ .tete .tete-mention { margin: 0; min-width: 0; font-size: 0.74rem; color: var(--encre-2); letter-spacing: 0.012em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .tete .tete-marque { font-size: 0.68rem; font-weight: 600; letter-spacing: 0.22em; text-transform: uppercase; color: var(--encre); white-space: nowrap; } .tete .langues { display: flex; gap: 16px; border: 0; } .tete .langues a { position: relative; padding: 2px 0; border: 0; line-height: 1.4; font-size: 0.7rem; font-weight: 600; letter-spacing: 0.16em; color: var(--encre-2); transition: color var(--geste); } .tete .langues a::after { content: ''; position: absolute; left: 0; right: 0; bottom: -1px; border-bottom: 1px solid currentColor; transform: scaleX(0); transform-origin: left; transition: transform var(--geste); } .tete .langues a:hover, .tete .langues a.actif, .tete .langues a.actif:hover { background: none; color: var(--encre); text-decoration: none; } .tete .langues a.actif::after { transform: scaleX(1); } .tete .fil { margin: 0; display: block; font-size: inherit; } .tete #choix-propriete { appearance: none; -webkit-appearance: none; font-family: var(--serif); font-weight: 430; letter-spacing: -0.02em; color: var(--encre); border: 0; border-bottom: 1px solid transparent; padding: 0 30px 3px 0; margin: 0; line-height: 1.12; cursor: pointer; max-width: 100%; transition: border-color var(--geste); } .tete #choix-propriete:hover { border-bottom-color: var(--trait); background-color: transparent; } /* Sur un écran de bible, le cartouche ne propose plus de choisir une propriété : il nomme la maison que l'écran montre. Même dessin que le sélecteur, sans le chevron ni le geste. */ .tete .tete-maison { display: inline-block; font-family: var(--serif); font-weight: 430; letter-spacing: -0.02em; color: var(--encre); line-height: 1.12; max-width: 100%; } .tete .tete-intitule { margin: 0; font-family: var(--serif); font-style: italic; font-weight: 420; color: var(--encre-2); letter-spacing: 0.002em; line-height: 1.3; } .tete .fil-mention { font-family: var(--sans); font-style: normal; font-size: 0.64rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--encre-2); margin-left: 12px; padding-left: 12px; border-left: 1px solid var(--trait-fin); } .tete #compte-a-rebours { color: var(--encre-2); white-space: nowrap; } .tete #compte-a-rebours b { font-family: var(--serif); font-weight: 400; color: var(--encre); letter-spacing: -0.02em; margin: 0; font-variant-numeric: tabular-nums; } .tete .echeance-texte { display: block; font-size: 0.66rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; } .tete .onglets { display: flex; gap: 30px; margin: 0; flex-wrap: nowrap; } .tete .onglets a { padding: 15px 0 14px; font-size: 0.93rem; letter-spacing: 0.006em; color: var(--encre-2); } .tete .onglets a::after { left: 0; right: 0; bottom: 0; border-bottom-width: 1.5px; } .tete .onglets a:hover::after { transform: scaleX(0.34); } .tete .onglets a.actif { color: var(--encre); font-weight: 600; } .tete .onglets .pastille { display: inline; min-width: 0; padding: 0; margin-left: 5px; background: none; color: var(--ocre-texte); font-family: var(--serif); font-size: 0.88rem; font-weight: 500; line-height: 1; vertical-align: 0.45em; letter-spacing: 0; } .tete .onglets a.actif .pastille { font-weight: 600; } .tete .tete-outils { display: flex; align-items: center; gap: 22px; flex: none; } .tete .vues { gap: 10px; } .tete .vues-mot { font-size: 0.66rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--encre-2); } .tete #choix-vue { appearance: none; -webkit-appearance: none; border: 0; border-bottom: 1px solid var(--trait-fin); border-radius: 0; padding: 3px 20px 3px 0; font-size: 0.9rem; color: var(--encre); cursor: pointer; transition: border-color var(--geste); } .tete #choix-vue:hover { border-bottom-color: var(--encre); } .tete .bouton-icone { border: 0; padding: 6px; color: var(--encre-2); background: transparent; } .tete .bouton-icone:hover { background: transparent; color: var(--encre); } .tete .bouton-icone.actif { background: transparent; color: var(--olivier); } .tete #bouton-assistant { background: var(--olivier); border: 1px solid var(--olivier); color: #fff; padding: 9px 18px; line-height: 1.2; font-size: 0.7rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; } .tete #bouton-assistant:hover { background: #33422F; border-color: #33422F; color: #fff; } .tete #bouton-assistant[aria-expanded="true"] { background: var(--encre); border-color: var(--encre); color: #fff; } /* ---- Les menus déroulants de l'en-tête ---- Un