/* Back-office YHB — écrit à la main, aucune chaîne de construction.
Pas de Tailwind, pas de Vite, pas de node_modules : un fichier servi tel
quel. C'est ce qui tient le mieux sur un hébergement mutualisé, et ce qui
se relit dans deux ans sans réapprendre un outil. */
/*
* Les couleurs, les fontes et les rayons vivent dans la peau —
* public/css/peaux/. Ce fichier ne décrit que la structure.
*/
* { box-sizing:border-box; }
body { margin:0; background:var(--papier); color:var(--encre); font-family:var(--sans);
font-size:15px; line-height:1.55; -webkit-font-smoothing:antialiased; }
/* ⚠️ LE LIEN PREND `--accent-encre`, PAS `--accent` — 20.10.2026.
Mesuré sur les sept peaux : `--accent` est fait pour être un FOND ou un
FILET, et deux peaux le posaient sur du texte sous le seuil AA de 4,5:1 —
yhb à 3,93 et orange à 3,07. Les cinq autres passaient, et c'est justement
ce qui rendait le défaut invisible : rien ne distingue à l'œil un 3,93 d'un
4,56.
⚠️ LE REPLI EST DANS LA VARIABLE, et c'est ce qui rend le changement sûr :
une peau qui ne déclare pas `--accent-encre` garde exactement le rendu
qu'elle avait. Seules celles qui en ont besoin en posent une.
La valeur de YHB n'est pas inventée : `accent-ink` #B7006F vient du design
system de la marque, et rend 5,74:1 sur le papier. */
a { color:var(--accent-encre, var(--accent)); text-decoration:none; }
a:hover { text-decoration:underline; }
h1 { font-size:1.6rem; font-weight:700; letter-spacing:-0.025em; margin:0; }
h2 { font-size:1.1rem; font-weight:600; letter-spacing:-0.015em; margin:0; }
p { margin:0; }
code { font-family:var(--mono); font-size:0.85em; background:var(--surface-2);
padding:0.1em 0.35em; border-radius:var(--r); }
/* ---- ossature ---- */
/* ⚠️ `minmax(0, 1fr)` ET NON `1fr` — C'EST CE QUI FAISAIT DÉBORDER TOUT L'ÉCRAN.
*Direction, 03.10.2026, capture d'un iPhone en production : « adapte pour
responsive ».* Le titre était coupé, les tuiles sortaient à droite, et les
cartes de tâches dépassaient du cadre.
Un `1fr` vaut `minmax(auto, 1fr)` : son MINIMUM est la largeur min-content
de ce qu'il contient. Une seule ligne large au fond de la page — un tableau,
un sélecteur, un titre qui refuse de se couper — suffisait donc à élargir la
colonne entière, et avec elle la page. Toutes les grilles enfants héritaient
d'une largeur qui n'existait nulle part à l'écran, et les règles mobiles
n'y pouvaient rien : elles réglaient des enfants dans un parent déjà trop
large.
`minmax(0, …)` rend ce minimum nul. La colonne cesse d'écouter son contenu,
le contenu se coupe ou défile dans SON cadre, et la page tient. */
.app { display:grid; grid-template-columns:230px minmax(0, 1fr); min-height:100vh; }
/* ---- le rail ----
Clair, large, lisible. Les catégories étaient en 0,58rem : trop petit pour
des libellés en capitales, qui perdent leur silhouette et se lisent lettre
à lettre. Elles sont remontées, et les entrées ont gagné le poids et
l'espace qui les rendent cliquables sans viser. */
.rail { background:var(--roche); color:var(--roche-encre); padding:1.5rem 0.9rem;
display:flex; flex-direction:column; gap:1.1rem;
border-right:1px solid var(--roche-trait); }
/* Le monogramme porte le dégradé signature — là où le violet a plus de force
qu'étalé sur une colonne entière. */
.rail .marque { display:flex; align-items:center; gap:0.7rem; padding:0.35rem 0.4rem;
color:inherit; text-decoration:none; border-radius:12px; }
.rail .marque:hover { background:color-mix(in srgb, var(--roche-encre) 6%, transparent);
text-decoration:none; }
.rail .monogramme { width:2.4rem; height:2.4rem; border-radius:12px;
background:var(--degrade); color:#fff; display:flex; align-items:center;
justify-content:center; flex:0 0 auto; }
.rail .monogramme svg { width:62%; height:62%; display:block; }
/* ⚠️ PLUS DE RÈGLE POUR UN SOUS-TITRE : il n'y en a plus. Le rail portait
« YHB » avec « Plateforme » en 0.62rem sous lui ; depuis le 07.10 il ne porte
que « Plateforme », et c'est cette règle-ci qui l'habille. */
.rail .marque .nom { font-weight:600; font-size:1.05rem; letter-spacing:-0.01em;
line-height:1.15; }
.rail nav { display:flex; flex-direction:column; gap:0.15rem; }
/* Les en-têtes de groupe.
Elles étaient en 0,58rem capitales : trop petit pour des capitales, qui
perdent leur silhouette et se lisent lettre à lettre. Elles gardent la
casse normale, prennent du poids, et se distinguent des entrées par la
couleur plutôt que par la taille — une hiérarchie qui se lit sans loupe. */
.rail-groupe { font-family:var(--mono); font-size:0.68rem; font-weight:500;
text-transform:uppercase; letter-spacing:0.12em; opacity:0.42;
padding:0.4rem 0.7rem; margin:0.6rem 0 0.1rem; gap:0.6rem; }
/* ══════════════════════════════════════════════════════════════════════════
UNE ICÔNE A UNE TAILLE PAR DÉFAUT — 24.09.2026
Elle n'en avait aucune : seules `.rail nav a .ico`, `.rail-groupe .ico` et
`.module-liens a .ico` en donnaient une. Toute icône posée ailleurs revenait
à la taille intrinsèque d'un SVG remplacé — 300 px — et faisait exploser la
grille qui la contenait. C'est arrivé le 24.09 sur l'accueil de section.
La règle de base ferme la famille entière de ce défaut ; les trois règles
ci-dessous continuent de l'ajuster là où elles le faisaient déjà.
══════════════════════════════════════════════════════════════════════════ */
.ico { width: 1.05rem; height: 1.05rem; flex: 0 0 auto; }
.rail-groupe .ico { width:0.95rem; height:0.95rem; flex:0 0 auto; }
.rail-groupe > span { flex:1 1 auto; }
/* Le cockpit se détache du reste : une séparation dit qu'il n'est pas du même
ordre que les modules qu'il dessert. */
.rail-principal { padding-bottom:0.6rem; margin-bottom:0.2rem;
border-bottom:1px solid var(--roche-trait); }
.rail-pli:first-child .rail-groupe { margin-top:0; }
.rail nav a { color:var(--roche-encre); padding:0.46rem 0.7rem; border-radius:10px;
font-size:0.95rem; font-weight:600; opacity:0.78; display:flex; align-items:center;
gap:0.65rem; }
.rail nav a .libelle { flex:1 1 auto; }
.rail nav a .ico { width:1.05rem; height:1.05rem; flex:0 0 auto; opacity:0.6; }
.rail nav a .compteur { font-family:var(--mono); font-size:0.68rem; padding:0.1rem 0.42rem;
border-radius:999px; background:color-mix(in srgb, var(--roche-encre) 8%, transparent);
opacity:0.75; flex:0 0 auto; }
/* L'état d'un module, au rail — discret par construction.
Il ne paraît que sur ce qui n'est pas stable : c'est un avertissement, pas
une décoration, et un avertissement qui figure partout n'avertit plus. */
.rail nav a .reserve { font-family:var(--mono); font-size:0.6rem; letter-spacing:0.04em;
text-transform:uppercase; padding:0.06rem 0.34rem; border-radius:4px;
border:1px solid color-mix(in srgb, var(--roche-encre) 22%, transparent);
opacity:0.6; flex:0 0 auto; white-space:nowrap; }
.rail nav a:hover { background:color-mix(in srgb, var(--roche-encre) 6%, transparent);
opacity:1; text-decoration:none; }
.rail nav a:hover .ico { opacity:0.85; }
.rail nav a.actif { background:color-mix(in srgb, var(--roche-encre) 9%, transparent);
opacity:1; }
.rail nav a.actif .ico { opacity:1; color:var(--accent); }
.rail .bas { margin-top:auto; font-size:0.82rem; padding:0.9rem 0.7rem 0;
border-top:1px solid var(--roche-trait); display:flex; flex-direction:column;
gap:0.4rem; }
.rail .bas .qui { display:flex; align-items:center; gap:0.6rem; }
.rail .bas .pastille { width:1.9rem; height:1.9rem; border-radius:50%;
background:color-mix(in srgb, var(--roche-encre) 10%, transparent);
display:flex; align-items:center; justify-content:center; font-size:0.7rem;
font-weight:600; flex:0 0 auto; }
.rail .bas .qui div { line-height:1.25; }
.rail .bas .qui small { display:block; opacity:0.55; font-size:0.75rem; }
.rail .bas form { margin:0; }
.rail .bas button { background:none; border:0; color:inherit; font:inherit;
padding:0; cursor:pointer; opacity:0.6; font-size:0.8rem; }
.rail .bas button:hover { opacity:1; text-decoration:underline; }
/* `min-width:0` n'est pas décoratif : un enfant de grille prend par défaut la
largeur de son CONTENU (`min-width:auto`), pas celle de sa colonne. Un
tableau de six colonnes élargissait donc `.vue`, puis `.app`, puis le
document — et sur un téléphone on balayait la page entière pour atteindre un
bouton, en perdant l'en-tête au passage. Constaté le 03.09.2026 sur iPhone,
cockpit « Mes tâches ». Ici, le débordement redescend là où il se gère. */
/* ⚠️ PLUS DE LAISSE À 1180 PX, ET DES MARGES RESSERRÉES — 24.09.2026.
*Direction : « n'hésite pas à utiliser toute la largeur du viewport à
l'intérieur, que ça s'adapte à la taille de l'écran […] resserre les
marges. »*
La borne venait de la lisibilité d'un paragraphe — 60 à 80 signes par
ligne. Elle valait quand les écrans portaient de la prose ; ils n'en
portent plus depuis que les gloses sont parties. Ce qui reste est
TABULAIRE, et un tableau ne se lit pas mieux serré au milieu d'un écran de
27 pouces : il se lit avec ses colonnes visibles.
La borne haute reste, très large : au-delà de 2200 px, une ligne de tableau
devient un trajet de l'œil d'un bord à l'autre, et on perd la ligne en
route. */
.vue { padding:1.1rem 1.4rem 3rem; max-width:2200px; min-width:0; }
/* `.vue-large` ne sert plus qu'à lever la borne haute — pour un Gantt à 52
semaines, qui veut tout l'espace qu'on lui donne. */
.vue-large { max-width:none; }
.entete { display:flex; align-items:baseline; justify-content:space-between; gap:1rem;
margin-bottom:0.9rem; flex-wrap:wrap; }
.fil { font-family:var(--mono); font-size:0.66rem; text-transform:uppercase;
letter-spacing:0.13em; color:var(--gris); margin-bottom:0.4rem; }
/* ---- tableau ---- */
/*
* Le cadre porte son rembourrage. Un tableau, lui, doit toucher les bords —
* ses propres cellules portent déjà leur espacement, et une double marge
* autour d'une grille se voit tout de suite.
*
* D'où l'annulation par marge négative : le contenu libre respire, le tableau
* saigne jusqu'au bord. C'est le défaut signalé sur le fil d'action, où les
* lignes collaient au cadre.
*/
.cadre { border:1px solid var(--trait); border-radius:var(--r); background:var(--surface);
overflow:hidden; padding:0.75rem 0.9rem; }
.cadre > .defiler { margin:0.5rem -0.9rem -0.75rem; }
.cadre > .defiler:first-child { margin-top:-0.75rem; }
.cadre > :first-child { margin-top:0; }
.cadre > :last-child { margin-bottom:0; }
.cadre > p:last-child { margin-bottom:0; }
.defiler { overflow-x:auto; }
/* ══════════════════════════════════════════════════════════════════════════
LE CALENDRIER DE LA SEMAINE S'OUVRE SUR LES HEURES OUVRÉES — 09.10.2026
══════════════════════════════════════════════════════════════════════════
*Direction : « pour le calendrier hebdo il faut voir les events de 00h00 à
24h00. Par défaut on ne voit que 8h00 - 20h00, ensuite il faut scroller. »*
La grille porte désormais les vingt-quatre heures. Sans cadre, elle ferait
une page de 82 rem : on verrait la nuit et il faudrait descendre pour
atteindre la journée de travail.
Le cadre borne donc la hauteur à douze heures — 8 h à 20 h — et le reste se
rejoint au défilement.
⚠️ LE DÉCALAGE INITIAL EST POSÉ PAR UN SCRIPT, et c'est le seul moyen : le
CSS ne sait pas ouvrir un conteneur ailleurs qu'en haut. Le script est un
confort et ne conditionne rien — sans lui, la grille s'ouvre à minuit et
tout reste atteignable. C'est la même règle que le repli du rail : « il
ajoute du confort, il ne conditionne pas l'accès ». */
.cal-sem-defile { max-height: calc(var(--h-heure, 3.4rem) * 12 + 6rem);
overflow-y: auto; overflow-x: auto; }
table { border-collapse:collapse; width:100%; font-size:0.88rem; }
thead th { text-align:left; font-family:var(--mono); font-size:0.6rem; text-transform:uppercase;
letter-spacing:0.1em; color:var(--gris); font-weight:400; padding:0.7rem 0.9rem;
background:var(--surface-2); border-bottom:1px solid var(--trait); white-space:nowrap; }
/* ⚠️ 0,42 rem ET NON 0,62 — mesuré, pas estimé. *Direction, 06.10.2026, cinq
fois : « ça prend beaucoup trop de place en hauteur ».* Les 0,62 rem haut et
bas faisaient 20 px par ligne ; sur les 90 tâches d'un cockpit, c'est 1 800 px
de rembourrage pour zéro information. Le trait du bas sépare déjà les lignes :
l'espace autour de lui ne porte rien, et c'est exactement ce que « compacter »
veut dire ici — retirer ce qui ne dit rien, pas rétrécir ce qui parle. */
/* ══════════════════════════════════════════════════════════════════════════
LE RÉPERTOIRE TIENT EN UNE LIGNE PAR TIERS — 09.10.2026
══════════════════════════════════════════════════════════════════════════
*Direction : « il faudrait compacter un petit peu plus la liste, qu'elle
tienne en une seule ligne. Ça prend trop de place. »*
Deux colonnes débordaient : la fonction, posée sous le nom, et la prochaine
action, qui s'enroulait. Sur 290 tiers, chaque ligne de trop se paie
290 fois.
⚠️ LE TEXTE ENTIER RESTE LISIBLE AU SURVOL — l'attribut `title` le porte.
Tronquer sans donner accès au reste cacherait l'information au lieu de la
ranger. */
.rep-fonction { margin-left: .4rem; }
.rep-coupe { max-width: 22rem; overflow: hidden; text-overflow: ellipsis;
white-space: nowrap; }
tbody td { padding:0.42rem 0.9rem; border-bottom:1px solid var(--trait-clair);
vertical-align:middle; }
tbody tr:last-child td { border-bottom:0; }
tbody tr:hover { background:var(--surface-2); }
td.actions { text-align:right; white-space:nowrap; }
/* ═══════════════════════════════════════════ les tableaux sur un téléphone
LE DÉFAUT N'ÉTAIT PAS QUE LE TABLEAU SOIT LARGE — C'EST QUE LA PAGE L'ÉTAIT.
Un enfant de grille prend par défaut la largeur de son contenu, pas celle de
sa colonne : `min-width:auto`. Un tableau de six colonnes élargissait donc
`.vue`, puis `.app`, puis le document — et l'on balayait la page entière
pour atteindre un bouton, en perdant l'en-tête au passage. `min-width:0`
rend la colonne maîtresse de sa largeur, et le débordement redescend là où
il se gère.
Constaté le 03.09.2026 sur iPhone, cockpit « Mes tâches ». */
@media (max-width:820px) {
/* Le filet : un tableau qui reste large défile DANS son cadre, pas dans la
page. Aucun écran n'a besoin qu'on le sache pour en profiter. */
.cadre { overflow-x:auto; }
}
/* ── Des lignes qui deviennent des fiches
Faire défiler un tableau reste un pis-aller : on lit une ligne en six
morceaux qu'on ne voit jamais ensemble. Sous 620 px, chaque ligne devient
une fiche, et chaque cellule porte son intitulé — celui de l'en-tête, qui
n'a plus lieu d'être répété en haut.
`data-libelle` et non `::before` codé en dur : l'intitulé vient du gabarit,
donc il suit le jour où la colonne change de nom. Une seconde vérité dans le
CSS aurait menti au premier renommage. */
/* ── Ce qui refuse de rétrécir, et qu'il faut borner ───────────────────────
Un `select` prend la largeur de sa plus longue option, un `input[type=date]`
celle de son format, et aucun des deux ne se coupe. Dans une carte de
390 px, ils débordaient par la droite. Mesuré sur iPhone le 03.10.2026, en
même temps que le débordement de `.app`.
`max-width:100%` suffit : ils se contentent de la place qu'il reste au lieu
de l'imposer. Posé largement plutôt que cas par cas — la règle vaut partout
où un formulaire entre dans une colonne étroite. */
@media (max-width:620px) {
select, input[type="date"], input[type="time"], input[type="email"],
input[type="text"], input[type="number"], input[type="url"], textarea {
max-width: 100%;
}
.table-fiches thead { position:absolute; width:1px; height:1px;
overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
.table-fiches, .table-fiches tbody { display:block; }
.table-fiches tbody tr { display:block; padding:0.85rem 0.9rem;
border:1px solid var(--trait); border-radius:12px; margin-bottom:0.6rem;
background:var(--surface); }
.table-fiches tbody tr:hover { background:var(--surface); }
.table-fiches tbody tr:last-child { margin-bottom:0; }
/* Même piège, même correctif : le sélecteur d'étape et les intitulés longs
imposaient leur min-content à la colonne de valeur, et la fiche sortait
de la carte. */
.table-fiches tbody td { display:grid; grid-template-columns:6.5rem minmax(0, 1fr);
gap:0.35rem 0.7rem; align-items:baseline;
padding:0.3rem 0; border:0; white-space:normal; }
.table-fiches tbody td::before { content:attr(data-libelle);
font-family:var(--mono); font-size:0.56rem; text-transform:uppercase;
letter-spacing:0.1em; color:var(--gris); }
.table-fiches tbody td:empty { display:none; }
/* Une cellule sans intitulé — la ligne « rien à afficher », qui porte un
`colspan` — ne doit pas se retrouver avec une colonne d'étiquette vide et
un texte poussé à droite. */
.table-fiches tbody td:not([data-libelle]) { display:block; }
.table-fiches tbody td:not([data-libelle])::before { content:none; }
/* Le conteneur de défilement n'a plus rien à faire défiler : sans cette
ligne, il garde une barre horizontale résiduelle sur certains moteurs. */
.table-fiches { overflow-x:visible; }
/* Le titre porte la fiche : pleine largeur, sans intitulé — on ne légende
pas ce qu'on lit en premier. */
.table-fiches tbody td:first-child { display:block; font-size:1rem;
line-height:1.35; padding-bottom:0.55rem; margin-bottom:0.3rem;
border-bottom:1px solid var(--trait-clair); }
.table-fiches tbody td:first-child::before { content:none; }
/* Les gestes reprennent toute la largeur et cessent de fuir à droite : sur
un pouce, un bouton aligné à droite d'une fiche se rate. */
.table-fiches tbody td.actions { display:block; text-align:left;
white-space:normal; padding-top:0.6rem; }
.table-fiches tbody td.actions::before { content:none; }
.table-fiches tbody td.actions form,
.table-fiches tbody td.actions > div { display:flex; flex-wrap:wrap; gap:0.4rem; }
.table-fiches tbody td.actions .bouton { min-height:40px; display:inline-flex;
align-items:center; }
}
.vide { padding:2.6rem 1rem; text-align:center; color:var(--gris); font-size:0.9rem; }
/* Un intitulé que seul un lecteur d'écran entend.
`display:none` le retirerait aussi de l'accessibilité : c'est précisément ce
qu'on ne veut pas. On le sort du flux visuel sans le sortir du document. */
.visuellement-cache { position:absolute; width:1px; height:1px; padding:0;
margin:-1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap;
border:0; }
/* L'export du procès-verbal : le sélecteur et son bouton font un seul geste,
donc un seul bloc. */
.exporter-pv { display:inline-flex; align-items:center; gap:0.4rem; }
.exporter-pv select { min-height:2.1rem; }
/* ---- étiquettes ---- */
.eti { font-family:var(--mono); font-size:0.58rem; text-transform:uppercase;
letter-spacing:0.09em; padding:0.2rem 0.42rem; border-radius:var(--r);
border:1px solid; white-space:nowrap; display:inline-block; }
.eti-neutre { color:var(--gris); border-color:var(--trait); background:var(--surface-2); }
.eti-accent { color:var(--accent-encre, var(--accent)); border-color:var(--accent); background:var(--accent-doux); }
.eti-vert { color:var(--vert); border-color:var(--vert); background:var(--vert-doux); }
.eti-ocre { color:var(--ocre); border-color:var(--ocre); background:var(--ocre-doux); }
.eti-rouge { color:var(--rouge); border-color:var(--rouge); background:var(--rouge-doux); }
/* ---- boutons ---- */
.bouton { display:inline-block; font:inherit; font-size:0.86rem; font-weight:500;
padding:0.46rem 0.9rem; border-radius:var(--r); border:1px solid var(--trait);
background:var(--surface); color:var(--encre); cursor:pointer; }
.bouton:hover { background:var(--surface-2); text-decoration:none; }
.bouton-fort { background:var(--accent); border-color:var(--accent); color:var(--sur-accent); }
/* ⚠️ UN BOUTON DÉSACTIVÉ DOIT AVOIR L'AIR DÉSACTIVÉ — 11.10.2026.
*Direction, en essayant de déposer une matière : « je peux cliquer, mais il
ne se passe rien. »* Le bouton était `disabled` pour une bonne raison —
aucun stockage privé n'est configuré — mais `.bouton` repeint tout, fond
compris : il restait rose vif et parfaitement cliquable à l'œil.
Vingt-deux boutons de l'application portent `@disabled`. AUCUN ne le
montrait. C'est la même famille que les fenêtres aux identifiants doublés :
la page répond, le bouton existe, et le clic ne fait rien. */
.bouton:disabled, .bouton[disabled] {
opacity: 0.5; cursor: not-allowed; filter: grayscale(1);
}
.bouton:disabled:hover, .bouton[disabled]:hover { background: var(--surface); }
.bouton-fort:disabled:hover, .bouton-fort[disabled]:hover { background: var(--accent); }
/* Et la raison se lit À CÔTÉ du bouton, pas seulement en haut de l'écran :
un encart lu il y a trente secondes n'explique pas un clic mort. */
.pourquoi-desactive { font-size: .82rem; color: var(--gris); margin: 0; }
/* Un bouton qui dit « ce filtre est en vigueur ».
Il n'est pas fort — il ne propose pas l'action principale, il montre un état
actif qu'on peut relâcher. D'où le fond doux plutôt que l'accent plein. */
.bouton-actif { background:var(--accent-doux); border-color:var(--accent);
color:var(--accent-encre, var(--accent)); font-weight:600; }
.bouton-fort:hover { opacity:0.9; background:var(--accent); }
.bouton-danger { color:var(--rouge); border-color:var(--rouge); background:var(--rouge-doux); }
.bouton-mini { font-size:0.78rem; padding:0.28rem 0.6rem; }
/* ---- formulaire ---- */
/* 280 px de plancher n'ouvrait la deuxième colonne qu'à partir de 600 px de
contenu : sur une fiche, les champs restaient en file indienne alors qu'il
y avait la place. 15 rem suffisent à un libellé et à son champ. */
/* ── Une date n'a pas besoin d'une demi-page.
*
* *Direction : « la date, c'est beaucoup trop large. Début et échéance, ça
* peut se coller l'un à côté de l'autre. »* Un champ de date rend toujours le
* même nombre de caractères : lui donner une colonne entière de formulaire
* laisse les deux tiers vides, et éloigne « début » de « échéance » alors
* qu'on les lit ensemble. */
input[type="date"], input[type="time"] { max-width: 11rem; }
/* Un choix court se montre, il ne se déroule pas.
*
* *Direction : « tu as le droit d'utiliser autre chose que des drop-downs,
* des boutons radio, d'autres styles de boutons. »* Une liste de trois ou
* quatre valeurs cachée derrière un menu demande un clic pour apprendre ce
* qu'elle contient — et deux pour changer d'avis. Posées côte à côte, les
* valeurs se comparent. Au-delà de cinq, le menu reste plus sage. */
.choix { display:flex; flex-wrap:wrap; gap:0.3rem; }
.choix input { position:absolute; opacity:0; width:0; height:0; }
.choix label { display:inline-flex; align-items:center; padding:0.32rem 0.7rem;
border:1px solid var(--trait); border-radius:999px; cursor:pointer;
font-size:0.84rem; line-height:1.2; background:var(--surface);
transition:border-color .12s, background .12s, color .12s; }
.choix label:hover { border-color:var(--accent); }
.choix input:checked + label { background:var(--accent-doux); border-color:var(--accent);
color:var(--accent-encre, var(--accent)); font-weight:600; }
.choix input:focus-visible + label { outline:2px solid var(--accent); outline-offset:2px; }
/* Trois issues du même examen, posées côte à côte plutôt qu'empilées.
`auto-fit` : la mise en page ne dépend pas du nombre de gestes offerts,
qui varie avec les droits et l'état de la matière. */
.gestes-cote-a-cote { display: grid; gap: .8rem;
grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr)); align-items: start; }
/* ⚠️ `.formulaire` y perd sa borne de 78 rem : dans une colonne de 19 rem,
une largeur de lecture de 1 250 px n'a plus de sens, et `max-width` sur une
piste de grille l'empêche de se réduire. */
.gestes-cote-a-cote .formulaire { max-width: none; grid-template-columns: 1fr; }
/* Le repli d'une preuve : une empreinte se vérifie, elle ne se lit pas.
Discret, et sans la flèche par défaut du navigateur, qui pèse plus que le
mot qu'elle annonce. */
.cartel-preuve { margin-top: .2rem; }
.cartel-preuve > summary { font-size: .76rem; cursor: pointer; list-style: none;
display: inline-flex; align-items: center; gap: .3rem; }
.cartel-preuve > summary::-webkit-details-marker { display: none; }
.cartel-preuve > summary::before { content: "▸"; font-size: .7em; }
.cartel-preuve[open] > summary::before { content: "▾"; }
.cartel-preuve code { word-break: break-all; }
/* ── La liste des habillages ─────────────────────────────────────────────
*Direction, 10.10.2026 : « je préfère une liste plutôt que des mètres de
gauche à droite. »*
`.choix` reste ce qu'il est — une rangée de pastilles, juste pour deux ou
trois valeurs courtes comme « Clair / Sombre ». À sept entrées dont trois
portent une fenêtre de dates, la rangée s'enroulait sur trois lignes et on
ne savait plus ce qui allait avec quoi.
Même mécanique que `.choix` : le bouton radio natif est caché, le label
porte tout. Le rond est dessiné en `::before` — sans lui, une ligne cochée
ne se distingue que par sa couleur, et une couleur seule ne suffit pas. */
.liste-choix { display:flex; flex-direction:column; gap:0; max-width:34rem; }
.liste-choix input { position:absolute; opacity:0; width:0; height:0; }
.liste-choix label { display:flex; align-items:center; gap:0.6rem;
padding:0.5rem 0.7rem; cursor:pointer; line-height:1.3;
border:1px solid transparent; border-radius:var(--r);
transition:background .12s, border-color .12s; }
.liste-choix label::before { content:""; flex:0 0 auto;
width:0.85rem; height:0.85rem; border-radius:50%;
border:1px solid var(--trait); background:var(--surface); }
.liste-choix label:hover { background:var(--surface-2); }
.liste-choix input:checked + label { background:var(--accent-doux);
border-color:var(--accent); }
.liste-choix input:checked + label::before { border:0.27rem solid var(--accent);
background:var(--surface); }
.liste-choix input:focus-visible + label { outline:2px solid var(--accent);
outline-offset:2px; }
.liste-choix .choix-nom { font-size:0.9rem; }
.liste-choix input:checked + label .choix-nom { font-weight:600; color:var(--accent); }
/* La note — fenêtre de saison, ou ce que l'automatique donne aujourd'hui.
Poussée à droite, elle aligne toutes les dates sur une colonne. */
.liste-choix .choix-note { font-size:0.76rem; color:var(--gris);
margin-left:auto; text-align:right; }
/* Le trait qui sépare le MODE des habillages. C'est un élément à part et non
une bordure du label : un label coché change de bordure, et le séparateur
aurait sauté avec. */
.liste-trait { height:1px; background:var(--trait-clair); margin:0.4rem 0.7rem; }
/* Au pouce, la note passe sous le nom : à 390 px, « Saint-Valentin » et
« 07.02 → 16.02 » sur la même ligne se touchent. */
@media (max-width: 620px) {
.liste-choix label { flex-wrap:wrap; }
.liste-choix .choix-note { width:100%; margin-left:1.45rem; text-align:left; }
}
/* ⚠️ UN FORMULAIRE A UNE LARGEUR DE LECTURE, ET CE N'EST PAS CELLE DE L'ÉCRAN.
*Direction, 11.10.2026 : « des inputs texte qui font 2 500 px de large. Ça
ne veut rien dire. Il faut mettre les boîtes les unes à côté des autres. »*
`.vue` borne la page à 2 200 px — juste pour un Gantt de 52 semaines, faux
pour un champ de saisie : un `.champ.large` prenait toute la grille et
donnait une ligne de texte de deux mètres. L'œil ne suit pas, et deux
champs côte à côte deviennent deux champs très loin l'un de l'autre.
78 rem (~1 250 px) laisse quatre colonnes de 15 rem respirer, et aucune
ligne ne dépasse ce qu'on relit sans tourner la tête. Les tableaux, les
calendriers et les gantts ne sont pas concernés : la borne est sur
`.formulaire`, pas sur la page. */
.formulaire { display:grid; grid-template-columns:repeat(auto-fit,minmax(15rem,1fr)); max-width:78rem;
gap:1.1rem 1.4rem; padding:1.4rem; }
.champ { display:flex; flex-direction:column; gap:0.34rem; }
.champ.large { grid-column:1 / -1; }
.champ label { font-size:0.82rem; font-weight:600; }
.champ label .requis { color:var(--rouge); }
.champ .aide { font-size:0.78rem; color:var(--gris); line-height:1.45; }
/* Une grille de champs POSÉE DANS UN CADRE ne se rembourre pas une seconde
fois : `.cadre` paye déjà 0.9 rem, `.formulaire` en ajoutait 1.4. On imbrique
les deux dès qu'un formulaire veut un pied hors de sa grille — sans quoi le
`border-top` du pied devient une cellule et ne traverse qu'une colonne. */
.cadre > .formulaire { padding:0; }
/* La case à cocher est le seul champ dont le libellé se lit À DROITE : la case
d'abord, la phrase ensuite. `.champ` empile en colonne, celle-ci se remet en
ligne, et son libellé reprend un poids normal — ce n'est pas un en-tête de
champ, c'est la phrase qu'on coche. */
.champ-case { display:flex; align-items:center; gap:0.5rem;
font-weight:400; cursor:pointer; }
.champ-case input { margin:0; }
/* ⚠️ CETTE ÉNUMÉRATION DOIT SUIVRE LES VUES, ET RIEN NE L'Y OBLIGEAIT.
`input[type=time]` y manquait : dix champs d'heure dans l'application
portaient l'habillage du navigateur au milieu de champs habillés, et on ne
le voyait qu'en les mettant côte à côte. *Direction, 10.10.2026, sur la
fiche d'une tâche : « ergonomiquement, le champ de texte est un tout petit
peu bizarre. »*
Aucune erreur, aucun test rouge — c'est la même famille qu'un commentaire
Blade orphelin ou une accolade en trop : une syntaxe que l'outil tolère et
qui ment. `LesChampsPortentTousLHabillageTest` compte désormais les types
employés dans les vues et exige qu'ils soient ici.
`file`, `range` et `color` restent dehors VOLONTAIREMENT : leur rendu natif
porte une fonction — le bouton « Parcourir », le curseur, la pastille — que
`background` et `padding` abîment. */
/* ⚠️ `input:not([type])` EN TÊTE, ET C'EST LE MÊME DÉFAUT QUE `time`.
*Direction, 11.10.2026 : « le texte input intitulé n'est pas bien
affiché. »* Il s'écrivait ``, sans
`type`. Le navigateur le traite comme du texte ; `input[type=text]` ne le
voit pas. Il restait nu au milieu de champs habillés.
Douze inputs de l'application étaient dans ce cas. On corrige le marquage
ET le sélecteur : le premier est juste, le second empêche que l'oubli
suivant se voie en production plutôt qu'ici. */
/* ⚠️ `url` EST ARRIVÉ LE 22.10.2026, ET L'OUBLI S'EST VU EN LIVRANT.
Les deux champs de lien de visioconférence des évènements en ligne ont été
posés en `type="url"` sans que l'énumération suive. Le défaut n'est pas
tombé à l'écriture : il est tombé à l'étape de tests de `livrer`, qui a
refusé la livraison. C'est la troisième fois que cette liste prend du
retard sur les vues — `time`, puis `:not([type])`, puis `url`.
Un champ d'URL est aussi le pire cas de la borne de largeur sous 620 px :
un lien de visio ne se coupe pas et déborderait par la droite. Les deux
règles sont complétées ensemble. */
input:not([type]),
input[type=text], input[type=email], input[type=number], input[type=date],
input[type=time], input[type=password], input[type=url], select, textarea {
font:inherit; font-size:0.9rem; padding:0.46rem 0.6rem; border:1px solid var(--trait);
border-radius:var(--r); background:var(--papier); color:var(--encre); width:100%;
}
input:focus, select:focus, textarea:focus { outline:2px solid var(--accent);
outline-offset:1px; border-color:var(--accent); }
textarea { min-height:5rem; resize:vertical; }
.bascule { display:flex; align-items:center; gap:0.5rem; }
.bascule input { width:auto; }
/* Une case à cocher tient sur la ligne de son libellé — 23.10.2026.
*Direction : « essaye de compacter les checkboxes aussi, pour être sur la
même ligne que leur label. »* `.champ` empile en colonne : quatre cases
faisaient quatre rangées de formulaire pour quatre carrés de 14 px. La
case passe devant, le libellé reprend un poids de phrase — ce n'est plus
un en-tête de champ, c'est l'étiquette de la case. */
.champ.champ-bascule { flex-direction: row; align-items: center; gap: 0.5rem; }
.champ.champ-bascule > label { order: 2; font-weight: 500; cursor: pointer; }
.champ.champ-bascule > .bascule { order: 1; }
/* ── La matrice des droits : des colonnes, et des coches de la maison
*
* *Direction, 05.10.2026 : « pour les verbes, il faut qu'ils soient un tout
* petit peu plus organisés et structurés en colonnes, parce que ça manque un
* petit peu de visibilité. Et puis les coches bleues, elles ne sont pas très
* raccords avec le design. »*
*
* Les verbes étaient posés en `flex-wrap` : chaque ligne commençait où la
* précédente avait fini, donc « modifier » ne tombait jamais sous
* « modifier ». On ne pouvait pas lire une colonne du regard — or c'est
* exactement ce qu'on fait devant une matrice : on compare un verbe d'un
* domaine à l'autre.
*
* `accent-color` suffit à tenir la coche native dans la palette : pas de
* fausse case en CSS, donc le clavier, le focus et les lecteurs d'écran
* continuent de marcher sans qu'on ait à les réécrire. */
.mx-verbes { display:grid; grid-template-columns:repeat(8, 7.3rem);
gap:0.3rem; align-items:center; }
.mx-verbes .bascule { font-size:0.84rem; min-width:0; }
/* ⚠️ `nowrap` EN PLUS DE L'ELLIPSE. Sans lui, « Retirer un consentement »
se coupait en deux lignes et faisait grandir toute la rangée — c'est ce
qui se voyait comme un défaut d'alignement le 11.10. Le titre complet
reste lisible au survol par l'attribut `title`. */
.mx-verbes .bascule span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
input[type="checkbox"] { accent-color:var(--accent); }
/* Le domaine prend ce que les verbes ne prennent pas : avec huit colonnes
fixes, il reste assez de place pour que l'explication tienne sur une ligne.
*Direction : « ne fais jamais de retour à la ligne alors qu'il y a assez de
place à droite. »* */
/* Le domaine tient sur UNE ligne : nom, code, et le « ? » qui porte le reste.
Une phrase posée sous le nom coûtait deux lignes sur vingt-trois domaines. */
/* ── L'alignement d'une ligne de matrice ─────────────────────────────────
*Direction, 07.10.2026 : « le texte ici, c'est pas très bien aligné en bas.
Le rôle, il faudrait aligner ça correctement. »* — B6.
⚠️ LA CAUSE EST `vertical-align: middle`, POSÉ SUR TOUTES LES CELLULES.
La plupart des domaines tiennent leurs verbes sur une rangée ; `Textus` en
porte sept, donc deux. Sa cellule de droite fait alors le double de
hauteur — et le nom du domaine, centré, descend d'une demi-ligne par
rapport à tous les autres. C'est la DERNIÈRE ligne du tableau, celle qu'on
regarde en dernier, et le décalage saute aux yeux.
On aligne par le HAUT : le nom du domaine retrouve la première rangée de
ses verbes, quelle que soit la hauteur de la cellule. Le rembourrage de
`.mx-verbes` compense le demi-pixel qui resterait.
⚠️ SUR CETTE MATRICE SEULEMENT. `vertical-align: middle` est juste partout
ailleurs : une cellule d'une ligne en face d'une cellule d'une ligne se lit
mieux centrée. Changer la règle globale réglerait un écran et en dérangerait
vingt. */
.mx-domaine,
.mx-domaine + td { vertical-align:top; }
.mx-domaine { white-space:nowrap; padding-top:0.55rem; }
.mx-domaine strong { font-weight:600; margin-right:0.45rem; }
.mx-domaine code { font-size:0.7rem; color:var(--gris); margin-right:0.35rem; }
@media (max-width:1280px) {
.mx-verbes { grid-template-columns:repeat(4, minmax(0, 1fr)); }
}
/* ⚠️ UNE ACCOLADE FERMANTE EN TROP VIVAIT ICI — retirée le 09.10.2026.
Les navigateurs l'ignorent silencieusement : aucun style ne manquait, rien
ne se voyait. Mais une accolade orpheline est le même piège qu'un
commentaire Blade sans ouverture — la prochaine règle collée juste au-dessus
serait tombée hors de sa requête média, et personne n'aurait su pourquoi.
`LesFeuillesDeStyleFermentCeQuElleOuvrentTest` compte désormais. */
.barre { display:flex; gap:0.6rem; padding:1rem 1.4rem; border-top:1px solid var(--trait);
background:var(--surface-2); }
/* ---- messages ---- */
/* ── Le bandeau de confirmation, resserré — 06.10.2026 ───────────────────
*Direction : « ici, c'est le message, il prend un peu trop de place.
Compacter. »*
« Enregistré. » tenait sur trois hauteurs de ligne : un rembourrage de
formulaire pour un mot. ⚠️ Le réduire n'est pas le faire disparaître — c'est
la seule confirmation qu'un geste a abouti, et un enregistrement muet fait
recommencer. Une bande fine qui se lit d'un coup d'œil, et une marge qui ne
repousse plus le contenu d'un cran entier. */
.message { padding:0.4rem 0.7rem; border-radius:var(--r); border:1px solid;
font-size:0.84rem; line-height:1.35; margin-bottom:0.7rem; }
.message-ok { color:var(--vert); border-color:var(--vert); background:var(--vert-doux); }
.message-ko { color:var(--rouge); border-color:var(--rouge); background:var(--rouge-doux); }
.erreur { font-size:0.78rem; color:var(--rouge); }
/* Un manque qui bloque un geste, en une ligne.
⚠️ IL N'EXISTE PAS DE CLASSE `.ocre` AU PREMIER NIVEAU — seulement
`.tuile-kpi.ocre`. La poser sur un paragraphe n'aurait rien donné, sans
erreur et sans test rouge : c'est le même piège que `liste-trait`, `.vide`
et `.type`, trois fois le 23.10.2026. */
.manque-bloquant { font-size:0.82rem; color:var(--ocre); font-weight:500; }
/* ---- accueil ---- */
.tuiles { display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr));
gap:1px; background:var(--trait); border:1px solid var(--trait); border-radius:var(--r);
overflow:hidden; }
.tuile { background:var(--surface); padding:1.1rem 1.2rem; display:flex;
flex-direction:column; gap:0.25rem; }
.tuile .n { font-size:1.9rem; font-weight:700; letter-spacing:-0.03em;
font-variant-numeric:tabular-nums; line-height:1; }
.tuile .q { font-family:var(--mono); font-size:0.62rem; text-transform:uppercase;
letter-spacing:0.11em; color:var(--gris); }
.tuile .d { font-size:0.79rem; color:var(--gris); line-height:1.4; margin-top:0.2rem; }
/* ---- connexion ---- */
/* ═══════════════════════════════════════════════════════════════════════════
LA PORTE — 12.10.2026
*Direction : « que la page de login soit un petit peu plus design […] un
peu au design de la constellation. Ça rendrait le truc un tout petit peu
plus sexy. »*
⚠️ ELLE NE SUIT AUCUN HABILLAGE, ET C'EST UN ARGUMENT. Avant la connexion
il n'y a pas d'utilisateur : aucune préférence n'existe encore, et ce qu'on
affichait était l'habillage par défaut, choisi par personne. Les couleurs
sont donc écrites ici, et non prises aux variables de peau — c'est le seul
endroit de la feuille où cela se justifie.
Le vocabulaire vient de `yhb-constellation`, `assets/recit.css` : l'encre
`#0E0B14`, le dégradé radial qui éclaire le centre, le verre dépoli. Mêmes
gestes, sur trois éléments au lieu de trente.
═══════════════════════════════════════════════════════════════════════ */
.connexion {
min-height:100vh; display:grid; place-items:center; padding:1.5rem;
background:radial-gradient(120% 90% at 50% 40%, #16101f 0%, #0E0B14 70%);
color:#EDE9F2;
}
.connexion .boite { width:100%; max-width:23rem; text-align:center; }
/* Le monogramme respire : c'est la seule image de l'écran, et elle porte la
maison. Le dégradé signature la remplit, comme dans la barre du haut. */
.connexion-monogramme {
display:inline-flex; align-items:center; justify-content:center;
width:3.4rem; height:3.4rem; border-radius:14px; margin-bottom:1rem;
background:linear-gradient(112deg, #E6008A 0%, #7A3FD8 100%);
color:#fff; box-shadow:0 10px 40px rgba(230, 0, 138, .22);
}
.connexion-monogramme svg { width:60%; height:60%; display:block; }
.connexion .marque { font-size:1.7rem; font-weight:700; letter-spacing:-0.03em;
margin-bottom:1.6rem; color:#FFFFFF; }
/* Verre dépoli sur l'encre, comme les cartes du récit. */
.connexion form { display:flex; flex-direction:column; gap:0.9rem; padding:1.5rem;
text-align:left; border-radius:14px;
border:1px solid rgba(255,255,255,.09);
background:rgba(27,27,34,.78); backdrop-filter:blur(10px);
box-shadow:0 18px 60px rgba(0,0,0,.45); }
.connexion form label { color:#C9C4D2; }
.connexion input { background:rgba(255,255,255,.05); border-color:rgba(255,255,255,.14);
color:#EDE9F2; }
.connexion input:focus { border-color:#E6008A; outline-color:#E6008A; }
.connexion .secondaire, .connexion a { color:#928E86; }
.connexion a:hover { color:#EDE9F2; }
.connexion .message { border-radius:10px; }
/* ═══════════════════════════════════════════════ le rail sur un téléphone
CE QUI ÉTAIT ÉCRIT ICI SUPPOSAIT UN MENU PLAT, ET IL NE L'EST PLUS.
La règle précédente passait `.rail` et `.rail nav` en `flex-direction:row`.
Ça fonctionnait quand la navigation était une simple liste de liens. Depuis
qu'elle est faite de groupes ``, `row` aligne les GROUPES côte à
côte — chacun gardant ses entrées empilées. Résultat mesuré au 03.09.2026
sur un iPhone : quatre entrées en colonne, « Gouvernance » coupé au bord de
l'écran, et le reste hors du viewport.
Le rail devient donc une barre de haut, et le menu se replie derrière un
bouton. Le bouton pose `hidden` sur `.rail-corps` ; tout le reste en découle.
`display:contents` sur `.rail-corps` en écran large : le conteneur existe
dans le HTML pour donner une prise au bouton, mais il ne doit pas s'insérer
dans la colonne flex du rail, sinon `nav` et `.bas` cessent d'en être les
enfants directs et l'espacement s'effondre. */
.rail-tete { display:contents; }
.rail-corps { display:contents; }
.rail-bascule { display:none; }
@media (max-width:820px) {
/* ⚠️ `minmax(0, 1fr)` ET NON `1fr`, MÊME SEULE. Mesuré sur iPhone le
06.10.2026 : avec un `1fr` nu, la page faisait 733 px de large dans un
écran de 390. Un `1fr` vaut `minmax(auto, 1fr)`, dont le minimum est la
largeur min-content du contenu — une colonne unique n'y change rien. */
.app { grid-template-columns:minmax(0, 1fr); }
/* La barre du haut colle en haut : sur une liste longue, remonter chercher
le menu au début du document coûte un balayage entier. */
.rail { position:sticky; top:0; z-index:30; display:block;
padding:0.55rem 0.9rem; border-right:0;
border-bottom:1px solid var(--roche-trait); }
.rail-tete { display:flex; align-items:center; justify-content:space-between;
gap:0.75rem; }
.rail-tete .marque { padding:0.2rem 0.3rem; }
.rail .monogramme { width:2rem; height:2rem; border-radius:10px; }
/* 44 px de côté : la cible tactile en deçà de laquelle on vise au lieu de
toucher. Ce n'est pas une marge de confort, c'est le seuil. */
.rail-bascule { display:inline-flex; align-items:center; gap:0.45rem;
min-height:44px; padding:0.5rem 0.8rem; border-radius:10px;
border:1px solid var(--roche-trait); background:transparent;
color:inherit; font:inherit; font-size:0.85rem; font-weight:600;
cursor:pointer; }
.rail-bascule svg { width:1.15rem; height:1.15rem; flex:0 0 auto; }
.rail-bascule[aria-expanded="true"] { background:color-mix(in srgb, var(--roche-encre) 8%, transparent); }
.rail-corps { display:block; margin-top:0.7rem;
max-height:calc(100vh - 5rem); overflow-y:auto; }
.rail-corps[hidden] { display:none; }
.rail nav { flex-direction:column; gap:0.15rem; }
.rail .bas { margin-top:0.8rem; }
/* Les entrées deviennent des cibles tactiles, pas des lignes de liste. */
.rail nav a, .rail-groupe { min-height:44px; align-items:center; }
.rail nav a { padding:0.6rem 0.7rem; font-size:1rem; }
.vue { padding:1.2rem 1rem 3rem; }
}
/* ---- tableau kanban ---- */
.colonnes { display:grid; grid-template-columns:repeat(4,minmax(210px,1fr)); gap:0.8rem;
align-items:start; overflow-x:auto; padding-bottom:0.5rem; }
.colonne { background:var(--surface-2); border:1px solid var(--trait); border-radius:var(--r);
display:flex; flex-direction:column; min-width:210px; }
.colonne header { display:flex; align-items:center; justify-content:space-between;
padding:0.6rem 0.8rem; border-bottom:1px solid var(--trait);
font-family:var(--mono); font-size:0.64rem; text-transform:uppercase;
letter-spacing:0.11em; color:var(--gris); }
.colonne header .compte { font-variant-numeric:tabular-nums; }
.colonne .pile { display:flex; flex-direction:column; gap:0.5rem; padding:0.6rem; }
.carte-k { background:var(--surface); border:1px solid var(--trait); border-radius:10px;
padding:0.65rem 0.7rem; display:flex; flex-direction:column;
/* 0.4 et non 0.32 depuis le 22.09.2026 : la carte n'a plus cinq lignes
mais trois étages, et trois étages respirent. */
gap:0.4rem;
transition:border-color 120ms ease; }
.carte-k .haut { display:flex; flex-wrap:wrap; gap:0.25rem; }
.carte-k .titre { font-size:0.86rem; font-weight:600; line-height:1.35; color:var(--encre); }
.carte-k .titre:hover { color:var(--accent); }
.carte-k .meta { font-size:0.74rem; color:var(--gris); }
.carte-k .deplacer { margin-top:0.25rem; }
.carte-k .deplacer select { font-size:0.74rem; padding:0.22rem 0.35rem; }
.colonne .rien { padding:1.1rem 0; text-align:center; color:var(--gris); font-size:0.8rem; }
/* ---- glisser-déposer kanban : signaux discrets ---- */
.carte-k[draggable="true"] { cursor:grab; }
.carte-k[draggable="true"].carte-porteuse { opacity:0.4; }
.colonne.colonne-cible { outline:2px dashed var(--accent); outline-offset:-2px; }
@media (max-width:900px) { .colonnes { grid-template-columns:repeat(2,minmax(210px,1fr)); } }
@media (max-width:560px) { .colonnes { grid-template-columns:1fr; } }
.colonne .sens { padding:0 0.8rem 0.55rem; font-size:0.72rem; color:var(--gris);
line-height:1.35; border-bottom:1px solid var(--trait); margin-bottom:0; }
/* ---- planning (Gantt) ---- */
/*
* ⚠️ LA LARGEUR DU DIAGRAMME SUIT LE NOMBRE DE SEMAINES, et c'est ce qui rend
* le défilement possible.
*
* *Direction, 25.09.2026 : « pour le gantt, j'aimerais pouvoir scroller
* horizontalement pour me déplacer. Actuellement, ce n'est pas possible. »*
*
* Elle avait raison, et la cause n'était pas le conteneur : `.defiler` porte
* bien `overflow-x:auto` depuis toujours. C'était qu'IL N'Y AVAIT RIEN À FAIRE
* DÉFILER. Avec un `min-width` fixe de 820 px, une fenêtre de 52 semaines ne
* débordait pas — elle se COMPRIMAIT, chaque semaine tombant à quinze pixels.
* Le planning devenait illisible au lieu de devenir long, et `overflow-x`
* n'avait aucun débordement à gérer.
*
* 3,4rem par semaine : de quoi lire un repère hebdomadaire sans qu'il se
* chevauche avec le suivant. Le `max()` garde le plancher historique pour les
* fenêtres courtes.
*/
.gantt { min-width:max(820px, calc(20rem + var(--semaines, 10) * 3.4rem));
font-size:0.84rem;
--largeur-semaine:calc((100% - 20rem) / var(--semaines, 10)); }
.gantt-entete { display:grid; grid-template-columns:20rem 1fr; align-items:end;
padding:0.5rem 0.9rem 0.6rem; border-bottom:1px solid var(--trait);
background:var(--surface-2); position:sticky; top:0; z-index:2; }
.gantt-entete .gantt-piste { height:1.2rem; }
.repere { position:absolute; transform:translateX(-50%); font-family:var(--mono);
font-size:0.62rem; color:var(--gris); white-space:nowrap; }
.gantt-flux { font-family:var(--mono); font-size:0.62rem; text-transform:uppercase;
letter-spacing:0.12em; color:var(--gris); padding:1rem 0.9rem 0.3rem;
position:sticky; left:0; width:max-content; }
/*
* Le regroupement visuel — un bloc par initiative (ou marque, ou « Maison »).
*
* Le liseré gauche coloré porte l'identité du groupe : la couleur est stable
* pour un même nom, calculée par hash côté contrôleur, avec saturation et
* luminance fixes pour rester lisible en clair comme en sombre sans
* concurrencer l'accent magenta. Les libellés y sont indentés d'un cran,
* l'en-tête reçoit un fond très léger teinté par cette même couleur. On
* distingue ainsi d'un coup d'œil ce qui va ensemble, même quand deux
* groupes se suivent dans le même value stream.
*
* L'en-tête et le bandeau de flux reçoivent un liseré transparent de même
* largeur : sans quoi leurs pistes (les repères de dates, la barre du jour)
* décaleraient de 3 pixels par rapport à celles des lignes.
*/
.gantt-entete, .gantt-flux { border-left:3px solid transparent; }
.gantt-bloc { border-left:3px solid var(--gr, var(--trait)); }
.gantt-bloc + .gantt-bloc { margin-top:0.35rem; }
.gantt-groupe { font-weight:600; font-size:0.88rem; padding:0.4rem 0.9rem 0.35rem;
display:flex; align-items:baseline; gap:0.6rem;
position:sticky; left:0; width:max-content; }
.gantt-bloc .gantt-groupe {
background:color-mix(in srgb, var(--gr, var(--gris)) 9%, transparent);
border-bottom:1px solid var(--trait-clair); }
.gantt-groupe span { font-family:var(--mono); font-size:0.66rem; color:var(--gris);
font-weight:400; }
.gantt-ligne { display:grid; grid-template-columns:20rem 1fr; align-items:center;
padding:0.2rem 0.9rem; border-bottom:1px solid var(--trait-clair);
/* Opaque, pour que `.gantt-libelle` puisse en hériter et couvrir les barres
qui passent dessous pendant le défilement horizontal. */
background:var(--surface); }
.gantt-ligne:hover { background:var(--surface-2); }
/*
* La colonne des noms ne part pas avec le défilement.
*
* Conséquence directe du point ci-dessus : une fois que le diagramme dépasse
* l'écran, défiler jusqu'à mars sans savoir de quel projet il s'agit ne sert à
* rien. `sticky` la retient à gauche ; le fond est obligatoire, sans quoi les
* barres défileraient en transparence par-dessous.
*/
.gantt-libelle { display:flex; align-items:center; gap:0.45rem; padding-right:1rem;
overflow:hidden; position:sticky; left:0; z-index:1; background:inherit; }
.gantt-bloc .gantt-libelle { padding-left:1.2rem; }
.gantt-libelle a { font-size:0.84rem; color:var(--encre); white-space:nowrap;
overflow:hidden; text-overflow:ellipsis; }
.gantt-libelle a:hover { color:var(--accent); }
/*
* Les bandes de week-end.
*
* On ne travaille pas en jours ouvrés — décision de la direction du 31.07.2026 : chez YHB
* on travaille le samedi et le dimanche, et un `lag` de trois jours posé un
* vendredi tombe le lundi, pas le mercredi. Les bandes ne changent donc aucun
* calcul ; elles répondent à un besoin de lecture, savoir où l'on est dans la
* semaine sans compter les carreaux depuis le repère le plus proche.
*
* Un dégradé répété, et non un élément par week-end : la fenêtre monte à 52
* semaines et il y a une piste par projet — ce serait plus de mille spans sur
* un planning annuel. Le dégradé s'imprime, suit le défilement horizontal, et
* ne coûte rien au DOM.
*
* La géométrie tient à ce que la fenêtre commence un lundi (`startOfWeek()`
* côté contrôleur) : les cinq premiers septièmes de chaque semaine sont
* ouvrés, les deux derniers sont le week-end. C'est la seule hypothèse que
* font ces bandes — si le début de fenêtre cessait d'être un lundi, elles se
* décaleraient.
*
* Couleur de fond et dégradé tiennent dans une seule déclaration : le dépôt
* interdit qu'une classe soit définie deux fois au premier niveau, et un
* second `.gantt-piste` aurait de toute façon écrasé le fond en silence.
*/
.gantt-piste { position:relative; height:1.6rem; border-radius:var(--r);
background:var(--surface-2)
repeating-linear-gradient(to right,
transparent 0,
transparent calc(var(--largeur-semaine) * 5 / 7),
var(--trait-clair) calc(var(--largeur-semaine) * 5 / 7),
var(--trait-clair) var(--largeur-semaine)); }
/*
* `gantt-barre`, et non `barre`.
*
* Le nom entrait en collision avec la barre d'actions des formulaires, définie
* plus haut en flex. Celle-ci, déclarée après et en position absolue, gagnait :
* les boutons Enregistrer et Annuler quittaient le pied du formulaire pour
* flotter au-dessus du fil d'ariane. Aucune erreur, juste deux règles portant
* le même nom à deux cents lignes d'écart.
*/
.gantt-barre { position:absolute; top:0.3rem; height:1rem; border-radius:2px;
background:var(--accent); }
.gantt-barre.en_cours { background:var(--accent); }
.gantt-barre.a_faire { background:var(--ocre); }
.gantt-barre.backlog { background:var(--gris); opacity:0.55; }
.gantt-barre.fait { background:var(--vert); }
.gantt-barre.sans-fin { background:repeating-linear-gradient(45deg,
var(--gris) 0 6px, transparent 6px 12px); opacity:0.6; }
.gantt-barre.en-retard { outline:2px solid var(--rouge); outline-offset:1px; }
.aujourdhui { position:absolute; top:0; bottom:0; width:2px; background:var(--rouge);
opacity:0.65; }
.date-fin { position:absolute; top:0.32rem; font-family:var(--mono); font-size:0.62rem;
color:var(--gris); white-space:nowrap; }
.hors-fenetre { position:absolute; left:0.5rem; top:0.35rem; font-size:0.7rem;
color:var(--gris); font-style:italic; }
/* ------------------------------------------------------------------
Acquisition.
Le vocabulaire visuel du module tient en trois idées : un chiffre qu'on
lit de loin, une puce qui compte, et un manque qui se voit. C'est le
troisième qui compte le plus — le cockpit actuel affiche une fiche sans
coordonnées exactement comme une fiche complète.
------------------------------------------------------------------ */
.chiffre { font-size: 1.9rem; font-weight: 500; line-height: 1.1; }
.chiffre .sur { font-size: 1rem; font-weight: 400; color: var(--gris); }
.chiffre.alerte { color: var(--rouge); }
.etiquette { font-size: 0.78rem; color: var(--gris); text-transform: none; margin-top: 0.15rem; }
.secondaire { font-size: 0.82rem; color: var(--gris); }
.jauge { height: 0.5rem; background: var(--trait); border-radius: 999px; overflow: hidden; }
.jauge span { display: block; height: 100%; background: var(--accent); }
.titre-groupe {
font-size: 0.95rem; font-weight: 500; margin: 0 0 0.6rem;
display: flex; align-items: center; gap: 0.5rem;
}
.titre-groupe .compte {
font-size: 0.75rem; color: var(--gris); background: var(--surface-2);
border-radius: 999px; padding: 0.05rem 0.45rem;
}
.puce {
display: inline-flex; align-items: center; gap: 0.3rem;
font-size: 0.78rem; padding: 0.15rem 0.5rem; border-radius: 999px;
border: 1px solid var(--trait); color: inherit; text-decoration: none;
}
.puce span { color: var(--gris); font-size: 0.72rem; }
.puce-active { border-color: var(--accent); background: var(--accent-doux); }
.puce-vide { opacity: 0.45; }
.puce-mini { font-size: 0.72rem; padding: 0.05rem 0.4rem; }
.puce-doute { border-color: var(--ocre); color: var(--ocre); }
.canal {
display: inline-block; font-size: 0.75rem; padding: 0.05rem 0.4rem;
border-radius: 4px; background: var(--surface-2); margin-right: 0.25rem;
}
.canal-doute { background: transparent; border: 1px dashed var(--ocre); color: var(--ocre); }
/* L'acquéreur — qui a encaissé pour nous. Distinct à l'œil du moyen de
paiement, parce que ce sont deux notions et que le prestataire, lui,
prélève une commission. */
.canal-acquereur { background: transparent; border: 1px solid var(--trait); color: var(--gris); }
/* Un manque n'est pas une erreur : il est signalé, pas alarmant. */
.manque { color: var(--ocre); font-size: 0.85rem; font-style: italic; }
.etat { font-size: 0.8rem; padding: 0.25rem 0.6rem; border-radius: 999px; border: 1px solid var(--trait); }
.etat-aucun { border-color: var(--rouge); color: var(--rouge); }
.etat-indirect { border-color: var(--ocre); color: var(--ocre); }
.etat-direct, .etat-verifie { border-color: var(--vert); color: var(--vert); }
/*
* Une ligne est un texte qui s'adapte et des actions qui ne bougent pas. Sans
* la contrainte, les boutons passaient à la ligne dès que le libellé
* s'allongeait, et les lignes du fil n'avaient plus la même hauteur.
*/
.ligne-canal {
display: flex; gap: 0.6rem; align-items: baseline; flex-wrap: wrap;
padding: 0.4rem 0; border-bottom: 1px solid var(--trait);
}
.ligne-canal > form,
.ligne-canal > .actions { flex: 0 0 auto; }
.ligne-actions { margin-left: auto; display: flex; gap: 0.3rem; flex: 0 0 auto; }
/*
* L'aperçu d'un logo, sur un damier.
*
* Un SVG blanc sur un fond blanc est invisible, et on ne saurait pas s'il est
* cassé ou simplement clair. Le damier est un dégradé, pas une image : rien à
* charger, et il reste juste dans les deux thèmes.
*
* Le fond suit le thème déclaré du fichier — un logo « sur fond sombre » se
* regarde sur du sombre, sinon on juge un rendu qu'on ne verra jamais.
*/
.apercu-logo {
display: inline-flex; align-items: center; justify-content: center;
width: 8rem; height: 3rem; padding: 0.3rem; border-radius: 4px;
border: 1px solid var(--trait); flex: 0 0 auto;
background-color: #fff;
background-image:
linear-gradient(45deg, rgba(0,0,0,0.06) 25%, transparent 25%),
linear-gradient(-45deg, rgba(0,0,0,0.06) 25%, transparent 25%),
linear-gradient(45deg, transparent 75%, rgba(0,0,0,0.06) 75%),
linear-gradient(-45deg, transparent 75%, rgba(0,0,0,0.06) 75%);
background-size: 12px 12px;
background-position: 0 0, 0 6px, 6px -6px, -6px 0;
}
.apercu-logo[data-theme="dark"] { background-color: #1c1c1e; }
.apercu-logo img { max-width: 100%; max-height: 100%; object-fit: contain; }
/* Un couple « ce dont on parle » + « son étiquette » ne se coupe pas en deux. */
.paire-inseparable { display: inline-flex; align-items: baseline; gap: 0.35rem;
white-space: nowrap; }
.paire-inseparable a { white-space: normal; }
.ligne-canal:last-child { border-bottom: 0; }
/* ── Réécrire un point d'ordre du jour ───────────────────────────────────
*Direction, 08.10.2026 : « on doit pouvoir éditer les items de l'ordre du
jour, pas le cas aujourd'hui ».*
Un `` dans la ligne, et rien de plus : zéro JavaScript (TR-23), le
clavier marche, et ça s'imprime déplié.
⚠️ AUCUN `position: absolute` ICI, ET C'EST VOULU. `.ligne-canal` porte déjà
`flex-wrap: wrap` : il suffit de dire que le panneau ouvert occupe toute la
rangée, et il descend de lui-même sous le point. Un panneau flottant aurait
réclamé de lever `overflow-x: auto` du `.cadre` sous 820 px — c'est le piège
du menu de profil, payé le 07.10 : un parent qui borne, et le panneau coupé.
Le ✎ passe sur sa propre ligne quand il est ouvert. C'est le prix de rester
dans le flux, et ça dit clairement lequel des points on est en train de
réécrire. */
.point-editer { flex: 0 0 auto; }
.point-editer > summary { cursor: pointer; list-style: none; }
.point-editer > summary::-webkit-details-marker { display: none; }
.point-editer[open] { flex: 1 0 100%; }
.point-editer[open] > summary { margin-bottom: 0.2rem; }
.point-editer > form label { display: block; font-size: 0.72rem; margin-bottom: 0.15rem; }
.point-editer > form input[type="text"] { width: 100%; }
/* ── Rattacher un participant à une fiche du répertoire ──────────────────
*Direction, 09.10.2026 : « est-ce que, pour les personnes que j'ai
rencontrées en événement, je peux les matcher, dire : telles personnes, je
les ai rencontrées à tel événement ? »*
Même mécanique que `.point-editer` au-dessus, et pour la même raison : un
`` dans la ligne, zéro JavaScript (TR-23), le clavier marche, ça
s'imprime déplié, et le panneau ouvert prend toute la rangée grâce au
`flex-wrap: wrap` que `.ligne-canal` porte déjà.
⚠️ UN BLOC À PART, PAS UN SÉLECTEUR AJOUTÉ À `.point-editer`. Les deux
panneaux n'ont pas le même contenu — un champ texte là-bas, un `