@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 { /* * ⚠️⚠️ CE BLOC NE REDÉCLARE PLUS DE JETON — 10/09/2026. * * « style.css » importe « jetons.css » en première ligne PUIS ouvre ce * `:root` : tout jeton redéclaré ici gagne sur le fichier de référence, sans * erreur et sans que rien ne se voie. Deux l'étaient encore au portage de * Regard AI — `--ligne` (#DDD9D3 au lieu du #E5E5E5 de Regard AI) et * `--texte-sur-couleur`. Le témoin « aucun jeton n'est neutralisé par * style.css » les a nommés ; il gardait exactement ce trou-là. * * Les valeurs de marque vivent dans `jetons.css`, une seule fois. Ce qui * suit ne fait que DÉRIVER des noms sémantiques à partir d'elles. */ /* --- Semantique ------------------------------------------------------- */ /* --- 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; } /* Un logo CLAIR ne se lit pas sur le papier : on lui donne son fond. Décidé par la mesure, jamais par le club — voir « fondDuLogo » (theme.ts). La pastille reprend le rayon et l'esprit de « .pastille-structure » : c'est le même objet, une marque de club dans la barre. */ .structure .logo-sur-encre { display: flex; padding: 5px; border-radius: var(--rayon); background: var(--encre); } /* --- 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: 11px; 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: 11px; 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: 11px; 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: 11px; 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: 11px; 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: 11px; 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: 11px; 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: 11px; 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: 11px; 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: 11px; 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; } /* --- Intervention de l'éditeur -------------------------------------------- */ /* * ⚠️ PLEIN, PAS EN POINTILLÉ. Le bandeau de lecture seule est discret parce * qu'il décrit un état ordinaire ; celui-ci dit qu'un tiers a un accès * administrateur sur les données du club EN CE MOMENT. Il doit se voir du * premier coup d'œil, sur tous les écrans, sans être refermable. * * ⚠️ Le rouge regard : `DESIGN.md` § 2.4 le réserve à l'éditeur. C'est * exactement ce dont il s'agit, et c'est le seul endroit d'un écran de club où * il paraît légitimement — précisément parce que ce n'est pas le club qui agit. */ .bandeau-intervention { font-size: 13px; line-height: 1.45; color: var(--encre, #0A0A0A); background: #FFF3F4; border: 1px solid var(--rouge-regard, #E8001D); border-left-width: 4px; border-radius: var(--rayon); padding: 10px 14px; margin-bottom: 22px; } .bandeau-intervention strong { color: var(--rouge-regard, #E8001D); } /* --- 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: var(--t-compteur); 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: 11px; 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; } /* ═══════════════════════════════════════════════════════════════════════════ * LES DEUX COULEURS — DESIGN.md § 2.2 bis (06/09/2026) * * ⚠️ Rien ici ne CHOISIT une couleur : tout part de `--accent` et `--second`, * posés sur par `styleDuTheme()`, et de la palette qu'ils dérivent. * Une valeur en dur dans ce fichier serait une couleur que le client ne peut * pas changer — et personne ne saurait pourquoi son écran resiste. * ═══════════════════════════════════════════════════════════════════════════ */ :root { /* Défauts : sans structure, l'interface reste celle du produit. */ --second: #6B6763; --texte-sur-second: #FFFFFF; --second-lisible: #6B6763; } /* --- Le choix des deux couleurs dans /reglages ---------------------------- */ .couple-couleurs { display: flex; gap: var(--espace-4, 1rem); align-items: flex-end; } .choix-couleur { display: flex; flex-direction: column; gap: var(--espace-1, 0.25rem); } .choix-couleur input[type="color"] { inline-size: 4.5rem; block-size: 2.5rem; padding: 0; border: 1px solid var(--ligne); border-radius: var(--rayon, 12px); background: var(--blanc); cursor: pointer; } .choix-couleur-mot { font-size: var(--texte-xs, 0.75rem); color: var(--gris); } /* L'aperçu de la palette réellement calculée. */ .apercu-palette { display: flex; gap: 2px; margin-block-start: var(--espace-3, 0.75rem); border: 1px solid var(--ligne); border-radius: var(--rayon, 12px); overflow: hidden; inline-size: fit-content; } .apercu-pastille { inline-size: 2.5rem; block-size: 1.75rem; display: block; } /* --- Le dégradé des deux couleurs ---------------------------------------- * * ⚠️ DESIGN.md § 2.2 bis, point 5 : LE SEUL endroit où les deux couleurs * brutes se rencontrent en grand. Ailleurs, ce sont leurs teintes qui * couvrent les surfaces — un aplat saturé derrière du texte reste interdit. * Le texte posé dessus vient de `--texte-sur-accent`, calculé, jamais choisi. */ .bandeau-couleurs { /* ⚠️ Le dégradé vient du SERVEUR, pas d'ici : `bandeauDeuxCouleurs()` a vérifié qu'un texte traverse les deux extrémités. Si aucun ne le peut, `--degrade` porte l'accent seul — la couleur cède, jamais la lecture. */ background: var(--degrade, var(--accent)); color: var(--texte-sur-bandeau, var(--texte-sur-accent)); border-inline-end: 4px solid var(--second); border-radius: var(--rayon, 12px); padding: var(--espace-5, 1.25rem) var(--espace-6, 1.5rem); } /* ⚠️⚠️ LA ZONE DE TEXTE EST BORNÉE, ET C'EST LA GARANTIE. Quand aucun texte ne passe 4,5:1 sur les DEUX extrémités du dégradé, le serveur réserve la première part au ton principal et borne ici la largeur du texte : il n'atteint jamais le bout où il serait illisible. La garantie n'est pas « le titre est court » — c'est « la zone est bornée ». */ .bandeau-couleurs > * { max-inline-size: var(--part-texte-bandeau, 100%); } /* ⚠️ Sous 700 px il n'y a plus de place pour une queue décorative : le dégradé deviendrait un aplat de seconde couleur derrière le texte. On revient au ton principal seul — c'est le même arbitrage, pris à une autre largeur. */ @media (max-width: 700px) { .bandeau-couleurs { background: var(--accent); color: var(--texte-sur-accent); } .bandeau-couleurs > * { max-inline-size: 100%; } } /* --- Ce qui rend l'interface vivante -------------------------------------- * * ⚠️ ZÉRO JAVASCRIPT. Le produit n'en a aucun côté client, et ce n'est pas ici * qu'il en gagnera : une animation qui exige un script cesse d'exister dès * qu'il échoue, et l'écran paraît cassé sans qu'on sache pourquoi. * * ⚠️⚠️ TOUT EST DÉSARMÉ PAR `prefers-reduced-motion`. Ce n'est pas une * politesse : le mouvement déclenche des malaises chez des personnes qui ont * réglé leur système pour l'éviter, et un outil de bénévole se doit de le * respecter. */ .bouton, .petit-bouton, .lien-nav, .carte-accueil, .choix-couleur input { transition: background-color 140ms ease, border-color 140ms ease, box-shadow 140ms ease, transform 140ms ease; } .carte-accueil:hover { border-color: var(--accent-lisible); box-shadow: 0 2px 12px color-mix(in srgb, var(--accent) 18%, transparent); } /* ⚠️ LE BOUTON NE SE SOULÈVE PLUS AU SURVOL — 10/09/2026. Regard AI ne bouge AUCUN de ses boutons : `transition-colors duration-150`, la couleur et rien d'autre. Un bouton qui monte d'un pixel sous le curseur se remarque immédiatement quand on ouvre les deux logiciels de suite, et c'est exactement la chose qu'on cherche à faire disparaître. La règle « jamais la position ni la taille » de nos propres jetons le disait déjà. */ .bouton:hover, .petit-bouton:hover { background-color: var(--accent-lisible); } /* ⚠️ L'anneau de focus est en `--accent` et n'est JAMAIS retiré : c'est le seul repère de qui navigue au clavier. `accent-lisible` garantit 3:1 sur blanc, y compris chez un club de couleur très claire. */ :where(a, button, input, select, textarea, summary):focus-visible { outline: 2px solid var(--accent-lisible); outline-offset: 2px; border-radius: 4px; } /* La jauge d'objectif : remplissage en accent, rail en teinte de second. */ .jauge { background: var(--champ); border: 1px solid var(--ligne); } .jauge-remplissage { background: linear-gradient(90deg, var(--accent) 0%, var(--second) 100%); transition: inline-size 420ms cubic-bezier(0.22, 1, 0.36, 1); } @media (prefers-reduced-motion: reduce) { .bouton, .petit-bouton, .lien-nav, .carte-accueil, .choix-couleur input, .jauge-remplissage { transition: none; } .bouton:hover, .petit-bouton:hover { transform: none; } } /* --- L'en-tête de l'écran du matin ---------------------------------------- */ .entete-jour { margin-block-end: var(--espace-6, 1.5rem); } .entete-jour h1 { color: inherit; margin: 0; } .entete-jour-chapeau { color: inherit; opacity: 0.86; margin: var(--espace-1, 0.25rem) 0 0; } /* --- Les voiles : là où la couleur du club a le droit d'être franche ------ * * ⚠️ Leur force n'est pas choisie dans ce fichier : `palette()` part fort et * éclaircit jusqu'à ce que l'encre ET le gris passent leurs seuils. Écrire une * valeur ici la sortirait de la mesure. */ .systeme .liste thead th { background: var(--voile-second); border-block-end: 1px solid var(--ligne); } .titre-section { border-inline-start: 3px solid var(--accent-lisible); padding-inline-start: var(--espace-3, 0.75rem); } .bloc-entete, .carte-accueil-tete { background: var(--voile-accent); } /* ═══════════════════════════════════════════════════════════════════════════ * LA BARRE LATÉRALE — portée de `components/layout/Sidebar.tsx` (Regard AI) * * ⚠️ Chaque valeur ci-dessous vient du composant de Regard AI. Les classes * Tailwind d'origine sont citées en regard : c'est ce qui permet de vérifier * le portage sans relire le React, et de le refaire si le composant bouge. * * ⚠️⚠️ ELLE VIT DANS `style.css`, ET C'EST UNE CORRECTION DU 10/09/2026. * * Je l'avais écrite dans `systeme.css` — l'endroit logique, puisque tout le * portage de Regard AI y est. Mais `systeme.css` n'est chargée QUE sur les * écrans qui ont adopté le système de design (`it.systeme`). La coque, elle, * enveloppe TOUS les écrans : connexion, erreur, page sans structure. Elle * serait donc restée sans style là où il n'y a plus rien d'autre à regarder. * * Une règle d'enveloppe se charge toujours ; une règle de contenu peut * attendre son écran. * ═══════════════════════════════════════════════════════════════════════════ */ /* ⚠️ Le corps passe en RANGÉE : la barre à gauche, l'écran à droite. Il était en colonne (en-tête / contenu / pied), ce que la barre haute imposait. */ body:has(> .rail) { flex-direction: row; align-items: stretch; } .rail { display: flex; flex-direction: column; width: var(--l-barre-laterale); /* ← w-[220px] */ flex-shrink: 0; /* ← shrink-0 */ height: 100vh; position: sticky; top: 0; background: var(--blanc); /* ← bg-white */ border-right: var(--trait) solid var(--ligne); } /* ─── L'en-tête : le bloc « Regard . PRO » ──────────────────────────────── */ .rail-marque { display: flex; align-items: baseline; gap: 6px; /* ← gap-1.5 */ height: var(--h-barre); /* ← h-14 */ padding: 0 20px; /* ← px-5 */ flex-shrink: 0; border-bottom: var(--trait) solid var(--ligne); text-decoration: none; } .rail-mot { font-size: var(--t-titre); /* ← text-[18px] */ font-weight: var(--g-noir); /* ← font-black */ letter-spacing: -0.02em; /* ← tracking-tight */ color: var(--encre); } .rail-point { font-size: var(--t-titre); font-weight: var(--g-noir); color: var(--accent); /* ← text-primary */ } .rail-produit { margin-left: 4px; /* ← ml-1 */ padding: 2px 6px; /* ← px-1.5 py-0.5 */ border-radius: 4px; /* ← rounded-[4px] */ background: var(--accent); color: var(--texte-sur-accent); /* ⚠️ 8 PX — LA SEULE EXCEPTION AU PLANCHER, ET ELLE EST NOMMÉE. « PRO » n'est pas un texte à lire : c'est la seconde moitié d'un LOGOTYPE, exactement comme le « AI » de Regard AI. Le mot qui porte l'information est « Regard », à 18 px juste à côté ; la pastille ne fait que dire lequel des deux produits on regarde, et elle le dit aussi par sa position. La grossir à 11 px la ferait peser autant que la marque elle-même. ⚠️ Le témoin du plancher connaît cette exception par son NOM de classe — voir `tests/sources.test.ts`. Une exception anonyme deviendrait un trou. */ font-size: 8px; /* ← text-[8px] — EXCEPTION, voir ci-dessus */ font-weight: var(--g-gras); text-transform: uppercase; letter-spacing: 0.1em; /* ← tracking-[0.1em] */ } /* ─── Le club — pas dans Regard AI, voir le gabarit ─────────────────────── */ .rail-structure { display: flex; align-items: center; gap: var(--e-3); padding: var(--e-3) 20px; flex-shrink: 0; border-bottom: var(--trait) solid var(--ligne); min-width: 0; } .rail-pastille { display: flex; align-items: center; justify-content: center; width: 22px; height: 22px; flex-shrink: 0; border-radius: var(--rayon-plein); background: var(--encre); color: var(--blanc); font-size: var(--t-micro); font-weight: var(--g-gras); text-transform: uppercase; } .rail-nom { font-size: var(--t-secondaire); font-weight: var(--g-demi); color: var(--encre); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* ⚠️ LE LOGO SE MESURAIT À ZÉRO. `max-width: 100%` sur l'image, dans un conteneur en ligne sans largeur propre, se résout en 0 : l'image chargeait (140 × 150 px de source) et ne s'affichait pas. Le bloc du club était une bande vide, ce qui est pire qu'un nom en texte. On donne donc la HAUTEUR, qui est la contrainte réelle d'une barre, et la largeur suit. */ .rail-logo { display: flex; align-items: center; min-width: 0; } .rail-logo img { display: block; height: 28px; width: auto; max-width: 148px; /* 220 − 2×20 de marge − 32 de respiration */ object-fit: contain; } .rail-logo.logo-sur-encre { background: var(--encre); border-radius: var(--rayon-petit); padding: 4px 6px; } /* ─── La navigation ─────────────────────────────────────────────────────── */ .rail-nav { display: flex; flex-direction: column; gap: var(--e-6); /* ← gap-6 */ flex: 1; overflow-y: auto; /* ← overflow-y-auto */ padding: var(--e-4) var(--e-3); /* ← px-3 py-4 */ } .rail-groupe { min-width: 0; } /* ⚠️ Le triangle natif de

est retiré : Regard AI a un chevron à DROITE, et deux marqueurs se contrediraient. */ .rail-groupe-titre::-webkit-details-marker { display: none; } .rail-groupe-titre { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--e-1); /* ← mb-1 */ padding: 0 var(--e-2); /* ← px-2 */ list-style: none; cursor: pointer; /* ⚠️⚠️ 11 PX, PAS LES 9 DE REGARD AI — ET LE MOTIF EST DANS SON PROPRE DOCUMENT. `design-system/MASTER.md` § 2 fixe sa plus petite taille à « micro 10–10.5 px, labels, méta, badges » : les 9 px de sa `Sidebar.tsx` sont une dérive par rapport à son système, pas son système. Le plancher de regard pro est 11 px (DESIGN.md § 3.2), et il protège quelqu'un de précis — « un bénévole de soixante ans ». On prend donc le plus petit palier LÉGAL, à 0,5 px de la micro documentée de Regard AI. La différence ne se voit pas ; l'écart avec le document, si. */ font-size: var(--t-micro); /* ← text-[9px] chez lui, 11 ici */ font-weight: var(--g-demi); text-transform: uppercase; letter-spacing: var(--approche-micro); /* ← tracking-[0.14em] */ color: var(--gris-clair); transition: color var(--duree) var(--courbe); } .rail-groupe-titre:hover { color: var(--gris); } .rail-groupe-titre:focus-visible { outline: var(--trait-fort) solid var(--accent); outline-offset: 2px; border-radius: var(--rayon-petit); } .rail-chevron { transition: transform var(--duree) var(--courbe); } /* ⚠️ Fermé, le chevron pointe à GAUCHE — « -rotate-90 » chez Regard AI. */ .rail-groupe:not([open]) .rail-chevron { transform: rotate(-90deg); } .rail-groupe-corps { display: flex; flex-direction: column; gap: 2px; } .rail-entree { position: relative; display: flex; align-items: center; gap: var(--e-3); /* ← gap-2.5 */ padding: 8px var(--e-4); /* ← px-3 py-2 */ border-radius: var(--rayon); /* ← rounded-xl */ font-size: var(--t-section); /* ← text-[13px] */ font-weight: var(--g-normal); /* ← font-medium */ color: var(--gris); /* ← text-muted-foreground */ text-decoration: none; transition: background var(--duree) var(--courbe), color var(--duree) var(--courbe); } .rail-entree:hover { background: var(--champ); /* ← hover:bg-muted/60 */ color: var(--encre); } .rail-entree.actif { background: var(--sourdine); /* ← bg-muted */ color: var(--encre); font-weight: var(--g-demi); /* ← font-semibold */ } .rail-entree:focus-visible { outline: var(--trait-fort) solid var(--accent); outline-offset: 1px; } .rail-entree svg { flex-shrink: 0; } .rail-libelle { flex: 1; min-width: 0; } /* ⚠️ LE RAIL D'ACTIVITÉ — toujours rendu, opacité nulle au repos. Le poser seulement sur l'entrée active décalerait le texte d'un pixel à chaque changement d'écran. Regard AI le dit dans son propre commentaire. */ .rail-trait { position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: var(--trait-fort); /* ← w-0.5 */ height: 16px; /* ← h-4 */ border-radius: 0 2px 2px 0; /* ← rounded-r */ background: var(--accent); /* ← bg-primary */ opacity: 0; transition: opacity var(--duree) var(--courbe); } .rail-entree.actif .rail-trait { opacity: 1; } /* ─── Le pied ───────────────────────────────────────────────────────────── */ .rail-pied { display: flex; align-items: center; gap: var(--e-2); flex-shrink: 0; padding: var(--e-3) var(--e-4); /* ← px-4 py-3.5 */ border-top: var(--trait) solid var(--ligne); } .rail-compte { display: flex; align-items: center; gap: var(--e-3); /* ← gap-2.5 */ flex: 1; min-width: 0; text-decoration: none; border-radius: var(--rayon-petit); } .rail-avatar { display: flex; align-items: center; justify-content: center; width: 28px; height: 28px; /* ← h-7 w-7 */ flex-shrink: 0; border-radius: var(--rayon-plein); background: var(--encre); /* ← bg-foreground */ color: var(--blanc); font-size: var(--t-micro); /* ← text-[10px] — plancher du produit */ font-weight: var(--g-gras); text-transform: uppercase; } .rail-compte-texte { min-width: 0; display: flex; flex-direction: column; } .rail-compte-nom { font-size: var(--t-secondaire); /* ← text-[12px] */ font-weight: var(--g-demi); color: var(--encre); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .rail-compte-role { font-size: var(--t-micro); /* ← text-[10px] */ color: var(--gris-clair); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .rail-reglage, .rail-sortie button { display: flex; align-items: center; justify-content: center; width: 26px; height: 26px; flex-shrink: 0; padding: 0; border: 0; background: none; border-radius: var(--rayon-petit); color: var(--gris-clair); cursor: pointer; transition: color var(--duree) var(--courbe), background var(--duree) var(--courbe); } .rail-reglage:hover, .rail-sortie button:hover { color: var(--encre); background: var(--champ); } /* Écran de réglage ouvert : l'engrenage porte l'accent, comme le rail d'une entrée active. C'est le seul repère qui reste allumé sur ces écrans. */ .rail-reglage.actif { color: var(--accent); background: var(--voile-accent); } .rail-sortie { margin: 0; } /* ⚠️ L'ENVELOPPE DU CORPS. Le étant une rangée, le

et le