qui les porte n'est pas du texte
qui se lit : il ne prend pas la largeur de lecture. */
p:has(> label), p:has(> select), p:has(> input) { max-width: none; }
p:has(> label) + p:has(> label) { margin-top: 16px; }
small { display: block; margin-top: 5px; max-width: 62ch; }
label + small, label > small { font-weight: 400; }
/* T-S2 · « input:not([type]) » compte, et il compte beaucoup : les gabarits
du registre et de l'ouverture ecrivent « » sans dire le
type. Vises par le seul « input[type=text] », ces champs-la restaient nus. */
input:not([type]), input[type=text], input[type=email], input[type=password],
input[type=number], input[type=date], input[type=search], select, textarea {
font: inherit;
font-size: 15px;
color: var(--encre);
background: var(--surface);
border: 1px solid var(--trait-fort);
border-radius: 4px;
padding: 8px 10px;
margin-top: 5px;
max-width: 100%;
min-width: 260px;
}
input[type=number], input[type=date] {
font-family: var(--mono);
font-variant-numeric: tabular-nums;
min-width: 0;
width: 190px;
}
textarea { min-width: 100%; min-height: 90px; line-height: 1.5; }
input:focus, select:focus, textarea:focus {
outline: 2px solid var(--vert);
outline-offset: 1px;
border-color: var(--vert);
}
input[type=checkbox], input[type=radio] {
accent-color: var(--vert);
width: 15px; height: 15px;
margin: 0 6px 0 0;
vertical-align: -2px;
}
label.case { font-weight: 400; color: var(--encre-2); display: flex;
align-items: baseline; gap: 2px; }
/* ---- Les boutons ----
Un seul accent : le vert dit ce qui engage. */
button, .bouton {
display: inline-flex;
align-items: center;
gap: 8px;
background: var(--vert);
color: var(--surface);
border: 1px solid var(--vert);
border-radius: 4px;
padding: 9px 17px;
font: inherit;
font-size: 14px;
font-weight: 600;
text-decoration: none;
cursor: pointer;
}
button:hover, .bouton:hover { background: var(--mz-vert-fonce); border-color: var(--mz-vert-fonce); }
button.creux, .bouton.creux {
background: transparent;
color: var(--vert);
border-color: var(--trait-fort);
}
button.creux:hover, .bouton.creux:hover {
background: var(--vert-pale);
border-color: var(--vert);
}
/* Deux gestes cote a cote, jamais deux phrases empilees. */
p:has(> .bouton) { display: flex; flex-wrap: wrap; gap: 10px; max-width: none; }
/* ---- Les tableaux ----
Tout ce qui deborde defile dans son propre cadre. La page ne defile
jamais de cote. */
.cadre-table {
overflow-x: auto;
background: var(--surface);
border: 1px solid var(--trait);
border-radius: 6px;
max-width: 100%;
}
table {
border-collapse: collapse;
width: 100%;
font-size: 14px;
background: var(--surface);
}
thead th {
font-family: var(--mono);
font-size: 10px;
letter-spacing: .1em;
text-transform: uppercase;
font-weight: 500;
color: var(--encre-3);
text-align: left;
background: var(--surface-2);
padding: 9px 12px;
border-bottom: 1px solid var(--trait);
white-space: nowrap;
}
tbody td {
padding: 10px 12px;
border-top: 1px solid var(--trait);
color: var(--encre-2);
vertical-align: baseline;
}
tbody tr:first-child td { border-top: 0; }
tbody td:nth-child(2) { color: var(--encre); font-weight: 500; }
tbody td em { font-style: normal; color: var(--encre-3); font-size: 13px; }
/* ---- La ligne de document ----
Son nom a gauche, son etat en Plex Mono a droite, un pointille entre. */
.docs { display: flex; flex-direction: column; }
.doc {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 12px;
padding: 8px 0;
border-top: 1px dotted var(--trait-fort);
font-size: 14px;
}
.doc:first-child { border-top: 0; padding-top: 0; }
.doc .etat {
font-family: var(--mono);
font-size: 11px;
color: var(--encre-2);
white-space: nowrap;
font-variant-numeric: tabular-nums;
}
/* ---- Le chapeau d'un ecran ----
Le fil d'Ariane, puis le titre, puis ce que l'ecran dit de lui-meme. */
.chapeau { display: flex; flex-direction: column; gap: 8px; }
/* T-661 · le chemin se lit comme une adresse : sans, minuscules, des barres
obliques. Plus de capitales espacées en machine à écrire. */
.ariane {
font-family: var(--sans);
font-size: 12.5px;
color: var(--encre-3);
}
.ariane a { color: var(--encre-3); text-decoration: none; }
.ariane a:hover { color: var(--vert); text-decoration: underline; }
/* T-456 · le même chemin partout, « › » entre les mots, l'écran en dernier. */
.ariane .sep { margin: 0 5px; color: var(--trait-fort); }
.ariane .ici { color: var(--encre-2); font-weight: 500; }
.chapeau-mission .miettes .ariane { display: inline; font: inherit; letter-spacing: inherit; text-transform: inherit; }
/* ---- La porte ----
Ni barre, ni nom, ni menu : personne n'y est connecte. */
.porte {
background: var(--surface);
border: 1px solid var(--trait);
border-radius: 8px;
padding: 30px 30px 26px;
box-shadow: var(--ombre);
display: flex;
flex-direction: column;
gap: 18px;
}
.porte form { gap: 16px; align-self: stretch; align-items: stretch; }
.porte label { width: 100%; }
.porte input { width: 100%; min-width: 0; }
.porte button { align-self: stretch; justify-content: center; }
.porte h1 { font-size: 28px; }
/* Rien ne brille, rien ne flotte : pas d'animation, sauf ce qui aide a
comprendre qu'une chose vient de changer. */
@media (prefers-reduced-motion: no-preference) {
a, button, .bouton { transition: color .12s ease, background .12s ease,
border-color .12s ease; }
}
/* ============================================================
T-S3 · le dessin, et non plus l'habillage
============================================================
Ce que T-S2 laissait : huit sections identiques, toutes encadrees, toutes
du meme poids, empilees. CHARTE-VISUELLE.md dit le contraire en une phrase :
« Pas de carte pour tout. Une bordure dit objet separe. Si tout en porte
une, plus rien ne ressort. »
Trois gestes, et ils suffisent :
1. le chapeau d'ecran porte l'identite et les gestes sur une seule ligne
2. les paires nom/valeur cessent d'etre des tableaux : c'est un releve
3. la hierarchie se fait par le vide et le filet, pas par la boite
============================================================ */
/* ---- Le chapeau ----
Ariane, titre, identite en mono, gestes a droite. Sur une ligne tant que
la place le permet. */
.chapeau {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
align-items: end;
gap: 6px 24px;
padding-bottom: 20px;
border-bottom: 1px solid var(--trait);
}
.chapeau .ariane { grid-column: 1 / -1; }
.chapeau h1 { grid-column: 1; }
.chapeau .gestes { grid-column: 2; grid-row: 2 / span 2; align-self: center; }
.chapeau .identite {
grid-column: 1;
font-family: var(--mono);
font-size: 12px;
color: var(--encre-2);
font-variant-numeric: tabular-nums;
display: flex;
flex-wrap: wrap;
gap: 4px 14px;
margin-top: 2px;
max-width: none;
}
.chapeau .identite b { font-weight: 500; color: var(--encre); }
.gestes { display: flex; flex-wrap: wrap; gap: 8px; }
@media (max-width: 700px) {
.chapeau { grid-template-columns: 1fr; }
.chapeau h1, .chapeau .identite, .chapeau .gestes {
grid-column: 1; grid-row: auto; }
}
/* ---- La section ----
Un titre discret sur un filet, et le contenu dessous. Pas de boite : la
boite est reservee a ce qui doit vraiment se detacher. */
.section { display: flex; flex-direction: column; gap: 10px; }
.section > h2, h2.titre-section {
font-family: var(--mono);
font-size: 10px;
font-weight: 500;
letter-spacing: .12em;
text-transform: uppercase;
color: var(--encre-3);
margin: 0;
padding-bottom: 7px;
border-bottom: 1px solid var(--trait);
}
/* Le rythme : large entre les sections, serre a l'interieur. */
.page > .section + .section { margin-top: 18px; }
/* ---- Le releve ----
Ce qui etait un tableau a deux colonnes. Le libelle a gauche, la valeur a
droite, un filet entre les lignes et rien autour. */
.releve { display: flex; flex-direction: column; }
.releve .ligne {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
gap: 8px 18px;
align-items: baseline;
padding: 9px 2px;
border-top: 1px solid var(--trait);
font-size: 14px;
}
.releve .ligne:first-child { border-top: 0; }
.releve .quoi { color: var(--encre-2); }
.releve .valeur { color: var(--encre); font-weight: 500; }
.releve .valeur.chiffre { font-weight: 500; }
/* Une valeur absente ne se dit pas en phrase, quinze fois de suite. */
.releve .vide {
font-family: var(--mono);
font-size: 11px;
letter-spacing: .06em;
text-transform: uppercase;
color: var(--encre-3);
font-weight: 400;
}
/* Deux colonnes pour les releves, et **seulement pour eux**.
CHARTE-VISUELLE.md dit « une colonne, jamais deux : le travail descend dans
le temps ». Une fiche de reference n'est pas du travail qui descend, c'est
un document qu'on consulte : huit blocs courts empiles sur deux metres de
haut se lisent moins bien que deux colonnes. Le fil, lui, reste sur une
seule colonne, et cette regle ne le touche pas. */
.colonnes {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(330px, 1fr));
gap: 18px 36px;
align-items: start;
}
/* ---- Le tableau, allege ----
Une vraie liste garde son tableau, mais il ne porte plus de boite : le
filet de l'entete suffit a dire ou il commence. */
.cadre-table {
border: 0;
background: none;
border-radius: 0;
}
table { background: none; }
thead th {
background: none;
border-bottom: 1px solid var(--trait-fort);
padding: 0 12px 7px;
}
thead th:first-child, tbody td:first-child { padding-left: 2px; }
thead th:last-child, tbody td:last-child { padding-right: 2px; }
tbody td { padding: 10px 12px; }
tbody tr:hover td { background: var(--surface-2); }
/* ---- Ce qui se detache vraiment ---- */
.dit { box-shadow: none; }
.encadre { box-shadow: none; }
/* ---- Les liens dans une liste ----
Onze noms de societes tous soulignes font onze traits qui hachent la
colonne. Le soulignement revient au survol, la ou il sert. */
tbody a, .releve a { text-decoration: none; font-weight: 500; color: var(--encre); }
tbody a:hover, .releve a:hover { color: var(--vert); text-decoration: underline; }
.dit a { color: inherit; text-underline-offset: 2px; }
.dit ul { padding-left: 18px; margin-top: 4px; }
.dit li { color: inherit; }
/* Une valeur « a confirmer » posee a cote d'une date est une mention, pas du
texte : elle ne prend ni le gras ni la place du chiffre. */
tbody td em, .releve em {
font-style: normal;
font-family: var(--mono);
font-size: 10px;
letter-spacing: .08em;
text-transform: uppercase;
color: var(--encre-3);
}
/* ---- La grille de champs ----
Trente-quatre champs empiles font trois metres de haut. Cote a cote, la
fiche entiere se voit d'un ecran. La colonne unique reste la regle du fil,
ou le travail descend dans le temps ; un formulaire de reference n'est pas
du travail qui descend. */
.grille-champs {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 4px 32px;
align-items: start;
width: 100%;
}
.grille-champs > p { margin: 0; padding: 10px 0; max-width: none; }
.grille-champs label { width: 100%; }
.grille-champs input, .grille-champs select { width: 100%; min-width: 0; }
/* L'etiquette posee dans une explication ne pousse pas la ligne. */
small .etiq { margin-right: 6px; vertical-align: 1px; }
/* Un formulaire long se termine par son geste, seul et visible. */
form > button[type=submit] { margin-top: 10px; }
/* Un formulaire réduit à son bouton n'est pas long : il n'a pas de champ au-dessus
dont il faudrait se détacher. Il se pose là où il est, sans marge, aligné sur ce
qui l'entoure. Trouvé sur la fiche de TISSAGE AL BARAKA, le 2026-09-13 : le bouton
« Confirmer la date de clôture » descendait de dix pixels sous la date. */
form:not(:has(input:not([type=hidden]), select, textarea, label, fieldset, p, div, ul, ol, table, h1, h2, h3, h4, details)) > button[type=submit] { margin-top: 0; }
/* ------------------------------------------------------------------
L'ecran d'une mission · T-127, d'apres la maquette Claude Design
« Mizan, l'ecran de la mission », dessinee par Othmane le 2026-09-05.
**Une conversation, pas un mur.** La question est une bulle a gauche, la
reponse une bulle verte a droite, et une seule question est posee en face
de soi. Le fil des neuf rendez-vous et la prochaine limite tiennent une
colonne collante a droite.
------------------------------------------------------------------ */
.raccourcis {
background: var(--surface); border: 1px solid var(--trait); border-radius: 7px;
padding: 4px 6px; display: flex; flex-wrap: wrap; align-items: stretch; gap: 2px;
}
.raccourcis a {
display: flex; flex-direction: column; gap: 1px; padding: 9px 14px;
border-radius: 5px; flex-grow: 1; min-width: 150px; text-decoration: none;
}
.raccourcis a:hover { background: var(--surface-2); }
.raccourcis .quoi { font-size: 14px; font-weight: 500; color: var(--encre); }
.raccourcis .combien {
font-family: var(--mono); font-size: 11px; color: var(--encre-3);
font-variant-numeric: tabular-nums;
}
.raccourcis .combien.attente { color: var(--ambre); }
.mission { display: grid; grid-template-columns: minmax(0, 1fr); gap: 28px; margin-top: 26px; }
@media (min-width: 1100px) {
.mission { grid-template-columns: minmax(0, 1fr) 344px; gap: 36px; align-items: start; }
.cote { position: sticky; top: 18px; }
}
.conversation { display: flex; flex-direction: column; gap: 20px; min-width: 0; }
.cote { display: flex; flex-direction: column; gap: 24px; }
.bandeau-etat {
border-radius: 8px; padding: 13px 16px; border: 1px solid var(--trait);
background: var(--surface-2);
}
.bandeau-etat.vert { background: var(--vert-pale); border-color: var(--vert); }
.bandeau-etat.ambre { background: var(--ambre-pale); border-color: var(--ambre); }
.bandeau-etat.brique { background: var(--brique-pale); border-color: var(--brique); }
.bandeau-etat .titre {
font-family: var(--mono); font-size: 10px; font-weight: 500; letter-spacing: .1em;
text-transform: uppercase; color: var(--encre-3);
}
.bandeau-etat .quoi { margin-top: 4px; font-family: var(--serif); font-size: 18px; line-height: 1.35; }
.bandeau-etat .quand { margin-top: 5px; font-family: var(--mono); font-size: 12px; color: var(--encre-2); }
.situe {
font-family: var(--mono); font-size: 10px; font-weight: 500; letter-spacing: .1em;
text-transform: uppercase; color: var(--encre-3);
}
.conversation > .entete h2 {
font-family: var(--serif); font-size: 25px; font-weight: 600; margin: 2px 0 0;
line-height: 1.2; letter-spacing: -.01em;
}
.echanges { display: flex; flex-direction: column; gap: 12px; }
.echanges .rangee { display: flex; justify-content: flex-start; }
.echanges .rangee.dite { justify-content: flex-end; }
.echanges .bulle {
max-width: 62ch; border-radius: 12px; padding: 11px 15px;
border: 1px solid var(--trait); background: var(--surface-2);
}
.echanges .rangee.dite .bulle { background: var(--vert-pale); border-color: var(--mz-vert-trait); }
.echanges .texte { font-size: 15px; }
.echanges .rangee.dite .texte { font-weight: 600; }
.echanges .texte.chiffre { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.echanges .meta {
display: block; margin-top: 5px; font-family: var(--mono); font-size: 11px;
color: var(--encre-3);
}
.echanges .note {
display: block; margin-top: 7px; font-size: 13px; border-radius: 6px;
padding: 6px 9px; background: var(--surface); color: var(--encre-2);
}
.echanges .note.ambre { background: var(--ambre-pale); color: var(--ambre); }
.echanges .note.brique { background: var(--brique-pale); color: var(--brique); }
.echanges .rectifier { float: right; margin-left: 12px; font-size: 12px; }
.pose {
background: var(--surface); border: 1px solid var(--trait-fort);
border-left: 3px solid var(--vert); border-radius: 8px; padding: 18px 20px;
}
.pose h3 {
font-family: var(--serif); font-size: 22px; font-weight: 500; line-height: 1.35;
margin: 6px 0 0; text-wrap: balance;
}
.pose .aide { display: block; margin-top: 8px; font-size: 14px; color: var(--encre-2); }
.pose .effet { display: block; margin-top: 6px; font-size: 13.5px; color: var(--vert); }
.pose .reponses { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; align-items: center; }
.pose input[type="text"], .pose textarea {
font-family: var(--mono); font-variant-numeric: tabular-nums; font-size: 15px;
padding: 9px 12px; border: 1px solid var(--trait-fort); border-radius: 7px;
background: var(--surface); width: 100%; max-width: 30ch;
}
.pose textarea { font-family: var(--sans); max-width: 60ch; }
.pose .reste { display: block; margin-top: 14px; font-size: 13px; color: var(--encre-3); }
.limite {
border-radius: 8px; padding: 13px 16px; border: 1px solid var(--trait);
background: var(--surface-2);
}
.limite.ambre { background: var(--ambre-pale); border-color: var(--ambre); }
.limite.brique { background: var(--brique-pale); border-color: var(--brique); }
.limite .titre {
font-family: var(--mono); font-size: 10px; font-weight: 500; letter-spacing: .1em;
text-transform: uppercase; color: var(--encre-3);
}
.limite .date {
font-family: var(--mono); font-size: 21px; font-weight: 500;
font-variant-numeric: tabular-nums; margin-top: 3px;
}
.limite .quoi { font-size: 13px; margin-top: 2px; color: var(--encre-2); }
.cote h3, .etiquette {
font-family: var(--mono); font-size: 10px; font-weight: 500; letter-spacing: .1em;
text-transform: uppercase; color: var(--encre-3); margin: 0 0 9px;
}
.fil-jalons { display: flex; flex-direction: column; gap: 1px; }
.fil-jalons .etape {
position: relative; display: block; padding: 8px 10px 8px 26px;
border-radius: 6px; text-decoration: none; color: var(--encre);
}
.fil-jalons .etape:hover { background: var(--surface-2); text-decoration: none; }
.fil-jalons .etape.ici { background: var(--vert-pale); }
.fil-jalons .etape::before {
content: ""; position: absolute; left: 8px; top: 14px; width: 9px; height: 9px;
border-radius: 50%; background: var(--surface); border: 2px solid var(--trait-fort);
}
.fil-jalons .etape + .etape::after {
content: ""; position: absolute; left: 12px; top: -6px; height: 20px;
width: 1px; background: var(--trait);
}
.fil-jalons .etape.faite::before { background: var(--trait-fort); border-color: var(--trait-fort); }
.fil-jalons .etape.ici::before { background: var(--vert); border-color: var(--vert); }
.fil-jalons .etape.tard::before { background: var(--brique); border-color: var(--brique); }
.fil-jalons .etape .titre { display: block; font-size: 14px; font-weight: 500; }
.fil-jalons .etape.hors .titre, .fil-jalons .etape.faite .titre { color: var(--encre-3); font-weight: 400; }
.fil-jalons .etape .sous {
display: block; font-family: var(--mono); font-size: 11px; color: var(--encre-3);
font-variant-numeric: tabular-nums;
}
.fil-jalons .etape.tard .sous { color: var(--brique); }
.sorties { display: flex; flex-direction: column; gap: 6px; }
.sorties .sortie {
display: flex; justify-content: space-between; gap: 10px; align-items: baseline;
padding: 8px 11px; background: var(--surface); border: 1px solid var(--trait);
border-radius: 6px; font-size: 13.5px;
}
.sorties .sortie .etat { font-family: var(--mono); font-size: 11px; color: var(--encre-3); text-align: right; }
.sorties .sortie.pret .etat { color: var(--vert); }
.sorties .sortie.attente .etat { color: var(--ambre); }
.chercher input {
width: 100%; font: inherit; font-size: 14px; padding: 8px 10px;
border: 1px solid var(--trait); border-radius: 7px; background: var(--surface);
}
/* =========================================================================
T-180 · L'ECRAN D'UNE MISSION, redessine sur la maquette validee par
Othmane le 2026-09-05, `maquette/proposition/fil-mission.html`.
Trois choses la commandent, et ce sont ses mots :
« je dois avoir ou j'en suis dans le fil en haut », « c'est trop fouillis »,
« les deadlines ne sont pas visibles ».
La frise des neuf rendez-vous colle en haut. La colonne de droite a disparu.
La question posee reste collee en bas. Une seule colonne au milieu.
========================================================================= */
.ecran-mission { display: flex; flex-direction: column; }
.ecran-mission .large { max-width: 1180px; margin: 0 auto; padding: 0 24px; width: 100%; }
.ecran-mission .l {
font-family: var(--mono); font-size: 10px; font-weight: 500;
letter-spacing: .12em; text-transform: uppercase; color: var(--encre-3);
}
/* ---- la tete, et elle colle ---- */
.ecran-mission .tete {
position: sticky; top: 0; z-index: 20; background: var(--surface);
border-bottom: 1px solid var(--trait-fort);
box-shadow: 0 10px 24px -20px rgba(21, 32, 28, .5);
}
.bande-client {
display: grid; grid-template-columns: minmax(0, 1fr) auto auto;
gap: 12px 24px; align-items: center; padding: 16px 0 14px;
}
.bande-client .qui-quoi { min-width: 0; }
.bande-client .miettes {
font-family: var(--mono); font-size: 11px; letter-spacing: .06em;
text-transform: uppercase; color: var(--encre-3);
}
.bande-client .miettes a { color: var(--encre-3); }
.bande-client h1 {
font-family: var(--serif); font-size: 26px; font-weight: 600;
line-height: 1.15; letter-spacing: -.012em; margin: 2px 0 0;
}
.sous-client {
font-family: var(--mono); font-size: 11.5px; font-variant-numeric: tabular-nums;
color: var(--encre-2); display: flex; flex-wrap: wrap; gap: 2px 12px; margin-top: 3px;
}
.sous-client b { font-weight: 500; color: var(--encre); }
.bande-client .gestes { display: flex; gap: 9px; }
/* La limite qui commande. **Elle est en haut a droite, toujours lisible** :
c'est le reproche numero trois d'Othmane. */
.limite-qui-commande {
display: grid; grid-template-columns: auto; gap: 1px; border-radius: 7px;
padding: 9px 14px; background: var(--brique-pale); color: var(--brique);
}
.limite-qui-commande.a-temps { background: var(--ambre-pale); color: var(--ambre); }
.limite-qui-commande .l { color: inherit; opacity: .8; }
.limite-qui-commande .d {
font-family: var(--mono); font-size: 20px; font-weight: 500;
font-variant-numeric: tabular-nums; line-height: 1.1;
}
.limite-qui-commande .q { font-size: 12.5px; line-height: 1.3; max-width: 26ch; }
/* ---- la frise des neuf rendez-vous ---- */
.frise {
display: flex; gap: 1px; background: var(--trait);
border-top: 1px solid var(--trait); border-bottom: 1px solid var(--trait);
}
.frise .pas {
flex: 1 1 0; min-width: 0; background: var(--surface-2); padding: 8px 10px 9px;
display: flex; flex-direction: column; gap: 2px; text-decoration: none;
}
.frise .pas:hover { background: var(--surface); opacity: 1; }
.frise .pas .haut { display: flex; align-items: center; gap: 6px; min-width: 0; }
.frise .puce {
width: 8px; height: 8px; border-radius: 50%; box-sizing: border-box;
border: 1.5px solid var(--trait-fort); background: transparent; flex: none;
}
.frise .pas.franchi { background: var(--vert-pale); }
.frise .pas.franchi .puce { background: var(--vert); border-color: var(--vert); }
.frise .pas.sans { opacity: .62; }
.frise .pas .n {
font-family: var(--mono); font-size: 9.5px; letter-spacing: .08em;
color: var(--encre-3); flex: none;
}
.frise .pas .t {
font-size: 12.5px; font-weight: 500; line-height: 1.25; color: var(--encre);
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* T-276 · **la seconde ligne, et il n'y en a pas de troisieme** : l'avancement
en points et la limite, `1/6 · 31/03/2026`. */
.frise .pas .bas {
font-family: var(--mono); font-size: 10.5px;
font-variant-numeric: tabular-nums; line-height: 1.35;
color: var(--encre-3);
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.frise .pas.retard .bas { color: var(--brique); font-weight: 500; }
.frise .pas.franchi .bas { color: var(--vert); }
.frise .pas[aria-current] {
background: var(--surface); box-shadow: inset 0 -3px 0 var(--vert);
}
.frise .pas[aria-current] .puce { border: 2.5px solid var(--vert); width: 10px; height: 10px; }
.frise .pas[aria-current] .t {
font-family: var(--serif); font-size: 15px; font-weight: 600; line-height: 1.2;
}
.frise .pas[aria-current] .bas { color: var(--ambre); font-weight: 500; }
.frise .pas[aria-current].retard .bas { color: var(--brique); }
/* T-409 · la loupe du fil, en tete de la colonne de droite. La rubrique
« Details » est partie dans le tiroir du rendez-vous. */
.chercher-fil { display: flex; align-items: center; gap: 6px; margin: 2px 0 8px; }
.chercher-fil .loupe { color: var(--encre-3); font-size: 14px; }
.chercher-fil input { min-width: 0; width: 100%; margin-top: 0; padding: 6px 10px; font-size: 13px; }
.ecran-mission .prise[hidden] { display: none; }
.rien-trouve { font-size: 13px; color: var(--encre-3); margin: 8px 0; }
.tiroir-etat { margin: 0 0 12px; }
.titre-du-fil {
font-family: var(--mono); font-size: 10.5px; letter-spacing: .06em;
text-transform: uppercase; color: var(--encre-3);
padding-bottom: 8px; border-bottom: 1px solid var(--trait);
}
/* ---- T-267 · deux colonnes : l'etape a gauche, le fil a droite ----
La page ne defile pas : chaque colonne defile chez elle, et la question ne
bouge donc jamais de place. SPEC-ECRANS.md section 3. */
/* **La page ne defile pas**, et la barre du haut compte : 100vh moins ses
52 px, sinon l'ecran depasse la fenetre d'exactement la hauteur de la barre
et la page se remet a defiler. */
.page.nue { height: calc(100dvh - 53px); display: flex; flex-direction: column; }
/* `#le-fil` est l'enveloppe que la reponse remplace : elle est entre la page
et l'ecran, et sans elle la chaine de hauteurs se casse ici. */
#le-fil { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
.ecran-mission { flex: 1 1 auto; min-height: 0; }
/* **La tete cede avant les colonnes**, et c'est le chapeau qui cede en
premier. Sur une fenetre courte, le nom de la societe se replie ; la frise
et le bandeau du rendez-vous restent entiers, et le fil garde son plancher
de 200 px. C'est la promesse du ticket : la question n'est ni recouverte ni
coupee, et on sait toujours ou l'on est. */
.ecran-mission .tete {
position: static; flex: 0 1 auto; min-height: 0;
display: flex; flex-direction: column;
}
.ecran-mission .tete > .frise, .ecran-mission .tete > .bandeau-etape { flex: none; }
/* T-276 · **`flex-basis: 0` et un minimum explicite.** Sans eux, la hauteur
minimale automatique des deux colonnes est celle de leur contenu — le fil
fait mille pixels — et c'est la tete qui cedait : le titre de la societe et
les quatre boutons disparaissaient de l'ecran. */
.deux-colonnes {
flex: 1 1 0;
min-height: 200px;
display: flex;
align-items: stretch;
}
/* T-276 · **elle ne porte que la question, et elle ne defile pas.** Othmane,
le 2026-09-07 : « il doit prendre tout l'ecran et basta, ou sinon s'adapter,
se centrer si ce n'est pas assez grand ». La colonne centre son contenu ;
c'est la carte qui cede, jamais la colonne qui defile. */
.ecran-mission .etape-en-cours {
flex: 0 0 auto;
/* La colonne garde un plancher de 360 px, le fil un de 200 px : la poignee
ne peut pas ecraser l'un des deux. */
width: var(--etape-large, 46%);
min-width: 360px;
min-height: 0;
overflow: hidden;
background: var(--papier);
padding: 20px 24px 26px;
display: flex; flex-direction: column; justify-content: center;
}
.pose-et-alerte {
display: flex; flex-direction: column;
min-height: 0;
max-height: 100%;
}
/* La carte prend la place qu'il y a, et c'est elle seule qui defile quand la
question est plus longue que l'ecran. L'alerte, jamais : elle doit rester
entiere sous les yeux. */
.pose-et-alerte > .carte-q { flex: 0 1 auto; min-height: 0; overflow-y: auto; }
.pose-et-alerte > .alerte-q { flex: none; }
.carte-q.avec-alerte { border-radius: 8px 8px 0 0; border-bottom: 0; }
.ecran-mission .fil-des-reponses {
flex: 1 1 0;
min-width: 0;
min-height: 0;
overflow-y: auto;
padding: 20px 26px 26px;
display: flex; flex-direction: column; gap: 14px;
}
/* Othmane, le 2026-09-07 : « le fil de droite ne scrolle pas ». Le fil est
une colonne flex : ses blocs se laissaient ecraser par le manque de place au
lieu de le faire deborder, et la liste des reponses, qui coupe ses coins par
un `overflow: hidden`, perdait ainsi les trois quarts de ses lignes sans
qu'aucune barre ne permette d'y aller. **Aucun bloc du fil ne se retrecit** :
c'est le fil qui defile, et lui seul. Vaut pour tous les profils. */
.ecran-mission .fil-des-reponses > * { flex: none; }
:root[data-colonne="replie"] .ecran-mission .fil-des-reponses { display: none; }
:root[data-colonne="replie"] .ecran-mission .etape-en-cours { flex: 1 1 auto; width: auto; }
.poignee {
flex: none; width: 9px; align-self: stretch; background: var(--surface-2);
border-left: 1px solid var(--trait); border-right: 1px solid var(--trait);
cursor: col-resize; position: relative;
display: flex; align-items: center; justify-content: center;
}
.poignee .prise { width: 3px; height: 40px; border-radius: 2px; background: var(--trait-fort); }
.poignee .chevron {
position: absolute; top: 12px; left: 50%; transform: translateX(-50%);
width: 20px; height: 20px; border-radius: 3px; border: 1px solid var(--trait-fort);
background: var(--surface); color: var(--encre-2);
display: grid; place-items: center; font: inherit; font-size: 12px;
line-height: 1; cursor: pointer;
}
:root[data-colonne="replie"] .poignee .chevron { transform: translateX(-50%) rotate(180deg); }
.ecran-mission .bandeau-etat .quoi {
font-family: var(--serif); font-size: 18px; line-height: 1.35; margin: 4px 0 0;
}
.ecran-mission .bandeau-etat .quand {
font-family: var(--mono); font-size: 12.5px; font-variant-numeric: tabular-nums;
opacity: .85; margin: 4px 0 0;
}
.ecran-mission .bandeau-etat .l { color: inherit; opacity: .75; }
/* T-193 · l'etat « aucune reference », bloc 8 6.2. **Ambre et non brique** :
ce n'est pas une faute, c'est un manque, et il se comble d'un geste. */
.ecran-mission .sans-reference {
background: var(--ambre-pale); color: var(--ambre); border-radius: 8px;
padding: 13px 16px; display: flex; flex-direction: column; gap: 5px;
max-width: 70ch;
}
.ecran-mission .sans-reference .l { color: inherit; opacity: .8; }
.ecran-mission .sans-reference p { margin: 0; font-size: 14px; line-height: 1.45; }
.ecran-mission .sans-reference a { font-size: 13px; color: inherit; text-decoration: underline; text-underline-offset: 3px; }
.ecran-mission .cherche input {
width: 100%; font: inherit; font-size: 14px; padding: 9px 12px;
border: 1px solid var(--trait); border-radius: 7px; background: var(--surface);
color: var(--encre);
}
.ecran-mission .trouvees { display: flex; flex-direction: column; gap: 2px; }
.ecran-mission .trouvees a { padding: 8px 0; border-bottom: 1px solid var(--trait); }
.ecran-mission .trouvees .t { display: block; font-size: 14px; color: var(--encre); }
.ecran-mission .trouvees .o {
display: block; font-family: var(--mono); font-size: 11px; color: var(--encre-3);
}
.ecran-mission .propose {
background: var(--vert-pale); color: var(--vert); border-radius: 8px; padding: 14px 16px;
}
.ecran-mission .propose .l { color: inherit; opacity: .75; }
.ecran-mission .propose .quoi {
font-family: var(--serif); font-size: 18px; line-height: 1.4; margin: 4px 0 0;
}
.ecran-mission .propose .detail { font-family: var(--mono); font-size: 12px; margin: 5px 0 0; }
.ecran-mission .propose .deux, .ecran-mission .propose form { display: flex; gap: 10px; margin-top: 12px; }
/* Rien n'est demande ici : l'ecran le dit, dit qui doit agir, et ou continuer.
Meme carte que les gestes, pour qu'elle occupe la meme place a l'oeil. */
.ecran-mission .attente {
background: var(--surface); border: 1px solid var(--trait);
border-radius: 8px; padding: 16px 18px;
}
.ecran-mission .attente .l {
font-family: var(--mono); font-size: 11px; letter-spacing: .08em;
text-transform: uppercase; color: var(--encre-2);
}
.ecran-mission .attente .quoi {
font-family: var(--serif); font-size: 18px; line-height: 1.4;
color: var(--encre); margin: 6px 0 0;
}
.ecran-mission .attente .qui { font-size: 14px; color: var(--encre-2); margin: 6px 0 0; }
.ecran-mission .attente .btn { margin-top: 14px; }
/* T-314 · d'ou le chiffre vient. Se lit sous la reponse, comme le nom de qui
l'a donnee : une valeur lue et une valeur tapee ne se ressemblent plus. */
.ecran-mission .prise .lue-dans {
grid-column: 2 / -1; font-family: var(--mono); font-size: 11px;
color: var(--encre-2); opacity: .9;
}
/* T-312 · un point passe se voit dans le fil : il n'est pas repondu, il
attend. La valeur porte son motif, jamais une reponse. */
.ecran-mission .prise.passee .v { font-weight: 500; color: var(--encre-2); }
.ecran-mission .prise.passee .q { opacity: .85; }
/* T-307 · une ligne de tableau incomplete se voit, et se retire. */
.liste-saisie tr.a-completer input { border-color: var(--brique); }
/* T-553 · la case que le serveur a refusée, cerclée de rouge, son motif dessous. */
.liste-saisie td.case-en-faute input, .liste-saisie td.case-en-faute select {
border: 2px solid var(--mz-rouge); box-shadow: 0 0 0 3px var(--mz-rouge-clair);
}
.liste-saisie tr.motif-de-la-case td {
font-size: 12.5px; line-height: 1.4; color: var(--mz-rouge);
white-space: normal; padding: 0 6px 8px; border-top: 0;
}
.liste-saisie td.retirer { white-space: nowrap; text-align: right; }
.liste-saisie .retirer-ligne {
border: 1px solid var(--trait); background: var(--surface);
color: var(--encre-2); border-radius: 4px; width: 22px; height: 22px;
line-height: 1; cursor: pointer; font-size: 14px;
}
.liste-saisie .dit-a-completer {
display: block; font-family: var(--mono); font-size: 11px;
color: var(--brique); margin-top: 3px;
}
.saisie.liste .a-completer-dit {
font-size: 13px; color: var(--brique); margin: 8px 0 0; line-height: 1.4;
}
/* T-304 · la lecture propose une valeur que la liste ne connait pas : on la
montre, et on demande de choisir plutot que d'ecrire du faux. */
.lecture-lue .hors-liste {
display: block; margin-top: 5px; font-size: 12px; color: var(--brique);
line-height: 1.4;
}
/* Le fil sans une seule reponse. */
.ecran-mission .fil-vide {
font-size: 13.5px; color: var(--encre-2); line-height: 1.5;
border: 1px dashed var(--trait); border-radius: 8px; padding: 14px 16px;
margin: 0;
}
/* Une reponse est une ligne, pas une bulle. La question tient la gauche, la
valeur la droite, et « rectifier » ferme la ligne. */
.ecran-mission .prises {
display: flex; flex-direction: column; background: var(--surface);
border: 1px solid var(--trait); border-radius: 8px; overflow: hidden;
}
.ecran-mission .prise {
display: grid; grid-template-columns: minmax(0, 1fr) 250px auto;
gap: 4px 18px; padding: 11px 16px; border-top: 1px solid var(--trait);
align-items: baseline;
}
.ecran-mission .prise:first-child { border-top: 0; }
.ecran-mission .prise .q { font-size: 14px; color: var(--encre-2); line-height: 1.4; }
.ecran-mission .prise .v {
font-size: 14.5px; font-weight: 500; color: var(--encre); word-break: break-word;
}
.ecran-mission .prise .v.chiffre { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.ecran-mission .rectifier {
font-family: var(--mono); font-size: 11px; letter-spacing: .04em;
color: var(--encre-2); white-space: nowrap;
}
.ecran-mission .prise .note { grid-column: 1 / -1; margin: 2px 0 0; font-size: 13px; }
.ecran-mission .prise.a-brique { box-shadow: inset 3px 0 0 var(--brique); }
.ecran-mission .prise.a-brique .note { color: var(--brique); }
.ecran-mission .prise.a-ambre { box-shadow: inset 3px 0 0 var(--ambre); }
.ecran-mission .prise.a-ambre .note { color: var(--ambre); }
.ecran-mission .prise.a-calme .note { color: var(--encre-3); }
/* T-182 · une piece qu'on attend encore. Elle se distingue au premier coup
d'oeil d'une reponse tenue. */
.ecran-mission .prise.a-attente { box-shadow: inset 3px 0 0 var(--trait-fort); background: var(--surface-2); }
.ecran-mission .prise.a-attente .v { color: var(--ambre); }
.ecran-mission .prise.a-attente .note { color: var(--encre-2); }
/* ---- T-233 · les regles qui regardent une reponse, depliees a cote d'elle.
Fermees par defaut : B3 en porte dix-neuf, ouvertes elles enterreraient la
reponse. Le liseré porte le niveau, comme partout ailleurs sur cet ecran. */
.ecran-mission .regles-q { grid-column: 1 / -1; margin-top: 3px; }
.ecran-mission .regles-q > summary {
list-style: none; cursor: pointer; display: inline-flex; align-items: center;
gap: 6px; font-family: var(--mono); font-size: 11.5px; letter-spacing: .03em;
color: var(--encre-3); padding: 2px 0;
}
.ecran-mission .regles-q > summary::-webkit-details-marker { display: none; }
.ecran-mission .regles-q > summary::before { content: "\25B8"; font-size: 10px; }
.ecran-mission .regles-q[open] > summary::before { content: "\25BE"; }
.ecran-mission .regles-q > summary:hover { color: var(--encre-2); }
.ecran-mission .regles-q.vide {
display: block; font-family: var(--mono); font-size: 11.5px;
letter-spacing: .03em; color: var(--encre-3); padding: 2px 0;
}
.ecran-mission .regles-q .dedans {
display: flex; flex-direction: column; gap: 9px; margin: 6px 0 4px;
padding: 11px 13px; background: var(--surface-2);
border: 1px solid var(--trait); border-radius: 6px; max-width: 78ch;
}
.ecran-mission .regles-q .r {
display: flex; flex-direction: column; gap: 2px;
padding-left: 9px; border-left: 2px solid var(--trait-fort);
}
.ecran-mission .regles-q .r.n-bloque { border-left-color: var(--brique); }
.ecran-mission .regles-q .r.n-verif { border-left-color: var(--ambre); }
.ecran-mission .regles-q .n {
font-size: 11px; letter-spacing: .03em; text-transform: uppercase;
color: var(--encre-3);
}
.ecran-mission .regles-q .r.n-bloque .n { color: var(--brique); }
.ecran-mission .regles-q .r.n-verif .n { color: var(--ambre); }
/* T-594 · l'article de loi sous la phrase d'une règle, dans le tiroir et
dans la note au client. */
.src {
display: inline-block; font-family: var(--mono); font-size: 11px;
letter-spacing: .02em; color: var(--encre-3);
}
.ecran-mission .regles-q .g {
font-size: 13px; color: var(--encre); line-height: 1.45;
}
.carte-q .regles-q { margin-top: 12px; }
.ecran-mission .calme {
background: var(--surface-2); border: 1px solid var(--trait); border-radius: 6px;
padding: 14px 16px; max-width: 65ch; display: flex; flex-direction: column; gap: 8px;
}
.ecran-mission .calme p { margin: 0; font-size: 15px; color: var(--encre-2); }
.ecran-mission .calme .suite { font-size: 13.5px; color: var(--encre-3); }
.ecran-mission .porte {
background: var(--surface-2); border: 1px solid var(--trait); border-radius: 8px;
padding: 16px 18px; display: flex; flex-direction: column; gap: 8px; max-width: 65ch;
}
.ecran-mission .porte.franchie { background: var(--vert-pale); border-color: var(--trait-fort); }
.ecran-mission .porte p { margin: 0; font-size: 15px; color: var(--encre); }
.ecran-mission .porte p.ambre { color: var(--ambre); font-size: 14px; }
.ecran-mission .porte p.brique { color: var(--brique); font-size: 14px; }
.ecran-mission .porte form { display: flex; flex-direction: column; gap: 10px; }
.ecran-mission .porte input[type=text] {
font: inherit; font-size: 14px; padding: 9px 11px; border: 1px solid var(--trait-fort);
border-radius: 6px; background: var(--surface); color: var(--encre);
}
.ecran-mission .porte .issues { display: flex; flex-wrap: wrap; gap: 8px; }
.ecran-mission .petit { font-size: 13px; color: var(--encre-3); max-width: 62ch; }
.ecran-mission .declarer {
display: flex; flex-direction: column; gap: 8px; align-items: flex-start; padding-top: 4px;
}
/* ---- la question, et elle ne bouge jamais de place ----
Le seul point de la premiere maquette qu'Othmane a garde tel quel. */
.carte-q {
background: var(--surface); border: 1px solid var(--trait-fort);
border-left: 3px solid var(--vert); border-radius: 10px; padding: 17px 20px 18px;
box-shadow: 0 1px 2px rgba(21, 32, 28, .05), 0 16px 36px -18px rgba(21, 32, 28, .4);
display: flex; flex-direction: column;
}
.carte-q h3 {
font-family: var(--serif); font-size: 21px; font-weight: 500; line-height: 1.35;
margin: 6px 0 0; text-wrap: balance;
}
.carte-q .aide { font-size: 13.5px; color: var(--encre-2); margin: 7px 0 0; max-width: 64ch; }
.carte-q .effet { font-size: 13px; color: var(--vert); margin: 4px 0 0; max-width: 64ch; }
/* T-435 · le montant jumeau, à côté du premier. */
.carte-q .saisie .jumeau { display: flex; align-items: center; gap: 8px; font-weight: 400; font-size: 13.5px; color: var(--encre-2); }
/* T-486 · **les boutons de réponse côte à côte**, à la ligne seulement quand
ils ne tiennent plus. La règle commune des formulaires les empilait. */
.carte-q .saisie { display: flex; flex-direction: row; flex-wrap: wrap; gap: 9px; margin-top: 14px; align-items: center; }
/* T-302 · le champ a la forme de ce qu'il attend : un calendrier pour une
date, un champ de nombre pour un montant, une horloge pour une heure. Le
style ne visait que le texte, et les quatre autres formes le perdaient. */
.carte-q .saisie input[type=text],
.carte-q .saisie input[type=date],
.carte-q .saisie input[type=number],
.carte-q .saisie input[type=time] {
font-family: var(--mono); font-variant-numeric: tabular-nums; font-size: 15px;
color: var(--encre); background: var(--surface); border: 1px solid var(--trait-fort);
border-radius: 6px; padding: 9px 11px; width: 230px;
}
/* T-533 · la zone de rédaction, quatre lignes, toute la largeur de la carte ;
le script de l'écran la fait grandir avec le texte. */
.carte-q .saisie textarea[data-grandit] {
font-family: var(--sans, inherit); font-size: 15px; line-height: 1.45;
color: var(--encre); background: var(--surface); border: 1px solid var(--trait-fort);
border-radius: 6px; padding: 9px 11px; width: 100%; flex: 1 1 100%;
resize: vertical; min-height: calc(4 * 1.45em + 18px); overflow: hidden;
}
.carte-q .saisie input[type=number] { text-align: right; width: 170px; }
.carte-q .saisie input[type=date],
.carte-q .saisie input[type=time] { width: 190px; }
/* L'unité se lit contre le nombre, jamais sous lui : les deux tiennent dans
un même bloc, que le retour à la ligne ne sépare pas. */
.carte-q .saisie .avec-unite {
display: inline-flex; align-items: center; gap: 7px;
}
.carte-q .saisie .unite { font-size: 13px; color: var(--encre-3); }
/* T-303 · ce qu'une question de reconfirmation fait confirmer. */
.carte-q .au-dossier {
margin: 10px 0 0; font-size: 13.5px; color: var(--encre-2);
background: var(--fond-2, transparent); border-left: 2px solid var(--trait-fort);
padding: 6px 0 6px 10px;
}
.carte-q .au-dossier b { font-family: var(--mono); font-weight: 500; }
/* T-351 · oui / non sur ce que la fiche porte, le champ replié sous « Non ». */
.carte-q .oui-ou-non { display: flex; flex-wrap: wrap; gap: 9px; align-items: flex-start; margin-top: 14px; }
.carte-q .oui-ou-non form.oui-non { margin-top: 0; }
.carte-q .corriger-la-fiche > summary { list-style: none; cursor: pointer; }
.carte-q .corriger-la-fiche > summary::-webkit-details-marker { display: none; }
/* Le repli s'efface du flux : « Non » reste à côté de « Oui », et le champ
ouvert prend la ligne d'après. */
.carte-q .corriger-la-fiche { display: contents; }
.carte-q .corriger-la-fiche > .saisie { flex-basis: 100%; margin-top: 4px; }
.carte-q .pied-q {
margin-top: 12px; padding-top: 11px; border-top: 1px solid var(--trait);
display: flex; justify-content: space-between; gap: 14px; flex-wrap: wrap;
}
.carte-q .reste { font-size: 12.5px; color: var(--encre-3); }
/* Les boutons de cet ecran. Ils suivent la charte, et rien d'autre. */
.ecran-mission .btn {
display: inline-flex; align-items: center; border: 1px solid var(--trait-fort);
border-radius: 4px; padding: 9px 16px; font: inherit; font-size: 14px;
font-weight: 600; color: var(--vert); background: transparent;
white-space: nowrap; cursor: pointer; text-decoration: none;
}
.ecran-mission .btn-plein { background: var(--vert); border-color: var(--vert); color: var(--mz-surface); }
.ecran-mission .btn-refus { color: var(--brique); }
.ecran-mission .btn-gris { color: var(--encre-2); }
@media (max-width: 1000px) {
.frise { flex-wrap: wrap; }
.frise .pas { flex: 1 1 30%; }
.bande-client { grid-template-columns: minmax(0, 1fr); }
.bande-etat .vues { margin-left: 0; }
}
/* T-40c · la bande des trois pannes qui ne sont pas des fautes du produit :
réseau coupé, session expirée, serveur lent. Elle n'existe que pendant la
panne, et elle se pose dans le formulaire qui a échoué. */
.panne {
margin: 0 0 10px;
padding: 10px 12px;
border: 1px solid var(--trait-fort);
border-radius: 8px;
background: var(--ambre-pale);
color: var(--ambre);
font-size: .92em;
}
.panne a { color: var(--ambre); font-weight: 600; }
/* T-39 · le champ de recherche de la barre. Discret : il sert cent fois par
jour, il ne doit pas peser sur un écran qu'on regarde toute la journée. */
.barre .cherche-barre { display: flex; }
.barre .cherche-barre input {
width: 190px;
padding: 5px 10px;
border: 1px solid var(--trait);
border-radius: 3px;
background: var(--surface-2);
color: var(--encre);
font: inherit;
font-size: 13px;
}
.barre .cherche-barre input::placeholder { color: var(--encre-3); }
.barre .cherche-barre input:focus {
outline: none;
border-color: var(--vert);
}
/* ---------------------------------------------------------------------------
T-217 · les deux pages d'accueil. Elles n'héritaient pas du gabarit commun
et sortaient en fond brut de navigateur : c'est pourtant le premier écran
de la journée de quarante personnes.
--------------------------------------------------------------------------- */
/* Le retard se voit sans lire une quatrième colonne. */
.retard { color: var(--brique); }
tr.a-al > td { background: var(--brique-pale); }
/* Les six compteurs du tableau de bord sont des filtres, pas des chiffres à
lire : ils se posent en boutons, et celui qui est actif se retire d'un clic. */
.compteurs {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin: 0 0 18px;
}
.compteur {
display: flex;
flex-direction: column;
gap: 2px;
min-width: 118px;
padding: 9px 13px;
border: 1px solid var(--trait);
border-radius: 8px;
background: var(--surface);
text-decoration: none;
color: var(--encre-2);
}
.compteur:hover { border-color: var(--trait-fort); text-decoration: none; }
.compteur .n {
font-family: var(--serif);
font-size: 20px;
font-weight: 600;
color: var(--encre);
line-height: 1.1;
}
.compteur .l { font-size: 12px; }
.compteur .x {
font-family: var(--mono);
font-size: 10px;
letter-spacing: .06em;
text-transform: uppercase;
color: var(--encre-3);
}
.compteur.actif {
border-color: var(--vert);
background: var(--vert-pale);
}
.compteur.actif .n, .compteur.actif .l { color: var(--vert); }
.filtre { margin: 0 0 18px; display: flex; align-items: end; gap: 10px; }
.filtre label { font-size: 13px; color: var(--encre-2); }
/* Les gestes personnels rares vivent en pied de la page qui les concerne, et
non dans une barre lue quarante fois par jour. */
.pied-liens {
margin-top: 28px;
padding-top: 14px;
border-top: 1px solid var(--trait);
font-size: 13px;
color: var(--encre-3);
}
.liste-nue { list-style: none; padding: 0; margin: 0; }
.liste-nue li { padding: 5px 0; border-bottom: 1px solid var(--trait); }
.bouton.actif {
background: var(--vert-pale);
border-color: var(--vert);
color: var(--vert);
cursor: default;
}
/* T-225 · les onglets d'une section. **Ce ne sont pas des fils d'Ariane** :
l'ariane dit où l'on est, les onglets disent ce qu'il y a à côté. Les cinq
écrans de l'administration les portent tous, identiques. */
.onglets {
display: flex;
flex-wrap: wrap;
gap: 2px;
margin: 0 0 22px;
border-bottom: 1px solid var(--trait);
}
.onglets a {
padding: 8px 13px;
font-size: 13px;
color: var(--encre-2);
text-decoration: none;
border-bottom: 2px solid transparent;
margin-bottom: -1px;
}
.onglets a:hover { color: var(--encre); text-decoration: none; }
.onglets a.ici {
color: var(--vert);
font-weight: 600;
border-bottom-color: var(--vert);
}
/* T-279 · le compte de ce qui manque sur l'onglet lui-meme. **Il ne decore
pas** : il dit ou aller sans ouvrir les six onglets, et c'est ce que le
deroule d'avant disait d'un coup d'oeil. L'ambre parce que c'est un etat,
CHARTE-VISUELLE.md. */
.onglets .compte {
display: inline-block;
min-width: 17px;
padding: 0 5px;
margin-left: 4px;
border-radius: 9px;
background: var(--ambre-pale);
color: var(--ambre);
font-family: var(--mono);
font-size: 11px;
font-weight: 600;
text-align: center;
vertical-align: 1px;
}
.onglets a.ici .compte { background: var(--vert-pale); color: var(--vert); }
/* T-243 · d'où vient cette date. La loi et le réglage du cabinet ne se
distinguaient pas, et Othmane a dû poser la question. */
.limite-qui-commande .src {
display: block;
margin-top: 4px;
font-size: 11px;
color: var(--encre-3);
}
.limite-qui-commande .src a { color: inherit; text-decoration: underline; }
/* T-251 · ce que le rendez-vous fait sortir, sous son compte. Discret : c'est
un motif, pas une liste à lire. */
.frise .prod {
display: block;
font-size: 10px;
line-height: 1.35;
color: var(--encre-3);
margin-top: 2px;
}
/* T-247 · la saisie en lignes et en colonnes. Le tableau vivait sur la fiche
avec une seule ligne libre, et le fil n'en avait aucun. */
/* T-402 · **le tableau tient dans la carte.** Othmane, le 2026-09-11 : « un
tableau en plein écran qui bug ». Chaque case héritait des 260 pixels
minimum de tout champ : sept colonnes ne tenaient jamais. Les colonnes se
partagent la carte ; seul un tableau vraiment large défile dans son cadre. */
.liste-saisie-defile { overflow-x: auto; max-width: 100%; }
table.liste-saisie { width: 100%; table-layout: auto; }
table.liste-saisie td { padding: 4px 6px; }
table.liste-saisie select { min-width: 12ch; width: 100%; box-sizing: border-box; font-size: 13px; }
table.liste-saisie input {
width: 100%; min-width: 9ch; box-sizing: border-box;
padding: 6px 9px;
border: 1px solid var(--trait);
border-radius: 6px;
font: inherit;
font-size: 13px;
}
table.liste-saisie input:focus { outline: none; border-color: var(--vert); }
form.saisie.liste .deux { display: flex; gap: 8px; margin-top: 10px; }
/* T-242 · le nombre de la cloche. Discret mais visible : sans lui on n'ouvre
jamais, et la cloche cesse d'exister. */
.barre .cloche-compte {
position: absolute;
top: -3px;
right: -5px;
min-width: 15px;
height: 15px;
padding: 0 3px;
border-radius: 8px;
background: var(--brique);
color: var(--mz-surface);
font-family: var(--mono);
font-size: 9.5px;
font-weight: 600;
display: grid;
place-items: center;
}
/* T-230 · l'alerte ancrée sur la question, qui bloque l'envoi. Elle est dans
le rectangle de la question, pas en tête de page : Othmane la voulait « au
-dessus de la question que je suis en train de remplir ». */
/* T-276 · **collee sous la question**, dans le meme bloc, jamais une fenetre
qui se pose par-dessus. Deux issues, et la valeur refusee est dans le champ. */
.alerte-q {
background: var(--brique-pale);
border: 1px solid var(--brique);
border-top: 0;
border-radius: 0 0 8px 8px;
padding: 12px 18px 13px;
display: flex; flex-direction: column; gap: 5px;
}
.alerte-q[hidden] { display: none; }
.alerte-q .l { margin: 0; font-size: 13.5px; color: var(--brique); }
.alerte-q .motifs {
display: flex; flex-direction: column; gap: 3px;
font-size: 13px; color: var(--brique);
}
.alerte-q .issues { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 3px; }
.alerte-q .issues form { display: contents; }
.alerte-q .petit { margin: 2px 0 0; font-size: 12px; color: var(--brique); opacity: .85; }
/* T-417 · **une seule forme d'alerte sous la question** : une phrase courte,
et l'explication derriere un « ? », au clic ou au survol. La saisie
refusee prend la meme forme, sans les deux boutons. */
.alerte-q .motif { display: flex; align-items: flex-start; gap: 4px; }
.alerte-q.seule { border-top: 1px solid var(--brique); border-radius: 8px; margin-top: 10px; }
.bulle { display: inline-block; position: relative; flex: none; vertical-align: middle; margin-left: 4px; }
.bulle > summary {
list-style: none; cursor: pointer; width: 17px; height: 17px; box-sizing: border-box;
border-radius: 50%; border: 1px solid currentColor; font-size: 10.5px; font-weight: 600;
line-height: 15px; text-align: center; user-select: none;
}
.bulle > summary::-webkit-details-marker { display: none; }
.bulle-texte {
display: none; position: absolute; z-index: 30; top: 22px; left: -10px;
width: max-content; max-width: 320px; background: var(--surface); color: var(--encre);
border: 1px solid var(--trait-fort); border-radius: 8px; padding: 9px 11px;
font-size: 12.5px; font-weight: 400; line-height: 1.45;
box-shadow: 0 16px 36px -18px rgba(21, 32, 28, .45);
}
.bulle[open] .bulle-texte, .bulle:hover .bulle-texte { display: block; }
/* Sous la question, le « ? » est au bout de la ligne : la bulle s'ouvre vers
la gauche, sinon la colonne la coupe. */
.alerte-q .bulle-texte { left: auto; right: -8px; }
.btn-refus-creux {
font: inherit; font-size: 12.5px; color: var(--brique);
background: var(--surface); border: 1px solid var(--brique);
border-radius: 3px; padding: 6px 13px; cursor: pointer;
}
/* T-259 · le nom de qui a répondu, sur la ligne de sa réponse. Discret : il
se lit quand on le cherche, il ne concurrence pas la valeur. */
.prise .par { font-size: 12px; color: var(--mz-encre-tenue); white-space: nowrap; }
/* T-262 · qui a touché cette valeur de la fiche, et quand. Discret : il se
lit quand on le cherche, il ne concurrence pas la valeur. */
.releve .depuis { display: block; font-size: 11.5px; color: var(--mz-encre-tenue); }
/* ---------------------------------------------------------------------------
T-265 · la matrice. SPEC-ECRANS.md section 2.
Une ligne par mission, une colonne par rendez-vous, un rond par case. Cinq
etats, et pas un sixieme. Les valeurs sont celles de la maquette, au
caractere pres : ce sont des valeurs, pas des suggestions.
--------------------------------------------------------------------------- */
.titre-section .glose {
font-family: var(--sans);
letter-spacing: 0;
text-transform: none;
font-size: 12px;
font-weight: 400;
color: var(--encre-3);
margin-left: 10px;
}
/* Les pastilles de filtre. Le nombre vient de la vue, jamais du gabarit. */
.pastilles { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; }
.pastille {
font-size: 12.5px;
color: var(--encre-2);
border: 1px solid var(--trait-fort);
background: var(--surface);
border-radius: 14px;
padding: 3px 12px;
font-variant-numeric: tabular-nums;
text-decoration: none;
}
.pastille b { font-family: var(--mono); font-weight: 600; }
/* T-310 · la rangée des personnes, sous celle des états. Même forme, teinte
plus discrète : c'est un filtre de second rang, pas un état du dossier. */
.pastilles.gens { margin-top: -4px; }
.pastilles.gens .pastille { color: var(--encre-2); }
.pastilles.gens .pastille b { color: var(--encre-3); }
.pastilles.gens .pastille.active b { color: inherit; }
.pastille:hover { border-color: var(--encre-3); text-decoration: none; }
.pastille.alerte { color: var(--brique); border-color: var(--brique); }
.pastille.active {
color: var(--vert);
border-color: var(--vert);
background: var(--vert-pale);
font-weight: 500;
}
.cadre-matrice {
overflow-x: auto;
border: 1px solid var(--trait);
border-radius: 4px;
background: var(--surface);
}
.matrice { min-width: 901px; }
.matrice .rang {
display: grid;
grid-template-columns: minmax(180px, 1.5fr) repeat(9, 50px) 52px 106px;
gap: 0 6px;
align-items: center;
padding: 9px 12px;
border-bottom: 1px solid var(--trait);
}
.matrice .rang:last-child { border-bottom: 0; }
.matrice .entete {
align-items: end;
padding: 10px 12px;
border-bottom: 1px solid var(--trait-fort);
font-family: var(--mono);
font-size: 10px;
font-weight: 500;
text-transform: uppercase;
letter-spacing: .06em;
color: var(--encre-3);
}
/* Le rendez-vous de votre pole est marque : il dit ou votre travail tombe. */
.matrice .entete .votre { color: var(--vert); font-weight: 600; }
/* Le filet de gauche : rouge quand la mission est hors delai, vert quand elle
attend le compte qui regarde, rien sinon. */
.matrice .rang.hors-delai { box-shadow: inset 3px 0 0 var(--brique); }
.matrice .rang.a-vous { box-shadow: inset 3px 0 0 var(--vert); }
.matrice .societe a { color: var(--encre); font-weight: 600; font-size: 13.5px; text-decoration: none; }
.matrice .societe a:hover { color: var(--vert); }
.matrice .societe .sous {
color: var(--encre-3);
font-size: 11.5px;
font-variant-numeric: tabular-nums;
}
.matrice .case { text-align: center; }
.matrice .avancement,
.matrice .fin {
font-family: var(--mono);
font-size: 12px;
color: var(--encre-2);
font-variant-numeric: tabular-nums;
}
.matrice .fin { text-align: right; }
.matrice .echeance.depassee { color: var(--brique); font-weight: 600; }
/* Les cinq etats, et pas un sixieme. */
.rond {
display: inline-block;
width: 13px;
height: 13px;
border-radius: 50%;
background: transparent;
border: 1px solid var(--eteint);
vertical-align: middle;
}
a.rond { cursor: pointer; }
a.rond:hover { outline: 2px solid var(--vert-pale); outline-offset: 1px; }
.rond.franchi { background: var(--mz-vert-vif); border: 0; }
.rond.en-cours { background: var(--surface); border: 2.5px solid var(--ambre); }
.rond.en-retard { background: var(--brique); border: 0; }
.rond.a-venir { background: transparent; border: 1px solid var(--eteint); }
.tiret {
display: inline-block;
width: 9px;
height: 1.5px;
background: var(--eteint);
vertical-align: middle;
}
.legende {
display: flex;
gap: 20px;
flex-wrap: wrap;
align-items: center;
margin-top: 10px;
font-size: 12px;
color: var(--encre-3);
}
.legende span { display: flex; align-items: center; gap: 6px; }
.pied-matrice {
margin-top: 14px;
padding-top: 12px;
border-top: 1px solid var(--trait);
font-size: 12.5px;
color: var(--encre-3);
}
.pied-matrice strong { color: var(--encre); font-weight: 600; }
/* ---------------------------------------------------------------------------
T-266 · le portefeuille. La sixieme colonne, le filtre et ses compteurs.
--------------------------------------------------------------------------- */
button.pastille { font-family: var(--sans); cursor: pointer; }
.pastilles .filtre-liste {
background: var(--surface);
border: 1px solid var(--trait-fort);
border-radius: 14px;
padding: 4px 13px;
font: inherit;
font-size: 12.5px;
width: 200px;
color: var(--encre);
}
.pastilles .filtre-liste:focus { outline: none; border-color: var(--vert); }
.pastilles .separateur {
width: 1px;
height: 18px;
background: var(--trait-fort);
margin: 0 4px;
}
.pastille.attente { color: var(--ambre); border-color: var(--ambre); }
/* La colonne Mission : la puce d'etat, le rendez-vous ouvert, chez qui. */
td.mission {
font-size: 12.5px;
color: var(--encre);
display: table-cell;
min-width: 200px;
}
td.mission .quoi { display: inline-block; vertical-align: top; }
td.mission .quoi small {
display: block;
font-family: var(--mono);
font-size: 11px;
color: var(--encre-3);
}
td.mission .quoi small.retard { color: var(--brique); }
td.mission .a-ouvrir { color: var(--ambre); }
.puce {
display: inline-block;
width: 9px;
height: 9px;
border-radius: 50%;
margin-right: 7px;
vertical-align: 1px;
background: transparent;
border: 1px solid var(--eteint);
}
.puce.franchi { background: var(--mz-vert-vif); border: 0; }
.puce.en-cours { background: var(--surface); border: 2px solid var(--ambre); }
.puce.en-retard { background: var(--brique); border: 0; }
td.fin { text-align: right; }
.bouton.creux.petit {
font-size: 12px;
padding: 3px 10px;
white-space: nowrap;
}
/* ---------------------------------------------------------------------------
T-267 · le chapeau, le bandeau du rendez-vous, et le panneau « Le dossier ».
--------------------------------------------------------------------------- */
.chapeau-mission {
flex: 0 1 auto; min-height: 0; overflow-y: auto;
max-width: 1240px; margin: 0 auto; width: 100%;
padding: 14px 28px 12px;
display: grid; grid-template-columns: minmax(0, 1fr) auto;
gap: 12px 24px; align-items: center;
}
.chapeau-mission .qui-quoi { min-width: 0; }
.chapeau-mission .miettes { font-family: var(--sans); font-size: 12.5px; color: var(--encre-3); }
.chapeau-mission .miettes a { color: var(--encre-3); }
.chapeau-mission h1 {
font-family: var(--serif); font-size: 25px; font-weight: 600;
line-height: 1.15; letter-spacing: -.012em; margin: 2px 0 0;
}
/* **Une seule date dans la tete**, la limite qui commande. */
.sous-client .limite { color: var(--ambre); font-weight: 500; }
.sous-client .limite.retard { color: var(--brique); font-weight: 600; }
.chapeau-mission .gestes { display: flex; gap: 9px; align-items: center; }
/* T-276 · **les quatre boutons du coin ont la meme taille.** Une icone seule
et un libelle de trois mots ne se dessinent pas pareil : c'est la hauteur qui
doit tenir, et elle se pose ici une fois. */
.chapeau-mission .gestes .btn {
height: 32px;
display: inline-flex; align-items: center; justify-content: center;
padding: 0 13px;
font-size: 12.5px;
}
.chapeau-mission .gestes .btn.icone { width: 34px; padding: 0; }
/* La frise : deux lignes par rendez-vous, jamais quatre. */
.frise .pas-et-plus { flex: 1 1 0; min-width: 0; display: flex; background: var(--surface-2); }
.frise .pas-et-plus.ici { flex-grow: 2.6; background: var(--surface); }
.frise .pas-et-plus .pas { flex: 1 1 auto; }
/* T-416 · la pastille rouge d'un rendez-vous dont un controle tombe faux, et
le message qui parait en haut a droite, quelques secondes, cliquable vers
la question. Le survol le retient ; efface, il ne se clique plus. */
.frise .pastille-rouge {
flex: none; min-width: 15px; height: 15px; padding: 0 4px; box-sizing: border-box;
border-radius: 8px; background: var(--brique); color: var(--surface);
font-family: var(--mono); font-size: 9.5px; line-height: 15px; text-align: center;
}
.toasts {
position: fixed; top: 64px; right: 20px; z-index: 60;
display: flex; flex-direction: column; gap: 8px; width: min(360px, 100vw - 40px);
}
.toast {
display: block; background: var(--surface); color: var(--encre); text-decoration: none;
border: 1px solid var(--brique); border-left: 4px solid var(--brique); border-radius: 8px;
padding: 10px 14px; font-size: 13px; line-height: 1.4;
box-shadow: 0 16px 36px -18px rgba(21, 32, 28, .5);
animation: toast-vit 8s ease forwards;
}
.toast:hover { animation-play-state: paused; }
.toast .l {
display: block; margin-bottom: 3px; font-family: var(--mono); font-size: 10px;
letter-spacing: .06em; text-transform: uppercase; color: var(--brique);
}
.toast .go { display: block; margin-top: 4px; font-size: 12px; color: var(--vert); }
@keyframes toast-vit {
0% { opacity: 0; transform: translateY(-6px); }
5% { opacity: 1; transform: none; }
88% { opacity: 1; }
100% { opacity: 0; visibility: hidden; }
}
.frise .pas-et-plus { position: relative; }
/* T-494 · **la case s'élargit au survol et au clavier**, pousse ses
voisines, montre son nom en entier et ses trois nombres. Aucune fenêtre à
part, T-425. */
.frise .pas-et-plus { transition: flex-grow .18s ease; }
.frise .pas .t-entier, .frise .pas .detail { display: none; }
.frise .pas-et-plus:hover, .frise .pas-et-plus:focus-within { flex-grow: 3.2; }
.frise .pas-et-plus:hover .pas .t, .frise .pas-et-plus:focus-within .pas .t { display: none; }
.frise .pas-et-plus:hover .pas .t-entier, .frise .pas-et-plus:focus-within .pas .t-entier {
display: inline; font-size: 12.5px; font-weight: 500; line-height: 1.25; color: var(--encre);
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.frise .pas-et-plus:hover .pas .detail, .frise .pas-et-plus:focus-within .pas .detail {
display: block; font-family: var(--mono); font-size: 10.5px; line-height: 1.35;
color: var(--encre-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.frise .pas .detail b { font-weight: 500; color: var(--encre); }
.frise .plus {
flex: none; width: 26px; border: 0; background: none; cursor: pointer;
font: inherit; font-size: 15px; color: var(--encre-3);
}
.frise .plus:hover { color: var(--vert); }
:root[data-bandeau="ouvert"] .frise .plus { color: var(--vert); }
/* Le bandeau du rendez-vous : ce qui doit sortir, les controles, les pieces,
l'historique. Une liste, un libelle a gauche, son etat a droite. */
/* **Il est replie au depart**, comme la maquette : on l'ouvre par le « + » du
rendez-vous, et il se referme par « Replier ». */
.bandeau-etape {
display: none;
border-top: 1px solid var(--trait); background: var(--papier);
padding: 10px 28px 12px; max-height: min(28vh, 260px); overflow-y: auto;
}
:root[data-bandeau="ouvert"] .bandeau-etape { display: block; }
.bandeau-etape .liste[hidden] { display: none; }
.bandeau-etape .onglets {
display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
max-width: 1240px; margin: 0 auto 10px;
}
.bandeau-etape .pastille {
display: inline-flex; align-items: baseline; gap: 7px; font-size: 12.5px;
padding: 5px 11px; border: 1px solid var(--trait-fort); border-radius: 14px;
background: var(--surface); color: var(--encre-2); font-family: var(--sans);
cursor: pointer; text-decoration: none;
}
.bandeau-etape .pastille .c { font-family: var(--mono); font-size: 10.5px; opacity: .7; }
.bandeau-etape .pastille.active {
background: var(--vert-pale); border-color: var(--vert); color: var(--vert);
}
.bandeau-etape .replier {
margin-left: auto; font: inherit; font-size: 12.5px; color: var(--encre-2);
background: none; border: 0; cursor: pointer;
}
.bandeau-etape .liste {
max-width: 1240px; margin: 0 auto; display: grid;
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
gap: 2px 24px; border-top: 1px solid var(--trait); padding-top: 8px;
}
.bandeau-etape .ligne {
display: flex; align-items: baseline; justify-content: space-between;
gap: 14px; font-size: 13px; color: var(--encre); padding: 4px 0;
border-bottom: 1px solid var(--trait); text-decoration: none;
}
/* T-377 · une liste vide le dit sans le trait d'une ligne. */
.bandeau-etape .vide { font-size: 13px; color: var(--encre-3); padding: 6px 0; margin: 0; }
.bandeau-etape .ligne .rang { font-family: var(--mono); font-size: 10.5px; color: var(--encre-3); }
.bandeau-etape .ligne .txt { flex: 1 1 auto; min-width: 0; }
.bandeau-etape .ligne .go, .bandeau-etape .ligne .e {
font-family: var(--mono); font-size: 10.5px; color: var(--encre-3); white-space: nowrap;
}
.bandeau-etape .ligne.controle.bloque { color: var(--brique); }
.bandeau-etape .ligne.controle.verif { color: var(--ambre); }
/* T-287 · **les trois panneaux glissants**, `LOT-ECRANS-EN-PLUS.md` §1.1.
Un seul composant, monté trois fois. Il vient de la droite, un voile derrière
ferme au clic, et la page ne se recharge pas. Le tiroir « Le dossier » à
trois onglets qu'ils remplacent demandait deux gestes pour arriver au
contenu. Ils vivent dans formulaire.html, jamais dans le fil. */
.voile {
position: fixed; inset: 0; z-index: 39;
background: rgba(22, 33, 30, .18);
opacity: 1;
transition: opacity .28s cubic-bezier(.32, .72, 0, 1);
}
.voile[hidden] { display: none; }
.panneau {
position: fixed; top: 0; right: 0; bottom: 0;
width: clamp(340px, 25vw, 470px);
background: var(--surface); border-left: 1px solid var(--trait-fort);
box-shadow: -24px 0 48px -32px rgba(22, 33, 30, .5); z-index: 40;
display: flex; flex-direction: column;
/* Au repos il est **hors du cadre**, pas replié : un panneau réduit à zéro
garde ses liens sous le curseur et ses champs dans l'ordre de tabulation. */
transform: translateX(101%);
transition: transform .28s cubic-bezier(.32, .72, 0, 1);
}
.panneau.ouvert { transform: translateX(0); }
.panneau[hidden] { display: none; }
.panneau header {
display: flex; align-items: center; gap: 12px;
padding: 14px 18px 12px; border-bottom: 1px solid var(--trait);
}
.panneau header h2 {
margin: 0; font-family: var(--serif); font-size: 18px; font-weight: 600;
}
.panneau .fermer {
margin-left: auto; width: 26px; height: 26px; display: grid; place-items: center;
border: 0; border-radius: 3px; background: none; color: var(--encre-2);
font: inherit; font-size: 18px; line-height: 1; cursor: pointer;
}
.panneau .fermer:hover { background: var(--surface-2); }
/* **Le corps défile seul** : la page derrière ne bouge pas d'un pixel. */
.panneau .corps {
padding: 16px 18px 28px; overflow-y: auto; flex: 1 1 auto;
display: flex; flex-direction: column; gap: 12px; align-items: flex-start;
}
.panneau .glose { margin: 0; font-size: 12.5px; color: var(--encre-3); }
.panneau .note {
border: 1px solid var(--trait-fort); border-radius: 7px; padding: 12px 14px;
display: flex; flex-direction: column; gap: 6px; align-self: stretch;
}
.panneau .note p { margin: 0; font-size: 13.5px; line-height: 1.5; color: var(--encre); }
.panneau .cherche { align-self: stretch; }
.panneau .cherche input {
width: 100%; font: inherit; font-size: 14px; padding: 9px 12px;
border: 1px solid var(--trait-fort); border-radius: 7px;
background: var(--surface); color: var(--encre);
}
.panneau .trouvees { align-self: stretch; }
/* L'historique : une journée, puis ses lignes. L'heure d'abord, parce que
c'est par elle qu'on retrouve « ce qui s'est passé juste avant ». */
.panneau .jour { align-self: stretch; }
.panneau .jour .l {
font-family: var(--mono); font-size: 10px; letter-spacing: .09em;
text-transform: uppercase; color: var(--encre-3);
padding-bottom: 5px; border-bottom: 1px solid var(--trait); margin-bottom: 6px;
}
.panneau .ligne-histo {
display: grid; grid-template-columns: 42px minmax(0, 1fr);
gap: 2px 8px; padding: 6px 0;
}
.panneau .ligne-histo .h { font-family: var(--mono); font-size: 10.5px; color: var(--encre-3); }
.panneau .ligne-histo .f { font-size: 13px; line-height: 1.45; }
.panneau .ligne-histo .f .a { color: var(--encre-2); }
.panneau .ligne-histo .q {
grid-column: 2; font-family: var(--mono); font-size: 10.5px; color: var(--encre-3);
}
/* T-264 · le compteur des absences suit son entree dans le menu du compte. */
.barre .menu-compte .tiroir a { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.barre .menu-compte .tiroir .a-trancher {
font-family: var(--mono); font-size: 11px; color: var(--ambre); white-space: nowrap;
}
.ecran-mission .situe {
margin: 0; font-family: var(--mono); font-size: 10.5px; font-weight: 500;
letter-spacing: .1em; text-transform: uppercase; color: var(--encre-3);
}
.chapeau-mission .vues { display: flex; flex-wrap: wrap; gap: 2px 14px; margin-top: 6px; font-size: 12.5px; }
.chapeau-mission .vues .c { font-family: var(--mono); font-size: 10.5px; color: var(--encre-3); }
.chapeau-mission { grid-template-columns: minmax(0, 1fr) auto auto; }
/* T-268 · le sixieme etat, et le seul ajout admis : « a valider ». Il
n'apparait que pour le responsable qui relit, et n'appelle aucun bouton. */
.rond.a-valider { background: var(--vert-pale); border: 2.5px solid var(--vert); }
/* ---------------------------------------------------------------------------
T-282 · LA FICHE NAVETTE
`maquette/proposition/fiche-navette.html`, livree le 2026-09-06 avec les
cinq autres ecrans. Les valeurs sont celles de la maquette, au caractere
pres. Quatre onglets, un seul panneau montre, et ce qui reste a reclamer en
premier : c'est ce qu'on vient y chercher.
--------------------------------------------------------------------------- */
.glose-panneau {
margin: 0 0 14px;
font-size: 13px;
color: var(--encre-3);
max-width: 78ch;
}
.groupe-reclame { margin-bottom: 22px; }
.groupe-reclame .glose-panneau { margin: 8px 0 0; font-size: 12.5px; }
/* Une ligne, pas une puce : ce qui manque a gauche, l'etat ou le geste a
droite. La liste garde son `ul`, elle reste une liste. */
.points { list-style: none; margin: 10px 0 0; padding: 0; }
.points li {
display: grid;
grid-template-columns: minmax(0, 1fr) auto auto;
gap: 6px 16px;
align-items: baseline;
padding: 10px 2px;
border-bottom: 1px solid var(--trait);
}
.points .quoi { font-size: 13.5px; color: var(--encre); }
.points .mention {
font-family: var(--mono);
font-size: 11px;
letter-spacing: .05em;
text-transform: uppercase;
color: var(--encre-3);
}
/* L'ambre est un etat, CHARTE-VISUELLE.md : un point passe attend quelqu'un. */
.points .mention.ambre { color: var(--ambre); }
.points .repondre { font-size: 12.5px; color: var(--vert); }
/* ============================================================
T-285 · la fenêtre de la cloche, et l'écran des notifications.
`LOT-ECRANS-EN-PLUS.md` §3 et §4.1.
============================================================ */
/* ---- La fenêtre sous l'icône ----
370 px, ancrée à droite. Aucun rechargement : `details` comme le menu du
compte, et le meme `name` sur les deux les rend exclusifs sans script. */
.barre .menu-cloche { position: relative; }
.barre .menu-cloche > summary {
position: relative;
width: 22px;
height: 22px;
color: var(--encre-2);
display: grid;
place-items: center;
cursor: pointer;
list-style: none;
}
.barre .menu-cloche > summary::-webkit-details-marker { display: none; }
.barre .menu-cloche > summary:hover { color: var(--vert); }
.barre .menu-cloche[open] > summary { color: var(--vert); }
.barre .menu-cloche .fenetre {
position: absolute;
top: 34px;
right: 0;
width: 370px;
background: var(--surface);
border: 1px solid var(--trait-fort);
border-radius: 6px;
/* L'ombre de la fenêtre est plus profonde que celle des menus : elle porte
du contenu qu'on lit, pas trois entrées qu'on vise. */
box-shadow: 0 18px 40px -26px rgba(22, 33, 30, .55);
z-index: 30;
/* T-511 · la liste défile dans la fenêtre, qui ne grandit pas plus que
l'écran. Le coin arrondi tient par le clip. */
max-height: calc(100vh - 70px);
overflow-y: auto;
overflow-x: hidden;
}
/* T-511 · **la barre passe devant tout dès qu'un de ses menus est ouvert.**
Othmane le 2026-09-12 : « quand je clique sur la cloche, elle est en
arrière-plan quand je suis dans le tableau de bord ». La tête collante
d'une mission et le chapeau collant partagent le même étage que la barre ;
un menu ouvert la fait monter au-dessus du message passager compris. */
.barre:has(details[name="flottant"][open]) { z-index: 70; }
.barre .menu-cloche .tete {
display: flex;
align-items: baseline;
gap: 10px;
padding: 12px 14px 10px;
border-bottom: 1px solid var(--trait);
}
.barre .menu-cloche .tete h2 {
margin: 0;
font-family: var(--serif);
font-size: 16px;
font-weight: 600;
}
.barre .menu-cloche .tete .combien {
margin-left: auto;
font-family: var(--mono);
font-size: 10.5px;
color: var(--encre-3);
}
.barre .menu-cloche .notif {
display: grid;
grid-template-columns: 8px minmax(0, 1fr);
gap: 4px 9px;
padding: 11px 14px;
border-bottom: 1px solid var(--trait);
text-decoration: none;
color: var(--encre);
}
.barre .menu-cloche .notif:hover { background: var(--surface-2); }
.barre .menu-cloche .notif .fait { font-size: 13px; line-height: 1.4; }
.barre .menu-cloche .notif .ou {
grid-column: 2;
font-family: var(--mono);
font-size: 10.5px;
color: var(--encre-3);
}
.barre .menu-cloche .rien {
margin: 0;
padding: 16px 14px;
font-size: 13px;
color: var(--encre-3);
}
.barre .menu-cloche .pied {
display: flex;
align-items: center;
gap: 10px;
padding: 9px 14px;
background: var(--papier);
}
.barre .menu-cloche .pied a { font-size: 12.5px; }
.barre .menu-cloche .pied form { margin: 0 0 0 auto; }
.barre .menu-cloche .pied button {
font: inherit;
font-size: 12.5px;
color: var(--encre-2);
background: none;
border: 0;
padding: 0;
cursor: pointer;
}
.barre .menu-cloche .pied button:hover { color: var(--vert); }
/* ---- La pastille de nature ----
Vert un fait, rouge un contrôle, ambre un retard. Une ligne lue perd la
sienne : la place reste, pour que rien ne saute d'une colonne.
**Elle ne s'appelle pas `.pastille`**, et c'est une correction du jour même :
`.pastille` est déjà la classe des quatre boutons du « + » de l'étape, des
filtres du portefeuille et de ceux du tableau de bord. Écrite en fin de
feuille, elle les avait tous réduits à un rond de 8 px transparent. Une
classe générique ajoutée en bas d'une feuille de mille neuf cents lignes
gagne partout, et personne ne le voit avant d'ouvrir l'écran. */
.pastille-nature {
width: 8px;
height: 8px;
border-radius: 50%;
margin-top: 6px;
background: transparent;
}
.pastille-nature.fait { background: var(--vert); }
.pastille-nature.controle { background: var(--brique); }
.pastille-nature.retard { background: var(--ambre); }
/* ---- L'écran, ses filtres et sa liste ---- */
.filtres-notifs {
display: flex;
align-items: center;
gap: 8px;
margin: 14px 0 12px;
}
.filtres-notifs a {
font-size: 12.5px;
padding: 5px 12px;
border-radius: 14px;
background: var(--surface-2);
color: var(--encre-2);
text-decoration: none;
}
.filtres-notifs a.ici { background: var(--vert); color: var(--mz-surface); }
.filtres-notifs a .compte { font-family: var(--mono); font-size: 11px; }
.filtres-notifs form { margin: 0 0 0 auto; }
.annuler-lu { margin: 0 0 12px; }
.cadre-notifs {
background: var(--surface);
border: 1px solid var(--trait);
border-radius: 4px;
overflow: hidden;
}
.cadre-notifs .notif {
display: grid;
grid-template-columns: 8px minmax(0, 1fr) auto;
align-items: start;
gap: 12px;
padding: 13px 16px;
border-bottom: 1px solid var(--trait);
}
.cadre-notifs .notif:last-child { border-bottom: 0; }
.cadre-notifs .notif.lue { opacity: .7; }
.cadre-notifs .notif .dit { min-width: 0; }
.cadre-notifs .notif .fait { margin: 0; font-size: 14px; line-height: 1.45; }
.cadre-notifs .notif .fait .mot { color: var(--encre-2); }
.cadre-notifs .notif .ou {
margin: 3px 0 0;
font-family: var(--mono);
font-size: 10.5px;
color: var(--encre-3);
}
.cadre-notifs .notif .mene { font-size: 12.5px; white-space: nowrap; }
.cadre-notifs .rien {
margin: 0;
padding: 20px 16px;
color: var(--encre-3);
}
/* T-288 · la suggestion qu'un document déposé plus tôt pose au-dessus de la
question. **Elle n'est pas un manque**, CHARTE-VISUELLE.md : pas d'ambre,
qui est un état. Un liseré et une surface, comme une carte de question. */
.lecture-suggeree { border-left: 3px solid var(--mz-vert); }
.lecture-suggeree h3 { font-variant-numeric: tabular-nums; }
.lecture-suggeree .suggeree-ligne {
display: flex; align-items: center; gap: 12px; margin: 8px 0;
}
.lecture-suggeree .suggeree-ligne .petit {
font-size: 13px; color: var(--encre-3); flex: 1 1 auto;
}
/* T-287 · **le tableau des valeurs lues défile, le bouton reste.** La colonne
du fil ne défile pas, T-276 : quinze valeurs sur la balance poussaient
« Valider ces réponses » hors de l'écran, et rien ne disait qu'il existait.
Seul ce tableau défile, et seulement quand il dépasse. */
.lecture-lue-defile {
max-height: 46vh; overflow-y: auto; overscroll-behavior: contain;
border: 1px solid var(--trait); border-radius: 6px;
}
.lecture-lue-defile > .lecture-lue-table { margin: 0; }
/* T-412 · **le tableau lu tient dans sa fenêtre.** Othmane, le 2026-09-11 :
« le tableau ressort ». Les champs gardaient la largeur minimale de toute
saisie, 260 pixels : ils se partagent maintenant la largeur de la carte, et
seul un tableau de parts trop large défile de côté, dans son cadre. */
.lecture-lue-defile { overflow-x: auto; }
.lecture-lue form, .lecture-lue-defile { min-width: 0; max-width: 100%; }
.lecture-lue-table input[type=text] { min-width: 0; width: 100%; box-sizing: border-box; }
/* T-499 · **chaque colonne prend la largeur de son contenu le plus long**,
les cases et jamais le titre, plancher a six signes, plafond a quarante ;
le script du gabarit pose la largeur. Le titre se coupe s'il depasse. */
.lecture-lue-table .cases-lues input { width: 11ch; min-width: 6ch; max-width: 40ch; }
.lecture-lue-table .cases-lues th { white-space: normal; overflow-wrap: anywhere; vertical-align: bottom; line-height: 1.2; }
.lecture-lue-defile thead th {
position: sticky; top: 0; z-index: 1;
background: var(--mz-surface);
box-shadow: inset 0 -1px 0 var(--trait);
}
/* T-479 · **le tableau lu se relit d'un coup d'œil.** Othmane, le 2026-09-12 :
« les colonnes ne sont pas bien dimensionnées ». Elles se partageaient la
place au hasard du contenu : la case, la question sur un tiers, la valeur
sur le reste, « où c'est écrit » en étroit. L'ancienne réponse passe sous le
champ, en italique ; en tableau, elle se replie et déroule le mini tableau
du fil. */
.lecture-lue-table { table-layout: fixed; width: 100%; }
.lecture-lue-table th:nth-child(1) { width: 28px; }
.lecture-lue-table th:nth-child(2) { width: 32%; }
.lecture-lue-table th:nth-child(4) { width: 18%; }
.lecture-lue-table td { overflow-wrap: anywhere; vertical-align: top; }
.lecture-lue-table .ancienne {
display: block; margin-top: 4px; font-size: 12.5px; font-style: italic;
font-family: var(--sans); letter-spacing: 0; text-transform: none;
color: var(--encre-3);
}
.lecture-lue-table .ancienne-tableau { margin-top: 4px; }
.lecture-lue-table .ancienne-tableau > summary {
cursor: pointer; font-size: 12.5px; font-style: italic; color: var(--encre-3);
list-style: none;
}
.lecture-lue-table .ancienne-tableau > summary::before { content: "▸ "; font-style: normal; }
.lecture-lue-table .ancienne-tableau[open] > summary::before { content: "▾ "; }
.lecture-lue-table .ancienne-tableau .cases-lues td { padding: 2px 8px 2px 0; white-space: nowrap; }
/* T-427 · « Redéposer », un lien discret à côté de « Ne rien prendre ». */
.lecture-lue .pied-lecture { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.lecture-lue .pied-lecture form { width: auto; margin: 0; }
a.bouton.redeposer { text-decoration: none; }
/* T-426 · la seconde liste de l'encadré du dépôt : ce qui reste à remplir
dans ce rendez-vous, une ligne cliquable par question. */
.lecture-lue h3.encore { margin-top: 18px; font-size: 15px; }
.lecture-lue .encore-a-remplir {
margin: 6px 0 0; padding: 6px 6px 6px 24px; font-size: 13.5px;
max-height: 22vh; overflow-y: auto; overscroll-behavior: contain;
border: 1px solid var(--trait); border-radius: 6px;
}
.lecture-lue .encore-a-remplir li { margin: 3px 0; }
.lecture-lue .encore-a-remplir a { color: var(--encre-2); }
/* T-480 · le nom qui accompagne « une autre personne », sous le menu. */
.lecture-lue-table .nom-de-l-autre { margin-top: 4px; }
/* T-287 · deux documents qui ne disent pas la même chose sur la même réponse.
**Ce n'est pas toujours une erreur de lecture** : le résultat net se recoupe
entre le compte de produits et charges et la balance, et les deux qui
divergent est un défaut du dossier. On le montre, on ne le tranche pas. */
.lecture-lue-table .divergence {
display: block; margin-top: 4px; font-size: 12.5px;
color: var(--mz-ambre-fonce);
}
/* ============================================================
T-289 · les pieces et les actes sous le fil.
`LOT-ECRANS-EN-PLUS.md` §2.1 et §2.2. Des lignes pleine largeur, jamais des
colonnes : le nom, l'etat, l'action. Rien ne quitte la mission.
============================================================ */
/* **Pleine largeur, jamais en colonnes**, §2.1. Le bandeau range ses listes
en colonnes de 300 px, et c'est bon pour « ce qui doit sortir » d'hier, qui
n'etait qu'un nom et un etat. Une ligne qui porte une action ne se coupe pas
en trois : on lit le nom d'un cote de l'ecran et on clique de l'autre. */
.bandeau-etape .liste.pieces,
.bandeau-etape .liste.actes { grid-template-columns: minmax(0, 1fr); }
.bandeau-etape .ligne.acte,
.bandeau-etape .ligne.piece {
display: grid;
align-items: center;
gap: 12px;
padding: 8px 2px;
border-bottom: 1px solid var(--trait);
}
/* T-371 · la colonne d'etat s'elargit a sa mention : « sorti le 10/09 a 21:50
· version 1 », « le fichier n'est plus sur le serveur » se coupaient a 190px. */
.bandeau-etape .ligne.acte { grid-template-columns: minmax(0, 1fr) minmax(190px, max-content) auto; }
.bandeau-etape .ligne.piece { grid-template-columns: minmax(0, 1fr) 150px auto; }
.bandeau-etape .ligne.acte form { margin: 0; }
/* T-534 · **le tiroir « Ce qui doit sortir » est le dossier de l'exercice
réduit au rendez-vous** : le gabarit du dossier, dans les 520 px du
tiroir. Une pièce déposée dit son fichier, qui, quand, pour quel pôle. */
.bandeau-etape .liste.dossier-en-tiroir { display: block; }
.bandeau-etape .liste.dossier-en-tiroir .dossier-ligne { padding: 14px 16px; }
.bandeau-etape .liste.dossier-en-tiroir .dossier-ligne h3 { font-size: 15.5px; }
.bandeau-etape .liste.dossier-en-tiroir .arret-partout {
display: flex; flex-direction: column; gap: 4px; margin-bottom: 10px; padding: 12px 14px;
background: var(--mz-rouge-clair); color: var(--mz-rouge); border: 1px solid var(--mz-rouge); border-radius: 8px; font-size: 13.5px;
}
.bandeau-etape .liste.dossier-en-tiroir .arret-partout .titre-arret { font-family: var(--serif); font-size: 15px; font-weight: 600; }
.bandeau-etape .ligne.piece.deposee { grid-template-columns: minmax(0, 1fr) 150px; }
.bandeau-etape .ligne.piece .fichier { grid-column: 1; overflow-wrap: anywhere; }
.bandeau-etape .ligne.piece .par { grid-column: 1 / -1; font-size: 12.5px; color: var(--mz-encre-douce); }
/* L'etat, toujours en mono : c'est une mention, pas une phrase. */
.bandeau-etape .ligne.piece .e { font-family: var(--mono); font-size: 10.5px; }
.bandeau-etape .ligne.piece .e.reclamee { color: var(--brique); }
.bandeau-etape .ligne.piece .e.pas-reclamee { color: var(--encre-3); }
.bandeau-etape .ligne.piece .e.recue { color: var(--mz-vert-vif); }
/* Le bouton de la ligne. Grise, il ne se clique pas et la colonne d'etat dit
pourquoi : un bouton mort qui n'explique rien fait cliquer trois fois. */
.bandeau-etape .tele {
font: inherit;
font-size: 12.5px;
padding: 5px 12px;
border: 1px solid var(--trait-fort);
border-radius: 3px;
background: var(--surface);
color: var(--vert);
text-decoration: none;
white-space: nowrap;
cursor: pointer;
}
.bandeau-etape .tele:hover { border-color: var(--vert); text-decoration: none; }
.bandeau-etape .tele.eteint {
color: var(--mz-gris-doux);
background: var(--surface-2);
border-color: var(--trait);
cursor: default;
}
.bandeau-etape .tele.eteint:hover { border-color: var(--trait); }
.bandeau-etape .pied-liste {
margin: 10px 0 0;
font-size: 12px;
color: var(--encre-3);
}
/* La zone de depot, sous la liste. Le cadre tirete dit qu'on depose ici, et
il ne recouvre rien. */
.bandeau-etape .zone-depot {
margin-top: 12px;
padding: 12px 14px;
border: 1px dashed var(--vert);
border-radius: 6px;
display: flex;
flex-direction: column;
gap: 8px;
align-items: flex-start;
}
.bandeau-etape .zone-depot .surtitre {
font-family: var(--mono);
font-size: 10px;
letter-spacing: .09em;
text-transform: uppercase;
color: var(--encre-3);
}
.bandeau-etape .zone-depot .gestes-depot { display: flex; gap: 8px; }
/* T-290 · l'ecran de modification est la fiche, en modifiable.
`LOT-ECRANS-EN-PLUS.md` §4.8. */
/* Un onglet eteint n'est pas un onglet grise qu'on peut cliquer : il ne se
clique pas, et il dit pourquoi il est la. */
.onglets .eteint {
color: var(--mz-gris-doux);
cursor: default;
padding: 8px 2px;
font-size: 13.5px;
border-bottom: 2px solid transparent;
}
.pied-fiche {
display: flex;
align-items: center;
gap: 12px;
margin-top: 22px;
padding-top: 16px;
border-top: 1px solid var(--trait);
}
.pied-fiche .mention {
margin-left: auto;
font-family: var(--mono);
font-size: 10.5px;
color: var(--encre-3);
}
/* T-291 · « Ce qui sera cree », sur l'ouverture d'une mission.
`LOT-ECRANS-EN-PLUS.md` §4.6. */
.sera-cree {
margin: 22px 0 0;
padding: 14px 16px;
background: var(--vert-pale);
border-radius: 6px;
}
.sera-cree h2 {
margin: 0 0 8px;
font-family: var(--serif);
font-size: 15px;
font-weight: 600;
color: var(--vert);
}
.sera-cree ul { margin: 0; padding-left: 18px; }
.sera-cree li { font-size: 13.5px; line-height: 1.6; }
/* T-291 · la liste de controle avant de clore. §4.7. */
.controle-avant {
background: var(--surface);
border: 1px solid var(--trait);
border-radius: 4px;
overflow: hidden;
margin: 16px 0;
}
.controle-avant .ligne {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
gap: 12px;
align-items: baseline;
padding: 12px 16px;
border-bottom: 1px solid var(--trait);
}
.controle-avant .ligne:last-child { border-bottom: 0; }
.controle-avant .quoi { font-size: 14px; }
.controle-avant .compte {
font-family: var(--mono);
font-size: 11px;
color: var(--encre-3);
white-space: nowrap;
}
/* Une ligne qui bloque se lit en brique, des deux cotes : le compte seul en
couleur se prend pour une decoration. */
.controle-avant .ligne.bloque .quoi,
.controle-avant .ligne.bloque .compte { color: var(--brique); }
/* T-292 · Chercher, en deux groupes. `LOT-ECRANS-EN-PLUS.md` §4.2. */
.titre-groupe {
margin: 22px 0 8px;
font-family: var(--mono);
font-size: 10px;
font-weight: 500;
letter-spacing: .1em;
text-transform: uppercase;
color: var(--encre-3);
}
.titre-groupe .c { color: var(--encre-2); }
.cadre-trouves {
background: var(--surface);
border: 1px solid var(--trait);
border-radius: 4px;
overflow: hidden;
}
.cadre-trouves .trouve {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
gap: 2px 14px;
padding: 11px 16px;
border-bottom: 1px solid var(--trait);
text-decoration: none;
color: var(--encre);
}
.cadre-trouves .trouve:last-child { border-bottom: 0; }
.cadre-trouves .trouve:hover { background: var(--surface-2); text-decoration: none; }
.cadre-trouves .nom { font-size: 14px; }
.cadre-trouves .ou {
grid-column: 1;
font-family: var(--mono);
font-size: 10.5px;
color: var(--encre-3);
}
.cadre-trouves .etat {
grid-row: 1 / 3;
grid-column: 2;
align-self: center;
font-family: var(--mono);
font-size: 10.5px;
color: var(--encre-3);
white-space: nowrap;
}
/* Une echeance depassee est un etat, CHARTE-VISUELLE.md. */
.cadre-trouves .etat.retard { color: var(--brique); }
/* Le champ prend toute la largeur : on y tape un nom, pas un mot-cle. */
.cherche input[type=search] { font-size: 15px; }
/* T-292 · la ligne de declaration des absences. §4.3. */
.cadre-declarer {
display: flex;
align-items: center;
gap: 14px;
padding: 14px 16px;
background: var(--surface);
border: 1px solid var(--trait);
border-radius: 4px;
margin: 14px 0 22px;
}
.cadre-declarer .mention {
font-family: var(--mono);
font-size: 10.5px;
color: var(--encre-3);
}
/* T-291 · un bouton desactive doit se voir desactive. Sans cela il est vert et
plein comme les autres : on clique, il ne se passe rien, et on recommence. */
.bouton[disabled], button.bouton[disabled] {
background: var(--surface-2);
border-color: var(--trait);
color: var(--mz-gris-doux);
cursor: default;
box-shadow: none;
}
/* T-287 · une réponse en tableau se relit en tableau, pas sur une ligne où les
cases sont collées par des « · ». Othmane, le 2026-09-08. */
.cases-lues-defile { overflow-x: auto; max-width: 100%; }
.cases-lues { border-collapse: collapse; font-size: 13px; }
.cases-lues th {
text-align: left; font-weight: 500; color: var(--encre-3);
padding: 2px 4px; white-space: nowrap;
}
.cases-lues td { padding: 1px 2px; }
.cases-lues input { width: 100%; min-width: 70px; font-size: 13px; }
/* T-287 · une réponse en tableau se replie dans le fil : cinq associés à sept
colonnes tiennent en une ligne fermée, et s'ouvrent quand on les cherche. */
.prise .v-tableau > summary {
cursor: pointer; font-size: 13px; color: var(--encre-2);
list-style: none; padding: 2px 0;
}
.prise .v-tableau > summary::before { content: "▸ "; color: var(--encre-3); }
.prise .v-tableau[open] > summary::before { content: "▾ "; }
.prise .v-tableau-defile { overflow-x: auto; margin-top: 4px; }
.prise .cases-lues td {
padding: 2px 8px 2px 0; vertical-align: top; white-space: nowrap;
}
/* ---- T-380 · ce qui presse, en tête de la cloche ---- */
.ce-qui-presse { margin: 14px 0 22px; }
.ce-qui-presse h2 {
display: flex;
align-items: baseline;
gap: 10px;
font-size: 14px;
margin: 16px 0 6px;
}
.ce-qui-presse h2 small { font-weight: 400; color: var(--encre-3); font-size: 12px; }
.ce-qui-presse .palier {
font-size: 12px;
padding: 2px 9px;
border-radius: 10px;
}
.ce-qui-presse .palier.rouge { background: var(--brique-pale); color: var(--brique); }
.ce-qui-presse .palier.orange { background: var(--ambre-pale); color: var(--ambre); }
.presse-ligne {
display: grid;
grid-template-columns: 250px minmax(0, 1fr) auto;
grid-template-areas: "ou manque delai" "rdv manque delai";
column-gap: 14px;
align-items: center;
padding: 10px 14px;
border: 1px solid var(--trait);
border-top: 0;
background: var(--surface);
color: var(--encre);
text-decoration: none;
font-size: 13px;
}
.ce-qui-presse h2 + .presse-ligne { border-top: 1px solid var(--trait); border-radius: 4px 4px 0 0; }
.presse-ligne:last-child { border-radius: 0 0 4px 4px; }
.presse-ligne:hover { background: var(--surface-2); }
.presse-ligne .ou { grid-area: ou; }
.presse-ligne .ou small { color: var(--encre-3); margin-left: 4px; }
.presse-ligne .rdv { grid-area: rdv; color: var(--encre-3); font-size: 12px; }
.presse-ligne .manque { grid-area: manque; }
.presse-ligne .delai { grid-area: delai; font-family: var(--mono); font-size: 12px; white-space: nowrap; }
.presse-ligne.presse .delai { color: var(--brique); }
.presse-ligne.surveiller .delai { color: var(--ambre); }
.titre-arrive { font-size: 14px; margin: 18px 0 0; }
.presse-ligne .ou b, .presse-ligne .ou small { display: inline; }
.presse-ligne .ou { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* ---- T-382 · « Précédent », sous la question ---- */
.carte-q .precedent { font-size: 12.5px; color: var(--encre-2); text-decoration: none; }
.carte-q .precedent:hover { color: var(--vert); text-decoration: underline; }
.carte-q .pied-q .reste { margin-left: auto; }
/* ---- T-385 · l'horloge réglée à la main ---- */
.horloge-boutons { display: flex; flex-direction: row; gap: 8px; flex-wrap: wrap; margin: 8px 0 18px; }
.barre .horloge-reglee {
font-family: var(--mono); font-size: 11px; color: var(--brique);
background: var(--brique-pale); padding: 3px 9px; border-radius: 10px;
text-decoration: none; white-space: nowrap;
}
/* ---- T-398 · ce qui presse, en tête de la fenêtre ---- */
.menu-cloche .notif.presse .fait { color: var(--mz-rouge); }
.menu-cloche .notif.encore { display: block; font-size: 12px; color: var(--mz-encre-tenue); }
/* ---- T-393 · le tableau de bord sur sa maquette ---- */
/* La page tient dans la fenêtre : la barre, le chapeau et les filtres
restent, le tableau seul défile, correctif 03 de la livraison. */
.page.tenue {
height: calc(100dvh - 53px);
display: flex;
flex-direction: column;
min-height: 0;
gap: 14px;
padding-top: 20px;
padding-bottom: 18px;
max-width: 1320px;
}
.page.tenue > * { flex: 0 0 auto; }
.page.tenue > .cadre-tdb { flex: 1 1 auto; min-height: 0; }
.tdb-chapeau {
display: flex;
align-items: baseline;
gap: 16px;
flex-wrap: wrap;
}
.tdb-chapeau h1 { margin: 0; }
.tdb-exercice { font-family: var(--mono); font-size: 12px; color: var(--mz-encre-tenue); }
.bascule-pole {
display: flex;
border: 1px solid var(--mz-trait-fort);
border-radius: 5px;
overflow: hidden;
align-self: center;
}
.bascule-pole a, .bascule-pole .ici {
font-size: 12.5px;
padding: 4px 13px;
color: var(--mz-encre-douce);
text-decoration: none;
border-left: 1px solid var(--mz-trait-fort);
}
.bascule-pole > :first-child { border-left: 0; }
.bascule-pole .ici { background: var(--mz-vert-clair); color: var(--mz-vert); font-weight: 600; }
.bascule-pole a:hover { color: var(--mz-vert); }
.tdb-filtres { margin-bottom: 0; flex-wrap: nowrap; }
.tdb-filet { width: 1px; height: 20px; background: var(--mz-trait); margin: 0 6px; }
/* T-508 · le menu de l'équipe, sur la ligne des pastilles, à leur hauteur. */
.tdb-equipe { display: flex; align-items: center; gap: 8px; margin: 0; }
.tdb-equipe .filtre-liste { width: auto; min-width: 170px; padding: 3px 28px 3px 12px; border-radius: 14px;
appearance: none; -webkit-appearance: none; cursor: pointer;
background: var(--surface) url("data:image/svg+xml;utf8,") no-repeat right 11px center; }
.pastilles.gens { display: contents; }
.pastille.douce { background: var(--mz-fond); }
.tdb-selection { margin-left: auto; display: flex; align-items: center; gap: 12px; }
.tdb-combien { font-family: var(--mono); font-size: 11.5px; color: var(--mz-encre-tenue); }
#tdb-relancer[disabled] {
background: var(--mz-champ);
border-color: var(--mz-trait);
color: var(--mz-encre-tenue);
cursor: default;
}
.lot-relance-forme { display: none; }
.cadre-tdb {
display: flex;
flex-direction: column;
background: var(--mz-surface);
border: 1px solid var(--mz-trait);
border-radius: 8px;
overflow: hidden;
min-height: 0;
}
.tdb-titre {
display: flex;
align-items: center;
gap: 16px;
padding: 14px 20px 10px;
}
.tdb-titre .etiquette {
font-family: var(--mono);
font-size: 10px;
font-weight: 500;
letter-spacing: .12em;
text-transform: uppercase;
color: var(--mz-encre-tenue);
}
.tdb-titre .legende { margin: 0 0 0 auto; }
.cadre-tdb .cadre-matrice {
flex: 1 1 auto;
min-height: 0;
overflow: auto;
overscroll-behavior: contain;
border: 0;
border-radius: 0;
}
.matrice.avec-cases { min-width: max-content; }
.matrice.avec-cases .rang {
grid-template-columns: 26px minmax(180px, 1.3fr) repeat(9, 46px) 54px 96px;
gap: 0 4px;
padding: 0 20px;
height: 52px;
}
.matrice.avec-cases .entete {
position: sticky;
top: 0;
z-index: 3;
background: var(--mz-surface);
height: auto;
padding: 0 20px 8px;
font-size: 9.5px;
letter-spacing: .05em;
}
.matrice.avec-cases .coche { display: flex; align-items: center; }
.matrice.avec-cases .coche input { width: 14px; height: 14px; accent-color: var(--mz-vert); margin: 0; cursor: pointer; }
.matrice.avec-cases .entete > .coche,
.matrice.avec-cases .rang > .coche { position: sticky; left: 0; background: inherit; z-index: 2; }
.matrice.avec-cases .entete > div:nth-child(2),
.matrice.avec-cases .rang > .societe { position: sticky; left: 30px; background: inherit; z-index: 2; padding-right: 10px; min-width: 0; }
.matrice.avec-cases .rang { background: var(--mz-surface); }
.matrice.avec-cases .rang.choisie { background: var(--mz-vert-clair); }
.matrice.avec-cases .rang:hover { background: var(--mz-fond); }
.matrice.avec-cases .societe a,
.matrice.avec-cases .societe .sous { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.matrice.avec-cases .societe .sous { font-size: 10.5px; }
.matrice.avec-cases .fin.echeance { line-height: 1.35; }
.matrice.avec-cases .fin.echeance b { display: block; font-size: 12px; font-weight: 500; color: var(--mz-encre-douce); }
.matrice.avec-cases .fin.echeance span { display: block; font-size: 10.5px; color: var(--mz-encre-tenue); }
.matrice.avec-cases .fin.echeance.depassee b,
.matrice.avec-cases .fin.echeance.depassee span { color: var(--mz-rouge); }
@media (prefers-reduced-motion: no-preference) {
.matrice.avec-cases a.rond { transition: transform .13s ease; }
.matrice.avec-cases a.rond:hover { transform: scale(1.55); outline: none; }
}
.pied-tdb {
display: flex;
align-items: center;
gap: 8px;
padding: 10px 20px 12px;
border-top: 1px solid var(--mz-trait);
font-size: 11.5px;
color: var(--mz-encre-tenue);
}
.pied-tdb .hors-suivi { margin-left: auto; position: relative; }
.pied-tdb .hors-suivi summary { cursor: pointer; list-style: none; }
.pied-tdb .hors-suivi summary:hover { color: var(--mz-vert); }
.pied-tdb .hors-suivi p {
position: absolute;
right: 0;
bottom: 22px;
width: 420px;
margin: 0;
padding: 10px 14px;
background: var(--mz-surface);
border: 1px solid var(--mz-trait);
border-radius: 6px;
box-shadow: var(--ombre);
color: var(--mz-encre-douce);
}
.cadre-tdb .vide { padding: 34px 20px; margin: 0; color: var(--mz-encre-tenue); font-size: 14px; }
.lot-relance .bloc-personne {
background: var(--mz-surface);
border: 1px solid var(--mz-trait);
border-radius: 8px;
padding: 16px 20px;
width: 100%;
}
.lot-relance .bloc-personne textarea { width: 100%; }
.lot-relance .dossiers-du-bloc { margin: 6px 0 12px; padding-left: 18px; font-size: 14px; }
.lot-relance .dossiers-du-bloc .retard { color: var(--mz-rouge); }
/* ---- T-394 · le portefeuille sur sa maquette ---- */
.identite-portefeuille { display: flex; gap: 9px; flex-wrap: wrap; margin: 0; }
.identite-portefeuille b { color: var(--mz-encre); font-weight: 500; }
.tdb-gestes { margin-left: auto; align-self: center; }
.matrice.portefeuille { min-width: 720px; }
.matrice.portefeuille .rang {
grid-template-columns: 26px minmax(180px, 1fr) 72px 118px 92px minmax(200px, 1.1fr);
gap: 0 10px;
height: auto;
padding: 10px 20px;
}
.matrice.portefeuille .entete { padding: 0 20px 8px; }
.matrice.portefeuille .entete .deux-lignes { line-height: 1.35; }
.matrice.portefeuille .rang.hors-delai { box-shadow: inset 3px 0 0 var(--mz-rouge); }
.matrice.portefeuille .rang.a-vous { box-shadow: inset 3px 0 0 var(--mz-vert); }
.matrice.portefeuille .forme { font-size: 12.5px; color: var(--mz-encre-douce); }
.matrice.portefeuille .identifiants,
.matrice.portefeuille .cloture {
font-family: var(--mono); font-size: 11.5px; color: var(--mz-encre-douce);
font-variant-numeric: tabular-nums; line-height: 1.35;
}
.matrice.portefeuille .identifiants span { display: block; }
.matrice.portefeuille .identifiants .registre { color: var(--mz-encre-tenue); }
.matrice.portefeuille .cloture { display: flex; align-items: center; gap: 6px; }
.point-ambre { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--mz-ambre); flex: none; }
.matrice.portefeuille .mission { display: flex; align-items: baseline; gap: 8px; min-width: 0; }
.matrice.portefeuille .mission .puce { margin: 0; align-self: center; flex: none; }
.matrice.portefeuille .mission .quoi { min-width: 0; font-size: 12.5px; }
.matrice.portefeuille .mission .quoi small { display: block; font-family: var(--mono); font-size: 10.5px; color: var(--mz-encre-tenue); }
.matrice.portefeuille .mission .quoi small.retard { color: var(--mz-rouge); }
.matrice.portefeuille .societe .sous { font-size: 11.5px; color: var(--mz-encre-tenue); }
.matrice.portefeuille .coche { overflow: hidden; }
.matrice.portefeuille.sans-cases .rang { grid-template-columns: 0 minmax(180px, 1fr) 72px 118px 92px minmax(200px, 1.1fr); }
main.page:not(.mode-selection) .matrice.portefeuille .rang { grid-template-columns: 0 minmax(180px, 1fr) 72px 118px 92px minmax(200px, 1.1fr); }
main.page:not(.mode-selection) .matrice.portefeuille .coche input { display: none; }
.matrice.portefeuille .vide { padding: 34px 20px; margin: 0; color: var(--mz-encre-tenue); font-size: 14px; }
.pied-tdb .a-droite { margin-left: auto; white-space: nowrap; }
.barre-attribution {
display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
padding: 10px 14px; background: var(--mz-surface); border: 1px solid var(--mz-trait); border-radius: 6px;
font-size: 12.5px;
}
.barre-attribution .l { font-family: var(--mono); font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: var(--mz-encre-tenue); }
.barre-attribution label { display: flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 400; }
.barre-attribution select { font: inherit; font-size: 12.5px; padding: 4px 8px; }
.barre-attribution small { color: var(--mz-encre-tenue); }
.portefeuille-forme { display: contents; }
/* Le mode sélection : hors du mode, ce qui le sert est caché ; dans le mode,
c'est « Sélectionner » qui l'est. Sans script, tout reste visible. */
main.page.js:not(.mode-selection) [data-mode="selection"] { display: none !important; }
main.page.js.mode-selection [data-mode="hors"] { display: none !important; }
/* T-422 · le tableau de bord se selectionne comme le portefeuille : hors du
mode, la colonne des cases se replie et la societe reprend le bord. Sans
script, les cases restent visibles et « Relancer » marche. */
main.page.js:not(.mode-selection) .matrice.avec-cases .rang { grid-template-columns: 0 minmax(180px, 1.3fr) repeat(9, 46px) 54px 96px; }
main.page.js:not(.mode-selection) .matrice.avec-cases .coche { overflow: hidden; }
main.page.js:not(.mode-selection) .matrice.avec-cases .coche input { display: none; }
main.page.js:not(.mode-selection) .matrice.avec-cases .entete > div:nth-child(2),
main.page.js:not(.mode-selection) .matrice.avec-cases .rang > .societe { left: 0; }
/* T-457 · **le portefeuille garde ses six colonnes**, dans le mode sélection
comme en dehors. La règle du tableau de bord à treize colonnes, juste
au-dessus, l'emportait sur la sienne : l'identifiant s'écrivait par-dessus
la clôture, et « Aucune, à ouvrir » tombait sur trois lignes. */
main.page.js:not(.mode-selection) .matrice.portefeuille.avec-cases .rang { grid-template-columns: 0 minmax(180px, 1fr) 72px 118px 92px minmax(200px, 1.1fr); gap: 0 10px; }
main.page.js.mode-selection .matrice.portefeuille.avec-cases .rang { grid-template-columns: 26px minmax(180px, 1fr) 72px 118px 92px minmax(200px, 1.1fr); gap: 0 10px; }
.matrice.portefeuille.avec-cases { min-width: 720px; }
/* ---- T-396 · le dossier de l'exercice, et le panneau qui glisse ---- */
.voile-panneau {
position: fixed; inset: 0; z-index: 40;
background: rgba(22, 33, 30, .32);
}
.panneau {
position: fixed; top: 0; right: 0; bottom: 0; z-index: 41;
width: min(1320px, 100vw - 48px);
background: var(--mz-fond);
box-shadow: -18px 0 40px -20px rgba(22, 33, 30, .5);
display: flex; flex-direction: column;
transform: translateX(100%);
transition: transform .2s cubic-bezier(.32, .72, 0, 1);
}
.panneau.visible { transform: translateX(0); transition-duration: .24s; }
.panneau.sans-animation { transition: none; }
@media (max-width: 900px) { .panneau { width: 100vw; } }
body.panneau-ouvert { overflow: hidden; }
/* T-415 · **le dossier de l'exercice arrive par la gauche.** Othmane, le
2026-09-11 : « qu'il glisse de gauche a droite ». Le fil vit a droite de
l'ecran de la mission ; le dossier vient de l'autre bord. Seul le panneau
du dossier change de sens, les petits panneaux de la mission gardent le leur. */
#panneau.panneau {
left: 0; right: auto;
box-shadow: 18px 0 40px -20px rgba(22, 33, 30, .5);
transform: translateX(-101%);
}
#panneau.panneau.visible { transform: translateX(0); }
/* T-415 · les quatre filtres du dossier. */
.dossier-filtres { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 16px; }
.dossier-filtres .pastille {
font: inherit; font-size: 12.5px; padding: 5px 12px; cursor: pointer;
border: 1px solid var(--trait-fort); border-radius: 14px;
background: var(--surface); color: var(--encre-2);
}
.dossier-filtres .pastille.active { background: var(--vert-pale); border-color: var(--vert); color: var(--vert); }
.dossier-ligne[hidden], .dossier-section[hidden] { display: none; }
.dossier-rien { font-size: 14px; color: var(--encre-3); margin: 0 0 16px; }
.panneau-entete {
flex: 0 0 auto;
position: relative;
padding: 18px 28px 12px;
border-bottom: 1px solid var(--mz-trait);
background: var(--mz-fond);
}
.panneau .panneau-entete { padding-left: 60px; }
.panneau-fermer {
display: none;
position: absolute; left: 18px; top: 16px;
width: 30px; height: 30px; border-radius: 50%;
border: 1px solid var(--mz-trait-fort); background: var(--mz-surface);
font-size: 18px; line-height: 1; color: var(--mz-encre-douce); cursor: pointer;
padding: 0; align-items: center; justify-content: center;
}
.panneau .panneau-fermer { display: flex; }
.panneau-fermer:hover { color: var(--mz-vert); border-color: var(--mz-vert); }
.panneau-entete .ariane { display: flex; gap: 7px; }
.panneau-entete .ariane a { color: var(--mz-encre-tenue); text-decoration: none; }
.panneau-entete .ariane a:hover { color: var(--mz-vert); }
.panneau-titre { display: flex; align-items: baseline; gap: 16px; flex-wrap: wrap; margin-top: 5px; }
.panneau-titre h1 { margin: 0; font-size: 27px; }
.panneau-titre p {
margin: 0; display: flex; gap: 10px; align-items: baseline;
font-family: var(--mono); font-size: 12px; color: var(--mz-encre-tenue); font-variant-numeric: tabular-nums;
}
.panneau-titre p b { color: var(--mz-encre); font-weight: 500; }
.panneau-raccourcis { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 14px; }
/* T-451 · l'épreuve refusée tient en une ligne. */
.epreuve-refus { margin: 0 0 4px; font-size: 13.5px; color: var(--mz-encre-douce); }
.panneau-corps { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
.panneau-dedans {
max-width: 1320px; margin: 0 auto; padding: 20px 28px 48px;
display: flex; flex-direction: column; gap: 26px;
}
.dossier-page { height: calc(100dvh - 53px); }
.dossier-en-page { height: 100%; display: flex; flex-direction: column; min-height: 0; }
.dossier-section { display: flex; flex-direction: column; gap: 10px; }
.dossier-titre { display: flex; align-items: baseline; gap: 12px; }
.dossier-titre h2 {
margin: 0; font-family: var(--mono); font-size: 10px; font-weight: 500;
letter-spacing: .12em; text-transform: uppercase; color: var(--mz-encre-tenue);
}
.dossier-titre span { font-size: 11.5px; color: var(--mz-encre-tenue); }
.dossier-cadre { background: var(--mz-surface); border: 1px solid var(--mz-trait); border-radius: 6px; overflow: hidden; }
.dossier-ligne {
padding: 16px 20px; border-top: 1px solid var(--mz-trait);
display: flex; flex-direction: column; gap: 9px;
}
.dossier-ligne:first-child { border-top: 0; }
.dossier-ligne.prete { box-shadow: inset 3px 0 0 var(--mz-vert); }
.dossier-ligne.manque { box-shadow: inset 3px 0 0 var(--mz-rouge); }
.dossier-ligne.piece { flex-direction: row; flex-wrap: wrap; align-items: baseline; gap: 6px 16px; padding: 11px 20px; }
.dossier-ligne.piece:hover { background: var(--mz-fond); }
/* ---- T-395 · l'écran de la mission sur sa maquette ---- */
.barre-tiroir {
width: 100%; font: inherit; text-align: left; cursor: pointer;
background: var(--mz-vert-clair); border: 0; border-top: 1px solid var(--mz-trait);
padding: 8px 24px; display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
font-size: 12.5px; color: var(--mz-encre); margin: 0 0 12px;
}
.barre-tiroir:hover { background: var(--mz-vert-clair); filter: brightness(.98); }
.barre-tiroir .resume { font-family: var(--mono); font-size: 11px; color: var(--mz-encre-douce); font-variant-numeric: tabular-nums; }
.barre-tiroir .ouvrir { margin-left: auto; font-size: 12px; font-weight: 500; color: var(--mz-vert); }
[data-bandeau="ouvert"] .barre-tiroir { display: none; }
/* T-520 · les trois etiquettes du rendez-vous, de la meme taille, sous la
frise ; le bandeau se deroule dessous au survol, se fige au clic. */
.etiquettes-rdv {
display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
padding: 8px 24px; border-top: 1px solid var(--mz-trait); background: var(--mz-surface);
}
.etiquettes-rdv .etiquette {
display: inline-flex; align-items: center; justify-content: space-between; gap: 10px;
min-width: 190px; padding: 7px 14px; border: 1px solid var(--mz-trait-fort);
border-radius: 8px; background: var(--mz-fond); color: var(--mz-encre);
font: inherit; font-size: 13px; font-weight: 500; cursor: pointer; text-decoration: none;
}
.etiquettes-rdv .etiquette .c {
font-family: var(--mono); font-size: 12px; font-weight: 500; color: var(--mz-encre-douce);
background: var(--mz-surface); border: 1px solid var(--mz-trait); border-radius: 10px;
padding: 0 7px; min-width: 22px; text-align: center;
}
.etiquettes-rdv .etiquette:hover, .etiquettes-rdv .etiquette.active {
border-color: var(--mz-vert); background: var(--mz-vert-clair); color: var(--mz-vert);
}
.etiquettes-rdv .etiquette.active .c { color: var(--mz-vert); border-color: var(--mz-vert); }
[data-bandeau-fige] .etiquettes-rdv .etiquette.active { box-shadow: inset 0 -3px 0 var(--mz-vert); }
.etiquettes-rdv .etiquette.lien { min-width: 0; background: transparent; border-color: transparent; color: var(--mz-encre-douce); margin-left: auto; }
.etiquettes-rdv .etiquette.lien:hover { color: var(--mz-vert); background: transparent; }
.etiquettes-rdv .repris { font-family: var(--mono); font-size: 11px; color: var(--mz-encre-douce); margin-right: 8px; }
.bandeau-etape .onglets { justify-content: flex-end; margin-bottom: 4px; }
[data-bandeau="ouvert"]:not([data-bandeau-fige]) .bandeau-etape .onglets { display: none; }
.carte-q .pied-q .portee { font-size: 12px; color: var(--mz-encre-tenue); margin-left: auto; }
.carte-q .pied-q .portee b { color: var(--mz-encre-douce); font-weight: 500; }
.carte-q .pied-q .reste { margin-left: 0; }
@keyframes mz-pose { from { background: var(--mz-vert-clair); } to { background: transparent; } }
.prise.fraiche { animation: mz-pose 2s ease-out; }
.prise .v.texte-long {
display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;
overflow: hidden; text-align: left;
}
.prise .deplier {
font: inherit; font-size: 11px; color: var(--mz-encre-tenue); background: transparent;
border: 0; padding: 0; cursor: pointer; align-self: flex-start;
}
.prise .deplier:hover { color: var(--mz-vert); }
.prise .v-tableau .cases-lues tr.au-dela[hidden] { display: none; }
/* ---- T-390 · la zone de dépôt ---- */
.depot-zone {
display: flex; flex-direction: column; gap: 4px;
padding: 12px 14px; border: 1px dashed var(--mz-trait-fort); border-radius: 5px;
background: var(--mz-fond); width: 100%;
}
/* T-544 · la barre porte le choix, le compte, « Ajouter », « Retirer » et la
consigne, en ligne ; la liste des fichiers vient dessous. */
.depot-zone .depot-barre { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.depot-zone .choisir { font-weight: 500; color: var(--mz-vert); border-color: var(--mz-vert); background: var(--mz-surface); cursor: pointer; display: inline-flex; flex-direction: column; gap: 6px; }
.depot-zone.js .choisir input { position: absolute; width: 1px; height: 1px; opacity: 0; overflow: hidden; }
.depot-zone .choisi { font-size: 13px; color: var(--mz-encre-tenue); }
.depot-zone .choisi.plein { color: var(--mz-encre); }
/* T-469 · trop lourd : la zone le dit en rouge. */
.depot-zone .choisi.refuse { color: var(--mz-rouge); }
.depot-zone .retirer { font: inherit; font-size: 12.5px; color: var(--mz-rouge); background: transparent; border: 0; padding: 0; cursor: pointer; text-decoration: underline; }
.depot-zone .consigne { margin-left: auto; font-size: 12px; color: var(--mz-encre-tenue); }
.depot-zone .retirer[hidden] { display: none; }
/* T-496 · le réglage de l'année, dans l'en-tête du fil. */
.chapeau-mission .regler-exercice { display: inline-block; position: relative; vertical-align: middle; margin-left: 8px; font-size: 14px; font-family: var(--sans); font-weight: 400; }
.chapeau-mission .regler-exercice > summary { list-style: none; cursor: pointer; color: var(--mz-encre-tenue); font-size: 17px; line-height: 1; }
.chapeau-mission .regler-exercice > summary::-webkit-details-marker { display: none; }
.chapeau-mission .regler-exercice > summary:hover { color: var(--mz-vert); }
.chapeau-mission .regler-exercice form {
position: absolute; top: 130%; left: 0; z-index: 30; width: max-content; max-width: 360px;
display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 0;
padding: 12px 14px; background: var(--mz-surface); border: 1px solid var(--mz-trait);
border-radius: 8px; box-shadow: 0 6px 18px rgba(0, 0, 0, .12);
}
/* Le chapeau rogne ce qui dépasse : ouvert, le réglage doit passer dessus. */
.chapeau-mission:has(.regler-exercice[open]) { overflow: visible; }
.chapeau-mission .regler-exercice label { display: flex; align-items: center; gap: 6px; white-space: nowrap; }
.chapeau-mission .regler-exercice input { width: 7ch; min-width: 0; }
.chapeau-mission .regler-exercice form > * { flex: 0 0 auto; }
.chapeau-mission .regler-exercice .btn { width: auto; display: inline-flex; }
.chapeau-mission .regler-exercice .refus { flex-basis: 100%; color: var(--mz-rouge); font-size: 13px; }
/* T-482 · le message passager, en haut à droite, qui s'efface seul. */
.passager {
position: fixed; top: 64px; right: 18px; z-index: 60;
max-width: 360px; padding: 12px 16px; border-radius: 8px;
background: var(--mz-vert); color: var(--mz-surface); text-decoration: none;
font-size: 14px; font-weight: 500; box-shadow: 0 6px 18px rgba(0, 0, 0, .18);
transition: opacity .4s;
}
.passager.part { opacity: 0; }
/* T-433 · la zone s'éclaire quand un fichier passe au-dessus. */
.depot-zone.survol { border-color: var(--mz-vert); background: var(--mz-surface); }
/* ---- T-389 · figé et défilant, partout ---- */
/* La barre est collée en haut ; le chapeau de chaque page se colle sous
elle. Le corps défile dessous, correctif 03 de la livraison. Les écrans
qui tiennent leur hauteur, `.page.tenue`, le fil et le dossier, n'en ont
pas besoin et gardent le leur. */
.barre { position: sticky; top: 0; }
.page:not(.tenue):not(.nue):not(.etroite) > .chapeau {
position: sticky;
top: 53px;
z-index: 15;
background: var(--mz-fond);
padding-bottom: 10px;
margin-bottom: -10px;
box-shadow: 0 10px 12px -12px rgba(22, 33, 30, .25);
}
.page { overflow-x: clip; }
.cadre-table { overflow-x: auto; max-width: 100%; }
/* T-447 · l'étoile rouge des champs exigés, et l'erreur posée sous le champ. */
.exige { color: var(--mz-rouge); font-weight: 600; }
.champ-erreur { display: block; margin-top: 4px; color: var(--mz-rouge);
font-size: 12.5px; }
/* ---------------------------------------------------------------------------
T-509 · les modèles d'actes.
--------------------------------------------------------------------------- */
table.modeles { width: 100%; border-collapse: collapse; font-size: 13px; }
table.modeles th { text-align: left; font-family: var(--mono); font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--encre-3); padding: 10px 12px; border-bottom: 1px solid var(--trait-fort); }
table.modeles td { padding: 10px 12px; border-bottom: 1px solid var(--trait); vertical-align: top; }
table.modeles .code { font-family: var(--mono); color: var(--encre-3); }
table.modeles em { color: var(--brique); font-style: normal; }
.charger-modele { margin-top: 28px; max-width: 560px; }
.charger-modele .filtre-liste { width: 100%; max-width: 360px; }
.refus-modele { border-left: 3px solid var(--brique); padding: 4px 14px; margin: 12px 0 18px; }
.refus-modele p { margin: 6px 0; }
.reperes-connus { margin-top: 14px; }
.reperes-connus code { font-size: 11.5px; }
/* T-510 · les champs repérés : le texte à gauche, les passages à droite. */
.deux-colonnes-modele { display: grid; grid-template-columns: 1.2fr 1fr; gap: 18px; align-items: start; }
@media (max-width: 900px) { .deux-colonnes-modele { grid-template-columns: 1fr; } }
.texte-de-l-acte { padding: 18px 22px; font-family: var(--serif, Georgia, serif); font-size: 13.5px; line-height: 1.55; }
.texte-de-l-acte p { margin: 0 0 10px; }
.texte-de-l-acte mark, .passages-reperes mark { background: #f3e6b0; padding: 0 3px; border-radius: 3px; }
.passages-reperes .filtre-liste { width: 100%; }
.passages-reperes table.modeles td { padding: 8px 10px; }
.actions-modele { display: flex; gap: 12px; padding: 12px; margin: 0; }
/* ---------------------------------------------------------------------------
T-449 · la fiche societe en six onglets, une grille de cases par onglet.
Le libelle au-dessus de la valeur, la valeur en grand : une fiche se lit
comme un formulaire administratif bien tenu, pas comme un tableau a deux
colonnes. Pas de boite autour des cases, CHARTE-VISUELLE.md : un filet
sous chacune suffit a dire ou elle finit.
--------------------------------------------------------------------------- */
.fiche { display: flex; flex-direction: column; gap: 32px; margin-top: 20px; }
.fiche[hidden] { display: none; }
.fiche .bloc { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.fiche .bloc h2 {
display: flex; align-items: center; gap: 6px;
font-family: var(--mono); font-size: 10px; font-weight: 500;
letter-spacing: .12em; text-transform: uppercase; color: var(--encre-3);
margin: 0; padding-bottom: 7px; border-bottom: 1px solid var(--trait);
}
.fiche .bloc h3 {
font-family: var(--sans); font-size: 13px; font-weight: 600; color: var(--encre-2);
margin: 10px 0 0;
}
.cases {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
gap: 0 32px;
margin: 0;
}
.case {
display: flex; flex-direction: column; gap: 3px;
padding: 11px 0 12px; border-bottom: 1px solid var(--trait); min-width: 0;
}
.case dt { font-size: 12.5px; color: var(--encre-2); }
.case dd {
margin: 0; font-size: 15.5px; font-weight: 500; color: var(--encre);
overflow-wrap: anywhere; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px;
}
.case dd.chiffre { font-family: var(--mono); font-size: 14.5px; font-variant-numeric: tabular-nums; }
/* Dans une case en flex, un formulaire « inline » devient un bloc avec sa
propre ligne, et son bouton descend sous la valeur. « contents » efface le
formulaire de la mise en page : le bouton s'aligne au centre comme la valeur. */
.case dd form { display: contents; }
.case dd .etiq { font-size: 10px; font-family: var(--mono); }
.case dd .creux.petit, .case .depuis { font-family: var(--sans); }
.case dd .creux.petit { white-space: nowrap; }
/* Une valeur absente ne se dit pas en phrase, quinze fois de suite. */
.non {
font-family: var(--mono); font-size: 11px; letter-spacing: .06em;
text-transform: uppercase; color: var(--encre-3); font-weight: 400;
}
.case.vide dd { color: var(--encre-3); }
.case-vide { margin: 0; padding: 11px 0; font-size: 14px; }
.case .depuis { flex-basis: 100%; font-size: 11.5px; font-weight: 400; color: var(--encre-3); }
/* La reference de droit, repliee sous l'identite : on l'ouvre quand on la
cherche. */
.repli > summary {
cursor: pointer; font-size: 13.5px; color: var(--encre-2); list-style: none;
padding: 10px 0; border-top: 1px solid var(--trait); border-bottom: 1px solid var(--trait);
}
.repli > summary::-webkit-details-marker { display: none; }
.repli > summary::before { content: "›"; display: inline-block; margin-right: 8px; transition: transform .15s; }
.repli[open] > summary::before { transform: rotate(90deg); }
.repli > summary:hover { color: var(--vert); }
.repli .cadre-table { margin-top: 10px; }
.repli p, .repli ul { font-size: 14px; }
/* L'onglet des exercices : le titre et ses gestes sur une ligne, le dossier
au bout de chaque ligne, la zone de depot sous son bouton. */
.entete-liste {
display: flex; align-items: flex-end; justify-content: space-between; gap: 12px;
border-bottom: 1px solid var(--trait); padding-bottom: 7px;
}
.entete-liste h2 { border-bottom: 0 !important; padding-bottom: 0 !important; }
.entete-liste .gestes { align-items: center; }
table.exercices td.geste { text-align: right; white-space: nowrap; }
.depot-passe {
background: var(--surface); border: 1px solid var(--trait); border-radius: 8px;
padding: 16px 20px 6px;
}
.depot-passe form > p:first-child { margin-top: 0; }
.bulle > summary[title] { color: var(--encre-3); }
.bulle > summary:hover { color: var(--vert); }
/* Un bouton qui se lit comme un lien : « creer l'exercice vide ». */
button.lien {
background: none; border: 0; padding: 0; color: var(--vert); font: inherit;
text-decoration: underline; cursor: pointer;
}
button.lien:hover { background: none; color: var(--encre); }
.depot-passe .avance-zone { max-width: 220px; }
.depot-passe input[name=exercice] { width: 90px; }
/* T-491 · l'ecran court d'un exercice repris. La lecture proposee y garde
sa carte, sans la colonne du fil autour. */
.repris .lecture-du-passe .carte-q { margin: 0; }
.repris .lecture-du-passe .lecture-lue-defile { max-height: none; }
table.exercices tr.repris td { color: var(--encre-2); }
table.exercices tr.repris td:first-child { color: var(--encre); }
table.exercices .etiq { margin-left: 6px; vertical-align: 1px; }
/* T-464 · le champ du motif qu'un refus a nomme se signale en rouge. */
input.a-remplir, textarea.a-remplir { border-color: var(--brique) !important; box-shadow: 0 0 0 2px var(--brique-pale); }
.porte .panne { color: var(--brique); background: var(--brique-pale); border-color: var(--brique); }
/* T-498 · les deux boutons sous le tableau lu, cote a cote, le plein a gauche. */
.lecture-lue .pied-lecture { margin-top: 12px; gap: 10px; }
.lecture-lue .pied-lecture button.creux { background: transparent; color: var(--vert); border-color: var(--trait-fort); }
.lecture-lue .pied-lecture button.creux:hover { background: var(--vert-pale); border-color: var(--vert); }
.lecture-lue .pied-lecture button[disabled] { opacity: .5; cursor: default; }
/* T-503 · une zone a plusieurs fichiers : une ligne par fichier, son poids,
« Retirer » au bout, et « Ajouter un autre fichier » a cote du choix. */
.depot-zone .ajouter { font-weight: 500; background: transparent; color: var(--vert); border: 1px solid var(--trait-fort); }
.depot-zone .ajouter:hover { background: var(--vert-pale); border-color: var(--vert); }
.depot-zone .fichiers {
flex-basis: 100%; list-style: none; margin: 4px 0 0; padding: 0;
display: flex; flex-direction: column; gap: 2px;
}
.depot-zone .fichiers li {
display: flex; align-items: center; justify-content: space-between; gap: 10px;
padding: 5px 8px; border-radius: 6px; background: var(--surface); font-size: 13px;
}
.depot-zone .fichiers .oter {
font: inherit; font-size: 12px; color: var(--encre-2); background: none; border: 0;
padding: 0; cursor: pointer; text-decoration: underline;
}
.depot-zone .fichiers .oter:hover { color: var(--brique); background: none; }
.depot-zone .choisi[hidden] { display: none; }
/* T-400 · la reponse brute du modele, telle quelle, qui defile. */
pre.brut { background: var(--surface); border: 1px solid var(--trait); border-radius: 6px; padding: 12px 14px; font-size: 12px; overflow-x: auto; max-height: 60vh; }
/* T-505 · la fleche qui referme une question rouverte, en haut a gauche. */
.carte-q .annuler-q { display: inline-block; font-size: 12.5px; color: var(--encre-2); text-decoration: none; margin-bottom: 6px; }
.carte-q .annuler-q:hover { color: var(--vert); text-decoration: underline; }
/* T-501 · un controle qui compare a l'an dernier se deplie sur ses deux
colonnes, sans recharger. */
.bandeau-etape .controle-details { border-bottom: 1px solid var(--trait); }
.bandeau-etape .controle-details > summary { list-style: none; cursor: pointer; border-bottom: 0; }
.bandeau-etape .controle-details > summary::-webkit-details-marker { display: none; }
.bandeau-etape .controle-details[open] > summary .go { color: var(--vert); }
.bandeau-etape .controle-details .deux-colonnes {
display: grid; grid-template-columns: 1fr 1fr; gap: 6px 24px; padding: 4px 0 8px 28px;
}
.bandeau-etape .controle-details h4 {
font-family: var(--mono); font-size: 10px; letter-spacing: .1em; text-transform: uppercase;
color: var(--encre-3); margin: 0 0 4px; font-weight: 500;
}
.bandeau-etape .controle-details .composante {
display: flex; flex-direction: column; gap: 1px; padding: 5px 8px; border-radius: 6px;
background: var(--surface); text-decoration: none; color: var(--encre); font-size: 12.5px; margin: 0 0 4px;
}
.bandeau-etape .controle-details .composante b { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.bandeau-etape .controle-details .composante small { color: var(--encre-3); font-size: 11px; }
.bandeau-etape .controle-details a.composante:hover { background: var(--vert-pale); }
.bandeau-etape .controle-details .aller { display: inline-block; font-size: 12px; margin: 0 0 8px 28px; }
/* T-439 · le repli qui ferme une anomalie, les quatre raisons en boutons. */
.bandeau-etape .fermer-anomalie { padding: 0 0 6px 28px; border-bottom: 1px solid var(--trait); }
.bandeau-etape .fermer-anomalie > summary { list-style: none; cursor: pointer; font-size: 12px; color: var(--encre-2); padding: 3px 0; }
.bandeau-etape .fermer-anomalie > summary::-webkit-details-marker { display: none; }
.bandeau-etape .fermer-anomalie > summary::before { content: "› "; }
.bandeau-etape .fermer-anomalie[open] > summary::before { content: "▾ "; }
.bandeau-etape .fermer-anomalie > summary:hover { color: var(--vert); }
.bandeau-etape .fermer-anomalie .raisons { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 4px; }
.bandeau-etape .fermer-anomalie .raisons .btn { font-size: 12px; padding: 4px 10px; }
/* =========================================================================
T-521 · LE FIL DE QUESTIONS SUR LA PLANCHE « Refonte fiche société »,
`maquette/design/Le fil de questions.dc.html`, cadre 6a. Othmane, le
2026-09-12 : « garde exactement le même design, ne change absolument rien,
les mêmes animations ». Chaque valeur vient de la planche, à la virgule ;
les couleurs passent par les dix noms de la charte, qui portent les mêmes
hex. Tout est sous `.v2` : ce qui précède reste pour les autres écrans.
========================================================================= */
/* Othmane, le 2026-09-12, dernière correction : **la page ne défile pas.**
Le fil a sa fenêtre, qui défile chez elle ; la question ne défile pas, sauf
ses tableaux, qui défilent dans leur cadre. */
.page.nue.v2 { height: calc(100dvh - 53px); display: flex; flex-direction: column; overflow: hidden; }
.ecran-mission.v2 { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; }
.ecran-mission.v2 .tete { position: static; flex: none; display: block; border: 0; box-shadow: none; background: transparent; z-index: auto; }
/* ---- la tête ---- */
.ecran-mission.v2 .chapeau-mission {
background: var(--mz-surface); border-bottom: 1px solid var(--mz-trait);
padding: 10px 28px 10px; display: grid; grid-template-columns: minmax(0, 1fr) fit-content(50%);
gap: 8px 24px; align-items: center;
}
/* T-604 · un cinquième bouton dans le chapeau : les boutons passent sur deux
lignes avant que le titre ne se casse. */
.ecran-mission.v2 .qui-quoi { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.ecran-mission.v2 .miettes .ariane, .ecran-mission.v2 .miettes .ariane a {
font-family: var(--sans); font-size: 12.5px; color: var(--mz-encre-tenue); text-decoration: none;
}
.ecran-mission.v2 .miettes .ariane .sep { margin: 0 5px; color: var(--mz-trait-fort); }
.ecran-mission.v2 .miettes .ariane .ici { color: var(--mz-encre-douce); font-weight: 500; }
.ecran-mission.v2 h1 {
font-family: var(--serif); font-size: 24px; font-weight: 600; line-height: 1.16;
letter-spacing: -.02em; margin: 0;
}
.ecran-mission.v2 .puces-mission { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 0; }
.ecran-mission.v2 .puce-m {
font-family: var(--sans); font-size: 12px; font-weight: 500; font-variant-numeric: tabular-nums;
color: var(--mz-encre-douce); background: var(--mz-champ); border-radius: 999px; padding: 4px 10px;
}
.ecran-mission.v2 .puce-m.ambre { color: var(--mz-ambre-fonce); background: var(--mz-ambre-clair); }
.ecran-mission.v2 .gestes { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; align-items: center; }
.ecran-mission.v2 .gestes .btn, .ecran-mission.v2 .pied-q .btn, .ecran-mission.v2 .passer-q > summary {
font: inherit; font-size: 13px; font-weight: 600; color: var(--mz-vert);
background: var(--mz-surface); border: 1px solid var(--mz-trait-fort); border-radius: 999px;
padding: 8px 14px; cursor: pointer; white-space: nowrap; text-decoration: none;
display: inline-flex; align-items: center; gap: 6px;
transition: background .15s ease, border-color .15s ease;
}
.ecran-mission.v2 .gestes .btn:hover, .ecran-mission.v2 .pied-q .btn:hover, .ecran-mission.v2 .passer-q > summary:hover {
background: var(--mz-vert-clair); border-color: var(--mz-vert); opacity: 1;
}
.ecran-mission.v2 .gestes .btn.icone { padding: 8px 10px; }
/* ---- le rail des neuf rendez-vous : la carte s'élargit au survol ---- */
.ecran-mission.v2 .rail-rdv { padding: 10px 28px 0; display: flex; flex-direction: column; gap: 5px; }
.ecran-mission.v2 .rail-titre { display: flex; flex-wrap: wrap; align-items: baseline; gap: 12px; }
.ecran-mission.v2 .rail-titre .l { font-family: var(--mono); font-size: 10px; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; color: var(--mz-encre-tenue); }
.ecran-mission.v2 .rail-titre .mot { font-size: 12.5px; color: var(--mz-encre-tenue); }
.ecran-mission.v2 .rail {
display: flex; gap: 6px; align-items: flex-start; height: 86px;
transition: height .24s ease;
}
.ecran-mission.v2 .rail:has(.rdv:hover), .ecran-mission.v2 .rail:has(.rdv:focus-within) { height: 168px; }
.ecran-mission.v2 .rdv {
flex: 1 1 0; min-width: 0; height: 86px; background: var(--mz-surface);
border: 1px solid var(--mz-trait); border-radius: 12px; padding: 9px 11px;
display: flex; flex-direction: column; gap: 4px; cursor: default; overflow: hidden;
box-shadow: none;
transition: flex-grow .24s ease, height .24s ease, border-color .2s ease, box-shadow .2s ease;
}
.ecran-mission.v2 .rdv:hover, .ecran-mission.v2 .rdv:focus-within {
flex-grow: 2.8; height: 168px; border-color: var(--mz-vert);
box-shadow: 0 10px 26px -16px rgba(21, 32, 28, .5);
}
/* T-546 · Othmane, le 2026-09-13 : **un rendez-vous franchi se voit en vert**,
la carte entière, fond vert clair, bordure verte, numéro et titre en vert.
En retard reste rouge, sans objet reste éteint.
T-611 · Othmane, le 2026-09-14 : **le rendez-vous ouvert n'est plus
jaune.** Il est entouré d'un cadre vert, comme au survol, et rien d'autre :
ni fond, ni texte ambre. L'ambre reste à l'anneau de son rond, l'état
« en cours ». Le cadre est doublé pour rester visible sur une tuile
franchie, déjà bordée de vert. */
.ecran-mission.v2 .rdv.franchi { border-color: var(--mz-vert); background: var(--mz-vert-clair); }
.ecran-mission.v2 .rdv.franchi .n, .ecran-mission.v2 .rdv.franchi .t, .ecran-mission.v2 .rdv.franchi .t-entier { color: var(--mz-vert); }
.ecran-mission.v2 .rdv.franchi .mini { background: var(--mz-surface); }
.ecran-mission.v2 .rdv.ici { border-color: var(--mz-vert); box-shadow: 0 0 0 1px var(--mz-vert); }
.ecran-mission.v2 .rdv.ici:hover, .ecran-mission.v2 .rdv.ici:focus-within { border-color: var(--mz-vert); }
.ecran-mission.v2 .rdv-tete { display: flex; flex-direction: column; gap: 1px; min-width: 0; color: inherit; text-decoration: none; }
.ecran-mission.v2 .rdv-tete:hover { opacity: 1; }
.ecran-mission.v2 .rdv .haut { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 1px; }
.ecran-mission.v2 .rdv .n { font-family: var(--mono); font-size: 9.5px; font-weight: 600; letter-spacing: .08em; color: var(--mz-encre-tenue); }
.ecran-mission.v2 .rdv .pastille-rouge { margin-left: auto; }
.ecran-mission.v2 .rdv .puce {
width: 10px; height: 10px; border-radius: 50%; flex: none; box-sizing: border-box;
background: transparent; border: 1px solid var(--mz-eteint);
}
.ecran-mission.v2 .rdv.franchi .puce { background: var(--mz-vert-vif); border: 0; }
.ecran-mission.v2 .rdv.ici .puce { background: var(--mz-surface); border: 2.5px solid var(--mz-ambre); }
.ecran-mission.v2 .rdv.retard .puce { background: var(--mz-rouge); border: 0; }
.ecran-mission.v2 .rdv.sans .puce { background: var(--mz-champ); border: 1px solid var(--mz-trait); }
.ecran-mission.v2 .rdv .t, .ecran-mission.v2 .rdv .t-entier {
font-size: 12.5px; font-weight: 600; color: var(--mz-encre); line-height: 1.18; overflow-wrap: anywhere;
}
.ecran-mission.v2 .rdv .t-entier { display: none; }
.ecran-mission.v2 .rdv:hover .t, .ecran-mission.v2 .rdv:focus-within .t { display: none; }
.ecran-mission.v2 .rdv:hover .t-entier, .ecran-mission.v2 .rdv:focus-within .t-entier { display: block; }
.ecran-mission.v2 .rdv .bas {
font-family: var(--mono); font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase;
color: var(--mz-encre-tenue); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ecran-mission.v2 .rdv.ici .bas { color: var(--mz-ambre-fonce); }
.ecran-mission.v2 .rdv.franchi .bas { color: var(--mz-vert); }
.ecran-mission.v2 .rdv.retard .bas { color: var(--mz-rouge); }
.ecran-mission.v2 .rdv.sans { opacity: .8; }
.ecran-mission.v2 .rdv-plus {
margin-top: auto; display: flex; flex-direction: column; gap: 6px; min-width: 0;
opacity: 0; max-height: 0; overflow: hidden;
transition: opacity .18s ease, max-height .24s ease;
}
.ecran-mission.v2 .rdv:hover .rdv-plus, .ecran-mission.v2 .rdv:focus-within .rdv-plus { opacity: 1; max-height: 82px; }
.ecran-mission.v2 .rdv .quand {
font-family: var(--mono); font-size: 10.5px; font-variant-numeric: tabular-nums;
color: var(--mz-encre-tenue); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* T-611 · l'ouvert n'est plus ambre, sa ligne du bas non plus. */
/* T-599 · sur un rendez-vous sans objet, la seule ligne est le motif : elle
se lit en entier, sur plusieurs lignes, à la place des étiquettes. */
.ecran-mission.v2 .rdv.sans .quand { white-space: normal; line-height: 1.4; }
.ecran-mission.v2 .mini-etiquettes { display: flex; flex-wrap: wrap; gap: 4px; }
.ecran-mission.v2 .mini {
font: inherit; font-size: 11px; white-space: nowrap; color: var(--mz-encre);
background: var(--mz-surface); border: 1px solid var(--mz-trait-fort); border-radius: 999px;
padding: 3px 10px; cursor: pointer; text-decoration: none; display: inline-flex; align-items: center; gap: 5px;
}
.ecran-mission.v2 .mini:hover, .ecran-mission.v2 .mini.active { border-color: var(--mz-vert); background: var(--mz-vert-clair); opacity: 1; }
.ecran-mission.v2 .mini .c { font-family: var(--mono); font-size: 10px; color: var(--mz-encre-tenue); }
.ecran-mission.v2 .a-relancer, .ecran-mission.v2 .alerte-refus { margin: 16px 28px 0; }
/* ---- le tiroir du rendez-vous, depuis la droite ---- */
.ecran-mission.v2 .bandeau-voile { display: none; position: fixed; inset: 0; background: rgba(21, 32, 28, .28); z-index: 70; }
.ecran-mission.v2 .bandeau-etape {
display: none; position: fixed; top: 0; right: 0; bottom: 0; width: 520px; max-width: 92vw;
background: var(--mz-fond); border-left: 1px solid var(--mz-trait-fort);
box-shadow: -24px 0 48px -28px rgba(21, 32, 28, .5); z-index: 71;
padding: 0; max-height: none; overflow: hidden; flex-direction: column;
}
:root[data-bandeau="ouvert"] .ecran-mission.v2 .bandeau-voile { display: block; }
:root[data-bandeau="ouvert"] .ecran-mission.v2 .bandeau-etape { display: flex; }
.ecran-mission.v2 .tiroir-tete {
display: flex; align-items: flex-start; justify-content: space-between; gap: 14px;
padding: 20px 24px 16px; background: var(--mz-surface); border-bottom: 1px solid var(--mz-trait);
}
.ecran-mission.v2 .tiroir-tete .titres { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.ecran-mission.v2 .tiroir-tete .l { font-family: var(--mono); font-size: 10px; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; color: var(--mz-encre-tenue); }
.ecran-mission.v2 .tiroir-tete h2 { font-family: var(--serif); font-size: 21px; font-weight: 600; margin: 0; }
.ecran-mission.v2 .tiroir-tete h2 span[hidden] { display: none; }
.ecran-mission.v2 .fermer-tiroir {
flex: none; width: 30px; height: 30px; border: 0; border-radius: 50%;
background: var(--mz-champ); color: var(--mz-encre-douce); font: inherit; font-size: 16px; line-height: 1; cursor: pointer;
}
.ecran-mission.v2 .fermer-tiroir:hover { background: var(--mz-trait); color: var(--mz-encre); }
.ecran-mission.v2 .tiroir-corps { flex: 1 1 auto; overflow-y: auto; padding: 20px 24px 28px; display: flex; flex-direction: column; gap: 14px; }
.ecran-mission.v2 .tiroir-etat { margin: 0; display: flex; flex-direction: column; gap: 10px; }
.ecran-mission.v2 .bandeau-etape .liste {
display: flex; flex-direction: column; gap: 0; max-width: none; margin: 0; padding: 0;
background: var(--mz-surface); border: 1px solid var(--mz-trait); border-radius: 14px; overflow: hidden;
}
/* T-651 · Othmane, le 2026-09-15 : « la fenêtre des contrôles doit être
scrollable ». Le corps du tiroir défile déjà ; la liste, elle, coupe ce qui
dépasse, et un élément souple qui coupe perd sa hauteur minimale : elle
rétrécissait pour tenir et coupait la fin. Elle garde sa hauteur, le corps
défile. Les quatre listes du tiroir. */
.ecran-mission.v2 .bandeau-etape .liste { flex: none; }
.ecran-mission.v2 .bandeau-etape .liste[hidden] { display: none; }
.ecran-mission.v2 .bandeau-etape .ligne { padding: 13px 16px; border-bottom: 1px solid var(--mz-trait); font-size: 13.5px; }
.ecran-mission.v2 .bandeau-etape .ligne:last-child { border-bottom: 0; }
.ecran-mission.v2 .bandeau-etape .vide, .ecran-mission.v2 .bandeau-etape .pied-liste { padding: 13px 16px; margin: 0; font-size: 12.5px; }
.ecran-mission.v2 .bandeau-etape .zone-depot { margin: 12px 0 0; padding: 16px; border: 1px dashed var(--mz-trait-fort); border-radius: 14px; background: var(--mz-champ); }
/* T-544 · Othmane, le 2026-09-13 : « tu bloques la question et tu fais
scroller ce qu'il y a à l'intérieur ». La carte de la planche ne défile pas
et coupe ce qui dépasse : douze fichiers choisis poussaient « Déposer » hors
de l'écran. La liste des fichiers se plafonne à un tiers de l'écran et
défile seule, dans la carte comme dans le tiroir des pièces. */
.ecran-mission.v2 .carte-q .saisie.saisie-depot {
flex: 0 1 auto; min-height: 0; display: flex; flex-direction: column; align-items: stretch; flex-wrap: nowrap;
}
.ecran-mission.v2 .saisie-depot .depot-zone { flex: 0 1 auto; min-height: 0; }
.ecran-mission.v2 .saisie-depot .depot-barre { flex: none; }
.ecran-mission.v2 .saisie-depot .boutons-depot { flex: none; display: flex; flex-wrap: wrap; gap: 10px; }
.ecran-mission.v2 .depot-zone .fichiers {
flex: 0 1 auto; min-height: 0; max-height: 100%; overflow-y: auto; overscroll-behavior: contain;
padding-right: 4px;
}
/* ---- deux colonnes : la carte de la question, le fil collé à droite ---- */
.ecran-mission.v2 .deux-colonnes {
padding: 12px 28px 12px; display: grid; grid-template-columns: minmax(0, 1fr) 14px var(--fil-large, 300px);
grid-template-rows: minmax(0, 1fr); gap: 10px; align-items: stretch; min-height: 0; flex: 1 1 0;
}
.ecran-mission.v2 .poignee {
width: 14px; align-self: stretch; background: transparent; border: 0; cursor: col-resize;
display: flex; align-items: center; justify-content: center; position: static;
}
.ecran-mission.v2 .poignee .prise-poignee { width: 3px; height: 40px; border-radius: 2px; background: var(--mz-trait-fort); }
.ecran-mission.v2 .poignee:hover .prise-poignee { background: var(--mz-vert); }
/* Othmane, le 2026-09-13 : **la colonne de la question ne défile pas.** La
carte prend la place qu'il y a ; seuls ses tableaux, la lecture d'un
document et la liste des associés, défilent dans leur cadre. La chaîne de
hauteurs descend en flex jusqu'au cadre du tableau. */
.ecran-mission.v2 .etape-en-cours {
width: auto; min-width: 0; min-height: 0; overflow: hidden; background: transparent;
padding: 0; display: flex; flex-direction: column; gap: 14px; justify-content: flex-start;
}
.ecran-mission.v2 .carte-seance { flex: 0 1 auto; min-height: 0; display: flex; flex-direction: column; }
.ecran-mission.v2 .seance-barre { flex: none; }
.ecran-mission.v2 .seance-corps { flex: 0 1 auto; min-height: 0; overflow: hidden; }
.ecran-mission.v2 .seance-corps > .pose-et-alerte, .ecran-mission.v2 .seance-corps > .carte-q { flex: 0 1 auto; min-height: 0; }
.ecran-mission.v2 .pose-et-alerte > .carte-q { flex: 0 1 auto; min-height: 0; overflow: hidden; }
/* T-560 · la carte « Suggéré par un document déjà déposé » ne se comprime
pas : rétrécie avec la colonne, son bouton « Remplir » sortait de la carte
et recouvrait l'étiquette de la question en dessous. C'est la question qui
prend la place qui reste. */
.ecran-mission.v2 .seance-corps > .carte-q.lecture-suggeree { flex: none; }
.ecran-mission.v2 .lecture-lue > form, .ecran-mission.v2 .carte-q .saisie.liste { flex: 0 1 auto; min-height: 0; display: flex; flex-direction: column; }
.ecran-mission.v2 .lecture-lue > form { gap: 12px; }
.ecran-mission.v2 .lecture-lue-defile, .ecran-mission.v2 .cadre-table {
flex: 0 1 auto; min-height: 0; max-height: none; overflow: auto; overscroll-behavior: contain;
}
/* T-663 · Othmane : « les lignes du tableau que je déplie ne sont pas
scrollables ». Le cadre intérieur défilait en largeur et retenait la
molette pour lui, sans jamais la rendre au cadre du tableau, le seul qui a
de la hauteur à faire défiler. Un seul cadre défile, dans les deux sens. */
.ecran-mission.v2 .carte-q .liste-saisie-defile { overflow: visible; max-width: none; }
/* Défaut signalé par Selma le 2026-09-14 · **un tableau large défile dans sa
carte.** Le repli du tableau est une case souple : sans largeur minimale
nulle, il prenait la largeur du tableau, 2 076 pixels pour les dix colonnes
des associés d'une SARL AU. Son cadre, qui défile, prenait la même largeur
et n'avait rien à faire défiler, et la carte coupait le reste. */
.ecran-mission.v2 .carte-q .saisie.liste > details.liste-repli { min-width: 0; max-width: 100%; }
.ecran-mission.v2 .carte-q .saisie.liste .cadre-table,
.ecran-mission.v2 .carte-q .saisie.liste .liste-saisie-defile { min-width: 0; max-width: 100%; }
.ecran-mission.v2 .carte-q .pied-lecture { flex: none; }
.ecran-mission.v2 .carte-seance { background: var(--mz-surface); border: 1px solid var(--mz-trait); border-radius: 16px; overflow: hidden; }
.ecran-mission.v2 .seance-barre {
display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
padding: 10px 18px 10px 22px; background: var(--mz-champ); border-bottom: 1px solid var(--mz-trait);
}
.ecran-mission.v2 .seance-barre .l { font-family: var(--mono); font-size: 10px; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; color: var(--mz-encre-douce); }
.ecran-mission.v2 .seance-barre .mot { font-size: 12.5px; color: var(--mz-encre-douce); }
.ecran-mission.v2 .seance-barre .reste { margin-left: auto; font-family: var(--mono); font-size: 11px; color: var(--mz-encre-tenue); white-space: nowrap; }
.ecran-mission.v2 .loupe-carte {
flex: none; width: 24px; height: 24px; border: 1px solid var(--mz-trait-fort); border-radius: 6px;
background: var(--mz-surface); color: var(--mz-encre-douce); display: grid; place-items: center; cursor: pointer; padding: 0;
}
.ecran-mission.v2 .loupe-carte:hover { border-color: var(--mz-vert); color: var(--mz-vert); }
.ecran-mission.v2 .seance-corps { padding: 18px 26px 18px; display: flex; flex-direction: column; gap: 14px; }
.ecran-mission.v2 .pose-et-alerte { max-height: none; }
.ecran-mission.v2 .pose-et-alerte > .carte-q { overflow: visible; }
.ecran-mission.v2 .carte-q {
background: transparent; border: 0; border-radius: 0; padding: 0; box-shadow: none; gap: 8px;
}
.ecran-mission.v2 .carte-q > .l { font-family: var(--mono); font-size: 10.5px; font-weight: 600; letter-spacing: .08em; color: var(--mz-encre-tenue); text-transform: none; }
.ecran-mission.v2 .carte-q h3 { font-family: var(--serif); font-size: 24px; font-weight: 600; line-height: 1.25; margin: 0; }
.ecran-mission.v2 .carte-q .portee-badge {
display: inline-flex; align-self: flex-start; align-items: center; font-family: var(--mono);
font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase; background: var(--mz-champ);
color: var(--mz-encre-douce); border-radius: 999px; padding: 4px 11px;
}
.ecran-mission.v2 .carte-q .saisie { margin-top: 6px; gap: 10px; }
.ecran-mission.v2 .carte-q .saisie input[type=text], .ecran-mission.v2 .carte-q .saisie input[type=date],
.ecran-mission.v2 .carte-q .saisie input[type=number], .ecran-mission.v2 .carte-q .saisie input[type=time],
.ecran-mission.v2 .carte-q .saisie select {
font-family: var(--mono); font-size: 16px; color: var(--mz-encre); background: var(--mz-surface);
border: 1px solid var(--mz-trait-fort); border-radius: 12px; padding: 11px 15px;
}
.ecran-mission.v2 .carte-q .btn {
border-radius: 999px; padding: 10px 22px; font-size: 14px; font-weight: 600;
}
.ecran-mission.v2 .carte-q .btn-plein { background: var(--mz-vert); border-color: var(--mz-vert); color: var(--mz-surface); }
.ecran-mission.v2 .carte-q .rubriques {
display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px;
padding-top: 14px; margin-top: 6px; border-top: 1px solid var(--mz-trait);
}
.ecran-mission.v2 .carte-q .rubrique { display: flex; flex-direction: column; gap: 4px; }
.ecran-mission.v2 .carte-q .rubrique .l { font-family: var(--mono); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--mz-encre-tenue); }
.ecran-mission.v2 .carte-q .rubrique .mot { font-size: 13.5px; color: var(--mz-encre-douce); }
.ecran-mission.v2 .carte-q .rubrique .effet { color: var(--mz-vert); }
.ecran-mission.v2 .carte-q .pied-q {
display: flex; flex-wrap: wrap; align-items: flex-start; gap: 10px;
padding-top: 14px; margin-top: 6px; border-top: 1px solid var(--mz-trait);
}
.ecran-mission.v2 .pied-q .btn, .ecran-mission.v2 .passer-q > summary { color: var(--mz-encre-douce); }
.ecran-mission.v2 .pied-q .btn:hover, .ecran-mission.v2 .passer-q > summary:hover { color: var(--mz-encre); border-color: var(--mz-encre-tenue); background: var(--mz-surface); }
/* T-563 · le tiroir prend le reste de la ligne, et son bouton se range tout
à droite ; le formulaire, à cent pour cent, passe à la ligne en dessous. */
.ecran-mission.v2 .passer-q { display: flex; flex-wrap: wrap; justify-content: flex-end; flex: 1 1 0; min-width: 0; }
.ecran-mission.v2 .passer-q > summary { margin-left: auto; }
.ecran-mission.v2 .prise[hidden] { display: none; }
.ecran-mission.v2 .passer-q > summary { list-style: none; }
.ecran-mission.v2 .passer-q > summary::-webkit-details-marker { display: none; }
.ecran-mission.v2 .passer-q > form, .ecran-mission.v2 .passer-q > p { flex-basis: 100%; margin: 0; }
.ecran-mission.v2 .passer-q > form { margin-top: 10px; display: flex; flex-direction: row; flex-wrap: wrap; gap: 8px; align-items: center; justify-content: flex-start; padding: 12px 14px; background: var(--mz-champ); border-radius: 12px; }
.ecran-mission.v2 .passer-q > form label { display: flex; flex-direction: row; align-items: center; gap: 8px; margin: 0; font-size: 13px; font-weight: 500; white-space: nowrap; }
.ecran-mission.v2 .passer-q > form select, .ecran-mission.v2 .passer-q > form input { margin: 0; width: auto; font: inherit; font-size: 13.5px; border: 1px solid var(--mz-trait-fort); border-radius: 11px; padding: 8px 12px; background: var(--mz-surface); }
.ecran-mission.v2 .passer-q > form .btn { border-radius: 999px; padding: 8px 16px; font-size: 13px; }
.ecran-mission.v2 .passer-q > p { margin-top: 8px; font-size: 12.5px; color: var(--mz-encre-tenue); }
.ecran-mission.v2 .pied-q { align-items: flex-start; }
.ecran-mission.v2 .pied-q .glose { padding-top: 9px; }
.ecran-mission.v2 .pied-q .glose { margin-left: auto; font-size: 12px; color: var(--mz-encre-tenue); }
.ecran-mission.v2 .ensuite {
background: var(--mz-surface); border: 1px solid var(--mz-trait); border-radius: 16px;
padding: 16px 22px; display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
}
.ecran-mission.v2 .ensuite .l { font-family: var(--mono); font-size: 10px; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; color: var(--mz-encre-tenue); flex-basis: 100%; }
.ecran-mission.v2 .ensuite .pt { font-size: 13px; color: var(--mz-encre-douce); background: var(--mz-champ); border-radius: 999px; padding: 5px 13px; }
.ecran-mission.v2 .ensuite .pt:nth-of-type(n+4) { display: none; }
.ecran-mission.v2 .ensuite:not(:has(.pt)) { display: none; }
/* ---- le fil, collé ---- */
.ecran-mission.v2 .fil-des-reponses {
background: var(--mz-surface); border: 1px solid var(--mz-trait); border-radius: 16px; overflow: hidden;
position: static; display: flex; flex-direction: column; min-height: 0; max-height: none;
padding: 0; gap: 0; min-width: 0; flex: none;
}
.ecran-mission.v2 .fil-barre {
display: flex; align-items: center; justify-content: space-between; gap: 10px;
padding: 8px 12px 8px 16px; background: var(--mz-champ); border-bottom: 1px solid var(--mz-trait);
}
.ecran-mission.v2 .fil-barre .l { font-family: var(--mono); font-size: 10px; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; color: var(--mz-encre-douce); }
.ecran-mission.v2 .fil-barre .compte { margin-left: auto; font-family: var(--mono); font-size: 10.5px; color: var(--mz-encre-tenue); }
.ecran-mission.v2 .fil-barre.cherche .l, .ecran-mission.v2 .fil-barre.cherche .compte { display: none; }
.ecran-mission.v2 .fil-barre input[type=search] {
flex: 1; min-width: 0; font: inherit; font-size: 12.5px; color: var(--mz-encre);
background: var(--mz-surface); border: 1px solid var(--mz-trait-fort); border-radius: 8px; padding: 5px 10px; margin: 0;
}
.ecran-mission.v2 .fil-barre input[hidden] { display: none; }
.ecran-mission.v2 .fil-corps { flex: 1 1 auto; overflow-y: auto; display: flex; flex-direction: column; min-height: 0; }
.ecran-mission.v2 .fil-vide, .ecran-mission.v2 .rien-trouve { margin: 0; padding: 28px 18px; font-size: 13px; color: var(--mz-encre-tenue); }
.ecran-mission.v2 .prises { border: 0; border-radius: 0; background: transparent; flex: none; overflow: visible; }
.ecran-mission.v2 .fil-corps > * { flex: none; }
.ecran-mission.v2 .prise {
display: grid; grid-template-columns: 36px minmax(0, 1fr) auto; gap: 2px 10px;
padding: 10px 14px; border-top: 0; border-bottom: 1px solid var(--mz-trait); align-items: start;
}
.ecran-mission.v2 .prise .code { font-family: var(--mono); font-size: 10.5px; color: var(--mz-encre-tenue); padding-top: 2px; grid-column: 1; grid-row: 1 / span 4; }
.ecran-mission.v2 .prise .q { grid-column: 2; grid-row: 1; font-size: 13px; color: var(--mz-encre-douce); line-height: 1.4; }
.ecran-mission.v2 .prise .rectifier { grid-column: 3; grid-row: 1; font-family: var(--mono); font-size: 10px; letter-spacing: 0; color: var(--mz-vert); }
.ecran-mission.v2 .prise .v, .ecran-mission.v2 .prise .v-tableau {
grid-column: 2 / -1; font-family: var(--sans); font-size: 13.5px; font-weight: 600;
font-variant-numeric: tabular-nums; color: var(--mz-encre);
}
.ecran-mission.v2 .prise .v.chiffre { font-weight: 500; }
.ecran-mission.v2 .prise .par, .ecran-mission.v2 .prise .lue-dans {
grid-column: 2 / -1; font-family: var(--mono); font-size: 10px; color: var(--mz-encre-tenue); white-space: normal;
}
.ecran-mission.v2 .prise .note, .ecran-mission.v2 .prise .regles-q { grid-column: 2 / -1; }
.ecran-mission.v2 .prise.fraiche { animation: mz-pose 2s ease-out; }
.ecran-mission.v2 .prise.a-attente { background: var(--mz-champ); }
.ecran-mission.v2 .prise.a-attente .v { color: var(--mz-ambre-fonce); font-weight: 400; font-size: 10px; }
/* T-564 · Othmane, le 2026-09-13, connecté en Hanane : « aucune question ne
s'affiche ». La page ne défile jamais, et dans la chaîne des hauteurs la
carte de la question est la première à céder : dans une fenêtre basse elle
tombait à deux pixels, une barre vide sous les rendez-vous. Comme pour une
fenêtre étroite, la page défile ; le fil des réponses garde sa hauteur. */
@media (max-height: 760px) {
.page.nue.v2 { height: auto; overflow: visible; }
.ecran-mission.v2 .deux-colonnes { grid-template-rows: none; flex: 1 1 auto; }
.ecran-mission.v2 .etape-en-cours, .ecran-mission.v2 .carte-seance, .ecran-mission.v2 .seance-corps { overflow: visible; }
.ecran-mission.v2 .fil-des-reponses { max-height: 70vh; }
}
@media (max-width: 1000px) {
.ecran-mission.v2 .chapeau-mission { grid-template-columns: minmax(0, 1fr); }
.ecran-mission.v2 .deux-colonnes { grid-template-columns: minmax(0, 1fr); }
.page.nue.v2 { height: auto; overflow: visible; }
/* T-564 · une base de zéro dans une colonne à hauteur libre laissait les
deux colonnes à vingt-quatre pixels : la même barre vide qu'en fenêtre basse. */
.ecran-mission.v2 .deux-colonnes { grid-template-rows: none; flex: 1 1 auto; }
.ecran-mission.v2 .poignee { display: none; }
.ecran-mission.v2 .fil-des-reponses { max-height: 70vh; }
.ecran-mission.v2 .rail { flex-wrap: wrap; height: auto; }
.ecran-mission.v2 .rdv { flex-basis: 30%; }
}
/* Othmane, le 2026-09-13 : les textes explicatifs derrière un « ? », à côté
du titre de la question. */
.ecran-mission.v2 .bulle-q { margin-left: 8px; font-family: var(--sans); font-size: 12.5px; font-weight: 400; }
.ecran-mission.v2 .bulle-q > summary { color: var(--mz-encre-tenue); }
.ecran-mission.v2 .bulle-q > summary:hover { color: var(--mz-vert); }
.ecran-mission.v2 .bulle-q .bulle-texte { max-width: 380px; text-wrap: initial; }
.ecran-mission.v2 .bulle-q .bulle-texte .l { display: block; font-family: var(--mono); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--mz-encre-tenue); margin-top: 8px; }
.ecran-mission.v2 .bulle-q .bulle-texte .l:first-child { margin-top: 0; }
.ecran-mission.v2 .bulle-q .bulle-texte p { margin: 2px 0 0; font-size: 12.5px; color: var(--mz-encre-douce); }
.ecran-mission.v2 .passer-q .bulle { margin-left: 2px; }
/* Othmane, le 2026-09-13 : un tableau lu prend toute la largeur, sur sa
propre ligne, et une case de texte long s'écrit sur plusieurs lignes, qui
grandit avec ce qu'on tape. */
.lecture-lue-table .cases-dessous { font-size: 12.5px; color: var(--mz-encre-tenue); font-style: italic; }
.lecture-lue-table tr.cases-pleines > td { padding: 0 0 12px; border-top: 0; }
.lecture-lue-table tr.cases-pleines .cases-lues { width: 100%; table-layout: auto; }
.lecture-lue-table tr.cases-pleines .cases-lues input { width: 100%; min-width: 8ch; max-width: none; }
.lecture-lue-table textarea.texte-long, .lecture-lue-table .cases-lues textarea.texte-long {
width: 100%; min-width: 28ch; box-sizing: border-box; font: inherit; font-size: 13px; line-height: 1.4;
padding: 6px 8px; border: 1px solid var(--mz-trait-fort); border-radius: 6px; resize: vertical;
field-sizing: content; min-height: 2.6em; max-height: 14em; white-space: pre-wrap;
}
.lecture-lue-table tr.cases-pleines .cases-lues td:has(> textarea.texte-long) { width: 100%; }
/* ---- T-522 · la seconde livraison de la planche du fil ---- */
/* Le message éphémère, bibliothèque 3b : carte blanche, filet gauche de 4 px,
pastille de 20 px, quatre secondes, une croix. Un seul à la fois. */
.pop {
position: fixed; right: 24px; bottom: 24px; width: 340px; z-index: 80;
background: var(--mz-surface); border: 1px solid var(--mz-vert); border-left: 4px solid var(--mz-vert);
border-radius: 14px; padding: 14px 16px; display: flex; gap: 11px; align-items: flex-start;
box-shadow: 0 18px 40px -22px rgba(21, 32, 28, .6);
animation: pop-vit 4.6s ease forwards;
}
.pop:hover { animation-play-state: paused; }
.pop .signe {
flex: none; width: 20px; height: 20px; border-radius: 50%; background: var(--mz-vert); color: var(--mz-surface);
display: grid; place-items: center; font-size: 12px; font-weight: 600; margin-top: 1px;
}
.pop .corps { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.pop .corps b { font-size: 13.5px; color: var(--mz-encre); }
.pop .corps span { font-size: 12.5px; color: var(--mz-encre-douce); }
.pop .fermer-pop {
flex: none; margin-left: auto; width: 22px; height: 22px; border: 0; border-radius: 50%;
background: var(--mz-champ); color: var(--mz-encre-douce); font: inherit; font-size: 13px; line-height: 1; cursor: pointer;
}
.pop.ambre { border-color: var(--mz-ambre); border-left-color: var(--mz-ambre); }
.pop.ambre .signe { background: var(--mz-ambre); }
.pop.rouge { border-color: var(--mz-rouge); border-left-color: var(--mz-rouge); }
.pop.rouge .signe { background: var(--mz-rouge); }
.pop.gris { border-color: var(--mz-encre-tenue); border-left-color: var(--mz-encre-tenue); }
.pop.gris .signe { background: var(--mz-encre-tenue); }
@keyframes pop-vit {
0% { opacity: 0; transform: translateY(8px); }
6% { opacity: 1; transform: none; }
90% { opacity: 1; }
100% { opacity: 0; visibility: hidden; }
}
/* La pilule « à revalider », un bouton dans la ligne des pastilles. */
.ecran-mission.v2 .puce-m.alerte {
display: inline-flex; align-items: center; gap: 7px; font: inherit; font-family: var(--sans); font-size: 12px; font-weight: 600;
color: var(--mz-ambre-fonce); background: var(--mz-ambre-clair); border: 0; border-radius: 999px; padding: 4px 12px 4px 10px; cursor: pointer;
}
.ecran-mission.v2 .puce-m.alerte .pt { width: 7px; height: 7px; border-radius: 50%; background: var(--mz-ambre); }
.ecran-mission.v2 .puce-m.alerte:hover, .ecran-mission.v2 .puce-m.alerte.active { box-shadow: inset 0 0 0 1px var(--mz-ambre); }
.ecran-mission.v2 .puces-mission .filet { width: 1px; height: 20px; background: var(--mz-trait); align-self: center; margin: 0 4px; }
.ecran-mission.v2 .puces-mission .btn.pilule {
font: inherit; font-size: 12px; font-weight: 600; color: var(--mz-vert); background: var(--mz-surface);
border: 1px solid var(--mz-trait-fort); border-radius: 999px; padding: 4px 12px; cursor: pointer; white-space: nowrap;
display: inline-flex; align-items: center; gap: 8px; text-decoration: none;
}
.ecran-mission.v2 .puces-mission .btn.pilule:hover, .ecran-mission.v2 .puces-mission .btn.pilule.active { background: var(--mz-vert-clair); border-color: var(--mz-vert); opacity: 1; }
.ecran-mission.v2 .puces-mission .btn.pilule .badge {
font-family: var(--mono); font-size: 10.5px; font-weight: 600; color: var(--mz-ambre-fonce); background: var(--mz-ambre-clair); border-radius: 999px; padding: 1px 7px;
}
/* Le tiroir « à revalider » et le tiroir de l'équipe. */
.ecran-mission.v2 .bandeau-etape .liste.revalider, .ecran-mission.v2 .bandeau-etape .liste.equipe { background: transparent; border: 0; border-radius: 0; gap: 12px; overflow: visible; }
.ecran-mission.v2 .bandeau-etape .glose-tiroir { margin: 0; font-size: 13.5px; color: var(--mz-encre-douce); }
.ecran-mission.v2 .bandeau-etape .cadre { background: var(--mz-surface); border: 1px solid var(--mz-trait); border-radius: 14px; overflow: hidden; }
.ecran-mission.v2 .bandeau-etape .changee {
display: grid; grid-template-columns: minmax(0, 1fr) 120px 120px; gap: 4px 12px; padding: 13px 16px; border-bottom: 1px solid var(--mz-trait);
}
.ecran-mission.v2 .bandeau-etape .changee:last-child { border-bottom: 0; }
.ecran-mission.v2 .bandeau-etape .changee b { grid-column: 1 / -1; font-size: 13.5px; color: var(--mz-encre); }
.ecran-mission.v2 .bandeau-etape .changee .qui { grid-column: 1; font-family: var(--mono); font-size: 10.5px; color: var(--mz-encre-tenue); }
.ecran-mission.v2 .bandeau-etape .changee .avant { font-family: var(--mono); font-size: 12.5px; font-variant-numeric: tabular-nums; color: var(--mz-encre-tenue); text-decoration: line-through; overflow-wrap: anywhere; }
.ecran-mission.v2 .bandeau-etape .changee .apres { font-family: var(--mono); font-size: 12.5px; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--mz-encre); overflow-wrap: anywhere; }
.ecran-mission.v2 .bandeau-etape .liste.revalider .btn, .ecran-mission.v2 .bandeau-etape .equipe-form .btn { align-self: flex-start; border-radius: 999px; padding: 9px 20px; font-size: 14px; }
.ecran-mission.v2 .bandeau-etape .equipe-form { padding: 16px 18px; display: flex; flex-direction: column; gap: 14px; }
.ecran-mission.v2 .bandeau-etape .equipe-form label { display: flex; flex-direction: column; gap: 6px; font-size: 13px; font-weight: 600; color: var(--mz-encre); margin: 0; }
.ecran-mission.v2 .bandeau-etape .equipe-form select { font: inherit; font-size: 14px; font-weight: 400; color: var(--mz-encre); background: var(--mz-surface); border: 1px solid var(--mz-trait-fort); border-radius: 11px; padding: 9px 13px; width: 100%; margin: 0; }
/* Les types de question sur la planche : le texte en pleine largeur, le
montant à droite avec MAD, les choix en pilules, la liste repliée. */
.ecran-mission.v2 .carte-q .saisie input[type=text] { flex: 1 1 260px; min-width: 260px; width: auto; }
.ecran-mission.v2 .carte-q .saisie .avec-unite { flex: 0 1 auto; }
.ecran-mission.v2 .carte-q .saisie .avec-unite input[type=text] { flex: none; width: 230px; }
.ecran-mission.v2 .carte-q .saisie .unite { font-family: var(--mono); font-size: 14px; color: var(--mz-encre-tenue); }
.ecran-mission.v2 .carte-q .saisie .autre-nom input[type=text] { min-width: 200px; }
.ecran-mission.v2 .carte-q .liste-repli > summary {
list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 10px;
background: var(--mz-champ); border: 1px solid var(--mz-trait); border-radius: 12px; padding: 11px 15px; font-size: 14px; color: var(--mz-encre);
}
.ecran-mission.v2 .carte-q .liste-repli > summary::-webkit-details-marker { display: none; }
.ecran-mission.v2 .carte-q .liste-repli > summary .deplier-dit { font-family: var(--mono); font-size: 11.5px; color: var(--mz-vert); }
.ecran-mission.v2 .carte-q .liste-repli[open] > summary .deplier-dit::after { content: ""; }
.ecran-mission.v2 .carte-q .liste-repli[open] > summary { border-radius: 12px 12px 0 0; }
.ecran-mission.v2 .carte-q .liste-repli { display: flex; flex-direction: column; min-height: 0; }
/* T-552 · **la boîte du repli entre dans la chaîne.** Le navigateur range le
contenu d'un `