/* =================================================================== COMPATIBILITÉ CONTENU ANCIEN — Roots for Reconciliation Project =================================================================== Contexte : de nombreuses pages/articles anciens (2011-2020) ont été construits avec l'ancien constructeur de pages "UX Builder" du thème précédent (classes préfixées "fw-": fw-row, fw-col-sm-*, fw-team, fw-btn, etc.). Le nouveau thème ne contient AUCUNE règle CSS pour ces classes (vérifié : 0 règle "fw-" dans les feuilles de style actuelles) : tout s'affiche donc en blocs empilés pleine largeur, sans grille, sans mise en forme des boutons/images, et certains textes reprennent même une police par défaut du navigateur. Ce fichier réintroduit une mise en forme minimale et cohérente avec le nouveau thème pour tout le contenu ancien, sans toucher au HTML existant. Il peut être collé dans : Apparence > Personnaliser > CSS additionnel (ou dans une feuille de style de thème enfant chargée après le thème). =================================================================== */ :root { --legacy-text: #1F2433; --legacy-muted: #5B6072; --legacy-primary: #0C626F; --legacy-primary-border: #1297AB; --legacy-border: #E5E7EB; --legacy-bg-muted: #F9FAFB; --legacy-radius: 10px; --legacy-font: "Myriad Pro", "Segoe UI", system-ui, -apple-system, Roboto, Helvetica, Arial, sans-serif; } /* Filet de sécurité : box-sizing correct pour tous les éléments hérités */ [class*="fw-"] { box-sizing: border-box; } /* =================================================================== 1. GRILLE — fw-container / fw-row / fw-col-sm-* Problème observé : .fw-col-sm-4 (censé faire 1/3 de la largeur) s'affichait à 100% de la largeur du conteneur, faute de règle CSS. Résultat : les blocs "3 colonnes" s'empilaient verticalement. =================================================================== */ .fw-container { max-width: 100%; } .fw-row { display: flex; flex-wrap: wrap; margin-left: -15px; margin-right: -15px; row-gap: 2rem; } .fw-row > [class*="fw-col-"] { width: 100%; /* mobile : empilé par défaut */ padding-left: 15px; padding-right: 15px; } .fw-col-no-padding { padding-left: 0 !important; padding-right: 0 !important; } .fw-col-inner, .fw-wrap-col-inner { width: 100%; height: 100%; } @media (min-width: 600px) { .fw-col-sm-1 { width: 8.3333%; } .fw-col-sm-2 { width: 16.6667%; } .fw-col-sm-3 { width: 25%; } .fw-col-sm-4 { width: 33.3333%; } .fw-col-sm-5 { width: 41.6667%; } .fw-col-sm-6 { width: 50%; } .fw-col-sm-7 { width: 58.3333%; } .fw-col-sm-8 { width: 66.6667%; } .fw-col-sm-9 { width: 75%; } .fw-col-sm-10 { width: 83.3333%; } .fw-col-sm-11 { width: 91.6667%; } .fw-col-sm-12 { width: 100%; } } /* =================================================================== 2. TYPOGRAPHIE HÉRITÉE — style inline cassé Problème observé : certains textes (ex. noms de famille dans les fiches "External experts") portent un style inline style="font-family:lato;font-size:30px;font-weight:900" laissé par l'ancien éditeur. La police "lato" n'étant pas chargée par le nouveau thème, le navigateur bascule sur sa police serif par défaut (=> gros texte "Times" disgracieux). Un style inline ne peut être neutralisé que par une règle !important. =================================================================== */ [style*="font-family:lato" i], [style*="font-family: lato" i] { font-family: var(--legacy-font) !important; } /* =================================================================== 3. TITRES — fw-heading / fw-special-title Problème observé (ex. pages "Local Capacities for Peace Award" et "Peace Work Institute Alumni") : chaque entrée (lauréat, alumni) répète ce même bloc titre juste après une image, sans le moindre espace au- dessus pour la séparer visuellement de l'entrée précédente — d'où l'impression d'un flux continu et confus plutôt que d'entrées distinctes. margin-top rétabli ci-dessous pour corriger ça sur TOUTE page utilisant ce même bloc, pas seulement ces deux-là. =================================================================== */ .fw-heading { margin-top: 1.5rem; margin-bottom: 1.5rem; } .fw-special-title { margin-top: 0; font-family: var(--legacy-font); color: var(--legacy-text); } /* Problème observé (ex. "CAMP
FOR
PEACE", "ROOF
FOR
ROOTS" sur "Local Capacities for Peace Award") : l'ancien éditeur a parfois inséré un
après CHAQUE mot du titre, en prévision d'une colonne étroite sur l'ancien thème. Dans la mise en page actuelle, plus large, ça casse le titre en une pile verticale d'un mot par ligne — masquer ces
laisse le titre s'enrouler naturellement selon la largeur réelle, comme n'importe quel autre titre. Même logique que .fw-btn br plus haut. */ .fw-special-title br { display: none; } .fw-heading-left, .fw-content-align-left { text-align: left; } .fw-heading-center { text-align: center; } /* Sous-titre affiché sous fw-special-title quand fw-heading-with-subtitle est présent (ex. le pays/mouvement sous un nom d'alumni : "Levon Arshakyan" / "Armenia"). Aucune règle CSS ne le stylait auparavant : il héritait du texte par défaut du navigateur, collé au titre au-dessus sans distinction visuelle. Traité comme un "kicker" discret, cohérent avec .kicker dans le reste du thème (assets/css/style.css). */ .fw-special-subtitle { margin-top: 4px; font-family: var(--legacy-font); font-size: 12.5px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--legacy-muted); } .fw-heading-with-subtitle .fw-special-title { margin-bottom: 0; } /* =================================================================== 4. BLOCS DE TEXTE — fw-text-box / fw-text-inner =================================================================== */ .fw-text-box { margin-bottom: 1.5rem; } .fw-text-inner p:last-child { margin-bottom: 0; } /* =================================================================== 5. BOUTONS — fw-btn Problème observé : rendu comme un lien de texte brut (ex. "Follow us on Facebook"). Style aligné sur le bouton secondaire du thème actuel (bordure teal, fond blanc, devient plein au survol). =================================================================== */ .fw-btn { display: inline-flex; align-items: center; gap: 0.5rem; padding: 12px 22px; border-radius: var(--legacy-radius); border: 1px solid var(--legacy-primary-border); background: #fff; color: var(--legacy-primary) !important; font-family: var(--legacy-font); font-weight: 600; font-size: 14px; text-decoration: none !important; line-height: 1.2; transition: background-color .25s ease, color .25s ease; } /* Problème observé (DOM réel :

Label
) : l'ancien éditeur laisse systématiquement un
juste après , un autre juste avant le texte à l'intérieur de , et un troisième juste avant la fermeture de . display:inline-flex neutralise en grande partie leur effet visuel, mais pas totalement selon les navigateurs (un
reste un item flex à part entière et peut ajouter un espacement vertical parasite) — les masquer complètement est plus sûr que de compter sur le flex pour les absorber. */ .fw-btn br { display: none; } .fw-btn:hover, .fw-btn:focus { background: var(--legacy-primary); color: #fff !important; } .fw-btn-lg { padding: 14px 26px; font-size: 15px; } /* =================================================================== 6. IMAGES EN CONTAINER RATIO — fw-block-image-parent/child, fw-ratio-container, fw-ratio-1 / fw-ratio-4-3 / fw-ratio-16-10 / fw-noratio Problème observé : sans CSS, une image sans attribut width/height s'affichait à sa taille native (ex. 750×750 px), tandis qu'une image cassée s'écrasait en une bande fine pleine largeur (~26 px de haut). Le fond "muted" + les coins arrondis évitent aussi que les images cassées ressortent comme des blocs vides bruts. =================================================================== */ .fw-block-image-parent { position: relative; overflow: hidden; border-radius: var(--legacy-radius); background: var(--legacy-bg-muted); } .fw-block-image-child.fw-ratio-container { position: relative; width: 100% !important; height: auto !important; overflow: hidden; border-radius: var(--legacy-radius); background: var(--legacy-bg-muted); } .fw-block-image-child.fw-ratio-container img { width: 100% !important; height: 100% !important; object-fit: cover; display: block; } .fw-ratio-1 { aspect-ratio: 1 / 1; } .fw-ratio-4-3 { aspect-ratio: 4 / 3; } .fw-ratio-16-10 { aspect-ratio: 16 / 10; } .fw-noratio { aspect-ratio: auto; height: auto !important; } .fw-noratio img { height: auto !important; object-fit: contain; } /* Icône loupe / overlay de zoom (fonctionnalité de lightbox de l'ancien thème, non fonctionnelle et non stylée ici : on la masque plutôt que de laisser un artefact visuel). */ .fw-block-image-icon, .fw-overlay-1, .fw-icon-zoom { display: none; } /* =================================================================== 7. VIGNETTES IMAGE + LÉGENDE — fw-imagebox / fw-imagebox-aside Utilisé notamment sur "Local Capacities for Peace Award" (photos des projets lauréats) et "Peace Work Institute Alumni" (photos des alumni). fw-imagebox-aside est la légende optionnelle sous l'image (vide sur la plupart des entrées actuelles, mais existe dans le HTML) : un espacement discret par défaut évite qu'un texte y apparaisse collé à l'image sur une future entrée qui l'utiliserait. =================================================================== */ .fw-imagebox { margin-bottom: 1rem; } .fw-imagebox-aside { margin-top: 0.6rem; font-family: var(--legacy-font); font-size: 0.85rem; color: var(--legacy-muted); } .fw-imagebox-aside:empty { margin-top: 0; } /* =================================================================== 8. BORDURES DE COULEUR THÉMATIQUE — fw_theme_border_only_color_N Problème observé (ex. chaque lauréat sur "Local Capacities for Peace Award", chaque alumni sur "Peace Work Institute Alumni") : ce n'est pas seulement la photo qui porte cette classe, mais le bloc ENTIER (photo + nom + sous-titre) — elle sert de carte pour toute l'entrée. Un style inline border-width/border-style ("border-width:3px;border-style:solid", laissé par l'ancien éditeur) y est combiné à cette classe fw_theme_border_only_color_N (N observé : 1, 3, 5 sur les pages auditées — probablement une des ~5-6 couleurs de la palette de l'ancien thème). Cette classe n'a plus AUCUNE règle CSS qui lui corresponde : la couleur de bordure retombe donc sur currentColor, soit un gris/noir terne (--legacy-text) qui n'a plus rien d'une "couleur thématique", et sans le moindre espace intérieur le contenu touche la bordure. Comme le mapping exact N → couleur de l'ancien thème n'est pas récupérable depuis le HTML seul, toutes les variantes sont uniformisées ici sur le même accent teal que .fw-btn (--legacy-primary-border) — plus cohérent visuellement qu'un noir par défaut, et un choix sûr tant que la vraie palette d'origine n'est pas retrouvée — avec un peu de confort intérieur pour que ça se lise comme une vraie carte. Couvre 1 à 8 au cas où d'autres pages utilisent des numéros non encore vus. =================================================================== */ .fw_theme_border_only_color_1, .fw_theme_border_only_color_2, .fw_theme_border_only_color_3, .fw_theme_border_only_color_4, .fw_theme_border_only_color_5, .fw_theme_border_only_color_6, .fw_theme_border_only_color_7, .fw_theme_border_only_color_8 { border-color: var(--legacy-primary-border) !important; border-radius: var(--legacy-radius); overflow: hidden; padding: 14px; } /* =================================================================== 9. FICHES ÉQUIPE — fw-team (utilisé notamment sur "External experts") =================================================================== */ .fw-team { display: flex; flex-direction: column; height: 100%; } .fw-team-image { margin-bottom: 1rem; } .fw-team-inner { display: flex; flex-direction: column; gap: 0.35rem; } .fw-team-name h3 { margin: 0 !important; font-family: var(--legacy-font) !important; font-size: 1.05rem !important; font-weight: 700 !important; line-height: 1.3 !important; color: var(--legacy-text) !important; text-transform: none !important; letter-spacing: normal !important; } .fw-team-name h3 span { font-family: inherit !important; font-size: inherit !important; font-weight: inherit !important; display: inline !important; } .fw-team-text { font-family: var(--legacy-font); font-size: 0.95rem; line-height: 1.6; color: var(--legacy-muted); } .fw-team-text p:last-child { margin-bottom: 0; } /* =================================================================== 10. SÉPARATEURS — fw-divider =================================================================== */ .fw-divider { margin: 1.5rem 0; } .fw-divider-line, .fw-line-solid { border: none; border-top: 1px solid var(--legacy-border); width: 100%; display: block; } .fw-divider-space { display: block; height: 1.5rem; } /* =================================================================== 11. LISTES À PUCES / NUMÉROTÉES —