/* ================================================== UGCS — BLOC « PLAN DU SITE » ================================================== Chargée sur le site ET dans l'éditeur (champ « style » de block.json). Version = UGCS_PLAN_SITE_VERSION (cache-busting). Principes --------- - Typographie : RIEN ici. Police (Arial), tailles et graisses viennent du Customizer Kadence, seule source de vérité. Le trait violet sous les H2 vient de .ugcs-titre-signe (assets/css/titres.css du thème). Seule exception : la flèche des titres-liens (14 px, graisse 700), copiée des boutons de l'accueil (voir « FLÈCHE DES TITRES-LIENS »). - Couleurs de la charte : #5B2167 (texte des liens, titres), #A35BB5 (repères décoratifs uniquement : son contraste sur blanc, ~4,4:1, est juste sous le seuil AA de 4,5:1 pour du texte), #EDE7EF (fond des sections). - Le bloc vit dans the_content : les règles génériques du thème (.single-content h2, .single-content ul, li…) ont une spécificité supérieure aux classes simples et écrasent marges et retraits. Les espacements critiques sont donc en !important. - Espacement entre sections : gap de la grille SEUL, jamais de marge sur les sections en plus. Grille ------ ┌──────────┐ ┌──────────┐ ┌──────────┐ ┌──────────┐ │ Club │ │Pratiquer │ │Compét. │ │Actualités│ large : jusqu'à 4 │ ━━ │ │ ━━ │ │ ━━ │ │ ━━ │ │ • … │ │ • … │ │ • … │ │ • … │ └──────────┘ └──────────┘ └──────────┘ └──────────┘ auto-fill + minmax : le nombre de colonnes suit la largeur disponible (1 sur mobile, 2 ou 3 sur tablette, 4 sur un contenu d'environ 1100 px et plus), sans requête média. ================================================== */ /* ================================================== CONTENEUR ET GRILLE ================================================== */ .ugcs-plan-site { width: 100%; margin: 40px 0 !important; } .ugcs-plan-site__grille { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 16rem), 1fr)); gap: 24px; align-items: start; } /* ================================================== SECTION (UNE PAR ENTRÉE DE PREMIER NIVEAU) ================================================== */ .ugcs-plan-site__section { margin: 0 !important; padding: 24px !important; background: #EDE7EF; border-radius: 8px; /* Reflow (WCAG 1.4.10) : un libellé fait d'un seul long mot ou d'une URL collée dans Apparence > Menus passe à la ligne au lieu de déborder de la carte à 320 px ou en zoom 200 %. */ overflow-wrap: break-word; } .ugcs-plan-site__titre { margin: 0 0 16px !important; padding: 0 !important; color: #5B2167; } /* Le titre est un lien quand l'entrée a une URL : il garde la couleur et la taille du titre. Ciblé sur : une entrée sans URL est un de même classe, qui ne doit pas paraître cliquable (ni flèche, ni soulignement). Indice « cliquable » = la flèche des boutons de l'accueil après le texte (décision PO du 2026-10-31, définitive) ; soulignement 2 px au survol et au focus seulement, sur le texte, jamais sur la flèche. Club → titre-lien : flèche au repos, texte souligné au survol Compétitions titre-texte : ni flèche, ni soulignement Historique : soulignement permanent jusqu'à la 1.0.2 (titres alourdis) ; 1.0.3 (non livrée) flèche à la taille du titre, jugée lourde ; 1.0.4 flèche inline + texte isolé dans un intérieur ; 1.0.5 flèche retirée ; 1.0.6 flèche des boutons de l'accueil, sur le balisage de la 1.0.4. Balisage (écrit par ugcs_plan_site_rendre_libelle(), includes/fonctions-plan-site.php) : Club[U+2060]→ └── souligné au survol ──┘ └─ jamais soulignée, glisse de 4 px - Le n'est JAMAIS souligné, dans aucun état : text-decoration se propage aux descendants en ligne sans moyen de l'annuler chez l'enfant, la flèche inline serait soulignée avec lui. C'est le de texte qui porte le soulignement. - Pas de changement de couleur au survol (l'accueil passe au violet clair) : écart voulu par le PO, le titre garde son violet #5B2167. !important : « .entry-content a { text-decoration: none } » (global.min.css de Kadence, même spécificité (0,1,1) : l'ordre de chargement trancherait) et « .link-style-no-underline .entry-content a » (0,2,1) visent le selon le réglage de lien du Customizer ; dans le réglage « liens soulignés », c'est un underline que Kadence y pose. Le « none » du est donc en !important dans tous les états, et le soulignement du aussi, par prudence face à toute règle générique du thème sur les descendants de liens. Couleur : « a:hover, a:focus { color: palette-highlight-alt } » du thème (0,1,1) est battue par (0,3,1) ci-dessous ; le titre garde son violet, dont le contraste sur #EDE7EF est connu (9,3:1). La flèche hérite de cette même couleur. */ a.ugcs-plan-site__titre-lien, .ugcs-plan-site a.ugcs-plan-site__titre-lien:hover, .ugcs-plan-site a.ugcs-plan-site__titre-lien:focus { color: inherit; } /* Repos, survol, focus : le lui-même n'est jamais souligné (sinon la flèche inline le serait aussi, par propagation). */ a.ugcs-plan-site__titre-lien, a.ugcs-plan-site__titre-lien:hover, a.ugcs-plan-site__titre-lien:focus { text-decoration: none !important; } a.ugcs-plan-site__titre-lien:hover .ugcs-plan-site__titre-texte, a.ugcs-plan-site__titre-lien:focus .ugcs-plan-site__titre-texte { text-decoration: underline !important; text-decoration-thickness: 2px !important; text-underline-offset: 0.2em !important; } /* ================================================== FLÈCHE DES TITRES-LIENS (MODÈLE : BOUTONS DE L'ACCUEIL) ================================================== Valeurs reprises de .ugcs-home-news__all et de son (thème, blocks/accueil/actualites/style.css) : accueil plan du site ────────────────────────────── ────────────────────────────── font-size: 14px 14px (même taille, consigne PO) font-weight: 700 700 (même graisse) gap: 12px (lien en flex) margin-left: 12px transition: transform .2s ease transition: left .2s ease translateX(4px) au survol left: 4px au survol et au :focus-visible et au :focus-visible violet clair au survol non repris (décision PO) Pourquoi pas inline-block + transform comme à l'accueil : - transform ne s'applique pas à une boîte inline non remplacée : il faudrait un inline-block. Or une boîte inline-block est atomique, et Chrome autorise une coupure juste avant elle malgré le gluon U+2060 (constat du 2026-10-31 sur la 1.0.3 : flèche seule à la ligne dans un cadre de 260-280 px). Les boutons de l'accueil ne se replient jamais (white-space: nowrap) ; un titre H2 du plan, si. - Pas de flex sur le non plus (le gap de l'accueil) : un flex ferait du texte et de la flèche deux blocs côte à côte ; un titre long se replierait dans sa colonne, flèche isolée à droite. - position: relative + left produit le même glissement à l'écran (4 px, 0,2 s, ease) sur une boîte qui reste INLINE : un décalage relatif ne change pas la mise en ligne, le gluon garde la main. De même, la marge de 12 px d'un élément inline n'ouvre aucune occasion de coupure. Alignement vertical : vertical-align: middle, qui centre la flèche (14 px) sur la mi-hauteur des minuscules du titre (ligne de base + moitié de la hauteur d'x). Sur la ligne de base (valeur par défaut), une flèche de 14 px paraîtrait tombée au pied d'un titre plus grand ; centrée sur la hauteur d'x, elle se lit dans le prolongement du mot, comme sur les boutons de l'accueil (align-items: center). Limite connue (mesurée dans Chrome le 2026-10-31, acceptée par le PO) : sous ~290 px de fenêtre (titre ≤ ~106 px de large), un mot plus large que la ligne déclenche la coupure d'urgence d'« overflow-wrap: break-word » (section, plus haut), qui coupe au milieu des mots et ignore aussi le gluon : la flèche peut alors passer seule à la ligne. Le reflow sans débordement (WCAG 1.4.10) prime sur la flèche. */ .ugcs-plan-site__fleche { position: relative; left: 0; margin-left: 12px; color: inherit; font-size: 14px; font-weight: 700; vertical-align: middle; transition: left .2s ease; } a.ugcs-plan-site__titre-lien:hover .ugcs-plan-site__fleche, a.ugcs-plan-site__titre-lien:focus-visible .ugcs-plan-site__fleche { left: 4px; } /* Mouvement réduit demandé par le système : la flèche ne glisse pas (bonne pratique, WCAG 2.3.3). Le soulignement suffit à signaler le survol et le focus. Les boutons de l'accueil (thème kadence-ugcs) appliquent la même règle depuis le lot de correctifs du 2026-10-31. */ @media (prefers-reduced-motion: reduce) { .ugcs-plan-site__fleche { transition: none; } a.ugcs-plan-site__titre-lien:hover .ugcs-plan-site__fleche, a.ugcs-plan-site__titre-lien:focus-visible .ugcs-plan-site__fleche { left: 0; } } /* ================================================== LISTES IMBRIQUÉES ================================================== */ /* Remise à zéro des styles de liste du thème (puces, retraits, marges). */ .ugcs-plan-site__liste { margin: 0 !important; padding: 0 !important; list-style: none; } /* Niveaux 3 et suivants : retrait + filet violet clair à gauche, qui matérialise la hiérarchie (décoratif : la structure est déjà portée par les