/* ============================================================ Scoliom Scolarité — feuille de style application Identité : charte v2 « La Journée d'école » — le violet Majorelle en APLAT Jetons et polices : assets/css/tokens.css (source unique de vérité) Typographie : jetons --font-title / --font-ui / --font-num (tokens.css) © 2026 Scoliom — une marque d'ABC IT SARL AU ============================================================ */ /* ===== POLICES ===== Les sept fontes de la charte v2 (Spectral, Archivo, Spline Sans Mono, IBM Plex Sans Arabic) sont déclarées dans assets/css/tokens.css, chargé AVANT cette feuille. Les @font-face qui vivaient ici chargeaient Inter et Plus Jakarta Sans — polices bannies — et les déclaraient sous `font-family: var(--font-title)`, ce qui n'est pas admis dans une règle @font-face : les six fichiers étaient téléchargés sans jamais servir. */ /* ===== RESET & VARIABLES ===== */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } /* Les jetons de l'identité vivent dans assets/css/tokens.css, chargé AVANT ce fichier. Ne PAS les redéfinir ici : cette feuille étant chargée après, toute redéfinition écraserait silencieusement la charte (et laisserait le produit avec deux identités selon les pages). */ /* ===== BASE ===== */ html { scroll-behavior: smooth; } body { font-family: var(--font-ui); font-size: 15px; line-height: 1.55; color: var(--text); background: var(--off-white); -webkit-font-smoothing: antialiased; } h1, h2 { font-family: var(--font-display); font-weight: 600; line-height: 1.2; color: var(--ink); letter-spacing: -.01em; } /* Spectral n'est pas faite pour l'UI dense : au-delà de h2, on reste en Archivo. */ h3, h4, h5 { font-family: var(--font-body); font-weight: 600; line-height: 1.3; color: var(--ink); } h1 { font-size: 1.55rem; letter-spacing: normal; } h2 { font-size: 1.3rem; letter-spacing: normal; } h3 { font-size: 1.1rem; letter-spacing: normal; } h4 { font-size: 1rem; } a { color: var(--violet); text-decoration: none; } a:hover { color: var(--violet-d); } img, svg { max-width: 100%; vertical-align: middle; } /* ===== ACCESSIBILITÉ ===== */ :focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; border-radius: 4px; } /* ============================================================ SURFACES FLOTTANTES — l'ombre unique et l'echelle de z-index ------------------------------------------------------------ UNE seule ombre dans le produit : `var(--shadow)`, la recette de la charte. Elle ne se pose que sur ce qui SURVOLE reellement le document : la modale, les toasts, la liste deroulante de la recherche globale, le sous-menu flottant de la barre compacte, la fenetre produit, et les deux panneaux lateraux (notifications, aide). Tout le reste est DELIMITE par un filet. La seule autre forme d'ombre admise est l'anneau de focus, ecrit une fois a la section des champs. ECHELLE DE Z-INDEX — toutes les valeurs de cette feuille, et rien d'autre : 1 . 3 empilements LOCAUX a un composant (en-tete de groupe collant, tete de modale collante, colonnes figees de la grille de notes) 50 barre superieure collante 60 sous-menu flottant de la barre laterale compacte 80 liste deroulante de la recherche globale 120 panneaux lateraux — notifications ET aide, JUMEAUX : meme ombre, meme z-index, sans quoi l'un passe devant l'autre sans raison 1000 voile de la modale 2000 toasts : au-dessus de tout, y compris d'une modale ouverte, car ils annoncent le resultat de ce qu'on vient d'y faire ============================================================ */ /* ============================================================ LAYOUT APPLICATION ============================================================ */ .app-layout { display: flex; min-height: 100vh; } /* ----- Sidebar ----- */ .sidebar { /* T1 — la largeur devient un JETON : le mode compact n est plus qu un changement de valeur, pas une seconde regle a tenir en parallele. */ width: var(--nav-l, 250px); min-width: var(--nav-l, 250px); background: var(--nav); border-inline-end: 1px solid var(--nav-rule); color: var(--nav-tx-str); display: flex; flex-direction: column; padding: 1.1rem .9rem; position: sticky; top: 0; height: 100vh; overflow-y: auto; } /* LA MARQUE SE LIT COMME UN BLOC, PAS COMME TROIS ELEMENTS EMPILES. Auparavant le logo, « Scoliom » et « Scolarite » ne partageaient aucun axe : le mot etait en haut, le logo au milieu, le sous-titre retombait sous la base du logo. L oeil lisait trois choses au lieu d une. Le logo repose desormais sur une surface legerement eclaircie — sur fond encre, un trait blanc nu n a aucune assise — et « SCOLARITE » devient un descripteur en capitales espacees : sans cela il se lisait comme une entree de menu de plus. ⚠️ La pastille reste DISCRETE, pas Majorelle pleine : ce violet est celui du titre d ecran (« ou suis-je »). Deux pastilles pleines a l ecran en meme temps se disputeraient le regard. */ .sidebar-brand { display: flex; align-items: center; gap: .75rem; padding: .15rem .35rem 1.3rem; font-family: var(--font-title); font-weight: 600; font-size: 1.3rem; color: var(--nav-tx-str); letter-spacing: -.01em; } .sidebar-brand > span { line-height: 1.02; } .sidebar-brand:hover { color: var(--nav-tx-str); } .sidebar-brand svg, .sidebar-brand .logo-mark { width: 42px; height: 42px; flex-shrink: 0; padding: 6px; box-sizing: border-box; background: rgba(255, 255, 255, .10); border-radius: var(--radius-btn); } .sidebar-brand small { display: block; font-family: var(--font-ui); font-weight: 600; font-size: .62rem; opacity: .6; letter-spacing: .16em; text-transform: uppercase; margin-top: .2rem; } .sidebar-nav { flex: 1; display: flex; flex-direction: column; gap: .2rem; padding-top: .4rem; } .nav-item { display: flex; align-items: center; gap: .7rem; padding: .6rem .85rem; border-radius: var(--radius-btn); color: rgba(255,255,255,.88); font-size: .9rem; font-weight: 500; transition: background .18s ease, color .18s ease; white-space: nowrap; } .nav-item i { width: 20px; text-align: center; font-size: .95rem; opacity: .9; } .nav-item:hover { background: rgba(255,255,255,.12); color: var(--nav-tx-str); } /* §D1 — L'ITEM ACTIF EST UNE PILULE VIOLETTE PLEINE, ET SON ICÔNE EST BLANCHE. Il portait un voile blanc translucide. Composé sur l'encre de la barre, le pixel réellement peint n'était pas le violet d'identité que §D1 nomme, mais une encre éclaircie — la règle disait une chose, l'écran en montrait une autre. Un APLAT de `--violet` ne dépend d'aucune composition : ce qui est écrit est ce qui est peint. Les contrastes du libellé et de l'icône blancs sur cet aplat ont été mesurés au navigateur, sonde étalonnée : au-dessus du seuil AA. Le sous-item actif prend le même aplat, plus bas dans cette feuille (`.nav-enfant.active`) : deux aspects pour un même état se liraient comme deux états. ⚠️ Le liseré qui accompagnait l'entrée courante a été RETIRÉ : il était en `--violet`, donc invisible sur une pilule violette, et il décalait l'entrée active de sa propre épaisseur par rapport à ses voisines. */ .nav-item.active { background: var(--violet); color: var(--nav-tx-str); font-weight: 700; } .nav-item.active i { opacity: 1; } .sidebar-foot { padding: 1rem .55rem .25rem; font-size: .7rem; line-height: 1.45; opacity: .7; color: var(--nav-tx-str); } /* ----- Zone principale ----- */ .main { flex: 1; display: flex; flex-direction: column; min-width: 0; } /* ⚠️ GRILLE, PAS FLEX AVEC « space-between ». En flex, la zone de recherche etait un element souple place entre le titre et les indicateurs : sa position horizontale dependait donc de la LONGUEUR DU TITRE. « Accueil » et « Notes et bulletins » ne donnaient pas la meme, si bien que le champ se deplacait a chaque changement d onglet — l oeil devait le rechercher au lieu de le retrouver. Avec une colonne souple a gauche, la largeur du titre n influe plus : le champ garde la meme abscisse d un ecran a l autre. ⚠️ LES QUATRE PISTES ONT UN PLANCHER, ET C EST CE QUI MANQUAIT. La grille posait « minmax(0, 1fr) » sur le titre et « auto auto » sur les deux blocs de droite. Un « auto » ne cede rien : les deux prenaient tout ce qu ils voulaient, et le titre — seul a pouvoir tomber a zero — tombait a zero. MESURE DU 22/08/2026, SUR SEIZE LARGEURS : le libelle de l ecran etait invisible PARTOUT SAUF EN 1920 px, et la pastille d icone, qui ne sait pas retrecir, debordait de sa piste vide pour se poser SUR le champ de recherche — 27 px de chevauchement de 1500 a 901 px. Entre 1100 et 901 px la barre entiere debordait horizontalement, jusqu a 195 px : le bouton de deconnexion sortait de l ecran. Autrement dit, sur tous les portables du marche, cette barre n avait pas de titre et perdait ses commandes. Chaque piste declare donc desormais ou elle s arrete de retrecir, et les deux blocs de droite acceptent enfin de le faire (voir « min-width: 0 » sur « .topbar-meta » et « .topbar-user » plus bas, sans quoi un conteneur flex refuse de descendre sous son contenu). */ .topbar { background: var(--white); position: sticky; top: 0; z-index: 50; border-bottom: 1px solid var(--border); padding: 1rem 1.5rem; display: grid; /* DEUX RANGEES, ET C EST UN CONSTAT AVANT D ETRE UN CHOIX. Additionnees a leur largeur naturelle, les cinq choses que porte cette barre — titre, recherche, etablissement, annee, identite — demandent 1 671 px. Avec la barre laterale, il faut donc une fenetre de 1 921 px pour les ranger en une seule rangee. Sous ce seuil, quelque chose doit ceder ; l ancienne grille faisait ceder le TITRE jusqu a zero, puis debordait quand meme. La recherche prend donc sa propre rangee : c est le geste le plus frequent du secretariat, il merite un champ entier plutot qu un reste de 192 px, et pose a gauche il ne se deplace plus jamais — ce que la grille cherchait deja a obtenir. Le prix est 32 px de hauteur, paye partout plutot qu une mise en page qui se reorganise a un seuil que personne ne verra venir. */ grid-template-columns: /* Le plancher du titre SUIT la fenetre. Fixe a 15 rem il redevenait trop gourmand sous 1 024 px — la barre y debordait de nouveau de 41 px, parce que les deux blocs de droite avaient alors atteint leur propre contenu minimal et ne pouvaient plus rien ceder. */ minmax(clamp(7rem, 14vw, 15rem), 1fr) minmax(0, auto) /* etablissement et annee */ minmax(0, auto); /* identite et actions */ align-items: center; gap: .55rem 1rem; } /* Les places sont posees EXPLICITEMENT : le placement automatique ne revient jamais en arriere, et il poussait la recherche sur une troisieme rangee. */ .topbar-title { grid-column: 1; grid-row: 1; } .topbar-meta { grid-column: 2; grid-row: 1; } .topbar-user { grid-column: 3; grid-row: 1; } /* Le champ prend la rangee entiere, mais pas la largeur entiere : sur un ecran large, une zone de saisie de 1 600 px n aide personne a viser. ⚠️ IL ETAIT CALE A GAUCHE, ET CA SE VOYAIT. Sur une fenetre de 1 600 px, la rangee 2 portait 640 px de champ suivis de PRES DE MILLE PIXELS DE VIDE, pendant que la rangee 1 avait son tiers gauche libre — le fondateur l a releve sur capture. Un champ pose a un bout d une rangee vide se lit comme un reste de mise en page, pas comme un choix. Centre, il devient l axe de la barre : c est la place que les moteurs de recherche ont apprise a tout le monde, et le vide se repartit au lieu de s accumuler d un cote. Le plafond monte a 46 rem — assez pour que le champ pese dans la rangee, pas assez pour qu on doive viser loin. */ .topbar .rg-zone { grid-column: 1 / -1; grid-row: 2; max-width: 46rem; margin-inline: auto; width: 100%; } /* Le titre d ecran porte l ICONE de son module — la meme que la barre laterale. Un mot seul pose a gauche d une barre vide ne dit pas ou l on est : il faut le lire. L icone se reconnait avant d etre lue. L ellipse vit sur le LIBELLE, pas sur le conteneur : en flex, un text-overflow pose sur le parent ne tronque rien. */ .topbar-title { display: flex; align-items: center; gap: .6rem; min-width: 0; } .topbar-ico { width: 2.7rem; height: 2.7rem; flex: 0 0 2.7rem; display: grid; place-items: center; border-radius: var(--radius-btn); /* Pastille PLEINE, pas un voile : c est l ancre de la page, le seul element de la barre qui doive se voir avant d etre lu. Le voile pale la faisait disparaitre dans le blanc. Aucune ombre : la charte n en admet que sur ce qui SURVOLE le document (R2), et cette pastille est posee dans le flux de la barre. */ background: var(--violet); color: var(--on-accent); font-size: 1.1rem; } .topbar-libelle { font-family: var(--font-title); font-weight: 700; /* La taille SUIT la fenetre au lieu de forcer l ellipse. A 1,7 rem fixe, « Notes & bulletins » demandait 208 px de libelle : sur un portable il ressortait « Not… », ce qui ne nomme plus rien. Le plancher de 1,15 rem reste au-dessus du corps du texte courant — un titre doit rester un titre, meme serre. */ font-size: clamp(1.15rem, .95vw + .55rem, 1.7rem); color: var(--dark); letter-spacing: -.015em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .topbar-meta { display: flex; align-items: center; gap: .5rem; /* ⚠️ LE REPLI N EST PLUS PERMANENT, ET C EST UNE CAUSE UNIQUE POUR DEUX DEFAUTS. Etablissement et annee passaient a la ligne meme sur 1 600 px, ce qui donnait 70 px a la premiere rangee au lieu de 40 — pendant que le TIERS GAUCHE de cette rangee restait vide. Les deux viennent du meme endroit : la piste du titre est en `1fr` et absorbe tout le reste, meme quand le titre est VIDE (c est le cas sur l Accueil). Les deux blocs de droite se retrouvaient alors a leur contenu minimal, donc replies. Mesure : a 1 600 px il reste ~1 300 px utiles pour ~1 040 px de contenu. La place existe ; c est la repartition qui la donnait au vide. Le repli reste sous 900 px, ou il est necessaire. */ flex-wrap: nowrap; min-width: 0; } @media (max-width: 900px) { .topbar-meta { flex-wrap: wrap; } } .topbar-user { display: flex; align-items: center; gap: .6rem; font-size: .85rem; color: var(--text-muted); white-space: nowrap; /* Ce bloc est le plus large de la barre — 422 px mesures — et il etait le seul a ne jamais ceder un pixel. Il cede maintenant, et c est le NOM qui cede en premier : la cloche, l aide, la langue, le role et la deconnexion sont des COMMANDES, le nom est un rappel. Perdre la fin d un nom qu on connait coute infiniment moins que perdre un bouton. */ min-width: 0; } /* Le nom tronque, l icone reste : « BENNANI Samira » devient « BENNANI… » avant que quoi que ce soit d autre ne disparaisse de la barre. */ #btn-profil { display: inline-flex; align-items: center; gap: .4rem; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } #btn-profil i { flex: 0 0 auto; } .topbar-user strong { color: var(--dark); font-weight: 600; } .content { padding: clamp(1.25rem, 2.5vw, 2rem); display: flex; flex-direction: column; gap: 1.25rem; } /* ----- Chips (établissement, année scolaire…) ----- */ .chip { display: inline-flex; align-items: center; gap: .4rem; padding: .3rem .75rem; border-radius: 8px; background: var(--violet-xl); color: var(--violet-d); font-size: .78rem; font-weight: 600; line-height: 1.3; white-space: nowrap; } .chip i { font-size: .75rem; opacity: .85; } /* ============================================================ CARTES ============================================================ */ /* Une carte est DELIMITEE par un filet ; elle ne flotte pas. L'ombre unique est reservee a ce qui survole reellement le document (R2). La carte consomme --surface, et non --white : le blanc est une COULEUR, la surface est un ROLE. Sous [data-theme="dark"], --white reste du blanc — c'est son nom — et la carte restait donc blanche pendant que son texte passait en encre claire. Les deux jetons valent la meme chose en theme clair : ce changement ne deplace aucun pixel aujourd'hui, il rend seulement la carte capable de suivre. Les graphiques lisent le meme jeton pour l'anneau qui separe les tranches de leurs donuts. */ .card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 1.25rem 1.4rem; } .card-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-bottom: 1rem; } .card-title { font-family: var(--font-body); font-weight: 600; font-size: 1.05rem; color: var(--dark); display: flex; align-items: center; gap: .55rem; letter-spacing: normal; } .card-title i { color: var(--violet); font-size: .95rem; } /* ============================================================ KPI ============================================================ */ .kpi-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); /* Voir le motif du plancher a zero, plus bas, au bloc des cartes. */ gap: 1rem; } .kpi { background: var(--white); border: 1px solid var(--border); border-radius: var(--radius); padding: 1.1rem 1.25rem; display: flex; align-items: center; gap: .95rem; transition: border-color .15s ease; } /* Plus de carte qui levite : au survol, une carte change de FILET (R2). */ .kpi:hover, .card:hover, .table-wrap:hover { border-color: var(--violet); } .kpi-icon { width: 44px; height: 44px; min-width: 44px; border-radius: var(--radius-btn); display: flex; align-items: center; justify-content: center; font-size: 1.1rem; background: var(--violet-xl); color: var(--violet); } .kpi-value { font-family: var(--font-mono); font-weight: 600; font-variant-numeric: tabular-nums; font-size: 1.55rem; line-height: 1.15; color: var(--ink); /* Un seul letter-spacing : la déclaration `normal` qui suivait annulait silencieusement le resserrement voulu pour les grands nombres. */ letter-spacing: -.02em; } /* Un montant complet est deux fois plus long qu'un effectif : à la taille des autres KPI il passait à la ligne et cassait l'alignement de toute la rangée. */ #kpi-caisse .kpi-value, .kpi-value:has(.montant) { font-size: 1.12rem; line-height: 1.35; } .kpi-label { font-size: .8rem; color: var(--text-muted); font-weight: 500; } /* Anatomie §D2 (direction « Console ») : le libellé se lit AVANT le chiffre, et le chiffre tient sur UNE ligne — valeur, unité, puce de tendance. Le retrait qui séparait autrefois le libellé du chiffre a suivi l'inversion. Cette classe est posée par `kpiHtml()`, la fabrique unique des cartes. */ .kpi-ligne { display: flex; align-items: baseline; gap: .35rem; margin-top: .1rem; /* §D2, mot pour mot : « ligne de valeur en white-space: nowrap ». La règle porte sur la LIGNE, pas seulement sur ses morceaux, et elle ne se réécrit pas : la première version de ce lot avait ouvert le repli ici, puis redéfini §D2 dans ce commentaire pour que le repli devienne conforme. La ligne se coupait alors aux largeurs les plus courantes, et la carte qui la portait cessait d'être alignée sur ses trois voisines. Ce qui a été réparé, c'est la CAUSE : la puce de tendance se tait quand la période précédente n'est plus comparable (voir `tendanceHtml`, assets/js/app.js), si bien que la ligne la plus longue de l'écran — un montant — n'a plus de puce à côté d'elle. */ white-space: nowrap; } .kpi-value, .kpi-tend { white-space: nowrap; } /* Et avant tout, le chiffre cède du corps : §D2 veut que ce soit lui qui recule quand la place manque. */ .kpi-ligne:has(.kpi-tend) .kpi-value:has(.montant) { font-size: 1rem; } /* Variantes de teinte — charte v2. La charte bannit les tuiles à icône pastel multicolores : l'ambre et le turquoise n'appartiennent à aucune palette du produit. Il ne reste donc que trois registres : l'accent d'identité par défaut, le vert pour une confirmation factuelle (validé, encaissé) et le rouge pour ce qui bloque réellement. « À traiter » n'est ni l'un ni l'autre : c'est du violet. */ .kpi-violet .kpi-icon, .kpi-orange .kpi-icon { background: var(--veil); color: var(--violet); } .kpi-green .kpi-icon { background: var(--green-bg); color: var(--green); } .kpi-red .kpi-icon { background: var(--error-bg); color: var(--error); } /* ============================================================ TOOLBAR (recherche + filtres + actions) ============================================================ */ .toolbar { display: flex; align-items: center; gap: .75rem; flex-wrap: wrap; } .toolbar .spacer { flex: 1; } /* ── LA BARRE DE SÉLECTION : SA HAUTEUR EST RÉSERVÉE ── Posée `hidden`, elle apparaissait au premier clic et poussait le tableau de 51 px — mesuré : la première ligne passait de y=616 à y=667. Le saut se produit à l'instant précis où l'utilisateur enchaîne des clics, c'est-à-dire au pire moment possible : l'élève qu'il visait a bougé sous le curseur. La hauteur est donc celle d'une rangée de commandes, occupée ou non ; à vide, la barre dit à quoi servent les cases. */ #el-selbar { min-height: 36px; } /* ⚠️ DANS UNE BARRE D OUTILS, UNE COMMANDE SE MESURE A SON CONTENU. La regle globale des formulaires, plus bas, pose « width: 100% » sur tout « input » et tout « select » — ce qui est JUSTE dans une colonne de formulaire, ou un champ doit remplir sa colonne, et FAUX dans une barre d outils, ou il doit se ranger a cote des autres. Rien ne distinguait les deux cas, si bien que chaque filtre prenait une rangee entiere pour lui seul. MESURE DU 22/08/2026 : l ecran « Listes & Recherches » empilait SEPT listes deroulantes de 1 000 px — 430 px de hauteur pour sept libelles de moins de vingt caracteres — avant meme d avoir montre une seule ligne de resultat. Le plafond compte autant que la mise en largeur automatique : sans lui, une liste de classes se calerait sur son option la plus longue et repousserait les commandes voisines hors de la barre. « > » et non un descendant quelconque : un formulaire pose DANS une barre d outils garde ses champs en pleine largeur, ce qui est bien ce qu il faut. */ .toolbar > select, .toolbar > input:not(.search-input) { width: auto; max-width: 15rem; } /* Le GROUPE d actions de fin de barre : voir le motif au point d emploi, dans assets/js/app.js. « margin-left: auto » remplace l espaceur — le groupe se pousse lui-meme a droite, et comme il n a qu un seul element de grille, il se replie d un bloc au lieu de laisser un bouton derriere lui. */ .toolbar > .toolbar-actions { display: flex; align-items: center; flex-wrap: wrap; gap: .5rem; margin-left: auto; } /* Le groupe pose apres un espaceur ne se pousse pas deux fois. */ .toolbar > .spacer + .toolbar-actions { margin-left: 0; } /* La recherche, elle, PREND LA PLACE QUI RESTE : c est le champ ou l on tape, pas un reglage qu on choisit. Elle garde un plancher lisible et un plafond qui l empeche de devenir une bande sur un grand ecran. */ .toolbar > .search-input { width: auto; /* ⚠️ CE QUI DECIDE DU REPLI D UNE BARRE, C EST SON `max-width` — PAS SA BASE, ET C EST CONTRE-INTUITIF. Mesure sur l ecran Eleves (1 366 px, 1 052 px utiles) : brider la base a 8 rem ne change RIEN, la barre reste a 79 px ; brider aussi le `max-width` a 8 rem la fait tomber a 37 px d un coup. La taille maximale entre dans le calcul de la taille hypothetique, et c est elle que le navigateur compare a la place restante. ⚠️ ET ON NE LA BRIDE PAS POUR AUTANT. Pour que cette barre-la tienne sur une rangee il faudrait descendre a 11 rem — mesure : 176 + 152 (niveau) + 671 (six boutons) + 36 d ecarts = 1 035 pour 1 052. Ce serait payer une recherche etriquee sur TOUS les ecrans pour gagner 42 px sur UN seul, alors que cet ecran vient d en gagner 337 par ailleurs. Huit commandes ne tiennent pas sur 1 052 px : c est de l arithmetique, pas un defaut. La base passe tout de meme de 14 a 12 rem : elle ne corrige pas Eleves — et il ne faut pas ecrire qu elle le fait — mais elle laisse un peu plus de place aux barres qui, elles, sont a la limite. */ flex: 1 1 12rem; max-width: 24rem; } /* Ce champ appartient a la FAMILLE DES CHAMPS (filet, rayon, police, couleur, transition : voir la section Formulaires). Il ne garde ici que sa souplesse dans la barre d'outils ; sa loupe et le rembourrage qui lui fait place sont poses la-bas, ou ils peuvent battre la regle globale. */ .search-input { flex: 1; min-width: 220px; max-width: 420px; } .search-input::placeholder { color: var(--text-muted); opacity: .75; } /* ⚠️ « .filters » EST POSEE SUR LE CHAMP, PAS AUTOUR DE LUI — et sa definition disait l inverse. Elle etait ecrite comme un CONTENEUR : « display: flex » plus une regle « .filters select » pour ses enfants. RELEVE DU 22/08/2026 SUR TOUT LE DEPOT : elle sert vingt fois, et les vingt fois directement sur un « sans attribut type n'etait atteint par aucun selecteur de cette liste et se rendait au style brut du navigateur — coins vifs, filet gris. C'est le cas de 136 champs emis par assets/js/app.js, dont la grille de saisie des notes et le sujet d'un envoi. */ input[type="text"], input[type="email"], input[type="password"], input[type="number"], input[type="date"], input[type="time"], input[type="search"], input[type="tel"], input[type="file"], input:not([type]), select, textarea { width: 100%; padding: .55rem .85rem; border: 1.5px solid var(--line); border-radius: var(--radius-btn); font-family: inherit; font-size: .88rem; color: var(--text); background: var(--white); transition: border-color .18s ease, box-shadow .18s ease; } textarea { resize: vertical; min-height: 90px; } /* ⚠️ `input.search-input` ET NON `.search-input`. Ces champs n'ont pas d'attribut type : depuis que la liste ci-dessus comprend `input:not([type])`, elle les atteint a (0,1,1), et une classe seule, a (0,1,0), ne la battrait pas — le raccourci `background:` de la regle globale effacerait la loupe et son rembourrage de gauche. La regle est donc posee ICI, apres la liste, et avec la specificite qu'il faut. ⚠️ La loupe est peinte dans le FOND, par une URI de donnees : une image de fond ne peut pas lire un jeton CSS. Sa teinte est celle de --ink-soft en plein jour, recopiee — elle ne suivra donc pas le theme sombre. Le porter en `mask-image` demanderait un pseudo-element, qu'un n'a pas : c'est un changement de balisage, il n'appartient pas a ce lot. */ input.search-input { padding: .55rem .9rem .55rem 2.4rem; background: var(--white) no-repeat .85rem center; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512' width='14' height='14'%3E%3Cpath fill='%235A5478' d='M416 208c0 45.9-14.9 88.3-40 122.7L502.6 457.4c12.5 12.5 12.5 32.8 0 45.3s-32.8 12.5-45.3 0L330.7 376c-34.4 25.2-76.8 40-122.7 40C93.1 416 0 322.9 0 208S93.1 0 208 0S416 93.1 416 208zM208 352a144 144 0 1 0 0-288 144 144 0 1 0 0 288z'/%3E%3C/svg%3E"); } /* ⚠️ K7 — `outline: none` ici ANNULAIT la règle `:focus-visible` globale (plus haut dans ce fichier) par simple spécificité : `input:focus` (0,1,1) l'emporte sur `:focus-visible` (0,1,0). Le focus ne se voyait donc plus qu'à un changement de COULEUR de bordure — c'est-à-dire pas du tout pour qui ne distingue pas ce violet du gris, et mal au clavier. On garde le retrait de l'outline natif (il doublerait le halo) mais on rend un anneau explicite, et seulement au focus CLAVIER : `:focus-visible` ne se déclenche pas au clic à la souris, donc l'écran ne se met pas à clignoter pour qui n'en a pas besoin. */ input:focus, select:focus, textarea:focus, .search-input:focus, .rg-zone .rg-champ:focus { outline: none; border-color: var(--violet); box-shadow: none; } /* L'ANNEAU DE FOCUS UNIQUE (R2). Il s'ecrit ICI et nulle part ailleurs : trois traitements concurrents cohabitaient — cet anneau, un second anneau plus pale sur la recherche globale, et un contour plein de 3 px pose sur TOUT champ en focus, souris comprise, qui defaisait la decision K7 rappelee ci-dessus. */ input:focus-visible, select:focus-visible, textarea:focus-visible, .search-input:focus-visible, .rg-zone .rg-champ:focus-visible { border-color: var(--violet); box-shadow: 0 0 0 3px color-mix(in srgb, var(--focus) 40%, transparent); } input:disabled, select:disabled, textarea:disabled, input[readonly] { background: var(--off-white); color: var(--text-muted); cursor: not-allowed; } input[type="checkbox"], input[type="radio"] { width: 16px; height: 16px; accent-color: var(--violet); cursor: pointer; } ::placeholder { color: var(--text-muted); opacity: .7; } /* ============================================================ MODALES ============================================================ */ .modal-overlay { position: fixed; inset: 0; background: rgba(26,16,64,.55); display: none; z-index: 1000; padding: 1rem; -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); } .modal-overlay.open { display: flex; align-items: center; justify-content: center; } .modal { background: var(--white); border-radius: var(--radius); width: min(640px, 94vw); max-height: 92vh; overflow: auto; box-shadow: var(--shadow); animation: modal-pop .22s ease; } .modal.modal-lg { width: min(940px, 94vw); } /* ── LA FICHE ÉLÈVE A SA PROPRE LARGEUR ── Elle portait `.modal-lg`, déclarée une fois et posée sur la plupart des grandes modales du produit : l'élargir là aurait déplacé tous ces écrans pour régler le problème d'un seul. Ses neuf onglets et leurs comptes ne tiennent pas sur une rangée à 940 px ; ils tiennent à 1 120. Sous cette largeur de fenêtre, la barre reprend deux rangées — c'est-à-dire le comportement qu'elle avait partout, pas une régression. */ .modal.modal-fiche { width: min(1120px, 94vw); } @keyframes modal-pop { from { opacity: 0; transform: translateY(14px) scale(.98); } to { opacity: 1; transform: translateY(0) scale(1); } } .modal-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.15rem 1.4rem; border-bottom: 1px solid var(--border); position: sticky; top: 0; background: var(--white); z-index: 2; /* Les quatre angles de la modale sont d'accord : la tete et le pied reprennent le rayon de la boite au lieu d'en inventer un. */ border-radius: var(--radius) var(--radius) 0 0; } .modal-head h3 { font-size: 1.05rem; display: flex; align-items: center; gap: .55rem; } .modal-head h3 i { color: var(--violet); } .modal-close { width: 32px; height: 32px; border: none; border-radius: var(--radius-btn); background: var(--violet-xl); color: var(--violet-d); font-size: .95rem; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; transition: background .15s ease; } .modal-close:hover { background: var(--violet-card); } .modal-body { padding: 1.25rem 1.4rem; } .modal-foot { display: flex; align-items: center; justify-content: flex-end; gap: .6rem; padding: 1rem 1.4rem; border-top: 1px solid var(--border); position: sticky; bottom: 0; background: var(--white); border-radius: 0 0 var(--radius) var(--radius); } /* ============================================================ ALERTES ============================================================ */ .alert { display: flex; align-items: flex-start; gap: .65rem; /* Rayon de CONTROLE et non de surface : une alerte vit DANS une carte, un rayon de surface l'y mettrait en concurrence avec son contenant. */ padding: .85rem 1.1rem; border-radius: var(--radius-btn); font-size: .88rem; line-height: 1.5; border: 1px solid transparent; } .alert i { margin-top: .15rem; } .alert-success { background: var(--green-bg); color: var(--green-tx); border-color: color-mix(in srgb, var(--green) 25%, transparent); } .alert-error { background: var(--error-bg); color: var(--error-tx); border-color: color-mix(in srgb, var(--error) 25%, transparent); } .alert-info { background: var(--violet-xl); color: var(--violet-d); border-color: var(--border); } /* « Attention sans gravité » : à distinguer d'une erreur (rouge) et d'une simple information (violet). Plusieurs écrans l'employaient déjà sans qu'elle existe : l'encadré s'affichait alors sans couleur, donc sans signal. */ .alert-warning { background: var(--veil); color: var(--violet-deep); border-color: var(--line); } /* Alias : « danger » et « error » désignent la même chose côté interface. */ .alert-danger { background: var(--error-bg); color: var(--error-tx); border-color: color-mix(in srgb, var(--error) 25%, transparent); } /* ============================================================ ÉTAT VIDE ============================================================ */ .empty-state { text-align: center; padding: 2.5rem 1.5rem; color: var(--text-muted); } .empty-state i { font-size: 2.2rem; color: var(--violet-l); opacity: .6; margin-bottom: .75rem; display: block; } /* h3 et non h4 : assets/js/app.js émet un

dans chacun de ses états vides — le titre n'était donc jamais stylé. */ /* h3 ET h4 : le back-office emet des h3, mais les deux seuls etats vides en h4 du produit sont ceux du portail des familles et de la preinscription. Ne nommer que h3 leur retirait leur mise en forme. */ .empty-state h3, .empty-state h4 { color: var(--dark); margin-bottom: .3rem; font-weight: 700; } .empty-state p { font-size: .85rem; } /* ============================================================ TOASTS — les cartes « fragment » de la charte Sur le site, ces cartes flottent au-dessus des captures et racontent un moment de la journée. Dans le produit, ce sont les mêmes : carte blanche, filet lilas, rayon de surface, ombre unique — c'est bien un objet qui SURVOLE le document. ============================================================ */ .toast-wrap { position: fixed; top: 1rem; right: 1rem; z-index: 2000; display: flex; flex-direction: column; gap: .6rem; max-width: min(380px, calc(100vw - 2rem)); } .toast { background: var(--white); border: 1px solid var(--border); /* Propriete LOGIQUE : un `border-left` resterait a gauche en arabe. */ border-inline-start: 3px solid var(--violet); border-radius: var(--radius); box-shadow: var(--shadow); padding: .7rem .9rem; font-size: .86rem; line-height: 1.45; color: var(--ink); display: flex; align-items: flex-start; gap: .6rem; animation: toast-in .24s cubic-bezier(.16,.84,.44,1); } .toast.success { border-inline-start-color: var(--green); } .toast.success i { color: var(--green); } .toast.error { border-inline-start-color: var(--error); } .toast.error i { color: var(--error); } /* La pastille d'icône d'une confirmation est verte, comme sur le site. */ .toast.success > i:first-child { color: var(--green); background: var(--green-bg); border-radius: 50%; width: 22px; height: 22px; display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; } @keyframes toast-in { from { opacity: 0; transform: translateX(24px); } to { opacity: 1; transform: translateX(0); } } /* ============================================================ GRAPHIQUES (Chart.js) — conteneur à HAUTEUR FIXE obligatoire : en mode responsive sans ratio, un canvas sans hauteur bornée grandit indéfiniment et étire la page verticalement. ============================================================ */ .chart-box { position: relative; height: 240px; width: 100%; } .chart-box canvas { position: absolute; inset: 0; max-height: 100%; } /* Listes/tableaux longs du tableau de bord : hauteur bornée + défilement interne */ .table-scroll { max-height: 320px; overflow-y: auto; } /* ============================================================ BARRES DE PROGRESSION ============================================================ */ .progress { width: 100%; height: 8px; border-radius: var(--radius-btn); background: var(--violet-xl); overflow: hidden; } .progress-fill { height: 100%; border-radius: var(--radius-btn); background: var(--violet); transition: width .35s ease; } .progress-fill.warn { background: var(--violet-deep); } .progress-fill.full { background: var(--error); } /* ============================================================ ONGLETS PILULES ============================================================ */ .tabs-inline { display: flex; align-items: center; gap: .4rem; flex-wrap: wrap; } .tab-pill { display: inline-flex; align-items: center; gap: .45rem; padding: .42rem .95rem; border-radius: var(--radius-btn); border: 1.5px solid var(--violet-card); background: var(--white); color: var(--text-muted); font-family: inherit; font-size: .82rem; font-weight: 600; cursor: pointer; transition: background .15s ease, color .15s ease, border-color .15s ease; } .tab-pill:hover { border-color: var(--violet); color: var(--violet-d); } .tab-pill.active { background: var(--violet); border-color: transparent; color: var(--on-accent); } /* ============================================================ PIÈCES JUSTIFICATIVES (lignes de documents) ============================================================ */ .piece-row { display: flex; align-items: center; gap: .8rem; padding: .7rem .9rem; border: 1px solid var(--border); border-radius: var(--radius-btn); background: var(--white); transition: background .15s ease, border-color .15s ease; } .piece-row:hover { background: var(--violet-xxl); border-color: var(--violet-card); } .piece-row + .piece-row { margin-top: .5rem; } .piece-row .piece-name { flex: 1; min-width: 0; font-size: .88rem; font-weight: 600; color: var(--dark); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .piece-row .piece-meta { font-size: .75rem; color: var(--text-muted); white-space: nowrap; } /* Le balisage emet `` : le selecteur qui visait `i.piece-icon` ne rencontrait donc jamais rien, et l'icone tombait sur l'encre et la chasse du texte voisin. Le selecteur porte desormais sur la classe, la ou elle est reellement posee. */ .piece-row .piece-icon { font-size: 1.1rem; color: var(--violet); width: 24px; text-align: center; } /* ============================================================ PAGE DE CONNEXION ============================================================ */ .login-page { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 1.5rem; background: var(--bg); } .login-card { width: 420px; max-width: 100%; background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: 2.2rem 2rem; } .login-card .form-group { margin-bottom: .9rem; } .login-card .logo, .login-page .logo { display: flex; align-items: center; justify-content: center; gap: .65rem; font-family: var(--font-display); font-weight: 600; font-size: 1.4rem; color: var(--dark); letter-spacing: normal; margin-bottom: .4rem; } .logo-mark { width: 40px; height: 40px; flex-shrink: 0; } .login-card .login-sub { text-align: center; font-size: .85rem; color: var(--text-muted); margin-bottom: 1.5rem; } .login-card .btn { width: 100%; } .login-card .login-foot { margin-top: 1.4rem; text-align: center; font-size: .72rem; color: var(--text-muted); line-height: 1.5; } /* ============================================================ UTILITAIRES LÉGERS ============================================================ */ .text-muted { color: var(--text-muted); } .text-center { text-align: center; } .text-right { text-align: right; } .mt-1 { margin-top: .5rem; } .mt-2 { margin-top: 1rem; } .mb-1 { margin-bottom: .5rem; } .mb-2 { margin-bottom: 1rem; } .flex { display: flex; align-items: center; gap: .6rem; } .flex-wrap { flex-wrap: wrap; } .grow { flex: 1; } .nowrap { white-space: nowrap; } /* ============================================================ RESPONSIVE ============================================================ */ @media (max-width: 1100px) { .form-grid.cols-3 { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 900px) { .app-layout { flex-direction: column; } .sidebar { width: 100%; min-width: 0; height: auto; position: static; padding: .75rem .9rem; } .sidebar-brand { padding-bottom: .6rem; } .sidebar-nav { flex-direction: row; overflow-x: auto; gap: .35rem; padding: .2rem 0 .4rem; -webkit-overflow-scrolling: touch; scrollbar-width: thin; } .nav-item { flex: 0 0 auto; padding: .5rem .8rem; font-size: .82rem; } .sidebar-foot { display: none; } .topbar { flex-wrap: wrap; padding: .7rem 1rem; gap: .5rem; } .topbar-title { white-space: normal; } .form-grid.cols-2, .form-grid.cols-3 { grid-template-columns: 1fr; } .search-input { max-width: none; } .kpi-value { font-size: 1.6rem; } .modal, .modal.modal-lg { width: 96vw; } .toast-wrap { left: 1rem; right: 1rem; max-width: none; } } @media (max-width: 520px) { .content { padding: 1rem .8rem; } .card { padding: 1rem; } .kpi-grid { grid-template-columns: 1fr 1fr; } /* `stretch` et non `flex-start` : en colonne, le corps est un enfant dont la taille TRANSVERSE est la largeur. Posé à `flex-start`, il épousait son texte — et la courbe, qui fait toute la largeur de son parent, épousait le texte avec lui. Deux cartes voisines rendaient alors deux courbes de deux largeurs. La tuile d'icône garde la sienne : elle est fixée. */ .kpi { flex-direction: column; align-items: stretch; gap: .5rem; } .row-actions { justify-content: flex-start; } } /* ============================================================ IMPRESSION ============================================================ */ @media print { body { background: #fff; font-size: 12px; } .sidebar, .topbar, .toolbar, .toast-wrap, .modal-overlay, .btn, .row-actions, .tabs-inline { display: none !important; } .app-layout { display: block; } .main { display: block; } .content { padding: 0; } .card, .table-wrap { box-shadow: none; border: 1px solid #ddd; break-inside: avoid; } table.data th { background: #f4f4f6; color: #333; } a { color: inherit; text-decoration: none; } } /* ══════════════════════════════════════════════════════════════════════════ CHARTE v2 « LA JOURNÉE D'ÉCOLE » — les composants qui lui sont PROPRES Ce bloc primait autrefois sur une base pré-charte, par sa seule position en fin de feuille : `.btn`, les tableaux, les cartes, les toasts, les champs et la carte de connexion y étaient définis une SECONDE fois. Ces doublons ont rejoint leur composant, plus haut — une définition par composant, celle de la charte. Ne subsiste ici que ce qui n'existe qu'ici. ═════════════════════════════════════════════════════════════════════════ */ /* ── Chiffres tabulaires ─────────────────────────────────────────────────── Un montant, une heure, un numéro : mono tabulaire, calé à droite, et isolé du sens d'écriture — sinon « 1 400,00 DH » se lit à l'envers en arabe. */ .montant, .heure, .num-recu, .matricule, .code-massar, table.data td.num, table.data th.num { font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-feature-settings: 'tnum' 1; direction: ltr; unicode-bidi: isolate; white-space: nowrap; } table.data td.num, table.data th.num, table.data td .montant, table.data td .heure { text-align: right; } /* États d'un règlement : le vert dit « c'est encaissé », le rouge « il manque quelque chose ». Aucun autre usage de ces deux couleurs. */ .montant.est-paye { color: var(--green-tx); font-weight: 600; } .montant.est-impaye { color: var(--error-tx); font-weight: 600; } /* ── La « fenêtre produit » ─────────────────────────────────────────────── Le composant signature du site vitrine. Réutilisé pour tout aperçu, état vide ou page d'aide, afin que la plateforme et le site parlent la même langue. Elle SURVOLE le document : elle porte donc l'ombre unique. */ .fenetre { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); overflow: hidden; } .fenetre-barre { display: flex; align-items: center; gap: .5rem; padding: .55rem .8rem; background: var(--veil); border-bottom: 1px solid var(--line); } .fenetre-pastilles { display: flex; gap: .3rem; } .fenetre-pastilles i, .fenetre-pastille { width: 9px; height: 9px; border-radius: 50%; background: var(--pastille); display: inline-block; } /* La première pastille porte l'identité. */ .fenetre-pastilles i:first-child, .fenetre-pastille:first-child { background: var(--violet); } .fenetre-url { flex: 1; text-align: center; font-family: var(--font-mono); font-size: .76rem; color: var(--ink-soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; direction: ltr; } /* ── Le mot-symbole des pages de connexion ───────────────────────────────── */ .login-page .logo span, .login-card .logo span { font-family: var(--font-display); font-weight: 600; } /* Un champ de recherche posé dans une CARTE (et non dans une barre d'outils flex) ne recevait jamais son `flex: 1` : il restait à sa largeur minimale de 220 px et tronquait son propre libellé d'aide. */ .card > .search-input, .card > .form-group > .search-input { width: 100%; max-width: none; } /* ── BOUTON « ŒIL » SUR LES CHAMPS DE MOT DE PASSE ─────────────────────── Charte v2 : pas d'ombre, rayon de bouton, survol par la couleur, et le contour de focus commun a tout le produit — la regle globale :focus-visible en tete de feuille le pose deja, une seconde copie ici ne faisait que dupliquer le meme dessin. Le bouton se superpose au champ sans en reduire la largeur ; le padding de fin est logique (padding-inline-end) pour que le retournement RTL place l'icone du bon cote. */ .champ-mdp { position: relative; display: block; } .champ-mdp > input { width: 100%; padding-inline-end: 2.6rem; } .oeil-mdp { position: absolute; inset-block-start: 50%; inset-inline-end: .3rem; transform: translateY(-50%); width: 2rem; height: 2rem; display: inline-flex; align-items: center; justify-content: center; border: none; background: transparent; border-radius: var(--radius-btn); color: var(--ink-soft); cursor: pointer; font-size: .95rem; line-height: 1; transition: color .15s ease, background .15s ease; } .oeil-mdp:hover { color: var(--violet); background: var(--veil); } /* Etat « mot de passe visible » : l'accent d'identite le signale. */ .oeil-mdp[aria-pressed="true"] { color: var(--violet); } /* ── Recouvrement — choix du canal & aperçu de relance ───────────────────────── Un canal refusé (consentement) ou sans coordonnée reste visible mais grisé et expliqué (title) : on ne masque pas l'option, on dit pourquoi elle est fermée. Rien de rouge ici — « en retard » vit à l'accent d'identité. */ .rec-canaux { display: flex; gap: .5rem; flex-wrap: wrap; } .rec-canal.is-off, .rec-canal[disabled] { opacity: .5; cursor: not-allowed; border-style: dashed; } .rec-canal[disabled]:hover { border-color: var(--violet-card); color: var(--text-muted); } .rec-preview { border: 1px solid var(--line); border-radius: var(--radius-btn); background: var(--veil); padding: .8rem 1rem; color: var(--ink); font-size: .9rem; line-height: 1.55; white-space: pre-wrap; word-break: break-word; max-height: 260px; overflow: auto; } .rec-preview:empty::before { content: 'L’aperçu du message s’affichera ici.'; color: var(--ink-faint); } .rec-preview-sujet { font-weight: 700; color: var(--violet-deep); margin-bottom: .5rem; } /* Bandeau de synthèse d'une famille (montant, palier, retard) en tête de modale. */ .rec-somme { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; padding: .6rem .85rem; margin-bottom: 1rem; background: var(--veil); border-radius: var(--radius-btn); font-size: .9rem; color: var(--ink); } /* ============================================================ CSP style-src — classes issues d'attributs style= (ne rien mêler ici) ------------------------------------------------------------ Section ajoutée pour le retrait de 'unsafe-inline' de style-src : elle reprend les déclarations qui vivaient dans des attributs style= des pages chargeant cette feuille (dashboard.php, login.php) et du bandeau de démonstration injecté dans le tableau de bord (lib/demo_provision.php). ⚠️ La mission CSP s'était interdit de remplacer une couleur littérale par un jeton, et renvoyait cette tokenisation « à la charte, pas à la CSP ». C'est fait ici : les couleurs de cette section sont désormais prises dans les jetons, ce qui les rend sensibles au thème comme le reste du produit. ============================================================ */ /* Monogramme de la barre latérale (dashboard.php) : encre claire sur le fond --nav. La couleur est portée par le CONTEXTE .sidebar-brand, et non par .logo-mark seule : la même marque est posée sur des surfaces claires ailleurs (carte de connexion), où elle doit rester bicolore. */ .sidebar-brand .logo-mark { color: var(--bg); } /* Liens de service sous les formulaires de connexion (login.php). */ .login-lien { text-align: center; margin-top: 1rem; } .login-lien--petit { font-size: .9rem; } /* Bandeau de démonstration (lib/demo_provision.php, injecté par dashboard.php). Deux classes pour les deux fonds possibles (normal / urgence). Le compte à rebours continue de piloter la couleur en CSSOM (b.style.background) : une déclaration en ligne posée par script prime sur la classe, la bascule reste donc pleinement fonctionnelle par-dessus ces règles. */ .demo-bar { display: flex; align-items: center; gap: 1rem; justify-content: center; flex-wrap: wrap; padding: .6rem 1rem; color: var(--on-accent); font-size: .9rem; background: var(--violet-deep); } .demo-bar--urgent { background: var(--error); } .demo-bar-form { margin: 0; } .demo-bar-btn { background: var(--white); color: var(--violet-deep); border: none; border-radius: 8px; padding: .4rem .9rem; font-weight: 700; font-size: .85rem; cursor: pointer; white-space: nowrap; } .demo-bar-max { opacity: .85; font-size: .82rem; } /* ============================================================ CSP style-src — classes issues des attributs style= des gabarits JS ------------------------------------------------------------ Deuxième volet du retrait de 'unsafe-inline' : les gabarits injectés par assets/js/app.js (innerHTML) portent aujourd'hui 163 attributs style=. Un attribut style= posé par innerHTML est refusé au parsage dès que style-src contient un nonce — le nonce ne couvre JAMAIS les attributs. Cette section fournit la classe équivalente de CHAQUE valeur rencontrée, pour que le passage du JS aux classes n'ait plus qu'à substituer. RÈGLES SUIVIES ICI, sans exception : 1. PARITÉ DE STRUCTURE. Chaque déclaration reprend la valeur d'origine, à ceci près que les COULEURS ont depuis rejoint les jetons : la mission CSP s'était interdit de les substituer et renvoyait ce travail « à la charte, pas à la CSP » — c'est le lot de consolidation qui l'a fait. Conséquence voulue : ces classes suivent maintenant le thème, ce que les attributs style= d'origine ne faisaient pas. 2. SECTION EN FIN DE FICHIER. À égalité de spécificité, la dernière règle l'emporte : placée ici, une classe bat .card, .chip, .flex, .toolbar, .btn-primary ou .row-actions sans avoir besoin de !important. 3. !important RÉSERVÉ À display. Un attribut style= l'emportait sur tout ; une classe, non. Là où une règle EXISTANTE plus spécifique reprendrait la main (en-têtes de tableau, cellules, survol de ligne, survol de bouton), la classe est doublée d'un sélecteur companion de spécificité suffisante — signalé au cas par cas ci-dessous. Aucune propriété pilotée ensuite en CSSOM (width des barres de progression, borderColor des champs de notes) ne porte de !important : une écriture el.style.prop perdrait contre lui. 4. NOMMAGE. .u-- pour les utilitaires mécaniques (unité écrite en toutes lettres : .u-maxw-10rem vs .u-maxw-140px, le point décimal devient un tiret : 5.5rem -> 5-5rem) ; nom métier pour les valeurs composites attachées à un écran précis. Aucun de ces noms n'existait dans le dépôt (vérifié sur les 104 fichiers css/js/php/html hors vendor) : tant qu'aucune classe n'est posée dans les gabarits, cette section ne modifie rien. ============================================================ */ /* ----- Masquage : attribut hidden ---------------------------------------- Dix éléments naissaient avec style="display:none" puis étaient révélés par el.style.display = ''. Ces deux moitiés migrent ENSEMBLE vers l'attribut hidden + el.hidden = booléen (stratégie imposée aux missions JS). Le !important est indispensable : la majorité de ces éléments sont des .form-group, et .form-group{display:flex} l'emporterait sinon sur la valeur display:none du navigateur — c'est très exactement la raison pour laquelle les auteurs avaient dû écrire le display en ligne. Même règle que la coquille de la PWA famille (famille/app.css). Vérifié : les seuls éléments du back-office portant déjà hidden sont trois volontairement invisibles — comportement inchangé. */ .u-hidden, [hidden] { display: none !important; } /* ----- Curseur, texte, couleurs ----------------------------------------- */ .u-pointer { cursor: pointer; } /* ×26 */ .u-tx-violet { color: var(--violet); } /* ×6 */ .u-tx-vert { color: var(--green); } /* ×2 */ .u-tx-vert-vif { color: var(--green); } /* ×2 */ .u-tx-rouge { color: var(--error); } /* ×3 */ /* « Brique » : montants dus et alertes de retard du recouvrement. Le jeton existe et pointe sur la famille --error : ces deux classes la suivent désormais au lieu de figer une valeur claire. */ .u-tx-brique { color: var(--brique); } /* ×2 */ .u-tx-brique-fort { color: var(--brique); font-weight: 700; } /* ×1 */ .u-tx-violet-fonce { color: var(--violet-deep); } /* ×2 */ .u-fw-600 { font-weight: 600; } .u-break-all { word-break: break-all; } /* ×2 */ .u-pre-wrap { white-space: pre-wrap; } /* Alignements. Companion obligatoire : table.data th impose text-align:start et table.data td.num impose right — deux sélecteurs à (0,1,2) que la classe seule, à (0,1,0), ne battrait pas. */ .u-ta-c { text-align: center; } /* ×5 */ .u-ta-r { text-align: right; } /* ×2 */ table.data th.u-ta-c, table.data td.u-ta-c { text-align: center; } table.data th.u-ta-r, table.data td.u-ta-r { text-align: right; } /* ----- Tailles ----------------------------------------------------------- */ .u-maxw-5-5rem { max-width: 5.5rem; } /* ×2 */ .u-maxw-6rem { max-width: 6rem; } .u-maxw-10rem { max-width: 10rem; } /* ×6 */ .u-maxw-140px { max-width: 140px; } .u-maxw-150px { max-width: 150px; } /* ×2 */ .u-maxw-220px { max-width: 220px; } .u-maxw-240px { max-width: 240px; } .u-maxw-260px { max-width: 260px; } .u-maxw-640px { max-width: 640px; } .u-maxw-760px { max-width: 760px; } /* ×4 */ .u-maxw-860px { max-width: 860px; } /* ×3 */ .u-minw-140px { min-width: 140px; } .u-w-2-5rem { width: 2.5rem; } /* ×5 */ .u-w-34px { width: 34px; } .u-h-260px { height: 260px; } /* ----- Flux : écarts, alignements, grille -------------------------------- */ .u-gap-035 { gap: .35rem; } .u-gap-04 { gap: .4rem; } /* ×2 */ .u-gap-05 { gap: .5rem; } /* ×3 */ .u-wrap-gap-05 { flex-wrap: wrap; gap: .5rem; } /* ×3 */ /* Posée sur un .form-group : flex-direction:column reste hérité de .form-group, exactement comme avec l'attribut d'origine. */ .u-flex-gap-15 { display: flex; gap: 1.5rem; flex-wrap: wrap; } .u-jc-start { justify-content: flex-start; } .u-jc-center { justify-content: center; } .u-as-end { align-self: end; } .u-grid-full { grid-column: 1/-1; } /* ----- Marges ------------------------------------------------------------ */ .u-mb-05 { margin-bottom: .5rem; } .u-ml-05 { margin-left: .5rem; } .u-mr-06 { margin-right: .6rem; } .u-mt-03 { margin-top: .3rem; } .u-mt-055 { margin-top: .55rem; } /* ×2 */ .u-my-02 { margin: .2rem 0; } .u-page-sub { margin: .2rem 0 1rem; } /* sous-titre de page, ×4 */ /* ----- Corps de texte ---------------------------------------------------- */ .u-fs-08 { font-size: .8rem; } /* ×2 */ .u-fs-085em { font-size: .85em; } /* em et non rem : valeur d'origine */ .u-fs-088 { font-size: .88rem; } .u-fs-13 { font-size: 1.3rem; } /* ×3 */ .u-note-09-mt-08 { font-size: .9rem; margin-top: .8rem; } .u-note-09-mt-06 { font-size: .9rem; margin-top: .6rem; } .u-note-085-mt-05 { font-size: .85rem; margin: .5rem 0 0; } /* ----- Opacités et état « annulé » --------------------------------------- */ .u-op-5 { opacity: .5; } .u-op-55 { opacity: .55; } /* ×3 */ .u-op-6 { opacity: .6; } .u-annule { opacity: .55; text-decoration: line-through; } /* ----- Blocs et cartes --------------------------------------------------- */ .u-scroll-180 { max-height: 180px; overflow: auto; } /* ×2 */ .u-carte-etape { border-left: 4px solid var(--violet); } /* carte « Premiers pas » */ .u-carte-caisse { background: var(--bg); } /* carte du dossier de caisse */ .u-liste-etapes { margin: .3rem 0 .3rem 1.2rem; line-height: 2; } .u-graph-vide { padding: 1rem .25rem; } /* graphique sans donnée */ .u-logo-apercu { height: 44px; border-radius: 8px; } /* vignette du logo */ /* Cellule « aucun résultat » d'un tableau. Companion obligatoire : la règle « table.data td » impose son propre rembourrage, à (0,1,2). */ .u-vide-1 { text-align: center; padding: 1rem; } /* ×2 */ .u-vide-2 { text-align: center; padding: 2rem; } table.data td.u-vide-1 { text-align: center; padding: 1rem; } table.data td.u-vide-2 { text-align: center; padding: 2rem; } /* ----- Pastilles de bilan (caisse, recouvrement) ------------------------- */ .u-chip-succes { background: var(--green-bg); color: var(--green-tx); } .u-chip-erreur { background: var(--error-bg); color: var(--error-tx); } /* ----- Codes d'accès affichés une seule fois ----------------------------- */ .u-code-lot { font-weight: 800; letter-spacing: .05em; } .u-code-portail { font-size: 1.6rem; font-weight: 800; letter-spacing: .08em; } /* ----- Arbre des classes (module Élèves) --------------------------------- */ .u-arbre-cycle { font-weight: 700; font-size: .72rem; text-transform: uppercase; letter-spacing: .05em; } .u-arbre-classes { margin: .15rem 0 .35rem .5rem; } /* ----- Grille d'appel : bouton « retard » sélectionné -------------------- Le bouton porte alors .btn-primary, dont l'état de survol impose background:var(--violet-deep) à (0,3,0) (règle « .btn-primary:hover »). L'attribut d'origine tenait au survol ; le companion à (0,4,0) le fait tenir aussi. */ /* LA PASTILLE DE « DEJA FAIT » — une confirmation, pas un aplat d action. ⚠️ Elle s appelait « .etat-fait », du nom des Absences ou elle est nee. QUATRE ecrans s en servent aujourd hui : le « present » de l Appel, l appreciation de la saisie des notes, celle du recapitulatif de classe et la decision du recapitulatif annuel. Un nom de module sur une regle que quatre modules partagent finit par empecher le cinquieme de s en servir — on croit toucher aux Absences. Elle porte donc ce qu elle FAIT. Le motif complet est dans app.js, a la fabrique des trois boutons d appel. Le filet reprend la couleur du texte : sans lui, une pastille pale sur une ligne claire ne se distinguerait pas assez d un bouton simplement cerne. */ .etat-fait, .btn.etat-fait { background: var(--green-bg); color: var(--green-tx); border-color: var(--green-tx); } .btn.etat-fait:hover:not(:disabled) { background: var(--green-tx); color: var(--green-bg); } .abs-btn-retard { background: var(--violet-deep); } .btn.abs-btn-retard, .btn.abs-btn-retard:hover:not(:disabled) { background: var(--violet-deep); } /* ----- Échéancier : lignes annulée / en retard --------------------------- Remplace l'attribut unique construit dans assets/js/app.js (trStyle), dont les deux seules valeurs possibles sont reprises ici. Le fond « retard » se posait par-dessus le survol de ligne (table.data tbody tr:hover, spécificité (0,2,3)) : le companion de même spécificité, placé plus bas, conserve ce comportement. Réserve : si un jour la classe .zebre était ajoutée à ce tableau, son nth-child (0,3,3) reprendrait la main — elle n'y est pas aujourd'hui. */ .ech-annulee { opacity: .6; } .ech-retard { background: var(--error-bg); } table.data tbody tr.ech-retard, table.data tbody tr.ech-retard:hover { background: var(--error-bg); } /* ----- Calendrier : la ligne qu'on est venu voir ------------------------- Posée sur les CELLULES, pas sur la ligne : la table est en border-collapse, où le fond et l'ombre d'un ne se peignent pas de façon fiable. Un fond de passe toujours par-dessus celui du , donc le survol ne l'efface pas — inutile de courir après la spécificité de table.data tbody tr:hover. Cadre en --violet et non en littéral : le jeton est réécrit en thème sombre (tokens.css), un violet en dur y deviendrait illisible. */ table.data tbody tr.cal-cible > td { background: var(--veil); border-top: 2px solid var(--violet); border-bottom: 2px solid var(--violet); } /* ----- Séparateur de mois du calendrier ---------------------------------- ⚠️ IL SE LISAIT COMME UN ÉVÉNEMENT. C'était un ordinaire : même fond, même hauteur, même famille que les lignes de données. « Septembre 2026 » passait pour un événement ainsi intitulé — le fondateur l'a signalé, et c'est exactement ce qu'on lit. Trois choses le distinguent maintenant, et aucune n'est décorative : le FOND (--veil, la surface calme de la charte, jamais employée pour une ligne de données) ; la CAPITALE espacée, réservée aux étiquettes et jamais à un contenu saisi ; et la RÈGLE ÉPAISSE au-dessus, qui ferme visuellement le groupe précédent plutôt que d'ouvrir une ligne de plus. Le premier séparateur n'a pas de règle : il n'y a rien à fermer au-dessus de lui, et une barre y ressemblerait à un bord de tableau raté. */ table.data tbody tr.cal-mois > th { background: var(--veil); color: var(--ink-soft); font-family: var(--font-body); font-size: .74rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; text-align: start; padding: var(--sp-2) var(--sp-3); border-top: 2px solid var(--line); } table.data tbody tr.cal-mois:first-child > th { border-top: 0; } /* ----- Barres de progression -------------------------------------------- Six barres naissaient avec une largeur en ligne : deux à zéro (simples états initiaux) et quatre à une largeur calculée. La classe ne porte que le constant — la largeur nulle de départ — et la valeur réelle est posée en CSSOM, el.style.width = pct + '%', ce qui reste autorisé sans 'unsafe-inline'. Sans cette règle, un .progress-fill sans largeur s'afficherait PLEIN le temps d'une image : c'est un div de niveau bloc dans un conteneur à width:100%. PAS de !important : il bloquerait l'écriture CSSOM qui suit. Les missions JS doivent poser la largeur dans la MÊME tâche synchrone que l'affectation d'innerHTML : le style n'ayant pas encore été résolu, la transition width .35s de .progress-fill ne se déclenche pas et le rendu est celui d'avant, sans animation d'apparition. */ .progress-init { width: 0%; } /* ═══════════════ Accueil — indicateurs + widgets des modules ═══════════════ Écran d'entrée : les quatre indicateurs du jour d'abord — c'est ce qui réclame une action — puis les modules en widgets, chacun reconnaissable à son icône ET à sa teinte. Les teintes restent des NUANCES sourdes (jamais saturées) pour rester compatibles avec l'identité violette. */ /* ── Indicateurs de l'accueil ── Ils sont SOUS le bandeau, sur fond clair : enfermes dans l'aplat violet ils devenaient decoratifs et surtout indifferenciables les uns des autres, alors que leur role est justement de hierarchiser ce qui reclame une action. */ .acc-kpi { margin-top: 1.1rem; } /* ⚠️ LA RANGÉE EST ALIGNÉE, LIGNE PAR LIGNE. Les quatre valeurs ne sont pas composées au même corps — un montant est plus long qu'un effectif et cède du sien — et la puce de tendance rehausse la ligne qui la porte. Chaque carte prenait donc une hauteur de ligne différente, et comme la carte centre son corps, libellés, chiffres et courbes de la rangée se décalaient les uns des autres de quelques pixels. Un plancher commun les remet sur la même ligne, quelles que soient les données du jour. ⚠️ Réservé à l'accueil : ailleurs, une carte d'indicateur n'a pas de rangée de quatre à tenir, et lui imposer ce plancher la grandirait sans raison. */ .acc-kpi .kpi-ligne { min-height: 2rem; } /* `.kpi-contexte`, `.kpi--action` et `.kpi--alerte` ont été RETIRÉES : aucun gabarit du dépôt ne les émet (recherche sur php/js/css, famille comprise, vendor exclu). `.kpi--action` portait de surcroît une TROISIÈME copie de la paire de teintes du domaine pilotage — c'est une classe morte, elle se supprime, elle ne se tokenise pas. Les états d'un indicateur passent par la famille sémantique (.kpi-violet / .kpi-green / .kpi-red), qui, elle, sert. */ /* ── Widgets des modules ── */ /* Accueil COMPACT : les onze tuiles + les indicateurs depassaient le bas d un ecran de portable (1366x768), obligeant a defiler des l ouverture — or l accueil est la carte du produit, il doit se lire d un coup d oeil. */ .tuiles-titre { margin: 1.1rem 0 .7rem; font-size: .78rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--text-muted); } /* `.tuiles-grid` a été RETIRÉE : plus aucun gabarit ne l'émettait depuis que les domaines sont devenus des cartes. L'arbitrage « 4+4+3 » qu'elle portait supposait une grille pleine largeur par section — la mise en page ci-dessous n'en a plus, et laisser une règle morte décrivant une disposition abandonnée trompe le prochain lecteur plus sûrement qu'elle ne l'aide. */ /* ═══ « Tous les modules » — des CARTES DE DOMAINE, pas des demi-rangées ═══ Mesuré : 18 modules en 7 groupes, dont 6 de deux ou trois entrées. Une grille pleine largeur par groupe laissait deux colonnes vides à chaque section et faisait dépasser la page de deux écrans. Les domaines se rangent maintenant côte à côte : c'est la largeur qui travaille. `align-items: start` : une carte de deux modules ne s'étire pas à la hauteur de sa voisine de cinq — sans lui, la grille rendrait le blanc qu'on vient d'enlever. */ .mod-domaines { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: .9rem; align-items: start; } .mod-domaine { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: .85rem .8rem .7rem; } .mod-domaine-t { margin: 0 0 .55rem; padding-inline-start: .15rem; font-size: .74rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--text-muted); } .mod-domaine-t i { margin-inline-end: .3rem; opacity: .8; } .mod-liste { display: flex; flex-direction: column; gap: .15rem; } /* La tuile devient une LIGNE : l'icône garde sa pastille et sa couleur de domaine (elle la lit dans la table des teintes, plus bas), mais le texte passe à côté au lieu de dessous — deux fois moins haut, et on lit le nom sur la même ligne de regard que l'icône. */ .tuile { display: flex; flex-direction: row; align-items: center; justify-content: flex-start; text-align: start; gap: .6rem; padding: .45rem .5rem; background: transparent; border: 1px solid transparent; border-radius: var(--radius-btn); text-decoration: none; color: inherit; transition: background-color .15s ease, border-color .15s ease; } .tuile:hover, .tuile:focus-visible { background: var(--veil); border-color: var(--border); } .tuile:focus-visible { outline: 2px solid var(--violet); outline-offset: 1px; } .tuile-ico { width: 34px; height: 34px; min-width: 34px; border-radius: 50%; /* pastille ronde — écho du point du logo */ display: flex; align-items: center; justify-content: center; font-size: .95rem; background: var(--tuile-bg, var(--veil)); color: var(--tuile-fg, var(--violet)); } /* Sur une LIGNE, un agrandissement de la pastille au survol fait sauter le texte voisin. La réponse au geste est donc portée par la LIGNE — voile lilas et filet, ci-dessus : la charte ne pose d'ombre que sur ce qui survole réellement le document (R2), et une pastille de 34 px n'en est pas. */ .tuile-txt { display: flex; flex-direction: column; gap: .05rem; min-width: 0; } .tuile-nom { font-weight: 600; font-size: .89rem; color: var(--ink); line-height: 1.25; } /* La description tient sur deux lignes au plus : au-delà, une entrée bavarde étirerait sa carte de domaine et ramènerait la hauteur qu'on vient de gagner. Le nom, lui, n'est jamais tronqué. */ .tuile-sous { font-size: .75rem; color: var(--text-muted); line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } /* ═══════ LA TABLE DES TEINTES DE DOMAINE — UNE SEULE, QUATRE LECTEURS ═══════ Palette « vives sur pastel » (P2, retenue par le fondateur) : fond pastel clair, encre franchement saturée. Une famille de couleur par domaine métier. ⚠️ Ces paires vivaient ici en clair, avec leurs variantes sombres : elles sont devenues les jetons --dom-* de tokens.css. La feuille ne fait plus que NOMMER le domaine de chaque onglet. ⚠️ R7 — USAGE STRICT : repérer un MODULE. Jamais un état, jamais un statut, jamais une alerte : la sémantique reste au violet, au vert et au rouge (R6). ⚠️ QUATRE LECTEURS, UNE SEULE TABLE. La tuile du catalogue, l'icône de la barre latérale (§D1), la carte d'indicateur de l'accueil et la rangée « à traiter » (§D4) lisent les MÊMES variables. Une seconde table aurait divergé au premier module ajouté, et personne ne l'aurait vu. ⚠️ `--dom-encre` est la variante POSÉE SUR L'ENCRE de la barre latérale, qui est en encre pleine dans les deux thèmes : les encres claires ci-dessus y seraient illisibles. Contrastes mesurés sur le fond de barre #221C44, du moins bon au meilleur : 6,60 · 6,90 · 7,04 · 7,25 · 7,48 · 7,74 · 8,12 · 8,41. ⚠️ `data-tab` sur une rangée ou une carte n'est PAS un déclencheur : la navigation passe par `data-act` et par l'`href`. L'attribut ne sert qu'à cette table. */ /* ⚠️ LE PRÉFIXE `--tuile-*` EST HISTORIQUE, ET IL RESTE. Ces deux variables ne servent plus la seule tuile : elles portent la teinte du DOMAINE pour ses quatre lecteurs. Les renommer n'aurait rien appris à personne et aurait cassé `tools/_test_modules_page.js`, qui les lit par leur nom pour prouver qu'aucune teinte de tuile n'est écrite en dur — une suite qui garde cette preuve vaut mieux qu'un nom plus joli. `--dom-encre`, elle, est neuve : la barre latérale n'avait pas d'équivalent. */ .tuile[data-tab="dashboard"], :is(.nav-item, .kpi, .rang)[data-tab="dashboard"], .tuile[data-tab="accueil"], :is(.nav-item, .kpi, .rang)[data-tab="accueil"], .tuile[data-tab="personnel"], :is(.nav-item, .kpi, .rang)[data-tab="personnel"] { --tuile-bg: var(--dom-pilotage-bg); --tuile-fg: var(--dom-pilotage-fg); --dom-encre: var(--dom-pilotage-sur-encre); } .tuile[data-tab="eleves"], :is(.nav-item, .kpi, .rang)[data-tab="eleves"] { --tuile-bg: var(--dom-scolarite-bg); --tuile-fg: var(--dom-scolarite-fg); --dom-encre: var(--dom-scolarite-sur-encre); } .tuile[data-tab="inscriptions"], :is(.nav-item, .kpi, .rang)[data-tab="inscriptions"], .tuile[data-tab="reinscriptions"], :is(.nav-item, .kpi, .rang)[data-tab="reinscriptions"], .tuile[data-tab="caisse"], :is(.nav-item, .kpi, .rang)[data-tab="caisse"], .tuile[data-tab="recouvrement"], :is(.nav-item, .kpi, .rang)[data-tab="recouvrement"], .tuile[data-tab="services"], :is(.nav-item, .kpi, .rang)[data-tab="services"], .nav-groupe[data-groupe="admissions"] > .nav-parent, .nav-groupe[data-groupe="finances"] > .nav-parent { --tuile-bg: var(--dom-admissions-argent-bg); --tuile-fg: var(--dom-admissions-argent-fg); --dom-encre: var(--dom-admissions-argent-sur-encre); } .tuile[data-tab="communication"], :is(.nav-item, .kpi, .rang)[data-tab="communication"], .tuile[data-tab="circulaires"], :is(.nav-item, .kpi, .rang)[data-tab="circulaires"], .nav-groupe[data-groupe="communication"] > .nav-parent { --tuile-bg: var(--dom-communication-bg); --tuile-fg: var(--dom-communication-fg); --dom-encre: var(--dom-communication-sur-encre); } .tuile[data-tab="notes"], :is(.nav-item, .kpi, .rang)[data-tab="notes"], .tuile[data-tab="bulletins"], :is(.nav-item, .kpi, .rang)[data-tab="bulletins"], .tuile[data-tab="massar"], :is(.nav-item, .kpi, .rang)[data-tab="massar"], .nav-groupe[data-groupe="notes"] > .nav-parent { --tuile-bg: var(--dom-resultats-bg); --tuile-fg: var(--dom-resultats-fg); --dom-encre: var(--dom-resultats-sur-encre); } .tuile[data-tab="absences"], :is(.nav-item, .kpi, .rang)[data-tab="absences"], .tuile[data-tab="calendrier"], :is(.nav-item, .kpi, .rang)[data-tab="calendrier"], .tuile[data-tab="transport"], :is(.nav-item, .kpi, .rang)[data-tab="transport"], .nav-groupe[data-groupe="vie"] > .nav-parent { --tuile-bg: var(--dom-vie-scolaire-bg); --tuile-fg: var(--dom-vie-scolaire-fg); --dom-encre: var(--dom-vie-scolaire-sur-encre); } .tuile[data-tab="documents"], :is(.nav-item, .kpi, .rang)[data-tab="documents"] { --tuile-bg: var(--dom-documents-bg); --tuile-fg: var(--dom-documents-fg); --dom-encre: var(--dom-documents-sur-encre); } .tuile[data-tab="listes"], :is(.nav-item, .kpi, .rang)[data-tab="listes"], .tuile[data-tab="parametres"], :is(.nav-item, .kpi, .rang)[data-tab="parametres"], .tuile[data-tab="utilisateurs"], :is(.nav-item, .kpi, .rang)[data-tab="utilisateurs"], .tuile[data-tab="sauvegarde"], :is(.nav-item, .kpi, .rang)[data-tab="sauvegarde"], .tuile[data-tab="demos"], :is(.nav-item, .kpi, .rang)[data-tab="demos"], .tuile[data-tab="modules"], :is(.nav-item, .kpi, .rang)[data-tab="modules"], .nav-groupe[data-groupe="admin"] > .nav-parent { --tuile-bg: var(--dom-outils-bg); --tuile-fg: var(--dom-outils-fg); --dom-encre: var(--dom-outils-sur-encre); } /* §D1 — LA COULEUR DE DOMAINE DESCEND DANS LA NAVIGATION. Le libellé reste en encre claire (le contraste du texte n'est pas négociable) ; c'est l'ICÔNE qui porte la teinte. Le chevron d'un groupe est exclu : il dit l'état du repli, pas le domaine. L'entrée ACTIVE reprend son icône en blanc, sur la pilule violette pleine posée en tête de feuille. */ .nav-item[data-tab] > i:first-child, .nav-groupe > .nav-parent > i:first-child { color: var(--dom-encre, inherit); opacity: 1; } .nav-item.active > i:first-child { color: var(--nav-tx-str); } /* La carte d'indicateur qui NOMME son domaine prend sa teinte — MAIS PAS SI ELLE NOMME AUSSI UN TON SÉMANTIQUE. Le `data-tab` d'une carte sert deux choses à la fois : dire son domaine, et conduire à son onglet. Sans ce `:not`, une carte qui navigue perdait EN SILENCE le ton qu'elle déclarait — mesuré sur le Tableau de bord, où la carte « Encaissé ce mois » demande `kpi-green` (R6 : une confirmation factuelle) et recevait la teinte de son domaine à la place. Le violet, lui, reste le DÉFAUT de la fabrique — le ton d'une carte qui n'en nomme aucun — et c'est pourquoi lui seul cède la place au domaine. R7 le dit dans ces termes : les teintes de domaine servent au repérage de module, « jamais pour un état, un statut ou une alerte — la sémantique reste R6 ». */ .kpi[data-tab]:not(.kpi-green, .kpi-red, .kpi-orange) .kpi-icon { background: var(--tuile-bg); color: var(--tuile-fg); } /* La courbe se peint dans la teinte de la tuile qui la surmonte : même sélecteur, donc jamais l'une sans l'autre. */ .kpi .sparkline { color: var(--violet); } .kpi[data-tab]:not(.kpi-green, .kpi-red, .kpi-orange) .sparkline { color: var(--tuile-fg); } @media (max-width: 640px) { /* Une seule colonne de domaines : sur un téléphone, deux cartes côte à côte rendraient les lignes trop étroites pour leur nom. */ .mod-domaines { grid-template-columns: 1fr; } .tuile { padding: .55rem .5rem; } .tuile-ico { width: 38px; height: 38px; min-width: 38px; font-size: 1.05rem; } } /* ── Barre de pilules de NIVEAU MODULE (entrées de menu fusionnées) ── Un écran fusionné peut porter DEUX niveaux de pilules : le module (Notes ↔ Bulletins importés) et, en dessous, les vues internes du module (Saisie · Récap · Bulletins). Deux barres identiques se confondaient : le niveau module prend l'aspect d'un sélecteur segmenté (fond voile, pilule active en relief blanc), le niveau vue garde les pilules bordées. */ .tabs-inline--modules { display: inline-flex; /* Le conteneur parent peut être un flex en colonne (align-items: stretch) : sans ces deux règles, le bandeau s'étirerait sur toute la largeur. */ width: fit-content; align-self: flex-start; gap: .2rem; padding: .25rem; margin-bottom: .9rem; background: var(--veil); border-radius: var(--radius-btn); } .tabs-inline--modules .tab-pill { border-color: transparent; background: transparent; color: var(--violet-deep); } .tabs-inline--modules .tab-pill:hover { border-color: transparent; background: rgba(255, 255, 255, .55); } .tabs-inline--modules .tab-pill.active { background: var(--white); border-color: transparent; color: var(--violet); } /* ═══════════════ Barre latérale — groupes PLIABLES ═══════════════ Un module à sous-onglets est un groupe : l'entête (bouton) déplie ses enfants, qui portent la navigation. Le groupe de l'onglet courant s'ouvre seul ; la barre reste courte quel que soit le nombre de modules. */ .nav-groupe { display: flex; flex-direction: column; } .nav-parent { width: 100%; border: 0; background: transparent; font-family: inherit; text-align: start; cursor: pointer; } .nav-parent > span { flex: 1; } .nav-chevron { font-size: .68rem; opacity: .6; transition: transform .2s ease; } .nav-groupe.is-open .nav-chevron { transform: rotate(180deg); } /* Groupe replié mais contenant l'onglet courant : l'entête reste marquée. */ .nav-groupe.is-active > .nav-parent { color: var(--nav-tx-str); background: rgba(255,255,255,.10); } /* Repli/dépli : bascule NETTE. L'animation par `grid-template-rows: 0fr` laissait un vide sous les groupes repliés — les enfants d'une grille ont `min-height: auto` (ils refusent de s'écraser) et `0fr` ne cadre que la PREMIÈRE ligne, or il y a un enfant par sous-onglet. */ .nav-sous { display: none; flex-direction: column; gap: .1rem; padding-inline-start: .55rem; margin: .15rem 0 .25rem .95rem; border-inline-start: 1px solid rgba(255,255,255,.16); } .nav-groupe.is-open .nav-sous { display: flex; } .nav-enfant { font-size: .85rem; padding: .45rem .7rem; color: rgba(255,255,255,.78); } .nav-enfant i { font-size: .8rem; width: 16px; } .nav-enfant.active { background: var(--violet); color: var(--nav-tx-str); font-weight: 700; } /* `display: none` retire aussi les enfants repliés du parcours de tabulation. */ /* ── Indicateurs : empêcher tout débordement horizontal ── Un enfant de grille/flex a `min-width: auto` : il REFUSE de descendre sous la largeur de son contenu. Un montant long en chasse fixe élargissait donc sa carte et poussait la page — défilement horizontal mesuré sur les largeurs de portable. `min-width: 0` rend la compression possible ; les paliers ci-dessous évitent d'y arriver. ⚠️ Le `overflow-wrap: anywhere` qui accompagnait ce réglage a été RETIRÉ : il coupait le montant en deux, ce que l'anatomie §D2 interdit. ⚠️ ET LE CORPS PREND TOUTE LA LARGEUR QUI RESTE (`flex: 1`). Sans cela il épousait son texte, et la courbe — qui fait 100 % de son parent — épousait le texte avec lui : quatre courbes de quatre largeurs dans une rangée de quatre cartes identiques, avec un vide à droite de chacune. C'était le défaut D5 (« les vides dans les cartes ») reconduit dans les cartes mêmes qui devaient le fermer. §D2 demande une sparkline PLEINE LARGEUR ; elle l'est maintenant. Le sélecteur vise `.kpi-corps` (posé par `kpiHtml()`) plutôt que `.kpi > div`, qui attrapait aussi la tuile d'icône. */ /* ⚠️ LES CHIFFRES D UNE RANGEE S ALIGNENT, quoi qu il arrive au-dessus. La carte centrait son contenu verticalement ; comme les cartes d une rangee ont la meme hauteur mais des sous-libelles de longueurs differentes — un qui tient sur une ligne, un autre qui se replie sur deux — les valeurs se posaient a des hauteurs differentes. MESURE sur le Tableau de bord : 28 px d ecart entre le premier chiffre et le troisieme. Or une rangee d indicateurs existe POUR ETRE COMPAREE : des chiffres decales obligent l oeil a chercher chacun d eux. Le libelle occupe le haut, la ligne de valeur est chassee en bas, et les bases coincident. */ .kpi { align-items: stretch; } .kpi-corps { min-width: 0; flex: 1; display: flex; flex-direction: column; } .kpi-corps .kpi-ligne { margin-top: auto; } /* L icone reste en haut : etiree sur toute la hauteur elle deviendrait une bande, et la tuile teintee de la direction « Console » n est pas une bande. */ .kpi-icon { align-self: flex-start; } /* Deux par ligne des le telephone : empiles un par un, les quatre indicateurs repoussaient les modules hors de l'ecran. */ /* minmax(0, 1fr) et NON 1fr seul. Une piste de grille a par defaut un plancher qui vaut son contenu ; comme la ligne de valeur est en `nowrap`, un montant long faisait grandir la piste au-dela de sa part, la grille debordait son conteneur et la PAGE se mettait a defiler lateralement. Le plancher a zero rend la piste maitresse de sa largeur : c'est la valeur qui s'adapte. */ .kpi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } /* ⚠️ « auto-fit », ET NON « repeat(4) ». La grille imposait QUATRE colonnes au-dessus de 1 250 px. L Accueil en porte quatre, tout allait bien ; le Tableau de bord en porte CINQ, et la cinquieme tombait seule sur une deuxieme rangee, avec 800 px de vide a sa droite. Une grille ne doit pas savoir combien de cartes on lui donnera. Le plancher a 12 rem laisse cinq cartes tenir des 1 366 px ; « min(…, 100%) » garde le motif du plancher a zero decrit juste au-dessus, sans lequel un montant long fait defiler la page. Et « auto-fit » replie les pistes vides : quatre cartes occupent toujours toute la largeur, elles ne se serrent pas a gauche. */ @media (min-width: 1250px) { .kpi-grid { grid-template-columns: repeat(auto-fit, minmax(min(12rem, 100%), 1fr)); } } /* ⚠️ LE PLAFOND EST SUR LA CARTE, PAS SUR LA PISTE, ET L ESSAI INVERSE A ETE FAIT. « auto-fit » replie les pistes vides : une carte seule occupait donc la largeur entiere — 1 050 px pour un chiffre a deux caracteres, ce qui arrive des que le Transport n a plus qu une anomalie a montrer. Borner la PISTE a « 28rem » au lieu de « 1fr » a casse tout autre chose : le nombre de repetitions de « auto-fit » se calcule sur une taille de piste definie, et un pourcentage dans le plancher la rend indefinie — le Tableau de bord est retombe a DEUX colonnes, ses cinq cartes sur trois rangees. La piste garde donc « 1fr », et c est la carte qui refuse de s etirer : sur une piste large, elle reste a sa taille et se range a gauche. */ .kpi-grid > .kpi { max-width: 28rem; } @media (max-width: 700px) { .kpi-grid { gap: .6rem; } .kpi { padding: .8rem .85rem; gap: .6rem; } .kpi-icon { width: 34px; height: 34px; min-width: 34px; font-size: .9rem; } .kpi-value { font-size: 1.1rem; } .kpi-label { font-size: .72rem; line-height: 1.3; } } /* Entre 1250 et 1500 px, quatre montants côte à côte restent serrés : le chiffre cède un peu de corps plutôt que la mise en page. */ @media (min-width: 1250px) and (max-width: 1500px) { .kpi-value { font-size: 1.3rem; } /* Le montant de la rangée d'accueil cède un cran de plus : quatre cartes s'y partagent la largeur, et sa ligne — insécable par §D2 — sortait de son corps sur les portables de cette bande. La règle voisine ne le réduisait que s'il portait une puce de tendance ; il n'en porte plus. Mesuré aux quatre largeurs de la bande : plus aucun dépassement. */ .acc-kpi .kpi-value:has(.montant) { font-size: 1rem; } } /* ── Barre de navigation en petite largeur ── Sous 900 px, .sidebar-nav devient une rangée horizontale défilante. Deux écueils : les groupes, restés en colonne, cassaient la rangée et étiraient toute la bande à l'ouverture ; et douze entrées libellées rendaient la barre interminable. Réponse : une barre d'ICONES. Seul l'onglet actif porte son libellé — la barre tient alors dans une largeur de téléphone. Les groupes n'y déplient plus : leur entête conduit directement au premier sous-onglet (app.js). */ @media (max-width: 900px) { .sidebar-nav { align-items: center; } /* La règle qui masque « Réduire le menu » sous 900 px ne peut PAS vivre ici : `.nav-bascule` est déclaré 365 lignes plus bas avec `display: flex`, à spécificité égale, et l emporterait. Elle est donc posée APRÈS cette déclaration — voir le bloc « §29 bis » plus loin. */ /* font-size: 0 efface le nœud texte sans toucher au balisage ; l'icône et le libellé de l'onglet actif reprennent leur corps. */ .nav-item { flex: 0 0 auto; gap: 0; padding: .55rem .7rem; font-size: 0; } .nav-item i { font-size: 1rem; } .nav-item.active, .nav-groupe.is-active > .nav-parent { gap: .45rem; padding: .55rem .85rem; font-size: .82rem; } .nav-item.active i, .nav-groupe.is-active > .nav-parent i { font-size: .95rem; } .nav-groupe { flex: 0 0 auto; } .nav-chevron { display: none; } /* rien ne se déplie ici */ .nav-sous { display: none !important; } } /* ── Petite largeur : contraindre la barre et alléger le bandeau ── 1. `.sidebar-nav` porte `overflow-x: auto`, mais dans une barre en colonne sa LARGEUR restait `auto` : elle s'étendait à son contenu (632 px) et poussait la page — d'où un défilement horizontal de tout l'écran au lieu d'un défilement interne à la barre. 2. La salutation prenait une place que le contenu métier mérite mieux. */ @media (max-width: 900px) { .sidebar-nav { width: 100%; min-width: 0; max-width: 100%; } } @media (max-width: 700px) { .acc-kpi { margin-top: .7rem; } .tuiles-titre { margin: 1.1rem 0 .6rem; } } /* Barre du haut en petite largeur : la zone compte (langue + nom + rôle + déconnexion) mesurait 385 px dans 358 px utiles et poussait la page de 11 px. Elle se replie désormais au lieu de déborder. */ @media (max-width: 900px) { .topbar-meta, .topbar-user { min-width: 0; flex-wrap: wrap; row-gap: .35rem; } .topbar-user { justify-content: flex-end; } } /* ── Tri par en-tête et pagination des listes (tâche 8) ── L'en-tête triable se signale au survol : sans indice visuel, personne ne devine qu'une colonne se clique. La flèche du tri courant est ajoutée au libellé côté JavaScript. */ .th-triable { user-select: none; } .th-triable:hover { color: var(--violet); } .pagination-barre { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 10px 4px 2px; font-size: .85rem; color: var(--text-muted); } .pagination-boutons { display: flex; align-items: center; gap: 4px; } .pagination-page { padding: 0 8px; font-variant-numeric: tabular-nums; } .pagination-taille { display: flex; align-items: center; gap: 6px; } .pagination-taille select { padding: 3px 6px; } /* Ligne de filtres par colonne : une seconde ligne d'en-tête, discrète, qui ne doit pas concurrencer visuellement les libellés au-dessus. */ .ligne-filtres th { padding: 4px 6px 8px; background: inherit; } .ligne-filtres .filtre-col { width: 100%; box-sizing: border-box; padding: 4px 7px; font-size: .82rem; font-weight: 400; border: 1px solid var(--border); border-radius: 8px; background: var(--white); color: var(--ink); } .ligne-filtres .filtre-col:focus { outline: 2px solid var(--violet); outline-offset: -1px; } /* Colonne de dates : les deux bornes empilées, sinon la colonne double de largeur et pousse le tableau hors de l'écran. */ .ligne-filtres .filtre-intervalle { display: flex; flex-direction: column; gap: 3px; } .ligne-filtres .filtre-intervalle .filtre-col { padding: 3px 5px; font-size: .76rem; } /* Une colonne filtrée doit se voir : sinon on cherche pourquoi la liste est courte sans repérer le filtre resté en place. La classe est posée par le script — un sélecteur CSS ne sait pas lire la valeur courante d'un