/* @grammaire v2 ══════════════════════════════════════════════════════════════════════════ LA COQUILLE DU MINISITE EVENEMENT Elle remplace la pile de bandes pleine largeur posees a meme le plateau gris par le SQUELETTE DE FICHE du site : une colonne d'appui a gauche, une carte blanche a droite, et le rythme des sections a l'interieur de cette carte. ── POURQUOI CE CHANGEMENT DE FORME ── Releve du 2026-09-01 sur `/evenements/2026-angers`, a 1440 px et a 390 px : · aucune colonne. Neuf sections pleine largeur s'empilaient sur le plateau, chacune posant sa propre carte, ses propres gouttieres et son propre fond. Les bords droits de deux rangees voisines ne tombaient pas au meme pixel (358 pour l'une, 366 pour l'autre) parce que chaque section declarait sa grille ; · rien ne tenait l'ensemble. Le plateau gris ne porte JAMAIS de contenu dans cette grammaire, il porte des cartes — c'est le defaut n°2 releve sur la fiche CESU, et c'est le meme ici ; · 5 938 px de hauteur sur telephone, dont pres d'un tiers en fonds alternes qui ne signifiaient rien ; · la barre d'onglets et son bouton rouge coupaient la page en deux, et l'engagement — s'inscrire — n'existait qu'a cet endroit-la. ── CE QUE LA COQUILLE POSE ── 1. LE RAIL EST A GAUCHE, ET IL PORTE L'ENGAGEMENT. Identite de l'evenement, etat des inscriptions, bouton, menu du minisite, reperes. Il est PREMIER dans le balisage, pas seulement a l'ecran : dans une grille, l'ordre du source est l'ordre de lecture. Meme choix, et meme raison, que la fiche CESU dont cette coquille reprend le squelette. 2. LE CONTENU EST UNE CARTE BLANCHE, et ses sections se separent par un filet plutot que par un changement de fond. Un filet coute une ligne, un fond coute une bande. 3. SUR TELEPHONE, LE RAIL S'EMPILE AU-DESSUS et le menu se replie derriere un declencheur qui porte le nom de la page courante. Ce qui reste visible est ce qui sert : l'identite, l'etat, le bouton. ══════════════════════════════════════════════════════════════════════════ */ /* ══════════════════════════════════════════════════════════════ LA GRILLE ══════════════════════════════════════════════════════════════ */ /* Les deux pistes d'`article-single__layout` sont ECHANGEES : le rail prend la premiere. Le squelette du site reste, seule la place de l'appui change. */ @media (width >= 64em) { .minisite-shell__layout { grid-template-columns: 20rem minmax(0, 1fr); } /* ── LES COLONNES SONT PLACEES, PAS DEDUITES DE L'ORDRE ── Le contenu precede desormais le rail dans le BALISAGE, pour que la page s'ouvre dessus sur telephone. Sans placement explicite, le contenu tomberait donc dans la premiere piste — celle de 20 rem — et le rail dans la seconde : la page entiere inversee et illisible au bureau. Le placement est ce qui rend les deux ordres independants : le balisage decide de la pile sur telephone, la grille decide des colonnes au bureau, et aucun `order` ne vient dissocier l'ordre de lecture du clavier de ce que l'oeil voit. */ .minisite-shell__layout > .article-sidebar { grid-column: 1; grid-row: 1; } .minisite-shell__layout > .article-single__main { grid-column: 2; grid-row: 1; } } /* ── UN SEUL PAS SEPARE TOUT CE QUI EST EMPILE ── La banniere se detachait du contenu de 32 px au bureau et 52 sur telephone, quand deux cartes du rail sont a 16. Trois declarations s'additionnaient — la marge basse de la banniere, le rembourrage haut du squelette de fiche, et la marge du rail empile — chacune raisonnable seule. L'ecart vient desormais d'ICI seulement, et il vaut le meme `gap` que celui des cartes du rail (`article-sidebar__sticky`). Les deux se lisent comme une seule pile. */ .minisite-shell__layout { padding-top: var(--spacing-md); } /* Sous le palier, le rail est le DERNIER element de la pile depuis que le contenu ouvre la page. Sa marge d'element empile valait zero du temps ou il la fermait — elle se serait ajoutee au rembourrage ci-dessus. En dernier, il n'a plus rien qui le separe du contenu : les deux cartes se touchaient, ce qui les fait lire comme une seule. La valeur est celle qui separe deja deux cartes du rail entre elles, donc toute la pile respire au meme pas. */ @media (width < 64em) { .minisite-rail.article-sidebar--stacked { margin-top: var(--spacing-md); } } /* ── UN SEUL RYTHME, ET IL VIENT DU SEPARATEUR ── La carte posait `gap: var(--rhythm-section)` ET chaque section separee ajoutait `padding-top: var(--rhythm-section)` : les deux s'additionnaient. Mesure du 2026-09-02 : 64 px entre deux sections au bureau, 40 sur telephone, avec le filet flottant au milieu de ce vide. Chaque declaration etait raisonnable seule, et personne ne les avait vues ensemble. Le `gap` tombe a zero. L'ecart vient desormais du SEPARATEUR, et il est symetrique de part et d'autre du filet — c'est la forme que la maquette pose (`margin-top: 24; padding-top: 24; border-top`), et elle se lit mieux qu'un trait perdu au milieu de deux fois plus de blanc. */ .minisite-card { display: flex; flex-direction: column; gap: 0; } /* Sur telephone, la carte perd son rembourrage lateral genereux : a 390 px, 32 px de chaque cote laissent 326 px de colonne de lecture. */ @media (width < 48em) { .minisite-card { padding: var(--spacing-lg) var(--spacing-md); } } /* ── LE FILET PLUTOT QUE LA BANDE ── Chaque section qui suit la premiere se separe par un filet. Un filet coute une ligne, un changement de fond coute une bande. L'ECART EST SYMETRIQUE : autant au-dessus du filet qu'en dessous. Le trait marque alors le milieu de la respiration, au lieu d'etre colle a la section qui suit. */ .minisite-section + .minisite-section { margin-top: var(--spacing-lg); padding-top: var(--spacing-lg); border-top: 1px solid var(--color-border); } /* ── LE RYTHME INTERNE, ET IL VAUT LA MOITIE DU RYTHME ENTRE SECTIONS ── 24 px dans une section, 24 + 24 entre deux : une seule echelle, et la respiration double quand on change de sujet. */ .minisite-section { display: flex; flex-direction: column; gap: var(--spacing-lg); } /* `_section_header` porte `margin-bottom: var(--spacing-lg)` pour les pages qui le posent a meme le plateau, sans conteneur a `gap`. Ici la section EST ce conteneur : les deux s'additionnaient, et l'ecart entre un en-tete et son contenu valait 40 px pour un rythme declare a 16. Meme defaut de double propriete que celui corrige entre les sections, un niveau plus bas. */ .minisite-section > .section-header { margin-bottom: 0; } /* MEME DEFAUT, UN CRAN PLUS BAS : le corps editorial. La section porte deja son `gap`, et son premier bloc y ajoute sa propre marge haute — les deux valent `--spacing-lg`, donc l'ecart valait 48 px pour un rythme declare a 24. Mesure du 2026-09-02 sur `/evenements/2026-angers`, entre « Le theme » et le teaser video, identique a 1440 et a 375 px. `.prose-content > * + *` ne couvre pas ce cas : c'est une regle ENTRE freres, et le coupable est le premier enfant. Le seul reset existant vise `h2:first-child` — un corps qui s'ouvre sur une figure passait a travers. Le `:last-child` est PREVENTIF, et il n'est pas verifiable sur cette page : son corps se termine par un `

`, dont la marge basse est deja nulle. Mais `.prose-content .editor-video` porte `margin: var(--spacing-lg) 0` : un corps qui se TERMINE par une video, une image DAM ou un tableau doublerait au bas exactement comme celui-ci doublait en haut. */ .minisite-section > .prose-content > :first-child { margin-top: 0; } .minisite-section > .prose-content > :last-child { margin-bottom: 0; } /* Deux blocs cote a cote DANS la carte (tarifs / appel, pratique / participer). `minmax(0, 1fr)` et non `1fr` : sans le minimum a zero, un contenu insecable — une URL, un tableau — pousse sa piste et fait deborder la grille. */ .minisite-duo { display: grid; gap: var(--spacing-lg); } /* —— L'ACCROCHE D'UN APPEL EST ECRETEE —— Deux blocs de corps suffisent a poser le sujet, mais un appel bavard etire toute la RANGEE : les cartes etant a hauteur egale, sa voisine se retrouve avec un grand vide sous son texte. Mesure du 2026-09-03 : 448 px pour trois lignes utiles a droite. Trois lignes sur 782 px, la ou il en fallait quatre sur 379 pour en dire autant. Le reste se lit sur la fiche, ou il a la place. Meme parti que la carte de rebond de la grammaire, dont le texte est ecrete a trois lignes pour la meme raison. `-webkit-line-clamp` reste la seule facon d'ecreter un nombre de LIGNES : ni `max-height` ni `text-overflow` ne savent le faire sur plusieurs lignes, et la propriete standard `line-clamp` n'est pas encore servie partout. Le prefixe est donc porte a dessein, pas par oubli. */ .minisite-call__text { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; line-clamp: 3; overflow: hidden; } /* Le corps editorial rend des `

` : leurs marges casseraient l'ecretage, qui compte des lignes dans une seule boite. */ .minisite-call__text.prose-content > * { margin: 0; } /* —— UNE COLONNE, UN APPEL PAR LIGNE —— Ils tenaient sur deux colonnes, ce qui obligeait a EGALISER leurs hauteurs puis a ECRETER leur accroche : a 379 px, une carte n'a la place que de trois lignes, et la voisine se retrouve avec un vide des que l'une parle plus que l'autre. Les deux correctifs ont ete livres, puis retires ici — une colonne unique n'a rien a egaliser. Un appel a contribution n'est pas une vignette de catalogue : c'est une decision a prendre, et il y en a deux ou trois par edition. */ .minisite-calls { display: flex; flex-direction: column; gap: var(--spacing-lg); } @media (width >= 60em) { .minisite-duo { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; } /* ── UN BLOC SEUL PREND LES DEUX PISTES ── Les deux moities d'un duo sont conditionnelles chacune de son cote : les tarifs disparaissent sur une edition passee, l'appel a contribution n'existe pas partout, et le pratique vient de disparaitre du passe. Un bloc restant seul se rangeait alors dans la premiere piste et laissait la seconde vide — une demi-page blanche a cote d'un bloc, sans que rien n'indique qu'il manque quelque chose. Aucune donnee d'aujourd'hui ne produit ce cas : sur les neuf editions passees, aucune n'a de bloc « participer autrement ». C'est justement pourquoi la regle est posee maintenant — le defaut n'apparaitrait qu'a la premiere edition qui en aura un, et personne ne le relierait a ce lot. */ .minisite-duo > :only-child { grid-column: 1 / -1; } } /* ══════════════════════════════════════════════════════════════ LE RAIL ══════════════════════════════════════════════════════════════ */ /* Il porte cinq blocs et depasse la fenetre : rien ne le plafonne et rien ne l'ecrete, sans quoi il devient un conteneur a ascenseur interne ou le doigt attrape tantot la boite, tantot la page. `sticky` reste : sur un contenu plus haut que la fenetre, il se comporte comme un bloc ordinaire jusqu'a ce que son bas soit atteint. Meme correction, meme cause, que sur la fiche CESU. */ .minisite-rail .article-sidebar__sticky { max-height: none; overflow: visible; gap: var(--spacing-md); } /* ── L'AFFICHE TIENT LIEU D'IDENTITE DANS LE RAIL ── Elle remplace un bloc de titre, sous-titre, dates et lieu : quatre lignes de texte pour redire ce que l'en-tete de la page dit deja, et qui poussaient le menu plus bas a chaque page selon la longueur du nom. La carte n'a ni rembourrage ni fond : l'affiche EST le bloc. Un cadre autour d'une affiche fait un cadre dans un cadre. */ .minisite-poster.article-sidebar__section { padding: 0; background: none; overflow: hidden; border-radius: var(--radius-md); } .minisite-poster__img { display: block; width: 100%; height: auto; } /* ── L'ENGAGEMENT ── Le bloc qui porte l'etat des inscriptions et le bouton. Il suit le visiteur sur toutes les pages du minisite : c'est le seul endroit du site ou l'on s'inscrit, et il n'avait auparavant qu'une place — le coin droit d'une barre d'onglets, perdu des que la barre passait en menu replie sur telephone. */ .minisite-cta__state { display: flex; align-items: center; gap: var(--spacing-sm); margin: 0 0 var(--spacing-sm); font-size: var(--font-size-sm); font-weight: 600; color: var(--color-text); } /* La pastille dit l'etat A L'OEIL ; le mot qui suit le dit a tout le monde. Une couleur seule ne porte jamais une information. */ .minisite-cta__dot { flex: none; width: 0.5rem; height: 0.5rem; border-radius: var(--radius-pill); background: var(--color-text-light); } .minisite-cta__state--open .minisite-cta__dot { background: var(--color-success); } .minisite-cta__state--soon .minisite-cta__dot { background: var(--color-warning); } .minisite-cta__state--closed .minisite-cta__dot { background: var(--color-text-disabled); } /* Le bouton prend toute la largeur du rail : un bouton court y laisse un vide qui se lit comme un defaut de rendu. */ .minisite-cta__btn { display: flex; align-items: center; justify-content: center; gap: var(--spacing-xs); width: 100%; } /* L'echeance sous le bouton, pas dedans : c'est ce qui aide a decider, pas une action. Elle faisait trois cents pixels dans le libelle du bouton, ce qui faisait passer l'ancienne barre sur deux lignes. */ .minisite-cta__note { margin: var(--spacing-sm) 0 0; font-size: var(--font-size-xs); line-height: var(--line-height-base); color: var(--color-text-light); } /* ── LE MENU DU MINISITE ── Meme forme que « Dans cette fiche » de l'annuaire : une liste verticale ou la cible fait toute la largeur du rail. Dans une liste, viser la ligne est plus facile que viser le mot. */ .minisite-menu__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--spacing-2xs); } .minisite-menu__link { display: flex; align-items: center; gap: var(--spacing-sm); min-height: var(--touch-target-min); padding: var(--spacing-xs) var(--spacing-sm); margin-inline: calc(var(--spacing-sm) * -1); border-radius: var(--radius-sm); font-size: var(--font-size-sm); font-weight: 600; color: var(--color-text); text-decoration: none; transition: background var(--transition-fast), color var(--transition-fast); } .minisite-menu__link:hover { background: var(--surface-4); color: var(--color-primary); } /* L'ONGLET COURANT SE MARQUE PAR SON FOND ET SON ENCRE, jamais par la seule couleur : `aria-current` le dit aux technologies d'assistance, le contraste le dit a l'oeil. */ /* MARINE, comme la maquette, et non le rose de rubrique : l'entree active se lit comme une PLACE dans une liste, pas comme une alerte. Le rose la faisait par ailleurs entrer en concurrence avec le seul bouton rouge de la page. */ .minisite-menu__link--on { background: var(--color-primary-dark); color: var(--color-on-primary); } .minisite-menu__count { margin-left: auto; font-family: var(--font-data); font-size: var(--font-size-xs); color: var(--color-text-light); } .minisite-menu__link--on .minisite-menu__count { color: var(--color-on-navy-muted); } /* ── LE MENU DU RAIL CEDE LA PLACE AUX ONGLETS SOUS LE PALIER ── Il s'y repliait derriere un declencheur portant la page courante. Il fallait donc un geste pour savoir ce que le minisite contient, alors que c'est la premiere question de qui arrive par un lien de partage. La banniere porte desormais la meme brique en ONGLETS, plus bas dans cette feuille. Tout le style du declencheur et de la liste repliee est parti avec lui. Il avait cesse d'etre inerte : la liste y prenait un fond blanc et un filet, qui se sont appliques aux onglets des leur arrivee — une rangee blanche sur le marine de la banniere, avec des libelles en encre claire donc invisibles. Un style mort n'est pas neutre, il attend un selecteur qui le reveille. */ @media (width < 64em) { /* Sans cela les deux navigations coexistent : deux fois les memes liens dans l'arbre d'accessibilite, et un lecteur d'ecran qui annonce le menu de l'evenement a deux endroits de la page. */ .article-sidebar .minisite-menu { display: none; } } /* ── LES REPERES ── Deux journees, vingt-six sessions, J-93. Ils qualifient l'evenement ; ils ne sont donc pas au meme rang que le contenu, et n'entrent dans aucune carte. */ .minisite-key { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--spacing-sm); } .minisite-key__row { display: flex; align-items: baseline; gap: var(--spacing-sm); } .minisite-key__value { flex: none; min-width: 3rem; font-family: var(--font-data); font-size: var(--font-size-lg); font-weight: 700; line-height: var(--line-height-tight); color: var(--color-primary-dark); } .minisite-key__label { font-size: var(--font-size-xs); line-height: var(--line-height-base); color: var(--color-text-light); } /* Sur telephone le rail est empile : les reperes passent en rangee, ou ils coutent une ligne au lieu de trois. */ @media (width < 64em) { .minisite-key { flex-direction: row; flex-wrap: wrap; gap: var(--spacing-lg); } .minisite-key__row { flex-direction: column; gap: var(--spacing-2xs); } .minisite-key__value { min-width: 0; } } /* ══════════════════════════════════════════════════════════════ L'EN-TETE DE LA CARTE ══════════════════════════════════════════════════════════════ */ /* L'affiche partage la ligne du titre, elle ne lui prend pas un ecran. Sous le palier elle passe AU-DESSUS : une affiche reduite a 40 % de 390 px ne montre plus rien, et le titre est ce qu'on vient lire. */ .minisite-head { display: grid; gap: var(--spacing-lg); } @media (width >= 60em) { .minisite-head--with-poster { grid-template-columns: minmax(0, 1fr) 18rem; align-items: start; } } /* —— LE BLOC DE TITRE, AU RYTHME DE LA GRAMMAIRE —— Huit pixels lient l'etat, le titre et son filet ; les vingt-quatre de la section separent ce bloc de ce qui suit. C'est exactement ce que fait `section-header.css` du paquet, et la seule raison pour laquelle ce n'etait pas le cas ici est que les trois elements etaient enfants directs de la section. */ .minisite-head__title-block { display: flex; flex-direction: column; gap: var(--spacing-sm); } .minisite-head__title { margin: 0; font-family: var(--font-title); font-size: var(--font-size-2xl); font-weight: 700; line-height: var(--line-height-tight); color: var(--color-text); } @media (width >= 48em) { .minisite-head__title { font-size: var(--font-size-3xl); } } .minisite-head__subtitle { margin: 0; font-family: var(--font-title); font-size: var(--font-size-lg); font-weight: 600; line-height: var(--line-height-tight); color: var(--color-primary); } /* La marge s'ajoutait au `gap` de la grille : 40 px entre le filet et le chapo pour un rythme declare a 24. Septieme occurrence de ce doublement dans cette feuille — dans un conteneur a `gap`, un enfant ne declare pas son ecart. */ .minisite-head__lead { margin: 0; max-width: var(--measure-prose); font-size: var(--font-size-md); line-height: var(--line-height-loose); color: var(--color-text-light); } .minisite-head__meta { margin: var(--spacing-sm) 0 0; font-family: var(--font-data); font-size: var(--font-size-sm); color: var(--color-text-light); } /* ── LA LIGNE DE REPERAGE ── Quand, ou, dans quelle seance. Elle vivait dans une carte laterale « Ou et quand » : ce sont des reperes du PROPOS, et les lire obligeait a traverser la page depuis le titre qu'ils qualifient. Sous le titre, ils se prennent d'un coup d'oeil. Ni carte ni cadre : une carte les mettrait au meme rang que le contenu qu'ils qualifient, ce que la regle des reperes dit deja pour `.minisite-key` et `.minisite-marks`. L'ECART VIENT DU CONTENEUR, JAMAIS DU SEPARATEUR. Ecrit colle au texte, le point median rendait « 10 decembre 2025· 08:55 » : il se dessine en `::before` avec sa propre marge, et le `gap` porte le reste. */ .minisite-head__metas { list-style: none; display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--spacing-2xs) var(--spacing-sm); margin: 0; padding: 0; font-size: var(--font-size-sm); line-height: var(--line-height-base); color: var(--color-text-light); } .minisite-head__metas-item { display: flex; align-items: baseline; } /* Le separateur precede son repere : en `::after` du precedent il reste ORPHELIN en fin de rangee quand la ligne se replie, et la rangee suivante s'ouvre sans rien qui la rattache. Meme correction que sur le fil d'Ariane de la banniere. */ .minisite-head__metas-item + .minisite-head__metas-item::before { content: '·'; margin-right: var(--spacing-sm); color: color-mix(in srgb, var(--color-text-light) 55%, transparent); } /* La figure ne pose aucune marge : c'est la grille qui donne l'ecart, et une marge de `

` par defaut la doublerait. */ .minisite-head__figure { margin: 0; } /* L'affiche garde ses proportions et son cadre. `--radius-md` et non `lg` : elle vit DANS une carte, et deux rayons emboites de meme valeur se lisent comme un defaut d'alignement. */ .minisite-head__poster { display: block; width: 100%; height: auto; border-radius: var(--radius-md); border: 1px solid var(--color-border); } .minisite-head__credit { display: block; margin-top: var(--spacing-xs); font-size: var(--font-size-2xs); color: var(--color-text-light); } /* ══════════════════════════════════════════════════════════════ LE PAVE DE CLOTURE ══════════════════════════════════════════════════════════════ */ /* Dernier bloc de la carte : il redit l'engagement au bas d'une page longue, la ou le rail a defile hors de vue sur telephone. Sur grand ecran le rail est collant et le porte deja — d'ou sa forme de RAPPEL, pas de bandeau. */ .minisite-close { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--spacing-md); padding: var(--spacing-lg); border-radius: var(--radius-md); background: var(--color-primary-dark); color: var(--color-on-primary); } .minisite-close__text { min-width: 0; } .minisite-close__title { margin: 0; font-family: var(--font-title); font-size: var(--font-size-lg); font-weight: 700; color: var(--color-on-primary); } .minisite-close__note { margin: var(--spacing-2xs) 0 0; font-size: var(--font-size-sm); color: var(--color-on-navy-muted); } /* ── LA NOTE D'UNE SECTION ── La phrase qui borde un bloc sans en etre le contenu : « le detail se trouve sur la page d'inscription ». Elle n'est ni un chapo — elle ne suit pas le titre — ni un corps. */ .minisite-note { margin: 0; font-size: var(--font-size-sm); line-height: var(--line-height-base); color: var(--color-text-light); } /* ── LES PALIERS TARIFAIRES DANS UNE DEMI-COLONNE ── `.evt-prices` est dimensionnee pour la pleine largeur du plateau : ses pistes ne descendent pas sous 11,5 rem, donc dans une colonne de duo (355 px a 1440) elles retombent a UNE par ligne, et chaque palier rend 150 px de haut pour un montant. Deux paliers occupaient alors plus de place que la frise d'echeances au-dessus d'eux. Meme correction que celle qu'`events.css` applique deja a `.evt-callout` : `auto-fit` sur 8 rem, un rembourrage et un corps de montant a la mesure de la colonne. */ .minisite-duo .evt-prices { grid-template-columns: repeat(auto-fit, minmax(min(100%, 8rem), 1fr)); gap: var(--spacing-sm); } .minisite-duo .evt-price { padding: var(--spacing-md); gap: var(--spacing-2xs); } .minisite-duo .evt-price__amount { font-size: var(--font-size-2xl); } /* ══════════════════════════════════════════════════════════════ LES COMMANDES D'UNE PAGE, DANS LE RAIL ══════════════════════════════════════════════════════════════ */ /* Elles suivent la forme du menu : une liste verticale ou la cible fait toute la largeur du rail. Un choix de jour et un choix de page se prennent du meme geste, ils n'ont pas a se presenter differemment. */ .minisite-cmd__list { display: flex; flex-direction: column; gap: var(--spacing-2xs); } .minisite-cmd__tab { display: flex; align-items: baseline; gap: var(--spacing-sm); width: 100%; min-height: var(--touch-target-min); padding: var(--spacing-xs) var(--spacing-sm); margin-inline: calc(var(--spacing-sm) * -1); border: 0; border-radius: var(--radius-sm); background: none; font-family: inherit; font-size: var(--font-size-sm); font-weight: 600; color: var(--color-text); text-align: left; cursor: pointer; transition: background var(--transition-fast), color var(--transition-fast); } .minisite-cmd__tab:hover { background: var(--surface-4); color: var(--color-primary); } /* L'ETAT ACTIF SE MARQUE PAR SON FOND ET SON ENCRE, jamais par la seule couleur : `aria-selected` le dit aux technologies d'assistance, le contraste le dit a l'oeil. */ /* MARINE, comme l'entree de menu active juste au-dessus : deux listes de choix dans la meme colonne ne peuvent pas marquer leur selection de deux facons. */ .minisite-cmd__tab.is-active { background: var(--color-primary-dark); color: var(--color-on-primary); } .minisite-cmd__tab-label { min-width: 0; } /* La date se cale au bout, en chasse fixe : c'est une VALEUR. */ .minisite-cmd__tab-note { margin-left: auto; flex: none; font-family: var(--font-data); font-size: var(--font-size-xs); font-weight: 400; color: var(--color-text-light); } .minisite-cmd__tab.is-active .minisite-cmd__tab-note { color: var(--color-on-navy-muted); } /* Le compteur ferme le bloc des types. Sans lui, une combinaison qui ne laisse rien passer rend une page vide sans un mot, et l'on croit le programme non publie. */ .minisite-cmd__count { margin: var(--spacing-sm) 0 0; font-family: var(--font-data); font-size: var(--font-size-xs); color: var(--color-text-light); } .minisite-cmd__actions { display: flex; flex-direction: column; gap: var(--spacing-2xs); } .minisite-cmd__action { display: flex; align-items: center; gap: var(--spacing-sm); width: 100%; min-height: var(--touch-target-min); padding: var(--spacing-xs) var(--spacing-sm); margin-inline: calc(var(--spacing-sm) * -1); border: 0; border-radius: var(--radius-sm); background: none; font-family: inherit; font-size: var(--font-size-sm); font-weight: 600; color: var(--color-text); text-align: left; text-decoration: none; cursor: pointer; transition: background var(--transition-fast), color var(--transition-fast); } .minisite-cmd__action:hover, .minisite-cmd__action.is-active { background: var(--surface-4); color: var(--color-primary); } .minisite-cmd__action svg { flex: none; color: var(--color-text-light); } .minisite-cmd__badge { margin-left: auto; min-width: 1.25rem; padding: 0 var(--spacing-xs); border-radius: var(--radius-pill); background: var(--color-section-colloques); font-family: var(--font-data); font-size: var(--font-size-2xs); line-height: 1.25rem; text-align: center; color: var(--color-on-primary); } /* L'impression n'a pas de sens au doigt : masquee sous le palier plutot que de disputer sa place aux commandes qui, elles, servent. */ @media (width < 64em) { .minisite-cmd__action--print { display: none; } } /* ── LES ETIQUETTES DE FACETTE, DANS UN RAIL DE 20 REM ── `.programme__facet` est une RANGEE : intitule a gauche, etiquettes a droite. Dans le rail, l'intitule prenait sa colonne et poussait les etiquettes contre le bord droit, en escalier. Il fait de surcroit doublon avec le titre du bloc (« TYPE » sous « TYPE DE SEANCE »). La rangee devient donc une COLONNE, et l'intitule du partiel disparait : le titre de bloc du rail le dit deja, et une seule facette est rendue ici. */ .minisite-cmd .programme__facet { display: flex; flex-direction: column; align-items: stretch; gap: var(--spacing-sm); } .minisite-cmd .programme__facet-label { display: none; } .minisite-cmd .programme__chips { display: flex; flex-wrap: wrap; justify-content: flex-start; gap: var(--spacing-xs); } /* ══════════════════════════════════════════════════════════════ L'ACTION D'UNE PAGE, DANS LE RAIL ══════════════════════════════════════════════════════════════ */ /* Le bloc que pose la page d'inscription a la place du bouton generique : modalite reelle (plateforme externe, formulaire PDF, ou l'annonce d'une ouverture a venir), et ce qui aide a decider juste en dessous. */ .minisite-act__hint { margin: 0 0 var(--spacing-sm); font-size: var(--font-size-xs); line-height: var(--line-height-base); color: var(--color-text-light); } /* La note qui SUIT le bouton n'a pas de marge basse : c'est le `gap` du rail qui separe les blocs. */ .minisite-act .minisite-cta__btn + .minisite-act__hint { margin: var(--spacing-sm) 0 0; } /* —— L'ACTION DANS LE CONTENU —— Meme partial que la carte d'appui, meme bouton, mais pas la meme largeur : le rail impose `width: 100%` parce qu'une colonne de 320 px n'a pas d'autre choix ; un contenu de 782 px, si. Le bouton y garde sa largeur naturelle et se cale a gauche, comme tous les appels a l'action du site. */ .minisite-act--content .minisite-act__cta { /* `align-self`, ET SURTOUT PAS `display`. La section est un conteneur FLEX (`minisite-section`), donc le `display: inline-flex` du bouton est BLOCKIFIE en `flex` par le navigateur, et `align-items: stretch` l'etire a toute la largeur. J'ai d'abord cru a un defaut de cascade et monte la specificite : sans effet, evidemment — les deux regles declaraient deja `inline-flex`, et le calcule rendait `flex`. Un ecart entre ce qu'on DECLARE et ce qui est CALCULE sur la meme propriete ne se resout jamais par la specificite. Mesure : 782 px avant, largeur du contenu du bouton apres. */ align-self: flex-start; } .minisite-act--content .minisite-act__hint { margin: 0 0 var(--spacing-md); max-width: var(--measure-prose); color: var(--color-text); } .minisite-act__contacts { font-size: var(--font-size-sm); line-height: var(--line-height-base); color: var(--color-text-light); } /* ── L'ETAT, AU-DESSUS DU TITRE DE PAGE ── La pastille tient sa propre ligne : posee en ligne avec le titre, elle se lisait comme un mot de plus dans le titre. */ .minisite-head__state { margin: 0 0 var(--spacing-sm); } .minisite-head__state:empty { display: none; } /* ══════════════════════════════════════════════════════════════ LA BANNIERE D'ENGAGEMENT Maquette `Minisite événement v2 ANCESU`, ecran 2a ══════════════════════════════════════════════════════════════ */ /* ── UNE CARTE QUI PART AU DEFILEMENT ── Elle a d'abord ete collee : c'etait juste tant qu'elle portait l'IDENTITE de l'evenement — « arrive sur Pratique, on ne savait plus de quelle journee il s'agissait ». L'identite est depuis descendue dans le rail, qui est colle lui aussi : la banniere ne portait plus que l'etat et le bouton, c'est-a-dire ce que le rail peut porter sans occuper une bande en haut de chaque ecran. Elle defile donc avec le contenu, et le RAIL reprend l'engagement. Ce qui change pour le lecteur : au bureau, rien — le rail est colle, le bouton reste sous les yeux. Sur telephone, ou le rail est empile, le bouton est en tete de page a l'arrivee et le pied en porte un second ; entre les deux il faut defiler, ce qui est le cas de toutes les pages du site. Ce qu'on gagne : 62 px d'ecran rendus au contenu sur toute la hauteur de la page, et un seul objet colle au lieu de deux qui se poussaient. */ /* ── L'ECART AU-DESSUS EST UN REMBOURRAGE, PAS UNE MARGE ── La banniere est le PREMIER element en flux du corps : une marge haute s'y fusionne avec celle du corps et deplace la page entiere au lieu de creuser un ecart au-dessus d'elle. Mesure du 2026-09-02 : `margin-top` declare a 8 px, banniere rendue a `top: 0`, collee au bord de la fenetre. Un rembourrage ne se fusionne jamais. Il vaut le meme pas que tout le reste de la pile — l'ecart sous la banniere, et celui entre deux cartes du rail. */ .event-banner { padding-top: var(--spacing-md); } .event-banner__bar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--spacing-ms) var(--spacing-md); padding: var(--spacing-sm) var(--spacing-ms); border-radius: var(--radius-md); background: var(--color-primary-dark); box-shadow: var(--shadow-md); } /* Les actions se calent a droite. `margin-left: auto` plutot qu'un separateur souple, qui n'aurait rien tenu une fois la rangee passee sur deux lignes. */ .event-banner__actions { display: flex; align-items: center; gap: var(--spacing-sm); margin-left: auto; flex: none; } /* Sous le palier, les actions vivent DANS le panneau, en derniere rangee. PAS DE `space-between` ICI, et c'est mesure : la rangee n'a qu'UN enfant, le groupe de partage, donc la repartition ne repartit rien — elle se lit dans la feuille comme une intention qui n'a aucun effet. C'est le piege deja documente dans `design-system.md`, sur son cas le plus discret : l'ecart entre les deux pastilles vient du `gap` du groupe, pas d'ici. */ @media (width < 64em) { .event-banner__actions { margin-left: 0; width: 100%; } } /* ── LE RAIL COLLE PRES DU BORD, ET IL EST LE SEUL ── `article-sidebar__sticky` se colle a `top: 6rem`, valeur heritee du squelette de fiche du site : elle degageait la barre de navigation du site, que le minisite n'a pas. Le `top` doit rester INFERIEUR a la position naturelle du rail, sans quoi le rail descend des le premier rendu et ne s'aligne plus sur la carte de contenu. Mesure du 2026-09-02 : `top` a 96 px pour une position naturelle a 78 — le rail demarrait 18 px plus bas que le contenu, a hauteur nulle de defilement. */ @media (width >= 64em) { .minisite-rail .article-sidebar__sticky { top: var(--spacing-md); } } /* ══════════════════════════════════════════════════════════════ LA COUVERTURE DE L'ACCUEIL Maquette `Minisite événement v2 ANCESU`, ecran 2a ══════════════════════════════════════════════════════════════ */ /* L'AFFICHE AYANT PRIS LA PLEINE LARGEUR au-dessus du titre, la couverture n'a plus qu'une colonne : le texte. La grille a deux pistes rendait une banniere large sur 0,9 fraction — 300 px de haut contre 550 pour la colonne de texte, soit un vide sous l'image sur toute la hauteur restante. */ .minisite-cover { display: flex; flex-direction: column; gap: var(--spacing-xl); } .minisite-cover__text { display: flex; flex-direction: column; gap: var(--spacing-ms); min-width: 0; } /* ── PLUS DE TITRE, DE SOUS-TITRE NI DE META DANS LA COUVERTURE ── Le type, le titre, le sous-titre, les dates et le lieu vivaient ici ET dans la carte d'identite du rail, a deux cents pixels d'ecart. Les quatre regles qui les habillaient partent avec eux : une regle sans element est une regle que personne ne peut mesurer, et qui survit a tous les nettoyages parce qu'elle n'a l'air de gener personne. Le `h1` reste, en `sr-only` : le titre est affiche graphiquement par l'affiche juste au-dessus. */ /* Le chapo etait a `--font-size-md`, soit 15 px : PLUS PETIT que le corps de texte a 16. Un chapo se lit comme une entree en matiere, il ne peut pas etre compose plus petit que ce qu'il introduit — c'est ce qui le faisait passer pour une legende sous l'affiche. `--font-size-lg` le remonte a 18. */ .minisite-cover__lead { margin: 0; max-width: var(--measure-prose); font-size: var(--font-size-lg); line-height: var(--line-height-loose); color: var(--color-text); text-wrap: pretty; } /* ── L'AFFICHE GARDE SON FORMAT, ET ELLE OUVRE LA CARTE ── La maquette la dessine en 4/3, sur un gabarit hachure portant « affiche de l'edition · 4/3 ». C'est un PLACEHOLDER, pas une promesse sur nos fichiers : l'affiche d'Angers est une banniere large, et un `object-fit: cover` dans une boite 4/3 la coupait en plein titre — mesure du 2026-09-02, « LUMIERE » perdu, il restait « E SUR LA PEDAGOGIE ». Recadrer une image qui porte du TEXTE detruit l'information qu'elle porte. Le ratio est donc laisse a l'image, et seule sa hauteur est bornee pour qu'une affiche portrait ne prenne pas l'ecran a elle seule. Elle n'a ni ombre ni filet : posee en tete de carte et sur toute sa largeur, elle EST le bord haut du contenu — une ombre y ferait flotter une carte dans une carte. Le rayon reprend celui de la carte pour que les deux angles coincident. */ .minisite-cover__figure { margin: 0; } .minisite-cover__poster { display: block; width: 100%; height: auto; max-height: 22rem; object-fit: contain; border-radius: var(--radius-md); } .minisite-cover__credit { display: block; margin-top: var(--spacing-xs); font-size: var(--font-size-2xs); color: var(--color-text-light); } /* ── LES REPERES, EN RANGEE SOUS LE CHAPO ── Ils qualifient ce que le titre vient d'annoncer. Pas de carte : une carte les mettrait au meme rang que le contenu qui suit. */ /* ── LES REPERES SE LISENT COMME UNE RANGEE DE DONNEES ── Ils etaient poses en `flex` a 4 px sous le chapo, separes par un simple espace : trois paires valeur/libelle qui flottaient sous un paragraphe, sans rien pour dire ou l'une finit et ou la suivante commence. La grille leur donne des colonnes egales et un filet superieur chacune. Le filet est ce qui les constitue en RANGEE — c'est la meme figure que celle des listes de faits, et elle dit « ces trois choses sont de meme nature » sans qu'on ait a l'ecrire. `auto-fit` sur 6 rem : les reperes tiennent sur une rangee des 390 px, et le nombre de colonnes suit la place sans palier declare. A 8 rem, mesure du 2026-09-02, le troisieme tombait seul sur une deuxieme rangee et la laissait a moitie vide — des reperes se lisent d'un coup ou pas du tout. PAS DE `max-width: var(--measure-prose)` ICI, contrairement au chapo juste au-dessus. Le gabarit de prose borne un TEXTE, pour qu'on puisse le lire sans perdre sa ligne ; une rangee de donnees n'a pas ce probleme. Sur une edition passee les reperes sont CINQ, et la borne les cassait en 4 + 1 au bureau. */ .minisite-marks { list-style: none; margin: var(--spacing-lg) 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(6rem, 1fr)); gap: var(--spacing-md); } .minisite-marks__item { display: flex; flex-direction: column; gap: var(--spacing-2xs); padding-top: var(--spacing-sm); border-top: 1px solid var(--color-border); } .minisite-marks__value { font-family: var(--font-data); font-size: var(--font-size-xl); font-weight: 500; line-height: 1; color: var(--color-primary-dark); } .minisite-marks__label { font-size: var(--font-size-xs); line-height: var(--line-height-tight); color: var(--color-text-light); } /* ══════════════════════════════════════════════════════════════ QUI VOUS PARLERA ══════════════════════════════════════════════════════════════ */ /* `auto-fit` sur 14 rem : quatre fiches sur une rangee au bureau, deux sur une tablette, une sur un telephone — sans palier declare, donc sans saut a une largeur qu'on n'aurait pas prevue. */ .minisite-people { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(14rem, 100%), 1fr)); gap: var(--spacing-ms); } .minisite-person { display: flex; flex-direction: column; gap: var(--spacing-sm); min-width: 0; padding: var(--spacing-md); border-radius: var(--radius-md); background: var(--surface-4); } /* Le portrait est DECORATIF : le nom est en texte juste en dessous. Sans photo, aucune image de remplacement n'est rendue — un aplat gris rond a la place d'un visage se lit comme un chargement qui a echoue. */ .minisite-person__photo { width: 4rem; height: 4rem; border-radius: var(--radius-pill); object-fit: cover; } .minisite-person__name { font-family: var(--font-title); font-size: var(--font-size-md); font-weight: 700; line-height: var(--line-height-tight); color: var(--color-primary-dark); } .minisite-person__role { font-size: var(--font-size-sm); line-height: var(--line-height-base); color: var(--color-text-light); } /* La seance est ce qui relie la personne au programme : c'est la seule ligne de la fiche qui porte l'encre de lien, parce que c'est la seule qui repond a « quand est-ce que je l'entends ». */ .minisite-person__session { font-size: var(--font-size-sm); font-weight: 600; line-height: var(--line-height-base); color: var(--color-primary); } /* ══════════════════════════════════════════════════════════════ LE PROGRAMME, A PLAT Maquette `Minisite événement v2 ANCESU`, ecran 2b ══════════════════════════════════════════════════════════════ */ /* Defaut n°5 : « chaque seance est une carte blanche qui contient une carte grise qui contient deux cartes bleues. Trois niveaux d'encadrement pour une ligne d'horaire et un titre. » ── POURQUOI DE NOUVEAUX NOMS DE CLASSE ── Le creneau, le groupe et le jour gardent leurs `data-*` — c'est ce que le moteur de filtrage d'`app.js` lit, et les retirer casserait les facettes — mais ils changent de CLASSE. Les anciennes (`programme__slot`, `programme__group`, `programme__day`) portent 112 regles dans `events.css`, ecrites pour la mise en page a cartes gigognes qui disparait ici. Ce n'est pas de la cosmetique : `.programme__slot` y declare `align-items: baseline`, ce qui, sur un conteneur en colonne, empeche l'etirement en LARGEUR. Mesure du 2026-09-02 : les lignes rendaient 314, 403 et 638 px au lieu de 782, chacune s'arretant a la fin de son titre. Le defaut ne venait pas de ma feuille mais de l'ancienne, qui habillait encore un nom que j'avais reemploye. */ .programme-days, .programme-day__slots, .programme-slot, .programme-group { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; /* EXPLICITE, et pas seulement par defaut : c'est la declaration qui a manque. Un conteneur en colonne dont les enfants ne s'etirent pas rend des lignes de largeurs inegales, ce qui se lit comme un defaut de grille et se cherche dans la grille. */ align-items: stretch; } .programme-days { gap: var(--rhythm-section); } .programme-day__slots { gap: var(--spacing-sm); margin-top: var(--spacing-md); } .programme-slot, .programme-group { gap: var(--spacing-sm); } .programme-day__head { display: flex; align-items: baseline; flex-wrap: wrap; gap: var(--spacing-sm) var(--spacing-md); } .programme-day__title { margin: 0; font-family: var(--font-title); font-size: var(--font-size-2xl); font-weight: 700; line-height: var(--line-height-tight); color: var(--color-primary-dark); } .programme-day__date { font-size: var(--font-size-sm); color: var(--color-text-light); } /* ── LA LIGNE ── Trois colonnes : quand, quoi, ou et le geste. La colonne d'heure a une largeur FIXE — c'est elle qui donne au deroule sa reglure verticale, et une colonne qui s'ajuste au contenu la briserait a chaque seance sans duree. */ .programme-line { display: grid; grid-template-columns: 5rem minmax(0, 1fr) auto; gap: var(--spacing-md) var(--spacing-lg); /* LIGNE DE BASE, ET NON BORD HAUT. L'heure est en 14 px de chasse fixe, le sur-titre de la ligne en 11 px de capitales : cales par le HAUT de leur boite, leurs textes ne partagent aucune ligne, et l'heure flotte au-dessus du type. `baseline` aligne les PREMIERES lignes de base des trois colonnes, ce qui est la seule chose que l'oeil compare ici. `start` n'etait pas fautif tant que la colonne d'heure portait DEUX lignes — l'heure et la duree — et formait un bloc de hauteur voisine. La duree retiree, il ne reste qu'une ligne, et le decalage se voit. */ align-items: baseline; padding: var(--spacing-ms) var(--spacing-md); border-radius: var(--radius-md); background: var(--surface-4); transition: background var(--transition-fast); } /* Une seance de LOGISTIQUE ou de vie sociale — accueil, pause, diner — ne se choisit pas : elle a lieu. Sans surface, elle ponctue le deroule au lieu d'y peser autant qu'une conference. */ .programme-line--fixed { background: none; padding-block: var(--spacing-sm); } .programme-line--fixed .programme-line__title { font-family: var(--font-sans); font-size: var(--font-size-base); font-weight: 400; color: var(--color-text-light); } /* LA SEANCE RETENUE SE MARQUE PAR SON FOND ET PAR SON BOUTON, jamais par la seule couleur : `aria-pressed` le dit aux technologies d'assistance. */ .programme-line.is-picked { background: var(--color-primary-light); } .programme-line__when { display: flex; flex-direction: column; gap: var(--spacing-2xs); } /* Chasse fixe : une heure est une VALEUR, et c'est elle qui aligne la colonne. L'heure du CRENEAU partage cette regle plutot que d'en redeclarer une : c'est la meme grandeur au meme rang, et deux declarations auraient diverge au premier reglage. */ .programme-slot__time, .programme-line__time { font-family: var(--font-data); font-size: var(--font-size-sm); font-weight: 500; line-height: var(--line-height-tight); color: var(--color-primary); } .programme-line__body { display: flex; flex-direction: column; gap: var(--spacing-sm); min-width: 0; } .programme-line__head { display: flex; align-items: center; flex-wrap: wrap; gap: var(--spacing-sm); } /* Le type est NOMME et non reduit a une couleur : une pastille seule n'apprend rien a qui ne distingue pas les teintes. */ .programme-line__type { display: inline-flex; align-items: center; gap: var(--spacing-sm); font-size: var(--eyebrow-size); font-weight: var(--eyebrow-weight); letter-spacing: var(--eyebrow-tracking); text-transform: uppercase; color: var(--color-text-light); } /* La couleur vient du type de seance, saisie en administration ; le repli est la teinte de rubrique, jamais une valeur en dur. */ .programme-line__dot { flex: none; width: 0.5rem; height: 0.5rem; border-radius: var(--radius-pill); background: var(--type-color, var(--section-color)); } /* « 1 des 6 » remplace le pave « au choix parmi 6 » qui coiffait six cartes : la contrainte se lit sur chaque ligne qu'elle concerne. */ .programme-line__choice { font-family: var(--font-data); font-size: var(--font-size-2xs); color: var(--color-text-light); } .programme-line__title { margin: 0; font-family: var(--font-title); font-size: var(--font-size-lg); font-weight: 700; line-height: var(--line-height-tight); color: var(--color-primary-dark); text-wrap: pretty; } /* ── UN TITRE QUI MENE A SA COMMUNICATION LE DIT ── Le titre est un LIEN quand la seance a une page de communication, et rien ne le disait : `text-decoration: none` au repos, souligne au survol seulement. Mesure du 2026-09-03 sur l'edition de Nice — 53 titres sur 66 sont des liens, et aucun ne se distinguait des treize autres. La seule difference etait la couleur, qui dit la CATEGORIE de la seance (une conference contre une pause), pas sa cliquabilite. Le souligne au repos, comme les noms d'intervenants de la meme ligne : c'est la convention de la page, et elle repond a la question « existe-t-il une communication pour cette seance » sans ajouter une pastille sur cinquante- trois lignes. Meme trait et meme decalage que ces noms, pour que les deux se lisent comme des liens du meme rang. */ .programme-line__title a, .programme-line__child-title a { color: inherit; text-decoration: underline; text-decoration-thickness: 1px; text-decoration-color: var(--color-border); text-underline-offset: 3px; transition: text-decoration-color var(--transition-fast); } .programme-line__title a:hover, .programme-line__child-title a:hover { text-decoration-color: currentcolor; } .programme-line__code { font-family: var(--font-data); font-size: var(--font-size-xs); font-weight: 500; color: var(--color-text-light); } .programme-line__desc { margin: 0; font-size: var(--font-size-sm); line-height: var(--line-height-base); color: var(--color-text-light); } .programme-line__chips { display: flex; flex-wrap: wrap; gap: var(--spacing-xs); } .programme-line__end { display: flex; flex-direction: column; align-items: flex-end; gap: var(--spacing-sm); flex: none; } /* Chasse fixe : un nom de salle est une VALEUR qu'on releve pour s'y rendre. */ .programme-line__room { font-family: var(--font-data); font-size: var(--font-size-xs); color: var(--color-text-light); white-space: nowrap; } .programme-line__pick { display: flex; align-items: center; min-height: var(--touch-target-min); padding: 0 var(--spacing-md); border: 1px solid var(--color-border); border-radius: var(--radius-sm); background: var(--surface-2); font-family: inherit; font-size: var(--font-size-sm); font-weight: 600; color: var(--color-primary); white-space: nowrap; cursor: pointer; transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast); } .programme-line__pick:hover { border-color: var(--color-primary); } .programme-line__pick.is-picked { background: var(--color-primary-dark); border-color: var(--color-primary-dark); color: var(--color-on-primary); } /* Les interventions d'une session : une liste a filets, sans surface propre. Ce ne sont pas des cartes gigognes mais un rattachement, et l'aplatir au meme rang que la seance parente le perdrait. */ /* ── CE QUI EST DEDANS SE SERRE, CE QUI EST A COTE S'ECARTE ── Mesure du 2026-09-03 : huit pixels PARTOUT — entre le titre d'une intervention et ses intervenants, et entre deux interventions. Rien ne disait donc a quel titre un nom se rattachait, et l'oeil pouvait le lire comme appartenant a la ligne suivante. C'est le cas le plus voyant sur une pleniere a trois interventions, ou trois titres et trois noms alternent au meme pas. La liste ecarte ses entrees d'un cran de plus, et chaque entree serre son titre contre ses intervenants. C'est le rapport qui porte le sens, pas les valeurs : deux ecarts egaux ne peuvent rien dire, quels qu'ils soient. */ .programme-line__children { list-style: none; margin: 0; padding: 0 0 0 var(--spacing-md); border-left: 2px solid var(--color-border); display: flex; flex-direction: column; gap: var(--spacing-md); } .programme-line__child { display: flex; flex-direction: column; gap: var(--spacing-2xs); } /* Les marges des blocs internes s'ajouteraient au `gap` ci-dessus, et le rapport qu'il installe serait perdu — le defaut de double propriete corrige quatre fois ailleurs dans cette feuille. */ .programme-line__child > * { margin: 0; } /* ── LA MARQUE DE REDIFFUSION SUIT LE TITRE ── Elle porte `margin: 0.5rem 0 0` pour son emploi en bloc, dans la coquille historique. Dans la continuite du libelle, cette marge la decalerait vers le bas d'une demi-ligne. L'INTERLIGNE EST RAMENE A 1. La pastille est deja centree — icone, libelle et boite partagent leur centre au pixel, mesure — mais son libelle porte un interligne de 1,3 : la boite du texte depasse le glyphe en haut et en bas, et l'oeil lit ce blanc comme un decalage. Un centrage juste peut paraitre faux quand ce qu'on centre est plus haut que ce qu'on voit. Le corps descend d'un cran, la pastille cessant d'etre un objet a lire pour devenir une marque. */ .programme-line__title .programme__session-filmed { margin: 0 0 0 var(--spacing-sm); padding-block: var(--spacing-2xs); font-size: var(--font-size-2xs); line-height: 1; vertical-align: middle; } /* ── LES INTERVENANTS TIENNENT AU TITRE, ICI AUSSI ── Seize pixels entre le titre d'une conference et son intervenant, la ou le corps declare huit : la marge haute du bloc d'intervenants s'ajoutait au `gap`. C'est le SIXIEME endroit ou ce doublement se produit dans cette feuille, et le troisieme aujourd'hui. Les marges des blocs du corps sont donc neutralisees en bloc, comme elles l'ont ete pour les sous-seances : dans un conteneur a `gap`, un enfant ne declare pas son ecart. */ .programme-line__body > * { margin: 0; } .programme-line__child-title { display: block; font-size: var(--font-size-base); font-weight: 600; line-height: var(--line-height-base); color: var(--color-text); } .programme-line__child-title a { color: inherit; } /* La regle du jeu, sous le deroule : sans elle, un bouton « Ajouter » qui en desactive un autre passe pour un defaut. */ .programme-days__rule { margin: 0; padding-top: var(--spacing-md); border-top: 1px solid var(--color-border); font-size: var(--font-size-sm); line-height: var(--line-height-base); color: var(--color-text-light); } /* Sur telephone, la ligne se replie en colonne : trois pistes dans 326 px donnaient 5 rem d'heure, une piste de titre de 120 px et un bouton coupe. */ @media (width < 48em) { .programme-line { grid-template-columns: minmax(0, 1fr); gap: var(--spacing-sm); } .programme-line__when { flex-direction: row; align-items: baseline; gap: var(--spacing-sm); } .programme-line__end { flex-direction: row; align-items: center; justify-content: space-between; width: 100%; } } /* ── MON PROGRAMME, DANS LE RAIL ── */ /* Chasse fixe et gros corps : c'est un COMPTE, et c'est le seul retour qu'ait le visiteur sur un geste qui, sur la ligne, ne change qu'un fond. */ .minisite-pick__count { display: flex; align-items: baseline; gap: var(--spacing-xs); margin: 0 0 var(--spacing-xs); font-family: var(--font-data); font-size: var(--font-size-lg); font-weight: 500; line-height: 1; color: var(--color-primary-dark); } .minisite-pick__count span + span { font-family: var(--font-sans); font-size: var(--font-size-sm); font-weight: 400; color: var(--color-text-light); } .minisite-pick__hint { margin: 0; font-size: var(--font-size-xs); line-height: var(--line-height-base); color: var(--color-text-light); } /* ── LE MASQUAGE DES FACETTES SUIT LE SCRIPT, PAS LES CLASSES ── `applyFilters` d'`app.js` pose `is-filter-hidden` sur `[data-session]`, `[data-group]`, `[data-slot]` et `[data-day]`. La regle qui MASQUE vivait dans `events.css`, accrochee aux anciens noms de classe (`.programme__session.is-filter-hidden`, …). Renommer les conteneurs l'aurait donc rendue inerte EN SILENCE : le script aurait continue de poser la classe, et plus rien n'aurait disparu — un filtre qui ne filtre pas, sans erreur ni journal. La regle est donc ancree sur les MEMES attributs que le script vise. Un renommage de classe ne peut plus la desaccorder ; seul un changement de `data-*` le pourrait, et il casserait le script au meme endroit, donc visiblement. */ .programme-days [data-session].is-filter-hidden, .programme-days [data-group].is-filter-hidden, .programme-days [data-slot].is-filter-hidden, .programme-days[data-day].is-filter-hidden, .programme-days [data-day].is-filter-hidden, .programme-days [data-parallel-note].is-filter-hidden { display: none; } /* —— `hidden` DOIT VRAIMENT CACHER —— L'attribut ne tient que par une regle d'agent utilisateur, de specificite nulle : n'importe quel `display` ecrit dans une feuille la bat. Or les deux surfaces que le module vanilla replie en portent un — le panneau est `display: flex`, le tiroir `display: block`. Sans cette regle, `hidden` est pose, l'attribut est bien dans le DOM, et RIEN ne se cache : le panneau de filtres s'ouvrirait des le chargement et ne se refermerait jamais. Le defaut serait de ceux qui ne se signalent pas : le script ferait exactement ce qu'on lui demande, l'inspecteur montrerait `hidden`, et l'ecran dirait le contraire. C'est pourquoi la regle est posee EN MEME TEMPS que la bascule, et non le jour ou l'on constate qu'elle manque. Bornee au minisite : `[hidden]` avec `!important` a l'echelle du site retirerait a toute autre surface la possibilite de rendre un element cache autrement, ce qui n'est pas a decider ici. */ body.minisite [hidden] { display: none !important; } /* ══════════════════════════════════════════════════════════════ LES TARIFS Maquette `Minisite sections ANCESU`, section Inscription ══════════════════════════════════════════════════════════════ */ .minisite-tiers { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(14rem, 100%), 1fr)); gap: var(--spacing-ms); align-items: start; } .minisite-tier { display: flex; flex-direction: column; gap: var(--spacing-sm); min-width: 0; padding: var(--spacing-lg); border-radius: var(--radius-md); background: var(--surface-4); } /* Le PREMIER palier sur aplat marine. Il n'est pas « meilleur » : il est celui qui concerne les adherents, donc la majorite des visiteurs de ce minisite. */ .minisite-tier--lead { background: var(--color-primary-dark); } .minisite-tier__category { font-size: var(--eyebrow-size); font-weight: var(--eyebrow-weight); letter-spacing: var(--eyebrow-tracking); text-transform: uppercase; color: var(--color-text-light); } /* Le vert de marque rend 2,4:1 sur ce marine. Sur aplat, le sur-titre prend donc l'encre claire du fond plutot que la teinte de rubrique. */ .minisite-tier--lead .minisite-tier__category { color: var(--color-on-navy-muted); } /* Chasse fixe et grand corps : c'est LA valeur de la carte. */ .minisite-tier__price { font-family: var(--font-data); font-size: var(--font-size-3xl); font-weight: 500; letter-spacing: -0.02em; line-height: 1; color: var(--color-primary-dark); } .minisite-tier--lead .minisite-tier__price { color: var(--color-on-primary); } .minisite-tier__note { font-size: var(--font-size-sm); line-height: var(--line-height-tight); color: var(--color-text-light); } .minisite-tier--lead .minisite-tier__note { color: var(--color-on-navy-muted); } /* Le prix d'apres, sous un filet : c'est une autre echeance, pas une precision sur celle du dessus. */ .minisite-tier__after { padding-top: var(--spacing-sm); border-top: 1px solid var(--color-border); font-size: var(--font-size-sm); font-weight: 600; color: var(--color-primary-dark); } .minisite-tier--lead .minisite-tier__after { border-top-color: var(--veil-on-dark); color: var(--color-on-primary); } /* ══════════════════════════════════════════════════════════════ LES INTERVENANTS, EN LISTE Maquette `Minisite sections ANCESU`, section Intervenants ══════════════════════════════════════════════════════════════ */ /* Le MUR de cartes 3/4 devient une LISTE. Ce n'est pas un changement de gout : la carte disait « 3 interventions » sans dire lesquelles ni quand, et c'est precisement ce qu'on vient chercher ici. La ligne porte le quand et la seance, et elle y mene. */ .minisite-speakers { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--spacing-sm); } .minisite-speaker { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: var(--spacing-md); align-items: center; padding: var(--spacing-ms) var(--spacing-md); border-radius: var(--radius-md); background: var(--surface-4); } /* Le portrait est DECORATIF : le nom est en texte juste a cote. Sans photo, aucun aplat de remplacement — un rond gris a la place d'un visage se lit comme un chargement qui a echoue, et l'absence est ici le cas ordinaire : un intervenant sur quatre porte une photo. */ .minisite-speaker__photo { width: 3.5rem; height: 3.5rem; flex: none; border-radius: var(--radius-pill); object-fit: cover; } /* ── LA BULLE GENERIQUE ── Elle occupe EXACTEMENT la place d'une photo : c'est sa raison d'etre. Trois intervenants sur quatre n'en ont pas, et sans elle leur nom demarrait 68 px a gauche de celui des autres — la colonne ondulait sur toute la longueur de la liste. Une silhouette, et non un aplat vide : un rond gris se lit comme un chargement qui a echoue, une silhouette dit « une personne, sans photo ». */ .minisite-speaker__photo--generic, .minisite-person__photo--generic { display: flex; align-items: center; justify-content: center; /* LE CERNE EST CE QUI EN FAIT UNE BULLE. Sans lui, `--surface-4` vaut le fond de la ligne : la silhouette flottait dans le vide, et l'objet ne se lisait plus comme un avatar mais comme un pictogramme egare. Mesure du 2026-09-03 : fond de la bulle et fond de la ligne a la meme valeur. */ border: 1px solid var(--color-border); background: var(--color-bg); color: var(--color-text-light); } .minisite-speaker__identity { display: flex; flex-direction: column; gap: var(--spacing-2xs); min-width: 0; } .minisite-speaker__name { font-family: var(--font-title); font-size: var(--font-size-md); font-weight: 700; line-height: var(--line-height-tight); color: var(--color-primary-dark); } .minisite-speaker__name a { color: inherit; text-decoration: none; } .minisite-speaker__name a:hover { text-decoration: underline; } .minisite-speaker__org { font-size: var(--font-size-sm); line-height: var(--line-height-base); color: var(--color-text-light); } .minisite-speaker__roles { font-size: var(--eyebrow-size); font-weight: var(--eyebrow-weight); letter-spacing: var(--eyebrow-tracking); text-transform: uppercase; color: var(--color-text-light); } /* La colonne de droite porte le RATTACHEMENT : quand, et a quelle seance. Alignee a droite, elle forme une seconde reglure verticale qui se parcourt seule — c'est par elle qu'on cherche « qui parle jeudi matin ». */ .minisite-speaker__when { display: flex; flex-direction: column; align-items: flex-end; gap: var(--spacing-2xs); text-align: right; flex: none; max-width: 16rem; } /* Chasse fixe : une date et une heure sont des VALEURS. */ .minisite-speaker__slot { font-family: var(--font-data); font-size: var(--font-size-xs); color: var(--color-text-light); white-space: nowrap; } .minisite-speaker__session { font-size: var(--font-size-sm); font-weight: 600; line-height: var(--line-height-tight); } .minisite-speaker__more { font-size: var(--font-size-xs); color: var(--color-text-light); } /* Les pastilles de facette dans un rail de 20 rem : elles passent a la ligne au lieu de defiler, ce qu'une rangee pleine largeur leur imposait. */ .minisite-facets { display: flex; flex-wrap: wrap; gap: var(--spacing-xs); } .minisite-facets .article-sidebar__section-title { flex: 1 0 100%; } /* Sur telephone, la ligne se replie : trois pistes dans 326 px laissaient au titre de seance une colonne de quatre-vingts pixels. */ @media (width < 48em) { .minisite-speaker { grid-template-columns: auto minmax(0, 1fr); align-items: start; } .minisite-speaker__when { grid-column: 1 / -1; align-items: flex-start; text-align: left; max-width: none; padding-top: var(--spacing-xs); border-top: 1px solid var(--color-border); width: 100%; } } /* ══════════════════════════════════════════════════════════════ LES COMMANDES D'UNE LISTE, DANS LE FIL DE LA PAGE ══════════════════════════════════════════════════════════════ */ /* AUCUNE SURFACE, ET C'EST LE POINT. Ces commandes ont vecu dans une carte grise posee entre le titre de la page et la premiere vignette : une carte est un objet, et elle les mettait au meme rang que ce qu'elles filtrent. Elles sont dans une `.minisite-section`, donc separees de la presentation par le filet du rythme de carte et de la liste par le suivant — c'est ce filet qui les delimite, pas un fond. L'ecart interne est plus serre que celui d'une section ordinaire : une rangee de controles et ses pastilles sont UNE chose, pas trois blocs successifs. */ .minisite-filters { gap: var(--spacing-sm); } .minisite-filters__row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--spacing-sm) var(--spacing-md); } /* Le champ de recherche prend la place qu'il lui faut et pas davantage : a pleine largeur, une saisie de deux mots s'etirait sur 848 px. Il reste PREMIER et le plus large des deux controles — c'est le geste le plus frequent. */ .minisite-filters__search { flex: 1 1 18rem; max-width: 26rem; min-width: 0; } .minisite-filters__field { flex: 1 1 14rem; max-width: 20rem; min-width: 0; } /* `margin-left: auto` et non `space-between` : quand le lien est seul sur sa ligne, `space-between` le laisserait au depart. */ .minisite-filters__clear { flex: none; margin-left: auto; font-size: var(--font-size-sm); color: var(--color-primary); } /* Une ligne de pastilles precedee de son axe. Un `

` et non une liste : ce sont des LIENS vers une liste filtree, et leur intitule se lit dans la meme ligne qu'eux. */ .minisite-filters__group { display: flex; flex-wrap: wrap; align-items: center; gap: var(--spacing-xs); margin: 0; } .minisite-filters__label { flex: none; margin-right: var(--spacing-2xs); font-size: var(--eyebrow-size); font-weight: var(--eyebrow-weight); letter-spacing: var(--eyebrow-tracking); text-transform: uppercase; color: var(--color-text-light); } /* ── L'EN-TETE D'UN GROUPE, DANS LA CARTE ── Rendu par `event/minisite/_group_head.html.twig`. Leger, parce qu'un groupe n'est pas une section : le groupement par lettre du mur d'intervenants produit une vingtaine de groupes pour trente-trois personnes, dont plusieurs d'un seul membre, et un en-tete de SECTION complet y coute plus de hauteur que les lignes qu'il coiffe. IL ETAIT DESSINE DEUX FOIS : `minisite-speakers__group-label` ici, et `evt-replays__group-head` dans `events.css` — la feuille v1 — pour la page des rediffusions, avec un filet en `` plutot qu'en pseudo-element, un corps plus gros et un ecart de moitie. Deux dessins du meme objet dans la meme carte, sur deux onglets voisins. */ .minisite-group { gap: var(--spacing-sm); } /* ── LA RANGEE NE PASSE PAS A LA LIGNE ── Elle le faisait, et sur un intitule long le compte tombait au DEPART de la seconde ligne, sous le titre : un « 1 vidéo » orphelin, la ou il qualifie le groupe depuis la droite partout ailleurs. La marge automatique le poussait bien a droite, mais il restait sur une ligne a lui, sous un titre qui ne l'annoncait pas. Mesure du 2026-09-03 sur `/evenements/2025-nice/replays`, deuxieme groupe — un titre de seance de quatre-vingt-dix signes. En `nowrap`, c'est le TITRE qui se replie dans sa propre colonne (`min-width: 0`), et le filet se resorbe jusqu'a son minimum. Le repere et le compte restent aux deux bords, quelle que soit la longueur. Sous 48 em, le repli revient : trois pistes plus un compte dans 326 px ne laisseraient au titre qu'une colonne de quelques dizaines de pixels. */ .minisite-group__label { display: flex; flex-wrap: nowrap; align-items: baseline; gap: var(--spacing-sm); margin: 0; font-family: var(--font-title); font-size: var(--font-size-base); font-weight: 700; line-height: var(--line-height-tight); color: var(--color-primary-dark); } /* CE QUI SITUE LE GROUPE, avant son nom : « Jour 1 · 13:45 ». En chasse fixe, comme partout ou le minisite donne une donnee, et en poids normal — c'est le nom de la seance qu'on parcourt, pas son horaire. */ .minisite-group__meta { flex: none; order: -1; font-family: var(--font-data); font-size: var(--font-size-xs); font-weight: 400; color: var(--color-primary); } /* `min-width: 0` : sans lui, un titre de seance long pousse la ligne et le filet disparait au lieu de se resorber. `flex: 0 1 auto` le laisse RETRECIR sous sa largeur intrinseque — c'est ce qui lui fait prendre plusieurs lignes plutot que de chasser le compte hors de la rangee. */ .minisite-group__name { flex: 0 1 auto; min-width: 0; } @media (width < 48em) { .minisite-group__label { flex-wrap: wrap; } } /* Le trait remplit la ligne apres l'intitule : c'est ce qui fait lire une SEPARATION plutot qu'un titre de plus dans la colonne. `min-width` non nul : a zero, un intitule qui remplit la rangee le reduit a rien et la ligne parait tronquee plutot que terminee. */ /* LE FILET SE CALE SUR LA LIGNE DE BASE, comme le reste de la rangee : il prolonge le titre au lieu de flotter a mi-hauteur. Un pseudo-element vide n'ayant pas de ligne de base propre, c'est son bord inferieur qui sert — donc exactement la ligne d'ecriture. */ .minisite-group__label::after { content: ''; align-self: baseline; flex: 1; min-width: var(--spacing-lg); height: 1px; background: var(--color-border); } /* `margin-left: auto` EN PLUS du filet qui pousse : sur un intitule long, la rangee passe a la ligne et le compte tombe au DEPART de la seconde — un « 1 vidéo » orphelin sous le titre, la ou il qualifie le groupe depuis la droite partout ailleurs. Le filet ne le pousse que sur sa propre ligne. Mesure du 2026-09-03 sur `/evenements/2025-nice/replays`, deuxieme groupe. */ .minisite-group__count { order: 1; flex: none; margin-left: auto; font-family: var(--font-data); font-size: var(--font-size-xs); font-weight: 400; color: var(--color-text-light); } /* La separation par filet du rythme de carte ferait double emploi avec le trait de l'en-tete de groupe. */ .minisite-group + .minisite-group { padding-top: 0; border-top: 0; } /* ══════════════════════════════════════════════════════════════ LES APPELS A CONTRIBUTION Maquette `Minisite sections ANCESU`, section Contributions ══════════════════════════════════════════════════════════════ */ .minisite-call { display: flex; flex-direction: column; align-items: flex-start; gap: var(--spacing-ms); min-width: 0; padding: var(--spacing-lg); border-radius: var(--radius-md); background: var(--surface-4); } /* Un appel clos garde sa carte et sa sortie : le reglement et le sujet gardent leur interet. Il perd seulement son fond, qui le mettait au meme rang qu'un appel ou l'on peut encore deposer. */ .minisite-call--closed { background: none; border: 1px solid var(--color-border); } .minisite-call__head { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--spacing-sm); width: 100%; } .minisite-call__type { display: inline-flex; align-items: center; gap: var(--spacing-sm); font-size: var(--eyebrow-size); font-weight: var(--eyebrow-weight); letter-spacing: var(--eyebrow-tracking); text-transform: uppercase; color: var(--color-text-light); } .minisite-call__dot { width: 0.5625rem; height: 0.5625rem; border-radius: var(--radius-pill); background: var(--color-section-formations); } .minisite-call--closed .minisite-call__dot { background: var(--color-text-disabled); } .minisite-call__title { margin: 0; font-family: var(--font-title); font-size: var(--font-size-xl); font-weight: 700; line-height: var(--line-height-tight); color: var(--color-primary-dark); text-wrap: pretty; } .minisite-call__text { margin: 0; font-size: var(--font-size-base); line-height: var(--line-height-loose); color: var(--color-text); } /* Chasse fixe : une echeance et un quota sont des VALEURS qu'on releve pour decider s'il reste le temps de proposer quelque chose. */ .minisite-call__facts { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--spacing-2xs); /* PAS `--font-data` : la fonte de donnees est celle des NOMBRES et des valeurs qu'on releve — un montant, un compte, un code. Ces trois lignes sont des phrases (« Depot du 1 mars 2026 au 1 novembre 2026 », « Reglement sur la fiche de l'appel »), et en chasse fixe elles se lisaient comme une sortie de terminal au milieu d'une carte. */ font-size: var(--font-size-sm); line-height: var(--line-height-base); color: var(--color-text-light); } .minisite-call__note { margin: 0; font-size: var(--font-size-xs); line-height: var(--line-height-base); color: var(--color-text-light); } /* ── LES DEUX COMMANDES DE LA BANNIERE, SUR APLAT MARINE ── `_share_buttons` en variante `dropdown` rend deux pilules BLANCHES a filet gris : c'est sa forme sur le plateau clair du site, et elle est juste la-bas. Posees sur le marine de la banniere, elles y font deux cartes claires flottantes, plus voyantes que le bouton rouge qu'elles cotoient — alors qu'elles sont des commandes de second rang. Elles perdent donc leur surface et leur filet : encre claire, fond transparent, et un voile au survol. Le seul objet plein de la banniere reste celui qui porte l'action. */ .event-banner__share .share-dropdown-group__btn, .event-banner__share .share-dropdown__summary { background: transparent; border-color: var(--veil-on-dark); color: var(--color-on-navy); } .event-banner__share .share-dropdown-group__btn:hover, .event-banner__share .share-dropdown-group__btn:focus-visible, .event-banner__share .share-dropdown__summary:hover, .event-banner__share .share-dropdown__summary:focus-visible { background: var(--veil-on-dark); border-color: var(--color-on-navy-muted); color: var(--color-on-primary); } /* L'etat « range » garde son signal, mais dans l'encre du fond sombre. */ .event-banner__share .share-dropdown-group__btn--active { background: var(--veil-on-dark); color: var(--color-on-primary); } /* Le MENU deroulant, lui, retombe sur une surface claire : il s'ouvre SUR LE CONTENU et non sur le marine. L'habiller en sombre le rendrait illisible des qu'il depasse la banniere. */ .event-banner__share .share-dropdown__menu { color: var(--color-text); } /* ── L'ACTION DE L'ENGAGEMENT EST UN APLAT ROUGE ── `_rail_card` rend son action en `btn--outline-dark`, un contour marine, et c'est juste pour un rebond de colonne : la carte accompagne un contenu sans lui disputer l'attention. UNE SEULE deroge, et c'est celle-la : s'inscrire est le seul geste que ce site attend d'un visiteur d'evenement, et la maquette la peint en aplat rouge. La derogation est portee par une classe de l'APPELANT (`minisite-act--open`), pas par une variante ajoutee a la brique : une brique partagee qui gagne une option pour un seul appelant finit par en porter dix. Le rouge reste donc l'unique aplat de couleur de la page. */ .minisite-act--open .rail-card__cta { background: var(--color-section-colloques); border-color: var(--color-section-colloques); color: var(--color-on-primary); } .minisite-act--open .rail-card__cta:hover, .minisite-act--open .rail-card__cta:focus-visible { background: color-mix(in srgb, var(--color-section-colloques) 86%, var(--color-shade)); border-color: color-mix(in srgb, var(--color-section-colloques) 86%, var(--color-shade)); color: var(--color-on-primary); } /* ══════════════════════════════════════════════════════════════ LE FIL D'ARIANE, SUR LE MARINE DE LA BANNIERE ══════════════════════════════════════════════════════════════ */ /* Le composant est ecrit pour la bande claire du site : ses maillons sont en `--color-primary` et son maillon actif en `--color-primary-dark`. Sur le marine de la banniere, les deux disparaissent — le second EST le fond. Les encres passent donc a celles que la grammaire designe pour le marine. Mesure du 2026-09-02 : `--color-on-navy` rend 10,31:1 sur ce fond, `--color-on-navy-muted` 6,22 — les deux au-dessus du seuil AA, pour un composant qui rendait 1:1 sans cette reprise. */ .event-banner .breadcrumb-bar { min-width: 0; flex: 1 1 auto; } /* Le composant pose `padding-block: var(--spacing-md) 0` sur sa liste, pour la bande du site ou il vit seul. Dans la banniere il partage sa rangee avec les actions : le rembourrage l'y decalerait vers le bas. */ .event-banner .breadcrumb__list { padding-block: 0; } .event-banner .breadcrumb__item { color: var(--color-on-navy-muted); } .event-banner .breadcrumb__item a { color: var(--color-on-navy); } .event-banner .breadcrumb__item a:hover { color: var(--color-on-primary); } .event-banner .breadcrumb__item--active { color: var(--color-on-primary); /* ── LE MAILLON COURANT SE BORNE, IL NE PREND PAS LA BANDE ── `app.css` lui donne deja l'ecretage, et il se declenchait — mais seulement quand la place manquait. Mesure du 2026-09-03 sur la fiche d'une communication : 541 px de titre a 1280 px comme a 1600, soit un chemin dont le dernier maillon pese plus que les trois premiers reunis et court jusqu'au bord de la banniere. Le fil d'Ariane sert a SE SITUER, pas a relire : le titre entier est juste en dessous, en grand, et il reste dans le DOM ici — donc lu par un lecteur d'ecran et affiche en infobulle au survol. LA BORNE EST 16 REM, ET ELLE A ETE MESUREE PLUTOT QUE CHOISIE. Les cinq maillons rendent, a 1440 px : 101 + 82 + 146 + 79 px pour les quatre premiers, dans une bande de 1 192. A 26 rem, le dernier en pesait 416 a lui seul — plus que les quatre autres reunis, et le chemin occupait les trois quarts de la bande. A 16 rem il en occupe 62 %, et les quatre maillons parcourables restent entiers : ce sont eux qui servent a remonter. */ max-width: min(100%, 16rem); } /* ── GARDE-FOU SUR LES MAILLONS PARCOURABLES ── Ils sont `flex-shrink: 0` (app.css) : ce sont des rubriques courtes, et les tronquer ferait perdre le chemin. Le troisieme fait exception — il porte le TITRE DE L'EVENEMENT, saisi en administration, donc de longueur inconnue. « Réflexivité - Nice - 2025 » tient en 146 px ; rien ne garantit le suivant, et un maillon inextensible de 400 px pousserait la bande sur deux lignes sans qu'aucune ellipse ne se declenche. La borne ne coupe donc RIEN aujourd'hui : c'est un plafond, pas un raccourcissement. `min-width: 0` est indispensable — sans lui un element de flex ne descend pas sous la largeur de son contenu, et `text-overflow` ne coupe rien. */ .event-banner .breadcrumb__item > a { display: block; min-width: 0; max-width: min(100%, 14rem); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } /* ── LE SEPARATEUR PRECEDE SON MAILLON, IL NE SUIT PAS LE PRECEDENT ── `app.css` le pose en `::after` du maillon precedent, ce qui est juste tant que le chemin tient sur une ligne. Des qu'il se replie — le cas normal ici, le troisieme maillon portant un titre d'evenement — le chevron reste ORPHELIN en fin de premiere rangee, et la seconde s'ouvre sans rien qui la rattache. Mesure du 2026-09-02 a 375 px : « ancesu.localhost › Evenements › » puis, a la ligne, le titre. En `::before` du maillon SUIVANT, le chevron descend avec lui : la rangee se termine sur un mot et la suivante s'ouvre sur le signe qui l'annonce. */ .event-banner .breadcrumb__item:not(:last-child)::after { content: none; } .event-banner .breadcrumb__item:not(:first-child)::before { content: '›'; color: var(--color-on-navy-muted); font-size: 0.875rem; line-height: 1; } /* ── IL RESTE VISIBLE SUR TELEPHONE ── `app.css` masque `.breadcrumb-bar` sous 48 em pour toutes les pages du site : sur une bande dediee, un chemin de quatre maillons y passe sur deux lignes et ne sert plus a rien. Ici il est la SEULE sortie du minisite vers le site porteur. Le masquer laisserait un visiteur arrive par un partage sans aucun moyen de savoir de quel site releve la page, ni d'y aller. Le maillon actif s'ecrete deja par `text-overflow`, ce qui suffit a le faire tenir. LES DEUX SELECTEURS SONT REPRIS, et il en fallait deux : `events.css` masquait le `