/* * LMI — règles valables sur tout le site. * Ce fichier n'accueille que ce qui ne se rattache à aucun gabarit. */ /* Un tableau large débordait de l'écran : mesuré à 500 px sur * /comparatifs/meilleur-courtier-en-ligne/, le document faisait 519 px de * large pour une fenêtre de 500. WordPress sort les tableaux dans un *
sans défilement ; le tableau pousse donc * la page entière au lieu de défiler dans son cadre. * Le `tabindex` n'est pas posé ici : c'est au balisage de le faire pour que * la zone défilante soit atteignable au clavier (à voir avec Antoine). */ figure.wp-block-table { max-width: 100%; overflow-x: auto; } /* --------------------------------------------------------------------------- * Bloc « Pourquoi nous faire confiance ? » (composant bloc-confiance du cœur) * * Il vit dans la colonne de gauche des articles, avis, classements et duels * (Element 242 « Bibliothèque : colonne-guide »). Le cœur lui donne sa boîte * — fond surface, rayon 16, filet à gauche, 24 px de marge intérieure, mesurés * — et on ne la retouche pas : elle est commune à sept composants. * * En revanche son CONTENU sortait aux tailles du corps de texte, loin de la * maquette (5-Composants-partages/Pourquoi-nous-faire-confiance.html) : * · titre mesuré en Newsreader 32 px sur 77 px de haut, la maquette le veut * en Public Sans 16/800 avec le bouclier à gauche ; * · les quatre chiffres empilés sur UNE colonne (le cœur force * `grid-template-columns: minmax(0,1fr)` dès que le composant est dans une * colonne latérale) alors que la maquette les met en `auto-fit` de 120 px, * soit 2 × 2 — mesuré : 311 px de large utiles, donc deux colonnes ; * · aucune pastille autour d'un chiffre, légendes à 14 px au lieu de 12 ; * · les deux liens de bas de bloc collés l'un à l'autre, en couleur d'accent, * sans le soulignement pointillé de la maquette. * * Les couleurs passent par les jetons, donc le mode sombre suit tout seul : la * pastille d'un chiffre prend le fond de page (--eldorado-fond) sur la surface * de la carte, exactement le rapport de la maquette (#F5F8FD sur #FFFFFF). */ /* Titre : 16/800 et le bouclier de la maquette, posé en masque pour rester * dans la couleur d'accent sans alourdir le balisage d'un SVG en ligne. */ [data-eld-composant="bloc-confiance"] > h2, [data-eld-composant="bloc-confiance"] h2.wp-block-heading { display: flex; align-items: center; gap: 10px; margin: 0 0 8px; font-family: var(--eldorado-police-texte); font-size: 1rem; font-weight: 800; line-height: 1.3; } [data-eld-composant="bloc-confiance"] h2.wp-block-heading::before { content: ""; flex: 0 0 auto; width: 22px; height: 22px; background-color: var(--eldorado-accent); -webkit-mask: var(--lmi-icone-bouclier) center / contain no-repeat; mask: var(--lmi-icone-bouclier) center / contain no-repeat; } [data-eld-composant="bloc-confiance"] { --lmi-icone-bouclier: url('data:image/svg+xml;utf8,'); } /* Les chiffres : on reprend la formule de la maquette plutôt que le nombre de colonnes * du cœur, pour que la grille suive la largeur réelle de la colonne. * ⚠️ Correction d'une affirmation fausse de ma part : j'avais écrit que « le cœur les * force sur une colonne alors que la maquette en veut deux ». Ce n'était vrai que tant * que notre colonne faisait 360 px. Mesuré dans la maquette, colonne de 260 : la grille * fait **218 px et une seule colonne**, les quatre chiffres empilés. À 260 px les deux * écritures donnent donc le même résultat ; celle-ci passera d'elle-même à deux colonnes * si la colonne s'élargit un jour. */ [data-eld-composant="bloc-confiance"] .eldorado-bib-chiffres, .sidebar [data-eld-composant="bloc-confiance"] .eldorado-bib-chiffres { grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 8px; margin: 10px 0 12px; } [data-eld-composant="bloc-confiance"] .eldorado-bib-chiffre { padding: 10px 12px; border-radius: 10px; background-color: var(--eldorado-fond); } [data-eld-composant="bloc-confiance"] .eldorado-bib-chiffre-valeur { font-family: var(--eldorado-police-texte); font-size: 1.25rem; font-weight: 800; line-height: 1.15; color: var(--eldorado-accent); } [data-eld-composant="bloc-confiance"] .eldorado-bib-chiffre-legende { font-size: 0.75rem; line-height: 1.35; } /* L'engagement éditorial : 14 px comme la maquette, le lien en gras d'accent. * WordPress enveloppe le contenu d'un groupe dans .wp-block-group__inner-container : * les deux paragraphes ne sont donc pas enfants DIRECTS du composant (mesuré). On vise * les deux formes, pour rester juste si cette enveloppe disparaît un jour. */ [data-eld-composant="bloc-confiance"] > p, [data-eld-composant="bloc-confiance"] > * > p { margin: 0 0 10px; font-size: 0.875rem; line-height: 1.6; } [data-eld-composant="bloc-confiance"] > p a, [data-eld-composant="bloc-confiance"] > * > p a { font-weight: 700; text-decoration: none; } /* Les deux liens de bas de bloc : soulignés en pointillé, côte à côte, et qui * passent à la ligne plutôt que de déborder d'une colonne de 360 px. */ [data-eld-composant="bloc-confiance"] .lmi-confiance-liens { display: flex; flex-wrap: wrap; gap: 6px 16px; margin: 0; } [data-eld-composant="bloc-confiance"] .lmi-confiance-liens a { border-bottom: 1px dashed var(--eldorado-bordure-forte); font-size: 0.875rem; font-weight: 700; color: var(--eldorado-texte); text-decoration: none; } [data-eld-composant="bloc-confiance"] .lmi-confiance-liens a:hover, [data-eld-composant="bloc-confiance"] .lmi-confiance-liens a:focus-visible { border-bottom-style: solid; color: var(--eldorado-accent); } /* Colonne de gauche en mobile : elle passe pleine largeur sous 768 px, et rien ne * lui donne de marge latérale — mesuré à 500 px : la carte de confiance allait de * 0 à 500, bord à bord de l'écran, quand le texte de l'article commence à 30 px * (c'est `.inside-article` qui porte cette marge, pas la colonne). On aligne donc * le bord des cartes de la colonne sur le bord du texte, comme la maquette aligne * la TrustBox sur sa prose. */ @media (max-width: 768px) { .inside-left-sidebar { padding-inline: 30px; } /* La colonne de droite des rubriques a le meme defaut : mesuree a 500 px, la carte * de confiance allait de 0 a 500 quand les cartes d'articles sont a x=16. */ .inside-right-sidebar { padding-inline: 16px; } /* L'article, lui, n'a que 10 px de marge mobile la ou le classement en a 30 * (mesure a 500 px : texte a x=10 sur l'article, x=30 sur le comparatif). * On suit le gabarit voisin plutot que d'imposer une valeur unique ; cet ecart * entre gabarits est un sujet a part, a remonter a Antoine. */ .single-post .inside-left-sidebar { padding-inline: 10px; } } /* --------------------------------------------------------------------------- * Largeur de la colonne de gauche : 260 px et une gouttière de 48, comme la maquette. * * Mesuré des deux côtés à 1280 px. Maquette (Page-SEO, Page-avis, Page-comparatif) : * `.side` **260 px**, gouttière **48**, colonne de texte **828**. Site avant ce * correctif : colonne **360 px** (GeneratePress la pose à 30 % de 1200), **aucune * gouttière** — les cartes de la colonne étaient 100 px trop larges et collées au * texte, et le texte de l'article tombait à 800 px au lieu de 828. * * On garde une boîte de 308 px (260 + 48 de gouttière intérieure) et on rend les * 52 px restants au texte. Mesure attendue : colonne 260, texte ~852. * * GeneratePress écrit ces largeurs dans sa feuille dynamique en ligne * (`.is-left-sidebar { width: 30% }` et `.site-content .content-area { width: 70% }`). * On les dépasse par la spécificité, jamais par `!important` — et seulement sur les * pages qui ont VRAIMENT une colonne de gauche : `:has()` ajoute la spécificité de son * argument, ce qui suffit à battre la règle du thème sans toucher aux archives, qui * partagent la même classe `.content-area` avec une colonne de DROITE. * * ⚠️ Sous 769 px, le thème repasse les deux colonnes en `width: auto` pour les empiler. * Nos règles sont donc bornées : sans la requête de média, leur spécificité écraserait * cet empilement et la colonne resterait à 308 px sur un téléphone. */ @media (min-width: 769px) { .site-content:has(.is-left-sidebar) .is-left-sidebar { width: 308px; padding-right: 48px; box-sizing: border-box; } .site-content:has(.is-left-sidebar) .content-area { width: calc(100% - 308px); } } /* Même affaire pour la colonne de DROITE des rubriques et des étiquettes. Relevé dans les * maquettes : catégorie **320 px + gouttière 36**, étiquette 310 + 36, auteur 320 + 44. * Le site la pose à **360 px sans gouttière**, collée aux cartes d'articles. * Boîte de 356 (320 + 36), donc contenu principal 844 au lieu de 840 : le texte ne bouge * pratiquement pas, la colonne retrouve sa largeur et son air. * Le `:not(:has(.is-left-sidebar))` évite de toucher une page qui aurait les deux. */ @media (min-width: 769px) { .site-content:has(.is-right-sidebar) .is-right-sidebar { width: 356px; padding-left: 36px; box-sizing: border-box; } .site-content:has(.is-right-sidebar):not(:has(.is-left-sidebar)) .content-area { width: calc(100% - 356px); } } /* ------------------------------------------------------------------ * * X. Typographie du corps de texte : design.css applique la police des TITRES * ------------------------------------------------------------------ */ /* 🔴 Mesuré le 04/11/2026 sur tous les gabarits : chaque paragraphe et chaque puce d'article sort en **Newsreader** (la police des titres, une serif) au lieu de Public Sans. La règle fautive est dans le fichier généré : .eldorado-design .entry-content p, .eldorado-design .entry-content li { font-family: var(--eldorado-police-titres); } — c'est la variable des TITRES. La maquette, elle, ne pose aucune police sur `.prose p` (donc Public Sans par héritage) et réserve Newsreader aux h1/h2/h3. Mesuré côté maquette : prose = Public Sans 18 px / 31,5 px ; côté site : Newsreader 19 px / 32,3 px. Le fichier est régénéré par le Studio : on corrige ici, en montant d'un cran la spécificité (classe racine doublée, 0,3,1 contre 0,2,1) plutôt qu'en le modifiant. Les titres ne sont pas touchés : ils restent en Newsreader. */ .eldorado-design.eldorado-design .entry-content :is(p, li) { font-family: var(--eldorado-police-texte); } /* Taille de la prose : la maquette pose 18 px / 1,75, le fichier généré 19 px / 1,7. Volontairement limité aux enfants DIRECTS du contenu : les composants de la bibliothèque et le sommaire ont leurs propres échelles, qu'on ne veut pas écraser. */ .eldorado-design.eldorado-design .entry-content > p, .eldorado-design.eldorado-design .entry-content > :is(ul, ol) > li, .eldorado-design.eldorado-design .entry-content [data-eld-composant="etapes"] li { font-size: 1.125rem; line-height: 1.75; } /* Le sommaire repliable du mobile vit DANS `.entry-content` : la même règle lui imposait 19 px alors que sa liste est réglée à 14 px. On lui rend l'héritage. */ .eldorado-design.eldorado-design .entry-content .intoc li { font-size: inherit; line-height: 1.4; } /* ------------------------------------------------------------------ * * 5. La page simple : une mesure de lecture * ------------------------------------------------------------------ * * * Signalé par le user, capture à l'appui. Une page ordinaire — Livret A & LEP, * Contact, Qui sommes-nous, les 161 pages d'attente — sortait avec la colonne de * droite remplie des widgets par défaut de WordPress : Rechercher, Articles * récents, Commentaires récents. Personne ne les avait choisis, ce sont ceux que * WordPress installe tout seul. Ils ont été rendus inactifs, et le mu-plugin (§21) * retire la colonne, qui restait vide. * * Restait la mesure. Sans colonne, le texte s'étalait sur les 1 120 px utiles du * conteneur : mesuré, 180 caractères par ligne, trois fois la mesure confortable. * * La maquette n'a pas de modèle de page ordinaire. On reprend donc son gabarit * éditorial (2-Templates-editoriaux/Page-SEO.html) : bandeau blanc pleine largeur * pour le fil d'Ariane et le titre (partagé avec l'article, article.css §1), puis * la prose sur le fond de page. Les largeurs sont celles de la maquette — * `article.prose` à 760 px, `h1` à 900, chapô à 820 — mais la page n'ayant pas la * colonne de sommaire de 260 px qui décale l'article vers la droite, la colonne est * CENTRÉE : alignée à gauche, elle laisserait 360 px de vide inexpliqué. */ body.lmi-page-simple .entry-content { max-width: 760px; margin-inline: auto; } /* Le bandeau aligne son contenu sur la même colonne, sinon le titre part à gauche pendant que le texte est au centre. Le bandeau lui-même reste pleine largeur. */ body.lmi-page-simple .lmi-heros-contenu { max-width: 760px; margin-inline: auto; } /* Sous 860 px la maquette repasse tout en pleine largeur du conteneur. */ @media (max-width: 860px) { body.lmi-page-simple .entry-content, body.lmi-page-simple .lmi-heros-contenu { max-width: none; } } /* Le bandeau vit HORS de l'article : sous 768 px, où .site-content touche les bords de l'écran, il lui faut la gouttière que GeneratePress donne à `.inside-article`, sinon le titre colle au bord. Mesuré : 30 px sur une page (la règle mobile de GP), là où l'article la ramène à 10 — d'où une valeur propre ici plutôt que la reprise de celle d'article.css. */ @media (max-width: 768px) { body.lmi-page-simple .lmi-heros-contenu { padding-inline: 30px; } } /* ------------------------------------------------------------------ * * 6. Deux écarts au design system, mesurés puis corrigés * ------------------------------------------------------------------ */ /* 6.1 — Les surfaces sont GRISÉES là où le design system les veut BLANCHES. * * Mesuré sur le guide : toute carte du site (FAQ, bloc de confiance, bandeau * héros, colonne de sommaire…) sort en `color-mix(#E1E8F4 30%, #F5F8FD)` = * #EFF3FA, soit à peine distinguable du fond de page #F5F8FD. Le design system * (8-Design-system/Design-system.html) dessine partout `#FFFFFF` avec une * bordure `1px solid #E1E8F4` sur un fond `#F5F8FD`. * * La valeur grisée vient du CŒUR, pas du plugin de design : * `bibliotheque.css` pose `--eldorado-surface: color-mix(in srgb, * var(--eldorado-bordure) 30%, var(--eldorado-fond))`. C'est un défaut * raisonnable pour un site quelconque, pas la couleur de celui-ci. * * ⚠️ L'override se pose sur `:root` (0,1,0) EXPRÈS, et surtout pas sur * `html:not(.dark)` : le cœur bascule le mode sombre depuis `html.dark` * (0,1,1), qui l'emporte. Le sombre reste donc dérivé de ses propres jetons, * par construction. C'est le point d'extension documenté du cœur — il attend * précisément un `:root` du plugin de design. */ :root { --eldorado-surface: #FFFFFF; } /* 6.2 — Le H3 de la prose : mauvaise police, mauvaise taille, mauvaise graisse. * * Mesuré : Newsreader 18px/600, alors que le design system le veut en * Public Sans 22px/800 (Styles-de-texte.html) et que Page-SEO.html en montre * 21px/700, également en Public Sans. Les deux références disent la même chose * à un pixel et un cran de graisse près : le H3 doit TRANCHER sur le texte * courant (18px), or à 18px/600 en serif il s'y confond. On suit le design * system, qui fait foi (même raisonnement que pour le H1, cf. article.css). * * Portée volontairement limitée aux titres de la prose (`>`), pour ne pas * toucher aux H3 internes des composants, qui ont chacun leur maquette. * Spécificité (0,4,1) : `design.css` pose la sienne à (0,2,1) sur les titres. */ .eldorado-design.eldorado-design .entry-content > h3, .eldorado-design.eldorado-design .lmi-heros-contenu > h3 { font-family: var(--eldorado-police-texte, 'Public Sans'), sans-serif; font-size: 22px; font-weight: 800; line-height: 1.3; } @media (max-width: 768px) { /* Échelle mobile du design system : h1 34, h2 26, h3 20. */ .eldorado-design.eldorado-design .entry-content > h3 { font-size: 20px; } } /* ------------------------------------------------------------------ * * 7. Formats partenaires : la carte de colonne (B1 du kit) * ------------------------------------------------------------------ * * * Kit : 7-Formats-partenaires, format B1 — « 300 × 260, sous le sommaire, * colonne collante, mobile : masquée ». */ .lmi-colonne-partenaire { margin-top: 20px; } /* Collante avec le sommaire : le thème pose déjà `position: sticky` sur la colonne entière (classe `sticky-sidebar` du corps), la carte suit donc le défilement sans règle supplémentaire. On ne réécrit rien ici — une deuxième déclaration `sticky` imbriquée annulerait la première. */ /* Masquée en mobile, comme le kit le demande : sous 768 px la colonne passe sous l'article et la carte se retrouverait loin du texte qu'elle accompagne, après le sommaire déplié. Le bandeau dans le corps (A1), lui, reste. */ @media (max-width: 768px) { .lmi-colonne-partenaire { display: none; } } /* ------------------------------------------------------------------ * * 8. Médailles du Top 3 (E1, E2, E3 du kit) * ------------------------------------------------------------------ * * * Kit : « Les médailles or, argent et bronze rendent le Top 3 lisible en un * coup d'œil. » Le kit teinte la LIGNE entière des trois premiers. * * ⚠️ Le classement de ce site est celui du CŒUR (`eldorado-bib-classement`), * pas celui du plugin partenaires : vérifié sur le comparatif, aucune classe * `eldpart-ligne` n'y est rendue, le plugin n'y injecte que les logos. Les * médailles posées dans `eldorado-partners` ne s'appliquent donc pas ici. * * On s'accroche aux identifiants `#rang-1`, `#rang-2`, `#rang-3` que le cœur * pose lui-même sur chaque ligne — jamais à `:nth-child()`, qui se décalerait * dès qu'une ligne est masquée. * * Les teintes sont celles du kit, en dur : l'or n'est pas une couleur de * marque, il ne suit pas l'accent du site. La couleur de texte est forcée * parce que le fond, lui, reste clair même en mode sombre. */ .eldorado-bib-classement-liste > #rang-1, .eldorado-bib-classement-liste > #rang-2, .eldorado-bib-classement-liste > #rang-3 { color: #0e1b2e; } .eldorado-bib-classement-liste > #rang-1 { background: #fff6da; } .eldorado-bib-classement-liste > #rang-2 { background: #f1f4f7; } .eldorado-bib-classement-liste > #rang-3 { background: #fbeee3; } .eldorado-bib-classement-liste > #rang-1 .eldorado-bib-classement-rang { background: #fff6da; border: 1px solid #e9d28a; color: #8a6a12; } .eldorado-bib-classement-liste > #rang-2 .eldorado-bib-classement-rang { background: #f1f4f7; border: 1px solid #cbd5e1; color: #475569; } .eldorado-bib-classement-liste > #rang-3 .eldorado-bib-classement-rang { background: #fbeee3; border: 1px solid #e3c3a5; color: #9a5b18; } /* ------------------------------------------------------------------ * * 9. D1 — la carte « Offre du mois » du méga-menu * ------------------------------------------------------------------ * * * Kit : 280 × 260, colonne de droite du panneau de la rubrique concernée. * Elle est rendue comme une colonne de plus du méga-menu, donc le compte de * colonnes du cœur la prend en compte (cf. mu-plugin §19). */ .lmi-mega-offre { max-width: 280px; } /* L'encart du plugin est dessiné pour une colonne latérale de page : dans un panneau de menu, il n'a ni la même largeur ni le même fond. */ .lmi-mega-offre .eldpart-encart { margin: 0; padding: 16px; } /* Sous 768 px le panneau passe en une seule colonne : la carte descend en bas du menu, comme le kit le demande, sans règle supplémentaire. */ /* ------------------------------------------------------------------ * * 10. Les formats partenaires posés par le site * ------------------------------------------------------------------ */ /* A2 — l'encadré d'offre sous le verdict d'un avis. */ .lmi-offre-verdict { margin: 24px 0; } /* B2 — le mini-classement sous « Tendances », dans la colonne des archives. */ .lmi-colonne-top3 { margin-top: 20px; } /* F2 — le bandeau de logos, au-dessus du pied. Il vit hors du conteneur de contenu : il lui faut la largeur et les marges du site. */ .lmi-bandeau-logos { width: min(1200px, 100% - 40px); margin: 0 auto 40px; } @media (max-width: 768px) { .lmi-bandeau-logos { width: calc(100% - 20px); margin-bottom: 28px; } /* 🔴 DÉFAUT DU CŒUR (eldorado-partners) : sous 768 px, la bande de logos passe en `overflow-x: auto` pour défiler au doigt — c'est voulu, le kit le demande. Mais son débordement **se propage quand même au document** : mesuré sur l'accueil en 390 px, la page défilait de 336 px vers la droite, 336 px de vide à côté du site, avec une barre horizontale. ⚠️ Les remèdes évidents ne marchent PAS, tous mesurés dans la page : - `overflow: hidden` sur la bande → rogne le dessin, le document défile toujours de 336 px ; - `overflow: clip` → la bande cesse de rétrécir (309 → 678 px) et déborde pour de bon ; - `overflow-x: hidden` sur notre enveloppe, `min-width: 0`, `max-width: 100%`, `flex-basis: 0` → sans effet, ou pire. Seul le confinement de peinture arrête la propagation en gardant la bande à 309 px ET défilable. `paint` suffit, inutile d'aller à `content`. Touche tout client servant le bandeau de logos F2 en mobile. */ .lmi-bandeau-logos .eldpart-logos-bande { contain: paint; } } /* ------------------------------------------------------------------ * * 11. Les sommaires des pages d'attente (§24 du mu-plugin) * ------------------------------------------------------------------ */ /* 🔴 Toutes les règles de texte de ce bloc portent une double classe sur `.eldorado-design`. C'est le piège déjà rencontré trois fois sur ce site : le `design.css` généré pose `font-size` ET `font-weight` sur `.eldorado-design .entry-content p, li` — soit (0,2,1). Une règle à une seule classe perd, en silence. Ici on est à (0,4,0), donc on gagne. */ .eldorado-design.eldorado-design .entry-content .lmi-sommaire-chapo { font-family: var(--eldorado-police-texte, 'Public Sans'), sans-serif; font-size: 19px; font-weight: 400; line-height: 1.6; color: var(--eldorado-texte); margin-bottom: 24px; } /* L'avertissement. Un filet accentué à gauche plutôt qu'un bloc de couleur : la règle 5 du kit interdit d'empiler les aplats, et la page porte déjà la barre promo partenaire. */ .lmi-sommaire-attente { border-left: 3px solid var(--eldorado-accent); background: var(--eldorado-fond); border-radius: var(--eldorado-rayon-controle, 6px); padding: 14px 18px; margin: 0 0 32px; } .eldorado-design.eldorado-design .entry-content .lmi-sommaire-attente p { font-size: 15px; font-weight: 400; line-height: 1.55; color: var(--eldorado-texte-doux); margin: 0; } /* Les listes de contenus réels. Pas de puce : chaque entrée est une ligne cliquable séparée par un filet, comme les listes de rubrique du site. */ .lmi-sommaire-liste { list-style: none; margin: 0 0 32px; padding: 0; } .eldorado-design.eldorado-design .entry-content .lmi-sommaire-liste li { margin: 0; padding: 0; font-size: 16px; font-weight: 400; border-bottom: 1px solid var(--eldorado-bordure); } .eldorado-design.eldorado-design .entry-content .lmi-sommaire-liste li:last-child { border-bottom: 0; } /* 🔴 Mesuré au navigateur, 1 513 règles parcourues : le soulignement vient de `.eldorado-design .entry-content li a` dans le design.css généré, soit (0,3,1). Une règle à une classe perdait. Celle-ci est à (0,5,1). Une liste de titres soulignés ressemble à un dépôt de liens ; les listes du site, elles, soulignent au survol seulement. ⚠️ Aucune `color` ici, et c'est voulu. Le cœur pose `html:not(.dark) body.eldorado-contenu-habille .entry-content a:not(...)`, soit (0,4,3) contre (0,4,2) pour la règle ci-dessous : il gagne d'un seul élément, en mode clair seulement. Imposer une couleur donnait donc deux rendus selon le thème. On laisse la couleur de lien du site décider. */ .eldorado-design.eldorado-design .entry-content .lmi-sommaire-liste li a { display: block; padding: 12px 0; font-family: var(--eldorado-police-texte, 'Public Sans'), sans-serif; font-size: 16px; font-weight: 600; line-height: 1.45; text-decoration: none; } .eldorado-design.eldorado-design .entry-content .lmi-sommaire-liste li a:hover, .eldorado-design.eldorado-design .entry-content .lmi-sommaire-liste li a:focus-visible { color: var(--eldorado-accent); text-decoration: underline; } /* Le pied : les deux sorties de la page. */ .eldorado-design.eldorado-design .entry-content .lmi-sommaire-pied { margin: 32px 0 0; padding-top: 20px; border-top: 1px solid var(--eldorado-bordure); font-size: 15px; font-weight: 600; } .lmi-sommaire-pied a { color: var(--eldorado-accent); } .lmi-sommaire-pied span { margin: 0 8px; color: var(--eldorado-texte-doux); } .lmi-sommaire-top3 { margin: 0 0 32px; } @media (max-width: 768px) { .eldorado-design.eldorado-design .entry-content .lmi-sommaire-chapo { font-size: 17px; } .lmi-sommaire-attente { padding: 12px 14px; margin-bottom: 24px; } } /* --------------------------------------------------------------------------- * En-tete : faire tenir les 11 rubriques sur un seul rang * * Le menu du Studio etait dessine pour 9 rubriques. « Actualite » et * « Avis & Test », ajoutees le 05/11 avec la reprise des 587 articles, le font * deborder : mesure a 1400 px, il faut 1376 px d entrees dans un conteneur * plafonne a 1208, donc la barre passait sur deux rangs et « Avis & Test » se * retrouvait seule en bas. Le conteneur etant plafonne, le debordement ne * depend pas de la largeur de l ecran : il se produit a toute largeur. * * On recupere les 168 px manquants sans toucher a la taille du texte, qui * serait le changement le plus visible : chevron 32 -> 24 px (le dessin qu il * contient n en fait que 20), ecart 8 -> 2, marge interne 8 -> 5. Il reste * 12 px entre deux libelles. * * ATTENTION a la specificite : le coeur ecrit « .eldorado-bib-en-tete * .eldorado-bib-en-tete-menu > ul », soit DEUX classes. Un premier essai a * une seule classe n a rien change sur l ecart ni sur la marge interne (seul * le chevron, deja a deux classes, avait pris). La classe repetee ci-dessous * n est pas une coquille : elle porte la specificite a trois classes, ce qui * tranche sans dependre de l ordre de chargement des feuilles. * * Borne a 769 px : en dessous, le coeur replie le menu derriere le bouton * « Menu », ou ces trois valeurs n ont plus le meme role. * --------------------------------------------------------------------------- */ @media (min-width: 769px) { .eldorado-bib-en-tete.eldorado-bib-en-tete .eldorado-bib-en-tete-menu > ul { column-gap: 2px; } .eldorado-bib-en-tete.eldorado-bib-en-tete .eldorado-bib-en-tete-menu > ul > li > a { padding-right: 5px; padding-left: 5px; } .eldorado-bib-en-tete.eldorado-bib-en-tete .eldorado-bib-en-tete-menu > ul > li > .eldorado-bib-en-tete-chevron { width: 24px; } } /* --------------------------------------------------------------------------- * Mobile : un tableau large ne doit pas elargir la colonne d article * * Mesure du 05/11 sur iPhone 13 (390 px) : la colonne d article sortait a * 580 px, et comme la page NE DEFILE PAS horizontalement (le clipping est * actif), 190 px d article etaient simplement coupes et inatteignables. * Visible sur la capture : la colonne « Fortune » du tableau Forbes tronquee * au bord de l ecran. Touche 296 contenus publies, dont 292 articles, la * moitie du site : les articles repris de Ghost contiennent beaucoup de * tableaux de 8 a 12 colonnes. * * Cause : `.site-content` est en flex (GeneratePress) et `.content-area` est * un element flex reste en `min-width: auto` — il s elargit donc a la largeur * de son plus gros contenu au lieu de laisser ce contenu deborder. Deja * rencontre sur mondividende en septembre, meme mecanique. * * ATTENTION : ici `min-width: 0` ne suffit pas, et `width: 100%` non plus -- * les deux ont ete poses, mesures, et la colonne est restee a 580 px. Les six * candidats ont ete essayes dans la page : seul **`max-width: 100%`** ramene la * colonne a 390. (`min-width:0` sur le tableau, `table-layout:fixed`, * `overflow-x` sur `.entry-content` ou sur `.content-area` : aucun effet.) * * Et pour que les colonnes coupees redeviennent atteignables, le tableau * defile dans son propre cadre jusqu a 1024 px. * --------------------------------------------------------------------------- */ .content-area { min-width: 0; max-width: 100%; box-sizing: border-box; } @media (max-width: 1024px) { .entry-content table, article .wp-block-table > table { display: block; width: 100%; max-width: 100%; overflow-x: auto; } } /* ------------------------------------------------------------------ * * 12. Le bloc blanc d'un contenu : des coins carrés sur un fond teinté * ------------------------------------------------------------------ */ /* Signalé par le user, deuxième fois : il l'avait demandé pour la page de recherche, je ne l'avais corrigé QUE là. Mesuré sur un article : `.inside-article` sort en `border-radius: 0` — un rectangle blanc à angles vifs posé sur le fond `#f5f8fd`, alors que **tout le reste de la page est arrondi** : le sommaire à gauche, l'image à la une à l'intérieur même du bloc, les encadrés, les cartes. Le cœur ne traite `.inside-article` en carte **que dans les listes** (`[data-eld-composant="cartes-article"]`, bibliotheque-listes.css:48) et sur la page sans résultat. Sur un contenu seul, personne ne l'habille. On reprend le jeton du cœur, `--eldorado-rayon-bloc` (16 px ici), pour rester aligné le jour où le Studio le change. ⚠️ Le sélecteur passe par `.site-main > article >` ET par les classes de corps : les cartes de liste sont dans `.eldorado-bib-cartes`, elles ne peuvent donc pas être touchées, et une archive n'est ni `.single` ni `.page`. Vérifié sur les deux. */ body:is(.single, .page) .site-main > article > .inside-article { border-radius: var(--eldorado-rayon-bloc); }