/* ---------------------------------------------------------------- pape-france.fr — PROGRAMME : ÉTATS DES ÉVÈNEMENTS — v2 Direction « Le rail et l'étiquette ». Remplace programme-etats.css. À fondre dans pages-v3.css une fois validé. LE PRINCIPE Deux axes indépendants, deux canaux visuels séparés, sur deux côtés différents de la ligne : Axe 1 a une page → le TITRE (soulignement + flèche) centre Axe 2 accès au public → les BORDS (rail gauche + étiquette) marges Ainsi une ligne peut porter les deux signaux sans qu'ils se confondent, et le lecteur apprend deux codes au lieu d'un système. CE QUI CHANGE PAR RAPPORT À LA v1 La v1 posait trois fonds de ligne. Sur 21 lignes dont 15 mènent à une page, le fond bleu devient le fond de la page : il cesse d'être un signal. Ici AUCUNE ligne n'a de fond au repos. Le fond ne sert plus qu'au survol, où il désigne une cible unique. La page reste une liste, pas un tableau de bord. ACCROCHES Axe 1 : rien à configurer. Le plugin émet puis retire le href ; a[href]:not([href^="#"]) couvre les deux temps. Axe 2 : data-pf-acces sur .tl-item, GB Pro > Advanced > HTML Attributes → data-pf-acces : {{post_meta key:pf_acces_public}} Aucun sélecteur ne peut deviner un huis clos ; c'est le seul hook exact. Second attribut FACULTATIF sur le même élément, pour la gradation de couleur de l'étiquette d'accès (voir « LA GRADATION DE L'ACCÈS ») : data-pf-nature : {{post_meta key:pf_affichage_acces_nature}} Et un shortcode, [pf_publics], pour les publics un par un. « NE RIEN AFFICHER » VAUT "rien", JAMAIS "". GenerateBlocks ne rend pas un bloc dont une donnée dynamique est vide : un data-pf-acces résolu à vide efface la ligne entière du programme, contenu compris. Le CPT stocke donc le slug « rien », qui est ici un état à part entière et non un synonyme d'« ouvert » : ni rail, ni pastille, ni repli — seulement le texte nu s'il y en a un. C'est aussi le sort réservé à toute valeur imprévue, et à un .tl-item qui aurait perdu son attribut : se taire ne ment jamais. ---------------------------------------------------------------- */ /* ─── SOCLE ─────────────────────────────────────────────────────── Deux pseudo-éléments, un par axe : ::before = wash de survol (axe 1), ::after = rail d'accès (axe 2). Une ligne peut donc porter les deux. Empilement explicite plutôt que z-index négatif, qui passerait derrière le fond d'une section ancêtre. */ .timeline .tl-item{position:relative} .timeline .tl-item::before{content:"";position:absolute;inset:0 -16px;z-index:0;border-radius:10px;pointer-events:none;transition:background-color .18s ease} .timeline .tl-item>*{position:relative;z-index:1} /* ─── AXE 1 — LES LIGNES QUI MÈNENT QUELQUE PART ────────────────── Une ligne sans page n'est pas une ligne dégradée : « Arrivée à l'aéroport d'Orly » ouvre le voyage. On ne lui retire donc rien. On ajoute une promesse de destination à celles qui en ont une. */ /* Le soulignement porte l'essentiel : convention universelle, il survit au daltonisme, au niveau de gris et au papier. 3px pour qu'il tienne à un mètre. */ .tl-body h3 a[href]:not([href^="#"]){cursor:pointer;text-decoration:underline;text-decoration-color:var(--primary-soft);text-decoration-thickness:3px;text-underline-offset:6px;text-decoration-skip-ink:none} .tl-body h3 a[href]:not([href^="#"]):hover{text-decoration-color:var(--primary-deep)} /* La flèche est un glyphe, pas une pastille : quinze disques marine feraient un damier, et une pastille ne grandit pas avec le titre. Celle-ci suit la taille du h3, donc reste lisible de loin. */ /* display:inline et non inline-block : un inline-block est une boîte atomique, la coupure de ligne se fait AVANT elle et l'espace insécable qu'elle contient n'y peut rien. En inline, l'insécable colle vraiment la flèche au dernier mot du titre. Corollaire : translateX ne s'applique pas à une inline non remplacée — le mouvement de survol passe par padding-left, qui, lui, s'applique. */ .tl-body h3 a[href]:not([href^="#"])::after{content:"\00A0\2192";display:inline;color:var(--primary-soft);font-weight:400;text-decoration:none;padding-left:0;transition:padding-left .18s ease} .tl-body h3 a[href]:not([href^="#"]):hover::after{color:var(--primary-deep)} /* Le survol éclaire la ligne entière : c'est là, et seulement là, qu'un fond désigne quelque chose. */ .gb-loop-item:has(.tl-body h3 a[href]:not([href^="#"])) .tl-item:hover::before{background:var(--primary-wash)} .gb-loop-item:has(.tl-body h3 a[href]:not([href^="#"])) .tl-item:hover h3 a::after{padding-left:5px} /* Le survol exclut le clavier et le tactile : le signal de repos (soulignement + flèche) doit suffire, et le focus doit se voir. */ .tl-body h3 a[href]:not([href^="#"]):focus-visible{outline:2px solid var(--primary-soft);outline-offset:4px;border-radius:3px} /* Ce qui reste du lien mort, avant comme après le passage du JS. */ .tl-body h3 a[href="#pf-sans-page"], .tl-body h3 a.pf-sans-lien, .tl-body h3 .pf-sans-lien{cursor:default;text-decoration:none;color:inherit} /* ─── AXE 2 — OUVERTURE AU PUBLIC ───────────────────────────────── LE RAIL MARQUE CE QUI EST OUVERT, PAS CE QUI EST FERMÉ. Version précédente : rail sur les évènements restreints. Le rail est l'élément le plus voyant de la marge — le donner aux lignes fermées, c'est mettre en avant ce à quoi le lecteur ne peut pas aller. Or 90 % des visiteurs viennent chercher l'inverse : où puis-je me rendre. Le signal fort doit désigner l'opportunité. Corollaire logique : le rail devient marine — la couleur institutionnelle, positive, jamais une alerte. Et le sélecteur se simplifie, puisqu'il ne porte plus que sur une valeur exacte. Conséquence à assumer : une saisie manquante ne reçoit pas de rail, donc ressemble à un huis clos. C'est le bon sens de l'erreur — ne jamais promettre un accès non confirmé sur le programme officiel. */ /* Rail plein, 5px, à gauche du bloc. En balayant la colonne des horaires, les rendez-vous ouverts se comptent d'un coup d'œil. */ .timeline .tl-item[data-pf-acces="ouvert"]::after{content:"";position:absolute;left:-22px;top:16px;bottom:16px;z-index:1;width:5px;border-radius:5px;background:var(--primary)} /* L'horaire cesse d'être une consigne : personne n'a à être là à cette heure. Le titre, lui, garde tout son poids — l'évènement n'est pas moins important, il est seulement fermé. Un seul traitement pour les quatre restrictions : l'œil ne trie que « ouvert / pas ouvert », le mot de l'étiquette fait la nuance. Ardoise et jamais rouge : le rendez-vous a lieu, il est souvent retransmis — ce n'est ni une alerte ni une annulation. */ /* LES QUATRE VALEURS FERMÉES SONT NOMMÉES, JAMAIS DÉDUITES PAR NÉGATION. Elles sont recopiées de PF_ACCES_PUBLIC (section 3 du plugin) : invitation, delegations, accredites, prive. La forme précédente — [data-pf-acces]:not("ouvert"):not(""):not("rien") — disait « tout le reste », donc rangeait du côté du huis clos une valeur inconnue autant qu'un attribut mal saisi. Nommer les quatre fait retomber tout imprévu sur le silence : muet plutôt que faux. Duplication assumée, le CSS ne sait pas lire une constante PHP — ajouter une valeur à PF_ACCES_PUBLIC impose de passer ici. */ .timeline .tl-item:is([data-pf-acces="invitation"],[data-pf-acces="delegations"],[data-pf-acces="accredites"],[data-pf-acces="prive"]) .tl-time, .timeline .tl-item:is([data-pf-acces="invitation"],[data-pf-acces="delegations"],[data-pf-acces="accredites"],[data-pf-acces="prive"]) .tl-place, .timeline .tl-item:is([data-pf-acces="invitation"],[data-pf-acces="delegations"],[data-pf-acces="accredites"],[data-pf-acces="prive"]) .tl-place svg{color:var(--ink-mute)} /* ─── LES ÉTIQUETTES ────────────────────────────────────────────── Elles s'opposent par le POIDS (contour vs plein), pas par la teinte : l'opposition tient en niveaux de gris et sur papier. contour coloré un public est attendu, et lequel (pf_public) plein marine on peut s'y rendre (pf_acces_public) plein ardoise personne n'est attendu (pf_acces_public) rien pas encore renseigné Les deux pleins relèvent du même axe et ne cohabitent jamais sur une ligne ; le contour relève de l'autre axe et se pose à côté de l'un ou de l'autre. C'est ce qui autorise deux pleins sans confusion. Le troisième cas reste franchement vide. Le programme est prévisionnel : habiller une saisie manquante d'une mention affirmative publierait une information fausse sur le programme officiel du Saint-Siège. Une absence doit rester une absence. */ /* Trois valeurs par public : l'accent pur ne sert qu'au voile de fond, le texte et le contour sont des versions ASSOMBRIES À TEINTE CONSTANTE — un cyan foncé reste cyan, un ambre foncé reste ambre. (Un mélange vers le marine, lui, ramènerait les sept publics au même bleu.) À 11,5 px en capitales, une étiquette n'est pas du « grand texte » au sens WCAG : elle doit tenir le 4,5:1, ce que le cyan et le jaune de la charte ne font jamais à l'état pur. */ /* Les couleurs de public ne doivent JAMAIS atteindre la mention d'accès, qui porte pourtant la même classe : d'où le :not(). */ .timeline .ag-event__tag.invit, .timeline .ag-event__tag.public, .pf-hero__pf-eyebrow .ag-event__tag.public{background:color-mix(in oklab,var(--pf-public,var(--primary)) 12%,var(--paper));color:var(--pf-ink,var(--primary-deep));border:1.5px solid var(--pf-line,var(--primary));font-size:11.5px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;padding:6px 15px;border-radius:999px;white-space:nowrap} .timeline .pf-acces .ag-event__tag{--pf-public:initial;--pf-ink:initial;--pf-line:initial} /* ─── LA TROISIÈME DIMENSION : LES PUBLICS ──────────────────────── Les deux axes du brief sont sémantiques : les colorer mentirait (rouge = alerte, vert = feu vert, jaune = attention). pf_public, lui, est une liste fermée sans hiérarchie — exactement la situation des rubriques de la FAQ, où la couleur est un NOM et non un jugement. C'est donc là que la charte entre, et nulle part ailleurs. Le markup porte déjà la classe : aucun réglage à faire. Sept publics pour cinq couleurs de charte : les deux manquantes sont des harmonisations oklch du marine (violet) et du vert. Teintes réparties sur toute la roue pour rester séparables. */ :is(.timeline, .pf-hero__pf-eyebrow) .pf_public-grand-public{--pf-public:#0F2D85;--pf-ink:#0F2D85;--pf-line:#2F51C4} :is(.timeline, .pf-hero__pf-eyebrow) .pf_public-clercs-et-consacres{--pf-public:#6B47C4;--pf-ink:#4A2E8F;--pf-line:#6B47C4} :is(.timeline, .pf-hero__pf-eyebrow) .pf_public-jeunes{--pf-public:#1ACCFF;--pf-ink:#006F9E;--pf-line:#0098D4} :is(.timeline, .pf-hero__pf-eyebrow) .pf_public-personnes-malades{--pf-public:#00B5B0;--pf-ink:#00615E;--pf-line:#00918C} :is(.timeline, .pf-hero__pf-eyebrow) .pf_public-benevoles{--pf-public:#22B36A;--pf-ink:#17683C;--pf-line:#229B58} :is(.timeline, .pf-hero__pf-eyebrow) .pf_public-familles{--pf-public:#FFA107;--pf-ink:#8A5200;--pf-line:#C57800} :is(.timeline, .pf-hero__pf-eyebrow) .pf_public-presse{--pf-public:#F71021;--pf-ink:#A50C17;--pf-line:#D9101E} /* UNE ÉTIQUETTE PAR PUBLIC — [pf_publics], plugin section 12. Le Dynamic Tag de termes rend une chaîne unique, « Familles | Grand public | Jeunes | Personnes malades », que le CSS ne sait pas découper. Deux conséquences : une étiquette longue de quatre noms, et surtout UNE SEULE COULEUR — car les classes pf_public-* viennent de post_class() sur l'élément de boucle, qui les porte donc toutes les quatre, et c'est la dernière règle déclarée ci-dessus qui l'emporte. La couleur affichée était arbitraire par construction. Le shortcode émet un
  • par terme, chacun portant sa classe : la couleur redevient un nom. La déclaration sur l'élément lui-même l'emporte sur celle héritée de l'élément de boucle, sans !important. Le