/* ============================================================ BARRE D'OUTILS D'AGENDA — commande segmentée, chips de filtre, légende NOUVEAU COMPOSANT (bloc T6b-R8, 13/08, maquettes des écrans événements). MOTIF DE SA NAISSANCE, et il est mesurable. Les deux vues de l'agenda (calendrier et liste) posent EXACTEMENT les mêmes commandes : la bascule de vue, le sélecteur d'époque, le filtre par type. La couche de page du module les écrivait deux fois sous deux noms (`__vues` / `__epoques` d'un côté, `__filtres` de l'autre) avec la même recette copiée. Trois emplois réels dès ce bloc — bascule de vue (2 écrans), époque (liste), filtre de type (2 écrans) — la règle K4 du registre est atteinte par l'usage. CE QUE LE COMPOSANT APPORTE PAR RAPPORT À LA COUCHE DE PAGE 0.7.2, et c'est le verdict du gate (« composé, pas empilé ») : 1. la commande segmentée porte un SOCLE (surface de page, filet, pastille pleine sur l'élément courant) au lieu de trois liens alignés ; 2. le chip de filtre porte la PUCE DE SON TON : la couleur qui code la grille est la même que celle qui code le filtre, on n'apprend qu'une fois ; 3. l'état courant se dit par `aria-current`, jamais par une classe supplémentaire — un état porté par l'attribut d'accessibilité ne peut pas dériver de ce que le lecteur d'écran annonce. ÉTATS POSSÉDÉS (leçon R1 du gate T6b, reprise ici sans discussion) : chaque élément interactif écrit SES `:hover`, `:focus-visible` et son état courant au poids d'une classe plus une pseudo-classe ou un attribut. Le thème peint `a:hover, a:focus` en `--link-hover`, au poids (0,1,1) : tout ce qui pèse moins se fait repeindre au clavier. Mesuré au bloc T6b : 4,01:1 contre 18,88:1 au repos. ============================================================ */ /* --- La barre elle-même : une ligne, deux groupes ----------------------- */ .lcdi-agenda-barre { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-4); min-width: 0; } .lcdi-agenda-barre__groupe { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); min-width: 0; } /* ============================================================ COMMANDE SEGMENTÉE — « Liste / Calendrier », « À venir / Passés / Tout » Des LIENS, pas un `` natif ne peut porter ni puce ni glyphe de façon fiable. Le repli est natif : `` est focalisable, s'ouvre à Entrée comme à l'Espace, et se referme en navigant. Aucune bibliothèque, aucun script, aucun rôle ARIA inventé. LA PUCE REPREND LE TON DU TYPE (`event-tone.css`), comme sur la grille : on n'apprend la couleur qu'une fois. Elle est décorative au sens strict — le nom du type est écrit à côté, en toutes lettres — donc la couleur n'est jamais le seul porteur de l'information (WCAG 1.4.1). Seuil applicable : celui du non textuel, 3:1 ; le plus clair des huit tons mesure 3,54:1 sur blanc. ============================================================ */ .lcdi-filtre { position: relative; display: inline-block; max-width: 100%; min-width: 0; } /* --- LA TÊTE : l'étiquette, la valeur courante, le chevron -------------- */ .lcdi-filtre__tete { display: inline-flex; align-items: center; gap: var(--space-2); padding: var(--space-2) var(--space-3); background: var(--surface-raised); border: 1px solid var(--border-soft); border-radius: var(--radius-arc); color: var(--text-body); font-size: var(--type-fine); line-height: var(--lh-flat); cursor: pointer; /* Le marqueur natif du `` s'efface DES DEUX FAÇONS connues : le `list-style` (standard) et le pseudo-élément WebKit, qui l'ignore. */ list-style: none; transition: background-color var(--t-quick) var(--ease-brand), border-color var(--t-quick) var(--ease-brand); } .lcdi-filtre__tete::-webkit-details-marker { display: none; } .lcdi-filtre__tete:hover, .lcdi-filtre__tete:focus { border-color: var(--border-accent); background: var(--veil-accent); } .lcdi-filtre__tete:focus-visible { box-shadow: var(--focus-ring); outline: none; } .lcdi-filtre[open] > .lcdi-filtre__tete { border-color: var(--accent-ink); } .lcdi-filtre__etiquette { font-weight: var(--weight-strong); } .lcdi-filtre__valeur { display: inline-flex; align-items: center; gap: var(--space-2); min-width: 0; color: var(--text-strong); font-weight: var(--weight-medium); } /* LE CHEVRON EST DESSINÉ, PAS IMPORTÉ. Le jeu de pictogrammes du module est celui des maquettes gatées, extrait à l'octet ; y ajouter un trace neuf ferait entrer un dessin que le gate n'a pas vu. Deux filets et une rotation suffisent à dire « ça s'ouvre », et le sens tourne à l'ouverture. */ .lcdi-filtre__tete::after { content: ""; width: .45em; height: .45em; flex: none; margin-left: var(--space-1); border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: translateY(-.15em) rotate(45deg); transition: transform var(--t-quick) var(--ease-brand); } .lcdi-filtre[open] > .lcdi-filtre__tete::after { transform: translateY(.1em) rotate(-135deg); } /* --- LE MENU : posé PAR-DESSUS, jamais poussant la page ------------------ Un menu qui pousse le contenu déplacerait la grille du calendrier à chaque ouverture, et la case qu'on visait ne serait plus sous le doigt. `max-height` + défilement propre : sept types tiennent, quinze tiendraient aussi sans sortir de l'écran. */ .lcdi-filtre__menu { position: absolute; z-index: 20; top: calc(100% + var(--space-2)); left: 0; min-width: 100%; width: max-content; max-width: min(22rem, 78vw); max-height: 60vh; overflow-y: auto; margin: 0; padding: var(--space-1); list-style: none; background: var(--surface-raised); border: 1px solid var(--border-soft); border-radius: var(--radius-m); box-shadow: var(--shadow-soft); } .lcdi-filtre__option { display: flex; align-items: center; gap: var(--space-2); padding: var(--space-2) var(--space-3); border-radius: var(--radius-s); color: var(--text-body); font-size: var(--type-fine); line-height: var(--lh-snug); text-decoration: none; transition: background-color var(--t-quick) var(--ease-brand), color var(--t-quick) var(--ease-brand); } /* ÉTATS POSSÉDÉS (leçon R1) : le thème peint `a:hover, a:focus` au poids (0,1,1) ; ces règles pèsent autant et arrivent après. */ .lcdi-filtre__option:hover, .lcdi-filtre__option:focus { background: var(--veil-accent); color: var(--text-strong); } .lcdi-filtre__option:focus-visible { box-shadow: var(--focus-ring); outline: none; } /* L'OPTION COURANTE NE SE DIT JAMAIS QUE PAR SA COULEUR (WCAG 1.4.1) : elle porte `aria-current`, un fond de voile ET une graisse. `--brand-blanc` n'entre pas ici : sur `--veil-accent`, `--accent-ink` mesure 5,30:1 — le même couple que la commande segmentée au repos. */ .lcdi-filtre__option[aria-current], .lcdi-filtre__option[aria-current]:hover, .lcdi-filtre__option[aria-current]:focus { background: var(--veil-accent); color: var(--accent-ink); font-weight: var(--weight-strong); } .lcdi-filtre__puce { width: var(--space-3); height: var(--space-3); flex: none; border-radius: var(--radius-round); background: var(--evt-ton, var(--accent)); } /* « Tous » n'a pas de ton : sa puce devient un anneau, pour que la colonne des puces garde son alignement sans mentir sur une couleur. */ .lcdi-filtre__puce--tous { background: none; box-shadow: inset 0 0 0 2px var(--border-strong); } /* L'ÉMOJI DU TYPE — acquis du bloc R8b (décision D5 du bureau), CONSERVÉ. Il vivait sur le chip ; il vit désormais sur l'option, qui a bien plus de place qu'une pastille de rangée — un menu se déroule en hauteur. Il reste `aria-hidden` (le nom du type est écrit juste devant), en `line-height: 1` (un glyphe d'émoji porte des jambages plus hauts que la police et pousserait la ligne) et `flex: none` (sinon il s'écraserait avant le texte). */ .lcdi-filtre__emoji { flex: none; margin-left: calc(var(--space-2) * -.5); font-size: 1em; line-height: 1; } /* ============================================================ LA LÉGENDE — ce que ce mois-ci contient vraiment ACQUIS 0.7.2 CONSERVÉ : elle ne nomme QUE les types réellement posés sur le mois affiché. Ce n'est pas une barre de filtres — le filtre vit au-dessus, il propose tout le vocabulaire ; la légende, elle, décrit ce qui est sous les yeux. Elle porte en plus le COMPTE par type : sans lui, deux objets diraient exactement la même chose à deux endroits de la même page. ============================================================ */ .lcdi-agenda-legende { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-5); margin: 0; padding: 0; list-style: none; } .lcdi-agenda-legende__titre { margin: 0; font-size: var(--type-badge); font-weight: var(--weight-strong); text-transform: uppercase; letter-spacing: var(--ls-badge); color: var(--text-body); } .lcdi-agenda-legende__item { display: inline-flex; align-items: baseline; gap: var(--space-2); font-size: var(--type-fine); color: var(--text-body); } .lcdi-agenda-legende__puce { align-self: center; width: var(--space-3); height: var(--space-3); flex: none; border-radius: var(--radius-round); background: var(--evt-ton, var(--accent)); } .lcdi-agenda-legende__compte { font-variant-numeric: var(--numeric-data); font-weight: var(--weight-strong); color: var(--text-strong); } @media (max-width: 767px) { /* Au pouce, les deux groupes prennent chacun leur ligne : un agenda se consulte d'une main, pas en dépliant une barre d'outils. */ .lcdi-agenda-barre { flex-direction: column; align-items: stretch; gap: var(--space-3); } .lcdi-agenda-barre__groupe { justify-content: flex-start; } /* LA TÊTE DU FILTRE PREND LA LIGNE ENTIÈRE. Le déroulant remplace précisément un défilement horizontal : le laisser calé à gauche sur 180 px rendrait une cible de doigt étroite au milieu d'un vide. Une commande unique sur une ligne se vise sans regarder. */ .lcdi-filtre, .lcdi-filtre__tete { display: flex; width: 100%; } .lcdi-filtre__tete { justify-content: flex-start; } /* Le chevron va au bout de la ligne : c'est le bord de la commande qui dit où appuyer. */ .lcdi-filtre__tete::after { margin-left: auto; } }