@import url('/public/polices/polices.css'); /* * LES JETONS DE DESIGN — DESIGN.md, traduits dans « jetons.css ». * * Importes AVANT le :root ci-dessous : tout ce que ce :root redeclare GAGNE * sur les jetons, silencieusement. * * ⚠️ DEUX JETONS ONT ETE NEUTRALISES ICI PENDANT DES MOIS. * L'echafaudage de la bascule — « brancher les jetons ne devait changer aucun * ecran » — a survecu au chantier. Les 29 vues metier portent le systeme * depuis, et pourtant : * * --rayon valait 4px partout, la ou DESIGN.md dit 12px. Les 14 regles * de « systeme.css » qui l'appellent dessinaient donc des coins * vifs, jamais les coins doux du systeme. * --gris-clair valait #9A958F, soit 2,97:1 — SOUS le seuil AA — alors que * les jetons portent #807B75 (4,54:1). Une valeur verifiee * etait ecrite dans le fichier de reference et ignoree a l'ecran. * * Les deux lignes sont retirees du :root ci-dessous : les jetons font foi. * Un test le verrouille — voir « aucun jeton n'est neutralise par style.css » * dans tests/gabarits.test.ts. * * Reste a faire : renommer les usages de --couleur-* vers les noms des jetons, * puis supprimer le bloc :root ci-dessous en entier. */ @import url('/public/jetons.css'); /* * Habillage de regard pro. * * Palette et typographie du kit de marque (23.08.2026, direction D). * * DEUX NIVEAUX, a ne pas confondre : * * 1. Le produit — echelle typographique, espacements, bordures, rythme. * Il appartient a regard pro et n'est PAS personnalisable. C'est ce qui * evite qu'une structure casse la lisibilite de ses propres ecrans. * * 2. La structure — sa couleur, son logo, son vocabulaire, injectes en * variables sur depuis structure_config. * * Une SEULE variable est surchargee par structure : --couleur-principale. */ :root { /* --- Kit de marque : ces valeurs ne bougent pas ------------------------ */ --rouge-regard: #E8001D; --encre: #0A0A0A; --papier: #F0EEEA; --blanc: #FFFFFF; --gris: #6B6763; --ligne: #DDD9D3; /* --- Surchargeable par structure -------------------------------------- */ /* Le defaut est l'ardoise sobre des jetons, PAS le rouge regard : une structure qui n'a pas encore choisi sa couleur ne doit pas porter la marque de son editeur sur tous ses ecrans. */ --couleur-principale: var(--accent); --texte-sur-couleur: var(--blanc); /* --- Semantique ------------------------------------------------------- */ --couleur-texte: var(--encre); --couleur-attenuee: var(--gris); --couleur-fond: var(--papier); --couleur-surface: var(--blanc); --couleur-bordure: var(--ligne); --couleur-ok: #1A7F4B; /* Un echec, un retard, une erreur sont des ETATS : ils portent la couleur d'etat, fixe et verifiee, jamais la couleur de marque de l'editeur. #A32318 contraste a 6,65:1 la ou #E8001D tombait a 4,72:1. */ --couleur-ko: var(--etat-retard-texte); --sans: 'Outfit', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --mono: 'DM Mono', ui-monospace, SFMono-Regular, Menlo, monospace; } * { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: var(--sans); font-size: 16px; line-height: 1.6; color: var(--couleur-texte); background: var(--couleur-fond); -webkit-font-smoothing: antialiased; display: flex; flex-direction: column; min-height: 100vh; } /* --- En-tête -------------------------------------------------------------- */ .entete { border-bottom: 2px solid var(--encre); background: var(--couleur-surface); } /* ⚠️ LA BARRE SUIT LA LARGEUR DE L'ÉCRAN QU'ELLE SURMONTE ------------------------------------------------------------------------- Elle était bornée à la largeur de LECTURE. Sur un écran de liste, désormais large, elle s'arrêtait donc bien avant le tableau — et le nom du club flottait au milieu de nulle part, à 220 px du bord droit du contenu. `--largeur-barre` est posée par le gabarit, à la même valeur que le contenu : la barre et l'écran commencent et finissent ensemble. */ .entete-interieur { max-width: var(--largeur-barre, var(--largeur-contenu)); margin: 0 auto; min-height: var(--h-barre); padding: var(--e-2) var(--e-5); display: flex; align-items: center; gap: var(--e-4); } /* Le logo et la navigation forment un groupe ; le club est l'autre bord. Un séparateur discret marque la frontière entre l'éditeur et le client — sans lui, les entrées de menu paraissent appartenir au logo. */ .marque { padding-right: var(--e-4); border-right: var(--trait) solid var(--ligne); } /* Le kit l'impose : l'empilée ne rentre pas dans une barre de navigation. C'est l'horizontale, jamais l'empilée compressée. */ .marque img { height: 26px; width: auto; display: block; } .structure { display: flex; align-items: center; gap: 10px; margin-left: auto; font-weight: 600; letter-spacing: -0.015em; } /* Pastille à la couleur de la structure, tant qu'aucun logo n'est déposé. */ .structure .pastille-structure { width: 22px; height: 22px; border-radius: var(--rayon); background: var(--couleur-principale); flex: none; } .structure img { height: 26px; width: auto; border-radius: 2px; } /* --- Contenu -------------------------------------------------------------- */ .contenu { flex: 1; width: 100%; max-width: 60rem; margin: 0 auto; padding: 56px 40px 96px; } h1 { font-size: clamp(28px, 4vw, 40px); font-weight: 800; letter-spacing: -0.035em; line-height: 1.08; } .chapeau { font-size: 17px; color: var(--couleur-attenuee); max-width: 62ch; margin-top: 14px; } /* --- Fiche ---------------------------------------------------------------- */ .fiche { display: grid; grid-template-columns: 14rem 1fr; gap: 0; margin-top: 32px; background: var(--couleur-surface); border: 1px solid var(--couleur-bordure); border-radius: var(--rayon); overflow: hidden; } .fiche dt, .fiche dd { padding: 13px 18px; border-bottom: 1px solid var(--couleur-bordure); } .fiche dt { font-family: var(--mono); font-size: 10px; text-transform: uppercase; letter-spacing: 0.14em; color: var(--couleur-attenuee); padding-top: 17px; } .fiche dt:nth-last-of-type(1), .fiche dd:nth-last-of-type(1) { border-bottom: 0; } .fiche .ok { color: var(--couleur-ok); } .fiche .ko { color: var(--couleur-ko); } code { font-family: var(--mono); font-size: 0.88em; color: var(--couleur-principale); } a { color: var(--couleur-principale); } /* --- Formulaires ---------------------------------------------------------- */ .formulaire { display: flex; flex-direction: column; gap: 6px; max-width: 24rem; margin: 32px 0 0; } .formulaire label { font-family: var(--mono); font-size: 10px; text-transform: uppercase; letter-spacing: 0.14em; color: var(--couleur-attenuee); } .formulaire input { font: inherit; padding: 11px 13px; border: 1px solid var(--couleur-bordure); border-radius: var(--rayon); background: var(--couleur-surface); color: var(--couleur-texte); } .formulaire input::placeholder { color: var(--gris-clair); } .formulaire input:focus-visible { outline: 2px solid var(--couleur-principale); outline-offset: 1px; border-color: transparent; } .formulaire button { font: inherit; font-weight: 600; letter-spacing: -0.01em; margin-top: 10px; padding: 11px 20px; border: 1px solid var(--couleur-principale); border-radius: var(--rayon); background: var(--couleur-principale); /* Recalculé par structure : un club en jaune vif ne peut pas garder du blanc. */ color: var(--texte-sur-couleur); cursor: pointer; } .formulaire button:hover { opacity: 0.88; } .formulaire button.discret { background: transparent; color: var(--couleur-attenuee); border-color: var(--couleur-bordure); font-weight: 400; } /* --- Divers --------------------------------------------------------------- */ .alerte { margin-top: 28px; padding: 16px 20px; border-left: 3px solid var(--etat-retard-texte); border-radius: 0 var(--rayon) var(--rayon) 0; background: var(--couleur-surface); color: var(--encre); font-size: 14.5px; } .note { font-size: 13.5px; color: var(--couleur-attenuee); border-left: 2px solid var(--couleur-bordure); padding-left: 16px; margin-top: 40px; max-width: 62ch; } /* --- Pied ----------------------------------------------------------------- */ .pied { border-top: 2px solid var(--encre); background: var(--couleur-surface); } .pied-interieur { max-width: 60rem; margin: 0 auto; padding: 22px 40px; display: flex; gap: 16px; flex-wrap: wrap; font-family: var(--mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--couleur-attenuee); } .pied .signature { margin-left: auto; } .pied .signature img { height: 13px; width: auto; opacity: 0.5; vertical-align: -2px; } @media (max-width: 760px) { .entete-interieur, .contenu, .pied-interieur { padding-left: 20px; padding-right: 20px; } /* La barre d'en-tete est une seule ligne inextensible : sur un telephone, logo + navigation + nom de structure debordaient et faisaient defiler TOUTE la page en largeur. On la laisse se replier. */ .entete-interieur { flex-wrap: wrap; row-gap: 12px; } /* La barre passe sur deux lignes plutot que dans un menu deroulant : cinq entrees tiennent sur deux lignes, et un benevole occasionnel ne trouve pas ce qui est cache derriere trois traits. L'ecart de 8 px entre deux cibles evite le clic a cote sur un telephone. */ .navigation { margin-left: 0; order: 3; width: 100%; gap: var(--ecart-cibles); /* Une barre defilante horizontalement cacherait la derniere entree. */ overflow: visible; } .navigation a { padding: 0 12px; } .structure { font-size: 14px; } .contenu { padding-top: 36px; } .fiche { grid-template-columns: 1fr; } .fiche dt { padding-bottom: 0; border-bottom: 0; } .pied .signature { margin-left: 0; } } .titre-section { font-size: 20px; font-weight: 700; letter-spacing: -0.025em; margin-top: 52px; } .note-haute { font-size: 14px; color: var(--couleur-attenuee); max-width: 62ch; margin-top: 6px; } /* ========================================================================== Liste des partenaires ========================================================================== */ /* ========================================================================== Navigation — DESIGN.md § 6 CINQ entrees, aucune repliable, aucun sous-menu. Ce qui est replie n'existe pas pour un benevole qui ouvre l'outil trois fois par an. --------------------------------------------------------------------------- POURQUOI L'ACTIF EST UN TRAIT ET NON UN APLAT NOIR Premiere ecriture : pastille noire pleine, avec le trait d'accent pose EN DEDANS. Mesure sur le club de demonstration, en bleu marine : le trait valait 1,41:1 sur le noir. La signature du club disparaissait pour tous les clubs en couleur sombre — et rien ne se voyait a l'oeil. Ici, l'ENCRE porte l'etat (texte noir contre texte gris, 19,80:1 contre 5,61:1) et l'accent ne fait que signer, sur le fond clair de la barre ou il se voit. C'est ce qui rend la barre compatible avec n'importe quelle couleur de club — un onglet actif teint en accent serait fade avec un accent pale et hurlerait avec un accent sature. L'etat actif ne repose PAS sur la seule couleur : le trait de 3 px est une forme, et aria-current le dit aux lecteurs d'ecran. ========================================================================== */ .navigation { display: flex; /* 8 px entre deux cibles voisines : a 4 px, on clique a cote sur un telephone. Le confort visuel vient du remplissage, pas de l'ecart. */ gap: var(--ecart-cibles); margin-left: var(--e-4); flex-wrap: wrap; } .navigation a { display: inline-flex; align-items: center; /* 40 px : plancher absolu d'une cible de clic. */ min-height: var(--h-cible); padding: 0 12px; font-size: var(--t-corps); font-weight: var(--g-normal); text-decoration: none; color: var(--gris); border-radius: var(--rayon) var(--rayon) 0 0; /* Le trait est toujours la, transparent au repos : sans cela l'entree active serait plus haute que ses voisines et la barre sauterait au changement d'ecran. */ box-shadow: inset 0 -3px 0 transparent; transition: background var(--duree) var(--courbe), color var(--duree) var(--courbe); } .navigation a:hover { background: var(--papier); color: var(--encre); } .navigation a:focus-visible { outline: var(--trait-fort) solid var(--encre); outline-offset: 2px; } .navigation a.actif { color: var(--encre); font-weight: var(--g-demi); box-shadow: inset 0 -3px 0 var(--accent-lisible); } .titre-ligne { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; flex-wrap: wrap; } .bouton { font-size: 14px; font-weight: 600; text-decoration: none; padding: 9px 16px; border-radius: var(--rayon); background: var(--couleur-principale); color: var(--texte-sur-couleur); white-space: nowrap; } .bouton:hover { opacity: 0.88; } /* --- Recherche ------------------------------------------------------------ */ .barre-recherche { display: flex; gap: 8px; align-items: center; margin-top: 28px; flex-wrap: wrap; } .barre-recherche input[type='search'] { font: inherit; flex: 1; min-width: 14rem; padding: 10px 13px; border: 1px solid var(--couleur-bordure); border-radius: var(--rayon); background: var(--couleur-surface); color: var(--couleur-texte); } .barre-recherche input:focus-visible { outline: 2px solid var(--couleur-principale); outline-offset: 1px; border-color: transparent; } .barre-recherche button { font: inherit; font-weight: 500; padding: 10px 18px; border: 1px solid var(--couleur-bordure); border-radius: var(--rayon); background: var(--couleur-surface); color: var(--couleur-texte); cursor: pointer; } .barre-recherche button:hover { border-color: var(--couleur-principale); } .barre-recherche .effacer { font-size: 13px; color: var(--couleur-attenuee); } /* --- Filtres par étape ---------------------------------------------------- */ .pastilles { display: flex; gap: 7px; flex-wrap: wrap; margin-top: 14px; } .pastille { font-size: 13px; text-decoration: none; padding: 6px 12px; border: 1px solid var(--couleur-bordure); border-radius: 999px; background: var(--couleur-surface); color: var(--couleur-attenuee); white-space: nowrap; } .pastille:hover { border-color: var(--couleur-principale); color: var(--couleur-texte); } /* ACTIF EN ENCRE, JAMAIS EN ACCENT — la meme regle que la navigation. Un filtre teint en accent est fade chez un club en pastel et hurle chez un club en couleur saturee ; en noir, il se lit pareil chez tous. Le fond noir porte l'etat a lui seul : y poser un trait d'accent en plus reviendrait a ajouter un ornement invisible (mesure : 1,41:1 pour un accent bleu marine sur du noir). */ .pastille.active { background: var(--encre); border-color: var(--encre); color: var(--blanc); font-weight: 500; } .pastille .compte { font-family: var(--mono); font-size: 11px; opacity: 0.65; margin-left: 3px; } /* --- Tableau -------------------------------------------------------------- */ .liste { width: 100%; border-collapse: collapse; margin-top: 22px; background: var(--couleur-surface); border: 1px solid var(--couleur-bordure); border-radius: var(--rayon); overflow: hidden; } .liste th { text-align: left; font-family: var(--mono); font-size: 9.5px; text-transform: uppercase; letter-spacing: 0.14em; font-weight: 400; color: var(--couleur-attenuee); padding: 12px 16px; border-bottom: 1px solid var(--couleur-bordure); white-space: nowrap; } .liste th a { color: inherit; text-decoration: none; } .liste th a:hover { color: var(--couleur-texte); } .liste th a.tri-actif { color: var(--couleur-principale); font-weight: 500; } .liste td { padding: 13px 16px; border-bottom: 1px solid var(--couleur-bordure); vertical-align: top; font-size: 14.5px; } .liste tr:last-child td { border-bottom: 0; } .liste tr:hover td { background: rgba(0, 0, 0, 0.015); } .liste .a-droite { text-align: right; } .liste .principal a { font-weight: 600; letter-spacing: -0.01em; text-decoration: none; color: var(--couleur-texte); } .liste .principal a:hover { color: var(--couleur-principale); } .secondaire { display: block; font-size: 12.5px; color: var(--couleur-attenuee); margin-top: 2px; } /* `display: block` vise le rappel place SOUS un nom. Sur un , il sort la cellule de la mise en table : sa bordure basse flotte alors au milieu de la ligne (defaut vu a l'ecran sur la liste des packs, invisible aux tests). */ td.secondaire { display: table-cell; margin-top: 0; } .secondaire.en-retard { color: var(--etat-retard-texte); font-weight: 500; } .manquant { color: var(--gris-clair); font-style: italic; font-size: 13px; } .marque-particulier { font-family: var(--mono); font-size: 9px; text-transform: uppercase; letter-spacing: 0.1em; color: var(--couleur-attenuee); border: 1px solid var(--couleur-bordure); border-radius: 2px; padding: 1px 4px; margin-left: 5px; vertical-align: 1px; } /* --- États du pipeline ---------------------------------------------------- Une teinte par étape, indépendante de la couleur de la structure : ces états sont imposés par le produit, et doivent rester lisibles quel que soit le club. */ .etat { display: inline-block; font-size: 12px; font-weight: 500; padding: 3px 9px; border-radius: 999px; white-space: nowrap; border: 1px solid; } .etat-prospect { color: #6B6763; border-color: #DDD9D3; background: #F5F3F0; } .etat-contacte { color: #7A5A0F; border-color: #E8D9B0; background: #FBF4E4; } .etat-en_negociation { color: #1B4A8B; border-color: #C3D6EF; background: #EDF3FB; } .etat-actif { color: #1A7F4B; border-color: #B6DFC8; background: #ECF7F1; } .etat-inactif { color: #6B6763; border-color: #DDD9D3; background: transparent; } .etat-perdu { color: #A32318; border-color: #EEC6C2; background: #FBEFEE; } /* --- Contreparties -------------------------------------------------------- */ .etat-cp-a_faire { color: #6B6763; border-color: #DDD9D3; background: #F5F3F0; } .etat-cp-planifiee { color: #1B4A8B; border-color: #C3D6EF; background: #EDF3FB; } .etat-cp-livree { color: #1A7F4B; border-color: #B6DFC8; background: #ECF7F1; } .etat-cp-prouvee { color: #12603A; border-color: #8FCDAE; background: #DFF2E8; } .etat-cp-annulee { color: #6B6763; border-color: #DDD9D3; background: transparent; } .etat-preuve { color: #6B6763; border-color: #DDD9D3; background: #F5F3F0; } .complet { color: #1A7F4B; font-weight: 600; } /* --- Factures ------------------------------------------------------------- */ .etat-fa-brouillon { color: #6B6763; border-color: #DDD9D3; background: #F5F3F0; } .etat-fa-emise { color: #7A5A0F; border-color: #E8D9B0; background: #FBF4E4; } .etat-fa-partiellement_payee { color: #1B4A8B; border-color: #C3D6EF; background: #EDF3FB; } .etat-fa-payee { color: #12603A; border-color: #8FCDAE; background: #DFF2E8; } .etat-fa-annulee { color: #6B6763; border-color: #DDD9D3; background: transparent; } .etat-ec-a_venir { color: #6B6763; border-color: #DDD9D3; background: #F5F3F0; } .etat-ec-en_retard { color: #A32318; border-color: #EEC6C2; background: #FBEFEE; } .etat-ec-payee { color: #12603A; border-color: #8FCDAE; background: #DFF2E8; } /* --- Conformité fiscale --------------------------------------------------- */ .bloc-alerte { border-color: #EEC6C2; } .liste-conformite { list-style: none; padding: 0; margin: 6px 0 0; } .liste-conformite li { display: flex; gap: 12px; padding: 13px 0; border-top: 1px solid var(--couleur-bordure); } .liste-conformite li:first-child { border-top: 0; } .liste-conformite p { margin: 3px 0 0; font-size: 13.5px; color: var(--couleur-attenuee); } .conformite-pastille { flex: none; width: 10px; height: 10px; border-radius: 999px; margin-top: 6px; } .conformite-ok .conformite-pastille { background: #1A7F4B; } .conformite-attention .conformite-pastille { background: #C08A16; } .conformite-bloquant .conformite-pastille { background: var(--etat-retard-texte); } .conformite-bloquant strong { color: var(--etat-retard-texte); } /* Un reçu annulé reste au registre, mais se distingue au premier coup d'œil. */ .ligne-annulee .principal a { text-decoration: line-through; } .ligne-annulee { opacity: 0.62; } /* La pastille d'alerte porte le SEUL signal de l'ecran des contreparties. */ .pastille-alerte { border-color: #EEC6C2; color: #A32318; } /* Le rouge regard est la marque de l'EDITEUR : il n'a rien a faire sur un ecran metier d'une structure. Le retard porte sa propre couleur d'etat, fixe et verifiee (6,45:1 au pire). */ .pastille-alerte.active { background: var(--etat-retard-texte); border-color: var(--etat-retard-texte); color: var(--blanc); } .liste-preuves { list-style: none; padding: 0; margin: 14px 0 0; } .liste-preuves li { padding: 12px 0; border-top: 1px solid var(--couleur-bordure); } .liste-preuves li:first-child { border-top: 0; } .liste-preuves li.archivee { opacity: 0.55; } .preuve-tete { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .preuve-lien { display: inline-block; margin-top: 8px; font-size: 13px; word-break: break-all; } .preuve-note { margin: 6px 0 0; font-size: 13.5px; color: var(--couleur-attenuee); } .preuve-vignette { display: block; max-width: 260px; max-height: 180px; width: auto; height: auto; border-radius: var(--rayon); border: 1px solid var(--couleur-bordure); } .bordure-haute { border-top: 1px solid var(--couleur-bordure); margin-top: 18px; padding-top: 18px; } .filtre-ligne { display: flex; align-items: center; gap: 10px; margin-top: 16px; flex-wrap: wrap; } .filtre-ligne .etiquette-champ { font-family: var(--mono); font-size: 11px; text-transform: uppercase; letter-spacing: 0.12em; color: var(--couleur-attenuee); } /* Mêmes proportions que `.erreur-bandeau` — un seul motif de bandeau, trois couleurs. Voir DESIGN.md. */ .succes-bandeau, .avis-bandeau { margin-top: 18px; padding: 11px 14px; border-radius: var(--rayon); font-size: 14px; } .succes-bandeau { border-left: 3px solid var(--etat-ok-texte); background: #EEF5F1; } .avis-bandeau { border-left: 3px solid var(--etat-attente-texte); background: #FBF4E7; } .erreur-bandeau { margin-top: 18px; padding: 11px 14px; border-left: 3px solid var(--etat-retard-texte); background: #FBEFEE; border-radius: var(--rayon); font-size: 14px; } .actions-basses { margin-top: 28px; } .en-ligne { display: inline; } /* --- Dénombrement et pagination ------------------------------------------ */ .denombrement { font-family: var(--mono); font-size: 11px; text-transform: uppercase; letter-spacing: 0.12em; color: var(--couleur-attenuee); margin-top: 14px; } .pagination { display: flex; gap: 16px; align-items: center; margin-top: 18px; font-size: 14px; } .pagination span { color: var(--couleur-attenuee); font-size: 13px; } .vide { margin-top: 32px; padding: 28px; border: 1px dashed var(--couleur-bordure); border-radius: var(--rayon); color: var(--couleur-attenuee); text-align: center; } @media (max-width: 760px) { .liste thead { display: none; } .liste tr { display: block; border-bottom: 1px solid var(--couleur-bordure); } .liste tr:last-child { border-bottom: 0; } .liste td { display: block; border: 0; padding: 4px 16px; } .liste td:first-child { padding-top: 14px; } .liste td:last-child { padding-bottom: 14px; text-align: left; } /* Sans thead, une cellule isolee ne veut plus rien dire : « 1 » ne dit pas s'il s'agit d'un stock, d'un prix ou d'un nombre de packs vendables. L'intitule de colonne revient donc au-dessus de chaque valeur. */ .liste td[data-intitule]::before { content: attr(data-intitule); display: block; margin-bottom: 1px; font-family: var(--mono); font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--couleur-attenuee); } } /* ========================================================================== Fiche partenaire ========================================================================== */ .fil { font-size: 13px; margin-bottom: 14px; } .fil a { color: var(--couleur-attenuee); text-decoration: none; } .fil a:hover { color: var(--couleur-principale); } .fil a::before { content: '← '; } .sous-titre { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 10px; font-size: 14px; color: var(--couleur-attenuee); } .bloc { margin-top: 20px; padding: 20px 22px; background: var(--couleur-surface); border: 1px solid var(--couleur-bordure); border-radius: var(--rayon); } .bloc-entete { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; margin-bottom: 14px; } .etiquette { font-family: var(--mono); font-size: 9.5px; font-weight: 400; text-transform: uppercase; letter-spacing: 0.14em; color: var(--couleur-attenuee); margin: 0; } .etiquette-interne { margin-top: 22px; margin-bottom: 8px; } .rien { color: var(--gris-clair); font-style: italic; font-size: 14px; margin-top: 4px; } /* --- Prochaine action : le bloc qui compte -------------------------------- */ .bloc-action { margin-top: 26px; border-left: 3px solid var(--couleur-principale); } .bloc-action.urgent { border-left-color: var(--etat-retard-texte); } .action-libelle { font-size: 19px; font-weight: 600; letter-spacing: -0.02em; margin-top: 8px; } .action-detail { font-size: 14px; color: var(--couleur-attenuee); margin-top: 4px; } .action-detail .en-retard { color: var(--etat-retard-texte); font-weight: 500; } .actions-en-ligne { display: flex; align-items: center; gap: 14px; margin-top: 14px; flex-wrap: wrap; } .actions-en-ligne form { margin: 0; } .petit-bouton { font: inherit; font-size: 13px; font-weight: 500; text-decoration: none; display: inline-block; padding: 7px 14px; border: 1px solid var(--couleur-principale); border-radius: var(--rayon); background: var(--couleur-principale); color: var(--texte-sur-couleur); cursor: pointer; } .petit-bouton:hover { opacity: 0.88; } .petit-lien { font-size: 13px; color: var(--couleur-attenuee); } .petit-lien:hover { color: var(--couleur-principale); } /* --- Deux colonnes -------------------------------------------------------- */ .deux-colonnes { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: 20px; align-items: start; } /* --- Contacts ------------------------------------------------------------- */ .contacts { list-style: none; } .contacts li { padding: 14px 0; border-top: 1px solid var(--couleur-bordure); } .contacts li:first-child { border-top: 0; padding-top: 0; } .contact-nom { font-weight: 600; letter-spacing: -0.01em; } .contact-fonction { font-size: 13.5px; color: var(--couleur-attenuee); margin-top: 1px; } .jeton-principal { font-family: var(--mono); font-size: 9px; text-transform: uppercase; letter-spacing: 0.1em; color: var(--texte-sur-couleur); background: var(--couleur-principale); border-radius: 2px; padding: 2px 5px; margin-left: 6px; vertical-align: 1px; } .roles { display: flex; gap: 5px; flex-wrap: wrap; margin-top: 7px; } .jeton-role { font-size: 11.5px; color: var(--couleur-attenuee); border: 1px solid var(--couleur-bordure); border-radius: 999px; padding: 2px 9px; } .contact-coordonnees { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 8px; font-size: 13.5px; } .contact-coordonnees span { color: var(--couleur-attenuee); } /* --- Renseignements ------------------------------------------------------- */ .renseignements { display: grid; grid-template-columns: 8rem 1fr; gap: 8px 14px; margin-top: 12px; font-size: 14px; } .renseignements dt { color: var(--couleur-attenuee); font-size: 13px; } .renseignements dd { margin: 0; } .notes { font-size: 14px; white-space: pre-wrap; } /* --- Chronologie ---------------------------------------------------------- */ .chronologie { list-style: none; position: relative; } .chronologie li { position: relative; padding: 0 0 18px 20px; border-left: 1px solid var(--couleur-bordure); } .chronologie li:last-child { border-left-color: transparent; padding-bottom: 0; } .chronologie li::before { content: ''; position: absolute; left: -4.5px; top: 6px; width: 8px; height: 8px; border-radius: 50%; background: var(--couleur-surface); border: 2px solid var(--couleur-principale); } .chrono-entete { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; } .chrono-type { font-family: var(--mono); font-size: 9.5px; text-transform: uppercase; letter-spacing: 0.14em; color: var(--couleur-principale); } .chrono-date { font-size: 12.5px; color: var(--couleur-attenuee); white-space: nowrap; } .chrono-contenu { font-size: 14px; margin-top: 5px; } .chrono-bas { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 5px; font-size: 12.5px; } .chrono-resultat { color: var(--couleur-texte); font-weight: 500; } .chrono-auteur { color: var(--couleur-attenuee); } .chrono-auteur::before { content: '— '; } /* --- Actions passées ------------------------------------------------------ */ .actions-passees { list-style: none; font-size: 13.5px; } .actions-passees li { padding: 5px 0; color: var(--couleur-attenuee); } .actions-passees .statut-faite { color: var(--couleur-ok); font-weight: 600; } .actions-passees .statut-annulee { color: var(--gris-clair); } .actions-passees .secondaire { display: inline; margin-left: 6px; } @media (max-width: 900px) { .deux-colonnes { grid-template-columns: 1fr; } } /* ========================================================================== Formulaires de saisie ========================================================================== */ .formulaire-large { max-width: 42rem; margin-top: 26px; } .formulaire-large fieldset { border: 1px solid var(--couleur-bordure); border-radius: var(--rayon); background: var(--couleur-surface); padding: 18px 22px 22px; margin-bottom: 16px; } .formulaire-large legend { font-family: var(--mono); font-size: 9.5px; text-transform: uppercase; letter-spacing: 0.14em; color: var(--couleur-attenuee); padding: 0 7px; } .champ { margin-top: 14px; } .champ:first-of-type { margin-top: 4px; } .champ > label { display: block; font-size: 13px; font-weight: 500; color: var(--couleur-texte); margin-bottom: 5px; } .champ .requis { color: var(--etat-retard-texte); } /* Énumérer les types laisse tomber au style natif du navigateur tout type oublié — c'est arrivé à `number` et `url`. On prend donc TOUS les champs et on retire ceux qui ont leur propre apparence. */ .champ input:not([type='file']):not([type='checkbox']):not([type='radio']), .champ select, .champ textarea { font: inherit; width: 100%; padding: 9px 12px; border: 1px solid var(--couleur-bordure); border-radius: var(--rayon); background: var(--couleur-fond); color: var(--couleur-texte); } .champ textarea { resize: vertical; line-height: 1.5; } .champ input:focus-visible, .champ select:focus-visible, .champ textarea:focus-visible { outline: 2px solid var(--couleur-principale); outline-offset: 1px; border-color: transparent; } .champ.en-erreur input, .champ.en-erreur select, .champ.en-erreur textarea { border-color: var(--etat-retard-texte); } .message-erreur { font-size: 12.5px; color: var(--etat-retard-texte); margin-top: 4px; } .aide { font-size: 12.5px; color: var(--couleur-attenuee); margin-top: 4px; } .champ-case > label { display: flex; align-items: center; gap: 8px; font-weight: 400; font-size: 14px; cursor: pointer; } .champ-case input { width: auto; } .cases { display: flex; flex-wrap: wrap; gap: 8px 16px; } .case-role { display: flex; align-items: center; gap: 7px; font-size: 13.5px; cursor: pointer; } .deux { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; } .pied-formulaire { display: flex; align-items: center; gap: 18px; margin-top: 22px; } .pied-formulaire button { font: inherit; font-weight: 600; padding: 11px 24px; border: 1px solid var(--couleur-principale); border-radius: var(--rayon); background: var(--couleur-principale); color: var(--texte-sur-couleur); cursor: pointer; } .pied-formulaire button:hover { opacity: 0.88; } .confirmation { padding: 12px 18px; border-left: 3px solid var(--couleur-ok); border-radius: 0 var(--rayon) var(--rayon) 0; background: var(--couleur-surface); font-size: 14.5px; margin-bottom: 18px; } @media (max-width: 620px) { .deux { grid-template-columns: 1fr; } } .bandeau-lecture { font-family: var(--mono); font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.12em; color: var(--couleur-attenuee); border: 1px dashed var(--couleur-bordure); border-radius: var(--rayon); padding: 9px 14px; margin-bottom: 22px; } /* --- Archivage ------------------------------------------------------------ */ .bloc-archive { margin-top: 26px; border-left: 3px solid var(--gris-clair); background: transparent; border-style: dashed; } .bloc-confirmation { margin-top: 26px; max-width: 42rem; } .chapeau-confirmation { font-size: 15.5px; margin-top: 8px; line-height: 1.55; } .pastille-archives { border-style: dashed; margin-left: auto; } .lien-bouton { font: inherit; font-size: 13px; padding: 0; border: 0; background: none; color: var(--couleur-principale); cursor: pointer; text-decoration: underline; } .liens-contact { display: flex; gap: 14px; margin-top: 6px; } .contacts-archives li { opacity: 0.62; } .contacts-archives .contact-nom { font-weight: 500; } .zone-archivage { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; margin-top: 34px; padding-top: 18px; border-top: 1px dashed var(--couleur-bordure); } .zone-archivage .aide { margin-top: 0; } /* --- Import --------------------------------------------------------------- */ .formulaire-colonnes { max-width: 54rem; } .formulaire-colonnes .liste { margin-top: 18px; } .formulaire-colonnes select { width: 100%; } .exemple { font-family: var(--mono); font-size: 12px; color: var(--couleur-attenuee); } .compteurs { display: flex; gap: 14px; margin-top: 28px; flex-wrap: wrap; } .compteur { flex: 1; min-width: 8rem; padding: 18px 20px; background: var(--couleur-surface); border: 1px solid var(--couleur-bordure); border-radius: var(--rayon); } .compteur .nombre { display: block; font-size: 30px; font-weight: 700; letter-spacing: -0.03em; line-height: 1.1; } .compteur .etiquette { display: block; margin-top: 3px; } .compteur-erreur { border-color: var(--etat-retard-texte); } .compteur-erreur .nombre { color: var(--etat-retard-texte); } .apercu { list-style: none; margin-top: 14px; } .apercu li { display: flex; align-items: baseline; gap: 10px; padding: 7px 0; border-bottom: 1px solid var(--couleur-bordure); font-size: 14.5px; } .apercu li:last-child { border-bottom: 0; } .apercu .secondaire { display: inline; margin-left: auto; } .jeton-sort { font-family: var(--mono); font-size: 9px; text-transform: uppercase; letter-spacing: 0.1em; padding: 2px 6px; border-radius: 2px; white-space: nowrap; } .jeton-creation { background: #ECF7F1; color: #1A7F4B; } .jeton-mise_a_jour { background: #EDF3FB; color: #1B4A8B; } .boutons-titre { display: flex; align-items: center; gap: 18px; } .alerte-douce { margin-top: 22px; padding: 14px 18px; border-left: 3px solid #7A5A0F; border-radius: 0 var(--rayon) var(--rayon) 0; background: #FBF4E4; color: #5A4208; font-size: 14.5px; max-width: 62ch; } /* --- Catalogue ------------------------------------------------------------ */ .montant { font-family: var(--mono); font-size: 13px; white-space: nowrap; } .epuise { color: var(--etat-retard-texte); font-weight: 600; } .tension { color: #7A5A0F; font-weight: 600; } .nom-simple { font-weight: 600; letter-spacing: -0.01em; } .cases-empilees { flex-direction: column; gap: 10px; } .cases-empilees .case-role { align-items: flex-start; } .cases-empilees .case-role span { font-size: 14px; } /* --- Contrats ------------------------------------------------------------- */ .etat-contrat-brouillon { color: #6B6763; border-color: #DDD9D3; background: #F5F3F0; } .etat-contrat-envoye { color: #7A5A0F; border-color: #E8D9B0; background: #FBF4E4; } .etat-contrat-signe { color: #1B4A8B; border-color: #C3D6EF; background: #EDF3FB; } .etat-contrat-actif { color: #1A7F4B; border-color: #B6DFC8; background: #ECF7F1; } .etat-contrat-termine { color: #6B6763; border-color: #DDD9D3; background: transparent; } .etat-contrat-annule { color: #A32318; border-color: #EEC6C2; background: #FBEFEE; } .lien-discret { color: var(--couleur-texte); text-decoration: none; border-bottom: 1px solid var(--couleur-bordure); } .lien-discret:hover { border-color: var(--couleur-principale); } .liste-nue { border: 0; border-radius: 0; margin-top: 10px; } .nature { display: inline; } .compteur .nombre { font-family: var(--sans); } .ligne-ajout { margin-top: 22px; padding-top: 20px; border-top: 1px dashed var(--couleur-bordure); } .quatre { display: grid; grid-template-columns: 2fr 1fr 1fr 1.2fr; gap: 0 14px; } .trois { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 14px; } /* * Rangee de compteurs a nombre VARIABLE. * * Compter les cartes dans le gabarit pour choisir « .trois » ou « .quatre » * se trompe des qu'on en ajoute une sous condition — c'est arrive. La grille * s'ajuste seule : trois, quatre ou cinq chiffres tiennent sur une ligne. */ .compteurs { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 0 14px; } .compteurs > * { min-width: 0; } .zone-archivage form { margin: 0; } @media (max-width: 760px) { .quatre, .trois { grid-template-columns: 1fr; } } .bouton-forme { font: inherit; cursor: pointer; border: 1px solid var(--couleur-principale); } /* --- Packs ---------------------------------------------------------------- */ .composant { display: inline-block; font-size: 12.5px; color: var(--couleur-attenuee); border: 1px solid var(--couleur-bordure); border-radius: 999px; padding: 1px 9px; margin: 2px 3px 2px 0; } .remise { color: var(--couleur-ok); font-weight: 600; margin-left: 5px; } /* Rappel du catalogue sur l'ecran des contrats — son seul point d'entree depuis que la barre haute est passee a cinq entrees (DESIGN.md § 6). Les liens gardent leur soulignement : c'est ce qui les designe comme des liens dans un paragraphe de texte. */ .rappel-catalogue { margin-top: var(--e-2); font-size: var(--t-secondaire); color: var(--gris); } .rappel-catalogue a { color: var(--encre); text-underline-offset: 3px; } /* Le logo est une cible de clic — il mène à l'écran d'entrée. Son image fait 26 px de haut : sans hauteur minimale, la cible tombe sous le plancher de 40 px. La barre en fait 64, il y a la place. */ .marque { display: inline-flex; align-items: center; min-height: var(--h-cible); } /* Le repère de démarrage — développement seulement, voir src/repere.ts. */ .repere { font-family: var(--mono, monospace); font-size: 11px; color: var(--gris-clair); } .repere-perime { color: #B3261E; font-weight: 600; } /* Aperçu du logo dans les réglages — boîte à hauteur fixe, jamais d'étirement (SCHEMA.md § 9 bis, règle 5). */ .logo-apercu { display: flex; align-items: center; justify-content: flex-start; height: 96px; padding: 12px 16px; margin-bottom: 12px; border: 1px solid var(--trait, #e3e3e0); border-radius: 8px; background: #fff; } .logo-apercu img { max-height: 72px; max-width: 320px; object-fit: contain; }