/* Feuille de style de l'application « Instruction des offres » (Qualipso). * * ════════════════════════════════════════════════════════════════════════════ * CE FICHIER NE PORTE **PAS** LA DIRECTION ARTISTIQUE. * * Elle vit dans `maquette.css`, chargé AVANT celui-ci, et extrait tel quel de * `maquette/demo-sequentielle.html` par `scripts/extraire_css_maquette.py`. * La maquette est ce que le client a validé : l'application ne la recopie pas, * elle la charge. Recopier faisait diverger les deux à chaque retouche — c'est * exactement ce qui était arrivé (63 sélecteurs de la maquette réécrits ici, * avec d'autres couleurs et d'autres tailles). * * Ce fichier ne contient donc plus QUE ce que la démonstration n'a pas à * porter : les écrans qu'elle ne joue pas, le panneau de preuve, les blocs du * modèle, la visite guidée, les formulaires. Aucune de ces règles ne doit * redéfinir un sélecteur de la maquette — un test le vérifie * (`test_web_maquette.py`). Pour changer une couleur, une taille ou une marge : * modifier la maquette, puis relancer le script. * ════════════════════════════════════════════════════════════════════════════ */ /* Palette d'états — chaque état porte sa teinte, son fond et sa bordure. Les teintes sont CELLES DE LA MAQUETTE, reprises par `var()` et non recopiées : si la maquette change de vert, les états changent avec elle. Seuls les fonds et les bordures sont ajoutés, pour qu'un pastel posé sur du blanc garde un contour lisible. */ :root{ --etat-action:var(--navy); --etat-action-bg:var(--tint); --etat-action-bord:#bcd9ea; --etat-fait:var(--green); --etat-fait-bg:#eff6ea; --etat-fait-bord:#c9dfc0; --etat-afaire:var(--amber); --etat-afaire-bg:#faf4e4; --etat-afaire-bord:#e6d5ab; --etat-alerte:var(--red); --etat-alerte-bg:#f9efed; --etat-alerte-bord:#e2bfba; --etat-source:var(--violet); --etat-source-bg:#f2eefa; --etat-source-bord:#d8cdee; --etat-neutre:var(--ink2); --etat-neutre-bg:#f1f4f7; --etat-neutre-bord:var(--hair2); /* alias historiques : des écrans les nomment encore */ --green-bg:var(--etat-fait-bg); --amber-bg:var(--etat-afaire-bg); --red-bg:var(--etat-alerte-bg); } /* ================= colonne de gauche ================= `.sidebar`, `.s-brand`, `.s-titre`, `.nv`, `.dot`, `.s-jour` viennent de la maquette. Ne restent ici que le pied — sortie et visite guidée — que la démonstration n'a pas, et le rendu du fil quand il ne mène nulle part. */ .sidebar .nv{text-decoration:none} .s-titre a.rf{display:inline-block;color:var(--mut);text-decoration:none} .s-titre a.rf:hover{color:var(--navy);text-decoration:underline;text-underline-offset:3px} /* Une étape inerte — sans dossier ouvert, ou avant le lancement de l'instruction : même gabarit, même place dans le fil, mais rien ne s'y passe. Le repère reste, ce qui est précisément la règle des deux mondes. */ #rail span.nv{cursor:default;opacity:.55} #rail span.nv:hover{background:none} /* Le pied de colonne : la sortie et la visite guidée. La démonstration n'a ni l'une ni l'autre, c'est le seul morceau de la colonne que l'application ajoute. */ .s-foot{margin-top:auto;border-top:1px solid var(--hair);padding:12px 18px 14px; display:flex;flex-direction:column;gap:9px;font-size:.76rem;color:var(--mut)} .s-foot a{color:var(--mut)} .s-foot a:hover{color:var(--navy);text-decoration:underline;text-underline-offset:3px} /* ================= page ================= */ /* L'en-tête de la maquette n'a rien à sa droite. Quand l'application y pose un compteur, elle passe en deux colonnes — et seulement là. Le compteur reste discret : il répète ce que le titre du bloc dit déjà, et deux lignes grasses alignées à droite tiraient l'œil avant le titre de l'écran. */ .pagehead.avec-meta{display:flex;align-items:baseline;justify-content:space-between;gap:24px} .headmeta{flex:none;text-align:right;font-size:.76rem;color:var(--mut);line-height:1.5} .headmeta b{color:var(--mut);font-weight:600} .chips{display:flex;flex-wrap:wrap;gap:6px;margin:-4px 0 20px} .chip{font-size:.81rem;font-weight:500;color:var(--ink2);background:var(--card); border:1px solid var(--hair);border-radius:6px;padding:4px 11px} .chip b{font-weight:700;color:var(--ink)} .chip.ref{color:var(--navy);border-color:#cde2ef;background:var(--tint2)}/* ================= cartes / grilles ================= */ /* La mention à droite d'un titre de carte est `.cardhead .n`, telle que la maquette la pose. Elle y tient sur une ligne (`white-space:nowrap`) ; quand l'application en écrit deux, le gabarit ajoute `.large` plutôt que de redéfinir la règle. */ .cardhead .n.large{white-space:normal;text-align:right;line-height:1.5;max-width:40ch} .cols{display:flex;gap:14px;align-items:flex-start} .cols .grow{flex:1;min-width:0} .mt{margin-top:14px} .pg{display:inline-block;font-size:.75rem;font-weight:650;color:var(--navy);background:var(--tint2); border:1px solid #cde2ef;border-radius:5px;padding:2px 8px;white-space:nowrap;cursor:pointer;margin:0 2px 2px 0} .pg:hover{background:var(--tint)} .pg.wrap{white-space:normal;max-width:100%} /* Chaque valeur porte sa formule. L'affordance reste, la boîte part : un tableau de neuf lignes portait dix-huit pastilles « f(x) » encadrées, et c'est ce qui éloignait le plus l'écran de la maquette. Un signe discret suffit à dire « cliquable », et la valeur redevient ce qu'on lit d'abord. */ .fx{display:inline;font-family:inherit;font-weight:600;color:var(--blue);opacity:.5; background:none;border:0;border-radius:0;padding:0;margin-left:5px;cursor:pointer; vertical-align:1px;font-size:0} .fx::after{content:"f(x)";font-size:.7rem;letter-spacing:.01em} .fx:hover,.fx:focus-visible{opacity:1;text-decoration:underline;text-underline-offset:2px}/* `text-decoration:none` : un bouton porté par un (« Reprendre », « Aller à l'écran Vos dossiers ») s'affichait souligné, et ne se lisait plus comme un bouton. */ .btn:hover{background:#123f58} .btn.ghost:hover{background:var(--tint2);border-color:var(--navy)} .btn[disabled]{opacity:.45;cursor:default} table.t td.sub{color:var(--mut);font-size:.8rem} table.t tr:last-child td{border-bottom:none} table.t tr.ref td{background:var(--tint2);font-weight:600} .v-ok{color:var(--green);font-weight:650} .v-warn{color:var(--amber);font-weight:650} .v-bad{color:var(--red);font-weight:650}/* Table plus large que sa carte : elle défile dans son propre cadre, jamais la page. L'ombre d'un côté n'apparaît que s'il reste quelque chose à voir de ce côté-là (dégradés « local » qui la recouvrent aux extrémités) : sans ce repère, une colonne coupée net se lit comme une colonne inexistante. */ /* tables logées dans une carte étroite : colonnes resserrées pour ne jamais déborder */ table.t.tight th,table.t.tight td{padding-left:8px;padding-right:8px} table.t.tight th:first-child,table.t.tight td:first-child{padding-left:12px} table.t.tight th:last-child,table.t.tight td:last-child{padding-right:12px} table.t.tight .tag{white-space:normal} .kvline .k .rule{display:block;font-size:.77rem;color:var(--mut);line-height:1.5;margin-top:2px} .kvline .v.soft{font-weight:550;white-space:normal;text-align:right} .note.warn b{color:var(--amber)} .note.bad b{color:var(--red)} .note.ok b{color:var(--green)} .note.blue b{color:var(--navy)} .note + .note{margin-top:8px} .legal{font-size:.78rem;color:var(--ink2);line-height:1.6;border-left:2px solid var(--navy);padding:2px 0 2px 12px} .legal b{color:var(--navy);font-weight:650} /* divulgation progressive — un seul mécanisme de repli */ .more{border-top:1px solid var(--hair)} .more>summary{cursor:pointer;padding:11px 18px;font-size:.82rem;font-weight:650; color:var(--navy);list-style:none} .more>summary::-webkit-details-marker{display:none} .more>summary::after{content:" +";font-family:Consolas,monospace} .more[open]>summary::after{content:" \2013"} .more>summary:hover{background:var(--tint2)} .more .mbody{padding:0 18px 13px;font-size:.81rem;color:var(--ink2);line-height:1.6} .more .mbody b{color:var(--ink2);font-weight:650} /* `.heroline` est défini plus bas, une seule fois : l'ancienne version — encadré bleu pleine largeur — a été retirée. Deux définitions concurrentes dans la même feuille, c'est la dernière qui gagnait, en silence. */ .tracebar{margin-top:10px;display:flex;gap:18px;flex-wrap:wrap;font-size:.79rem; color:var(--mut);padding:0 2px} .tracebar b{color:var(--ink2);font-weight:650} .mval{font-size:.81rem;color:var(--ink2);margin-bottom:6px} .mval b{font-weight:700;color:var(--ink)} .effect{font-size:.75rem;color:var(--mut);line-height:1.5;margin-top:6px} .decide>div{display:contents} .decide .ok-btn,.decide .no-btn{display:flex;align-items:center;justify-content:center; width:100%;height:100%;text-align:center} .decide .effect{align-self:start} #s8 .paper .scrollx{margin:0 -26px;padding:0;overflow-x:auto} #s8 .paper .scrollx table{min-width:0!important;width:100%;font-size:.8rem} #s8 .paper .scrollx .t td,#s8 .paper .scrollx .t th{padding-left:3px;padding-right:3px} #s8 .paper .scrollx .t th{letter-spacing:.03em} #s8 .paper .scrollx .t th:first-child,#s8 .paper .scrollx .t td:first-child{padding-left:14px} #s8 .paper .scrollx .t th:last-child,#s8 .paper .scrollx .t td:last-child{padding-right:14px} #s8 .paper .scrollx .tag{white-space:normal;display:inline-block;margin-top:2px} /* bloc rédigé par le modèle */ .mdl-blk{border:1px solid var(--hair);border-left:3px solid #8a6fc0;border-radius:8px; background:#fdfcff;padding:11px 14px} .mdl-blk .mtag{display:inline-block;font-size:.69rem;font-weight:700;letter-spacing:.07em; text-transform:uppercase;color:#6b4fa1;margin-bottom:6px} .mdl-blk p{font-size:.89rem;line-height:1.62;color:#252f38;margin:0 0 8px} .mdl-blk p:last-of-type{margin-bottom:0} .mdl-blk .mact{display:flex;gap:7px;margin-top:9px;flex-wrap:wrap} .tok{display:inline-block;font-weight:650;background:var(--tint2);border-radius:4px;padding:0 5px;color:var(--navy)} /* légende programme / modèle : une ligne discrète, au pied de page */ .legendbox{display:flex;align-items:center;gap:6px 15px;flex-wrap:wrap; font-size:.78rem;color:var(--ink2)} .pagefoot .legendbox{flex-basis:100%;margin-top:9px;padding-top:9px; border-top:1px solid var(--hair);font-size:.76rem;color:var(--mut)} .legendbox .li{display:inline-flex;align-items:center;gap:6px;white-space:nowrap} /* Pastilles de légende : rondes et franchement teintées, pour se lire d'un coup d'œil sans être confondues avec des cases à cocher. La légende est passive : le marquage des blocs du modèle est permanent, il n'y a rien à commuter. */ .legendbox .swatch{width:11px;height:11px;border-radius:50%;flex:none} .legendbox .swatch.calc{background:var(--navy);border:1px solid var(--navy)} .legendbox .swatch.mdl{background:#8a6fc0;border:1px solid #6b4fa1} /* listes latérales */ /* Le libellé d'une pièce court sur plusieurs lignes ; son étiquette doit rester en tête de bloc, sinon elle flotte au milieu du texte et paraît détachée. */ .pick{display:flex;align-items:flex-start;justify-content:space-between;gap:9px;padding:9px 14px; border-bottom:1px solid var(--hair);cursor:default} .pick>.nm{min-width:0} .pick>.tag,.pick>.v{flex:none} .pick:last-child{border-bottom:none} .pick .nm{font-size:.88rem;font-weight:600} /* Le sous-titre d'une pièce court sur plusieurs lignes : il passe en bloc. Une ÉTIQUETTE logée dans le même libellé (le motif d'un courrier, à l'étape 5) n'est pas un sous-titre : elle garde sa forme, sa taille et sa teinte d'état. */ .pick .nm span:not(.tag){display:block;font-size:.77rem;color:var(--mut);font-weight:500;margin-top:2px;line-height:1.45} .pick .nm span.tag{margin-top:2px} .pick.sel{background:var(--tint2);box-shadow:inset 2px 0 0 var(--navy)} /* vignettes s4 */ .vigrow{display:flex;gap:8px;flex-wrap:wrap;padding:12px 18px 14px} .vig{flex:1 1 calc(20% - 8px);min-width:118px;max-width:calc(25% - 6px);border:1px solid var(--hair);border-radius:8px;padding:8px 11px;background:var(--card)} .vig b{display:block;font-size:.81rem;font-weight:650;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .vig .n{font-size:1.06rem;font-weight:700;margin-top:3px} .vig .st{font-size:.73rem;margin-top:3px;display:block;line-height:1.45} .vig{cursor:pointer} .vig:hover{border-color:var(--hair2);background:var(--tint2)} .vig.sel{border-color:var(--navy);box-shadow:0 0 0 1px var(--navy);background:var(--card)} /* décision s6 */ .decide{display:grid;grid-template-rows:auto auto;grid-auto-flow:column; grid-auto-columns:1fr;column-gap:7px} .decide .ok-btn{border:1px solid var(--green);color:var(--green);background:var(--card); border-radius:7px;font-size:.84rem;font-weight:650;padding:8px 13px;cursor:pointer} .decide .ok-btn:hover{background:var(--green-bg)} .decide .no-btn{border:1px solid var(--red);color:var(--red);background:var(--card); border-radius:7px;font-size:.84rem;font-weight:650;padding:8px 13px;cursor:pointer} .decide .no-btn:hover{background:var(--red-bg)} /* rapport s8 */ .paper{max-width:730px;margin:0 auto;padding:22px 28px} .paper .sec{font-size:.72rem;font-weight:700;letter-spacing:.07em;text-transform:uppercase; color:var(--ink2);margin:20px 0 7px} .paper .sec:first-child{margin-top:0} /* cockpit spécifique */ .grouplbl{padding:12px 18px 2px;display:flex;align-items:baseline;gap:8px} .grouplbl .n{font-size:.8rem;font-weight:700;color:var(--red)} .grouplbl.g2 .n{color:var(--amber)} .task{display:flex;align-items:center;gap:16px;padding:11px 18px;border-bottom:1px solid var(--hair)} .task:last-child{border-bottom:none} .task .sev{width:7px;height:7px;border-radius:50%;flex:none} .sev.red{background:var(--red)} .sev.amb{background:var(--amber)} .task .tx{flex:1;min-width:0} .task .tx b{font-size:.94rem;font-weight:650} .task .tx p{font-size:.84rem;color:var(--ink2);margin-top:3px;line-height:1.5} .task .meta{flex:none;text-align:right;font-size:.78rem;color:var(--mut);line-height:1.5;width:158px} .act{flex:none;width:126px;text-align:right;font-size:.86rem;font-weight:650;color:var(--navy); white-space:nowrap;cursor:pointer} .act:hover{text-decoration:underline;text-underline-offset:3px} .act::after{content:" \2192"} .row2{display:grid;grid-template-columns:1fr 344px;gap:16px;align-items:start} table.t td .rk{display:inline-block;width:18px;font-size:.78rem;font-weight:700;color:var(--mut);margin-right:9px} tr.lead td{background:var(--tint2)} tr.lead td .rk{color:var(--navy)} tr.gapline td{border-bottom:none;padding:0 14px} .gapmark{display:flex;align-items:center;gap:10px;font-size:.75rem;font-weight:650;color:var(--amber)} .gapmark::before,.gapmark::after{content:"";flex:1;border-top:1px dashed var(--amber);opacity:.5} .tfoot-note{padding:11px 18px 14px;font-size:.8rem;color:var(--ink2);line-height:1.6;border-top:1px solid var(--hair)} .tfoot-note b{color:var(--ink2);font-weight:650} .pagefoot{margin:26px 0 24px;border-top:1px solid var(--hair);padding:12px 0 6px;display:flex; justify-content:space-between;gap:24px;flex-wrap:wrap;font-size:.77rem;color:var(--mut);line-height:1.55} .frontiere{margin-top:16px;display:grid;grid-template-columns:1fr 1fr 1fr;border:1px solid var(--hair); border-radius:10px;overflow:hidden;font-size:.81rem;line-height:1.55;color:var(--ink2);background:var(--card)} .frontiere div{padding:11px 16px} .frontiere div + div{border-left:1px solid var(--hair)} .frontiere b{display:block;font-size:.71rem;font-weight:700;letter-spacing:.07em;text-transform:uppercase;margin-bottom:4px} .frontiere .f1 b{color:var(--ink)} .frontiere .f2 b{color:#6b4fa1} .frontiere .f3 b{color:var(--green)} /* panneau de preuve */ .proof{position:fixed;top:0;right:0;bottom:0;width:408px;background:var(--card);border-left:1px solid var(--hair2); box-shadow:-6px 0 22px rgba(26,40,51,.09);z-index:80;display:none;flex-direction:column} .proof.on{display:flex} .proof-head{padding:15px 20px 12px;border-bottom:1px solid var(--hair);position:relative} .proof-head h4{font-size:1rem;font-weight:650;margin-top:4px} .proof-head p{font-size:.81rem;color:var(--ink2);margin-top:4px;line-height:1.55} .proof-close{position:absolute;top:12px;right:14px;width:26px;height:26px;border-radius:6px; border:1px solid var(--hair);background:var(--card);color:var(--ink2);cursor:pointer;font-size:.85rem} .proof-close:hover{background:var(--tint2)} .proof-body{padding:16px 20px;overflow:auto;flex:1} .pagemock{border:1px solid var(--hair2);border-radius:4px;background:#fff;padding:16px; box-shadow:0 2px 8px rgba(26,40,51,.06)} .pagemock .pmh{font-size:.71rem;letter-spacing:.08em;text-transform:uppercase;color:var(--mut); font-weight:700;border-bottom:1px solid var(--hair);padding-bottom:7px;margin-bottom:11px; display:flex;justify-content:space-between} .ln{height:7px;border-radius:2px;background:#eef1f4;margin-bottom:7px} .ln.s{width:60%}.ln.m{width:87%}.ln.xs{width:36%} .ln.hi{background:var(--tint);box-shadow:0 0 0 1px var(--blue)} .pagemock .cap{font-size:.77rem;color:var(--mut);margin-top:11px;line-height:1.55} .proof-body .quotebox{margin-top:12px;font-size:.84rem;color:var(--ink2);line-height:1.62; border-left:2px solid var(--blue);padding-left:11px} /* popover formule */ .pop{position:fixed;z-index:90;width:360px;background:var(--card);border:1px solid var(--hair2); border-radius:8px;box-shadow:0 6px 24px rgba(26,40,51,.13);padding:13px 15px;display:none} .pop.on{display:block} .pop .ph{font-size:.68rem;letter-spacing:.08em;text-transform:uppercase;color:var(--mut);font-weight:700;margin-bottom:7px} .pop .pf{font-family:Consolas,ui-monospace,monospace;font-size:.8rem;color:var(--navy);line-height:1.65; background:var(--tint2);border:1px solid var(--hair);border-radius:5px;padding:8px 10px;margin-bottom:8px;white-space:pre-wrap} .pop .pn{font-size:.81rem;color:var(--ink2);line-height:1.55} .pop .pclose{position:absolute;top:8px;right:10px;border:0;background:transparent;color:var(--mut);cursor:pointer;font-size:.85rem} .pop .pclose:hover{color:var(--ink)} /* ======================================================================= Socle web — ajouts à la feuille de la maquette (rien n'est retiré ci-dessus). Ces règles n'existent pas dans cockpit.html : elles couvrent ce que la maquette simulait en JavaScript (écrans commutés) ou n'avait pas (connexion, preuve rendue en image, barre d'action, messages). ======================================================================= */ /* La maquette commute ses écrans dans une seule page (`.screen{display:none}` et `.screen.on{display:block}`). Ici, un écran EST une page servie par le serveur : les gabarits posent donc toujours `class="screen on"`, et la règle de la maquette s'applique telle quelle. Rien à redéfinir. */ /* accessibilité : cible de saut et anneau de focus visible partout */ .skip{position:absolute;left:-9999px;top:0;z-index:100;background:var(--navy);color:#fff; padding:8px 14px;border-radius:0 0 8px 0;font-size:.86rem;font-weight:650} .skip:focus{left:0} a:focus-visible,button:focus-visible,summary:focus-visible,input:focus-visible, select:focus-visible,textarea:focus-visible,[tabindex]:focus-visible{ outline:2px solid var(--blue);outline-offset:2px;border-radius:4px}/* champs de saisie : la maquette n'en avait aucun */ .champ>span{display:block;font-size:.7rem;font-weight:700;letter-spacing:.11em; text-transform:uppercase;color:var(--mut);margin-bottom:6px} /* Aide d'un champ : l'intitulé dit quoi remplir, l'aide dit ce qui est attendu. */ .champ>span.aide{font-size:.79rem;font-weight:500;letter-spacing:0;text-transform:none; color:var(--mut);margin:-4px 0 6px;line-height:1.5} /* La maquette stylise `.champ textarea,.champ input` : taille, bordure, rayon, fond. Elle ignore `