/* ========================================================================== 06 - Actualités : articles sans fiche et liens externes Lot 6. Trois comportements de vignette doivent se distinguer à l'œil : 1. contenu interne -> vignette cliquable, rien de particulier 2. lien externe -> mention « Lien externe », nouvel onglet 3. sans contenu -> vignette non cliquable, pas de page blanche « pas évident qu'il y ait un lien à cliquer dans le titre ». ========================================================================== */ /* --- 2. Signalement d'un lien sortant ------------------------------------- DÉCISION DU 12/09/2026, demandée par Philippe : « il y a un picto quand il y a un lien externe, j'aimerais que tu l'enlèves et que tu mettes une indication que cela envoie sur un lien externe ». Le lot 6 posait trois dessins, tous retirés ici : la flèche sortante après le titre et après le lien, et la pastille en surimpression sur l'image. Une icône suppose une convention connue ; la mention en clair n'en demande aucune, et elle se lit à la même taille par tout le monde. Le texte est posé côté serveur sous l'extrait de la carte (inc/breves.php) et, pour les vignettes sans extrait, par assets/js/lm-front.js. Ce fichier ne décrit donc plus que son allure. */ /* ALLURE REVUE LE 12/09, dans la foulée : « la mention lien externe n'est pas assez mise en avant ». La première version était une ligne grise de 11px, qui se lisait comme une légende de plus. Elle devient une étiquette : fond violet clair, texte violet, comme les états actifs du design system. Elle reste distincte de la pastille de catégorie, qui est en violet plein sur l'image : ici, fond clair et texte coloré, dans le flux du texte. */ .lm-external-note { display: inline-block; margin-top: .5rem; padding: .25rem .5rem; border-radius: var(--lm-radius); background: var(--lm-primary-soft); color: var(--lm-primary); font-size: .75rem; font-weight: 700; line-height: 1.2; letter-spacing: .06em; text-transform: uppercase; } /* Dans une vignette, la mention vit dans le corps de la carte, sous le nom. */ .lm-tile__body .lm-external-note { margin-top: .375rem; } /* --- La mention posée dans la miniature ----------------------------------- Demande de Philippe, 13/09/2026 : « mets lien externe en bas à droite dans la miniature ». Le texte reste écrit par le serveur, sous l'extrait ; c'est le script qui le déplace DANS le lien de la miniature quand il y en a une (lm-front.js). Sans JavaScript, ou sur une carte sans image, il reste dans le flux : la mention ne dépend donc d'aucun script pour exister, seulement pour se placer. FOND BLANC, PAS VIOLET. Le design system interdit toute surcouche colorée sur une photographie ; l'étiquette est donc une pastille blanche à texte violet, cadrée d'un filet, qui se lit sur une image claire comme sur une image sombre. C'est aussi ce qui la distingue de la pastille de catégorie, en violet plein, posée en haut à droite par le widget. */ .lm-external-note--miniature { position: absolute; right: .5rem; bottom: .5rem; z-index: 2; margin: 0; background: rgba(255, 255, 255, .94); color: var(--lm-primary); border: var(--lm-rule) solid var(--lm-border); box-shadow: 0 2px 6px rgba(35, 29, 48, .12); pointer-events: none; /* la miniature reste cliquable sous l'étiquette */ } /* Le porteur de la mention doit être le bloc de référence du positionnement. Les deux conteneurs possibles : le lien de miniature du widget Posts, et le média d'une vignette .lm-tile. */ .elementor-post__thumbnail__link:has(> .lm-external-note--miniature), .lm-tile__media:has(> .lm-external-note--miniature) { position: relative; } /* --- 3. Vignette non cliquable -------------------------------------------- On retire l'affordance de lien : pas de curseur main, pas de soulignement, pas d'effet de survol. La carte reste lisible, elle porte l'information. */ .lm-stub, .lm-stub a, .lm-stub .elementor-post__title, .lm-stub .elementor-post__title a, .lm-stub .elementor-post__thumbnail__link { cursor: default; pointer-events: none; text-decoration: none; color: var(--lm-foreground); } .lm-stub:hover { border-color: var(--lm-border); box-shadow: none; } .lm-stub .lm-tile__media img, .lm-stub:hover .lm-tile__media img { transform: none; } /* --- Listes d'actualités et d'évènements : AFFICHAGE INCHANGÉ -------------- Arbitrage de Philippe, 07/09/2026 : les listes d'actualités, d'évènements et de recherches gardent le rendu actuel du site. On ne leur impose ni le cadre, ni le survol, ni la vignette « titre seul » de la maquette, et surtout ON NE MASQUE PAS LES EXTRAITS : ce sont de vrais contenus rédigés par Valérie. Ces listes héritent donc uniquement des fondations du lot 1, comme le reste du site : Source Sans 3, couleurs et filets du design system. C'est voulu. Seul le lot 6 s'applique ici, et il ne change pas la mise en page, seulement le comportement au clic : - .lm-has-external-link mention « Lien externe » (voir plus haut) - .lm-stub vignette non cliquable (voir plus haut) -------------------------------------------------------------------------- */ /* --- Marquage posé côté PHP par le filtre post_class ---------------------- inc/breves.php ajoute .lm-has-external-link sur la CARTE (l'élément article), pas sur l'ancre ; le script de front pose .lm-external sur l'ancre elle-même. Les deux classes ne servent plus qu'au repérage : depuis le 12/09, ce qui se voit est la mention textuelle, posée dans le balisage et non en CSS. */ /* --- Un lien mort retiré --------------------------------------------------- inc/liens-morts.php remplace l'ancre par un et garde le libellé. La règle ne fait qu'une chose : s'assurer qu'aucun reste de décor de lien ne s'applique à ce texte, qui n'en est plus un. */ .lm-lien-mort { color: inherit; text-decoration: none; cursor: text; } /* --- Contrastes des cartes d'articles ------------------------------------ Check du 24/09/2026 (axe : 318 éléments en échec sur Actualités). Ce sont les couleurs par défaut du widget Publications d'Elementor : date en #adadad (2,24:1) et extrait en #777 (4,47:1, juste sous le seuil de 4,5:1). Le gris du site, --lm-muted, donne 5,6:1 et garde l'effet voulu. Préfixe `body .elementor-posts` : la feuille du widget (widget-posts.min.css) est imprimée APRÈS les nôtres, à spécificité égale elle l'emportait. */ body .elementor-posts .elementor-post__card .elementor-post__meta-data, body .elementor-posts .elementor-post__card .elementor-post__meta-data span, body .elementor-posts .elementor-post__card .elementor-post-date, body .elementor-posts .elementor-post__card .elementor-post__excerpt, body .elementor-posts .elementor-post__card .elementor-post__excerpt p { color: var(--lm-muted); }