/** * ui.css : kit UI commun de Colleta (admin, bilan, recover). count.css et * live.css ne la chargent pas. tokens.css doit etre charge AVANT, en . * Nommage : prefixe .ui-, modificateurs en --, etats en is-. */ /* Pas de @import de police ici : ce serait une requete serielle. Les sont poses par Chassis::head(), tableaux asset_polices et asset_tokens. */ /* ================================================================ * * 1. TOKENS * ================================================================ */ :root { /* ---- Couleurs surchargeables par tenant (orgs.branding_json) ---- La cle stockee reste « vert » (compat branding existant), mais le jeton CSS qu'elle ecrit s'appelle --action. Le reste (--accent, --fond, --carte, --trait, --texte...) vient de tokens.css, commun aux trois pages publiques. */ /* La seule facon d'ecrire dans la famille du rose, 9,78:1 sur blanc. Non surchargeable par un tenant : tokensCss() ne le pose jamais et il ne derive pas de --accent, car il dit un etat et non la marque. */ --accent-encre: #5A2793; /* Le voile du rose, fond des etats qui portent --accent-encre : 8,33:1. */ --accent-voile: #F5E8FF; --trait: #DCE8EA; /* --erreur DIVERGE de count.css (#C0264B) : « Supprimer » ne doit jamais ressembler a « Enregistrer », donc jamais valoir --accent. Prune : 11,37:1 sur blanc, 9,38:1 sur le voile d'erreur. Reste propre a cette feuille plutot qu'unifiee dans tokens.css. */ --erreur: #6D0E56; /* ---- Couleurs derivees, calculees par colleta_ui_tokens_css() ---- */ /* Repli servi quand tokensCss() n'emet rien, chez un tenant sans branding. Une encre sombre, pas du blanc : sur le rose #EA80FC le blanc rend 2,34:1. C'est la valeur que Branding::sur() calcule, et tests/kits-couleurs-test.php compare les deux. */ --sur-accent: #0F2229; /* texte pose sur --accent */ --sur-action: #ffffff; /* texte pose sur --action */ /* ---- Couleurs fixes, jamais surchargees ---- Un avertissement doit rester lisible comme un avertissement, meme chez un tenant dont l'accent serait deja orange. */ /* 7,79:1 sur blanc et 6,93:1 sur le fond de ses propres alertes. Un avertissement et une attente se disent de la meme encre. */ --avertissement: #8A3A12; /* Un bleu franc et jamais surcharge, a 6,31:1. Il ne doit pas valoir --action : l'information se confondrait avec le succes, et --action est surchargeable par tenant alors que --info ne l'est pas. */ --info: #1D4ED8; /* Le focus ne prend plus la couleur de la structure : un anneau clair double d'un anneau vif reste visible sur un fond sombre comme sur un fond clair, ce qu'une couleur unique ne garantit pas. */ --focus: #1B7F91; /* Jeton distinct de --focus, et c'est une OMBRE, pas une couleur. Les regles qui ecrivent « box-shadow:var(--focus-anneau) » posent aussi « outline:none » : leur donner une couleur rend la declaration invalide et supprime tout repere de focus au clavier. */ --focus-anneau: 0 0 0 3px #FFFFFF, 0 0 0 6px var(--focus); /* Du teal vif au rose. Le chiffre vedette est le seul endroit ou un degrade peint du TEXTE : partir du teal lui donne un ancrage sombre, deux roses y tomberaient a 2,3:1. */ --degrade: linear-gradient(90deg, var(--focus), var(--accent)); /* ---- Typographie ---- Six tailles, deux graisses, un interligne par taille, une taille d'icone par palier. Une valeur hors de ces listes est une valeur a justifier. Une seule famille pour le texte et les titres : la hierarchie se dit par la taille. --police, --t-mini a --t-page viennent de tokens.css (memes valeurs, dupliquees dans live.css et count.css) ; Branding::tokensCss() surcharge --police chez un tenant. */ /* Meme famille que le texte, ce n'est pas un oubli. Le jeton reste declare parce que des regles le lisent et que Branding ne le pose jamais. */ --police-titre: var(--police); /* Chiffres vedettes seulement : une manuscrite ne se lit pas en paragraphe. Voir nerko.css. */ --police-chiffre: "Nerko One", "Marker Felt", "Segoe Print", "Chalkboard SE", cursive; --taille-base: 15px; /* Un interligne par taille : il se resserre quand la taille monte. */ --lh-mini: 1.35; --lh-petit: 1.4; --lh-texte: 1.4; --lh-fort: 1.3; --lh-titre: 1.2; --lh-page: 1.15; --lh-nu: 1; /* chiffre vedette, ou l'interligne est du vide */ /* Une etiquette en capitales sans interlettrage se lit comme un bloc. */ --ls-capitale: .09em; --ls-normal: 0; /* Cinq tailles d'icone, une par palier de texte. Prefixe --ic-t- et pas --ic- : les jetons --ic- plus bas portent des DESSINS en data-URI. */ --ic-t-mini: 14px; /* dans un texte a --t-mini */ --ic-t-petit: 16px; /* dans un texte a --t-petit */ --ic-t-texte: 18px; /* dans un texte a --t-texte */ --ic-t-fort: 20px; /* dans un texte a --t-fort */ --ic-t-seul: 24px; /* seule dans un bouton, sans texte a cote */ /* ---- Deux familles de plus, pour le document bilan ---- La page admin du bilan embarque le document public (.bl-*) sous le chrome admin (.ui-*) : sa prose dense et ses chiffres d'affichage sont nommes ici pour que bilan.css les lise au lieu de coder ses tailles en dur. */ --t-corps-lu: 14px; /* prose dense du document */ --t-display-3: clamp(30px, 4vw, 42px); /* chiffre de section */ --t-display-2: clamp(36px, 6vw, 56px); /* chiffre de projection */ --t-display-1: clamp(56px, 11vw, 104px); /* total vedette du bilan */ /* ---- Formes ---- --rayon a --ombre-forte viennent de tokens.css (memes valeurs que live.css et count.css). Ombres dedoublees : une ombre de contact courte sous une ombre de portee longue, teintees de l'encre teal. */ /* ---- Rythme ---- Les six --espace-N sont l'echelle brute. */ --espace-1: 4px; --espace-2: 8px; --espace-3: 12px; --espace-4: 16px; --espace-5: 24px; --espace-6: 32px; /* L'ecart dit la parente. Ces quatre jetons nomment l'intention et pointent sur l'echelle brute, ils ne la doublent pas. */ --v-colle: var(--espace-2); /* 8px : un libelle et son controle */ --v-dedans: var(--espace-4); /* 16px : deux elements d'un meme bloc */ --v-entre: var(--espace-5); /* 24px : deux blocs voisins */ --v-danger: var(--espace-6); /* 32px : avant la zone de danger */ --largeur-contenu: 1180px; --largeur-nav: 240px; --transition: .18s ease; /* ---- Les jetons du chassis de la maquette ---- */ --h-barre: 60px; /* hauteur de la barre haute */ /* Controle de la barre haute : 14 px d'air dessus et dessous, sans quoi le champ et le selecteur remplissent la barre au lieu d'y poser. */ --h-ctrl-barre: 32px; --l-menu: 228px; /* largeur du menu lateral sombre */ --r-s: var(--rayon-petit); --ep-bord: 1.5px; /* epaisseur du contour d'un controle */ /* Le teal profond du menu lateral. */ --action-fonce: #08323C; --sur-fonce: #D9F0F2; /* texte pose sur le teal profond */ /* Les paliers d'icone de la maquette, un par palier de texte. */ --ic-mini: var(--ic-t-mini); --ic-petit: var(--ic-t-petit); --ic-texte: var(--ic-t-texte); --ic-fort: var(--ic-t-fort); --ic-seul: 24px; /* Alias de police : la maquette nomme --f-titre et --f-texte, le produit --police-titre et --police. Meme valeur, deux vocabulaires. */ --f-titre: var(--police-titre); --f-texte: var(--police); /* Un controle fait 48 px, et c'est une HAUTEUR, pas un plancher : un min-height se fait depasser par son contenu et multiplie les gabarits. 48 px couvre le minimum tactile de 44 px. */ --h-ctrl: 48px; --h-ctrl-s: 36px; /* controle dense : filtre, bouton de ligne */ /* La grille de comptage reste a 50 px, hors de cette echelle : un faux clic y fausse un comptage. Voir count.css. */ --cible: var(--h-ctrl); /* ancien nom, garde pour les regles qui le lisent */ /* Un marqueur de booleen fait 22 px : case, radio et bille d'interrupteur sont le meme objet a l'oeil. La piste est DERIVEE, jamais posee a la main. */ --marq: 22px; --r-marq: 6px; /* rayon d'une case a cocher */ --ep-marq: 4px; /* jeu entre la bille et le bord de la piste */ --piste-l: calc(var(--marq) * 2 + var(--ep-marq) * 2); /* 52px */ --piste-h: calc(var(--marq) + var(--ep-marq) * 2); /* 30px */ /* Icones : masques SVG en data-URI, sans couleur. */ --ic-catalogue: url('data:image/svg+xml;utf8,'); --ic-magasins: url('data:image/svg+xml;utf8,'); --ic-configurer: url('data:image/svg+xml;utf8,'); --ic-direct: url('data:image/svg+xml;utf8,'); --ic-bilan: url('data:image/svg+xml;utf8,'); --ic-envoyer: url('data:image/svg+xml;utf8,'); --ic-info: url('data:image/svg+xml;utf8,'); --ic-succes: url('data:image/svg+xml;utf8,'); --ic-erreur: url('data:image/svg+xml;utf8,'); --ic-avertissement: url('data:image/svg+xml;utf8,'); --ic-attente: url('data:image/svg+xml;utf8,'); --ic-externe: url('data:image/svg+xml;utf8,'); --ic-importer: url('data:image/svg+xml;utf8,'); --ic-exporter: url('data:image/svg+xml;utf8,'); --ic-ajouter: url('data:image/svg+xml;utf8,'); --ic-copier: url('data:image/svg+xml;utf8,'); --ic-generer: url('data:image/svg+xml;utf8,'); /* ---- Les noms de jetons de la maquette, en alias ---- La maquette nomme --c-*, --e*, --k-*, le produit --fond, --espace-*, --carte. L'alias garde une seule source de verite par couleur. */ --c-papier: var(--carte); --c-surface: var(--fond); --c-surface-2: var(--action-pale); --c-voile: var(--action-clair); --c-encre: var(--texte); --c-doux: var(--doux); --c-sur-fonce: var(--sur-fonce); --c-action: var(--action); --c-action-fonce: var(--action-fonce); --c-action-vif: var(--focus); --c-action-voile: var(--action-clair); --c-accent: var(--accent); --c-accent-vif: var(--accent-clair); --c-accent-encre: var(--accent-encre); --c-accent-contraste: var(--sur-accent); --c-accent-voile: var(--accent-voile); --c-trait: var(--trait); --c-bord: var(--bord-controle); --c-piste: #B4C4CA; /* Les etats. --c-alerte porte l'avertissement, --c-erreur l'erreur : deux roles distincts, deux encres. */ --c-succes: #1DE9B6; --c-succes-encre: #0C725E; --c-succes-voile: #D8FBF2; --c-alerte: #FF1744; --c-alerte-encre: var(--avertissement); --c-alerte-voile: #FFE3E9; --c-erreur: var(--erreur); --c-erreur-encre: var(--erreur); --c-erreur-voile: #F7E4F2; --c-anis: #B7CE1F; --c-anis-fonce: #9E9D24; --c-anis-encre: var(--texte); --c-anis-voile: #F6F8DA; --c-mauve: #D500F9; --c-mauve-fonce: #78008C; --c-mauve-voile: #FBE6FF; /* Rembourrage sous les noms de la maquette. */ --e1: var(--espace-1); --e2: var(--espace-2); --e3: var(--espace-3); --e4: var(--espace-4); --e5: var(--espace-5); --e6: 36px; /* Rayons et polices sous les noms de la maquette. */ --r: var(--rayon); --r-pilule: var(--rayon-pilule); --f-chiffre: var(--police-chiffre); --f-code: ui-monospace, "SF Mono", Menlo, Consolas, monospace; --ombre-f: var(--ombre-forte); /* Le contenant. */ --k-fond: var(--c-papier); --k-trait: 1px solid var(--c-trait); --k-rayon: var(--r); --k-retrait: var(--e4); --k-retrait-serre: var(--e3) var(--e4); /* Les deux largeurs de lecture. */ --l-lecture: 640px; --l-formulaire: 860px; --u-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 9l6 6 6-6' fill='none' stroke='%230E5464' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); } /* ================================================================ * * 2. RESET ET BASE * ================================================================ */ * { box-sizing: border-box; } html { background: var(--fond); } body { margin: 0; background: var(--fond); color: var(--texte); font: var(--taille-base)/var(--lh-texte) var(--police); -webkit-text-size-adjust: 100%; /* Chiffres a chasse fixe : sans cela, le « 1 » de Poppins est plus etroit que le « 8 » et une colonne de nombres danse d'une ligne a l'autre. */ font-variant-numeric: tabular-nums; } img { max-width: 100%; height: auto; } [hidden] { display: none !important; } /* h1-h3 seuls passent en --police-titre. h4 reste sur --police, plus bas : il joue un role de sous-titre discret en capitales. Le titre est en encre, pas en teal : le teal est la couleur de l'action, un titre teal se lirait comme un lien. */ .ui-mode-admin h1, .ui-mode-public h1 { font-family: var(--police-titre); font-size: var(--t-page); font-weight: var(--g-fort); color: var(--c-encre, var(--encre)); margin: 0 0 var(--espace-3); } /* Les interlignes de titre, sans quoi h1 herite le 1,45 du corps de texte. Un titre s'ecrit serre pour se lire comme un bloc et non comme un paragraphe. */ .ui-mode-admin h1, .ui-mode-public h1 { line-height: 1.15; } .ui-mode-admin h2, .ui-mode-public h2 { line-height: 1.2; } .ui-mode-admin h3, .ui-mode-public h3 { line-height: 1.3; } /* Un h2 nu est un titre de 22 px, sans marge : la grille de la page et le gap des blocs portent le rythme. Ce sont ses PARENTS (.bloc-tete, .feuille-tete, le summary d'un depliant) qui en font une etiquette en capitales. */ .ui-mode-admin h2, .ui-mode-public h2 { font-family: var(--police-titre); font-size: var(--t-titre); font-weight: var(--g-fort); line-height: var(--lh-titre); letter-spacing: var(--ls-normal); color: var(--c-encre); margin: 0; } .ui-mode-admin h3, .ui-mode-public h3 { font-family: var(--police-titre); font-size: var(--t-fort); font-weight: var(--g-fort); margin: var(--espace-4) 0 var(--espace-2); } /* Borne aux deux modes : la page de comptage ne charge que count.css. :not(.aide) : un

reste au petit corps de .aide (ligne 3790 plus bas), sinon un element + une classe l'emporte a tort sur une classe seule, peu importe l'ordre des regles dans ce fichier. */ .ui-mode-admin p:not(.aide), .ui-mode-public p:not(.aide) { font-size: var(--t-texte); } /* Le h4 se distingue de son h3 par la CASSE et la couleur, jamais par une taille qui inverserait le rang. Meme traitement que .ui-card > legend et .ui-panel-titre, qui jouent le meme role de sous-titre de bloc. */ .ui-mode-admin h4, .ui-mode-public h4 { font-size: var(--t-petit); font-weight: var(--g-fort); text-transform: uppercase; letter-spacing: .5px; color: var(--action); margin: var(--espace-4) 0 var(--espace-2); } /* Les liens DE CONTENU prennent le teal. Tout composant qui pose lui-meme un fond ou une couleur (bouton, badge, onglet, pastille de filtre, ligne « A faire ») DOIT etre exclu ici, sinon son libelle rend teal sur teal, soit un contraste de 1:1. tests/contraste-css-test.php le verifie un par un. .ui-ong est la vraie classe des onglets de collecte (kit_onglets(), templates/kit/onglets.html.twig). */ .ui-contenu a:not(.btn):not(.ui-badge):not(.ui-ong):not(.fpil):not(.lien-mini):not(.afaire-l) { color: var(--action); } /* Masquage visuel sans masquage pour les lecteurs d'ecran. */ .ui-sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } /* Focus visible partout, jamais outline:none sans remplacement. La regle de base couvre tout ce qu'une enumeration de selecteurs oublierait ; l'enumeration dessous documente les surfaces qui doivent le porter. */ :focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; } .btn:focus-visible, .menu-a:focus-visible, .menu .ui-nav-groupe a:focus-visible, .ui-pagination a:focus-visible, .ui-seg button:focus-visible, .ui-evitement:focus, [data-ui-copier]:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; } /* Lien d'evitement : premier element focalisable de chaque page. */ .ui-evitement { position: absolute; left: -9999px; top: 0; z-index: 100; background: var(--carte); color: var(--action); font-weight: var(--g-fort); padding: 12px 18px; border-radius: 0 0 var(--rayon-petit) 0; box-shadow: var(--ombre-forte); } .ui-evitement:focus { left: 0; } /* ================================================================ * * 3. BOUTONS * ================================================================ * * Le style visuel (.btn, .btn--*) vit dans la section « SYSTEME DE LA * MAQUETTE » en fin de feuille : c'est elle la reference, portee le * 23 septembre 2026. Ce qui reste ici est la MECANIQUE, jamais recouverte * par la maquette : etat desactive, chargement, et les groupes/voisinages * qui donnent leur place aux boutons dans un formulaire ou un tableau. */ /* Desactive par une vraie paire de couleurs, jamais par opacite : l'opacite delave le fond ET le texte dans la meme proportion, le rapport entre les deux s'effondre. Ici --doux sur --fond, 5,83:1. La bordure coloree disparait avec le fond, sinon le bouton garde l'air cliquable. */ .btn:disabled, .btn[aria-disabled="true"] { background: var(--fond); /* --trait rendrait 1,25:1 ici, pour un seuil de 3 : le bouton n'aurait plus de bord, donc plus de forme. */ border-color: var(--bord-controle); color: var(--doux); cursor: not-allowed; box-shadow: none; transform: none; } /* Etat chargement : le texte disparait, un spinner prend sa place. */ .btn.is-loading { position: relative; color: transparent; pointer-events: none; } .btn.is-loading::after { content: ''; position: absolute; top: 50%; left: 50%; width: 16px; height: 16px; margin: -8px 0 0 -8px; border: 2px solid rgba(255, 255, 255, .4); border-top-color: #fff; border-radius: 50%; animation: ui-spin .7s linear infinite; } .btn:not(.btn--primaire):not(.btn--accent).is-loading::after { border-color: rgba(0, 0, 0, .18); border-top-color: var(--action); } @keyframes ui-spin { to { transform: rotate(360deg); } } /* Deux boutons cote a cote a parts egales (les deux envois du recover). */ .ui-btn-groupe { display: flex; gap: var(--espace-3); flex-wrap: wrap; } /* La largeur d'un bouton suit son libelle, la hierarchie se lit a la couleur : un partage en parts egales donne le meme poids visuel a l'action principale et au lien de repli. La regle porte sur tous les enfants directs, car une action peut etre enveloppee dans un

. */ .ui-btn-groupe > * { flex: 0 1 auto; min-width: 0; } /* Le devenu element de partage transmet sa largeur au bouton qu'il porte, sinon il partage un espace que le bouton n'occupe pas. */ .ui-btn-groupe > form { display: flex; } .ui-btn-groupe > form > .btn { width: 100%; } /* Barre d'actions, pour un groupe de plus de deux boutons : largeur naturelle et repli par le flex-wrap. La regle est nommee et non appliquee a .ui-btn-groupe nu, dont les ecrans a deux boutons dependent. */ .ui-btn-groupe--auto > *, .ui-btn-groupe--auto .btn { flex: 0 1 auto; } @media (max-width: 560px) { .ui-btn-groupe--auto { flex-direction: column; } /* Une barre d'actions s'empile d'un seul bloc : la regle porte sur les enfants directs quelle que soit leur variante, et sur le bouton qu'un envelopperait. */ .ui-btn-groupe--auto > *, .ui-btn-groupe--auto > * > .btn { width: 100%; } } /* ================================================================ * * 4. FORMULAIRES * ================================================================ */ .ui-form { display: flex; flex-direction: column; gap: var(--espace-4); } .ui-field { display: flex; flex-direction: column; gap: 6px; } /* Seul champ de son bloc : label devant le champ. */ .bloc-corps > .ui-field:only-child, .bloc-corps > .champ:only-child { display: flex; flex-direction: row; align-items: center; gap: var(--espace-3); } .bloc-corps > .ui-field:only-child > .ui-label, .bloc-corps > .champ:only-child > .champ-tete { margin: 0; white-space: nowrap; } .bloc-corps > .ligne-statut:only-child { padding: 0; } /* L'espace entre deux champs appartient aux champs, pas a leur boite, qu'un gabarit peut nommer autrement. En flex, gap et marge d'un item s'additionnent, d'ou la limitation aux freres directs. */ .ui-field + .ui-field, .ui-field + .ui-rangee, .ui-field + .btn, .ui-field + .ui-form-actions, .ui-fieldset + .ui-field, .ui-field + .ui-fieldset { margin-top: var(--espace-4); } /* L'aide commente le champ au-dessus d'elle : elle lui reste collee, sans quoi elle se lit comme l'introduction du champ d'en dessous. */ .ui-aide + .btn, .ui-aide + .ui-rangee { margin-top: var(--espace-3); } /* Casse normale et couleur du texte : les capitales suppriment les jambages, qui sont les reperes de lecture, et un libelle long devient un mur. Le poids suffit a distinguer un libelle de sa valeur. */ .ui-label { font-size: var(--t-petit); font-weight: var(--g-fort); color: var(--texte); } /* L'asterisque se cale en exposant, pas sur la ligne de base : c'est la forme que l'oeil attend d'une marque d'obligation. */ .ui-label .ui-requis { color: var(--erreur); margin-left: 2px; font-size: .85em; vertical-align: super; line-height: 0; } /* Largeur maximale par defaut : un controle dix fois plus large que sa valeur casse le lien entre l'etiquette et la donnee. 34rem vaut environ 545 px, la longueur confortable d'une ligne de saisie. Le « width: 100% » reste, il fait retrecir le controle sur un ecran etroit. */ .ui-champ { width: 100%; max-width: 34rem; /* Meme hauteur que .btn, qu'il cotoie sur une ligne de formulaire. Elle absorbe aussi la bascule de taille de texte a 561 px, qui ferait sinon changer le champ de gabarit. textarea.ui-champ la reprend en auto. */ height: var(--h-ctrl); min-height: 0; padding: 0 14px; /* Le contour qui dit ou est le champ : --trait n'y rendrait que 1,32:1, pour un seuil de 3 exige d'un element d'interface. Voir --bord-controle. */ border: 1px solid var(--bord-controle); border-radius: var(--rayon-petit); background: var(--carte); color: var(--texte); font-family: inherit; /* 16 px sur mobile : en dessous, iOS zoome au focus et le formulaire devient inutilisable sur telephone. */ font-size: 16px; line-height: 1.3; transition: border-color var(--transition), box-shadow var(--transition); } @media (min-width: 561px) { .ui-champ { font-size: var(--t-texte); } } /* Focus dessiné dans la boîte : un anneau extérieur mordait sur le label suivant. */ .ui-champ:focus, .ui-champ:focus-visible { outline: none; border-color: var(--focus); box-shadow: inset 0 0 0 1px var(--focus); } .ui-champ::placeholder { color: var(--doux); } /* Un champ desactive se lit lui aussi : vraie paire de couleurs, jamais opacity. Aucun etat du produit ne se signale par opacity. La paire est celle de .btn:disabled, --doux sur --fond a 5,83:1, et le contour garde --bord-controle : sans contour, ce n'est plus un champ. [data-verrouille] partage la meme paire : un champ readonly, comme le slug verrouille apres le passage en direct, ne doit pas rendre actif. */ .ui-champ:disabled, .ui-champ[data-verrouille] { background: var(--fond); border-color: var(--bord-controle); color: var(--doux); cursor: not-allowed; } /* Un champ desactive garde un texte de substitution lisible. */ .ui-champ:disabled::placeholder, .ui-champ[data-verrouille]::placeholder { color: var(--doux); } /* La seule exception a la hauteur de controle : une zone multiligne se mesure en lignes. Elle reprend height:auto et retrouve un plancher. */ textarea.ui-champ { height: auto; min-height: 110px; padding: 12px 14px; resize: vertical; } /* Le chevron du select : SVG en data URI, trait en currentColor pour suivre l'accent du tenant. */ .ui-select { appearance: none; -webkit-appearance: none; cursor: pointer; padding-right: 38px; color: var(--texte); background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'/%3e%3c/svg%3e"); background-repeat: no-repeat; background-position: right 13px center; background-size: 17px; } .ui-aide { font-size: var(--t-mini); color: var(--doux); } .ui-erreur { font-size: var(--t-petit); color: var(--erreur); font-weight: var(--g-fort); } .ui-field.is-erreur .ui-champ { border-color: var(--erreur); } .ui-field.is-erreur .ui-champ:focus { border-color: var(--erreur); box-shadow: inset 0 0 0 1px var(--erreur); } /* Case a cocher et radio : la zone cliquable couvre tout le libelle. */ /* Pas de min-height : sur une ligne, la cible tactile de 48px ne laissait que du vide clicable. */ .ui-case { display: flex; align-items: center; gap: var(--espace-3); cursor: pointer; } /* La coche est blanche par decision du produit, jamais par « accent-color » : celui-ci ne pilote que le fond, et le navigateur choisit seul la couleur de la coche d'apres la luminosite. Un tenant a l'accent clair la ferait basculer au noir, sous le seuil de 3 exige d'un element d'interface. Elle est tracee en deux bords d'un pseudo-element tourne a 45 degres : rien a charger, et elle suit la taille de la case. */ .ui-case input { appearance: none; -webkit-appearance: none; position: relative; width: 20px; height: 20px; margin: 2px 0 0; flex: 0 0 auto; /* Contour de controle : avec --trait la case decochee ne rendrait que 1,32:1 sur la carte, pour un seuil de 3. */ border: 1px solid var(--bord-controle); background: var(--carte); cursor: pointer; transition: background-color var(--transition), border-color var(--transition); } .ui-case input[type="checkbox"] { border-radius: 5px; } .ui-case input[type="radio"] { border-radius: 50%; } .ui-case input:checked { background: var(--action); border-color: var(--action); } .ui-case input[type="checkbox"]:checked::after { content: ''; position: absolute; left: 6px; top: 2px; width: 5px; height: 10px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg); } /* Le radio coche porte un disque plein, forme que l'oeil attend d'un choix unique, et qui reste lisible a 20 px la ou une coche se brouille. */ .ui-case input[type="radio"]:checked::after { content: ''; position: absolute; inset: 5px; border-radius: 50%; background: #fff; } /* Meme paire de couleurs que les autres etats desactives, jamais opacity : une case delavee garde l'air d'un controle actif a moitie peint. */ .ui-case input:disabled { background: var(--fond); border-color: var(--bord-controle); cursor: not-allowed; } .ui-case input:disabled:checked::after { border-color: var(--doux); } .ui-case input[type="radio"]:disabled:checked::after { background: var(--doux); } .ui-case:has(input:disabled) { cursor: not-allowed; color: var(--doux); } /* L'erreur d'une case s'aligne sur le texte de la case : le retrait vaut la case (20 px) plus le gap de la rangee (--espace-3). */ .ui-field:has(> .ui-case) > .ui-erreur { margin-left: calc(20px + var(--espace-3)); } /* L'aide d'une case est un point d'info au survol : affichee en permanence elle flotte sans lien avec la case. Le texte reste lu par les lecteurs d'ecran via .ui-sr et aria-describedby. */ .ui-case-info { flex: 0 0 auto; width: 16px; height: 16px; margin-top: 2px; border-radius: 50%; background-color: var(--doux); -webkit-mask: var(--ic-info) center / 16px 16px no-repeat; mask: var(--ic-info) center / 16px 16px no-repeat; cursor: help; } /* ---- Selecteur de couleur ---- La hauteur de 44 px aligne la pastille sur le champ voisin et sur la cible tactile du kit ; sans regle, le navigateur lui donne sa taille native. */ .ui-pastille { appearance: none; -webkit-appearance: none; inline-size: 44px; block-size: 44px; padding: 2px; /* Contour de controle, pas filet : avec --trait il ne rend que 1,32:1 et une pastille de couleur claire se fond dans la carte. */ border: 1px solid var(--bord-controle); border-radius: var(--rayon-petit); background: var(--carte); cursor: pointer; flex: 0 0 auto; } /* Le pave de couleur est un element interne du navigateur : sans ces regles il garde son cadre natif et ignore le rayon du controle. */ .ui-pastille::-webkit-color-swatch-wrapper { padding: 0; } .ui-pastille::-webkit-color-swatch, .ui-pastille::-moz-color-swatch { border: 0; border-radius: calc(var(--rayon-petit) - 3px); } /* Desactive par une paire de couleurs, jamais par opacite : delavee, la bordure tombe a 1,13:1 pour un seuil de 3, et la pastille devient un carre de couleur flottant. Seuls le contour et le curseur disent l'etat. */ .ui-pastille:disabled { border-color: var(--bord-controle); background: var(--fond); cursor: not-allowed; } /* Un code hexadecimal a sept caracteres : largeur propre et chasse fixe. */ .ui-champ--code { max-width: 9rem; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; } /* La taille n'est pas touchee, elle herite deja juste. */ .ui-contenu code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; } /* Le libelle de la case, rendu par kit/champ.html.twig en dans le label. Il prend la taille du corps de texte : sans regle il herite du 16 px du body et se rend plus gros que le .ui-label qui le surplombe. */ .ui-case > span { font-size: var(--t-texte); line-height: 1.4; } .ui-form-ligne { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--espace-4); } .ui-form-ligne > .ui-field { min-width: 0; } @media (min-width: 721px) { .ui-form-ligne { grid-template-columns: repeat(2, minmax(0, 1fr)); } } /* Le nombre de colonnes se declare : .ui-form-ligne en calcule deux, et un gabarit qui lui confie trois champs voit le troisieme retomber seul, sans qu'aucune erreur ne le signale. La colonne unique sous 721 px reste celle du composant, une rangee a trois etant illisible sur telephone. */ @media (min-width: 721px) { .ui-form-ligne--3 { grid-template-columns: repeat(3, 1fr); } } /* Une rangee de champs courts suit son contenu, et le vide se regroupe a droite. En flex et non en colonnes egales : des « 1fr » repartiraient le vide entre les champs, donnant a un zoom le meme tiers de rangee qu'a une latitude. Sous 721 px la rangee redevient une colonne. */ .ui-form-ligne--courts { display: grid; grid-template-columns: 1fr; gap: var(--espace-4); } @media (min-width: 721px) { .ui-form-ligne--courts { display: flex; flex-wrap: wrap; align-items: flex-start; } .ui-form-ligne--courts > .ui-field { flex: 0 0 auto; } } /* Une rangee ne remet pas l'espace vertical entre ses propres champs : « .ui-field + .ui-field » pose une marge juste dans une pile et fausse dans une rangee, ou elle desaligne les champs. Le gap porte deja les deux axes. */ .ui-form-ligne > .ui-field + .ui-field, .ui-form-ligne--courts > .ui-field + .ui-field, /* .ui-grille est dans le meme cas : elle aussi pose ses .ui-field cote a cote et porte son propre gap. */ .ui-grille > .ui-field + .ui-field, .rangee-filtres > .ui-field + .ui-field, :is(.bloc-corps, .carte, .feuille-corps) > :is(.ui-field, .ui-fieldset) + :is(.ui-field, .ui-fieldset, .ui-rangee, .btn, .ui-form-actions) { margin-top: 0; } /* Un formulaire non plus : .ui-form est un flex, et en flex le gap s'ADDITIONNE a la marge de l'item, il n'y a pas de margin collapsing. Deux champs freres directs se separeraient sinon du double. */ .ui-form > .ui-field + .ui-field { margin-top: 0; } /* ---- Largeur par la nature de la donnee ---- Un controle dix fois plus large que sa valeur rompt le lien entre l'etiquette et la donnee. Sur le conteneur et par :has(), et non par une classe : Kit::champ() ecrit « class="ui-champ" » en dur, y glisser une classe produirait deux attributs class sur le meme controle. Ces selecteurs LISENT le type deja ecrit, ils ne changent aucun octet du HTML rendu. .ui-champ--moyen reste disponible quand le gabarit veut une largeur que le type ne dit pas. */ .ui-field:has(> input[type="number"]) > .ui-champ { max-width: 7rem; } .ui-field:has(> input[inputmode="numeric"]) > .ui-champ { max-width: 9rem; } .ui-field:has(> input[inputmode="decimal"]) > .ui-champ { max-width: 11rem; } /* Une date et une heure rendent 135 px de texte dans un controle natif qui porte en plus son calendrier : 15rem laissent la place aux deux. */ .ui-field:has(> input[type="datetime-local"]) > .ui-champ { max-width: 15rem; } .ui-field:has(> input[type="date"]) > .ui-champ { max-width: 11rem; } .ui-field:has(> input[type="time"]) > .ui-champ { max-width: 9rem; } /* « 06 12 34 56 78 » mesure 103 px dans la police du produit. */ .ui-field:has(> input[type="tel"]) > .ui-champ { max-width: 13rem; } /* Un menu prend la largeur de sa plus longue option, pas celle de la page. « fit-content » laisse le navigateur mesurer les options lui-meme, ce qu'aucune valeur en dur ne sait faire : le menu suit le contenu reel du tenant. Le plancher de 12rem evite qu'un menu a deux options courtes (« Oui » / « Non ») ne devienne une cible minuscule. */ .ui-field:has(> select) > .ui-champ { width: fit-content; max-width: 100%; } /* Le plancher ne vaut que la ou il y a la place de le tenir : plus large que la colonne qui le porte, il ne protege plus la cible, il fabrique un debordement. Sous 721 px, « fit-content » et « max-width: 100% » suffisent. */ @media (min-width: 721px) { .ui-field:has(> select) > .ui-champ { min-width: 12rem; } /* Sauf dans une barre de filtres, ou la grille donne la mesure : les colonnes de .ui-filtres sont plus etroites que le plancher, et un menu qui depasse sa colonne chevauche son voisin. */ .ui-filtres .ui-field:has(> select) > .ui-champ { min-width: 0; width: 100%; } } /* Un texte long s'aligne sur la colonne, il ne fabrique pas un second bord droit dans le meme formulaire. Dans une rangee il occupe la largeur entiere : c'est le seul champ dont la valeur grandit avec ce qu'on ecrit. */ .ui-form-ligne > .ui-field:has(> textarea), .ui-form-ligne--3 > .ui-field:has(> textarea) { grid-column: 1 / -1; } /* Variante asymetrique, pour une ligne dont le premier bloc est plus large que son champ texte : un depot d'image et son texte alternatif. Le repli a une colonne sur mobile est conserve. */ .ui-form-ligne--asymetrique { grid-template-columns: 1fr; } @media (min-width: 721px) { .ui-form-ligne--asymetrique { grid-template-columns: 2fr 1fr; } } /* Le bouton principal est dernier dans le DOM (ordre de tabulation naturel) et a droite en desktop. Sur mobile la barre s'empile, principal en haut. */ .ui-form-actions { display: flex; flex-wrap: wrap; gap: var(--espace-3); justify-content: flex-end; margin-top: var(--espace-4); } /* L'ordre d'empilement ne depend pas de l'ordre d'ecriture du gabarit : la regle porte sur la VARIANTE et non sur la position, un column-reverse descendrait le primaire ecrit en premier. */ @media (max-width: 560px) { .ui-form-actions { flex-direction: column; } .ui-form-actions .btn--primaire { order: -1; } .ui-form-actions .btn { width: 100%; } } /* Un bouton nu dans un .ui-form ne fait pas la largeur de la colonne : .ui-form est un flex en colonne, un