/* ============================================================================ Kairos — gabarit d'article, alignement typographique (LOT 5, 05/09/2026) DESIGN.md §4 (echelle), §7.10 (cartes/filtres), §9 (accessibilite), §14.7 (blog/article/categorie). Arbitrage A-4 : correction PAR CSS CIBLE sur le gabarit Elementor existant (single-post, template partage id 30865, verifie identique sur 4 articles reels : referencement-naturel-suisse- romande-guide-2026, automatisation-marketing-pme-suisses-guide-2026, ecrire-avant-automatiser, cite-par-une-ia-versus-google), PAS de reprise du gabarit Elementor. N'est enqueue QUE sur is_singular('post') (voir inc/refonte-loader.php, branche articles). Aucun ':root' global : les pages de la refonte (refonte-2026.css, non chargee sur les articles) et l'en-tete unifie (refonte-entete.css) suivent deja la meme convention de jetons LOCAUX prefixes, ici '--ka-' pour ne rien partager par accident avec une autre feuille. Valeurs recopiees identiques a refonte-2026.css :root (meme marque, memes chiffres). Pourquoi une feuille neuve plutot qu'un ajout a refonte-2026.css : cette derniere n'est PAS enqueue sur les articles (verifie par curl : la liste des feuilles servies sur un article ne contient que kairos-fontes-css, kairos-refonte-entete-css, kairos-refonte-pied-css). Un ajout dans refonte-2026.css n'aurait eu aucun effet ici. Retour arriere : supprimer ce fichier + retirer son enqueue dans inc/refonte-loader.php (une ligne, voir commentaire pose a cote). Aucun autre fichier a toucher. DECOUVERTE EN COURS DE ROUTE, IMPORTANTE : le corps de l'article se lit sur fond BLANC (#single_post_holder, theme child style.css), pas sur fond nuit — seul le heros (section elementor-element-cae2d1a) est en --base. Et surtout, custom-css-js 33470 (« Header Z-Index Fix », le nom du fichier ne dit pas tout ce qu'il contient — verifie en lisant le fichier en entier) porte DEJA une feuille complete pour .kairos-sommaire, .kairos-cta-article et .kairos-lies : fond clair, texte marine (#0d1b2a), filet or, boutons or — coherente avec la marque, deja en production, presumement l'oeuvre de la mission qui a cree ces classes dans le contenu genere des articles. Cette feuille-ci a ete ecrite une premiere fois avec un habillage sombre concurrent (jetons --ka-panel/--ka-night en fond), decouvert incoherent APRES inspection reelle du CSSOM en navigateur (preuves/L5/) : corrige avant livraison pour ne garder que ce qui manquait reellement (police, tailles, tailles de cible tactile, rail collant), sans dupliquer ni contredire le travail deja en place. */ [data-elementor-type="single-post"] { --ka-base:#081a2d; --ka-night:#0d1b2a; --ka-panel:#12304d; --ka-panel2:#1b4067; --ka-edge:#3d5f86; --ka-edge-fort:#5a7ea6; --ka-ivory:#f3efe6; --ka-gold:#d9c187; --ka-gold2:#c4a062; --ka-gold3:#94795d; --ka-muted:#8fa3b8; --ka-muted2:#8298ae; --ka-rule:rgba(217,193,135,.18); --ka-rule2:rgba(217,193,135,.10); --ka-sp-3:12px; --ka-sp-4:16px; --ka-sp-5:20px; --ka-sp-6:24px; --ka-sp-8:32px; --ka-sp-16:64px; } /* ── 1. Polices de marque sur tout le corps de l'article ───────────────────── Cabo Rounded vient du Kit Elementor (typographie globale --e-global- typography-primary-font-family, confirmee dans post-28835.css ET post-30865.css : ".elementor-heading-title{font-family:'Cabo Rounded Regular', Sans-serif}"). Specificite faible (une classe) : une regle plus specifique suffit, sans !important, SAUF sur mobile ou trois regles de custom-css-js (extraits 33457, encore servis) portent des tailles en !important — traitees section 3 et 5, avec !important assume et commente la ou c'est necessaire. */ [data-elementor-type="single-post"] h1.elementor-heading-title { /* !important verifie necessaire par inspection reelle des regles appliquees (CSSOM, pas suppose) : post-30865.css porte, en plus de la regle Kit generale, une regle PROPRE A CE WIDGET (".elementor-30865 .elementor-element.elementor-element-6d19e3d .elementor-heading-title{font-family:'Cabo Rounded Regular'}", specificite 0,4,0) qui bat notre selecteur (0,2,1) sans meme avoir besoin d'!important de son cote. Element 6d19e3d = le widget titre de l'article, stable sur les 4 articles echantillonnes. */ font-family:'Inter Tight','Inter Tight Repli',system-ui,sans-serif !important; } [data-elementor-type="single-post"] .elementor-widget-theme-post-content h2, [data-elementor-type="single-post"] .elementor-widget-theme-post-content h3, [data-elementor-type="single-post"] .kairos-sommaire h2, [data-elementor-type="single-post"] .kairos-lies h2, [data-elementor-type="single-post"] .kairos-cta-article p { font-family:'Inter Tight','Inter Tight Repli',system-ui,sans-serif; } [data-elementor-type="single-post"] .elementor-widget-theme-post-content, [data-elementor-type="single-post"] .elementor-widget-theme-post-content p, [data-elementor-type="single-post"] .elementor-widget-theme-post-content li, [data-elementor-type="single-post"] .kairos-lies, [data-elementor-type="single-post"] .kairos-cta-article { font-family:'Inter Tight','Inter Tight Repli',system-ui,sans-serif; /* Pas de couleur ici : le corps de l'article se lit sur fond BLANC (#single_post_holder), --ka-ivory y serait presque invisible. Chaque composant garde la couleur deja posee par le theme/33470 (section 7-9 ci-dessous), sauf la ou aucune couleur n'existait encore (citations). */ } /* Liens : le Kit Elementor pose ".elementor-kit-28835 a{font-family:'Cabo Rounded Regular'}" (post-28835.css, verifie par inspection CSSOM) sur TOUT lien du site. Meme specificite qu'un selecteur de composant ici (attribut+element vs classe+element) : la regle gagne aujourd'hui par defaut d'heritage (aucune police explicite posee sur nos propres liens), pas par une regle plus forte — corrige en la rendant explicite. */ [data-elementor-type="single-post"] .elementor-widget-theme-post-content a, [data-elementor-type="single-post"] .kairos-sommaire a, [data-elementor-type="single-post"] .kairos-cta-primaire, [data-elementor-type="single-post"] .kairos-cta-secondaire, [data-elementor-type="single-post"] .kairos-lies a { font-family:'Inter Tight','Inter Tight Repli',system-ui,sans-serif; } /* ── 2. Etiquette de categorie (h4, widget 8075feb) : sur-titre mono ─────── DESIGN §4.2 "Sur-titre de section". ID d'element stable, verifie identique sur les 4 articles (template Theme Builder unique 30865). */ [data-elementor-type="single-post"] .elementor-element-8075feb .elementor-heading-title { font-family:'JetBrains Mono','JetBrains Mono Repli',ui-monospace,monospace !important; font-size:12px !important; letter-spacing:.12em; text-transform:uppercase; font-weight:400 !important; color:var(--ka-gold2); } [data-elementor-type="single-post"] .elementor-element-8075feb .elementor-heading-title a { color:inherit; text-decoration:none; } /* !important necessaire : custom-css-js 33457 (mobile, <768px) porte ".elementor-heading-title.elementor-size-default:not(h1){font-size:1.5rem !important}" qui vise aussi ce h4 (meme classe). Sans le forcer ici, la petite etiquette de categorie remonterait a 24px sur telephone. */ /* ── 3. H1 de l'article : echelle "page interieure" DESIGN §4.2 ────────── Existant mesure (DIAGNOSTIC-VISUEL §17.3-ish) : Cabo Rounded, 53px desktop, 31,875px mobile. Cible : Inter Tight, clamp(36px,4vw,64px), 1.06, 600, -0.022em — identique aux 27 pages de la refonte (coherence de marque). */ [data-elementor-type="single-post"] h1.elementor-heading-title { font-size: clamp(36px, 4vw, 64px) !important; line-height: 1.06 !important; font-weight: 600 !important; letter-spacing: -0.022em; max-width: 20ch; /* Pas de couleur forcee ici : custom-css-js 33470 porte deja ".elementor-30865 .elementor-element-d8f7693 h1{color:#fff!important}" (specificite superieure, verifie par inspection CSSOM). Blanc pur contre notre --ka-ivory (#f3efe6) : ecart visuel negligeable sur fond nuit, ne vaut pas un !important supplementaire (parcimonie). */ } /* !important : custom-css-js 33457 (mobile) porte "body:not(.kairos-2026) h1{font-size:clamp(30px,8.5vw,40px)!important; line-height:1.18!important}" — body des articles n'a pas la classe kairos-2026, la regle s'applique. Sans la re-forcer ici le H1 resterait plafonne a 40px et a 1.18 d'interligne sur telephone, sous l'echelle du chantier. Mesure DIAGNOSTIC §17 confirmee ce jour par curl direct. */ /* ── 4. Ligne meta (duree de lecture, auteur, date) : donnee technique ──── DESIGN §4.2 "Donnee technique" — JetBrains Mono 13px. Widgets Elementor "post-info" (id a150009 duree, id 6215bd5 auteur+date), classes stables. */ [data-elementor-type="single-post"] .elementor-widget-post-info, [data-elementor-type="single-post"] .elementor-widget-post-info .elementor-post-info__item, [data-elementor-type="single-post"] .elementor-widget-post-info a { font-family:'JetBrains Mono','JetBrains Mono Repli',ui-monospace,monospace; font-size:13px; letter-spacing:.02em; text-decoration:none; /* Pas de couleur : cette ligne vit dans le heros sombre (fond --base) et custom-css-js 33470 pose deja ".elementor-30865 .elementor-element- d8f7693 .elementor-post-info a{color:#D9C187!important}" — or de marque, lisible sur fond nuit, coherent. La duree de lecture (sans lien) herite du blanc pose sur ce meme bloc par la meme feuille. */ } /* ── 5. Corps de texte : DESIGN §4.2 "Corps d'article" — 18px/1.72/72ch ── custom-css-js 33457 porte deux regles concurrentes sans !important (".elementor-widget-theme-post-content p{line-height:1.7;max-width:75ch}") qu'une specificite superieure suffit a corriger, et une regle mobile EN !important (1rem/1.7/padding 0 5px) qu'il faut re-forcer explicitement. !important ajoute ici aussi (verifie par inspection CSSOM reelle, pas suppose) : style.css du theme enfant (racine, pas custom-css-js, celui-la) porte "#single_post_holder p{font-size:25px}" et "#single_post_holder li{font-size:23px}" — un selecteur d'ID bat n'importe quelle pile de classes quel que soit leur nombre (regle de specificite CSS), notre version sans !important perdait donc silencieusement (25px mesure au lieu de 18px). Meme raisonnement pour li, alignee sur le corps. */ [data-elementor-type="single-post"] .elementor-widget-theme-post-content > p, [data-elementor-type="single-post"] .elementor-widget-theme-post-content li { font-size: 18px !important; line-height: 1.72 !important; max-width: 72ch; } @media (max-width: 767px) { [data-elementor-type="single-post"] .elementor-widget-theme-post-content > p { font-size: 18px !important; line-height: 1.72 !important; padding: 0 !important; } } [data-elementor-type="single-post"] .elementor-widget-theme-post-content > h2 { font-size: clamp(28px, 2.9vw, 44px); line-height: 1.10; font-weight: 600; letter-spacing: -0.02em; max-width: 20ch; margin-top: var(--ka-sp-16); } [data-elementor-type="single-post"] .elementor-widget-theme-post-content > h3 { font-size: 20px; line-height: 1.25; font-weight: 600; letter-spacing: -0.01em; margin-top: var(--ka-sp-8); } @media (max-width: 767px) { /* custom-css-js 33457 : "body:not(.kairos-2026) h2{font-size:1.25rem !important}" plafonne tout h2 de contenu a 20px sur telephone, sous le plancher de l'echelle (28px). Re-force ici. */ [data-elementor-type="single-post"] .elementor-widget-theme-post-content > h2 { font-size: 28px !important; line-height: 1.14 !important; } } [data-elementor-type="single-post"] .elementor-widget-theme-post-content > p strong { color: var(--ka-night); font-weight: 600; } [data-elementor-type="single-post"] .elementor-widget-theme-post-content > p code, [data-elementor-type="single-post"] .elementor-widget-theme-post-content code { font-family:'JetBrains Mono','JetBrains Mono Repli',ui-monospace,monospace; font-size: .9em; background: rgba(217,193,135,.1); border: 1px solid var(--ka-rule); border-radius: 3px; padding: .1em .4em; } /* ── 6. Citations : Instrument Serif italique, filet or (DESIGN §14.7) ──── Aucune citation sur les 4 articles echantillonnes ici, presentes sur au moins 6 autres (verifie par curl : ou-se-perdent-vos-demandes-entrantes, reprendre-des-donnees-sales, un-formulaire-qui-envoie-un-email-ne-capte- rien, mesurer-avant-sinon-ne-rien-promettre, le-technique-avant- leditorial, crm-sur-mesure-ou-logiciel-du-marche). Balisage confirme :

...

, sans classe. */ [data-elementor-type="single-post"] .elementor-widget-theme-post-content blockquote { font-family:'Instrument Serif','Instrument Serif Repli',Georgia,serif; font-style: italic; font-size: clamp(20px, 2vw, 26px); line-height: 1.42; color: var(--ka-night); border-left: 3px solid var(--ka-gold); margin: var(--ka-sp-8) 0; padding: var(--ka-sp-3) var(--ka-sp-6); max-width: 62ch; } [data-elementor-type="single-post"] .elementor-widget-theme-post-content blockquote p { margin: 0; font-size: inherit; line-height: inherit; max-width: none; } /* ── 7. Sommaire : rail collant DESIGN §14.7 + cibles 44px ──────────────── custom-css-js 33470 pose deja le fond, la bordure, la couleur (#f6f5f2 sur fond blanc, filet or, texte marine #0d1b2a) et une taille de h2 a 17px : verifie en CSSOM reel, coherent avec la marque, non repris ni contredit ici. Ce qui manquait reellement, ajoute ci-dessous seulement : cible tactile 44px sur chaque lien (DESIGN §9, absente de 33470 — mesuree a ~24px avant cette regle), et le rail collant lui-meme (absent de 33470, qui ne pose qu'un bloc statique). Nav deja semantiquement correcte (aria-labelledby, ol>li>a), rien a corriger sur le balisage. */ [data-elementor-type="single-post"] .kairos-sommaire a { display: flex; align-items: center; min-height: 44px; border-radius: 3px; } @media (min-width: 960px) { [data-elementor-type="single-post"] .elementor-widget-theme-post-content { display: grid; grid-template-columns: 260px minmax(0, 1fr); column-gap: var(--ka-sp-16); align-items: start; } [data-elementor-type="single-post"] .elementor-widget-theme-post-content > .kairos-sommaire { grid-column: 1; grid-row: 1 / -1; position: sticky; top: var(--ka-sp-8); align-self: start; margin-bottom: 0; } [data-elementor-type="single-post"] .elementor-widget-theme-post-content > *:not(.kairos-sommaire) { grid-column: 2; } } /* ── 8. CTA contextuel (aside.kairos-cta-article) ───────────────────────── custom-css-js 33470 pose deja fond (#0d1b2a, identique a --ka-night), texte, bouton primaire (or/marine) et secondaire (contour or) — verifie en CSSOM reel, rien a reprendre en principe. MAIS decouvert par mesure reelle (preuves/L5/) : css/refonte/style.css du theme porte "#single_post_holder p{font-size:25px}" (ID, specificite imbattable par des classes) qui s'applique aussi a .kairos-cta-titre/.kairos-cta-texte (ce sont des

, verifie dans le HTML) et BAT le 20px/16px que 33470 leur destinait — 33470 ne l'a pas vu car ecrit sans jamais tester contre l'ID. Restaure ici les tailles de 33470 (pas les notres) avec !important, seul moyen de battre un identifiant. Cible tactile 44px des boutons : ajout reel (absente de 33470, qui ne fixe qu'un padding). Police : section 1. */ [data-elementor-type="single-post"] .kairos-cta-titre { font-size: 20px !important; } [data-elementor-type="single-post"] .kairos-cta-texte { font-size: 16px !important; } [data-elementor-type="single-post"] .kairos-cta-primaire, [data-elementor-type="single-post"] .kairos-cta-secondaire { display: inline-flex; align-items: center; min-height: 44px; } /* ── 9. Articles lies (section.kairos-lies) : grille du §7.10 ───────────── custom-css-js 33470 pose deja une grille (auto-fill, 240px mini) et toute la couleur (theme or, titre marine, date grise) — coherente, non reprise. Meme defaut qu'en section 8 : .kairos-lies-theme et .kairos-lies-date sont des

, battus par le meme "#single_post_holder p{font-size:25px}". Restaure les tailles voulues par 33470 (12px/14px), avec !important. */ [data-elementor-type="single-post"] .kairos-lies-theme { font-size: 12px !important; } [data-elementor-type="single-post"] .kairos-lies-date { font-size: 14px !important; } /* Points de rupture EXACTS de DESIGN §7.10 (3 colonnes >=1200, 2 entre 720 et 1199, 1 en dessous), plus explicites que l'auto-fill de 33470 pour rester alignes sur la grille de /blog/. Verifie : toujours 3

  • sur les 4 articles echantillonnes. */ [data-elementor-type="single-post"] .kairos-lies ul { grid-template-columns: repeat(3, 1fr); } @media (max-width: 1199px) { [data-elementor-type="single-post"] .kairos-lies ul { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 719px) { [data-elementor-type="single-post"] .kairos-lies ul { grid-template-columns: 1fr; } } /* ── 10. Image de couverture : 16:9 plein cadre, sans lettrboxing ───────── DIAGNOSTIC-VISUEL §17 : image "en boite noire a gauche et a droite". Mesure reelle en navigateur (preuves/L5/) : la partie du defaut interne a l'image (ratio 1200x630 = 1,905:1 non recadre dans sa boite) est bien confirmee et corrigee ici par object-fit:cover + ratio fixe. Le residu visible a gauche de l'image (fond de section) n'est PAS ce defaut : c'est un padding-left:100px pose sur .elementor-widget-wrap de la colonne (mesure : colonne 686px, widget rendu 586px, exactement 686-100), donc un reglage de colonne Elementor (gouttiere entre le titre et l'image), pas un residu de ratio. Le retirer reviendrait a modifier un reglage de colonne du gabarit Elementor plutot qu'une correction CSS ciblee (A-4) : laisse en l'etat, signale dans L5-RAPPORT.md pour arbitrage si Cem veut une image bord a bord. width:100%/--container-widget-width forces malgre tout la largeur Elementor a 108,422% (post-30865.css) vers 100% de l'espace reellement disponible, ce qui evite un DEUXIEME residu (l'image qui deborderait de 8% en plus du reste). */ [data-elementor-type="single-post"] .elementor-widget-theme-post-featured-image { --container-widget-width: 100% !important; width: 100% !important; max-width: 100% !important; aspect-ratio: 16 / 9; overflow: hidden; border-radius: 4px; } [data-elementor-type="single-post"] .elementor-widget-theme-post-featured-image img { width: 100% !important; height: 100%; object-fit: cover; display: block; } /* ── 11. Diagonale du bandeau (D11/§14.7) ───────────────────────────────── Fond de la section verifie : var(--e-global-color-015c6aa) = #081A2D (post-28835.css, Kit Elementor). Aucune regle .elementor-shape-fill trouvee dans les feuilles servies (post-30865.css, frontend.min.css, theme.css) : le remplissage tient donc sa valeur du defaut SVG, visible en rupture sur le fond nuit. Cible : la meme teinte que la section, pour qu'elle se fonde au lieu de trancher. */ [data-elementor-type="single-post"] .elementor-element-cae2d1a .elementor-shape-fill { fill: var(--ka-base); } /* ── 12. Lien d'evitement en double (B1, DESIGN §9/§14.7) ───────────────── Root cause identifiee par lecture de code + verification navigateur reelle (non supposee) : inc/head/01-preload-a11y.html (hors perimetre de ce lot, proprietaire L1) insere en JS, sur CHAQUE page et a chaque chargement, un second lien comme TOUT PREMIER enfant de (insertBefore(..., body.firstChild)), sans jamais verifier l'existence du lien deja servi par header.php (class="skip-link screen-reader-text", "Aller au contenu", lui aussi vers #content). Verifie en navigateur reel sur cet article (2026-09-05) : les DEUX liens sont presents dans le DOM apres chargement. Ce lot n'est proprietaire ni de header.php (sur les articles, le skip-link existant y fonctionne et n'a pas besoin d'etre touche) ni de 01-preload-a11y.html : la portee minimale tenable ici est de masquer le doublon, comme prevu par la consigne de ce lot. Site hors articles (page d'accueil, /contact/, categories) : PAS dans le perimetre de cette feuille (chargee uniquement sur is_singular('post')) — voir L5-RAPPORT.md pour le detail et la recommandation de fond. */ body.single-post a.skip-to-content { display: none; } /* ── 13. Bloc "Articles connexes" injecte en double par script ─────────── custom-css-js 33460 (Maillage Interne Automatique, actif) insere en JS, sur CHAQUE article, un second bloc "Articles connexes qui pourraient vous interesser" juste apres le contenu — confirme en navigateur reel sur cet article (2026-09-05) : deux sections de suggestions coexistent, ".kairos-lies" (server, brand or/nuit) et ".kairos-related-articles" (JS, palette bleue #2563eb etrangere a la charte). Masque ici plutot que desactive a la source (fichier custom-css-js hors perimetre de ce lot) : voir L5-RAPPORT.md pour la recommandation (retirer l'extrait 33460 ou le faire sortir tot s'il detecte deja ".kairos-lies"). */ body.single-post .kairos-related-articles { display: none; } /* ── 14. Boite auteur (template partage id 29852) : harmonisation legere ── Hors perimetre typographique principal (DESIGN ne specifie pas la boite auteur pour ce lot) — alignement minimal de police pour eviter un dernier ilot en Cabo Rounded juste avant le pied. */ [data-elementor-id="29852"] .elementor-heading-title, [data-elementor-id="29852"] .elementor-widget-text-editor p { font-family:'Inter Tight','Inter Tight Repli',system-ui,sans-serif !important; } /* !important : meme regle Kit (".elementor-heading-title{font-family:'Cabo Rounded Regular'}") que section 1, ce template porte son propre wrapper ".elementor-location-single" hors de [data-elementor-type="single-post"] (verifie : data-elementor-type="section" sur ce wrapper), donc hors des selecteurs deja ecrits plus haut — regle separee, necessaire. */ /* ── Revue design finale 05/09 ─────────────────────────────────────────── */ /* B3 : le titre « A propos de l'auteur » du gabarit Elementor rendait en nuit sur nuit (1,01:1). L'element 15e5bbc appartient au gabarit, stable sur les 39 articles. */ body.single-post .elementor-element-15e5bbc .elementor-heading-title{color:#f3efe6!important} /* C5 : le prefixe « | » du widget post-info rendait sans son membre gauche. */ body.single-post .elementor-post-info__item-prefix{display:none!important} /* C3 : corps d'article a 83 caracteres par ligne ; plafond de la spec (72ch). */ body.single-post .elementor-widget-theme-post-content p, body.single-post .elementor-widget-theme-post-content li{max-width:72ch}