/* ============================================================ FRONT PUBLIC DES ÉVÉNEMENTS — ce qui reste propre au module Bloc T6b, réduit au TRANSPORT R9 (14/08). Cette feuille est la DERNIÈRE de la cascade : elle ne pose plus que ce qu'aucun composant du registre ne porte. CE QU'ELLE PORTAIT ENCORE HIER, ET QUI EST PARTI AU REGISTRE — 810 lignes devenues ce fichier. Les écrans du module ont été montés sur les maquettes gatées du 14/08, et chaque objet qu'elles emploient existe désormais comme COMPOSANT, transporté à l'octet dans `assets/ds/` : la palette des 8 tons de type ............ `ds/event-tone.css` le panneau, la grille, la pastille, la mini-grille du pouce, la légende ...... `ds/calendar.css` la commande segmentée, les chips ......... `ds/agenda-toolbar.css` la carte d'agenda et ses groupes de mois . `ds/event-card.css` le bandeau d'écran, les deux panneaux de la fiche, la prose, les retours ....... `ds/event-page.css` les bandes, conteneurs et grilles ........ `ds/layout.css` la couture au picto vélo, la crête ....... `ds/crest.css`, `ds/section-separator.css` La règle qui commande ce fichier n'a pas changé : IL NE REDÉFINIT AUCUN COMPOSANT DU REGISTRE. Une retouche se fait au registre, puis se re-transporte — `S-t3-transports` compare les condensats dans les deux sens, et rougit aussi sur une famille transportée réécrite ici. Tout ce qui suit est écrit sur les tokens. Aucune valeur de couleur, aucune taille de police, aucun rayon en dur : si la DA bouge, ces écrans suivent sans qu'on les édite. ============================================================ */ /* ============================================================ 1 · LES TITRES ET LES RESPIRATIONS DES ÉCRANS SANS MAQUETTE « Mes inscriptions » et la 404 du module n'ont pas de maquette à eux : ils héritent des pièces des trois écrans gatés (bande, conteneur, cartes, lettrine). Ce qui suit est le peu qui leur reste en propre. ============================================================ */ .lcdi-evenements__section-titre { margin: 0 0 var(--rythme-titre); font-family: var(--font-display); font-size: var(--type-h5); font-weight: var(--weight-title); color: var(--text-strong); } .lcdi-evenements__bloc { margin: 0 0 var(--rythme-section); } .lcdi-evenements__bloc:last-of-type { margin-bottom: 0; } .lcdi-evenements__retour { margin: var(--space-6) 0 0; } /* Le titre d'une tranche de la vue « Tout » : il sépare ce qui vient de ce qui est passé, et il a besoin d'air au-dessus, pas en dessous. */ .lcdi-evenements__tranche { margin: var(--rythme-section) 0 var(--rythme-titre); font-family: var(--font-display); font-size: var(--type-h5); font-weight: var(--weight-title); color: var(--text-strong); } /* L'encart d'un agenda ou d'un mois vide : il précède le panneau, il ne le remplace pas — une grille de trente cases blanches n'est pas une réponse. */ .lcdi-evenements__vide { margin: 0 0 var(--rythme-bloc); } /* ============================================================ 2 · LES TONS D'ÉTAT DE L'ENCART DE SOUMISSION L'encart vient du registre (`ds/notice.css`) et fournit la forme ; le TON fournit la couleur, prise aux rôles d'état du système. Les voiles sont à 8-10 % : le texte reste sur un fond quasi blanc, donc au-dessus de 9:1. C'est un usage CONTEXTUEL du composant, jamais sa redéfinition — le motif est ancré sur une classe du module. ============================================================ */ .lcdi-evenements__message { margin: 0; } .lcdi-evenements__message--succes, .lcdi-evenements__message--valide { border-color: var(--state-success); background: var(--state-success-veil); } .lcdi-evenements__message--erreur, .lcdi-evenements__message--alerte { border-color: var(--state-danger); background: var(--state-danger-veil); } .lcdi-evenements__message--attente { border-color: var(--state-warning-text); background: var(--state-warning-veil); } .lcdi-evenements__message--info { border-color: var(--state-info); background: var(--state-info-veil); } /* ============================================================ 3 · LE FORMULAIRE D'INSCRIPTION, DANS LE PANNEAU DE DÉCISION Le formulaire est celui du registre (`ds/forms.css`, `.lcdi-form` pose déjà sa grille). Il ne reste ici que le piège et la ligne du geste. ============================================================ */ .lcdi-evenements__actions { margin: 0; } /* LE PIÈGE. Hors de l'écran, jamais `display: none` : certains robots ignorent précisément les champs masqués de cette façon, et le piège ne se refermerait plus. Il reste donc dans le flux, à un endroit que personne ne regarde. */ .lcdi-evenements__piege { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; } /* ============================================================ 4 · LES LIGNES DE « MES INSCRIPTIONS » ET LE LIEN DE COMPTE RENDU ============================================================ */ /* Le lien vers le compte rendu d'un rendez-vous passé (G1), dans une carte d'agenda. Il reste un LIEN À PART, hors de la zone de clic de la carte : il mène ailleurs qu'elle. Son cran de z-index vient du composant. */ .lcdi-evenements__retour-lien { margin: 0; font-size: var(--type-fine); } /* Le lien du titre porte SA classe, il n'est pas atteint par la classe de son parent : `.lcdi-evenements__item-titre a` pèserait (0,1,1) et retomberait dans le défaut R1. Un élément qu'on peint, on le nomme. */ .lcdi-evenements__item-titre { font-size: var(--type-h5); } .lcdi-evenements__meta { margin: 0; display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-3); font-size: var(--type-caption); color: var(--text-body); } .lcdi-evenements__lieu::before { content: "· "; } .lcdi-evenements__badges { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); } .lcdi-evenements__gestes { margin: 0; display: flex; flex-wrap: wrap; gap: var(--space-3); } .lcdi-evenements__gestes form { margin: 0; } .lcdi-evenements__inscriptions { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--gap-grid-tight); } .lcdi-evenements__inscription { height: auto; } .lcdi-evenements__annuler { margin: 0; } .lcdi-evenements__historique { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-3); } .lcdi-evenements__historique li { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-2) var(--space-3); padding-bottom: var(--space-3); border-bottom: 1px solid var(--border-soft); } .lcdi-evenements__historique-date { font-size: var(--type-fine); color: var(--text-body); } /* ============================================================ 5 · LE GREFFON DE L'ACCUEIL DE L'ESPACE (provisoire, T5) Rendu DANS une page du thème, lui : il ne pose donc aucune plomberie de document et ne touche à rien d'autre que son propre bloc. ============================================================ */ .lcdi-evt-greffon { margin: var(--rythme-bloc) 0 0; } .lcdi-evt-greffon__titre { margin: 0 0 var(--rythme-titre); font-family: var(--font-display); font-size: var(--type-h5); font-weight: var(--weight-title); color: var(--text-strong); } .lcdi-evt-greffon__liste { list-style: none; margin: 0 0 var(--space-4); padding: 0; display: grid; gap: var(--space-3); } .lcdi-evt-greffon__liste li { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-2) var(--space-3); } .lcdi-evt-greffon__date { font-size: var(--type-fine); color: var(--text-body); } .lcdi-evt-greffon__vide { margin: 0; font-size: var(--type-caption); } .lcdi-evt-greffon__geste { margin: 0; } /* ============================================================ 6 · ÉLARGISSEMENTS — le téléphone est la règle, ceci est l'exception ============================================================ */ /* Sur téléphone, le geste principal prend toute la largeur : le pouce ne vise pas un bouton de 140 px calé à gauche. */ @media (max-width: 599px) { .lcdi-evenements__gestes > .lcdi-btn { width: 100%; justify-content: center; } } /* ============================================================ 7 · LE PARTAGE — en pied du panneau de repères (lot 7, 25/08) IL EST DISCRET PAR CONSTRUCTION, et c'est la contrainte du lot : sur la même fiche vit le bouton d'inscription, qui est le geste que la page existe pour proposer. Le partage emprunte donc la VOIX 2 du système (`--ghost`, celle de l'exploration) dans sa taille compacte (`--sm`), sous un filet, derrière un sur-titre de la taille d'un badge. La loi du design system s'applique telle quelle : l'action avance, l'exploration recule. AUCUN COMPOSANT DU REGISTRE N'EST REDÉFINI ICI. Les quatre gestes sont des `.lcdi-btn` du registre, servis tels quels ; ce fichier ne pose que le bloc qui les contient et la règle d'affichage qui décide lequel paraît. LA BASCULE EST PEINTE, JAMAIS JOUÉE. Trois états possibles, un seul rendu à la fois, et c'est une CLASSE SUR `` qui tranche (`Partage::marqueur()`, une ligne en tête de document) : sans classe .................. WhatsApp + Facebook, deux liens qui fonctionnent même sans script ; `.lcdi-partage-copie` ........ « Copier le lien » rejoint les deux autres, posée par le script lui-même quand il vit ; `.lcdi-partage-natif` ........ le bouton unique remplace les trois. Faire ce choix depuis le script différé le rendrait VISIBLE : un téléphone afficherait les boutons du bureau, puis les remplacerait. ============================================================ */ .lcdi-evt-partage { margin: var(--space-5) 0 0; padding: var(--space-4) 0 0; border-top: 1px solid var(--border-soft); } /* Même graisse et même échelle que « Les repères » juste au-dessus : c'est le second sur-titre du même panneau, pas un titre de section. */ .lcdi-evt-partage__titre { margin: 0 0 var(--space-3); font-size: var(--type-badge); font-weight: var(--weight-strong); text-transform: uppercase; letter-spacing: var(--ls-badge); color: var(--text-body); } .lcdi-evt-partage__gestes, .lcdi-evt-partage__repli { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); min-width: 0; } /* LA LIGNE DE RETOUR RÉSERVE SA HAUTEUR, vide comprise. Sans `min-height`, l'arrivée de « Lien copié » pousserait le panneau d'une ligne au moment précis où l'on vient de cliquer — un écran qui bouge sous le doigt fait douter du geste qu'on vient de faire. */ .lcdi-evt-partage__retour { margin: var(--space-2) 0 0; min-height: calc(var(--type-caption) * var(--lh-body)); font-size: var(--type-caption); color: var(--state-success); } /* --- Les trois états, et rien d'autre --------------------------------- */ .lcdi-evt-partage__natif { display: none; } .lcdi-evt-partage__copier { display: none; } .lcdi-partage-copie .lcdi-evt-partage__copier { display: inline-flex; } .lcdi-partage-natif .lcdi-evt-partage__natif { display: inline-flex; } .lcdi-partage-natif .lcdi-evt-partage__repli { display: none; }