/* ===================================================================== ERP CHAMPS CROISÉS — feuille de style unique de l'application. Charte validée par le client : coquelicot #C8102E sur fond clair. Socle commun aux 2 développeurs : on N'AJOUTE PAS de CSS dans les vues. Toute classe utile à plusieurs écrans vient ici, et seulement ici. Sommaire 1. Jetons (couleurs, rayons, ombres) 2. Base & typographie 3. Coquille : topbar / sidebar / main <- règle body>.app (cf. ⚠) 4. Écran de connexion 5. Panneaux, en-têtes de page, grilles 6. KPI 7. Boutons .btn 8. Badges .b, pastilles .chip, onglets .tabs 9. Formulaires .field / .input 10. Tableaux .tbl 11. Kanban .kanban 12. Calendrier .cal <- ⚠ classe .ev.app 12 bis. Gantt .gantt <- vue chronologique en barres 13. Modales .modal 14. Toasts .toast 15. Graphiques .bars / .donut 16. États : vide, chargement, erreur 17. Impression ===================================================================== */ /* --------------------------------------------------------------------- 1. JETONS --------------------------------------------------------------------- */ :root{ /* Charte */ --poppy:#C8102E; /* coquelicot — couleur d'accent unique */ --poppy-dark:#8c0d22; --poppy-clair:#f3a39b; --ink:#2b2b2b; /* texte principal */ --muted:#6f6f6f; /* texte secondaire */ --soft:#fbeceb; /* aplat coquelicot très clair */ /* ⚠⚠ CE COMMENTAIRE A ÉTÉ FAUX DEUX FOIS, DANS LES DEUX SENS (repris le 30/09). Il disait « aplat de ligne alternée » quand aucun zébrage n'existait ; puis « il n'existe AUCUNE règle `nth-child`, fond des EN-TÊTES et des PIEDS » après que le zébrage eut été écrit (25/09) et que l'en-tête eut perdu son aplat (24/09). Ce que ce jeton peint, au 30/09, ENTRE AUTRES — la liste complète est `grep -n 'var(--soft2)' app.css` (61 emplois ce jour-là) ; recopiée ici en entier, elle vieillirait comme les deux précédentes : · les LIGNES PAIRES de tous les tableaux `.tbl` — le zébrage, bloc « TABLEAUX : EN-TÊTE VISIBLE ET LIGNES ALTERNÉES » (et ses exceptions `nth-child(even)` par écran). C'est son emploi le plus étendu : qui change ce jeton change d'abord TOUS les tableaux ; · les lignes de section, écartées et dépliées, les tuiles du Suivi et son « à vérifier », les pieds de fenêtre, les champs en lecture seule, le survol des boutons et du menu ; · la frise du Planning (week-ends, groupes, lignes libres), le calendrier (en-tête, jours hors du mois), l'explorateur, les codes de l'émargement, les pistes des barres de progression, et deux lignes des Paramètres (`.pm-verrou`, `.mo-groupe-tete`). Il ne peint PLUS l'en-tête des tableaux (`#faf9f9`, section 10, 27/09), ni leur pied (`tfoot td` porte `--soft`). */ --soft2:#fdf6f5; /* zébrage des tableaux, fonds secondaires */ /* ⚠⚠ LE SURVOL D'UNE LIGNE A SON PROPRE JETON, ET C'EST TOUT LE POINT. Il valait `--soft2` : au survol, une ligne prenait EXACTEMENT la couleur de l'en-tête, et sur une table longue le repère « ceci est l'en-tête » disparaissait sous le curseur. Un jeton, deux fonctions. ⚠ Gris neutre, là où `--soft` (la sélection) est rosé : leurs clartés sont proches — 1,08:1 —, c'est la TEINTE qui les sépare. C'est acceptable ici et nulle part ailleurs : le survol suit le curseur, on sait toujours quelle ligne il désigne, alors que la sélection persiste sans rien pour la désigner. Ne pas recopier ce raisonnement pour un état durable. */ --ligne-survol:#ebe6e4; /* 1,24:1 sur blanc · 1,16:1 sur --soft2 */ --line:#e6e1df; /* filets et bordures — DÉCORATIF */ /* ⚠⚠ LE CONTOUR D'UNE COMMANDE N'EST PAS UN FILET DÉCORATIF. Mesuré le 22/08 : `--line` sur blanc donne **1,30:1**. Le RGAA impose 3:1 aux ÉLÉMENTS D'INTERFACE et à leurs contours (WCAG 1.4.11) — pas seulement au texte, et c'est le seuil qu'on oublie parce qu'on ne pense qu'au texte. Un filet qui sépare deux cartes n'est pas concerné : rien ne dépend de sa visibilité. Le contour d'un CHAMP DE SAISIE ou d'un BOUTON SECONDAIRE, si : sans lui, on ne sait pas où taper ni qu'il y a un bouton. D'où deux jetons, et non un seuil imposé partout — qui alourdirait toute la mise en page pour rien. ⚠ Le même défaut, et la même correction, dans `poppy.css` (`--line-champ`). Les deux feuilles sont indépendantes à dessein ; c'est le prix à payer, et il est écrit des deux côtés. */ --line-champ:#8a8a8a; /* contour d'une COMMANDE — 3,45:1 sur blanc */ --navy:#3a3f5c; /* couleur froide de contraste */ /* Fonds */ /* * ⚠⚠ BLANC LE 26/09 AU MATIN, PUIS #f4f3f2 LE MÊME SOIR, sur deux demandes * successives de Julien : « le background blanc sur tout le site, plus de * gris », puis « je veux le fond #f4f3f2 en background partout ». La * seconde fait foi. * * ⭐ MESURÉ AVANT DE BASCULER, DANS LES DEUX SENS. Sur #f4f3f2 les huit * contrastes de texte redescendent d'environ 10 % — et TOUS tiennent le * seuil AA : --ink 12,78 · --poppy-dark 8,63 · --info 6,20 · --poppy 5,31 * · --att 4,64 · --ok 4,61 · --muted 4,53 · --line-champ 3,12 (seuil 3, * c'est un contour de commande, pas du texte). * ⚠ LE PLUS SERRÉ EST `--muted`, À 4,53:1 : il tient, mais il n'a plus de * marge. Toute retouche de ce gris, ou tout fond un cran plus sombre, le * ferait passer sous 4,5. C'est le jeton à mesurer en premier la prochaine * fois qu'on touche à cette ligne. * ⚠⚠ ET L'IMPACT RÉEL EST PLUS PETIT QUE CES CHIFFRES : le texte de * l'application vit sur `--carte`, qui reste BLANC. Seuls le titre de * page, son sous-titre et quelques notes posent du texte directement sur * le fond. * * ⭐ CE QUE ÇA REND : une carte `.panel` se détache de nouveau par sa * COULEUR (1,11:1 contre le fond, au lieu de 1,00 en blanc sur blanc). * C'est très exactement la réserve écrite au point de coordination le * matin même — « si tu trouves que les cartes flottent sur un de tes * écrans, dis-le » : elle tombe d'elle-même. * ⚠ Les aplats des en-têtes de tableau et de panneau, eux, NE REVIENNENT * PAS : ils sont partis les 24, 25 et 26/09 pour une autre raison — un * en-tête n'est pas une information, et la ligne la plus voyante d'une * liste ne doit pas être celle qui ne porte aucune donnée. */ --fond:#f4f3f2; --carte:#ffffff; /* Sémantique (statuts) */ --ok:#1e7d51; --ok-bg:#e7f5ee; /* ⚠ #a86a00 tombait a 4,04:1 sur --att-bg et 4,44:1 sur blanc, pour un minimum WCAG AA de 4,5:1 — et c est la couleur de TOUT ce qui alerte : pastilles « a faire », bandeaux d avertissement, evenements en attente du calendrier. Le seul ton du systeme qui echouait, et le plus utile a lire. #9a6100 rend 4,68:1 et 5,14:1 sans changer la teinte percue. */ --att:#9a6100; --att-bg:#fdf3e2; --ko:#C8102E; --ko-bg:#fbeceb; --info:#2f5d8a; --info-bg:#f1f6fb; --neutre:#5c5c5c; --neutre-bg:#eeecea; /* Formes */ --r:10px; /* rayon standard */ --r-s:6px; --ombre:0 1px 2px rgba(43,43,43,.06), 0 4px 14px rgba(43,43,43,.05); --ombre-haut:0 10px 40px rgba(43,43,43,.18); /* Gabarit */ --h-topbar:58px; --l-sidebar:236px; --l-sidebar-reduit:58px; /* colonne d'icônes seules : voir « menu rétractable » */ } /* --------------------------------------------------------------------- 2. BASE & TYPOGRAPHIE --------------------------------------------------------------------- */ *,*::before,*::after{ box-sizing:border-box; } html,body{ height:100%; } body{ margin:0; background:var(--fond); color:var(--ink); font-family:"Segoe UI","Helvetica Neue",Arial,sans-serif; font-size:14px; line-height:1.5; -webkit-font-smoothing:antialiased; } h1,h2,h3,h4{ line-height:1.25; margin:0; font-weight:700; } h1{ font-size:20px; } h2{ font-size:17px; } h3{ font-size:15px; } h4{ font-size:13px; } p{ margin:.4em 0; } a{ color:var(--poppy-dark); text-decoration:none; } a:hover{ text-decoration:underline; } code,kbd{ font-family:Consolas,"Courier New",monospace; font-size:12.5px; } .sourdine{ color:var(--muted); } .petit{ font-size:12.5px; } /* ⚠⚠ `.att` NUE N'EXISTAIT PAS, et un ecran s'en servait deja. La vue Parametres emettait
pour distinguer un avertissement d'une simple note : la feuille ne connaissait que `.alerte.att`, `.kpi.att` et `.b-att`, donc l'« avertissement » sortait en NOIR ORDINAIRE et la « note » en gris — la hierarchie visuelle EXACTEMENT a l'envers de ce que le code annoncait. ⚠ LA REGLE PORTE SUR `.petit.att` ET NON SUR `.att` SEULE, et ce n'est pas de la prudence gratuite : `.kpi.att` ne declare que sa bordure et laisse ses libelles heriter la couleur du corps. Une regle `.att{color:…}` nue les repeindrait tous — apropos.js et demandes.js en portent — pour un correctif qui ne visait qu'un texte de formulaire. */ .petit.att{ color:var(--att); } .gras{ font-weight:700; } .droite{ text-align:right; } .centre{ text-align:center; } .nowrap{ white-space:nowrap; } .pleine{ width:100%; } .mono{ font-family:Consolas,"Courier New",monospace; } /* Utilitaires d'espacement (volontairement peu nombreux) */ .mt0{margin-top:0} .mt1{margin-top:8px} .mt2{margin-top:16px} .mt3{margin-top:24px} .mb0{margin-bottom:0} .mb1{margin-bottom:8px}.mb2{margin-bottom:16px}.mb3{margin-bottom:24px} /* Barre d'outils horizontale (filtres, boutons d'action) */ .barre{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; } .barre .pousse{ margin-left:auto; } /* --------------------------------------------------------------------- 3. COQUILLE : TOPBAR / SIDEBAR / MAIN --------------------------------------------------------------------- */ .topbar{ position:fixed; inset:0 0 auto 0; height:var(--h-topbar); z-index:40; display:flex; align-items:center; gap:18px; padding:0 16px; background:var(--carte); border-bottom:3px solid var(--poppy); box-shadow:0 1px 3px rgba(43,43,43,.07); } /* Marque : logo optionnel + signature typographique */ .topbar .marque{ display:flex; align-items:center; gap:10px; min-width:0; } .topbar .marque img{ height:34px; width:auto; display:block; } .topbar .marque .mark{ position:relative; width:40px; height:26px; flex:0 0 auto; } .topbar .marque .mark span{ position:absolute; top:0; width:26px; height:26px; border-radius:50%; } .topbar .marque .mark .r{ left:0; background:var(--poppy); } .topbar .marque .mark .g{ left:13px; background:#9a9a9a; mix-blend-mode:multiply; } .topbar .marque .nom{ font-weight:800; letter-spacing:2px; font-size:14px; white-space:nowrap; } .topbar .marque .nom small{ display:block; letter-spacing:1.6px; font-weight:600; font-size:9px; color:var(--muted); text-transform:uppercase; } /* * ┌──────────────────────────────────────────────────────────────────────────┐ * │ LE CHAMP DE RECHERCHE — généralisé le 24/09/2026. │ * │ │ * │ La loupe et la pilule ne vivaient que dans `.topbar`. Les listes, elles, │ * │ posaient un `.input` nu : le même geste — chercher — se présentait de │ * │ deux façons selon l'endroit, et celui des listes ne se distinguait pas │ * │ d'un champ de saisie ordinaire. `.champ-recherche` porte la forme, et │ * │ `.topbar .recherche` la RÉUTILISE au lieu de la redéclarer : une seconde │ * │ copie aurait divergé à la première correction, dixième fois ici. │ * │ │ * │ ⚠ AJOUT PUREMENT ADDITIF pour les listes : un champ qui ne pose pas la │ * │ classe garde l'apparence d'un `.input`, au pixel près. │ * └──────────────────────────────────────────────────────────────────────────┘ */ .champ-recherche{ position:relative; display:inline-block; } .champ-recherche input{ width:100%; height:34px; padding:0 12px 0 32px; border:1px solid var(--line); border-radius:18px; background:var(--soft2); font:inherit; font-size:13px; color:var(--ink); outline:none; } .champ-recherche input:focus{ border-color:var(--poppy); background:#fff; } /* ⚠ La loupe est DÉCORATIVE : `pointer-events:none` pour qu'un clic dessus atteigne le champ, et aucun texte alternatif — le champ porte déjà son `aria-label`, et une loupe annoncée en plus ferait doublon à l'oreille. */ /* ⚠⚠ LA LOUPE EST UN TRACÉ, PLUS UN CARACTÈRE (27/09). `⌕` (U+2315) se dessine sur ce serveur, mais en anneau fin sans manche — et il n'est garanti dans AUCUNE police : c'est le piège du `⧗` du 26/09, qui sortait un rectangle vide depuis sa naissance sans que rien dans le code puisse le dire. Les treize maquettes montrent une vraie loupe. ⚠ SVG en ligne dans un `data:` — aucune dépendance, aucune requête. La couleur y est FIGÉE (un `data:` ne connaît pas `currentColor`) : c'est la valeur de `--muted`, et si ce jeton bouge un jour, cette ligne aussi. Le dire vaut mieux que le découvrir. */ .champ-recherche::before{ content:""; position:absolute; left:11px; top:50%; width:14px; height:14px; transform:translateY(-50%); pointer-events:none; opacity:.8; background:no-repeat center/14px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-3.5-3.5'/%3E%3C/svg%3E"); } /* Recherche globale : la même forme, une largeur à elle. */ .topbar .recherche{ flex:1; max-width:460px; } /* Identité + déconnexion */ .topbar .moi{ margin-left:auto; display:flex; align-items:center; gap:12px; } .topbar .moi .qui{ text-align:right; line-height:1.2; } .topbar .moi .qui b{ display:block; font-size:13px; } .topbar .moi .qui span{ font-size:11px; color:var(--muted); text-transform:uppercase; letter-spacing:.6px; } .topbar .moi .pastille{ width:34px; height:34px; border-radius:50%; background:var(--poppy); color:#fff; display:flex; align-items:center; justify-content:center; font-weight:800; font-size:13px; } /* ⚠⚠ RÈGLE CRITIQUE — NE PAS SIMPLIFIER EN « .app » Le calendrier utilise la classe d'événement « .ev.app » (session en attente). Un sélecteur nu « .app » attrapait ces événements et leur appliquait le gabarit de la coquille (grille plein écran) : calendrier explosé. On cible donc UNIQUEMENT l'enfant direct de . */ body>.app{ display:grid; grid-template-columns:var(--l-sidebar) 1fr; align-items:start; padding-top:var(--h-topbar); min-height:100vh; } .sidebar{ position:sticky; top:var(--h-topbar); height:calc(100vh - var(--h-topbar)); overflow-y:auto; background:var(--carte); border-right:1px solid var(--line); padding:14px 10px 24px; } .sidebar .groupe{ font-size:10px; font-weight:700; letter-spacing:1.2px; text-transform:uppercase; color:var(--muted); margin:16px 6px 6px 10px; display:flex; align-items:center; justify-content:space-between; cursor:pointer; user-select:none; border-radius:var(--r-s); } .sidebar .groupe:hover{ color:var(--poppy-dark); } .sidebar .groupe:focus-visible{ outline:2px solid var(--poppy); outline-offset:2px; } .sidebar .groupe:first-child{ margin-top:2px; } /* Même échelle que .fleche des en-têtes de tableau triables (app.css) : un petit indicateur qui ne rivalise pas avec le libellé du groupe. */ .sidebar .groupe .chevron{ opacity:.55; font-size:10px; flex:0 0 auto; margin-left:8px; } /* ⚠ `.groupe-corps` n'existait pas avant le repli par groupe : c'est le seul conteneur entre l'en-tête et ses liens, et c'est LUI qu'on masque — jamais les `` un par un, ce qui laisserait échapper le dernier si la vue change sans repasser par buildSidebar(). */ .sidebar .groupe-corps.replie{ display:none; } /* ⚠⚠ EN MENU RÉDUIT, UN GROUPE NE RESTE JAMAIS MASQUÉ. Son en-tête n'est plus qu'un filet de 1 px (règle plus bas) : sans texte ni cible cliquable, un groupe replié y deviendrait un trou dans la colonne d'icônes, invisible et sans moyen de le rouvrir. Cette règle l'emporte sur `.replie` ci-dessus — voir aussi buildSidebar(), qui ignore l'état replié dans ce mode. */ body>.app.reduit .sidebar .groupe-corps.replie{ display:block; } .sidebar a{ display:flex; align-items:center; gap:10px; padding:8px 10px; margin-bottom:2px; border-radius:var(--r-s); /* ⚠ 500 et non 600 (27/09, maquette) : en demi-gras, les quinze entrées du menu avaient le même poids que l'entrée ACTIVE, et rien ne se détachait. Le dessin met le menu en graisse normale et ne renforce que l'entrée où l'on se trouve. */ color:var(--ink); font-size:13.5px; font-weight:500; text-decoration:none; border-left:3px solid transparent; } .sidebar a:hover{ background:var(--soft2); text-decoration:none; } .sidebar a.actif{ background:var(--soft); color:var(--poppy-dark); border-left-color:var(--poppy); font-weight:700; } .sidebar a .ic{ width:20px; text-align:center; font-size:15px; flex:0 0 auto; } /* ⚠ UNE ICÔNE DESSINÉE (un nom du catalogue de `CC.icone()`, 27/09) n'est pas un caractère : laissée EN LIGNE, un se pose sur la ligne de base du texte et remontait de 3,5 px au-dessus du libellé (mesuré dans chromium sur « Documents »). En bloc centré, il tient la case du caractère qu'il remplace, centré comme lui. ⚠ `height:1.5em` : la hauteur de LIGNE d'un caractère de cette case (le corps est en `line-height:1.5`). Sans elle, la case tombait à 16 px et l'entrée devenait 2,5 px plus basse que ses voisines ; le dessin, lui, garde ses 16 px de large et se centre dans cette hauteur (`viewBox` carré). */ .sidebar a .ic > svg{ display:block; margin:0 auto; height:1.5em; } /* ⚠ ET ELLE PREND LA COULEUR DU TEXTE (27/09, maquette) : grise au repos, encre au survol, coquelicot sur l'entrée active. Sur les treize captures, le menu se lit ainsi — l'icône accompagne le libellé, elle ne le concurrence pas. Ajouté au réglage de dev A, qui règle l'ALIGNEMENT (mesuré dans chromium) ; les deux ne se recouvrent pas. */ .sidebar a .ic{ color:var(--muted); } .sidebar a:hover .ic{ color:var(--ink); } .sidebar a.actif .ic{ color:var(--poppy); } .sidebar a .compteur{ margin-left:auto; background:var(--poppy); color:#fff; border-radius:10px; font-size:10.5px; font-weight:700; padding:1px 7px; } /* --------------------------------------------------------------------- MENU RÉTRACTABLE — la barre se réduit à une colonne d'icônes ⚠⚠ LE SÉLECTEUR EST `body>.app`, JAMAIS `.app`. La classe `.app` est aussi celle des événements du calendrier (`.ev.app`) : un sélecteur `.app.reduit` attraperait un jour un créneau du planning. Le piège est déjà documenté dans CLAUDE.md — c'est exactement ici qu'on se fait avoir. ⚠ Le bouton vit dans la topbar, PAS dans la barre : posé dedans, il se déplacerait avec elle à chaque bascule. À gauche de la marque, il surplombe la colonne qu'il commande et ne bouge jamais. --------------------------------------------------------------------- */ .topbar .btn-menu{ flex:0 0 auto; width:34px; height:34px; padding:0; display:flex; align-items:center; justify-content:center; background:none; border:1px solid transparent; border-radius:var(--r-s); color:var(--muted); font-size:17px; line-height:1; cursor:pointer; } .topbar .btn-menu:hover{ background:var(--soft2); color:var(--poppy-dark); } .topbar .btn-menu:focus-visible{ outline:2px solid var(--poppy); outline-offset:2px; } /* La transition porte sur la COLONNE de la grille : c'est elle qui fixe la largeur réelle. Là où elle n'est pas animable, la bascule est instantanée — le menu fonctionne quand même. */ body>.app{ transition:grid-template-columns .18s ease; } body>.app.reduit{ grid-template-columns:var(--l-sidebar-reduit) 1fr; } body>.app.reduit .sidebar{ padding-left:6px; padding-right:6px; overflow-x:hidden; } /* L'icône seule, centrée. `white-space:nowrap` empêche le libellé de replier la ligne pendant les 180 ms de la transition. */ body>.app.reduit .sidebar a{ justify-content:center; gap:0; padding-left:0; padding-right:0; white-space:nowrap; overflow:hidden; } body>.app.reduit .sidebar a .lib{ display:none; } /* ⚠ LE TITRE DE GROUPE DEVIENT UN FILET, IL NE DISPARAÎT PAS. « PILOTAGE », « ACTIVITÉ », « CONFORMITÉ & FINANCE » structurent vingt entrées : les effacer donnerait une colonne de vingt icônes indifférenciées. Le filet garde le regroupement sans le texte. */ body>.app.reduit .sidebar .groupe{ font-size:0; height:1px; margin:12px 8px; padding:0; background:var(--line); overflow:hidden; } body>.app.reduit .sidebar .groupe:first-child{ margin-top:4px; } /* Le compteur ne peut plus se ranger à droite d'un libellé absent : il devient une pastille sur l'icône. Sans ça, `margin-left:auto` le pousse hors du cadre et il disparaît — un compteur invisible vaut mieux mort que muet. */ body>.app.reduit .sidebar a{ position:relative; } body>.app.reduit .sidebar a .compteur{ position:absolute; top:2px; right:4px; margin:0; min-width:8px; padding:0 4px; font-size:9.5px; line-height:1.5; } main#app{ padding:18px 20px 40px; min-width:0; } /* En-tête de page (titre + actions) */ .page-tete{ display:flex; align-items:flex-end; gap:14px; flex-wrap:wrap; margin-bottom:16px; } .page-tete h1{ margin:0; } .page-tete .sstitre{ color:var(--muted); font-size:12.5px; margin-top:2px; } .page-tete .actions{ margin-left:auto; display:flex; gap:8px; flex-wrap:wrap; } /* Fil d'Ariane / retour */ .retour{ font-size:12.5px; color:var(--muted); margin-bottom:6px; display:inline-block; } @media (max-width:900px){ body>.app{ grid-template-columns:1fr; } .sidebar{ position:static; height:auto; border-right:none; border-bottom:1px solid var(--line); display:flex; flex-wrap:wrap; gap:4px; padding:8px; } .sidebar .groupe{ display:none; } .sidebar a{ margin:0; border-left:none; border-bottom:3px solid transparent; } .sidebar a.actif{ border-left:none; border-bottom-color:var(--poppy); } .topbar .recherche{ display:none; } main#app{ padding:14px 12px 32px; } } /* --------------------------------------------------------------------- 4. ÉCRAN DE CONNEXION --------------------------------------------------------------------- */ body.connexion{ display:flex; align-items:center; justify-content:center; padding:20px; background: radial-gradient(circle at 12% 88%, var(--soft) 0%, rgba(251,236,235,0) 55%), radial-gradient(circle at 88% 8%, #f6c9c4 0%, rgba(246,201,196,0) 52%), var(--fond); } .carte-connexion{ width:100%; max-width:380px; background:var(--carte); border:1px solid var(--line); border-top:5px solid var(--poppy); border-radius:var(--r); box-shadow:var(--ombre-haut); padding:26px 24px 22px; } .carte-connexion .marque{ display:flex; align-items:center; gap:10px; margin-bottom:4px; } .carte-connexion .marque img{ height:44px; width:auto; display:block; } /* Sans display:block, le reste en ligne et le nom de la structure se colle à la baseline (« CHAMPS CROISÉSOrganisme de formation »). */ .carte-connexion .marque .nom{ font-weight:800; letter-spacing:2px; font-size:14px; line-height:1.25; } .carte-connexion .marque .nom small{ display:block; letter-spacing:1.6px; font-weight:600; font-size:9px; color:var(--muted); text-transform:uppercase; } .carte-connexion .mark{ position:relative; width:46px; height:30px; flex:0 0 auto; } .carte-connexion .mark span{ position:absolute; top:0; width:30px; height:30px; border-radius:50%; } .carte-connexion .mark .r{ left:0; background:var(--poppy); } .carte-connexion .mark .g{ left:15px; background:#9a9a9a; mix-blend-mode:multiply; } .carte-connexion h1{ font-size:18px; margin:14px 0 2px; } .carte-connexion .sstitre{ color:var(--muted); font-size:12.5px; margin-bottom:18px; } .carte-connexion .btn{ width:100%; justify-content:center; margin-top:6px; } .carte-connexion .pied{ margin-top:16px; padding-top:12px; border-top:1px solid var(--line); font-size:11.5px; color:var(--muted); text-align:center; } /* Bandeau d'erreur de formulaire */ .alerte{ border:1px solid #f0c8c2; background:var(--soft); border-left:5px solid var(--poppy); border-radius:var(--r-s); padding:9px 12px; margin:10px 0; font-size:13px; color:var(--poppy-dark); } .alerte.info{ border-color:#cfe0ef; background:var(--info-bg); border-left-color:var(--info); color:var(--info); } .alerte.ok{ border-color:#bfe3d1; background:var(--ok-bg); border-left-color:var(--ok); color:var(--ok); } /* ⚠ .att et .ko manquaient alors que SEPT vues les emploient (20 emplois). Le style de base .alerte etant celui d'une erreur, un avertissement et une information sortaient avec la meme urgence visuelle qu'une panne. */ .alerte.att{ border-color:#f0d9a8; background:var(--att-bg); border-left-color:var(--att); color:var(--att); } .alerte.ko{ border-color:#f0c8c2; background:var(--ko-bg); border-left-color:var(--ko); color:var(--ko); } .alerte[hidden]{ display:none; } /* --------------------------------------------------------------------- 5. PANNEAUX & GRILLES --------------------------------------------------------------------- */ .panel{ background:var(--carte); border:1px solid var(--line); border-radius:var(--r); box-shadow:var(--ombre); margin-bottom:16px; overflow:hidden; } /* * ┌──────────────────────────────────────────────────────────────────────────┐ * │ L'EN-TÊTE DE PANNEAU PERD SON APLAT — 24/09/2026, décision de Julien. │ * │ │ * │ Suite du geste de la veille sur les en-têtes de TABLEAU, et pour la │ * │ même raison : 162 panneaux sur 32 vues portaient chacun une bande rosée. │ * │ Un écran qui en aligne trois — et il y en a — comptait ses bandes avant │ * │ de lire son contenu, et l'aplat qui devait distinguer ne distinguait │ * │ plus rien à force d'être partout. │ * │ │ * │ ⚠ CE QUI DISTINGUE L'EN-TÊTE RESTE : le titre en rouge sombre et le │ * │ filet du bas. Deux marques, et elles survivent à l'impression, où les │ * │ aplats ne sortent pas. │ * │ │ * │ ⚠⚠ ET DEUX APLATS SONT GARDÉS, PARCE QU'ILS DISENT QUELQUE CHOSE : le │ * │ `tfoot` d'un tableau (un total n'est pas une ligne) et le `footer` de │ * │ panneau, qui porte les commandes d'un formulaire. Les seuls qui │ * │ restent sont donc les seuls qui se remarquent. │ * └──────────────────────────────────────────────────────────────────────────┘ */ .panel>header{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; padding:11px 14px; border-bottom:1px solid var(--line); background:var(--carte); } .panel>header h2, .panel>header h3{ font-size:14px; margin:0; color:var(--poppy-dark); } .panel>header .actions{ margin-left:auto; display:flex; gap:8px; flex-wrap:wrap; } .panel>.corps{ padding:14px; } .panel>.corps.serre{ padding:0; } /* pour un tableau pleine largeur */ .panel>footer{ padding:10px 14px; border-top:1px solid var(--line); background:var(--soft2); display:flex; align-items:center; gap:10px; font-size:12.5px; color:var(--muted); } .grille{ display:grid; gap:16px; } /* ── LA GRILLE DES INTERVENANTS (13/09, dev B sur l'écran du lot A) ──────── ⚠⚠ DEUX DÉFAUTS DE GÉOMÉTRIE, ET LES DEUX SE MESURENT SANS NAVIGATEUR. 1. `.panel` porte `margin-bottom:16px` — utile quand des panneaux s'empilent, FAUX dans une grille qui a déjà `gap:16px` : l'écart entre deux rangées valait 32 px au lieu de 16, et la dernière rangée traînait 16 px de vide. 2. `.panel` n'est pas une colonne flex : étiré à la hauteur de sa rangée par la grille, son `