/* ===================================================================================================== FINITIONS DU RELEVÉ VISUEL — 2026-10-07 (feu vert de Thomas, relevé audit-seo-final/RELEVE-VISUEL-2026-10-07.md) Chargé UNIQUEMENT sur les 33 pages du plan (accueil, 3 hubs, 29 piliers) et, depuis le 07/10/2026 après-midi (feu vert de Thomas), sur les ARTICLES DU BLOG (même gabarit, mêmes défauts), en dernier dans le , par inc/finitions-releve.php, qui pose aussi la classe body.jp-fin-1007. Les autres pages (inscription, archive du blog…) ne reçoivent ni ce fichier ni la classe : elles ne changent pas. (Corps de texte et intros JUSTIFIÉS : décision de Thomas du 07/10/2026, justifié maintenu après comparaison avec l'alignement à gauche ; posé à la source dans jp-shell.css, § B1.2. Aucune règle d'alignement ici.) Depuis le 07/10/2026 au soir, aussi /teleprospection-au-resultat (page hors plan au même gabarit). Aucun texte n'est modifié ici : seulement la mise en forme. Les chiffres du bloc « … en quelques chiffres » ne sont pas touchés (seule la police de son titre suit celle de tous les titres, cf. § 2.2). Retour arrière : retirer le require de inc/finitions-releve.php dans jp-shell.php (ce fichier n'est alors plus chargé). ===================================================================================================== */ /* ---- 2.2 Police des titres ------------------------------------------------------------------------ Les titres, boutons et libellés demandent « DM Sans », qui n'a jamais été chargée : le navigateur retombe sur Arial (Arial Black en 800). Plutôt que de télécharger une 2e police (2 fichiers de plus sur chaque page), le nom « DM Sans » est servi par le fichier de Plus Jakarta Sans DÉJÀ chargé partout (police variable 200-800, même adresse, donc déjà en cache) : titres et texte ont enfin la même famille, zéro octet de plus. */ @font-face { font-family: "DM Sans"; src: url("/wp-content/plugins/jp-shell/assets/fonts/plus-jakarta-sans-latin-var.woff2") format("woff2"); font-weight: 200 800; font-style: normal; font-display: swap; } /* ---- 1.1 Encadré « L'essentiel » du haut des piliers : tout son contenu, sans défilement caché ------ Il était plafonné (290 px, 240 px au téléphone) et défilait à l'intérieur sans aucun signe : le lecteur croyait le texte tronqué. C'est le résumé de la page (3 à 6 puces) : on l'affiche en entier, sans « Lire la suite » (un clic de plus pour quelques lignes, et un bouton qui dépendrait du JavaScript, que WP Rocket diffère). */ body.jp-fin-1007 #jp-pilier-do-root .sf-howto { max-height: none !important; } body.jp-fin-1007 #jp-pilier-do-root .sf-howto-list { overflow: visible !important; flex: 0 0 auto; } /* encadré long (7 puces et plus, ex. travail à domicile) sur ordinateur : deux colonnes, pour ne pas allonger l'intro */ @media (min-width: 1100px) { body.jp-fin-1007 #jp-pilier-do-root .sf-howto-list:has(> li:nth-child(7)) { display: block; columns: 2; column-gap: 26px; } body.jp-fin-1007 #jp-pilier-do-root .sf-howto-list:has(> li:nth-child(7)) > li { break-inside: avoid; margin-bottom: 9px; } } /* ---- 2.1 Intros : JUSTIFIÉES comme le corps (décision de Thomas du 07/10/2026 : justifié maintenu, comparé avec l'alignement à gauche). Les deux règles « text-align: left » posées ici à 14:20 ont été retirées le 07/10 au soir : les intros reprennent l'alignement de leur gabarit (justifié, coupure des mots au téléphone). ------------------- */ /* ---- 1.7 Baromètre : en-tête du tableau dessiné à la main --------------------------------------------- Ce tableau porte ses couleurs dans ses attributs style (fond navy sur la LIGNE d'en-tête, texte blanc), mais une vieille règle de jp-shell.css peint chaque cellule d'en-tête en gris / bleu pâle par-dessus : blanc sur gris clair. (Ce n'est pas le nouveau style commun des tableaux : il exclut justement les tableaux à attribut style.) On rend les cellules transparentes : les couleurs dessinées à la main réapparaissent ; une cellule qui a sa propre couleur (carte de chaleur) la garde (style en ligne prioritaire). */ body.jp-fin-1007 #jp-pilier-do-root .sf-section table[style] :is(th, td) { background-color: transparent; } body.jp-fin-1007 #jp-pilier-do-root .sf-section table[style] tbody tr:hover > :is(th, td) { background-color: transparent; } @media (min-width: 600px) { body.jp-fin-1007 #jp-pilier-do-root .sf-section table[style] thead th { white-space: nowrap; } } /* l'indication « ← faites défiler → » n'a pas lieu d'être sous un tableau dessiné qui tient dans l'écran (sans largeur minimale imposée) */ body.jp-fin-1007 #jp-pilier-do-root .sf-section table[style]:not([style*="min-width"])::after { content: none !important; display: none !important; } /* ---- 1.8 et 2.10 Extrait d'un fichier livré (tableau de 7 colonnes et plus) : des fiches, partout ------ 12 colonnes ne tiennent pas dans 824 px : le tableau défilait sans le dire. On affiche chaque ligne en fiche : 3 par rangée sur ordinateur, 2 sur tablette ; au téléphone, les fiches se feuillettent du doigt (la suivante dépasse à droite) au lieu de 4 500 px empilés. Le titre de la fiche est l'activité (une vraie information), la raison sociale masquée devient une ligne ordinaire. */ body.jp-fin-1007 #jp-pilier-do-root :is(.sf-section, .jp-hub-faq) table.jp-tab--large:not([style]) { display: block !important; overflow: visible !important; width: 100% !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; background: transparent !important; margin: 26px 0 30px; } body.jp-fin-1007 #jp-pilier-do-root :is(.sf-section, .jp-hub-faq) table.jp-tab--large:not([style]) caption { display: block; } body.jp-fin-1007 #jp-pilier-do-root :is(.sf-section, .jp-hub-faq) table.jp-tab--large:not([style]) thead { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; } body.jp-fin-1007 #jp-pilier-do-root :is(.sf-section, .jp-hub-faq) table.jp-tab--large:not([style]) tbody { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; } body.jp-fin-1007 #jp-pilier-do-root :is(.sf-section, .jp-hub-faq) table.jp-tab--large:not([style]) tr { display: flex !important; flex-direction: column; min-width: 0; background: #fff; border: 1px solid var(--module-border, #D9DDE3); border-radius: 16px; overflow: hidden; box-shadow: 0 1px 2px rgba(10,27,51,.04), 0 10px 24px -18px rgba(10,27,51,.22); } body.jp-fin-1007 #jp-pilier-do-root :is(.sf-section, .jp-hub-faq) table.jp-tab--large:not([style]) tr > * { display: block !important; width: auto !important; min-width: 0 !important; white-space: normal !important; padding: 6px 14px !important; border: 0 !important; border-radius: 0 !important; background: transparent !important; font-family: "Plus Jakarta Sans", sans-serif; font-size: 13px !important; font-weight: 500 !important; line-height: 1.45 !important; color: var(--ink, #0A1B33) !important; overflow-wrap: anywhere; text-align: left !important; } body.jp-fin-1007 #jp-pilier-do-root :is(.sf-section, .jp-hub-faq) table.jp-tab--large:not([style]) tr > :nth-child(3) { padding-top: 10px !important; } body.jp-fin-1007 #jp-pilier-do-root :is(.sf-section, .jp-hub-faq) table.jp-tab--large:not([style]) tr > :last-child { padding-bottom: 12px !important; } /* titre de la fiche = l'activité */ body.jp-fin-1007 #jp-pilier-do-root :is(.sf-section, .jp-hub-faq) table.jp-tab--large:not([style]) tr > :nth-child(2) { order: -1; padding: 12px 14px 11px !important; background: #F3F8FB !important; border-bottom: 1px solid #E3EBF1 !important; font-size: 14px !important; font-weight: 800 !important; line-height: 1.35 !important; } body.jp-fin-1007 #jp-pilier-do-root :is(.sf-section, .jp-hub-faq) table.jp-tab--large:not([style]) tr > :nth-child(1) { padding-top: 10px !important; } /* libellé devant chaque valeur, sur la même ligne */ body.jp-fin-1007 #jp-pilier-do-root :is(.sf-section, .jp-hub-faq) table.jp-tab--large:not([style]) tr > [data-label]::before { content: attr(data-label) " : " !important; display: inline !important; margin: 0 !important; font-family: "Plus Jakarta Sans", sans-serif; font-size: 12px !important; font-weight: 700 !important; letter-spacing: 0 !important; text-transform: none !important; color: var(--mute, #6B7785) !important; } body.jp-fin-1007 #jp-pilier-do-root :is(.sf-section, .jp-hub-faq) table.jp-tab--large:not([style]) tr > :nth-child(2)::before { content: none !important; } body.jp-fin-1007 #jp-pilier-do-root :is(.sf-section, .jp-hub-faq) table.jp-tab--large:not([style]) tr:hover > * { background: transparent !important; } body.jp-fin-1007 #jp-pilier-do-root :is(.sf-section, .jp-hub-faq) table.jp-tab--large:not([style]) tr:hover > :nth-child(2) { background: #F3F8FB !important; } @media (max-width: 979px) { body.jp-fin-1007 #jp-pilier-do-root :is(.sf-section, .jp-hub-faq) table.jp-tab--large:not([style]) tbody { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 640px) { body.jp-fin-1007 #jp-pilier-do-root :is(.sf-section, .jp-hub-faq) table.jp-tab--large:not([style]) tbody { display: flex !important; flex-direction: row; gap: 12px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; padding: 2px 2px 14px; scrollbar-width: thin; scrollbar-color: #9FB3C4 #E9EEF3; } body.jp-fin-1007 #jp-pilier-do-root :is(.sf-section, .jp-hub-faq) table.jp-tab--large:not([style]) tr { flex: 0 0 84%; scroll-snap-align: start; } } /* ---- 1.5 et 2.7 Témoignages ----------------------------------------------------------------------- Ordinateur : le ruban continu garde son principe, mais les cartes voisines s'effacent en douceur sur une bande plus large (plus de texte sectionné net), et les bords haut/bas des cartes ne sont plus rognés par la fenêtre du ruban. Téléphone : le ruban ne défile plus tout seul (cf. script des partials) ; une carte entière, centrée, les voisines dépassent à peine. */ body.jp-fin-1007 #jp-pilier-do-root .jp-hub-testimonials__viewport { padding-top: 6px !important; padding-bottom: 34px !important; margin-bottom: -28px !important; -webkit-mask-image: linear-gradient(90deg, transparent 0, rgba(0,0,0,.22) 6%, #000 21%, #000 79%, rgba(0,0,0,.22) 94%, transparent 100%) !important; mask-image: linear-gradient(90deg, transparent 0, rgba(0,0,0,.22) 6%, #000 21%, #000 79%, rgba(0,0,0,.22) 94%, transparent 100%) !important; } @media (max-width: 560px) { body.jp-fin-1007 #jp-pilier-do-root .jp-hub-testimonials__carousel { --slide: calc(100vw - 72px) !important; --gap: 12px !important; } /* largeur de carte calée sur la fenêtre du ruban (pas sur l'écran) : l'accueil a des marges, les hubs non */ body.jp-fin-1007 #jp-pilier-do-root .jp-hub-testimonials__viewport { container-type: inline-size; } @supports (width: 1cqw) { body.jp-fin-1007 #jp-pilier-do-root .jp-hub-testimonials__carousel { --slide: calc(100cqw - 36px) !important; } } body.jp-fin-1007 #jp-pilier-do-root .jp-hub-testimonials__viewport { -webkit-mask-image: none !important; mask-image: none !important; } } /* ---- 1.6 et 2.8 Accueil : galerie vidéo ------------------------------------------------------------- */ /* Téléphone / tablette : la légende de la vidéo prend sa place (elle était posée dans une rangée de hauteur 0 et la rangée de vignettes passait dessus) ; vignettes en carte verticale : titre lisible sur 2 lignes. */ /* (les vignettes sont des